From 2ef6b5468aebfbd4af76657b5222513a6199309e Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Sun, 8 Oct 2023 09:48:39 +0200
Subject: [PATCH] fix: ensure `hidden` attribute still works for every HTML
 component

---
 components/button/html/_mixin.scss            |  4 ++
 components/code-block/html/_mixin.scss        |  4 ++
 components/form-fieldset/css/_reset.scss      |  1 +
 components/form-fieldset/html/_mixin.scss     |  8 ++++
 .../storybook-html/src/Article.stories.tsx    | 47 ++++++++++++++-----
 .../storybook-html/src/Blockquote.stories.tsx | 22 ++++++++-
 .../storybook-html/src/Button.stories.tsx     | 22 ++++++++-
 .../storybook-html/src/Checkbox.stories.tsx   | 36 +++++++++++++-
 packages/storybook-html/src/Code.stories.tsx  | 22 ++++++++-
 .../storybook-html/src/CodeBlock.stories.tsx  | 24 ++++++++--
 .../storybook-html/src/Document.stories.tsx   | 31 ++++++++++--
 .../storybook-html/src/Emphasis.stories.tsx   | 22 ++++++++-
 .../src/FormFieldset.stories.tsx              | 27 +++++++++--
 .../storybook-html/src/FormLabel.stories.tsx  | 30 ++++++++++--
 .../storybook-html/src/Heading1.stories.tsx   | 22 ++++++++-
 .../storybook-html/src/Heading2.stories.tsx   | 22 ++++++++-
 .../storybook-html/src/Heading3.stories.tsx   | 22 ++++++++-
 .../storybook-html/src/Heading4.stories.tsx   | 22 ++++++++-
 .../storybook-html/src/Heading5.stories.tsx   | 22 ++++++++-
 .../storybook-html/src/Heading6.stories.tsx   | 22 ++++++++-
 packages/storybook-html/src/Link.stories.tsx  | 30 +++++++++++-
 packages/storybook-html/src/Mark.stories.tsx  | 22 ++++++++-
 .../src/OrderedList.stories.tsx               | 30 ++++++++++--
 .../storybook-html/src/Paragraph.stories.tsx  | 31 ++++++++++--
 .../src/RadioButton.stories.tsx               | 34 +++++++++++---
 .../storybook-html/src/Select.stories.tsx     | 44 +++++++++++++++--
 .../storybook-html/src/Separator.stories.tsx  | 28 +++++++++--
 .../storybook-html/src/Strong.stories.tsx     | 22 ++++++++-
 packages/storybook-html/src/Table.stories.tsx | 22 ++++++++-
 .../storybook-html/src/Textarea.stories.tsx   | 45 +++++++++++++++---
 .../storybook-html/src/Textbox.stories.tsx    | 45 +++++++++++++-----
 .../src/UnorderedList.stories.tsx             | 38 +++++++++++++--
 packages/storybook-html/src/_hidden.md        |  4 ++
 .../storybook-html/src/util/htmlArgTypes.ts   | 17 +++++++
 34 files changed, 743 insertions(+), 101 deletions(-)
 create mode 100644 packages/storybook-html/src/_hidden.md
 create mode 100644 packages/storybook-html/src/util/htmlArgTypes.ts

diff --git a/components/button/html/_mixin.scss b/components/button/html/_mixin.scss
index 0fd84a917d1..09ee4196960 100644
--- a/components/button/html/_mixin.scss
+++ b/components/button/html/_mixin.scss
@@ -14,6 +14,10 @@
     @include utrecht-button--distanced;
   }
 
+  button[hidden] {
+    display: none;
+  }
+
   button[type="submit" i],
   input[type="submit" i] {
     @include utrecht-button--submit;
diff --git a/components/code-block/html/_mixin.scss b/components/code-block/html/_mixin.scss
index e81ff7524e3..a80fc38575c 100644
--- a/components/code-block/html/_mixin.scss
+++ b/components/code-block/html/_mixin.scss
@@ -11,6 +11,10 @@
     @include utrecht-code-block;
   }
 
+  pre[hidden]:has(> code:only-child) {
+    display: none;
+  }
+
   pre:has(> code:only-child) > code {
     display: contents;
   }
diff --git a/components/form-fieldset/css/_reset.scss b/components/form-fieldset/css/_reset.scss
index 189902d6ad8..fef7ccf07ed 100644
--- a/components/form-fieldset/css/_reset.scss
+++ b/components/form-fieldset/css/_reset.scss
@@ -4,6 +4,7 @@
  */
 
 @mixin reset-fieldset {
+  /* `all: revert` unfortunately has as side-effect that the `hidde` attribute has no effect */
   all: revert;
   border: 0;
   margin-inline-end: 0;
diff --git a/components/form-fieldset/html/_mixin.scss b/components/form-fieldset/html/_mixin.scss
index 74928da2b0b..24e7cbd3df5 100644
--- a/components/form-fieldset/html/_mixin.scss
+++ b/components/form-fieldset/html/_mixin.scss
@@ -11,6 +11,10 @@
     @include utrecht-form-fieldset--html-fieldset;
     @include utrecht-form-fieldset--distanced;
   }
