From 3e6827f2ba5c8e3c796e910d628d10d2c1e3a49f Mon Sep 17 00:00:00 2001
From: Peter van Vliet <peter@masking.tech>
Date: Tue, 17 Feb 2026 12:17:03 +0100
Subject: [PATCH 1/6] #17: added list element

---
 src/elements/list/Item.tsx | 11 +++++++++++
 src/elements/list/List.css | 24 ++++++++++++++++++++++++
 src/elements/list/List.tsx | 26 ++++++++++++++++++++++++++
 src/index.ts               |  1 +
 4 files changed, 62 insertions(+)
 create mode 100644 src/elements/list/Item.tsx
 create mode 100644 src/elements/list/List.css
 create mode 100644 src/elements/list/List.tsx

diff --git a/src/elements/list/Item.tsx b/src/elements/list/Item.tsx
new file mode 100644
index 0000000..5a59c3c
--- /dev/null
+++ b/src/elements/list/Item.tsx
@@ -0,0 +1,11 @@
+
+import type { ReactNode} from 'react';
+
+export type Props = {
+    readonly children?: ReactNode;
+};
+
+export default function Element({ children }: Props)
+{
+    return <li>{children}</li>;
+}
diff --git a/src/elements/list/List.css b/src/elements/list/List.css
new file mode 100644
index 0000000..10ae159
--- /dev/null
+++ b/src/elements/list/List.css
@@ -0,0 +1,24 @@
+.mtds
+{
+    .list
+    {
+        --margin: 0;
+
+        margin: var(--margin);
+        
+        &.size-small
+        {
+            font-size: var(--size-small);
+        }
+
+        &.size-medium
+        {
+            font-size: var(--size-medium);
+        }
+
+        &.size-large
+        {
+            font-size: var(--size-large);
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/elements/list/List.tsx b/src/elements/list/List.tsx
new file mode 100644
index 0000000..bc85218
--- /dev/null
+++ b/src/elements/list/List.tsx
@@ -0,0 +1,26 @@
+
+import type { ReactElement } from 'react';
+
+import type { Props as ItemProps } from './Item';
+import Item from './Item';
+
+import './List.css';
+
+type Props = {
+    readonly type: 'ordered' | 'unordered';
+    readonly size?: 'small' | 'medium' | 'large';
+    readonly children: ReactElement<ItemProps> | ReactElement<ItemProps>[];
+};
+
+export function List({ type, size = 'medium', children }: Props)
+{
+    const className = 'list'
+        + ' type-' + type
+        + ' size-' + size;
+
+    return type === 'ordered'
+        ? <ol className={className}>{children}</ol>
+        : <ul className={className}>{children}</ul>;
+}
+
+List.Item = Item;
diff --git a/src/index.ts b/src/index.ts
index 378569d..b9659cd 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -14,6 +14,7 @@ export { Image } from './elements/image/Image';
 export { Input } from './elements/input/Input';
 export { Label } from './elements/label/Label';
 export { Link } from './elements/link/Link';
+export { List } from './elements/list/List';
 export { Modal } from './elements/modal/Modal';
 export { Navigation } from './elements/navigation/Navigation';
 export { Panel } from './elements/panel/Panel';

From fdfc2366033e4ab9519cfd6d4b241c453e7cc14d Mon Sep 17 00:00:00 2001
From: Peter van Vliet <peter@masking.tech>
Date: Tue, 17 Feb 2026 12:17:34 +0100
Subject: [PATCH 2/6] #17: text element improvements (boyscout)

---
 src/elements/text/Text.css | 2 +-
 src/elements/text/Text.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/elements/text/Text.css b/src/elements/text/Text.css
index f3a3af0..78f0594 100644
--- a/src/elements/text/Text.css
+++ b/src/elements/text/Text.css
@@ -9,7 +9,7 @@
         --size-medium: var(--element-font-medium);
         --size-large: var(--element-font-large);
 
-        display: inline-block;
+        display: inline;
 
         &.type-primary
         {
diff --git a/src/elements/text/Text.tsx b/src/elements/text/Text.tsx
index e229c9c..d8bfcbe 100644
--- a/src/elements/text/Text.tsx
+++ b/src/elements/text/Text.tsx
@@ -9,7 +9,7 @@ type Props = {
     readonly wrap?: 'none' | 'normal' | 'break-word';
 };
 
-export function Text({ value, type = 'primary', size = 'medium', weight = 'normal', wrap = 'none' }: Props)
+export function Text({ value, type = 'primary', size = 'medium', weight = 'normal', wrap = 'normal' }: Props)
 {
     const className = 'text'
         + ' type-' + type

From b59ce1888503251147b1a2e10de461e8b7807eea Mon Sep 17 00:00:00 2001
From: Peter van Vliet <peter@masking.tech>
Date: Tue, 17 Feb 2026 12:43:02 +0100
Subject: [PATCH 3/6] #17: updated element docs

---
 docs/ELEMENTS.md | 31 ++++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/docs/ELEMENTS.md b/docs/ELEMENTS.md
index bce27df..0e735f3 100644
--- a/docs/ELEMENTS.md
+++ b/docs/ELEMENTS.md
@@ -4,7 +4,7 @@ The following elements are available:
 
 * **Container:** `Border`, `Panel`, `Modal`, `Navigation`
 * **Layout:** `Grid`, `Column`, `Row`, `Cell`
-* **Text:** `Title`, `Paragraph`, `Text`
+* **Text:** `Title`, `Paragraph`, `Text`, `List`
 * **Interaction:** `Button`, `Clickarea`, `Link`
 * **Form:** `Form`, `Input`, `Label`, `DateTime`, `Select`, `TextArea`, `TextBox`, `CheckBox`
 * **Graphic:** `Avatar`, `Icon`, `Image`
@@ -392,6 +392,35 @@ Customization options (selector: `.text`):
 - `--size-large` (default: `var(--element-font-large)`)
 - weights are defined at global level.
 
+### List
+
+Element for ordered and unordered lists.
+
+`List` properties:
+
+- **type** - `ordered` | `unordered` (required)
+- **size** - `small` | `medium` | `large` (optional, default `medium`)
+- **children** - `ReactElement<List.Item>` (required)
+
+`List.Item` properties:
+
+- **children** - ReactNode
+
+Example:
+
+```tsx
+import { List } from '@maskingtech/designsystem';
+
+<List type='ordered' size='small'>
+  <List.Item>First</List.Item>
+  <List.Item>Second</List.Item>
+</List>
+```
+
+Customization options (selector: `.list`):
+
+- `--margin` (default: `var(--margin)`)
+
 ## Interaction elements
 
 ### Button

From 5b822bf3b3c205ace89550076df50c8ca2b94294 Mon Sep 17 00:00:00 2001
From: Peter van Vliet <peter@masking.tech>
Date: Tue, 17 Feb 2026 12:49:30 +0100
Subject: [PATCH 4/6] #17: processed CodeRabbit feedback

---
 docs/ELEMENTS.md           | 2 +-
 src/elements/text/Text.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/ELEMENTS.md b/docs/ELEMENTS.md
index 0e735f3..ef40869 100644
--- a/docs/ELEMENTS.md
+++ b/docs/ELEMENTS.md
@@ -373,7 +373,7 @@ Properties:
 - **type** - `primary` | `secondary` (optional, default `primary`)
 - **size** - `small` | `medium` | `large` (optional, default `medium`)
 - **weight** - `light` | `normal` | `bold` (optional, default `normal`)
-- **wrap** - `none` | `normal` | `break-word` (optional, default `none`)
+- **wrap** - `none` | `normal` | `break-word` (optional, default `normal`)
 
 Example:
 
diff --git a/src/elements/text/Text.css b/src/elements/text/Text.css
index 78f0594..f3a3af0 100644
--- a/src/elements/text/Text.css
+++ b/src/elements/text/Text.css
@@ -9,7 +9,7 @@
         --size-medium: var(--element-font-medium);
         --size-large: var(--element-font-large);
 
-        display: inline;
+        display: inline-block;
 
         &.type-primary
         {

From 184035db192e1f98ba2bfad36d23f855ab621e2d Mon Sep 17 00:00:00 2001
From: Peter van Vliet <peter@masking.tech>
Date: Wed, 18 Feb 2026 09:28:40 +0100
Subject: [PATCH 5/6] #17: processed review feedback

---
 src/elements/list/List.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/elements/list/List.tsx b/src/elements/list/List.tsx
index bc85218..b3fb936 100644
--- a/src/elements/list/List.tsx
+++ b/src/elements/list/List.tsx
@@ -15,7 +15,6 @@ type Props = {
 export function List({ type, size = 'medium', children }: Props)
 {
     const className = 'list'
-        + ' type-' + type
         + ' size-' + size;
 
     return type === 'ordered'

From df093913a261024eb774ddb6b0d90192c03e9651 Mon Sep 17 00:00:00 2001
From: Peter van Vliet <peter@masking.tech>
Date: Wed, 18 Feb 2026 10:23:18 +0100
Subject: [PATCH 6/6] #17: bumped version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index eabd70e..dfbfa69 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@maskingtech/designsystem",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "repository": {
     "url": "https://github.com/MaskingTechnology/designsystem"