feat(elements): details

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`, `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.).
@@ -486,7 +511,7 @@ 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)`)

src/elements/details/Details.css

@@ -0,0 +1,20 @@
+.mtds
+{
+    .details
+    {
+        --padding: var(--container-padding-small) 0 0 0;
+
+        .summary
+        {
+            cursor: pointer;
+        }
+
+        .content
+        {
+            padding: var(--padding);
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+        }
+    }
+}

src/elements/details/Details.tsx

@@ -0,0 +1,19 @@
+
+import type { ReactNode } from 'react';
+
+import './Details.css';
+
+type Props = {
+    readonly open?: boolean;
+    readonly name?: string;
+    readonly summary: ReactNode;
+    readonly children: ReactNode;
+};
+
+export function Details({ open = false, name, summary, children }: Props)
+{
+    return <details className='details' open={open} name={name}>
+        <summary className='summary'>{summary}</summary>
+        <div className='content'>{children}</div>
+    </details>;
+}

src/index.ts

@@ -7,6 +7,7 @@ export { CheckBox } from './elements/checkbox/CheckBox';
 export { ClickArea } from './elements/clickarea/ClickArea';
 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';