+
+  fieldset[hidden] {
+    display: none;
+  }
 }
 
 @mixin utrecht-html-legend {
@@ -20,6 +24,10 @@
     @include utrecht-form-fieldset__legend--distanced;
   }
 
+  legend[hidden] {
+    display: none;
+  }
+
   fieldset:disabled > legend {
     @include utrecht-form-fieldset__legend--disabled;
   }
diff --git a/packages/storybook-html/src/Article.stories.tsx b/packages/storybook-html/src/Article.stories.tsx
index b815f8080e2..97b3c14d705 100644
--- a/packages/storybook-html/src/Article.stories.tsx
+++ b/packages/storybook-html/src/Article.stories.tsx
@@ -4,11 +4,15 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/article/README.md?raw';
 import tokensDefinition from '@utrecht/components/article/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Article = ({ children }) => <article>{children}</article>;
+const Article = ({ children, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => (
+  <article {...restProps}>{children}</article>
+);
 
 const meta = {
   title: 'HTML Component/Article',
@@ -19,18 +23,11 @@ const meta = {
     children: {
       description: 'Content of the article',
     },
+    hidden,
   },
   args: {
-    children: [
-      <h1>Lorem ipsum</h1>,
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
-      </p>,
-    ],
+    children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -53,6 +50,18 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  args: {
+    children: [
+      <h1>Lorem ipsum</h1>,
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </p>,
+    ],
+  },
   parameters: {
     docs: {
       description: {
@@ -62,4 +71,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Blockquote.stories.tsx b/packages/storybook-html/src/Blockquote.stories.tsx
index b85cac33cb6..93cf48c01a6 100644
--- a/packages/storybook-html/src/Blockquote.stories.tsx
+++ b/packages/storybook-html/src/Blockquote.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/blockquote/README.md?raw';
 import tokensDefinition from '@utrecht/components/blockquote/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Blockquote = ({ children }) => <blockquote>{children}</blockquote>;
+const Blockquote = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <blockquote {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Blockquote',
@@ -19,9 +21,11 @@ const meta = {
     children: {
       description: 'Content of the quote',
     },
+    hidden,
   },
   args: {
     children: [],
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -64,4 +68,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Button.stories.tsx b/packages/storybook-html/src/Button.stories.tsx
index ecfc4e73ff6..ff220ea1d9d 100644
--- a/packages/storybook-html/src/Button.stories.tsx
+++ b/packages/storybook-html/src/Button.stories.tsx
@@ -4,12 +4,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/button/README.md?raw';
 import tokensDefinition from '@utrecht/components/button/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
 import buttonDisabledTabindexMarkdown from './_button-disabled-tabindex.md?raw';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Button = ({ children, ...attributes }) => <button {...attributes}>{children}</button>;
+const Button = ({ ...attributes }: PropsWithChildren<HTMLAttributes<HTMLButtonElement>>) => <button {...attributes} />;
 
 const meta = {
   title: 'HTML Component/Button',
@@ -28,6 +30,7 @@ const meta = {
       description: 'Disabled',
       control: 'boolean',
     },
+    hidden,
     tabindex: {
       description: 'Tabindex',
       control: 'boolean',
@@ -40,6 +43,7 @@ const meta = {
   },
   args: {
     disabled: false,
+    hidden: false,
     type: 'button',
   },
   tags: ['autodocs'],
@@ -162,4 +166,18 @@ export const Submit: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Checkbox.stories.tsx b/packages/storybook-html/src/Checkbox.stories.tsx
index c9b71791426..720e65c74b6 100644
--- a/packages/storybook-html/src/Checkbox.stories.tsx
+++ b/packages/storybook-html/src/Checkbox.stories.tsx
@@ -4,11 +4,27 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/checkbox/README.md?raw';
 import tokensDefinition from '@utrecht/components/checkbox/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { InputHTMLAttributes } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Checkbox = ({ checked, disabled, indeterminate, invalid, name, required, value, ...attributes }) => (
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
+  indeterminate?: boolean;
+  invalid?: boolean;
+}
+
+const Checkbox = ({
+  checked,
+  disabled,
+  indeterminate,
+  invalid,
+  name,
+  required,
+  value,
+  ...attributes
+}: CheckboxProps) => (
   <input
     name={name}
     type="checkbox"
@@ -36,6 +52,7 @@ const meta = {
       description: 'Disabled',
       control: 'boolean',
     },
+    hidden,
     invalid: {
       description: 'Invalid',
       control: 'boolean',
@@ -60,6 +77,7 @@ const meta = {
   args: {
     checked: false,
     disabled: false,
+    hidden: false,
     invalid: false,
     required: false,
     name: 'i-agree',
@@ -124,4 +142,18 @@ export const Indeterminate: Story = {
   name: 'Indeterminate',
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Code.stories.tsx b/packages/storybook-html/src/Code.stories.tsx
index e1d26599ce0..a3fce97ab2c 100644
--- a/packages/storybook-html/src/Code.stories.tsx
+++ b/packages/storybook-html/src/Code.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/code/README.md?raw';
 import tokensDefinition from '@utrecht/components/code/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Code = ({ children }) => <code>{children}</code>;
+const Code = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <code {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Code',
@@ -20,9 +22,11 @@ const meta = {
       description: 'Code',
       control: 'text',
     },
+    hidden,
   },
   args: {
     children: '<input type="url" value="https://example.fi/">',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -54,4 +58,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/CodeBlock.stories.tsx b/packages/storybook-html/src/CodeBlock.stories.tsx
index 426ed3af9db..ea25e0c99da 100644
--- a/packages/storybook-html/src/CodeBlock.stories.tsx
+++ b/packages/storybook-html/src/CodeBlock.stories.tsx
@@ -4,12 +4,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/code-block/README.md?raw';
 import tokensDefinition from '@utrecht/components/code-block/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const CodeBlock = ({ children }) => (
-  <pre>
+const CodeBlock = ({ children, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLPreElement>>) => (
+  <pre {...restProps}>
     <code>{children}</code>
   </pre>
 );
@@ -24,6 +26,7 @@ const meta = {
       description: 'Code',
       control: 'text',
     },
+    hidden,
   },
   args: {
     children: `<!DOCTYPE html>
@@ -37,6 +40,7 @@ const meta = {
   </body>
 </html>
 `,
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -68,4 +72,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Document.stories.tsx b/packages/storybook-html/src/Document.stories.tsx
index 3eaed052c96..1b0bc5887fc 100644
--- a/packages/storybook-html/src/Document.stories.tsx
+++ b/packages/storybook-html/src/Document.stories.tsx
@@ -4,17 +4,23 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/document/README.md?raw';
 import tokensDefinition from '@utrecht/components/document/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Document = ({ children, lang, dir, pageTitle }) => (
+interface DocumentStoryProps extends HTMLAttributes<HTMLHtmlElement> {
+  pageTitle?: string;
+}
+
+const Document = ({ children, hidden, lang, dir, pageTitle }: PropsWithChildren<DocumentStoryProps>) => (
   <html lang={lang} dir={dir}>
     <head>
       <meta charSet="utf-8" />
-      <title>{pageTitle}</title>
+      {pageTitle && <title>{pageTitle}</title>}
     </head>
-    <body>{children}</body>
+    <body hidden={hidden}>{children}</body>
   </html>
 );
 
@@ -32,6 +38,7 @@ const meta = {
       control: { type: 'select' },
       options: ['', 'ltr', 'auto', 'rtl'],
     },
+    hidden,
     lang: {
       description: 'Language',
       control: 'text',
@@ -43,6 +50,8 @@ const meta = {
   },
   args: {
     children: [],
+    hidden: false,
+    pageTitle: '',
   },
   tags: ['autodocs'],
   parameters: {
@@ -89,4 +98,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Emphasis.stories.tsx b/packages/storybook-html/src/Emphasis.stories.tsx
index d3991116ff8..2c36c161ce9 100644
--- a/packages/storybook-html/src/Emphasis.stories.tsx
+++ b/packages/storybook-html/src/Emphasis.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/emphasis/README.md?raw';
 import tokensDefinition from '@utrecht/components/emphasis/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Emphasis = ({ children }) => <em>{children}</em>;
+const Emphasis = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <em {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Emphasis',
@@ -19,9 +21,11 @@ const meta = {
     children: {
       description: 'Content of the emphasis',
     },
+    hidden,
   },
   args: {
     children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -56,4 +60,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/FormFieldset.stories.tsx b/packages/storybook-html/src/FormFieldset.stories.tsx
index a9810a0464b..84d14c63f66 100644
--- a/packages/storybook-html/src/FormFieldset.stories.tsx
+++ b/packages/storybook-html/src/FormFieldset.stories.tsx
@@ -4,12 +4,17 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/form-fieldset/README.md?raw';
 import tokensDefinition from '@utrecht/components/form-fieldset/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { FieldsetHTMLAttributes, PropsWithChildren, ReactNode } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Fieldset = ({ disabled, children, legend }) => (
-  <fieldset disabled={disabled || undefined}>
+interface FieldsetStory extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+  legend?: ReactNode;
+}
+const Fieldset = ({ disabled, children, legend, ...restProps }: PropsWithChildren<FieldsetStory>) => (
+  <fieldset disabled={disabled || undefined} {...restProps}>
     {legend ? <legend>{legend}</legend> : null}
     {children}
   </fieldset>
@@ -28,6 +33,7 @@ const meta = {
       description: 'Disabled',
       control: 'boolean',
     },
+    hidden,
     legend: {
       description: 'Set the content of the legend',
       control: 'text',
@@ -44,6 +50,7 @@ const meta = {
         laborum.
       </p>,
     ],
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -95,4 +102,18 @@ export const Disabled: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/FormLabel.stories.tsx b/packages/storybook-html/src/FormLabel.stories.tsx
index e00857162ad..d9d2ccd68aa 100644
--- a/packages/storybook-html/src/FormLabel.stories.tsx
+++ b/packages/storybook-html/src/FormLabel.stories.tsx
@@ -4,14 +4,22 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/form-label/README.md?raw';
 import tokensDefinition from '@utrecht/components/form-label/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { LabelHTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const FormLabelStory = ({ id, children, type }) => (
+interface FormLabelStoryProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  type?: string;
+}
+
+const FormLabelStory = ({ id, children, type, ...restProps }: PropsWithChildren<FormLabelStoryProps>) => (
   <p>
     <input type={type} id={id} />
-    <label htmlFor={id}>{children}</label>
+    <label htmlFor={id} {...restProps}>
+      {children}
+    </label>
   </p>
 );
 
@@ -25,6 +33,7 @@ const meta = {
       description: 'Set the content of the label',
       control: 'text',
     },
+    hidden,
     type: {
       description: 'Set the type of the form control',
       options: ['hidden', 'checkbox', 'radio'],
@@ -42,6 +51,7 @@ const meta = {
         laborum.
       </p>,
     ],
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -77,4 +87,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Heading1.stories.tsx b/packages/storybook-html/src/Heading1.stories.tsx
index 4739825d36d..51ecf2f89bb 100644
--- a/packages/storybook-html/src/Heading1.stories.tsx
+++ b/packages/storybook-html/src/Heading1.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/heading-1/README.md?raw';
 import tokensDefinition from '@utrecht/components/heading-1/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Heading1 = ({ children }) => <h1>{children}</h1>;
+const Heading1 = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <h1 {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Heading/Heading 1',
@@ -19,9 +21,11 @@ const meta = {
     children: {
       description: 'Content of the heading',
     },
+    hidden,
   },
   args: {
     children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -56,4 +60,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Heading2.stories.tsx b/packages/storybook-html/src/Heading2.stories.tsx
index f9b94288035..e7f76a78ab9 100644
--- a/packages/storybook-html/src/Heading2.stories.tsx
+++ b/packages/storybook-html/src/Heading2.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/heading-2/README.md?raw';
 import tokensDefinition from '@utrecht/components/heading-2/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Heading2 = ({ children }) => <h2>{children}</h2>;
+const Heading2 = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <h2 {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Heading/Heading 2',
@@ -19,9 +21,11 @@ const meta = {
     children: {
       description: 'Content of the heading',
     },
+    hidden,
   },
   args: {
     children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -56,4 +60,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Heading3.stories.tsx b/packages/storybook-html/src/Heading3.stories.tsx
index 9113160756e..2c565c8670c 100644
--- a/packages/storybook-html/src/Heading3.stories.tsx
+++ b/packages/storybook-html/src/Heading3.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/heading-3/README.md?raw';
 import tokensDefinition from '@utrecht/components/heading-3/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Heading3 = ({ children }) => <h3>{children}</h3>;
+const Heading3 = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <h3 {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Heading/Heading 3',
@@ -19,9 +21,11 @@ const meta = {
     children: {
       description: 'Content of the heading',
     },
+    hidden,
   },
   args: {
     children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -56,4 +60,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Heading4.stories.tsx b/packages/storybook-html/src/Heading4.stories.tsx
index d4e2ef1ed71..0075e72f434 100644
--- a/packages/storybook-html/src/Heading4.stories.tsx
+++ b/packages/storybook-html/src/Heading4.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/heading-4/README.md?raw';
 import tokensDefinition from '@utrecht/components/heading-4/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Heading4 = ({ children }) => <h4>{children}</h4>;
+const Heading4 = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <h4 {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Heading/Heading 4',
@@ -19,9 +21,11 @@ const meta = {
     children: {
       description: 'Content of the heading',
     },
+    hidden,
   },
   args: {
     children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -56,4 +60,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Heading5.stories.tsx b/packages/storybook-html/src/Heading5.stories.tsx
index 16cb8ae66ac..0bce17ca47f 100644
--- a/packages/storybook-html/src/Heading5.stories.tsx
+++ b/packages/storybook-html/src/Heading5.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/heading-5/README.md?raw';
 import tokensDefinition from '@utrecht/components/heading-5/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Heading5 = ({ children }) => <h5>{children}</h5>;
+const Heading5 = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <h5 {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Heading/Heading 5',
@@ -19,9 +21,11 @@ const meta = {
     children: {
       description: 'Content of the heading',
     },
+    hidden,
   },
   args: {
     children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -56,4 +60,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Heading6.stories.tsx b/packages/storybook-html/src/Heading6.stories.tsx
index 708b634a2f8..62a4b7b0e63 100644
--- a/packages/storybook-html/src/Heading6.stories.tsx
+++ b/packages/storybook-html/src/Heading6.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/heading-6/README.md?raw';
 import tokensDefinition from '@utrecht/components/heading-6/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Heading6 = ({ children }) => <h6>{children}</h6>;
+const Heading6 = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <h6 {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Heading/Heading 6',
@@ -19,9 +21,11 @@ const meta = {
     children: {
       description: 'Content of the heading',
     },
+    hidden,
   },
   args: {
     children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -56,4 +60,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Link.stories.tsx b/packages/storybook-html/src/Link.stories.tsx
index f891bca401e..95ef7561636 100644
--- a/packages/storybook-html/src/Link.stories.tsx
+++ b/packages/storybook-html/src/Link.stories.tsx
@@ -4,12 +4,20 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/link/README.md?raw';
 import tokensDefinition from '@utrecht/components/link/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { AnchorHTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
 const normalizeTokenList = (str: string): string => str.replace(/\s+/g, ' ').trim();
 
+interface LinkStoryProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {
+  alternate?: boolean;
+  current?: boolean;
+  external?: boolean;
+}
+
 const Link = ({
   children,
   href,
@@ -18,7 +26,8 @@ const Link = ({
   hrefLang = undefined,
   alternate = false,
   external = false,
-}) => (
+  ...restProps
+}: LinkStoryProps) => (
   <a
     href={href === null ? '#' : href}
     aria-current={current || undefined}
@@ -28,6 +37,7 @@ const Link = ({
       normalizeTokenList(`${alternate ? 'alternate' : ''} ${external ? 'external noopener noreferrer' : ''}`) ||
       undefined
     }
+    {...restProps}
   >
     {children}
   </a>
@@ -56,6 +66,7 @@ const meta = {
       description: 'Link is external link',
       type: 'boolean',
     },
+    hidden,
     href: {
       description: 'Link href',
       control: 'text',
@@ -73,6 +84,7 @@ const meta = {
     alternate: false,
     children: [],
     external: false,
+    hidden: false,
     hrefLang: '',
     lang: '',
   },
@@ -180,4 +192,18 @@ export const CurrentLang: Story = {
   name: 'Current language',
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Mark.stories.tsx b/packages/storybook-html/src/Mark.stories.tsx
index f10c6f87cc3..3ec9f13a82f 100644
--- a/packages/storybook-html/src/Mark.stories.tsx
+++ b/packages/storybook-html/src/Mark.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/mark/README.md?raw';
 import tokensDefinition from '@utrecht/components/mark/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Mark = ({ children }) => <mark>{children}</mark>;
+const Mark = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <mark {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Mark',
@@ -19,9 +21,11 @@ const meta = {
     children: {
       description: 'Content of the marked text',
     },
+    hidden,
   },
   args: {
     children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -56,4 +60,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/OrderedList.stories.tsx b/packages/storybook-html/src/OrderedList.stories.tsx
index 9a22b32a76c..be1b7f0190b 100644
--- a/packages/storybook-html/src/OrderedList.stories.tsx
+++ b/packages/storybook-html/src/OrderedList.stories.tsx
@@ -4,16 +4,20 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/ordered-list/README.md?raw';
 import tokensDefinition from '@utrecht/components/ordered-list/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { LiHTMLAttributes, OlHTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const OrderedList = ({ children, ...attributes }) => <ol {...attributes}>{children}</ol>;
+const OrderedList = ({ ...restProps }: PropsWithChildren<OlHTMLAttributes<HTMLOListElement>>) => <ol {...restProps} />;
 
-const OrderedListItem = ({ children, ...attributes }) => <li {...attributes}>{children}</li>;
+type OrderedListItemProps = PropsWithChildren<LiHTMLAttributes<HTMLLIElement>>;
 
-const OrderedListStory = ({ items }) => (
-  <OrderedList>
+const OrderedListItem = ({ ...restProps }: OrderedListItemProps) => <li {...restProps} />;
+
+const OrderedListStory = ({ items, ...restProps }: { items: OrderedListItemProps[] }) => (
+  <OrderedList {...restProps}>
     {items.map(({ children }) => (
       <OrderedListItem>{children}</OrderedListItem>
     ))}
@@ -34,12 +38,14 @@ const meta = {
       description: 'Text direction',
       control: 'text',
     },
+    hidden,
     lang: {
       description: 'Lang',
       control: 'text',
     },
   },
   args: {
+    hidden: false,
     items: [],
   },
   tags: ['autodocs'],
@@ -113,4 +119,18 @@ With CSS you can use Arabic script digits for list item numbers, instead of the
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Paragraph.stories.tsx b/packages/storybook-html/src/Paragraph.stories.tsx
index 4b3555ed95b..0ba70a05ebf 100644
--- a/packages/storybook-html/src/Paragraph.stories.tsx
+++ b/packages/storybook-html/src/Paragraph.stories.tsx
@@ -4,12 +4,21 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/paragraph/README.md?raw';
 import tokensDefinition from '@utrecht/components/paragraph/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Paragraph = ({ children, lead, small }) => (
-  <p className={lead ? 'lead' : null}>{small ? <small>{children}</small> : children}</p>
+interface ParagraphStoryProps extends HTMLAttributes<HTMLParagraphElement> {
+  lead?: boolean;
+  small?: boolean;
+}
+
+const Paragraph = ({ children, lead, small, ...restProps }: PropsWithChildren<ParagraphStoryProps>) => (
+  <p className={lead ? 'lead' : undefined} {...restProps}>
+    {small ? <small>{children}</small> : children}
+  </p>
 );
 
 const meta = {
@@ -21,6 +30,7 @@ const meta = {
     children: {
       description: 'Content of the paragraph',
     },
+    hidden,
     lead: {
       description: 'Lead paragraph',
       control: 'boolean',
@@ -32,6 +42,7 @@ const meta = {
   },
   args: {
     children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -96,4 +107,18 @@ export const Small: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/RadioButton.stories.tsx b/packages/storybook-html/src/RadioButton.stories.tsx
index 74862b26d39..f58d0c4af74 100644
--- a/packages/storybook-html/src/RadioButton.stories.tsx
+++ b/packages/storybook-html/src/RadioButton.stories.tsx
@@ -4,17 +4,23 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/radio-button/README.md?raw';
 import tokensDefinition from '@utrecht/components/radio-button/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { InputHTMLAttributes } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const RadioButton = ({ checked, disabled, invalid, required, value, ...attributes }) => (
+interface RadioButtonProps extends InputHTMLAttributes<HTMLInputElement> {
+  invalid?: boolean;
+}
+
+const RadioButton = ({ checked, disabled, invalid, required, value, ...attributes }: RadioButtonProps) => (
   <input
     type="radio"
-    defaultChecked={checked || null}
-    aria-invalid={invalid || null}
-    disabled={disabled || null}
-    required={required || null}
+    defaultChecked={checked || undefined}
+    aria-invalid={invalid || undefined}
+    disabled={disabled || undefined}
+    required={required || undefined}
     value={value}
     {...attributes}
   />
@@ -34,6 +40,7 @@ const meta = {
       description: 'Disabled',
       control: 'boolean',
     },
+    hidden,
     invalid: {
       description: 'Invalid',
       control: 'boolean',
@@ -50,6 +57,7 @@ const meta = {
   args: {
     checked: false,
     disabled: false,
+    hidden: false,
     invalid: false,
     required: false,
     value: '',
@@ -153,4 +161,18 @@ export const Invalid: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Select.stories.tsx b/packages/storybook-html/src/Select.stories.tsx
index c9fce3ef06b..0ab3d037418 100644
--- a/packages/storybook-html/src/Select.stories.tsx
+++ b/packages/storybook-html/src/Select.stories.tsx
@@ -4,14 +4,32 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/select/README.md?raw';
 import tokensDefinition from '@utrecht/components/select/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { SelectHTMLAttributes } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Select = ({ disabled, invalid, options, required, value }) => (
-  <select aria-invalid={invalid || null} disabled={disabled || null} required={required || null} defaultValue={value}>
-    {options.map(({ label, selected, value }) => (
-      <option selected={selected || null} value={value || null}>
+interface OptionProps {
+  label: string;
+  selected?: boolean;
+  value: string;
+}
+interface SelectStoryProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  invalid?: boolean;
+  options: OptionProps[];
+}
+
+const Select = ({ disabled, invalid, options, required, value, ...restProps }: SelectStoryProps) => (
+  <select
+    aria-invalid={invalid || undefined}
+    disabled={disabled || undefined}
+    required={required || undefined}
+    defaultValue={value}
+    {...restProps}
+  >
+    {options.map(({ label, selected, value }: OptionProps) => (
+      <option selected={selected || undefined} value={value || undefined}>
         {label}
       </option>
     ))}
@@ -28,6 +46,7 @@ const meta = {
       description: 'Disabled',
       control: 'boolean',
     },
+    hidden,
     invalid: {
       description: 'Invalid',
       control: 'boolean',
@@ -50,6 +69,7 @@ const meta = {
   },
   args: {
     disabled: false,
+    hidden: false,
     invalid: false,
     options: [],
     required: false,
@@ -137,4 +157,18 @@ export const Required: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Separator.stories.tsx b/packages/storybook-html/src/Separator.stories.tsx
index ab4764432bb..d9425e9f29e 100644
--- a/packages/storybook-html/src/Separator.stories.tsx
+++ b/packages/storybook-html/src/Separator.stories.tsx
@@ -4,19 +4,25 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/separator/README.md?raw';
 import tokensDefinition from '@utrecht/components/separator/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Separator = () => <hr />;
+const Separator = ({ ...restProps }: HTMLAttributes<HTMLHRElement>) => <hr {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Separator',
   id: 'html-separator',
   component: Separator,
   decorators: [htmlContentDecorator],
-  argTypes: {},
-  args: {},
+  argTypes: {
+    hidden,
+  },
+  args: {
+    hidden: false,
+  },
   tags: ['autodocs'],
   parameters: {
     status: {
@@ -47,4 +53,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Strong.stories.tsx b/packages/storybook-html/src/Strong.stories.tsx
index 854be42de9a..fe0818d037f 100644
--- a/packages/storybook-html/src/Strong.stories.tsx
+++ b/packages/storybook-html/src/Strong.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/emphasis/README.md?raw';
 import tokensDefinition from '@utrecht/components/emphasis/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Strong = ({ children }) => <strong>{children}</strong>;
+const Strong = ({ ...restProps }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => <strong {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Strong',
@@ -19,9 +21,11 @@ const meta = {
     children: {
       description: 'Content of the strong emphasis',
     },
+    hidden,
   },
   args: {
     children: '',
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -58,4 +62,18 @@ Strong emphasis: very important or urgent content`,
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Table.stories.tsx b/packages/storybook-html/src/Table.stories.tsx
index 7ca669b8140..c6a9848a6b6 100644
--- a/packages/storybook-html/src/Table.stories.tsx
+++ b/packages/storybook-html/src/Table.stories.tsx
@@ -4,11 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/table/README.md?raw';
 import tokensDefinition from '@utrecht/components/table/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { PropsWithChildren, TableHTMLAttributes } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Table = ({ children, ...attributes }) => <table {...attributes}>{children}</table>;
+const Table = ({ ...restProps }: PropsWithChildren<TableHTMLAttributes<HTMLTableElement>>) => <table {...restProps} />;
 
 const meta = {
   title: 'HTML Component/Table',
@@ -19,6 +21,7 @@ const meta = {
     children: {
       description: 'Content of the table',
     },
+    hidden,
     summary: {
       description: 'Summary of the table contents',
       control: 'text',
@@ -26,6 +29,7 @@ const meta = {
   },
   args: {
     children: [],
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -91,4 +95,18 @@ export const Default: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Textarea.stories.tsx b/packages/storybook-html/src/Textarea.stories.tsx
index d5cee6470a0..8078728caa1 100644
--- a/packages/storybook-html/src/Textarea.stories.tsx
+++ b/packages/storybook-html/src/Textarea.stories.tsx
@@ -4,18 +4,33 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/textarea/README.md?raw';
 import tokensDefinition from '@utrecht/components/textarea/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { PropsWithChildren, TextareaHTMLAttributes } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const Textarea = ({ disabled, invalid, placeholder, readOnly, required, value }) => (
+interface TextareaStory extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  invalid?: boolean;
+}
+
+const Textarea = ({
+  disabled,
+  invalid,
+  placeholder,
+  readOnly,
+  required,
+  value,
+  ...restProps
+}: PropsWithChildren<TextareaStory>) => (
   <textarea
-    disabled={disabled || null}
-    aria-invalid={invalid || null}
-    placeholder={placeholder || null}
-    readOnly={readOnly || null}
-    required={required || null}
+    disabled={disabled || undefined}
+    aria-invalid={invalid || undefined}
+    placeholder={placeholder || undefined}
+    readOnly={readOnly || undefined}
+    required={required || undefined}
     defaultValue={value}
+    {...restProps}
   ></textarea>
 );
 
@@ -37,6 +52,7 @@ const meta = {
       description: 'Disabled',
       control: 'boolean',
     },
+    hidden,
     placeholder: {
       description: 'Placeholder',
       control: 'text',
@@ -52,6 +68,7 @@ const meta = {
   },
   args: {
     disabled: false,
+    hidden: false,
     invalid: false,
     placeholder: '',
     readOnly: false,
@@ -166,4 +183,18 @@ export const Required: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/Textbox.stories.tsx b/packages/storybook-html/src/Textbox.stories.tsx
index 0616ead086e..7b24fb58559 100644
--- a/packages/storybook-html/src/Textbox.stories.tsx
+++ b/packages/storybook-html/src/Textbox.stories.tsx
@@ -4,10 +4,15 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/textbox/README.md?raw';
 import tokensDefinition from '@utrecht/components/textbox/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { InputHTMLAttributes } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
+interface TextboxStoryProps extends InputHTMLAttributes<HTMLInputElement> {
+  invalid?: boolean;
+}
 const Textbox = ({
   autoComplete,
   disabled,
@@ -20,19 +25,21 @@ const Textbox = ({
   required,
   type,
   value,
-}) => (
+  ...restProps
+}: TextboxStoryProps) => (
   <input
     type={type}
-    aria-invalid={invalid || null}
-    disabled={disabled || null}
-    min={min || null}
-    max={max || null}
-    pattern={pattern || null}
-    placeholder={placeholder || null}
-    required={required || null}
-    readOnly={readOnly || null}
+    aria-invalid={invalid || undefined}
+    disabled={disabled || undefined}
+    min={min || undefined}
+    max={max || undefined}
+    pattern={pattern || undefined}
+    placeholder={placeholder || undefined}
+    required={required || undefined}
+    readOnly={readOnly || undefined}
     defaultValue={value}
-    autoComplete={autoComplete || null}
+    autoComplete={autoComplete || undefined}
+    {...restProps}
   />
 );
 
@@ -50,6 +57,7 @@ const meta = {
       description: 'Disabled',
       control: 'boolean',
     },
+    hidden,
     invalid: {
       description: 'Invalid',
       control: 'boolean',
@@ -91,6 +99,7 @@ const meta = {
   args: {
     autoComplete: null,
     disabled: false,
+    hidden: false,
     invalid: false,
     min: '',
     max: '',
@@ -273,4 +282,18 @@ export const Email: Story = {
   },
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/UnorderedList.stories.tsx b/packages/storybook-html/src/UnorderedList.stories.tsx
index e114ad66052..8ca14f137a4 100644
--- a/packages/storybook-html/src/UnorderedList.stories.tsx
+++ b/packages/storybook-html/src/UnorderedList.stories.tsx
@@ -4,16 +4,28 @@ import type { Meta, StoryObj } from '@storybook/react';
 import readme from '@utrecht/components/unordered-list/README.md?raw';
 import tokensDefinition from '@utrecht/components/unordered-list/tokens.json';
 import tokens from '@utrecht/design-tokens/dist/index.json';
-import React from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import hiddenDocs from './_hidden.md?raw';
 import { htmlContentDecorator } from './decorator';
 import { designTokenStory } from './design-token-story';
+import { hidden } from './util/htmlArgTypes';
 
-const UnorderedList = ({ children, ...attributes }) => <ul {...attributes}>{children}</ul>;
+interface UnorderedListItemStoryProps extends HTMLAttributes<HTMLLIElement> {}
 
-const UnorderedListItem = ({ children, ...attributes }) => <li {...attributes}>{children}</li>;
+interface UnorderedListProps extends HTMLAttributes<HTMLUListElement> {}
 
-const UnorderedListStory = ({ items }) => (
-  <UnorderedList>
+interface UnorderedListStoryProps extends UnorderedListProps {
+  items: PropsWithChildren<UnorderedListItemStoryProps>[];
+}
+
+const UnorderedList = ({ children, ...attributes }: UnorderedListProps) => <ul {...attributes}>{children}</ul>;
+
+const UnorderedListItem = ({ children, ...attributes }: UnorderedListItemStoryProps) => (
+  <li {...attributes}>{children}</li>
+);
+
+const UnorderedListStory = ({ items, ...restProps }: UnorderedListStoryProps) => (
+  <UnorderedList {...restProps}>
     {items.map(({ children }) => (
       <UnorderedListItem>{children}</UnorderedListItem>
     ))}
@@ -26,6 +38,7 @@ const meta = {
   component: UnorderedListStory,
   decorators: [htmlContentDecorator],
   argTypes: {
+    hidden,
     items: {
       description: 'List items',
       control: 'array',
@@ -41,6 +54,7 @@ const meta = {
   },
   args: {
     items: [],
+    hidden: false,
   },
   tags: ['autodocs'],
   parameters: {
@@ -102,4 +116,18 @@ export const Nested: Story = {
   name: 'Nested',
 };
 
+export const Hidden: Story = {
+  args: {
+    ...Default.args,
+    hidden: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: hiddenDocs,
+      },
+    },
+  },
+};
+
 export const DesignTokens = designTokenStory(meta);
diff --git a/packages/storybook-html/src/_hidden.md b/packages/storybook-html/src/_hidden.md
new file mode 100644
index 00000000000..190ed65089d
--- /dev/null
+++ b/packages/storybook-html/src/_hidden.md
@@ -0,0 +1,4 @@
+<!-- @license CC0-1.0 -->
+<!-- markdownlint-disable MD041 -->
+
+The global HTML attribute `hidden` should work as expected, and CSS properties such as `display: inline`, `display: block`, `display: flex` or `display: inline-flex` from the component stylesheet should not interfere with this behavior.
diff --git a/packages/storybook-html/src/util/htmlArgTypes.ts b/packages/storybook-html/src/util/htmlArgTypes.ts
new file mode 100644
index 00000000000..c203af03d31
--- /dev/null
+++ b/packages/storybook-html/src/util/htmlArgTypes.ts
@@ -0,0 +1,17 @@
+// TODO: Use more accurate version when React supports `<div hidden="until-found">`
+/*
+export const hidden = {
+  description: 'Hidden',
+  control: { type: 'select' },
+  options: {
+    undefined: undefined,
+    '': true, // map to React `hidden` property
+    hidden: 'hidden',
+    'until-found': 'until-found',
+  },
+};
+*/
+export const hidden = {
+  description: 'Hidden',
+  control: 'boolean',
+};