From b50e2aef621eda87565053af77e1df5804ec084b Mon Sep 17 00:00:00 2001
From: Bas Meeuwissen <bas@masking.tech>
Date: Thu, 19 Feb 2026 11:33:29 +0100
Subject: [PATCH 1/3] #20: collapsible element

---
 docs/ELEMENTS.md                         | 27 ++++++++++++++++++++++--
 src/elements/collapsible/Collapsible.css | 15 +++++++++++++
 src/elements/collapsible/Collapsible.tsx | 17 +++++++++++++++
 src/index.ts                             |  1 +
 4 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 src/elements/collapsible/Collapsible.css
 create mode 100644 src/elements/collapsible/Collapsible.tsx

diff --git a/docs/ELEMENTS.md b/docs/ELEMENTS.md
index ef40869..773c759 100644
--- a/docs/ELEMENTS.md
+++ b/docs/ELEMENTS.md
@@ -5,7 +5,7 @@ The following elements are available:
 * **Container:** `Border`, `Panel`, `Modal`, `Navigation`
 * **Layout:** `Grid`, `Column`, `Row`, `Cell`
 * **Text:** `Title`, `Paragraph`, `Text`, `List`
-* **Interaction:** `Button`, `Clickarea`, `Link`
+* **Interaction:** `Button`, `ClickArea`, `Collapsible`, `Link`
 * **Form:** `Form`, `Input`, `Label`, `DateTime`, `Select`, `TextArea`, `TextBox`, `CheckBox`
 * **Graphic:** `Avatar`, `Icon`, `Image`
 * **Other:** `Ruler`, `Spinner`
@@ -486,12 +486,35 @@ import { ClickArea } from '@maskingtech/designsystem';
 
 Customization options (selector: `.clickarea`):
 
-- `--background-hover-color` (default `var(--input-background-hover-color)`)
+- `--background-hover-color` (default: `var(--input-background-hover-color)`)
 - `--margin` (default: `0`)
 - `--padding-small` (default: `var(--input-padding-small)`)
 - `--padding-medium` (default: `var(--input-padding-medium)`)
 - `--padding-large` (default: `var(--input-padding-large)`)
 
+### Collapsible
+
+A widget that can expand and collapse its content.
+
+Properties:
+
+- **summary** - ReactNode (required)
+- **children** - ReactNode (required)
+
+Example:
+
+```tsx
+import { Collapsible } from '@maskingtech/designsystem';
+
+<Collapsible summary='More details'>
+  <p>Here are the details...</p>
+</Collapsible>
+```
+
+Customization options (selector: `.collapsible`):
+
+- `--padding-small` (default: `var(--container-padding-small) 0 0 0`)
+
 ### Link
 
 A styled anchor element.
diff --git a/src/elements/collapsible/Collapsible.css b/src/elements/collapsible/Collapsible.css
new file mode 100644
index 0000000..d7ee923
--- /dev/null
+++ b/src/elements/collapsible/Collapsible.css
@@ -0,0 +1,15 @@
+.mtds
+{
+    .collapsible
+    {
+        --padding-small: var(--container-padding-small) 0 0 0;
+
+        .content
+        {
+            padding: var(--padding-small);
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/elements/collapsible/Collapsible.tsx b/src/elements/collapsible/Collapsible.tsx
new file mode 100644
index 0000000..a852995
--- /dev/null
+++ b/src/elements/collapsible/Collapsible.tsx
@@ -0,0 +1,17 @@
+
+import type { ReactNode } from 'react';
+
+import './Collapsible.css';
+
+type Props = {
+    readonly summary: ReactNode;
+    readonly children: ReactNode;
+};
+
+export function Collapsible({ summary, children }: Props)
+{
+    return <details className='collapsible'>
+        <summary>{summary}</summary>
+        <div className='content'>{children}</div>
+    </details>;
+}
diff --git a/src/index.ts b/src/index.ts
index 4263fe2..c32448d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ export { Button } from './elements/button/Button';
 export { Cell } from './elements/cell/Cell';
 export { CheckBox } from './elements/checkbox/CheckBox';
 export { ClickArea } from './elements/clickarea/ClickArea';
+export { Collapsible } from './elements/collapsible/Collapsible';
 export { Column } from './elements/column/Column';
 export { DateTime } from './elements/datetime/DateTime';
 export { Form } from './elements/form/Form';

From 5545fd5149cf238b55d59e59244274fcb846bca5 Mon Sep 17 00:00:00 2001
From: Bas Meeuwissen <bas@masking.tech>
Date: Thu, 19 Feb 2026 16:12:21 +0100
Subject: [PATCH 2/3] #20: processed review comments

---
 docs/ELEMENTS.md                              | 52 ++++++++++---------
 .../Collapsible.css => details/Details.css}   |  6 +--
 .../Collapsible.tsx => details/Details.tsx}   |  8 +--
 src/index.ts                                  |  2 +-
 4 files changed, 36 insertions(+), 32 deletions(-)
 rename src/elements/{collapsible/Collapsible.css => details/Details.css} (55%)
 rename src/elements/{collapsible/Collapsible.tsx => details/Details.tsx} (51%)

diff --git a/docs/ELEMENTS.md b/docs/ELEMENTS.md
index 773c759..cbe1a56 100644
--- a/docs/ELEMENTS.md
+++ b/docs/ELEMENTS.md
@@ -2,10 +2,10 @@
 
 The following elements are available:
 
-* **Container:** `Border`, `Panel`, `Modal`, `Navigation`
+* **Container:** `Border`, `Details`, `Panel`, `Modal`, `Navigation`
 * **Layout:** `Grid`, `Column`, `Row`, `Cell`
 * **Text:** `Title`, `Paragraph`, `Text`, `List`
-* **Interaction:** `Button`, `ClickArea`, `Collapsible`, `Link`
+* **Interaction:** `Button`, `ClickArea`, `Link`
 * **Form:** `Form`, `Input`, `Label`, `DateTime`, `Select`, `TextArea`, `TextBox`, `CheckBox`
 * **Graphic:** `Avatar`, `Icon`, `Image`
 * **Other:** `Ruler`, `Spinner`
@@ -46,6 +46,31 @@ Customization options (selector: `.border`):
 - `--size-medium` (default: `var(--element-border-medium)`)
 - `--size-small` (default: `var(--element-border-large)`)
 
+### Details
+
+A widget that can expand and collapse its content. Multiple details containers with the same `name` will be grouped together, allowing only one to be open at a time.
+
+Properties:
+
+- **open** - boolean (optional, default `false`)
+- **name** - string (optional)
+- **summary** - ReactNode (required)
+- **children** - ReactNode (required)
+
+Example:
+
+```tsx
+import { Details } from '@maskingtech/designsystem';
+
+<Details name='my-details' open={true} summary='More details'>
+  <p>Here are the details...</p>
+</Details>
+```
+
+Customization options (selector: `.details`):
+
+- `--padding` (default: `var(--container-padding-small) 0 0 0`)
+
 ### Panel
 
 A versatile container for contextual content (alerts, messages, etc.).
@@ -492,29 +517,6 @@ Customization options (selector: `.clickarea`):
 - `--padding-medium` (default: `var(--input-padding-medium)`)
 - `--padding-large` (default: `var(--input-padding-large)`)
 
-### Collapsible
-
-A widget that can expand and collapse its content.
-
-Properties:
-
-- **summary** - ReactNode (required)
-- **children** - ReactNode (required)
-
-Example:
-
-```tsx
-import { Collapsible } from '@maskingtech/designsystem';
-
-<Collapsible summary='More details'>
-  <p>Here are the details...</p>
-</Collapsible>
-```
-
-Customization options (selector: `.collapsible`):
-
-- `--padding-small` (default: `var(--container-padding-small) 0 0 0`)
-
 ### Link
 
 A styled anchor element.
diff --git a/src/elements/collapsible/Collapsible.css b/src/elements/details/Details.css
similarity index 55%
rename from src/elements/collapsible/Collapsible.css
rename to src/elements/details/Details.css
index d7ee923..a8f8968 100644
--- a/src/elements/collapsible/Collapsible.css
+++ b/src/elements/details/Details.css
@@ -1,12 +1,12 @@
 .mtds
 {
-    .collapsible
+    .details
     {
-        --padding-small: var(--container-padding-small) 0 0 0;
+        --padding: var(--container-padding-small) 0 0 0;
 
         .content
         {
-            padding: var(--padding-small);
+            padding: var(--padding);
             display: flex;
             flex-direction: column;
             align-items: stretch;
diff --git a/src/elements/collapsible/Collapsible.tsx b/src/elements/details/Details.tsx
similarity index 51%
rename from src/elements/collapsible/Collapsible.tsx
rename to src/elements/details/Details.tsx
index a852995..758c7b5 100644
--- a/src/elements/collapsible/Collapsible.tsx
+++ b/src/elements/details/Details.tsx
@@ -1,16 +1,18 @@
 
 import type { ReactNode } from 'react';
 
-import './Collapsible.css';
+import './Details.css';
 
 type Props = {
+    readonly open?: boolean;
+    readonly name?: string;
     readonly summary: ReactNode;
     readonly children: ReactNode;
 };
 
-export function Collapsible({ summary, children }: Props)
+export function Details({ open = false, name, summary, children }: Props)
 {
-    return <details className='collapsible'>
+    return <details className='details' open={open} name={name}>
         <summary>{summary}</summary>
         <div className='content'>{children}</div>
     </details>;
diff --git a/src/index.ts b/src/index.ts
index c32448d..766f7cb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,9 +5,9 @@ export { Button } from './elements/button/Button';
 export { Cell } from './elements/cell/Cell';
 export { CheckBox } from './elements/checkbox/CheckBox';
 export { ClickArea } from './elements/clickarea/ClickArea';
-export { Collapsible } from './elements/collapsible/Collapsible';
 export { Column } from './elements/column/Column';
 export { DateTime } from './elements/datetime/DateTime';
+export { Details } from './elements/details/Details';
 export { Form } from './elements/form/Form';
 export { Grid } from './elements/grid/Grid';
 export { Icon } from './elements/icon/Icon';

From 13a95534f84b54eb8d2fa93402d71ae50e56b400 Mon Sep 17 00:00:00 2001
From: Bas Meeuwissen <bas@masking.tech>
Date: Thu, 19 Feb 2026 20:34:35 +0100
Subject: [PATCH 3/3] #20: pointer for clickable elements

---
 src/elements/details/Details.css | 5 +++++
 src/elements/details/Details.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/elements/details/Details.css b/src/elements/details/Details.css
index a8f8968..a650869 100644
--- a/src/elements/details/Details.css
+++ b/src/elements/details/Details.css
@@ -4,6 +4,11 @@
     {
         --padding: var(--container-padding-small) 0 0 0;
 
+        .summary
+        {
+            cursor: pointer;
+        }
+        
         .content
         {
             padding: var(--padding);
diff --git a/src/elements/details/Details.tsx b/src/elements/details/Details.tsx
index 758c7b5..c97ac6b 100644
--- a/src/elements/details/Details.tsx
+++ b/src/elements/details/Details.tsx
@@ -13,7 +13,7 @@ type Props = {
 export function Details({ open = false, name, summary, children }: Props)
 {
     return <details className='details' open={open} name={name}>
-        <summary>{summary}</summary>
+        <summary className='summary'>{summary}</summary>
         <div className='content'>{children}</div>
     </details>;
 }