From 104f34fee077f1ee15c2dfe2fab92641ddde91fc Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Sun, 27 Sep 2026 12:47:24 +0200
Subject: [PATCH 01/25] chore: change data-name to className

---
 conventions/Components.md                     | 66 +++++++++++++
 conventions/Interaction and Feedback.md       | 99 +++++++++++++++++++
 .../display-and-visualization/Avatar.tsx      | 30 +++---
 .../display-and-visualization/Chip.tsx        | 11 ++-
 .../ExpansionIcon.tsx                         |  6 +-
 .../ProcessModelActivityNode.tsx              |  3 +-
 .../process-model/ProcessModelCanvas.tsx      |  4 +-
 .../process-model/ProcessModelTraceReplay.tsx |  3 +-
 .../src/components/form/FieldLayout.tsx       | 17 +---
 .../src/components/layout/Expandable.tsx      | 33 +++----
 .../src/components/layout/TabSwitcher.tsx     | 19 ++--
 .../src/components/layout/app/AppPage.tsx     | 22 ++---
 .../src/components/layout/dialog/Dialog.tsx   | 14 +--
 .../layout/drawer/DrawerContainer.tsx         |  8 +-
 .../layout/navigation/BreadCrumbs.tsx         |  7 +-
 .../VerticalNavigationMenu.tsx                |  3 +-
 .../src/components/layout/popup/PopUp.tsx     | 21 ++--
 .../components/layout/table/FillerCell.tsx    |  9 +-
 .../src/components/layout/table/TableBody.tsx |  7 +-
 .../src/components/layout/table/TableCell.tsx |  3 +-
 .../components/layout/table/TableDisplay.tsx  | 18 ++--
 .../components/layout/table/TableHeader.tsx   | 11 +--
 .../layout/table/VirtualizedTableBody.tsx     | 11 +--
 .../layout/table/useNaturalColumnWidthLock.ts |  2 +-
 .../virtualization/virtualizationScroll.ts    |  2 +-
 .../components/user-interaction/Button.tsx    |  8 +-
 .../components/user-interaction/Checkbox.tsx  | 12 +--
 .../Combobox/ComboboxList.tsx                 |  6 +-
 .../Combobox/ComboboxOption.tsx               | 10 +-
 .../FileInput/FileInputMenu.tsx               | 13 +--
 .../FileInput/FileInputTrigger.tsx            | 14 +--
 .../MultiSelectChipDisplayTrigger.tsx         | 13 ++-
 .../MultiSelect/MultiSelectContent.tsx        |  6 +-
 .../MultiSelect/MultiSelectOption.tsx         |  5 +-
 .../MultiSelect/MultiSelectTrigger.tsx        | 15 ++-
 .../user-interaction/Select/SelectContent.tsx |  3 +-
 .../user-interaction/Select/SelectOption.tsx  |  5 +-
 .../user-interaction/Select/SelectTrigger.tsx | 15 ++-
 .../components/user-interaction/Switch.tsx    | 11 +--
 .../components/user-interaction/Textarea.tsx  |  9 +-
 .../components/user-interaction/Tooltip.tsx   | 22 ++---
 .../user-interaction/data/FilterPopUp.tsx     |  5 +-
 .../user-interaction/date/DayPicker.tsx       | 18 ++--
 .../user-interaction/date/TimeInput.tsx       | 17 ++--
 .../user-interaction/date/TimePicker.tsx      | 15 +--
 .../user-interaction/input/DateTimeField.tsx  | 15 ++-
 .../user-interaction/input/DateTimeInput.tsx  |  8 +-
 .../user-interaction/input/Input.tsx          | 14 +--
 .../user-interaction/input/NumberInput.tsx    |  8 +-
 .../input/NumberStepperInput.tsx              |  8 +-
 .../input/ToggleableInput.tsx                 |  3 +-
 .../properties/DateProperty.tsx               |  3 +-
 .../properties/MultiSelectProperty.tsx        |  2 +-
 .../properties/NumberProperty.tsx             | 11 +--
 .../properties/PropertyBase.tsx               | 17 ++--
 .../properties/SelectProperty.tsx             |  5 +-
 .../properties/TextProperty.tsx               |  3 +-
 .../src/style/theme/components/app-page.css   | 16 +--
 .../src/style/theme/components/avatar.css     | 14 +--
 .../src/style/theme/components/breadcrumb.css |  6 +-
 .../src/style/theme/components/button.css     |  4 +-
 .../components/chat/chat-message-card.css     |  2 +-
 .../src/style/theme/components/checkbox.css   |  4 +-
 .../src/style/theme/components/chip.css       |  4 +-
 .../src/style/theme/components/combobox.css   | 10 +-
 .../theme/components/date-time-input.css      |  8 +-
 .../src/style/theme/components/day-picker.css | 10 +-
 .../src/style/theme/components/dialog.css     |  6 +-
 .../src/style/theme/components/drawer.css     |  2 +-
 .../src/style/theme/components/expandable.css |  6 +-
 .../style/theme/components/expansion-icon.css |  2 +-
 .../src/style/theme/components/file-input.css | 20 ++--
 .../src/style/theme/components/form-field.css |  8 +-
 .../style/theme/components/input-elements.css |  2 +-
 .../src/style/theme/components/pop-up.css     |  2 +-
 .../src/style/theme/components/property.css   | 44 ++++-----
 .../src/style/theme/components/select.css     | 20 ++--
 .../src/style/theme/components/switch.css     |  6 +-
 .../src/style/theme/components/table.css      | 26 ++---
 .../style/theme/components/tabswitcher.css    |  8 +-
 .../src/style/theme/components/textarea.css   |  2 +-
 .../style/theme/components/time-picker.css    |  4 +-
 .../theme/components/toggleable-intput.css    |  2 +-
 .../src/style/theme/components/tooltip.css    |  4 +-
 .../theme/components/vertical-navigation.css  |  2 +-
 packages/hightide-web/src/utils/propsUtil.ts  |  8 +-
 .../tests/table/naturalColumnSizing.test.tsx  |  6 +-
 .../virtualizationScroll.test.ts              |  4 +-
 88 files changed, 551 insertions(+), 459 deletions(-)
 create mode 100644 conventions/Components.md
 create mode 100644 conventions/Interaction and Feedback.md

diff --git a/conventions/Components.md b/conventions/Components.md
new file mode 100644
index 00000000..d675577b
--- /dev/null
+++ b/conventions/Components.md
@@ -0,0 +1,66 @@
+# Components
+
+How components are structured.
+
+## Anatomy
+
+Every component is split into primitives, and every component has an aggregate.
+
+The aggregate is the component used in the common case. Primitives are the individual elements of that component, attached as static members of the aggregate.
+
+```tsx
+<Select value={value} onValueChange={setValue}>
+  <Select.Option value="a">A</Select.Option>
+</Select>
+```
+
+`<Select />` is the aggregate. `Select.Root`, `Select.Trigger`, `Select.Content`, and `Select.Option` are the primitives. Each element of the component has its own primitive.
+
+The aggregate composes those primitives into the default arrangement. Callers who need a different arrangement use the primitives directly. Both forms are part of the public API.
+
+### Aggregate
+
+Props that belong to an individual primitive can be set on the aggregate. A dedicated props object for that primitive overwrites the values the aggregate already applied.
+
+```tsx
+<Select
+  value={value}
+  onValueChange={setValue}
+  placeholder="Choose"
+  triggerProps={{ className: 'w-full' }}
+  contentProps={{ className: 'max-h-64' }}
+>
+  <Select.Option value="a">A</Select.Option>
+</Select>
+```
+
+`value` and `onValueChange` parameterize `Select.Root`. `placeholder` parameterizes `Select.Trigger`. `triggerProps` and `contentProps` are applied on top of the props the aggregate already passed, so they win when both set the same prop.
+
+That aggregate is the same composition as:
+
+```tsx
+<Select.Root value={value} onValueChange={setValue}>
+  <Select.Trigger placeholder="Choose" className="w-full" />
+  <Select.Content className="max-h-64">
+    <Select.Option value="a">A</Select.Option>
+  </Select.Content>
+</Select.Root>
+```
+
+### Primitives
+
+A primitive owns one element: the root, the trigger, the content panel, an option, and so on. Name them `Component.Element`, and export them on the aggregate.
+
+### Root
+
+When primitives share state, the component provides a `Component.Root` primitive. Root parameterizes that state and provides it through context. The other primitives read the context. They do not own the shared state themselves.
+
+`Select.Root` holds the open state, the current value, interaction flags such as disabled, invalid, and read-only, and option registration, and passes them through `Select.Context`.
+
+A component whose primitives do not share state does not have a Root.
+
+## Styling identification
+
+Components identify themselves for styling with class names. Do not use `data-name`, or any other data attribute, as the styling hook.
+
+Data attributes are reserved for states and configuration, for example `data-disabled`, `data-invalid`, and `data-processing="subtle"`.
diff --git a/conventions/Interaction and Feedback.md b/conventions/Interaction and Feedback.md
new file mode 100644
index 00000000..a31477c0
--- /dev/null
+++ b/conventions/Interaction and Feedback.md	
@@ -0,0 +1,99 @@
+# Interaction and Feedback
+
+Minimum states an element must differentiate. These apply to mobile and web unless a state is marked web only.
+
+There are three component types: Presentation, Interactive, and DataInput. Each type lists its own states. States are not inherited from another type.
+
+LifeCycle is separate from these types. It describes whether the element is available, waiting on data, blocked by an external operation or dependency, or performing an operation.
+
+## Presentation
+
+Presentation elements display content. They do not take input.
+
+Presentation elements have no interaction states.
+
+## Interactive
+
+Interactive elements can be activated.
+
+| State | Scope |
+| --- | --- |
+| `hover` | web only |
+| `pressed` | mobile and web |
+| `focus` | mobile and web |
+| `focus-visible` | web only, often replacing `focus` |
+| `disabled` | mobile and web |
+
+## DataInput
+
+Data input elements accept or display an editable value.
+
+| State | Scope |
+| --- | --- |
+| `readonly` | data input only |
+| `invalid` | data input only |
+| `hover` | web only |
+| `pressed` | mobile and web |
+| `focus` | mobile and web |
+| `focus-visible` | web only, often replacing `focus` |
+| `disabled` | mobile and web |
+
+## LifeCycle
+
+Every element can be in one lifecycle state:
+
+```ts
+type LifeCycle = 'idle' | 'loading' | 'blocked' | 'processing'
+```
+
+### idle
+
+The element is available to be used.
+
+### loading
+
+The element is loading data. Its content is not ready to show yet.
+
+Show a skeleton or a placeholder in its place. The placeholder is often a rounded rectangle that roughly approximates the element's size.
+
+### blocked
+
+An external operation or dependency is preventing this element from being used.
+
+### processing
+
+This element is updating, or performing an operation, and that operation stops interaction. The element stays visible while the operation runs.
+
+## Interaction states
+
+`readonly`, `invalid`, `hover`, `pressed`, `focus`, `focus-visible`, and `disabled` follow the matching HTML semantics.
+
+### hover
+
+Web only. The pointer is over the element. This matches the CSS `:hover` pseudo-class. Mobile does not use this state.
+
+### pressed
+
+The element is being activated by a pointer or touch press. This matches `:active`.
+
+### focus
+
+The element has focus. This matches `:focus`.
+
+### focus-visible
+
+Web only. The element has focus and that focus should be shown, typically because it came from the keyboard. This matches `:focus-visible`.
+
+On web, `focus-visible` often replaces the `focus` visual, so pointer focus does not draw a focus ring. Mobile does not use this state.
+
+### disabled
+
+The element cannot be interacted with. This matches the `disabled` attribute and `:disabled`.
+
+### readonly
+
+Data input only. The value can be read and is not editable. This matches the `readonly` attribute.
+
+### invalid
+
+Data input only. The current value fails validation. This matches `:invalid` and `aria-invalid`.
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar.tsx b/packages/hightide-web/src/components/display-and-visualization/Avatar.tsx
index 61ded924..320b411f 100644
--- a/packages/hightide-web/src/components/display-and-visualization/Avatar.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar.tsx
@@ -59,16 +59,14 @@ export const Avatar = ({
 
   return (
     <div
-      {...props}
-      data-name="avatar"
-      data-size={size ?? undefined}
-    >
+      className={clsx('avatar', props.className)}
+      data-size={size ?? undefined}>
       <Visibility isVisible={isShowingImage}>
         <Image
           key={image?.avatarUrl}
           src={image?.avatarUrl}
           alt={image?.alt}
-          data-name="avatar-image"
+          className="avatar-image"
           onLoad={() => setHasLoaded(true)}
           onError={() => setHasError(true)}
           data-error={hasError ? '' : undefined}
@@ -81,11 +79,10 @@ export const Avatar = ({
 }
 
 export type AvatarGroupProps = HTMLAttributes<HTMLDivElement> & {
-  'avatars': Omit<AvatarProps, 'size'>[],
-  'showTotalNumber'?: boolean,
-  'size'?: AvatarSize,
-  'data-name'?: string,
-  'ImageComponent'?: ElementType<AvatarImageProps>,
+  avatars: Omit<AvatarProps, 'size'>[],
+  showTotalNumber?: boolean,
+  size?: AvatarSize,
+  ImageComponent?: ElementType<AvatarImageProps>,
 }
 
 /**
@@ -118,14 +115,12 @@ export const AvatarGroup = ({
 
   return (
     <div
-      {...props}
-      data-name={props['data-name'] ?? 'avatar-group'}
-      data-size={size ?? undefined}
-    >
+      className={clsx('avatar-group', props.className)}
+      data-size={size ?? undefined}>
       {group}
       {showTotalNumber && notDisplayedProfiles > 0 && (
         <span
-          data-name="avatar-group-more"
+          className="avatar-group-more"
           data-size={size}
         >
           {`+ ${notDisplayedProfiles}`}
@@ -149,13 +144,12 @@ export const AvatarWithStatus = ({
 }: AvatarWithStatusProps) => {
   return (
     <div
-      className={clsx(className)}
-      data-name="avatar-with-status"
+      className={clsx('avatar-with-status', className)}
       data-size={size ?? undefined}
     >
       <Avatar {...avatarProps} size={size} />
       <div
-        data-name="avatar-with-status-dot"
+        className="avatar-with-status-dot"
         data-size={size ?? undefined}
         data-status={status}
       />
diff --git a/packages/hightide-web/src/components/display-and-visualization/Chip.tsx b/packages/hightide-web/src/components/display-and-visualization/Chip.tsx
index d63e24ae..e4b79cc3 100644
--- a/packages/hightide-web/src/components/display-and-visualization/Chip.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/Chip.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type { HTMLAttributes } from 'react'
 import { ButtonUtil } from '../user-interaction/Button'
 
@@ -31,11 +32,10 @@ export const Chip = ({
   return (
     <div
       {...props}
-      data-name={props['data-name'] ?? 'chip'}
+      className={clsx('chip', props.className)}
       data-color={color ?? undefined}
       data-coloringstyle={coloringStyle ?? undefined}
-      data-size={size ?? undefined}
-    >
+      data-size={size ?? undefined}>
       {children}
     </div>
   )
@@ -53,7 +53,10 @@ export const ChipList = ({
   ...props
 }: ChipListProps) => {
   return (
-    <ul {...props} data-name={props['data-name'] ?? 'chip-list'}>
+    <ul
+      {...props}
+      className={clsx('chip-list', props.className)}
+    >
       {list.map((value, index) => (
         <li key={index}>
           <Chip
diff --git a/packages/hightide-web/src/components/display-and-visualization/ExpansionIcon.tsx b/packages/hightide-web/src/components/display-and-visualization/ExpansionIcon.tsx
index 7963c49b..2e30faf4 100644
--- a/packages/hightide-web/src/components/display-and-visualization/ExpansionIcon.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/ExpansionIcon.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { ChevronDown } from 'lucide-react'
 import type { HTMLAttributes } from 'react'
 
@@ -16,10 +17,9 @@ export const ExpansionIcon = ({
   return (
     <div
       {...props}
-      data-name={props['data-name'] ?? 'expansion-icon'}
+      className={clsx('expansion-icon', props.className)}
       data-expanded={isExpanded ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
-    >
+      data-disabled={disabled ? '' : undefined}>
       {children ? (
         children
       ) : (
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelActivityNode.tsx b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelActivityNode.tsx
index c1557ac1..2c10fc9e 100644
--- a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelActivityNode.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelActivityNode.tsx
@@ -37,9 +37,8 @@ export const ProcessModelActivityNode = ({
   const rootName = kind === 'terminal' ? 'process-model-terminal-node' : 'process-model-activity-node'
   return (
     <div
-      data-name={rootName}
       id={`nd-${nodeId}`}
-      className={clsx('process-model-activity-node', className)}
+      className={clsx('process-model-activity-node', rootName, className)}
       data-kind={kind}
       data-bordered={PropsUtil.dataAttributes.bool(bordered)}
       data-active={PropsUtil.dataAttributes.bool(active)}
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx
index 3f10a466..158cc0c4 100644
--- a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx
@@ -5,6 +5,7 @@ import { ProcessModelActivityNode } from './ProcessModelActivityNode'
 import { ProcessModelTerminalNode } from './ProcessModelTerminalNode'
 import { ProcessModelLayoutUtilities } from './layoutProcessModel'
 import type {
+
   ProcessModelGraph,
   ProcessModelGraphActivityNode,
   ProcessModelGraphNode
@@ -173,8 +174,7 @@ export const ProcessModelCanvas = ({
 
   return (
     <div
-      data-name="process-model-canvas"
-      className={clsx('process-model-canvas-wrap', className)}
+      className={clsx('process-model-canvas process-model-canvas-wrap', className)}
       style={{ width: canvasW + 64, minHeight: canvasH + 64 }}
     >
       <svg
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
index e80b1afd..b0bd7686 100644
--- a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
@@ -1,4 +1,5 @@
 import {
+
   useCallback,
   useEffect,
   useId,
@@ -269,7 +270,7 @@ export const ProcessModelTraceReplay = ({ graph, className }: ProcessModelTraceR
   }, [])
 
   return (
-    <div data-name="process-model-trace-replay" className={clsx('process-model-trace-replay', className)}>
+    <div className={clsx('process-model-trace-replay', className)}>
       <div className="process-model-trace-replay-toolbar">
         <Button
           color="primary"
diff --git a/packages/hightide-web/src/components/form/FieldLayout.tsx b/packages/hightide-web/src/components/form/FieldLayout.tsx
index c1edba25..e15522e3 100644
--- a/packages/hightide-web/src/components/form/FieldLayout.tsx
+++ b/packages/hightide-web/src/components/form/FieldLayout.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type { HTMLAttributes, ReactNode } from 'react'
 import { useId, useMemo, forwardRef } from 'react'
 import type { FormFieldInteractionStates } from '../../utils/propsUtil'
@@ -87,16 +88,13 @@ export const FormFieldLayout = forwardRef<HTMLDivElement, FormFieldLayoutProps>(
     <div
       {...props}
       ref={ref}
-
-      data-name="form-field-container"
-    >
+      className={clsx('form-field-container', props.className)}>
       {label && (
         <label
           {...labelProps}
           id={ids.label}
           htmlFor={ids.input}
-          data-name="form-field-label"
-        >
+          className={clsx('form-field-label', labelProps?.className)}>
           {label}
           {showRequiredIndicator && required && <div role="none" className="bg-primary w-2 h-2 rounded-full" />}
         </label>
@@ -105,9 +103,7 @@ export const FormFieldLayout = forwardRef<HTMLDivElement, FormFieldLayoutProps>(
         <p
           {...descriptionProps}
           id={ids.description}
-
-          data-name="form-field-description"
-        >
+          className={clsx('form-field-description', descriptionProps?.className)}>
           {description}
         </p>
       )}
@@ -116,13 +112,10 @@ export const FormFieldLayout = forwardRef<HTMLDivElement, FormFieldLayoutProps>(
         <div
           {...invalidDescriptionProps}
           id={ids.description}
-
           role="alert"
           aria-hidden={!invalid}
           aria-live="polite"
-
-          data-name="form-field-error"
-        >
+          className={clsx('form-field-error', invalidDescriptionProps?.className)}>
           {invalidDescription}
         </div>
       )}
diff --git a/packages/hightide-web/src/components/layout/Expandable.tsx b/packages/hightide-web/src/components/layout/Expandable.tsx
index 8d3828b5..3f772ba0 100644
--- a/packages/hightide-web/src/components/layout/Expandable.tsx
+++ b/packages/hightide-web/src/components/layout/Expandable.tsx
@@ -42,12 +42,11 @@ function useExpandableContext() {
 //
 
 export type ExpandableRootProps = HTMLAttributes<HTMLDivElement> & {
-  'isExpanded'?: boolean,
-  'onExpandedChange'?: (isExpanded: boolean) => void,
-  'isInitialExpanded'?: boolean,
-  'disabled'?: boolean,
-  'allowContainerToggle'?: boolean,
-  'data-name'?: string,
+  isExpanded?: boolean,
+  onExpandedChange?: (isExpanded: boolean) => void,
+  isInitialExpanded?: boolean,
+  disabled?: boolean,
+  allowContainerToggle?: boolean,
 }
 
 export const ExpandableRoot = forwardRef<HTMLDivElement, ExpandableRootProps>(function ExpandableRoot({
@@ -93,7 +92,7 @@ export const ExpandableRoot = forwardRef<HTMLDivElement, ExpandableRootProps>(fu
         {...props}
         ref={ref}
         id={ids.root}
-        data-name={props['data-name'] ?? 'expandable-root'}
+        className={clsx('expandable-root', props.className)}
         onClick={(event) => {
           props.onClick?.(event)
           if (allowContainerToggle) {
@@ -102,8 +101,7 @@ export const ExpandableRoot = forwardRef<HTMLDivElement, ExpandableRootProps>(fu
         }}
         data-expanded={isExpanded ? '' : undefined}
         data-disabled={disabled ? '' : undefined}
-        data-containertoggleable={allowContainerToggle ? '' : undefined}
-      >
+        data-containertoggleable={allowContainerToggle ? '' : undefined}>
         {children}
       </div>
     </ExpandableContext.Provider>
@@ -115,8 +113,7 @@ export const ExpandableRoot = forwardRef<HTMLDivElement, ExpandableRootProps>(fu
 //
 
 export type ExpandableHeaderProps = HTMLAttributes<HTMLDivElement> & {
-  'isUsingDefaultIcon'?: boolean,
-  'data-name'?: string,
+  isUsingDefaultIcon?: boolean,
 }
 
 export const ExpandableHeader = forwardRef<HTMLDivElement, ExpandableHeaderProps>(function ExpandableHeader({
@@ -137,7 +134,7 @@ export const ExpandableHeader = forwardRef<HTMLDivElement, ExpandableHeaderProps
       {...props}
       ref={ref}
       id={ids.header}
-      data-name={props['data-name'] ?? 'expandable-header'}
+      className={clsx('expandable-header', props.className)}
       onClick={event => {
         event.stopPropagation()
         props.onClick?.(event)
@@ -147,8 +144,7 @@ export const ExpandableHeader = forwardRef<HTMLDivElement, ExpandableHeaderProps
       data-disabled={disabled ? '' : undefined}
       aria-expanded={isExpanded}
       aria-controls={ids.content}
-      aria-disabled={disabled || undefined}
-    >
+      aria-disabled={disabled || undefined}>
       {children}
       <Visibility isVisible={isUsingDefaultIcon}>
         <ExpansionIcon isExpanded={isExpanded} disabled={disabled} />
@@ -162,8 +158,7 @@ export const ExpandableHeader = forwardRef<HTMLDivElement, ExpandableHeaderProps
 //
 
 export type ExpandableContentProps = HTMLAttributes<HTMLDivElement> & {
-  'forceMount'?: boolean,
-  'data-name'?: string,
+  forceMount?: boolean,
 }
 
 export const ExpandableContent = forwardRef<HTMLDivElement, ExpandableContentProps>(function ExpandableContent({
@@ -189,10 +184,9 @@ export const ExpandableContent = forwardRef<HTMLDivElement, ExpandableContentPro
       {...props}
       ref={ReactUtils.assingRefsBuilder([ref, forwardedRef])}
       id={ids.content}
-      data-name={props['data-name'] ?? 'expandable-content'}
+      className={clsx('expandable-content', props.className)}
       data-expanded={isExpanded ? '' : undefined}
-      data-state={transitionState}
-    >
+      data-state={transitionState}>
       <Visibility isVisible={forceMount || isExpanded}>
         {children}
       </Visibility>
@@ -200,7 +194,6 @@ export const ExpandableContent = forwardRef<HTMLDivElement, ExpandableContentPro
   )
 })
 
-
 //
 // Composite
 //
diff --git a/packages/hightide-web/src/components/layout/TabSwitcher.tsx b/packages/hightide-web/src/components/layout/TabSwitcher.tsx
index 3a8fd74c..5e29f579 100644
--- a/packages/hightide-web/src/components/layout/TabSwitcher.tsx
+++ b/packages/hightide-web/src/components/layout/TabSwitcher.tsx
@@ -2,11 +2,11 @@ import type { CSSProperties, Dispatch, HTMLAttributes, KeyboardEvent, PropsWithC
 import { useCallback, useId, useState } from 'react'
 import { createContext, useContext, useEffect, useRef } from 'react'
 import clsx from 'clsx'
-import { PropsUtil } from '../../utils/propsUtil'
 import { resolveSetState } from '@helpwave/hightide-utils/utils'
 import { createPortal } from 'react-dom'
 import { Visibility } from './Visibility'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
+import { PropsUtil } from '../../utils'
 
 export interface TabInfo {
   id: string,
@@ -94,7 +94,6 @@ export function TabSwitcher({ children, activeId: controlledActiveId, onActiveId
     }
   }, [])
 
-
   useEffect(() => {
     const active = tabInfos.find(value => value.id === activeId)
     if(!active || !active.disabled) return
@@ -182,12 +181,11 @@ export function TabList({ ...props }: TabListProps) {
   return (
     <ul
       {...props}
-      data-name="tab-list"
+      className={clsx('tab-list', props.className)}
       onKeyDown={onKeyDown}
       role="tablist"
       aria-orientation="horizontal"
-      style={{ '--tab-count': infos?.length ?? 0, ...props.style } as CSSProperties}
-    >
+      style={{ '--tab-count': infos?.length ?? 0, ...props.style } as CSSProperties}>
       {infos?.map((tabInfo) => {
         const isDisabled = !!tabInfo.disabled
         const isActive = activeId === tabInfo.id
@@ -199,10 +197,9 @@ export function TabList({ ...props }: TabListProps) {
             }}
             id={tabInfo.labelId}
 
-
             {...(isDisabled ? {} : PropsUtil.aria.click(() => setActive(tabInfo.id)))}
 
-            data-name="tab-list-item"
+            className="tab-list-item"
             data-active={PropsUtil.dataAttributes.bool(isActive)}
             data-disabled={PropsUtil.dataAttributes.bool(isDisabled)}
 
@@ -220,7 +217,6 @@ export function TabList({ ...props }: TabListProps) {
   )
 }
 
-
 //
 // TabView
 //
@@ -288,13 +284,10 @@ export function TabPanel({ label, forceMount = false, disabled = false, initiall
       ref={ref}
       id={id}
       hidden={!isActive}
-
-      data-name="tab-panel"
+      className={clsx('tab-panel', props.className)}
       data-disabled={PropsUtil.dataAttributes.bool(disabled)}
-
       role="tabpanel"
-      aria-labelledby={labelId}
-    >
+      aria-labelledby={labelId}>
       <Visibility isVisible={isActive || forceMount}>
         {props.children}
       </Visibility>
diff --git a/packages/hightide-web/src/components/layout/app/AppPage.tsx b/packages/hightide-web/src/components/layout/app/AppPage.tsx
index fab0a940..717d0b5f 100644
--- a/packages/hightide-web/src/components/layout/app/AppPage.tsx
+++ b/packages/hightide-web/src/components/layout/app/AppPage.tsx
@@ -24,13 +24,13 @@ export const AppSidebar = ({ isOpen = false, onClose, children, ...props }: AppS
     <>
       {isOpen && (
         <div
-          data-name="app-sidebar-backdrop"
+          className="app-sidebar-backdrop"
           onClick={onClose}
           role="presentation"
         />
       )}
       <div
-        data-name="app-sidebar-container"
+        className="app-sidebar-container"
         data-open={PropsUtil.dataAttributes.bool(isOpen)}
         style={{ zIndex }}
       >
@@ -39,12 +39,10 @@ export const AppSidebar = ({ isOpen = false, onClose, children, ...props }: AppS
           container={ref}
         >
           <aside
-            ref={ref}
             {...props}
-            data-name="app-sidebar-content"
+            ref={ref}
             data-open={PropsUtil.dataAttributes.bool(isOpen)}
-            className={clsx(props.className)}
-          >
+            className={clsx('app-sidebar-content', props.className)}>
             <IconButton
               className="app-sidebar-close-button"
               tooltip={translation('close')}
@@ -197,9 +195,7 @@ export const AppPage = ({
   return (
     <div
       {...props}
-      data-name="app-page"
-      className={clsx(props.className)}
-    >
+      className={clsx('app-page', props.className)}>
       <AppPageSidebarWithNavigation
         isOpen={isSidebarOpen}
         onClose={() => setIsSidebarOpen(false)}
@@ -210,8 +206,8 @@ export const AppPage = ({
         activeId={resolvedActiveId}
         LinkComponent={sidebarProps.LinkComponent}
       />
-      <div data-name="app-page-body">
-        <header data-name="app-page-header">
+      <div className="app-page-body">
+        <header className="app-page-header">
           <IconButton
             className="app-page-menu-button"
             tooltip={translation('menu')}
@@ -222,8 +218,8 @@ export const AppPage = ({
           </IconButton>
           {headerActions}
         </header>
-        <div data-name="app-page-content" data-no-scrolling={noScrolling ? '' : undefined}>
-          <main data-name="app-page-main-content" data-outer-no-scrolling={noScrolling ? '' : undefined}>
+        <div className="app-page-content" data-no-scrolling={noScrolling ? '' : undefined}>
+          <main className="app-page-main-content" data-outer-no-scrolling={noScrolling ? '' : undefined}>
             {children}
             {hasSpacer && (<div className="app-page-main-spacer" />)}
           </main>
diff --git a/packages/hightide-web/src/components/layout/dialog/Dialog.tsx b/packages/hightide-web/src/components/layout/dialog/Dialog.tsx
index d82af75a..cf800be9 100644
--- a/packages/hightide-web/src/components/layout/dialog/Dialog.tsx
+++ b/packages/hightide-web/src/components/layout/dialog/Dialog.tsx
@@ -1,5 +1,7 @@
 'use client'
 
+import clsx from 'clsx'
+
 import type { HTMLAttributes, ReactNode } from 'react'
 import { forwardRef, useCallback, useContext, useId, useMemo, useRef } from 'react'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
@@ -10,7 +12,6 @@ import { useLogOnce } from '@helpwave/hightide-utils/hooks'
 import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
 import { Visibility } from '../Visibility'
 import { useTransitionState } from '../../../hooks/useTransitionState'
-import { PropsUtil } from '../../../utils/propsUtil'
 import { Portal } from '../../utils/Portal'
 import { FocusTrap } from '../../utils/FocusTrap'
 import { usePresenceRef } from '../../../hooks/usePresenceRef'
@@ -18,6 +19,8 @@ import { DialogContext } from './DialogContext'
 import { IconButton } from '../../user-interaction/IconButton'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
+import { PropsUtil } from '../../../utils/propsUtil'
+
 export type DialogPosition = 'top' | 'center' | 'none'
 
 export type DialogProps = HTMLAttributes<HTMLDivElement> & {
@@ -103,8 +106,7 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog({
 
           data-open={PropsUtil.dataAttributes.bool(isOpen)}
 
-          data-name="dialog-container"
-          className={containerClassName}
+          className={clsx('dialog-container', containerClassName)}
           style={{ zIndex }}
         >
           <div
@@ -112,12 +114,11 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog({
 
             onClick={onCloseWrapper}
 
-            data-name="dialog-background"
             data-state={transitionState}
 
             aria-hidden={true}
 
-            className={backgroundClassName}
+            className={clsx('dialog-background', backgroundClassName)}
           />
           <FocusTrap active={isPresent && isOpen} container={ref}>
             <div
@@ -135,8 +136,7 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog({
               aria-labelledby={ids.title}
               aria-describedby={hasDescription ? ids.description : undefined}
 
-              data-name="dialog-content"
-            >
+              className={clsx('dialog-content', props.className)}>
               <div className="typography-title-lg mr-10">
                 {titleElement}
               </div>
diff --git a/packages/hightide-web/src/components/layout/drawer/DrawerContainer.tsx b/packages/hightide-web/src/components/layout/drawer/DrawerContainer.tsx
index f2bf985b..ae4246ad 100644
--- a/packages/hightide-web/src/components/layout/drawer/DrawerContainer.tsx
+++ b/packages/hightide-web/src/components/layout/drawer/DrawerContainer.tsx
@@ -2,13 +2,14 @@ import { forwardRef, useId, useMemo, useRef, type HTMLAttributes } from 'react'
 import { useFocusTrap } from '../../../hooks/focus/useFocusTrap'
 import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
 import { useTransitionState } from '../../../hooks/useTransitionState'
-import { PropsUtil } from '../../../utils/propsUtil'
 import { Portal } from '../../utils/Portal'
 import { useDrawerContext } from './DrawerContext'
 import type { DrawerAligment } from './Drawer'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import clsx from 'clsx'
 
+import { PropsUtil } from '../../../utils/propsUtil'
+
 export type DrawerContainerProps = HTMLAttributes<HTMLDivElement> & {
   alignment: DrawerAligment,
   containerClassName?: string,
@@ -62,8 +63,7 @@ export const DrawerContainer = forwardRef<HTMLDivElement, DrawerContainerProps>(
         <div
           id={ids.background}
           onClick={() => setOpen(false)}
-          className={backgroundClassName}
-          data-name="drawer-background"
+          className={clsx('drawer-background', backgroundClassName)}
           data-state={transitionState}
           data-depth={depth}
           data-alignment={alignment}
@@ -85,5 +85,3 @@ export const DrawerContainer = forwardRef<HTMLDivElement, DrawerContainerProps>(
     </Portal>
   )
 })
-
-
diff --git a/packages/hightide-web/src/components/layout/navigation/BreadCrumbs.tsx b/packages/hightide-web/src/components/layout/navigation/BreadCrumbs.tsx
index 0a693336..0829fa11 100644
--- a/packages/hightide-web/src/components/layout/navigation/BreadCrumbs.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/BreadCrumbs.tsx
@@ -19,11 +19,10 @@ export const BreadCrumbLink = ({ LinkElement = DefaultBreadCrumbLinkElement, cla
 
 const BreadCrumbDivider = () => {
   return (
-    <span data-name="breadcrumb-divider">/</span>
+    <span className="breadcrumb-divider">/</span>
   )
 }
 
-
 type BreadCrumbGroupProps = HTMLAttributes<HTMLUListElement> & {
   divider?: ReactNode | null,
 }
@@ -37,11 +36,11 @@ export const BreadCrumbGroup = ({ children, divider, ...props }: BreadCrumbGroup
   const items = ArrayUtil.resolveSingleOrArray(children)
 
   return (
-    <ul {...props} data-name="breadcrumb">
+    <ul {...props} className={clsx('breadcrumb', props.className)}>
       {items.map((item, index) => {
         const isLast = index === items.length - 1
         return (
-          <li key={index} data-name="breadcrumb-item">
+          <li key={index} className="breadcrumb-item">
             {item}
             {!isLast && divider !== null && (divider ?? <BreadCrumbDivider/>)}
           </li>
diff --git a/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenu.tsx b/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenu.tsx
index 6d292556..a5d522f4 100644
--- a/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenu.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenu.tsx
@@ -1,5 +1,6 @@
 import type { ElementType } from 'react'
 import {
+
   NavigationProvider,
   type NavigationProviderProps
 } from './NavigationContext'
@@ -29,7 +30,7 @@ export function VerticalNavigationMenu({
 
   return (
     <NavigationProvider nodes={nodes} {...navigationOptions}>
-      <ul data-name="vertical-navigation-menu">
+      <ul className="vertical-navigation-menu">
         {items.map((item) => (
           <VerticalNavigationMenuItem key={item.id} {...item} LinkComponent={LinkComponent} />
         ))}
diff --git a/packages/hightide-web/src/components/layout/popup/PopUp.tsx b/packages/hightide-web/src/components/layout/popup/PopUp.tsx
index 8a79059a..0fc22f7c 100644
--- a/packages/hightide-web/src/components/layout/popup/PopUp.tsx
+++ b/packages/hightide-web/src/components/layout/popup/PopUp.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type { RefObject } from 'react'
 import { forwardRef, useCallback, useContext, useMemo, useRef } from 'react'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
@@ -9,23 +10,22 @@ import type { UseFocusTrapProps } from '../../../hooks/focus/useFocusTrap'
 import { FocusTrap } from '../../utils/FocusTrap'
 import type { UseOutsideClickHandlers, UseOutsideClickOptions } from '../../../hooks/useOutsideClick'
 import { useOutsideClick } from '../../../hooks/useOutsideClick'
-import { PropsUtil } from '../../../utils/propsUtil'
 import { usePresenceRef } from '../../../hooks/usePresenceRef'
 import { useLogOnce } from '@helpwave/hightide-utils/hooks'
 import { PopUpContext } from './PopUpContext'
 import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
 import { useScrollObserver } from '../../../hooks/useScrollObserver'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
+import { PropsUtil } from '../../../utils/propsUtil'
 
 export interface PopUpProps extends Omit<AnchoredFloatingContainerProps, 'anchor'>, Partial<UseOutsideClickHandlers> {
-  'isOpen'?: boolean,
-  'focusTrapOptions'?: Omit<UseFocusTrapProps, 'container'>,
-  'outsideClickOptions'?: Partial<UseOutsideClickOptions>,
-  'onClose'?: () => void,
-  'forceMount'?: boolean,
-  'anchorExcludedFromOutsideClick'?: boolean,
-  'anchor'?: RefObject<HTMLElement |null>,
-  'data-name'?: string,
+  isOpen?: boolean,
+  focusTrapOptions?: Omit<UseFocusTrapProps, 'container'>,
+  outsideClickOptions?: Partial<UseOutsideClickOptions>,
+  onClose?: () => void,
+  forceMount?: boolean,
+  anchorExcludedFromOutsideClick?: boolean,
+  anchor?: RefObject<HTMLElement |null>,
 }
 
 export const PopUp = forwardRef<HTMLDivElement, PopUpProps>(function PopUp({
@@ -99,8 +99,7 @@ export const PopUp = forwardRef<HTMLDivElement, PopUpProps>(function PopUp({
               overflow: 'hidden',
               ...props.style
             }}
-            data-name={props['data-name'] ?? 'pop-up'}
-          >
+            className={clsx('pop-up', props.className)}>
             {children}
           </AnchoredFloatingContainer>
         </FocusTrap>
diff --git a/packages/hightide-web/src/components/layout/table/FillerCell.tsx b/packages/hightide-web/src/components/layout/table/FillerCell.tsx
index b3e052dd..7b0cab9e 100644
--- a/packages/hightide-web/src/components/layout/table/FillerCell.tsx
+++ b/packages/hightide-web/src/components/layout/table/FillerCell.tsx
@@ -1,17 +1,14 @@
-
+import clsx from 'clsx'
 import { Minus } from 'lucide-react'
 import type { HTMLAttributes } from 'react'
 
-export type FillerCellProps = HTMLAttributes<HTMLDivElement> & {
-  'data-name'?: string,
-}
+export type FillerCellProps = HTMLAttributes<HTMLDivElement>
 
 export const FillerCell = ({ ...props }: FillerCellProps) => {
   return (
     <div
       {...props}
-      data-name={props['data-name'] ?? 'table-filler-cell'}
-    >
+      className={clsx('table-filler-cell', props.className)}>
       <Minus className="max-w-4 max-h-4" />
     </div>
   )
diff --git a/packages/hightide-web/src/components/layout/table/TableBody.tsx b/packages/hightide-web/src/components/layout/table/TableBody.tsx
index d6c5e960..5ef28365 100644
--- a/packages/hightide-web/src/components/layout/table/TableBody.tsx
+++ b/packages/hightide-web/src/components/layout/table/TableBody.tsx
@@ -33,12 +33,11 @@ export const TableBody = React.memo(function TableBodyVisual() {
             key={row.id}
             onClick={() => onRowClick?.(row, table)}
             data-clickable={PropsUtil.dataAttributes.bool(!!onRowClick)}
-            data-name="table-body-row"
-            className={clsx(BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original))}
+            className={clsx('table-body-row', BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original))}
           >
             {row.getVisibleCells().map(cell => {
               return (
-                <td key={cell.id} data-name="table-body-cell" className={clsx(cell.column.columnDef.meta?.className)}>
+                <td key={cell.id} className={clsx('table-body-cell', cell.column.columnDef.meta?.className)}>
                   {flexRender(
                     cell.column.columnDef.cell,
                     cell.getContext()
@@ -61,7 +60,7 @@ export const TableBody = React.memo(function TableBodyVisual() {
               {columns.map((column) => {
                 if(!column) return
                 return (
-                  <td key={column.id} data-name="table-body-filler-cell" className={clsx(column.columnDef.meta?.className)}>
+                  <td key={column.id} className={clsx('table-body-filler-cell', column.columnDef.meta?.className)}>
                     {fillerRowCell ? fillerRowCell(column.id, table) : (<FillerCell />)}
                   </td>
                 )
diff --git a/packages/hightide-web/src/components/layout/table/TableCell.tsx b/packages/hightide-web/src/components/layout/table/TableCell.tsx
index 3cae29bb..2f02257a 100644
--- a/packages/hightide-web/src/components/layout/table/TableCell.tsx
+++ b/packages/hightide-web/src/components/layout/table/TableCell.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type { PropsWithChildren } from 'react'
 
 export type TableCellProps = PropsWithChildren<{
@@ -9,7 +10,7 @@ export const TableCell = ({
   className,
 }: TableCellProps) => {
   return (
-    <span data-name="table-default-cell" className={className}>
+    <span className={clsx('table-default-cell', className)}>
       {children}
     </span>
   )
diff --git a/packages/hightide-web/src/components/layout/table/TableDisplay.tsx b/packages/hightide-web/src/components/layout/table/TableDisplay.tsx
index 101c7345..eddfadc8 100644
--- a/packages/hightide-web/src/components/layout/table/TableDisplay.tsx
+++ b/packages/hightide-web/src/components/layout/table/TableDisplay.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type { TableHTMLAttributes } from 'react'
 import { useRef } from 'react'
 import './types'
@@ -11,10 +12,9 @@ import { useScrollbarState } from '../../../hooks/useScrollbarState'
 import { useNaturalColumnWidthLock } from './useNaturalColumnWidthLock'
 
 export interface TableDisplayProps extends TableHTMLAttributes<HTMLTableElement> {
-  'containerProps'?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & { 'data-name'?: string },
-  'tableHeaderProps'?: Omit<TableHeaderProps, 'children' | 'table'>,
-  'virtualized'?: boolean | TableVirtualizationOptions,
-  'data-name'?: string,
+  containerProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
+  tableHeaderProps?: Omit<TableHeaderProps, 'children' | 'table'>,
+  virtualized?: boolean | TableVirtualizationOptions,
 }
 
 
@@ -48,14 +48,13 @@ export const TableDisplay = <T,>({
     <div
       {...containerProps}
       ref={containerRef}
-      data-name={containerProps?.['data-name'] ?? 'table-container'}
+      className={clsx('table-container', containerProps?.className)}
       data-scrollbar={scrollbarState}
-      data-page-scroll={usesPageScroll ? '' : undefined}
-    >
+      data-page-scroll={usesPageScroll ? '' : undefined}>
       <table
         {...props}
         ref={tableRef}
-        data-name={props['data-name'] ?? 'table'}
+        className={clsx('table', props.className)}
         data-column-sizing={columnSizingMode}
         data-natural-locked={isNaturalWidthLocked ? '' : undefined}
 
@@ -64,8 +63,7 @@ export const TableDisplay = <T,>({
             ? { width: Math.floor(Math.max(table.getTotalSize(), targetWidth ?? table.getTotalSize())) }
             : {}),
           ...props.style,
-        }}
-      >
+        }}>
         {children}
         <TableHeader {...tableHeaderProps} />
         {virtualized
diff --git a/packages/hightide-web/src/components/layout/table/TableHeader.tsx b/packages/hightide-web/src/components/layout/table/TableHeader.tsx
index b761842f..82cfb310 100644
--- a/packages/hightide-web/src/components/layout/table/TableHeader.tsx
+++ b/packages/hightide-web/src/components/layout/table/TableHeader.tsx
@@ -1,10 +1,10 @@
-import { PropsUtil } from '../../../utils/propsUtil'
 import { flexRender } from '@tanstack/react-table'
 import clsx from 'clsx'
 import { Visibility } from '../Visibility'
 import { TableSortButton } from './TableSortButton'
 import { TableFilterButton } from './TableFilterButton'
 import { useCallback, useEffect, useRef } from 'react'
+import { PropsUtil } from '../../../utils/propsUtil'
 import { TableStateContext, useTableStateWithoutSizingContext } from './TableContext'
 import { DataTypeUtils, type DataType } from '../../user-interaction/data/data-types'
 import { SafeGlobals } from '../../../utils/safeGlobals'
@@ -103,9 +103,9 @@ export const TableHeader = ({ isSticky = false }: TableHeaderProps) => {
           )}
         </TableStateContext.Consumer>
       ))}
-      <thead data-name="table-header">
+      <thead className="table-header">
         {table.getHeaderGroups().map(headerGroup => (
-          <tr key={headerGroup.id} data-name="table-header-row" className={clsx(table.options.meta?.headerRowClassName)}>
+          <tr key={headerGroup.id} className={clsx('table-header-row', table.options.meta?.headerRowClassName)}>
             {headerGroup.headers.map(header => {
               return (
                 <th
@@ -114,8 +114,7 @@ export const TableHeader = ({ isSticky = false }: TableHeaderProps) => {
 
 
                   data-sticky={isSticky ? '' : undefined}
-                  data-name="table-header-cell"
-                  className={clsx('group/table-header-cell', header.column.columnDef.meta?.className)}
+                  className={clsx('table-header-cell group/table-header-cell', header.column.columnDef.meta?.className)}
                   style={isNaturalSizing ? { minWidth: header.column.columnDef.minSize } : undefined}
                 >
                   <Visibility isVisible={!header.isPlaceholder}>
@@ -181,7 +180,7 @@ export const TableHeader = ({ isSticky = false }: TableHeaderProps) => {
                         header.column.resetSize()
                       }}
 
-                      data-name="table-resize-indicator"
+                      className="table-resize-indicator"
                       data-active={PropsUtil.dataAttributes.bool(header.column.getCanResize() && header.column?.getIsResizing())}
                       data-disabled={PropsUtil.dataAttributes.bool(!header.column.getCanResize())}
                     />
diff --git a/packages/hightide-web/src/components/layout/table/VirtualizedTableBody.tsx b/packages/hightide-web/src/components/layout/table/VirtualizedTableBody.tsx
index 4c0c1c73..ee61b402 100644
--- a/packages/hightide-web/src/components/layout/table/VirtualizedTableBody.tsx
+++ b/packages/hightide-web/src/components/layout/table/VirtualizedTableBody.tsx
@@ -3,9 +3,9 @@ import type { Cell, Row, Table } from '@tanstack/react-table'
 import { flexRender } from '@tanstack/react-table'
 import clsx from 'clsx'
 import { useTableContainerContext, useTableStateWithoutSizingContext } from './TableContext'
-import { PropsUtil } from '../../../utils/propsUtil'
 import { BagFunctionUtil } from '@helpwave/hightide-utils/utils'
 import { range } from '@helpwave/hightide-utils/utils'
+import { PropsUtil } from '../../../utils/propsUtil'
 import { FillerCell } from './FillerCell'
 import { useVirtualizedRows } from '../virtualization/useVirtualizedRows'
 import type { VirtualizationScroll } from '../virtualization/virtualizationScroll'
@@ -45,11 +45,10 @@ const VirtualizedTableRow = memo(({
     ref={measureRef}
     onClick={onRowClick ? () => onRowClick(row, table) : undefined}
     data-clickable={PropsUtil.dataAttributes.bool(!!onRowClick)}
-    data-name="table-body-row"
-    className={className}
+    className={clsx('table-body-row', className)}
   >
     {cells.map(cell => (
-      <td key={cell.id} data-name="table-body-cell" className={clsx(cell.column.columnDef.meta?.className)}>
+      <td key={cell.id} className={clsx('table-body-cell', cell.column.columnDef.meta?.className)}>
         {flexRender(cell.column.columnDef.cell, cell.getContext())}
       </td>
     ))}
@@ -105,9 +104,9 @@ export const VirtualizedTableBody = ({
     return (
       <tbody ref={bodyRef}>
         {range(rowCount).map((_, index) => (
-          <tr key={index} data-name="table-body-filler-row">
+          <tr key={index} className="table-body-filler-row">
             {table.getVisibleLeafColumns().map((col, colIndex) => (
-              <td key={colIndex} data-name="table-body-filler-cell">
+              <td key={colIndex} className="table-body-filler-cell">
                 {fillerRowCell(col.id, table) ?? <FillerCell/>}
               </td>
             ))}
diff --git a/packages/hightide-web/src/components/layout/table/useNaturalColumnWidthLock.ts b/packages/hightide-web/src/components/layout/table/useNaturalColumnWidthLock.ts
index 16564af0..75a23edf 100644
--- a/packages/hightide-web/src/components/layout/table/useNaturalColumnWidthLock.ts
+++ b/packages/hightide-web/src/components/layout/table/useNaturalColumnWidthLock.ts
@@ -37,7 +37,7 @@ export function useNaturalColumnWidthLock<T>({
     if (element.getBoundingClientRect().width === 0) return
     if (getComputedStyle(element).tableLayout !== 'auto') return
 
-    const headerCells = element.querySelectorAll<HTMLTableCellElement>('th[data-name="table-header-cell"]')
+    const headerCells = element.querySelectorAll<HTMLTableCellElement>('th.table-header-cell')
     if (headerCells.length !== columns.length) return
     const measured: Record<string, number> = {}
     columns.forEach((column, index) => {
diff --git a/packages/hightide-web/src/components/layout/virtualization/virtualizationScroll.ts b/packages/hightide-web/src/components/layout/virtualization/virtualizationScroll.ts
index 5248e6a8..5bc79969 100644
--- a/packages/hightide-web/src/components/layout/virtualization/virtualizationScroll.ts
+++ b/packages/hightide-web/src/components/layout/virtualization/virtualizationScroll.ts
@@ -35,7 +35,7 @@ export function findScrollableAncestor(element: HTMLElement | null): HTMLElement
 }
 
 /** Marks the {@link AppPage} content area — the scroll container for `'page'` mode. */
-export const APP_PAGE_CONTENT_SELECTOR = '[data-name="app-page-content"]'
+export const APP_PAGE_CONTENT_SELECTOR = '.app-page-content'
 
 /**
  * Resolves the scroll container for the `'page'` virtualization mode. Prefers the
diff --git a/packages/hightide-web/src/components/user-interaction/Button.tsx b/packages/hightide-web/src/components/user-interaction/Button.tsx
index 4ed46e06..26d2d44e 100644
--- a/packages/hightide-web/src/components/user-interaction/Button.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Button.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type { ButtonHTMLAttributes } from 'react'
 import { forwardRef } from 'react'
 import { LoadingSpinner } from '../layout/loading/LoadingSpinner'
@@ -70,16 +71,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function SolidB
         props.onClick?.(event)
       }}
 
-      data-name={props['data-name'] ?? 'button'}
+      className={clsx('button', props.className)}
       data-disabled={disabled ? '': undefined}
       data-processing={isProcessing ? '': undefined}
       data-size={size ?? undefined}
       data-color={color ?? undefined}
-      data-coloringstyle={coloringStyle ?? undefined}
-    >
+      data-coloringstyle={coloringStyle ?? undefined}>
       {children}
       {isProcessing && (
-        <span data-name="button-processing-overlay">
+        <span className="button-processing-overlay">
           <LoadingSpinner />
         </span>
       )}
diff --git a/packages/hightide-web/src/components/user-interaction/Checkbox.tsx b/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
index f4cfa025..2374d634 100644
--- a/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
@@ -1,12 +1,14 @@
+import clsx from 'clsx'
 import { Check, Minus } from 'lucide-react'
 import { useCallback, type HTMLAttributes } from 'react'
 import { Visibility } from '../layout/Visibility'
-import { PropsUtil } from '../../utils/propsUtil'
 import type { FormFieldInteractionStates } from '../form/FieldLayout'
 import type { FormFieldDataHandling } from '../form/FormField'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
+import { PropsUtil } from '../../utils/propsUtil'
+
 type CheckBoxSize = 'sm' | 'md' | 'lg' | null
 
 export type CheckboxProps = HTMLAttributes<HTMLDivElement>
@@ -59,7 +61,6 @@ export const Checkbox = ({
   return (
     <div
       {...props}
-
       onClick={(event) => {
         if (interactive) {
           setValue(prev => !prev)
@@ -87,13 +88,12 @@ export const Checkbox = ({
       aria-checked={interactive ? (indeterminate ? 'mixed' : value) : undefined}
       {...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props)}
 
-      data-name="checkbox"
-    >
+      className={clsx('checkbox', props.className)}>
       <Visibility isVisible={indeterminate}>
-        <Minus data-name="checkbox-indicator" className="checkbox-indicator" aria-hidden={true} />
+        <Minus className="checkbox-indicator" aria-hidden={true} />
       </Visibility>
       <Visibility isVisible={!indeterminate && (alwaysShowCheckIcon || value)}>
-        <Check data-name="checkbox-indicator" className="checkbox-indicator" aria-hidden={true} />
+        <Check className="checkbox-indicator" aria-hidden={true} />
       </Visibility>
     </div>
   )
diff --git a/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxList.tsx b/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxList.tsx
index 1c415b46..92a71980 100644
--- a/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxList.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxList.tsx
@@ -34,8 +34,7 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
         role="listbox"
         aria-label={translation('filterOptions')}
         tabIndex={-1}
-        data-name="combobox-list"
-      >
+        className={clsx('combobox-list', props.className)}>
         {children}
         <li
           role="option"
@@ -43,8 +42,7 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
           aria-disabled={true}
           aria-live="polite"
           aria-atomic={true}
-          data-name="combobox-list-status"
-          className={clsx({ 'sr-only': count > 0 })}
+          className={clsx('combobox-list-status', { 'sr-only': count > 0 })}
         >
           {translation('nResultsFound', { count })}
         </li>
diff --git a/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxOption.tsx b/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxOption.tsx
index fa5bb8d2..038d90ef 100644
--- a/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxOption.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxOption.tsx
@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode, RefObject } from 'react'
+import type { ForwardedRef, HTMLAttributes, ReactNode, RefObject } from 'react'
 import { forwardRef, useEffect, useId, useRef } from 'react'
 import clsx from 'clsx'
 import { useComboboxContext } from './ComboboxContext'
@@ -17,7 +17,7 @@ export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps<unkn
   id: idProp,
   className,
   ...restProps
-}, ref) {
+} : ComboboxOptionProps<T>, ref: ForwardedRef<HTMLLIElement>) {
   const context = useComboboxContext<T>()
   const { registerOption } = context
   const itemRef = useRef<HTMLLIElement>(null)
@@ -62,11 +62,10 @@ export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps<unkn
       aria-disabled={disabled}
       aria-hidden={!isVisible}
 
-      data-name="combobox-option"
       data-highlighted={isHighlighted ? '' : undefined}
       data-visible={isVisible ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
-      className={clsx(!isVisible && 'hidden', className)}
+      className={clsx('combobox-option', !isVisible && 'hidden', className)}
       onClick={(event) => {
         if (!disabled) {
           context.selectOption(optionId)
@@ -78,8 +77,7 @@ export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps<unkn
           context.highlightItem(optionId)
           restProps.onMouseEnter?.(event)
         }
-      }}
-    >
+      }}>
       {resolvedDisplay}
     </li>
   )
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
index 1f465338..c9f15cc3 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
+++ b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
@@ -7,6 +7,7 @@ import { Button } from '../Button'
 import { IconButton } from '../IconButton'
 import { useFileInputContext } from './FileInputContext'
 import {
+
   createFileInputItemsFromFileList,
   formatFileInputAccept,
   isFileDataTransfer
@@ -69,24 +70,24 @@ export const FileInputMenu = ({
       }}
     >
       {(context.maxFiles != null || allowedFileTypes != null) && (
-        <div data-name="file-input-menu-meta">
+        <div className="file-input-menu-meta">
           {context.maxFiles != null && (
-            <span data-name="file-input-menu-meta-text">
+            <span className="file-input-menu-meta-text">
               {translation('maximumNumberOfFiles', { count: context.maxFiles })}
             </span>
           )}
           {allowedFileTypes != null && (
-            <span data-name="file-input-menu-meta-text">
+            <span className="file-input-menu-meta-text">
               {translation('allowedFileTypes', { types: allowedFileTypes })}
             </span>
           )}
         </div>
       )}
-      <div data-name="file-input-menu-list">
+      <div className="file-input-menu-list">
         {context.files.map((file) => (
-          <div key={file.id} data-name="file-input-menu-row">
+          <div key={file.id} className="file-input-menu-row">
             <FileText aria-hidden={true} />
-            <span data-name="file-input-menu-title">{file.name}</span>
+            <span className="file-input-menu-title">{file.name}</span>
             {canEdit && (
               <IconButton
                 tooltip={translation('remove')}
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
index 1b1da7e6..68e347ce 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type React from 'react'
 import type { ComponentPropsWithoutRef, ForwardedRef, ReactNode } from 'react'
 import { forwardRef } from 'react'
@@ -54,7 +55,7 @@ const FileInputTriggerImpl = forwardRef<HTMLDivElement, FileInputTriggerProps>(f
           event.stopPropagation()
         }
       }}
-      data-name="file-input-trigger"
+      className={clsx('file-input-trigger', props.className)}
       data-value={hasFiles ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       data-readonly={readOnly ? '' : undefined}
@@ -65,19 +66,18 @@ const FileInputTriggerImpl = forwardRef<HTMLDivElement, FileInputTriggerProps>(f
       aria-disabled={disabled}
       aria-readonly={readOnly}
       aria-haspopup={(context.maxFiles ?? 1) > 1 ? 'dialog' : undefined}
-      aria-expanded={(context.maxFiles ?? 1) > 1 ? context.isOpen : undefined}
-    >
-      <div data-name="file-input-files">
+      aria-expanded={(context.maxFiles ?? 1) > 1 ? context.isOpen : undefined}>
+      <div className="file-input-files">
         {hasFiles ? (
           <>
             {visible.map((file) => (
-              <div key={file.id} data-name="file-input-file-row">
+              <div key={file.id} className="file-input-file-row">
                 <FileText aria-hidden={true} />
-                <span data-name="file-input-file-name">{file.name}</span>
+                <span className="file-input-file-name">{file.name}</span>
               </div>
             ))}
             {hiddenCount > 0 && (
-              <span data-name="file-input-more-files">
+              <span className="file-input-more-files">
                 {translation('nMoreFiles', { count: hiddenCount })}
               </span>
             )}
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
index a460fb3b..0d0076cc 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react'
 import { forwardRef, useEffect, useRef } from 'react'
 import { useMultiSelectContext } from './MultiSelectContext'
@@ -7,9 +8,8 @@ import { XIcon, Plus } from 'lucide-react'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
 export type MultiSelectChipDisplayTriggerProps = HTMLAttributes<HTMLDivElement> & {
-  'disabled'?: boolean,
-  'placeholder'?: ReactNode,
-  'data-name'?: string,
+  disabled?: boolean,
+  placeholder?: ReactNode,
 }
 
 export const MultiSelectChipDisplayTrigger = forwardRef<
@@ -51,17 +51,16 @@ export const MultiSelectChipDisplayTrigger = forwardRef<
         if (!hasInteractions) return
         context.toggleIsOpen()
       }}
-      data-name={props['data-name'] ?? 'multi-select-chip-display-button'}
+      className={clsx('multi-select-chip-display-button', props.className)}
       data-value={context.value.length > 0 ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       data-readonly={readOnly ? '' : undefined}
       data-invalid={invalid ? '' : undefined}
       aria-invalid={invalid}
       aria-disabled={disabled}
-      aria-readonly={readOnly}
-    >
+      aria-readonly={readOnly}>
       {selectedOptions.map((opt) => (
-        <div key={opt.value.id} data-name="multi-select-chip-display-chip">
+        <div key={opt.value.id} className="multi-select-chip-display-chip">
           {opt.display}
           <IconButton
             tooltip={translation('remove')}
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContent.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
index 4dcd6ee5..104df822 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
@@ -119,12 +119,11 @@ export const MultiSelectContent = forwardRef<
         id={context.config.ids.listbox}
         onKeyDown={showSearch ? undefined : keyHandler}
         role="listbox"
-        data-name="multi-select-list"
         aria-multiselectable={true}
         aria-orientation="vertical"
         aria-label={listboxAriaLabel}
         tabIndex={showSearch ? undefined : 0}
-        className={clsx('flex-col-1 p-2 overflow-auto')}
+        className="multi-select-list flex-col-1 p-2 overflow-auto"
       >
         {props.children}
         <Visibility isVisible={showSearch}>
@@ -134,8 +133,7 @@ export const MultiSelectContent = forwardRef<
             aria-disabled={true}
             aria-live="polite"
             aria-atomic={true}
-            data-name="multi-select-list-status"
-            className={clsx({
+            className={clsx('multi-select-list-status', {
               'sr-only': context.visibleOptionIds.length > 0,
             })}
           >
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
index 99bde54d..d2a9fd43 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
@@ -104,7 +104,7 @@ const MultiSelectOptionImpl = forwardRef<
       aria-selected={isSelected}
       aria-hidden={!isVisible}
 
-      data-name="multi-select-list-option"
+      className={clsx('multi-select-list-option', props.className)}
       data-highlighted={isHighlighted ? '' : undefined}
       data-selected={isSelected ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
@@ -121,8 +121,7 @@ const MultiSelectOptionImpl = forwardRef<
           context.highlightItem(optionId)
           props.onMouseEnter?.(event)
         }
-      }}
-    >
+      }}>
       {iconAppearanceResolved === 'left' && (
         <CheckIcon
           className={clsx('w-4 h-4', { 'opacity-0': !isSelected || disabled })}
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
index 18873c03..0590712a 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type React from 'react'
 import type { ComponentPropsWithoutRef, ForwardedRef, ReactNode } from 'react'
 import { forwardRef, useEffect, useRef } from 'react'
@@ -9,11 +10,10 @@ import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
 export interface MultiSelectTriggerProps<T = string>
   extends ComponentPropsWithoutRef<'div'> {
-  'placeholder'?: ReactNode,
-  'disabled'?: boolean,
-  'selectedDisplay'?: (values: T[]) => ReactNode,
-  'hideExpansionIcon'?: boolean,
-  'data-name'?: string,
+  placeholder?: ReactNode,
+  disabled?: boolean,
+  selectedDisplay?: (values: T[]) => ReactNode,
+  hideExpansionIcon?: boolean,
 }
 
 type MultiSelectTriggerComponent = <T = string>(
@@ -94,7 +94,7 @@ const MultiSelectTriggerImpl = forwardRef<
           break
         }
       }}
-      data-name={props['data-name'] ?? 'multi-select-button'}
+      className={clsx('multi-select-button', props.className)}
       data-value={hasValue ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       data-readonly={readOnly ? '' : undefined}
@@ -106,8 +106,7 @@ const MultiSelectTriggerImpl = forwardRef<
       aria-readonly={readOnly}
       aria-haspopup="dialog"
       aria-expanded={context.isOpen}
-      aria-controls={context.isOpen ? context.config.ids.content : undefined}
-    >
+      aria-controls={context.isOpen ? context.config.ids.content : undefined}>
       <MultiSelectOptionDisplayContext.Provider value="trigger">
         {hasValue
           ? selectedDisplay?.(context.value) ?? (
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectContent.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectContent.tsx
index 01f25a35..bb433f67 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectContent.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectContent.tsx
@@ -123,8 +123,7 @@ export const SelectContent = forwardRef<HTMLUListElement, SelectContentProps>(fu
             aria-disabled={true}
             aria-live="polite"
             aria-atomic={true}
-            data-name="select-list-status"
-            className={clsx({ 'sr-only': context.visibleOptionIds.length > 0 })}
+            className={clsx('select-list-status', { 'sr-only': context.visibleOptionIds.length > 0 })}
           >
             {translation('nResultsFound', { count: context.visibleOptionIds.length })}
           </li>
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
index c6780ec2..4d69304d 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
@@ -101,7 +101,7 @@ const SelectOptionImpl = forwardRef<
       aria-selected={isSelected}
       aria-hidden={!isVisible}
 
-      data-name="select-list-option"
+      className={clsx('select-list-option', props.className)}
       data-highlighted={isHighlighted ? '' : undefined}
       data-selected={isSelected ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
@@ -118,8 +118,7 @@ const SelectOptionImpl = forwardRef<
           context.highlightItem(optionId)
           props.onMouseEnter?.(event)
         }
-      }}
-    >
+      }}>
       {iconAppearanceResolved === 'left' && context.selectedId !== null && (
         <CheckIcon
           className={clsx('w-4 h-4', { 'opacity-0': !isSelected || disabled })}
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
index 2c00b182..a5d5e20d 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type React from 'react'
 import type { ComponentPropsWithoutRef, ForwardedRef, ReactNode } from 'react'
 import { forwardRef, useEffect, useRef } from 'react'
@@ -9,11 +10,10 @@ import { SelectOptionDisplayContext } from './SelectOption'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
 export interface SelectTriggerProps<T = string> extends ComponentPropsWithoutRef<'div'> {
-  'placeholder'?: ReactNode,
-  'disabled'?: boolean,
-  'selectedDisplay'?: (value: SelectOptionType<T> | null) => ReactNode,
-  'hideExpansionIcon'?: boolean,
-  'data-name'?: string,
+  placeholder?: ReactNode,
+  disabled?: boolean,
+  selectedDisplay?: (value: SelectOptionType<T> | null) => ReactNode,
+  hideExpansionIcon?: boolean,
 }
 
 type SelectTriggerComponent = <T = string>(
@@ -92,7 +92,7 @@ const SelectTriggerImpl = forwardRef<
           break
         }
       }}
-      data-name={props['data-name'] ?? 'select-button'}
+      className={clsx('select-button', props.className)}
       data-value={hasValue ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       data-readonly={readOnly ? '' : undefined}
@@ -104,8 +104,7 @@ const SelectTriggerImpl = forwardRef<
       aria-readonly={readOnly}
       aria-haspopup="dialog"
       aria-expanded={context.isOpen}
-      aria-controls={context.isOpen ? context.config.ids.content : undefined}
-    >
+      aria-controls={context.isOpen ? context.config.ids.content : undefined}>
       <SelectOptionDisplayContext.Provider value="trigger">
         {hasValue
           ? selectedDisplay?.(selectedOption) ?? (selectedOption?.display)
diff --git a/packages/hightide-web/src/components/user-interaction/Switch.tsx b/packages/hightide-web/src/components/user-interaction/Switch.tsx
index 1223a763..34d5e796 100644
--- a/packages/hightide-web/src/components/user-interaction/Switch.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Switch.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { type HTMLAttributes, useCallback } from 'react'
 import type { FormFieldInteractionStates } from '../form/FieldLayout'
 import type { FormFieldDataHandling } from '../form/FormField'
@@ -45,7 +46,6 @@ export const Switch = ({
   return (
     <div
       {...props}
-
       onClick={(event) => {
         if (!disabled && !readOnly) {
           setValue(prev => !prev)
@@ -66,12 +66,11 @@ export const Switch = ({
       aria-checked={value}
       {...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props)}
 
-      data-name={props['data-name'] ?? 'switch'}
+      className={clsx('switch', props.className)}
       data-active={PropsUtil.dataAttributes.bool(value)}
-      {...PropsUtil.dataAttributes.interactionStates({ disabled, invalid, readOnly, required })}
-    >
-      <div data-name="switch-track" className="switch-track">
-        <div data-name="switch-thumb" data-active={PropsUtil.dataAttributes.bool(value)} className="switch-thumb" />
+      {...PropsUtil.dataAttributes.interactionStates({ disabled, invalid, readOnly, required })}>
+      <div className="switch-track">
+        <div data-active={PropsUtil.dataAttributes.bool(value)} className="switch-thumb" />
       </div>
     </div>
   )
diff --git a/packages/hightide-web/src/components/user-interaction/Textarea.tsx b/packages/hightide-web/src/components/user-interaction/Textarea.tsx
index d230dae3..fdf59c79 100644
--- a/packages/hightide-web/src/components/user-interaction/Textarea.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Textarea.tsx
@@ -4,10 +4,11 @@ import clsx from 'clsx'
 import { useDelay, type UseDelayOptions } from '@helpwave/hightide-utils/hooks'
 import type { FormFieldInteractionStates } from '../form/FieldLayout'
 import type { FormFieldDataHandling } from '../form/FormField'
-import { PropsUtil } from '../../utils/propsUtil'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
+import { PropsUtil } from '../../utils/propsUtil'
+
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>
   & Partial<FormFieldDataHandling<string>>
   & Partial<FormFieldInteractionStates>
@@ -62,16 +63,14 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
         onEditCompleteWrapper(event.target.value)
       }}
 
-      data-name={props['data-name'] ?? 'textarea'}
+      className={clsx('textarea', props.className)}
       data-value={PropsUtil.dataAttributes.bool(!!value)}
       {...PropsUtil.dataAttributes.interactionStates({ ...props, invalid })}
 
-      {...PropsUtil.aria.interactionStates({ ...props, invalid }, props)}
-    />
+      {...PropsUtil.aria.interactionStates({ ...props, invalid }, props)}/>
   )
 })
 
-
 export type TextareaWithHeadlineProps = Omit<TextareaProps, 'defaultStyle'> & {
   headline: ReactNode,
   headlineProps: Omit<LabelHTMLAttributes<HTMLLabelElement>, 'children'>,
diff --git a/packages/hightide-web/src/components/user-interaction/Tooltip.tsx b/packages/hightide-web/src/components/user-interaction/Tooltip.tsx
index 8f06ed65..99df60e1 100644
--- a/packages/hightide-web/src/components/user-interaction/Tooltip.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Tooltip.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type { PropsWithChildren, ReactNode, RefObject } from 'react'
 import { forwardRef, useContext, useEffect } from 'react'
 import { useId } from 'react'
@@ -163,20 +164,14 @@ export const TooltipRoot = ({
 }
 
 
-
-
-
-
-
 type TooltipAligment = 'top' | 'bottom' | 'left' | 'right'
 
 export interface TooltipDisplayProps extends Omit<AnchoredFloatingContainerProps, 'options' | 'anchor'>, Partial<TooltipConfig> {
-  'alignment'?: TooltipAligment,
-  'disabled'?: boolean,
-  'anchor'?: RefObject<HTMLElement | null>,
-  'isShown'?: boolean,
-  'options'?: Omit<UseAnchoredPositionOptions, 'verticalAlignment' | 'horizontalAlignment'>,
-  'data-name'?: string,
+  alignment?: TooltipAligment,
+  disabled?: boolean,
+  anchor?: RefObject<HTMLElement | null>,
+  isShown?: boolean,
+  options?: Omit<UseAnchoredPositionOptions, 'verticalAlignment' | 'horizontalAlignment'>,
 }
 
 export const TooltipDisplay = forwardRef<HTMLDivElement, TooltipDisplayProps>(function TooltipAnchoredFloatingContainer({
@@ -242,7 +237,7 @@ export const TooltipDisplay = forwardRef<HTMLDivElement, TooltipDisplayProps>(fu
           ...props.options,
         }}
 
-        data-name={props['data-name'] ?? 'tooltip'}
+        className={clsx('tooltip', props.className)}
         data-state={transitionState}
         data-animated={isAnimated ? '': undefined}
 
@@ -253,8 +248,7 @@ export const TooltipDisplay = forwardRef<HTMLDivElement, TooltipDisplayProps>(fu
           position: 'fixed',
           opacity: isVisible ? undefined : 0,
           ...props.style
-        }}
-      >
+        }}>
         {children}
       </AnchoredFloatingContainer>
     </Portal>
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx b/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
index f443c6bf..b8199a43 100644
--- a/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
@@ -72,9 +72,8 @@ export const FilterBasePopUp = forwardRef<HTMLDivElement, FilterPopUpBaseProps>(
             value={operator}
             onValueChange={(newOperator) => onOperatorChange(newOperator as FilterOperator)}
             triggerProps={{
-              'data-name': 'filter-operator-select',
-              'className': 'w-fit coloring-text-hover neutral flex-row-1 items-center h-element-sm px-2 py-1 rounded-md hover:cursor-pointer font-bold',
-              'selectedDisplay': (option) => option ? translation(FilterOperatorUtils.getInfo(option.value.value).translationKey as Parameters<typeof translation>[0]) : ''
+              className: 'filter-operator-select w-fit coloring-text-hover neutral flex-row-1 items-center h-element-sm px-2 py-1 rounded-md hover:cursor-pointer font-bold',
+              selectedDisplay: (option) => option ? translation(FilterOperatorUtils.getInfo(option.value.value).translationKey as Parameters<typeof translation>[0]) : ''
             }}
             iconAppearance="right"
           >
diff --git a/packages/hightide-web/src/components/user-interaction/date/DayPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/DayPicker.tsx
index 930e44cc..8546444d 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DayPicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/DayPicker.tsx
@@ -1,12 +1,14 @@
+import clsx from 'clsx'
 import type { KeyboardEvent } from 'react'
 import type { Weekday } from '@helpwave/hightide-utils/utils'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
 import type { FormFieldDataHandling } from '../../form/FormField'
-import { PropsUtil } from '../../../utils/propsUtil'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
+import { PropsUtil } from '../../../utils/propsUtil'
+
 export type DayPickerProps = Partial<FormFieldDataHandling<Date>> & {
   initialValue?: Date,
   displayedMonth?: Date,
@@ -85,8 +87,6 @@ export const DayPicker = ({
     return date
   }, [start, end])
 
-
-
   const navigateTo = useCallback((candidate: Date) => {
     const clamped = clampToRange(candidate)
     if (!DateUtils.between(clamped, start, end)) return
@@ -109,18 +109,17 @@ export const DayPicker = ({
     [focusTargetDate, navigateTo]
   )
 
-
   return (
-    <div data-name="day-picker-container" className={className}>
-      <div data-name="day-picker-header-row">
+    <div className={clsx('day-picker-container', className)}>
+      <div className="day-picker-header-row">
         {weeks[0]!.map((weekDay, index) => (
-          <div key={index} data-name="day-picker-header-item">
+          <div key={index} className="day-picker-header-item">
             {new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(weekDay).substring(0, 2)}
           </div>
         ))}
       </div>
       {weeks.map((week, index) => (
-        <div key={index} data-name="day-picker-body-row">
+        <div key={index} className="day-picker-body-row">
           {week.map((date) => {
             const isSelected = !!value && DateUtils.equalDate(value, date)
             const isFocused = !!focusTargetDate && DateUtils.equalDate(focusTargetDate, date)
@@ -131,7 +130,7 @@ export const DayPicker = ({
               <div
                 key={date.getDate()}
                 ref={isFocused ? selectedButtonRef : undefined}
-                data-name="day-picker-body-item"
+                className="day-picker-body-item"
                 onClick={() => {
                   if (!isDayValid) return
                   const newDate = new Date(
@@ -168,4 +167,3 @@ export const DayPicker = ({
     </div>
   )
 }
-
diff --git a/packages/hightide-web/src/components/user-interaction/date/TimeInput.tsx b/packages/hightide-web/src/components/user-interaction/date/TimeInput.tsx
index 94a2cccd..dcaa45c5 100644
--- a/packages/hightide-web/src/components/user-interaction/date/TimeInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/TimeInput.tsx
@@ -8,6 +8,7 @@ import { Visibility } from '../../layout/Visibility'
 import { Button } from '../Button'
 import { NumberStepperInput } from '../input/NumberStepperInput'
 import type {
+
   TimePickerMillisecondIncrement,
   TimePickerMinuteIncrement,
   TimePickerSecondIncrement
@@ -160,7 +161,7 @@ export const TimeInput = ({
   }, [updateValue])
 
   return (
-    <div data-name="time-input" className={clsx('time-input', className)}>
+    <div className={clsx('time-input', className)}>
       <NumberStepperInput
         layout="col"
         looping={allowLooping}
@@ -174,8 +175,7 @@ export const TimeInput = ({
         onEditComplete={setHourValue}
         formatDisplayedValue={padTwoDigits}
         onLooped={onHourLooped}
-        data-name="time-input-hour"
-        className="time-input-segment"
+        className="time-input-hour time-input-segment"
       />
       <span className="time-input-separator">:</span>
       <NumberStepperInput
@@ -190,8 +190,7 @@ export const TimeInput = ({
         onEditComplete={setMinuteValue}
         formatDisplayedValue={padTwoDigits}
         onLooped={onMinuteLooped}
-        data-name="time-input-minute"
-        className="time-input-segment"
+        className="time-input-minute time-input-segment"
       />
       <Visibility isVisible={precision === 'second' || precision === 'millisecond'}>
         <span className="time-input-separator">:</span>
@@ -206,8 +205,7 @@ export const TimeInput = ({
           onValueChange={setSecondValue}
           onEditComplete={setSecondValue}
           onLooped={onSecondLooped}
-          data-name="time-input-second"
-          className="time-input-segment"
+          className="time-input-second time-input-segment"
         />
       </Visibility>
       <Visibility isVisible={precision === 'millisecond'}>
@@ -223,12 +221,11 @@ export const TimeInput = ({
           onValueChange={setMillisecondValue}
           onEditComplete={setMillisecondValue}
           onLooped={onMillisecondLooped}
-          data-name="time-input-millisecond"
-          className="time-input-segment"
+          className="time-input-millisecond time-input-segment"
         />
       </Visibility>
       <Visibility isVisible={!is24HourFormat}>
-        <div data-name="time-input-period" className="time-input-period">
+        <div className="time-input-period">
           <Button
             size="sm"
             color={!isPM ? 'primary' : 'neutral'}
diff --git a/packages/hightide-web/src/components/user-interaction/date/TimePicker.tsx b/packages/hightide-web/src/components/user-interaction/date/TimePicker.tsx
index 8eb8a72b..7b530db9 100644
--- a/packages/hightide-web/src/components/user-interaction/date/TimePicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/TimePicker.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { useEffect, useMemo, useRef } from 'react'
 import { closestMatch, range } from '@helpwave/hightide-utils/utils'
 import { Button } from '../Button'
@@ -50,6 +51,8 @@ export const TimePicker = ({
   const minutes = useMemo(() => {
     const full = range(60)
     switch (minuteIncrement) {
+    case '1min':
+      return full
     case '5min':
       return full.filter(value => value % 5 === 0)
     case '10min':
@@ -126,8 +129,8 @@ export const TimePicker = ({
   }
 
   return (
-    <div data-name="time-picker-container" className={className}>
-      <div data-name="time-picker-value-column">
+    <div className={clsx('time-picker-container', className)}>
+      <div className="time-picker-value-column">
         {hours.map(hour => {
           const isSelected = hour === value.getHours() - (!is24HourFormat && isPM ? 12 : 0)
           return (
@@ -144,7 +147,7 @@ export const TimePicker = ({
           )
         })}
       </div>
-      <div data-name="time-picker-value-column">
+      <div className="time-picker-value-column">
         {minutes.map(minute => {
           const isSelected = minute === closestMinute
           return (
@@ -162,7 +165,7 @@ export const TimePicker = ({
         })}
       </div>
       <Visibility isVisible={precision === 'second' || precision === 'millisecond'}>
-        <div data-name="time-picker-value-column">
+        <div className="time-picker-value-column">
           {seconds.map(second => {
             const isSelected = second === closestSecond
             return (
@@ -181,7 +184,7 @@ export const TimePicker = ({
         </div>
       </Visibility>
       <Visibility isVisible={precision === 'millisecond'}>
-        <div data-name="time-picker-value-column">
+        <div className="time-picker-value-column">
           {milliseconds.map(millisecond => {
             const isSelected = millisecond === closestMillisecond
             return (
@@ -200,7 +203,7 @@ export const TimePicker = ({
         </div>
       </Visibility>
       {!is24HourFormat && (
-        <div data-name="time-picker-value-column">
+        <div className="time-picker-value-column">
           <Button
             size="sm"
             color={!isPM ? 'primary' : 'neutral'}
diff --git a/packages/hightide-web/src/components/user-interaction/input/DateTimeField.tsx b/packages/hightide-web/src/components/user-interaction/input/DateTimeField.tsx
index d3361ee5..0b58e177 100644
--- a/packages/hightide-web/src/components/user-interaction/input/DateTimeField.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/DateTimeField.tsx
@@ -4,13 +4,13 @@ import clsx from 'clsx'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { PropsUtil } from '../../../utils/propsUtil'
 import { SafeGlobals } from '../../../utils/safeGlobals'
 import type { FormFieldInteractionStates } from '../../form/FieldLayout'
 import type { FormFieldDataHandling } from '../../form/FormField'
 import type { DateTimeFormat, DateTimePrecision } from '@helpwave/hightide-utils/utils'
 import type { EditableSegmentType, SegmentEditState } from './dateTimeSegments'
 import {
+
   buildSegmentLayout,
   clearSegment,
   composeDate,
@@ -24,6 +24,7 @@ import {
   timeUnitTranslationKey,
   typeDigit
 } from './dateTimeSegments'
+import { PropsUtil } from '../../../utils/propsUtil'
 
 const advanceKeys = ['.', ':', '/', ',', '-', ' ']
 
@@ -251,9 +252,7 @@ export const DateTimeField = forwardRef<HTMLDivElement, DateTimeFieldProps>(func
     <div
       {...props}
       ref={forwardedRef}
-
       role="group"
-
       onBlur={onFieldBlur}
       onMouseDown={(event) => {
         props.onMouseDown?.(event)
@@ -263,15 +262,13 @@ export const DateTimeField = forwardRef<HTMLDivElement, DateTimeFieldProps>(func
         }
       }}
 
-      className={clsx(className)}
-      data-name="date-time-field"
+      className={clsx('date-time-field', className)}
       {...PropsUtil.dataAttributes.interactionStates({ disabled, readOnly, invalid, required })}
-      {...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required })}
-    >
+      {...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required })}>
       {layout.map((segment, index) => {
         if (segment.kind === 'literal') {
           return (
-            <span key={`literal-${index}`} aria-hidden={true} data-name="date-time-separator">
+            <span key={`literal-${index}`} aria-hidden={true} className="date-time-separator">
               {segment.text}
             </span>
           )
@@ -298,7 +295,7 @@ export const DateTimeField = forwardRef<HTMLDivElement, DateTimeFieldProps>(func
               }
             }}
 
-            data-name="date-time-segment"
+            className="date-time-segment"
             data-placeholder={PropsUtil.dataAttributes.bool(numericValue === undefined && editState.buffer?.type !== type)}
             aria-label={type === 'dayPeriod' ? translation('dayPeriod') : translation(timeUnitTranslationKey[type], { count: 1 })}
             aria-valuemin={type === 'dayPeriod' ? undefined : bounds.min}
diff --git a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
index 28c90517..aa89974a 100644
--- a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
@@ -9,13 +9,13 @@ import { Visibility } from '../../layout/Visibility'
 import type { FormFieldDataHandling } from '../../form/FormField'
 import { DateTimePickerDialog } from '../date/DateTimePickerDialog'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
-import { PropsUtil } from '../../../utils/propsUtil'
 import type { FormFieldInteractionStates } from '../../form/FieldLayout'
 import { PopUp } from '../../layout/popup/PopUp'
 import { IconButton } from '../IconButton'
 import { DateUtils, type DateTimeFormat } from '@helpwave/hightide-utils/utils'
 import { DateTimeField } from './DateTimeField'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
+import { PropsUtil } from '../../../utils/propsUtil'
 
 export interface DateTimeInputProps extends
   Partial<FormFieldInteractionStates>,
@@ -107,7 +107,7 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
   }, [isOpen, state])
 
   const focusField = () => {
-    fieldRef.current?.querySelector<HTMLElement>('[data-name="date-time-segment"]')?.focus()
+    fieldRef.current?.querySelector<HTMLElement>('.date-time-segment')?.focus()
   }
 
   const hasClear = !required && allowClear && !readOnly && !disabled && state !== null
@@ -131,12 +131,10 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
         }}
 
         className={clsx('date-time-input', props.className)}
-        data-name="date-time-input"
         data-value={PropsUtil.dataAttributes.bool(!!state)}
         data-has-actions={PropsUtil.dataAttributes.bool(hasActions)}
         {...PropsUtil.dataAttributes.interactionStates({ disabled, readOnly, invalid, required })}
-        {...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)}
-      >
+        {...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)}>
         <DateTimeField
           ref={fieldRef}
           value={toZoned(state)}
diff --git a/packages/hightide-web/src/components/user-interaction/input/Input.tsx b/packages/hightide-web/src/components/user-interaction/input/Input.tsx
index 30a59009..adc2585b 100644
--- a/packages/hightide-web/src/components/user-interaction/input/Input.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/Input.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type { InputHTMLAttributes } from 'react'
 import React, { forwardRef, useRef } from 'react'
 import type { UseDelayOptionsResolved } from '@helpwave/hightide-utils/hooks'
@@ -5,10 +6,11 @@ import { useDelay } from '@helpwave/hightide-utils/hooks'
 import { useFocusManagement } from '../../../hooks/focus/useFocusManagement'
 import type { FormFieldInteractionStates } from '../../form/FieldLayout'
 import type { FormFieldDataHandling } from '../../form/FormField'
-import { PropsUtil } from '../../../utils/propsUtil'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
+import { PropsUtil } from '../../../utils/propsUtil'
+
 export type EditCompleteOptionsResolved = {
   onBlur: boolean,
   afterDelay: boolean,
@@ -28,9 +30,8 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>
   & Partial<FormFieldDataHandling<string>>
   & Partial<FormFieldInteractionStates>
   & {
-    'editCompleteOptions'?: EditCompleteOptions,
-    'initialValue'?: string,
-    'data-name'?: string,
+    editCompleteOptions?: EditCompleteOptions,
+    initialValue?: string,
   }
 
 /**
@@ -103,11 +104,10 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         setValue(value)
       }}
 
-      data-name={props['data-name'] ?? 'input'}
+      className={clsx('input', props.className)}
       data-value={PropsUtil.dataAttributes.bool(!!value)}
       {...PropsUtil.dataAttributes.interactionStates({ ...props, invalid })}
 
-      {...PropsUtil.aria.interactionStates({ ...props, invalid }, props)}
-    />
+      {...PropsUtil.aria.interactionStates({ ...props, invalid }, props)}/>
   )
 })
diff --git a/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx b/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
index 53672d1b..ad9e9c0c 100644
--- a/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
@@ -3,10 +3,10 @@ import { forwardRef, useRef } from 'react'
 import clsx from 'clsx'
 import type { FormFieldInteractionStates } from '../../form/FieldLayout'
 import type { FormFieldDataHandling } from '../../form/FormField'
-import { PropsUtil } from '../../../utils/propsUtil'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import { MathUtil } from '@helpwave/hightide-utils/utils'
+import { PropsUtil } from '../../../utils/propsUtil'
 
 export type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'type' | 'min' | 'max' | 'step'>
   & Partial<FormFieldInteractionStates>
@@ -72,15 +72,13 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(functi
         props.onBlur?.(event)
         onEditComplete?.(value)
       }}
-      data-name="number-input"
       data-value={PropsUtil.dataAttributes.bool(Number.isFinite(value))}
       {...PropsUtil.dataAttributes.interactionStates({ disabled, invalid, readOnly, required })}
       {...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props)}
-      className={clsx('number-input-field', className)}
+      className={clsx('number-input number-input-field', className)}
       style={{
         ...style,
         '--number-input-approximate-max-characters': approximateMaxCharacters,
-      } as CSSProperties}
-    />
+      } as CSSProperties}/>
   )
 })
diff --git a/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx b/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
index 378506bc..f633424c 100644
--- a/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
@@ -6,13 +6,14 @@ import { IconButton } from '../IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import type { FormFieldInteractionStates } from '../../form/FieldLayout'
 import type { FormFieldDataHandling } from '../../form/FormField'
-import { PropsUtil } from '../../../utils/propsUtil'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import type { ChangeRateCurveProps, StepperLoopEvent } from '@helpwave/hightide-utils/hooks'
 import { useStepperHold } from '@helpwave/hightide-utils/hooks'
 import { NumberInput } from './NumberInput'
 import type { DirectionNumber } from '@helpwave/hightide-utils/utils'
 
+import { PropsUtil } from '../../../utils/propsUtil'
+
 export type NumberStepperInputLayout = 'row' | 'col'
 
 type InputType = 'button' | 'keyboard'
@@ -174,7 +175,7 @@ export const NumberStepperInput = forwardRef<HTMLInputElement, NumberStepperInpu
         disabled={disabled}
         readOnly={readOnly}
         required={required}
-        data-name="number-stepper-input-field"
+        className="number-stepper-input-field"
         onKeyDown={(event) => {
           props.onKeyDown?.(event)
           if (event.key === 'ArrowUp') {
@@ -196,8 +197,7 @@ export const NumberStepperInput = forwardRef<HTMLInputElement, NumberStepperInpu
             event.preventDefault()
             stop('keyboard', -1)
           }
-        }}
-      />
+        }}/>
       {layout === 'col' ? minusButton : plusButton}
     </div>
   )
diff --git a/packages/hightide-web/src/components/user-interaction/input/ToggleableInput.tsx b/packages/hightide-web/src/components/user-interaction/input/ToggleableInput.tsx
index d9eec4f6..25992e4a 100644
--- a/packages/hightide-web/src/components/user-interaction/input/ToggleableInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/ToggleableInput.tsx
@@ -62,8 +62,7 @@ export const ToggleableInput = forwardRef<HTMLInputElement, ToggleableInputProps
         }}
 
         data-isediting={isEditing ? '' : undefined}
-        data-name={props['data-name'] ?? 'togglable-input'}
-      />
+        className={clsx('togglable-input', props.className)}/>
       {!isEditing && (
         <div className="absolute left-0 flex-row-2 items-center pointer-events-none touch-none w-full overflow-hidden">
           <span className={clsx(' truncate')}>
diff --git a/packages/hightide-web/src/components/user-interaction/properties/DateProperty.tsx b/packages/hightide-web/src/components/user-interaction/properties/DateProperty.tsx
index 05a8eae5..2ce0a488 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/DateProperty.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/DateProperty.tsx
@@ -54,8 +54,7 @@ export const DateProperty = ({
           allowClear={false}
           onValueChange={onValueChange}
           onEditComplete={onEditComplete}
-          data-name="property-input"
-          className="flex-row-4 pr-0"
+          className="property-input flex-row-4 pr-0"
           data-invalid={PropsUtil.dataAttributes.bool(invalid)}
         />
       )}
diff --git a/packages/hightide-web/src/components/user-interaction/properties/MultiSelectProperty.tsx b/packages/hightide-web/src/components/user-interaction/properties/MultiSelectProperty.tsx
index a1c004ae..df501cf5 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/MultiSelectProperty.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/MultiSelectProperty.tsx
@@ -23,7 +23,7 @@ export const MultiSelectProperty = ({
     >
       {({ invalid }) => (
         <div
-          data-name="property-input-wrapper"
+          className="property-input-wrapper"
           data-invalid={PropsUtil.dataAttributes.bool(invalid)}
         >
           <MultiSelect.Root
diff --git a/packages/hightide-web/src/components/user-interaction/properties/NumberProperty.tsx b/packages/hightide-web/src/components/user-interaction/properties/NumberProperty.tsx
index 24fa6b57..41e59382 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/NumberProperty.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/NumberProperty.tsx
@@ -32,12 +32,11 @@ export const NumberProperty = ({
     >
       {({ invalid }) => (
         <div
-          data-name="property-input-wrapper"
+          className="property-input-wrapper"
           data-invalid={PropsUtil.dataAttributes.bool(invalid)}
         >
           <Input
-            data-name="property-input"
-            className="w-full pr-8"
+            className="property-input w-full pr-8"
             data-invalid={PropsUtil.dataAttributes.bool(invalid)}
             value={value?.toString() ?? ''}
             type="number"
@@ -46,7 +45,7 @@ export const NumberProperty = ({
             onValueChange={(value) => {
               const numberValue = parseFloat(value)
               if (isNaN(numberValue)) {
-                onValueClear()
+                onValueClear?.()
               } else {
                 onValueChange?.(numberValue)
               }
@@ -54,7 +53,7 @@ export const NumberProperty = ({
             onEditComplete={(value) => {
               const numberValue = parseFloat(value)
               if (isNaN(numberValue)) {
-                onValueClear()
+                onValueClear?.()
               } else {
                 onEditComplete?.(numberValue)
               }
@@ -62,7 +61,7 @@ export const NumberProperty = ({
           />
           {suffix && (
             <span
-              data-name="property-suffix"
+              className="property-suffix"
               data-invalid={PropsUtil.dataAttributes.bool(invalid)}
             >
               {suffix}
diff --git a/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx b/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx
index 68db3289..b4c7d8ab 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx
@@ -86,20 +86,19 @@ export const PropertyBase = ({
 
   return (
     <div
-      className={clsx('group/property min-w-0 w-full', className)}
-      data-name="property-root"
+      className={clsx('property-root group/property min-w-0 w-full', className)}
       data-invalid={PropsUtil.dataAttributes.bool(invalid)}
     >
-      <div data-name="property-inner">
+      <div className="property-inner">
         <div
-          data-name="property-title"
+          className="property-title"
           data-invalid={PropsUtil.dataAttributes.bool(invalid)}
         >
           <div className="flex min-w-0 flex-1 flex-row items-center justify-between gap-2">
             <Tooltip tooltip={name} containerClassName="min-w-0">
               <div className="flex-row-1 items-center">
-                <div data-name="property-title-icon">{icon}</div>
-                <span data-name="property-title-text">{name}</span>
+                <div className="property-title-icon">{icon}</div>
+                <span className="property-title-text">{name}</span>
               </div>
             </Tooltip>
             {invalid && (
@@ -107,18 +106,18 @@ export const PropertyBase = ({
             )}
           </div>
           {showActionsContainer && (
-            <div data-name="property-title-actions">
+            <div className="property-title-actions">
               {renderActionButtons()}
             </div>
           )}
         </div>
         <div
-          data-name="property-content"
+          className="property-content"
           data-invalid={PropsUtil.dataAttributes.bool(invalid)}
         >
           {children({ required, hasValue, invalid })}
           {showActionsContainer && (
-            <div data-name="property-actions">
+            <div className="property-actions">
               {renderActionButtons()}
             </div>
           )}
diff --git a/packages/hightide-web/src/components/user-interaction/properties/SelectProperty.tsx b/packages/hightide-web/src/components/user-interaction/properties/SelectProperty.tsx
index f8892abc..a02a9de5 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/SelectProperty.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/SelectProperty.tsx
@@ -24,7 +24,7 @@ export const SingleSelectProperty = ({
     >
       {({ invalid }) => (
         <div
-          data-name="property-input-wrapper"
+          className="property-input-wrapper"
           data-invalid={PropsUtil.dataAttributes.bool(invalid)}
         >
           <Select.Root
@@ -36,9 +36,8 @@ export const SingleSelectProperty = ({
             disabled={props.readOnly}
           >
             <Select.Trigger
-              className="flex-row-2 w-full items-center justify-between"
+              className="property-input flex-row-2 w-full items-center justify-between"
               hideExpansionIcon={true}
-              data-name="property-input"
             />
             <Select.Content>{children}</Select.Content>
           </Select.Root>
diff --git a/packages/hightide-web/src/components/user-interaction/properties/TextProperty.tsx b/packages/hightide-web/src/components/user-interaction/properties/TextProperty.tsx
index 597d48a6..60bcd0be 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/TextProperty.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/TextProperty.tsx
@@ -28,8 +28,7 @@ export const TextProperty = ({
     >
       {({ invalid }) => (
         <Textarea
-          data-name="property-input"
-          className="w-full"
+          className="property-input w-full"
           data-invalid={PropsUtil.dataAttributes.bool(invalid)}
           rows={5}
           value={value ?? ''}
diff --git a/packages/hightide-web/src/style/theme/components/app-page.css b/packages/hightide-web/src/style/theme/components/app-page.css
index f44b8a55..5b74f511 100644
--- a/packages/hightide-web/src/style/theme/components/app-page.css
+++ b/packages/hightide-web/src/style/theme/components/app-page.css
@@ -1,9 +1,9 @@
 @layer components {
-  [data-name="app-page"] {
+  .app-page {
     @apply flex-row-0 h-dvh min-h-dvh max-h-dvh w-screen overflow-hidden overflow-x-hidden;
   }
 
-  [data-name="app-sidebar-backdrop"] {
+  .app-sidebar-backdrop {
     @apply fixed inset-0 z-40 touch-manipulation bg-overlay-shadow;
 
     @variant desktop {
@@ -11,7 +11,7 @@
     }
   }
 
-  [data-name="app-sidebar-container"] {
+  .app-sidebar-container {
     @apply fixed inset-y-0 min-w-full h-screen p-4;
     padding-top: calc(max(env(safe-area-inset-top), var(--spacing) * 4));
     padding-bottom: calc(max(env(safe-area-inset-bottom), var(--spacing) * 4));
@@ -33,7 +33,7 @@
     }
   }
 
-  [data-name="app-sidebar-content"] {
+  .app-sidebar-content {
     @apply relative flex-col-4 rounded-lg bg-surface text-on-surface w-full h-full min-h-0 overflow-hidden shadow-around-md;
     @apply transform transition-transform duration-300 ease-out;
 
@@ -78,11 +78,11 @@
     @apply flex-col-0 px-3 pt-2;
   }
 
-  [data-name="app-page-body"] {
+  .app-page-body {
     @apply flex-col-0 grow min-w-0 h-full overflow-hidden;
   }
 
-  [data-name="app-page-content"] {
+  .app-page-content {
     @apply flex-col-0 grow min-h-0 overflow-y-auto overscroll-y-contain;
     scrollbar-gutter: stable;
 
@@ -91,7 +91,7 @@
     }
   }
 
-  [data-name="app-page-header"] {
+  .app-page-header {
     @apply flex-row-2 items-center p-4 bg-background text-on-background;
 
     @variant desktop {
@@ -105,7 +105,7 @@
     }
   }
 
-  [data-name="app-page-main-content"] {
+  .app-page-main-content {
     @apply flex-col-0 px-4;
 
     @variant desktop {
diff --git a/packages/hightide-web/src/style/theme/components/avatar.css b/packages/hightide-web/src/style/theme/components/avatar.css
index 3fc4614c..55ded986 100644
--- a/packages/hightide-web/src/style/theme/components/avatar.css
+++ b/packages/hightide-web/src/style/theme/components/avatar.css
@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="avatar"] {
+  .avatar {
     @apply relative flex-row-0 items-center justify-center primary coloring-solid rounded-full;
     &[data-group] {
       @apply absolute shadow-side shadow-r-4 shadow-hard;
@@ -39,14 +39,14 @@
     }
   }
 
-  [data-name="avatar-image"] {
+  .avatar-image {
     @apply absolute left-0 top-0 z-1 rounded-[inherit] size-[inherit];
     &:not([data-loaded]) {
       @apply opacity-0;
     }
   }
 
-  [data-name="avatar-group"] {
+  .avatar-group {
     @apply flex-row-2 items-center h-[var(--size)] w-fit;
     --overlap: 0.5;
     --count: 5;
@@ -64,19 +64,19 @@
     }
   }
 
-  [data-name="avatar-group-container"] {
+  .avatar-group-container {
     @apply relative w-[calc(var(--size)*(0.5*4+1))] h-[var(--size)];
   }
 
-  [data-name="avatar-group-more"] {
+  .avatar-group-more {
     @apply flex-row-2 truncate items-center text-[calc(var(--size)*2/3)];
   }
 
-  [data-name="avatar-with-status"] {
+  .avatar-with-status {
     @apply relative inline-flex;
   }
 
-  [data-name="avatar-with-status-dot"] {
+  .avatar-with-status-dot {
     @apply absolute right-0 bottom-0 z-1 rounded-full border-solid transition-colors;
     border-color: var(--color-background);
 
diff --git a/packages/hightide-web/src/style/theme/components/breadcrumb.css b/packages/hightide-web/src/style/theme/components/breadcrumb.css
index 5521a907..ef8a7082 100644
--- a/packages/hightide-web/src/style/theme/components/breadcrumb.css
+++ b/packages/hightide-web/src/style/theme/components/breadcrumb.css
@@ -1,15 +1,15 @@
 @layer components {
-  [data-name="breadcrumb"] {
+  .breadcrumb {
     @apply flex-row-2 items-center;
   }
-  [data-name="breadcrumb-item"] {
+  .breadcrumb-item {
     @apply flex-row-1 items-center;
   }
   .breadcrumb-link {
     @apply flex-row-1 px-1.5 py-1 rounded-1.5 h-8;
     @apply description last:neutral coloring-text-hover;
   }
-  [data-name="breadcrumb-divider"] {
+  .breadcrumb-divider {
     @apply px-1 text-description;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/button.css b/packages/hightide-web/src/style/theme/components/button.css
index 868eeb0f..b67cb7dc 100644
--- a/packages/hightide-web/src/style/theme/components/button.css
+++ b/packages/hightide-web/src/style/theme/components/button.css
@@ -1,10 +1,10 @@
 @layer components {
-  [data-name="button"] {
+  .button {
     @apply relative flex flex-row items-center justify-center element;
     @apply: font-semibold whitespace-nowrap w-fit;
     transition: var(--coloring-transitions), var(--focus-transitions);
 
-    [data-name="button-processing-overlay"] {
+    .button-processing-overlay {
       @apply absolute inset-0 flex items-center justify-center rounded-[inherit] bg-surface/40 pointer-events-none;
     }
 
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-message-card.css b/packages/hightide-web/src/style/theme/components/chat/chat-message-card.css
index b9b196a9..9cde948d 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-message-card.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-message-card.css
@@ -50,7 +50,7 @@
       @apply flex-1;
     }
 
-    > [data-name="button"] {
+    > .button {
       @apply min-w-0;
     }
   }
diff --git a/packages/hightide-web/src/style/theme/components/checkbox.css b/packages/hightide-web/src/style/theme/components/checkbox.css
index e1f32ef0..adef6e63 100644
--- a/packages/hightide-web/src/style/theme/components/checkbox.css
+++ b/packages/hightide-web/src/style/theme/components/checkbox.css
@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="checkbox"] {
+  .checkbox {
     @apply flex-col-0 items-center justify-center border-2;
     @apply rounded data-[rounded]:rounded-full;
     transition: var(--coloring-transitions), var(--focus-transitions);
@@ -38,7 +38,7 @@
     }
   }
 
-  [data-name="checkbox-indicator"] {
+  .checkbox-indicator {
     @apply w-full h-full;
     &[data-size="sm"] {
       @apply stroke-3;
diff --git a/packages/hightide-web/src/style/theme/components/chip.css b/packages/hightide-web/src/style/theme/components/chip.css
index a7a8ea92..8bce4312 100644
--- a/packages/hightide-web/src/style/theme/components/chip.css
+++ b/packages/hightide-web/src/style/theme/components/chip.css
@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="chip"] {
+  .chip {
     @apply flex flex-row items-center justify-center w-fit font-semibold coloring-color-detect coloring-style-detect;
 
     &[data-size="xs"] {
@@ -16,7 +16,7 @@
     }
   }
 
-  [data-name="chip-list"] {
+  .chip-list {
     @apply flex flex-wrap gap-x-2 gap-y-2;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/combobox.css b/packages/hightide-web/src/style/theme/components/combobox.css
index 18d8c1d5..096f5f70 100644
--- a/packages/hightide-web/src/style/theme/components/combobox.css
+++ b/packages/hightide-web/src/style/theme/components/combobox.css
@@ -1,17 +1,17 @@
 @layer components {
-  [data-name="combobox-root"] {
+  .combobox-root {
     @apply flex-col-2;
   }
 
-  [data-name="combobox-input"] {
+  .combobox-input {
     @apply input-element rounded-md;
   }
 
-  [data-name="combobox-list"] {
+  .combobox-list {
     @apply flex-col-1 overflow-y-auto;
   }
 
-  [data-name="combobox-option"] {
+  .combobox-option {
     @apply flex-row-1 items-center px-2 py-1 rounded-md cursor-pointer;
 
     &[data-highlighted] {
@@ -19,7 +19,7 @@
     }
   }
 
-  [data-name="combobox-list-status"] {
+  .combobox-list-status {
     @apply text-description text-sm px-2 py-1 rounded-md;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/date-time-input.css b/packages/hightide-web/src/style/theme/components/date-time-input.css
index 89432ce0..4d8f0e53 100644
--- a/packages/hightide-web/src/style/theme/components/date-time-input.css
+++ b/packages/hightide-web/src/style/theme/components/date-time-input.css
@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="date-time-input"] {
+  .date-time-input {
     @apply input-element flex-row-2 items-center justify-between w-full px-3 h-element-md rounded-md;
 
     &:focus-within {
@@ -12,11 +12,11 @@
     }
   }
 
-  [data-name="date-time-field"] {
+  .date-time-field {
     @apply flex-row-0 items-center min-w-0 grow overflow-hidden;
   }
 
-  [data-name="date-time-segment"] {
+  .date-time-segment {
     @apply rounded-sm px-0.5 text-center tabular-nums cursor-text focus-style-none;
 
     &:focus-visible {
@@ -28,7 +28,7 @@
     }
   }
 
-  [data-name="date-time-separator"] {
+  .date-time-separator {
     @apply px-px;
   }
 
diff --git a/packages/hightide-web/src/style/theme/components/day-picker.css b/packages/hightide-web/src/style/theme/components/day-picker.css
index 45c7dbf4..ed5dc4e1 100644
--- a/packages/hightide-web/src/style/theme/components/day-picker.css
+++ b/packages/hightide-web/src/style/theme/components/day-picker.css
@@ -1,21 +1,21 @@
 @layer components {
-  [data-name="day-picker-container"] {
+  .day-picker-container {
     @apply flex-col-1 min-w-64 select-none;
   }
 
-  [data-name="day-picker-header-row"] {
+  .day-picker-header-row {
     @apply grid grid-cols-7 gap-2;
   }
 
-  [data-name="day-picker-header-item"] {
+  .day-picker-header-item {
     @apply flex items-center justify-center grow font-semibold;
   }
 
-  [data-name="day-picker-body-row"] {
+  .day-picker-body-row {
     @apply grid grid-cols-7 gap-2;
   }
 
-  [data-name="day-picker-body-item"] {
+  .day-picker-body-item {
     @apply flex-row-0 items-center justify-center rounded-full h-8;
 
     &[data-today] {
diff --git a/packages/hightide-web/src/style/theme/components/dialog.css b/packages/hightide-web/src/style/theme/components/dialog.css
index 8ccc6727..a210922f 100644
--- a/packages/hightide-web/src/style/theme/components/dialog.css
+++ b/packages/hightide-web/src/style/theme/components/dialog.css
@@ -1,12 +1,12 @@
 @layer components {
-  [data-name="dialog-container"] {
+  .dialog-container {
     @apply fixed inset-0 h-screen w-screen;
     &:not([data-open]) {
       @apply touch-none pointer-events-none;
     }
   }
 
-  [data-name="dialog-background"] {
+  .dialog-background {
     @apply fixed inset-0 h-screen w-screen bg-overlay-shadow;
     animation-fill-mode: forwards;
 
@@ -25,7 +25,7 @@
     }
   }
 
-  [data-name="dialog-content"] {
+  .dialog-content {
     @apply flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)];
     animation-timing-function: ease-out;
     animation-fill-mode: forwards;
diff --git a/packages/hightide-web/src/style/theme/components/drawer.css b/packages/hightide-web/src/style/theme/components/drawer.css
index 27762e23..c4c67394 100644
--- a/packages/hightide-web/src/style/theme/components/drawer.css
+++ b/packages/hightide-web/src/style/theme/components/drawer.css
@@ -42,7 +42,7 @@
     }
   }
 
-  [data-name="drawer-background"] {
+  .drawer-background {
     @apply fixed inset-0 w-screen h-screen bg-overlay-shadow;
     &[data-state="opening"] {
       animation-duration: var(--animation-duration-in);
diff --git a/packages/hightide-web/src/style/theme/components/expandable.css b/packages/hightide-web/src/style/theme/components/expandable.css
index ada5bd10..30837f3e 100644
--- a/packages/hightide-web/src/style/theme/components/expandable.css
+++ b/packages/hightide-web/src/style/theme/components/expandable.css
@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="expandable-root"] {
+  .expandable-root {
     @apply flex-col-0 surface coloring-solid rounded-lg shadow-sm;
 
     &:not([data-disabled])[data-containertoggleable] {
@@ -7,7 +7,7 @@
     }
   }
 
-  [data-name="expandable-header"] {
+  .expandable-header {
     @apply flex-row-2 justify-between items-center py-2 px-4 rounded-lg select-none;
 
     &:not([data-disabled]) {
@@ -19,7 +19,7 @@
     }
   }
 
-  [data-name="expandable-content"] {
+  .expandable-content {
     @apply flex-col-2 px-4 transition-all ease-in-out h-24;
 
     &[data-state="opening"],
diff --git a/packages/hightide-web/src/style/theme/components/expansion-icon.css b/packages/hightide-web/src/style/theme/components/expansion-icon.css
index 17420f6f..3e9127d9 100644
--- a/packages/hightide-web/src/style/theme/components/expansion-icon.css
+++ b/packages/hightide-web/src/style/theme/components/expansion-icon.css
@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="expansion-icon"] {
+  .expansion-icon {
     @apply flex-col-0 items-center justify-center size-6 transition-transform motion-safe:duration-200 motion-reduce:duration-0 ease-in-out;
 
     &[data-expanded] {
diff --git a/packages/hightide-web/src/style/theme/components/file-input.css b/packages/hightide-web/src/style/theme/components/file-input.css
index bda4267a..38a2af98 100644
--- a/packages/hightide-web/src/style/theme/components/file-input.css
+++ b/packages/hightide-web/src/style/theme/components/file-input.css
@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="file-input-trigger"] {
+  .file-input-trigger {
     @apply input-element flex-row-2 items-center justify-between rounded-md px-3 py-2;
 
     &:not([data-disabled]):not([data-readonly]) {
@@ -11,11 +11,11 @@
     }
   }
 
-  [data-name="file-input-files"] {
+  .file-input-files {
     @apply flex-col-1 grow min-w-0;
   }
 
-  [data-name="file-input-file-row"] {
+  .file-input-file-row {
     @apply flex-row-2 items-center min-w-0;
 
     > svg {
@@ -23,11 +23,11 @@
     }
   }
 
-  [data-name="file-input-file-name"] {
+  .file-input-file-name {
     @apply truncate;
   }
 
-  [data-name="file-input-more-files"] {
+  .file-input-more-files {
     @apply text-placeholder truncate;
   }
 
@@ -43,11 +43,11 @@
     @apply border-solid border-primary;
   }
 
-  [data-name="file-input-menu-list"] {
+  .file-input-menu-list {
     @apply flex-col-1 overflow-y-auto max-h-80;
   }
 
-  [data-name="file-input-menu-row"] {
+  .file-input-menu-row {
     @apply flex-row-2 items-center min-w-0;
 
     > svg {
@@ -55,15 +55,15 @@
     }
   }
 
-  [data-name="file-input-menu-title"] {
+  .file-input-menu-title {
     @apply grow truncate;
   }
 
-  [data-name="file-input-menu-meta"] {
+  .file-input-menu-meta {
     @apply flex-col-1;
   }
 
-  [data-name="file-input-menu-meta-text"] {
+  .file-input-menu-meta-text {
     @apply typography-body-md text-description;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/form-field.css b/packages/hightide-web/src/style/theme/components/form-field.css
index 324f541e..19e48f58 100644
--- a/packages/hightide-web/src/style/theme/components/form-field.css
+++ b/packages/hightide-web/src/style/theme/components/form-field.css
@@ -1,17 +1,17 @@
 @layer components {
-  [data-name="form-field-container"] {
+  .form-field-container {
     @apply relative flex-col-1;
   }
 
-  [data-name="form-field-description"] {
+  .form-field-description {
     @apply text-description text-sm;
   }
 
-  [data-name="form-field-error"] {
+  .form-field-error {
     @apply p-1 text-negative text-sm font-medium;
   }
 
-  [data-name="form-field-label"] {
+  .form-field-label {
     @apply flex-row-1 items-start typography-label-lg text-label;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/input-elements.css b/packages/hightide-web/src/style/theme/components/input-elements.css
index ba9a9a47..2549ce89 100644
--- a/packages/hightide-web/src/style/theme/components/input-elements.css
+++ b/packages/hightide-web/src/style/theme/components/input-elements.css
@@ -49,7 +49,7 @@
 
 /* input-elements */
 @layer components {
-  [data-name="input"] {
+  .input {
     @apply input-element px-3 py-2 rounded-md h-element-md;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/pop-up.css b/packages/hightide-web/src/style/theme/components/pop-up.css
index dec7ebcb..c75b80e9 100644
--- a/packages/hightide-web/src/style/theme/components/pop-up.css
+++ b/packages/hightide-web/src/style/theme/components/pop-up.css
@@ -1,4 +1,4 @@
-[data-name="pop-up"] {
+.pop-up {
     @apply surface coloring-solid rounded-md border-2 border-outline-variant shadow-lg shadow-black/15;
     @apply focus-within:border-primary;
 
diff --git a/packages/hightide-web/src/style/theme/components/property.css b/packages/hightide-web/src/style/theme/components/property.css
index 34636989..d1f3fd92 100644
--- a/packages/hightide-web/src/style/theme/components/property.css
+++ b/packages/hightide-web/src/style/theme/components/property.css
@@ -1,9 +1,9 @@
 @layer components {
-  [data-name="property-inner"] {
+  .property-inner {
     @apply flex-row-0 w-full min-w-0;
   }
 
-  [data-name="property-root"] {
+  .property-root {
     @apply rounded-xl;
     container-type: inline-size;
     container-name: property;
@@ -11,13 +11,13 @@
     outline-offset: 0;
 
     &:hover {
-      [data-name="property-title"]:not([data-invalid]),
-      [data-name="property-content"]:not([data-invalid]) {
+      .property-title:not([data-invalid]),
+      .property-content:not([data-invalid]) {
         @apply border-primary;
       }
 
-      [data-name="property-title"][data-invalid],
-      [data-name="property-content"][data-invalid] {
+      .property-title[data-invalid],
+      .property-content[data-invalid] {
         @apply border-warning;
       }
     }
@@ -36,7 +36,7 @@
     }
   }
 
-  [data-name="property-title"] {
+  .property-title {
     @apply flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center justify-between rounded-l-xl border-2 border-r-0;
 
     &:not([data-invalid]) {
@@ -48,15 +48,15 @@
     }
   }
 
-  [data-name="property-title-icon"] {
+  .property-title-icon {
     @apply max-w-6 min-w-6;
   }
 
-  [data-name="property-title-text"] {
+  .property-title-text {
     @apply font-semibold truncate min-w-0;
   }
 
-  [data-name="property-content"] {
+  .property-content {
     @apply flex-row-2 grow px-3 py-2 justify-between items-center rounded-r-xl border-2 border-l-0 min-h-15;
 
     &:not([data-invalid]) {
@@ -68,50 +68,50 @@
     }
   }
 
-  [data-name="property-title-actions"] {
+  .property-title-actions {
     @apply hidden flex-row-2 items-center gap-1 shrink-0;
   }
 
-  [data-name="property-actions"] {
+  .property-actions {
     @apply flex-row-2 items-center gap-1;
   }
 
   @container property (max-width: 32rem) {
-    [data-name="property-inner"] {
+    .property-inner {
       @apply flex-col;
     }
 
-    [data-name="property-title"] {
+    .property-title {
       @apply max-w-none min-w-0 w-full rounded-none rounded-t-xl border-r-2 border-b-0;
     }
 
-    [data-name="property-title-actions"] {
+    .property-title-actions {
       @apply flex;
     }
 
-    [data-name="property-actions"] {
+    .property-actions {
       @apply hidden;
     }
 
-    [data-name="property-content"] {
+    .property-content {
       @apply rounded-none rounded-b-xl border-t-0 border-l-2 border-r-2 min-h-0;
     }
   }
 
-  [data-name="property-input-wrapper"] {
+  .property-input-wrapper {
     @apply relative flex-row-2 w-full;
 
     &[data-invalid] {
       @apply text-warning;
 
-      [data-name="select-button"],
-      [data-name="select-chip-display"] {
+      .select-button,
+      .select-chip-display {
         @apply !bg-warning !text-surface-warning;
       }
     }
   }
 
-  [data-name="property-input"] {
+  .property-input {
     @apply rounded p-1;
 
     &[type="date"]::-webkit-calendar-picker-indicator,
@@ -126,7 +126,7 @@
     }
   }
 
-  [data-name="property-suffix"] {
+  .property-suffix {
     @apply absolute top-1/2 -translate-y-1/2 right-2;
 
     &[data-invalid] {
diff --git a/packages/hightide-web/src/style/theme/components/select.css b/packages/hightide-web/src/style/theme/components/select.css
index 2084079b..d430e9a2 100644
--- a/packages/hightide-web/src/style/theme/components/select.css
+++ b/packages/hightide-web/src/style/theme/components/select.css
@@ -1,6 +1,6 @@
 @layer components {
-  [data-name="select-button"],
-  [data-name="multi-select-button"] {
+  .select-button,
+  .multi-select-button {
     @apply input-element flex-row-2 items-center justify-between rounded-md px-3 py-2;
 
     &:not([data-disabled]):not([data-readonly]) {
@@ -8,7 +8,7 @@
     }
   }
 
-  [data-name="multi-select-chip-display-button"] {
+  .multi-select-chip-display-button {
     @apply input-element flex flex-wrap gap-2 items-center rounded-md px-2.5 py-2.5;
 
     &:not([data-disabled]):not([data-readonly]) {
@@ -16,12 +16,12 @@
     }
   }
 
-  [data-name="multi-select-chip-display-chip"] {
+  .multi-select-chip-display-chip {
     @apply flex-row-1 items-center pl-2 pr-1 coloring-solid neutral rounded-md h-9;
   }
 
-  [data-name="select-list"],
-  [data-name="multi-select-list"] {
+  .select-list,
+  .multi-select-list {
     @apply flex-col-1 overflow-y-auto h-full;
   }
 
@@ -30,8 +30,8 @@
     @apply flex-col-1;
   }
 
-  [data-name="select-list-option"],
-  [data-name="multi-select-list-option"] {
+  .select-list-option,
+  .multi-select-list-option {
     @apply flex-row-1 items-center px-2 py-1 rounded-md;
 
     &[data-disabled] {
@@ -47,8 +47,8 @@
     }
   }
 
-  [data-name="select-list-status"],
-  [data-name="multi-select-list-status"] {
+  .select-list-status,
+  .multi-select-list-status {
     @apply text-description px-2 py-1 rounded-md;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/switch.css b/packages/hightide-web/src/style/theme/components/switch.css
index bc13dbd2..95c811f7 100644
--- a/packages/hightide-web/src/style/theme/components/switch.css
+++ b/packages/hightide-web/src/style/theme/components/switch.css
@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="switch"] {
+  .switch {
     @apply flex-col-0 items-center justify-center;
     @apply h-7 w-12 rounded-full border-2 p-1;
     transition: var(--coloring-transitions), var(--focus-transitions);
@@ -39,11 +39,11 @@
     }
   }
 
-  [data-name="switch-track"] {
+  .switch-track {
     @apply w-full h-full rounded-full flex items-center relative;
   }
 
-  [data-name="switch-thumb"] {
+  .switch-thumb {
     @apply rounded-full transition-all duration-[var(--animation-duration-in,250ms)] h-3 w-3;
     @apply absolute top-1/2 -translate-y-1/2 left-0.5;
 
diff --git a/packages/hightide-web/src/style/theme/components/table.css b/packages/hightide-web/src/style/theme/components/table.css
index 5afcd9bd..43a24334 100644
--- a/packages/hightide-web/src/style/theme/components/table.css
+++ b/packages/hightide-web/src/style/theme/components/table.css
@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="table-container"] {
+  .table-container {
     @apply flex-col-0 w-full overflow-auto border-2 rounded-lg bg-background;
 
     --table-rounding-bottom: var(--radius-lg);
@@ -20,7 +20,7 @@
     }
   }
 
-  [data-name="table"] {
+  .table {
     @apply table-fixed border-separate border-spacing-0;
     @apply bg-table-background text-table-text;
 
@@ -33,15 +33,15 @@
     }
   }
 
-  [data-name="table-filler-cell"] {
+  .table-filler-cell {
     @apply flex flex-row items-center w-1/2 h-6 text-disabled font-bold;
   }
 
-  [data-name="table-default-cell"] {
+  .table-default-cell {
     @apply block max-w-full overflow-ellipsis truncate;
   }
 
-  [data-name="table-header-cell"] {
+  .table-header-cell {
     @apply relative;
     @apply first:pl-3 last:pr-3;
     @apply border-b-2;
@@ -57,27 +57,27 @@
     @apply px-3 py-2.5 flex-row-1 items-center truncate;
   }
 
-  [data-name="table-body-row"] {
+  .table-body-row {
     @apply hover:bg-table-row-hover-background;
     &[data-clickable] {
       @apply hover:cursor-pointer;
     }
   }
 
-  [data-name="table-body-filler-row"] {
+  .table-body-filler-row {
     @apply hover:cursor-not-allowed;
     &[data-clickable] {
       @apply hover:cursor-pointer hover:bg-table-row-hover-background;
     }
   }
 
-  [data-name="table-body-cell"],
-  [data-name="table-body-filler-cell"] {
+  .table-body-cell,
+  .table-body-filler-cell {
     @apply px-3 first:pl-6 last:pr-6 py-2.5;
     @apply border-b-1;
   }
 
-  [data-name="table-resize-indicator"] {
+  .table-resize-indicator {
     @apply absolute right-1 top-1/2 -translate-y-1/2;
     @apply h-6 w-2 rounded bg-primary;
     @apply cursor-col-resize;
@@ -97,9 +97,9 @@
     }
   }
 
-  [data-name="table-body-row"]:last-child > [data-name="table-body-cell"],
-  [data-name="table-body-filler-row"]:last-child
-    > [data-name="table-body-filler-cell"] {
+  .table-body-row:last-child > .table-body-cell,
+  .table-body-filler-row:last-child
+    > .table-body-filler-cell {
     @apply first:rounded-bl-[var(--table-rounding-bottom)];
     @apply last:rounded-br-[calc(min(var(--table-rounding-right),var(--table-rounding-bottom)))];
     @apply border-b-0;
diff --git a/packages/hightide-web/src/style/theme/components/tabswitcher.css b/packages/hightide-web/src/style/theme/components/tabswitcher.css
index 00446aba..635140f4 100644
--- a/packages/hightide-web/src/style/theme/components/tabswitcher.css
+++ b/packages/hightide-web/src/style/theme/components/tabswitcher.css
@@ -1,10 +1,10 @@
 @layer components {
-  [data-name="tab-list"] {
+  .tab-list {
     display: grid;
     grid-template-columns: repeat(var(--tab-count), 1fr);
   }
 
-  [data-name="tab-list-item"] {
+  .tab-list-item {
     @apply flex-row-0 grow justify-center px-3 py-2 typography-label-md border-b-4 transition-colors neutral coloring-text-hover;
     
     &[data-disabled] {
@@ -21,11 +21,11 @@
     }
   }
 
-  [data-name="tab-view"] {
+  .tab-view {
     @apply flex-col;
   }
 
-  [data-name="tab-panel"] {
+  .tab-panel {
     @apply flex-col-0 overflow-y-auto;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/textarea.css b/packages/hightide-web/src/style/theme/components/textarea.css
index 67db55cb..7ccd9045 100644
--- a/packages/hightide-web/src/style/theme/components/textarea.css
+++ b/packages/hightide-web/src/style/theme/components/textarea.css
@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="textarea"] {
+  .textarea {
     @apply w-full h-32 py-2 px-3 rounded-md resize-none overflow-y-scroll input-element;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/time-picker.css b/packages/hightide-web/src/style/theme/components/time-picker.css
index ab06c1b3..4210ac08 100644
--- a/packages/hightide-web/src/style/theme/components/time-picker.css
+++ b/packages/hightide-web/src/style/theme/components/time-picker.css
@@ -1,9 +1,9 @@
 @layer components {
-  [data-name="time-picker-container"] {
+  .time-picker-container {
     @apply flex-row-2 flex-1 min-h-0 select-none overflow-x-auto;
   }
 
-  [data-name="time-picker-value-column"] {
+  .time-picker-value-column {
     @apply flex-col-1 flex-1 overflow-y-auto min-w-20 max-w-20;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/toggleable-intput.css b/packages/hightide-web/src/style/theme/components/toggleable-intput.css
index af5ad334..c270dcbb 100644
--- a/packages/hightide-web/src/style/theme/components/toggleable-intput.css
+++ b/packages/hightide-web/src/style/theme/components/toggleable-intput.css
@@ -1,5 +1,5 @@
 @layer components {
-    [data-name="togglable-input"] {
+    .togglable-input {
         all: unset;
         @apply w-full rounded-md focus-style-none focus-style-outline focusable;
 
diff --git a/packages/hightide-web/src/style/theme/components/tooltip.css b/packages/hightide-web/src/style/theme/components/tooltip.css
index bf10b759..d0b1d7b1 100644
--- a/packages/hightide-web/src/style/theme/components/tooltip.css
+++ b/packages/hightide-web/src/style/theme/components/tooltip.css
@@ -8,7 +8,7 @@
 }
 
 @layer components {
-  [data-name="tooltip"] {
+  .tooltip {
     @apply absolute px-2 py-1 rounded shadow-around-md;
     @apply text-xs font-semibold text-tooltip-text bg-tooltip-background truncate;
     @apply pointer-events-none touch-none;
@@ -24,7 +24,7 @@
     }
   }
 
-  [data-name="tooltip-triangle"] {
+  .tooltip-triangle {
     @apply absolute w-0 h-0 pointer-events-none touch-none;
     --triangle-size: calc(1.5 * var(--spacing));
 
diff --git a/packages/hightide-web/src/style/theme/components/vertical-navigation.css b/packages/hightide-web/src/style/theme/components/vertical-navigation.css
index f84ad1c9..00af66e5 100644
--- a/packages/hightide-web/src/style/theme/components/vertical-navigation.css
+++ b/packages/hightide-web/src/style/theme/components/vertical-navigation.css
@@ -1,5 +1,5 @@
 @layer components {
-  [data-name="vertical-navigation-menu"] {
+  .vertical-navigation-menu {
     @apply flex-col-0 list-none m-0 p-0;
   }
 
diff --git a/packages/hightide-web/src/utils/propsUtil.ts b/packages/hightide-web/src/utils/propsUtil.ts
index 8f914745..6d2ae6aa 100644
--- a/packages/hightide-web/src/utils/propsUtil.ts
+++ b/packages/hightide-web/src/utils/propsUtil.ts
@@ -123,22 +123,22 @@ function navigate<T>({
   return (event) => {
     switch (event.key) {
     case 'ArrowLeft':
-      left(event)
+      left?.(event)
       event.preventDefault()
       event.stopPropagation()
       break
     case 'ArrowRight':
-      right(event)
+      right?.(event)
       event.preventDefault()
       event.stopPropagation()
       break
     case 'ArrowUp':
-      up(event)
+      up?.(event)
       event.preventDefault()
       event.stopPropagation()
       break
     case 'ArrowDown':
-      down(event)
+      down?.(event)
       event.preventDefault()
       event.stopPropagation()
       break
diff --git a/packages/hightide-web/tests/table/naturalColumnSizing.test.tsx b/packages/hightide-web/tests/table/naturalColumnSizing.test.tsx
index 67e41b22..3ba94969 100644
--- a/packages/hightide-web/tests/table/naturalColumnSizing.test.tsx
+++ b/packages/hightide-web/tests/table/naturalColumnSizing.test.tsx
@@ -30,11 +30,11 @@ const renderTable = (columnSizingMode?: 'fill' | 'natural') => render(
 describe('table column sizing modes', () => {
   it('tags the table element with the active sizing mode', () => {
     const { container, unmount } = renderTable('natural')
-    expect(container.querySelector('table[data-name="table"]')?.getAttribute('data-column-sizing')).toBe('natural')
+    expect(container.querySelector('table.table')?.getAttribute('data-column-sizing')).toBe('natural')
     unmount()
 
     const { container: fillContainer } = renderTable()
-    expect(fillContainer.querySelector('table[data-name="table"]')?.getAttribute('data-column-sizing')).toBe('fill')
+    expect(fillContainer.querySelector('table.table')?.getAttribute('data-column-sizing')).toBe('fill')
   })
 
   it('natural mode sets no explicit column widths, keeping content in charge', () => {
@@ -50,7 +50,7 @@ describe('table column sizing modes', () => {
 
   it('natural mode sets no explicit width on the table element', () => {
     const { container } = renderTable('natural')
-    const table = container.querySelector('table[data-name="table"]') as HTMLTableElement
+    const table = container.querySelector('table.table') as HTMLTableElement
     expect(table.style.width).toBe('')
   })
 
diff --git a/packages/hightide-web/tests/virtualization/virtualizationScroll.test.ts b/packages/hightide-web/tests/virtualization/virtualizationScroll.test.ts
index 43249da7..a4eff322 100644
--- a/packages/hightide-web/tests/virtualization/virtualizationScroll.test.ts
+++ b/packages/hightide-web/tests/virtualization/virtualizationScroll.test.ts
@@ -21,7 +21,7 @@ describe('findPageScrollContainer', () => {
     // virtualization must still bind to it (otherwise an empty list never
     // resolves a scroll element and renders zero rows).
     documentBody.innerHTML = `
-      <div data-name="app-page-content">
+      <div class="app-page-content">
         <main>
           <div id="list">
             <table><tbody id="body"></tbody></table>
@@ -30,7 +30,7 @@ describe('findPageScrollContainer', () => {
       </div>
     `
     const body = document?.getElementById('body')
-    const appPageContent = document?.querySelector('[data-name="app-page-content"]')
+    const appPageContent = document?.querySelector('.app-page-content')
 
     expect(findScrollableAncestor(body)).toBeNull()
     expect(findPageScrollContainer(body)).toBe(appPageContent)

From 5238067dd17a328c77f503f193620a04e51710d3 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Sun, 27 Sep 2026 14:41:21 +0200
Subject: [PATCH 02/25] feat: update avatar component

---
 conventions/Booleans.md                       |   7 +
 conventions/Interaction and Feedback.md       |   8 +-
 .../src/utils/componentState.ts               |  48 +++++
 packages/hightide-utils/src/utils/index.ts    |   1 +
 .../components/chat/ChatConversationRow.tsx   |  13 +-
 .../src/components/chat/ChatThreadHeader.tsx  |  17 +-
 .../display-and-visualization/Avatar.tsx      | 194 ------------------
 .../Avatar/Avatar.tsx                         |  18 ++
 .../Avatar/AvatarComponent.tsx                |  53 +++++
 .../Avatar/AvatarContext.tsx                  |  32 +++
 .../Avatar/AvatarFallback.tsx                 |  22 ++
 .../Avatar/AvatarImage.tsx                    |  41 ++++
 .../Avatar/AvatarName.tsx                     |  33 +++
 .../Avatar/AvatarRoot.tsx                     |  82 ++++++++
 .../Avatar/AvatarStatusIndicator.tsx          |  21 ++
 .../Avatar/AvatarTypes.ts                     |  12 ++
 .../display-and-visualization/Avatar/index.ts |   3 +
 .../AvatarGroup/AvatarGroup.tsx               |  12 ++
 .../AvatarGroup/AvatarGroupAdditionalText.tsx |  14 ++
 .../AvatarGroup/AvatarGroupComponent.tsx      |  64 ++++++
 .../AvatarGroup/AvatarGroupContainer.tsx      |  22 ++
 .../AvatarGroup/AvatarGroupOverlap.tsx        |  14 ++
 .../AvatarGroup/index.ts                      |   2 +
 .../display-and-visualization/index.ts        |   1 +
 .../src/style/theme/components/avatar.css     |  28 +--
 packages/hightide-web/src/utils/image.ts      |   5 +
 packages/hightide-web/src/utils/index.ts      |   1 +
 .../stories/Chat/ChatDemo.stories.tsx         |   2 +-
 .../Avatar/Avatar.stories.tsx                 |   9 +-
 .../Avatar/AvatarGroup.stories.tsx            |   6 +-
 .../Avatar/AvatarWithLabel.stories.tsx        |  37 +++-
 .../Avatar/AvatarWithStatus.stories.tsx       |  47 -----
 32 files changed, 585 insertions(+), 284 deletions(-)
 create mode 100644 conventions/Booleans.md
 create mode 100644 packages/hightide-utils/src/utils/componentState.ts
 delete mode 100644 packages/hightide-web/src/components/display-and-visualization/Avatar.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/Avatar/Avatar.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarComponent.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarContext.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarFallback.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarImage.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarName.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarRoot.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarStatusIndicator.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarTypes.ts
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/Avatar/index.ts
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroup.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupAdditionalText.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupComponent.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupContainer.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupOverlap.tsx
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/AvatarGroup/index.ts
 create mode 100644 packages/hightide-web/src/utils/image.ts
 delete mode 100644 packages/hightide-web/stories/Display And Visualization/Avatar/AvatarWithStatus.stories.tsx

diff --git a/conventions/Booleans.md b/conventions/Booleans.md
new file mode 100644
index 00000000..199ace53
--- /dev/null
+++ b/conventions/Booleans.md
@@ -0,0 +1,7 @@
+# Booleans
+
+Every boolean is named `is<Something>` or `has<Something>`.
+
+`is` names a condition the value is in, such as `isGrouped` or `isImageShown`. `has` names something the value possesses, such as `hasStatusIndicator` or `hasImageError`.
+
+A variable that is not a boolean does not start with `is` or `has`.
diff --git a/conventions/Interaction and Feedback.md b/conventions/Interaction and Feedback.md
index a31477c0..5579913a 100644
--- a/conventions/Interaction and Feedback.md	
+++ b/conventions/Interaction and Feedback.md	
@@ -4,7 +4,7 @@ Minimum states an element must differentiate. These apply to mobile and web unle
 
 There are three component types: Presentation, Interactive, and DataInput. Each type lists its own states. States are not inherited from another type.
 
-LifeCycle is separate from these types. It describes whether the element is available, waiting on data, blocked by an external operation or dependency, or performing an operation.
+LoadingState is separate from these types. It describes whether the element is available, waiting on data, blocked by an external operation or dependency, or performing an operation.
 
 ## Presentation
 
@@ -38,12 +38,12 @@ Data input elements accept or display an editable value.
 | `focus-visible` | web only, often replacing `focus` |
 | `disabled` | mobile and web |
 
-## LifeCycle
+## LoadingState
 
-Every element can be in one lifecycle state:
+Every element can be in one loading state:
 
 ```ts
-type LifeCycle = 'idle' | 'loading' | 'blocked' | 'processing'
+type LoadingState = 'idle' | 'loading' | 'blocked' | 'processing'
 ```
 
 ### idle
diff --git a/packages/hightide-utils/src/utils/componentState.ts b/packages/hightide-utils/src/utils/componentState.ts
new file mode 100644
index 00000000..d00ef60f
--- /dev/null
+++ b/packages/hightide-utils/src/utils/componentState.ts
@@ -0,0 +1,48 @@
+import type { EnumUtilsType } from './enum'
+
+const loadingStateValues = ['idle', 'loading', 'blocked', 'processing'] as const
+export type LoadingState = (typeof loadingStateValues)[number]
+const allowedLoadingStateValues: ReadonlySet<string> = new Set(loadingStateValues)
+function isLoadingStateValue(value: unknown): value is LoadingState {
+  if (typeof value !== 'string') return false
+  return allowedLoadingStateValues.has(value)
+}
+export const LoadingStateUtils: EnumUtilsType<LoadingState> = {
+  values: loadingStateValues,
+  set: allowedLoadingStateValues,
+  isValue: isLoadingStateValue,
+}
+
+const interactiveStateValues = ['hover', 'pressed', 'focus', 'focus-visible', 'disabled'] as const
+export type InteractiveState = (typeof interactiveStateValues)[number]
+const allowedInteractiveStateValues: ReadonlySet<string> = new Set(interactiveStateValues)
+function isInteractiveStateValue(value: unknown): value is InteractiveState {
+  if (typeof value !== 'string') return false
+  return allowedInteractiveStateValues.has(value)
+}
+export const InteractiveStateUtils: EnumUtilsType<InteractiveState> = {
+  values: interactiveStateValues,
+  set: allowedInteractiveStateValues,
+  isValue: isInteractiveStateValue,
+}
+
+const dataInputStateValues = [
+  'readonly',
+  'invalid',
+  'hover',
+  'pressed',
+  'focus',
+  'focus-visible',
+  'disabled',
+] as const
+export type DataInputState = (typeof dataInputStateValues)[number]
+const allowedDataInputStateValues: ReadonlySet<string> = new Set(dataInputStateValues)
+function isDataInputStateValue(value: unknown): value is DataInputState {
+  if (typeof value !== 'string') return false
+  return allowedDataInputStateValues.has(value)
+}
+export const DataInputStateUtils: EnumUtilsType<DataInputState> = {
+  values: dataInputStateValues,
+  set: allowedDataInputStateValues,
+  isValue: isDataInputStateValue,
+}
diff --git a/packages/hightide-utils/src/utils/index.ts b/packages/hightide-utils/src/utils/index.ts
index 1cf95af1..103cf81e 100644
--- a/packages/hightide-utils/src/utils/index.ts
+++ b/packages/hightide-utils/src/utils/index.ts
@@ -1,6 +1,7 @@
 export * from './array'
 export * from './bagFunctions'
 export * from './builder'
+export * from './componentState'
 export * from './curve'
 export * from './date'
 export * from './duration'
diff --git a/packages/hightide-web/src/components/chat/ChatConversationRow.tsx b/packages/hightide-web/src/components/chat/ChatConversationRow.tsx
index 943d2bcb..6c91e89d 100644
--- a/packages/hightide-web/src/components/chat/ChatConversationRow.tsx
+++ b/packages/hightide-web/src/components/chat/ChatConversationRow.tsx
@@ -1,14 +1,15 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 import { Check, CheckCheck } from 'lucide-react'
-import type { AvatarWithStatusProps } from '../display-and-visualization/Avatar'
-import { AvatarWithStatus } from '../display-and-visualization/Avatar'
+
+import { Avatar } from '../display-and-visualization/Avatar/Avatar'
+import type { AvatarProps } from '../display-and-visualization/Avatar/AvatarComponent'
 import { PropsUtil } from '../../utils/propsUtil'
 
 export type ChatConversationSentIndicator = 'sent' | 'sentAndReceived'
 
 export type ChatConversationRowProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  avatar: AvatarWithStatusProps,
+  avatar: AvatarProps,
   title: ReactNode,
   timestamp?: ReactNode,
   preview?: ReactNode,
@@ -38,7 +39,11 @@ export const ChatConversationRow = ({
       data-selected={PropsUtil.dataAttributes.bool(isSelected)}
       data-unread={PropsUtil.dataAttributes.bool(isUnread)}
     >
-      <AvatarWithStatus size="md" {...avatar}/>
+      <Avatar
+        size="md"
+        {...avatar}
+        hasStatusIndicator={avatar.hasStatusIndicator ?? true}
+      />
       <span className="chat-conversation-row-content">
         <span className="chat-conversation-row-top">
           <span className="chat-conversation-row-title">{title}</span>
diff --git a/packages/hightide-web/src/components/chat/ChatThreadHeader.tsx b/packages/hightide-web/src/components/chat/ChatThreadHeader.tsx
index 0a7dcbeb..1b226883 100644
--- a/packages/hightide-web/src/components/chat/ChatThreadHeader.tsx
+++ b/packages/hightide-web/src/components/chat/ChatThreadHeader.tsx
@@ -1,10 +1,11 @@
 import type { HTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
-import type { AvatarWithStatusProps } from '../display-and-visualization/Avatar'
-import { AvatarWithStatus } from '../display-and-visualization/Avatar'
+
+import { Avatar } from '../display-and-visualization/Avatar/Avatar'
+import type { AvatarProps } from '../display-and-visualization/Avatar/AvatarComponent'
 
 export type ChatThreadHeaderProps = HTMLAttributes<HTMLDivElement> & {
-  avatar?: AvatarWithStatusProps,
+  avatar?: AvatarProps,
   title: ReactNode,
   subtitle?: ReactNode,
   leftActions?: ReactNode,
@@ -23,11 +24,6 @@ export const ChatThreadHeader = ({
   trailingActionsClassName,
   ...props
 }: ChatThreadHeaderProps) => {
-  const resolvedAvatar = {
-    ...avatar,
-    status: avatar?.status ?? 'unknown',
-  }
-
   return (
     <div {...props} className={clsx('chat-thread-header', props.className)}>
       {leftActions && (
@@ -35,7 +31,10 @@ export const ChatThreadHeader = ({
           {leftActions}
         </div>
       )}
-      <AvatarWithStatus size="lg" {...resolvedAvatar}/>
+      <Avatar
+        size="lg"
+        {...avatar}
+      />
       <span className="chat-thread-header-info">
         <span className="chat-thread-header-title">{title}</span>
         {subtitle && (
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar.tsx b/packages/hightide-web/src/components/display-and-visualization/Avatar.tsx
deleted file mode 100644
index 320b411f..00000000
--- a/packages/hightide-web/src/components/display-and-visualization/Avatar.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import type { ElementType, HTMLAttributes, ImgHTMLAttributes, ReactNode } from 'react'
-import { useEffect, useMemo, useState } from 'react'
-import clsx from 'clsx'
-import { UserIcon } from 'lucide-react'
-import { Visibility } from '../layout/Visibility'
-
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | null
-
-type ImageConfig = {
-  avatarUrl: string,
-  alt: string,
-}
-
-export type AvatarImageProps = ImgHTMLAttributes<HTMLImageElement>
-
-const DefaultAvatarImage: ElementType<AvatarImageProps> = 'img'
-
-export type AvatarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
-  image?: ImageConfig,
-  name?: string,
-  size?: AvatarSize,
-  ImageComponent?: ElementType<AvatarImageProps>,
-}
-
-/**
- * A component for showing a profile picture
- */
-export const Avatar = ({
-  image: initialImage,
-  name,
-  size = 'md',
-  ImageComponent = DefaultAvatarImage,
-  ...props
-}: AvatarProps) => {
-  const [hasError, setHasError] = useState(false)
-  const [hasLoaded, setHasLoaded] = useState(false)
-  const [image, setImage] = useState(initialImage)
-  const Image = ImageComponent
-
-  const displayName = useMemo(() => {
-    const maxLetters = size === 'sm' ? 1 : 2
-    return (name ?? '')
-      .split(' ')
-      .filter((_, index) => index < maxLetters)
-      .map(value => value[0])
-      .join('')
-      .toUpperCase()
-  }, [name, size])
-
-  const isShowingImage = !!image && (!hasError || !hasLoaded)
-
-  useEffect(() => {
-    if(initialImage?.avatarUrl !== image?.avatarUrl) {
-      setHasError(false)
-      setHasLoaded(false)
-    }
-    setImage(initialImage)
-  }, [image?.avatarUrl, initialImage])
-
-  return (
-    <div
-      className={clsx('avatar', props.className)}
-      data-size={size ?? undefined}>
-      <Visibility isVisible={isShowingImage}>
-        <Image
-          key={image?.avatarUrl}
-          src={image?.avatarUrl}
-          alt={image?.alt}
-          className="avatar-image"
-          onLoad={() => setHasLoaded(true)}
-          onError={() => setHasError(true)}
-          data-error={hasError ? '' : undefined}
-          data-loaded={hasLoaded ? '' : undefined}
-        />
-      </Visibility>
-      {name ? displayName : (<UserIcon />)}
-    </div>
-  )
-}
-
-export type AvatarGroupProps = HTMLAttributes<HTMLDivElement> & {
-  avatars: Omit<AvatarProps, 'size'>[],
-  showTotalNumber?: boolean,
-  size?: AvatarSize,
-  ImageComponent?: ElementType<AvatarImageProps>,
-}
-
-/**
- * A component for showing a group of Avatar's
- */
-export const AvatarGroup = ({
-  avatars,
-  showTotalNumber = true,
-  size = 'md',
-  ImageComponent,
-  ...props
-}: AvatarGroupProps) => {
-  const maxShownProfiles = 5
-  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)
-  const notDisplayedProfiles = avatars.length - maxShownProfiles
-  const group = (
-    <div className="avatar-group-container">
-      {displayedProfiles.map((avatar, index) => (
-        <Avatar
-          {...avatar}
-          key={index}
-          size={size}
-          data-group=""
-          ImageComponent={avatar.ImageComponent ?? ImageComponent}
-        />
-      ))}
-    </div>
-  )
-
-
-  return (
-    <div
-      className={clsx('avatar-group', props.className)}
-      data-size={size ?? undefined}>
-      {group}
-      {showTotalNumber && notDisplayedProfiles > 0 && (
-        <span
-          className="avatar-group-more"
-          data-size={size}
-        >
-          {`+ ${notDisplayedProfiles}`}
-        </span>
-      )}
-    </div>
-  )
-}
-
-export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy' | 'unknown'
-
-export type AvatarWithStatusProps = AvatarProps & {
-  status?: AvatarStatus,
-}
-
-export const AvatarWithStatus = ({
-  status = 'unknown',
-  className,
-  size = 'md',
-  ...avatarProps
-}: AvatarWithStatusProps) => {
-  return (
-    <div
-      className={clsx('avatar-with-status', className)}
-      data-size={size ?? undefined}
-    >
-      <Avatar {...avatarProps} size={size} />
-      <div
-        className="avatar-with-status-dot"
-        data-size={size ?? undefined}
-        data-status={status}
-      />
-    </div>
-  )
-}
-
-type AvatarWithLabelPosition = 'left' | 'right'
-
-export type AvatarWithLabelProps = AvatarProps & {
-  label: ReactNode,
-  labelPosition?: AvatarWithLabelPosition,
-}
-
-/**
- * An avatar with a label displayed beside it
- */
-export const AvatarWithLabel = ({
-  label,
-  labelPosition = 'left',
-  className,
-  size = 'md',
-  ...avatarProps
-}: AvatarWithLabelProps) => {
-  const avatar = <Avatar {...avatarProps} size={size} />
-  const labelElement = (
-    <span className="avatar-with-label-text">
-      {label}
-    </span>
-  )
-
-  return (
-    <div
-      className={clsx('avatar-with-label', className)}
-      data-label-position={labelPosition}
-      data-size={size ?? undefined}
-    >
-      {labelPosition === 'left' ? labelElement : avatar}
-      {labelPosition === 'left' ? avatar : labelElement}
-    </div>
-  )
-}
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/Avatar.tsx b/packages/hightide-web/src/components/display-and-visualization/Avatar/Avatar.tsx
new file mode 100644
index 00000000..0b5fe526
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar/Avatar.tsx
@@ -0,0 +1,18 @@
+import { AvatarComponent } from './AvatarComponent'
+import { AvatarContext } from './AvatarContext'
+import { AvatarFallback } from './AvatarFallback'
+import { AvatarImage } from './AvatarImage'
+import { AvatarName } from './AvatarName'
+import { AvatarRoot } from './AvatarRoot'
+import { AvatarStatusIndicator } from './AvatarStatusIndicator'
+
+const Avatar = Object.assign(AvatarComponent, {
+  Root: AvatarRoot,
+  Fallback: AvatarFallback,
+  Name: AvatarName,
+  Image: AvatarImage,
+  StatusIndicator: AvatarStatusIndicator,
+  Context: AvatarContext,
+})
+
+export { Avatar }
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarComponent.tsx b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarComponent.tsx
new file mode 100644
index 00000000..b8e42c22
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarComponent.tsx
@@ -0,0 +1,53 @@
+import type { HTMLAttributes } from 'react'
+
+import type { ImageComponent } from '../../../utils/image'
+import { AvatarFallback } from './AvatarFallback'
+import { AvatarImage } from './AvatarImage'
+import { AvatarName } from './AvatarName'
+import { AvatarRoot } from './AvatarRoot'
+import { AvatarStatusIndicator } from './AvatarStatusIndicator'
+import type { AvatarImageConfig, AvatarImageProps, AvatarSize, AvatarStatus } from './AvatarTypes'
+
+export type AvatarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  image?: AvatarImageConfig,
+  name?: string,
+  size?: AvatarSize,
+  status?: AvatarStatus,
+  hasStatusIndicator?: boolean,
+  ImageComponent?: ImageComponent,
+  fallbackProps?: HTMLAttributes<HTMLDivElement>,
+  nameProps?: HTMLAttributes<HTMLSpanElement>,
+  imageProps?: AvatarImageProps,
+  statusIndicatorProps?: HTMLAttributes<HTMLDivElement>,
+}
+
+export function AvatarComponent({
+  image,
+  name,
+  size,
+  status = 'unknown',
+  hasStatusIndicator = false,
+  ImageComponent,
+  fallbackProps,
+  nameProps,
+  imageProps,
+  statusIndicatorProps,
+  ...props
+}: AvatarProps) {
+  return (
+    <AvatarRoot
+      {...props}
+      image={image}
+      name={name}
+      size={size}
+      status={status}
+      ImageComponent={ImageComponent}
+      hasStatusIndicator={hasStatusIndicator}
+    >
+      <AvatarFallback {...fallbackProps} />
+      <AvatarName {...nameProps} />
+      <AvatarImage {...imageProps} />
+      <AvatarStatusIndicator {...statusIndicatorProps} />
+    </AvatarRoot>
+  )
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarContext.tsx b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarContext.tsx
new file mode 100644
index 00000000..bb9a46c6
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarContext.tsx
@@ -0,0 +1,32 @@
+import { createContext, useContext } from 'react'
+import type { LoadingState } from '@helpwave/hightide-utils/utils'
+
+import type { ImageComponent } from '../../../utils/image'
+import type { AvatarImageConfig, AvatarSize, AvatarStatus } from './AvatarTypes'
+
+export type AvatarContextValue = {
+  hasStatusIndicator: boolean,
+  imageLoadingState: LoadingState,
+  hasImageError: boolean,
+  reportImageLoaded: (avatarUrl: string) => void,
+  reportImageError: (avatarUrl: string) => void,
+  size: AvatarSize,
+  name?: string,
+  image?: AvatarImageConfig,
+  status?: AvatarStatus,
+  ImageComponent: ImageComponent,
+}
+
+export const AvatarContext = createContext<AvatarContextValue | null>(null)
+
+export function useAvatarContext() {
+  const context = useContext(AvatarContext)
+  if (!context) {
+    throw new Error('Avatar components must be used within an Avatar.Root')
+  }
+  return context
+}
+
+export function isImageShown(context: AvatarContextValue) {
+  return !!context.image?.avatarUrl && context.imageLoadingState === 'idle' && !context.hasImageError
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarFallback.tsx b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarFallback.tsx
new file mode 100644
index 00000000..34f97488
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarFallback.tsx
@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+import { UserIcon } from 'lucide-react'
+
+import { isImageShown, useAvatarContext } from './AvatarContext'
+
+export function AvatarFallback({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  const context = useAvatarContext()
+  if (context.name || isImageShown(context)) return null
+
+  return (
+    <div
+      {...props}
+      className={clsx('avatar-fallback', className)}
+    >
+      <UserIcon />
+    </div>
+  )
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarImage.tsx b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarImage.tsx
new file mode 100644
index 00000000..3e1ba31e
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarImage.tsx
@@ -0,0 +1,41 @@
+import clsx from 'clsx'
+
+import { useAvatarContext } from './AvatarContext'
+import type { AvatarImageProps } from './AvatarTypes'
+
+export function AvatarImage({
+  className,
+  onLoad,
+  onError,
+  ...props
+}: AvatarImageProps) {
+  const {
+    image,
+    imageLoadingState,
+    hasImageError,
+    reportImageLoaded,
+    reportImageError,
+    ImageComponent,
+  } = useAvatarContext()
+
+  if (!image?.avatarUrl || hasImageError) return null
+
+  return (
+    <ImageComponent
+      src={image.avatarUrl}
+      alt={image.alt}
+      {...props}
+      key={image.avatarUrl}
+      className={clsx('avatar-image', className)}
+      data-loaded={imageLoadingState === 'idle' ? '' : undefined}
+      onLoad={(event) => {
+        reportImageLoaded(image.avatarUrl)
+        onLoad?.(event)
+      }}
+      onError={(event) => {
+        reportImageError(image.avatarUrl)
+        onError?.(event)
+      }}
+    />
+  )
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarName.tsx b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarName.tsx
new file mode 100644
index 00000000..743980b1
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarName.tsx
@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+import { isImageShown, useAvatarContext } from './AvatarContext'
+import type { AvatarSize } from './AvatarTypes'
+
+function initialsFor(name: string, size: AvatarSize) {
+  const maxLetters = size === 'sm' ? 1 : 2
+  return name
+    .split(' ')
+    .filter((_, index) => index < maxLetters)
+    .map((value) => value[0])
+    .join('')
+    .toUpperCase()
+}
+
+export function AvatarName({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>) {
+  const context = useAvatarContext()
+  if (!context.name || isImageShown(context)) return null
+
+  return (
+    <span
+      {...props}
+      className={clsx('avatar-name', className)}
+    >
+      {children ?? initialsFor(context.name, context.size)}
+    </span>
+  )
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarRoot.tsx b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarRoot.tsx
new file mode 100644
index 00000000..b0c7ceec
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarRoot.tsx
@@ -0,0 +1,82 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import clsx from 'clsx'
+import type { LoadingState } from '@helpwave/hightide-utils/utils'
+
+import type { ImageComponent } from '../../../utils/image'
+import { AvatarContext } from './AvatarContext'
+import type { AvatarImageConfig, AvatarSize, AvatarStatus } from './AvatarTypes'
+
+const DefaultAvatarImage: ImageComponent = 'img'
+
+export type AvatarRootProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  children: ReactNode,
+  size?: AvatarSize,
+  name?: string,
+  image?: AvatarImageConfig,
+  status?: AvatarStatus,
+  hasStatusIndicator?: boolean,
+  ImageComponent?: ImageComponent,
+}
+
+export function AvatarRoot({
+  children,
+  size = 'md',
+  name,
+  image,
+  status,
+  hasStatusIndicator = false,
+  ImageComponent = DefaultAvatarImage,
+  className,
+  ...props
+}: AvatarRootProps) {
+  const [loadedUrl, setLoadedUrl] = useState<string | undefined>(undefined)
+  const [erroredUrl, setErroredUrl] = useState<string | undefined>(undefined)
+  const avatarUrl = image?.avatarUrl
+  const hasImageError = !!avatarUrl && erroredUrl === avatarUrl
+  const imageLoadingState: LoadingState = !avatarUrl || loadedUrl === avatarUrl || hasImageError
+    ? 'idle'
+    : 'loading'
+  const reportImageLoaded = useCallback((url: string) => {
+    setLoadedUrl(url)
+  }, [])
+  const reportImageError = useCallback((url: string) => {
+    setErroredUrl(url)
+  }, [])
+  const contextValue = useMemo(() => ({
+    hasStatusIndicator,
+    imageLoadingState,
+    hasImageError,
+    reportImageLoaded,
+    reportImageError,
+    size,
+    name,
+    image,
+    status,
+    ImageComponent,
+  }), [
+    hasStatusIndicator,
+    imageLoadingState,
+    hasImageError,
+    reportImageLoaded,
+    reportImageError,
+    size,
+    name,
+    image,
+    status,
+    ImageComponent,
+  ])
+
+  return (
+    <AvatarContext.Provider value={contextValue}>
+      <div
+        {...props}
+        className={clsx('avatar', className)}
+        data-size={size ?? undefined}
+        data-loading-state={imageLoadingState}
+      >
+        {children}
+      </div>
+    </AvatarContext.Provider>
+  )
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarStatusIndicator.tsx b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarStatusIndicator.tsx
new file mode 100644
index 00000000..dfd1fcef
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarStatusIndicator.tsx
@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+import { useAvatarContext } from './AvatarContext'
+
+export function AvatarStatusIndicator({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  const { hasStatusIndicator, size, status } = useAvatarContext()
+  if (!hasStatusIndicator) return null
+
+  return (
+    <div
+      {...props}
+      className={clsx('avatar-status-indicator', className)}
+      data-size={size ?? undefined}
+      data-status={status}
+    />
+  )
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarTypes.ts b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarTypes.ts
new file mode 100644
index 00000000..8f47fa99
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarTypes.ts
@@ -0,0 +1,12 @@
+import type { ImageProps } from '../../../utils/image'
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | null
+
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy' | 'unknown'
+
+export type AvatarImageConfig = {
+  avatarUrl: string,
+  alt: string,
+}
+
+export type AvatarImageProps = ImageProps
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/index.ts b/packages/hightide-web/src/components/display-and-visualization/Avatar/index.ts
new file mode 100644
index 00000000..96afb4d2
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar/index.ts
@@ -0,0 +1,3 @@
+export { Avatar } from './Avatar'
+export type { AvatarProps } from './AvatarComponent'
+export type { AvatarImageConfig, AvatarImageProps, AvatarSize, AvatarStatus } from './AvatarTypes'
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroup.tsx b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroup.tsx
new file mode 100644
index 00000000..e743d563
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroup.tsx
@@ -0,0 +1,12 @@
+import { AvatarGroupAdditionalText } from './AvatarGroupAdditionalText'
+import { AvatarGroupComponent } from './AvatarGroupComponent'
+import { AvatarGroupContainer } from './AvatarGroupContainer'
+import { AvatarGroupOverlap } from './AvatarGroupOverlap'
+
+const AvatarGroup = Object.assign(AvatarGroupComponent, {
+  Container: AvatarGroupContainer,
+  Overlap: AvatarGroupOverlap,
+  AdditionalText: AvatarGroupAdditionalText,
+})
+
+export { AvatarGroup }
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupAdditionalText.tsx b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupAdditionalText.tsx
new file mode 100644
index 00000000..709dc85d
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupAdditionalText.tsx
@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+export function AvatarGroupAdditionalText({
+  className,
+  ...props
+}: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      {...props}
+      className={clsx('avatar-group-additional-text', className)}
+    />
+  )
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupComponent.tsx b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupComponent.tsx
new file mode 100644
index 00000000..9b183666
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupComponent.tsx
@@ -0,0 +1,64 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+import type { ImageComponent } from '../../../utils/image'
+import { Avatar } from '../Avatar/Avatar'
+import type { AvatarProps } from '../Avatar/AvatarComponent'
+import type { AvatarSize } from '../Avatar/AvatarTypes'
+import { AvatarGroupAdditionalText } from './AvatarGroupAdditionalText'
+import type { AvatarGroupContainerProps } from './AvatarGroupContainer'
+import { AvatarGroupContainer } from './AvatarGroupContainer'
+import { AvatarGroupOverlap } from './AvatarGroupOverlap'
+
+const maxShownProfiles = 5
+
+export type AvatarGroupProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  avatars: Omit<AvatarProps, 'size'>[],
+  hasAdditionalText?: boolean,
+  size?: AvatarSize,
+  ImageComponent?: ImageComponent,
+  containerProps?: Omit<AvatarGroupContainerProps, 'children' | 'size'>,
+  overlapProps?: HTMLAttributes<HTMLDivElement>,
+  additionalTextProps?: HTMLAttributes<HTMLSpanElement>,
+}
+
+export function AvatarGroupComponent({
+  avatars,
+  hasAdditionalText = true,
+  size = 'md',
+  ImageComponent,
+  containerProps,
+  overlapProps,
+  additionalTextProps,
+  className,
+  ...props
+}: AvatarGroupProps) {
+  const displayedProfiles = avatars.length < maxShownProfiles ? avatars : avatars.slice(0, maxShownProfiles)
+  const hiddenProfileCount = avatars.length - maxShownProfiles
+
+  return (
+    <AvatarGroupContainer
+      {...props}
+      {...containerProps}
+      size={size}
+      className={clsx(className, containerProps?.className)}
+    >
+      <AvatarGroupOverlap {...overlapProps}>
+        {displayedProfiles.map((avatar, index) => (
+          <Avatar
+            {...avatar}
+            key={index}
+            size={size}
+            className={clsx('avatar-group-avatar', avatar.className)}
+            ImageComponent={avatar.ImageComponent ?? ImageComponent}
+          />
+        ))}
+      </AvatarGroupOverlap>
+      {hasAdditionalText && hiddenProfileCount > 0 && (
+        <AvatarGroupAdditionalText {...additionalTextProps}>
+          {additionalTextProps?.children ?? `+ ${hiddenProfileCount}`}
+        </AvatarGroupAdditionalText>
+      )}
+    </AvatarGroupContainer>
+  )
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupContainer.tsx b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupContainer.tsx
new file mode 100644
index 00000000..3b9b03dd
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupContainer.tsx
@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+import type { AvatarSize } from '../Avatar/AvatarTypes'
+
+export type AvatarGroupContainerProps = HTMLAttributes<HTMLDivElement> & {
+  size?: AvatarSize,
+}
+
+export function AvatarGroupContainer({
+  size = 'md',
+  className,
+  ...props
+}: AvatarGroupContainerProps) {
+  return (
+    <div
+      {...props}
+      className={clsx('avatar-group', className)}
+      data-size={size ?? undefined}
+    />
+  )
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupOverlap.tsx b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupOverlap.tsx
new file mode 100644
index 00000000..ef0979d0
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupOverlap.tsx
@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+export function AvatarGroupOverlap({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      {...props}
+      className={clsx('avatar-group-overlap', className)}
+    />
+  )
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/index.ts b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/index.ts
new file mode 100644
index 00000000..b544f85f
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/index.ts
@@ -0,0 +1,2 @@
+export { AvatarGroup } from './AvatarGroup'
+export type { AvatarGroupProps } from './AvatarGroupComponent'
diff --git a/packages/hightide-web/src/components/display-and-visualization/index.ts b/packages/hightide-web/src/components/display-and-visualization/index.ts
index 5ea8e06d..a9bfa047 100644
--- a/packages/hightide-web/src/components/display-and-visualization/index.ts
+++ b/packages/hightide-web/src/components/display-and-visualization/index.ts
@@ -1,4 +1,5 @@
 export * from './Avatar'
+export * from './AvatarGroup'
 export * from './Card'
 export * from './ChangingNumber'
 export * from './Chip'
diff --git a/packages/hightide-web/src/style/theme/components/avatar.css b/packages/hightide-web/src/style/theme/components/avatar.css
index 55ded986..ab39889e 100644
--- a/packages/hightide-web/src/style/theme/components/avatar.css
+++ b/packages/hightide-web/src/style/theme/components/avatar.css
@@ -1,7 +1,7 @@
 @layer components {
   .avatar {
     @apply relative flex-row-0 items-center justify-center primary coloring-solid rounded-full;
-    &[data-group] {
+    &.avatar-group-avatar {
       @apply absolute shadow-side shadow-r-4 shadow-hard;
     }
     &[data-size="xs"] {
@@ -17,23 +17,27 @@
       @apply size-12 p-2 text-2xl font-bold;
     }
 
-    &[data-group]:nth-child(1) {
+    &[data-loading-state="loading"] {
+      @apply animate-pulse;
+    }
+
+    &.avatar-group-avatar:nth-child(1) {
       left: calc(0 * var(--size) * var(--overlap));
       z-index: 5;
     }
-    &[data-group]:nth-child(2) {
+    &.avatar-group-avatar:nth-child(2) {
       left: calc(1 * var(--size) * var(--overlap));
       z-index: 4;
     }
-    &[data-group]:nth-child(3) {
+    &.avatar-group-avatar:nth-child(3) {
       left: calc(2 * var(--size) * var(--overlap));
       z-index: 3;
     }
-    &[data-group]:nth-child(4) {
+    &.avatar-group-avatar:nth-child(4) {
       left: calc(3 * var(--size) * var(--overlap));
       z-index: 2;
     }
-    &[data-group]:nth-child(5) {
+    &.avatar-group-avatar:nth-child(5) {
       left: calc(4 * var(--size) * var(--overlap));
       z-index: 1;
     }
@@ -64,20 +68,16 @@
     }
   }
 
-  .avatar-group-container {
+  .avatar-group-overlap {
     @apply relative w-[calc(var(--size)*(0.5*4+1))] h-[var(--size)];
   }
 
-  .avatar-group-more {
+  .avatar-group-additional-text {
     @apply flex-row-2 truncate items-center text-[calc(var(--size)*2/3)];
   }
 
-  .avatar-with-status {
-    @apply relative inline-flex;
-  }
-
-  .avatar-with-status-dot {
-    @apply absolute right-0 bottom-0 z-1 rounded-full border-solid transition-colors;
+  .avatar-status-indicator {
+    @apply absolute right-0 bottom-0 z-2 rounded-full border-solid transition-colors;
     border-color: var(--color-background);
 
     &[data-size="xs"] {
diff --git a/packages/hightide-web/src/utils/image.ts b/packages/hightide-web/src/utils/image.ts
new file mode 100644
index 00000000..88058589
--- /dev/null
+++ b/packages/hightide-web/src/utils/image.ts
@@ -0,0 +1,5 @@
+import type { ComponentType, ImgHTMLAttributes } from 'react'
+
+export type ImageProps = ImgHTMLAttributes<HTMLImageElement>
+
+export type ImageComponent = ComponentType<ImageProps> | 'img'
diff --git a/packages/hightide-web/src/utils/index.ts b/packages/hightide-web/src/utils/index.ts
index 6637c26a..a5c0d476 100644
--- a/packages/hightide-web/src/utils/index.ts
+++ b/packages/hightide-web/src/utils/index.ts
@@ -1,6 +1,7 @@
 export * from './StorageListener'
 export * from './dom'
 export * from './forward-exports'
+export * from './image'
 export * from './propsUtil'
 export * from './safeGlobals'
 export * from './writeToClipboard'
diff --git a/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx b/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
index 861e0601..9c835f3a 100644
--- a/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
@@ -4,7 +4,7 @@ import type { ReactNode } from 'react'
 import clsx from 'clsx'
 import { CalendarDays, Camera, ChevronLeft, Paperclip, Phone, Pill, Plus, UserRoundPlus } from 'lucide-react'
 import { action } from 'storybook/actions'
-import type { AvatarStatus } from '../../src/components/display-and-visualization/Avatar'
+import type { AvatarStatus } from '../../src/components/display-and-visualization/Avatar/AvatarTypes'
 import { ChatConversationList } from '../../src/components/chat/ChatConversationList'
 import { ChatConversationRow, type ChatConversationSentIndicator } from '../../src/components/chat/ChatConversationRow'
 import { ChatThreadHeader } from '../../src/components/chat/ChatThreadHeader'
diff --git a/packages/hightide-web/stories/Display And Visualization/Avatar/Avatar.stories.tsx b/packages/hightide-web/stories/Display And Visualization/Avatar/Avatar.stories.tsx
index 5529340d..eab0e016 100644
--- a/packages/hightide-web/stories/Display And Visualization/Avatar/Avatar.stories.tsx	
+++ b/packages/hightide-web/stories/Display And Visualization/Avatar/Avatar.stories.tsx	
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Avatar } from '../../../src/components/display-and-visualization/Avatar'
+import { Avatar } from '../../../src/components/display-and-visualization/Avatar/Avatar'
+import type { AvatarStatus } from '../../../src/components/display-and-visualization/Avatar/AvatarTypes'
 
 type StoryArgs = {
   useName: boolean,
@@ -10,6 +11,10 @@ type StoryArgs = {
 const meta: Meta<StoryArgs> = {
   component: Avatar,
   argTypes: {
+    status: {
+      control: 'select',
+      options: ['online', 'offline', 'away', 'busy', 'unknown'] satisfies AvatarStatus[],
+    },
     useName: { control: 'boolean' },
     useImage: { control: 'boolean' },
     useErrorImage: { control: 'boolean' },
@@ -21,6 +26,8 @@ type Story = StoryObj<typeof meta>;
 
 export const avatar: Story = {
   args: {
+    status: 'online',
+    hasStatusIndicator: true,
     useImage: true,
     useName: true,
     useErrorImage: false,
diff --git a/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarGroup.stories.tsx b/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarGroup.stories.tsx
index bfde6e2d..b1e3f695 100644
--- a/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarGroup.stories.tsx	
+++ b/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarGroup.stories.tsx	
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { AvatarProps } from '../../../src/components/display-and-visualization/Avatar'
-import  { AvatarGroup } from '../../../src/components/display-and-visualization/Avatar'
+import type { AvatarProps } from '../../../src/components/display-and-visualization/Avatar/AvatarComponent'
+import { AvatarGroup } from '../../../src/components/display-and-visualization/AvatarGroup/AvatarGroup'
 import { range } from '@helpwave/hightide-utils/utils'
 import { faker } from '@faker-js/faker'
 
@@ -31,7 +31,7 @@ export const avatarGroup: Story = {
     useName: false,
     useErrorImage: false,
     size: 'md',
-    showTotalNumber: false,
+    hasAdditionalText: false,
     avatars
   },
   render: ({ avatars, useErrorImage, useImage, useName, ...props }) => {
diff --git a/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarWithLabel.stories.tsx b/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarWithLabel.stories.tsx
index c173cef2..a7c1260f 100644
--- a/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarWithLabel.stories.tsx	
+++ b/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarWithLabel.stories.tsx	
@@ -1,14 +1,20 @@
+import type { ReactNode } from 'react'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { AvatarWithLabel } from '../../../src/components/display-and-visualization/Avatar'
+import clsx from 'clsx'
+import { Avatar } from '../../../src/components/display-and-visualization/Avatar/Avatar'
+
+type LabelPosition = 'left' | 'right'
 
 type StoryArgs = {
   useName: boolean,
   useImage: boolean,
   useErrorImage: boolean,
-} & React.ComponentProps<typeof AvatarWithLabel>
+  label: ReactNode,
+  labelPosition: LabelPosition,
+} & React.ComponentProps<typeof Avatar>
 
 const meta: Meta<StoryArgs> = {
-  component: AvatarWithLabel,
+  component: Avatar,
   argTypes: {
     useName: { control: 'boolean' },
     useImage: { control: 'boolean' },
@@ -28,16 +34,17 @@ export const avatarWithLabel: Story = {
     label: 'John Doe',
     labelPosition: 'left',
     size: 'md',
+    hasStatusIndicator: true,
     name: 'John Doe',
     useImage: true,
     useName: true,
     useErrorImage: false,
   },
-  render: ({ name, useImage, useName, useErrorImage, label, ...args }) => {
-    return (
-      <AvatarWithLabel
+  render: ({ name, useImage, useName, useErrorImage, label, labelPosition, className, size = 'md', ...args }) => {
+    const avatar = (
+      <Avatar
         {...args}
-        label={label}
+        size={size}
         image={useImage ? {
           avatarUrl: useErrorImage ? 'http://localhost:3000/404' : 'https://cdn.helpwave.de/test-avatar.svg',
           alt: 'profile picture',
@@ -45,5 +52,21 @@ export const avatarWithLabel: Story = {
         name={useName ? name : undefined}
       />
     )
+    const labelElement = (
+      <span className="avatar-with-label-text">
+        {label}
+      </span>
+    )
+
+    return (
+      <div
+        className={clsx('avatar-with-label', className)}
+        data-label-position={labelPosition}
+        data-size={size ?? undefined}
+      >
+        {labelPosition === 'left' ? labelElement : avatar}
+        {labelPosition === 'left' ? avatar : labelElement}
+      </div>
+    )
   },
 }
diff --git a/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarWithStatus.stories.tsx b/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarWithStatus.stories.tsx
deleted file mode 100644
index a909dc87..00000000
--- a/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarWithStatus.stories.tsx	
+++ /dev/null
@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { AvatarWithStatus, type AvatarStatus } from '../../../src/components/display-and-visualization/Avatar'
-
-type StoryArgs = {
-  useName: boolean,
-  useImage: boolean,
-  useErrorImage: boolean,
-} & React.ComponentProps<typeof AvatarWithStatus>
-
-const meta: Meta<StoryArgs> = {
-  component: AvatarWithStatus,
-  argTypes: {
-    status: {
-      control: 'select',
-      options: ['online', 'offline', 'away', 'busy', 'unknown'] satisfies AvatarStatus[],
-    },
-    useName: { control: 'boolean' },
-    useImage: { control: 'boolean' },
-    useErrorImage: { control: 'boolean' },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const avatarWithStatus: Story = {
-  args: {
-    status: 'online',
-    size: 'md',
-    name: 'John Doe',
-    useImage: true,
-    useName: true,
-    useErrorImage: false,
-  },
-  render: ({ name, useImage, useName, useErrorImage, ...args }) => {
-    return (
-      <AvatarWithStatus
-        {...args}
-        image={useImage ? {
-          avatarUrl: useErrorImage ? 'http://localhost:3000/404' : 'https://cdn.helpwave.de/test-avatar.svg',
-          alt: 'profile picture',
-        } : undefined}
-        name={useName ? name : undefined}
-      />
-    )
-  },
-}

From 8a5a8b0d73dae1bba6ab4fccba1be4dbdd142b95 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Mon, 28 Sep 2026 18:57:23 +0200
Subject: [PATCH 03/25] chore: remove global export in hightide-web

---
 packages/hightide-web/README.md               |  4 +--
 packages/hightide-web/package.json            | 26 ++++++++++++++-----
 packages/hightide-web/src/index.ts            |  4 ---
 .../MultiSelect/MultiSelect.stories.tsx       |  2 +-
 .../Select/Select.stories.tsx                 |  2 +-
 packages/hightide-web/tsup.config.ts          |  7 ++++-
 6 files changed, 30 insertions(+), 15 deletions(-)
 delete mode 100644 packages/hightide-web/src/index.ts

diff --git a/packages/hightide-web/README.md b/packages/hightide-web/README.md
index d28f4bbf..3235869c 100644
--- a/packages/hightide-web/README.md
+++ b/packages/hightide-web/README.md
@@ -27,7 +27,7 @@ Two stylesheet exports are available:
 ### Step 3 — Wrap your app with `HightideProvider`
 
 ```tsx
-import { HightideProvider } from "@helpwave/hightide";
+import { HightideProvider } from "@helpwave/hightide/global-contexts";
 
 <HightideProvider theme={{ theme: "system" }} locale={{ locale: "system" }}>
   {children}
@@ -37,7 +37,7 @@ import { HightideProvider } from "@helpwave/hightide";
 ### Step 4 — Use components
 
 ```tsx
-import { LoadingAnimation } from "@helpwave/hightide";
+import { LoadingAnimation } from "@helpwave/hightide/components";
 ```
 
 ### Uncompiled CSS path (advanced)
diff --git a/packages/hightide-web/package.json b/packages/hightide-web/package.json
index fe384512..4f9a7f8d 100644
--- a/packages/hightide-web/package.json
+++ b/packages/hightide-web/package.json
@@ -11,6 +11,7 @@
   },
   "license": "AGPL-3.0-only",
   "version": "0.17.2",
+  "type": "module",
   "browserslist": [
     "> 0.2%",
     "last 3 versions",
@@ -23,13 +24,26 @@
   "files": [
     "dist"
   ],
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
   "exports": {
-    ".": {
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.js"
+    "./components": {
+      "types": "./dist/components/index.d.ts",
+      "require": "./dist/components/index.cjs",
+      "import": "./dist/components/index.js"
+    },
+    "./global-contexts": {
+      "types": "./dist/global-contexts/index.d.ts",
+      "require": "./dist/global-contexts/index.cjs",
+      "import": "./dist/global-contexts/index.js"
+    },
+    "./hooks": {
+      "types": "./dist/hooks/index.d.ts",
+      "require": "./dist/hooks/index.cjs",
+      "import": "./dist/hooks/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "require": "./dist/utils/index.cjs",
+      "import": "./dist/utils/index.js"
     },
     "./style/globals.css": "./dist/style/globals.css",
     "./style/uncompiled/globals.css": "./dist/style/uncompiled/globals.css"
diff --git a/packages/hightide-web/src/index.ts b/packages/hightide-web/src/index.ts
deleted file mode 100644
index e7ffca10..00000000
--- a/packages/hightide-web/src/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './components'
-export * from './global-contexts'
-export * from './hooks'
-export * from './utils'
diff --git a/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelect.stories.tsx b/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelect.stories.tsx
index 427529d6..23dd11f9 100644
--- a/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelect.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelect.stories.tsx	
@@ -2,7 +2,7 @@ import { action } from 'storybook/actions'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useEffect, useState } from 'react'
 import { MultiSelect } from '../../../src/components/user-interaction/MultiSelect/MultiSelect'
-import type { MultiSelectProps } from '../../../src'
+import type { MultiSelectProps } from '../../../src/components/user-interaction/MultiSelect/MultiSelectComponent'
 
 const meta: Meta<typeof MultiSelect<User>> = {
   component: MultiSelect<User>,
diff --git a/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx b/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx
index 3485b418..be2cddaa 100644
--- a/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx	
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { useEffect, useState } from 'react'
 import { Select } from '../../../src/components/user-interaction/Select/Select'
-import type { SelectProps } from '../../../src'
+import type { SelectProps } from '../../../src/components/user-interaction/Select/SelectComponent'
 import type { SelectOptionType } from '../../../src/components/user-interaction/Select/SelectContext'
 
 const meta: Meta<typeof Select<User>> = {
diff --git a/packages/hightide-web/tsup.config.ts b/packages/hightide-web/tsup.config.ts
index 5cec12f5..a4c03595 100644
--- a/packages/hightide-web/tsup.config.ts
+++ b/packages/hightide-web/tsup.config.ts
@@ -1,7 +1,12 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  entry: ['src/index.ts'],
+  entry: {
+    'components/index': 'src/components/index.ts',
+    'global-contexts/index': 'src/global-contexts/index.ts',
+    'hooks/index': 'src/hooks/index.ts',
+    'utils/index': 'src/utils/index.ts',
+  },
   format: ['cjs', 'esm'],
   outDir: 'dist',
   dts: true,

From 7b50243416c576efda40b00a8c1d38fa2b578edc Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Mon, 28 Sep 2026 21:34:37 +0200
Subject: [PATCH 04/25] feat: split card and list item logic

---
 .../display-and-visualization/Card.tsx        | 213 +-----------------
 packages/hightide-web/src/components/index.ts |   1 +
 .../src/components/layout/Divider.tsx         |  23 ++
 .../src/components/layout/index.ts            |   1 +
 .../src/components/list/ListActionItem.tsx    |  45 ++++
 .../src/components/list/ListItem.tsx          |  39 ++++
 .../src/components/list/ListItemContent.tsx   |  36 +++
 .../src/components/list/ListItemTypes.ts      |  14 ++
 .../components/list/ListNavigationItem.tsx    | 123 ++++++++++
 .../hightide-web/src/components/list/index.ts |   7 +
 .../src/style/theme/components/card.css       |  81 +------
 .../src/style/theme/components/divider.css    |  13 ++
 .../src/style/theme/components/index.css      |   2 +
 .../src/style/theme/components/list-item.css  |  58 +++++
 .../Card/ActionCard.stories.tsx               |  23 --
 .../Card/Card.stories.tsx                     |  88 +++++++-
 .../Card/NavigationCard.stories.tsx           |  21 --
 .../List/ListActionItem.stories.tsx           |  83 +++++++
 .../List/ListItem.stories.tsx                 |  55 +++++
 .../List/ListNavigationItem.stories.tsx       |  84 +++++++
 20 files changed, 676 insertions(+), 334 deletions(-)
 create mode 100644 packages/hightide-web/src/components/layout/Divider.tsx
 create mode 100644 packages/hightide-web/src/components/list/ListActionItem.tsx
 create mode 100644 packages/hightide-web/src/components/list/ListItem.tsx
 create mode 100644 packages/hightide-web/src/components/list/ListItemContent.tsx
 create mode 100644 packages/hightide-web/src/components/list/ListItemTypes.ts
 create mode 100644 packages/hightide-web/src/components/list/ListNavigationItem.tsx
 create mode 100644 packages/hightide-web/src/components/list/index.ts
 create mode 100644 packages/hightide-web/src/style/theme/components/divider.css
 create mode 100644 packages/hightide-web/src/style/theme/components/list-item.css
 delete mode 100644 packages/hightide-web/stories/Display And Visualization/Card/ActionCard.stories.tsx
 delete mode 100644 packages/hightide-web/stories/Display And Visualization/Card/NavigationCard.stories.tsx
 create mode 100644 packages/hightide-web/stories/User Interaction/List/ListActionItem.stories.tsx
 create mode 100644 packages/hightide-web/stories/User Interaction/List/ListItem.stories.tsx
 create mode 100644 packages/hightide-web/stories/User Interaction/List/ListNavigationItem.stories.tsx

diff --git a/packages/hightide-web/src/components/display-and-visualization/Card.tsx b/packages/hightide-web/src/components/display-and-visualization/Card.tsx
index ca2758a1..ce91dde5 100644
--- a/packages/hightide-web/src/components/display-and-visualization/Card.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/Card.tsx
@@ -1,223 +1,22 @@
-import type { AnchorHTMLAttributes, ElementType, HTMLAttributes, ReactNode } from 'react'
-import { forwardRef, useId } from 'react'
+import type { HTMLAttributes } from 'react'
 import clsx from 'clsx'
-import { ChevronRight, ExternalLink } from 'lucide-react'
-import { Visibility } from '../layout/Visibility'
-import { PropsUtil } from '../../utils/propsUtil'
 
 export type CardSize = 'sm' | 'md' | 'lg'
 
-type CardHeaderContentProps = {
-  title: ReactNode,
-  titleId?: string,
-  description?: ReactNode,
-  descriptionId?: string,
-  leading?: ReactNode,
-  trailing?: ReactNode,
-}
-
-function CardHeaderContent({
-  title,
-  titleId,
-  description,
-  descriptionId,
-  leading,
-  trailing,
-}: CardHeaderContentProps) {
-  return (
-    <>
-      {leading != null && (
-        <span className="card-leading">{leading}</span>
-      )}
-      <div className="card-content">
-        <span id={titleId} className="card-title">{title}</span>
-        <Visibility isVisible={!!description}>
-          <span id={descriptionId} className="card-description">{description}</span>
-        </Visibility>
-      </div>
-      {trailing != null && (
-        <span className="card-trailing">{trailing}</span>
-      )}
-    </>
-  )
-}
-
-//
-// Card
-//
-
-export type CardProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
-  title: ReactNode,
-  description?: ReactNode,
-  size?: CardSize,
-  leading?: ReactNode,
-  trailing?: ReactNode,
-}
-
-export const Card = ({
-  title,
-  description,
-  size = 'md',
-  leading,
-  trailing,
-  children,
-  className,
-  ...props
-}: CardProps) => {
-  return (
-    <div
-      {...props}
-      className={clsx('group/card card', className)}
-      data-size={size}
-    >
-      <div className="card-header">
-        <CardHeaderContent
-          title={title}
-          description={description}
-          leading={leading}
-          trailing={trailing}
-        />
-      </div>
-      {children}
-    </div>
-  )
-}
-
-//
-// ActionCard
-//
-
-export type ActionCardProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
-  title: ReactNode,
-  description?: ReactNode,
+export type CardProps = HTMLAttributes<HTMLDivElement> & {
   size?: CardSize,
-  leading?: ReactNode,
-  trailing?: ReactNode,
-  disabled?: boolean,
 }
 
-export const ActionCard = forwardRef<HTMLDivElement, ActionCardProps>(function ActionCard({
-  title,
-  description,
+export function Card({
   size = 'md',
-  leading,
-  trailing,
-  disabled = false,
-  children,
   className,
-  onClick,
-  onKeyDown,
   ...props
-}, ref) {
+}: CardProps) {
   return (
     <div
       {...props}
-      ref={ref}
-      className={clsx('card group/card action-card', className)}
-      onClick={(event) => {
-        if (disabled) {
-          return
-        }
-        onClick?.(event)
-      }}
-      onKeyDown={(event) => {
-        onKeyDown?.(event)
-        if (disabled || event.defaultPrevented) {
-          return
-        }
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault()
-          event.currentTarget.click()
-        }
-      }}
+      className={clsx('card', className)}
       data-size={size}
-      data-disabled={PropsUtil.dataAttributes.bool(disabled)}
-      role={onClick ? 'button' : undefined}
-      tabIndex={onClick && !disabled ? 0 : undefined}
-    >
-      <div className="card-header">
-        <CardHeaderContent
-          title={title}
-          description={description}
-          leading={leading}
-          trailing={trailing}
-        />
-      </div>
-      {children}
-    </div>
+    />
   )
-})
-
-
-export type NavigationCardLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
-  href: string,
-}
-
-const DefaultNavigationCardLink: ElementType<NavigationCardLinkProps> = 'a'
-
-//
-// NavigationCard
-//
-
-export type NavigationCardProps = Omit<HTMLAttributes<HTMLAnchorElement>, 'title'> & {
-  title: ReactNode,
-  description?: ReactNode,
-  size?: CardSize,
-  leading?: ReactNode,
-  href: string,
-  isExternal?: boolean,
-  LinkComponent?: ElementType<NavigationCardLinkProps>,
 }
-
-export const NavigationCard = forwardRef<HTMLAnchorElement, NavigationCardProps>(function NavigationCard({
-  title,
-  description,
-  size = 'md',
-  leading,
-  href,
-  isExternal = false,
-  LinkComponent = DefaultNavigationCardLink,
-  children,
-  className,
-  ...props
-}, ref) {
-  const generatedId = useId()
-  const descriptionId = `navigation-card-description-${generatedId}`
-  const titleId = `navigation-card-title-${generatedId}`
-
-  return (
-    <LinkComponent
-      {...props}
-      ref={ref}
-      href={href}
-      target={isExternal ? '_blank' : undefined}
-      rel={isExternal ? 'noopener noreferrer' : undefined}
-
-      data-size={size}
-      data-external={PropsUtil.dataAttributes.bool(isExternal)}
-
-      aria-labelledby={titleId}
-      aria-describedby={description ? descriptionId : undefined}
-
-      className={clsx('card group/card navigation-card', className)}
-    >
-      <div className="card-header">
-        <CardHeaderContent
-          title={title}
-          titleId={titleId}
-          description={description}
-          descriptionId={description ? descriptionId : undefined}
-          leading={leading}
-        />
-        <span className="navigation-card-action">
-          {isExternal ? (
-            <ExternalLink className="navigation-card-action-icon" aria-hidden="true" />
-          ) : (
-            <ChevronRight className="navigation-card-action-icon" aria-hidden="true" />
-          )}
-        </span>
-      </div>
-      {children}
-    </LinkComponent>
-  )
-})
diff --git a/packages/hightide-web/src/components/index.ts b/packages/hightide-web/src/components/index.ts
index 1b3be0c3..69827bb7 100644
--- a/packages/hightide-web/src/components/index.ts
+++ b/packages/hightide-web/src/components/index.ts
@@ -3,5 +3,6 @@ export * from './chat'
 export * from './display-and-visualization'
 export * from './form'
 export * from './layout'
+export * from './list'
 export * from './user-interaction'
 export * from './utils'
diff --git a/packages/hightide-web/src/components/layout/Divider.tsx b/packages/hightide-web/src/components/layout/Divider.tsx
new file mode 100644
index 00000000..4157cd0a
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Divider.tsx
@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+export type DividerDirection = 'horizontal' | 'vertical'
+
+export type DividerProps = HTMLAttributes<HTMLDivElement> & {
+  direction?: DividerDirection,
+}
+
+export function Divider({
+  direction = 'horizontal',
+  className,
+  ...props
+}: DividerProps) {
+  return (
+    <div
+      {...props}
+      role="separator"
+      className={clsx('divider', className)}
+      data-direction={direction}
+    />
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/index.ts b/packages/hightide-web/src/components/layout/index.ts
index efb7d5e6..15e8c74d 100644
--- a/packages/hightide-web/src/components/layout/index.ts
+++ b/packages/hightide-web/src/components/layout/index.ts
@@ -1,5 +1,6 @@
 export * from './AnchoredFloatingContainer'
 export * from './Carousel'
+export * from './Divider'
 export * from './DividerInserter'
 export * from './Expandable'
 export * from './FAQSection'
diff --git a/packages/hightide-web/src/components/list/ListActionItem.tsx b/packages/hightide-web/src/components/list/ListActionItem.tsx
new file mode 100644
index 00000000..ec7af11d
--- /dev/null
+++ b/packages/hightide-web/src/components/list/ListActionItem.tsx
@@ -0,0 +1,45 @@
+import type { ButtonHTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+import { PropsUtil } from '../../utils/propsUtil'
+import { ListItemContent } from './ListItemContent'
+import type { ListItemColor, ListItemContentOrder, ListItemContentProps } from './ListItemTypes'
+
+export type ListActionItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title' | 'content' | 'color'> & Omit<ListItemContentProps, 'contentOrder'> & {
+  contentOrder?: ListItemContentOrder,
+  color?: ListItemColor,
+}
+
+export function ListActionItem({
+  title,
+  subtitle,
+  content,
+  contentOrder = 'titleFirst',
+  leading,
+  trailing,
+  color,
+  disabled = false,
+  className,
+  type,
+  ...props
+}: ListActionItemProps) {
+  return (
+    <button
+      {...props}
+      type={type ?? 'button'}
+      disabled={disabled}
+      className={clsx('list-action-item', color, color && 'coloring-tonal-hover', className)}
+      data-color={color}
+      data-disabled={PropsUtil.dataAttributes.bool(disabled)}
+    >
+      <ListItemContent
+        title={title}
+        subtitle={subtitle}
+        content={content}
+        contentOrder={contentOrder}
+        leading={leading}
+        trailing={trailing}
+      />
+    </button>
+  )
+}
diff --git a/packages/hightide-web/src/components/list/ListItem.tsx b/packages/hightide-web/src/components/list/ListItem.tsx
new file mode 100644
index 00000000..2dbe1262
--- /dev/null
+++ b/packages/hightide-web/src/components/list/ListItem.tsx
@@ -0,0 +1,39 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+import { ListItemContent } from './ListItemContent'
+import type { ListItemColor, ListItemContentOrder, ListItemContentProps } from './ListItemTypes'
+
+export type ListItemProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content' | 'color'> & Omit<ListItemContentProps, 'contentOrder'> & {
+  contentOrder?: ListItemContentOrder,
+  color?: ListItemColor,
+}
+
+export function ListItem({
+  title,
+  subtitle,
+  content,
+  contentOrder = 'subtitleFirst',
+  leading,
+  trailing,
+  color,
+  className,
+  ...props
+}: ListItemProps) {
+  return (
+    <div
+      {...props}
+      className={clsx('list-item', color, color && 'coloring-tonal', className)}
+      data-color={color}
+    >
+      <ListItemContent
+        title={title}
+        subtitle={subtitle}
+        content={content}
+        contentOrder={contentOrder}
+        leading={leading}
+        trailing={trailing}
+      />
+    </div>
+  )
+}
diff --git a/packages/hightide-web/src/components/list/ListItemContent.tsx b/packages/hightide-web/src/components/list/ListItemContent.tsx
new file mode 100644
index 00000000..8aeba24e
--- /dev/null
+++ b/packages/hightide-web/src/components/list/ListItemContent.tsx
@@ -0,0 +1,36 @@
+import type { ListItemContentProps } from './ListItemTypes'
+
+export function ListItemContent({
+  title,
+  subtitle,
+  content,
+  contentOrder = 'titleFirst',
+  leading,
+  trailing,
+}: ListItemContentProps) {
+  const titleNode = title != null
+    ? <span className="list-item-title">{title}</span>
+    : null
+  const subtitleNode = subtitle != null
+    ? <span className="list-item-subtitle">{subtitle}</span>
+    : null
+  const text = content != null
+    ? content
+    : contentOrder === 'subtitleFirst'
+      ? <>{subtitleNode}{titleNode}</>
+      : <>{titleNode}{subtitleNode}</>
+
+  return (
+    <>
+      {leading != null && (
+        <span className="list-item-leading">{leading}</span>
+      )}
+      <span className="list-item-content">
+        {text}
+      </span>
+      {trailing != null && (
+        <span className="list-item-trailing">{trailing}</span>
+      )}
+    </>
+  )
+}
diff --git a/packages/hightide-web/src/components/list/ListItemTypes.ts b/packages/hightide-web/src/components/list/ListItemTypes.ts
new file mode 100644
index 00000000..c3ed2106
--- /dev/null
+++ b/packages/hightide-web/src/components/list/ListItemTypes.ts
@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+
+export type ListItemColor = 'primary' | 'secondary' | 'positive' | 'warning' | 'negative' | 'neutral'
+
+export type ListItemContentOrder = 'titleFirst' | 'subtitleFirst'
+
+export type ListItemContentProps = {
+  title?: ReactNode,
+  subtitle?: ReactNode,
+  content?: ReactNode,
+  contentOrder?: ListItemContentOrder,
+  leading?: ReactNode,
+  trailing?: ReactNode,
+}
diff --git a/packages/hightide-web/src/components/list/ListNavigationItem.tsx b/packages/hightide-web/src/components/list/ListNavigationItem.tsx
new file mode 100644
index 00000000..15bf82fd
--- /dev/null
+++ b/packages/hightide-web/src/components/list/ListNavigationItem.tsx
@@ -0,0 +1,123 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, MouseEvent, ReactNode } from 'react'
+import clsx from 'clsx'
+import { ChevronRight, ExternalLink } from 'lucide-react'
+
+import { PropsUtil } from '../../utils/propsUtil'
+import { ListItemContent } from './ListItemContent'
+import type { ListItemColor, ListItemContentOrder } from './ListItemTypes'
+
+export type ListNavigationLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  href: string,
+}
+
+const DefaultListNavigationLink: ElementType<ListNavigationLinkProps> = 'a'
+
+type ListNavigationContentProps = {
+  title?: ReactNode,
+  subtitle?: ReactNode,
+  content?: ReactNode,
+  contentOrder?: ListItemContentOrder,
+  leading?: ReactNode,
+  isExternal?: boolean,
+}
+
+function ListNavigationContent({
+  title,
+  subtitle,
+  content,
+  contentOrder = 'titleFirst',
+  leading,
+  isExternal = false,
+}: ListNavigationContentProps) {
+  const Icon = isExternal ? ExternalLink : ChevronRight
+
+  return (
+    <ListItemContent
+      title={title}
+      subtitle={subtitle}
+      content={content}
+      contentOrder={contentOrder}
+      leading={leading}
+      trailing={<Icon className="list-navigation-item-icon" aria-hidden="true" />}
+    />
+  )
+}
+
+type ListNavigationSharedProps = ListNavigationContentProps & {
+  color?: ListItemColor,
+  disabled?: boolean,
+  className?: string,
+}
+
+export type ListNavigationItemProps = ListNavigationSharedProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'content' | 'color' | 'onClick'> & {
+  href?: string,
+  onClick?: (event: MouseEvent<HTMLElement>) => void,
+  LinkComponent?: ElementType<ListNavigationLinkProps>,
+}
+
+export function ListNavigationItem({
+  title,
+  subtitle,
+  content,
+  contentOrder = 'titleFirst',
+  leading,
+  isExternal = false,
+  color,
+  disabled = false,
+  className,
+  href,
+  LinkComponent = DefaultListNavigationLink,
+  onClick,
+  ...props
+}: ListNavigationItemProps) {
+  const itemClassName = clsx('list-navigation-item', color, color && 'coloring-tonal-hover', className)
+  const body = (
+    <ListNavigationContent
+      title={title}
+      subtitle={subtitle}
+      content={content}
+      contentOrder={contentOrder}
+      leading={leading}
+      isExternal={isExternal}
+    />
+  )
+
+  if (href) {
+    return (
+      <LinkComponent
+        {...props}
+        href={href}
+        target={isExternal ? '_blank' : undefined}
+        rel={isExternal ? 'noopener noreferrer' : undefined}
+        aria-disabled={disabled || undefined}
+        className={itemClassName}
+        data-color={color}
+        data-disabled={PropsUtil.dataAttributes.bool(disabled)}
+        data-external={PropsUtil.dataAttributes.bool(isExternal)}
+        onClick={(event) => {
+          if (disabled) {
+            event.preventDefault()
+            return
+          }
+          onClick?.(event)
+        }}
+      >
+        {body}
+      </LinkComponent>
+    )
+  }
+
+  return (
+    <button
+      {...(props as unknown as ButtonHTMLAttributes<HTMLButtonElement>)}
+      type="button"
+      disabled={disabled}
+      className={itemClassName}
+      data-color={color}
+      data-disabled={PropsUtil.dataAttributes.bool(disabled)}
+      onClick={(event) => onClick?.(event)}
+    >
+      {body}
+    </button>
+  )
+}
diff --git a/packages/hightide-web/src/components/list/index.ts b/packages/hightide-web/src/components/list/index.ts
new file mode 100644
index 00000000..4005bfaa
--- /dev/null
+++ b/packages/hightide-web/src/components/list/index.ts
@@ -0,0 +1,7 @@
+export { ListActionItem } from './ListActionItem'
+export type { ListActionItemProps } from './ListActionItem'
+export { ListItem } from './ListItem'
+export type { ListItemProps } from './ListItem'
+export { ListNavigationItem } from './ListNavigationItem'
+export type { ListNavigationItemProps, ListNavigationLinkProps } from './ListNavigationItem'
+export type { ListItemColor, ListItemContentOrder } from './ListItemTypes'
diff --git a/packages/hightide-web/src/style/theme/components/card.css b/packages/hightide-web/src/style/theme/components/card.css
index e9ded621..ec4818b5 100644
--- a/packages/hightide-web/src/style/theme/components/card.css
+++ b/packages/hightide-web/src/style/theme/components/card.css
@@ -1,90 +1,17 @@
 @layer components {
   .card {
-    @apply flex-col-0 w-full min-w-0 shadow-md surface coloring-solid justify-center;
-    @apply gap-y-2;
+    @apply flex-col-0 w-full min-w-0 overflow-hidden surface coloring-solid shadow-md;
 
     &[data-size="sm"] {
-      @apply px-3 py-2 rounded-md min-h-16;
+      @apply px-3 py-2 rounded-lg min-h-16;
     }
 
     &[data-size="md"] {
-      @apply px-4 py-3 gap-y-3 rounded-md min-h-20;
+      @apply px-4 py-3 rounded-lg min-h-20;
     }
 
     &[data-size="lg"] {
-      @apply px-8 py-6 gap-y-4 rounded-lg min-h-24;
+      @apply px-8 py-6 rounded-xl min-h-24;
     }
   }
-
-  .card-header {
-    @apply flex flex-row items-center w-full min-w-0 gap-x-4;
-  }
-
-  .card-content {
-    @apply flex-col-1.5 min-w-0 flex-1;
-  }
-
-  .card-leading,
-  .card-trailing {
-    @apply flex-col-0 items-center justify-center shrink-0 self-center text-description;
-  }
-
-  .card-title {
-    @apply min-w-0;
-    @apply typography-title-md;
-  }
-
-  .card-description {
-    @apply text-description;
-
-    @apply typography-body-md;
-  }
-
-  .action-card {
-    @apply surface coloring-solid-hover;
-    @apply focus-style-outline;
-
-    transition: var(--coloring-transitions), var(--focus-transitions);
-
-    &:has(:focus-visible) {
-      @apply focus-style-apply shadow-lg;
-    }
-
-    &:not([data-disabled]) {
-      @apply cursor-pointer;
-
-      &:hover {
-        @apply shadow-lg;
-      }
-    }
-
-    &[data-disabled] {
-      @apply cursor-not-allowed;
-    }
-  }
-
-  .navigation-card {
-    @apply surface coloring-solid-hover;
-    @apply focus-style-outline;
-    @apply hover:cursor-pointer outline-none;
-    transition: var(--coloring-transitions), var(--focus-transitions);
-
-    &:hover {
-      @apply shadow-lg;
-    }
-
-    &:focus-visible {
-      @apply focus-style-apply shadow-lg;
-    }
-  }
-
-  .navigation-card-action {
-    @apply flex-col-0 items-center justify-center shrink-0 text-description transition-all rounded focus-visible:outline-none;
-    @apply group-hover/card:translate-x-1;
-    @apply group-hover/card:text-on-surface focus-visible:text-on-surface;
-  }
-
-  .navigation-card-action-icon {
-    @apply size-force-5;
-  }
 }
diff --git a/packages/hightide-web/src/style/theme/components/divider.css b/packages/hightide-web/src/style/theme/components/divider.css
new file mode 100644
index 00000000..7ec4aa7e
--- /dev/null
+++ b/packages/hightide-web/src/style/theme/components/divider.css
@@ -0,0 +1,13 @@
+@layer components {
+  .divider {
+    @apply shrink-0 bg-divider;
+
+    &[data-direction="horizontal"] {
+      @apply h-px w-full;
+    }
+
+    &[data-direction="vertical"] {
+      @apply w-px self-stretch;
+    }
+  }
+}
diff --git a/packages/hightide-web/src/style/theme/components/index.css b/packages/hightide-web/src/style/theme/components/index.css
index b884a77d..440418bc 100644
--- a/packages/hightide-web/src/style/theme/components/index.css
+++ b/packages/hightide-web/src/style/theme/components/index.css
@@ -3,6 +3,8 @@
 @import "./tooltip.css";
 @import "./icon-button.css";
 @import "./card.css";
+@import "./list-item.css";
+@import "./divider.css";
 @import "./chip.css";
 @import "./input-elements.css";
 @import "./toggleable-intput.css";
diff --git a/packages/hightide-web/src/style/theme/components/list-item.css b/packages/hightide-web/src/style/theme/components/list-item.css
new file mode 100644
index 00000000..5b258ee4
--- /dev/null
+++ b/packages/hightide-web/src/style/theme/components/list-item.css
@@ -0,0 +1,58 @@
+@layer components {
+  .list-item,
+  .list-action-item,
+  .list-navigation-item {
+    @apply flex-row-0 items-center w-full min-w-0 min-h-12 px-4 py-3 text-left text-on-surface;
+  }
+
+  .list-item-leading {
+    @apply flex-row-0 items-center justify-center shrink-0 me-4 text-description;
+  }
+
+  .list-item-content {
+    @apply flex-col-1 min-w-0 flex-1;
+  }
+
+  .list-item-trailing {
+    @apply flex-row-0 items-center justify-center shrink-0 ms-6 text-description;
+  }
+
+  .list-item-title {
+    @apply typography-body-md min-w-0;
+  }
+
+  .list-item-subtitle {
+    @apply typography-caption-sm min-w-0 text-description;
+  }
+
+  .list-action-item,
+  .list-navigation-item {
+    @apply cursor-pointer bg-transparent outline-none focus-style-outline;
+    transition: var(--coloring-transitions), var(--focus-transitions);
+
+    &:hover:not(:disabled):not([data-disabled]) {
+      @apply bg-surface-hover;
+    }
+
+    &:active:not(:disabled):not([data-disabled]) {
+      @apply bg-surface-hover;
+    }
+
+    &:focus-visible {
+      @apply focus-style-apply;
+    }
+
+    &:disabled,
+    &[data-disabled] {
+      @apply cursor-not-allowed opacity-50;
+    }
+
+    &[data-color] {
+      @apply coloring-tonal-hover;
+    }
+  }
+
+  .list-navigation-item-icon {
+    @apply size-force-5;
+  }
+}
diff --git a/packages/hightide-web/stories/Display And Visualization/Card/ActionCard.stories.tsx b/packages/hightide-web/stories/Display And Visualization/Card/ActionCard.stories.tsx
deleted file mode 100644
index bfce64ea..00000000
--- a/packages/hightide-web/stories/Display And Visualization/Card/ActionCard.stories.tsx	
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { BadgeCheck, ChevronRight } from 'lucide-react'
-import { ActionCard } from '../../../src/components/display-and-visualization/Card'
-import { action } from 'storybook/actions'
-
-const meta: Meta<typeof ActionCard> = {
-  component: ActionCard,
-}
-
-export default meta
-type Story = StoryObj<typeof meta>;
-
-export const actionCard: Story = {
-  args: {
-    title: 'Action card title',
-    description: 'Click to trigger an action.',
-    size: 'md',
-    disabled: false,
-    leading: <BadgeCheck className="size-force-6" />,
-    trailing: <ChevronRight className="size-force-6" />,
-    onClick: action('onClick'),
-  },
-}
diff --git a/packages/hightide-web/stories/Display And Visualization/Card/Card.stories.tsx b/packages/hightide-web/stories/Display And Visualization/Card/Card.stories.tsx
index ef8e6eda..ca3477f2 100644
--- a/packages/hightide-web/stories/Display And Visualization/Card/Card.stories.tsx	
+++ b/packages/hightide-web/stories/Display And Visualization/Card/Card.stories.tsx	
@@ -1,20 +1,96 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { BadgeCheck } from 'lucide-react'
+import { action } from 'storybook/actions'
+import { Bell, Building2, LogOut, UserRound } from 'lucide-react'
 import { Card } from '../../../src/components/display-and-visualization/Card'
+import { Divider } from '../../../src/components/layout/Divider'
+import { ListActionItem } from '../../../src/components/list/ListActionItem'
+import { ListItem } from '../../../src/components/list/ListItem'
+import { ListNavigationItem } from '../../../src/components/list/ListNavigationItem'
+import { Switch } from '../../../src/components/user-interaction/Switch'
 
 const meta: Meta<typeof Card> = {
   component: Card,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
 }
 
 export default meta
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 export const card: Story = {
   args: {
-    title: 'Card title',
-    description: 'Optional description for the card.',
     size: 'md',
-    leading: <BadgeCheck className="size-force-6" />,
-    trailing: <BadgeCheck className="size-force-6" />,
+    className: '!p-0',
+    children: (
+      <>
+        <ListItem title="Anna Müller" subtitle="Name" />
+        <Divider />
+        <ListItem title="anna@example.com" subtitle="Email" />
+      </>
+    ),
   },
 }
+
+export const profileStyle: Story = {
+  render: () => (
+    <div className="flex-col-5 w-full max-w-md">
+      <div className="flex-col-2">
+        <span className="typography-caption-sm font-bold uppercase tracking-wide text-description px-1">
+          Personal data
+        </span>
+        <Card className="!p-0">
+          <ListItem title="Anna Müller" subtitle="Name" />
+          <Divider />
+          <ListItem title="12.03.1988" subtitle="Date of birth" />
+          <Divider />
+          <ListItem title="anna@example.com" subtitle="Email" />
+        </Card>
+      </div>
+      <div className="flex-col-2">
+        <span className="typography-caption-sm font-bold uppercase tracking-wide text-description px-1">
+          Practice
+        </span>
+        <Card className="!p-0">
+          <ListItem title="Praxis am Park" subtitle="Practice" />
+          <Divider />
+          <ListNavigationItem
+            title="Practice details"
+            leading={<Building2 className="size-force-5" />}
+            href="#practice-details"
+            onClick={action('practice-details')}
+          />
+        </Card>
+      </div>
+      <div className="flex-col-2">
+        <span className="typography-caption-sm font-bold uppercase tracking-wide text-description px-1">
+          Settings
+        </span>
+        <Card className="!p-0">
+          <ListActionItem
+            title="Notifications"
+            leading={<Bell className="size-force-5" />}
+            trailing={<Switch />}
+          />
+          <Divider />
+          <ListNavigationItem
+            title="Account"
+            leading={<UserRound className="size-force-5" />}
+            href="#account"
+            onClick={action('account')}
+          />
+          <Divider />
+          <ListActionItem
+            title="Log out"
+            color="negative"
+            leading={<LogOut className="size-force-5" />}
+            onClick={action('logout')}
+          />
+        </Card>
+      </div>
+    </div>
+  ),
+}
diff --git a/packages/hightide-web/stories/Display And Visualization/Card/NavigationCard.stories.tsx b/packages/hightide-web/stories/Display And Visualization/Card/NavigationCard.stories.tsx
deleted file mode 100644
index 20506f94..00000000
--- a/packages/hightide-web/stories/Display And Visualization/Card/NavigationCard.stories.tsx	
+++ /dev/null
@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { BadgeCheck } from 'lucide-react'
-import { NavigationCard } from '../../../src/components/display-and-visualization/Card'
-
-const meta: Meta<typeof NavigationCard> = {
-  component: NavigationCard,
-}
-
-export default meta
-type Story = StoryObj<typeof meta>;
-
-export const navigationCard: Story = {
-  args: {
-    title: 'Navigation card title',
-    description: 'Navigate to another page.',
-    href: '#',
-    size: 'md',
-    isExternal: false,
-    leading: <BadgeCheck className="size-force-6" />,
-  },
-}
diff --git a/packages/hightide-web/stories/User Interaction/List/ListActionItem.stories.tsx b/packages/hightide-web/stories/User Interaction/List/ListActionItem.stories.tsx
new file mode 100644
index 00000000..5d6bbbcc
--- /dev/null
+++ b/packages/hightide-web/stories/User Interaction/List/ListActionItem.stories.tsx	
@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { action } from 'storybook/actions'
+import { Bell, ChevronRight } from 'lucide-react'
+import { Card } from '../../../src/components/display-and-visualization/Card'
+import { Divider } from '../../../src/components/layout/Divider'
+import { ListActionItem } from '../../../src/components/list/ListActionItem'
+import type { ListItemColor, ListItemContentOrder } from '../../../src/components/list/ListItemTypes'
+
+const contentOrders = ['titleFirst', 'subtitleFirst'] as const satisfies readonly ListItemContentOrder[]
+const colors = ['default', 'primary', 'secondary', 'positive', 'warning', 'negative', 'neutral'] as const
+
+type StoryArgs = {
+  title: string,
+  subtitle: string,
+  contentOrder: ListItemContentOrder,
+  color: ListItemColor | 'default',
+  disabled: boolean,
+  withLeading: boolean,
+  withTrailing: boolean,
+}
+
+const meta: Meta<StoryArgs> = {
+  component: ListActionItem,
+  argTypes: {
+    contentOrder: {
+      control: 'select',
+      options: contentOrders,
+    },
+    color: {
+      control: 'select',
+      options: colors,
+    },
+    disabled: { control: 'boolean' },
+    withLeading: { control: 'boolean' },
+    withTrailing: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const listActionItem: Story = {
+  args: {
+    title: 'Notifications',
+    subtitle: 'Practice alerts',
+    contentOrder: 'titleFirst',
+    color: 'default',
+    disabled: false,
+    withLeading: true,
+    withTrailing: true,
+  },
+  render: ({ title, subtitle, contentOrder, color, disabled, withLeading, withTrailing }) => {
+    const resolvedColor = color === 'default' ? undefined : color
+    const leading = withLeading ? <Bell className="size-force-5" /> : undefined
+    const trailing = withTrailing ? <ChevronRight className="size-force-5" /> : undefined
+
+    return (
+      <Card className="max-w-md !p-0">
+        <ListActionItem
+          title={title}
+          subtitle={subtitle}
+          contentOrder={contentOrder}
+          color={resolvedColor}
+          disabled={disabled}
+          leading={leading}
+          trailing={trailing}
+          onClick={action('onClick')}
+        />
+        <Divider />
+        <ListActionItem
+          title={title}
+          subtitle={subtitle}
+          contentOrder={contentOrder}
+          color={resolvedColor}
+          disabled={disabled}
+          leading={leading}
+          trailing={trailing}
+          onClick={action('onClick')}
+        />
+      </Card>
+    )
+  },
+}
diff --git a/packages/hightide-web/stories/User Interaction/List/ListItem.stories.tsx b/packages/hightide-web/stories/User Interaction/List/ListItem.stories.tsx
new file mode 100644
index 00000000..8868ba2d
--- /dev/null
+++ b/packages/hightide-web/stories/User Interaction/List/ListItem.stories.tsx	
@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Bell, ChevronRight } from 'lucide-react'
+import { Card } from '../../../src/components/display-and-visualization/Card'
+import { Divider } from '../../../src/components/layout/Divider'
+import { ListItem } from '../../../src/components/list/ListItem'
+import type { ListItemContentOrder } from '../../../src/components/list/ListItemTypes'
+
+const contentOrders = ['titleFirst', 'subtitleFirst'] as const satisfies readonly ListItemContentOrder[]
+
+type StoryArgs = {
+  title: string,
+  subtitle: string,
+  contentOrder: ListItemContentOrder,
+  withLeading: boolean,
+  withTrailing: boolean,
+}
+
+const meta: Meta<StoryArgs> = {
+  component: ListItem,
+  argTypes: {
+    contentOrder: {
+      control: 'select',
+      options: contentOrders,
+    },
+    withLeading: { control: 'boolean' },
+    withTrailing: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const listItem: Story = {
+  args: {
+    title: 'Anna Müller',
+    subtitle: 'Name',
+    contentOrder: 'subtitleFirst',
+    withLeading: false,
+    withTrailing: false,
+  },
+  render: ({ title, subtitle, contentOrder, withLeading, withTrailing }) => {
+    const leading = withLeading ? <Bell className="size-force-5" /> : undefined
+    const trailing = withTrailing ? <ChevronRight className="size-force-5" /> : undefined
+
+    return (
+      <Card className="max-w-md !p-0">
+        <ListItem title={title} subtitle={subtitle} contentOrder={contentOrder} leading={leading} trailing={trailing} />
+        <Divider />
+        <ListItem title={title} subtitle={subtitle} contentOrder={contentOrder} leading={leading} trailing={trailing} />
+        <Divider />
+        <ListItem title={title} subtitle={subtitle} contentOrder={contentOrder} leading={leading} trailing={trailing} />
+      </Card>
+    )
+  },
+}
diff --git a/packages/hightide-web/stories/User Interaction/List/ListNavigationItem.stories.tsx b/packages/hightide-web/stories/User Interaction/List/ListNavigationItem.stories.tsx
new file mode 100644
index 00000000..cbcb5ead
--- /dev/null
+++ b/packages/hightide-web/stories/User Interaction/List/ListNavigationItem.stories.tsx	
@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { action } from 'storybook/actions'
+import { UserRound } from 'lucide-react'
+import { Card } from '../../../src/components/display-and-visualization/Card'
+import { Divider } from '../../../src/components/layout/Divider'
+import { ListNavigationItem } from '../../../src/components/list/ListNavigationItem'
+import type { ListItemColor, ListItemContentOrder } from '../../../src/components/list/ListItemTypes'
+
+const contentOrders = ['titleFirst', 'subtitleFirst'] as const satisfies readonly ListItemContentOrder[]
+const colors = ['default', 'primary', 'secondary', 'positive', 'warning', 'negative', 'neutral'] as const
+
+type StoryArgs = {
+  title: string,
+  subtitle: string,
+  contentOrder: ListItemContentOrder,
+  color: ListItemColor | 'default',
+  disabled: boolean,
+  withLeading: boolean,
+  isExternal: boolean,
+}
+
+const meta: Meta<StoryArgs> = {
+  component: ListNavigationItem,
+  argTypes: {
+    contentOrder: {
+      control: 'select',
+      options: contentOrders,
+    },
+    color: {
+      control: 'select',
+      options: colors,
+    },
+    disabled: { control: 'boolean' },
+    withLeading: { control: 'boolean' },
+    isExternal: { control: 'boolean' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const listNavigationItem: Story = {
+  args: {
+    title: 'Account',
+    subtitle: 'Profile and sign-in',
+    contentOrder: 'titleFirst',
+    color: 'default',
+    disabled: false,
+    withLeading: true,
+    isExternal: false,
+  },
+  render: ({ title, subtitle, contentOrder, color, disabled, withLeading, isExternal }) => {
+    const resolvedColor = color === 'default' ? undefined : color
+    const leading = withLeading ? <UserRound className="size-force-5" /> : undefined
+
+    return (
+      <Card className="max-w-md !p-0">
+        <ListNavigationItem
+          title={title}
+          subtitle={subtitle}
+          contentOrder={contentOrder}
+          color={resolvedColor}
+          disabled={disabled}
+          isExternal={isExternal}
+          leading={leading}
+          href="#account"
+          onClick={action('onClick')}
+        />
+        <Divider />
+        <ListNavigationItem
+          title={title}
+          subtitle={subtitle}
+          contentOrder={contentOrder}
+          color={resolvedColor}
+          disabled={disabled}
+          isExternal={isExternal}
+          leading={leading}
+          href="#account"
+          onClick={action('onClick')}
+        />
+      </Card>
+    )
+  },
+}

From e23f0d608476e82e96f45bbdbc4539691aa5403b Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Mon, 28 Sep 2026 23:03:24 +0200
Subject: [PATCH 05/25] chore: update button and introduce pressable

---
 .../process-model/ProcessModelTraceReplay.tsx |   4 +-
 .../src/components/layout/InifiniteScroll.tsx |  10 +-
 .../layout/navigation/StepperBar.tsx          |   9 +-
 .../layout/table/TableColumnSwitcher.tsx      |   4 +-
 .../components/user-interaction/Button.tsx    |  96 +++--------
 .../FileInput/FileInputMenu.tsx               |   2 +-
 .../components/user-interaction/Pressable.tsx |  65 +++++++
 .../user-interaction/data/FilterList.tsx      | 135 ++++++++-------
 .../user-interaction/data/SortingList.tsx     | 163 ++++++++++--------
 .../user-interaction/date/DatePicker.tsx      |   2 +-
 .../src/style/theme/components/button.css     |  51 +++---
 .../src/style/theme/components/index.css      |   1 +
 .../src/style/theme/components/pressable.css  |  57 ++++++
 .../User Interaction/Button.stories.tsx       |  15 +-
 .../User Interaction/Pressable.stories.tsx    |  42 +++++
 15 files changed, 401 insertions(+), 255 deletions(-)
 create mode 100644 packages/hightide-web/src/components/user-interaction/Pressable.tsx
 create mode 100644 packages/hightide-web/src/style/theme/components/pressable.css
 create mode 100644 packages/hightide-web/stories/User Interaction/Pressable.stories.tsx

diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
index b0bd7686..7609f743 100644
--- a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
@@ -283,16 +283,16 @@ export const ProcessModelTraceReplay = ({ graph, className }: ProcessModelTraceR
               void startPlayback()
             }
           }}
+          leading={isPlaying ? <Pause /> : <Play />}
         >
-          {isPlaying ? <Pause /> : <Play />}
           {isPlaying ? translation('pauseTrace') : translation('playTrace')}
         </Button>
         <Button
           color="primary"
           coloringStyle="outline"
           onClick={resetReplay}
+          leading={<RotateCcw />}
         >
-          <RotateCcw />
           {translation('reset')}
         </Button>
         <div className="process-model-trace-replay-speed">
diff --git a/packages/hightide-web/src/components/layout/InifiniteScroll.tsx b/packages/hightide-web/src/components/layout/InifiniteScroll.tsx
index f6238357..4086e4d0 100644
--- a/packages/hightide-web/src/components/layout/InifiniteScroll.tsx
+++ b/packages/hightide-web/src/components/layout/InifiniteScroll.tsx
@@ -11,7 +11,7 @@ import {
 } from 'react'
 import clsx from 'clsx'
 import { range } from '@helpwave/hightide-utils/utils'
-import { Button } from '../user-interaction/Button'
+import { Pressable } from '../user-interaction/Pressable'
 import { ChevronDown, ChevronUp } from 'lucide-react'
 import { Visibility } from './Visibility'
 
@@ -123,15 +123,15 @@ export function InfiniteScroll({
       style={style}
     >
       <Visibility isVisible={windowState.start > 0}>
-        <Button color="neutral" onClick={() => addToStart()}>
+        <Pressable color="neutral" onClick={() => addToStart()}>
           <ChevronUp/>
-        </Button>
+        </Pressable>
       </Visibility>
       {visibleItems.map((index) => children(index))}
       <Visibility isVisible={windowState.end < itemCount - 1}>
-        <Button color="neutral" onClick={() => addToEnd()}>
+        <Pressable color="neutral" onClick={() => addToEnd()}>
           <ChevronDown/>
-        </Button>
+        </Pressable>
       </Visibility>
     </div>
   )
diff --git a/packages/hightide-web/src/components/layout/navigation/StepperBar.tsx b/packages/hightide-web/src/components/layout/navigation/StepperBar.tsx
index e86fa647..188b7ee6 100644
--- a/packages/hightide-web/src/components/layout/navigation/StepperBar.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/StepperBar.tsx
@@ -65,9 +65,8 @@ export const StepperBar = ({
           onClick={() => {
             update(currentStep - 1)
           }}
-          className="flex-row-1 items-center justify-center"
+          leading={<ChevronLeft size={14}/>}
         >
-          <ChevronLeft size={14}/>
           {translation('back')}
         </Button>
       </div>
@@ -95,11 +94,10 @@ export const StepperBar = ({
         <div className="flex-row-2 flex-[2] justify-end">
           <Button
             onClick={() => update(currentStep + 1)}
-            className="flex-row-1 items-center justify-center"
             disabled={disabledSteps.has(currentStep)}
+            trailing={<ChevronRight size={14}/>}
           >
             {translation('next')}
-            <ChevronRight size={14}/>
           </Button>
         </div>
       )}
@@ -108,9 +106,8 @@ export const StepperBar = ({
           <Button
             disabled={disabledSteps.has(currentStep)}
             onClick={onFinish}
-            className="flex-row-1 items-center justify-center"
+            leading={<Check size={14}/>}
           >
-            <Check size={14}/>
             {finishText ?? translation('confirm')}
           </Button>
         </div>
diff --git a/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx b/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx
index 1f9ec0d0..6eeac04e 100644
--- a/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx
+++ b/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx
@@ -1,12 +1,12 @@
 import { useMemo, useRef, useId } from 'react'
 import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Eye, EyeOff, Pin, PinOff, Columns3Cog } from 'lucide-react'
-import type { ButtonProps } from '../../user-interaction/Button'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import type { PopUpProps } from '../popup/PopUp'
 import { PopUp } from '../popup/PopUp'
 import { PopUpRoot } from '../popup/PopUpRoot'
 import { PopUpOpener } from '../popup/PopUpOpener'
 import { useTableStateWithoutSizingContext } from './TableContext'
+import type { IconButtonProps } from '../../user-interaction/IconButton'
 import { IconButton } from '../../user-interaction/IconButton'
 import { Visibility } from '../Visibility'
 
@@ -335,7 +335,7 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
 }
 
 export interface TableColumnSwitcherProps extends TableColumnSwitcherPopUpProps {
-  buttonProps?: ButtonProps,
+  buttonProps?: Partial<Omit<IconButtonProps, 'children'>>,
 }
 
 export const TableColumnSwitcher = ({ buttonProps, ...props }: TableColumnSwitcherProps) => {
diff --git a/packages/hightide-web/src/components/user-interaction/Button.tsx b/packages/hightide-web/src/components/user-interaction/Button.tsx
index faa44337..543db62f 100644
--- a/packages/hightide-web/src/components/user-interaction/Button.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Button.tsx
@@ -1,82 +1,40 @@
 import clsx from 'clsx'
-import type { ButtonHTMLAttributes } from 'react'
+import type { ReactNode } from 'react'
 import { forwardRef } from 'react'
-import { LoadingSpinner } from '../layout/loading/LoadingSpinner'
-
-/**
- * The different sizes for a button
- */
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | null
-
-type ButtonColoringStyle = 'outline' | 'solid' | 'text' | 'tonal' | 'tonal-outline' | null
-
-const buttonColorsList = ['primary', 'secondary', 'positive', 'warning', 'negative', 'neutral'] as const
-
-/**
- * The allowed colors for the Button
- */
-export type ButtonColor = typeof buttonColorsList[number] | null
-
-export const ButtonUtil = {
-  colors: buttonColorsList,
+import type { PressableProps } from './Pressable'
+import { Pressable } from './Pressable'
+
+export {
+  ButtonUtil,
+  Pressable,
+  type ButtonColor,
+  type ButtonColoringStyle,
+  type ButtonSize,
+  type PressableProps,
+} from './Pressable'
+
+export type ButtonProps = Omit<PressableProps, 'children'> & {
+  children: string,
+  leading?: ReactNode,
+  trailing?: ReactNode,
 }
 
-/**
- * The shard properties between all button types
- */
-export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  /**
-   * @default 'medium'
-   */
-  size?: ButtonSize,
-  color?: ButtonColor,
-  /**
-   * @default 'solid'
-   */
-  coloringStyle?: ButtonColoringStyle,
-  allowClickEventPropagation?: boolean,
-  isProcessing?: boolean,
-}
-
-/**
- * A button with a solid background and different sizes
- */
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function SolidButton({
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({
   children,
-  size = 'md',
-  color = 'primary',
-  coloringStyle = 'solid',
-  disabled,
-  isProcessing = false,
+  leading,
+  trailing,
+  className,
   ...props
 }, ref) {
   return (
-    <button
+    <Pressable
       {...props}
       ref={ref}
-      disabled={disabled}
-      aria-busy={isProcessing || undefined}
-      type={props['type'] ?? 'button'}
-
-      onClick={event => {
-        if (isProcessing) {
-          return
-        }
-        props.onClick?.(event)
-      }}
-
-      className={clsx('button', props.className)}
-      data-disabled={disabled ? '': undefined}
-      data-processing={isProcessing ? '': undefined}
-      data-size={size ?? undefined}
-      data-color={color ?? undefined}
-      data-coloringstyle={coloringStyle ?? undefined}>
+      className={clsx('button', className)}
+    >
+      {leading}
       {children}
-      {isProcessing && (
-        <span className="button-processing-overlay">
-          <LoadingSpinner />
-        </span>
-      )}
-    </button>
+      {trailing}
+    </Pressable>
   )
 })
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
index 3f4787d5..26c604ed 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
+++ b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
@@ -107,8 +107,8 @@ export const FileInputMenu = ({
           coloringStyle="tonal"
           disabled={!context.canAddFiles}
           onClick={() => context.requestAddFiles()}
+          leading={<Plus />}
         >
-          <Plus />
           {translation('addFile')}
         </Button>
       )}
diff --git a/packages/hightide-web/src/components/user-interaction/Pressable.tsx b/packages/hightide-web/src/components/user-interaction/Pressable.tsx
new file mode 100644
index 00000000..b56e6f82
--- /dev/null
+++ b/packages/hightide-web/src/components/user-interaction/Pressable.tsx
@@ -0,0 +1,65 @@
+import clsx from 'clsx'
+import type { ButtonHTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import { LoadingSpinner } from '../layout/loading/LoadingSpinner'
+
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | null
+
+export type ButtonColoringStyle = 'outline' | 'solid' | 'text' | 'tonal' | 'tonal-outline' | null
+
+const buttonColorsList = ['primary', 'secondary', 'positive', 'warning', 'negative', 'neutral'] as const
+
+export type ButtonColor = typeof buttonColorsList[number] | null
+
+export const ButtonUtil = {
+  colors: buttonColorsList,
+}
+
+export type PressableProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  size?: ButtonSize,
+  color?: ButtonColor,
+  coloringStyle?: ButtonColoringStyle,
+  isProcessing?: boolean,
+}
+
+export const Pressable = forwardRef<HTMLButtonElement, PressableProps>(function Pressable({
+  children,
+  size = 'md',
+  color = 'primary',
+  coloringStyle = 'solid',
+  disabled,
+  isProcessing = false,
+  className,
+  type,
+  onClick,
+  ...props
+}, ref) {
+  return (
+    <button
+      {...props}
+      ref={ref}
+      disabled={disabled}
+      aria-busy={isProcessing || undefined}
+      type={type ?? 'button'}
+      onClick={event => {
+        if (isProcessing) {
+          return
+        }
+        onClick?.(event)
+      }}
+      className={clsx('pressable', className)}
+      data-disabled={disabled ? '' : undefined}
+      data-processing={isProcessing ? '' : undefined}
+      data-size={size ?? undefined}
+      data-color={color ?? undefined}
+      data-coloringstyle={coloringStyle ?? undefined}
+    >
+      {children}
+      {isProcessing && (
+        <span className="pressable-processing-overlay">
+          <LoadingSpinner />
+        </span>
+      )}
+    </button>
+  )
+})
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx b/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx
index 7f627f95..08d40b66 100644
--- a/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx
@@ -9,6 +9,7 @@ import { PopUpRoot } from '../../layout/popup/PopUpRoot'
 import { PopUp } from '../../layout/popup/PopUp'
 import { PopUpOpener } from '../../layout/popup/PopUpOpener'
 import { Button } from '../Button'
+import { Pressable } from '../Pressable'
 import { FilterPopUp } from './FilterPopUp'
 import { Combobox } from '../Combobox/Combobox'
 import { ComboboxOption } from '../Combobox/ComboboxOption'
@@ -79,39 +80,48 @@ export const FilterList = ({ value, onValueChange, availableItems }: FilterListP
       <PopUpRoot>
         <PopUpOpener>
           {({ toggleOpen, props }) => (
-            <Button {...props} onClick={toggleOpen} color="neutral" size="sm" className="min-w-36">
+            <Button
+              {...props}
+              onClick={toggleOpen}
+              color="neutral"
+              size="sm"
+              className="min-w-36"
+              trailing={<PlusIcon className="size-4" />}
+            >
               {translation('addFilter')}
-              <PlusIcon className="size-4" />
             </Button>
           )}
         </PopUpOpener>
         <PopUp className="flex-col-2 p-2">
           <PopUpContext.Consumer>
-            {({ setIsOpen }) => (
-              <Combobox
-                onItemClick={(id) => {
-                  const item = itemRecord[id]
-                  if (!item) return
-                  const newValue: IdentifierFilterValue = {
-                    id: item.id,
-                    value: {
-                      dataType: item.dataType,
-                      operator: FilterOperatorUtils.getDefaultOperator(item.dataType),
-                      parameter: {}
-                    },
-                  }
-                  setEditState(newValue)
-                  setIsOpen(false)
-                }}
-              >
-                {inactiveItems.map(item => (
-                  <ComboboxOption key={item.id} value={item.id} label={item.label}>
-                    {DataTypeUtils.toIcon(item.dataType)}
-                    {item.label}
-                  </ComboboxOption>
-                ))}
-              </Combobox>
-            )}
+            {(context) => {
+              if(!context) return
+              const { setIsOpen } = context
+              return (
+                <Combobox
+                  onItemClick={(id) => {
+                    const item = itemRecord[id]
+                    if (!item) return
+                    const newValue: IdentifierFilterValue = {
+                      id: item.id,
+                      value: {
+                        dataType: item.dataType,
+                        operator: FilterOperatorUtils.getDefaultOperator(item.dataType),
+                        parameter: {}
+                      },
+                    }
+                    setEditState(newValue)
+                    setIsOpen(false)
+                  }}
+                >
+                  {inactiveItems.map(item => (
+                    <ComboboxOption key={item.id} value={item.id} label={item.label}>
+                      {DataTypeUtils.toIcon(item.dataType)}
+                      {item.label}
+                    </ComboboxOption>
+                  ))}
+                </Combobox>
+              )}}
           </PopUpContext.Consumer>
         </PopUp>
       </PopUpRoot>
@@ -138,7 +148,7 @@ export const FilterList = ({ value, onValueChange, availableItems }: FilterListP
           >
             <PopUpOpener>
               {({ toggleOpen, props }) => (
-                <Button {...props} onClick={toggleOpen} color="primary" coloringStyle="tonal-outline" size="sm">
+                <Pressable {...props} onClick={toggleOpen} color="primary" coloringStyle="tonal-outline" size="sm">
                   {item.activeLabelBuilder ?
                     item.activeLabelBuilder(columnFilter.value) : (
                       <>
@@ -147,42 +157,45 @@ export const FilterList = ({ value, onValueChange, availableItems }: FilterListP
                       </>
                     )
                   }
-                </Button>
+                </Pressable>
               )}
             </PopUpOpener>
             <PopUpContext.Consumer>
-              {({ isOpen, setIsOpen }) => item.popUpBuilder ? (
-                item.popUpBuilder({
-                  value: editState?.id === columnFilter.id ? editState.value : columnFilter.value,
-                  onValueChange: value => setEditState({ ...columnFilter, value }),
-                  onRemove: () => {
-                    onValueChange(value.filter(prevItem => prevItem.id !== columnFilter.id))
-                    setEditState(undefined)
-                  },
-                  operatorOverrides: item.operatorOverrides,
-                  dataType: item.dataType,
-                  tags: item.tags,
-                  name: item.label,
-                  isOpen,
-                  onClose: () => setIsOpen(false),
-                })
-              ) : (
-                <FilterPopUp
-                  name={item.label}
-                  value={editState?.id === columnFilter.id ? editState.value : columnFilter.value}
-                  dataType={item.dataType}
-                  tags={item.tags}
-                  operatorOverrides={item.operatorOverrides}
-                  onValueChange={value => {
-                    setEditState({ ...columnFilter, value })
-                  }}
-                  onRemove={() => {
-                    onValueChange(value.filter(prevItem => prevItem.id !== columnFilter.id))
-                    setEditState(undefined)
-                  }}
-                  onClose={() => setIsOpen(false)}
-                />
-              )}
+              {(context) => {
+                if(!context) return
+                const { isOpen, setIsOpen } = context
+                return item.popUpBuilder ? (
+                  item.popUpBuilder({
+                    value: editState?.id === columnFilter.id ? editState.value : columnFilter.value,
+                    onValueChange: value => setEditState({ ...columnFilter, value }),
+                    onRemove: () => {
+                      onValueChange(value.filter(prevItem => prevItem.id !== columnFilter.id))
+                      setEditState(undefined)
+                    },
+                    operatorOverrides: item.operatorOverrides,
+                    dataType: item.dataType,
+                    tags: item.tags,
+                    name: item.label,
+                    isOpen,
+                    onClose: () => setIsOpen(false),
+                  })
+                ) : (
+                  <FilterPopUp
+                    name={item.label}
+                    value={editState?.id === columnFilter.id ? editState.value : columnFilter.value}
+                    dataType={item.dataType}
+                    tags={item.tags}
+                    operatorOverrides={item.operatorOverrides}
+                    onValueChange={value => {
+                      setEditState({ ...columnFilter, value })
+                    }}
+                    onRemove={() => {
+                      onValueChange(value.filter(prevItem => prevItem.id !== columnFilter.id))
+                      setEditState(undefined)
+                    }}
+                    onClose={() => setIsOpen(false)}
+                  />
+                )}}
             </PopUpContext.Consumer>
           </PopUpRoot>
         )
diff --git a/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx b/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx
index 8db9559a..2c7999c6 100644
--- a/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx
@@ -7,6 +7,7 @@ import { PopUpRoot } from '../../layout/popup/PopUpRoot'
 import { PopUp } from '../../layout/popup/PopUp'
 import { PopUpOpener } from '../../layout/popup/PopUpOpener'
 import { Button } from '../Button'
+import { Pressable } from '../Pressable'
 import { Combobox } from '../Combobox/Combobox'
 import { ComboboxOption } from '../Combobox/ComboboxOption'
 import { PopUpContext } from '../../layout/popup/PopUpContext'
@@ -58,31 +59,40 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
       <PopUpRoot>
         <PopUpOpener>
           {({ toggleOpen, props }) => (
-            <Button {...props} onClick={toggleOpen} color="neutral" size="sm" className="min-w-36">
+            <Button
+              {...props}
+              onClick={toggleOpen}
+              color="neutral"
+              size="sm"
+              className="min-w-36"
+              trailing={<PlusIcon className="size-4" />}
+            >
               {translation('addSorting')}
-              <PlusIcon className="size-4" />
             </Button>
           )}
         </PopUpOpener>
         <PopUp className="flex-col-2 p-2">
           <PopUpContext.Consumer>
-            {({ setIsOpen }) => (
-              <Combobox
-                onItemClick={(id) => {
-                  const item = itemRecord[id]
-                  if (!item) return
-                  onSortingChange([...sorting, { id: item.id, desc: false }])
-                  setIsOpen(false)
-                }}
-              >
-                {inactiveItems.map((item) => (
-                  <ComboboxOption key={item.id} value={item.id} label={item.label}>
-                    {DataTypeUtils.toIcon(item.dataType)}
-                    {item.label}
-                  </ComboboxOption>
-                ))}
-              </Combobox>
-            )}
+            {(context) => {
+              if(!context) return
+              const { setIsOpen } = context
+              return (
+                <Combobox
+                  onItemClick={(id) => {
+                    const item = itemRecord[id]
+                    if (!item) return
+                    onSortingChange([...sorting, { id: item.id, desc: false }])
+                    setIsOpen(false)
+                  }}
+                >
+                  {inactiveItems.map((item) => (
+                    <ComboboxOption key={item.id} value={item.id} label={item.label}>
+                      {DataTypeUtils.toIcon(item.dataType)}
+                      {item.label}
+                    </ComboboxOption>
+                  ))}
+                </Combobox>
+              )}}
           </PopUpContext.Consumer>
         </PopUp>
       </PopUpRoot>
@@ -93,70 +103,73 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
           <PopUpRoot key={columnSort.id}>
             <PopUpOpener>
               {({ toggleOpen, props }) => (
-                <Button {...props} onClick={toggleOpen} color="secondary" coloringStyle="tonal-outline" size="sm">
+                <Pressable {...props} onClick={toggleOpen} color="secondary" coloringStyle="tonal-outline" size="sm">
                   <span className="font-bold">{item.label}</span>
                   {columnSort.desc ? <ArrowDownWideNarrow className="size-5"/> : <ArrowUpNarrowWide className="size-5"/>}
-                </Button>
+                </Pressable>
               )}
             </PopUpOpener>
             <PopUpContext.Consumer>
-              {({ setIsOpen }) => (
-                <PopUp
-                  className={clsx('flex-col-3 p-3 min-w-64')}
-                  onClose={() => setIsOpen(false)}
-                >
-                  <div className="flex-row-4 justify-between w-full items-center gap-2">
-                    <span className="typography-title-sm font-semibold">{item.label}</span>
-                    <div className="flex-row-0 shrink-0 items-center">
-                      <IconButton
-                        tooltip={translation('removeFilter')}
-                        onClick={() => {
-                          removeSort(columnSort.id)
-                          setIsOpen(false)
-                        }}
-                        color="negative"
-                        coloringStyle="text"
-                        size="sm"
+              {(context) => {
+                if(!context) return
+                const { setIsOpen } = context
+                return (
+                  <PopUp
+                    className={clsx('flex-col-3 p-3 min-w-64')}
+                    onClose={() => setIsOpen(false)}
+                  >
+                    <div className="flex-row-4 justify-between w-full items-center gap-2">
+                      <span className="typography-title-sm font-semibold">{item.label}</span>
+                      <div className="flex-row-0 shrink-0 items-center">
+                        <IconButton
+                          tooltip={translation('removeFilter')}
+                          onClick={() => {
+                            removeSort(columnSort.id)
+                            setIsOpen(false)
+                          }}
+                          color="negative"
+                          coloringStyle="text"
+                          size="sm"
+                        >
+                          <TrashIcon className="size-4" />
+                        </IconButton>
+                        <IconButton
+                          tooltip={translation('close')}
+                          onClick={() => setIsOpen(false)}
+                          color="neutral"
+                          coloringStyle="text"
+                          size="sm"
+                        >
+                          <XIcon className="size-4" />
+                        </IconButton>
+                      </div>
+                    </div>
+                    <div className="flex-row-1 w-full gap-2">
+                      <Button
+                        type="button"
+                        className="flex-1"
+                        color={columnSort.desc ? 'neutral' : 'primary'}
+                        coloringStyle="solid"
+                        size="md"
+                        onClick={() => setSortDirection(columnSort.id, false)}
+                        leading={<ArrowUpNarrowWide className="size-4" />}
                       >
-                        <TrashIcon className="size-4" />
-                      </IconButton>
-                      <IconButton
-                        tooltip={translation('close')}
-                        onClick={() => setIsOpen(false)}
-                        color="neutral"
-                        coloringStyle="text"
-                        size="sm"
+                        {translation('sortAsc')}
+                      </Button>
+                      <Button
+                        type="button"
+                        className="flex-1"
+                        color={columnSort.desc ? 'primary' : 'neutral'}
+                        coloringStyle="solid"
+                        size="md"
+                        onClick={() => setSortDirection(columnSort.id, true)}
+                        leading={<ArrowDownWideNarrow className="size-4" />}
                       >
-                        <XIcon className="size-4" />
-                      </IconButton>
+                        {translation('sortDesc')}
+                      </Button>
                     </div>
-                  </div>
-                  <div className="flex-row-1 w-full gap-2">
-                    <Button
-                      type="button"
-                      className="flex-1 flex-row-1 items-center justify-center gap-2"
-                      color={columnSort.desc ? 'neutral' : 'primary'}
-                      coloringStyle="solid"
-                      size="md"
-                      onClick={() => setSortDirection(columnSort.id, false)}
-                    >
-                      <ArrowUpNarrowWide className="size-4" />
-                      {translation('sortAsc')}
-                    </Button>
-                    <Button
-                      type="button"
-                      className="flex-1 flex-row-1 items-center justify-center gap-2"
-                      color={columnSort.desc ? 'primary' : 'neutral'}
-                      coloringStyle="solid"
-                      size="md"
-                      onClick={() => setSortDirection(columnSort.id, true)}
-                    >
-                      <ArrowDownWideNarrow className="size-4" />
-                      {translation('sortDesc')}
-                    </Button>
-                  </div>
-                </PopUp>
-              )}
+                  </PopUp>
+                )}}
             </PopUpContext.Consumer>
           </PopUpRoot>
         )
diff --git a/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx b/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx
index ef2d2035..164c7280 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx
@@ -62,9 +62,9 @@ export const DatePicker = ({
           size="sm"
           color="neutral"
           onClick={() => setDisplayMode(displayMode === 'day' ? 'yearMonth' : 'day')}
+          trailing={<ChevronDown size={16}/>}
         >
           {`${new Intl.DateTimeFormat(LocalizationUtil.isoLocaleToLanguage(locale), { month: 'short' }).format(displayedMonth)} ${displayedMonth.getFullYear()}`}
-          <ChevronDown size={16}/>
         </Button>
         <div className="flex-row-2 justify-end">
           <IconButton
diff --git a/packages/hightide-web/src/style/theme/components/button.css b/packages/hightide-web/src/style/theme/components/button.css
index b67cb7dc..97686eb3 100644
--- a/packages/hightide-web/src/style/theme/components/button.css
+++ b/packages/hightide-web/src/style/theme/components/button.css
@@ -1,58 +1,49 @@
 @layer components {
   .button {
-    @apply relative flex flex-row items-center justify-center element;
-    @apply: font-semibold whitespace-nowrap w-fit;
-    transition: var(--coloring-transitions), var(--focus-transitions);
-
-    .button-processing-overlay {
-      @apply absolute inset-0 flex items-center justify-center rounded-[inherit] bg-surface/40 pointer-events-none;
-    }
-
-    &:not([data-disabled]) {
-      @apply cursor-pointer coloring-color-detect coloring-style-hover-detect;
-    }
-    
-    &[data-disabled] {
-      @apply disabled coloring-style-detect cursor-not-allowed;
-    }
-
     &[data-size="xs"] {
-      @apply gap-x-1 sizing-xs;
-      @apply text-xs min-w-20;
+      @apply min-w-20;
+      padding: var(--element-padding) var(--element-padding-direction);
+
       &[data-coloringstyle="outline"],
       &[data-coloringstyle="tonal-outline"] {
-        padding: 
-          calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width)) 
+        padding:
+          calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width))
           calc(var(--spacing-element-padding-direction-xs) - var(--coloring-outline-width));
       }
     }
+
     &[data-size="sm"] {
-      @apply gap-x-1 sizing-sm;
       @apply min-w-28;
+      padding: var(--element-padding) var(--element-padding-direction);
+
       &[data-coloringstyle="outline"],
       &[data-coloringstyle="tonal-outline"] {
-        padding: 
-          calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width)) 
+        padding:
+          calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width))
           calc(var(--spacing-element-padding-direction-sm) - var(--coloring-outline-width));
       }
     }
+
     &[data-size="md"] {
-      @apply gap-x-2 sizing-md;
       @apply min-w-36;
+      padding: var(--element-padding) var(--element-padding-direction);
+
       &[data-coloringstyle="outline"],
       &[data-coloringstyle="tonal-outline"] {
-        padding: 
-          calc(var(--spacing-element-padding-md) - var(--coloring-outline-width)) 
+        padding:
+          calc(var(--spacing-element-padding-md) - var(--coloring-outline-width))
           calc(var(--spacing-element-padding-direction-md) - var(--coloring-outline-width));
       }
     }
+
     &[data-size="lg"] {
-      @apply gap-x-2 sizing-lg;
-      @apply text-lg min-w-45;
+      @apply min-w-45;
+      padding: var(--element-padding) var(--element-padding-direction);
+
       &[data-coloringstyle="outline"],
       &[data-coloringstyle="tonal-outline"] {
-        padding: 
-          calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width)) 
+        padding:
+          calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width))
           calc(var(--spacing-element-padding-direction-lg) - var(--coloring-outline-width));
       }
     }
diff --git a/packages/hightide-web/src/style/theme/components/index.css b/packages/hightide-web/src/style/theme/components/index.css
index 440418bc..a00efe75 100644
--- a/packages/hightide-web/src/style/theme/components/index.css
+++ b/packages/hightide-web/src/style/theme/components/index.css
@@ -1,4 +1,5 @@
 @import "./general.css";
+@import "./pressable.css";
 @import "./button.css";
 @import "./tooltip.css";
 @import "./icon-button.css";
diff --git a/packages/hightide-web/src/style/theme/components/pressable.css b/packages/hightide-web/src/style/theme/components/pressable.css
new file mode 100644
index 00000000..59f2773b
--- /dev/null
+++ b/packages/hightide-web/src/style/theme/components/pressable.css
@@ -0,0 +1,57 @@
+@layer components {
+  .pressable {
+    @apply relative flex flex-row items-center justify-center font-semibold whitespace-nowrap w-fit;
+    height: var(--element-height, var(--spacing-element-md));
+    padding: var(--element-padding, var(--spacing-element-padding-md));
+    border-radius: var(--element-border-radius, 0.375rem);
+    transition: var(--coloring-transitions), var(--focus-transitions);
+
+    .pressable-processing-overlay {
+      @apply absolute inset-0 flex items-center justify-center rounded-[inherit] bg-surface/40 pointer-events-none;
+    }
+
+    &:not([data-disabled]) {
+      @apply cursor-pointer coloring-color-detect coloring-style-hover-detect;
+    }
+
+    &[data-disabled] {
+      @apply disabled coloring-style-detect cursor-not-allowed;
+    }
+
+    &[data-size="xs"] {
+      @apply gap-x-1 sizing-xs text-xs;
+
+      &[data-coloringstyle="outline"],
+      &[data-coloringstyle="tonal-outline"] {
+        padding: calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width));
+      }
+    }
+
+    &[data-size="sm"] {
+      @apply gap-x-1 sizing-sm;
+
+      &[data-coloringstyle="outline"],
+      &[data-coloringstyle="tonal-outline"] {
+        padding: calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width));
+      }
+    }
+
+    &[data-size="md"] {
+      @apply gap-x-2 sizing-md;
+
+      &[data-coloringstyle="outline"],
+      &[data-coloringstyle="tonal-outline"] {
+        padding: calc(var(--spacing-element-padding-md) - var(--coloring-outline-width));
+      }
+    }
+
+    &[data-size="lg"] {
+      @apply gap-x-2 sizing-lg text-lg;
+
+      &[data-coloringstyle="outline"],
+      &[data-coloringstyle="tonal-outline"] {
+        padding: calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width));
+      }
+    }
+  }
+}
diff --git a/packages/hightide-web/stories/User Interaction/Button.stories.tsx b/packages/hightide-web/stories/User Interaction/Button.stories.tsx
index cc295790..45d60d74 100644
--- a/packages/hightide-web/stories/User Interaction/Button.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Button.stories.tsx	
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Check, ChevronRight } from 'lucide-react'
 import { ButtonUtil } from '../../src/components/user-interaction/Button'
 import { Button } from '../../src/components/user-interaction/Button'
 import { action } from 'storybook/actions'
@@ -28,9 +29,17 @@ export const button: Story = {
   },
   render: ({ children, ...props }) => {
     return (
-      <Button {...props}>
-        {children}
-      </Button>
+      <div className="flex-row-2 items-center">
+        <Button {...props}>
+          {children}
+        </Button>
+        <Button {...props} leading={<Check size={16} />}>
+          {children}
+        </Button>
+        <Button {...props} trailing={<ChevronRight size={16} />}>
+          {children}
+        </Button>
+      </div>
     )
   }
 }
diff --git a/packages/hightide-web/stories/User Interaction/Pressable.stories.tsx b/packages/hightide-web/stories/User Interaction/Pressable.stories.tsx
new file mode 100644
index 00000000..b6e71511
--- /dev/null
+++ b/packages/hightide-web/stories/User Interaction/Pressable.stories.tsx	
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Plus } from 'lucide-react'
+import { ButtonUtil } from '../../src/components/user-interaction/Pressable'
+import { Pressable } from '../../src/components/user-interaction/Pressable'
+import { action } from 'storybook/actions'
+
+const meta = {
+  component: Pressable,
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ButtonUtil.colors,
+    },
+  },
+} satisfies Meta<typeof Pressable>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const pressable: Story = {
+  args: {
+    children: 'Label',
+    disabled: false,
+    isProcessing: false,
+    color: 'primary',
+    size: 'md',
+    coloringStyle: 'solid',
+    onClick: action('Clicked'),
+  },
+  render: ({ children, ...props }) => {
+    return (
+      <div className="flex-row-2 items-center">
+        <Pressable {...props}>
+          {children}
+        </Pressable>
+        <Pressable {...props} aria-label="Add">
+          <Plus />
+        </Pressable>
+      </div>
+    )
+  }
+}

From f846b8051907f1ac64fee6f02284de233de76563 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Tue, 29 Sep 2026 00:01:09 +0200
Subject: [PATCH 06/25] feat: add icon component

---
 .../components/chat/ChatAttachmentCard.tsx    | 13 +++--
 .../components/chat/ChatConversationRow.tsx   |  6 ++-
 .../src/components/chat/ChatMessageBubble.tsx |  3 +-
 .../components/chat/ChatMessageComposer.tsx   |  3 +-
 .../src/components/chat/ChatSystemLine.tsx    | 11 ++--
 .../Avatar/AvatarFallback.tsx                 |  4 +-
 .../ExpansionIcon.tsx                         |  6 ++-
 .../display-and-visualization/Icon.tsx        | 28 +++++++++++
 .../display-and-visualization/index.ts        |  1 +
 .../process-model/ProcessModelCanvas.tsx      |  5 +-
 .../process-model/ProcessModelTraceReplay.tsx |  4 +-
 .../src/components/layout/Carousel.tsx        | 10 ++--
 .../src/components/layout/InifiniteScroll.tsx |  5 +-
 .../src/components/layout/app/AppPage.tsx     |  5 +-
 .../src/components/layout/dialog/Dialog.tsx   |  5 +-
 .../layout/drawer/DrawerCloseButton.tsx       |  5 +-
 .../layout/loading/ErrorComponent.tsx         |  3 +-
 .../layout/loading/LoadingSpinner.tsx         |  8 ++-
 .../layout/navigation/Navigation.tsx          |  5 +-
 .../layout/navigation/Pagination.tsx          | 20 +++-----
 .../layout/navigation/StepperBar.tsx          |  6 +--
 .../VerticalNavigationMenuItem.tsx            |  3 +-
 .../components/layout/table/FillerCell.tsx    |  6 ++-
 .../layout/table/TableColumnSwitcher.tsx      | 48 ++++++------------
 .../layout/table/TableFilterButton.tsx        |  3 +-
 .../layout/table/TableSortButton.tsx          |  5 +-
 .../components/list/ListNavigationItem.tsx    | 13 +++--
 .../components/user-interaction/Button.tsx    | 25 ++++++++--
 .../components/user-interaction/Checkbox.tsx  |  7 ++-
 .../CopyToClipboardWrapper.tsx                |  5 +-
 .../FileInput/FileInputMenu.tsx               | 10 ++--
 .../FileInput/FileInputTrigger.tsx            |  9 ++--
 .../user-interaction/IconButton.tsx           |  7 ++-
 .../MultiSelectChipDisplayTrigger.tsx         | 10 ++--
 .../MultiSelect/MultiSelectOption.tsx         | 13 +++--
 .../user-interaction/Select/SelectOption.tsx  | 13 +++--
 .../user-interaction/data/FilterList.tsx      |  2 +-
 .../user-interaction/data/FilterOperator.tsx  | 43 ++++++++--------
 .../user-interaction/data/FilterPopUp.tsx     | 10 ++--
 .../user-interaction/data/SortingList.tsx     | 19 ++++---
 .../user-interaction/data/data-types.tsx      | 17 ++++---
 .../user-interaction/date/DatePicker.tsx      | 17 +++----
 .../user-interaction/input/DateTimeInput.tsx  | 10 ++--
 .../input/FlexibleDateTimeInput.tsx           |  5 +-
 .../input/NumberStepperInput.tsx              | 10 ++--
 .../user-interaction/input/SearchBar.tsx      |  3 +-
 .../input/ToggleableInput.tsx                 |  3 +-
 .../properties/CheckboxProperty.tsx           | 11 ++--
 .../properties/DateProperty.tsx               |  3 +-
 .../properties/MultiSelectProperty.tsx        |  3 +-
 .../properties/NumberProperty.tsx             |  3 +-
 .../properties/PropertyBase.tsx               | 13 +++--
 .../properties/SelectProperty.tsx             |  3 +-
 .../properties/TextProperty.tsx               |  3 +-
 .../components/chat/chat-attachment-card.css  |  8 ---
 .../src/style/theme/components/icon.css       | 50 +++++++++++++++++++
 .../src/style/theme/components/index.css      |  1 +
 .../src/style/theme/variables.css             |  6 +++
 .../Icon.stories.tsx                          | 31 ++++++++++++
 .../User Interaction/Button.stories.tsx       |  4 +-
 .../User Interaction/IconButton.stories.tsx   |  9 +---
 61 files changed, 374 insertions(+), 246 deletions(-)
 create mode 100644 packages/hightide-web/src/components/display-and-visualization/Icon.tsx
 create mode 100644 packages/hightide-web/src/style/theme/components/icon.css
 create mode 100644 packages/hightide-web/stories/Display And Visualization/Icon.stories.tsx

diff --git a/packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx b/packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx
index 1b4300c1..83f8a001 100644
--- a/packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx
+++ b/packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx
@@ -1,13 +1,14 @@
-import type { HTMLAttributes, ReactNode } from 'react'
+import type { ElementType, HTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 import { Download, FileText } from 'lucide-react'
+import { Icon } from '../display-and-visualization/Icon'
 import { IconButton } from '../user-interaction/IconButton'
 import type { ChatMessageDirection } from './ChatMessageBubble'
 
 export type ChatAttachmentCardProps = HTMLAttributes<HTMLDivElement> & {
   name: ReactNode,
   metadata?: ReactNode,
-  icon?: ReactNode,
+  icon?: ElementType,
   direction?: ChatMessageDirection,
   downloadLabel?: string,
   onDownload?: () => void,
@@ -16,7 +17,7 @@ export type ChatAttachmentCardProps = HTMLAttributes<HTMLDivElement> & {
 export const ChatAttachmentCard = ({
   name,
   metadata,
-  icon,
+  icon = FileText,
   direction = 'incoming',
   downloadLabel = 'Download',
   onDownload,
@@ -28,9 +29,7 @@ export const ChatAttachmentCard = ({
       className={clsx('chat-attachment-card', props.className)}
       data-direction={direction}
     >
-      <span className="chat-attachment-card-icon">
-        {icon ?? <FileText/>}
-      </span>
+      <Icon icon={icon} size="sm" className="chat-attachment-card-icon" />
       <span className="chat-attachment-card-info">
         <span className="chat-attachment-card-filename">{name}</span>
         {metadata && (
@@ -45,7 +44,7 @@ export const ChatAttachmentCard = ({
           coloringStyle="text"
           onClick={onDownload}
         >
-          <Download/>
+          <Icon icon={Download} />
         </IconButton>
       )}
     </div>
diff --git a/packages/hightide-web/src/components/chat/ChatConversationRow.tsx b/packages/hightide-web/src/components/chat/ChatConversationRow.tsx
index 6c91e89d..c70d370d 100644
--- a/packages/hightide-web/src/components/chat/ChatConversationRow.tsx
+++ b/packages/hightide-web/src/components/chat/ChatConversationRow.tsx
@@ -1,7 +1,7 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 import { Check, CheckCheck } from 'lucide-react'
-
+import { Icon } from '../display-and-visualization/Icon'
 import { Avatar } from '../display-and-visualization/Avatar/Avatar'
 import type { AvatarProps } from '../display-and-visualization/Avatar/AvatarComponent'
 import { PropsUtil } from '../../utils/propsUtil'
@@ -54,7 +54,9 @@ export const ChatConversationRow = ({
         <span className="chat-conversation-row-bottom">
           <span className="chat-conversation-row-preview">
             {sentIndicator && (
-              <SentIndicatorIcon
+              <Icon
+                icon={SentIndicatorIcon}
+                size="xs"
                 className="chat-conversation-row-sent-indicator"
                 data-sent-indicator={sentIndicator}
               />
diff --git a/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx b/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx
index d659cff7..464c5365 100644
--- a/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx
+++ b/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx
@@ -1,6 +1,7 @@
 import type { HTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 import { CheckCheck } from 'lucide-react'
+import { Icon } from '../display-and-visualization/Icon'
 
 export type ChatMessageDirection = 'incoming' | 'outgoing'
 
@@ -32,7 +33,7 @@ export const ChatMessageBubble = ({
         <span className="chat-message-bubble-metadata">
           {readReceipt != null && (
             <span className="chat-message-bubble-metadata-status">
-              <CheckCheck className="chat-message-bubble-metadata-icon"/>
+              <Icon icon={CheckCheck} size="xs" className="chat-message-bubble-metadata-icon" />
               <span className="chat-message-bubble-metadata-text">{readReceipt}</span>
             </span>
           )}
diff --git a/packages/hightide-web/src/components/chat/ChatMessageComposer.tsx b/packages/hightide-web/src/components/chat/ChatMessageComposer.tsx
index 1b351392..f120d74a 100644
--- a/packages/hightide-web/src/components/chat/ChatMessageComposer.tsx
+++ b/packages/hightide-web/src/components/chat/ChatMessageComposer.tsx
@@ -2,6 +2,7 @@ import type { HTMLAttributes, ReactNode } from 'react'
 import { useCallback, useLayoutEffect, useRef } from 'react'
 import clsx from 'clsx'
 import { SendHorizontal } from 'lucide-react'
+import { Icon } from '../display-and-visualization/Icon'
 import { IconButton } from '../user-interaction/IconButton'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useWindowResizeObserver } from '../../hooks/useWindowResizeObserver'
@@ -95,7 +96,7 @@ export const ChatMessageComposer = ({
         onClick={send}
         className="chat-message-composer-send-button"
       >
-        <SendHorizontal/>
+        <Icon icon={SendHorizontal} />
       </IconButton>
     </div>
   )
diff --git a/packages/hightide-web/src/components/chat/ChatSystemLine.tsx b/packages/hightide-web/src/components/chat/ChatSystemLine.tsx
index eb7614f2..a31f7189 100644
--- a/packages/hightide-web/src/components/chat/ChatSystemLine.tsx
+++ b/packages/hightide-web/src/components/chat/ChatSystemLine.tsx
@@ -1,15 +1,16 @@
-import type { HTMLAttributes, ReactNode } from 'react'
+import type { ElementType, HTMLAttributes } from 'react'
 import clsx from 'clsx'
 import { CheckCheck } from 'lucide-react'
+import { Icon } from '../display-and-visualization/Icon'
 import type { ChipColor } from '../display-and-visualization/Chip'
 
 export type ChatSystemLineProps = HTMLAttributes<HTMLDivElement> & {
-  icon?: ReactNode,
+  icon?: ElementType,
   color?: ChipColor,
 }
 
 export const ChatSystemLine = ({
-  icon,
+  icon = CheckCheck,
   color = 'primary',
   children,
   ...props
@@ -20,9 +21,7 @@ export const ChatSystemLine = ({
       className={clsx('chat-system-line', props.className)}
       data-color={color ?? undefined}
     >
-      <span className="chat-system-line-icon">
-        {icon ?? <CheckCheck/>}
-      </span>
+      <Icon icon={icon} size="xs" className="chat-system-line-icon" />
       {children}
     </div>
   )
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarFallback.tsx b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarFallback.tsx
index 34f97488..79bfc2a9 100644
--- a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarFallback.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarFallback.tsx
@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'react'
 import clsx from 'clsx'
 import { UserIcon } from 'lucide-react'
-
+import { Icon } from '../Icon'
 import { isImageShown, useAvatarContext } from './AvatarContext'
 
 export function AvatarFallback({
@@ -16,7 +16,7 @@ export function AvatarFallback({
       {...props}
       className={clsx('avatar-fallback', className)}
     >
-      <UserIcon />
+      <Icon icon={UserIcon} />
     </div>
   )
 }
diff --git a/packages/hightide-web/src/components/display-and-visualization/ExpansionIcon.tsx b/packages/hightide-web/src/components/display-and-visualization/ExpansionIcon.tsx
index 7f1f1694..d1066c55 100644
--- a/packages/hightide-web/src/components/display-and-visualization/ExpansionIcon.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/ExpansionIcon.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { ChevronDown } from 'lucide-react'
+import { Icon } from './Icon'
 import type { HTMLAttributes } from 'react'
 
 export type ExpansionIconProps = HTMLAttributes<HTMLDivElement> & {
@@ -24,9 +25,10 @@ export const ExpansionIcon = ({
       {children ? (
         children
       ) : (
-        <ChevronDown
+        <Icon
+          icon={ChevronDown}
+          size="xs"
           aria-hidden={true}
-          className="size-4"
         />
       )}
     </div>
diff --git a/packages/hightide-web/src/components/display-and-visualization/Icon.tsx b/packages/hightide-web/src/components/display-and-visualization/Icon.tsx
new file mode 100644
index 00000000..7fce16c1
--- /dev/null
+++ b/packages/hightide-web/src/components/display-and-visualization/Icon.tsx
@@ -0,0 +1,28 @@
+import clsx from 'clsx'
+import type { ComponentPropsWithoutRef, ElementType } from 'react'
+
+export const iconSizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+
+export type IconSize = typeof iconSizes[number]
+
+export type IconProps<T extends ElementType = 'div'> = {
+  size?: IconSize,
+  icon?: T,
+} & Omit<ComponentPropsWithoutRef<T>, 'size'>
+
+export function Icon<T extends ElementType = 'div'>({
+  size = 'md',
+  icon,
+  className,
+  ...props
+}: IconProps<T>) {
+  const Component = icon ?? 'div'
+
+  return (
+    <Component
+      {...props}
+      className={clsx('icon', className)}
+      data-size={size}
+    />
+  )
+}
diff --git a/packages/hightide-web/src/components/display-and-visualization/index.ts b/packages/hightide-web/src/components/display-and-visualization/index.ts
index a9bfa047..82e5f52a 100644
--- a/packages/hightide-web/src/components/display-and-visualization/index.ts
+++ b/packages/hightide-web/src/components/display-and-visualization/index.ts
@@ -4,5 +4,6 @@ export * from './Card'
 export * from './ChangingNumber'
 export * from './Chip'
 export * from './ExpansionIcon'
+export * from './Icon'
 export * from './ProgressIndicator'
 export * from './process-model'
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx
index 158cc0c4..5a882e6a 100644
--- a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx
@@ -1,6 +1,7 @@
 import { useId, useMemo, type ReactNode } from 'react'
 import clsx from 'clsx'
 import { Check, Plus } from 'lucide-react'
+import { Icon } from '../Icon'
 import { ProcessModelActivityNode } from './ProcessModelActivityNode'
 import { ProcessModelTerminalNode } from './ProcessModelTerminalNode'
 import { ProcessModelLayoutUtilities } from './layoutProcessModel'
@@ -25,9 +26,9 @@ export type ProcessModelCanvasProps = {
 
 function defaultRenderActivityIcon(node: ProcessModelGraphActivityNode): ReactNode {
   if (node.activityIcon === 'check') {
-    return <Check size={15} strokeWidth={2} className="process-model-activity-node-icon-svg" />
+    return <Icon icon={Check} size="xs" className="process-model-activity-node-icon-svg" />
   }
-  return <Plus size={15} strokeWidth={2} className="process-model-activity-node-icon-svg" />
+  return <Icon icon={Plus} size="xs" className="process-model-activity-node-icon-svg" />
 }
 
 function isVisited(
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
index 7609f743..bada093a 100644
--- a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
@@ -283,7 +283,7 @@ export const ProcessModelTraceReplay = ({ graph, className }: ProcessModelTraceR
               void startPlayback()
             }
           }}
-          leading={isPlaying ? <Pause /> : <Play />}
+          leading={isPlaying ? Pause : Play}
         >
           {isPlaying ? translation('pauseTrace') : translation('playTrace')}
         </Button>
@@ -291,7 +291,7 @@ export const ProcessModelTraceReplay = ({ graph, className }: ProcessModelTraceR
           color="primary"
           coloringStyle="outline"
           onClick={resetReplay}
-          leading={<RotateCcw />}
+          leading={RotateCcw}
         >
           {translation('reset')}
         </Button>
diff --git a/packages/hightide-web/src/components/layout/Carousel.tsx b/packages/hightide-web/src/components/layout/Carousel.tsx
index d074bd88..424c0240 100644
--- a/packages/hightide-web/src/components/layout/Carousel.tsx
+++ b/packages/hightide-web/src/components/layout/Carousel.tsx
@@ -430,18 +430,16 @@ export const Carousel = ({
                 className={clsx('absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md', { hidden: !canGoLeft() })}
                 disabled={!canGoLeft()}
                 onClick={() => left()}
-              >
-                <ChevronLeft size={24}/>
-              </IconButton>
+                icon={ChevronLeft}
+              />
               <IconButton
                 tooltip={translation('next')}
                 color="neutral"
                 className={clsx('absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md', { hidden: !canGoRight() })}
                 disabled={!canGoRight()}
                 onClick={() => right()}
-              >
-                <ChevronRight size={24}/>
-              </IconButton>
+                icon={ChevronRight}
+              />
             </>
           )}
         </div>
diff --git a/packages/hightide-web/src/components/layout/InifiniteScroll.tsx b/packages/hightide-web/src/components/layout/InifiniteScroll.tsx
index 4086e4d0..c1b8f6a8 100644
--- a/packages/hightide-web/src/components/layout/InifiniteScroll.tsx
+++ b/packages/hightide-web/src/components/layout/InifiniteScroll.tsx
@@ -13,6 +13,7 @@ import clsx from 'clsx'
 import { range } from '@helpwave/hightide-utils/utils'
 import { Pressable } from '../user-interaction/Pressable'
 import { ChevronDown, ChevronUp } from 'lucide-react'
+import { Icon } from '../display-and-visualization/Icon'
 import { Visibility } from './Visibility'
 
 export interface InfiniteScrollProps {
@@ -124,13 +125,13 @@ export function InfiniteScroll({
     >
       <Visibility isVisible={windowState.start > 0}>
         <Pressable color="neutral" onClick={() => addToStart()}>
-          <ChevronUp/>
+          <Icon icon={ChevronUp} />
         </Pressable>
       </Visibility>
       {visibleItems.map((index) => children(index))}
       <Visibility isVisible={windowState.end < itemCount - 1}>
         <Pressable color="neutral" onClick={() => addToEnd()}>
-          <ChevronDown/>
+          <Icon icon={ChevronDown} />
         </Pressable>
       </Visibility>
     </div>
diff --git a/packages/hightide-web/src/components/layout/app/AppPage.tsx b/packages/hightide-web/src/components/layout/app/AppPage.tsx
index 717d0b5f..e148fc9f 100644
--- a/packages/hightide-web/src/components/layout/app/AppPage.tsx
+++ b/packages/hightide-web/src/components/layout/app/AppPage.tsx
@@ -4,6 +4,7 @@ import { useCallback, useMemo, useRef, useState, type HTMLAttributes, type React
 import { IconButton } from '../../user-interaction/IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { MenuIcon, X } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
 import { PropsUtil } from '../../../utils/propsUtil'
 import type { LinkComponentProps } from '../navigation/navigation-menus/VerticalNavigationMenu'
@@ -50,7 +51,7 @@ export const AppSidebar = ({ isOpen = false, onClose, children, ...props }: AppS
               coloringStyle="text"
               color="neutral"
             >
-              <X className="size-6" />
+              <Icon icon={X} />
             </IconButton>
             {children}
           </aside>
@@ -214,7 +215,7 @@ export const AppPage = ({
             onClick={() => setIsSidebarOpen(prev => !prev)}
             coloringStyle="text"
           >
-            <MenuIcon />
+            <Icon icon={MenuIcon} />
           </IconButton>
           {headerActions}
         </header>
diff --git a/packages/hightide-web/src/components/layout/dialog/Dialog.tsx b/packages/hightide-web/src/components/layout/dialog/Dialog.tsx
index cf800be9..185aeb47 100644
--- a/packages/hightide-web/src/components/layout/dialog/Dialog.tsx
+++ b/packages/hightide-web/src/components/layout/dialog/Dialog.tsx
@@ -159,9 +159,8 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog({
                     color="neutral"
                     coloringStyle="text"
                     onClick={onCloseWrapper}
-                  >
-                    <X size={24}/>
-                  </IconButton>
+                    icon={X}
+                  />
                 </div>
               </Visibility>
               {children}
diff --git a/packages/hightide-web/src/components/layout/drawer/DrawerCloseButton.tsx b/packages/hightide-web/src/components/layout/drawer/DrawerCloseButton.tsx
index 82b0de6e..f90cf66d 100644
--- a/packages/hightide-web/src/components/layout/drawer/DrawerCloseButton.tsx
+++ b/packages/hightide-web/src/components/layout/drawer/DrawerCloseButton.tsx
@@ -32,9 +32,8 @@ export function DrawerCloseButton({
         handleClose()
         onClick?.(event)
       }}
-    >
-      <X />
-    </IconButton>
+      icon={X}
+    />
   )
 }
 
diff --git a/packages/hightide-web/src/components/layout/loading/ErrorComponent.tsx b/packages/hightide-web/src/components/layout/loading/ErrorComponent.tsx
index 53b6559b..74e1a799 100644
--- a/packages/hightide-web/src/components/layout/loading/ErrorComponent.tsx
+++ b/packages/hightide-web/src/components/layout/loading/ErrorComponent.tsx
@@ -1,4 +1,5 @@
 import { AlertOctagon } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
@@ -17,7 +18,7 @@ export const ErrorComponent = ({
   const translation = useHightideTranslation()
   return (
     <div className={clsx('flex-col-4 items-center justify-center w-full h-24', classname)}>
-      <AlertOctagon size={64} className="text-warning"/>
+      <Icon icon={AlertOctagon} size="xl" className="text-warning" />
       {errorText ?? `${translation('errorOccurred')} :(`}
     </div>
   )
diff --git a/packages/hightide-web/src/components/layout/loading/LoadingSpinner.tsx b/packages/hightide-web/src/components/layout/loading/LoadingSpinner.tsx
index 87297060..81910529 100644
--- a/packages/hightide-web/src/components/layout/loading/LoadingSpinner.tsx
+++ b/packages/hightide-web/src/components/layout/loading/LoadingSpinner.tsx
@@ -1,5 +1,6 @@
 import { LoaderCircle } from 'lucide-react'
 import clsx from 'clsx'
+import { Icon } from '../../display-and-visualization/Icon'
 
 export type LoadingSpinnerProps = {
   className?: string,
@@ -7,6 +8,11 @@ export type LoadingSpinnerProps = {
 
 export const LoadingSpinner = ({ className }: LoadingSpinnerProps) => {
   return (
-    <LoaderCircle className={clsx('size-4 animate-spin', className)} aria-hidden />
+    <Icon
+      icon={LoaderCircle}
+      size="xs"
+      className={clsx('animate-spin', className)}
+      aria-hidden
+    />
   )
 }
diff --git a/packages/hightide-web/src/components/layout/navigation/Navigation.tsx b/packages/hightide-web/src/components/layout/navigation/Navigation.tsx
index 30d554c0..b7f0122e 100644
--- a/packages/hightide-web/src/components/layout/navigation/Navigation.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/Navigation.tsx
@@ -8,6 +8,7 @@ import { useAnchoredPosition } from '../../../hooks/useAnchoredPosition'
 import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
 import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
+import { Icon } from '../../display-and-visualization/Icon'
 import { IconButton } from '../../user-interaction/IconButton'
 
 type SimpleNavigationItem = {
@@ -212,7 +213,7 @@ export const Navigation = ({ ...props }: NavigationProps) => {
         aria-expanded={isMobileOpen}
         aria-controls={'navigation-menu-' + id}
       >
-        <MenuIcon className="w-6 h-6"/>
+        <Icon icon={MenuIcon} />
       </IconButton>
       <div
         id={'navigation-menu-' + id}
@@ -237,7 +238,7 @@ export const Navigation = ({ ...props }: NavigationProps) => {
             }
           }}
         >
-          <XIcon/>
+          <Icon icon={XIcon} />
         </IconButton>
         <NavigationItemList
           {...props}
diff --git a/packages/hightide-web/src/components/layout/navigation/Pagination.tsx b/packages/hightide-web/src/components/layout/navigation/Pagination.tsx
index 4417c612..40d20792 100644
--- a/packages/hightide-web/src/components/layout/navigation/Pagination.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/Pagination.tsx
@@ -48,17 +48,15 @@ export const Pagination = ({
         coloringStyle="text"
         color="neutral"
         onClick={() => changePage(0)} disabled={onFirstPage || noPages}
-      >
-        <ChevronFirst/>
-      </IconButton>
+        icon={ChevronFirst}
+      />
       <IconButton
         tooltip={translation('previous')}
         coloringStyle="text"
         color="neutral"
         onClick={() => changePage(pageIndex - 1)} disabled={onFirstPage || noPages}
-      >
-        <ChevronLeft/>
-      </IconButton>
+        icon={ChevronLeft}
+      />
       <div className="flex-row-2 min-w-56 items-center justify-center mx-2 text-center">
         <Input
           value={value}
@@ -93,17 +91,15 @@ export const Pagination = ({
         coloringStyle="text"
         color="neutral"
         onClick={() => changePage(pageIndex + 1)} disabled={onLastPage || noPages}
-      >
-        <ChevronRight/>
-      </IconButton>
+        icon={ChevronRight}
+      />
       <IconButton
         tooltip={translation('last')}
         coloringStyle="text"
         color="neutral"
         onClick={() => changePage(pageCount - 1)} disabled={onLastPage || noPages}
-      >
-        <ChevronLast/>
-      </IconButton>
+        icon={ChevronLast}
+      />
     </div>
   )
 }
diff --git a/packages/hightide-web/src/components/layout/navigation/StepperBar.tsx b/packages/hightide-web/src/components/layout/navigation/StepperBar.tsx
index 188b7ee6..7bd7e5dc 100644
--- a/packages/hightide-web/src/components/layout/navigation/StepperBar.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/StepperBar.tsx
@@ -65,7 +65,7 @@ export const StepperBar = ({
           onClick={() => {
             update(currentStep - 1)
           }}
-          leading={<ChevronLeft size={14}/>}
+          leading={ChevronLeft}
         >
           {translation('back')}
         </Button>
@@ -95,7 +95,7 @@ export const StepperBar = ({
           <Button
             onClick={() => update(currentStep + 1)}
             disabled={disabledSteps.has(currentStep)}
-            trailing={<ChevronRight size={14}/>}
+            trailing={ChevronRight}
           >
             {translation('next')}
           </Button>
@@ -106,7 +106,7 @@ export const StepperBar = ({
           <Button
             disabled={disabledSteps.has(currentStep)}
             onClick={onFinish}
-            leading={<Check size={14}/>}
+            leading={Check}
           >
             {finishText ?? translation('confirm')}
           </Button>
diff --git a/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx b/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
index 96914a94..4825ae52 100644
--- a/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
@@ -1,6 +1,7 @@
 import type { ElementType, HTMLAttributeAnchorTarget, ReactNode } from 'react'
 import { useId, useRef } from 'react'
 import { ExternalLink } from 'lucide-react'
+import { Icon } from '../../../display-and-visualization/Icon'
 import { ExpansionIcon } from '../../../display-and-visualization/ExpansionIcon'
 import { IconButton } from '../../../user-interaction/IconButton'
 import { useNavigationItem } from './NavigationContext'
@@ -60,7 +61,7 @@ export function VerticalNavigationMenuItem({
       <div className="vertical-navigation-item-label" data-action-padding={hasChildren ? '' : undefined}>
         {label}
         {external && (
-          <ExternalLink className="vertical-navigation-item-link-external-icon" />
+          <Icon icon={ExternalLink} size="sm" className="vertical-navigation-item-link-external-icon" />
         )}
       </div>
     </LinkComponent>
diff --git a/packages/hightide-web/src/components/layout/table/FillerCell.tsx b/packages/hightide-web/src/components/layout/table/FillerCell.tsx
index 7b0cab9e..8a5107ce 100644
--- a/packages/hightide-web/src/components/layout/table/FillerCell.tsx
+++ b/packages/hightide-web/src/components/layout/table/FillerCell.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { Minus } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import type { HTMLAttributes } from 'react'
 
 export type FillerCellProps = HTMLAttributes<HTMLDivElement>
@@ -8,8 +9,9 @@ export const FillerCell = ({ ...props }: FillerCellProps) => {
   return (
     <div
       {...props}
-      className={clsx('table-filler-cell', props.className)}>
-      <Minus className="max-w-4 max-h-4" />
+      className={clsx('table-filler-cell', props.className)}
+    >
+      <Icon icon={Minus} size="xs" />
     </div>
   )
 }
\ No newline at end of file
diff --git a/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx b/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx
index 6eeac04e..992ba215 100644
--- a/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx
+++ b/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx
@@ -208,13 +208,8 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
               disabled={!hasHideableColumns}
               onClick={toggleAllColumnsVisibility}
               aria-label={allColumnsVisible ? translation('hideAllColumns') : translation('showAllColumns')}
-            >
-              {allColumnsVisible ? (
-                <Eye className="size-4" />
-              ) : (
-                <EyeOff className="size-4" />
-              )}
-            </IconButton>
+              icon={allColumnsVisible ? Eye : EyeOff}
+            />
           </Visibility>
         </div>
         <span className="text-description typography-label-sm">
@@ -246,9 +241,8 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                       coloringStyle="text"
                       disabled={pinState === 'left'}
                       onClick={() => pinColumn(columnId, 'left')}
-                    >
-                      <ChevronLeft className="size-4" />
-                    </IconButton>
+                      icon={ChevronLeft}
+                    />
                     <IconButton
                       tooltip={translation('pinToRight')}
                       size="sm"
@@ -256,9 +250,8 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                       coloringStyle="text"
                       disabled={pinState === 'right'}
                       onClick={() => pinColumn(columnId, 'right')}
-                    >
-                      <ChevronRight className="size-4" />
-                    </IconButton>
+                      icon={ChevronRight}
+                    />
                   </>
                 ) : (
                   <>
@@ -269,9 +262,8 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                       coloringStyle="text"
                       disabled={!canMoveUp}
                       onClick={() => moveColumn(columnId, 'up')}
-                    >
-                      <ChevronUp className="size-4" />
-                    </IconButton>
+                      icon={ChevronUp}
+                    />
                     <IconButton
                       tooltip={translation('decreaseSortingPriority')}
                       size="sm"
@@ -279,9 +271,8 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                       coloringStyle="text"
                       disabled={!canMoveDown}
                       onClick={() => moveColumn(columnId, 'down')}
-                    >
-                      <ChevronDown className="size-4" />
-                    </IconButton>
+                      icon={ChevronDown}
+                    />
                   </>
                 )}
               </div>
@@ -298,13 +289,8 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                     disabled={!column.getCanHide()}
                     onClick={() => toggleColumnVisibility(columnId)}
                     aria-label={isVisible ? translation('hideColumn') : translation('showColumn')}
-                  >
-                    {isVisible ? (
-                      <Eye className="size-4" />
-                    ) : (
-                      <EyeOff className="size-4" />
-                    )}
-                  </IconButton>
+                    icon={isVisible ? Eye : EyeOff}
+                  />
                 </Visibility>
                 <Visibility isVisible={enableColumnPinning}>
                   <IconButton
@@ -321,9 +307,8 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                       }
                     }}
                     aria-label={isPinned ? translation('unpin') : translation('pinLeft')}
-                  >
-                    {!isPinned ? ( <PinOff className="size-4" />) : ( <Pin className="size-4" />)}
-                  </IconButton>
+                    icon={!isPinned ? PinOff : Pin}
+                  />
                 </Visibility>
               </>
             </div>
@@ -349,10 +334,9 @@ export const TableColumnSwitcher = ({ buttonProps, ...props }: TableColumnSwitch
             {...props}
             color="neutral"
             tooltip={translation('changeColumnDisplay')}
+            icon={Columns3Cog}
             {...buttonProps}
-          >
-            <Columns3Cog className="size-5" />
-          </IconButton>
+          />
         )}
       </PopUpOpener>
       <TableColumnSwitcherPopUp {...props} />
diff --git a/packages/hightide-web/src/components/layout/table/TableFilterButton.tsx b/packages/hightide-web/src/components/layout/table/TableFilterButton.tsx
index e5c074d6..1c63c60f 100644
--- a/packages/hightide-web/src/components/layout/table/TableFilterButton.tsx
+++ b/packages/hightide-web/src/components/layout/table/TableFilterButton.tsx
@@ -1,4 +1,5 @@
 import { FilterIcon } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import { useEffect, useId, useMemo, useRef, useState } from 'react'
 import type { Header } from '@tanstack/react-table'
 import { flexRender } from '@tanstack/react-table'
@@ -62,7 +63,7 @@ export const TableFilterButton = ({
 
         className="relative"
       >
-        <FilterIcon className="size-4"/>
+        <Icon icon={FilterIcon} size="xs" />
         <Visibility isVisible={hasFilter}>
           <div className="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-primary" />
         </Visibility>
diff --git a/packages/hightide-web/src/components/layout/table/TableSortButton.tsx b/packages/hightide-web/src/components/layout/table/TableSortButton.tsx
index d97f3eb6..efa5f60f 100644
--- a/packages/hightide-web/src/components/layout/table/TableSortButton.tsx
+++ b/packages/hightide-web/src/components/layout/table/TableSortButton.tsx
@@ -1,4 +1,5 @@
 import { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import clsx from 'clsx'
 import type { SortDirection } from '@tanstack/react-table'
 import { Visibility } from '../Visibility'
@@ -31,14 +32,14 @@ export const TableSortButton = ({
 }: TableSortButtonProps) => {
   const translation = useHightideTranslation()
 
-  let icon = <ChevronsUpDown className="size-4"/>
+  let icon = <Icon icon={ChevronsUpDown} size="xs" />
   if (sortDirection) {
     let usedSortDirection = sortDirection
     if (invert) {
       usedSortDirection = usedSortDirection === 'desc' ? 'asc' : 'desc'
     }
     icon = usedSortDirection === 'asc' ?
-      (<ChevronUp className="size-4"/>) : (<ChevronDown className="size-4"/>)
+      (<Icon icon={ChevronUp} size="xs" />) : (<Icon icon={ChevronDown} size="xs" />)
   }
 
   const parsedIndex = sortingIndexDisplay?.index ?? -1
diff --git a/packages/hightide-web/src/components/list/ListNavigationItem.tsx b/packages/hightide-web/src/components/list/ListNavigationItem.tsx
index 15bf82fd..42084222 100644
--- a/packages/hightide-web/src/components/list/ListNavigationItem.tsx
+++ b/packages/hightide-web/src/components/list/ListNavigationItem.tsx
@@ -1,7 +1,7 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, MouseEvent, ReactNode } from 'react'
 import clsx from 'clsx'
 import { ChevronRight, ExternalLink } from 'lucide-react'
-
+import { Icon } from '../display-and-visualization/Icon'
 import { PropsUtil } from '../../utils/propsUtil'
 import { ListItemContent } from './ListItemContent'
 import type { ListItemColor, ListItemContentOrder } from './ListItemTypes'
@@ -29,8 +29,6 @@ function ListNavigationContent({
   leading,
   isExternal = false,
 }: ListNavigationContentProps) {
-  const Icon = isExternal ? ExternalLink : ChevronRight
-
   return (
     <ListItemContent
       title={title}
@@ -38,7 +36,14 @@ function ListNavigationContent({
       content={content}
       contentOrder={contentOrder}
       leading={leading}
-      trailing={<Icon className="list-navigation-item-icon" aria-hidden="true" />}
+      trailing={(
+        <Icon
+          icon={isExternal ? ExternalLink : ChevronRight}
+          size="sm"
+          className="list-navigation-item-icon"
+          aria-hidden={true}
+        />
+      )}
     />
   )
 }
diff --git a/packages/hightide-web/src/components/user-interaction/Button.tsx b/packages/hightide-web/src/components/user-interaction/Button.tsx
index 543db62f..89c71a8b 100644
--- a/packages/hightide-web/src/components/user-interaction/Button.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Button.tsx
@@ -1,6 +1,9 @@
 import clsx from 'clsx'
-import type { ReactNode } from 'react'
+import type { ElementType } from 'react'
 import { forwardRef } from 'react'
+
+import type { IconSize } from '../display-and-visualization/Icon'
+import { Icon } from '../display-and-visualization/Icon'
 import type { PressableProps } from './Pressable'
 import { Pressable } from './Pressable'
 
@@ -15,26 +18,38 @@ export {
 
 export type ButtonProps = Omit<PressableProps, 'children'> & {
   children: string,
-  leading?: ReactNode,
-  trailing?: ReactNode,
+  leading?: ElementType,
+  trailing?: ElementType,
 }
 
+const buttonIconSize = (size: ButtonProps['size']): IconSize => (
+  size === 'xs' || size === 'sm' ? 'sm' : 'md'
+)
+
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({
   children,
   leading,
   trailing,
   className,
+  size = 'md',
   ...props
 }, ref) {
+  const iconSize = buttonIconSize(size)
+
   return (
     <Pressable
       {...props}
       ref={ref}
+      size={size}
       className={clsx('button', className)}
     >
-      {leading}
+      {leading && (
+        <Icon icon={leading} size={iconSize} />
+      )}
       {children}
-      {trailing}
+      {trailing && (
+        <Icon icon={trailing} size={iconSize} />
+      )}
     </Pressable>
   )
 })
diff --git a/packages/hightide-web/src/components/user-interaction/Checkbox.tsx b/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
index 2374d634..3989c979 100644
--- a/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
@@ -1,5 +1,7 @@
 import clsx from 'clsx'
 import { Check, Minus } from 'lucide-react'
+import type { IconSize } from '../display-and-visualization/Icon'
+import { Icon } from '../display-and-visualization/Icon'
 import { useCallback, type HTMLAttributes } from 'react'
 import { Visibility } from '../layout/Visibility'
 import type { FormFieldInteractionStates } from '../form/FieldLayout'
@@ -57,6 +59,7 @@ export const Checkbox = ({
   })
 
   const interactive = !disabled && !readOnly
+  const indicatorSize: IconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'
 
   return (
     <div
@@ -90,10 +93,10 @@ export const Checkbox = ({
 
       className={clsx('checkbox', props.className)}>
       <Visibility isVisible={indeterminate}>
-        <Minus className="checkbox-indicator" aria-hidden={true} />
+        <Icon icon={Minus} size={indicatorSize} className="checkbox-indicator" aria-hidden={true} />
       </Visibility>
       <Visibility isVisible={!indeterminate && (alwaysShowCheckIcon || value)}>
-        <Check className="checkbox-indicator" aria-hidden={true} />
+        <Icon icon={Check} size={indicatorSize} className="checkbox-indicator" aria-hidden={true} />
       </Visibility>
     </div>
   )
diff --git a/packages/hightide-web/src/components/user-interaction/CopyToClipboardWrapper.tsx b/packages/hightide-web/src/components/user-interaction/CopyToClipboardWrapper.tsx
index b4c5ed09..cd17ec4e 100644
--- a/packages/hightide-web/src/components/user-interaction/CopyToClipboardWrapper.tsx
+++ b/packages/hightide-web/src/components/user-interaction/CopyToClipboardWrapper.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { clsx } from 'clsx'
 import { writeToClipboard } from '../../utils/writeToClipboard'
 import { CheckIcon, Copy } from 'lucide-react'
+import { Icon } from '../display-and-visualization/Icon'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { TooltipDisplay, TooltipRoot, TooltipTrigger, type TooltipProps } from './Tooltip'
 
@@ -61,12 +62,12 @@ export const CopyToClipboardWrapper = ({
       >
         {isShowingConfirmation ? (
           <div className="flex-row-1">
-            <CheckIcon size={16} className="text-positive"/>
+            <Icon icon={CheckIcon} size="xs" className="text-positive" />
             {translation('copied')}
           </div>
         ) : (
           <div className="flex-row-1 text-description">
-            <Copy size={16}/>
+            <Icon icon={Copy} size="xs" />
             {translation('clickToCopy')}
           </div>
         )}
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
index 26c604ed..7136facd 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
+++ b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { Dialog } from '../../layout/dialog/Dialog'
 import { Button } from '../Button'
+import { Icon } from '../../display-and-visualization/Icon'
 import { IconButton } from '../IconButton'
 import { useFileInputContext } from './FileInputContext'
 import {
@@ -85,7 +86,7 @@ export const FileInputMenu = ({
       <div className="file-input-menu-list">
         {context.files.map((file) => (
           <div key={file.id} className="file-input-menu-row">
-            <FileText aria-hidden={true} />
+            <Icon icon={FileText} aria-hidden={true} />
             <span className="file-input-menu-title">{file.name}</span>
             {canEdit && (
               <IconButton
@@ -94,9 +95,8 @@ export const FileInputMenu = ({
                 color="negative"
                 coloringStyle="text"
                 onClick={() => context.removeFile(file.id)}
-              >
-                <X />
-              </IconButton>
+                icon={X}
+              />
             )}
           </div>
         ))}
@@ -107,7 +107,7 @@ export const FileInputMenu = ({
           coloringStyle="tonal"
           disabled={!context.canAddFiles}
           onClick={() => context.requestAddFiles()}
-          leading={<Plus />}
+          leading={Plus}
         >
           {translation('addFile')}
         </Button>
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
index ba4c2e3a..0ecb2bd6 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
@@ -3,6 +3,7 @@ import type React from 'react'
 import type { ComponentPropsWithoutRef, ForwardedRef, ReactNode } from 'react'
 import { forwardRef } from 'react'
 import { FileText, Pencil, Plus } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import { useFileInputContext } from './FileInputContext'
@@ -73,7 +74,7 @@ const FileInputTriggerImpl = forwardRef<HTMLDivElement, FileInputTriggerProps>(f
           <>
             {visible.map((file) => (
               <div key={file.id} className="file-input-file-row">
-                <FileText aria-hidden={true} />
+                <Icon icon={FileText} aria-hidden={true} />
                 <span className="file-input-file-name">{file.name}</span>
               </div>
             ))}
@@ -85,11 +86,7 @@ const FileInputTriggerImpl = forwardRef<HTMLDivElement, FileInputTriggerProps>(f
           </>
         ) : resolvedPlaceholder}
       </div>
-      {hasFiles ? (
-        <Pencil aria-hidden={true} />
-      ) : (
-        <Plus aria-hidden={true} />
-      )}
+      <Icon icon={hasFiles ? Pencil : Plus} aria-hidden={true} />
     </div>
   )
 })
diff --git a/packages/hightide-web/src/components/user-interaction/IconButton.tsx b/packages/hightide-web/src/components/user-interaction/IconButton.tsx
index 8be839b0..9f040bde 100644
--- a/packages/hightide-web/src/components/user-interaction/IconButton.tsx
+++ b/packages/hightide-web/src/components/user-interaction/IconButton.tsx
@@ -1,5 +1,6 @@
-import type { ForwardedRef, ReactNode } from 'react'
+import type { ElementType, ForwardedRef, ReactNode } from 'react'
 import { forwardRef,type ButtonHTMLAttributes } from 'react'
+import { Icon } from '../display-and-visualization/Icon'
 import type { TooltipDisplayProps } from './Tooltip'
 import { TooltipContext, TooltipDisplay, TooltipRoot, useTooltip } from './Tooltip'
 import { Visibility } from '../layout/Visibility'
@@ -27,10 +28,12 @@ export interface IconButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElem
      */
     coloringStyle?: IconButtonColoringStyle,
     isProcessing?: boolean,
+    icon?: ElementType,
 }
 
 export const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonBaseProps>(function IconButtonBase({
   children,
+  icon,
   size = 'md',
   color = 'primary',
   coloringStyle = 'solid',
@@ -60,7 +63,7 @@ export const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonBaseProps>
       data-color={color ?? undefined}
       data-coloringstyle={coloringStyle ?? undefined}
     >
-      {isProcessing ? <LoadingSpinner /> : children}
+      {isProcessing ? <LoadingSpinner /> : (children ?? <Icon icon={icon} />)}
     </button>
   )
 })
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
index 44aaa4e2..25e24687 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
@@ -75,9 +75,8 @@ export const MultiSelectChipDisplayTrigger = forwardRef<
             color="negative"
             coloringStyle="text"
             className="flex-row-0 items-center size-7 p-1"
-          >
-            <XIcon className="size-5" />
-          </IconButton>
+            icon={XIcon}
+          />
         </div>
       ))}
       <IconButton
@@ -108,9 +107,8 @@ export const MultiSelectChipDisplayTrigger = forwardRef<
           context.isOpen ? context.config.ids.content : undefined
         }
         className="multi-select-chip-display-add-button"
-      >
-        <Plus />
-      </IconButton>
+        icon={Plus}
+      />
     </div>
   )
 })
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
index d2a9fd43..8730bd45 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { CheckIcon } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import type React from 'react'
 import type { ForwardedRef, HTMLAttributes, RefObject } from 'react'
 import { createContext, forwardRef, useContext, useEffect, useMemo, useRef } from 'react'
@@ -123,8 +124,10 @@ const MultiSelectOptionImpl = forwardRef<
         }
       }}>
       {iconAppearanceResolved === 'left' && (
-        <CheckIcon
-          className={clsx('w-4 h-4', { 'opacity-0': !isSelected || disabled })}
+        <Icon
+          icon={CheckIcon}
+          size="xs"
+          className={clsx({ 'opacity-0': !isSelected || disabled })}
           aria-hidden={true}
         />
       )}
@@ -132,8 +135,10 @@ const MultiSelectOptionImpl = forwardRef<
         {display}
       </MultiSelectOptionDisplayContext.Provider>
       {iconAppearanceResolved === 'right' && (
-        <CheckIcon
-          className={clsx('w-4 h-4', { 'opacity-0': !isSelected || disabled })}
+        <Icon
+          icon={CheckIcon}
+          size="xs"
+          className={clsx({ 'opacity-0': !isSelected || disabled })}
           aria-hidden={true}
         />
       )}
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
index 4d69304d..245b615f 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import { CheckIcon } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import type React from 'react'
 import type { ForwardedRef, HTMLAttributes, RefObject } from 'react'
 import { createContext, forwardRef, useContext, useEffect, useMemo, useRef } from 'react'
@@ -120,15 +121,19 @@ const SelectOptionImpl = forwardRef<
         }
       }}>
       {iconAppearanceResolved === 'left' && context.selectedId !== null && (
-        <CheckIcon
-          className={clsx('w-4 h-4', { 'opacity-0': !isSelected || disabled })}
+        <Icon
+          icon={CheckIcon}
+          size="xs"
+          className={clsx({ 'opacity-0': !isSelected || disabled })}
           aria-hidden={true}
         />
       )}
       <SelectOptionDisplayContext.Provider value="list">{display}</SelectOptionDisplayContext.Provider>
       {iconAppearanceResolved === 'right' && context.selectedId !== null && (
-        <CheckIcon
-          className={clsx('w-4 h-4', { 'opacity-0': !isSelected || disabled })}
+        <Icon
+          icon={CheckIcon}
+          size="xs"
+          className={clsx({ 'opacity-0': !isSelected || disabled })}
           aria-hidden={true}
         />
       )}
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx b/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx
index 08d40b66..7186f6a2 100644
--- a/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx
@@ -86,7 +86,7 @@ export const FilterList = ({ value, onValueChange, availableItems }: FilterListP
               color="neutral"
               size="sm"
               className="min-w-36"
-              trailing={<PlusIcon className="size-4" />}
+              trailing={PlusIcon}
             >
               {translation('addFilter')}
             </Button>
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterOperator.tsx b/packages/hightide-web/src/components/user-interaction/data/FilterOperator.tsx
index 624a7498..23b2439b 100644
--- a/packages/hightide-web/src/components/user-interaction/data/FilterOperator.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/FilterOperator.tsx
@@ -10,6 +10,7 @@ import {
   CircleDashed,
   CircleDot
 } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import type { DataType } from './data-types'
 import type { ReactNode } from 'react'
 
@@ -85,16 +86,16 @@ type OperatorInfoResult = {
 }
 const getOperatorInfo = (operator: FilterOperator) : OperatorInfoResult  => {
   switch (operator) {
-  case 'equals': return { icon: <Equal className="w-4 h-4" />, translationKey: 'equals', replacementTranslationKey: 'rEquals' }
-  case 'notEquals': return { icon: <EqualNot className="w-4 h-4" />, translationKey: 'notEquals', replacementTranslationKey: 'rNotEquals' }
-  case 'contains': return { icon: <SearchCheck className="w-4 h-4" />, translationKey: 'contains', replacementTranslationKey: 'rContains' }
-  case 'notContains': return { icon: <SearchX className="w-4 h-4" />, translationKey: 'notContains', replacementTranslationKey: 'rNotContains' }
-  case 'startsWith': return { icon: <SearchCheck className="w-4 h-4" />, translationKey: 'startsWith', replacementTranslationKey: 'rStartsWith' }
-  case 'endsWith': return { icon: <SearchX className="w-4 h-4" />, translationKey: 'endsWith', replacementTranslationKey: 'rEndsWith' }
+  case 'equals': return { icon: <Icon icon={Equal} size="xs" />, translationKey: 'equals', replacementTranslationKey: 'rEquals' }
+  case 'notEquals': return { icon: <Icon icon={EqualNot} size="xs" />, translationKey: 'notEquals', replacementTranslationKey: 'rNotEquals' }
+  case 'contains': return { icon: <Icon icon={SearchCheck} size="xs" />, translationKey: 'contains', replacementTranslationKey: 'rContains' }
+  case 'notContains': return { icon: <Icon icon={SearchX} size="xs" />, translationKey: 'notContains', replacementTranslationKey: 'rNotContains' }
+  case 'startsWith': return { icon: <Icon icon={SearchCheck} size="xs" />, translationKey: 'startsWith', replacementTranslationKey: 'rStartsWith' }
+  case 'endsWith': return { icon: <Icon icon={SearchX} size="xs" />, translationKey: 'endsWith', replacementTranslationKey: 'rEndsWith' }
   case 'greaterThan': return {
     icon: (<div className="flex-row-0 items-center">
-      <ChevronRight className="w-4 h-4" />
-      <Equal className="-ml-1 w-4 h-4" />
+      <Icon icon={ChevronRight} size="xs" />
+      <Icon icon={Equal} size="xs" className="-ml-1" />
     </div>
     ),
     translationKey: 'greaterThanOrEqual',
@@ -102,22 +103,22 @@ const getOperatorInfo = (operator: FilterOperator) : OperatorInfoResult  => {
   }
   case 'greaterThanOrEqual': return {
     icon: (<div className="flex-row-0 items-center">
-      <ChevronRight className="w-4 h-4" />
-      <Equal className="-ml-1 w-4 h-4" />
+      <Icon icon={ChevronRight} size="xs" />
+      <Icon icon={Equal} size="xs" className="-ml-1" />
     </div>
     ),
     translationKey: 'greaterThanOrEqual',
     replacementTranslationKey: 'rGreaterThanOrEqual'
   }
   case 'lessThan': return {
-    icon: <ChevronLeft className="w-4 h-4" />,
+    icon: <Icon icon={ChevronLeft} size="xs" />,
     translationKey: 'lessThan',
     replacementTranslationKey: 'rLessThan'
   }
   case 'lessThanOrEqual': return {
     icon: (<div className="flex-row-0 items-center">
-      <ChevronLeft className="w-4 h-4" />
-      <Equal className="-ml-1 w-4 h-4" />
+      <Icon icon={ChevronLeft} size="xs" />
+      <Icon icon={Equal} size="xs" className="-ml-1" />
     </div>
     ),
     translationKey: 'lessThanOrEqual',
@@ -125,8 +126,8 @@ const getOperatorInfo = (operator: FilterOperator) : OperatorInfoResult  => {
   }
   case 'between': return {
     icon: (<div className="flex-row-0 items-center">
-      <ChevronRight className="w-4 h-4" />
-      <ChevronLeft className="-ml-1 w-4 h-4" />
+      <Icon icon={ChevronRight} size="xs" />
+      <Icon icon={ChevronLeft} size="xs" className="-ml-1" />
     </div>
     ),
     translationKey: 'between',
@@ -134,17 +135,17 @@ const getOperatorInfo = (operator: FilterOperator) : OperatorInfoResult  => {
   }
   case 'notBetween': return {
     icon: (<div className="flex-row-0 items-center">
-      <ChevronLeft className="w-4 h-4" />
-      <ChevronRight className="-ml-1 w-4 h-4" />
+      <Icon icon={ChevronLeft} size="xs" />
+      <Icon icon={ChevronRight} size="xs" className="-ml-1" />
     </div>
     ),
     translationKey: 'notBetween',
     replacementTranslationKey: 'rNotBetween'
   }
-  case 'isTrue': return { icon: <CheckCircle2 className="w-4 h-4" />, translationKey: 'isTrue', replacementTranslationKey: 'isTrue' }
-  case 'isFalse': return { icon: <XCircle className="w-4 h-4" />, translationKey: 'isFalse', replacementTranslationKey: 'isFalse' }
-  case 'isUndefined': return { icon: <CircleDashed className="w-4 h-4" />, translationKey: 'isUndefined', replacementTranslationKey: 'isUndefined' }
-  case 'isNotUndefined': return { icon: <CircleDot className="w-4 h-4" />, translationKey: 'isNotUndefined', replacementTranslationKey: 'isNotUndefined' }
+  case 'isTrue': return { icon: <Icon icon={CheckCircle2} size="xs" />, translationKey: 'isTrue', replacementTranslationKey: 'isTrue' }
+  case 'isFalse': return { icon: <Icon icon={XCircle} size="xs" />, translationKey: 'isFalse', replacementTranslationKey: 'isFalse' }
+  case 'isUndefined': return { icon: <Icon icon={CircleDashed} size="xs" />, translationKey: 'isUndefined', replacementTranslationKey: 'isUndefined' }
+  case 'isNotUndefined': return { icon: <Icon icon={CircleDot} size="xs" />, translationKey: 'isNotUndefined', replacementTranslationKey: 'isNotUndefined' }
   default: return { icon: null, translationKey: 'unknown translation key', replacementTranslationKey: 'unknown' }
   }
 }
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx b/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
index b8199a43..8ecc8bce 100644
--- a/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
@@ -91,18 +91,16 @@ export const FilterBasePopUp = forwardRef<HTMLDivElement, FilterPopUpBaseProps>(
             color="negative"
             coloringStyle="text"
             size="sm"
-          >
-            <TrashIcon className="size-4" />
-          </IconButton>
+            icon={TrashIcon}
+          />
           <IconButton
             tooltip={translation('done')}
             onClick={props.onClose}
             color="neutral"
             coloringStyle="text"
             size="sm"
-          >
-            <Check className="size-4" />
-          </IconButton>
+            icon={Check}
+          />
         </div>
       </div>
       {children}
diff --git a/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx b/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx
index 2c7999c6..3fd678ff 100644
--- a/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx
@@ -6,6 +6,7 @@ import { ArrowDownWideNarrow, ArrowUpNarrowWide, PlusIcon, TrashIcon, XIcon } fr
 import { PopUpRoot } from '../../layout/popup/PopUpRoot'
 import { PopUp } from '../../layout/popup/PopUp'
 import { PopUpOpener } from '../../layout/popup/PopUpOpener'
+import { Icon } from '../../display-and-visualization/Icon'
 import { Button } from '../Button'
 import { Pressable } from '../Pressable'
 import { Combobox } from '../Combobox/Combobox'
@@ -65,7 +66,7 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
               color="neutral"
               size="sm"
               className="min-w-36"
-              trailing={<PlusIcon className="size-4" />}
+              trailing={PlusIcon}
             >
               {translation('addSorting')}
             </Button>
@@ -105,7 +106,7 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
               {({ toggleOpen, props }) => (
                 <Pressable {...props} onClick={toggleOpen} color="secondary" coloringStyle="tonal-outline" size="sm">
                   <span className="font-bold">{item.label}</span>
-                  {columnSort.desc ? <ArrowDownWideNarrow className="size-5"/> : <ArrowUpNarrowWide className="size-5"/>}
+                  <Icon icon={columnSort.desc ? ArrowDownWideNarrow : ArrowUpNarrowWide} size="sm" />
                 </Pressable>
               )}
             </PopUpOpener>
@@ -130,18 +131,16 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
                           color="negative"
                           coloringStyle="text"
                           size="sm"
-                        >
-                          <TrashIcon className="size-4" />
-                        </IconButton>
+                          icon={TrashIcon}
+                        />
                         <IconButton
                           tooltip={translation('close')}
                           onClick={() => setIsOpen(false)}
                           color="neutral"
                           coloringStyle="text"
                           size="sm"
-                        >
-                          <XIcon className="size-4" />
-                        </IconButton>
+                          icon={XIcon}
+                        />
                       </div>
                     </div>
                     <div className="flex-row-1 w-full gap-2">
@@ -152,7 +151,7 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
                         coloringStyle="solid"
                         size="md"
                         onClick={() => setSortDirection(columnSort.id, false)}
-                        leading={<ArrowUpNarrowWide className="size-4" />}
+                        leading={ArrowUpNarrowWide}
                       >
                         {translation('sortAsc')}
                       </Button>
@@ -163,7 +162,7 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
                         coloringStyle="solid"
                         size="md"
                         onClick={() => setSortDirection(columnSort.id, true)}
-                        leading={<ArrowDownWideNarrow className="size-4" />}
+                        leading={ArrowDownWideNarrow}
                       >
                         {translation('sortDesc')}
                       </Button>
diff --git a/packages/hightide-web/src/components/user-interaction/data/data-types.tsx b/packages/hightide-web/src/components/user-interaction/data/data-types.tsx
index aa7206c0..55666808 100644
--- a/packages/hightide-web/src/components/user-interaction/data/data-types.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/data-types.tsx
@@ -1,4 +1,5 @@
 import { Binary, Calendar, CalendarClock, Check, Database, Tag, Tags, TextIcon } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import type { ReactNode } from 'react'
 
 const dataTypes = [
@@ -45,21 +46,21 @@ const getDefaultValue = (type: DataType, selectOptions?: string[]): DataValue =>
 function toIcon(type: DataType): ReactNode {
   switch (type) {
   case 'text':
-    return <TextIcon className="size-4" />
+    return <Icon icon={TextIcon} size="xs" />
   case 'number':
-    return <Binary className="size-4" />
+    return <Icon icon={Binary} size="xs" />
   case 'boolean':
-    return <Check className="size-4" />
+    return <Icon icon={Check} size="xs" />
   case 'date':
-    return <Calendar className="size-4" />
+    return <Icon icon={Calendar} size="xs" />
   case 'dateTime':
-    return <CalendarClock className="size-4" />
+    return <Icon icon={CalendarClock} size="xs" />
   case 'singleTag':
-    return <Tag className="size-4" />
+    return <Icon icon={Tag} size="xs" />
   case 'multiTags':
-    return <Tags className="size-4" />
+    return <Icon icon={Tags} size="xs" />
   case 'unknownType':
-    return <Database className="size-4" />
+    return <Icon icon={Database} size="xs" />
   }
 }
 
diff --git a/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx b/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx
index 164c7280..59d05719 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx
@@ -62,7 +62,7 @@ export const DatePicker = ({
           size="sm"
           color="neutral"
           onClick={() => setDisplayMode(displayMode === 'day' ? 'yearMonth' : 'day')}
-          trailing={<ChevronDown size={16}/>}
+          trailing={ChevronDown}
         >
           {`${new Intl.DateTimeFormat(LocalizationUtil.isoLocaleToLanguage(locale), { month: 'short' }).format(displayedMonth)} ${displayedMonth.getFullYear()}`}
         </Button>
@@ -78,9 +78,8 @@ export const DatePicker = ({
               setValue(newDate)
               setDisplayedMonth(newDate)
             }}
-          >
-            <Calendar className="size-5"/>
-          </IconButton>
+            icon={Calendar}
+          />
           <IconButton
             tooltip={translation('time.previousMonth')}
             size="sm"
@@ -88,9 +87,8 @@ export const DatePicker = ({
             onClick={() => {
               setDisplayedMonth(DateUtils.subtractDuration(displayedMonth, { months: 1 }))
             }}
-          >
-            <ArrowUp size={20}/>
-          </IconButton>
+            icon={ArrowUp}
+          />
           <IconButton
             tooltip={translation('time.nextMonth')}
             size="sm"
@@ -98,9 +96,8 @@ export const DatePicker = ({
             onClick={() => {
               setDisplayedMonth(DateUtils.addDuration(displayedMonth, { months: 1 }))
             }}
-          >
-            <ArrowDown size={20}/>
-          </IconButton>
+            icon={ArrowDown}
+          />
         </div>
       </div>
       {displayMode === 'yearMonth' ? (
diff --git a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
index aa89974a..e613bee0 100644
--- a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
@@ -160,9 +160,8 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
                 setState(null)
                 onEditComplete?.(null)
               }}
-            >
-              <X className="size-5"/>
-            </IconButton>
+              icon={X}
+            />
           </Visibility>
           <Visibility isVisible={hasTimePicker}>
             <IconButton
@@ -175,9 +174,8 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
               aria-haspopup="dialog"
               aria-expanded={isOpen}
               aria-controls={isOpen ? ids.popup : undefined}
-            >
-              <CalendarIcon className="size-5"/>
-            </IconButton>
+              icon={CalendarIcon}
+            />
           </Visibility>
         </div>
       </div>
diff --git a/packages/hightide-web/src/components/user-interaction/input/FlexibleDateTimeInput.tsx b/packages/hightide-web/src/components/user-interaction/input/FlexibleDateTimeInput.tsx
index 75ee2066..db365f19 100644
--- a/packages/hightide-web/src/components/user-interaction/input/FlexibleDateTimeInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/FlexibleDateTimeInput.tsx
@@ -71,9 +71,8 @@ export const FlexibleDateTimeInput = forwardRef<HTMLDivElement, FlexibleDateTime
             }
             setMode(nextMode)
           }}
-        >
-          {mode === 'date' ? <ClockPlus className="size-5"/> : <ClockFading className="size-5"/>}
-        </IconButton>,
+          icon={mode === 'date' ? ClockPlus : ClockFading}
+        />
       ]}
     />
   )
diff --git a/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx b/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
index f633424c..171771b2 100644
--- a/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
@@ -128,9 +128,8 @@ export const NumberStepperInput = forwardRef<HTMLInputElement, NumberStepperInpu
       onPointerUp={() => stop('button', 1)}
       onPointerLeave={() => stop('button', 1)}
       onPointerCancel={() => stop('button', 1)}
-    >
-      <Plus aria-hidden={true} />
-    </IconButton>
+      icon={Plus}
+    />
   )
 
   const minusButton = (
@@ -147,9 +146,8 @@ export const NumberStepperInput = forwardRef<HTMLInputElement, NumberStepperInpu
       onPointerUp={() => stop('button', -1)}
       onPointerLeave={() => stop('button', -1)}
       onPointerCancel={() => stop('button', -1)}
-    >
-      <Minus aria-hidden={true} />
-    </IconButton>
+      icon={Minus}
+    />
   )
 
   return (
diff --git a/packages/hightide-web/src/components/user-interaction/input/SearchBar.tsx b/packages/hightide-web/src/components/user-interaction/input/SearchBar.tsx
index e3802487..f0df0334 100644
--- a/packages/hightide-web/src/components/user-interaction/input/SearchBar.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/SearchBar.tsx
@@ -1,6 +1,7 @@
 import type { InputProps } from './Input'
 import { Input } from './Input'
 import { Search } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import { clsx } from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import type { HTMLAttributes } from 'react'
@@ -49,7 +50,7 @@ export const SearchBar = ({
         onClick={() => onSearch(value)}
         className={clsx('search-bar-icon-button', searchButtonProps?.className)}
       >
-        <Search className="search-bar-icon"/>
+        <Icon icon={Search} size="sm" className="search-bar-icon" />
       </IconButton>
     </div>
   )
diff --git a/packages/hightide-web/src/components/user-interaction/input/ToggleableInput.tsx b/packages/hightide-web/src/components/user-interaction/input/ToggleableInput.tsx
index 25992e4a..35ba8729 100644
--- a/packages/hightide-web/src/components/user-interaction/input/ToggleableInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/ToggleableInput.tsx
@@ -1,5 +1,6 @@
 import { forwardRef, useEffect, useRef, useState } from 'react'
 import { Pencil } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import clsx from 'clsx'
 import type { EditCompleteOptions, InputProps } from './Input'
 import { Input } from './Input'
@@ -68,7 +69,7 @@ export const ToggleableInput = forwardRef<HTMLInputElement, ToggleableInputProps
           <span className={clsx(' truncate')}>
             {value}
           </span>
-          <Pencil className={clsx(`size-force-4`, { 'text-transparent': isEditing })} />
+          <Icon icon={Pencil} size="xs" className={clsx({ 'text-transparent': isEditing })} />
         </div>
       )}
     </div>
diff --git a/packages/hightide-web/src/components/user-interaction/properties/CheckboxProperty.tsx b/packages/hightide-web/src/components/user-interaction/properties/CheckboxProperty.tsx
index c735842c..ff3a2f51 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/CheckboxProperty.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/CheckboxProperty.tsx
@@ -1,4 +1,5 @@
 import { Check } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import { PropertyBase, type PropertyField } from './PropertyBase'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { Button } from '../Button'
@@ -23,15 +24,15 @@ export const CheckboxProperty = ({
       {...baseProps}
       hasValue={value !== undefined}
       readOnly={readOnly}
-      icon={<Check size={24}/>}
+      icon={<Icon icon={Check} />}
     >
       {() => (
         <div className="flex-row-2 items-center">
           <Button
             color={value ? 'positive' : 'neutral'} size="sm"
             onClick={() => {
-              onValueChange(true)
-              onEditComplete(true)
+              onValueChange?.(true)
+              onEditComplete?.(true)
             }}
             className="min-w-20"
           >
@@ -40,8 +41,8 @@ export const CheckboxProperty = ({
           <Button
             color={!value && value !== undefined ? 'negative' : 'neutral'} size="sm"
             onClick={() => {
-              onValueChange(false)
-              onEditComplete(false)
+              onValueChange?.(false)
+              onEditComplete?.(false)
             }}
             className="min-w-20"
           >
diff --git a/packages/hightide-web/src/components/user-interaction/properties/DateProperty.tsx b/packages/hightide-web/src/components/user-interaction/properties/DateProperty.tsx
index 2ce0a488..24b4aec2 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/DateProperty.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/DateProperty.tsx
@@ -1,4 +1,5 @@
 import { CalendarDays } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import { PropertyBase, type PropertyField } from './PropertyBase'
 import { DateTimeInput, type DateTimeInputProps } from '../input/DateTimeInput'
 import { PropsUtil } from '../../../utils/propsUtil'
@@ -41,7 +42,7 @@ export const DateProperty = ({
         onEditComplete?.(null)
       })}
       hasValue={hasValue}
-      icon={<CalendarDays size={24}/>}
+      icon={<Icon icon={CalendarDays} />}
       className={className}
     >
       {({ invalid }) => (
diff --git a/packages/hightide-web/src/components/user-interaction/properties/MultiSelectProperty.tsx b/packages/hightide-web/src/components/user-interaction/properties/MultiSelectProperty.tsx
index df501cf5..b9207716 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/MultiSelectProperty.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/MultiSelectProperty.tsx
@@ -1,4 +1,5 @@
 import { List } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import { PropertyBase, type PropertyField } from './PropertyBase'
 import type { PropsWithChildren } from 'react'
 import { PropsUtil } from '../../../utils/propsUtil'
@@ -19,7 +20,7 @@ export const MultiSelectProperty = ({
     <PropertyBase
       {...props}
       hasValue={hasValue}
-      icon={<List size={24}/>}
+      icon={<Icon icon={List} />}
     >
       {({ invalid }) => (
         <div
diff --git a/packages/hightide-web/src/components/user-interaction/properties/NumberProperty.tsx b/packages/hightide-web/src/components/user-interaction/properties/NumberProperty.tsx
index 41e59382..81c6cf6d 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/NumberProperty.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/NumberProperty.tsx
@@ -1,4 +1,5 @@
 import { Binary } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import { Input } from '../input/Input'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import type { PropertyField } from './PropertyBase'
@@ -28,7 +29,7 @@ export const NumberProperty = ({
       {...baseProps}
       onValueClear={onValueClear}
       hasValue={hasValue}
-      icon={<Binary size={24}/>}
+      icon={<Icon icon={Binary} />}
     >
       {({ invalid }) => (
         <div
diff --git a/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx b/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx
index b4c7d8ab..bba48c05 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react'
 import clsx from 'clsx'
 import { AlertTriangle, Trash, X } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { Tooltip } from '../Tooltip'
 import { PropsUtil } from '../../../utils/propsUtil'
@@ -66,9 +67,8 @@ export const PropertyBase = ({
           color="negative"
           coloringStyle="text"
           size="sm"
-        >
-          <X className="size-force-5" />
-        </IconButton>
+          icon={X}
+        />
       )}
       {isRemoveEnabled && (
         <IconButton
@@ -77,9 +77,8 @@ export const PropertyBase = ({
           color="negative"
           coloringStyle="text"
           size="sm"
-        >
-          <Trash className="size-force-5" />
-        </IconButton>
+          icon={Trash}
+        />
       )}
     </>
   )
@@ -102,7 +101,7 @@ export const PropertyBase = ({
               </div>
             </Tooltip>
             {invalid && (
-              <AlertTriangle className="size-force-6 shrink-0"/>
+              <Icon icon={AlertTriangle} />
             )}
           </div>
           {showActionsContainer && (
diff --git a/packages/hightide-web/src/components/user-interaction/properties/SelectProperty.tsx b/packages/hightide-web/src/components/user-interaction/properties/SelectProperty.tsx
index a02a9de5..e8f97578 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/SelectProperty.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/SelectProperty.tsx
@@ -1,4 +1,5 @@
 import { List } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import type { PropsWithChildren } from 'react'
 import type { PropertyField } from './PropertyBase'
 import { PropertyBase } from './PropertyBase'
@@ -20,7 +21,7 @@ export const SingleSelectProperty = ({
     <PropertyBase
       {...props}
       hasValue={hasValue}
-      icon={<List size={24}/>}
+      icon={<Icon icon={List} />}
     >
       {({ invalid }) => (
         <div
diff --git a/packages/hightide-web/src/components/user-interaction/properties/TextProperty.tsx b/packages/hightide-web/src/components/user-interaction/properties/TextProperty.tsx
index 60bcd0be..3b4a7269 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/TextProperty.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/TextProperty.tsx
@@ -1,4 +1,5 @@
 import { Text } from 'lucide-react'
+import { Icon } from '../../display-and-visualization/Icon'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { Textarea } from '../Textarea'
 import type { PropertyField } from './PropertyBase'
@@ -24,7 +25,7 @@ export const TextProperty = ({
     <PropertyBase
       {...baseProps}
       hasValue={hasValue}
-      icon={<Text size={24}/>}
+      icon={<Icon icon={Text} />}
     >
       {({ invalid }) => (
         <Textarea
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-attachment-card.css b/packages/hightide-web/src/style/theme/components/chat/chat-attachment-card.css
index 082506f7..cfddd67c 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-attachment-card.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-attachment-card.css
@@ -11,14 +11,6 @@
     }
   }
 
-  .chat-attachment-card-icon {
-    @apply flex-row-0 shrink-0 items-center justify-center size-11 rounded-md negative coloring-tonal;
-
-    > svg {
-      @apply size-5.5;
-    }
-  }
-
   .chat-attachment-card-info {
     @apply flex-col-0 gap-y-0.5 grow min-w-0;
   }
diff --git a/packages/hightide-web/src/style/theme/components/icon.css b/packages/hightide-web/src/style/theme/components/icon.css
new file mode 100644
index 00000000..afbc0877
--- /dev/null
+++ b/packages/hightide-web/src/style/theme/components/icon.css
@@ -0,0 +1,50 @@
+@layer components {
+  .icon {
+    @apply block shrink-0 overflow-hidden;
+
+    &[data-size="xs"] {
+      width: var(--icon-size-xs);
+      height: var(--icon-size-xs);
+      min-width: var(--icon-size-xs);
+      max-width: var(--icon-size-xs);
+      min-height: var(--icon-size-xs);
+      max-height: var(--icon-size-xs);
+    }
+
+    &[data-size="sm"] {
+      width: var(--icon-size-sm);
+      height: var(--icon-size-sm);
+      min-width: var(--icon-size-sm);
+      max-width: var(--icon-size-sm);
+      min-height: var(--icon-size-sm);
+      max-height: var(--icon-size-sm);
+    }
+
+    &[data-size="md"] {
+      width: var(--icon-size-md);
+      height: var(--icon-size-md);
+      min-width: var(--icon-size-md);
+      max-width: var(--icon-size-md);
+      min-height: var(--icon-size-md);
+      max-height: var(--icon-size-md);
+    }
+
+    &[data-size="lg"] {
+      width: var(--icon-size-lg);
+      height: var(--icon-size-lg);
+      min-width: var(--icon-size-lg);
+      max-width: var(--icon-size-lg);
+      min-height: var(--icon-size-lg);
+      max-height: var(--icon-size-lg);
+    }
+
+    &[data-size="xl"] {
+      width: var(--icon-size-xl);
+      height: var(--icon-size-xl);
+      min-width: var(--icon-size-xl);
+      max-width: var(--icon-size-xl);
+      min-height: var(--icon-size-xl);
+      max-height: var(--icon-size-xl);
+    }
+  }
+}
diff --git a/packages/hightide-web/src/style/theme/components/index.css b/packages/hightide-web/src/style/theme/components/index.css
index a00efe75..700debbd 100644
--- a/packages/hightide-web/src/style/theme/components/index.css
+++ b/packages/hightide-web/src/style/theme/components/index.css
@@ -2,6 +2,7 @@
 @import "./pressable.css";
 @import "./button.css";
 @import "./tooltip.css";
+@import "./icon.css";
 @import "./icon-button.css";
 @import "./card.css";
 @import "./list-item.css";
diff --git a/packages/hightide-web/src/style/theme/variables.css b/packages/hightide-web/src/style/theme/variables.css
index 82e46dc0..e7f69451 100644
--- a/packages/hightide-web/src/style/theme/variables.css
+++ b/packages/hightide-web/src/style/theme/variables.css
@@ -9,6 +9,12 @@
   --scrollbar-padding: 1px;
 
   --coloring-outline-width: calc(0.5 * var(--spacing));
+
+  --icon-size-xs: 16px;
+  --icon-size-sm: 20px;
+  --icon-size-md: 24px;
+  --icon-size-lg: 32px;
+  --icon-size-xl: 48px;
 }
 
 @theme {
diff --git a/packages/hightide-web/stories/Display And Visualization/Icon.stories.tsx b/packages/hightide-web/stories/Display And Visualization/Icon.stories.tsx
new file mode 100644
index 00000000..05796d93
--- /dev/null
+++ b/packages/hightide-web/stories/Display And Visualization/Icon.stories.tsx	
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Plus } from 'lucide-react'
+import { iconSizes } from '../../src/components/display-and-visualization/Icon'
+import { Icon } from '../../src/components/display-and-visualization/Icon'
+
+const meta = {
+  component: Icon,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: iconSizes,
+    },
+  },
+} satisfies Meta<typeof Icon>
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const icon: Story = {
+  args: {
+    size: 'md',
+  },
+  render: ({ size }) => {
+    return (
+      <div className="flex-row-4 items-end">
+        <Icon size={size} className="bg-primary" />
+        <Icon size={size} icon={Plus} />
+      </div>
+    )
+  },
+}
diff --git a/packages/hightide-web/stories/User Interaction/Button.stories.tsx b/packages/hightide-web/stories/User Interaction/Button.stories.tsx
index 45d60d74..56f5b64b 100644
--- a/packages/hightide-web/stories/User Interaction/Button.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Button.stories.tsx	
@@ -33,10 +33,10 @@ export const button: Story = {
         <Button {...props}>
           {children}
         </Button>
-        <Button {...props} leading={<Check size={16} />}>
+        <Button {...props} leading={Check}>
           {children}
         </Button>
-        <Button {...props} trailing={<ChevronRight size={16} />}>
+        <Button {...props} trailing={ChevronRight}>
           {children}
         </Button>
       </div>
diff --git a/packages/hightide-web/stories/User Interaction/IconButton.stories.tsx b/packages/hightide-web/stories/User Interaction/IconButton.stories.tsx
index 80816a0c..aa6867b1 100644
--- a/packages/hightide-web/stories/User Interaction/IconButton.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/IconButton.stories.tsx	
@@ -26,13 +26,6 @@ export const iconButton: Story = {
     coloringStyle: 'solid',
     tooltip: 'Subtract',
     onClick: action('Clicked'),
-    children: <MinusIcon className="size-4"/>,
+    icon: MinusIcon,
   },
-  render: ({ children, ...props }) => {
-    return (
-      <IconButton {...props}>
-        {children}
-      </IconButton>
-    )
-  }
 }

From 464211e499d8dd61d65c78546e856490a1a49158 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Tue, 29 Sep 2026 10:26:35 +0200
Subject: [PATCH 07/25] feat: update coloring definitions and add pressable
 component

---
 .../components/chat/ChatAttachmentCard.tsx    |   2 +-
 .../components/chat/ChatMessageComposer.tsx   |   2 +-
 .../process-model/ProcessModelTraceReplay.tsx |   4 +-
 .../src/components/layout/TextImage.tsx       |   2 +-
 .../src/components/layout/app/AppPage.tsx     |   4 +-
 .../src/components/layout/dialog/Dialog.tsx   |   2 +-
 .../layout/drawer/DrawerCloseButton.tsx       |   2 +-
 .../layout/loading/LoadingSpinner.tsx         |   6 +-
 .../layout/navigation/Navigation.tsx          |   4 +-
 .../layout/navigation/Pagination.tsx          |   8 +-
 .../VerticalNavigationMenuItem.tsx            |   2 +-
 .../layout/table/TableColumnSwitcher.tsx      |  14 +-
 .../components/user-interaction/Button.tsx    |  32 +++-
 .../FileInput/FileInputMenu.tsx               |   4 +-
 .../user-interaction/IconButton.tsx           |  24 +--
 .../MultiSelectChipDisplayTrigger.tsx         |   2 +-
 .../components/user-interaction/Pressable.tsx |  50 +++++-
 .../user-interaction/data/FilterList.tsx      |   2 +-
 .../user-interaction/data/FilterPopUp.tsx     |   4 +-
 .../user-interaction/data/SortingList.tsx     |  10 +-
 .../user-interaction/date/DatePicker.tsx      |   2 +-
 .../user-interaction/input/DateTimeInput.tsx  |   4 +-
 .../input/FlexibleDateTimeInput.tsx           |   2 +-
 .../input/NumberStepperInput.tsx              |   4 +-
 .../user-interaction/input/SearchBar.tsx      |   2 +-
 .../properties/PropertyBase.tsx               |   4 +-
 .../src/style/theme/colors/semantic.css       |   4 +
 .../src/style/theme/components/button.css     |  13 +-
 .../style/theme/components/icon-button.css    |  21 +--
 .../src/style/theme/components/pressable.css  |  18 +-
 .../src/style/theme/variables.css             |   3 +
 .../src/style/utitlity/coloring.css           | 163 ++++++++++++++++++
 .../Chat/ChatConversationList.stories.tsx     |   2 +-
 .../stories/Chat/ChatDemo.stories.tsx         |  12 +-
 .../Chat/ChatMessageComposer.stories.tsx      |   4 +-
 .../stories/Chat/ChatThreadHeader.stories.tsx |   8 +-
 .../stories/Layout/AppPage.stories.tsx        |   4 +-
 .../User Interaction/Button.stories.tsx       |   9 +-
 .../User Interaction/IconButton.stories.tsx   |   2 +-
 .../User Interaction/Pressable.stories.tsx    |   2 +-
 .../Utilities/hooks/useDelay.stories.tsx      |   2 +-
 41 files changed, 344 insertions(+), 121 deletions(-)

diff --git a/packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx b/packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx
index 83f8a001..84f57c07 100644
--- a/packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx
+++ b/packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx
@@ -41,7 +41,7 @@ export const ChatAttachmentCard = ({
           tooltip={downloadLabel}
           size="sm"
           color="primary"
-          coloringStyle="text"
+          variant="foreground"
           onClick={onDownload}
         >
           <Icon icon={Download} />
diff --git a/packages/hightide-web/src/components/chat/ChatMessageComposer.tsx b/packages/hightide-web/src/components/chat/ChatMessageComposer.tsx
index f120d74a..3449330c 100644
--- a/packages/hightide-web/src/components/chat/ChatMessageComposer.tsx
+++ b/packages/hightide-web/src/components/chat/ChatMessageComposer.tsx
@@ -90,7 +90,7 @@ export const ChatMessageComposer = ({
       <IconButton
         tooltip={sendLabel}
         color="primary"
-        coloringStyle="solid"
+        variant="filled"
         disabled={disabled || !(value ?? '').trim()}
         size="md"
         onClick={send}
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
index bada093a..83470301 100644
--- a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
@@ -274,7 +274,7 @@ export const ProcessModelTraceReplay = ({ graph, className }: ProcessModelTraceR
       <div className="process-model-trace-replay-toolbar">
         <Button
           color="primary"
-          coloringStyle={isPlaying ? 'outline' : 'solid'}
+          variant={isPlaying ? 'outlined' : 'filled'}
           className="min-w-48"
           onClick={() => {
             if (isPlaying) {
@@ -289,7 +289,7 @@ export const ProcessModelTraceReplay = ({ graph, className }: ProcessModelTraceR
         </Button>
         <Button
           color="primary"
-          coloringStyle="outline"
+          variant="outlined"
           onClick={resetReplay}
           leading={RotateCcw}
         >
diff --git a/packages/hightide-web/src/components/layout/TextImage.tsx b/packages/hightide-web/src/components/layout/TextImage.tsx
index 50a7d853..51ec4d3f 100644
--- a/packages/hightide-web/src/components/layout/TextImage.tsx
+++ b/packages/hightide-web/src/components/layout/TextImage.tsx
@@ -65,7 +65,7 @@ export const TextImage = ({
           <div className="flex-row-2 mt-2 underline">
             <Button
               color="neutral"
-              coloringStyle="text"
+              variant="foreground"
               onClick={onShowMoreClicked}
             >
               {translation('showMore')}
diff --git a/packages/hightide-web/src/components/layout/app/AppPage.tsx b/packages/hightide-web/src/components/layout/app/AppPage.tsx
index e148fc9f..595bc650 100644
--- a/packages/hightide-web/src/components/layout/app/AppPage.tsx
+++ b/packages/hightide-web/src/components/layout/app/AppPage.tsx
@@ -48,7 +48,7 @@ export const AppSidebar = ({ isOpen = false, onClose, children, ...props }: AppS
               className="app-sidebar-close-button"
               tooltip={translation('close')}
               onClick={onClose}
-              coloringStyle="text"
+              variant="foreground"
               color="neutral"
             >
               <Icon icon={X} />
@@ -213,7 +213,7 @@ export const AppPage = ({
             className="app-page-menu-button"
             tooltip={translation('menu')}
             onClick={() => setIsSidebarOpen(prev => !prev)}
-            coloringStyle="text"
+            variant="foreground"
           >
             <Icon icon={MenuIcon} />
           </IconButton>
diff --git a/packages/hightide-web/src/components/layout/dialog/Dialog.tsx b/packages/hightide-web/src/components/layout/dialog/Dialog.tsx
index 185aeb47..c173880e 100644
--- a/packages/hightide-web/src/components/layout/dialog/Dialog.tsx
+++ b/packages/hightide-web/src/components/layout/dialog/Dialog.tsx
@@ -157,7 +157,7 @@ export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog({
                     tooltip={translation('closeDialog')}
                     size="xs"
                     color="neutral"
-                    coloringStyle="text"
+                    variant="foreground"
                     onClick={onCloseWrapper}
                     icon={X}
                   />
diff --git a/packages/hightide-web/src/components/layout/drawer/DrawerCloseButton.tsx b/packages/hightide-web/src/components/layout/drawer/DrawerCloseButton.tsx
index f90cf66d..8e228349 100644
--- a/packages/hightide-web/src/components/layout/drawer/DrawerCloseButton.tsx
+++ b/packages/hightide-web/src/components/layout/drawer/DrawerCloseButton.tsx
@@ -20,7 +20,7 @@ export function DrawerCloseButton({
 
   return (
     <IconButton
-      coloringStyle="text"
+      variant="foreground"
       color="neutral"
       size="sm"
 
diff --git a/packages/hightide-web/src/components/layout/loading/LoadingSpinner.tsx b/packages/hightide-web/src/components/layout/loading/LoadingSpinner.tsx
index 81910529..458f53f5 100644
--- a/packages/hightide-web/src/components/layout/loading/LoadingSpinner.tsx
+++ b/packages/hightide-web/src/components/layout/loading/LoadingSpinner.tsx
@@ -1,16 +1,18 @@
 import { LoaderCircle } from 'lucide-react'
 import clsx from 'clsx'
+import type { IconSize } from '../../display-and-visualization/Icon'
 import { Icon } from '../../display-and-visualization/Icon'
 
 export type LoadingSpinnerProps = {
   className?: string,
+  size?: IconSize,
 }
 
-export const LoadingSpinner = ({ className }: LoadingSpinnerProps) => {
+export const LoadingSpinner = ({ className, size = 'xs' }: LoadingSpinnerProps) => {
   return (
     <Icon
       icon={LoaderCircle}
-      size="xs"
+      size={size}
       className={clsx('animate-spin', className)}
       aria-hidden
     />
diff --git a/packages/hightide-web/src/components/layout/navigation/Navigation.tsx b/packages/hightide-web/src/components/layout/navigation/Navigation.tsx
index b7f0122e..b1104307 100644
--- a/packages/hightide-web/src/components/layout/navigation/Navigation.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/Navigation.tsx
@@ -203,7 +203,7 @@ export const Navigation = ({ ...props }: NavigationProps) => {
       <IconButton
         ref={menuButtonRef}
         tooltip={translation('menu')}
-        coloringStyle="text"
+        variant="foreground"
         color="neutral"
         onClick={() => setIsMobileOpen(true)}
 
@@ -229,7 +229,7 @@ export const Navigation = ({ ...props }: NavigationProps) => {
         <IconButton
           ref={closeRef}
           tooltip={translation('close')}
-          coloringStyle="text"
+          variant="foreground"
           color="neutral"
           onClick={() => setIsMobileOpen(false)}
           onKeyDown={(event) => {
diff --git a/packages/hightide-web/src/components/layout/navigation/Pagination.tsx b/packages/hightide-web/src/components/layout/navigation/Pagination.tsx
index 40d20792..83402e2b 100644
--- a/packages/hightide-web/src/components/layout/navigation/Pagination.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/Pagination.tsx
@@ -45,14 +45,14 @@ export const Pagination = ({
     <div {...props} className={clsx('flex-row-1', props.className)} >
       <IconButton
         tooltip={translation('first')}
-        coloringStyle="text"
+        variant="foreground"
         color="neutral"
         onClick={() => changePage(0)} disabled={onFirstPage || noPages}
         icon={ChevronFirst}
       />
       <IconButton
         tooltip={translation('previous')}
-        coloringStyle="text"
+        variant="foreground"
         color="neutral"
         onClick={() => changePage(pageIndex - 1)} disabled={onFirstPage || noPages}
         icon={ChevronLeft}
@@ -88,14 +88,14 @@ export const Pagination = ({
       </div>
       <IconButton
         tooltip={translation('next')}
-        coloringStyle="text"
+        variant="foreground"
         color="neutral"
         onClick={() => changePage(pageIndex + 1)} disabled={onLastPage || noPages}
         icon={ChevronRight}
       />
       <IconButton
         tooltip={translation('last')}
-        coloringStyle="text"
+        variant="foreground"
         color="neutral"
         onClick={() => changePage(pageCount - 1)} disabled={onLastPage || noPages}
         icon={ChevronLast}
diff --git a/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx b/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
index 4825ae52..d0ea93d5 100644
--- a/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
@@ -100,7 +100,7 @@ export function VerticalNavigationMenuItem({
           <IconButton
             ref={ref}
             type="button"
-            coloringStyle="text"
+            variant="foreground"
             color="neutral"
             aria-label={`${expanded ? 'Collapse' : 'Expand'} ${typeof label === 'string' ? label : id}`}
             aria-expanded={expanded}
diff --git a/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx b/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx
index 992ba215..f8a31978 100644
--- a/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx
+++ b/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx
@@ -204,7 +204,7 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
               tooltip={allColumnsVisible ? translation('hideAllColumns') : translation('showAllColumns')}
               size="sm"
               color="neutral"
-              coloringStyle="text"
+              variant="foreground"
               disabled={!hasHideableColumns}
               onClick={toggleAllColumnsVisibility}
               aria-label={allColumnsVisible ? translation('hideAllColumns') : translation('showAllColumns')}
@@ -238,7 +238,7 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                       tooltip={translation('pinToLeft')}
                       size="sm"
                       color="neutral"
-                      coloringStyle="text"
+                      variant="foreground"
                       disabled={pinState === 'left'}
                       onClick={() => pinColumn(columnId, 'left')}
                       icon={ChevronLeft}
@@ -247,7 +247,7 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                       tooltip={translation('pinToRight')}
                       size="sm"
                       color="neutral"
-                      coloringStyle="text"
+                      variant="foreground"
                       disabled={pinState === 'right'}
                       onClick={() => pinColumn(columnId, 'right')}
                       icon={ChevronRight}
@@ -259,7 +259,7 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                       tooltip={translation('increaseSortingPriority')}
                       size="sm"
                       color="neutral"
-                      coloringStyle="text"
+                      variant="foreground"
                       disabled={!canMoveUp}
                       onClick={() => moveColumn(columnId, 'up')}
                       icon={ChevronUp}
@@ -268,7 +268,7 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                       tooltip={translation('decreaseSortingPriority')}
                       size="sm"
                       color="neutral"
-                      coloringStyle="text"
+                      variant="foreground"
                       disabled={!canMoveDown}
                       onClick={() => moveColumn(columnId, 'down')}
                       icon={ChevronDown}
@@ -285,7 +285,7 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                     tooltip={translation('changeVisibility')}
                     size="sm"
                     color="neutral"
-                    coloringStyle="text"
+                    variant="foreground"
                     disabled={!column.getCanHide()}
                     onClick={() => toggleColumnVisibility(columnId)}
                     aria-label={isVisible ? translation('hideColumn') : translation('showColumn')}
@@ -297,7 +297,7 @@ export const TableColumnSwitcherPopUp = ({ ...props }: TableColumnSwitcherPopUpP
                     tooltip={translation('changePinning')}
                     size="sm"
                     color="neutral"
-                    coloringStyle="text"
+                    variant="foreground"
                     disabled={!column.getCanPin()}
                     onClick={() => {
                       if(isPinned) {
diff --git a/packages/hightide-web/src/components/user-interaction/Button.tsx b/packages/hightide-web/src/components/user-interaction/Button.tsx
index 89c71a8b..9eb01911 100644
--- a/packages/hightide-web/src/components/user-interaction/Button.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Button.tsx
@@ -4,22 +4,28 @@ import { forwardRef } from 'react'
 
 import type { IconSize } from '../display-and-visualization/Icon'
 import { Icon } from '../display-and-visualization/Icon'
-import type { PressableProps } from './Pressable'
-import { Pressable } from './Pressable'
+import { LoadingSpinner } from '../layout/loading/LoadingSpinner'
+import type { ButtonVariant, PressableProps } from './Pressable'
+import { mapButtonVariant, Pressable } from './Pressable'
 
 export {
   ButtonUtil,
   Pressable,
+  buttonVariants,
+  mapButtonVariant,
   type ButtonColor,
-  type ButtonColoringStyle,
   type ButtonSize,
+  type ButtonVariant,
+  type ColoringColorVariant,
+  type ColoringStyle,
   type PressableProps,
 } from './Pressable'
 
-export type ButtonProps = Omit<PressableProps, 'children'> & {
+export type ButtonProps = Omit<PressableProps, 'children' | 'coloringStyle' | 'colorVariant' | 'bordered' | 'elevated' | 'processingIndicator'> & {
   children: string,
   leading?: ElementType,
   trailing?: ElementType,
+  variant?: ButtonVariant,
 }
 
 const buttonIconSize = (size: ButtonProps['size']): IconSize => (
@@ -32,22 +38,34 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
   trailing,
   className,
   size = 'md',
+  variant = 'filled',
+  isProcessing = false,
   ...props
 }, ref) {
   const iconSize = buttonIconSize(size)
+  const coloring = mapButtonVariant(variant)
+  const showLeadingSpinner = isProcessing && !!leading && !trailing
+  const showTrailingSpinner = isProcessing && !showLeadingSpinner
 
   return (
     <Pressable
       {...props}
+      {...coloring}
       ref={ref}
       size={size}
-      className={clsx('button', className)}
+      isProcessing={isProcessing}
+      processingIndicator={false}
+      className={clsx('button coloring', className)}
     >
-      {leading && (
+      {showLeadingSpinner ? (
+        <LoadingSpinner size={iconSize} />
+      ) : leading && (
         <Icon icon={leading} size={iconSize} />
       )}
       {children}
-      {trailing && (
+      {showTrailingSpinner ? (
+        <LoadingSpinner size={iconSize} />
+      ) : trailing && (
         <Icon icon={trailing} size={iconSize} />
       )}
     </Pressable>
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
index 7136facd..f8cd0709 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
+++ b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
@@ -93,7 +93,7 @@ export const FileInputMenu = ({
                 tooltip={translation('remove')}
                 size="sm"
                 color="negative"
-                coloringStyle="text"
+                variant="foreground"
                 onClick={() => context.removeFile(file.id)}
                 icon={X}
               />
@@ -104,7 +104,7 @@ export const FileInputMenu = ({
       {canEdit && (
         <Button
           color="primary"
-          coloringStyle="tonal"
+          variant="tonal"
           disabled={!context.canAddFiles}
           onClick={() => context.requestAddFiles()}
           leading={Plus}
diff --git a/packages/hightide-web/src/components/user-interaction/IconButton.tsx b/packages/hightide-web/src/components/user-interaction/IconButton.tsx
index 9f040bde..81f37a17 100644
--- a/packages/hightide-web/src/components/user-interaction/IconButton.tsx
+++ b/packages/hightide-web/src/components/user-interaction/IconButton.tsx
@@ -1,6 +1,8 @@
 import type { ElementType, ForwardedRef, ReactNode } from 'react'
 import { forwardRef,type ButtonHTMLAttributes } from 'react'
 import { Icon } from '../display-and-visualization/Icon'
+import type { ButtonColor, IconButtonVariant } from './Pressable'
+import { mapButtonVariant } from './Pressable'
 import type { TooltipDisplayProps } from './Tooltip'
 import { TooltipContext, TooltipDisplay, TooltipRoot, useTooltip } from './Tooltip'
 import { Visibility } from '../layout/Visibility'
@@ -14,19 +16,13 @@ import clsx from 'clsx'
  */
 type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg' | null
 
-type IconButtonColoringStyle = 'outline' | 'solid' | 'text' | 'tonal' | 'tonal-outline' | null
-
-
-
-export interface IconButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IconButtonBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
     /**
      * @default 'medium'
      */
     size?: IconButtonSize,
-    /**
-     * @default 'solid'
-     */
-    coloringStyle?: IconButtonColoringStyle,
+    color?: ButtonColor,
+    variant?: IconButtonVariant,
     isProcessing?: boolean,
     icon?: ElementType,
 }
@@ -36,11 +32,12 @@ export const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonBaseProps>
   icon,
   size = 'md',
   color = 'primary',
-  coloringStyle = 'solid',
+  variant = 'filled',
   disabled,
   isProcessing = false,
   ...props
 }, ref) {
+  const coloring = mapButtonVariant(variant)
   return (
     <button
       {...props}
@@ -57,11 +54,14 @@ export const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonBaseProps>
         props.onClick?.(event)
       }}
 
-      className={clsx('icon-button', props.className)}
+      className={clsx('icon-button coloring', props.className)}
       data-disabled={disabled ? '': undefined}
       data-size={size ?? undefined}
       data-color={color ?? undefined}
-      data-coloringstyle={coloringStyle ?? undefined}
+      data-coloring-style={coloring.coloringStyle}
+      data-color-variant={coloring.colorVariant}
+      data-bordered={coloring.bordered ? '' : undefined}
+      data-elevated={coloring.elevated ? '' : undefined}
     >
       {isProcessing ? <LoadingSpinner /> : (children ?? <Icon icon={icon} />)}
     </button>
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
index 25e24687..ef35ac31 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
@@ -73,7 +73,7 @@ export const MultiSelectChipDisplayTrigger = forwardRef<
             }}
             size="sm"
             color="negative"
-            coloringStyle="text"
+            variant="foreground"
             className="flex-row-0 items-center size-7 p-1"
             icon={XIcon}
           />
diff --git a/packages/hightide-web/src/components/user-interaction/Pressable.tsx b/packages/hightide-web/src/components/user-interaction/Pressable.tsx
index b56e6f82..29d4bced 100644
--- a/packages/hightide-web/src/components/user-interaction/Pressable.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Pressable.tsx
@@ -1,11 +1,22 @@
 import clsx from 'clsx'
 import type { ButtonHTMLAttributes } from 'react'
 import { forwardRef } from 'react'
+
 import { LoadingSpinner } from '../layout/loading/LoadingSpinner'
 
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | null
 
-export type ButtonColoringStyle = 'outline' | 'solid' | 'text' | 'tonal' | 'tonal-outline' | null
+export type ColoringStyle = 'filled' | 'foreground'
+
+export type ColoringColorVariant = 'normal' | 'tonal' | 'transparent'
+
+export const buttonVariants = ['elevated', 'filled', 'tonal', 'outlined', 'foreground'] as const
+
+export type ButtonVariant = typeof buttonVariants[number]
+
+export const iconButtonVariants = ['elevated', 'filled', 'tonal', 'foreground'] as const
+
+export type IconButtonVariant = typeof iconButtonVariants[number]
 
 const buttonColorsList = ['primary', 'secondary', 'positive', 'warning', 'negative', 'neutral'] as const
 
@@ -13,22 +24,46 @@ export type ButtonColor = typeof buttonColorsList[number] | null
 
 export const ButtonUtil = {
   colors: buttonColorsList,
+  variants: buttonVariants,
+}
+
+export const mapButtonVariant = (variant: ButtonVariant) => {
+  switch (variant) {
+  case 'elevated':
+    return { coloringStyle: 'filled', colorVariant: 'normal', bordered: false, elevated: true } as const
+  case 'filled':
+    return { coloringStyle: 'filled', colorVariant: 'normal', bordered: false, elevated: false } as const
+  case 'tonal':
+    return { coloringStyle: 'filled', colorVariant: 'tonal', bordered: false, elevated: false } as const
+  case 'outlined':
+    return { coloringStyle: 'foreground', colorVariant: 'normal', bordered: true, elevated: false } as const
+  case 'foreground':
+    return { coloringStyle: 'foreground', colorVariant: 'normal', bordered: false, elevated: false } as const
+  }
 }
 
 export type PressableProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   size?: ButtonSize,
   color?: ButtonColor,
-  coloringStyle?: ButtonColoringStyle,
+  coloringStyle?: ColoringStyle,
+  colorVariant?: ColoringColorVariant,
+  bordered?: boolean,
+  elevated?: boolean,
   isProcessing?: boolean,
+  processingIndicator?: boolean,
 }
 
 export const Pressable = forwardRef<HTMLButtonElement, PressableProps>(function Pressable({
   children,
   size = 'md',
   color = 'primary',
-  coloringStyle = 'solid',
+  coloringStyle = 'filled',
+  colorVariant = 'normal',
+  bordered = false,
+  elevated = false,
   disabled,
   isProcessing = false,
+  processingIndicator = true,
   className,
   type,
   onClick,
@@ -47,15 +82,18 @@ export const Pressable = forwardRef<HTMLButtonElement, PressableProps>(function
         }
         onClick?.(event)
       }}
-      className={clsx('pressable', className)}
+      className={clsx('pressable coloring', className)}
       data-disabled={disabled ? '' : undefined}
       data-processing={isProcessing ? '' : undefined}
       data-size={size ?? undefined}
       data-color={color ?? undefined}
-      data-coloringstyle={coloringStyle ?? undefined}
+      data-coloring-style={coloringStyle}
+      data-color-variant={colorVariant}
+      data-bordered={bordered ? '' : undefined}
+      data-elevated={elevated ? '' : undefined}
     >
       {children}
-      {isProcessing && (
+      {isProcessing && processingIndicator && (
         <span className="pressable-processing-overlay">
           <LoadingSpinner />
         </span>
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx b/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx
index 7186f6a2..d64bfd1d 100644
--- a/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx
@@ -148,7 +148,7 @@ export const FilterList = ({ value, onValueChange, availableItems }: FilterListP
           >
             <PopUpOpener>
               {({ toggleOpen, props }) => (
-                <Pressable {...props} onClick={toggleOpen} color="primary" coloringStyle="tonal-outline" size="sm">
+                <Pressable {...props} onClick={toggleOpen} color="primary" coloringStyle="filled" colorVariant="tonal" bordered size="sm">
                   {item.activeLabelBuilder ?
                     item.activeLabelBuilder(columnFilter.value) : (
                       <>
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx b/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
index 8ecc8bce..f3f025ae 100644
--- a/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
@@ -89,7 +89,7 @@ export const FilterBasePopUp = forwardRef<HTMLDivElement, FilterPopUpBaseProps>(
             tooltip={translation('removeFilter')}
             onClick={onRemove}
             color="negative"
-            coloringStyle="text"
+            variant="foreground"
             size="sm"
             icon={TrashIcon}
           />
@@ -97,7 +97,7 @@ export const FilterBasePopUp = forwardRef<HTMLDivElement, FilterPopUpBaseProps>(
             tooltip={translation('done')}
             onClick={props.onClose}
             color="neutral"
-            coloringStyle="text"
+            variant="foreground"
             size="sm"
             icon={Check}
           />
diff --git a/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx b/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx
index 3fd678ff..a8c47d11 100644
--- a/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx
@@ -104,7 +104,7 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
           <PopUpRoot key={columnSort.id}>
             <PopUpOpener>
               {({ toggleOpen, props }) => (
-                <Pressable {...props} onClick={toggleOpen} color="secondary" coloringStyle="tonal-outline" size="sm">
+                <Pressable {...props} onClick={toggleOpen} color="secondary" coloringStyle="filled" colorVariant="tonal" bordered size="sm">
                   <span className="font-bold">{item.label}</span>
                   <Icon icon={columnSort.desc ? ArrowDownWideNarrow : ArrowUpNarrowWide} size="sm" />
                 </Pressable>
@@ -129,7 +129,7 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
                             setIsOpen(false)
                           }}
                           color="negative"
-                          coloringStyle="text"
+                          variant="foreground"
                           size="sm"
                           icon={TrashIcon}
                         />
@@ -137,7 +137,7 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
                           tooltip={translation('close')}
                           onClick={() => setIsOpen(false)}
                           color="neutral"
-                          coloringStyle="text"
+                          variant="foreground"
                           size="sm"
                           icon={XIcon}
                         />
@@ -148,7 +148,7 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
                         type="button"
                         className="flex-1"
                         color={columnSort.desc ? 'neutral' : 'primary'}
-                        coloringStyle="solid"
+                        variant="filled"
                         size="md"
                         onClick={() => setSortDirection(columnSort.id, false)}
                         leading={ArrowUpNarrowWide}
@@ -159,7 +159,7 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
                         type="button"
                         className="flex-1"
                         color={columnSort.desc ? 'primary' : 'neutral'}
-                        coloringStyle="solid"
+                        variant="filled"
                         size="md"
                         onClick={() => setSortDirection(columnSort.id, true)}
                         leading={ArrowDownWideNarrow}
diff --git a/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx b/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx
index 59d05719..5a403378 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx
@@ -70,7 +70,7 @@ export const DatePicker = ({
           <IconButton
             tooltip={translation('time.today')}
             size="sm"
-            coloringStyle="tonal"
+            variant="tonal"
             disabled={!isDayMode}
             onClick={() => {
               const newDate = new Date()
diff --git a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
index e613bee0..b23fe312 100644
--- a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
@@ -155,7 +155,7 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
           <Visibility isVisible={hasClear}>
             <IconButton
               tooltip={translation('clearValue')}
-              coloringStyle="text" color="neutral" size="sm"
+              variant="foreground" color="neutral" size="sm"
               onClick={() => {
                 setState(null)
                 onEditComplete?.(null)
@@ -166,7 +166,7 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
           <Visibility isVisible={hasTimePicker}>
             <IconButton
               tooltip={translation('sDateTimeSelect', { datetimeMode: mode })}
-              coloringStyle="text" color="neutral" size="sm"
+              variant="foreground" color="neutral" size="sm"
               disabled={disabled}
               onClick={() => {
                 changeOpenWrapper(true)
diff --git a/packages/hightide-web/src/components/user-interaction/input/FlexibleDateTimeInput.tsx b/packages/hightide-web/src/components/user-interaction/input/FlexibleDateTimeInput.tsx
index db365f19..50794c17 100644
--- a/packages/hightide-web/src/components/user-interaction/input/FlexibleDateTimeInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/FlexibleDateTimeInput.tsx
@@ -61,7 +61,7 @@ export const FlexibleDateTimeInput = forwardRef<HTMLDivElement, FlexibleDateTime
         <IconButton
           key="flexible-date-time-mode"
           size="sm"
-          coloringStyle="text"
+          variant="foreground"
           color="neutral"
           tooltip={mode === 'date' ? translation('addTime') : translation('withoutTime')}
           onClick={() => {
diff --git a/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx b/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
index 171771b2..fd177582 100644
--- a/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
@@ -119,7 +119,7 @@ export const NumberStepperInput = forwardRef<HTMLInputElement, NumberStepperInpu
       type="button"
       size="sm"
       color="neutral"
-      coloringStyle="tonal"
+      variant="tonal"
       disabled={disabled || readOnly}
       tooltip={translation('increaseValue')}
       tooltipProps={{ alignment: layout === 'row' ? 'bottom' : 'top', options: { avoidOverlap: false } }}
@@ -137,7 +137,7 @@ export const NumberStepperInput = forwardRef<HTMLInputElement, NumberStepperInpu
       type="button"
       size="sm"
       color="neutral"
-      coloringStyle="tonal"
+      variant="tonal"
       disabled={disabled || readOnly}
       tooltip={translation('decreaseValue')}
       tooltipProps={{ alignment: 'bottom', options: { avoidOverlap: false } }}
diff --git a/packages/hightide-web/src/components/user-interaction/input/SearchBar.tsx b/packages/hightide-web/src/components/user-interaction/input/SearchBar.tsx
index f0df0334..9fcbd782 100644
--- a/packages/hightide-web/src/components/user-interaction/input/SearchBar.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/SearchBar.tsx
@@ -46,7 +46,7 @@ export const SearchBar = ({
         tooltip={translation('search')}
         size="sm"
         color="neutral"
-        coloringStyle="text"
+        variant="foreground"
         onClick={() => onSearch(value)}
         className={clsx('search-bar-icon-button', searchButtonProps?.className)}
       >
diff --git a/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx b/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx
index bba48c05..090508de 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx
+++ b/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx
@@ -65,7 +65,7 @@ export const PropertyBase = ({
           onClick={onValueClear}
           disabled={!hasValue}
           color="negative"
-          coloringStyle="text"
+          variant="foreground"
           size="sm"
           icon={X}
         />
@@ -75,7 +75,7 @@ export const PropertyBase = ({
           tooltip={translation('removeProperty')}
           onClick={onRemove}
           color="negative"
-          coloringStyle="text"
+          variant="foreground"
           size="sm"
           icon={Trash}
         />
diff --git a/packages/hightide-web/src/style/theme/colors/semantic.css b/packages/hightide-web/src/style/theme/colors/semantic.css
index 374b4d0a..81321864 100644
--- a/packages/hightide-web/src/style/theme/colors/semantic.css
+++ b/packages/hightide-web/src/style/theme/colors/semantic.css
@@ -108,5 +108,9 @@
     --color-neutral-tonal-background: var(--color-gray-400);
 
     --color-faded: var(--color-gray-650);
+
+    --coloring-tonal-lightness: 0.3;
+    --coloring-tonal-on-lightness: 0.95;
+    --coloring-transparent-alpha: 40%;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/button.css b/packages/hightide-web/src/style/theme/components/button.css
index 97686eb3..70c6ea2a 100644
--- a/packages/hightide-web/src/style/theme/components/button.css
+++ b/packages/hightide-web/src/style/theme/components/button.css
@@ -1,11 +1,11 @@
 @layer components {
   .button {
+    @apply coloring;
     &[data-size="xs"] {
       @apply min-w-20;
       padding: var(--element-padding) var(--element-padding-direction);
 
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding:
           calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width))
           calc(var(--spacing-element-padding-direction-xs) - var(--coloring-outline-width));
@@ -16,8 +16,7 @@
       @apply min-w-28;
       padding: var(--element-padding) var(--element-padding-direction);
 
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding:
           calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width))
           calc(var(--spacing-element-padding-direction-sm) - var(--coloring-outline-width));
@@ -28,8 +27,7 @@
       @apply min-w-36;
       padding: var(--element-padding) var(--element-padding-direction);
 
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding:
           calc(var(--spacing-element-padding-md) - var(--coloring-outline-width))
           calc(var(--spacing-element-padding-direction-md) - var(--coloring-outline-width));
@@ -40,8 +38,7 @@
       @apply min-w-45;
       padding: var(--element-padding) var(--element-padding-direction);
 
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding:
           calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width))
           calc(var(--spacing-element-padding-direction-lg) - var(--coloring-outline-width));
diff --git a/packages/hightide-web/src/style/theme/components/icon-button.css b/packages/hightide-web/src/style/theme/components/icon-button.css
index d15233f4..07cfb394 100644
--- a/packages/hightide-web/src/style/theme/components/icon-button.css
+++ b/packages/hightide-web/src/style/theme/components/icon-button.css
@@ -1,20 +1,19 @@
 @layer components {
   .icon-button {
-    @apply flex-col-0 items-center justify-center element-square;
+    @apply coloring relative flex-col-0 items-center justify-center element-square;
     transition: var(--coloring-transitions), var(--focus-transitions);
 
     &:not([data-disabled]) {
-      @apply cursor-pointer coloring-color-detect coloring-style-hover-detect;
+      @apply cursor-pointer;
     }
 
     &[data-disabled] {
-      @apply disabled coloring-style-detect cursor-not-allowed;
+      @apply cursor-not-allowed;
     }
 
     /* Size Overwrites */
     @apply sizing-md;
-    &[data-coloringstyle="outline"],
-    &[data-coloringstyle="tonal-outline"] {
+    &[data-bordered] {
       padding: calc(
         var(--spacing-element-padding-md) - var(--coloring-outline-width)
       );
@@ -23,8 +22,7 @@
     /* Size Overwrites */
     &[data-size="xs"] {
       @apply sizing-xs;
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding: calc(
           var(--spacing-element-padding-xs) - var(--coloring-outline-width)
         );
@@ -32,8 +30,7 @@
     }
     &[data-size="sm"] {
       @apply sizing-sm;
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding: calc(
           var(--spacing-element-padding-sm) - var(--coloring-outline-width)
         );
@@ -41,8 +38,7 @@
     }
     &[data-size="md"] {
       @apply sizing-md;
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding: calc(
           var(--spacing-element-padding-md) - var(--coloring-outline-width)
         );
@@ -50,8 +46,7 @@
     }
     &[data-size="lg"] {
       @apply sizing-lg;
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding: calc(
           var(--spacing-element-padding-lg) - var(--coloring-outline-width)
         );
diff --git a/packages/hightide-web/src/style/theme/components/pressable.css b/packages/hightide-web/src/style/theme/components/pressable.css
index 59f2773b..e61f8aa3 100644
--- a/packages/hightide-web/src/style/theme/components/pressable.css
+++ b/packages/hightide-web/src/style/theme/components/pressable.css
@@ -1,6 +1,6 @@
 @layer components {
   .pressable {
-    @apply relative flex flex-row items-center justify-center font-semibold whitespace-nowrap w-fit;
+    @apply coloring relative flex flex-row items-center justify-center font-semibold whitespace-nowrap w-fit;
     height: var(--element-height, var(--spacing-element-md));
     padding: var(--element-padding, var(--spacing-element-padding-md));
     border-radius: var(--element-border-radius, 0.375rem);
@@ -11,18 +11,17 @@
     }
 
     &:not([data-disabled]) {
-      @apply cursor-pointer coloring-color-detect coloring-style-hover-detect;
+      @apply cursor-pointer;
     }
 
     &[data-disabled] {
-      @apply disabled coloring-style-detect cursor-not-allowed;
+      @apply cursor-not-allowed;
     }
 
     &[data-size="xs"] {
       @apply gap-x-1 sizing-xs text-xs;
 
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding: calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width));
       }
     }
@@ -30,8 +29,7 @@
     &[data-size="sm"] {
       @apply gap-x-1 sizing-sm;
 
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding: calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width));
       }
     }
@@ -39,8 +37,7 @@
     &[data-size="md"] {
       @apply gap-x-2 sizing-md;
 
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding: calc(var(--spacing-element-padding-md) - var(--coloring-outline-width));
       }
     }
@@ -48,8 +45,7 @@
     &[data-size="lg"] {
       @apply gap-x-2 sizing-lg text-lg;
 
-      &[data-coloringstyle="outline"],
-      &[data-coloringstyle="tonal-outline"] {
+      &[data-bordered] {
         padding: calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width));
       }
     }
diff --git a/packages/hightide-web/src/style/theme/variables.css b/packages/hightide-web/src/style/theme/variables.css
index e7f69451..69c73426 100644
--- a/packages/hightide-web/src/style/theme/variables.css
+++ b/packages/hightide-web/src/style/theme/variables.css
@@ -9,6 +9,9 @@
   --scrollbar-padding: 1px;
 
   --coloring-outline-width: calc(0.5 * var(--spacing));
+  --coloring-tonal-lightness: 0.95;
+  --coloring-tonal-on-lightness: 0.2;
+  --coloring-transparent-alpha: 30%;
 
   --icon-size-xs: 16px;
   --icon-size-sm: 20px;
diff --git a/packages/hightide-web/src/style/utitlity/coloring.css b/packages/hightide-web/src/style/utitlity/coloring.css
index 2af25e8c..c26f78a6 100644
--- a/packages/hightide-web/src/style/utitlity/coloring.css
+++ b/packages/hightide-web/src/style/utitlity/coloring.css
@@ -1,3 +1,39 @@
+@property --coloring-base {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --coloring-on-base {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --coloring-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --coloring-on-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --coloring-accent {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@property --coloring-foreground {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
 :root {
   --coloring-transitions:
     border-color var(--animation-duration-in, 250ms) ease-in-out, 
@@ -62,6 +98,133 @@
   hover:bg-[var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))))]/30;
 }
 
+@utility coloring {
+  position: relative;
+  --coloring-color: var(--coloring-base);
+  --coloring-on-color: var(--coloring-on-base);
+  --coloring-accent: var(--coloring-base);
+  --coloring-foreground: var(--coloring-on-color);
+
+  &[data-color="primary"] {
+    --coloring-base: var(--color-primary);
+    --coloring-on-base: var(--color-on-primary);
+  }
+
+  &[data-color="secondary"] {
+    --coloring-base: var(--color-secondary);
+    --coloring-on-base: var(--color-on-secondary);
+  }
+
+  &[data-color="positive"] {
+    --coloring-base: var(--color-positive);
+    --coloring-on-base: var(--color-on-positive);
+  }
+
+  &[data-color="warning"] {
+    --coloring-base: var(--color-warning);
+    --coloring-on-base: var(--color-on-warning);
+  }
+
+  &[data-color="negative"] {
+    --coloring-base: var(--color-negative);
+    --coloring-on-base: var(--color-on-negative);
+  }
+
+  &[data-color="neutral"] {
+    --coloring-base: var(--color-neutral);
+    --coloring-on-base: var(--color-on-neutral);
+  }
+
+  &[data-color="description"] {
+    --coloring-base: var(--color-description);
+    --coloring-on-base: var(--color-on-surface);
+  }
+
+  &[data-color="surface"] {
+    --coloring-base: var(--color-surface);
+    --coloring-on-base: var(--color-on-surface);
+  }
+
+  &[data-color="surface-variant"] {
+    --coloring-base: var(--color-surface-variant);
+    --coloring-on-base: var(--color-on-surface-variant);
+  }
+
+  &[data-color="surface-warning"] {
+    --coloring-base: var(--color-surface-warning);
+    --coloring-on-base: var(--color-on-surface-warning);
+  }
+
+  &[data-color="disabled"],
+  &[data-disabled] {
+    --coloring-base: var(--color-disabled);
+    --coloring-on-base: var(--color-on-disabled);
+  }
+
+  &[data-disabled] {
+    opacity: 0.6;
+  }
+
+  &[data-color-variant="tonal"] {
+    --coloring-color: color-mix(in srgb, var(--coloring-base) 20%, transparent);
+    --coloring-on-color: var(--coloring-base);
+
+    @supports (color: oklch(from red 0.5 c h)) {
+      --coloring-color: oklch(from var(--coloring-base) var(--coloring-tonal-lightness) c h);
+      --coloring-on-color: oklch(from var(--coloring-base) var(--coloring-tonal-on-lightness) c h);
+    }
+  }
+
+  &[data-color-variant="transparent"] {
+    --coloring-color: color-mix(in srgb, var(--coloring-base) var(--coloring-transparent-alpha), transparent);
+    --coloring-on-color: var(--coloring-base);
+  }
+
+  &[data-coloring-style="filled"] {
+    background-color: var(--coloring-color);
+    color: var(--coloring-foreground, var(--coloring-on-color));
+  }
+
+  &[data-coloring-style="foreground"] {
+    --coloring-foreground: var(--coloring-color);
+    background-color: transparent;
+    color: var(--coloring-foreground);
+  }
+
+  &[data-bordered] {
+    border-style: solid;
+    border-width: var(--coloring-outline-width);
+    border-color: var(--coloring-accent);
+  }
+
+  &[data-elevated] {
+    @apply shadow-around;
+  }
+
+  &[data-elevated]:not([data-disabled]):hover {
+    @apply shadow-around-md;
+  }
+
+  &:not([data-disabled])::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background: var(--coloring-foreground, var(--coloring-on-color));
+    opacity: 0;
+  }
+
+  &:not([data-disabled]):hover::before {
+    opacity: 0.08;
+  }
+
+  &:not([data-disabled]):focus-visible::before,
+  &:not([data-disabled]):active::before {
+    opacity: 0.16;
+  }
+}
+
 @utility coloring-reset-variables {
   --coloring-color: initial;
   --coloring-on-color: initial;
diff --git a/packages/hightide-web/stories/Chat/ChatConversationList.stories.tsx b/packages/hightide-web/stories/Chat/ChatConversationList.stories.tsx
index 5a1c796d..0b65eca1 100644
--- a/packages/hightide-web/stories/Chat/ChatConversationList.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatConversationList.stories.tsx
@@ -21,7 +21,7 @@ export const chatConversationListWithHeader: Story = {
         <IconButton
           tooltip="New Chat"
           size="sm"
-          coloringStyle="text"
+          variant="foreground"
         >
           <Plus className="size-5"/>
         </IconButton>
diff --git a/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx b/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
index 9c835f3a..1a3d7d18 100644
--- a/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
@@ -173,7 +173,7 @@ export const chatDemo: Story = {
                 <IconButton
                   tooltip="Neuer Chat"
                   size="sm"
-                  coloringStyle="text"
+                  variant="foreground"
                   onClick={action('onCreate')}
                 >
                   <Plus className="size-5"/>
@@ -214,7 +214,7 @@ export const chatDemo: Story = {
                   tooltip="Zurück"
                   size="sm"
                   color="neutral"
-                  coloringStyle="text"
+                  variant="foreground"
                   className="chat-thread-header-back desktop:hidden"
                   onClick={() => setSelectedId(null)}
                 >
@@ -227,7 +227,7 @@ export const chatDemo: Story = {
                     tooltip="Anrufen"
                     size="sm"
                     color="neutral"
-                    coloringStyle="text"
+                    variant="foreground"
                     onClick={action('onCall')}
                   >
                     <Phone/>
@@ -236,7 +236,7 @@ export const chatDemo: Story = {
                     tooltip="Zu Kontakten hinzufügen"
                     size="sm"
                     color="neutral"
-                    coloringStyle="text"
+                    variant="foreground"
                     onClick={action('onAddContact')}
                   >
                     <UserRoundPlus/>
@@ -314,7 +314,7 @@ export const chatDemo: Story = {
                       tooltip="Kamera"
                       size="sm"
                       color="neutral"
-                      coloringStyle="text"
+                      variant="foreground"
                       onClick={action('onCamera')}
                     >
                       <Camera/>
@@ -323,7 +323,7 @@ export const chatDemo: Story = {
                       tooltip="Anhang"
                       size="sm"
                       color="neutral"
-                      coloringStyle="text"
+                      variant="foreground"
                       onClick={action('onAttachment')}
                     >
                       <Paperclip/>
diff --git a/packages/hightide-web/stories/Chat/ChatMessageComposer.stories.tsx b/packages/hightide-web/stories/Chat/ChatMessageComposer.stories.tsx
index 7f558887..ef6714ac 100644
--- a/packages/hightide-web/stories/Chat/ChatMessageComposer.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatMessageComposer.stories.tsx
@@ -22,7 +22,7 @@ export const chatMessageComposer: Story = {
         <IconButton
           tooltip="Kamera"
           color="neutral"
-          coloringStyle="text"
+          variant="foreground"
           onClick={action('onCamera')}
         >
           <Camera/>
@@ -30,7 +30,7 @@ export const chatMessageComposer: Story = {
         <IconButton
           tooltip="Anhang"
           color="neutral"
-          coloringStyle="text"
+          variant="foreground"
           onClick={action('onAttachment')}
         >
           <Paperclip/>
diff --git a/packages/hightide-web/stories/Chat/ChatThreadHeader.stories.tsx b/packages/hightide-web/stories/Chat/ChatThreadHeader.stories.tsx
index ab0aadcc..1bf630d1 100644
--- a/packages/hightide-web/stories/Chat/ChatThreadHeader.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatThreadHeader.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof meta>
 export const chatThreadHeader: Story = {
   args: {
     leftActions: (
-      <IconButton tooltip="Zurück" size="sm" color="neutral" coloringStyle="text" onClick={action('onBack')}>
+      <IconButton tooltip="Zurück" size="sm" color="neutral" variant="foreground" onClick={action('onBack')}>
         <ChevronLeft/>
       </IconButton>
     ),
@@ -26,13 +26,13 @@ export const chatThreadHeader: Story = {
     subtitle: 'geb. 14.03.1982 · Vers.-Nr. K220541880 · GKV',
     rightActions: (
       <>
-        <IconButton tooltip="Anrufen" size="sm" color="neutral" coloringStyle="text" onClick={action('onCall')}>
+        <IconButton tooltip="Anrufen" size="sm" color="neutral" variant="foreground" onClick={action('onCall')}>
           <Phone/>
         </IconButton>
-        <IconButton tooltip="Zu Kontakten hinzufügen" size="sm" color="neutral" coloringStyle="text" onClick={action('onAddContact')}>
+        <IconButton tooltip="Zu Kontakten hinzufügen" size="sm" color="neutral" variant="foreground" onClick={action('onAddContact')}>
           <UserRoundPlus/>
         </IconButton>
-        <IconButton tooltip="Mehr" size="sm" color="neutral" coloringStyle="text">
+        <IconButton tooltip="Mehr" size="sm" color="neutral" variant="foreground">
           <EllipsisVertical/>
         </IconButton>
       </>
diff --git a/packages/hightide-web/stories/Layout/AppPage.stories.tsx b/packages/hightide-web/stories/Layout/AppPage.stories.tsx
index 7753515c..975001a1 100644
--- a/packages/hightide-web/stories/Layout/AppPage.stories.tsx
+++ b/packages/hightide-web/stories/Layout/AppPage.stories.tsx
@@ -83,10 +83,10 @@ export const appPage: Story = {
   args: {
     headerActions: [(
       <div className="w-full flex-row-0 justify-end" key="header-actions">
-        <IconButton tooltip="Notifications" coloringStyle="text">
+        <IconButton tooltip="Notifications" variant="foreground">
           <Bell className="size-6" />
         </IconButton>
-        <IconButton tooltip="Settings" coloringStyle="text">
+        <IconButton tooltip="Settings" variant="foreground">
           <Settings className="size-6" />
         </IconButton>
       </div>
diff --git a/packages/hightide-web/stories/User Interaction/Button.stories.tsx b/packages/hightide-web/stories/User Interaction/Button.stories.tsx
index 56f5b64b..0fbbc683 100644
--- a/packages/hightide-web/stories/User Interaction/Button.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Button.stories.tsx	
@@ -11,6 +11,10 @@ const meta = {
       control: 'select',
       options: ButtonUtil.colors,
     },
+    variant: {
+      control: 'select',
+      options: ButtonUtil.variants,
+    },
   },
 } satisfies Meta<typeof Button>
 
@@ -24,7 +28,7 @@ export const button: Story = {
     isProcessing: false,
     color: 'primary',
     size: 'md',
-    coloringStyle: 'solid',
+    variant: 'filled',
     onClick: action('Clicked'),
   },
   render: ({ children, ...props }) => {
@@ -39,6 +43,9 @@ export const button: Story = {
         <Button {...props} trailing={ChevronRight}>
           {children}
         </Button>
+        <Button {...props} leading={Check} trailing={ChevronRight}>
+          {children}
+        </Button>
       </div>
     )
   }
diff --git a/packages/hightide-web/stories/User Interaction/IconButton.stories.tsx b/packages/hightide-web/stories/User Interaction/IconButton.stories.tsx
index aa6867b1..f45ad0e4 100644
--- a/packages/hightide-web/stories/User Interaction/IconButton.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/IconButton.stories.tsx	
@@ -23,7 +23,7 @@ export const iconButton: Story = {
     isProcessing: false,
     color: 'primary',
     size: 'md',
-    coloringStyle: 'solid',
+    variant: 'filled',
     tooltip: 'Subtract',
     onClick: action('Clicked'),
     icon: MinusIcon,
diff --git a/packages/hightide-web/stories/User Interaction/Pressable.stories.tsx b/packages/hightide-web/stories/User Interaction/Pressable.stories.tsx
index b6e71511..1801f6c3 100644
--- a/packages/hightide-web/stories/User Interaction/Pressable.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Pressable.stories.tsx	
@@ -24,7 +24,7 @@ export const pressable: Story = {
     isProcessing: false,
     color: 'primary',
     size: 'md',
-    coloringStyle: 'solid',
+    coloringStyle: 'filled',
     onClick: action('Clicked'),
   },
   render: ({ children, ...props }) => {
diff --git a/packages/hightide-web/stories/Utilities/hooks/useDelay.stories.tsx b/packages/hightide-web/stories/Utilities/hooks/useDelay.stories.tsx
index b4a9940b..d1b14797 100644
--- a/packages/hightide-web/stories/Utilities/hooks/useDelay.stories.tsx
+++ b/packages/hightide-web/stories/Utilities/hooks/useDelay.stories.tsx
@@ -28,7 +28,7 @@ export const story: Story = {
           {'Press me'}
         </Button>
         <span className="mt-12">{`Has an active timer: ${hasActiveTimer}`}</span>
-        <Button coloringStyle="text" onClick={ clearTimer} color="negative" disabled={!hasActiveTimer}>
+        <Button variant="foreground" onClick={ clearTimer} color="negative" disabled={!hasActiveTimer}>
           {'Clear'}
         </Button>
       </div>

From 8713fcdf7804d022b2f27b8d472b3e83aaef682c Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Tue, 29 Sep 2026 10:29:43 +0200
Subject: [PATCH 08/25] chore: remove color transition from interactive
 elements

---
 .../src/style/theme/components/chat/chat-conversation-row.css   | 2 +-
 .../src/style/theme/components/chat/chat-quick-reply-chip.css   | 1 -
 packages/hightide-web/src/style/theme/components/checkbox.css   | 2 +-
 .../hightide-web/src/style/theme/components/icon-button.css     | 2 +-
 packages/hightide-web/src/style/theme/components/list-item.css  | 2 +-
 packages/hightide-web/src/style/theme/components/pressable.css  | 2 +-
 packages/hightide-web/src/style/theme/components/switch.css     | 2 +-
 .../hightide-web/stories/Branding/SemanticColors.stories.tsx    | 1 -
 8 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-conversation-row.css b/packages/hightide-web/src/style/theme/components/chat/chat-conversation-row.css
index cf34692a..f67607d8 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-conversation-row.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-conversation-row.css
@@ -2,7 +2,7 @@
   .chat-conversation-row {
     @apply flex-row-3 shrink-0 items-center w-full px-3.5 py-3 text-left bg-transparent cursor-pointer rounded-md;
     @apply border-2 border-transparent focus-style-none focus-style-border outline-none;
-    transition: var(--coloring-transitions), var(--focus-transitions);
+    transition: var(--focus-transitions);
 
     &:focus-visible {
       @apply focus-style-apply;
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css b/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css
index b3d355c0..6e480bde 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css
@@ -2,7 +2,6 @@
   .chat-quick-reply-chip {
     @apply flex-row-0 gap-x-1.5 items-center w-fit px-3.5 py-1.5 rounded-full border text-sm font-medium cursor-pointer;
     @apply border-divider text-description bg-surface hover:bg-surface-hover;
-    transition: var(--coloring-transitions);
 
     &[data-active] {
       @apply border-primary text-primary;
diff --git a/packages/hightide-web/src/style/theme/components/checkbox.css b/packages/hightide-web/src/style/theme/components/checkbox.css
index adef6e63..7047992a 100644
--- a/packages/hightide-web/src/style/theme/components/checkbox.css
+++ b/packages/hightide-web/src/style/theme/components/checkbox.css
@@ -2,7 +2,7 @@
   .checkbox {
     @apply flex-col-0 items-center justify-center border-2;
     @apply rounded data-[rounded]:rounded-full;
-    transition: var(--coloring-transitions), var(--focus-transitions);
+    transition: var(--focus-transitions);
 
     &:not([data-disabled]) {
       @apply hover:cursor-pointer;
diff --git a/packages/hightide-web/src/style/theme/components/icon-button.css b/packages/hightide-web/src/style/theme/components/icon-button.css
index 07cfb394..e8e6a826 100644
--- a/packages/hightide-web/src/style/theme/components/icon-button.css
+++ b/packages/hightide-web/src/style/theme/components/icon-button.css
@@ -1,7 +1,7 @@
 @layer components {
   .icon-button {
     @apply coloring relative flex-col-0 items-center justify-center element-square;
-    transition: var(--coloring-transitions), var(--focus-transitions);
+    transition: var(--focus-transitions);
 
     &:not([data-disabled]) {
       @apply cursor-pointer;
diff --git a/packages/hightide-web/src/style/theme/components/list-item.css b/packages/hightide-web/src/style/theme/components/list-item.css
index 5b258ee4..16124d64 100644
--- a/packages/hightide-web/src/style/theme/components/list-item.css
+++ b/packages/hightide-web/src/style/theme/components/list-item.css
@@ -28,7 +28,7 @@
   .list-action-item,
   .list-navigation-item {
     @apply cursor-pointer bg-transparent outline-none focus-style-outline;
-    transition: var(--coloring-transitions), var(--focus-transitions);
+    transition: var(--focus-transitions);
 
     &:hover:not(:disabled):not([data-disabled]) {
       @apply bg-surface-hover;
diff --git a/packages/hightide-web/src/style/theme/components/pressable.css b/packages/hightide-web/src/style/theme/components/pressable.css
index e61f8aa3..bc196680 100644
--- a/packages/hightide-web/src/style/theme/components/pressable.css
+++ b/packages/hightide-web/src/style/theme/components/pressable.css
@@ -4,7 +4,7 @@
     height: var(--element-height, var(--spacing-element-md));
     padding: var(--element-padding, var(--spacing-element-padding-md));
     border-radius: var(--element-border-radius, 0.375rem);
-    transition: var(--coloring-transitions), var(--focus-transitions);
+    transition: var(--focus-transitions);
 
     .pressable-processing-overlay {
       @apply absolute inset-0 flex items-center justify-center rounded-[inherit] bg-surface/40 pointer-events-none;
diff --git a/packages/hightide-web/src/style/theme/components/switch.css b/packages/hightide-web/src/style/theme/components/switch.css
index 95c811f7..4a23a290 100644
--- a/packages/hightide-web/src/style/theme/components/switch.css
+++ b/packages/hightide-web/src/style/theme/components/switch.css
@@ -2,7 +2,7 @@
   .switch {
     @apply flex-col-0 items-center justify-center;
     @apply h-7 w-12 rounded-full border-2 p-1;
-    transition: var(--coloring-transitions), var(--focus-transitions);
+    transition: var(--focus-transitions);
 
     &:not([data-disabled]) {
       @apply hover:cursor-pointer;
diff --git a/packages/hightide-web/stories/Branding/SemanticColors.stories.tsx b/packages/hightide-web/stories/Branding/SemanticColors.stories.tsx
index 407cc3c9..137ab902 100644
--- a/packages/hightide-web/stories/Branding/SemanticColors.stories.tsx
+++ b/packages/hightide-web/stories/Branding/SemanticColors.stories.tsx
@@ -61,7 +61,6 @@ const ColoringStyleElement = ({
         'coloring-style-detect': !isHover,
       }
     )}
-    style={{ transition: 'var(--coloring-transitions)' }}
   >
     {label}
   </div>

From b98b366531186db385a21a6dc16d57c082f9e34f Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Tue, 29 Sep 2026 10:56:42 +0200
Subject: [PATCH 09/25] feat: update VerticalNavigation item

---
 .../src/components/layout/app/AppPage.tsx     | 73 ++++++++++-----
 .../VerticalNavigationMenuItem.tsx            | 89 ++++++++-----------
 .../navigation/navigation-menus/types.ts      | 25 +++++-
 .../theme/components/vertical-navigation.css  | 31 ++++---
 .../stories/Layout/AppPage.stories.tsx        |  5 +-
 .../Navigation/VerticalNavigation.stories.tsx |  1 -
 6 files changed, 132 insertions(+), 92 deletions(-)

diff --git a/packages/hightide-web/src/components/layout/app/AppPage.tsx b/packages/hightide-web/src/components/layout/app/AppPage.tsx
index 595bc650..beb349a2 100644
--- a/packages/hightide-web/src/components/layout/app/AppPage.tsx
+++ b/packages/hightide-web/src/components/layout/app/AppPage.tsx
@@ -9,6 +9,7 @@ import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
 import { PropsUtil } from '../../../utils/propsUtil'
 import type { LinkComponentProps } from '../navigation/navigation-menus/VerticalNavigationMenu'
 import { VerticalNavigationMenu, type NavigationItemData } from '../navigation/navigation-menus/VerticalNavigationMenu'
+import type { NavigationGroupItem, NavigationLinkItem, NavigationLabelItem } from '../navigation/navigation-menus/types'
 import { FocusTrap } from '../../utils/FocusTrap'
 
 export interface AppSidebarProps extends HTMLAttributes<HTMLDivElement> {
@@ -111,22 +112,36 @@ export const AppPageSidebarWithNavigation = ({
   )
 }
 
-export interface AppPageNavigationItem {
+type AppPageNavigationItemBase = {
   id: string,
   label: ReactNode,
   icon?: ReactNode,
-  url?: string,
-  external?: boolean,
-  items?: AppPageNavigationItem[],
 }
 
+export type AppPageNavigationItem =
+  | (AppPageNavigationItemBase & {
+    url: string,
+    external?: boolean,
+    items?: never,
+  })
+  | (AppPageNavigationItemBase & {
+    items: AppPageNavigationItem[],
+    url?: never,
+    external?: never,
+  })
+  | (AppPageNavigationItemBase & {
+    url?: never,
+    external?: never,
+    items?: never,
+  })
+
 function findActiveIdByUrl(
   items: ReadonlyArray<AppPageNavigationItem>,
   activeUrl: string
 ): string | null {
   for (const item of items) {
-    if (item.url === activeUrl) return item.id
-    if (item.items != null) {
+    if ('url' in item && item.url === activeUrl) return item.id
+    if ('items' in item && item.items != null) {
       const found = findActiveIdByUrl(item.items, activeUrl)
       if (found != null) return found
     }
@@ -170,22 +185,38 @@ export const AppPage = ({
   const toNavigationItems = useCallback((items?: AppPageNavigationItem[]): NavigationItemData[] | undefined => {
     return items?.map((item) => {
       const isActive = item.id === resolvedActiveId
-      return ({
+      const label = (
+        <span className="app-page-navigation-item-label" data-active-page={isActive ? '' : undefined}>
+          {item.icon && (
+            <span className="size-5">
+              {item.icon}
+            </span>
+          )}
+          {item.label}
+        </span>
+      )
+      if ('items' in item && item.items != null) {
+        const group: NavigationGroupItem = {
+          id: item.id,
+          label,
+          items: toNavigationItems(item.items) ?? [],
+        }
+        return group
+      }
+      if ('url' in item && item.url != null) {
+        const link: NavigationLinkItem = {
+          id: item.id,
+          label,
+          url: item.url,
+          external: item.external,
+        }
+        return link
+      }
+      const labelItem: NavigationLabelItem = {
         id: item.id,
-        label: (
-          <span className="app-page-navigation-item-label" data-active-page={isActive ? '' : undefined}>
-            {item.icon && (
-              <span className="size-5">
-                {item.icon}
-              </span>
-            )}
-            {item.label}
-          </span>
-        ),
-        url: item.url,
-        external: item.external,
-        items: toNavigationItems(item.items),
-      })
+        label,
+      }
+      return labelItem
     }) ?? undefined
   }, [resolvedActiveId])
 
diff --git a/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx b/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
index d0ea93d5..1ce63368 100644
--- a/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
@@ -1,9 +1,8 @@
 import type { ElementType, HTMLAttributeAnchorTarget, ReactNode } from 'react'
-import { useId, useRef } from 'react'
+import { useId } from 'react'
 import { ExternalLink } from 'lucide-react'
 import { Icon } from '../../../display-and-visualization/Icon'
 import { ExpansionIcon } from '../../../display-and-visualization/ExpansionIcon'
-import { IconButton } from '../../../user-interaction/IconButton'
 import { useNavigationItem } from './NavigationContext'
 import type { NavigationItemData } from './types'
 
@@ -16,12 +15,7 @@ export interface LinkComponentProps {
   'children'?: ReactNode,
 }
 
-export interface VerticalNavigationMenuItemProps {
-  id: string,
-  label: NavigationItemData['label'],
-  url?: string,
-  external?: boolean,
-  items?: NavigationItemData[],
+export type VerticalNavigationMenuItemProps = NavigationItemData & {
   depth?: number,
   forceMountDepth?: number,
   LinkComponent?: ElementType<LinkComponentProps>,
@@ -32,14 +26,11 @@ const DefaultLink: ElementType<LinkComponentProps> = 'a'
 export function VerticalNavigationMenuItem({
   id,
   label,
-  url,
-  external = false,
-  items,
   depth = 0,
   forceMountDepth = 2,
   LinkComponent = DefaultLink,
+  ...item
 }: VerticalNavigationMenuItemProps) {
-  const ref = useRef<HTMLButtonElement | null>(null)
   const groupId = useId()
   const {
     expanded,
@@ -47,10 +38,12 @@ export function VerticalNavigationMenuItem({
     toggleExpansion,
   } = useNavigationItem(id)
 
-  const hasChildren = items != null && items.length > 0
-  const hasLink = url != null
+  const childItems = 'items' in item && item.items != null ? item.items : undefined
+  const url = 'url' in item ? item.url : undefined
+  const external = 'external' in item ? item.external ?? false : false
+  const hasChildren = childItems != null && childItems.length > 0
 
-  const labelContent = hasLink ? (
+  const labelContent = url != null ? (
     <LinkComponent
       href={url}
       className="vertical-navigation-item-link"
@@ -58,7 +51,7 @@ export function VerticalNavigationMenuItem({
       target={external ? '_blank' : undefined}
       rel={external ? 'noopener noreferrer' : undefined}
     >
-      <div className="vertical-navigation-item-label" data-action-padding={hasChildren ? '' : undefined}>
+      <div className="vertical-navigation-item-label">
         {label}
         {external && (
           <Icon icon={ExternalLink} size="sm" className="vertical-navigation-item-link-external-icon" />
@@ -71,7 +64,7 @@ export function VerticalNavigationMenuItem({
     </div>
   )
 
-  const interactable = hasLink || hasChildren
+  const interactable = url != null || hasChildren
   const forceMountChildren = depth < forceMountDepth
 
   return (
@@ -80,51 +73,43 @@ export function VerticalNavigationMenuItem({
       data-expanded={expanded ? '' : undefined}
       className="vertical-navigation-item"
     >
-      <div className="vertical-navigation-item-row-container">
-        <div
-          className="vertical-navigation-item-row"
-          data-interactable={interactable ? '' : undefined}
-          data-has-children={hasChildren ? '' : undefined}
-          data-has-link={hasLink ? '' : undefined}
-          onClick={(event) => {
-            if(ref.current?.contains(event.target as Node)) return
-            if(hasChildren && !hasLink) {
-              toggleExpansion(id)
-            }
+      {hasChildren ? (
+        <button
+          type="button"
+          className="vertical-navigation-item-row-container"
+          data-has-children=""
+          aria-expanded={expanded}
+          aria-controls={groupId}
+          onClick={() => {
+            toggleExpansion(id)
           }}
         >
-          {labelContent}
-        </div>
-
-        {hasChildren && (
-          <IconButton
-            ref={ref}
-            type="button"
-            variant="foreground"
-            color="neutral"
-            aria-label={`${expanded ? 'Collapse' : 'Expand'} ${typeof label === 'string' ? label : id}`}
-            aria-expanded={expanded}
-            aria-controls={groupId}
-            onClick={() => {
-              toggleExpansion(id)
-            }}
-            className="vertical-navigation-toggle"
+          <div className="vertical-navigation-item-row">
+            {labelContent}
+          </div>
+          <ExpansionIcon isExpanded={expanded} aria-hidden className="vertical-navigation-toggle" />
+        </button>
+      ) : (
+        <div className="vertical-navigation-item-row-container">
+          <div
+            className="vertical-navigation-item-row"
+            data-interactable={interactable ? '' : undefined}
           >
-            <ExpansionIcon isExpanded={expanded} aria-hidden />
-          </IconButton>
-        )}
-      </div>
+            {labelContent}
+          </div>
+        </div>
+      )}
 
-      {hasChildren && (expanded || forceMountChildren) && (
+      {childItems != null && childItems.length > 0 && (expanded || forceMountChildren) && (
         <ul
           id={groupId}
           className="vertical-navigation-group"
           hidden={!expanded}
         >
-          {items.map((item) => (
+          {childItems.map((child) => (
             <VerticalNavigationMenuItem
-              key={item.id}
-              {...item}
+              key={child.id}
+              {...child}
               depth={depth + 1}
               LinkComponent={LinkComponent}
             />
diff --git a/packages/hightide-web/src/components/layout/navigation/navigation-menus/types.ts b/packages/hightide-web/src/components/layout/navigation/navigation-menus/types.ts
index 556c864d..9d6a0cee 100644
--- a/packages/hightide-web/src/components/layout/navigation/navigation-menus/types.ts
+++ b/packages/hightide-web/src/components/layout/navigation/navigation-menus/types.ts
@@ -1,17 +1,34 @@
 import type { ReactNode } from 'react'
 import type { TreeNode } from '@helpwave/hightide-utils/hooks'
 
-export interface NavigationItemData {
+type NavigationItemBase = {
   id: string,
   label: ReactNode,
-  url?: string,
+}
+
+export type NavigationLinkItem = NavigationItemBase & {
+  url: string,
   external?: boolean,
-  items?: NavigationItemData[],
+  items?: never,
+}
+
+export type NavigationGroupItem = NavigationItemBase & {
+  items: NavigationItemData[],
+  url?: never,
+  external?: never,
 }
 
+export type NavigationLabelItem = NavigationItemBase & {
+  url?: never,
+  external?: never,
+  items?: never,
+}
+
+export type NavigationItemData = NavigationLinkItem | NavigationGroupItem | NavigationLabelItem
+
 export function toTreeNodes(items: ReadonlyArray<NavigationItemData>): TreeNode[] {
   return items.map((item) => ({
     id: item.id,
-    items: item.items != null ? toTreeNodes(item.items) : [],
+    items: 'items' in item && item.items != null ? toTreeNodes(item.items) : [],
   }))
 }
diff --git a/packages/hightide-web/src/style/theme/components/vertical-navigation.css b/packages/hightide-web/src/style/theme/components/vertical-navigation.css
index b0cd83a8..ccb2a5d2 100644
--- a/packages/hightide-web/src/style/theme/components/vertical-navigation.css
+++ b/packages/hightide-web/src/style/theme/components/vertical-navigation.css
@@ -8,15 +8,28 @@
   }
 
   .vertical-navigation-item-row-container {
-    @apply relative flex-row-0 min-h-11 min-w-0;
-  }
+    @apply flex-row-0 items-center min-h-11 min-w-0 w-full rounded-md border-0 bg-transparent p-0 text-inherit text-left font-[inherit];
 
-  .vertical-navigation-item-row {
-    @apply flex-row-1 items-center min-h-11 min-w-0 h-full w-full rounded-md;
+    &[data-has-children] {
+      @apply hover:cursor-pointer;
+      transition: var(--focus-transitions);
+
+      &:hover,
+      &:focus-visible {
+        @apply bg-primary/15;
+      }
 
-    &[data-has-children][data-has-link] {
-      @apply mr-11;
+      &:focus-visible {
+        outline: var(--focus-outline);
+        outline-offset: var(--focus-outline-offset);
+        box-shadow: var(--focus-box-shadow);
+        border-color: var(--focus-border-color);
+      }
     }
+  }
+
+  .vertical-navigation-item-row {
+    @apply flex-row-1 items-center min-h-11 min-w-0 h-full flex-1 rounded-md;
 
     &[data-interactable] {
       @apply hover:cursor-pointer;
@@ -46,14 +59,10 @@
 
   .vertical-navigation-item-label {
     @apply flex-row-2 flex-1 items-center min-w-0 w-full min-h-11 px-2.5 py-1.5;
-
-    &[data-action-padding] {
-      @apply pr-11;
-    }
   }
 
   .vertical-navigation-toggle {
-    @apply absolute right-0 top-1/2 -translate-y-1/2;
+    @apply shrink-0 mr-2.5 pointer-events-none text-description;
   }
 
   .vertical-navigation-item-link-external-icon {
diff --git a/packages/hightide-web/stories/Layout/AppPage.stories.tsx b/packages/hightide-web/stories/Layout/AppPage.stories.tsx
index 975001a1..65e24456 100644
--- a/packages/hightide-web/stories/Layout/AppPage.stories.tsx
+++ b/packages/hightide-web/stories/Layout/AppPage.stories.tsx
@@ -40,9 +40,8 @@ const initialNavigationItems: AppPageNavigationItem[] = [
     label: (<div className="flex-row-2 justify-between w-full">{'With Label'}<span className="text-description">8</span></div>),
   },
   {
-    id: 'linkAndChildren',
-    label: 'Link and Children',
-    url: '#',
+    id: 'children',
+    label: 'Children',
     items: [
       {
         id: 'linkAndChildren-1',
diff --git a/packages/hightide-web/stories/Layout/Navigation/VerticalNavigation.stories.tsx b/packages/hightide-web/stories/Layout/Navigation/VerticalNavigation.stories.tsx
index e85d66b6..fbf6ffe1 100644
--- a/packages/hightide-web/stories/Layout/Navigation/VerticalNavigation.stories.tsx
+++ b/packages/hightide-web/stories/Layout/Navigation/VerticalNavigation.stories.tsx
@@ -85,7 +85,6 @@ const navigationItems: NavigationItemData[] = [
   {
     id: 'company',
     label: navigationLabel(<Building className="size-5" />, 'Company'),
-    url: '#',
     items: [
       { id: 'about', label: navigationLabel(<Info className="size-5" />, 'About'), url: '#' },
       { id: 'careers', label: navigationLabel(<BriefcaseBusiness className="size-5" />, 'Careers'), url: '#' },

From ea7c1a26cd04fa27a59f650183f0f73f9ecd26af Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Tue, 29 Sep 2026 15:05:44 +0200
Subject: [PATCH 10/25] feat: split expandable component

---
 conventions/Components.md                     |  17 ++
 .../src/components/layout/Expandable.tsx      | 239 ------------------
 .../layout/Expandable/Expandable.tsx          |  14 +
 .../layout/Expandable/ExpandableContent.tsx   |  47 ++++
 .../layout/Expandable/ExpandableContext.tsx   |  40 +++
 .../layout/Expandable/ExpandableRoot.tsx      |  57 +++++
 .../layout/Expandable/ExpandableTrigger.tsx   |  44 ++++
 .../src/components/layout/Expandable/index.ts |   9 +
 .../ExpandableSection/ExpandableSection.tsx   |  98 +++++++
 .../ExpandableSectionContent.tsx              |  40 +++
 .../ExpandableSectionHeader.tsx               |  38 +++
 .../layout/ExpandableSection/index.ts         |   7 +
 .../src/components/layout/FAQSection.tsx      |  19 +-
 .../src/components/layout/index.ts            |   1 +
 .../user-interaction/date/YearMonthPicker.tsx |  74 +++---
 .../src/style/theme/components/expandable.css |  16 +-
 .../stories/Layout/Expandable.stories.tsx     |  24 +-
 17 files changed, 472 insertions(+), 312 deletions(-)
 delete mode 100644 packages/hightide-web/src/components/layout/Expandable.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Expandable/Expandable.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Expandable/ExpandableContent.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Expandable/ExpandableContext.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Expandable/ExpandableRoot.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Expandable/ExpandableTrigger.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Expandable/index.ts
 create mode 100644 packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSection.tsx
 create mode 100644 packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionContent.tsx
 create mode 100644 packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx
 create mode 100644 packages/hightide-web/src/components/layout/ExpandableSection/index.ts

diff --git a/conventions/Components.md b/conventions/Components.md
index d675577b..6eef8802 100644
--- a/conventions/Components.md
+++ b/conventions/Components.md
@@ -59,6 +59,23 @@ When primitives share state, the component provides a `Component.Root` primitive
 
 A component whose primitives do not share state does not have a Root.
 
+### Context
+
+When a component has a context, the object that collects its primitives exposes that context and its consumer.
+
+- `Component.Context` is the React context.
+- `Component.Consumer` is `Component.Context.Consumer`.
+
+```tsx
+<Expandable.Root>
+  <Expandable.Consumer>
+    {(state) => (state?.isExpanded ? 'Open' : 'Closed')}
+  </Expandable.Consumer>
+</Expandable.Root>
+```
+
+Callers read shared state through `Component.Consumer` or the component hook. They do not reach the consumer by importing the context module.
+
 ## Styling identification
 
 Components identify themselves for styling with class names. Do not use `data-name`, or any other data attribute, as the styling hook.
diff --git a/packages/hightide-web/src/components/layout/Expandable.tsx b/packages/hightide-web/src/components/layout/Expandable.tsx
deleted file mode 100644
index a0546c3f..00000000
--- a/packages/hightide-web/src/components/layout/Expandable.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import type { Dispatch, HTMLAttributes, ReactNode, SetStateAction } from 'react'
-import { useEffect, useRef } from 'react'
-import { useState } from 'react'
-import { createContext, forwardRef, useCallback, useContext, useId, useMemo } from 'react'
-import clsx from 'clsx'
-import { Visibility } from './Visibility'
-import { ExpansionIcon } from '../display-and-visualization/ExpansionIcon'
-import { useTransitionState } from '../../hooks/useTransitionState'
-import { useControlledState } from '@helpwave/hightide-utils/hooks'
-import { ReactUtils } from '@helpwave/hightide-utils/utils'
-
-//
-// Context
-//
-type ExpandableContextIdsState = {
-  root: string,
-  header: string,
-  content: string,
-}
-
-type ExpandableContextState = {
-  ids: ExpandableContextIdsState,
-  setIds: Dispatch<SetStateAction<ExpandableContextIdsState>>,
-  disabled: boolean,
-  isExpanded: boolean,
-  toggle: () => void,
-  setIsExpanded: Dispatch<SetStateAction<boolean>>,
-}
-
-const ExpandableContext = createContext<ExpandableContextState | null>(null)
-
-function useExpandableContext() {
-  const context = useContext(ExpandableContext)
-  if (!context) {
-    throw new Error('Expandable components must be used within an ExpandableRoot')
-  }
-  return context
-}
-
-//
-// ExpandableRoot
-//
-
-export type ExpandableRootProps = HTMLAttributes<HTMLDivElement> & {
-  isExpanded?: boolean,
-  onExpandedChange?: (isExpanded: boolean) => void,
-  isInitialExpanded?: boolean,
-  disabled?: boolean,
-}
-
-export const ExpandableRoot = forwardRef<HTMLDivElement, ExpandableRootProps>(function ExpandableRoot({
-  children,
-  id: providedId,
-  isExpanded: controlledExpanded,
-  onExpandedChange,
-  isInitialExpanded = false,
-  disabled = false,
-  ...props
-}, ref) {
-  const generatedId = useId()
-  const [ids, setIds] = useState<ExpandableContextIdsState>({
-    root: providedId ?? `expandable-${generatedId}-root`,
-    header: `expandable-${generatedId}-header`,
-    content: `expandable-${generatedId}-content`
-  })
-  const [isExpanded, setIsExpanded] = useControlledState({
-    value: controlledExpanded,
-    onValueChange: onExpandedChange,
-    defaultValue: isInitialExpanded,
-  })
-
-  const toggle = useCallback(() => {
-    if (!disabled) {
-      setIsExpanded(!isExpanded)
-    }
-  }, [disabled, isExpanded, setIsExpanded])
-
-  const contextValue = useMemo(() => ({
-    isExpanded,
-    toggle,
-    setIsExpanded,
-    ids,
-    setIds,
-    disabled
-  }), [isExpanded, toggle, setIsExpanded, ids, disabled])
-
-  return (
-    <ExpandableContext.Provider value={contextValue}>
-      <div
-        {...props}
-        ref={ref}
-        id={ids.root}
-        data-expanded={isExpanded ? '' : undefined}
-        data-disabled={disabled ? '' : undefined}
-        className={clsx('expandable-root', props.className)}
-      >
-        {children}
-      </div>
-    </ExpandableContext.Provider>
-  )
-})
-
-//
-// ExpandableHeader
-//
-
-export type ExpandableHeaderProps = HTMLAttributes<HTMLDivElement> & {
-  isUsingDefaultIcon?: boolean,
-  triggerProps?: HTMLAttributes<HTMLButtonElement>,
-}
-
-export const ExpandableHeader = forwardRef<HTMLDivElement, ExpandableHeaderProps>(function ExpandableHeader({
-  children,
-  isUsingDefaultIcon = true,
-  triggerProps,
-  ...props
-}, ref) {
-  const { isExpanded, toggle, ids, setIds, disabled } = useExpandableContext()
-  useEffect(() => {
-    const id = props.id
-    if (id) {
-      setIds(prevState => ({ ...prevState, header: id }))
-    }
-  }, [props.id, setIds])
-
-  return (
-    <div
-      ref={ref}
-      {...props}
-      id={ids.header}
-      className={clsx('expandable-header-container', props.className)}
-    >
-      <button
-        {...triggerProps}
-        onClick={event => {
-          triggerProps?.onClick?.(event)
-          toggle()
-        }}
-        data-expanded={isExpanded ? '' : undefined}
-        data-disabled={disabled ? '' : undefined}
-        aria-expanded={isExpanded}
-        aria-controls={ids.content}
-        aria-disabled={disabled || undefined}
-        className={clsx('expandable-header', triggerProps?.className)}
-      >
-        {children}
-      </button>
-      <Visibility isVisible={isUsingDefaultIcon}>
-        <ExpansionIcon isExpanded={isExpanded} disabled={disabled} className="expandable-header-icon" />
-      </Visibility>
-    </div>
-  )
-})
-
-//
-// ExpandableContent
-//
-
-export type ExpandableContentProps = HTMLAttributes<HTMLDivElement> & {
-  forceMount?: boolean,
-  isClosingOnClick?: boolean,
-}
-
-export const ExpandableContent = forwardRef<HTMLDivElement, ExpandableContentProps>(function ExpandableContent({
-  children,
-  forceMount = false,
-  isClosingOnClick = false,
-  ...props
-}, forwardedRef) {
-  const { isExpanded, ids, setIds, setIsExpanded } = useExpandableContext()
-
-  const ref = useRef<HTMLDivElement | null>(null)
-
-  useEffect(() => {
-    const id = props.id
-    if (id) {
-      setIds(prevState => ({ ...prevState, content: id }))
-    }
-  }, [props.id, setIds])
-
-  const { transitionState } = useTransitionState({ isOpen: isExpanded, ref })
-
-  return (
-    <div
-      {...props}
-      ref={ReactUtils.assingRefsBuilder([ref, forwardedRef])}
-      id={ids.content}
-      data-expanded={isExpanded ? '' : undefined}
-      data-state={transitionState}
-      className={clsx('expandable-content', props.className)}
-      onClick={event => {
-        props.onClick?.(event)
-        if (isClosingOnClick) {
-          setIsExpanded(false)
-        }
-      }}
-    >
-      <Visibility isVisible={forceMount || isExpanded}>
-        {children}
-      </Visibility>
-    </div>
-  )
-})
-
-//
-// Composite
-//
-export interface ExpandableProps extends ExpandableRootProps {
-  trigger: ReactNode,
-  triggerProps?: Omit<ExpandableHeaderProps, 'children'>,
-  contentProps?: Omit<ExpandableContentProps, 'children'>,
-  contentExpandedClassName?: string,
-}
-
-export const Expandable = forwardRef<HTMLDivElement, ExpandableProps>(function Expandable({
-  children,
-  trigger,
-  triggerProps,
-  contentProps,
-  contentExpandedClassName,
-  ...props
-}, ref) {
-  return (
-    <ExpandableRoot ref={ref} {...props}>
-      <ExpandableHeader {...triggerProps}>
-        {trigger}
-      </ExpandableHeader>
-      <ExpandableContext.Consumer>
-        {ctx => (
-          <ExpandableContent
-            className={clsx(contentProps?.className, { [contentExpandedClassName ?? '']: !!ctx?.isExpanded })}
-          >
-            {children}
-          </ExpandableContent>
-        )}
-      </ExpandableContext.Consumer>
-    </ExpandableRoot>
-  )
-})
\ No newline at end of file
diff --git a/packages/hightide-web/src/components/layout/Expandable/Expandable.tsx b/packages/hightide-web/src/components/layout/Expandable/Expandable.tsx
new file mode 100644
index 00000000..d28d9942
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Expandable/Expandable.tsx
@@ -0,0 +1,14 @@
+import { ExpandableContent } from './ExpandableContent'
+import { ExpandableContext } from './ExpandableContext'
+import { ExpandableRoot } from './ExpandableRoot'
+import { ExpandableTrigger } from './ExpandableTrigger'
+
+const Expandable = {
+  Root: ExpandableRoot,
+  Trigger: ExpandableTrigger,
+  Content: ExpandableContent,
+  Context: ExpandableContext,
+  Consumer: ExpandableContext.Consumer,
+}
+
+export { Expandable }
diff --git a/packages/hightide-web/src/components/layout/Expandable/ExpandableContent.tsx b/packages/hightide-web/src/components/layout/Expandable/ExpandableContent.tsx
new file mode 100644
index 00000000..23f28683
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Expandable/ExpandableContent.tsx
@@ -0,0 +1,47 @@
+import type { HTMLAttributes } from 'react'
+import { forwardRef, useEffect } from 'react'
+import { Visibility } from '../Visibility'
+import { useExpandableContext } from './ExpandableContext'
+import clsx from 'clsx'
+
+export type ExpandableContentProps = HTMLAttributes<HTMLDivElement> & {
+  forceMount?: boolean,
+  isClosingOnClick?: boolean,
+}
+
+export const ExpandableContent = forwardRef<HTMLDivElement, ExpandableContentProps>(function ExpandableContent({
+  children,
+  forceMount = false,
+  isClosingOnClick = false,
+  id,
+  onClick,
+  ...props
+}, ref) {
+  const { isExpanded, ids, setIds, setIsExpanded } = useExpandableContext()
+
+  useEffect(() => {
+    if (id) {
+      setIds(prevState => ({ ...prevState, content: id }))
+    }
+  }, [id, setIds])
+
+  return (
+    <div
+      {...props}
+      ref={ref}
+      id={ids.content}
+      data-expanded={isExpanded ? '' : undefined}
+      onClick={event => {
+        onClick?.(event)
+        if (isClosingOnClick) {
+          setIsExpanded(false)
+        }
+      }}
+      className={clsx('expandable-content', props.className)}
+    >
+      <Visibility isVisible={forceMount || isExpanded}>
+        {children}
+      </Visibility>
+    </div>
+  )
+})
diff --git a/packages/hightide-web/src/components/layout/Expandable/ExpandableContext.tsx b/packages/hightide-web/src/components/layout/Expandable/ExpandableContext.tsx
new file mode 100644
index 00000000..5c6ce0f4
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Expandable/ExpandableContext.tsx
@@ -0,0 +1,40 @@
+import type { Dispatch, ReactNode, SetStateAction } from 'react'
+import { createContext, useContext } from 'react'
+
+export type ExpandableContextIdsState = {
+  root: string,
+  header: string,
+  content: string,
+}
+
+export type ExpandableContextState = {
+  ids: ExpandableContextIdsState,
+  setIds: Dispatch<SetStateAction<ExpandableContextIdsState>>,
+  disabled: boolean,
+  isExpanded: boolean,
+  toggle: () => void,
+  setIsExpanded: Dispatch<SetStateAction<boolean>>,
+}
+
+export const ExpandableContext = createContext<ExpandableContextState | null>(null)
+
+export function useExpandableContext() {
+  const context = useContext(ExpandableContext)
+  if (!context) {
+    throw new Error('Expandable components must be used within an Expandable.Root')
+  }
+  return context
+}
+
+export type ExpandableContextProviderProps = {
+  value: ExpandableContextState,
+  children: ReactNode,
+}
+
+export function ExpandableContextProvider({ value, children }: ExpandableContextProviderProps) {
+  return (
+    <ExpandableContext.Provider value={value}>
+      {children}
+    </ExpandableContext.Provider>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Expandable/ExpandableRoot.tsx b/packages/hightide-web/src/components/layout/Expandable/ExpandableRoot.tsx
new file mode 100644
index 00000000..168eed26
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Expandable/ExpandableRoot.tsx
@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react'
+import { useCallback, useId, useMemo, useState } from 'react'
+import { useControlledState } from '@helpwave/hightide-utils/hooks'
+
+import { ExpandableContextProvider } from './ExpandableContext'
+import type { ExpandableContextIdsState } from './ExpandableContext'
+
+export type ExpandableRootProps = {
+  children: ReactNode,
+  id?: string,
+  isExpanded?: boolean,
+  onExpandedChange?: (isExpanded: boolean) => void,
+  isInitialExpanded?: boolean,
+  disabled?: boolean,
+}
+
+export function ExpandableRoot({
+  children,
+  id: providedId,
+  isExpanded: controlledExpanded,
+  onExpandedChange,
+  isInitialExpanded = false,
+  disabled = false,
+}: ExpandableRootProps) {
+  const generatedId = useId()
+  const [ids, setIds] = useState<ExpandableContextIdsState>({
+    root: providedId ?? `expandable-${generatedId}-root`,
+    header: `expandable-${generatedId}-header`,
+    content: `expandable-${generatedId}-content`,
+  })
+  const [isExpanded, setIsExpanded] = useControlledState({
+    value: controlledExpanded,
+    onValueChange: onExpandedChange,
+    defaultValue: isInitialExpanded,
+  })
+
+  const toggle = useCallback(() => {
+    if (!disabled) {
+      setIsExpanded(!isExpanded)
+    }
+  }, [disabled, isExpanded, setIsExpanded])
+
+  const contextValue = useMemo(() => ({
+    isExpanded,
+    toggle,
+    setIsExpanded,
+    ids,
+    setIds,
+    disabled,
+  }), [isExpanded, toggle, setIsExpanded, ids, disabled])
+
+  return (
+    <ExpandableContextProvider value={contextValue}>
+      {children}
+    </ExpandableContextProvider>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Expandable/ExpandableTrigger.tsx b/packages/hightide-web/src/components/layout/Expandable/ExpandableTrigger.tsx
new file mode 100644
index 00000000..b2f285ca
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Expandable/ExpandableTrigger.tsx
@@ -0,0 +1,44 @@
+import type { ReactNode, RefObject } from 'react'
+import { useMemo, useRef } from 'react'
+import { BagFunctionUtil } from '@helpwave/hightide-utils/utils'
+
+import { useExpandableContext } from './ExpandableContext'
+
+export interface ExpandableTriggerBag<T extends HTMLElement> {
+  isExpanded: boolean,
+  disabled: boolean,
+  toggle: () => void,
+  props: {
+    'id': string,
+    'onClick': () => void,
+    'aria-expanded': boolean,
+    'aria-controls': string,
+    'aria-disabled': true | undefined,
+    'ref': RefObject<T | null>,
+  },
+}
+
+export interface ExpandableTriggerProps<T extends HTMLElement> {
+  children: (bag: ExpandableTriggerBag<T>) => ReactNode,
+}
+
+export function ExpandableTrigger<T extends HTMLElement = HTMLButtonElement>({ children }: ExpandableTriggerProps<T>) {
+  const { isExpanded, toggle, ids, disabled } = useExpandableContext()
+  const ref = useRef<T>(null)
+
+  const bag = useMemo<ExpandableTriggerBag<T>>(() => ({
+    isExpanded,
+    disabled,
+    toggle,
+    props: {
+      'id': ids.header,
+      'onClick': toggle,
+      'aria-expanded': isExpanded,
+      'aria-controls': ids.content,
+      'aria-disabled': disabled || undefined,
+      'ref': ref,
+    },
+  }), [disabled, ids.content, ids.header, isExpanded, toggle])
+
+  return BagFunctionUtil.resolve(children, bag)
+}
diff --git a/packages/hightide-web/src/components/layout/Expandable/index.ts b/packages/hightide-web/src/components/layout/Expandable/index.ts
new file mode 100644
index 00000000..a018ebd1
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Expandable/index.ts
@@ -0,0 +1,9 @@
+export { Expandable } from './Expandable'
+export { ExpandableRoot } from './ExpandableRoot'
+export { ExpandableTrigger } from './ExpandableTrigger'
+export { ExpandableContent } from './ExpandableContent'
+export { useExpandableContext } from './ExpandableContext'
+
+export type { ExpandableRootProps } from './ExpandableRoot'
+export type { ExpandableTriggerBag, ExpandableTriggerProps } from './ExpandableTrigger'
+export type { ExpandableContentProps } from './ExpandableContent'
diff --git a/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSection.tsx b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSection.tsx
new file mode 100644
index 00000000..269cd343
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSection.tsx
@@ -0,0 +1,98 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { forwardRef } from 'react'
+import clsx from 'clsx'
+import { Expandable } from '../Expandable/Expandable'
+import { type ExpandableContentProps } from '../Expandable/ExpandableContent'
+import { ExpandableContext, useExpandableContext } from '../Expandable/ExpandableContext'
+import type { ExpandableRootProps } from '../Expandable/ExpandableRoot'
+import { ExpandableSectionContent } from './ExpandableSectionContent'
+import { ExpandableSectionHeader } from './ExpandableSectionHeader'
+import type { ExpandableSectionHeaderProps } from './ExpandableSectionHeader'
+
+export type ExpandableSectionProps = Omit<ExpandableRootProps, 'children'> & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'id'> & {
+  trigger: ReactNode,
+  triggerProps?: Omit<ExpandableSectionHeaderProps, 'children'>,
+  contentProps?: Omit<ExpandableContentProps, 'children'>,
+  contentExpandedClassName?: string,
+  isUsingDefaultIcon?: boolean,
+  children?: ReactNode,
+}
+
+const ExpandableSectionFrame = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ExpandableSectionFrame({
+  className,
+  children,
+  ...props
+}, ref) {
+  const { isExpanded, disabled } = useExpandableContext()
+
+  return (
+    <div
+      {...props}
+      ref={ref}
+      data-expanded={isExpanded ? '' : undefined}
+      data-disabled={disabled ? '' : undefined}
+      className={clsx('expandable-section-root', className)}
+    >
+      {children}
+    </div>
+  )
+})
+
+export const ExpandableSectionComponent = forwardRef<HTMLDivElement, ExpandableSectionProps>(function ExpandableSection({
+  children,
+  trigger,
+  triggerProps,
+  contentProps,
+  contentExpandedClassName,
+  isUsingDefaultIcon = true,
+  isExpanded,
+  onExpandedChange,
+  isInitialExpanded,
+  disabled,
+  id,
+  className,
+  ...props
+}, ref) {
+  return (
+    <Expandable.Root
+      id={id}
+      isExpanded={isExpanded}
+      onExpandedChange={onExpandedChange}
+      isInitialExpanded={isInitialExpanded}
+      disabled={disabled}
+    >
+      <ExpandableSectionFrame ref={ref} className={className} {...props}>
+        <Expandable.Trigger>
+          {({ props: openerProps }) => (
+            <ExpandableSectionHeader
+              {...openerProps}
+              {...triggerProps}
+              isUsingDefaultIcon={isUsingDefaultIcon}
+              className={triggerProps?.className}
+              onClick={event => {
+                openerProps.onClick()
+                triggerProps?.onClick?.(event)
+              }}
+            >
+              {trigger}
+            </ExpandableSectionHeader>
+          )}
+        </Expandable.Trigger>
+        <ExpandableSectionContent
+          {...contentProps}
+          contentExpandedClassName={contentExpandedClassName}
+        >
+          {children}
+        </ExpandableSectionContent>
+      </ExpandableSectionFrame>
+    </Expandable.Root>
+  )
+})
+
+export const ExpandableSection = Object.assign(ExpandableSectionComponent, {
+  SectionFrame: ExpandableSectionFrame,
+  Header: ExpandableSectionHeader,
+  Content: ExpandableSectionContent,
+  Context: ExpandableContext,
+  Consumer: ExpandableContext.Consumer,
+})
diff --git a/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionContent.tsx b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionContent.tsx
new file mode 100644
index 00000000..f037a191
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionContent.tsx
@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+import { forwardRef, useRef } from 'react'
+import clsx from 'clsx'
+import { ReactUtils } from '@helpwave/hightide-utils/utils'
+
+import { useTransitionState } from '../../../hooks/useTransitionState'
+import { ExpandableContent } from '../Expandable/ExpandableContent'
+import type { ExpandableContentProps } from '../Expandable/ExpandableContent'
+import { useExpandableContext } from '../Expandable/ExpandableContext'
+
+export type ExpandableSectionContentProps = Omit<ExpandableContentProps, 'children'> & {
+  contentExpandedClassName?: string,
+  children?: ReactNode,
+}
+
+export const ExpandableSectionContent = forwardRef<HTMLDivElement, ExpandableSectionContentProps>(function ExpandableSectionContent({
+  children,
+  className,
+  contentExpandedClassName,
+  ...props
+}, forwardedRef) {
+  const { isExpanded } = useExpandableContext()
+  const ref = useRef<HTMLDivElement | null>(null)
+  const { transitionState } = useTransitionState({ isOpen: isExpanded, ref })
+
+  return (
+    <ExpandableContent
+      {...props}
+      ref={ReactUtils.assingRefsBuilder([ref, forwardedRef])}
+      data-state={transitionState}
+      className={clsx(
+        'expandable-section-content',
+        className,
+        isExpanded && contentExpandedClassName
+      )}
+    >
+      {children}
+    </ExpandableContent>
+  )
+})
diff --git a/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx
new file mode 100644
index 00000000..ed3f1c0a
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx
@@ -0,0 +1,38 @@
+import type { ButtonHTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
+import { useExpandableContext } from '../Expandable/ExpandableContext'
+
+export type ExpandableSectionHeaderProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  isUsingDefaultIcon?: boolean,
+}
+
+export function ExpandableSectionHeader({
+  children,
+  className,
+  isUsingDefaultIcon = true,
+  ...props
+}: ExpandableSectionHeaderProps) {
+  const { isExpanded, disabled } = useExpandableContext()
+
+  return (
+    <button
+      type="button"
+      {...props}
+      data-expanded={isExpanded ? '' : undefined}
+      data-disabled={disabled ? '' : undefined}
+      className={clsx('expandable-section-header', className)}
+    >
+      {children}
+      {isUsingDefaultIcon && (
+        <ExpansionIcon
+          isExpanded={isExpanded}
+          disabled={disabled}
+          aria-hidden
+          className="expandable-section-header-icon"
+        />
+      )}
+    </button>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/ExpandableSection/index.ts b/packages/hightide-web/src/components/layout/ExpandableSection/index.ts
new file mode 100644
index 00000000..005304ea
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/ExpandableSection/index.ts
@@ -0,0 +1,7 @@
+export { ExpandableSection } from './ExpandableSection'
+export { ExpandableSectionHeader } from './ExpandableSectionHeader'
+export { ExpandableSectionContent } from './ExpandableSectionContent'
+
+export type { ExpandableSectionProps } from './ExpandableSection'
+export type { ExpandableSectionHeaderProps } from './ExpandableSectionHeader'
+export type { ExpandableSectionContentProps } from './ExpandableSectionContent'
diff --git a/packages/hightide-web/src/components/layout/FAQSection.tsx b/packages/hightide-web/src/components/layout/FAQSection.tsx
index fa777d4d..10c96661 100644
--- a/packages/hightide-web/src/components/layout/FAQSection.tsx
+++ b/packages/hightide-web/src/components/layout/FAQSection.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
-import type { ExpandableProps } from './Expandable'
-import { ExpandableContent, ExpandableHeader, ExpandableRoot } from './Expandable'
+import type { ExpandableSectionProps } from './ExpandableSection'
+import { ExpandableSection } from './ExpandableSection'
 
-export type FAQItem = Pick<ExpandableProps, 'isExpanded' | 'className'> & {
+export type FAQItem = Pick<ExpandableSectionProps, 'isExpanded' | 'className'> & {
   title: string,
   content: ReactNode,
 }
@@ -19,16 +19,13 @@ export const FAQSection = ({
     <ul className="flex-col-4">
       {entries.map(({ title, content, ...restProps }, index) => (
         <li key={index}>
-          <ExpandableRoot
+          <ExpandableSection
             {...restProps}
+            trigger={title}
+            contentProps={{ isClosingOnClick: true }}
           >
-            <ExpandableHeader>
-              {title}
-            </ExpandableHeader>
-            <ExpandableContent isClosingOnClick>
-              {content}
-            </ExpandableContent>
-          </ExpandableRoot>
+            {content}
+          </ExpandableSection>
         </li>
       ))}
     </ul>
diff --git a/packages/hightide-web/src/components/layout/index.ts b/packages/hightide-web/src/components/layout/index.ts
index 15e8c74d..255c6f85 100644
--- a/packages/hightide-web/src/components/layout/index.ts
+++ b/packages/hightide-web/src/components/layout/index.ts
@@ -3,6 +3,7 @@ export * from './Carousel'
 export * from './Divider'
 export * from './DividerInserter'
 export * from './Expandable'
+export * from './ExpandableSection'
 export * from './FAQSection'
 export * from './InifiniteScroll'
 export * from './MarkdownInterpreter'
diff --git a/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx
index 0fddd192..14416583 100644
--- a/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx
@@ -1,7 +1,7 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { equalSizeGroups, range } from '@helpwave/hightide-utils/utils'
 import clsx from 'clsx'
-import { ExpandableContent, ExpandableHeader, ExpandableRoot } from '../../layout/Expandable'
+import { ExpandableSection } from '../../layout/ExpandableSection'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
 import { Button } from '../Button'
@@ -39,47 +39,45 @@ const YearRow = memo(function YearRow({
   const monthGrid = useMemo(() => equalSizeGroups([...DateUtils.monthsList], 3), [])
 
   return (
-    <ExpandableRoot
+    <ExpandableSection
       ref={isSelectedYear ? ref : undefined}
       isExpanded={isExpanded}
       onExpandedChange={setIsExpanded}
+      trigger={year}
+      triggerProps={{ className: clsx('px-2', { 'text-primary font-bold': isSelectedYear }) }}
+      contentProps={{ className: 'gap-y-1 px-2 expandable-content-h-43' }}
     >
-      <ExpandableHeader className={clsx('px-2', { 'text-primary font-bold': isSelectedYear })}>
-        {year}
-      </ExpandableHeader>
-      <ExpandableContent className="gap-y-1 px-2 expandable-content-h-43">
-        {isExpanded && monthGrid.map((group, groupIdx) => (
-          <div key={groupIdx} className="flex-row-1">
-            {group.map(month => {
-              const monthIndex = DateUtils.monthsList.indexOf(month)
-
-              const currentTimestamp = new Date(year, monthIndex).getTime()
-              const isAfterStart = minTimestamp === undefined || currentTimestamp >= minTimestamp
-              const isBeforeEnd = maxTimestamp === undefined || currentTimestamp <= maxTimestamp
-              const isValid = isAfterStart && isBeforeEnd
-              const isSelectedMonth = monthIndex === selectedMonthIndex
-
-              return (
-                <Button
-                  key={month}
-                  disabled={!isValid}
-                  color={isSelectedMonth && isValid ? 'primary' : 'neutral'}
-                  className="flex-1 min-w-auto"
-                  size="sm"
-                  onClick={() => {
-                    if (isValid) {
-                      onSelect(new Date(year, monthIndex))
-                    }
-                  }}
-                >
-                  {monthNames[monthIndex]}
-                </Button>
-              )
-            })}
-          </div>
-        ))}
-      </ExpandableContent>
-    </ExpandableRoot>
+      {isExpanded && monthGrid.map((group, groupIdx) => (
+        <div key={groupIdx} className="flex-row-1">
+          {group.map(month => {
+            const monthIndex = DateUtils.monthsList.indexOf(month)
+
+            const currentTimestamp = new Date(year, monthIndex).getTime()
+            const isAfterStart = minTimestamp === undefined || currentTimestamp >= minTimestamp
+            const isBeforeEnd = maxTimestamp === undefined || currentTimestamp <= maxTimestamp
+            const isValid = isAfterStart && isBeforeEnd
+            const isSelectedMonth = monthIndex === selectedMonthIndex
+
+            return (
+              <Button
+                key={month}
+                disabled={!isValid}
+                color={isSelectedMonth && isValid ? 'primary' : 'neutral'}
+                className="flex-1 min-w-auto"
+                size="sm"
+                onClick={() => {
+                  if (isValid) {
+                    onSelect(new Date(year, monthIndex))
+                  }
+                }}
+              >
+                {monthNames[monthIndex]}
+              </Button>
+            )
+          })}
+        </div>
+      ))}
+    </ExpandableSection>
   )
 })
 
diff --git a/packages/hightide-web/src/style/theme/components/expandable.css b/packages/hightide-web/src/style/theme/components/expandable.css
index 94c9e8a9..52a93d8a 100644
--- a/packages/hightide-web/src/style/theme/components/expandable.css
+++ b/packages/hightide-web/src/style/theme/components/expandable.css
@@ -1,5 +1,5 @@
 @layer components {
-  .expandable-root {
+  .expandable-section-root {
     @apply flex-col-0 surface coloring-solid rounded-lg shadow-sm;
 
     &:not([data-disabled])[data-containertoggleable] {
@@ -7,12 +7,8 @@
     }
   }
 
-  .expandable-header-container {
-    @apply relative flex-row-0;
-  }
-
-  .expandable-header {
-    @apply flex-row-2 flex-1 justify-between items-center py-2 px-4 rounded-lg select-none;
+  .expandable-section-header {
+    @apply flex-row-2 flex-1 justify-between items-center min-h-12 px-4 rounded-lg select-none;
 
     &:not([data-disabled]) {
       @apply cursor-pointer surface coloring-solid-hover;
@@ -23,7 +19,7 @@
     }
   }
 
-  .expandable-content {
+  .expandable-section-content {
     @apply flex-col-2 px-4 transition-all ease-in-out h-24;
 
     &[data-state="opening"],
@@ -44,8 +40,8 @@
     }
   }
 
-  .expandable-header-icon {
-    @apply absolute right-2 top-1/2 -translate-y-1/2;
+  .expandable-section-header-icon {
+    @apply shrink-0;
   }
 }
 
diff --git a/packages/hightide-web/stories/Layout/Expandable.stories.tsx b/packages/hightide-web/stories/Layout/Expandable.stories.tsx
index 45a023bd..438ff47e 100644
--- a/packages/hightide-web/stories/Layout/Expandable.stories.tsx
+++ b/packages/hightide-web/stories/Layout/Expandable.stories.tsx
@@ -1,30 +1,26 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { ExpandableContent, ExpandableRoot, ExpandableHeader } from '../../src/components/layout/Expandable'
+import { ExpandableSection } from '../../src/components/layout/ExpandableSection'
 import { range } from '@helpwave/hightide-utils/utils'
 
 const meta = {
-  component: ExpandableRoot,
-} satisfies Meta<typeof ExpandableRoot>
+  component: ExpandableSection,
+} satisfies Meta<typeof ExpandableSection>
 
 export default meta
 type Story = StoryObj<typeof meta>;
 
 export const expandable: Story = {
   args: {
+    trigger: 'Label',
     disabled: false,
-    onChange: action('onChange'),
+    onExpandedChange: action('onExpandedChange'),
   },
   render: (args) => (
-    <ExpandableRoot {...args}>
-      <ExpandableHeader>
-        {'Label'}
-      </ExpandableHeader>
-      <ExpandableContent className="expandable-content-h-40">
-        {range(5).map((value) => (
-          <div key={value}>{`Item ${value}`}</div>
-        ))}
-      </ExpandableContent>
-    </ExpandableRoot>
+    <ExpandableSection {...args} contentProps={{ className: 'expandable-content-h-40' }}>
+      {range(5).map((value) => (
+        <div key={value}>{`Item ${value}`}</div>
+      ))}
+    </ExpandableSection>
   ),
 }

From 248d390ed9ce9b0b2a1c3651b91b27bc7c25dc48 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Tue, 29 Sep 2026 15:57:35 +0200
Subject: [PATCH 11/25] feat: add wheel picker

---
 .../user-interaction/ScrollPicker.tsx         | 239 -------------
 .../WheelPicker/WheelPicker.tsx               |  48 +++
 .../WheelPicker/WheelPickerBar.tsx            |  17 +
 .../WheelPicker/WheelPickerContext.tsx        |  39 +++
 .../WheelPicker/WheelPickerOption.tsx         |  75 ++++
 .../WheelPicker/WheelPickerRoot.tsx           | 327 ++++++++++++++++++
 .../user-interaction/WheelPicker/index.ts     |   7 +
 .../src/components/user-interaction/index.ts  |   2 +-
 .../src/style/theme/components/index.css      |   1 +
 .../style/theme/components/wheel-picker.css   |  72 ++++
 .../User Interaction/ScrollPicker.stories.tsx |  19 -
 .../User Interaction/WheelPicker.stories.tsx  |  31 ++
 12 files changed, 618 insertions(+), 259 deletions(-)
 delete mode 100644 packages/hightide-web/src/components/user-interaction/ScrollPicker.tsx
 create mode 100644 packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPicker.tsx
 create mode 100644 packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerBar.tsx
 create mode 100644 packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerContext.tsx
 create mode 100644 packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerOption.tsx
 create mode 100644 packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx
 create mode 100644 packages/hightide-web/src/components/user-interaction/WheelPicker/index.ts
 create mode 100644 packages/hightide-web/src/style/theme/components/wheel-picker.css
 delete mode 100644 packages/hightide-web/stories/User Interaction/ScrollPicker.stories.tsx
 create mode 100644 packages/hightide-web/stories/User Interaction/WheelPicker.stories.tsx

diff --git a/packages/hightide-web/src/components/user-interaction/ScrollPicker.tsx b/packages/hightide-web/src/components/user-interaction/ScrollPicker.tsx
deleted file mode 100644
index 6e6b950f..00000000
--- a/packages/hightide-web/src/components/user-interaction/ScrollPicker.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import clsx from 'clsx'
-import { getNeighbours, range, MathUtil, type DirectionNumber } from '@helpwave/hightide-utils/utils'
-import { SafeGlobals } from '../../utils/safeGlobals'
-
-export type ScrollPickerProps<T> = {
-  options: T[],
-  mapping: (value: T) => string,
-  selected?: T,
-  onChange?: (value: T) => void,
-  disabled?: boolean,
-}
-
-type AnimationData<T> = {
-  /** The index we scroll to */
-  targetIndex: number,
-  /** The index we are currently showing centered */
-  currentIndex: number,
-  items: T[],
-  /** From -0.5 to 0.5 */
-  transition: number,
-  velocity: number,
-  animationVelocity: number,
-  lastTimeStamp?: number,
-  lastScrollTimeStamp?: number,
-}
-
-const up = 1
-const down = -1
-
-/**
- * A component for picking an option by scrolling
- */
-export const ScrollPicker = <T, >({
-  options,
-  mapping,
-  selected,
-  onChange,
-  disabled = false,
-}: ScrollPickerProps<T>) => {
-  let selectedIndex = 0
-  if (selected && options.indexOf(selected) !== -1) {
-    selectedIndex = options.indexOf(selected)
-  }
-  const [{
-    currentIndex,
-    transition,
-    items,
-    lastTimeStamp
-  }, setAnimation] = useState<AnimationData<T>>({
-    targetIndex: selectedIndex,
-    currentIndex: disabled ? selectedIndex : 0,
-    velocity: 0,
-    animationVelocity: Math.floor(options.length / 2),
-    transition: 0,
-    items: options,
-  })
-
-  const itemsShownCount = 5
-  const shownItems = getNeighbours(range(items.length), currentIndex).map(index => ({
-    name: mapping(items[index]!), index
-  }))
-
-  const itemHeight = 40
-  const distance = 8
-
-  const containerHeight = itemHeight * (itemsShownCount - 2) + distance * (itemsShownCount - 2 + 1)
-
-  const getDirection = useCallback((targetIndex: number, currentIndex: number, transition: number, length: number): DirectionNumber => {
-    if (targetIndex === currentIndex) {
-      return transition > 0 ? up : down
-    }
-    let distanceForward = targetIndex - currentIndex
-    if (distanceForward < 0) {
-      distanceForward += length
-    }
-    return distanceForward >= length / 2 ? down : up
-  }, [])
-
-  const animate = useCallback((timestamp: number, startTime: number | undefined) => {
-    setAnimation((prevState) => {
-      const {
-        targetIndex,
-        currentIndex,
-        transition,
-        animationVelocity,
-        velocity,
-        items,
-        lastScrollTimeStamp
-      } = prevState
-      if (disabled) {
-        return { ...prevState, currentIndex: targetIndex, velocity: 0, lastTimeStamp: timestamp }
-      }
-      if ((targetIndex === currentIndex && velocity === 0 && transition === 0) || !startTime) {
-        return { ...prevState, lastTimeStamp: timestamp }
-      }
-      const progress = (timestamp - startTime) / 1000 // to seconds
-      const direction = getDirection(targetIndex, currentIndex, transition, items.length)
-
-      let newVelocity = velocity
-      let usedVelocity
-      let newCurrentIndex = currentIndex
-      const isAutoScrolling = velocity <= 10 && (!lastScrollTimeStamp || timestamp - lastScrollTimeStamp > 50)
-
-      const newLastScrollTimeStamp = velocity !== 0 ? timestamp : lastScrollTimeStamp
-
-      // manual scrolling
-      if (isAutoScrolling) {
-        usedVelocity = direction * animationVelocity
-      } else {
-        usedVelocity = velocity
-        newVelocity = velocity * 0.5 // drag loss
-        if (Math.abs(newVelocity) <= 0.05) {
-          newVelocity = 0
-        }
-      }
-
-      let newTransition = transition + usedVelocity * progress
-      const changeThreshold = 0.5
-
-      while (newTransition >= changeThreshold) {
-        if (newCurrentIndex === targetIndex && newTransition >= changeThreshold && isAutoScrolling) {
-          newTransition = 0
-          break
-        }
-        newCurrentIndex = (currentIndex + 1) % items.length
-        newTransition -= 1
-      }
-      if (newTransition >= changeThreshold) {
-        newTransition = 0
-      }
-      while (newTransition <= -changeThreshold) {
-        if (newCurrentIndex === targetIndex && newTransition <= -changeThreshold && isAutoScrolling) {
-          newTransition = 0
-          break
-        }
-        newCurrentIndex = currentIndex === 0 ? items.length - 1 : currentIndex - 1
-        newTransition += 1
-      }
-      let newTargetIndex = targetIndex
-      if (!isAutoScrolling) {
-        newTargetIndex = newCurrentIndex
-      }
-
-      if ((currentIndex !== newTargetIndex || newTargetIndex !== targetIndex) && newTargetIndex === newCurrentIndex) {
-        onChange?.(items[newCurrentIndex]!)
-      }
-      return {
-        targetIndex: newTargetIndex,
-        currentIndex: newCurrentIndex,
-        animationVelocity,
-        transition: newTransition,
-        velocity: newVelocity,
-        items,
-        lastTimeStamp: timestamp,
-        lastScrollTimeStamp: newLastScrollTimeStamp
-      }
-    })
-  }, [disabled, getDirection, onChange])
-
-  useEffect(() => {
-    // constant update
-    SafeGlobals.window('ScrollPicker')?.requestAnimationFrame((timestamp) => animate(timestamp, lastTimeStamp))
-  })
-
-  const opacity = (transition: number, index: number, itemsCount: number) => {
-    const max = 100
-    const min = 0
-    const distance = max - min
-
-    let opacityValue = min
-    const unitTransition = MathUtil.clamp(transition / 0.5, 0, 1)
-    if (index === 1 || index === itemsCount - 2) {
-      if (index === 1 && transition > 0) {
-        opacityValue += Math.floor(unitTransition * distance)
-      }
-      if (index === itemsCount - 2 && transition < 0) {
-        opacityValue += Math.floor(unitTransition * distance)
-      }
-    } else {
-      opacityValue = max
-    }
-
-    // TODO this is not the right value for the bottom entry
-    return MathUtil.clamp(1 - (opacityValue / max), 0, 1)
-  }
-
-  return (
-    <div
-      className="relative overflow-hidden"
-      style={{ height: containerHeight }}
-      onWheel={event => {
-        if (event.deltaY !== 0) {
-          const deltaY = MathUtil.clamp(event.deltaY, -itemHeight * 2 / 3, itemHeight * 2 / 3)
-          // TODO slower increase
-          setAnimation(({ velocity, ...animationData }) =>
-            ({ ...animationData, velocity: velocity + deltaY }))
-        }
-      }}
-    >
-      <div className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2">
-        <div
-          className="absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/50 border-y-2 border-x-0 "
-          style={{ height: `${itemHeight}px` }}
-        />
-        <div
-          className="flex-col-2 select-none"
-          style={{
-            transform: `translateY(${-transition * (distance + itemHeight)}px)`,
-            columnGap: `${distance}px`,
-          }}
-        >
-          {shownItems.map(({ name, index }, arrayIndex) => (
-            <div
-              key={index}
-              className={clsx(
-                `flex-col-2 items-center justify-center rounded-md`,
-                {
-                  'text-primary font-bold': currentIndex === index,
-                  'text-on-background': currentIndex === index,
-                  'cursor-pointer': !disabled,
-                  'cursor-not-allowed': disabled,
-                }
-              )}
-              style={{
-                opacity: currentIndex !== index ? opacity(transition, arrayIndex, shownItems.length) : undefined,
-                height: `${itemHeight}px`,
-                maxHeight: `${itemHeight}px`,
-              }}
-              onClick={() => !disabled && setAnimation(prevState => ({ ...prevState, targetIndex: index }))}
-            >
-              {name}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPicker.tsx b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPicker.tsx
new file mode 100644
index 00000000..5cda8fb1
--- /dev/null
+++ b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPicker.tsx
@@ -0,0 +1,48 @@
+import type { ReactElement, ReactNode } from 'react'
+import clsx from 'clsx'
+
+import type { WheelPickerBarProps } from './WheelPickerBar'
+import { WheelPickerBar } from './WheelPickerBar'
+import { WheelPickerContext } from './WheelPickerContext'
+import type { WheelPickerOptionProps } from './WheelPickerOption'
+import { WheelPickerOption } from './WheelPickerOption'
+import type { WheelPickerRootProps } from './WheelPickerRoot'
+import { WheelPickerRoot } from './WheelPickerRoot'
+
+export type WheelPickerProps<T> = Omit<WheelPickerRootProps<T>, 'children'> & {
+  children?: ReactNode,
+  rootProps?: Omit<WheelPickerRootProps<T>, 'children'>,
+  barProps?: WheelPickerBarProps,
+}
+
+type WheelPickerComponent = <T>(props: WheelPickerProps<T>) => ReactElement | null
+
+function WheelPickerComponentImpl<T>({
+  children,
+  className,
+  rootProps,
+  barProps,
+  ...props
+}: WheelPickerProps<T>) {
+  return (
+    <WheelPickerRoot
+      {...props}
+      {...rootProps}
+      className={clsx(className, rootProps?.className)}
+    >
+      {children}
+      <WheelPickerBar {...barProps} />
+    </WheelPickerRoot>
+  )
+}
+
+const WheelPicker = Object.assign(WheelPickerComponentImpl as WheelPickerComponent, {
+  Root: WheelPickerRoot,
+  Option: WheelPickerOption,
+  Bar: WheelPickerBar,
+  Context: WheelPickerContext,
+  Consumer: WheelPickerContext.Consumer,
+})
+
+export { WheelPicker }
+export type { WheelPickerOptionProps, WheelPickerRootProps, WheelPickerBarProps }
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerBar.tsx b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerBar.tsx
new file mode 100644
index 00000000..c6835cee
--- /dev/null
+++ b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerBar.tsx
@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+export type WheelPickerBarProps = HTMLAttributes<HTMLDivElement>
+
+export function WheelPickerBar({ className, ...props }: WheelPickerBarProps) {
+  return (
+    <div
+      {...props}
+      aria-hidden
+      className={clsx('wheel-picker-bar', className)}
+    >
+      <div className="wheel-picker-bar-line" />
+      <div className="wheel-picker-bar-line" />
+    </div>
+  )
+}
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerContext.tsx b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerContext.tsx
new file mode 100644
index 00000000..335398d0
--- /dev/null
+++ b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerContext.tsx
@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react'
+import { createContext, useContext } from 'react'
+
+export type WheelPickerRegisteredOption<T> = {
+  id: string,
+  value: T,
+  element: HTMLDivElement,
+}
+
+export type WheelPickerContextValue<T> = {
+  value: T | undefined,
+  disabled: boolean,
+  listboxId: string,
+  registerOption: (option: WheelPickerRegisteredOption<T>) => () => void,
+  selectValue: (value: T) => void,
+}
+
+export const WheelPickerContext = createContext<WheelPickerContextValue<unknown> | null>(null)
+
+export function useWheelPickerContext<T>(): WheelPickerContextValue<T> {
+  const context = useContext(WheelPickerContext)
+  if (!context) {
+    throw new Error('WheelPicker components must be used within a WheelPicker.Root')
+  }
+  return context as WheelPickerContextValue<T>
+}
+
+export type WheelPickerContextProviderProps<T> = {
+  value: WheelPickerContextValue<T>,
+  children: ReactNode,
+}
+
+export function WheelPickerContextProvider<T>({ value, children }: WheelPickerContextProviderProps<T>) {
+  return (
+    <WheelPickerContext.Provider value={value as WheelPickerContextValue<unknown>}>
+      {children}
+    </WheelPickerContext.Provider>
+  )
+}
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerOption.tsx b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerOption.tsx
new file mode 100644
index 00000000..fac87297
--- /dev/null
+++ b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerOption.tsx
@@ -0,0 +1,75 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react'
+import { useLayoutEffect, useMemo, useRef } from 'react'
+import clsx from 'clsx'
+
+import { useWheelPickerContext } from './WheelPickerContext'
+
+export type WheelPickerOptionProps<T = string> = (
+  T extends string
+    ? {
+        valueId?: undefined,
+        value: T,
+      }
+    : {
+        valueId: string,
+        value: T,
+      }
+) & Omit<HTMLAttributes<HTMLDivElement>, 'value' | 'valueId'> & {
+  children?: ReactNode,
+}
+
+type WheelPickerOptionComponent = <T = string>(props: WheelPickerOptionProps<T>) => ReactElement | null
+
+function toIdentity<T>(value: T, valueId: string | undefined) {
+  if (valueId === undefined) {
+    return { value, id: value as string }
+  }
+  return { value, id: valueId }
+}
+
+function WheelPickerOptionImpl<T>({
+  value,
+  valueId,
+  className,
+  children,
+  onClick,
+  ...props
+}: WheelPickerOptionProps<T>) {
+  const { disabled: rootDisabled, value: selected, registerOption, selectValue } = useWheelPickerContext<T>()
+  const ref = useRef<HTMLDivElement>(null)
+  const identity = useMemo(() => toIdentity(value, valueId), [value, valueId])
+  const isSelected = Object.is(selected, value)
+
+  useLayoutEffect(() => {
+    const element = ref.current
+    if (!element) {
+      return
+    }
+    return registerOption({ id: identity.id, value, element })
+  }, [identity, registerOption, value])
+
+  return (
+    <div
+      {...props}
+      ref={ref}
+      id={identity.id}
+      role="option"
+      aria-selected={isSelected}
+      data-selected={isSelected ? '' : undefined}
+      className={clsx('wheel-picker-option', className)}
+      onClick={(event) => {
+        onClick?.(event)
+        if (event.defaultPrevented || rootDisabled) {
+          return
+        }
+        selectValue(value)
+      }}
+    >
+      {children ?? (valueId === undefined ? value as string : null)}
+    </div>
+  )
+}
+
+const WheelPickerOption = WheelPickerOptionImpl as WheelPickerOptionComponent
+
+export { WheelPickerOption }
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx
new file mode 100644
index 00000000..47120458
--- /dev/null
+++ b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx
@@ -0,0 +1,327 @@
+import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode } from 'react'
+import { Children, isValidElement, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import clsx from 'clsx'
+
+import type { WheelPickerRegisteredOption } from './WheelPickerContext'
+import { WheelPickerContextProvider } from './WheelPickerContext'
+import { WheelPickerBar } from './WheelPickerBar'
+
+export type WheelPickerRootProps<T> = Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'children' | 'onChange'> & {
+  value?: T,
+  defaultValue?: T,
+  onValueChange?: (value: T) => void,
+  disabled?: boolean,
+  visibleRows?: number,
+  children?: ReactNode,
+}
+
+function isWheelPickerBar(node: ReactNode): node is ReactElement {
+  return isValidElement(node) && node.type === WheelPickerBar
+}
+
+function orderedOptions<T>(options: WheelPickerRegisteredOption<T>[]) {
+  return options.slice().sort((left, right) => {
+    if (left.element === right.element) {
+      return 0
+    }
+    const position = left.element.compareDocumentPosition(right.element)
+    return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
+  })
+}
+
+function itemHeightOf<T>(options: WheelPickerRegisteredOption<T>[]) {
+  return options[0]?.element.offsetHeight ?? 0
+}
+
+function paintOptions<T>(options: WheelPickerRegisteredOption<T>[], scrollTop: number) {
+  const itemHeight = itemHeightOf(options)
+  if (itemHeight <= 0) {
+    return
+  }
+  const indexFloat = scrollTop / itemHeight
+  const centeredIndex = Math.round(indexFloat)
+  options.forEach((option, index) => {
+    const distance = Math.abs(index - indexFloat)
+    const blur = Math.min(distance * distance * 0.9, 6)
+    const opacity = Math.max(0.4, 1 - distance * 0.22)
+    option.element.style.setProperty('--wheel-picker-distance-blur', `${blur}px`)
+    option.element.style.setProperty('--wheel-picker-distance-opacity', `${opacity}`)
+    option.element.toggleAttribute('data-centered', index === centeredIndex)
+  })
+}
+
+export function WheelPickerRoot<T>({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  visibleRows = 1,
+  className,
+  children,
+  onKeyDown,
+  style,
+  ...props
+}: WheelPickerRootProps<T>) {
+  const listboxId = useId()
+  const scrollerRef = useRef<HTMLDivElement>(null)
+  const optionsRef = useRef<WheelPickerRegisteredOption<T>[]>([])
+  const userScrollingRef = useRef(false)
+  const onValueChangeRef = useRef(onValueChange)
+  const [uncontrolled, setUncontrolled] = useState(defaultValue)
+  const [options, setOptions] = useState<WheelPickerRegisteredOption<T>[]>([])
+  const optionsPublishScheduled = useRef(false)
+  const selected = value !== undefined ? value : uncontrolled
+  const selectedRef = useRef(selected)
+  selectedRef.current = selected
+  onValueChangeRef.current = onValueChange
+
+  const childList = Children.toArray(children)
+  const bars = childList.filter(isWheelPickerBar)
+  const items = childList.filter((child) => !isWheelPickerBar(child))
+
+  const applyValue = useCallback((next: T) => {
+    if (Object.is(selectedRef.current, next)) {
+      return
+    }
+    selectedRef.current = next
+    setUncontrolled(next)
+    onValueChangeRef.current?.(next)
+  }, [])
+
+  const scrollToIndex = useCallback((index: number, behavior: ScrollBehavior) => {
+    const scroller = scrollerRef.current
+    const options = orderedOptions(optionsRef.current)
+    const itemHeight = itemHeightOf(options)
+    if (!scroller || itemHeight <= 0) {
+      return
+    }
+    const top = Math.max(0, Math.min(options.length - 1, index)) * itemHeight
+    if (Math.abs(scroller.scrollTop - top) <= 1) {
+      paintOptions(options, scroller.scrollTop)
+      return
+    }
+    userScrollingRef.current = behavior === 'smooth'
+    scroller.scrollTo({ top, behavior })
+    if (behavior === 'auto') {
+      paintOptions(options, top)
+    }
+  }, [])
+
+  const syncToSelected = useCallback((behavior: ScrollBehavior) => {
+    if (userScrollingRef.current || disabled) {
+      return
+    }
+    const options = orderedOptions(optionsRef.current)
+    if (options.length === 0) {
+      return
+    }
+    const selectedValue = selectedRef.current
+    const index = selectedValue === undefined
+      ? 0
+      : options.findIndex((option) => Object.is(option.value, selectedValue))
+    scrollToIndex(index < 0 ? 0 : index, behavior)
+  }, [disabled, scrollToIndex])
+
+  const commitFromScroll = useCallback(() => {
+    if (disabled) {
+      return
+    }
+    const scroller = scrollerRef.current
+    const options = orderedOptions(optionsRef.current)
+    const itemHeight = itemHeightOf(options)
+    if (!scroller || itemHeight <= 0 || options.length === 0) {
+      return
+    }
+    const index = Math.round(scroller.scrollTop / itemHeight)
+    const option = options[Math.max(0, Math.min(options.length - 1, index))]
+    if (!option) {
+      return
+    }
+    paintOptions(options, scroller.scrollTop)
+    applyValue(option.value)
+  }, [applyValue, disabled])
+
+  const selectValue = useCallback((next: T) => {
+    if (disabled) {
+      return
+    }
+    const options = orderedOptions(optionsRef.current)
+    const index = options.findIndex((option) => Object.is(option.value, next))
+    if (index < 0) {
+      return
+    }
+    scrollToIndex(index, 'smooth')
+    applyValue(next)
+  }, [applyValue, disabled, scrollToIndex])
+
+  const publishOptions = useCallback(() => {
+    if (optionsPublishScheduled.current) {
+      return
+    }
+    optionsPublishScheduled.current = true
+    queueMicrotask(() => {
+      optionsPublishScheduled.current = false
+      setOptions(orderedOptions(optionsRef.current))
+    })
+  }, [])
+
+  const registerOption = useCallback((option: WheelPickerRegisteredOption<T>) => {
+    optionsRef.current = optionsRef.current.filter((entry) => entry.id !== option.id)
+    optionsRef.current.push(option)
+    publishOptions()
+    return () => {
+      optionsRef.current = optionsRef.current.filter((entry) => entry.element !== option.element)
+      publishOptions()
+    }
+  }, [publishOptions])
+
+  useLayoutEffect(() => {
+    syncToSelected('auto')
+  }, [selected, syncToSelected])
+
+  useLayoutEffect(() => {
+    const scroller = scrollerRef.current
+    if (!scroller) {
+      return
+    }
+    let timer = 0
+    let wheelRemainder = 0
+    const onWheel = (event: WheelEvent) => {
+      event.preventDefault()
+      if (disabled) {
+        return
+      }
+      const options = orderedOptions(optionsRef.current)
+      const itemHeight = itemHeightOf(options)
+      if (!itemHeight || options.length === 0) {
+        return
+      }
+      const pixelDelta = event.deltaMode === WheelEvent.DOM_DELTA_PIXEL
+        ? event.deltaY
+        : Math.sign(event.deltaY) * itemHeight
+      const delta = Math.abs(pixelDelta) >= itemHeight
+        ? Math.sign(pixelDelta) * itemHeight
+        : pixelDelta
+      wheelRemainder += delta
+      const steps = Math.trunc(wheelRemainder / itemHeight)
+      if (steps === 0) {
+        return
+      }
+      wheelRemainder -= steps * itemHeight
+      const currentIndex = Math.round(scroller.scrollTop / itemHeight)
+      const nextIndex = Math.max(0, Math.min(options.length - 1, currentIndex + steps))
+      scrollToIndex(nextIndex, 'auto')
+    }
+    const onScroll = () => {
+      if (disabled) {
+        return
+      }
+      userScrollingRef.current = true
+      paintOptions(orderedOptions(optionsRef.current), scroller.scrollTop)
+      window.clearTimeout(timer)
+      timer = window.setTimeout(() => {
+        userScrollingRef.current = false
+        commitFromScroll()
+      }, 80)
+    }
+    const onScrollEnd = () => {
+      window.clearTimeout(timer)
+      userScrollingRef.current = false
+      commitFromScroll()
+    }
+    const root = scroller.parentElement ?? scroller
+    root.addEventListener('wheel', onWheel, { passive: false })
+    scroller.addEventListener('scroll', onScroll, { passive: true })
+    scroller.addEventListener('scrollend', onScrollEnd)
+    return () => {
+      window.clearTimeout(timer)
+      root.removeEventListener('wheel', onWheel)
+      scroller.removeEventListener('scroll', onScroll)
+      scroller.removeEventListener('scrollend', onScrollEnd)
+    }
+  }, [commitFromScroll, disabled, scrollToIndex])
+
+  const moveSelection = useCallback((direction: 1 | -1 | 'start' | 'end') => {
+    const options = orderedOptions(optionsRef.current)
+    if (options.length === 0) {
+      return
+    }
+    const currentIndex = options.findIndex((option) => Object.is(option.value, selectedRef.current))
+    let nextIndex = currentIndex < 0 ? (direction === -1 ? options.length : -1) : currentIndex
+    if (direction === 'start') {
+      nextIndex = 0
+    } else if (direction === 'end') {
+      nextIndex = options.length - 1
+    } else {
+      nextIndex += direction
+    }
+    const option = options[nextIndex]
+    if (!option) {
+      return
+    }
+    scrollToIndex(nextIndex, 'smooth')
+    applyValue(option.value)
+  }, [applyValue, scrollToIndex])
+
+  const contextValue = useMemo(() => ({
+    value: selected,
+    disabled,
+    listboxId,
+    registerOption,
+    selectValue,
+  }), [disabled, listboxId, registerOption, selectValue, selected])
+
+  const activeId = options.find((option) => Object.is(option.value, selected))?.id
+  const rowSpan = Number.isFinite(visibleRows) ? Math.max(0, visibleRows) : 1
+  const rowCount = 1 + rowSpan * 2
+  const pickerStyle = {
+    ...style,
+    '--wheel-picker-visible-span': rowSpan,
+    '--wheel-picker-fade-start': `${(rowSpan / rowCount) * 100}%`,
+    '--wheel-picker-fade-end': `${((rowSpan + 1) / rowCount) * 100}%`,
+  } as CSSProperties
+
+  return (
+    <WheelPickerContextProvider value={contextValue}>
+      <div
+        {...props}
+        id={listboxId}
+        role="listbox"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled || undefined}
+        aria-orientation="vertical"
+        aria-activedescendant={activeId}
+        data-disabled={disabled ? '' : undefined}
+        className={clsx('wheel-picker-root', className)}
+        style={pickerStyle}
+        onKeyDown={(event) => {
+          onKeyDown?.(event)
+          if (event.defaultPrevented || disabled) {
+            return
+          }
+          if (event.key === 'ArrowDown') {
+            event.preventDefault()
+            moveSelection(1)
+          } else if (event.key === 'ArrowUp') {
+            event.preventDefault()
+            moveSelection(-1)
+          } else if (event.key === 'Home') {
+            event.preventDefault()
+            moveSelection('start')
+          } else if (event.key === 'End') {
+            event.preventDefault()
+            moveSelection('end')
+          }
+        }}
+      >
+        <div
+          ref={scrollerRef}
+          className="wheel-picker-items"
+        >
+          {items}
+        </div>
+        {bars}
+      </div>
+    </WheelPickerContextProvider>
+  )
+}
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/index.ts b/packages/hightide-web/src/components/user-interaction/WheelPicker/index.ts
new file mode 100644
index 00000000..083918a5
--- /dev/null
+++ b/packages/hightide-web/src/components/user-interaction/WheelPicker/index.ts
@@ -0,0 +1,7 @@
+export { WheelPicker } from './WheelPicker'
+export { WheelPickerRoot } from './WheelPickerRoot'
+export { WheelPickerOption } from './WheelPickerOption'
+export { WheelPickerBar } from './WheelPickerBar'
+export { useWheelPickerContext } from './WheelPickerContext'
+
+export type { WheelPickerProps, WheelPickerRootProps, WheelPickerOptionProps, WheelPickerBarProps } from './WheelPicker'
diff --git a/packages/hightide-web/src/components/user-interaction/index.ts b/packages/hightide-web/src/components/user-interaction/index.ts
index b0645df5..bc741250 100644
--- a/packages/hightide-web/src/components/user-interaction/index.ts
+++ b/packages/hightide-web/src/components/user-interaction/index.ts
@@ -7,7 +7,7 @@ export * from './IconButton'
 export * from './LabelledCheckbox'
 export * from './Menu'
 export * from './MultiSelect'
-export * from './ScrollPicker'
+export * from './WheelPicker'
 export * from './Select'
 export * from './Switch'
 export * from './Textarea'
diff --git a/packages/hightide-web/src/style/theme/components/index.css b/packages/hightide-web/src/style/theme/components/index.css
index 700debbd..36c8c98f 100644
--- a/packages/hightide-web/src/style/theme/components/index.css
+++ b/packages/hightide-web/src/style/theme/components/index.css
@@ -40,6 +40,7 @@
 @import "./vertical-navigation.css";
 @import "./app-page.css";
 @import "./scrollable-list.css";
+@import "./wheel-picker.css";
 @import "./searchbar.css";
 @import "./date-time-picker-dialog.css";
 @import "./date-time-picker.css";
diff --git a/packages/hightide-web/src/style/theme/components/wheel-picker.css b/packages/hightide-web/src/style/theme/components/wheel-picker.css
new file mode 100644
index 00000000..87995760
--- /dev/null
+++ b/packages/hightide-web/src/style/theme/components/wheel-picker.css
@@ -0,0 +1,72 @@
+@layer components {
+  .wheel-picker-root {
+    --wheel-picker-item-height: 2.5rem;
+    --wheel-picker-visible-span: 1;
+    --wheel-picker-fade-start: 33.333%;
+    --wheel-picker-fade-end: 66.667%;
+
+    @apply relative w-fit min-w-24 select-none rounded-md focus-style-outline outline-none;
+
+    height: calc(var(--wheel-picker-item-height) * (1 + var(--wheel-picker-visible-span) * 2));
+
+    &:focus-visible {
+      @apply focus-style-apply;
+    }
+
+    &[data-disabled] {
+      @apply cursor-not-allowed opacity-60;
+    }
+  }
+
+  .wheel-picker-items {
+    @apply h-full overflow-y-auto;
+
+    padding-block: calc(var(--wheel-picker-item-height) * var(--wheel-picker-visible-span));
+    scroll-snap-type: y mandatory;
+    overscroll-behavior: contain;
+    scrollbar-width: none;
+    touch-action: pan-y;
+    mask-image: linear-gradient(
+      to bottom,
+      rgb(0 0 0 / 0.55) 0%,
+      black var(--wheel-picker-fade-start),
+      black var(--wheel-picker-fade-end),
+      rgb(0 0 0 / 0.55) 100%
+    );
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .wheel-picker-root[data-disabled] .wheel-picker-items {
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .wheel-picker-option {
+    @apply flex shrink-0 items-center justify-center px-4 text-base text-description;
+
+    height: var(--wheel-picker-item-height);
+    min-width: calc(var(--spacing) * 24);
+    scroll-snap-align: center;
+    filter: blur(var(--wheel-picker-distance-blur, 0px));
+    opacity: var(--wheel-picker-distance-opacity, 1);
+
+    &[data-centered] {
+      @apply font-semibold text-on-background;
+    }
+  }
+
+  .wheel-picker-bar {
+    @apply pointer-events-none absolute inset-x-0 z-1 flex flex-col justify-between;
+
+    top: 50%;
+    height: var(--wheel-picker-item-height);
+    transform: translateY(-50%);
+  }
+
+  .wheel-picker-bar-line {
+    @apply h-px w-full bg-divider;
+  }
+}
diff --git a/packages/hightide-web/stories/User Interaction/ScrollPicker.stories.tsx b/packages/hightide-web/stories/User Interaction/ScrollPicker.stories.tsx
deleted file mode 100644
index 73a6c885..00000000
--- a/packages/hightide-web/stories/User Interaction/ScrollPicker.stories.tsx	
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { range } from '@helpwave/hightide-utils/utils'
-import { ScrollPicker } from '../../src/components/user-interaction/ScrollPicker'
-
-const meta = {
-  component: ScrollPicker<number>,
-} satisfies Meta<typeof ScrollPicker<number>>
-
-export default meta
-type Story = StoryObj<typeof meta>;
-
-export const scrollPicker: Story = {
-  args: {
-    options: range(60),
-    mapping: (value) => value.toString(),
-    selected: 55,
-    disabled: false
-  },
-}
diff --git a/packages/hightide-web/stories/User Interaction/WheelPicker.stories.tsx b/packages/hightide-web/stories/User Interaction/WheelPicker.stories.tsx
new file mode 100644
index 00000000..5b3e84e4
--- /dev/null
+++ b/packages/hightide-web/stories/User Interaction/WheelPicker.stories.tsx	
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { useState } from 'react'
+import { range } from '@helpwave/hightide-utils/utils'
+
+import { WheelPicker } from '../../src/components/user-interaction/WheelPicker'
+
+const meta = {
+  component: WheelPicker<number>,
+} satisfies Meta<typeof WheelPicker<number>>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const wheelPicker: Story = {
+  args: {
+    disabled: false,
+    visibleRows: 1,
+  },
+  render: function WheelPickerStory({ disabled, visibleRows }) {
+    const [value, setValue] = useState(55)
+    return (
+      <WheelPicker value={value} onValueChange={setValue} disabled={disabled} visibleRows={visibleRows}>
+        {range(60).map((item) => (
+          <WheelPicker.Option key={item} value={item} valueId={String(item)}>
+            {item}
+          </WheelPicker.Option>
+        ))}
+      </WheelPicker>
+    )
+  },
+}

From 535c7d1a9125fd3dbcc3dabbca4b8d88ccdf953a Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Tue, 29 Sep 2026 18:51:40 +0200
Subject: [PATCH 12/25] feat: update date picker and time selection to use
 wheel pickers

---
 .../components/user-interaction/Button.tsx    |   4 +-
 .../user-interaction/IconButton.tsx           |   5 +-
 .../components/user-interaction/Pressable.tsx |  18 +-
 .../WheelPicker/WheelPicker.tsx               |   4 +-
 .../WheelPicker/WheelPickerOption.tsx         |  26 +-
 .../WheelPicker/WheelPickerRoot.tsx           | 163 +++++++++--
 .../user-interaction/WheelPicker/index.ts     |   2 +-
 ...{DatePicker.tsx => CalendarDatePicker.tsx} |  76 +++--
 .../{DayPicker.tsx => CalendarDayPicker.tsx}  |  21 +-
 .../user-interaction/date/DateTimePicker.tsx  |  80 ++++--
 .../date/DateTimePickerDialog.tsx             | 206 +++++++++----
 .../date/DateTimeWheelPicker.tsx              |  71 +++++
 .../user-interaction/date/DateWheelPicker.tsx | 160 +++++++++++
 .../user-interaction/date/TimeInput.tsx       | 249 ----------------
 .../user-interaction/date/TimeWheelPicker.tsx | 272 ++++++++++++++++++
 .../user-interaction/date/YearMonthPicker.tsx | 179 ++++--------
 .../components/user-interaction/date/index.ts |   8 +-
 .../theme/components/calendar-day-picker.css  |  33 +++
 .../style/theme/components/date-picker.css    |  22 +-
 .../components/date-time-picker-dialog.css    |  33 ++-
 .../theme/components/date-time-picker.css     |   4 +
 .../src/style/theme/components/day-picker.css |  46 ---
 .../src/style/theme/components/index.css      |   4 +-
 .../{time-input.css => time-wheel-picker.css} |  12 +-
 .../style/theme/components/wheel-picker.css   |  35 ++-
 .../src/style/utitlity/coloring.css           |   5 +
 ...ies.tsx => CalendarDatePicker.stories.tsx} |  15 +-
 ...ries.tsx => CalendarDayPicker.stories.tsx} |  11 +-
 .../DateTimeWheelPicker.stories.tsx           |  23 ++
 .../DateWheelPicker.stories.tsx               |  24 ++
 ...tories.tsx => TimeWheelPicker.stories.tsx} |  13 +-
 .../YearMonthPicker.stories.tsx               |   2 +-
 32 files changed, 1206 insertions(+), 620 deletions(-)
 rename packages/hightide-web/src/components/user-interaction/date/{DatePicker.tsx => CalendarDatePicker.tsx} (62%)
 rename packages/hightide-web/src/components/user-interaction/date/{DayPicker.tsx => CalendarDayPicker.tsx} (88%)
 create mode 100644 packages/hightide-web/src/components/user-interaction/date/DateTimeWheelPicker.tsx
 create mode 100644 packages/hightide-web/src/components/user-interaction/date/DateWheelPicker.tsx
 delete mode 100644 packages/hightide-web/src/components/user-interaction/date/TimeInput.tsx
 create mode 100644 packages/hightide-web/src/components/user-interaction/date/TimeWheelPicker.tsx
 create mode 100644 packages/hightide-web/src/style/theme/components/calendar-day-picker.css
 delete mode 100644 packages/hightide-web/src/style/theme/components/day-picker.css
 rename packages/hightide-web/src/style/theme/components/{time-input.css => time-wheel-picker.css} (52%)
 rename packages/hightide-web/stories/User Interaction/Date and Time Input/{DatePicker.stories.tsx => CalendarDatePicker.stories.tsx} (64%)
 rename packages/hightide-web/stories/User Interaction/Date and Time Input/{DayPicker.stories.tsx => CalendarDayPicker.stories.tsx} (60%)
 create mode 100644 packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimeWheelPicker.stories.tsx
 create mode 100644 packages/hightide-web/stories/User Interaction/Date and Time Input/DateWheelPicker.stories.tsx
 rename packages/hightide-web/stories/User Interaction/Date and Time Input/{TimeInput.stories.tsx => TimeWheelPicker.stories.tsx} (62%)

diff --git a/packages/hightide-web/src/components/user-interaction/Button.tsx b/packages/hightide-web/src/components/user-interaction/Button.tsx
index 9eb01911..ad643998 100644
--- a/packages/hightide-web/src/components/user-interaction/Button.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Button.tsx
@@ -6,7 +6,7 @@ import type { IconSize } from '../display-and-visualization/Icon'
 import { Icon } from '../display-and-visualization/Icon'
 import { LoadingSpinner } from '../layout/loading/LoadingSpinner'
 import type { ButtonVariant, PressableProps } from './Pressable'
-import { mapButtonVariant, Pressable } from './Pressable'
+import { buttonColorForVariant, mapButtonVariant, Pressable } from './Pressable'
 
 export {
   ButtonUtil,
@@ -39,6 +39,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
   className,
   size = 'md',
   variant = 'filled',
+  color,
   isProcessing = false,
   ...props
 }, ref) {
@@ -53,6 +54,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       {...coloring}
       ref={ref}
       size={size}
+      color={buttonColorForVariant(variant, color === undefined ? 'primary' : color) ?? undefined}
       isProcessing={isProcessing}
       processingIndicator={false}
       className={clsx('button coloring', className)}
diff --git a/packages/hightide-web/src/components/user-interaction/IconButton.tsx b/packages/hightide-web/src/components/user-interaction/IconButton.tsx
index 81f37a17..9040af14 100644
--- a/packages/hightide-web/src/components/user-interaction/IconButton.tsx
+++ b/packages/hightide-web/src/components/user-interaction/IconButton.tsx
@@ -2,7 +2,7 @@ import type { ElementType, ForwardedRef, ReactNode } from 'react'
 import { forwardRef,type ButtonHTMLAttributes } from 'react'
 import { Icon } from '../display-and-visualization/Icon'
 import type { ButtonColor, IconButtonVariant } from './Pressable'
-import { mapButtonVariant } from './Pressable'
+import { buttonColorForVariant, coloringColorName, mapButtonVariant } from './Pressable'
 import type { TooltipDisplayProps } from './Tooltip'
 import { TooltipContext, TooltipDisplay, TooltipRoot, useTooltip } from './Tooltip'
 import { Visibility } from '../layout/Visibility'
@@ -38,6 +38,7 @@ export const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonBaseProps>
   ...props
 }, ref) {
   const coloring = mapButtonVariant(variant)
+  const resolvedColor = buttonColorForVariant(variant, color)
   return (
     <button
       {...props}
@@ -57,7 +58,7 @@ export const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonBaseProps>
       className={clsx('icon-button coloring', props.className)}
       data-disabled={disabled ? '': undefined}
       data-size={size ?? undefined}
-      data-color={color ?? undefined}
+      data-color={coloringColorName(resolvedColor)}
       data-coloring-style={coloring.coloringStyle}
       data-color-variant={coloring.colorVariant}
       data-bordered={coloring.bordered ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/Pressable.tsx b/packages/hightide-web/src/components/user-interaction/Pressable.tsx
index 29d4bced..49564401 100644
--- a/packages/hightide-web/src/components/user-interaction/Pressable.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Pressable.tsx
@@ -18,10 +18,24 @@ export const iconButtonVariants = ['elevated', 'filled', 'tonal', 'foreground']
 
 export type IconButtonVariant = typeof iconButtonVariants[number]
 
-const buttonColorsList = ['primary', 'secondary', 'positive', 'warning', 'negative', 'neutral'] as const
+const buttonColorsList = ['primary', 'secondary', 'positive', 'warning', 'negative', 'neutral', 'surfaceInverse'] as const
 
 export type ButtonColor = typeof buttonColorsList[number] | null
 
+export function coloringColorName(color: ButtonColor) {
+  if (color === 'surfaceInverse') {
+    return 'surface-inverse'
+  }
+  return color ?? undefined
+}
+
+export function buttonColorForVariant(variant: ButtonVariant | IconButtonVariant, color: ButtonColor) {
+  if (variant === 'foreground' && color === 'neutral') {
+    return 'surfaceInverse' as const
+  }
+  return color
+}
+
 export const ButtonUtil = {
   colors: buttonColorsList,
   variants: buttonVariants,
@@ -86,7 +100,7 @@ export const Pressable = forwardRef<HTMLButtonElement, PressableProps>(function
       data-disabled={disabled ? '' : undefined}
       data-processing={isProcessing ? '' : undefined}
       data-size={size ?? undefined}
-      data-color={color ?? undefined}
+      data-color={coloringColorName(color)}
       data-coloring-style={coloringStyle}
       data-color-variant={colorVariant}
       data-bordered={bordered ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPicker.tsx b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPicker.tsx
index 5cda8fb1..9306473a 100644
--- a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPicker.tsx
@@ -6,7 +6,7 @@ import { WheelPickerBar } from './WheelPickerBar'
 import { WheelPickerContext } from './WheelPickerContext'
 import type { WheelPickerOptionProps } from './WheelPickerOption'
 import { WheelPickerOption } from './WheelPickerOption'
-import type { WheelPickerRootProps } from './WheelPickerRoot'
+import type { WheelPickerLoopEvent, WheelPickerRootProps } from './WheelPickerRoot'
 import { WheelPickerRoot } from './WheelPickerRoot'
 
 export type WheelPickerProps<T> = Omit<WheelPickerRootProps<T>, 'children'> & {
@@ -45,4 +45,4 @@ const WheelPicker = Object.assign(WheelPickerComponentImpl as WheelPickerCompone
 })
 
 export { WheelPicker }
-export type { WheelPickerOptionProps, WheelPickerRootProps, WheelPickerBarProps }
+export type { WheelPickerLoopEvent, WheelPickerOptionProps, WheelPickerRootProps, WheelPickerBarProps }
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerOption.tsx b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerOption.tsx
index fac87297..c766b720 100644
--- a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerOption.tsx
+++ b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerOption.tsx
@@ -1,9 +1,19 @@
 import type { HTMLAttributes, ReactElement, ReactNode } from 'react'
-import { useLayoutEffect, useMemo, useRef } from 'react'
+import { createContext, useContext, useLayoutEffect, useMemo, useRef } from 'react'
 import clsx from 'clsx'
 
 import { useWheelPickerContext } from './WheelPickerContext'
 
+const WheelPickerPreviewContext = createContext(false)
+
+export function WheelPickerPreviewScope({ children }: { children: ReactNode }) {
+  return (
+    <WheelPickerPreviewContext.Provider value={true}>
+      {children}
+    </WheelPickerPreviewContext.Provider>
+  )
+}
+
 export type WheelPickerOptionProps<T = string> = (
   T extends string
     ? {
@@ -35,26 +45,30 @@ function WheelPickerOptionImpl<T>({
   onClick,
   ...props
 }: WheelPickerOptionProps<T>) {
+  const isPreview = useContext(WheelPickerPreviewContext)
   const { disabled: rootDisabled, value: selected, registerOption, selectValue } = useWheelPickerContext<T>()
   const ref = useRef<HTMLDivElement>(null)
   const identity = useMemo(() => toIdentity(value, valueId), [value, valueId])
-  const isSelected = Object.is(selected, value)
+  const isSelected = !isPreview && Object.is(selected, value)
 
   useLayoutEffect(() => {
+    if (isPreview) {
+      return
+    }
     const element = ref.current
     if (!element) {
       return
     }
     return registerOption({ id: identity.id, value, element })
-  }, [identity, registerOption, value])
+  }, [identity, isPreview, registerOption, value])
 
   return (
     <div
       {...props}
       ref={ref}
-      id={identity.id}
-      role="option"
-      aria-selected={isSelected}
+      id={isPreview ? undefined : identity.id}
+      role={isPreview ? undefined : 'option'}
+      aria-selected={isPreview ? undefined : isSelected}
       data-selected={isSelected ? '' : undefined}
       className={clsx('wheel-picker-option', className)}
       onClick={(event) => {
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx
index 47120458..3ea64f0d 100644
--- a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx
+++ b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx
@@ -1,20 +1,48 @@
 import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode } from 'react'
-import { Children, isValidElement, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { Children, cloneElement, isValidElement, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import clsx from 'clsx'
 
 import type { WheelPickerRegisteredOption } from './WheelPickerContext'
 import { WheelPickerContextProvider } from './WheelPickerContext'
 import { WheelPickerBar } from './WheelPickerBar'
+import { WheelPickerPreviewScope } from './WheelPickerOption'
+
+export type WheelPickerLoopEvent<T> = {
+  value: T,
+  direction: 1 | -1,
+  loopedAround: 'start' | 'end',
+}
 
 export type WheelPickerRootProps<T> = Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'children' | 'onChange'> & {
   value?: T,
   defaultValue?: T,
   onValueChange?: (value: T) => void,
+  onLoop?: (event: WheelPickerLoopEvent<T>) => void,
   disabled?: boolean,
+  isLooping?: boolean,
   visibleRows?: number,
   children?: ReactNode,
 }
 
+function wrappedNodes(nodes: ReactNode[], start: number, count: number) {
+  if (nodes.length === 0 || count <= 0) {
+    return []
+  }
+  return Array.from({ length: count }, (_, offset) => {
+    const index = ((start + offset) % nodes.length + nodes.length) % nodes.length
+    return nodes[index]
+  })
+}
+
+function previewCopies(nodes: ReactNode[], prefix: string) {
+  return nodes.map((node, index) => {
+    if (!isValidElement(node)) {
+      return node
+    }
+    return cloneElement(node, { key: `${prefix}-${index}` })
+  })
+}
+
 function isWheelPickerBar(node: ReactNode): node is ReactElement {
   return isValidElement(node) && node.type === WheelPickerBar
 }
@@ -33,19 +61,27 @@ function itemHeightOf<T>(options: WheelPickerRegisteredOption<T>[]) {
   return options[0]?.element.offsetHeight ?? 0
 }
 
+function resolveStep(currentIndex: number, steps: number, length: number, isLooping: boolean) {
+  const raw = currentIndex + steps
+  if (!isLooping || length <= 0) {
+    return {
+      index: Math.max(0, Math.min(length - 1, raw)),
+      loops: 0,
+    }
+  }
+  return {
+    index: ((raw % length) + length) % length,
+    loops: Math.floor(raw / length),
+  }
+}
+
 function paintOptions<T>(options: WheelPickerRegisteredOption<T>[], scrollTop: number) {
   const itemHeight = itemHeightOf(options)
   if (itemHeight <= 0) {
     return
   }
-  const indexFloat = scrollTop / itemHeight
-  const centeredIndex = Math.round(indexFloat)
+  const centeredIndex = Math.round(scrollTop / itemHeight)
   options.forEach((option, index) => {
-    const distance = Math.abs(index - indexFloat)
-    const blur = Math.min(distance * distance * 0.9, 6)
-    const opacity = Math.max(0.4, 1 - distance * 0.22)
-    option.element.style.setProperty('--wheel-picker-distance-blur', `${blur}px`)
-    option.element.style.setProperty('--wheel-picker-distance-opacity', `${opacity}`)
     option.element.toggleAttribute('data-centered', index === centeredIndex)
   })
 }
@@ -54,7 +90,9 @@ export function WheelPickerRoot<T>({
   value,
   defaultValue,
   onValueChange,
+  onLoop,
   disabled = false,
+  isLooping = false,
   visibleRows = 1,
   className,
   children,
@@ -67,6 +105,8 @@ export function WheelPickerRoot<T>({
   const optionsRef = useRef<WheelPickerRegisteredOption<T>[]>([])
   const userScrollingRef = useRef(false)
   const onValueChangeRef = useRef(onValueChange)
+  const onLoopRef = useRef(onLoop)
+  const isLoopingRef = useRef(isLooping)
   const [uncontrolled, setUncontrolled] = useState(defaultValue)
   const [options, setOptions] = useState<WheelPickerRegisteredOption<T>[]>([])
   const optionsPublishScheduled = useRef(false)
@@ -74,6 +114,8 @@ export function WheelPickerRoot<T>({
   const selectedRef = useRef(selected)
   selectedRef.current = selected
   onValueChangeRef.current = onValueChange
+  onLoopRef.current = onLoop
+  isLoopingRef.current = isLooping
 
   const childList = Children.toArray(children)
   const bars = childList.filter(isWheelPickerBar)
@@ -141,6 +183,35 @@ export function WheelPickerRoot<T>({
     applyValue(option.value)
   }, [applyValue, disabled])
 
+  const stepBy = useCallback((steps: number) => {
+    const scroller = scrollerRef.current
+    const options = orderedOptions(optionsRef.current)
+    const itemHeight = itemHeightOf(options)
+    if (!scroller || itemHeight <= 0 || options.length === 0 || steps === 0) {
+      return
+    }
+    const currentIndex = Math.round(scroller.scrollTop / itemHeight)
+    const { index, loops } = resolveStep(currentIndex, steps, options.length, isLoopingRef.current)
+    const option = options[index]
+    if (!option) {
+      return
+    }
+    scrollToIndex(index, 'auto')
+    applyValue(option.value)
+    if (loops === 0) {
+      return
+    }
+    const direction = loops > 0 ? 1 : -1
+    const loopedAround = direction === 1 ? 'end' : 'start'
+    for (let count = 0; count < Math.abs(loops); count += 1) {
+      onLoopRef.current?.({
+        value: option.value,
+        direction,
+        loopedAround,
+      })
+    }
+  }, [applyValue, scrollToIndex])
+
   const selectValue = useCallback((next: T) => {
     if (disabled) {
       return
@@ -208,9 +279,7 @@ export function WheelPickerRoot<T>({
         return
       }
       wheelRemainder -= steps * itemHeight
-      const currentIndex = Math.round(scroller.scrollTop / itemHeight)
-      const nextIndex = Math.max(0, Math.min(options.length - 1, currentIndex + steps))
-      scrollToIndex(nextIndex, 'auto')
+      stepBy(steps)
     }
     const onScroll = () => {
       if (disabled) {
@@ -229,17 +298,47 @@ export function WheelPickerRoot<T>({
       userScrollingRef.current = false
       commitFromScroll()
     }
+    let touchStartY = 0
+    let touchStartScroll = 0
+    const onTouchStart = (event: TouchEvent) => {
+      touchStartY = event.touches[0]?.clientY ?? 0
+      touchStartScroll = scroller.scrollTop
+    }
+    const onTouchEnd = (event: TouchEvent) => {
+      if (!isLoopingRef.current) {
+        return
+      }
+      const options = orderedOptions(optionsRef.current)
+      const itemHeight = itemHeightOf(options)
+      if (itemHeight <= 0 || options.length === 0) {
+        return
+      }
+      const endY = event.changedTouches[0]?.clientY ?? touchStartY
+      const dragged = touchStartY - endY
+      const maxScroll = (options.length - 1) * itemHeight
+      const startedAtEnd = touchStartScroll >= maxScroll - 1
+      const startedAtStart = touchStartScroll <= 1
+      if (startedAtEnd && dragged > itemHeight / 2) {
+        stepBy(1)
+      } else if (startedAtStart && dragged < -itemHeight / 2) {
+        stepBy(-1)
+      }
+    }
     const root = scroller.parentElement ?? scroller
     root.addEventListener('wheel', onWheel, { passive: false })
+    root.addEventListener('touchstart', onTouchStart, { passive: true })
+    root.addEventListener('touchend', onTouchEnd)
     scroller.addEventListener('scroll', onScroll, { passive: true })
     scroller.addEventListener('scrollend', onScrollEnd)
     return () => {
       window.clearTimeout(timer)
       root.removeEventListener('wheel', onWheel)
+      root.removeEventListener('touchstart', onTouchStart)
+      root.removeEventListener('touchend', onTouchEnd)
       scroller.removeEventListener('scroll', onScroll)
       scroller.removeEventListener('scrollend', onScrollEnd)
     }
-  }, [commitFromScroll, disabled, scrollToIndex])
+  }, [commitFromScroll, disabled, scrollToIndex, stepBy])
 
   const moveSelection = useCallback((direction: 1 | -1 | 'start' | 'end') => {
     const options = orderedOptions(optionsRef.current)
@@ -253,7 +352,22 @@ export function WheelPickerRoot<T>({
     } else if (direction === 'end') {
       nextIndex = options.length - 1
     } else {
-      nextIndex += direction
+      const { index, loops } = resolveStep(currentIndex < 0 ? 0 : currentIndex, direction, options.length, isLooping)
+      nextIndex = index
+      const option = options[nextIndex]
+      if (!option) {
+        return
+      }
+      scrollToIndex(nextIndex, 'smooth')
+      applyValue(option.value)
+      if (loops !== 0) {
+        onLoop?.({
+          value: option.value,
+          direction,
+          loopedAround: direction === 1 ? 'end' : 'start',
+        })
+      }
+      return
     }
     const option = options[nextIndex]
     if (!option) {
@@ -261,7 +375,7 @@ export function WheelPickerRoot<T>({
     }
     scrollToIndex(nextIndex, 'smooth')
     applyValue(option.value)
-  }, [applyValue, scrollToIndex])
+  }, [applyValue, isLooping, onLoop, scrollToIndex])
 
   const contextValue = useMemo(() => ({
     value: selected,
@@ -273,12 +387,12 @@ export function WheelPickerRoot<T>({
 
   const activeId = options.find((option) => Object.is(option.value, selected))?.id
   const rowSpan = Number.isFinite(visibleRows) ? Math.max(0, visibleRows) : 1
-  const rowCount = 1 + rowSpan * 2
+  const previewCount = isLooping ? Math.ceil(rowSpan) : 0
+  const leadingPreview = previewCopies(wrappedNodes(items, items.length - previewCount, previewCount), 'leading')
+  const trailingPreview = previewCopies(wrappedNodes(items, 0, previewCount), 'trailing')
   const pickerStyle = {
     ...style,
     '--wheel-picker-visible-span': rowSpan,
-    '--wheel-picker-fade-start': `${(rowSpan / rowCount) * 100}%`,
-    '--wheel-picker-fade-end': `${((rowSpan + 1) / rowCount) * 100}%`,
   } as CSSProperties
 
   return (
@@ -292,6 +406,7 @@ export function WheelPickerRoot<T>({
         aria-orientation="vertical"
         aria-activedescendant={activeId}
         data-disabled={disabled ? '' : undefined}
+        data-looping={isLooping ? '' : undefined}
         className={clsx('wheel-picker-root', className)}
         style={pickerStyle}
         onKeyDown={(event) => {
@@ -318,7 +433,21 @@ export function WheelPickerRoot<T>({
           ref={scrollerRef}
           className="wheel-picker-items"
         >
+          {isLooping && (
+            <div className="wheel-picker-loop-preview" aria-hidden>
+              <WheelPickerPreviewScope>
+                {leadingPreview}
+              </WheelPickerPreviewScope>
+            </div>
+          )}
           {items}
+          {isLooping && (
+            <div className="wheel-picker-loop-preview wheel-picker-loop-preview-end" aria-hidden>
+              <WheelPickerPreviewScope>
+                {trailingPreview}
+              </WheelPickerPreviewScope>
+            </div>
+          )}
         </div>
         {bars}
       </div>
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/index.ts b/packages/hightide-web/src/components/user-interaction/WheelPicker/index.ts
index 083918a5..6d70b4b2 100644
--- a/packages/hightide-web/src/components/user-interaction/WheelPicker/index.ts
+++ b/packages/hightide-web/src/components/user-interaction/WheelPicker/index.ts
@@ -4,4 +4,4 @@ export { WheelPickerOption } from './WheelPickerOption'
 export { WheelPickerBar } from './WheelPickerBar'
 export { useWheelPickerContext } from './WheelPickerContext'
 
-export type { WheelPickerProps, WheelPickerRootProps, WheelPickerOptionProps, WheelPickerBarProps } from './WheelPicker'
+export type { WheelPickerProps, WheelPickerRootProps, WheelPickerOptionProps, WheelPickerBarProps, WheelPickerLoopEvent } from './WheelPicker'
diff --git a/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx b/packages/hightide-web/src/components/user-interaction/date/CalendarDatePicker.tsx
similarity index 62%
rename from packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx
rename to packages/hightide-web/src/components/user-interaction/date/CalendarDatePicker.tsx
index 5a403378..e2004aba 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DatePicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/CalendarDatePicker.tsx
@@ -1,10 +1,10 @@
-import { useState } from 'react'
+import { useState, type ReactNode } from 'react'
 import { ArrowDown, ArrowUp, Calendar, ChevronDown } from 'lucide-react'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 import { LocalizationUtil } from '@helpwave/hightide-utils/i18n'
 import clsx from 'clsx'
-import type { DayPickerProps } from './DayPicker'
-import { DayPicker } from './DayPicker'
+import type { CalendarDayPickerProps } from './CalendarDayPicker'
+import { CalendarDayPicker } from './CalendarDayPicker'
 import type { YearMonthPickerProps } from './YearMonthPicker'
 import { YearMonthPicker } from './YearMonthPicker'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
@@ -14,23 +14,25 @@ import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { IconButton } from '../IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
-type DisplayMode = 'yearMonth' | 'day'
+type DisplayMode = 'yearMonth' | 'day' | 'time'
 
-export interface DatePickerProps extends
+export interface CalendarDatePickerProps extends
  Partial<FormFieldDataHandling<Date>>,
- Pick<DayPickerProps, 'markToday' | 'start' | 'end' | 'weekStart'>
+ Pick<CalendarDayPickerProps, 'markToday' | 'start' | 'end' | 'weekStart'>
  {
   initialValue?: Date,
   initialDisplay?: DisplayMode,
-  dayPickerProps?: Omit<DayPickerProps, 'displayedMonth' | 'onChange' | 'selected' | 'weekStart' | 'markToday' | 'start' | 'end'>,
+  calendarDayPickerProps?: Omit<CalendarDayPickerProps, 'displayedMonth' | 'onChange' | 'selected' | 'weekStart' | 'markToday' | 'start' | 'end'>,
   yearMonthPickerProps?: Omit<YearMonthPickerProps, 'displayedYearMonth' | 'onChange' | 'start' | 'end'>,
+  timeLabel?: ReactNode,
+  timePicker?: ReactNode,
   className?: string,
 }
 
 /**
  * A Component for picking a date
  */
-export const DatePicker = ({
+export const CalendarDatePicker = ({
   value: controlledValue,
   initialValue = new Date(),
   start,
@@ -40,9 +42,11 @@ export const DatePicker = ({
   onValueChange,
   onEditComplete,
   yearMonthPickerProps,
-  dayPickerProps,
+  calendarDayPickerProps,
+  timeLabel,
+  timePicker,
   className
-}: DatePickerProps) => {
+}: CalendarDatePickerProps) => {
   const translation = useHightideTranslation()
   const { locale } = useLocalization()
   const [value, setValue] = useControlledState({
@@ -56,16 +60,28 @@ export const DatePicker = ({
   const isDayMode = displayMode === 'day'
 
   return (
-    <div className={clsx('date-picker', className)}>
-      <div className="date-picker-header">
-        <Button
-          size="sm"
-          color="neutral"
-          onClick={() => setDisplayMode(displayMode === 'day' ? 'yearMonth' : 'day')}
-          trailing={ChevronDown}
-        >
-          {`${new Intl.DateTimeFormat(LocalizationUtil.isoLocaleToLanguage(locale), { month: 'short' }).format(displayedMonth)} ${displayedMonth.getFullYear()}`}
-        </Button>
+    <div className={clsx('calendar-date-picker', className)}>
+      <div className="calendar-date-picker-header">
+        <div className="calendar-date-picker-selectors">
+          <Button
+            size="sm"
+            color="neutral"
+            onClick={() => setDisplayMode(displayMode === 'day' ? 'yearMonth' : 'day')}
+            trailing={ChevronDown}
+          >
+            {`${new Intl.DateTimeFormat(LocalizationUtil.isoLocaleToLanguage(locale), { month: 'short' }).format(displayedMonth)} ${displayedMonth.getFullYear()}`}
+          </Button>
+          {timePicker !== undefined && (
+            <Button
+              size="sm"
+              color="neutral"
+              onClick={() => setDisplayMode(displayMode === 'time' ? 'day' : 'time')}
+              trailing={ChevronDown}
+            >
+              {timeLabel}
+            </Button>
+          )}
+        </div>
         <div className="flex-row-2 justify-end">
           <IconButton
             tooltip={translation('time.today')}
@@ -107,18 +123,22 @@ export const DatePicker = ({
           start={start}
           end={end}
           onValueChange={newDate => {
-            setDisplayedMonth(newDate)
-            setDisplayMode('day')
+            setValue(newDate)
+            setDisplayedMonth(new Date(newDate.getFullYear(), newDate.getMonth(), 1))
           }}
           onEditComplete={newDate => {
-            setDisplayedMonth(newDate)
-            setDisplayMode('day')
+            setDisplayedMonth(new Date(newDate.getFullYear(), newDate.getMonth(), 1))
+            onEditComplete?.(newDate)
           }}
-          className="date-picker-content"
+          className="calendar-date-picker-content"
         />
+      ) : displayMode === 'time' ? (
+        <div className="calendar-date-picker-content calendar-date-picker-time">
+          {timePicker}
+        </div>
       ) : (
-        <DayPicker
-          {...dayPickerProps}
+        <CalendarDayPicker
+          {...calendarDayPickerProps}
           value={value}
           displayedMonth={displayedMonth}
           changeDisplayedMonth={setDisplayedMonth}
@@ -127,7 +147,7 @@ export const DatePicker = ({
           weekStart={weekStart}
           onValueChange={setValue}
           onEditComplete={onEditComplete}
-          className="date-picker-content"
+          className="calendar-date-picker-content"
         />
       )}
     </div>
diff --git a/packages/hightide-web/src/components/user-interaction/date/DayPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx
similarity index 88%
rename from packages/hightide-web/src/components/user-interaction/date/DayPicker.tsx
rename to packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx
index 8546444d..57f7ba72 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DayPicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx
@@ -9,7 +9,7 @@ import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
 import { PropsUtil } from '../../../utils/propsUtil'
 
-export type DayPickerProps = Partial<FormFieldDataHandling<Date>> & {
+export type CalendarDayPickerProps = Partial<FormFieldDataHandling<Date>> & {
   initialValue?: Date,
   displayedMonth?: Date,
   changeDisplayedMonth?: (date: Date) => void,
@@ -24,7 +24,7 @@ export type DayPickerProps = Partial<FormFieldDataHandling<Date>> & {
 /**
  * A component for selecting a day of a month
  */
-export const DayPicker = ({
+export const CalendarDayPicker = ({
   displayedMonth: controlledDisplayedMonth,
   initialDisplayedMonth,
   changeDisplayedMonth,
@@ -37,7 +37,7 @@ export const DayPicker = ({
   weekStart: weekStartOverride,
   markToday = true,
   className,
-}: DayPickerProps) => {
+}: CalendarDayPickerProps) => {
   const { locale, startingWeekday: contextStartingWeekday } = useLocalization()
   const weekStart = weekStartOverride ?? contextStartingWeekday
 
@@ -110,16 +110,16 @@ export const DayPicker = ({
   )
 
   return (
-    <div className={clsx('day-picker-container', className)}>
-      <div className="day-picker-header-row">
+    <div className={clsx('calendar-day-picker-container', className)}>
+      <div className="calendar-day-picker-header-row">
         {weeks[0]!.map((weekDay, index) => (
-          <div key={index} className="day-picker-header-item">
+          <div key={index} className="calendar-day-picker-header-item">
             {new Intl.DateTimeFormat(locale, { weekday: 'long' }).format(weekDay).substring(0, 2)}
           </div>
         ))}
       </div>
       {weeks.map((week, index) => (
-        <div key={index} className="day-picker-body-row">
+        <div key={index} className="calendar-day-picker-body-row">
           {week.map((date) => {
             const isSelected = !!value && DateUtils.equalDate(value, date)
             const isFocused = !!focusTargetDate && DateUtils.equalDate(focusTargetDate, date)
@@ -130,7 +130,7 @@ export const DayPicker = ({
               <div
                 key={date.getDate()}
                 ref={isFocused ? selectedButtonRef : undefined}
-                className="day-picker-body-item"
+                className="calendar-day-picker-body-item coloring"
                 onClick={() => {
                   if (!isDayValid) return
                   const newDate = new Date(
@@ -153,8 +153,11 @@ export const DayPicker = ({
                 role="button"
                 tabIndex={isFocused ? 0 : -1}
 
+                data-color={isSelected ? 'primary' : isSameMonth ? 'surface-inverse' : 'description'}
+                data-coloring-style={isSelected ? 'filled' : 'foreground'}
+                data-color-variant="normal"
+                data-disabled={PropsUtil.dataAttributes.bool(!isDayValid)}
                 data-selected={PropsUtil.dataAttributes.bool(isSelected)}
-                data-invalid={PropsUtil.dataAttributes.bool(!isDayValid)}
                 data-today={PropsUtil.dataAttributes.bool(isToday && markToday)}
                 data-samemonth={PropsUtil.dataAttributes.bool(isSameMonth)}
               >
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateTimePicker.tsx b/packages/hightide-web/src/components/user-interaction/date/DateTimePicker.tsx
index 2d79b7b0..72ea087f 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DateTimePicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/DateTimePicker.tsx
@@ -1,24 +1,26 @@
 import type { HTMLAttributes } from 'react'
 import { type ReactNode } from 'react'
 import type { DateTimeFormat } from '@helpwave/hightide-utils/utils'
-import type { TimeInputProps } from './TimeInput'
-import { TimeInput } from './TimeInput'
-import type { DatePickerProps } from './DatePicker'
-import { DatePicker } from './DatePicker'
-import type { FormFieldDataHandling } from '../../form/FormField'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import clsx from 'clsx'
 
+import { useDateTimeFormat, useLocalization } from '../../../global-contexts/localization/forward-exports'
+import type { FormFieldDataHandling } from '../../form/FormField'
+import type { CalendarDatePickerProps } from './CalendarDatePicker'
+import { CalendarDatePicker } from './CalendarDatePicker'
+import type { TimeWheelPickerProps } from './TimeWheelPicker'
+import { TimeWheelPicker } from './TimeWheelPicker'
+
 export interface DateTimePickerProps extends
 HTMLAttributes<HTMLDivElement>,
 Partial<FormFieldDataHandling<Date>>,
-Pick<DatePickerProps, 'start' | 'end' | 'weekStart' | 'markToday'>,
-Pick<TimeInputProps, 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>
+Pick<CalendarDatePickerProps, 'start' | 'end' | 'weekStart' | 'markToday'>,
+Pick<TimeWheelPickerProps, 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>
 {
   initialValue?: Date,
   mode?: DateTimeFormat,
-  datePickerProps?: Omit<DatePickerProps, 'onChange' | 'value' | 'start' | 'end' | 'markToday'>,
-  timeInputProps?: Omit<TimeInputProps, 'value' | 'onValueChange' | 'onEditComplete' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>,
+  calendarDatePickerProps?: Omit<CalendarDatePickerProps, 'onChange' | 'value' | 'start' | 'end' | 'markToday'>,
+  timeInputProps?: Omit<TimeWheelPickerProps, 'value' | 'onValueChange' | 'onEditComplete' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>,
 }
 
 /**
@@ -39,52 +41,74 @@ export const DateTimePicker = ({
   onValueChange,
   onEditComplete,
   timeInputProps,
-  datePickerProps,
+  calendarDatePickerProps,
   ...props
 }: DateTimePickerProps) => {
   const useDate = mode === 'dateTime' || mode === 'date'
   const useTime = mode === 'dateTime' || mode === 'time'
+  const { locale } = useLocalization()
+  const { is24HourFormat: contextIs24HourFormat } = useDateTimeFormat()
   const [value, setValue] = useControlledState({
     value: controlledValue,
     onValueChange: onValueChange,
     defaultValue: initialValue,
   })
-  let dateDisplay: ReactNode
-  let timeDisplay: ReactNode
+  const resolvedIs24HourFormat = is24HourFormat ?? contextIs24HourFormat
+  const timeLabel = new Intl.DateTimeFormat(locale, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: precision === 'second' || precision === 'millisecond' ? '2-digit' : undefined,
+    hourCycle: resolvedIs24HourFormat ? 'h23' : 'h12',
+  }).format(value)
+
+  const timePicker = (
+    <TimeWheelPicker
+      {...timeInputProps}
+      is24HourFormat={is24HourFormat}
+      minuteIncrement={minuteIncrement}
+      secondIncrement={secondIncrement}
+      millisecondIncrement={millisecondIncrement}
+      precision={precision}
+      value={value}
+      onValueChange={setValue}
+      onEditComplete={onEditComplete}
+    />
+  )
 
-  if (useDate) {
-    dateDisplay = (
-      <DatePicker
-        {...datePickerProps}
+  let content: ReactNode
+  if (useDate && useTime) {
+    content = (
+      <CalendarDatePicker
+        {...calendarDatePickerProps}
         start={start}
         end={end}
         weekStart={weekStart}
         value={value}
         onValueChange={setValue}
         onEditComplete={onEditComplete}
+        timeLabel={timeLabel}
+        timePicker={timePicker}
       />
     )
-  }
-  if (useTime) {
-    timeDisplay = (
-      <TimeInput
-        {...timeInputProps}
-        is24HourFormat={is24HourFormat}
-        minuteIncrement={minuteIncrement}
-        secondIncrement={secondIncrement}
-        millisecondIncrement={millisecondIncrement}
-        precision={precision}
+  } else if (useDate) {
+    content = (
+      <CalendarDatePicker
+        {...calendarDatePickerProps}
+        start={start}
+        end={end}
+        weekStart={weekStart}
         value={value}
         onValueChange={setValue}
         onEditComplete={onEditComplete}
       />
     )
+  } else {
+    content = timePicker
   }
 
   return (
     <div {...props} className={clsx('date-time-picker', props.className)} data-mode={mode}>
-      {dateDisplay}
-      {timeDisplay}
+      {content}
     </div>
   )
 }
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateTimePickerDialog.tsx b/packages/hightide-web/src/components/user-interaction/date/DateTimePickerDialog.tsx
index a8d91b57..b7abbbc5 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DateTimePickerDialog.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/DateTimePickerDialog.tsx
@@ -1,27 +1,36 @@
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { DateTimePicker, type DateTimePickerProps } from './DateTimePicker'
+import { ArrowLeft, Trash } from 'lucide-react'
 import type { HTMLAttributes } from 'react'
-import { useEffect, useState, type ReactNode } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react'
+
 import { Visibility } from '../../layout/Visibility'
 import { Button } from '../Button'
+import { IconButton } from '../IconButton'
+import { DateWheelPicker } from './DateWheelPicker'
+import { type DateTimeWheelPickerProps } from './DateTimeWheelPicker'
+import { TimeWheelPicker } from './TimeWheelPicker'
 import type { FormFieldDataHandling } from '../../form/FormField'
-import type { DateTimeFormat } from '@helpwave/hightide-utils/utils'
+import type { DateTimeFormat, Weekday } from '@helpwave/hightide-utils/utils'
 import clsx from 'clsx'
 
 export interface DateTimePickerDialogProps extends
 HTMLAttributes<HTMLDivElement>,
 Partial<FormFieldDataHandling<Date | null>>,
-Pick<DateTimePickerProps, 'start' | 'end' | 'weekStart' | 'markToday' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>
+Pick<DateTimeWheelPickerProps, 'start' | 'end' | 'isLooping' | 'loopingBehaviour' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>
 {
   initialValue?: Date | null,
   allowRemove?: boolean,
-  pickerProps?: Omit<DateTimePickerProps, 'value' | 'onValueChange' | 'onEditComplete' | 'start' | 'end' | 'weekStart' | 'markToday' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>,
+  weekStart?: Weekday,
+  markToday?: boolean,
+  pickerProps?: Omit<DateTimeWheelPickerProps, 'value' | 'onValueChange' | 'onEditComplete' | 'initialValue' | 'start' | 'end' | 'isLooping' | 'loopingBehaviour' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>,
   mode?: DateTimeFormat,
   label?: ReactNode,
   labelId?: string,
 }
 
+type DialogStep = 'date' | 'time'
+
 export const DateTimePickerDialog = ({
   initialValue = null,
   value,
@@ -32,8 +41,10 @@ export const DateTimePickerDialog = ({
   pickerProps = {},
   start,
   end,
-  weekStart,
-  markToday,
+  weekStart: _weekStart,
+  markToday: _markToday,
+  isLooping,
+  loopingBehaviour,
   is24HourFormat,
   minuteIncrement,
   secondIncrement,
@@ -49,15 +60,84 @@ export const DateTimePickerDialog = ({
     onValueChange,
     defaultValue: initialValue
   })
-
   const [pickerState, setPickerState] = useState(state ?? new Date())
+  const [step, setStep] = useState<DialogStep>('date')
+  const [compact, setCompact] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+  const pairRef = useRef<HTMLDivElement>(null)
+  const compactRef = useRef(false)
+  const neededWidthRef = useRef(0)
 
   useEffect(() => {
     setPickerState(state ?? new Date())
   }, [state])
 
+  useLayoutEffect(() => {
+    if (mode !== 'dateTime') {
+      compactRef.current = false
+      setCompact(false)
+      return
+    }
+    const root = rootRef.current
+    const pair = pairRef.current
+    if (!root || !pair) {
+      return
+    }
+
+    const availableWidth = () => {
+      const style = getComputedStyle(root)
+      return root.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)
+    }
+
+    const update = (available: number) => {
+      if (!compactRef.current) {
+        neededWidthRef.current = pair.scrollWidth
+      }
+      const next = neededWidthRef.current > 0 && available < neededWidthRef.current
+      if (next === compactRef.current) {
+        return
+      }
+      compactRef.current = next
+      setCompact(next)
+      if (next) {
+        setStep('date')
+      }
+    }
+
+    update(availableWidth())
+    const observer = new ResizeObserver((entries) => {
+      const width = entries[0]?.contentRect.width
+      update(width ?? availableWidth())
+    })
+    observer.observe(root)
+    return () => observer.disconnect()
+  }, [mode, compact])
+
+  const splitSteps = mode === 'dateTime' && compact
+  const showDate = mode !== 'time' && (!splitSteps || step === 'date')
+  const showTime = mode !== 'date' && (!splitSteps || step === 'time')
+
+  const clearValue = () => {
+    setState(null)
+    onEditComplete?.(null)
+  }
+
+  const finish = () => {
+    if (splitSteps && step === 'date') {
+      setStep('time')
+      return
+    }
+    onEditComplete?.(pickerState)
+  }
+
   return (
-    <div {...props} className={clsx('date-time-picker-dialog', props?.className)}>
+    <div
+      {...props}
+      ref={rootRef}
+      className={clsx('date-time-picker-dialog', props?.className)}
+      data-compact={compact ? '' : undefined}
+      data-step={splitSteps ? step : undefined}
+    >
       <div className="date-time-picker-dialog-header">
         <span
           id={labelId}
@@ -65,55 +145,71 @@ export const DateTimePickerDialog = ({
         >
           {label ?? translation('sDateTimeSelect', { datetimeMode: mode })}
         </span>
-      </div>
-      <DateTimePicker
-        {...pickerProps}
-        mode={mode}
-        value={pickerState}
-        onValueChange={setPickerState}
-        onEditComplete={setPickerState}
-        start={start}
-        end={end}
-        weekStart={weekStart}
-        markToday={markToday}
-        is24HourFormat={is24HourFormat}
-        minuteIncrement={minuteIncrement}
-        secondIncrement={secondIncrement}
-        millisecondIncrement={millisecondIncrement}
-        precision={precision}
-      />
-      <div className="date-time-picker-dialog-actions">
         <Visibility isVisible={allowRemove && !!state}>
-          <Button
-            size="md"
-            color="negative"
-            onClick={() => {
-              setState(null)
-              onEditComplete?.(null)
-            }}
-            className="date-time-picker-dialog-action"
-          >
-            {translation('clear')}
-          </Button>
-        </Visibility>
-        <Visibility isVisible={!state}>
-          <Button
-            size="md"
-            color="neutral"
-            onClick={() => {
-              setState(state)
-              onEditComplete?.(state)
-            }}
-            className="date-time-picker-dialog-action"
-          >
-            {translation('cancel')}
-          </Button>
+          <IconButton
+            className="date-time-picker-dialog-clear"
+            tooltip={translation('clear')}
+            variant="foreground"
+            size="sm"
+            icon={Trash}
+            onClick={clearValue}
+          />
         </Visibility>
+      </div>
+      <div ref={pairRef} className={clsx('date-time-picker-dialog-pair', pickerProps.className)}>
+        {showDate && (
+          <DateWheelPicker
+            value={pickerState}
+            onValueChange={setPickerState}
+            onEditComplete={setPickerState}
+            start={start}
+            end={end}
+            isLooping={isLooping}
+            loopingBehaviour={loopingBehaviour}
+          />
+        )}
+        {showTime && (
+          <TimeWheelPicker
+            value={pickerState}
+            onValueChange={setPickerState}
+            onEditComplete={setPickerState}
+            isLooping={isLooping}
+            loopingBehaviour={loopingBehaviour}
+            is24HourFormat={is24HourFormat}
+            minuteIncrement={minuteIncrement}
+            secondIncrement={secondIncrement}
+            millisecondIncrement={millisecondIncrement}
+            precision={precision}
+          />
+        )}
+      </div>
+      <div className="date-time-picker-dialog-actions">
+        {splitSteps ? (
+          <IconButton
+            tooltip={translation('previous')}
+            variant="foreground"
+            icon={ArrowLeft}
+            disabled={step === 'date'}
+            onClick={() => setStep('date')}
+          />
+        ) : (
+          <Visibility isVisible={!state}>
+            <Button
+              size="md"
+              color="neutral"
+              onClick={() => {
+                setState(state)
+                onEditComplete?.(state)
+              }}
+              className="date-time-picker-dialog-action"
+            >
+              {translation('cancel')}
+            </Button>
+          </Visibility>
+        )}
         <Button
           size="md"
-          onClick={() => {
-            onEditComplete?.(pickerState)
-          }}
+          onClick={finish}
           className="date-time-picker-dialog-action"
         >
           {translation('done')}
@@ -121,4 +217,4 @@ export const DateTimePickerDialog = ({
       </div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateTimeWheelPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/DateTimeWheelPicker.tsx
new file mode 100644
index 00000000..a8c98b44
--- /dev/null
+++ b/packages/hightide-web/src/components/user-interaction/date/DateTimeWheelPicker.tsx
@@ -0,0 +1,71 @@
+import clsx from 'clsx'
+import { useControlledState } from '@helpwave/hightide-utils/hooks'
+
+import type { FormFieldDataHandling } from '../../form/FormField'
+import type { DateWheelPickerProps } from './DateWheelPicker'
+import { DateWheelPicker } from './DateWheelPicker'
+import type { TimeWheelPickerProps } from './TimeWheelPicker'
+import { TimeWheelPicker } from './TimeWheelPicker'
+
+export type DateTimeWheelPickerProps =
+  Partial<FormFieldDataHandling<Date>> &
+  Pick<DateWheelPickerProps, 'start' | 'end' | 'isLooping' | 'loopingBehaviour'> &
+  Pick<TimeWheelPickerProps, 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'> & {
+    initialValue?: Date,
+    className?: string,
+    dateWheelPickerProps?: Omit<DateWheelPickerProps, 'value' | 'onValueChange' | 'onEditComplete' | 'start' | 'end' | 'isLooping' | 'loopingBehaviour'>,
+    timeWheelPickerProps?: Omit<TimeWheelPickerProps, 'value' | 'onValueChange' | 'onEditComplete' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision' | 'isLooping' | 'loopingBehaviour'>,
+  }
+
+export const DateTimeWheelPicker = ({
+  value: controlledValue,
+  initialValue = new Date(),
+  onValueChange,
+  onEditComplete,
+  start,
+  end,
+  isLooping,
+  loopingBehaviour,
+  is24HourFormat,
+  minuteIncrement,
+  secondIncrement,
+  millisecondIncrement,
+  precision,
+  className,
+  dateWheelPickerProps,
+  timeWheelPickerProps,
+}: DateTimeWheelPickerProps) => {
+  const [value, setValue] = useControlledState({
+    value: controlledValue,
+    onValueChange,
+    defaultValue: initialValue,
+  })
+
+  return (
+    <div className={clsx('date-time-wheel-picker', className)}>
+      <DateWheelPicker
+        {...dateWheelPickerProps}
+        value={value}
+        start={start}
+        end={end}
+        isLooping={isLooping}
+        loopingBehaviour={loopingBehaviour}
+        onValueChange={setValue}
+        onEditComplete={onEditComplete}
+      />
+      <TimeWheelPicker
+        {...timeWheelPickerProps}
+        value={value}
+        is24HourFormat={is24HourFormat}
+        minuteIncrement={minuteIncrement}
+        secondIncrement={secondIncrement}
+        millisecondIncrement={millisecondIncrement}
+        precision={precision}
+        isLooping={isLooping}
+        loopingBehaviour={loopingBehaviour}
+        onValueChange={setValue}
+        onEditComplete={onEditComplete}
+      />
+    </div>
+  )
+}
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateWheelPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/DateWheelPicker.tsx
new file mode 100644
index 00000000..e7159589
--- /dev/null
+++ b/packages/hightide-web/src/components/user-interaction/date/DateWheelPicker.tsx
@@ -0,0 +1,160 @@
+import { useCallback, useMemo, useRef } from 'react'
+import clsx from 'clsx'
+import { DateUtils, range } from '@helpwave/hightide-utils/utils'
+import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
+
+import { useLocalization } from '../../../global-contexts/localization/forward-exports'
+import type { FormFieldDataHandling } from '../../form/FormField'
+import { WheelPicker } from '../WheelPicker'
+import type { WheelLoopingBehaviour } from './TimeWheelPicker'
+
+const defaultStart = DateUtils.subtractDuration(new Date(), { years: 100 })
+const defaultEnd = DateUtils.addDuration(new Date(), { years: 100 })
+
+function monthsForYear(year: number, minTimestamp?: number, maxTimestamp?: number) {
+  return range(12).filter((month) => {
+    const monthStart = new Date(year, month, 1).getTime()
+    const monthEnd = new Date(year, month + 1, 0).getTime()
+    const isAfterStart = minTimestamp === undefined || monthEnd >= minTimestamp
+    const isBeforeEnd = maxTimestamp === undefined || monthStart <= maxTimestamp
+    return isAfterStart && isBeforeEnd
+  })
+}
+
+function daysInMonth(year: number, month: number) {
+  return new Date(year, month + 1, 0).getDate()
+}
+
+function withDateParts(date: Date, year: number, month: number, day: number) {
+  const next = new Date(date)
+  const lastDay = daysInMonth(year, month)
+  next.setFullYear(year, month, Math.min(day, lastDay))
+  return next
+}
+
+export type DateWheelPickerProps = Partial<FormFieldDataHandling<Date>> & {
+  initialValue?: Date,
+  start?: Date,
+  end?: Date,
+  isLooping?: boolean,
+  loopingBehaviour?: WheelLoopingBehaviour,
+  className?: string,
+}
+
+export const DateWheelPicker = ({
+  value: controlledValue,
+  initialValue = new Date(),
+  start = defaultStart,
+  end = defaultEnd,
+  onValueChange,
+  onEditComplete,
+  isLooping = true,
+  loopingBehaviour = 'update',
+  className,
+}: DateWheelPickerProps) => {
+  const { locale } = useLocalization()
+  const [value, setValue] = useControlledState({
+    value: controlledValue,
+    onValueChange,
+    defaultValue: initialValue,
+  })
+  const valueRef = useRef(value)
+  valueRef.current = value
+  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
+
+  const monthNames = useMemo(() => {
+    const formatter = new Intl.DateTimeFormat(locale, { month: 'short' })
+    return Array.from({ length: 12 }, (_, index) => formatter.format(new Date(2000, index, 1)))
+  }, [locale])
+
+  const years = useMemo(() =>
+    range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false }),
+  [end, start])
+
+  const minTimestamp = useMemo(() => new Date(start.getFullYear(), start.getMonth(), 1).getTime(), [start])
+  const maxTimestamp = useMemo(() => new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime(), [end])
+  const months = useMemo(
+    () => monthsForYear(value.getFullYear(), minTimestamp, maxTimestamp),
+    [maxTimestamp, minTimestamp, value]
+  )
+  const days = useMemo(() => {
+    const count = daysInMonth(value.getFullYear(), value.getMonth())
+    return range(count).map((day) => day + 1).filter((day) => {
+      const timestamp = new Date(value.getFullYear(), value.getMonth(), day).getTime()
+      return timestamp >= minTimestamp && timestamp <= maxTimestamp
+    })
+  }, [maxTimestamp, minTimestamp, value])
+
+  const commit = useCallback((next: Date) => {
+    valueRef.current = next
+    setValue(next)
+    onEditCompleteStable(next)
+  }, [onEditCompleteStable, setValue])
+
+  const selectDay = useCallback((day: number) => {
+    commit(withDateParts(valueRef.current, valueRef.current.getFullYear(), valueRef.current.getMonth(), day))
+  }, [commit])
+
+  const selectMonth = useCallback((month: number) => {
+    const current = valueRef.current
+    commit(withDateParts(current, current.getFullYear(), month, current.getDate()))
+  }, [commit])
+
+  const selectYear = useCallback((year: number) => {
+    const current = valueRef.current
+    const availableMonths = monthsForYear(year, minTimestamp, maxTimestamp)
+    const month = availableMonths.includes(current.getMonth())
+      ? current.getMonth()
+      : availableMonths[0] ?? 0
+    commit(withDateParts(current, year, month, current.getDate()))
+  }, [commit, maxTimestamp, minTimestamp])
+
+  const loopDay = useCallback((direction: 1 | -1) => {
+    if (loopingBehaviour === 'ignore') {
+      return
+    }
+    const current = valueRef.current
+    const next = new Date(current)
+    if (direction === 1) {
+      next.setDate(1)
+      next.setMonth(next.getMonth() + 1)
+    } else {
+      next.setDate(0)
+    }
+    commit(next)
+  }, [commit, loopingBehaviour])
+
+  const loopMonth = useCallback((direction: 1 | -1) => {
+    if (loopingBehaviour === 'ignore') {
+      return
+    }
+    const current = valueRef.current
+    commit(withDateParts(current, current.getFullYear() + direction, current.getMonth(), current.getDate()))
+  }, [commit, loopingBehaviour])
+
+  return (
+    <div className={clsx('date-wheel-picker', className)}>
+      <WheelPicker value={value.getDate()} onValueChange={selectDay} onLoop={({ direction }) => loopDay(direction)} isLooping={isLooping}>
+        {days.map((day) => (
+          <WheelPicker.Option key={day} value={day} valueId={String(day)}>
+            {String(day).padStart(2, '0')}
+          </WheelPicker.Option>
+        ))}
+      </WheelPicker>
+      <WheelPicker value={value.getMonth()} onValueChange={selectMonth} onLoop={({ direction }) => loopMonth(direction)} isLooping={isLooping}>
+        {months.map((month) => (
+          <WheelPicker.Option key={month} value={month} valueId={String(month)}>
+            {monthNames[month]}
+          </WheelPicker.Option>
+        ))}
+      </WheelPicker>
+      <WheelPicker value={value.getFullYear()} onValueChange={selectYear} isLooping={isLooping}>
+        {years.map((year) => (
+          <WheelPicker.Option key={year} value={year} valueId={String(year)}>
+            {year}
+          </WheelPicker.Option>
+        ))}
+      </WheelPicker>
+    </div>
+  )
+}
diff --git a/packages/hightide-web/src/components/user-interaction/date/TimeInput.tsx b/packages/hightide-web/src/components/user-interaction/date/TimeInput.tsx
deleted file mode 100644
index dcaa45c5..00000000
--- a/packages/hightide-web/src/components/user-interaction/date/TimeInput.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-import clsx from 'clsx'
-import { useCallback, useMemo, useRef } from 'react'
-import type { FormFieldDataHandling } from '../../form/FormField'
-import { useControlledState } from '@helpwave/hightide-utils/hooks'
-import type { DateTimePrecision } from '@helpwave/hightide-utils/utils'
-import { useDateTimeFormat } from '../../../global-contexts/localization/forward-exports'
-import { Visibility } from '../../layout/Visibility'
-import { Button } from '../Button'
-import { NumberStepperInput } from '../input/NumberStepperInput'
-import type {
-
-  TimePickerMillisecondIncrement,
-  TimePickerMinuteIncrement,
-  TimePickerSecondIncrement
-} from './TimePicker'
-import type { StepperLoopEvent } from '@helpwave/hightide-utils/hooks'
-
-const padTwoDigits = (value: number) => String(Math.round(value)).padStart(2, '0')
-
-const minuteSteps: Record<TimePickerMinuteIncrement, number> = {
-  '1min': 1,
-  '5min': 5,
-  '10min': 10,
-  '15min': 15,
-  '30min': 30,
-}
-
-const secondSteps: Record<TimePickerSecondIncrement, number> = {
-  '1s': 1,
-  '5s': 5,
-  '10s': 10,
-  '15s': 15,
-  '30s': 30,
-}
-
-const millisecondSteps: Record<TimePickerMillisecondIncrement, number> = {
-  '1ms': 1,
-  '5ms': 5,
-  '10ms': 10,
-  '25ms': 25,
-  '50ms': 50,
-  '100ms': 100,
-  '250ms': 250,
-  '500ms': 500,
-}
-
-export interface TimeInputProps extends Partial<FormFieldDataHandling<Date>> {
-  initialValue?: Date,
-  is24HourFormat?: boolean,
-  allowLooping?: boolean,
-  precision?: DateTimePrecision,
-  minuteIncrement?: TimePickerMinuteIncrement,
-  secondIncrement?: TimePickerSecondIncrement,
-  millisecondIncrement?: TimePickerMillisecondIncrement,
-  className?: string,
-}
-
-function to12HourDisplay(hours: number) {
-  return hours % 12 || 12
-}
-
-function set12HourDisplay(date: Date, displayHour: number) {
-  const isPM = date.getHours() >= 12
-  const normalizedHour = displayHour === 12 ? 0 : displayHour
-  date.setHours(normalizedHour + (isPM ? 12 : 0))
-}
-
-/**
- * A time input built from vertical number stepper fields
- */
-export const TimeInput = ({
-  value: controlledValue,
-  initialValue = new Date(),
-  onValueChange,
-  onEditComplete,
-  is24HourFormat: is24HourFormatOverride,
-  minuteIncrement = '1min',
-  secondIncrement = '1s',
-  millisecondIncrement = '100ms',
-  precision = 'minute',
-  allowLooping = false,
-  className,
-}: TimeInputProps) => {
-  const { is24HourFormat: contextIs24HourFormat } = useDateTimeFormat()
-  const is24HourFormat = is24HourFormatOverride ?? contextIs24HourFormat
-  const [value, setValue] = useControlledState({
-    value: controlledValue,
-    onValueChange,
-    defaultValue: initialValue,
-  })
-  const valueRef = useRef(value)
-  valueRef.current = value
-
-  const minuteStep = minuteSteps[minuteIncrement]
-  const secondStep = secondSteps[secondIncrement]
-  const millisecondStep = millisecondSteps[millisecondIncrement]
-
-  const updateValue = useCallback((transformer: (date: Date) => void, isEditComplete: boolean = false) => {
-    const nextDate = new Date(valueRef.current)
-    transformer(nextDate)
-    valueRef.current = nextDate
-    setValue(nextDate)
-    if(isEditComplete) onEditComplete?.(nextDate)
-  }, [onEditComplete, setValue])
-
-  const onHourLooped = ({ direction }: StepperLoopEvent) => {
-    updateValue((date) => {
-      date.setDate(date.getDate() + direction)
-      if(!is24HourFormat) {
-        date.setHours(date.getHours() - direction * 12)
-      }
-    })
-  }
-  const onMinuteLooped = ({ direction }: StepperLoopEvent) => {
-    updateValue((date) => date.setHours(date.getHours() + direction))
-  }
-  const onSecondLooped = ({ direction }: StepperLoopEvent) => {
-    updateValue((date) => date.setMinutes(date.getMinutes() + direction))
-  }
-  const onMillisecondLooped = ({ direction }: StepperLoopEvent) => {
-    updateValue((date) => date.setSeconds(date.getSeconds() + direction))
-  }
-
-  const hourValue = useMemo(() =>
-    is24HourFormat ? value.getHours() : to12HourDisplay(value.getHours())
-  , [is24HourFormat, value])
-  const isPM = value.getHours() >= 12
-
-  const setHourValue = useCallback((nextHour: number) => {
-    updateValue((date) => {
-      const roundedHour = Math.round(nextHour)
-      if (is24HourFormat) {
-        date.setHours(roundedHour)
-        return
-      }
-      set12HourDisplay(date, roundedHour)
-    })
-  }, [is24HourFormat, updateValue])
-
-  const setMinuteValue = useCallback((nextMinute: number) => {
-    updateValue((date) => date.setMinutes(Math.round(nextMinute)))
-  }, [updateValue])
-
-  const setSecondValue = useCallback((nextSecond: number) => {
-    updateValue((date) => date.setSeconds(Math.round(nextSecond)))
-  }, [updateValue])
-
-  const setMillisecondValue = useCallback((nextMillisecond: number) => {
-    updateValue((date) => date.setMilliseconds(Math.round(nextMillisecond)))
-  }, [updateValue])
-
-  const setPeriod = useCallback((targetPM: boolean) => {
-    updateValue((date) => {
-      const hours = date.getHours()
-      const currentlyPM = hours >= 12
-      if (currentlyPM === targetPM) {
-        return
-      }
-      date.setHours(hours + (targetPM ? 12 : -12))
-    })
-  }, [updateValue])
-
-  return (
-    <div className={clsx('time-input', className)}>
-      <NumberStepperInput
-        layout="col"
-        looping={allowLooping}
-        approximateMaxCharacters={2}
-        minimum={is24HourFormat ? 0 : 1}
-        maximum={allowLooping ?
-          (is24HourFormat ? 23.99 : 12.99) :
-          (is24HourFormat ? 23 : 12)}
-        value={hourValue}
-        onValueChange={setHourValue}
-        onEditComplete={setHourValue}
-        formatDisplayedValue={padTwoDigits}
-        onLooped={onHourLooped}
-        className="time-input-hour time-input-segment"
-      />
-      <span className="time-input-separator">:</span>
-      <NumberStepperInput
-        layout="col"
-        looping={allowLooping}
-        approximateMaxCharacters={2}
-        minimum={0}
-        maximum={59}
-        stepSize={minuteStep}
-        value={value.getMinutes()}
-        onValueChange={setMinuteValue}
-        onEditComplete={setMinuteValue}
-        formatDisplayedValue={padTwoDigits}
-        onLooped={onMinuteLooped}
-        className="time-input-minute time-input-segment"
-      />
-      <Visibility isVisible={precision === 'second' || precision === 'millisecond'}>
-        <span className="time-input-separator">:</span>
-        <NumberStepperInput
-          layout="col"
-          looping={allowLooping}
-          approximateMaxCharacters={2}
-          minimum={0}
-          maximum={59}
-          stepSize={secondStep}
-          value={value.getSeconds()}
-          onValueChange={setSecondValue}
-          onEditComplete={setSecondValue}
-          onLooped={onSecondLooped}
-          className="time-input-second time-input-segment"
-        />
-      </Visibility>
-      <Visibility isVisible={precision === 'millisecond'}>
-        <span className="time-input-separator">.</span>
-        <NumberStepperInput
-          layout="col"
-          looping={allowLooping}
-          approximateMaxCharacters={3}
-          minimum={0}
-          maximum={999}
-          stepSize={millisecondStep}
-          value={value.getMilliseconds()}
-          onValueChange={setMillisecondValue}
-          onEditComplete={setMillisecondValue}
-          onLooped={onMillisecondLooped}
-          className="time-input-millisecond time-input-segment"
-        />
-      </Visibility>
-      <Visibility isVisible={!is24HourFormat}>
-        <div className="time-input-period">
-          <Button
-            size="sm"
-            color={!isPM ? 'primary' : 'neutral'}
-            onClick={() => setPeriod(false)}
-            className="min-w-16"
-          >
-            AM
-          </Button>
-          <Button
-            size="sm"
-            color={isPM ? 'primary' : 'neutral'}
-            onClick={() => setPeriod(true)}
-            className="min-w-16"
-          >
-            PM
-          </Button>
-        </div>
-      </Visibility>
-    </div>
-  )
-}
diff --git a/packages/hightide-web/src/components/user-interaction/date/TimeWheelPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/TimeWheelPicker.tsx
new file mode 100644
index 00000000..5958ac2d
--- /dev/null
+++ b/packages/hightide-web/src/components/user-interaction/date/TimeWheelPicker.tsx
@@ -0,0 +1,272 @@
+import clsx from 'clsx'
+import { useCallback, useMemo, useRef } from 'react'
+import { closestMatch, range, type DateTimePrecision } from '@helpwave/hightide-utils/utils'
+import { useControlledState } from '@helpwave/hightide-utils/hooks'
+
+import { useDateTimeFormat } from '../../../global-contexts/localization/forward-exports'
+import type { FormFieldDataHandling } from '../../form/FormField'
+import { Visibility } from '../../layout/Visibility'
+import { WheelPicker, type WheelPickerLoopEvent } from '../WheelPicker'
+import type {
+  TimePickerMillisecondIncrement,
+  TimePickerMinuteIncrement,
+  TimePickerSecondIncrement
+} from './TimePicker'
+
+const padTwoDigits = (value: number) => String(Math.round(value)).padStart(2, '0')
+
+const minuteSteps: Record<TimePickerMinuteIncrement, number> = {
+  '1min': 1,
+  '5min': 5,
+  '10min': 10,
+  '15min': 15,
+  '30min': 30,
+}
+
+const secondSteps: Record<TimePickerSecondIncrement, number> = {
+  '1s': 1,
+  '5s': 5,
+  '10s': 10,
+  '15s': 15,
+  '30s': 30,
+}
+
+const millisecondSteps: Record<TimePickerMillisecondIncrement, number> = {
+  '1ms': 1,
+  '5ms': 5,
+  '10ms': 10,
+  '25ms': 25,
+  '50ms': 50,
+  '100ms': 100,
+  '250ms': 250,
+  '500ms': 500,
+}
+
+export type WheelLoopingBehaviour = 'ignore' | 'update'
+
+function steppedValues(length: number, step: number) {
+  return range(length).filter((value) => value % step === 0)
+}
+
+function to12HourDisplay(hours: number) {
+  return hours % 12 || 12
+}
+
+function shiftDate(date: Date, direction: 1 | -1, loopingBehaviour: WheelLoopingBehaviour) {
+  if (loopingBehaviour === 'ignore') {
+    return
+  }
+  date.setDate(date.getDate() + direction)
+}
+
+function shiftUnit(
+  date: Date,
+  read: (date: Date) => number,
+  write: (date: Date, value: number) => void,
+  direction: 1 | -1,
+  minimum: number,
+  maximum: number,
+  loopingBehaviour: WheelLoopingBehaviour
+) {
+  const next = read(date) + direction
+  if (loopingBehaviour === 'ignore' && (next < minimum || next > maximum)) {
+    return
+  }
+  write(date, next)
+}
+
+function set12HourDisplay(date: Date, displayHour: number, loopingBehaviour: WheelLoopingBehaviour) {
+  const currentDisplay = to12HourDisplay(date.getHours())
+  const isPM = date.getHours() >= 12
+  let nextIsPM = isPM
+  if (currentDisplay === 11 && displayHour === 12) {
+    nextIsPM = !isPM
+    if (isPM) {
+      shiftDate(date, 1, loopingBehaviour)
+    }
+  } else if (currentDisplay === 12 && displayHour === 11) {
+    nextIsPM = !isPM
+    if (!isPM) {
+      shiftDate(date, -1, loopingBehaviour)
+    }
+  }
+  const normalizedHour = displayHour === 12 ? 0 : displayHour
+  date.setHours(normalizedHour + (nextIsPM ? 12 : 0))
+}
+
+export interface TimeWheelPickerProps extends Partial<FormFieldDataHandling<Date>> {
+  initialValue?: Date,
+  is24HourFormat?: boolean,
+  isLooping?: boolean,
+  loopingBehaviour?: WheelLoopingBehaviour,
+  precision?: DateTimePrecision,
+  minuteIncrement?: TimePickerMinuteIncrement,
+  secondIncrement?: TimePickerSecondIncrement,
+  millisecondIncrement?: TimePickerMillisecondIncrement,
+  className?: string,
+}
+
+type NumericWheelProps = {
+  value: number,
+  options: number[],
+  onValueChange: (value: number) => void,
+  onLoop?: (event: WheelPickerLoopEvent<number>) => void,
+  isLooping?: boolean,
+  formatValue?: (value: number) => string,
+}
+
+function NumericWheel({
+  value,
+  options,
+  onValueChange,
+  onLoop,
+  isLooping = false,
+  formatValue = padTwoDigits,
+}: NumericWheelProps) {
+  return (
+    <WheelPicker value={value} onValueChange={onValueChange} onLoop={onLoop} isLooping={isLooping}>
+      {options.map((option) => (
+        <WheelPicker.Option key={option} value={option} valueId={String(option)}>
+          {formatValue(option)}
+        </WheelPicker.Option>
+      ))}
+    </WheelPicker>
+  )
+}
+
+export const TimeWheelPicker = ({
+  value: controlledValue,
+  initialValue = new Date(),
+  onValueChange,
+  onEditComplete,
+  is24HourFormat: is24HourFormatOverride,
+  minuteIncrement = '1min',
+  secondIncrement = '1s',
+  millisecondIncrement = '100ms',
+  precision = 'minute',
+  isLooping = true,
+  loopingBehaviour = 'update',
+  className,
+}: TimeWheelPickerProps) => {
+  const { is24HourFormat: contextIs24HourFormat } = useDateTimeFormat()
+  const is24HourFormat = is24HourFormatOverride ?? contextIs24HourFormat
+  const [value, setValue] = useControlledState({
+    value: controlledValue,
+    onValueChange,
+    defaultValue: initialValue,
+  })
+  const valueRef = useRef(value)
+  valueRef.current = value
+
+  const hours = useMemo(
+    () => is24HourFormat ? range(24) : range(12).map((hour) => hour + 1),
+    [is24HourFormat]
+  )
+  const minutes = useMemo(() => steppedValues(60, minuteSteps[minuteIncrement]), [minuteIncrement])
+  const seconds = useMemo(() => steppedValues(60, secondSteps[secondIncrement]), [secondIncrement])
+  const milliseconds = useMemo(
+    () => steppedValues(1000, millisecondSteps[millisecondIncrement]),
+    [millisecondIncrement]
+  )
+
+  const hourValue = is24HourFormat ? value.getHours() : to12HourDisplay(value.getHours())
+  const minuteValue = closestMatch(minutes, (left, right) =>
+    Math.abs(left - value.getMinutes()) < Math.abs(right - value.getMinutes()))
+  const secondValue = closestMatch(seconds, (left, right) =>
+    Math.abs(left - value.getSeconds()) < Math.abs(right - value.getSeconds()))
+  const millisecondValue = closestMatch(milliseconds, (left, right) =>
+    Math.abs(left - value.getMilliseconds()) < Math.abs(right - value.getMilliseconds()))
+  const period = value.getHours() >= 12 ? 'pm' : 'am'
+
+  const updateValue = useCallback((transformer: (date: Date) => void) => {
+    const nextDate = new Date(valueRef.current)
+    transformer(nextDate)
+    valueRef.current = nextDate
+    setValue(nextDate)
+    onEditComplete?.(nextDate)
+  }, [onEditComplete, setValue])
+
+  return (
+    <div className={clsx('time-wheel-picker', className)}>
+      <NumericWheel
+        value={hourValue}
+        options={hours}
+        isLooping={isLooping}
+        onValueChange={(hour) => updateValue((date) => {
+          if (is24HourFormat) {
+            date.setHours(hour)
+            return
+          }
+          set12HourDisplay(date, hour, loopingBehaviour)
+        })}
+        onLoop={({ direction }) => updateValue((date) => {
+          if (is24HourFormat) {
+            shiftDate(date, direction, loopingBehaviour)
+            return
+          }
+          const displayHour = to12HourDisplay(date.getHours())
+          const isPM = date.getHours() >= 12
+          if (direction === 1 && isPM) {
+            shiftDate(date, 1, loopingBehaviour)
+          }
+          if (direction === -1 && !isPM) {
+            shiftDate(date, -1, loopingBehaviour)
+          }
+          const normalizedHour = displayHour === 12 ? 0 : displayHour
+          date.setHours(normalizedHour + (isPM ? 0 : 12))
+        })}
+      />
+      <span className="time-wheel-picker-separator">:</span>
+      <NumericWheel
+        value={minuteValue}
+        options={minutes}
+        isLooping={isLooping}
+        onValueChange={(minute) => updateValue((date) => date.setMinutes(minute))}
+        onLoop={({ direction }) => updateValue((date) => {
+          shiftUnit(date, (current) => current.getHours(), (current, hour) => current.setHours(hour), direction, 0, 23, loopingBehaviour)
+        })}
+      />
+      <Visibility isVisible={precision === 'second' || precision === 'millisecond'}>
+        <span className="time-wheel-picker-separator">:</span>
+        <NumericWheel
+          value={secondValue}
+          options={seconds}
+          isLooping={isLooping}
+          onValueChange={(second) => updateValue((date) => date.setSeconds(second))}
+          onLoop={({ direction }) => updateValue((date) => {
+            shiftUnit(date, (current) => current.getMinutes(), (current, minute) => current.setMinutes(minute), direction, 0, 59, loopingBehaviour)
+          })}
+        />
+      </Visibility>
+      <Visibility isVisible={precision === 'millisecond'}>
+        <span className="time-wheel-picker-separator">.</span>
+        <NumericWheel
+          value={millisecondValue}
+          options={milliseconds}
+          isLooping={isLooping}
+          onValueChange={(millisecond) => updateValue((date) => date.setMilliseconds(millisecond))}
+          onLoop={({ direction }) => updateValue((date) => {
+            shiftUnit(date, (current) => current.getSeconds(), (current, second) => current.setSeconds(second), direction, 0, 59, loopingBehaviour)
+          })}
+        />
+      </Visibility>
+      <Visibility isVisible={!is24HourFormat}>
+        <WheelPicker
+          value={period}
+          onValueChange={(nextPeriod) => updateValue((date) => {
+            const hoursOnDate = date.getHours()
+            const isPM = hoursOnDate >= 12
+            const targetPM = nextPeriod === 'pm'
+            if (isPM === targetPM) {
+              return
+            }
+            date.setHours(hoursOnDate + (targetPM ? 12 : -12))
+          })}
+        >
+          <WheelPicker.Option value="am">AM</WheelPicker.Option>
+          <WheelPicker.Option value="pm">PM</WheelPicker.Option>
+        </WheelPicker>
+      </Visibility>
+    </div>
+  )
+}
diff --git a/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx
index 14416583..08ba9a28 100644
--- a/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx
@@ -1,89 +1,32 @@
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { equalSizeGroups, range } from '@helpwave/hightide-utils/utils'
+import { useCallback, useMemo } from 'react'
 import clsx from 'clsx'
-import { ExpandableSection } from '../../layout/ExpandableSection'
-import { DateUtils } from '@helpwave/hightide-utils/utils'
+import { DateUtils, range } from '@helpwave/hightide-utils/utils'
+import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
+
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
-import { Button } from '../Button'
 import type { FormFieldDataHandling } from '../../form/FormField'
-import { InfiniteScroll } from '../../layout/InifiniteScroll'
-import { useControlledState } from '@helpwave/hightide-utils/hooks'
-import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
-
-// A performance optimized component for displayig the year rows
-const YearRow = memo(function YearRow({
-  year,
-  selectedMonthIndex,
-  minTimestamp,
-  maxTimestamp,
-  monthNames,
-  onSelect
-}: {
-  year: number,
-  selectedMonthIndex?: number,
-  minTimestamp?: number,
-  maxTimestamp?: number,
-  monthNames: string[],
-  onSelect: (date: Date) => void,
-}) {
-  const ref = useRef<HTMLDivElement>(null)
-  const isSelectedYear = selectedMonthIndex !== undefined
-  const [isExpanded, setIsExpanded] = useState(false)
-
-  useEffect(() => {
-    if (isSelectedYear) {
-      ref.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
-    }
-  }, [isSelectedYear])
-
-  const monthGrid = useMemo(() => equalSizeGroups([...DateUtils.monthsList], 3), [])
-
-  return (
-    <ExpandableSection
-      ref={isSelectedYear ? ref : undefined}
-      isExpanded={isExpanded}
-      onExpandedChange={setIsExpanded}
-      trigger={year}
-      triggerProps={{ className: clsx('px-2', { 'text-primary font-bold': isSelectedYear }) }}
-      contentProps={{ className: 'gap-y-1 px-2 expandable-content-h-43' }}
-    >
-      {isExpanded && monthGrid.map((group, groupIdx) => (
-        <div key={groupIdx} className="flex-row-1">
-          {group.map(month => {
-            const monthIndex = DateUtils.monthsList.indexOf(month)
-
-            const currentTimestamp = new Date(year, monthIndex).getTime()
-            const isAfterStart = minTimestamp === undefined || currentTimestamp >= minTimestamp
-            const isBeforeEnd = maxTimestamp === undefined || currentTimestamp <= maxTimestamp
-            const isValid = isAfterStart && isBeforeEnd
-            const isSelectedMonth = monthIndex === selectedMonthIndex
-
-            return (
-              <Button
-                key={month}
-                disabled={!isValid}
-                color={isSelectedMonth && isValid ? 'primary' : 'neutral'}
-                className="flex-1 min-w-auto"
-                size="sm"
-                onClick={() => {
-                  if (isValid) {
-                    onSelect(new Date(year, monthIndex))
-                  }
-                }}
-              >
-                {monthNames[monthIndex]}
-              </Button>
-            )
-          })}
-        </div>
-      ))}
-    </ExpandableSection>
-  )
-})
+import { WheelPicker } from '../WheelPicker'
 
 const defaultStart = DateUtils.subtractDuration(new Date(), { years: 100 })
 const defaultEnd = DateUtils.addDuration(new Date(), { years: 100 })
 
+function monthsForYear(year: number, minTimestamp?: number, maxTimestamp?: number) {
+  return range(12).filter((month) => {
+    const monthStart = new Date(year, month, 1).getTime()
+    const monthEnd = new Date(year, month + 1, 0).getTime()
+    const isAfterStart = minTimestamp === undefined || monthEnd >= minTimestamp
+    const isBeforeEnd = maxTimestamp === undefined || monthStart <= maxTimestamp
+    return isAfterStart && isBeforeEnd
+  })
+}
+
+function withYearMonth(date: Date, year: number, month: number) {
+  const next = new Date(date)
+  const lastDay = new Date(year, month + 1, 0).getDate()
+  next.setFullYear(year, month, Math.min(date.getDate(), lastDay))
+  return next
+}
+
 export type YearMonthPickerProps = Partial<FormFieldDataHandling<Date>> & {
   initialValue?: Date,
   start?: Date,
@@ -103,58 +46,60 @@ export const YearMonthPicker = ({
   const { locale } = useLocalization()
   const [value, setValue] = useControlledState({
     value: controlledValue,
-    onValueChange: onValueChange,
+    onValueChange,
     defaultValue: initialValue,
   })
-
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
 
   const monthNames = useMemo(() => {
     const formatter = new Intl.DateTimeFormat(locale, { month: 'short' })
-    return Array.from({ length: 12 }, (_, i) => formatter.format(new Date(2000, i, 1)))
+    return Array.from({ length: 12 }, (_, index) => formatter.format(new Date(2000, index, 1)))
   }, [locale])
 
   const years = useMemo(() =>
     range([start.getFullYear(), end.getFullYear()], { exclusiveEnd: false }),
-  [start, end])
+  [end, start])
 
-  const minTimestamp = useMemo(() =>{
-    if(!start) return
-    return new Date(start.getFullYear(), start.getMonth(), 1).getTime()
-  }, [start])
-  const maxTimestamp = useMemo(() => {
-    if(!end) return
-    return new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime()
-  }, [end])
+  const minTimestamp = useMemo(() => new Date(start.getFullYear(), start.getMonth(), 1).getTime(), [start])
+  const maxTimestamp = useMemo(() => new Date(end.getFullYear(), end.getMonth() + 1, 0).getTime(), [end])
+  const months = useMemo(
+    () => monthsForYear(value.getFullYear(), minTimestamp, maxTimestamp),
+    [maxTimestamp, minTimestamp, value]
+  )
 
-  const handleSelect = useCallback((newDate: Date) => {
-    setValue(newDate)
-    onEditCompleteStable(newDate)
+  const commit = useCallback((next: Date) => {
+    setValue(next)
+    onEditCompleteStable(next)
   }, [onEditCompleteStable, setValue])
 
-  return (
-    <InfiniteScroll
-      itemCount={years.length}
-      className={clsx('flex-col-1 h-full select-none', className)}
-      initialIndex={years.findIndex(year => year === value.getFullYear())}
-    >
-      {(index => {
-        const year = years[index]
-        const isSelectedYear = value.getFullYear() === year
-        const selectedMonthIndex = isSelectedYear ? value.getMonth() : undefined
+  const selectYear = useCallback((year: number) => {
+    const availableMonths = monthsForYear(year, minTimestamp, maxTimestamp)
+    const month = availableMonths.includes(value.getMonth())
+      ? value.getMonth()
+      : availableMonths[0] ?? 0
+    commit(withYearMonth(value, year, month))
+  }, [commit, maxTimestamp, minTimestamp, value])
 
-        return (
-          <YearRow
-            key={year}
-            year={year}
-            selectedMonthIndex={selectedMonthIndex}
-            minTimestamp={minTimestamp}
-            maxTimestamp={maxTimestamp}
-            monthNames={monthNames}
-            onSelect={handleSelect}
-          />
-        )
-      })}
-    </InfiniteScroll>
+  const selectMonth = useCallback((month: number) => {
+    commit(withYearMonth(value, value.getFullYear(), month))
+  }, [commit, value])
+
+  return (
+    <div className={clsx('year-month-picker', className)}>
+      <WheelPicker value={value.getMonth()} onValueChange={selectMonth}>
+        {months.map((month) => (
+          <WheelPicker.Option key={month} value={month} valueId={String(month)}>
+            {monthNames[month]}
+          </WheelPicker.Option>
+        ))}
+      </WheelPicker>
+      <WheelPicker value={value.getFullYear()} onValueChange={selectYear}>
+        {years.map((year) => (
+          <WheelPicker.Option key={year} value={year} valueId={String(year)}>
+            {year}
+          </WheelPicker.Option>
+        ))}
+      </WheelPicker>
+    </div>
   )
 }
diff --git a/packages/hightide-web/src/components/user-interaction/date/index.ts b/packages/hightide-web/src/components/user-interaction/date/index.ts
index dc72f4a0..fb5b8749 100644
--- a/packages/hightide-web/src/components/user-interaction/date/index.ts
+++ b/packages/hightide-web/src/components/user-interaction/date/index.ts
@@ -1,8 +1,10 @@
-export * from './DatePicker'
+export * from './CalendarDatePicker'
 export * from './DateTimePicker'
 export * from './DateTimePickerDialog'
-export * from './DayPicker'
+export * from './CalendarDayPicker'
 export * from './TimeDisplay'
-export * from './TimeInput'
+export * from './DateTimeWheelPicker'
+export * from './DateWheelPicker'
+export * from './TimeWheelPicker'
 export * from './TimePicker'
 export * from './YearMonthPicker'
diff --git a/packages/hightide-web/src/style/theme/components/calendar-day-picker.css b/packages/hightide-web/src/style/theme/components/calendar-day-picker.css
new file mode 100644
index 00000000..c1430cf5
--- /dev/null
+++ b/packages/hightide-web/src/style/theme/components/calendar-day-picker.css
@@ -0,0 +1,33 @@
+@layer components {
+  .calendar-day-picker-container {
+    @apply flex-col-1 min-w-64 select-none;
+  }
+
+  .calendar-day-picker-header-row {
+    @apply grid grid-cols-7 gap-2;
+  }
+
+  .calendar-day-picker-header-item {
+    @apply flex items-center justify-center grow font-semibold;
+  }
+
+  .calendar-day-picker-body-row {
+    @apply grid grid-cols-7 gap-2;
+  }
+
+  .calendar-day-picker-body-item {
+    @apply flex-row-0 items-center justify-center rounded-full h-8;
+
+    &:not([data-disabled]) {
+      @apply hover:cursor-pointer;
+    }
+
+    &[data-disabled] {
+      @apply hover:cursor-not-allowed;
+    }
+
+    &[data-today] {
+      @apply border-2 border-on-background;
+    }
+  }
+}
diff --git a/packages/hightide-web/src/style/theme/components/date-picker.css b/packages/hightide-web/src/style/theme/components/date-picker.css
index db7afb48..e122092b 100644
--- a/packages/hightide-web/src/style/theme/components/date-picker.css
+++ b/packages/hightide-web/src/style/theme/components/date-picker.css
@@ -1,13 +1,29 @@
 @layer components {
-  .date-picker {
+  .calendar-date-picker {
     @apply flex-col-3 grow;
   }
 
-  .date-picker-content {
+  .calendar-date-picker-content {
     @apply h-60 max-h-60;
   }
 
-  .date-picker-header {
+  .calendar-date-picker-header {
     @apply flex-row-2 items-center justify-between;
   }
+
+  .calendar-date-picker-selectors {
+    @apply flex-row-2 items-center;
+  }
+
+  .calendar-date-picker-time {
+    @apply flex items-center justify-center;
+  }
+
+  .year-month-picker {
+    @apply flex-row-4 items-center justify-center;
+  }
+
+  .date-wheel-picker {
+    @apply flex-row-2 items-center justify-center;
+  }
 }
diff --git a/packages/hightide-web/src/style/theme/components/date-time-picker-dialog.css b/packages/hightide-web/src/style/theme/components/date-time-picker-dialog.css
index 386fe92f..6ca8b6a6 100644
--- a/packages/hightide-web/src/style/theme/components/date-time-picker-dialog.css
+++ b/packages/hightide-web/src/style/theme/components/date-time-picker-dialog.css
@@ -1,24 +1,43 @@
 @layer components {
   .date-time-picker-dialog {
-    @apply flex-col-2 w-full overflow-y-auto p-2;
+    @apply flex-col-2 w-full overflow-x-hidden overflow-y-auto p-2;
     container-type: inline-size;
     container-name: date-time-picker-dialog;
   }
 
   .date-time-picker-dialog-header {
-    @apply flex-row-2 justify-center w-full py-1;
+    @apply grid w-full items-center py-1;
+    grid-template-columns: 2.5rem 1fr 2.5rem;
   }
 
   .date-time-picker-dialog-label {
-    @apply typography-title-md font-semibold;
+    @apply typography-title-md font-semibold text-center;
+    grid-column: 2;
+  }
+
+  .date-time-picker-dialog-clear {
+    grid-column: 3;
+    justify-self: end;
+  }
+
+  .date-time-picker-dialog-pair {
+    @apply flex-row-4 items-center justify-center;
+    flex-wrap: nowrap;
+    width: max-content;
+    max-width: none;
+  }
+
+  .date-time-picker-dialog[data-compact] .date-time-picker-dialog-pair {
+    @apply w-full;
+    min-width: 0;
   }
 
   .date-time-picker-dialog-actions {
-    @apply mt-2 flex-col-2 w-full;
+    @apply mt-2 flex-row-2 w-full items-center justify-end;
+  }
 
-    @container date-time-picker-dialog (min-width: 20rem) {
-      @apply flex-row-2 justify-end;
-    }
+  .date-time-picker-dialog[data-step] .date-time-picker-dialog-actions {
+    @apply justify-between;
   }
 
   .date-time-picker-dialog-action {
diff --git a/packages/hightide-web/src/style/theme/components/date-time-picker.css b/packages/hightide-web/src/style/theme/components/date-time-picker.css
index 24a66d36..cbac8c16 100644
--- a/packages/hightide-web/src/style/theme/components/date-time-picker.css
+++ b/packages/hightide-web/src/style/theme/components/date-time-picker.css
@@ -2,4 +2,8 @@
   .date-time-picker {
     @apply flex-col-3;
   }
+
+  .date-time-wheel-picker {
+    @apply flex-row-4 items-center justify-center flex-wrap;
+  }
 }
diff --git a/packages/hightide-web/src/style/theme/components/day-picker.css b/packages/hightide-web/src/style/theme/components/day-picker.css
deleted file mode 100644
index ed5dc4e1..00000000
--- a/packages/hightide-web/src/style/theme/components/day-picker.css
+++ /dev/null
@@ -1,46 +0,0 @@
-@layer components {
-  .day-picker-container {
-    @apply flex-col-1 min-w-64 select-none;
-  }
-
-  .day-picker-header-row {
-    @apply grid grid-cols-7 gap-2;
-  }
-
-  .day-picker-header-item {
-    @apply flex items-center justify-center grow font-semibold;
-  }
-
-  .day-picker-body-row {
-    @apply grid grid-cols-7 gap-2;
-  }
-
-  .day-picker-body-item {
-    @apply flex-row-0 items-center justify-center rounded-full h-8;
-
-    &[data-today] {
-      @apply border-2 border-on-background;
-    }
-    &:not([data-invalid]) {
-      @apply hover:cursor-pointer;
-      &[data-selected] {
-        @apply coloring-solid-hover primary;
-      }
-      &:not([data-selected]) {
-        @apply coloring-text-hover neutral;
-      }
-      &:not([data-selected]):not([data-samemonth]) {
-        @apply text-description;
-      }
-    }
-    &[data-invalid] {
-      @apply hover:cursor-not-allowed disabled;
-      &[data-selected] {
-        @apply coloring-solid;
-      }
-      &:not([data-selected]) {
-        @apply coloring-text;
-      }
-    }
-  }
-}
diff --git a/packages/hightide-web/src/style/theme/components/index.css b/packages/hightide-web/src/style/theme/components/index.css
index 36c8c98f..3e8e0afe 100644
--- a/packages/hightide-web/src/style/theme/components/index.css
+++ b/packages/hightide-web/src/style/theme/components/index.css
@@ -25,9 +25,9 @@
 @import "./dialog.css";
 @import "./textarea.css";
 @import "./form-field.css";
-@import "./day-picker.css";
+@import "./calendar-day-picker.css";
 @import "./time-picker.css";
-@import "./time-input.css";
+@import "./time-wheel-picker.css";
 @import "./number-stepper-input.css";
 @import "./number-input.css";
 @import "./property.css";
diff --git a/packages/hightide-web/src/style/theme/components/time-input.css b/packages/hightide-web/src/style/theme/components/time-wheel-picker.css
similarity index 52%
rename from packages/hightide-web/src/style/theme/components/time-input.css
rename to packages/hightide-web/src/style/theme/components/time-wheel-picker.css
index 0e44460d..6de0a316 100644
--- a/packages/hightide-web/src/style/theme/components/time-input.css
+++ b/packages/hightide-web/src/style/theme/components/time-wheel-picker.css
@@ -1,17 +1,9 @@
 @layer components {
-  .time-input {
+  .time-wheel-picker {
     @apply flex-row-2 items-center justify-center flex-wrap select-none;
   }
 
-  .time-input-segment {
-    @apply min-w-14;
-  }
-
-  .time-input-period {
-    @apply flex-col-1 min-w-16;
-  }
-
-  .time-input-separator {
+  .time-wheel-picker-separator {
     @apply typography-title-md font-semibold text-on-background;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/wheel-picker.css b/packages/hightide-web/src/style/theme/components/wheel-picker.css
index 87995760..cc8e01f1 100644
--- a/packages/hightide-web/src/style/theme/components/wheel-picker.css
+++ b/packages/hightide-web/src/style/theme/components/wheel-picker.css
@@ -2,10 +2,8 @@
   .wheel-picker-root {
     --wheel-picker-item-height: 2.5rem;
     --wheel-picker-visible-span: 1;
-    --wheel-picker-fade-start: 33.333%;
-    --wheel-picker-fade-end: 66.667%;
 
-    @apply relative w-fit min-w-24 select-none rounded-md focus-style-outline outline-none;
+    @apply relative w-fit min-w-16 select-none rounded-md focus-style-outline outline-none;
 
     height: calc(var(--wheel-picker-item-height) * (1 + var(--wheel-picker-visible-span) * 2));
 
@@ -26,13 +24,6 @@
     overscroll-behavior: contain;
     scrollbar-width: none;
     touch-action: pan-y;
-    mask-image: linear-gradient(
-      to bottom,
-      rgb(0 0 0 / 0.55) 0%,
-      black var(--wheel-picker-fade-start),
-      black var(--wheel-picker-fade-end),
-      rgb(0 0 0 / 0.55) 100%
-    );
 
     &::-webkit-scrollbar {
       display: none;
@@ -44,14 +35,30 @@
     pointer-events: none;
   }
 
+  .wheel-picker-root[data-looping] .wheel-picker-items {
+    padding-block: 0;
+  }
+
+  .wheel-picker-loop-preview {
+    @apply flex flex-col justify-end overflow-hidden pointer-events-none;
+
+    height: calc(var(--wheel-picker-item-height) * var(--wheel-picker-visible-span));
+  }
+
+  .wheel-picker-loop-preview-end {
+    @apply justify-start;
+  }
+
+  .wheel-picker-loop-preview .wheel-picker-option {
+    scroll-snap-align: none;
+  }
+
   .wheel-picker-option {
-    @apply flex shrink-0 items-center justify-center px-4 text-base text-description;
+    @apply flex shrink-0 items-center justify-center px-2 text-base text-description;
 
     height: var(--wheel-picker-item-height);
-    min-width: calc(var(--spacing) * 24);
+    width: 100%;
     scroll-snap-align: center;
-    filter: blur(var(--wheel-picker-distance-blur, 0px));
-    opacity: var(--wheel-picker-distance-opacity, 1);
 
     &[data-centered] {
       @apply font-semibold text-on-background;
diff --git a/packages/hightide-web/src/style/utitlity/coloring.css b/packages/hightide-web/src/style/utitlity/coloring.css
index c26f78a6..3d7ddffc 100644
--- a/packages/hightide-web/src/style/utitlity/coloring.css
+++ b/packages/hightide-web/src/style/utitlity/coloring.css
@@ -145,6 +145,11 @@
     --coloring-on-base: var(--color-on-surface);
   }
 
+  &[data-color="surface-inverse"] {
+    --coloring-base: var(--color-on-surface);
+    --coloring-on-base: var(--color-surface);
+  }
+
   &[data-color="surface-variant"] {
     --coloring-base: var(--color-surface-variant);
     --coloring-on-base: var(--color-on-surface-variant);
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/DatePicker.stories.tsx b/packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDatePicker.stories.tsx
similarity index 64%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/DatePicker.stories.tsx
rename to packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDatePicker.stories.tsx
index ac0882cd..1b109528 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/DatePicker.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDatePicker.stories.tsx	
@@ -1,23 +1,24 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import {  DatePicker } from '../../../src/components/user-interaction/date/DatePicker'
-import { DateUtils } from '@helpwave/hightide-utils/utils'
 import { action } from 'storybook/actions'
+import { DateUtils } from '@helpwave/hightide-utils/utils'
+
+import { CalendarDatePicker } from '../../../src/components/user-interaction/date/CalendarDatePicker'
 
 const meta = {
-  component: DatePicker,
-} satisfies Meta<typeof DatePicker>
+  component: CalendarDatePicker,
+} satisfies Meta<typeof CalendarDatePicker>
 
 export default meta
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
-export const datePicker: Story = {
+export const calendarDatePicker: Story = {
   args: {
     initialValue: new Date(),
     start: DateUtils.subtractDuration(new Date(), { years: 50 }),
     end: DateUtils.addDuration(new Date(), { years: 50 }),
     initialDisplay: 'day',
     yearMonthPickerProps: {},
-    dayPickerProps: {},
+    calendarDayPickerProps: {},
     onValueChange: action('onValueChange'),
     onEditComplete: action('onEditComplete')
   },
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/DayPicker.stories.tsx b/packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDayPicker.stories.tsx
similarity index 60%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/DayPicker.stories.tsx
rename to packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDayPicker.stories.tsx
index e241535c..8b94e345 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/DayPicker.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDayPicker.stories.tsx	
@@ -1,15 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { DayPicker } from '../../../src/components/user-interaction/date/DayPicker'
+
+import { CalendarDayPicker } from '../../../src/components/user-interaction/date/CalendarDayPicker'
 
 const meta = {
-  component: DayPicker,
-} satisfies Meta<typeof DayPicker>
+  component: CalendarDayPicker,
+} satisfies Meta<typeof CalendarDayPicker>
 
 export default meta
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
-export const dayPicker: Story = {
+export const calendarDayPicker: Story = {
   args: {
     displayedMonth: new Date(),
     initialValue: new Date(),
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimeWheelPicker.stories.tsx b/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimeWheelPicker.stories.tsx
new file mode 100644
index 00000000..9277750a
--- /dev/null
+++ b/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimeWheelPicker.stories.tsx	
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { action } from 'storybook/actions'
+
+import { DateTimeWheelPicker } from '../../../src/components/user-interaction/date/DateTimeWheelPicker'
+
+const meta = {
+  component: DateTimeWheelPicker,
+} satisfies Meta<typeof DateTimeWheelPicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const dateTimeWheelPicker: Story = {
+  args: {
+    initialValue: new Date(),
+    is24HourFormat: false,
+    isLooping: true,
+    loopingBehaviour: 'update',
+    precision: 'minute',
+    onValueChange: action('onValueChange'),
+    onEditComplete: action('onEditComplete'),
+  },
+}
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateWheelPicker.stories.tsx b/packages/hightide-web/stories/User Interaction/Date and Time Input/DateWheelPicker.stories.tsx
new file mode 100644
index 00000000..7de75fbb
--- /dev/null
+++ b/packages/hightide-web/stories/User Interaction/Date and Time Input/DateWheelPicker.stories.tsx	
@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { action } from 'storybook/actions'
+import { DateUtils } from '@helpwave/hightide-utils/utils'
+
+import { DateWheelPicker } from '../../../src/components/user-interaction/date/DateWheelPicker'
+
+const meta = {
+  component: DateWheelPicker,
+} satisfies Meta<typeof DateWheelPicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const dateWheelPicker: Story = {
+  args: {
+    initialValue: new Date(),
+    start: DateUtils.subtractDuration(new Date(), { years: 50 }),
+    end: DateUtils.addDuration(new Date(), { years: 50 }),
+    isLooping: true,
+    loopingBehaviour: 'update',
+    onValueChange: action('onValueChange'),
+    onEditComplete: action('onEditComplete'),
+  },
+}
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/TimeInput.stories.tsx b/packages/hightide-web/stories/User Interaction/Date and Time Input/TimeWheelPicker.stories.tsx
similarity index 62%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/TimeInput.stories.tsx
rename to packages/hightide-web/stories/User Interaction/Date and Time Input/TimeWheelPicker.stories.tsx
index 1cf22d36..6e510e10 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/TimeInput.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Date and Time Input/TimeWheelPicker.stories.tsx	
@@ -1,18 +1,21 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { TimeInput } from '../../../src/components/user-interaction/date/TimeInput'
 import { action } from 'storybook/actions'
 
-const meta: Meta<typeof TimeInput> = {
-  component: TimeInput,
-}
+import { TimeWheelPicker } from '../../../src/components/user-interaction/date/TimeWheelPicker'
+
+const meta = {
+  component: TimeWheelPicker,
+} satisfies Meta<typeof TimeWheelPicker>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const timeInput: Story = {
+export const timeWheelPicker: Story = {
   args: {
     initialValue: new Date('2026-07-02T14:35:00.000Z'),
     is24HourFormat: false,
+    isLooping: true,
+    loopingBehaviour: 'update',
     precision: 'minute',
     minuteIncrement: '1min',
     secondIncrement: '1s',
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/YearMonthPicker.stories.tsx b/packages/hightide-web/stories/User Interaction/Date and Time Input/YearMonthPicker.stories.tsx
index 16d10913..e976b37f 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/YearMonthPicker.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Date and Time Input/YearMonthPicker.stories.tsx	
@@ -20,7 +20,7 @@ export const yearMonthPicker: Story = {
   },
   decorators: (Story) => {
     return (
-      <div className="h-128 overflow-hidden max-w-64">
+      <div className="max-w-64">
         <Story />
       </div>
     )

From eb292fda63f0dd250574f494c90c238a90cdf40c Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Wed, 30 Sep 2026 09:49:19 +0200
Subject: [PATCH 13/25] feat: update coloring to differentiate interaction and
 normal

---
 packages/hightide-web/CHANGELOG.md            |  36 ++++
 packages/hightide-web/package.json            |   2 +-
 .../components/chat/ChatAttachmentCard.tsx    |  52 -----
 .../chat/ChatAttachmentMessageBubble.tsx      |  86 +++++++++
 .../components/chat/ChatConversationRow.tsx   |   2 +
 .../src/components/chat/ChatMessageBubble.tsx |  67 +++++--
 .../src/components/chat/ChatMessageCard.tsx   |  58 ------
 .../components/chat/ChatQuickReplyChip.tsx    |   2 +
 .../hightide-web/src/components/chat/index.ts |   3 +-
 .../ExpandableSectionHeader.tsx               |   2 +
 .../src/components/layout/TabSwitcher.tsx     |   3 +-
 .../layout/navigation/BreadCrumbs.tsx         |   2 +
 .../src/components/layout/table/TableBody.tsx |   3 +
 .../layout/table/VirtualizedTableBody.tsx     |   2 +
 .../src/components/list/ListActionItem.tsx    |   7 +-
 .../src/components/list/ListItem.tsx          |   3 +-
 .../components/list/ListNavigationItem.tsx    |  11 +-
 .../components/user-interaction/Button.tsx    |   4 +-
 .../components/user-interaction/Checkbox.tsx  |   2 +
 .../FileInput/FileInputTrigger.tsx            |   2 +
 .../user-interaction/IconButton.tsx           |  17 +-
 .../MultiSelectChipDisplayTrigger.tsx         |   2 +
 .../MultiSelect/MultiSelectTrigger.tsx        |   2 +
 .../components/user-interaction/Pressable.tsx |  26 +--
 .../user-interaction/Select/SelectTrigger.tsx |   2 +
 .../components/user-interaction/Switch.tsx    |   2 +
 .../components/user-interaction/Textarea.tsx  |   2 +
 .../user-interaction/data/FilterPopUp.tsx     |   2 +-
 .../date/CalendarDayPicker.tsx                |  11 +-
 .../user-interaction/input/DateTimeInput.tsx  |   2 +
 .../user-interaction/input/Input.tsx          |   2 +
 .../user-interaction/input/NumberInput.tsx    |   2 +
 .../src/style/theme/colors/component.css      |   3 +-
 .../src/style/theme/colors/semantic.css       |  13 --
 .../src/style/theme/colors/utilities.css      |  21 --
 .../src/style/theme/components/breadcrumb.css |   9 +-
 .../src/style/theme/components/button.css     |   8 +-
 .../components/chat/chat-attachment-card.css  |  25 ---
 .../chat/chat-attachment-message-bubble.css   |  33 ++++
 .../components/chat/chat-conversation-row.css |  25 ++-
 .../components/chat/chat-message-bubble.css   |  12 +-
 .../components/chat/chat-message-card.css     |  57 ------
 .../components/chat/chat-quick-reply-chip.css |   3 +-
 .../src/style/theme/components/chat/index.css |   3 +-
 .../src/style/theme/components/checkbox.css   |  10 +-
 .../src/style/theme/components/expandable.css |   3 +-
 .../style/theme/components/icon-button.css    |   2 +-
 .../style/theme/components/input-elements.css |  20 +-
 .../src/style/theme/components/list-item.css  |  13 +-
 .../src/style/theme/components/pressable.css  |   8 +-
 .../style/theme/components/process-model.css  |   4 +-
 .../src/style/theme/components/property.css   |   3 +-
 .../src/style/theme/components/switch.css     |  19 +-
 .../src/style/theme/components/table.css      |  10 +-
 .../style/theme/components/tabswitcher.css    |   4 +-
 .../src/style/theme/typography.css            |  12 +-
 .../src/style/theme/variables.css             |   2 +
 .../src/style/utitlity/coloring.css           |  54 ++----
 packages/hightide-web/src/utils/coloring.ts   | 102 ++++++++++
 packages/hightide-web/src/utils/index.ts      |   1 +
 .../Branding/SemanticColors.stories.tsx       |  54 +++---
 .../Chat/ChatAttachmentCard.stories.tsx       |  20 --
 .../ChatAttachmentMessageBubble.stories.tsx   |  33 ++++
 .../stories/Chat/ChatDemo.stories.tsx         |  99 ++++++----
 .../Chat/ChatMessageBubble.stories.tsx        |  23 ++-
 .../stories/Chat/ChatMessageCard.stories.tsx  | 181 ++++++++++++------
 .../stories/Chat/ChatMessageList.stories.tsx  |  53 +++--
 .../stories/Layout/ScrollableList.stories.tsx |   7 +-
 68 files changed, 820 insertions(+), 550 deletions(-)
 delete mode 100644 packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx
 create mode 100644 packages/hightide-web/src/components/chat/ChatAttachmentMessageBubble.tsx
 delete mode 100644 packages/hightide-web/src/components/chat/ChatMessageCard.tsx
 delete mode 100644 packages/hightide-web/src/style/theme/components/chat/chat-attachment-card.css
 create mode 100644 packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css
 delete mode 100644 packages/hightide-web/src/style/theme/components/chat/chat-message-card.css
 create mode 100644 packages/hightide-web/src/utils/coloring.ts
 delete mode 100644 packages/hightide-web/stories/Chat/ChatAttachmentCard.stories.tsx
 create mode 100644 packages/hightide-web/stories/Chat/ChatAttachmentMessageBubble.stories.tsx

diff --git a/packages/hightide-web/CHANGELOG.md b/packages/hightide-web/CHANGELOG.md
index 690eba30..33c73bbd 100644
--- a/packages/hightide-web/CHANGELOG.md
+++ b/packages/hightide-web/CHANGELOG.md
@@ -12,6 +12,23 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `ExpandableHeader` `triggerProps` for the header toggle button
 - `ExpandableContent` `isClosingOnClick` to collapse when the content is clicked
 - `NavigationItemList` `onClose` so Escape on items can close the parent menu
+- Subpath package exports: `@helpwave/hightide/components`, `@helpwave/hightide/global-contexts`, `@helpwave/hightide/hooks`, and `@helpwave/hightide/utils`, each with types
+- `Pressable` for colored buttons, with `coloringStyle` (`filled` | `foreground`), `colorVariant` (`normal` | `tonal` | `transparent`), `bordered`, `elevated`, and `processingIndicator`
+- `Button` and `IconButton` `variant`: `elevated`, `filled`, `tonal`, `outlined` (`Button` only), and `foreground`
+- `surfaceInverse` button color
+- `Icon` for a sized icon element (`xs` through `xl`)
+- `Divider` with `direction` `horizontal` or `vertical`
+- `ListItem`, `ListActionItem`, and `ListNavigationItem` (`href`, `onClick`, or `LinkComponent`; external links show an external icon)
+- Compound `Expandable`: `Expandable.Root`, `Expandable.Trigger` (render prop with toggle props), `Expandable.Content`, `Expandable.Context`, and `Expandable.Consumer`
+- `ExpandableSection`, `ExpandableSectionHeader`, and `ExpandableSectionContent` for the previous combined expandable layout
+- Compound `Avatar`: `Avatar.Root`, `Avatar.Image`, `Avatar.Fallback`, `Avatar.Name`, `Avatar.StatusIndicator`, and `Avatar.Context`. The combined `Avatar` accepts `status`, `hasStatusIndicator`, and slot props
+- Compound `AvatarGroup`: `AvatarGroup.Container`, `AvatarGroup.Overlap`, and `AvatarGroup.AdditionalText`
+- Compound `WheelPicker`: `WheelPicker.Root`, `WheelPicker.Option`, `WheelPicker.Bar`, and `WheelPicker.Context`, with `value` / `defaultValue`, `onValueChange`, `onLoop`, `isLooping`, and `visibleRows`
+- `DateWheelPicker`, `TimeWheelPicker`, and `DateTimeWheelPicker`
+- `ChatAttachmentMessageBubble`, a `ChatMessageBubble` specialization for a file name, metadata, and optional download action
+- `ColoringUtils` with `build` (defaults: mode `static`, color variant `normal`, coloring style `filled`) and setters `dataColor`, `dataColoringMode`, `dataColorVariant`, `dataColoringStyle`, `dataBordered`, and `dataElevated`
+- Coloring attributes `data-coloring-mode` (`static` | `interactive`), `data-color`, `data-color-variant`, `data-coloring-style`, `data-bordered`, and `data-elevated`. Hover (8%) and press (16%) state layers apply only when mode is `interactive`
+- `--coloring-state-hover` and `--coloring-state-press`
 
 ### Changed
 
@@ -21,10 +38,29 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `FAQSection` uses `isClosingOnClick` instead of container toggle
 - `Navigation` handles Escape on the focused control instead of a capturing menu handler
 - `MultiSelectChipDisplayTrigger` uses an overlay click target so chip remove buttons do not need to stop propagation
+- The package is `"type": "module"` and no longer publishes a root `.` export. Import from the subpath exports above
+- Component styling uses class names instead of `data-name`
+- `Button` and `IconButton` take `variant` instead of `coloringStyle` (`solid`, `outline`, `text`, `tonal`, `tonal-outline`). `Button` children are a string, with `leading` and `trailing` icon components. Processing shows a spinner in place of an icon
+- `Card` is a sized container. Title, description, leading, and trailing content are composed by the caller
+- `NavigationItemData` is a link, a group, or a label. A link cannot also have child items. External links render an external icon, and nested groups can force-mount up to a depth
+- `Expandable` is the compound primitive. The previous combined component is `ExpandableSection`
+- `DatePicker` is `CalendarDatePicker` and `DayPicker` is `CalendarDayPicker`. Date, year-month, and time selection use wheel pickers. `DateTimePicker` `timeInputProps` configures `TimeWheelPicker`
+- Interactive color no longer uses dedicated hover tokens. Hover and press are a foreground state layer, or the same mix on elements that cannot paint a pseudo-element (native inputs and table rows)
+- Interactive controls no longer animate color transitions
+- `ChatMessageBubble` requires `direction` and takes `timestamp` as a `Date` and `status` (`sending` | `sent` | `received` | `read`), matching native. String children render as message text; other children render inside the bubble
 
 ### Removed
 
 - `ExpandableRoot`'s `allowContainerToggle`
+- Root import `@helpwave/hightide` (`src/index.ts`)
+- `ActionCard`, `NavigationCard`, `AvatarWithStatus`, and `AvatarWithLabel`
+- `ScrollPicker`
+- `TimeInput`
+- `ExpandableHeader`
+- `coloringStyle` values `solid`, `outline`, `text`, and `tonal-outline` on `Button` and `IconButton`
+- CSS class `coloring` and the hover color tokens `--color-primary-hover`, `--color-secondary-hover`, `--color-positive-hover`, `--color-warning-hover`, `--color-negative-hover`, `--color-surface-hover`, `--color-neutral-hover`, `--color-neutral-text-hover`, and `--color-neutral-outline-hover` (light and dark)
+- `ChatMessageCard` and `ChatAttachmentCard`. Structured messages are composed with `ChatMessageBubble`; file messages use `ChatAttachmentMessageBubble`. `ChatMessageBubble` `readReceipt` is replaced by `status`
+
 
 ## [0.17.2] - 2026-09-23
 
diff --git a/packages/hightide-web/package.json b/packages/hightide-web/package.json
index 4f9a7f8d..df4f5571 100644
--- a/packages/hightide-web/package.json
+++ b/packages/hightide-web/package.json
@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "AGPL-3.0-only",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "type": "module",
   "browserslist": [
     "> 0.2%",
diff --git a/packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx b/packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx
deleted file mode 100644
index 84f57c07..00000000
--- a/packages/hightide-web/src/components/chat/ChatAttachmentCard.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { ElementType, HTMLAttributes, ReactNode } from 'react'
-import clsx from 'clsx'
-import { Download, FileText } from 'lucide-react'
-import { Icon } from '../display-and-visualization/Icon'
-import { IconButton } from '../user-interaction/IconButton'
-import type { ChatMessageDirection } from './ChatMessageBubble'
-
-export type ChatAttachmentCardProps = HTMLAttributes<HTMLDivElement> & {
-  name: ReactNode,
-  metadata?: ReactNode,
-  icon?: ElementType,
-  direction?: ChatMessageDirection,
-  downloadLabel?: string,
-  onDownload?: () => void,
-}
-
-export const ChatAttachmentCard = ({
-  name,
-  metadata,
-  icon = FileText,
-  direction = 'incoming',
-  downloadLabel = 'Download',
-  onDownload,
-  ...props
-}: ChatAttachmentCardProps) => {
-  return (
-    <div
-      {...props}
-      className={clsx('chat-attachment-card', props.className)}
-      data-direction={direction}
-    >
-      <Icon icon={icon} size="sm" className="chat-attachment-card-icon" />
-      <span className="chat-attachment-card-info">
-        <span className="chat-attachment-card-filename">{name}</span>
-        {metadata && (
-          <span className="chat-attachment-card-metadata">{metadata}</span>
-        )}
-      </span>
-      {onDownload && (
-        <IconButton
-          tooltip={downloadLabel}
-          size="sm"
-          color="primary"
-          variant="foreground"
-          onClick={onDownload}
-        >
-          <Icon icon={Download} />
-        </IconButton>
-      )}
-    </div>
-  )
-}
diff --git a/packages/hightide-web/src/components/chat/ChatAttachmentMessageBubble.tsx b/packages/hightide-web/src/components/chat/ChatAttachmentMessageBubble.tsx
new file mode 100644
index 00000000..6737058e
--- /dev/null
+++ b/packages/hightide-web/src/components/chat/ChatAttachmentMessageBubble.tsx
@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react'
+import clsx from 'clsx'
+import { Download, FileText } from 'lucide-react'
+import { ColoringUtils } from '../../utils/coloring'
+import { Icon } from '../display-and-visualization/Icon'
+import { ChatMessageBubble, type ChatMessageBubbleProps } from './ChatMessageBubble'
+
+export type ChatAttachmentMessageBubbleProps = Omit<ChatMessageBubbleProps, 'children'> & {
+  children?: ReactNode,
+  name: ReactNode,
+  metadata?: ReactNode,
+  icon?: ReactNode,
+  downloadLabel?: string,
+  onDownload?: () => void,
+}
+
+export const ChatAttachmentMessageBubble = ({
+  children,
+  name,
+  metadata,
+  icon,
+  downloadLabel = 'Download',
+  onDownload,
+  direction,
+  className,
+  ...bubbleProps
+}: ChatAttachmentMessageBubbleProps) => {
+  const content = (
+    <>
+      <span className="chat-attachment-message-file-icon">
+        {icon ?? <Icon icon={FileText} size="md" />}
+      </span>
+      <span className="chat-attachment-message-info">
+        {typeof name === 'string' || typeof name === 'number' ? (
+          <span className="chat-attachment-message-name">{name}</span>
+        ) : (
+          name
+        )}
+        {metadata != null && (
+          typeof metadata === 'string' || typeof metadata === 'number' ? (
+            <span className="chat-attachment-message-metadata">{metadata}</span>
+          ) : (
+            metadata
+          )
+        )}
+      </span>
+      <Icon icon={Download} size="sm" className="chat-attachment-message-download-icon" />
+    </>
+  )
+
+  return (
+    <ChatMessageBubble
+      {...bubbleProps}
+      direction={direction}
+      className={clsx('chat-attachment-message-bubble', className)}
+    >
+      {children}
+      {onDownload ? (
+        <button
+          type="button"
+          className="chat-attachment-message-content"
+          aria-label={downloadLabel}
+          onClick={onDownload}
+          {...ColoringUtils.build({
+            color: direction === 'outgoing' ? 'primary' : 'neutral',
+            mode: 'interactive',
+            colorVariant: 'tonal',
+          })}
+        >
+          {content}
+        </button>
+      ) : (
+        <div
+          className="chat-attachment-message-content"
+          {...ColoringUtils.build({
+            color: direction === 'outgoing' ? 'primary' : 'neutral',
+            mode: 'static',
+            colorVariant: 'tonal',
+          })}
+        >
+          {content}
+        </div>
+      )}
+    </ChatMessageBubble>
+  )
+}
diff --git a/packages/hightide-web/src/components/chat/ChatConversationRow.tsx b/packages/hightide-web/src/components/chat/ChatConversationRow.tsx
index c70d370d..f2b85e5e 100644
--- a/packages/hightide-web/src/components/chat/ChatConversationRow.tsx
+++ b/packages/hightide-web/src/components/chat/ChatConversationRow.tsx
@@ -4,6 +4,7 @@ import { Check, CheckCheck } from 'lucide-react'
 import { Icon } from '../display-and-visualization/Icon'
 import { Avatar } from '../display-and-visualization/Avatar/Avatar'
 import type { AvatarProps } from '../display-and-visualization/Avatar/AvatarComponent'
+import { ColoringUtils } from '../../utils/coloring'
 import { PropsUtil } from '../../utils/propsUtil'
 
 export type ChatConversationSentIndicator = 'sent' | 'sentAndReceived'
@@ -35,6 +36,7 @@ export const ChatConversationRow = ({
     <button
       {...props}
       type={props.type ?? 'button'}
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('chat-conversation-row', props.className)}
       data-selected={PropsUtil.dataAttributes.bool(isSelected)}
       data-unread={PropsUtil.dataAttributes.bool(isUnread)}
diff --git a/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx b/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx
index 464c5365..b45c1f6a 100644
--- a/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx
+++ b/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx
@@ -1,44 +1,77 @@
-import type { HTMLAttributes, ReactNode } from 'react'
+import { useMemo, type HTMLAttributes, type ReactNode } from 'react'
 import clsx from 'clsx'
-import { CheckCheck } from 'lucide-react'
+import { Check, CheckCheck, Clock } from 'lucide-react'
+import { DateUtils } from '@helpwave/hightide-utils/utils'
+import { useDateTimeFormat, useLocalization } from '../../global-contexts/localization/forward-exports'
 import { Icon } from '../display-and-visualization/Icon'
 
-export type ChatMessageDirection = 'incoming' | 'outgoing'
+export const chatMessageDirections = ['incoming', 'outgoing'] as const
 
-export type ChatMessageBubbleProps = HTMLAttributes<HTMLDivElement> & {
-  direction?: ChatMessageDirection,
-  timestamp?: ReactNode,
-  readReceipt?: ReactNode,
+export type ChatMessageDirection = typeof chatMessageDirections[number]
+
+export const chatMessageStatuses = ['sent', 'sending', 'received', 'read'] as const
+
+export type ChatMessageStatus = typeof chatMessageStatuses[number]
+
+export type ChatMessageBubbleProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  direction: ChatMessageDirection,
+  timestamp?: Date,
+  status?: ChatMessageStatus,
+  children?: ReactNode,
 }
 
+const statusIcon = (status: ChatMessageStatus) => (
+  status === 'sending'
+    ? Clock
+    : status === 'sent'
+      ? Check
+      : CheckCheck
+)
+
 export const ChatMessageBubble = ({
-  direction = 'incoming',
+  direction,
   timestamp,
-  readReceipt,
+  status,
   children,
+  className,
   ...props
 }: ChatMessageBubbleProps) => {
-  const hasMetaData = timestamp != null || readReceipt != null
+  const { locale } = useLocalization()
+  const { is24HourFormat, timeZone } = useDateTimeFormat()
+  const formattedTimestamp = useMemo(() => (
+    timestamp === undefined
+      ? undefined
+      : DateUtils.formatAbsolute(timestamp, locale, 'time', { timeZone, is24HourFormat })
+  ), [timestamp, locale, timeZone, is24HourFormat])
+  const hasMetaData = formattedTimestamp != null || status != null
 
   return (
     <div
       {...props}
-      className={clsx('chat-message-bubble-container', props.className)}
+      className={clsx('chat-message-bubble-container', className)}
       data-direction={direction}
     >
       <div className="chat-message-bubble-body">
-        <span className="chat-message-bubble-body-text">{children}</span>
+        {typeof children === 'string' || typeof children === 'number' ? (
+          <span className="chat-message-bubble-body-text">{children}</span>
+        ) : (
+          children
+        )}
       </div>
       {hasMetaData && (
         <span className="chat-message-bubble-metadata">
-          {readReceipt != null && (
+          {status != null && (
             <span className="chat-message-bubble-metadata-status">
-              <Icon icon={CheckCheck} size="xs" className="chat-message-bubble-metadata-icon" />
-              <span className="chat-message-bubble-metadata-text">{readReceipt}</span>
+              <Icon
+                icon={statusIcon(status)}
+                size="xs"
+                className="chat-message-bubble-metadata-icon"
+                data-status={status}
+              />
             </span>
           )}
-          {timestamp != null && (
-            <span className="chat-message-bubble-metadata-text">{timestamp}</span>
+          {formattedTimestamp != null && (
+            <span className="chat-message-bubble-metadata-text">{formattedTimestamp}</span>
           )}
         </span>
       )}
diff --git a/packages/hightide-web/src/components/chat/ChatMessageCard.tsx b/packages/hightide-web/src/components/chat/ChatMessageCard.tsx
deleted file mode 100644
index 9ab37948..00000000
--- a/packages/hightide-web/src/components/chat/ChatMessageCard.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react'
-import clsx from 'clsx'
-import type { ChatMessageDirection } from './ChatMessageBubble'
-import type { ChipColor } from '../display-and-visualization/Chip'
-
-export type ChatMessageCardProps = HTMLAttributes<HTMLDivElement> & {
-  icon?: ReactNode,
-  title: ReactNode,
-  subtitle?: ReactNode,
-  badge?: ReactNode,
-  actions?: ReactNode,
-  color?: ChipColor,
-  direction?: ChatMessageDirection,
-}
-
-export const ChatMessageCard = ({
-  icon,
-  title,
-  subtitle,
-  badge,
-  actions,
-  color = 'primary',
-  direction = 'incoming',
-  children,
-  ...props
-}: ChatMessageCardProps) => {
-  return (
-    <div
-      {...props}
-      className={clsx('chat-message-card', props.className)}
-      data-direction={direction}
-      data-color={color ?? undefined}
-    >
-      <div className="chat-message-card-header">
-        {icon && (
-          <span className="chat-message-card-icon" data-color={color ?? undefined}>
-            {icon}
-          </span>
-        )}
-        <span className="chat-message-card-heading">
-          <span className="chat-message-card-title" data-color={color ?? undefined}>{title}</span>
-          {subtitle && (
-            <span className="chat-message-card-subtitle">{subtitle}</span>
-          )}
-        </span>
-        {badge && (
-          <span className="chat-message-card-badge">{badge}</span>
-        )}
-      </div>
-      {children && (
-        <div className="chat-message-card-body">{children}</div>
-      )}
-      {actions && (
-        <div className="chat-message-card-actions">{actions}</div>
-      )}
-    </div>
-  )
-}
diff --git a/packages/hightide-web/src/components/chat/ChatQuickReplyChip.tsx b/packages/hightide-web/src/components/chat/ChatQuickReplyChip.tsx
index f2523943..01f38766 100644
--- a/packages/hightide-web/src/components/chat/ChatQuickReplyChip.tsx
+++ b/packages/hightide-web/src/components/chat/ChatQuickReplyChip.tsx
@@ -1,5 +1,6 @@
 import type { ButtonHTMLAttributes } from 'react'
 import clsx from 'clsx'
+import { ColoringUtils } from '../../utils/coloring'
 import { PropsUtil } from '../../utils/propsUtil'
 
 export type ChatQuickReplyChipProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -15,6 +16,7 @@ export const ChatQuickReplyChip = ({
     <button
       {...props}
       type={props.type ?? 'button'}
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('chat-quick-reply-chip', props.className)}
       data-active={PropsUtil.dataAttributes.bool(isActive)}
     >
diff --git a/packages/hightide-web/src/components/chat/index.ts b/packages/hightide-web/src/components/chat/index.ts
index b8d5eae7..9726f8ef 100644
--- a/packages/hightide-web/src/components/chat/index.ts
+++ b/packages/hightide-web/src/components/chat/index.ts
@@ -1,9 +1,8 @@
-export * from './ChatAttachmentCard'
+export * from './ChatAttachmentMessageBubble'
 export * from './ChatConversationList'
 export * from './ChatConversationRow'
 export * from './ChatDateDivider'
 export * from './ChatMessageBubble'
-export * from './ChatMessageCard'
 export * from './ChatMessageComposer'
 export * from './ChatMessageList'
 export * from './ChatQuickReplyChip'
diff --git a/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx
index ed3f1c0a..4980f800 100644
--- a/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx
+++ b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx
@@ -1,6 +1,7 @@
 import type { ButtonHTMLAttributes } from 'react'
 import clsx from 'clsx'
 
+import { ColoringUtils } from '../../../utils/coloring'
 import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
 import { useExpandableContext } from '../Expandable/ExpandableContext'
 
@@ -22,6 +23,7 @@ export function ExpandableSectionHeader({
       {...props}
       data-expanded={isExpanded ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('expandable-section-header', className)}
     >
       {children}
diff --git a/packages/hightide-web/src/components/layout/TabSwitcher.tsx b/packages/hightide-web/src/components/layout/TabSwitcher.tsx
index 5e29f579..479c1d9f 100644
--- a/packages/hightide-web/src/components/layout/TabSwitcher.tsx
+++ b/packages/hightide-web/src/components/layout/TabSwitcher.tsx
@@ -6,7 +6,7 @@ import { resolveSetState } from '@helpwave/hightide-utils/utils'
 import { createPortal } from 'react-dom'
 import { Visibility } from './Visibility'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
-import { PropsUtil } from '../../utils'
+import { ColoringUtils, PropsUtil } from '../../utils'
 
 export interface TabInfo {
   id: string,
@@ -201,6 +201,7 @@ export function TabList({ ...props }: TabListProps) {
 
             className="tab-list-item"
             data-active={PropsUtil.dataAttributes.bool(isActive)}
+            {...ColoringUtils.dataColoringMode('interactive')}
             data-disabled={PropsUtil.dataAttributes.bool(isDisabled)}
 
             role="tab"
diff --git a/packages/hightide-web/src/components/layout/navigation/BreadCrumbs.tsx b/packages/hightide-web/src/components/layout/navigation/BreadCrumbs.tsx
index 0829fa11..a87567b4 100644
--- a/packages/hightide-web/src/components/layout/navigation/BreadCrumbs.tsx
+++ b/packages/hightide-web/src/components/layout/navigation/BreadCrumbs.tsx
@@ -1,4 +1,5 @@
 import { ArrayUtil } from '@helpwave/hightide-utils/utils'
+import { ColoringUtils } from '../../../utils/coloring'
 import clsx from 'clsx'
 import type { AnchorHTMLAttributes, ElementType, HTMLAttributes, ReactNode } from 'react'
 
@@ -12,6 +13,7 @@ export const BreadCrumbLink = ({ LinkElement = DefaultBreadCrumbLinkElement, cla
   return (
     <LinkElement
       {...props}
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('breadcrumb-link', className)}
     />
   )
diff --git a/packages/hightide-web/src/components/layout/table/TableBody.tsx b/packages/hightide-web/src/components/layout/table/TableBody.tsx
index 5ef28365..2c4805e1 100644
--- a/packages/hightide-web/src/components/layout/table/TableBody.tsx
+++ b/packages/hightide-web/src/components/layout/table/TableBody.tsx
@@ -5,6 +5,7 @@ import { FillerCell } from './FillerCell'
 import React from 'react'
 import { useTableStateWithoutSizingContext } from './TableContext'
 import clsx from 'clsx'
+import { ColoringUtils } from '../../../utils/coloring'
 import { PropsUtil } from '../../../utils/propsUtil'
 import { Visibility } from '../Visibility'
 
@@ -33,6 +34,7 @@ export const TableBody = React.memo(function TableBodyVisual() {
             key={row.id}
             onClick={() => onRowClick?.(row, table)}
             data-clickable={PropsUtil.dataAttributes.bool(!!onRowClick)}
+            {...ColoringUtils.dataColoringMode('interactive')}
             className={clsx('table-body-row', BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original))}
           >
             {row.getVisibleCells().map(cell => {
@@ -56,6 +58,7 @@ export const TableBody = React.memo(function TableBodyVisual() {
               className={clsx('table-body-filler-row')}
               onClick={() => onFillerRowClick?.(index, table)}
               data-clickable={PropsUtil.dataAttributes.bool(!!onFillerRowClick)}
+              {...ColoringUtils.dataColoringMode(onFillerRowClick ? 'interactive' : undefined)}
             >
               {columns.map((column) => {
                 if(!column) return
diff --git a/packages/hightide-web/src/components/layout/table/VirtualizedTableBody.tsx b/packages/hightide-web/src/components/layout/table/VirtualizedTableBody.tsx
index ee61b402..e82a5e02 100644
--- a/packages/hightide-web/src/components/layout/table/VirtualizedTableBody.tsx
+++ b/packages/hightide-web/src/components/layout/table/VirtualizedTableBody.tsx
@@ -5,6 +5,7 @@ import clsx from 'clsx'
 import { useTableContainerContext, useTableStateWithoutSizingContext } from './TableContext'
 import { BagFunctionUtil } from '@helpwave/hightide-utils/utils'
 import { range } from '@helpwave/hightide-utils/utils'
+import { ColoringUtils } from '../../../utils/coloring'
 import { PropsUtil } from '../../../utils/propsUtil'
 import { FillerCell } from './FillerCell'
 import { useVirtualizedRows } from '../virtualization/useVirtualizedRows'
@@ -45,6 +46,7 @@ const VirtualizedTableRow = memo(({
     ref={measureRef}
     onClick={onRowClick ? () => onRowClick(row, table) : undefined}
     data-clickable={PropsUtil.dataAttributes.bool(!!onRowClick)}
+    {...ColoringUtils.dataColoringMode('interactive')}
     className={clsx('table-body-row', className)}
   >
     {cells.map(cell => (
diff --git a/packages/hightide-web/src/components/list/ListActionItem.tsx b/packages/hightide-web/src/components/list/ListActionItem.tsx
index ec7af11d..5bf5a186 100644
--- a/packages/hightide-web/src/components/list/ListActionItem.tsx
+++ b/packages/hightide-web/src/components/list/ListActionItem.tsx
@@ -1,6 +1,7 @@
 import type { ButtonHTMLAttributes } from 'react'
 import clsx from 'clsx'
 
+import { ColoringUtils } from '../../utils/coloring'
 import { PropsUtil } from '../../utils/propsUtil'
 import { ListItemContent } from './ListItemContent'
 import type { ListItemColor, ListItemContentOrder, ListItemContentProps } from './ListItemTypes'
@@ -28,8 +29,10 @@ export function ListActionItem({
       {...props}
       type={type ?? 'button'}
       disabled={disabled}
-      className={clsx('list-action-item', color, color && 'coloring-tonal-hover', className)}
-      data-color={color}
+      className={clsx('list-action-item', className)}
+      {...(color
+        ? ColoringUtils.build({ color, mode: 'interactive', colorVariant: 'tonal' })
+        : ColoringUtils.dataColoringMode('interactive'))}
       data-disabled={PropsUtil.dataAttributes.bool(disabled)}
     >
       <ListItemContent
diff --git a/packages/hightide-web/src/components/list/ListItem.tsx b/packages/hightide-web/src/components/list/ListItem.tsx
index 2dbe1262..1b836543 100644
--- a/packages/hightide-web/src/components/list/ListItem.tsx
+++ b/packages/hightide-web/src/components/list/ListItem.tsx
@@ -1,6 +1,7 @@
 import type { HTMLAttributes } from 'react'
 import clsx from 'clsx'
 
+import { ColoringUtils } from '../../utils/coloring'
 import { ListItemContent } from './ListItemContent'
 import type { ListItemColor, ListItemContentOrder, ListItemContentProps } from './ListItemTypes'
 
@@ -24,7 +25,7 @@ export function ListItem({
     <div
       {...props}
       className={clsx('list-item', color, color && 'coloring-tonal', className)}
-      data-color={color}
+      {...ColoringUtils.dataColor(color)}
     >
       <ListItemContent
         title={title}
diff --git a/packages/hightide-web/src/components/list/ListNavigationItem.tsx b/packages/hightide-web/src/components/list/ListNavigationItem.tsx
index 42084222..b6c98721 100644
--- a/packages/hightide-web/src/components/list/ListNavigationItem.tsx
+++ b/packages/hightide-web/src/components/list/ListNavigationItem.tsx
@@ -2,6 +2,7 @@ import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, MouseEven
 import clsx from 'clsx'
 import { ChevronRight, ExternalLink } from 'lucide-react'
 import { Icon } from '../display-and-visualization/Icon'
+import { ColoringUtils } from '../../utils/coloring'
 import { PropsUtil } from '../../utils/propsUtil'
 import { ListItemContent } from './ListItemContent'
 import type { ListItemColor, ListItemContentOrder } from './ListItemTypes'
@@ -75,7 +76,7 @@ export function ListNavigationItem({
   onClick,
   ...props
 }: ListNavigationItemProps) {
-  const itemClassName = clsx('list-navigation-item', color, color && 'coloring-tonal-hover', className)
+  const itemClassName = clsx('list-navigation-item', className)
   const body = (
     <ListNavigationContent
       title={title}
@@ -96,7 +97,9 @@ export function ListNavigationItem({
         rel={isExternal ? 'noopener noreferrer' : undefined}
         aria-disabled={disabled || undefined}
         className={itemClassName}
-        data-color={color}
+        {...(color
+          ? ColoringUtils.build({ color, mode: 'interactive', colorVariant: 'tonal' })
+          : ColoringUtils.dataColoringMode('interactive'))}
         data-disabled={PropsUtil.dataAttributes.bool(disabled)}
         data-external={PropsUtil.dataAttributes.bool(isExternal)}
         onClick={(event) => {
@@ -118,7 +121,9 @@ export function ListNavigationItem({
       type="button"
       disabled={disabled}
       className={itemClassName}
-      data-color={color}
+      {...(color
+        ? ColoringUtils.build({ color, mode: 'interactive', colorVariant: 'tonal' })
+        : ColoringUtils.dataColoringMode('interactive'))}
       data-disabled={PropsUtil.dataAttributes.bool(disabled)}
       onClick={(event) => onClick?.(event)}
     >
diff --git a/packages/hightide-web/src/components/user-interaction/Button.tsx b/packages/hightide-web/src/components/user-interaction/Button.tsx
index ad643998..e0780e08 100644
--- a/packages/hightide-web/src/components/user-interaction/Button.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Button.tsx
@@ -16,7 +16,9 @@ export {
   type ButtonColor,
   type ButtonSize,
   type ButtonVariant,
+  ColoringUtils,
   type ColoringColorVariant,
+  type ColoringMode,
   type ColoringStyle,
   type PressableProps,
 } from './Pressable'
@@ -57,7 +59,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
       color={buttonColorForVariant(variant, color === undefined ? 'primary' : color) ?? undefined}
       isProcessing={isProcessing}
       processingIndicator={false}
-      className={clsx('button coloring', className)}
+      className={clsx('button', className)}
     >
       {showLeadingSpinner ? (
         <LoadingSpinner size={iconSize} />
diff --git a/packages/hightide-web/src/components/user-interaction/Checkbox.tsx b/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
index 3989c979..4dc41f57 100644
--- a/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
@@ -9,6 +9,7 @@ import type { FormFieldDataHandling } from '../form/FormField'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
+import { ColoringUtils } from '../../utils/coloring'
 import { PropsUtil } from '../../utils/propsUtil'
 
 type CheckBoxSize = 'sm' | 'md' | 'lg' | null
@@ -91,6 +92,7 @@ export const Checkbox = ({
       aria-checked={interactive ? (indeterminate ? 'mixed' : value) : undefined}
       {...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props)}
 
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('checkbox', props.className)}>
       <Visibility isVisible={indeterminate}>
         <Icon icon={Minus} size={indicatorSize} className="checkbox-indicator" aria-hidden={true} />
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
index 0ecb2bd6..053840fb 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
@@ -6,6 +6,7 @@ import { FileText, Pencil, Plus } from 'lucide-react'
 import { Icon } from '../../display-and-visualization/Icon'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
+import { ColoringUtils } from '../../../utils/coloring'
 import { useFileInputContext } from './FileInputContext'
 import { splitVisibleFileInputItems } from './fileInputItem'
 
@@ -57,6 +58,7 @@ const FileInputTriggerImpl = forwardRef<HTMLDivElement, FileInputTriggerProps>(f
           event.preventDefault()
         }
       }}
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('file-input-trigger', props.className)}
       data-value={hasFiles ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/IconButton.tsx b/packages/hightide-web/src/components/user-interaction/IconButton.tsx
index 9040af14..6c45e15b 100644
--- a/packages/hightide-web/src/components/user-interaction/IconButton.tsx
+++ b/packages/hightide-web/src/components/user-interaction/IconButton.tsx
@@ -2,7 +2,7 @@ import type { ElementType, ForwardedRef, ReactNode } from 'react'
 import { forwardRef,type ButtonHTMLAttributes } from 'react'
 import { Icon } from '../display-and-visualization/Icon'
 import type { ButtonColor, IconButtonVariant } from './Pressable'
-import { buttonColorForVariant, coloringColorName, mapButtonVariant } from './Pressable'
+import { buttonColorForVariant, coloringColorName, ColoringUtils, mapButtonVariant } from './Pressable'
 import type { TooltipDisplayProps } from './Tooltip'
 import { TooltipContext, TooltipDisplay, TooltipRoot, useTooltip } from './Tooltip'
 import { Visibility } from '../layout/Visibility'
@@ -55,14 +55,17 @@ export const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonBaseProps>
         props.onClick?.(event)
       }}
 
-      className={clsx('icon-button coloring', props.className)}
+      className={clsx('icon-button', props.className)}
       data-disabled={disabled ? '': undefined}
       data-size={size ?? undefined}
-      data-color={coloringColorName(resolvedColor)}
-      data-coloring-style={coloring.coloringStyle}
-      data-color-variant={coloring.colorVariant}
-      data-bordered={coloring.bordered ? '' : undefined}
-      data-elevated={coloring.elevated ? '' : undefined}
+      {...ColoringUtils.build({
+        color: coloringColorName(resolvedColor) ?? 'primary',
+        mode: 'interactive',
+        coloringStyle: coloring.coloringStyle,
+        colorVariant: coloring.colorVariant,
+        bordered: coloring.bordered,
+        elevated: coloring.elevated,
+      })}
     >
       {isProcessing ? <LoadingSpinner /> : (children ?? <Icon icon={icon} />)}
     </button>
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
index ef35ac31..b295d34a 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
@@ -5,6 +5,7 @@ import { IconButton } from '../IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { XIcon, Plus } from 'lucide-react'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
+import { ColoringUtils } from '../../../utils/coloring'
 import clsx from 'clsx'
 
 export type MultiSelectChipDisplayTriggerProps = HTMLAttributes<HTMLDivElement> & {
@@ -45,6 +46,7 @@ export const MultiSelectChipDisplayTrigger = forwardRef<
     <div
       {...props}
       ref={ReactUtils.assingRefsBuilder([innerRef, ref])}
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('multi-select-chip-display-container', props.className)}
       data-value={context.value.length > 0 ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
index 37f17367..557fd49f 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
@@ -7,6 +7,7 @@ import { useHightideTranslation } from '@helpwave/hightide-utils/context/transla
 import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
 import { MultiSelectOptionDisplayContext } from './MultiSelectOption'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
+import { ColoringUtils } from '../../../utils/coloring'
 
 export interface MultiSelectTriggerProps<T = string>
   extends ComponentPropsWithoutRef<'div'> {
@@ -91,6 +92,7 @@ const MultiSelectTriggerImpl = forwardRef<
           break
         }
       }}
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('multi-select-button', props.className)}
       data-value={hasValue ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/Pressable.tsx b/packages/hightide-web/src/components/user-interaction/Pressable.tsx
index 49564401..ab6fd1f3 100644
--- a/packages/hightide-web/src/components/user-interaction/Pressable.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Pressable.tsx
@@ -3,12 +3,13 @@ import type { ButtonHTMLAttributes } from 'react'
 import { forwardRef } from 'react'
 
 import { LoadingSpinner } from '../layout/loading/LoadingSpinner'
+import type { ColoringColor, ColoringColorVariant, ColoringStyle } from '../../utils/coloring'
+import { ColoringUtils } from '../../utils/coloring'
 
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | null
-
-export type ColoringStyle = 'filled' | 'foreground'
+export type { ColoringColor, ColoringColorVariant, ColoringMode, ColoringStyle } from '../../utils/coloring'
+export { ColoringUtils } from '../../utils/coloring'
 
-export type ColoringColorVariant = 'normal' | 'tonal' | 'transparent'
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | null
 
 export const buttonVariants = ['elevated', 'filled', 'tonal', 'outlined', 'foreground'] as const
 
@@ -22,7 +23,7 @@ const buttonColorsList = ['primary', 'secondary', 'positive', 'warning', 'negati
 
 export type ButtonColor = typeof buttonColorsList[number] | null
 
-export function coloringColorName(color: ButtonColor) {
+export function coloringColorName(color: ButtonColor): ColoringColor | undefined {
   if (color === 'surfaceInverse') {
     return 'surface-inverse'
   }
@@ -96,15 +97,18 @@ export const Pressable = forwardRef<HTMLButtonElement, PressableProps>(function
         }
         onClick?.(event)
       }}
-      className={clsx('pressable coloring', className)}
+      className={clsx('pressable', className)}
       data-disabled={disabled ? '' : undefined}
       data-processing={isProcessing ? '' : undefined}
       data-size={size ?? undefined}
-      data-color={coloringColorName(color)}
-      data-coloring-style={coloringStyle}
-      data-color-variant={colorVariant}
-      data-bordered={bordered ? '' : undefined}
-      data-elevated={elevated ? '' : undefined}
+      {...ColoringUtils.build({
+        color: coloringColorName(color) ?? 'primary',
+        mode: 'interactive',
+        coloringStyle,
+        colorVariant,
+        bordered,
+        elevated,
+      })}
     >
       {children}
       {isProcessing && processingIndicator && (
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
index ad657575..0ac3fbef 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
@@ -8,6 +8,7 @@ import { useHightideTranslation } from '@helpwave/hightide-utils/context/transla
 import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
 import { SelectOptionDisplayContext } from './SelectOption'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
+import { ColoringUtils } from '../../../utils/coloring'
 
 export interface SelectTriggerProps<T = string> extends ComponentPropsWithoutRef<'div'> {
   placeholder?: ReactNode,
@@ -89,6 +90,7 @@ const SelectTriggerImpl = forwardRef<
           break
         }
       }}
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('select-button', props.className)}
       data-value={hasValue ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/Switch.tsx b/packages/hightide-web/src/components/user-interaction/Switch.tsx
index 34d5e796..37abcf54 100644
--- a/packages/hightide-web/src/components/user-interaction/Switch.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Switch.tsx
@@ -4,6 +4,7 @@ import type { FormFieldInteractionStates } from '../form/FieldLayout'
 import type { FormFieldDataHandling } from '../form/FormField'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
+import { ColoringUtils } from '../../utils/coloring'
 import { PropsUtil } from '../../utils/propsUtil'
 
 export type SwitchProps = HTMLAttributes<HTMLDivElement>
@@ -66,6 +67,7 @@ export const Switch = ({
       aria-checked={value}
       {...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props)}
 
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('switch', props.className)}
       data-active={PropsUtil.dataAttributes.bool(value)}
       {...PropsUtil.dataAttributes.interactionStates({ disabled, invalid, readOnly, required })}>
diff --git a/packages/hightide-web/src/components/user-interaction/Textarea.tsx b/packages/hightide-web/src/components/user-interaction/Textarea.tsx
index fdf59c79..b19ee1fd 100644
--- a/packages/hightide-web/src/components/user-interaction/Textarea.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Textarea.tsx
@@ -7,6 +7,7 @@ import type { FormFieldDataHandling } from '../form/FormField'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
+import { ColoringUtils } from '../../utils/coloring'
 import { PropsUtil } from '../../utils/propsUtil'
 
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>
@@ -63,6 +64,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
         onEditCompleteWrapper(event.target.value)
       }}
 
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('textarea', props.className)}
       data-value={PropsUtil.dataAttributes.bool(!!value)}
       {...PropsUtil.dataAttributes.interactionStates({ ...props, invalid })}
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx b/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
index f3f025ae..f6ef5c8a 100644
--- a/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
+++ b/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
@@ -72,7 +72,7 @@ export const FilterBasePopUp = forwardRef<HTMLDivElement, FilterPopUpBaseProps>(
             value={operator}
             onValueChange={(newOperator) => onOperatorChange(newOperator as FilterOperator)}
             triggerProps={{
-              className: 'filter-operator-select w-fit coloring-text-hover neutral flex-row-1 items-center h-element-sm px-2 py-1 rounded-md hover:cursor-pointer font-bold',
+              className: 'filter-operator-select w-fit flex-row-1 items-center h-element-sm px-2 py-1 rounded-md hover:cursor-pointer font-bold',
               selectedDisplay: (option) => option ? translation(FilterOperatorUtils.getInfo(option.value.value).translationKey as Parameters<typeof translation>[0]) : ''
             }}
             iconAppearance="right"
diff --git a/packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx
index 57f7ba72..d4c41ab9 100644
--- a/packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx
@@ -7,6 +7,7 @@ import type { FormFieldDataHandling } from '../../form/FormField'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
+import { ColoringUtils } from '../../../utils/coloring'
 import { PropsUtil } from '../../../utils/propsUtil'
 
 export type CalendarDayPickerProps = Partial<FormFieldDataHandling<Date>> & {
@@ -130,7 +131,7 @@ export const CalendarDayPicker = ({
               <div
                 key={date.getDate()}
                 ref={isFocused ? selectedButtonRef : undefined}
-                className="calendar-day-picker-body-item coloring"
+                className="calendar-day-picker-body-item"
                 onClick={() => {
                   if (!isDayValid) return
                   const newDate = new Date(
@@ -153,9 +154,11 @@ export const CalendarDayPicker = ({
                 role="button"
                 tabIndex={isFocused ? 0 : -1}
 
-                data-color={isSelected ? 'primary' : isSameMonth ? 'surface-inverse' : 'description'}
-                data-coloring-style={isSelected ? 'filled' : 'foreground'}
-                data-color-variant="normal"
+                {...ColoringUtils.build({
+                  color: isSelected ? 'primary' : isSameMonth ? 'surface-inverse' : 'description',
+                  mode: isDayValid ? 'interactive' : 'static',
+                  coloringStyle: isSelected ? 'filled' : 'foreground',
+                })}
                 data-disabled={PropsUtil.dataAttributes.bool(!isDayValid)}
                 data-selected={PropsUtil.dataAttributes.bool(isSelected)}
                 data-today={PropsUtil.dataAttributes.bool(isToday && markToday)}
diff --git a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
index b23fe312..96c8a8b7 100644
--- a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
@@ -13,6 +13,7 @@ import type { FormFieldInteractionStates } from '../../form/FieldLayout'
 import { PopUp } from '../../layout/popup/PopUp'
 import { IconButton } from '../IconButton'
 import { DateUtils, type DateTimeFormat } from '@helpwave/hightide-utils/utils'
+import { ColoringUtils } from '../../../utils/coloring'
 import { DateTimeField } from './DateTimeField'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import { PropsUtil } from '../../../utils/propsUtil'
@@ -130,6 +131,7 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
           }
         }}
 
+        {...ColoringUtils.dataColoringMode('interactive')}
         className={clsx('date-time-input', props.className)}
         data-value={PropsUtil.dataAttributes.bool(!!state)}
         data-has-actions={PropsUtil.dataAttributes.bool(hasActions)}
diff --git a/packages/hightide-web/src/components/user-interaction/input/Input.tsx b/packages/hightide-web/src/components/user-interaction/input/Input.tsx
index adc2585b..17cb377a 100644
--- a/packages/hightide-web/src/components/user-interaction/input/Input.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/Input.tsx
@@ -9,6 +9,7 @@ import type { FormFieldDataHandling } from '../../form/FormField'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
+import { ColoringUtils } from '../../../utils/coloring'
 import { PropsUtil } from '../../../utils/propsUtil'
 
 export type EditCompleteOptionsResolved = {
@@ -104,6 +105,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         setValue(value)
       }}
 
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('input', props.className)}
       data-value={PropsUtil.dataAttributes.bool(!!value)}
       {...PropsUtil.dataAttributes.interactionStates({ ...props, invalid })}
diff --git a/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx b/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
index ad9e9c0c..76daaa7a 100644
--- a/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
@@ -6,6 +6,7 @@ import type { FormFieldDataHandling } from '../../form/FormField'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import { MathUtil } from '@helpwave/hightide-utils/utils'
+import { ColoringUtils } from '../../../utils/coloring'
 import { PropsUtil } from '../../../utils/propsUtil'
 
 export type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'type' | 'min' | 'max' | 'step'>
@@ -75,6 +76,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(functi
       data-value={PropsUtil.dataAttributes.bool(Number.isFinite(value))}
       {...PropsUtil.dataAttributes.interactionStates({ disabled, invalid, readOnly, required })}
       {...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props)}
+      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('number-input number-input-field', className)}
       style={{
         ...style,
diff --git a/packages/hightide-web/src/style/theme/colors/component.css b/packages/hightide-web/src/style/theme/colors/component.css
index ed749349..2096c8ce 100644
--- a/packages/hightide-web/src/style/theme/colors/component.css
+++ b/packages/hightide-web/src/style/theme/colors/component.css
@@ -32,7 +32,7 @@
   --color-process-model-edge-label-text-strong: var(--color-primary);
   --color-process-model-edge-label-text-muted: var(--color-purple-300);
   --color-process-model-terminal-fill: var(--color-primary);
-  --color-process-model-terminal-fill-active: var(--color-primary-hover);
+  --color-process-model-terminal-fill-active: color-mix(in srgb, var(--color-on-primary) var(--coloring-state-press), var(--color-primary));
   --color-process-model-terminal-fill-visited: var(--color-purple-400);
   --color-process-model-activity-icon-bg: var(--color-purple-100);
   --color-process-model-node-active-ring: var(--color-purple-100);
@@ -61,7 +61,6 @@
   --color-table-background: var(--color-surface);
   --color-table-text: var(--color-on-surface);
   --color-table-header-background: var(--color-surface-variant);
-  --color-table-row-hover-background: var(--color-surface-hover);
 
   /* TextImage */
   --color-text-image-primary-background: var(--color-primary);
diff --git a/packages/hightide-web/src/style/theme/colors/semantic.css b/packages/hightide-web/src/style/theme/colors/semantic.css
index 81321864..56a217f1 100644
--- a/packages/hightide-web/src/style/theme/colors/semantic.css
+++ b/packages/hightide-web/src/style/theme/colors/semantic.css
@@ -11,15 +11,12 @@
   /* States */
   --color-warning: var(--color-orange-500);
   --color-on-warning: var(--color-white);
-  --color-warning-hover: var(--color-orange-600);
 
   --color-positive: var(--color-green-500);
   --color-on-positive: var(--color-white);
-  --color-positive-hover: var(--color-green-600);
 
   --color-negative: var(--color-red-500);
   --color-on-negative: var(--color-white);
-  --color-negative-hover: var(--color-red-600);
 
   --color-disabled: var(--color-gray-300);
   --color-on-disabled: var(--color-gray-500);
@@ -27,7 +24,6 @@
   /* Surface */
   --color-surface: var(--color-gray-25);
   --color-on-surface: var(--color-text-primary);
-  --color-surface-hover: var(--color-white);
   --color-surface-variant: var(--color-white);
   --color-on-surface-variant: var(--color-on-surface);
   --color-surface-warning: var(--color-orange-100);
@@ -44,19 +40,14 @@
   /* Other */
   --color-primary: var(--color-purple-500);
   --color-on-primary: var(--color-white);
-  --color-primary-hover: var(--color-purple-600);
 
   --color-secondary: var(--color-blue-500);
   --color-on-secondary: var(--color-white);
-  --color-secondary-hover: var(--color-blue-600);
 
   --color-neutral: var(--color-gray-150);
   --color-on-neutral: var(--color-black);
-  --color-neutral-hover: var(--color-gray-200);
   --color-neutral-text: var(--color-black);
-  --color-neutral-text-hover: var(--color-gray-500);
   --color-neutral-outline: var(--color-black);
-  --color-neutral-outline-hover: var(--color-gray-600);
   --color-neutral-tonal-text: var(--color-black);
   --color-neutral-tonal-background: var(--color-gray-300);
 
@@ -82,7 +73,6 @@
 
     /* Surface */
     --color-surface: var(--color-gray-800);
-    --color-surface-hover: var(--color-gray-700);
     --color-surface-variant: var(--color-gray-900);
     --color-surface-warning: var(--color-orange-900);
 
@@ -96,14 +86,11 @@
 
     /* Other */
     --color-primary: var(--color-purple-400);
-    --color-primary-hover: var(--color-purple-500);
 
     --color-neutral: var(--color-gray-750);
-    --color-neutral-hover: var(--color-gray-600);
     --color-on-neutral: var(--color-white);
     --color-neutral-text: var(--color-white);
     --color-neutral-outline: var(--color-gray-200);
-    --color-neutral-outline-hover: var(--color-gray-400);
     --color-neutral-tonal-text: var(--color-white);
     --color-neutral-tonal-background: var(--color-gray-400);
 
diff --git a/packages/hightide-web/src/style/theme/colors/utilities.css b/packages/hightide-web/src/style/theme/colors/utilities.css
index dc2e09e0..f73d62f6 100644
--- a/packages/hightide-web/src/style/theme/colors/utilities.css
+++ b/packages/hightide-web/src/style/theme/colors/utilities.css
@@ -2,7 +2,6 @@
   @apply coloring-reset-variables;
   --coloring-color: var(--color-primary);
   --coloring-on-color: var(--color-on-primary);
-  --coloring-hover: var(--color-primary-hover);
   --color-focus: var(--color-primary);
 }
 
@@ -10,7 +9,6 @@
   @apply coloring-reset-variables;
   --coloring-color: var(--color-secondary);
   --coloring-on-color: var(--color-on-secondary);
-  --coloring-hover: var(--color-secondary-hover);
   --color-focus: var(--color-secondary);
 }
 
@@ -18,7 +16,6 @@
   @apply coloring-reset-variables;
   --coloring-color: var(--color-positive);
   --coloring-on-color: var(--color-on-positive);
-  --coloring-hover: var(--color-positive-hover);
   --color-focus: var(--color-positive);
 }
 
@@ -26,7 +23,6 @@
   @apply coloring-reset-variables;
   --coloring-color: var(--color-negative);
   --coloring-on-color: var(--color-on-negative);
-  --coloring-hover: var(--color-negative-hover);
   --color-focus: var(--color-negative);
 }
 
@@ -34,7 +30,6 @@
   @apply coloring-reset-variables;
   --coloring-color: var(--color-warning);
   --coloring-on-color: var(--color-on-warning);
-  --coloring-hover: var(--color-warning-hover);
   --color-focus: var(--color-warning);
 }
 
@@ -42,23 +37,17 @@
   @apply coloring-reset-variables;
   --coloring-color: var(--color-neutral);
   --coloring-on-color: var(--color-on-neutral);
-  --coloring-hover: var(--color-neutral-hover);
   --coloring-text: var(--color-neutral-text);
-  --coloring-text-hover: var(--color-neutral-text-hover);
   --coloring-outline: var(--color-neutral-outline);
-  --coloring-outline-hover: var(--color-neutral-outline-hover);
   --coloring-tonal: var(--color-neutral-tonal);
   --coloring-tonal-text: var(--color-neutral-tonal-text);
   --coloring-tonal-background: var(--color-neutral-tonal-background);
-  --coloring-tonal-hover: var(--color-neutral-tonal-hover);
 }
 
 @utility disabled {
   @apply coloring-reset-variables;
   --coloring-color: var(--color-disabled);
   --coloring-on-color: var(--color-on-disabled);
-  --coloring-hover: var(--color-disabled);
-  --coloring-text-hover: transparent;
 }
 
 @utility description {
@@ -70,14 +59,12 @@
   @apply coloring-reset-variables;
   --coloring-color: var(--color-surface);
   --coloring-on-color: var(--color-on-surface);
-  --coloring-hover: var(--color-surface-hover);
 }
 
 @utility surface-variant {
   @apply coloring-reset-variables;
   --coloring-color: var(--color-surface-variant);
   --coloring-on-color: var(--color-on-surface-variant);
-  --coloring-hover: var(--color-surface-hover);
 }
 
 @utility surface-warning {
@@ -94,14 +81,6 @@
   @apply data-[coloringstyle=tonal-outline]:coloring-tonal-outline;
 }
 
-@utility coloring-style-hover-detect {
-  @apply data-[coloringstyle=solid]:coloring-solid-hover;
-  @apply data-[coloringstyle=text]:coloring-text-hover;
-  @apply data-[coloringstyle=outline]:coloring-outline-hover;
-  @apply data-[coloringstyle=tonal]:coloring-tonal-hover;
-  @apply data-[coloringstyle=tonal-outline]:coloring-tonal-outline-hover;
-}
-
 @utility coloring-color-detect {
   @apply data-[color=primary]:primary;
   @apply data-[color=secondary]:secondary;
diff --git a/packages/hightide-web/src/style/theme/components/breadcrumb.css b/packages/hightide-web/src/style/theme/components/breadcrumb.css
index ef8a7082..e1ae6bf6 100644
--- a/packages/hightide-web/src/style/theme/components/breadcrumb.css
+++ b/packages/hightide-web/src/style/theme/components/breadcrumb.css
@@ -7,8 +7,15 @@
   }
   .breadcrumb-link {
     @apply flex-row-1 px-1.5 py-1 rounded-1.5 h-8;
-    @apply description last:neutral coloring-text-hover;
+    @apply relative;
+    --coloring-on-base: var(--color-description);
+    color: var(--color-description);
   }
+  .breadcrumb-item:last-child .breadcrumb-link {
+    --coloring-on-base: var(--color-on-surface);
+    color: var(--color-on-surface);
+  }
+
   .breadcrumb-divider {
     @apply px-1 text-description;
   }
diff --git a/packages/hightide-web/src/style/theme/components/button.css b/packages/hightide-web/src/style/theme/components/button.css
index 70c6ea2a..b05e26cb 100644
--- a/packages/hightide-web/src/style/theme/components/button.css
+++ b/packages/hightide-web/src/style/theme/components/button.css
@@ -1,6 +1,6 @@
 @layer components {
   .button {
-    @apply coloring;
+    @apply relative;
     &[data-size="xs"] {
       @apply min-w-20;
       padding: var(--element-padding) var(--element-padding-direction);
@@ -46,3 +46,9 @@
     }
   }
 }
+
+@layer utilities {
+  .button[data-bordered][data-coloring-mode="interactive"]:not([data-disabled]):not([data-readonly])::before {
+    inset: -2px;
+  }
+}
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-attachment-card.css b/packages/hightide-web/src/style/theme/components/chat/chat-attachment-card.css
deleted file mode 100644
index cfddd67c..00000000
--- a/packages/hightide-web/src/style/theme/components/chat/chat-attachment-card.css
+++ /dev/null
@@ -1,25 +0,0 @@
-@layer components {
-  .chat-attachment-card {
-    @apply flex-row-3 shrink-0 items-center w-full max-w-70 p-3 rounded-xl border border-divider bg-surface text-on-surface shadow-around-md;
-
-    &[data-direction="incoming"] {
-      @apply self-start rounded-bl-sm;
-    }
-
-    &[data-direction="outgoing"] {
-      @apply self-end rounded-br-sm;
-    }
-  }
-
-  .chat-attachment-card-info {
-    @apply flex-col-0 gap-y-0.5 grow min-w-0;
-  }
-
-  .chat-attachment-card-filename {
-    @apply text-sm font-medium truncate;
-  }
-
-  .chat-attachment-card-metadata {
-    @apply text-xs text-description;
-  }
-}
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css b/packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css
new file mode 100644
index 00000000..de85a4b6
--- /dev/null
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css
@@ -0,0 +1,33 @@
+@layer components {
+  .chat-attachment-message-bubble .chat-message-bubble-body {
+    @apply gap-2;
+  }
+
+  .chat-attachment-message-content {
+    @apply flex-row-3 items-center w-full rounded-md px-2 py-2 text-left;
+  }
+
+  button.chat-attachment-message-content {
+    @apply cursor-pointer;
+  }
+
+  .chat-attachment-message-file-icon {
+    @apply flex-row-0 items-center justify-center size-9 shrink-0 rounded-md bg-negative/20 text-negative;
+  }
+
+  .chat-attachment-message-info {
+    @apply flex-col-0 gap-y-0.5 grow min-w-0;
+  }
+
+  .chat-attachment-message-name {
+    @apply text-sm font-medium truncate;
+  }
+
+  .chat-attachment-message-metadata {
+    @apply text-xs text-description;
+  }
+
+  .chat-attachment-message-download-icon {
+    @apply shrink-0;
+  }
+}
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-conversation-row.css b/packages/hightide-web/src/style/theme/components/chat/chat-conversation-row.css
index f67607d8..4c16a3f0 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-conversation-row.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-conversation-row.css
@@ -1,6 +1,7 @@
 @layer components {
   .chat-conversation-row {
-    @apply flex-row-3 shrink-0 items-center w-full px-3.5 py-3 text-left bg-transparent cursor-pointer rounded-md;
+    @apply flex-row-3 shrink-0 items-center w-full px-3.5 py-3 text-left bg-transparent cursor-pointer;
+    --coloring-on-base: var(--color-on-surface);
     @apply border-2 border-transparent focus-style-none focus-style-border outline-none;
     transition: var(--focus-transitions);
 
@@ -8,16 +9,8 @@
       @apply focus-style-apply;
     }
 
-    &:hover {
-      @apply bg-surface-hover;
-    }
-
     &[data-selected] {
-      @apply bg-background border-l-primary border-l-4 pl-3.25  ;
-
-      &:hover {
-        @apply bg-surface-hover;
-      }
+      @apply bg-background border-l-primary border-l-4 pl-3.25;
     }
   }
 
@@ -69,3 +62,15 @@
     @apply flex-row-0 shrink-0 items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary text-on-primary text-xs font-bold;
   }
 }
+
+@layer utilities {
+  .chat-conversation-row[data-coloring-mode="interactive"]:not([data-disabled]):not([data-readonly]) {
+    &::before {
+      inset: -2px;
+    }
+    
+    &[data-selected]::before {
+      left: -4px;
+    }
+  }
+}
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-message-bubble.css b/packages/hightide-web/src/style/theme/components/chat/chat-message-bubble.css
index ed81bef0..8e4b52d2 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-message-bubble.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-message-bubble.css
@@ -1,6 +1,6 @@
 @layer components {
   .chat-message-bubble-container {
-    @apply flex-col-1 max-w-70 px-3.75 py-2.75 rounded-xl gap-1;
+    @apply flex-col-1 max-w-70 px-3.75 pt-2.75 pb-2 rounded-xl gap-2;
 
     &[data-direction="incoming"] {
       @apply self-start rounded-bl-sm bg-neutral text-on-neutral;
@@ -16,7 +16,7 @@
   }
 
   .chat-message-bubble-body-text {
-    @apply text-base/relaxed font-light;
+    @apply text-base font-light;
   }
 
   .chat-message-bubble-metadata {
@@ -33,5 +33,13 @@
 
   .chat-message-bubble-metadata-icon {
     @apply size-4 opacity-75;
+
+    &[data-status="read"] {
+      @apply opacity-100;
+    }
+  }
+
+  .chat-message-bubble-container[data-direction="incoming"] .chat-message-bubble-metadata-icon[data-status="read"] {
+    @apply text-primary;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-message-card.css b/packages/hightide-web/src/style/theme/components/chat/chat-message-card.css
deleted file mode 100644
index 9cde948d..00000000
--- a/packages/hightide-web/src/style/theme/components/chat/chat-message-card.css
+++ /dev/null
@@ -1,57 +0,0 @@
-@layer components {
-  .chat-message-card {
-    @apply flex-col-0 shrink-0 w-full max-w-75 rounded-xl border border-divider bg-surface text-on-surface shadow-around-md overflow-hidden;
-
-    &[data-direction="incoming"] {
-      @apply self-start rounded-bl-sm;
-    }
-
-    &[data-direction="outgoing"] {
-      @apply self-end rounded-br-sm;
-    }
-  }
-
-  .chat-message-card-header {
-    @apply flex-row-0 gap-x-2.5 items-center px-3.75 py-3 border-b border-divider;
-  }
-
-  .chat-message-card-icon {
-    @apply flex-row-0 items-center justify-center size-9 rounded-md coloring-color-detect coloring-tonal;
-
-    > svg {
-      @apply size-4.5;
-    }
-  }
-
-  .chat-message-card-heading {
-    @apply flex-col-0 gap-y-0.5 grow min-w-0;
-  }
-
-  .chat-message-card-title {
-    @apply text-sm font-space font-bold coloring-color-detect coloring-text;
-  }
-
-  .chat-message-card-subtitle {
-    @apply text-xs text-description;
-  }
-
-  .chat-message-card-badge {
-    @apply shrink-0;
-  }
-
-  .chat-message-card-body {
-    @apply flex-col-1 px-3.75 py-3;
-  }
-
-  .chat-message-card-actions {
-    @apply flex-row-0 gap-x-2.5 px-3.75 pb-3.75;
-
-    > * {
-      @apply flex-1;
-    }
-
-    > .button {
-      @apply min-w-0;
-    }
-  }
-}
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css b/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css
index 6e480bde..f1980ff8 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css
@@ -1,7 +1,8 @@
 @layer components {
   .chat-quick-reply-chip {
     @apply flex-row-0 gap-x-1.5 items-center w-fit px-3.5 py-1.5 rounded-full border text-sm font-medium cursor-pointer;
-    @apply border-divider text-description bg-surface hover:bg-surface-hover;
+    @apply border-divider text-description bg-surface;
+    --coloring-on-base: var(--color-on-surface);
 
     &[data-active] {
       @apply border-primary text-primary;
diff --git a/packages/hightide-web/src/style/theme/components/chat/index.css b/packages/hightide-web/src/style/theme/components/chat/index.css
index 9deeea7e..f3b347ae 100644
--- a/packages/hightide-web/src/style/theme/components/chat/index.css
+++ b/packages/hightide-web/src/style/theme/components/chat/index.css
@@ -3,8 +3,7 @@
 @import "./chat-thread-header.css";
 @import "./chat-message-list.css";
 @import "./chat-message-bubble.css";
-@import "./chat-message-card.css";
-@import "./chat-attachment-card.css";
+@import "./chat-attachment-message-bubble.css";
 @import "./chat-system-line.css";
 @import "./chat-date-divider.css";
 @import "./chat-quick-reply-chip.css";
diff --git a/packages/hightide-web/src/style/theme/components/checkbox.css b/packages/hightide-web/src/style/theme/components/checkbox.css
index 7047992a..10d1087a 100644
--- a/packages/hightide-web/src/style/theme/components/checkbox.css
+++ b/packages/hightide-web/src/style/theme/components/checkbox.css
@@ -4,15 +4,17 @@
     @apply rounded data-[rounded]:rounded-full;
     transition: var(--focus-transitions);
 
-    &:not([data-disabled]) {
+    &:not([data-disabled]):not([data-readonly]) {
       @apply hover:cursor-pointer;
+      --coloring-foreground: var(--color-primary);
     }
     &[data-disabled] {
       @apply border-on-disabled bg-disabled cursor-not-allowed;
       @apply data-[checked=false]:text-transparent text-on-disabled;
     }
     &:not([data-disabled])[data-invalid] {
-      @apply border-negative hover:border-negative-hover;
+      @apply border-negative;
+      --coloring-foreground: var(--color-negative);
     }
     &:not([data-disabled])[data-invalid]:not([data-checked="false"]) {
       @apply text-negative bg-negative/20;
@@ -21,10 +23,10 @@
       @apply text-border bg-transparent;
     }
     &:not([data-disabled]):not([data-invalid]):not([data-checked="false"]) {
-      @apply bg-primary/40 border-primary text-primary hover:border-primary-hover hover:bg-primary/20;
+      @apply bg-primary/40 border-primary text-primary;
     }
     &:not([data-disabled]):not([data-invalid])[data-checked="false"] {
-      @apply border-border text-border bg-transparent hover:border-primary-hover;
+      @apply border-border text-border bg-transparent;
     }
 
     &[data-size="sm"] {
diff --git a/packages/hightide-web/src/style/theme/components/expandable.css b/packages/hightide-web/src/style/theme/components/expandable.css
index 52a93d8a..d3a7e2a7 100644
--- a/packages/hightide-web/src/style/theme/components/expandable.css
+++ b/packages/hightide-web/src/style/theme/components/expandable.css
@@ -11,7 +11,8 @@
     @apply flex-row-2 flex-1 justify-between items-center min-h-12 px-4 rounded-lg select-none;
 
     &:not([data-disabled]) {
-      @apply cursor-pointer surface coloring-solid-hover;
+      @apply cursor-pointer;
+      --coloring-on-base: var(--color-on-surface);
     }
 
     &[data-disabled] {
diff --git a/packages/hightide-web/src/style/theme/components/icon-button.css b/packages/hightide-web/src/style/theme/components/icon-button.css
index e8e6a826..6d49d1af 100644
--- a/packages/hightide-web/src/style/theme/components/icon-button.css
+++ b/packages/hightide-web/src/style/theme/components/icon-button.css
@@ -1,6 +1,6 @@
 @layer components {
   .icon-button {
-    @apply coloring relative flex-col-0 items-center justify-center element-square;
+    @apply relative flex-col-0 items-center justify-center element-square;
     transition: var(--focus-transitions);
 
     &:not([data-disabled]) {
diff --git a/packages/hightide-web/src/style/theme/components/input-elements.css b/packages/hightide-web/src/style/theme/components/input-elements.css
index 2549ce89..59432cb5 100644
--- a/packages/hightide-web/src/style/theme/components/input-elements.css
+++ b/packages/hightide-web/src/style/theme/components/input-elements.css
@@ -12,7 +12,7 @@
     @apply bg-input-background;
 
     &:not([data-readonly]) {
-      @apply hover:border-primary-hover;
+      --coloring-foreground: var(--color-on-surface);
     }
 
     &:not([data-value]) {
@@ -28,7 +28,7 @@
     @apply bg-negative/20 border-negative;
 
     &:not([data-readonly]) {
-      @apply hover:border-negative-hover;
+      --coloring-foreground: var(--color-negative);
     }
 
     --color-focus: var(--color-negative);
@@ -45,6 +45,22 @@
   &[data-disabled] {
     @apply border-disabled bg-disabled text-on-disabled placeholder:text-transparent cursor-not-allowed;
   }
+
+  &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly]):not([data-invalid]):hover {
+    background-color: color-mix(in srgb, var(--color-on-surface) var(--coloring-state-hover), var(--color-input-background));
+  }
+
+  &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly]):not([data-invalid]):active {
+    background-color: color-mix(in srgb, var(--color-on-surface) var(--coloring-state-press), var(--color-input-background));
+  }
+
+  &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly])[data-invalid]:hover {
+    background-color: color-mix(in srgb, var(--color-negative) var(--coloring-state-hover), color-mix(in srgb, var(--color-negative) 20%, transparent));
+  }
+
+  &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly])[data-invalid]:active {
+    background-color: color-mix(in srgb, var(--color-negative) var(--coloring-state-press), color-mix(in srgb, var(--color-negative) 20%, transparent));
+  }
 }
 
 /* input-elements */
diff --git a/packages/hightide-web/src/style/theme/components/list-item.css b/packages/hightide-web/src/style/theme/components/list-item.css
index 16124d64..ca379fd6 100644
--- a/packages/hightide-web/src/style/theme/components/list-item.css
+++ b/packages/hightide-web/src/style/theme/components/list-item.css
@@ -28,16 +28,9 @@
   .list-action-item,
   .list-navigation-item {
     @apply cursor-pointer bg-transparent outline-none focus-style-outline;
+    --coloring-on-base: var(--color-on-surface);
     transition: var(--focus-transitions);
 
-    &:hover:not(:disabled):not([data-disabled]) {
-      @apply bg-surface-hover;
-    }
-
-    &:active:not(:disabled):not([data-disabled]) {
-      @apply bg-surface-hover;
-    }
-
     &:focus-visible {
       @apply focus-style-apply;
     }
@@ -46,10 +39,6 @@
     &[data-disabled] {
       @apply cursor-not-allowed opacity-50;
     }
-
-    &[data-color] {
-      @apply coloring-tonal-hover;
-    }
   }
 
   .list-navigation-item-icon {
diff --git a/packages/hightide-web/src/style/theme/components/pressable.css b/packages/hightide-web/src/style/theme/components/pressable.css
index bc196680..c9bd19c8 100644
--- a/packages/hightide-web/src/style/theme/components/pressable.css
+++ b/packages/hightide-web/src/style/theme/components/pressable.css
@@ -1,6 +1,6 @@
 @layer components {
   .pressable {
-    @apply coloring relative flex flex-row items-center justify-center font-semibold whitespace-nowrap w-fit;
+    @apply relative flex flex-row items-center justify-center font-semibold whitespace-nowrap w-fit;
     height: var(--element-height, var(--spacing-element-md));
     padding: var(--element-padding, var(--spacing-element-padding-md));
     border-radius: var(--element-border-radius, 0.375rem);
@@ -51,3 +51,9 @@
     }
   }
 }
+
+@layer utilities {
+  .pressable[data-bordered][data-coloring-mode="interactive"]:not([data-disabled]):not([data-readonly])::before {
+    inset: -2px;
+  }
+}
diff --git a/packages/hightide-web/src/style/theme/components/process-model.css b/packages/hightide-web/src/style/theme/components/process-model.css
index 43f5e9af..b4daa27e 100644
--- a/packages/hightide-web/src/style/theme/components/process-model.css
+++ b/packages/hightide-web/src/style/theme/components/process-model.css
@@ -86,7 +86,7 @@
   }
 
   .process-model-activity-node-label {
-    @apply whitespace-nowrap text-xs font-semibold leading-tight text-on-surface;
+    @apply whitespace-nowrap text-xs font-semibold text-on-surface;
   }
 
   .process-model-activity-node-count {
@@ -102,7 +102,7 @@
   }
 
   .process-model-activity-node[data-kind="terminal"] .process-model-activity-node-label {
-    @apply whitespace-nowrap text-sm font-bold leading-snug text-on-surface;
+    @apply whitespace-nowrap text-sm font-bold text-on-surface;
   }
 
   .process-model-activity-node[data-kind="terminal"] .process-model-activity-node-count {
diff --git a/packages/hightide-web/src/style/theme/components/property.css b/packages/hightide-web/src/style/theme/components/property.css
index d1f3fd92..9b2cf06d 100644
--- a/packages/hightide-web/src/style/theme/components/property.css
+++ b/packages/hightide-web/src/style/theme/components/property.css
@@ -44,7 +44,8 @@
     }
 
     &[data-invalid] {
-      @apply bg-warning text-on-warning border-warning-hover;
+      @apply bg-warning text-on-warning;
+      border-color: color-mix(in srgb, var(--color-on-warning) var(--coloring-state-press), var(--color-warning));
     }
   }
 
diff --git a/packages/hightide-web/src/style/theme/components/switch.css b/packages/hightide-web/src/style/theme/components/switch.css
index 4a23a290..7621ae3f 100644
--- a/packages/hightide-web/src/style/theme/components/switch.css
+++ b/packages/hightide-web/src/style/theme/components/switch.css
@@ -4,8 +4,9 @@
     @apply h-7 w-12 rounded-full border-2 p-1;
     transition: var(--focus-transitions);
 
-    &:not([data-disabled]) {
+    &:not([data-disabled]):not([data-readonly]) {
       @apply hover:cursor-pointer;
+      --coloring-foreground: var(--color-primary);
     }
 
     &[data-disabled] {
@@ -13,27 +14,17 @@
     }
 
     &:not([data-disabled]) {
-      [data-invalid] {
+      &[data-invalid] {
         @apply border-negative;
-
-        &:hover {
-          @apply border-negative-hover bg-negative/10;
-        }
+        --coloring-foreground: var(--color-negative);
       }
 
       &:not([data-invalid]) {
         @apply bg-input-background border-border;
 
-        &:hover {
-          @apply border-primary-hover bg-primary/10;
-        }
-
         &[data-active] {
           @apply bg-primary border-primary;
-
-          &:hover {
-            @apply bg-primary-hover border-primary-hover;
-          }
+          --coloring-foreground: var(--color-on-primary);
         }
       }
     }
diff --git a/packages/hightide-web/src/style/theme/components/table.css b/packages/hightide-web/src/style/theme/components/table.css
index 43a24334..7f30768f 100644
--- a/packages/hightide-web/src/style/theme/components/table.css
+++ b/packages/hightide-web/src/style/theme/components/table.css
@@ -58,7 +58,9 @@
   }
 
   .table-body-row {
-    @apply hover:bg-table-row-hover-background;
+    &[data-coloring-mode="interactive"]:hover {
+      background-color: color-mix(in srgb, var(--color-on-surface) var(--coloring-state-hover), transparent);
+    }
     &[data-clickable] {
       @apply hover:cursor-pointer;
     }
@@ -67,7 +69,11 @@
   .table-body-filler-row {
     @apply hover:cursor-not-allowed;
     &[data-clickable] {
-      @apply hover:cursor-pointer hover:bg-table-row-hover-background;
+      @apply hover:cursor-pointer;
+
+      &[data-coloring-mode="interactive"]:hover {
+        background-color: color-mix(in srgb, var(--color-on-surface) var(--coloring-state-hover), transparent);
+      }
     }
   }
 
diff --git a/packages/hightide-web/src/style/theme/components/tabswitcher.css b/packages/hightide-web/src/style/theme/components/tabswitcher.css
index 635140f4..3bac223a 100644
--- a/packages/hightide-web/src/style/theme/components/tabswitcher.css
+++ b/packages/hightide-web/src/style/theme/components/tabswitcher.css
@@ -5,7 +5,9 @@
   }
 
   .tab-list-item {
-    @apply flex-row-0 grow justify-center px-3 py-2 typography-label-md border-b-4 transition-colors neutral coloring-text-hover;
+    @apply flex-row-0 grow justify-center px-3 py-2 typography-label-md border-b-4 transition-colors;
+    --coloring-on-base: var(--color-on-surface);
+    color: var(--color-on-surface);
     
     &[data-disabled] {
       @apply cursor-not-allowed disabled coloring-text;
diff --git a/packages/hightide-web/src/style/theme/typography.css b/packages/hightide-web/src/style/theme/typography.css
index 52a56a4f..62f41e34 100644
--- a/packages/hightide-web/src/style/theme/typography.css
+++ b/packages/hightide-web/src/style/theme/typography.css
@@ -3,25 +3,25 @@
    * text
    */
   --text-xs: calc(12 / 16 * 1rem);
-  --text-xs--line-height: calc(15 / 12);
+  --text-xs--line-height: calc(16 / 12);
 
   --text-sm: calc(14 / 16 * 1rem);
-  --text-sm--line-height: calc(17 / 14);
+  --text-sm--line-height: calc(18 / 14);
 
   --text-base: 1rem;
-  --text-base--line-height: calc(19 / 16);
+  --text-base--line-height: calc(20 / 16);
 
   --text-lg: calc(18 / 16 * 1rem);
-  --text-lg--line-height: calc(23 / 18);
+  --text-lg--line-height: calc(24 / 18);
 
   --text-xl: calc(20 / 16 * 1rem);
-  --text-xl--line-height: calc(26 / 20);
+  --text-xl--line-height: calc(28 / 20);
 
   --text-2xl: calc(22 / 16 * 1rem);
   --text-2xl--line-height: calc(28 / 22);
 
   --text-3xl: calc(24 / 16 * 1rem);
-  --text-3xl--line-height: calc(30 / 24);
+  --text-3xl--line-height: calc(32 / 24);
 
   --text-4xl: calc(32 / 16 * 1rem);
   --text-4xl--line-height: calc(40 / 32);
diff --git a/packages/hightide-web/src/style/theme/variables.css b/packages/hightide-web/src/style/theme/variables.css
index 69c73426..eb3f7886 100644
--- a/packages/hightide-web/src/style/theme/variables.css
+++ b/packages/hightide-web/src/style/theme/variables.css
@@ -12,6 +12,8 @@
   --coloring-tonal-lightness: 0.95;
   --coloring-tonal-on-lightness: 0.2;
   --coloring-transparent-alpha: 30%;
+  --coloring-state-hover: 8%;
+  --coloring-state-press: 16%;
 
   --icon-size-xs: 16px;
   --icon-size-sm: 20px;
diff --git a/packages/hightide-web/src/style/utitlity/coloring.css b/packages/hightide-web/src/style/utitlity/coloring.css
index 3d7ddffc..60a5fb1a 100644
--- a/packages/hightide-web/src/style/utitlity/coloring.css
+++ b/packages/hightide-web/src/style/utitlity/coloring.css
@@ -49,57 +49,32 @@
   text-[var(--coloring-solid-text,var(--coloring-on-color))];
 }
 
-@utility coloring-solid-hover {
-  @apply coloring-solid
-  hover:bg-[var(--coloring-solid-hover,var(--coloring-hover))];
-}
-
 @utility coloring-tonal {
   @apply bg-[var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)))]/20
   text-[var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)))];
 }
 
-@utility coloring-tonal-hover {
-  @apply coloring-tonal
-  hover:bg-[var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))))]/30;
-}
-
 @utility coloring-text {
   @apply text-[var(--coloring-text,var(--coloring-color))];
 }
 
-@utility coloring-text-hover {
-  @apply coloring-text
-  hover:bg-[var(--coloring-text-hover,var(--coloring-text,var(--coloring-color)))]/20;
-}
-
 @utility coloring-outline {
   border-width: var(--coloring-outline-width, 0.125rem);
   @apply border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))];
   @apply text-[var(--coloring-outline,var(--coloring-color))];
 }
 
-@utility coloring-outline-hover {
-  @apply coloring-outline
-  hover:border-[var(--coloring-border-hover,--coloring-hover)]
-  hover:text-[var(--coloring-outline-hover,var(--coloring-hover))];
-}
-
 @utility coloring-tonal-outline {
   @apply coloring-tonal;
   border-width: var(--coloring-outline-width, 0.125rem);
   @apply border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))];
 }
 
-@utility coloring-tonal-outline-hover {
-  @apply coloring-tonal-outline
-  hover:border-[var(--coloring-border-hover,--coloring-hover)]
-  hover:text-[var(--coloring-outline-hover,var(--coloring-hover))]
-  hover:bg-[var(--coloring-tonal-hover,var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color))))]/30;
-}
-
-@utility coloring {
+@layer utilities {
+  [data-coloring-mode="static"],
+  [data-coloring-mode="interactive"] {
   position: relative;
+
   --coloring-color: var(--coloring-base);
   --coloring-on-color: var(--coloring-on-base);
   --coloring-accent: var(--coloring-base);
@@ -206,40 +181,37 @@
     @apply shadow-around;
   }
 
-  &[data-elevated]:not([data-disabled]):hover {
+  &[data-coloring-mode="interactive"][data-elevated]:not([data-disabled]):hover {
     @apply shadow-around-md;
   }
+  }
 
-  &:not([data-disabled])::before {
+  [data-coloring-mode="interactive"]:not([data-disabled]):not([data-readonly])::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: inherit;
     pointer-events: none;
-    background: var(--coloring-foreground, var(--coloring-on-color));
+    background: var(--coloring-foreground);
     opacity: 0;
   }
 
-  &:not([data-disabled]):hover::before {
-    opacity: 0.08;
+  [data-coloring-mode="interactive"]:not([data-disabled]):not([data-readonly]):hover::before {
+    opacity: var(--coloring-state-hover);
   }
 
-  &:not([data-disabled]):focus-visible::before,
-  &:not([data-disabled]):active::before {
-    opacity: 0.16;
+  [data-coloring-mode="interactive"]:not([data-disabled]):not([data-readonly]):focus-visible::before,
+  [data-coloring-mode="interactive"]:not([data-disabled]):not([data-readonly]):active::before {
+    opacity: var(--coloring-state-press);
   }
 }
 
 @utility coloring-reset-variables {
   --coloring-color: initial;
   --coloring-on-color: initial;
-  --coloring-hover: initial;
   --coloring-text: initial;
-  --coloring-text-hover: initial;
   --coloring-outline: initial;
-  --coloring-outline-hover: initial;
   --coloring-tonal: initial;
   --coloring-tonal-background: initial;
   --coloring-tonal-text: initial;
-  --coloring-tonal-hover: initial;
 }
diff --git a/packages/hightide-web/src/utils/coloring.ts b/packages/hightide-web/src/utils/coloring.ts
new file mode 100644
index 00000000..172e9d28
--- /dev/null
+++ b/packages/hightide-web/src/utils/coloring.ts
@@ -0,0 +1,102 @@
+import { PropsUtil } from './propsUtil'
+
+export const coloringModes = ['static', 'interactive'] as const
+
+export type ColoringMode = typeof coloringModes[number]
+
+export const coloringStyles = ['filled', 'foreground'] as const
+
+export type ColoringStyle = typeof coloringStyles[number]
+
+export const coloringColorVariants = ['normal', 'tonal', 'transparent'] as const
+
+export type ColoringColorVariant = typeof coloringColorVariants[number]
+
+export const coloringColors = [
+  'primary',
+  'secondary',
+  'positive',
+  'warning',
+  'negative',
+  'neutral',
+  'description',
+  'surface',
+  'surface-inverse',
+  'surface-variant',
+  'surface-warning',
+  'disabled',
+] as const
+
+export type ColoringColor = typeof coloringColors[number]
+
+export type ColoringBuildParams = {
+  color: ColoringColor,
+  mode?: ColoringMode,
+  colorVariant?: ColoringColorVariant,
+  coloringStyle?: ColoringStyle,
+  bordered?: boolean,
+  elevated?: boolean,
+}
+
+export type ColoringDataAttributes = {
+  'data-color': ColoringColor,
+  'data-coloring-mode': ColoringMode,
+  'data-color-variant': ColoringColorVariant,
+  'data-coloring-style': ColoringStyle,
+  'data-bordered': '' | undefined,
+  'data-elevated': '' | undefined,
+}
+
+const dataColor = (value: ColoringColor | undefined) => ({
+  'data-color': value,
+})
+
+const dataColoringMode = (value: ColoringMode | undefined) => ({
+  'data-coloring-mode': value,
+})
+
+const dataColorVariant = (value: ColoringColorVariant | undefined) => ({
+  'data-color-variant': value,
+})
+
+const dataColoringStyle = (value: ColoringStyle | undefined) => ({
+  'data-coloring-style': value,
+})
+
+const dataBordered = (value: boolean | undefined) => ({
+  'data-bordered': PropsUtil.dataAttributes.bool(!!value) as '' | undefined,
+})
+
+const dataElevated = (value: boolean | undefined) => ({
+  'data-elevated': PropsUtil.dataAttributes.bool(!!value) as '' | undefined,
+})
+
+const build = ({
+  color,
+  mode = 'static',
+  colorVariant = 'normal',
+  coloringStyle = 'filled',
+  bordered = false,
+  elevated = false,
+}: ColoringBuildParams): ColoringDataAttributes => ({
+  ...dataColor(color),
+  ...dataColoringMode(mode),
+  ...dataColorVariant(colorVariant),
+  ...dataColoringStyle(coloringStyle),
+  ...dataBordered(bordered),
+  ...dataElevated(elevated),
+} as ColoringDataAttributes)
+
+export const ColoringUtils = {
+  colors: coloringColors,
+  modes: coloringModes,
+  colorVariants: coloringColorVariants,
+  styles: coloringStyles,
+  dataColor,
+  dataColoringMode,
+  dataColorVariant,
+  dataColoringStyle,
+  dataBordered,
+  dataElevated,
+  build,
+}
diff --git a/packages/hightide-web/src/utils/index.ts b/packages/hightide-web/src/utils/index.ts
index a5c0d476..a84c8ede 100644
--- a/packages/hightide-web/src/utils/index.ts
+++ b/packages/hightide-web/src/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './coloring'
 export * from './StorageListener'
 export * from './dom'
 export * from './forward-exports'
diff --git a/packages/hightide-web/stories/Branding/SemanticColors.stories.tsx b/packages/hightide-web/stories/Branding/SemanticColors.stories.tsx
index 137ab902..ab7a7f1e 100644
--- a/packages/hightide-web/stories/Branding/SemanticColors.stories.tsx
+++ b/packages/hightide-web/stories/Branding/SemanticColors.stories.tsx
@@ -1,9 +1,9 @@
 import type { CSSProperties } from 'react'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Circle } from 'lucide-react'
-import clsx from 'clsx'
+import { ColoringUtils, type ColoringMode } from '../../src/utils/coloring'
 
-const coloringStyles = ['solid', 'text', 'outline', 'tonal', 'tonal-outline'] as const
+const coloringStyles = ['filled', 'foreground', 'outlined', 'tonal', 'tonal-outlined'] as const
 
 type ColoringStyle = typeof coloringStyles[number]
 
@@ -40,31 +40,41 @@ const colorStyle = (name: string): CSSProperties => ({
   color: `var(--color-${name})`,
 })
 
+const coloringAttributes = (color: ColorKey, coloringStyle: ColoringStyle, mode: ColoringMode) => {
+  switch (coloringStyle) {
+  case 'filled':
+    return ColoringUtils.build({ color, mode })
+  case 'foreground':
+    return ColoringUtils.build({ color, mode, coloringStyle: 'foreground' })
+  case 'outlined':
+    return ColoringUtils.build({ color, mode, coloringStyle: 'foreground', bordered: true })
+  case 'tonal':
+    return ColoringUtils.build({ color, mode, colorVariant: 'tonal' })
+  case 'tonal-outlined':
+    return ColoringUtils.build({ color, mode, colorVariant: 'tonal', bordered: true })
+  }
+}
+
 const ColoringStyleElement = ({
   colorKey,
   coloringStyle,
   label,
-  isHover,
+  mode,
 }: {
   colorKey: ColorKey,
   coloringStyle: ColoringStyle,
   label: string,
-  isHover: boolean,
-}) => (
-  <div
-    data-color={colorKey}
-    data-coloringstyle={coloringStyle}
-    className={clsx(
-      'rounded-lg px-3 py-1.5 typography-label-md w-full text-center coloring-color-detect',
-      {
-        'coloring-style-hover-detect': isHover,
-        'coloring-style-detect': !isHover,
-      }
-    )}
-  >
-    {label}
-  </div>
-)
+  mode: ColoringMode,
+}) => {
+  return (
+    <div
+      {...coloringAttributes(colorKey, coloringStyle, mode)}
+      className="rounded-lg px-3 py-1.5 typography-label-md w-full text-center"
+    >
+      {label}
+    </div>
+  )
+}
 
 const SemanticColorsTable = () => {
   return (
@@ -97,13 +107,13 @@ const SemanticColorsTable = () => {
                       colorKey={colorKey}
                       coloringStyle={style}
                       label={name}
-                      isHover={false}
+                      mode="static"
                     />
                     <ColoringStyleElement
                       colorKey={colorKey}
                       coloringStyle={style}
-                      label={name + '-hover'}
-                      isHover={true}
+                      label={name}
+                      mode="interactive"
                     />
                   </div>
                 </td>
diff --git a/packages/hightide-web/stories/Chat/ChatAttachmentCard.stories.tsx b/packages/hightide-web/stories/Chat/ChatAttachmentCard.stories.tsx
deleted file mode 100644
index baed547e..00000000
--- a/packages/hightide-web/stories/Chat/ChatAttachmentCard.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { action } from 'storybook/actions'
-import { ChatAttachmentCard } from '../../src/components/chat/ChatAttachmentCard'
-
-const meta: Meta<typeof ChatAttachmentCard> = {
-  component: ChatAttachmentCard,
-}
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const chatAttachmentCard: Story = {
-  args: {
-    name: 'Befund_Blutbild.pdf',
-    metadata: 'PDF · 196 KB · 09:21',
-    direction: 'incoming',
-    downloadLabel: 'Herunterladen',
-    onDownload: action('onDownload'),
-  },
-}
diff --git a/packages/hightide-web/stories/Chat/ChatAttachmentMessageBubble.stories.tsx b/packages/hightide-web/stories/Chat/ChatAttachmentMessageBubble.stories.tsx
new file mode 100644
index 00000000..dd20a573
--- /dev/null
+++ b/packages/hightide-web/stories/Chat/ChatAttachmentMessageBubble.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { action } from 'storybook/actions'
+import { ChatAttachmentMessageBubble } from '../../src/components/chat/ChatAttachmentMessageBubble'
+
+const meta = {
+  component: ChatAttachmentMessageBubble,
+} satisfies Meta<typeof ChatAttachmentMessageBubble>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const chatAttachmentMessageBubble: Story = {
+  args: {
+    name: 'Blutbild_2026-03.pdf',
+    metadata: 'PDF · 245 KB',
+    direction: 'incoming',
+    timestamp: new Date(2026, 7, 24, 9, 24),
+    downloadLabel: 'Herunterladen',
+    onDownload: action('download'),
+  },
+  render: (args) => (
+    <div className="flex-col-3 w-96 p-4">
+      <ChatAttachmentMessageBubble {...args} />
+      <ChatAttachmentMessageBubble
+        name="EKG_Bericht.pdf"
+        metadata="PDF · 128 KB"
+        direction="outgoing"
+        timestamp={new Date(2026, 7, 25, 9, 9)}
+        onDownload={action('download')}
+      />
+    </div>
+  ),
+}
diff --git a/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx b/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
index 1a3d7d18..dfae6b35 100644
--- a/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
@@ -9,24 +9,25 @@ import { ChatConversationList } from '../../src/components/chat/ChatConversation
 import { ChatConversationRow, type ChatConversationSentIndicator } from '../../src/components/chat/ChatConversationRow'
 import { ChatThreadHeader } from '../../src/components/chat/ChatThreadHeader'
 import { ChatMessageList } from '../../src/components/chat/ChatMessageList'
-import { ChatMessageBubble } from '../../src/components/chat/ChatMessageBubble'
-import { ChatMessageCard } from '../../src/components/chat/ChatMessageCard'
-import { ChatAttachmentCard } from '../../src/components/chat/ChatAttachmentCard'
+import { ChatMessageBubble, type ChatMessageDirection, type ChatMessageStatus } from '../../src/components/chat/ChatMessageBubble'
+import { ChatAttachmentMessageBubble } from '../../src/components/chat/ChatAttachmentMessageBubble'
 import { ChatDateDivider } from '../../src/components/chat/ChatDateDivider'
 import { ChatSystemLine } from '../../src/components/chat/ChatSystemLine'
 import { ChatQuickReplyChip } from '../../src/components/chat/ChatQuickReplyChip'
 import { ChatMessageComposer } from '../../src/components/chat/ChatMessageComposer'
 import { Chip } from '../../src/components/display-and-visualization/Chip'
+import { Icon } from '../../src/components/display-and-visualization/Icon'
 import { Button } from '../../src/components/user-interaction/Button'
+import { ColoringUtils } from '../../src/utils/coloring'
 import { IconButton } from '../../src/components/user-interaction/IconButton'
 import { TimeDisplay } from '../../src/components/user-interaction/date/TimeDisplay'
 
 type DemoMessage = {
   id: string,
-  direction: 'incoming' | 'outgoing',
+  direction: ChatMessageDirection,
   content: string,
-  timestamp: ReactNode,
-  readReceipt?: string,
+  timestamp: Date,
+  status?: ChatMessageStatus,
 }
 
 type DemoConversation = {
@@ -119,20 +120,21 @@ const initialMessages: DemoMessage[] = [
     id: 'm1',
     direction: 'incoming',
     content: 'Guten Tag, ich bräuchte ein Folgerezept für Ramipril 5mg. Die Packung reicht noch bis Ende der Woche.',
-    timestamp: '13:58',
+    timestamp: new Date(2026, 6, 8, 13, 58),
   },
   {
     id: 'm2',
     direction: 'outgoing',
     content: 'Guten Tag Herr Wellermann, danke für Ihre Nachricht. Wir schauen uns das direkt an.',
-    timestamp: '14:05',
+    timestamp: new Date(2026, 6, 8, 14, 5),
+    status: 'read',
   },
   {
     id: 'm3',
     direction: 'outgoing',
     content: 'Passt Ihnen zusätzlich ein kurzer Termin zur Besprechung Ihrer Blutwerte?',
-    timestamp: '14:10',
-    readReceipt: 'Gelesen',
+    timestamp: new Date(2026, 6, 8, 14, 10),
+    status: 'read',
   },
 ]
 
@@ -154,7 +156,7 @@ export const chatDemo: Story = {
           id: `m${previous.length + 1}`,
           direction: 'outgoing',
           content,
-          timestamp: <TimeDisplay date={new Date()} mode="time"/>,
+          timestamp: new Date(),
         },
       ])
     }
@@ -253,37 +255,58 @@ export const chatDemo: Story = {
                   {message.content}
                 </ChatMessageBubble>
               ))}
-              <ChatMessageCard
-                icon={<Pill/>}
-                title="Rezept-Anfrage"
-                subtitle="Folgeverordnung"
-                direction="incoming"
-                badge={<Chip size="xs" color="primary" coloringStyle="tonal">NEU</Chip>}
-                actions={(
-                  <>
+              <ChatMessageBubble direction="incoming" timestamp={new Date(2026, 6, 8, 14, 12)}>
+                <div className="flex-col-0 w-full min-w-56">
+                  <div className="flex-row-0 gap-x-2.5 items-center pb-3 border-b border-divider">
+                    <span
+                      className="flex-row-0 items-center justify-center size-9 shrink-0 rounded-md"
+                      {...ColoringUtils.build({ color: 'primary', colorVariant: 'tonal' })}
+                    >
+                      <Icon icon={Pill} size="sm" />
+                    </span>
+                    <span className="flex-col-0 gap-y-0.5 grow min-w-0">
+                      <span className="text-sm font-space font-bold">Rezept-Anfrage</span>
+                      <span className="text-xs text-description">Folgeverordnung</span>
+                    </span>
+                    <Chip size="xs" color="primary" coloringStyle="tonal">NEU</Chip>
+                  </div>
+                  <div className="flex-col-1 py-3">
+                    <span className="typography-title-md">Ramipril 5mg</span>
+                    <span className="text-sm text-description">N2 · 50 Stück · zuletzt 12.05.2026</span>
+                  </div>
+                  <div className="flex-row-0 gap-x-2.5 [&>*]:flex-1 [&>.button]:min-w-0">
                     <Button size="sm" color="primary" className="rounded-full" onClick={action('onIssue')}>Ausstellen</Button>
                     <Button size="sm" color="neutral" className="rounded-full" onClick={action('onDecline')}>Ablehnen</Button>
-                  </>
-                )}
-              >
-                <span className="typography-title-md">Ramipril 5mg</span>
-                <span className="text-sm text-description">N2 · 50 Stück · zuletzt 12.05.2026</span>
-              </ChatMessageCard>
-              <ChatMessageCard
-                icon={<CalendarDays/>}
-                title="Terminvorschlag"
-                subtitle="Besprechung Blutwerte · 30 Min"
-                direction="outgoing"
-                badge={<Chip size="xs" color="warning" coloringStyle="tonal">AUSSTEHEND</Chip>}
-              >
-                <span className="typography-title-md">Mi. 8. Juli 2026</span>
-                <span className="text-sm text-description">15:00 – 15:30 Uhr · Sprechzimmer 2</span>
-              </ChatMessageCard>
+                  </div>
+                </div>
+              </ChatMessageBubble>
+              <ChatMessageBubble direction="outgoing" timestamp={new Date(2026, 6, 8, 14, 16)} status="sent">
+                <div className="flex-col-0 w-full min-w-56">
+                  <div className="flex-row-0 gap-x-2.5 items-center pb-3 border-b border-divider">
+                    <span
+                      className="flex-row-0 items-center justify-center size-9 shrink-0 rounded-md"
+                      {...ColoringUtils.build({ color: 'primary', colorVariant: 'tonal' })}
+                    >
+                      <Icon icon={CalendarDays} size="sm" />
+                    </span>
+                    <span className="flex-col-0 gap-y-0.5 grow min-w-0">
+                      <span className="text-sm font-space font-bold">Terminvorschlag</span>
+                      <span className="text-xs text-description">Besprechung Blutwerte · 30 Min</span>
+                    </span>
+                    <Chip size="xs" color="warning" coloringStyle="tonal">AUSSTEHEND</Chip>
+                  </div>
+                  <div className="flex-col-1 pt-3">
+                    <span className="typography-title-md">Mi. 8. Juli 2026</span>
+                    <span className="text-sm text-description">15:00 – 15:30 Uhr · Sprechzimmer 2</span>
+                  </div>
+                </div>
+              </ChatMessageBubble>
               <ChatSystemLine>Termin bestätigt · Mi. 8. Juli, 15:00 Uhr</ChatSystemLine>
-              <ChatAttachmentCard
+              <ChatAttachmentMessageBubble
                 name="Befund_Blutbild.pdf"
-                metadata="PDF · 196 KB · 14:18"
+                metadata="PDF · 196 KB"
                 direction="incoming"
+                timestamp={new Date(2026, 6, 8, 14, 18)}
                 downloadLabel="Herunterladen"
                 onDownload={action('onDownload')}
               />
@@ -292,7 +315,7 @@ export const chatDemo: Story = {
                   key={message.id}
                   direction={message.direction}
                   timestamp={message.timestamp}
-                  readReceipt={message.readReceipt}
+                  status={message.status}
                 >
                   {message.content}
                 </ChatMessageBubble>
diff --git a/packages/hightide-web/stories/Chat/ChatMessageBubble.stories.tsx b/packages/hightide-web/stories/Chat/ChatMessageBubble.stories.tsx
index 1a50f365..40cd475f 100644
--- a/packages/hightide-web/stories/Chat/ChatMessageBubble.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatMessageBubble.stories.tsx
@@ -1,16 +1,23 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { ChatMessageDirection } from '../../src/components/chat/ChatMessageBubble'
-import { ChatMessageBubble } from '../../src/components/chat/ChatMessageBubble'
+import {
+  ChatMessageBubble,
+  type ChatMessageDirection,
+  type ChatMessageStatus
+} from '../../src/components/chat/ChatMessageBubble'
 
-const meta: Meta<typeof ChatMessageBubble> = {
+const meta = {
   component: ChatMessageBubble,
   argTypes: {
     direction: {
       control: 'select',
       options: ['incoming', 'outgoing'] satisfies ChatMessageDirection[],
     },
+    status: {
+      control: 'select',
+      options: ['sent', 'sending', 'received', 'read'] satisfies ChatMessageStatus[],
+    },
   },
-}
+} satisfies Meta<typeof ChatMessageBubble>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -18,16 +25,16 @@ type Story = StoryObj<typeof meta>
 export const chatMessageBubble: Story = {
   args: {
     direction: 'outgoing',
-    timestamp: '09:24',
-    readReceipt: 'Gelesen',
+    timestamp: new Date(2026, 7, 24, 9, 24),
+    status: 'read',
     children: 'Perfekt, ich habe den Befund erhalten. Bis Mittwoch!',
   },
   render: (args) => (
     <div className="flex-col-3 w-96 p-4 rounded-lg bg-background">
-      <ChatMessageBubble direction="incoming" timestamp="09:12">
+      <ChatMessageBubble direction="incoming" timestamp={new Date(2026, 7, 24, 9, 12)}>
         Guten Tag Herr Wellermann, wir haben die Ergebnisse Ihrer Blutuntersuchung erhalten.
       </ChatMessageBubble>
-      <ChatMessageBubble {...args}/>
+      <ChatMessageBubble {...args} />
     </div>
   ),
 }
diff --git a/packages/hightide-web/stories/Chat/ChatMessageCard.stories.tsx b/packages/hightide-web/stories/Chat/ChatMessageCard.stories.tsx
index 66e249ec..d2c67de6 100644
--- a/packages/hightide-web/stories/Chat/ChatMessageCard.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatMessageCard.stories.tsx
@@ -1,81 +1,152 @@
+import type { ElementType, ReactNode } from 'react'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { CalendarDays, Pill, Send } from 'lucide-react'
-import { ChatMessageCard } from '../../src/components/chat/ChatMessageCard'
+import { ChatMessageBubble, type ChatMessageBubbleProps } from '../../src/components/chat/ChatMessageBubble'
 import { Chip } from '../../src/components/display-and-visualization/Chip'
+import { Icon } from '../../src/components/display-and-visualization/Icon'
 import { Button } from '../../src/components/user-interaction/Button'
+import { ColoringUtils, type ColoringColor } from '../../src/utils/coloring'
 
-const meta: Meta<typeof ChatMessageCard> = {
-  component: ChatMessageCard,
-}
+const meta = {
+  component: ChatMessageBubble,
+} satisfies Meta<typeof ChatMessageBubble>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
+type MessageCardStoryProps = ChatMessageBubbleProps & {
+  icon: ElementType,
+  title: string,
+  subtitle?: string,
+  badge?: ReactNode,
+  body?: ReactNode,
+  actions?: ReactNode,
+  color?: ColoringColor,
+}
+
+const MessageCardStory = ({
+  icon,
+  title,
+  subtitle,
+  badge,
+  body,
+  actions,
+  color = 'primary',
+  ...bubbleProps
+}: MessageCardStoryProps) => (
+  <ChatMessageBubble {...bubbleProps}>
+    <div className="flex-col-0 w-full min-w-64">
+      <div className="flex-row-0 gap-x-2.5 items-center pb-3 border-b border-divider">
+        <span
+          className="flex-row-0 items-center justify-center size-9 shrink-0 rounded-md"
+          {...ColoringUtils.build({ color, colorVariant: 'tonal' })}
+        >
+          <Icon icon={icon} size="sm" />
+        </span>
+        <span className="flex-col-0 gap-y-0.5 grow min-w-0">
+          <span className="text-sm font-space font-bold">{title}</span>
+          {subtitle && (
+            <span className="text-xs text-description">{subtitle}</span>
+          )}
+        </span>
+        {badge && (
+          <span className="shrink-0">{badge}</span>
+        )}
+      </div>
+      {body && (
+        <div className="flex-col-1 py-3">{body}</div>
+      )}
+      {actions && (
+        <div className="flex-row-0 gap-x-2.5 pb-1 [&>*]:flex-1 [&>.button]:min-w-0">
+          {actions}
+        </div>
+      )}
+    </div>
+  </ChatMessageBubble>
+)
+
 export const appointmentProposal: Story = {
   args: {
-    icon: <CalendarDays/>,
-    title: 'Terminvorschlag',
-    subtitle: 'Besprechung Blutwerte · 30 Min',
-    color: 'primary',
     direction: 'incoming',
-    badge: (
-      <Chip size="xs" color="warning" coloringStyle="tonal">AUSSTEHEND</Chip>
-    ),
-    children: (
-      <>
-        <span className="typography-title-md">Mi. 8. Juli 2026</span>
-        <span className="text-sm text-description">15:00 – 15:30 Uhr · Sprechzimmer 2</span>
-      </>
-    ),
-    actions: (
-      <>
-        <Button size="sm" color="primary" className="rounded-full">Zusagen</Button>
-        <Button size="sm" color="neutral" className="rounded-full">Ablehnen</Button>
-      </>
-    ),
+    timestamp: new Date(2026, 6, 8, 15, 0),
   },
+  render: (args) => (
+    <div className="w-96 p-4">
+      <MessageCardStory
+        {...args}
+        icon={CalendarDays}
+        title="Terminvorschlag"
+        subtitle="Besprechung Blutwerte · 30 Min"
+        badge={<Chip size="xs" color="warning" coloringStyle="tonal">AUSSTEHEND</Chip>}
+        body={(
+          <>
+            <span className="typography-title-md">Mi. 8. Juli 2026</span>
+            <span className="text-sm text-description">15:00 – 15:30 Uhr · Sprechzimmer 2</span>
+          </>
+        )}
+        actions={(
+          <>
+            <Button size="sm" color="primary" className="rounded-full">Zusagen</Button>
+            <Button size="sm" color="neutral" className="rounded-full">Ablehnen</Button>
+          </>
+        )}
+      />
+    </div>
+  ),
 }
 
 export const prescriptionRequest: Story = {
   args: {
-    icon: <Pill/>,
-    title: 'Rezept-Anfrage',
-    subtitle: 'Folgeverordnung',
-    color: 'primary',
     direction: 'incoming',
-    badge: (
-      <Chip size="xs" color="primary" coloringStyle="tonal">NEU</Chip>
-    ),
-    children: (
-      <>
-        <span className="typography-title-md">Ramipril 5mg</span>
-        <span className="text-sm text-description">N2 · 50 Stück · zuletzt 12.05.2026</span>
-      </>
-    ),
-    actions: (
-      <>
-        <Button size="sm" color="primary" className="rounded-full">Ausstellen</Button>
-        <Button size="sm" color="neutral" className="rounded-full">Ablehnen</Button>
-      </>
-    ),
+    timestamp: new Date(2026, 6, 8, 14, 12),
   },
+  render: (args) => (
+    <div className="w-96 p-4">
+      <MessageCardStory
+        {...args}
+        icon={Pill}
+        title="Rezept-Anfrage"
+        subtitle="Folgeverordnung"
+        badge={<Chip size="xs" color="primary" coloringStyle="tonal">NEU</Chip>}
+        body={(
+          <>
+            <span className="typography-title-md">Ramipril 5mg</span>
+            <span className="text-sm text-description">N2 · 50 Stück · zuletzt 12.05.2026</span>
+          </>
+        )}
+        actions={(
+          <>
+            <Button size="sm" color="primary" className="rounded-full">Ausstellen</Button>
+            <Button size="sm" color="neutral" className="rounded-full">Ablehnen</Button>
+          </>
+        )}
+      />
+    </div>
+  ),
 }
 
 export const referral: Story = {
   args: {
-    icon: <Send/>,
-    title: 'Überweisung',
-    subtitle: 'Kardiologie',
-    color: 'secondary',
     direction: 'outgoing',
-    badge: (
-      <Chip size="xs" color="secondary" coloringStyle="tonal">GESENDET</Chip>
-    ),
-    children: (
-      <>
-        <span className="typography-title-md">Dr. med. K. Brandt</span>
-        <span className="text-sm text-description">Kardiologische Praxis am Markt</span>
-      </>
-    ),
+    timestamp: new Date(2026, 6, 8, 16, 40),
+    status: 'sent',
   },
+  render: (args) => (
+    <div className="w-96 p-4">
+      <MessageCardStory
+        {...args}
+        icon={Send}
+        title="Überweisung"
+        subtitle="Kardiologie"
+        color="secondary"
+        badge={<Chip size="xs" color="secondary" coloringStyle="tonal">GESENDET</Chip>}
+        body={(
+          <>
+            <span className="typography-title-md">Dr. med. K. Brandt</span>
+            <span className="text-sm text-description">Kardiologische Praxis am Markt</span>
+          </>
+        )}
+      />
+    </div>
+  ),
 }
diff --git a/packages/hightide-web/stories/Chat/ChatMessageList.stories.tsx b/packages/hightide-web/stories/Chat/ChatMessageList.stories.tsx
index 50ea4991..f4957cbb 100644
--- a/packages/hightide-web/stories/Chat/ChatMessageList.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatMessageList.stories.tsx
@@ -2,12 +2,13 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { CalendarDays } from 'lucide-react'
 import { ChatMessageList } from '../../src/components/chat/ChatMessageList'
 import { ChatMessageBubble } from '../../src/components/chat/ChatMessageBubble'
-import { ChatMessageCard } from '../../src/components/chat/ChatMessageCard'
-import { ChatAttachmentCard } from '../../src/components/chat/ChatAttachmentCard'
+import { ChatAttachmentMessageBubble } from '../../src/components/chat/ChatAttachmentMessageBubble'
 import { ChatDateDivider } from '../../src/components/chat/ChatDateDivider'
 import { ChatSystemLine } from '../../src/components/chat/ChatSystemLine'
 import { Chip } from '../../src/components/display-and-visualization/Chip'
+import { Icon } from '../../src/components/display-and-visualization/Icon'
 import { Button } from '../../src/components/user-interaction/Button'
+import { ColoringUtils } from '../../src/utils/coloring'
 
 const meta: Meta<typeof ChatMessageList> = {
   component: ChatMessageList,
@@ -24,37 +25,47 @@ export const chatMessageList: Story = {
     <div className="h-150 w-120 max-w-full overflow-hidden">
       <ChatMessageList {...args}>
         <ChatDateDivider>Heute · 09:10</ChatDateDivider>
-        <ChatMessageBubble direction="incoming" timestamp="09:12">
+        <ChatMessageBubble direction="incoming" timestamp={new Date(2026, 6, 8, 9, 12)}>
           Guten Tag Herr Wellermann, wir haben die Ergebnisse Ihrer Blutuntersuchung erhalten und würden die Werte gerne mit Ihnen besprechen.
         </ChatMessageBubble>
-        <ChatMessageCard
-          icon={<CalendarDays/>}
-          title="Terminvorschlag"
-          subtitle="Besprechung Blutwerte · 30 Min"
-          direction="incoming"
-          badge={<Chip size="xs" color="warning" coloringStyle="tonal">AUSSTEHEND</Chip>}
-          actions={(
-            <>
+        <ChatMessageBubble direction="incoming" timestamp={new Date(2026, 6, 8, 9, 13)}>
+          <div className="flex-col-0 w-full min-w-56">
+            <div className="flex-row-0 gap-x-2.5 items-center pb-3 border-b border-divider">
+              <span
+                className="flex-row-0 items-center justify-center size-9 shrink-0 rounded-md"
+                {...ColoringUtils.build({ color: 'primary', colorVariant: 'tonal' })}
+              >
+                <Icon icon={CalendarDays} size="sm" />
+              </span>
+              <span className="flex-col-0 gap-y-0.5 grow min-w-0">
+                <span className="text-sm font-space font-bold">Terminvorschlag</span>
+                <span className="text-xs text-description">Besprechung Blutwerte · 30 Min</span>
+              </span>
+              <Chip size="xs" color="warning" coloringStyle="tonal">AUSSTEHEND</Chip>
+            </div>
+            <div className="flex-col-1 py-3">
+              <span className="typography-title-md">Mi. 8. Juli 2026</span>
+              <span className="text-sm text-description">15:00 – 15:30 Uhr · Sprechzimmer 2</span>
+            </div>
+            <div className="flex-row-0 gap-x-2.5 [&>*]:flex-1 [&>.button]:min-w-0">
               <Button size="sm" color="primary" className="rounded-full">Zusagen</Button>
               <Button size="sm" color="neutral" className="rounded-full">Ablehnen</Button>
-            </>
-          )}
-        >
-          <span className="typography-title-md">Mi. 8. Juli 2026</span>
-          <span className="text-sm text-description">15:00 – 15:30 Uhr · Sprechzimmer 2</span>
-        </ChatMessageCard>
-        <ChatMessageBubble direction="outgoing" timestamp="09:20">
+            </div>
+          </div>
+        </ChatMessageBubble>
+        <ChatMessageBubble direction="outgoing" timestamp={new Date(2026, 6, 8, 9, 20)} status="sent">
           Vielen Dank. 15:00 Uhr passt mir gut – ich komme vorbei.
         </ChatMessageBubble>
         <ChatSystemLine>Termin bestätigt · Mi. 8. Juli, 15:00 Uhr</ChatSystemLine>
-        <ChatAttachmentCard
+        <ChatAttachmentMessageBubble
           name="Befund_Blutbild.pdf"
-          metadata="PDF · 196 KB · 09:21"
+          metadata="PDF · 196 KB"
           direction="incoming"
+          timestamp={new Date(2026, 6, 8, 9, 21)}
           downloadLabel="Herunterladen"
           onDownload={() => {}}
         />
-        <ChatMessageBubble direction="outgoing" timestamp="09:24" readReceipt="Gelesen">
+        <ChatMessageBubble direction="outgoing" timestamp={new Date(2026, 6, 8, 9, 24)} status="read">
           Perfekt, ich habe den Befund erhalten. Bis Mittwoch!
         </ChatMessageBubble>
       </ChatMessageList>
diff --git a/packages/hightide-web/stories/Layout/ScrollableList.stories.tsx b/packages/hightide-web/stories/Layout/ScrollableList.stories.tsx
index 3f3d5866..5b19dc8d 100644
--- a/packages/hightide-web/stories/Layout/ScrollableList.stories.tsx
+++ b/packages/hightide-web/stories/Layout/ScrollableList.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ScrollableList } from '../../src/components/layout/ScrollableList'
 import { Button } from '../../src/components/user-interaction/Button'
+import { ColoringUtils } from '../../src/utils/coloring'
 
 const listItems = [
   'Alpha',
@@ -41,7 +42,8 @@ export const scrollableList: Story = {
         {listItems.map((item) => (
           <div
             key={item}
-            className="px-2 py-2.5 rounded-md surface coloring-solid-hover"
+            className="px-2 py-2.5 rounded-md"
+            {...ColoringUtils.build({ color: 'surface', mode: 'interactive' })}
           >
             {item}
           </div>
@@ -69,7 +71,8 @@ export const asNav: Story = {
           <a
             key={item}
             href="#"
-            className="block px-2 py-2.5 rounded-md surface coloring-solid-hover"
+            className="block px-2 py-2.5 rounded-md"
+            {...ColoringUtils.build({ color: 'surface', mode: 'interactive' })}
             onClick={(event) => event.preventDefault()}
           >
             {item}

From abbdb486b0ef53904f5a7d803baffa345c01aaae Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Wed, 30 Sep 2026 12:01:27 +0200
Subject: [PATCH 14/25] feat: update description and coloring

---
 packages/hightide-web/CHANGELOG.md            |   9 ++
 .../chat/ChatAttachmentMessageBubble.tsx      |   6 +-
 .../src/components/chat/ChatMessageBubble.tsx |   4 +
 .../components/chat/ChatQuickReplyChip.tsx    |   6 +-
 .../src/components/chat/ChatSystemLine.tsx    |   5 +-
 .../display-and-visualization/Chip.tsx        |  35 ++++--
 .../src/style/theme/colors/basic.css          |  96 ++++++++++++---
 .../src/style/theme/colors/component.css      |   7 +-
 .../src/style/theme/colors/semantic.css       |  10 +-
 .../src/style/theme/colors/utilities.css      |   5 +
 .../src/style/theme/components/avatar.css     |   8 +-
 .../chat/chat-attachment-message-bubble.css   |   2 +-
 .../components/chat/chat-message-bubble.css   |  14 +--
 .../components/chat/chat-quick-reply-chip.css |   8 +-
 .../components/chat/chat-system-line.css      |   2 +-
 .../src/style/theme/components/chip.css       |   2 +-
 .../style/theme/components/input-elements.css |   8 +-
 .../src/style/theme/components/property.css   |   2 +-
 .../src/style/theme/components/table.css      |   4 +-
 .../src/style/theme/variables.css             |   6 +
 .../src/style/utitlity/coloring.css           |  16 +--
 .../hightide-web/src/style/utitlity/focus.css |   4 +-
 .../ChatAttachmentMessageBubble.stories.tsx   |   2 +-
 .../stories/Chat/ChatDemo.stories.tsx         |   4 +-
 .../Chat/ChatMessageBubble.stories.tsx        |   2 +-
 .../stories/Chat/ChatMessageCard.stories.tsx  | 113 +++++++++---------
 .../stories/Chat/ChatMessageList.stories.tsx  |  86 +++++++------
 .../Chip/Chip.stories.tsx                     |  13 +-
 28 files changed, 288 insertions(+), 191 deletions(-)

diff --git a/packages/hightide-web/CHANGELOG.md b/packages/hightide-web/CHANGELOG.md
index 33c73bbd..ff140dfe 100644
--- a/packages/hightide-web/CHANGELOG.md
+++ b/packages/hightide-web/CHANGELOG.md
@@ -29,6 +29,8 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `ColoringUtils` with `build` (defaults: mode `static`, color variant `normal`, coloring style `filled`) and setters `dataColor`, `dataColoringMode`, `dataColorVariant`, `dataColoringStyle`, `dataBordered`, and `dataElevated`
 - Coloring attributes `data-coloring-mode` (`static` | `interactive`), `data-color`, `data-color-variant`, `data-coloring-style`, `data-bordered`, and `data-elevated`. Hover (8%) and press (16%) state layers apply only when mode is `interactive`
 - `--coloring-state-hover` and `--coloring-state-press`
+- `--appearance-subtle` (`70%`)
+- `text-description`, which sets the text color from the active foreground and background
 
 ### Changed
 
@@ -48,6 +50,12 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Interactive color no longer uses dedicated hover tokens. Hover and press are a foreground state layer, or the same mix on elements that cannot paint a pseudo-element (native inputs and table rows)
 - Interactive controls no longer animate color transitions
 - `ChatMessageBubble` requires `direction` and takes `timestamp` as a `Date` and `status` (`sending` | `sent` | `received` | `read`), matching native. String children render as message text; other children render inside the bubble
+- `ChatMessageBubble` uses static coloring (`primary` outgoing, `neutral` incoming). Its timestamp and status icon use `text-description`
+- Palette colors are `oklch`, with the hex value declared first so older browsers keep a color. The gray scale uses even lightness steps
+- `color-mix` interpolates in `oklch` (coloring, focus, inputs, tables, properties, and the process-model active fill)
+- Description text is no longer a fixed gray. `text-description` mixes `--coloring-foreground` (otherwise `--color-on-surface`) into `--coloring-color` (otherwise `--color-surface`) at `--appearance-subtle`
+- Dark theme background is `gray-800`, surface is `gray-700`, surface variant is `gray-750`, and primary stays `purple-500`
+- Coloring custom properties start as `initial` instead of `transparent`
 
 ### Removed
 
@@ -60,6 +68,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `coloringStyle` values `solid`, `outline`, `text`, and `tonal-outline` on `Button` and `IconButton`
 - CSS class `coloring` and the hover color tokens `--color-primary-hover`, `--color-secondary-hover`, `--color-positive-hover`, `--color-warning-hover`, `--color-negative-hover`, `--color-surface-hover`, `--color-neutral-hover`, `--color-neutral-text-hover`, and `--color-neutral-outline-hover` (light and dark)
 - `ChatMessageCard` and `ChatAttachmentCard`. Structured messages are composed with `ChatMessageBubble`; file messages use `ChatAttachmentMessageBubble`. `ChatMessageBubble` `readReceipt` is replaced by `status`
+- Fixed `--color-description` tokens (`gray-600` in light, `gray-400` in dark)
 
 
 ## [0.17.2] - 2026-09-23
diff --git a/packages/hightide-web/src/components/chat/ChatAttachmentMessageBubble.tsx b/packages/hightide-web/src/components/chat/ChatAttachmentMessageBubble.tsx
index 6737058e..32f942a1 100644
--- a/packages/hightide-web/src/components/chat/ChatAttachmentMessageBubble.tsx
+++ b/packages/hightide-web/src/components/chat/ChatAttachmentMessageBubble.tsx
@@ -27,7 +27,7 @@ export const ChatAttachmentMessageBubble = ({
 }: ChatAttachmentMessageBubbleProps) => {
   const content = (
     <>
-      <span className="chat-attachment-message-file-icon">
+      <span className="chat-attachment-message-file-icon" {...ColoringUtils.build({ color: 'secondary', colorVariant: 'tonal' })}>
         {icon ?? <Icon icon={FileText} size="md" />}
       </span>
       <span className="chat-attachment-message-info">
@@ -62,9 +62,9 @@ export const ChatAttachmentMessageBubble = ({
           aria-label={downloadLabel}
           onClick={onDownload}
           {...ColoringUtils.build({
-            color: direction === 'outgoing' ? 'primary' : 'neutral',
+            color: 'surface-inverse',
             mode: 'interactive',
-            colorVariant: 'tonal',
+            coloringStyle: 'foreground'
           })}
         >
           {content}
diff --git a/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx b/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx
index b45c1f6a..ec1f7577 100644
--- a/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx
+++ b/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx
@@ -4,6 +4,7 @@ import { Check, CheckCheck, Clock } from 'lucide-react'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 import { useDateTimeFormat, useLocalization } from '../../global-contexts/localization/forward-exports'
 import { Icon } from '../display-and-visualization/Icon'
+import { ColoringUtils } from '../user-interaction'
 
 export const chatMessageDirections = ['incoming', 'outgoing'] as const
 
@@ -47,6 +48,9 @@ export const ChatMessageBubble = ({
 
   return (
     <div
+      {...ColoringUtils.build({
+        color: direction === 'outgoing' ? 'primary' : 'surface',
+      })}
       {...props}
       className={clsx('chat-message-bubble-container', className)}
       data-direction={direction}
diff --git a/packages/hightide-web/src/components/chat/ChatQuickReplyChip.tsx b/packages/hightide-web/src/components/chat/ChatQuickReplyChip.tsx
index 01f38766..a3f4aa4e 100644
--- a/packages/hightide-web/src/components/chat/ChatQuickReplyChip.tsx
+++ b/packages/hightide-web/src/components/chat/ChatQuickReplyChip.tsx
@@ -16,7 +16,11 @@ export const ChatQuickReplyChip = ({
     <button
       {...props}
       type={props.type ?? 'button'}
-      {...ColoringUtils.dataColoringMode('interactive')}
+      {...ColoringUtils.build({
+        color: isActive ? 'primary' : 'neutral',
+        mode: 'interactive',
+        bordered: true,
+      })}
       className={clsx('chat-quick-reply-chip', props.className)}
       data-active={PropsUtil.dataAttributes.bool(isActive)}
     >
diff --git a/packages/hightide-web/src/components/chat/ChatSystemLine.tsx b/packages/hightide-web/src/components/chat/ChatSystemLine.tsx
index a31f7189..5ffd8629 100644
--- a/packages/hightide-web/src/components/chat/ChatSystemLine.tsx
+++ b/packages/hightide-web/src/components/chat/ChatSystemLine.tsx
@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import { CheckCheck } from 'lucide-react'
 import { Icon } from '../display-and-visualization/Icon'
 import type { ChipColor } from '../display-and-visualization/Chip'
+import { ColoringUtils } from '../../utils/coloring'
 
 export type ChatSystemLineProps = HTMLAttributes<HTMLDivElement> & {
   icon?: ElementType,
@@ -18,8 +19,10 @@ export const ChatSystemLine = ({
   return (
     <div
       {...props}
+      {...ColoringUtils.build({
+        color: color ?? 'primary',
+      })}
       className={clsx('chat-system-line', props.className)}
-      data-color={color ?? undefined}
     >
       <Icon icon={icon} size="xs" className="chat-system-line-icon" />
       {children}
diff --git a/packages/hightide-web/src/components/display-and-visualization/Chip.tsx b/packages/hightide-web/src/components/display-and-visualization/Chip.tsx
index e4b79cc3..87f37b1e 100644
--- a/packages/hightide-web/src/components/display-and-visualization/Chip.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/Chip.tsx
@@ -1,21 +1,24 @@
 import clsx from 'clsx'
 import type { HTMLAttributes } from 'react'
-import { ButtonUtil } from '../user-interaction/Button'
+import type { ColoringColor, ColoringColorVariant, ColoringStyle } from '../../utils/coloring'
+import { ColoringUtils } from '../../utils/coloring'
 
 type ChipSize = 'xs' | 'sm' | 'md' | 'lg' | null
 
-type ChipColoringStyle = 'solid' | 'tonal' | 'outline' | 'tonal-outline' | null
-
-const chipColors = ButtonUtil.colors
-export type ChipColor = typeof chipColors[number]
+export type ChipColor = ColoringColor
 
 export const ChipUtil = {
-  colors: chipColors,
+  colors: ColoringUtils.colors,
+  colorVariants: ColoringUtils.colorVariants,
+  styles: ColoringUtils.styles,
 }
 
 export type ChipProps = HTMLAttributes<HTMLDivElement> & {
   color?: ChipColor,
-  coloringStyle?: ChipColoringStyle,
+  colorVariant?: ColoringColorVariant,
+  coloringStyle?: ColoringStyle,
+  bordered?: boolean,
+  elevated?: boolean,
   size?: ChipSize,
 }
 
@@ -25,7 +28,10 @@ export type ChipProps = HTMLAttributes<HTMLDivElement> & {
 export const Chip = ({
   children,
   color = 'neutral',
-  coloringStyle = 'solid',
+  colorVariant = 'tonal',
+  coloringStyle = 'filled',
+  bordered = false,
+  elevated = false,
   size = 'md',
   ...props
 }: ChipProps) => {
@@ -33,9 +39,16 @@ export const Chip = ({
     <div
       {...props}
       className={clsx('chip', props.className)}
-      data-color={color ?? undefined}
-      data-coloringstyle={coloringStyle ?? undefined}
-      data-size={size ?? undefined}>
+      data-size={size ?? undefined}
+      {...ColoringUtils.build({
+        color,
+        mode: 'static',
+        colorVariant,
+        coloringStyle,
+        bordered,
+        elevated,
+      })}
+    >
       {children}
     </div>
   )
diff --git a/packages/hightide-web/src/style/theme/colors/basic.css b/packages/hightide-web/src/style/theme/colors/basic.css
index 3a2eee4f..c229ffdd 100644
--- a/packages/hightide-web/src/style/theme/colors/basic.css
+++ b/packages/hightide-web/src/style/theme/colors/basic.css
@@ -6,73 +6,131 @@
 @theme {
   /* Basic */
   --color-white: #ffffff;
+  --color-white: oklch(1.000 0 0);
   --color-black: #000000;
-  --color-gray-25: #f8f8f8;
-  --color-gray-50: #f2f2f2;
-  --color-gray-75: #eeeeee;
-  --color-gray-100: #e6e6e6;
-  --color-gray-150: #d8d8d8;
-  --color-gray-200: #cccccc;
-  --color-gray-250: #c0c0c0;
-  --color-gray-300: #b3b3b3;
-  --color-gray-400: #999999;
-  --color-gray-500: #888888;
-  --color-gray-550: #777777;
-  --color-gray-600: #666666;
-  --color-gray-650: #555555;
-  --color-gray-700: #4d4d4d;
-  --color-gray-750: #3f3f3f;
-  --color-gray-800: #333333;
-  --color-gray-850: #222222;
-  --color-gray-900: #1a1a1a;
-  --color-gray-950: #0d0d0d;
+  --color-black: oklch(0.000 0 0);
+  --color-gray-25: #f7f7f7;
+  --color-gray-25: oklch(0.975 0 0);
+  --color-gray-50: #eeeeee;
+  --color-gray-50: oklch(0.950 0 0);
+  --color-gray-75: #e6e6e6;
+  --color-gray-75: oklch(0.925 0 0);
+  --color-gray-100: #dedede;
+  --color-gray-100: oklch(0.900 0 0);
+  --color-gray-150: #cecece;
+  --color-gray-150: oklch(0.850 0 0);
+  --color-gray-200: #bebebe;
+  --color-gray-200: oklch(0.800 0 0);
+  --color-gray-250: #cecece;
+  --color-gray-250: oklch(0.850 0 0);
+  --color-gray-300: #9e9e9e;
+  --color-gray-300: oklch(0.700 0 0);
+  --color-gray-400: #808080;
+  --color-gray-400: oklch(0.600 0 0);
+  --color-gray-500: #636363;
+  --color-gray-500: oklch(0.500 0 0);
+  --color-gray-550: #555555;
+  --color-gray-550: oklch(0.450 0 0);
+  --color-gray-600: #484848;
+  --color-gray-600: oklch(0.400 0 0);
+  --color-gray-650: #3a3a3a;
+  --color-gray-650: oklch(0.350 0 0);
+  --color-gray-700: #2e2e2e;
+  --color-gray-700: oklch(0.300 0 0);
+  --color-gray-750: #222222;
+  --color-gray-750: oklch(0.250 0 0);
+  --color-gray-800: #161616;
+  --color-gray-800: oklch(0.200 0 0);
+  --color-gray-850: #0b0b0b;
+  --color-gray-850: oklch(0.150 0 0);
+  --color-gray-900: #030303;
+  --color-gray-900: oklch(0.100 0 0);
+  --color-gray-950: #000000;
+  --color-gray-950: oklch(0.050 0 0);
 
   /* Green */
   --color-green-100: #d1efd8;
+  --color-green-100: oklch(0.924 0.044 152.4);
   --color-green-500: #69cb81;
+  --color-green-500: oklch(0.764 0.141 149.9);
   --color-green-600: #61bf78;
+  --color-green-600: oklch(0.729 0.137 149.8);
   --color-green-700: #53a567;
+  --color-green-700: oklch(0.654 0.122 149.8);
   --color-green-900: #2c5536;
+  --color-green-900: oklch(0.410 0.070 150.3);
 
   /* Orange */
   --color-orange-100: #fbecd9;
+  --color-orange-100: oklch(0.950 0.030 73.9);
   --color-orange-200: #f7d8b3;
+  --color-orange-200: oklch(0.899 0.060 71.9);
   --color-orange-500: #ea9e40;
+  --color-orange-500: oklch(0.758 0.140 68.2);
   --color-orange-600: #c18133;
+  --color-orange-600: oklch(0.655 0.121 67.8);
   --color-orange-900: #4a2f1a;
+  --color-orange-900: oklch(0.333 0.052 57.7);
 
   /* Purple */
   --color-purple-50: #efe6fd;
+  --color-purple-50: oklch(0.939 0.032 303.5);
   --color-purple-100: #ceb0fa;
+  --color-purple-100: oklch(0.809 0.107 302.7);
   --color-purple-200: #b892f3;
+  --color-purple-200: oklch(0.733 0.141 301.0);
   --color-purple-300: #9b7cdd;
+  --color-purple-300: oklch(0.656 0.143 297.0);
   --color-purple-400: #8470c5;
+  --color-purple-400: oklch(0.601 0.127 293.0);
   --color-purple-500: #694bb4;
+  --color-purple-500: oklch(0.500 0.160 292.9);
   --color-purple-600: #56389b;
+  --color-purple-600: oklch(0.431 0.154 292.8);
   --color-purple-700: #462c83;
+  --color-purple-700: oklch(0.376 0.139 292.2);
   --color-purple-800: #362165;
+  --color-purple-800: oklch(0.316 0.114 293.0);
   --color-purple-900: #27144a;
+  --color-purple-900: oklch(0.253 0.095 294.8);
   --color-purple-950: #1b0d33;
+  --color-purple-950: oklch(0.204 0.072 296.5);
 
   /* Blue */
   --color-blue-50: #f6faff;
+  --color-blue-50: oklch(0.984 0.008 253.9);
   --color-blue-100: #d6e3f9;
+  --color-blue-100: oklch(0.913 0.033 261.0);
   --color-blue-200: #99b9ef;
+  --color-blue-200: oklch(0.782 0.085 260.7);
   --color-blue-500: #3272df;
+  --color-blue-500: oklch(0.571 0.179 260.4);
   --color-blue-600: #285bb2;
+  --color-blue-600: oklch(0.486 0.149 260.4);
   --color-blue-800: #1a4080;
+  --color-blue-800: oklch(0.383 0.117 260.2);
   --color-blue-900: #11243e;
+  --color-blue-900: oklch(0.259 0.055 256.7);
 
   /* Red */
   --color-red-50: #fff9f9;
+  --color-red-50: oklch(0.987 0.006 17.3);
   --color-red-100: #fbe0e2;
+  --color-red-100: oklch(0.929 0.030 12.6);
   --color-red-200: #f7c2c5;
+  --color-red-200: oklch(0.862 0.061 14.6);
   --color-red-300: #f4a3a7;
+  --color-red-300: oklch(0.796 0.096 16.2);
   --color-red-400: #e3798a;
+  --color-red-400: oklch(0.699 0.132 10.9);
   --color-red-500: #dc576d;
+  --color-red-500: oklch(0.635 0.167 13.2);
   --color-red-600: #d53550;
+  --color-red-600: oklch(0.581 0.195 16.7);
   --color-red-700: #bb273f;
+  --color-red-700: oklch(0.521 0.182 18.1);
   --color-red-900: #5c252e;
+  --color-red-900: oklch(0.346 0.081 12.2);
 }
 
 /* non light-theme overrides */
diff --git a/packages/hightide-web/src/style/theme/colors/component.css b/packages/hightide-web/src/style/theme/colors/component.css
index 2096c8ce..72f57200 100644
--- a/packages/hightide-web/src/style/theme/colors/component.css
+++ b/packages/hightide-web/src/style/theme/colors/component.css
@@ -21,6 +21,7 @@
   --color-overlay-background: var(--color-surface);
   --color-overlay-text: var(--color-on-surface);
   --color-overlay-shadow: #00000039;
+  --color-overlay-shadow: oklch(0.000 0 0 / 0.25);
 
   /* ProgressIndicator */
   --color-progress-indicator-fill: var(--color-primary);
@@ -32,13 +33,14 @@
   --color-process-model-edge-label-text-strong: var(--color-primary);
   --color-process-model-edge-label-text-muted: var(--color-purple-300);
   --color-process-model-terminal-fill: var(--color-primary);
-  --color-process-model-terminal-fill-active: color-mix(in srgb, var(--color-on-primary) var(--coloring-state-press), var(--color-primary));
+  --color-process-model-terminal-fill-active: color-mix(in oklch, var(--color-on-primary) var(--coloring-state-press), var(--color-primary));
   --color-process-model-terminal-fill-visited: var(--color-purple-400);
   --color-process-model-activity-icon-bg: var(--color-purple-100);
   --color-process-model-node-active-ring: var(--color-purple-100);
   --color-process-model-node-active-bg: var(--color-purple-50);
   --color-process-model-node-visited-border: var(--color-purple-200);
   --color-process-model-node-visited-bg: #fdf9ff;
+  --color-process-model-node-visited-bg: oklch(0.987 0.009 314.8);
 
   /* Property */
   --color-property-title-background: var(--color-gray-100);
@@ -46,6 +48,7 @@
 
   /* Scrollbar */
   --color-scrollbar-track: #00000033;
+  --color-scrollbar-track: oklch(0.000 0 0 / 0.2);
   --color-scrollbar-thumb: var(--color-gray-600);
 
   /* Stepper Bar */
@@ -100,9 +103,11 @@
 
     /* Overlay, Dialog, Modal */
     --color-overlay-shadow: #00000060;
+    --color-overlay-shadow: oklch(0.000 0 0 / 0.4);
 
     /* Scrollbar */
     --color-scrollbar-track: #ffffff33;
+    --color-scrollbar-track: oklch(1.000 0 0 / 0.2);
     --color-scrollbar-thumb: var(--color-gray-300);
 
     /* Switch */
diff --git a/packages/hightide-web/src/style/theme/colors/semantic.css b/packages/hightide-web/src/style/theme/colors/semantic.css
index 56a217f1..4aacacc7 100644
--- a/packages/hightide-web/src/style/theme/colors/semantic.css
+++ b/packages/hightide-web/src/style/theme/colors/semantic.css
@@ -34,7 +34,6 @@
   --color-text-secondary: var(--color-gray-600);
   --color-text-tertiary: var(--color-gray-300);
   --color-placeholder: var(--color-gray-500);
-  --color-description: var(--color-gray-600);
   --color-label: var(--color-gray-700);
 
   /* Other */
@@ -60,7 +59,7 @@
   /* dark theme */
   @variant dark {
     /* Background */
-    --color-background: var(--color-gray-850);
+    --color-background: var(--color-gray-800);
     --color-on-background: var(--color-text-primary);
 
     /* States */
@@ -72,8 +71,8 @@
     --color-on-disabled: var(--color-gray-300);
 
     /* Surface */
-    --color-surface: var(--color-gray-800);
-    --color-surface-variant: var(--color-gray-900);
+    --color-surface: var(--color-gray-700);
+    --color-surface-variant: var(--color-gray-750);
     --color-surface-warning: var(--color-orange-900);
 
     /* Text */
@@ -81,11 +80,10 @@
     --color-text-secondary: var(--color-gray-400);
     --color-text-tertiary: var(--color-gray-600);
     --color-placeholder: var(--color-gray-500);
-    --color-description: var(--color-gray-400);
     --color-label: var(--color-gray-300);
 
     /* Other */
-    --color-primary: var(--color-purple-400);
+    --color-primary: var(--color-purple-500);
 
     --color-neutral: var(--color-gray-750);
     --color-on-neutral: var(--color-white);
diff --git a/packages/hightide-web/src/style/theme/colors/utilities.css b/packages/hightide-web/src/style/theme/colors/utilities.css
index f73d62f6..07fa96bb 100644
--- a/packages/hightide-web/src/style/theme/colors/utilities.css
+++ b/packages/hightide-web/src/style/theme/colors/utilities.css
@@ -50,6 +50,11 @@
   --coloring-on-color: var(--color-on-disabled);
 }
 
+@utility text-description {
+  --color-description: color-mix(in oklch, var(--coloring-foreground, var(--color-on-surface)) var(--appearance-subtle), var(--coloring-color, var(--color-surface)));
+  color: var(--color-description);
+}
+
 @utility description {
   @apply coloring-reset-variables;
   --coloring-color: var(--color-description);
diff --git a/packages/hightide-web/src/style/theme/components/avatar.css b/packages/hightide-web/src/style/theme/components/avatar.css
index ab39889e..c5c0cde0 100644
--- a/packages/hightide-web/src/style/theme/components/avatar.css
+++ b/packages/hightide-web/src/style/theme/components/avatar.css
@@ -5,16 +5,16 @@
       @apply absolute shadow-side shadow-r-4 shadow-hard;
     }
     &[data-size="xs"] {
-      @apply size-6 p-0.5 text-xs font-semibold;
+      @apply size-6 min-w-6 max-w-6 p-0.5 text-xs font-semibold;
     }
     &[data-size="sm"] {
-      @apply size-8 p-1 text-xs font-semibold;
+      @apply size-8 min-w-8 max-w-8 p-1 text-xs font-semibold;
     }
     &[data-size="md"] {
-      @apply size-10 p-1.5 text-lg font-semibold;
+      @apply size-10 min-w-10 max-w-10 p-1.5 text-lg font-semibold;
     }
     &[data-size="lg"] {
-      @apply size-12 p-2 text-2xl font-bold;
+      @apply size-12 min-w-12 max-w-12 p-2 text-2xl font-bold;
     }
 
     &[data-loading-state="loading"] {
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css b/packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css
index de85a4b6..e2d06b7a 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css
@@ -12,7 +12,7 @@
   }
 
   .chat-attachment-message-file-icon {
-    @apply flex-row-0 items-center justify-center size-9 shrink-0 rounded-md bg-negative/20 text-negative;
+    @apply flex-row-0 items-center justify-center size-9 shrink-0 rounded-md;
   }
 
   .chat-attachment-message-info {
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-message-bubble.css b/packages/hightide-web/src/style/theme/components/chat/chat-message-bubble.css
index 8e4b52d2..a54ce314 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-message-bubble.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-message-bubble.css
@@ -1,13 +1,13 @@
 @layer components {
   .chat-message-bubble-container {
-    @apply flex-col-1 max-w-70 px-3.75 pt-2.75 pb-2 rounded-xl gap-2;
+    @apply flex-col-1 max-w-128 px-3.75 pt-2.75 pb-2 rounded-xl gap-2;
 
     &[data-direction="incoming"] {
-      @apply self-start rounded-bl-sm bg-neutral text-on-neutral;
+      @apply self-start rounded-bl-sm mr-12;
     }
 
     &[data-direction="outgoing"] {
-      @apply self-end rounded-br-sm bg-primary text-on-primary;
+      @apply self-end rounded-br-sm ml-12;
     }
   }
 
@@ -28,15 +28,11 @@
   }
 
   .chat-message-bubble-metadata-text {
-    @apply text-xs font-medium opacity-75;
+    @apply text-xs text-description;
   }
 
   .chat-message-bubble-metadata-icon {
-    @apply size-4 opacity-75;
-
-    &[data-status="read"] {
-      @apply opacity-100;
-    }
+    @apply size-4 text-description;
   }
 
   .chat-message-bubble-container[data-direction="incoming"] .chat-message-bubble-metadata-icon[data-status="read"] {
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css b/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css
index f1980ff8..fab777d7 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-quick-reply-chip.css
@@ -1,11 +1,5 @@
 @layer components {
   .chat-quick-reply-chip {
-    @apply flex-row-0 gap-x-1.5 items-center w-fit px-3.5 py-1.5 rounded-full border text-sm font-medium cursor-pointer;
-    @apply border-divider text-description bg-surface;
-    --coloring-on-base: var(--color-on-surface);
-
-    &[data-active] {
-      @apply border-primary text-primary;
-    }
+    @apply flex-row-0 gap-x-1.5 items-center w-fit px-3.5 py-1.5 rounded-full text-sm font-medium cursor-pointer;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-system-line.css b/packages/hightide-web/src/style/theme/components/chat/chat-system-line.css
index 9e0c8676..5267d8e3 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-system-line.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-system-line.css
@@ -1,6 +1,6 @@
 @layer components {
   .chat-system-line {
-    @apply flex-row-0 gap-x-1.5 self-center items-center justify-center text-xs font-medium coloring-color-detect coloring-text;
+    @apply flex-row-0 gap-x-1.5 self-center items-center justify-center text-xs font-medium rounded-full px-3 py-1;
   }
 
   .chat-system-line-icon {
diff --git a/packages/hightide-web/src/style/theme/components/chip.css b/packages/hightide-web/src/style/theme/components/chip.css
index 8bce4312..1a6de15e 100644
--- a/packages/hightide-web/src/style/theme/components/chip.css
+++ b/packages/hightide-web/src/style/theme/components/chip.css
@@ -1,6 +1,6 @@
 @layer components {
   .chip {
-    @apply flex flex-row items-center justify-center w-fit font-semibold coloring-color-detect coloring-style-detect;
+    @apply flex flex-row items-center justify-center w-fit font-semibold;
 
     &[data-size="xs"] {
       @apply gap-x-1 px-1 py-0.75 rounded-1 h-6 text-sm;
diff --git a/packages/hightide-web/src/style/theme/components/input-elements.css b/packages/hightide-web/src/style/theme/components/input-elements.css
index 59432cb5..bee33651 100644
--- a/packages/hightide-web/src/style/theme/components/input-elements.css
+++ b/packages/hightide-web/src/style/theme/components/input-elements.css
@@ -47,19 +47,19 @@
   }
 
   &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly]):not([data-invalid]):hover {
-    background-color: color-mix(in srgb, var(--color-on-surface) var(--coloring-state-hover), var(--color-input-background));
+    background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), var(--color-input-background));
   }
 
   &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly]):not([data-invalid]):active {
-    background-color: color-mix(in srgb, var(--color-on-surface) var(--coloring-state-press), var(--color-input-background));
+    background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-press), var(--color-input-background));
   }
 
   &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly])[data-invalid]:hover {
-    background-color: color-mix(in srgb, var(--color-negative) var(--coloring-state-hover), color-mix(in srgb, var(--color-negative) 20%, transparent));
+    background-color: color-mix(in oklch, var(--color-negative) var(--coloring-state-hover), color-mix(in oklch, var(--color-negative) 20%, transparent));
   }
 
   &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly])[data-invalid]:active {
-    background-color: color-mix(in srgb, var(--color-negative) var(--coloring-state-press), color-mix(in srgb, var(--color-negative) 20%, transparent));
+    background-color: color-mix(in oklch, var(--color-negative) var(--coloring-state-press), color-mix(in oklch, var(--color-negative) 20%, transparent));
   }
 }
 
diff --git a/packages/hightide-web/src/style/theme/components/property.css b/packages/hightide-web/src/style/theme/components/property.css
index 9b2cf06d..a952db0d 100644
--- a/packages/hightide-web/src/style/theme/components/property.css
+++ b/packages/hightide-web/src/style/theme/components/property.css
@@ -45,7 +45,7 @@
 
     &[data-invalid] {
       @apply bg-warning text-on-warning;
-      border-color: color-mix(in srgb, var(--color-on-warning) var(--coloring-state-press), var(--color-warning));
+      border-color: color-mix(in oklch, var(--color-on-warning) var(--coloring-state-press), var(--color-warning));
     }
   }
 
diff --git a/packages/hightide-web/src/style/theme/components/table.css b/packages/hightide-web/src/style/theme/components/table.css
index 7f30768f..ace153b8 100644
--- a/packages/hightide-web/src/style/theme/components/table.css
+++ b/packages/hightide-web/src/style/theme/components/table.css
@@ -59,7 +59,7 @@
 
   .table-body-row {
     &[data-coloring-mode="interactive"]:hover {
-      background-color: color-mix(in srgb, var(--color-on-surface) var(--coloring-state-hover), transparent);
+      background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), transparent);
     }
     &[data-clickable] {
       @apply hover:cursor-pointer;
@@ -72,7 +72,7 @@
       @apply hover:cursor-pointer;
 
       &[data-coloring-mode="interactive"]:hover {
-        background-color: color-mix(in srgb, var(--color-on-surface) var(--coloring-state-hover), transparent);
+        background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), transparent);
       }
     }
   }
diff --git a/packages/hightide-web/src/style/theme/variables.css b/packages/hightide-web/src/style/theme/variables.css
index eb3f7886..58aa3197 100644
--- a/packages/hightide-web/src/style/theme/variables.css
+++ b/packages/hightide-web/src/style/theme/variables.css
@@ -14,12 +14,18 @@
   --coloring-transparent-alpha: 30%;
   --coloring-state-hover: 8%;
   --coloring-state-press: 16%;
+  --appearance-subtle: 70%;
 
   --icon-size-xs: 16px;
   --icon-size-sm: 20px;
   --icon-size-md: 24px;
   --icon-size-lg: 32px;
   --icon-size-xl: 48px;
+
+  @variant dark {
+    --coloring-tonal-lightness: 0.3;
+    --coloring-tonal-on-lightness: 0.95;
+  }
 }
 
 @theme {
diff --git a/packages/hightide-web/src/style/utitlity/coloring.css b/packages/hightide-web/src/style/utitlity/coloring.css
index 60a5fb1a..1d34107c 100644
--- a/packages/hightide-web/src/style/utitlity/coloring.css
+++ b/packages/hightide-web/src/style/utitlity/coloring.css
@@ -1,37 +1,37 @@
 @property --coloring-base {
   syntax: "<color>";
   inherits: true;
-  initial-value: transparent;
+  initial-value: initial;
 }
 
 @property --coloring-on-base {
   syntax: "<color>";
   inherits: true;
-  initial-value: transparent;
+  initial-value: initial;
 }
 
 @property --coloring-color {
   syntax: "<color>";
   inherits: true;
-  initial-value: transparent;
+  initial-value: initial;
 }
 
 @property --coloring-on-color {
   syntax: "<color>";
   inherits: true;
-  initial-value: transparent;
+  initial-value: initial;
 }
 
 @property --coloring-accent {
   syntax: "<color>";
   inherits: true;
-  initial-value: transparent;
+  initial-value: initial;
 }
 
 @property --coloring-foreground {
   syntax: "<color>";
   inherits: true;
-  initial-value: transparent;
+  initial-value: initial;
 }
 
 :root {
@@ -146,7 +146,7 @@
   }
 
   &[data-color-variant="tonal"] {
-    --coloring-color: color-mix(in srgb, var(--coloring-base) 20%, transparent);
+    --coloring-color: color-mix(in oklch, var(--coloring-base) 20%, transparent);
     --coloring-on-color: var(--coloring-base);
 
     @supports (color: oklch(from red 0.5 c h)) {
@@ -156,7 +156,7 @@
   }
 
   &[data-color-variant="transparent"] {
-    --coloring-color: color-mix(in srgb, var(--coloring-base) var(--coloring-transparent-alpha), transparent);
+    --coloring-color: color-mix(in oklch, var(--coloring-base) var(--coloring-transparent-alpha), transparent);
     --coloring-on-color: var(--coloring-base);
   }
 
diff --git a/packages/hightide-web/src/style/utitlity/focus.css b/packages/hightide-web/src/style/utitlity/focus.css
index 19eb0a6d..b9c53330 100644
--- a/packages/hightide-web/src/style/utitlity/focus.css
+++ b/packages/hightide-web/src/style/utitlity/focus.css
@@ -17,12 +17,12 @@
 
 @utility focus-style-shadow {
   --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8)
-    color-mix(in srgb, var(--color-focus) 35%, transparent);
+    color-mix(in oklch, var(--color-focus) 35%, transparent);
 
   @variant dark {
     --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5)
       calc(var(--spacing) * 0.8)
-      color-mix(in srgb, var(--color-focus) 60%, transparent);
+      color-mix(in oklch, var(--color-focus) 60%, transparent);
   }
 }
 
diff --git a/packages/hightide-web/stories/Chat/ChatAttachmentMessageBubble.stories.tsx b/packages/hightide-web/stories/Chat/ChatAttachmentMessageBubble.stories.tsx
index dd20a573..b264bc42 100644
--- a/packages/hightide-web/stories/Chat/ChatAttachmentMessageBubble.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatAttachmentMessageBubble.stories.tsx
@@ -19,7 +19,7 @@ export const chatAttachmentMessageBubble: Story = {
     onDownload: action('download'),
   },
   render: (args) => (
-    <div className="flex-col-3 w-96 p-4">
+    <div className="flex-col-4">
       <ChatAttachmentMessageBubble {...args} />
       <ChatAttachmentMessageBubble
         name="EKG_Bericht.pdf"
diff --git a/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx b/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
index dfae6b35..45e9bb80 100644
--- a/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
@@ -268,7 +268,7 @@ export const chatDemo: Story = {
                       <span className="text-sm font-space font-bold">Rezept-Anfrage</span>
                       <span className="text-xs text-description">Folgeverordnung</span>
                     </span>
-                    <Chip size="xs" color="primary" coloringStyle="tonal">NEU</Chip>
+                    <Chip size="xs" color="primary" colorVariant="tonal">NEU</Chip>
                   </div>
                   <div className="flex-col-1 py-3">
                     <span className="typography-title-md">Ramipril 5mg</span>
@@ -293,7 +293,7 @@ export const chatDemo: Story = {
                       <span className="text-sm font-space font-bold">Terminvorschlag</span>
                       <span className="text-xs text-description">Besprechung Blutwerte · 30 Min</span>
                     </span>
-                    <Chip size="xs" color="warning" coloringStyle="tonal">AUSSTEHEND</Chip>
+                    <Chip size="xs" color="warning" colorVariant="tonal">AUSSTEHEND</Chip>
                   </div>
                   <div className="flex-col-1 pt-3">
                     <span className="typography-title-md">Mi. 8. Juli 2026</span>
diff --git a/packages/hightide-web/stories/Chat/ChatMessageBubble.stories.tsx b/packages/hightide-web/stories/Chat/ChatMessageBubble.stories.tsx
index 40cd475f..f9e263d4 100644
--- a/packages/hightide-web/stories/Chat/ChatMessageBubble.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatMessageBubble.stories.tsx
@@ -30,7 +30,7 @@ export const chatMessageBubble: Story = {
     children: 'Perfekt, ich habe den Befund erhalten. Bis Mittwoch!',
   },
   render: (args) => (
-    <div className="flex-col-3 w-96 p-4 rounded-lg bg-background">
+    <div className="flex-col-4">
       <ChatMessageBubble direction="incoming" timestamp={new Date(2026, 7, 24, 9, 12)}>
         Guten Tag Herr Wellermann, wir haben die Ergebnisse Ihrer Blutuntersuchung erhalten.
       </ChatMessageBubble>
diff --git a/packages/hightide-web/stories/Chat/ChatMessageCard.stories.tsx b/packages/hightide-web/stories/Chat/ChatMessageCard.stories.tsx
index d2c67de6..a3619e60 100644
--- a/packages/hightide-web/stories/Chat/ChatMessageCard.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatMessageCard.stories.tsx
@@ -6,6 +6,7 @@ import { Chip } from '../../src/components/display-and-visualization/Chip'
 import { Icon } from '../../src/components/display-and-visualization/Icon'
 import { Button } from '../../src/components/user-interaction/Button'
 import { ColoringUtils, type ColoringColor } from '../../src/utils/coloring'
+import clsx from 'clsx'
 
 const meta = {
   component: ChatMessageBubble,
@@ -34,7 +35,7 @@ const MessageCardStory = ({
   color = 'primary',
   ...bubbleProps
 }: MessageCardStoryProps) => (
-  <ChatMessageBubble {...bubbleProps}>
+  <ChatMessageBubble {...bubbleProps} className={clsx(bubbleProps?.className, 'max-w-96')}>
     <div className="flex-col-0 w-full min-w-64">
       <div className="flex-row-0 gap-x-2.5 items-center pb-3 border-b border-divider">
         <span
@@ -71,27 +72,25 @@ export const appointmentProposal: Story = {
     timestamp: new Date(2026, 6, 8, 15, 0),
   },
   render: (args) => (
-    <div className="w-96 p-4">
-      <MessageCardStory
-        {...args}
-        icon={CalendarDays}
-        title="Terminvorschlag"
-        subtitle="Besprechung Blutwerte · 30 Min"
-        badge={<Chip size="xs" color="warning" coloringStyle="tonal">AUSSTEHEND</Chip>}
-        body={(
-          <>
-            <span className="typography-title-md">Mi. 8. Juli 2026</span>
-            <span className="text-sm text-description">15:00 – 15:30 Uhr · Sprechzimmer 2</span>
-          </>
-        )}
-        actions={(
-          <>
-            <Button size="sm" color="primary" className="rounded-full">Zusagen</Button>
-            <Button size="sm" color="neutral" className="rounded-full">Ablehnen</Button>
-          </>
-        )}
-      />
-    </div>
+    <MessageCardStory
+      {...args}
+      icon={CalendarDays}
+      title="Terminvorschlag"
+      subtitle="Besprechung Blutwerte · 30 Min"
+      badge={<Chip size="xs" color="warning" colorVariant="tonal">AUSSTEHEND</Chip>}
+      body={(
+        <>
+          <span className="typography-title-md">Mi. 8. Juli 2026</span>
+          <span className="text-sm text-description">15:00 – 15:30 Uhr · Sprechzimmer 2</span>
+        </>
+      )}
+      actions={(
+        <>
+          <Button size="sm" color="primary" className="rounded-full">Zusagen</Button>
+          <Button size="sm" color="neutral" className="rounded-full">Ablehnen</Button>
+        </>
+      )}
+    />
   ),
 }
 
@@ -101,27 +100,25 @@ export const prescriptionRequest: Story = {
     timestamp: new Date(2026, 6, 8, 14, 12),
   },
   render: (args) => (
-    <div className="w-96 p-4">
-      <MessageCardStory
-        {...args}
-        icon={Pill}
-        title="Rezept-Anfrage"
-        subtitle="Folgeverordnung"
-        badge={<Chip size="xs" color="primary" coloringStyle="tonal">NEU</Chip>}
-        body={(
-          <>
-            <span className="typography-title-md">Ramipril 5mg</span>
-            <span className="text-sm text-description">N2 · 50 Stück · zuletzt 12.05.2026</span>
-          </>
-        )}
-        actions={(
-          <>
-            <Button size="sm" color="primary" className="rounded-full">Ausstellen</Button>
-            <Button size="sm" color="neutral" className="rounded-full">Ablehnen</Button>
-          </>
-        )}
-      />
-    </div>
+    <MessageCardStory
+      {...args}
+      icon={Pill}
+      title="Rezept-Anfrage"
+      subtitle="Folgeverordnung"
+      badge={<Chip size="xs" color="primary" colorVariant="tonal">NEU</Chip>}
+      body={(
+        <>
+          <span className="typography-title-md">Ramipril 5mg</span>
+          <span className="text-sm text-description">N2 · 50 Stück · zuletzt 12.05.2026</span>
+        </>
+      )}
+      actions={(
+        <>
+          <Button size="sm" color="primary" className="rounded-full">Ausstellen</Button>
+          <Button size="sm" color="neutral" className="rounded-full">Ablehnen</Button>
+        </>
+      )}
+    />
   ),
 }
 
@@ -132,21 +129,19 @@ export const referral: Story = {
     status: 'sent',
   },
   render: (args) => (
-    <div className="w-96 p-4">
-      <MessageCardStory
-        {...args}
-        icon={Send}
-        title="Überweisung"
-        subtitle="Kardiologie"
-        color="secondary"
-        badge={<Chip size="xs" color="secondary" coloringStyle="tonal">GESENDET</Chip>}
-        body={(
-          <>
-            <span className="typography-title-md">Dr. med. K. Brandt</span>
-            <span className="text-sm text-description">Kardiologische Praxis am Markt</span>
-          </>
-        )}
-      />
-    </div>
+    <MessageCardStory
+      {...args}
+      icon={Send}
+      title="Überweisung"
+      subtitle="Kardiologie"
+      color="secondary"
+      badge={<Chip size="xs" color="secondary" colorVariant="tonal">GESENDET</Chip>}
+      body={(
+        <>
+          <span className="typography-title-md">Dr. med. K. Brandt</span>
+          <span className="text-sm text-description">Kardiologische Praxis am Markt</span>
+        </>
+      )}
+    />
   ),
 }
diff --git a/packages/hightide-web/stories/Chat/ChatMessageList.stories.tsx b/packages/hightide-web/stories/Chat/ChatMessageList.stories.tsx
index f4957cbb..d241b44c 100644
--- a/packages/hightide-web/stories/Chat/ChatMessageList.stories.tsx
+++ b/packages/hightide-web/stories/Chat/ChatMessageList.stories.tsx
@@ -22,53 +22,51 @@ export const chatMessageList: Story = {
     autoScroll: true,
   },
   render: (args) => (
-    <div className="h-150 w-120 max-w-full overflow-hidden">
-      <ChatMessageList {...args}>
-        <ChatDateDivider>Heute · 09:10</ChatDateDivider>
-        <ChatMessageBubble direction="incoming" timestamp={new Date(2026, 6, 8, 9, 12)}>
+    <ChatMessageList {...args}>
+      <ChatDateDivider>Heute · 09:10</ChatDateDivider>
+      <ChatMessageBubble direction="incoming" timestamp={new Date(2026, 6, 8, 9, 12)}>
           Guten Tag Herr Wellermann, wir haben die Ergebnisse Ihrer Blutuntersuchung erhalten und würden die Werte gerne mit Ihnen besprechen.
-        </ChatMessageBubble>
-        <ChatMessageBubble direction="incoming" timestamp={new Date(2026, 6, 8, 9, 13)}>
-          <div className="flex-col-0 w-full min-w-56">
-            <div className="flex-row-0 gap-x-2.5 items-center pb-3 border-b border-divider">
-              <span
-                className="flex-row-0 items-center justify-center size-9 shrink-0 rounded-md"
-                {...ColoringUtils.build({ color: 'primary', colorVariant: 'tonal' })}
-              >
-                <Icon icon={CalendarDays} size="sm" />
-              </span>
-              <span className="flex-col-0 gap-y-0.5 grow min-w-0">
-                <span className="text-sm font-space font-bold">Terminvorschlag</span>
-                <span className="text-xs text-description">Besprechung Blutwerte · 30 Min</span>
-              </span>
-              <Chip size="xs" color="warning" coloringStyle="tonal">AUSSTEHEND</Chip>
-            </div>
-            <div className="flex-col-1 py-3">
-              <span className="typography-title-md">Mi. 8. Juli 2026</span>
-              <span className="text-sm text-description">15:00 – 15:30 Uhr · Sprechzimmer 2</span>
-            </div>
-            <div className="flex-row-0 gap-x-2.5 [&>*]:flex-1 [&>.button]:min-w-0">
-              <Button size="sm" color="primary" className="rounded-full">Zusagen</Button>
-              <Button size="sm" color="neutral" className="rounded-full">Ablehnen</Button>
-            </div>
+      </ChatMessageBubble>
+      <ChatMessageBubble direction="incoming" timestamp={new Date(2026, 6, 8, 9, 13)}>
+        <div className="flex-col-0 w-full min-w-56">
+          <div className="flex-row-0 gap-x-2.5 items-center pb-3 border-b border-divider">
+            <span
+              className="flex-row-0 items-center justify-center size-9 shrink-0 rounded-md"
+              {...ColoringUtils.build({ color: 'primary', colorVariant: 'tonal' })}
+            >
+              <Icon icon={CalendarDays} size="sm" />
+            </span>
+            <span className="flex-col-0 gap-y-0.5 grow min-w-0">
+              <span className="text-sm font-space font-bold">Terminvorschlag</span>
+              <span className="text-xs text-description">Besprechung Blutwerte · 30 Min</span>
+            </span>
+            <Chip size="xs" color="warning" colorVariant="tonal">AUSSTEHEND</Chip>
           </div>
-        </ChatMessageBubble>
-        <ChatMessageBubble direction="outgoing" timestamp={new Date(2026, 6, 8, 9, 20)} status="sent">
+          <div className="flex-col-1 py-3">
+            <span className="typography-title-md">Mi. 8. Juli 2026</span>
+            <span className="text-sm text-description">15:00 – 15:30 Uhr · Sprechzimmer 2</span>
+          </div>
+          <div className="flex-row-0 gap-x-2.5 [&>*]:flex-1 [&>.button]:min-w-0">
+            <Button size="sm" color="primary" className="rounded-full">Zusagen</Button>
+            <Button size="sm" color="neutral" className="rounded-full">Ablehnen</Button>
+          </div>
+        </div>
+      </ChatMessageBubble>
+      <ChatMessageBubble direction="outgoing" timestamp={new Date(2026, 6, 8, 9, 20)} status="sent">
           Vielen Dank. 15:00 Uhr passt mir gut – ich komme vorbei.
-        </ChatMessageBubble>
-        <ChatSystemLine>Termin bestätigt · Mi. 8. Juli, 15:00 Uhr</ChatSystemLine>
-        <ChatAttachmentMessageBubble
-          name="Befund_Blutbild.pdf"
-          metadata="PDF · 196 KB"
-          direction="incoming"
-          timestamp={new Date(2026, 6, 8, 9, 21)}
-          downloadLabel="Herunterladen"
-          onDownload={() => {}}
-        />
-        <ChatMessageBubble direction="outgoing" timestamp={new Date(2026, 6, 8, 9, 24)} status="read">
+      </ChatMessageBubble>
+      <ChatSystemLine>Termin bestätigt · Mi. 8. Juli, 15:00 Uhr</ChatSystemLine>
+      <ChatAttachmentMessageBubble
+        name="Befund_Blutbild.pdf"
+        metadata="PDF · 196 KB"
+        direction="incoming"
+        timestamp={new Date(2026, 6, 8, 9, 21)}
+        downloadLabel="Herunterladen"
+        onDownload={() => {}}
+      />
+      <ChatMessageBubble direction="outgoing" timestamp={new Date(2026, 6, 8, 9, 24)} status="read">
           Perfekt, ich habe den Befund erhalten. Bis Mittwoch!
-        </ChatMessageBubble>
-      </ChatMessageList>
-    </div>
+      </ChatMessageBubble>
+    </ChatMessageList>
   ),
 }
diff --git a/packages/hightide-web/stories/Display And Visualization/Chip/Chip.stories.tsx b/packages/hightide-web/stories/Display And Visualization/Chip/Chip.stories.tsx
index 20618f14..3fa97c82 100644
--- a/packages/hightide-web/stories/Display And Visualization/Chip/Chip.stories.tsx	
+++ b/packages/hightide-web/stories/Display And Visualization/Chip/Chip.stories.tsx	
@@ -7,7 +7,15 @@ const meta = {
     color: {
       control: 'select',
       options: ChipUtil.colors,
-    }
+    },
+    colorVariant: {
+      control: 'select',
+      options: ChipUtil.colorVariants,
+    },
+    coloringStyle: {
+      control: 'select',
+      options: ChipUtil.styles,
+    },
   },
 } satisfies Meta<typeof Chip>
 
@@ -17,7 +25,8 @@ type Story = StoryObj<typeof meta>;
 export const chip: Story = {
   args: {
     color: 'primary',
-    coloringStyle: 'solid',
+    colorVariant: 'tonal',
+    coloringStyle: 'filled',
     size: 'md',
     children: 'Label',
   },

From c1e4f2db0a6f61ee54869d2bad7ab3b388ed07f5 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Wed, 30 Sep 2026 13:41:57 +0200
Subject: [PATCH 15/25] feat: update select searchbar appearance configuration

---
 packages/hightide-web/CHANGELOG.md            |  2 ++
 .../process-model/ProcessModelTraceReplay.tsx |  1 -
 .../layout/dialog/premade/ThemeDialog.tsx     |  1 -
 .../components/layout/popup/PopUpContext.tsx  |  4 +--
 .../src/components/layout/popup/PopUpRoot.tsx |  5 ++--
 .../MultiSelect/MultiSelectContent.tsx        |  5 ++--
 .../MultiSelect/MultiSelectRoot.tsx           | 25 +++++++++++--------
 .../user-interaction/Select/SelectContent.tsx |  5 ++--
 .../user-interaction/Select/SelectRoot.tsx    | 23 ++++++++++-------
 .../src/style/theme/components/app-page.css   |  3 ++-
 .../src/style/utitlity/coloring.css           |  2 +-
 .../ProcessModelActivityNode.stories.tsx      |  1 -
 .../ProcessModelCanvas.stories.tsx            |  1 -
 .../ProcessModelTraceReplay.stories.tsx       |  1 -
 .../MultiSelect/MultiSelect.stories.tsx       |  6 ++---
 .../MultiSelectChipDisplay.stories.tsx        |  3 +--
 .../Select/Select.stories.tsx                 |  6 ++---
 17 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/packages/hightide-web/CHANGELOG.md b/packages/hightide-web/CHANGELOG.md
index ff140dfe..9285ead8 100644
--- a/packages/hightide-web/CHANGELOG.md
+++ b/packages/hightide-web/CHANGELOG.md
@@ -56,6 +56,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Description text is no longer a fixed gray. `text-description` mixes `--coloring-foreground` (otherwise `--color-on-surface`) into `--coloring-color` (otherwise `--color-surface`) at `--appearance-subtle`
 - Dark theme background is `gray-800`, surface is `gray-700`, surface variant is `gray-750`, and primary stays `purple-500`
 - Coloring custom properties start as `initial` instead of `transparent`
+- `Select` and `MultiSelect` show the search field when the option count is at least `searchableThreshold` (default `6`)
 
 ### Removed
 
@@ -69,6 +70,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - CSS class `coloring` and the hover color tokens `--color-primary-hover`, `--color-secondary-hover`, `--color-positive-hover`, `--color-warning-hover`, `--color-negative-hover`, `--color-surface-hover`, `--color-neutral-hover`, `--color-neutral-text-hover`, and `--color-neutral-outline-hover` (light and dark)
 - `ChatMessageCard` and `ChatAttachmentCard`. Structured messages are composed with `ChatMessageBubble`; file messages use `ChatAttachmentMessageBubble`. `ChatMessageBubble` `readReceipt` is replaced by `status`
 - Fixed `--color-description` tokens (`gray-600` in light, `gray-400` in dark)
+- `showSearch` on `Select` and `MultiSelect`
 
 
 ## [0.17.2] - 2026-09-23
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
index 83470301..40a2fc2a 100644
--- a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
+++ b/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
@@ -300,7 +300,6 @@ export const ProcessModelTraceReplay = ({ graph, className }: ProcessModelTraceR
           <Select
             value={speedMult}
             onValueChange={setSpeedMult}
-            showSearch={false}
           >
             {SPEED_OPTIONS.map((option) => (
               <Select.Option<number>
diff --git a/packages/hightide-web/src/components/layout/dialog/premade/ThemeDialog.tsx b/packages/hightide-web/src/components/layout/dialog/premade/ThemeDialog.tsx
index 20efe42e..fd6adfe6 100644
--- a/packages/hightide-web/src/components/layout/dialog/premade/ThemeDialog.tsx
+++ b/packages/hightide-web/src/components/layout/dialog/premade/ThemeDialog.tsx
@@ -30,7 +30,6 @@ export const ThemeSelect = ({ ...props }: ThemeSelectProps) => {
         ...props.triggerProps,
         className: clsx('min-w-40 w-fit', props.triggerProps?.className),
       }}
-      showSearch={false}
     >
       <Select.Option
         key="system"
diff --git a/packages/hightide-web/src/components/layout/popup/PopUpContext.tsx b/packages/hightide-web/src/components/layout/popup/PopUpContext.tsx
index 8e2715ee..2d026744 100644
--- a/packages/hightide-web/src/components/layout/popup/PopUpContext.tsx
+++ b/packages/hightide-web/src/components/layout/popup/PopUpContext.tsx
@@ -6,8 +6,8 @@ export type PopUpContextType = {
   setIsOpen: Dispatch<SetStateAction<boolean>>,
   popUpId: string,
   triggerId: string,
-  triggerRef: RefObject<HTMLElement> | null,
-  setTriggerRef: (ref: RefObject<HTMLElement> | null) => void,
+  triggerRef: RefObject<HTMLElement | null>,
+  setTriggerRef: (ref: RefObject<HTMLElement | null>) => void,
 }
 
 export const PopUpContext = createContext<PopUpContextType | null>(null)
diff --git a/packages/hightide-web/src/components/layout/popup/PopUpRoot.tsx b/packages/hightide-web/src/components/layout/popup/PopUpRoot.tsx
index 84fd8c3d..71109e39 100644
--- a/packages/hightide-web/src/components/layout/popup/PopUpRoot.tsx
+++ b/packages/hightide-web/src/components/layout/popup/PopUpRoot.tsx
@@ -1,6 +1,6 @@
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import type { PropsWithChildren, RefObject } from 'react'
-import { useId, useMemo, useState } from 'react'
+import { useId, useMemo, useRef, useState } from 'react'
 import { PopUpContext } from './PopUpContext'
 
 export interface PopUpRootProps extends PropsWithChildren {
@@ -28,7 +28,8 @@ export function PopUpRoot({
     defaultValue: initialIsOpen,
   })
 
-  const [triggerRef, setTriggerRef] = useState<RefObject<HTMLElement> | null>(null)
+  const nullTrigger = useRef<HTMLElement | null>(null)
+  const [triggerRef, setTriggerRef] = useState<RefObject<HTMLElement | null>>(nullTrigger)
 
   const popUpId = useMemo(() => popUpIdOverwrite ?? `pop-up-${generatedPopUpId}`, [popUpIdOverwrite, generatedPopUpId])
   const triggerId = useMemo(() => triggerIdOverwrite ?? `pop-up-trigger-${generatedTriggerId}`, [triggerIdOverwrite, generatedTriggerId])
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContent.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
index 104df822..a60e6243 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
@@ -9,7 +9,6 @@ import { Visibility } from '../../layout/Visibility'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
 export interface MultiSelectContentProps extends PopUpProps {
-  showSearch?: boolean,
   searchInputProps?: Omit<ComponentProps<typeof Input>, 'value' | 'onValueChange'>,
 }
 
@@ -17,7 +16,7 @@ export const MultiSelectContent = forwardRef<
   HTMLUListElement,
   MultiSelectContentProps
 >(function MultiSelectContent<T>(
-  { id, options, showSearch: showSearchOverride, searchInputProps, ...props } : MultiSelectContentProps,
+  { id, options, searchInputProps, ...props }: MultiSelectContentProps,
   ref: ForwardedRef<HTMLUListElement>
 ) {
   const translation = useHightideTranslation()
@@ -32,7 +31,7 @@ export const MultiSelectContent = forwardRef<
     if (id) setIds((prev) => ({ ...prev, content: id }))
   }, [id, setIds])
 
-  const showSearch = showSearchOverride ?? context.search.hasSearch
+  const showSearch = context.search.hasSearch
   const listboxAriaLabel = showSearch ? translation('searchResults') : undefined
 
   const keyHandler = useCallback(
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
index 38f3a055..41f94db9 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode, RefObject, SetStateAction } from 'react'
-import { useCallback, useEffect, useId, useMemo, useState } from 'react'
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import { MultiSelectContext } from './MultiSelectContext'
 import type { MultiSelectContextType, MultiSelectIconAppearance, MultiSelectOptionType } from './MultiSelectContext'
 import { useMultiSelect } from './useMultiSelect'
@@ -20,7 +20,7 @@ export interface MultiSelectRootProps<T> extends Partial<FormFieldDataHandling<T
   compareFunction?: (a: T, b: T) => boolean,
   initialIsOpen?: boolean,
   onClose?: () => void,
-  showSearch?: boolean,
+  searchableThreshold?: number,
   iconAppearance?: MultiSelectIconAppearance,
   children: ReactNode,
 }
@@ -34,15 +34,17 @@ export function MultiSelectRoot<T>({
   compareFunction,
   initialIsOpen = false,
   onClose,
-  showSearch = true,
+  searchableThreshold = 6,
   iconAppearance = 'right',
   invalid = false,
   disabled = false,
   readOnly = false,
   required = false,
 }: MultiSelectRootProps<T>) {
-  const [triggerRef, setTriggerRef] = useState<RefObject<HTMLElement | null> | null>(null)
+  const nullTrigger = useRef<HTMLElement | null>(null)
+  const [triggerRef, setTriggerRef] = useState<RefObject<HTMLElement | null>>(nullTrigger)
   const [options, setOptions] = useState<MultiSelectOptionType<T>[]>([])
+  const [optionSnapshots, setOptionSnapshots] = useState<Record<string, MultiSelectOptionType<T>>>({})
   const generatedId = useId()
   const [ids, setIds] = useState<MultiSelectIds>({
     trigger: 'multi-select-' + generatedId,
@@ -52,6 +54,7 @@ export function MultiSelectRoot<T>({
   })
 
   const registerOption = useCallback((item: MultiSelectOptionType<T>) => {
+    setOptionSnapshots((previous) => ({ ...previous, [item.value.id]: item }))
     setOptions((prev) => {
       const next = prev.filter((o) => o.value.id !== item.value.id)
       next.push(item)
@@ -62,9 +65,9 @@ export function MultiSelectRoot<T>({
     return () => setOptions((prev) => prev.filter((o) => o.value.id !== item.value.id))
   }, [])
 
-  const registerTrigger = useCallback((ref: RefObject<HTMLElement>) => {
+  const registerTrigger = useCallback((ref: RefObject<HTMLElement | null>) => {
     setTriggerRef(ref)
-    return () => setTriggerRef(null)
+    return () => setTriggerRef(nullTrigger)
   }, [])
 
   const compare = useMemo(() => compareFunction ?? Object.is, [compareFunction])
@@ -125,12 +128,14 @@ export function MultiSelectRoot<T>({
     onClose,
   })
   const { setSearchQuery } = state
+  const knownOptionCount = Math.max(options.length, Object.keys(optionSnapshots).length)
+  const hasSearch = knownOptionCount >= searchableThreshold
 
   useEffect(() => {
-    if (showSearch === false) {
+    if (!hasSearch) {
       setSearchQuery('')
     }
-  }, [showSearch, setSearchQuery])
+  }, [hasSearch, setSearchQuery])
 
   const contextValue = useMemo((): MultiSelectContextType<T> => {
     const valueT = state.value
@@ -168,7 +173,7 @@ export function MultiSelectRoot<T>({
         registerTrigger,
       },
       search: {
-        hasSearch: showSearch,
+        hasSearch,
         searchQuery: state.searchQuery,
         setSearchQuery: state.setSearchQuery,
       },
@@ -186,7 +191,7 @@ export function MultiSelectRoot<T>({
     ids,
     triggerRef,
     registerTrigger,
-    showSearch,
+    hasSearch,
   ])
 
   const setIsOpen = useCallback((updater: SetStateAction<boolean>) => {
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectContent.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectContent.tsx
index bb433f67..b7f4aec4 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectContent.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectContent.tsx
@@ -9,12 +9,11 @@ import { Visibility } from '../../layout/Visibility'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
 export interface SelectContentProps extends PopUpProps {
-  showSearch?: boolean,
   searchInputProps?: Omit<ComponentProps<typeof Input>, 'value' | 'onValueChange'>,
 }
 
 export const SelectContent = forwardRef<HTMLUListElement, SelectContentProps>(function SelectContent<T>({
-  id, options, showSearch: showSearchOverride, searchInputProps, ...props
+  id, options, searchInputProps, ...props
 }: SelectContentProps, ref: ForwardedRef<HTMLUListElement>) {
   const translation = useHightideTranslation()
   const innerRef = useRef<HTMLUListElement>(null)
@@ -28,7 +27,7 @@ export const SelectContent = forwardRef<HTMLUListElement, SelectContentProps>(fu
     if (id) setIds((prev) => ({ ...prev, content: id }))
   }, [id, setIds])
 
-  const showSearch = showSearchOverride ?? context.search.hasSearch
+  const showSearch = context.search.hasSearch
   const listboxAriaLabel = showSearch ? translation('searchResults') : undefined
 
   const keyHandler = useCallback(
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectRoot.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectRoot.tsx
index c2a81e07..e7a90197 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectRoot.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectRoot.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode, RefObject, SetStateAction } from 'react'
-import { useCallback, useEffect, useId, useMemo, useState } from 'react'
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import { SelectContext } from './SelectContext'
 import type { SelectContextConfig, SelectContextLayout, SelectOptionType } from './SelectContext'
 import { useSelect } from './useSelect'
@@ -23,7 +23,7 @@ export interface SelectRootProps<T> extends Omit<Partial<FormFieldDataHandling<T
   initialIsOpen?: boolean,
   onClose?: () => void,
   onIsOpenChange?: (isOpen: boolean) => void,
-  showSearch?: boolean,
+  searchableThreshold?: number,
   iconAppearance?: 'left' | 'right' | 'none',
   children: ReactNode,
 }
@@ -38,15 +38,17 @@ export function SelectRoot<T>({
   initialIsOpen = false,
   onClose,
   onIsOpenChange,
-  showSearch = true,
+  searchableThreshold = 6,
   iconAppearance = 'right',
   invalid = false,
   disabled = false,
   readOnly = false,
   required = false,
 }: SelectRootProps<T>) {
-  const [triggerRef, setTriggerRef] = useState<RefObject<HTMLElement> | null>(null)
+  const nullTrigger = useRef<HTMLElement | null>(null)
+  const [triggerRef, setTriggerRef] = useState<RefObject<HTMLElement | null>>(nullTrigger)
   const [options, setOptions] = useState<SelectOptionType<T>[]>([])
+  const [optionSnapshots, setOptionSnapshots] = useState<Record<string, SelectOptionType<T>>>({})
   const generatedId = useId()
   const [ids, setIds] = useState<SelectIds>({
     trigger: 'select-' + generatedId,
@@ -58,6 +60,7 @@ export function SelectRoot<T>({
 
   const registerOption = useCallback(
     (item: SelectOptionType<T>) => {
+      setOptionSnapshots((previous) => ({ ...previous, [item.value.id]: item }))
       setOptions((prev) => {
         const next = prev.filter((o) => o.value.id !== item.value.id)
         next.push(item)
@@ -71,10 +74,10 @@ export function SelectRoot<T>({
     []
   )
 
-  const registerTrigger = useCallback((ref: RefObject<HTMLElement>) => {
+  const registerTrigger = useCallback((ref: RefObject<HTMLElement | null>) => {
     setTriggerRef(ref)
     return () => {
-      setTriggerRef(null)
+      setTriggerRef(nullTrigger)
     }
   }, [])
 
@@ -135,12 +138,14 @@ export function SelectRoot<T>({
     onIsOpenChange: onIsOpenChangeStable,
   })
   const { setSearchQuery } = state
+  const knownOptionCount = Math.max(options.length, Object.keys(optionSnapshots).length)
+  const hasSearch = knownOptionCount >= searchableThreshold
 
   useEffect(() => {
-    if(showSearch === false) {
+    if (!hasSearch) {
       setSearchQuery('')
     }
-  }, [showSearch, setSearchQuery])
+  }, [hasSearch, setSearchQuery])
 
   const config: SelectContextConfig = useMemo(() => ({
     iconAppearance,
@@ -187,7 +192,7 @@ export function SelectRoot<T>({
         config,
         layout,
         search: {
-          hasSearch: showSearch,
+          hasSearch,
           searchQuery: state.searchQuery,
           setSearchQuery: state.setSearchQuery,
         },
diff --git a/packages/hightide-web/src/style/theme/components/app-page.css b/packages/hightide-web/src/style/theme/components/app-page.css
index 5b74f511..67759991 100644
--- a/packages/hightide-web/src/style/theme/components/app-page.css
+++ b/packages/hightide-web/src/style/theme/components/app-page.css
@@ -51,7 +51,8 @@
   }
 
   .app-sidebar-close-button {
-    @apply absolute top-1 right-1 z-10;
+    @apply top-1 right-1 z-10;
+    --coloring-position-override: absolute;
 
     @variant desktop {
       @apply hidden;
diff --git a/packages/hightide-web/src/style/utitlity/coloring.css b/packages/hightide-web/src/style/utitlity/coloring.css
index 1d34107c..624b2e76 100644
--- a/packages/hightide-web/src/style/utitlity/coloring.css
+++ b/packages/hightide-web/src/style/utitlity/coloring.css
@@ -73,7 +73,7 @@
 @layer utilities {
   [data-coloring-mode="static"],
   [data-coloring-mode="interactive"] {
-  position: relative;
+  position: var(--coloring-position-override, relative);
 
   --coloring-color: var(--coloring-base);
   --coloring-on-color: var(--coloring-on-base);
diff --git a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelActivityNode.stories.tsx b/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelActivityNode.stories.tsx
index f0c9a931..56e02ddd 100644
--- a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelActivityNode.stories.tsx	
+++ b/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelActivityNode.stories.tsx	
@@ -65,7 +65,6 @@ export const processModelActivityNode: Story = {
           <Select
             value={exampleId}
             onValueChange={setExampleId}
-            showSearch={false}
           >
             {activityNodeExamples.map((item) => (
               <Select.Option key={item.id} value={item.id} label={item.optionLabel} />
diff --git a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelCanvas.stories.tsx b/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelCanvas.stories.tsx
index 858931cb..656c1ab5 100644
--- a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelCanvas.stories.tsx	
+++ b/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelCanvas.stories.tsx	
@@ -28,7 +28,6 @@ export const processModelCanvas: Story = {
           <Select
             value={modelId}
             onValueChange={setModelId}
-            showSearch={false}
           >
             {processModelLibrary.map((entry) => (
               <Select.Option key={entry.id} value={entry.id} label={entry.name} />
diff --git a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelTraceReplay.stories.tsx b/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelTraceReplay.stories.tsx
index 6c6a1de5..2c917ad8 100644
--- a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelTraceReplay.stories.tsx	
+++ b/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelTraceReplay.stories.tsx	
@@ -29,7 +29,6 @@ export const processModelTraceReplay: Story = {
           <Select
             value={modelId}
             onValueChange={setModelId}
-            showSearch={false}
           >
             {processModelLibrary.map((entry) => (
               <Select.Option key={entry.id} value={entry.id} label={entry.name} />
diff --git a/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelect.stories.tsx b/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelect.stories.tsx
index 23dd11f9..7a39de02 100644
--- a/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelect.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelect.stories.tsx	
@@ -31,7 +31,6 @@ export const multiSelect: Story = {
     initialValue: ['Apple', 'Cherry'],
     disabled: false,
     invalid: false,
-    showSearch: true,
     readOnly: false,
     required: false,
     onValueChange: action('onValueChange'),
@@ -66,7 +65,7 @@ export const multiSelectWithUser: Story = {
     initialValue: undefined,
     disabled: false,
     invalid: false,
-    showSearch: true,
+    searchableThreshold: 5,
     readOnly: false,
     required: false,
     compareFunction: compareUser,
@@ -129,7 +128,6 @@ export const multiSelectComposed: Story = {
     initialValue: ['Apple', 'Cherry'],
     disabled: false,
     invalid: false,
-    showSearch: true,
     readOnly: false,
     required: false,
     onValueChange: action('onValueChange'),
@@ -140,7 +138,7 @@ export const multiSelectComposed: Story = {
       initialValue={args.initialValue}
       disabled={args.disabled}
       invalid={args.invalid}
-      showSearch={args.showSearch}
+      searchableThreshold={args.searchableThreshold}
       readOnly={args.readOnly}
       required={args.required}
       onValueChange={args.onValueChange}
diff --git a/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelectChipDisplay.stories.tsx b/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelectChipDisplay.stories.tsx
index 2c429511..433433dc 100644
--- a/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelectChipDisplay.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelectChipDisplay.stories.tsx	
@@ -29,7 +29,6 @@ export const multiSelectChipDisplay: Story = {
     initialValue: ['Apple', 'Cherry'],
     disabled: false,
     invalid: false,
-    showSearch: false,
     readOnly: false,
     required: false,
     onValueChange: action('onValueChange'),
@@ -40,7 +39,7 @@ export const multiSelectChipDisplay: Story = {
       initialValue={args.initialValue}
       disabled={args.disabled}
       invalid={args.invalid}
-      showSearch={args.showSearch}
+      searchableThreshold={args.searchableThreshold}
       readOnly={args.readOnly}
       required={args.required}
       onValueChange={args.onValueChange}
diff --git a/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx b/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx
index be2cddaa..b9d21ff9 100644
--- a/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx	
@@ -33,7 +33,6 @@ export const select: Story = {
     initialValue: undefined,
     disabled: false,
     invalid: false,
-    showSearch: false,
     readOnly: false,
     required: false,
     onValueChange: action('onValueChange'),
@@ -69,7 +68,7 @@ export const selectWithUser: Story = {
     initialValue: undefined,
     disabled: false,
     invalid: false,
-    showSearch: true,
+    searchableThreshold: 5,
     readOnly: false,
     required: false,
     compareFunction: compareUser,
@@ -127,7 +126,6 @@ export const selectComposed: Story = {
     initialValue: undefined,
     disabled: false,
     invalid: false,
-    showSearch: false,
     readOnly: false,
     required: false,
     onValueChange: action('onValueChange'),
@@ -138,7 +136,7 @@ export const selectComposed: Story = {
       initialValue={args.initialValue}
       disabled={args.disabled}
       invalid={args.invalid}
-      showSearch={args.showSearch}
+      searchableThreshold={args.searchableThreshold}
       readOnly={args.readOnly}
       required={args.required}
       onValueChange={args.onValueChange}

From 7c4da57f68253d7a59be5617f0a61fb8853e8edc Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Wed, 30 Sep 2026 13:57:59 +0200
Subject: [PATCH 16/25] feat: update Carsousel component

---
 packages/hightide-web/CHANGELOG.md            |   3 +
 .../src/components/layout/Carousel.tsx        | 450 ------------------
 .../components/layout/Carousel/Carousel.tsx   |  96 ++++
 .../layout/Carousel/CarouselArrows.tsx        |  38 ++
 .../layout/Carousel/CarouselContainer.tsx     | 176 +++++++
 .../layout/Carousel/CarouselContext.tsx       |  42 ++
 .../layout/Carousel/CarouselFadeLayover.tsx   |  24 +
 .../layout/Carousel/CarouselRoot.tsx          | 163 +++++++
 .../layout/Carousel/CarouselSlide.tsx         |  41 ++
 .../layout/Carousel/CarouselStepper.tsx       |  68 +++
 .../src/components/layout/Carousel/index.ts   |  11 +
 .../src/style/theme/components/carousel.css   |  70 +++
 .../src/style/theme/components/index.css      |   1 +
 13 files changed, 733 insertions(+), 450 deletions(-)
 delete mode 100644 packages/hightide-web/src/components/layout/Carousel.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Carousel/Carousel.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Carousel/CarouselArrows.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Carousel/CarouselContainer.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Carousel/CarouselContext.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Carousel/CarouselFadeLayover.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Carousel/CarouselRoot.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Carousel/CarouselSlide.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Carousel/CarouselStepper.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Carousel/index.ts
 create mode 100644 packages/hightide-web/src/style/theme/components/carousel.css

diff --git a/packages/hightide-web/CHANGELOG.md b/packages/hightide-web/CHANGELOG.md
index 9285ead8..586cdf5d 100644
--- a/packages/hightide-web/CHANGELOG.md
+++ b/packages/hightide-web/CHANGELOG.md
@@ -57,6 +57,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Dark theme background is `gray-800`, surface is `gray-700`, surface variant is `gray-750`, and primary stays `purple-500`
 - Coloring custom properties start as `initial` instead of `transparent`
 - `Select` and `MultiSelect` show the search field when the option count is at least `searchableThreshold` (default `6`)
+- `Carousel` is a compound component: `Carousel.Root`, `Carousel.Container`, `Carousel.Slide`, `Carousel.Arrows`, `Carousel.FadeLayover`, `Carousel.Stepper`, `Carousel.Context`, and `Carousel.Consumer`. The combined `Carousel` still composes them from `children`, `hintNext`, `arrows`, `dots`, and `blurColor`
 
 ### Removed
 
@@ -71,6 +72,8 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `ChatMessageCard` and `ChatAttachmentCard`. Structured messages are composed with `ChatMessageBubble`; file messages use `ChatAttachmentMessageBubble`. `ChatMessageBubble` `readReceipt` is replaced by `status`
 - Fixed `--color-description` tokens (`gray-600` in light, `gray-400` in dark)
 - `showSearch` on `Select` and `MultiSelect`
+- Standalone `CarouselTabs` and `CarouselSlide`. Use `Carousel.Stepper` and `Carousel.Slide`
+- Unused `Carousel` prop `overScrollThreshold`
 
 
 ## [0.17.2] - 2026-09-23
diff --git a/packages/hightide-web/src/components/layout/Carousel.tsx b/packages/hightide-web/src/components/layout/Carousel.tsx
deleted file mode 100644
index 424c0240..00000000
--- a/packages/hightide-web/src/components/layout/Carousel.tsx
+++ /dev/null
@@ -1,450 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react'
-import React, {
-  createContext,
-  forwardRef,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState
-} from 'react'
-import clsx from 'clsx'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { createLoopingListWithIndex, range } from '@helpwave/hightide-utils/utils'
-import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
-import { IconButton } from '../user-interaction/IconButton'
-
-//
-// CarouselContext
-//
-type CarouselContextType = {
-  id: string,
-  currentIndex: number,
-  slideCount: number,
-  isLooping: boolean,
-}
-
-const CarouselContext = createContext<CarouselContextType | null>(null)
-
-const useCarouselContext = () => {
-  const context = useContext(CarouselContext)
-  if (!context) {
-    throw Error('useCarouselContext must be used within CarouselContext')
-  }
-  return context
-}
-
-//
-// CarouselTab
-//
-type CarouselTabsProps = {
-  onChange: (index: number) => void,
-}
-
-export default function CarouselTabs({
-  onChange,
-}: CarouselTabsProps) {
-  const translation = useHightideTranslation()
-  const { id, slideCount, currentIndex, isLooping } = useCarouselContext()
-
-  const tabRefs = useRef<(HTMLButtonElement | null)[]>([])
-
-  const handleKeyDown = (event: React.KeyboardEvent, index: number) => {
-    let newIndex = index
-    if (event.key === 'ArrowRight') {
-      newIndex = isLooping ? (index + 1) % slideCount : Math.max(index + 1, slideCount - 1)
-    } else if (event.key === 'ArrowLeft') {
-      newIndex = isLooping ? (index - 1 + slideCount) % slideCount : Math.max(index - 1, 0)
-    } else {
-      return
-    }
-    event.preventDefault()
-    onChange(newIndex)
-    tabRefs.current[newIndex]?.focus()
-  }
-
-  return (
-    <div
-      className="flex-row-1 items-center justify-center w-full my-2"
-      role="tablist"
-      aria-label={translation('slideNavigation')}
-      id={`${id}-tablist`}
-    >
-      {range(slideCount).map((index) => {
-        const isSelected = currentIndex === index
-        return (
-          <button
-            id={`${id}-tab-${index}`}
-            key={index}
-            ref={(el) => {
-              tabRefs.current[index] = el
-            }}
-            onClick={() => onChange(index)}
-            onKeyDown={(e) => handleKeyDown(e, index)}
-
-            className={clsx(
-              'w-8 min-w-8 h-3 min-h-3 first:rounded-l-md last:rounded-r-md',
-              {
-                'bg-carousel-dot-disabled hover:bg-carousel-dot-active': currentIndex !== index,
-                'bg-carousel-dot-active hover:brightness-90': currentIndex === index,
-              }
-            )}
-
-            type="button"
-            role="tab"
-            tabIndex={isSelected ? 0 : -1}
-            aria-label={translation('showSlide', { index: (index + 1) })}
-            aria-selected={isSelected}
-            aria-controls={`slide-${index}`}
-            aria-disabled={isSelected}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
-//
-// CarouselSlide
-//
-export interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {
-  isSelected: boolean,
-  index: number,
-}
-
-export const CarouselSlide = forwardRef<HTMLDivElement, CarouselSlideProps>(
-  function CarouselSlide({
-    index,
-    isSelected,
-    ...props
-  }, ref) {
-    const translation = useHightideTranslation()
-    const { id, slideCount } = useCarouselContext()
-
-    return (
-      <div
-        {...props}
-        ref={ref}
-        id={`${id}-slide-${index}`}
-
-        className={clsx('focus-style-none group/slide', props.className)}
-
-        tabIndex={isSelected ? 0 : undefined}
-        role="group"
-        aria-roledescription={translation('slide')}
-        aria-label={translation('slideOf', {
-          index: (index + 1),
-          length: (slideCount),
-        })}
-        aria-hidden={isSelected ? undefined : true}
-      />
-    )
-  }
-)
-
-//
-// Carousel
-//
-type DragState = {
-  dragStartX: number,
-  dragOffsetX: number,
-}
-
-type ItemType = {
-  item: ReactNode,
-  index: number,
-}
-
-export type CarouselProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
-  children: ReactNode[],
-  animationTime?: number,
-  isLooping?: boolean,
-  isAutoPlaying?: boolean,
-  autoLoopingTimeOut?: number,
-  autoLoopAnimationTime?: number,
-  hintNext?: boolean,
-  arrows?: boolean,
-  dots?: boolean,
-  /**
-   * Percentage that is allowed to be scrolled further
-   */
-  overScrollThreshold?: number,
-  blurColor?: string,
-  heightClassName?: string,
-  slideClassName?: string,
-  slideContainerProps?: HTMLAttributes<HTMLDivElement>,
-  onSlideChanged?: (index: number) => void,
-}
-
-export const Carousel = ({
-  children,
-  animationTime = 200,
-  isLooping = false,
-  isAutoPlaying = false,
-  autoLoopingTimeOut = 5000,
-  autoLoopAnimationTime = 1000,
-  hintNext = false,
-  arrows = false,
-  dots = true,
-  blurColor = 'from-background',
-  heightClassName = 'h-96',
-  slideClassName = 'w-[70%] desktop:w-1/2',
-  slideContainerProps,
-  onSlideChanged,
-  ...props
-}: CarouselProps) => {
-  const translation = useHightideTranslation()
-  const onSlideChangedStable = useEventCallbackStabilizer(onSlideChanged)
-  const slideRefs = useRef<HTMLDivElement[]>([])
-  const [currentIndex, setCurrentIndex] = useState<number>(0)
-  const [hasFocus, setHasFocus] = useState(false)
-  const [dragState, setDragState] = useState<DragState>()
-  const isPaused = hasFocus
-  const carouselContainerRef = useRef<HTMLDivElement>(null)
-  const [disableClick, setDisableClick] = useState(false)
-
-  const timeOut = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
-
-  const length = useMemo(() => children.length, [children])
-  const paddingItemCount = 3 // The number of items to append left and right of the list to allow for clean transition when looping
-
-  const generatedId = 'carousel' + useId()
-  const id = props.id ?? generatedId
-
-  // Validation
-  if (isAutoPlaying && !isLooping) {
-    console.error('When isAutoLooping is true, isLooping should also be true')
-    isLooping = true
-  }
-  autoLoopingTimeOut = Math.max(0, autoLoopingTimeOut) // time between transitions
-  animationTime = Math.max(100, animationTime) // in ms, must be > 0
-  autoLoopAnimationTime = Math.max(200, autoLoopAnimationTime)
-
-  useEffect(() => {
-    const carousel = carouselContainerRef.current
-
-    if (carousel) {
-      function onFocus() {
-        setHasFocus(true)
-      }
-
-      function onBlur() {
-        setHasFocus(false)
-      }
-
-
-      carousel?.addEventListener('focusin', onFocus)
-      carousel?.addEventListener('focusout', onBlur)
-      return () => {
-        carousel?.removeEventListener('focusin', onFocus)
-        carousel?.removeEventListener('focusin', onFocus)
-      }
-    }
-  }, [])
-
-  const getStyleOffset = (index: number) => {
-    const baseOffset = -50 + (index - currentIndex) * 100
-    return `${baseOffset}%`
-  }
-
-  const canGoLeft = () => {
-    return isLooping || currentIndex !== 0
-  }
-
-  const canGoRight = useCallback(() => {
-    return isLooping || currentIndex !== length - 1
-  }, [currentIndex, isLooping, length])
-
-  const left = () => {
-    if (canGoLeft()) {
-      setCurrentIndex((currentIndex + length - 1) % length)
-    }
-  }
-
-  const right = useCallback(() => {
-    if (canGoRight()) {
-      setCurrentIndex((currentIndex + length + 1) % length)
-    }
-  }, [canGoRight, currentIndex, length])
-
-  useEffect(() => {
-    if (!timeOut.current && !isPaused) {
-      if (autoLoopingTimeOut > 0) {
-        timeOut.current = setTimeout(() => {
-          right()
-          timeOut.current = undefined
-        }, autoLoopingTimeOut)
-      } else {
-        right()
-      }
-    }
-    if ((isPaused || !!dragState) && timeOut.current) {
-      clearTimeout(timeOut.current)
-      timeOut.current = undefined
-    }
-  }, [right, isPaused, autoLoopingTimeOut, dragState])
-
-
-  let items: ItemType[] = children.map((item, index) => ({
-    index,
-    item
-  }))
-  let before: ItemType[] = []
-  let after: ItemType[] = []
-  if (isLooping) {
-    before = createLoopingListWithIndex(children, length - 1, paddingItemCount, false).reverse().map(([index, item]) => ({
-      index,
-      item
-    }))
-    after = createLoopingListWithIndex(children, 0, paddingItemCount).map(([index, item]) => ({
-      index,
-      item
-    }))
-
-    items = [...before, ...items, ...after]
-  }
-
-  const handlePointerDown = (e: React.PointerEvent) => {
-    setDragState({
-      dragOffsetX: 0,
-      dragStartX: e.clientX,
-    })
-  }
-
-  const handlePointerMove = (e: React.PointerEvent) => {
-    if (!dragState) return
-    setDragState(prevState => {
-      if(!prevState) return prevState
-      return { dragStartX: prevState.dragStartX, dragOffsetX: e.clientX - prevState.dragStartX }
-    })
-  }
-
-  const handlePointerUp = () => {
-    if (!dragState) return
-    if (dragState.dragOffsetX > 50) {
-      left()
-    } else if (dragState.dragOffsetX < -50) {
-      right()
-    }
-    setDragState(undefined)
-  }
-
-  useEffect(() => {
-    setDisableClick(!dragState)
-  }, [dragState])
-
-  useEffect(() => {
-    onSlideChangedStable(currentIndex)
-  }, [currentIndex, onSlideChangedStable])
-
-  return (
-    <CarouselContext.Provider value={{ id, currentIndex, slideCount: length, isLooping }}>
-      <div
-        ref={carouselContainerRef}
-        {...props}
-        className={clsx('flex-col-2 items-center w-full', props.className)}
-
-        id={id}
-        role="region"
-        aria-roledescription={translation('slide')}
-      >
-        <div
-          {...slideContainerProps}
-          className={clsx(`relative w-full overflow-hidden`, heightClassName, slideContainerProps?.className)}
-        >
-          {hintNext ? (
-            <div
-              onPointerDown={handlePointerDown}
-              onPointerMove={handlePointerMove}
-              onPointerUp={handlePointerUp}
-              onPointerLeave={handlePointerUp}
-              className={clsx(`flex-row-2 relative h-full`, heightClassName)}
-            >
-              <div className="flex-row-2 relative h-full w-full px-2 overflow-hidden">
-                {items.map(({
-                  item,
-                  index
-                }, listIndex) => {
-                  const isInItems = before.length <= listIndex && listIndex < items.length - after.length
-
-                  return (
-                    <CarouselSlide
-                      ref={(el) => {
-                        const array = slideRefs.current
-                        if(!array || !el || !isInItems) return
-                        array[index] = el
-                      }}
-                      key={listIndex}
-                      index={index}
-                      isSelected={isInItems && currentIndex === index}
-                      className={clsx(
-                        `absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out`,
-                        slideClassName
-                      )}
-                      onClick={() => !disableClick && setCurrentIndex(index)}
-                      style={{
-                        translate: `calc(${getStyleOffset(listIndex - (isLooping ? paddingItemCount : 0))} + ${dragState ? dragState.dragOffsetX : 0}px)`,
-                        transitionDuration: dragState ? '0ms' : ((isAutoPlaying && !isPaused ? autoLoopAnimationTime : animationTime) + 'ms'),
-                      }}
-                    >
-                      {item}
-                    </CarouselSlide>
-                  )
-                })}
-              </div>
-              <div
-                className={clsx(`hidden desktop:block pointer-events-none absolute left-0 h-full w-[20%] bg-gradient-to-r to-transparent`, blurColor)}
-              />
-              <div
-                className={clsx(`hidden desktop:block pointer-events-none absolute right-0 h-full w-[20%] bg-gradient-to-l to-transparent`, blurColor)}
-              />
-            </div>
-          ) : (
-            <div
-              ref={(el) => {
-                const array = slideRefs.current
-                if(!array || !el) return
-                array[currentIndex] = el
-              }}
-              className={clsx('px-16 h-full')}
-
-              tabIndex={0}
-              role="group"
-              aria-roledescription={translation('slide')}
-              aria-label={translation('slideOf', {
-                index: (currentIndex + 1),
-                length: items.length
-              })}
-            >
-              {children[currentIndex]}
-            </div>
-          )}
-          {arrows && (
-            <>
-              <IconButton
-                tooltip={translation('previous')}
-                color="neutral"
-                className={clsx('absolute z-10 left-2 top-1/2 -translate-y-1/2 shadow-md', { hidden: !canGoLeft() })}
-                disabled={!canGoLeft()}
-                onClick={() => left()}
-                icon={ChevronLeft}
-              />
-              <IconButton
-                tooltip={translation('next')}
-                color="neutral"
-                className={clsx('absolute z-10 right-2 top-1/2 -translate-y-1/2 shadow-md', { hidden: !canGoRight() })}
-                disabled={!canGoRight()}
-                onClick={() => right()}
-                icon={ChevronRight}
-              />
-            </>
-          )}
-        </div>
-        {dots && (<CarouselTabs onChange={setCurrentIndex}/>)}
-      </div>
-    </CarouselContext.Provider>
-  )
-}
diff --git a/packages/hightide-web/src/components/layout/Carousel/Carousel.tsx b/packages/hightide-web/src/components/layout/Carousel/Carousel.tsx
new file mode 100644
index 00000000..208158f1
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Carousel/Carousel.tsx
@@ -0,0 +1,96 @@
+import type { HTMLAttributes, ReactNode } from 'react'
+import { Children, isValidElement } from 'react'
+import clsx from 'clsx'
+
+import type { CarouselArrowsProps } from './CarouselArrows'
+import { CarouselArrows } from './CarouselArrows'
+import type { CarouselContainerProps } from './CarouselContainer'
+import { CarouselContainer } from './CarouselContainer'
+import { CarouselContext } from './CarouselContext'
+import type { CarouselFadeLayoverProps } from './CarouselFadeLayover'
+import { CarouselFadeLayover } from './CarouselFadeLayover'
+import type { CarouselRootProps } from './CarouselRoot'
+import { CarouselRoot } from './CarouselRoot'
+import type { CarouselSlideProps } from './CarouselSlide'
+import { CarouselSlide } from './CarouselSlide'
+import type { CarouselStepperProps } from './CarouselStepper'
+import { CarouselStepper } from './CarouselStepper'
+
+export type CarouselProps = Omit<CarouselRootProps, 'children'> & {
+  children: ReactNode,
+  arrows?: boolean,
+  dots?: boolean,
+  blurColor?: string,
+  heightClassName?: string,
+  slideClassName?: string,
+  slideContainerProps?: HTMLAttributes<HTMLDivElement>,
+  arrowsProps?: CarouselArrowsProps,
+  fadeLayoverProps?: CarouselFadeLayoverProps,
+  stepperProps?: CarouselStepperProps,
+  containerProps?: Omit<CarouselContainerProps, 'children'>,
+}
+
+function slideElements(children: ReactNode) {
+  return Children.map(children, (child, index) => {
+    if (isValidElement(child) && child.type === CarouselSlide) {
+      return child
+    }
+    return (
+      <CarouselSlide key={index}>
+        {child}
+      </CarouselSlide>
+    )
+  })
+}
+
+function CarouselComponent({
+  children,
+  arrows = false,
+  dots = true,
+  blurColor = 'from-background',
+  heightClassName = 'h-96',
+  slideClassName = 'w-[70%] desktop:w-1/2',
+  slideContainerProps,
+  arrowsProps,
+  fadeLayoverProps,
+  stepperProps,
+  containerProps,
+  hintNext = false,
+  ...props
+}: CarouselProps) {
+  return (
+    <CarouselRoot {...props} hintNext={hintNext}>
+      <CarouselContainer
+        {...slideContainerProps}
+        {...containerProps}
+        slideClassName={slideClassName}
+        className={clsx(heightClassName, slideContainerProps?.className, containerProps?.className)}
+      >
+        {slideElements(children)}
+        {hintNext && (
+          <CarouselFadeLayover
+            {...fadeLayoverProps}
+            className={clsx(blurColor, fadeLayoverProps?.className)}
+          />
+        )}
+        {arrows && <CarouselArrows {...arrowsProps} />}
+      </CarouselContainer>
+      {dots && <CarouselStepper {...stepperProps} />}
+    </CarouselRoot>
+  )
+}
+
+const Carousel = Object.assign(CarouselComponent, {
+  Root: CarouselRoot,
+  Container: CarouselContainer,
+  Slide: CarouselSlide,
+  Arrows: CarouselArrows,
+  FadeLayover: CarouselFadeLayover,
+  Stepper: CarouselStepper,
+  Context: CarouselContext,
+  Consumer: CarouselContext.Consumer,
+})
+
+export { Carousel }
+export type { CarouselRootProps, CarouselContainerProps, CarouselSlideProps, CarouselFadeLayoverProps, CarouselStepperProps }
+export type { CarouselArrowsProps }
diff --git a/packages/hightide-web/src/components/layout/Carousel/CarouselArrows.tsx b/packages/hightide-web/src/components/layout/Carousel/CarouselArrows.tsx
new file mode 100644
index 00000000..862612c4
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Carousel/CarouselArrows.tsx
@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
+
+import { IconButton } from '../../user-interaction/IconButton'
+import { useCarouselContext } from './CarouselContext'
+
+export type CarouselArrowsProps = HTMLAttributes<HTMLDivElement>
+
+export function CarouselArrows(_props: CarouselArrowsProps) {
+  const translation = useHightideTranslation()
+  const { goPrevious, goNext, canGoPrevious, canGoNext } = useCarouselContext()
+
+  return (
+    <>
+      <IconButton
+        tooltip={translation('previous')}
+        color="neutral"
+        className="carousel-arrow"
+        data-direction="previous"
+        data-hidden={canGoPrevious ? undefined : true}
+        disabled={!canGoPrevious}
+        onClick={goPrevious}
+        icon={ChevronLeft}
+      />
+      <IconButton
+        tooltip={translation('next')}
+        color="neutral"
+        className="carousel-arrow"
+        data-direction="next"
+        data-hidden={canGoNext ? undefined : true}
+        disabled={!canGoNext}
+        onClick={goNext}
+        icon={ChevronRight}
+      />
+    </>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Carousel/CarouselContainer.tsx b/packages/hightide-web/src/components/layout/Carousel/CarouselContainer.tsx
new file mode 100644
index 00000000..f63277fc
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Carousel/CarouselContainer.tsx
@@ -0,0 +1,176 @@
+import type { HTMLAttributes, PointerEvent, ReactElement, ReactNode } from 'react'
+import { Children, cloneElement, isValidElement, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import clsx from 'clsx'
+import { createLoopingListWithIndex } from '@helpwave/hightide-utils/utils'
+
+import { useCarouselContext } from './CarouselContext'
+import type { CarouselSlideProps } from './CarouselSlide'
+import { CarouselSlide } from './CarouselSlide'
+
+const loopPadding = 3
+
+export type CarouselContainerProps = HTMLAttributes<HTMLDivElement> & {
+  slideClassName?: string,
+}
+
+function isCarouselSlide(node: ReactNode): node is ReactElement<CarouselSlideProps> {
+  return isValidElement(node) && node.type === CarouselSlide
+}
+
+export function CarouselContainer({
+  children,
+  slideClassName,
+  ...props
+}: CarouselContainerProps) {
+  const {
+    currentIndex,
+    hintNext,
+    isLooping,
+    setSlideCount,
+    setIsDragging,
+    goTo,
+    goPrevious,
+    goNext,
+    transitionDuration,
+  } = useCarouselContext()
+  const [drag, setDrag] = useState<{ startX: number, offsetX: number }>()
+  const suppressClickRef = useRef(false)
+
+  const slides: ReactElement<CarouselSlideProps>[] = []
+  const overlays: ReactNode[] = []
+  Children.forEach(children, (child) => {
+    if (isCarouselSlide(child)) {
+      slides.push(child)
+    } else {
+      overlays.push(child)
+    }
+  })
+
+  useLayoutEffect(() => {
+    setSlideCount(slides.length)
+  }, [setSlideCount, slides.length])
+
+  useEffect(() => {
+    setIsDragging(drag !== undefined)
+  }, [drag, setIsDragging])
+
+  const handlePointerDown = (event: PointerEvent) => {
+    setDrag({
+      startX: event.clientX,
+      offsetX: 0,
+    })
+  }
+
+  const handlePointerMove = (event: PointerEvent) => {
+    setDrag((previous) => {
+      if (!previous) {
+        return previous
+      }
+      return {
+        startX: previous.startX,
+        offsetX: event.clientX - previous.startX,
+      }
+    })
+  }
+
+  const handlePointerUp = () => {
+    if (!drag) {
+      return
+    }
+    if (drag.offsetX > 50) {
+      goPrevious()
+    } else if (drag.offsetX < -50) {
+      goNext()
+    }
+    suppressClickRef.current = Math.abs(drag.offsetX) > 5
+    setDrag(undefined)
+  }
+
+  const positionedSlides = () => {
+    const padding = isLooping ? loopPadding : 0
+    let entries = slides.map((element, index) => ({
+      index,
+      element,
+      isClone: false,
+      key: `slide-${index}`,
+    }))
+    if (isLooping && slides.length > 0) {
+      const before = createLoopingListWithIndex(slides, slides.length - 1, loopPadding, false)
+        .reverse()
+        .map(([index, element], listIndex) => ({
+          index,
+          element,
+          isClone: true,
+          key: `before-${listIndex}`,
+        }))
+      const after = createLoopingListWithIndex(slides, 0, loopPadding)
+        .map(([index, element], listIndex) => ({
+          index,
+          element,
+          isClone: true,
+          key: `after-${listIndex}`,
+        }))
+      entries = [...before, ...entries, ...after]
+    }
+
+    return entries.map((entry, listIndex) => {
+      const visualIndex = listIndex - padding
+      const offset = -50 + (visualIndex - currentIndex) * 100
+      const dragOffset = drag ? drag.offsetX : 0
+      return cloneElement(entry.element, {
+        key: entry.key,
+        index: entry.index,
+        isSelected: !entry.isClone && entry.index === currentIndex,
+        isClone: entry.isClone,
+        className: clsx(slideClassName, entry.element.props.className),
+        style: {
+          ...entry.element.props.style,
+          translate: `calc(${offset}% + ${dragOffset}px)`,
+          transitionDuration: drag ? '0ms' : `${transitionDuration}ms`,
+        },
+        onClick: (event) => {
+          entry.element.props.onClick?.(event)
+          if (suppressClickRef.current) {
+            suppressClickRef.current = false
+            return
+          }
+          goTo(entry.index)
+        },
+      })
+    })
+  }
+
+  const currentSlide = slides[currentIndex]
+  const framedSlide = currentSlide && cloneElement(currentSlide, {
+    index: currentIndex,
+    isSelected: true,
+  })
+
+  return (
+    <div
+      {...props}
+      className={clsx('carousel-container', props.className)}
+      data-hint-next={hintNext || undefined}
+      data-dragging={drag !== undefined || undefined}
+    >
+      {hintNext ? (
+        <div
+          className="carousel-track"
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerLeave={handlePointerUp}
+        >
+          <div className="carousel-track-inner">
+            {positionedSlides()}
+          </div>
+        </div>
+      ) : (
+        <div className="carousel-slide-frame">
+          {framedSlide}
+        </div>
+      )}
+      {overlays}
+    </div>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Carousel/CarouselContext.tsx b/packages/hightide-web/src/components/layout/Carousel/CarouselContext.tsx
new file mode 100644
index 00000000..f0a371ad
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Carousel/CarouselContext.tsx
@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+import { createContext, useContext } from 'react'
+
+export type CarouselContextState = {
+  id: string,
+  currentIndex: number,
+  slideCount: number,
+  setSlideCount: (count: number) => void,
+  isLooping: boolean,
+  hintNext: boolean,
+  transitionDuration: number,
+  isDragging: boolean,
+  setIsDragging: (isDragging: boolean) => void,
+  goTo: (index: number) => void,
+  goPrevious: () => void,
+  goNext: () => void,
+  canGoPrevious: boolean,
+  canGoNext: boolean,
+}
+
+export const CarouselContext = createContext<CarouselContextState | null>(null)
+
+export function useCarouselContext() {
+  const context = useContext(CarouselContext)
+  if (!context) {
+    throw new Error('Carousel components must be used within a Carousel.Root')
+  }
+  return context
+}
+
+export type CarouselContextProviderProps = {
+  value: CarouselContextState,
+  children: ReactNode,
+}
+
+export function CarouselContextProvider({ value, children }: CarouselContextProviderProps) {
+  return (
+    <CarouselContext.Provider value={value}>
+      {children}
+    </CarouselContext.Provider>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Carousel/CarouselFadeLayover.tsx b/packages/hightide-web/src/components/layout/Carousel/CarouselFadeLayover.tsx
new file mode 100644
index 00000000..1191be97
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Carousel/CarouselFadeLayover.tsx
@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+export type CarouselFadeLayoverProps = HTMLAttributes<HTMLDivElement>
+
+export function CarouselFadeLayover({
+  className,
+  ...props
+}: CarouselFadeLayoverProps) {
+  return (
+    <>
+      <div
+        {...props}
+        data-side="start"
+        className={clsx('carousel-fade-layover', className)}
+      />
+      <div
+        {...props}
+        data-side="end"
+        className={clsx('carousel-fade-layover', className)}
+      />
+    </>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Carousel/CarouselRoot.tsx b/packages/hightide-web/src/components/layout/Carousel/CarouselRoot.tsx
new file mode 100644
index 00000000..ea43b134
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Carousel/CarouselRoot.tsx
@@ -0,0 +1,163 @@
+import type { HTMLAttributes } from 'react'
+import { useCallback, useEffect, useId, useMemo, useState } from 'react'
+import clsx from 'clsx'
+import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
+import { useEventCallbackStabilizer, useLogOnce } from '@helpwave/hightide-utils/hooks'
+
+import { CarouselContextProvider } from './CarouselContext'
+
+export type CarouselRootProps = HTMLAttributes<HTMLDivElement> & {
+  animationTime?: number,
+  isLooping?: boolean,
+  isAutoPlaying?: boolean,
+  autoLoopingTimeOut?: number,
+  autoLoopAnimationTime?: number,
+  hintNext?: boolean,
+  onSlideChanged?: (index: number) => void,
+}
+
+export function CarouselRoot({
+  children,
+  animationTime = 200,
+  isLooping = false,
+  isAutoPlaying = false,
+  autoLoopingTimeOut = 5000,
+  autoLoopAnimationTime = 1000,
+  hintNext = false,
+  onSlideChanged,
+  ...props
+}: CarouselRootProps) {
+  const translation = useHightideTranslation()
+  const onSlideChangedStable = useEventCallbackStabilizer(onSlideChanged)
+  const generatedId = useId()
+  const id = props.id ?? `carousel-${generatedId}`
+  const loops = isAutoPlaying || isLooping
+  const stepDuration = Math.max(100, animationTime)
+  const autoDuration = Math.max(200, autoLoopAnimationTime)
+  const autoDelay = Math.max(0, autoLoopingTimeOut)
+
+  useLogOnce(
+    'Carousel: isAutoPlaying requires isLooping',
+    isAutoPlaying && !isLooping,
+    { type: 'error' }
+  )
+
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [slideCount, setSlideCount] = useState(0)
+  const [isPaused, setIsPaused] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const goTo = useCallback((index: number) => {
+    setCurrentIndex((previous) => {
+      if (slideCount <= 0) {
+        return previous
+      }
+      if (loops) {
+        return (index % slideCount + slideCount) % slideCount
+      }
+      return Math.min(Math.max(index, 0), slideCount - 1)
+    })
+  }, [loops, slideCount])
+
+  const canGoPrevious = loops || currentIndex !== 0
+  const canGoNext = slideCount > 0 && (loops || currentIndex !== slideCount - 1)
+
+  const goPrevious = useCallback(() => {
+    setCurrentIndex((previous) => {
+      if (slideCount <= 0) {
+        return previous
+      }
+      if (!loops && previous === 0) {
+        return previous
+      }
+      return (previous - 1 + slideCount) % slideCount
+    })
+  }, [loops, slideCount])
+
+  const goNext = useCallback(() => {
+    setCurrentIndex((previous) => {
+      if (slideCount <= 0) {
+        return previous
+      }
+      if (!loops && previous === slideCount - 1) {
+        return previous
+      }
+      return (previous + 1) % slideCount
+    })
+  }, [loops, slideCount])
+
+  useEffect(() => {
+    if (slideCount <= 0) {
+      return
+    }
+    if (currentIndex > slideCount - 1) {
+      setCurrentIndex(slideCount - 1)
+    }
+  }, [currentIndex, slideCount])
+
+  useEffect(() => {
+    onSlideChangedStable(currentIndex)
+  }, [currentIndex, onSlideChangedStable])
+
+  useEffect(() => {
+    if (!isAutoPlaying || isPaused || isDragging || slideCount <= 0) {
+      return
+    }
+    const timeout = setTimeout(() => {
+      goNext()
+    }, autoDelay)
+    return () => clearTimeout(timeout)
+  }, [autoDelay, goNext, isAutoPlaying, isDragging, isPaused, slideCount])
+
+  const transitionDuration = isAutoPlaying && !isPaused ? autoDuration : stepDuration
+
+  const contextValue = useMemo(() => ({
+    id,
+    currentIndex,
+    slideCount,
+    setSlideCount,
+    isLooping: loops,
+    hintNext,
+    transitionDuration,
+    isDragging,
+    setIsDragging,
+    goTo,
+    goPrevious,
+    goNext,
+    canGoPrevious,
+    canGoNext,
+  }), [
+    canGoNext,
+    canGoPrevious,
+    currentIndex,
+    goNext,
+    goPrevious,
+    goTo,
+    hintNext,
+    id,
+    isDragging,
+    loops,
+    slideCount,
+    transitionDuration,
+  ])
+
+  return (
+    <CarouselContextProvider value={contextValue}>
+      <div
+        {...props}
+        id={id}
+        className={clsx('carousel', props.className)}
+        data-looping={loops || undefined}
+        data-auto-playing={isAutoPlaying || undefined}
+        data-paused={isPaused || undefined}
+        data-hint-next={hintNext || undefined}
+        role="region"
+        aria-roledescription={translation('slide')}
+        onFocus={() => setIsPaused(true)}
+        onBlur={() => setIsPaused(false)}
+      >
+        {children}
+      </div>
+    </CarouselContextProvider>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Carousel/CarouselSlide.tsx b/packages/hightide-web/src/components/layout/Carousel/CarouselSlide.tsx
new file mode 100644
index 00000000..cb40fc1f
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Carousel/CarouselSlide.tsx
@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import clsx from 'clsx'
+import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
+
+import { useCarouselContext } from './CarouselContext'
+
+export type CarouselSlideProps = HTMLAttributes<HTMLDivElement> & {
+  index?: number,
+  isSelected?: boolean,
+  isClone?: boolean,
+}
+
+export const CarouselSlide = forwardRef<HTMLDivElement, CarouselSlideProps>(function CarouselSlide({
+  index = 0,
+  isSelected = false,
+  isClone = false,
+  ...props
+}, ref) {
+  const translation = useHightideTranslation()
+  const { id, slideCount } = useCarouselContext()
+
+  return (
+    <div
+      {...props}
+      ref={ref}
+      id={isClone ? undefined : props.id ?? `${id}-slide-${index}`}
+      className={clsx('carousel-slide group/slide', props.className)}
+      data-selected={isSelected || undefined}
+      data-clone={isClone || undefined}
+      tabIndex={isSelected ? 0 : undefined}
+      role="group"
+      aria-roledescription={translation('slide')}
+      aria-label={translation('slideOf', {
+        index: index + 1,
+        length: slideCount,
+      })}
+      aria-hidden={isSelected ? undefined : true}
+    />
+  )
+})
diff --git a/packages/hightide-web/src/components/layout/Carousel/CarouselStepper.tsx b/packages/hightide-web/src/components/layout/Carousel/CarouselStepper.tsx
new file mode 100644
index 00000000..8f0144c0
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Carousel/CarouselStepper.tsx
@@ -0,0 +1,68 @@
+import type { KeyboardEvent } from 'react'
+import { useRef } from 'react'
+import clsx from 'clsx'
+import { range } from '@helpwave/hightide-utils/utils'
+import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
+
+import { useCarouselContext } from './CarouselContext'
+
+export type CarouselStepperProps = {
+  className?: string,
+}
+
+export function CarouselStepper({ className }: CarouselStepperProps) {
+  const translation = useHightideTranslation()
+  const { id, slideCount, currentIndex, isLooping, goTo } = useCarouselContext()
+  const tabRefs = useRef<(HTMLButtonElement | null)[]>([])
+
+  const move = (index: number, direction: 1 | -1) => {
+    const next = isLooping
+      ? (index + direction + slideCount) % slideCount
+      : Math.min(Math.max(index + direction, 0), slideCount - 1)
+    goTo(next)
+    tabRefs.current[next]?.focus()
+  }
+
+  const handleKeyDown = (event: KeyboardEvent, index: number) => {
+    if (event.key === 'ArrowRight') {
+      event.preventDefault()
+      move(index, 1)
+    } else if (event.key === 'ArrowLeft') {
+      event.preventDefault()
+      move(index, -1)
+    }
+  }
+
+  return (
+    <div
+      className={clsx('carousel-stepper', className)}
+      role="tablist"
+      aria-label={translation('slideNavigation')}
+      id={`${id}-tablist`}
+    >
+      {range(slideCount).map((index) => {
+        const isSelected = currentIndex === index
+        return (
+          <button
+            id={`${id}-tab-${index}`}
+            key={index}
+            ref={(element) => {
+              tabRefs.current[index] = element
+            }}
+            onClick={() => goTo(index)}
+            onKeyDown={(event) => handleKeyDown(event, index)}
+            className="carousel-stepper-tab"
+            data-selected={isSelected || undefined}
+            type="button"
+            role="tab"
+            tabIndex={isSelected ? 0 : -1}
+            aria-label={translation('showSlide', { index: index + 1 })}
+            aria-selected={isSelected}
+            aria-controls={`${id}-slide-${index}`}
+            aria-disabled={isSelected}
+          />
+        )
+      })}
+    </div>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Carousel/index.ts b/packages/hightide-web/src/components/layout/Carousel/index.ts
new file mode 100644
index 00000000..f3a18837
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Carousel/index.ts
@@ -0,0 +1,11 @@
+export { Carousel } from './Carousel'
+export { CarouselRoot } from './CarouselRoot'
+export { CarouselContainer } from './CarouselContainer'
+export { CarouselSlide } from './CarouselSlide'
+export { CarouselArrows } from './CarouselArrows'
+export { CarouselFadeLayover } from './CarouselFadeLayover'
+export { CarouselStepper } from './CarouselStepper'
+export { useCarouselContext } from './CarouselContext'
+
+export type { CarouselProps, CarouselRootProps, CarouselContainerProps, CarouselSlideProps, CarouselArrowsProps, CarouselFadeLayoverProps, CarouselStepperProps } from './Carousel'
+export type { CarouselContextState } from './CarouselContext'
diff --git a/packages/hightide-web/src/style/theme/components/carousel.css b/packages/hightide-web/src/style/theme/components/carousel.css
new file mode 100644
index 00000000..32b7e4cf
--- /dev/null
+++ b/packages/hightide-web/src/style/theme/components/carousel.css
@@ -0,0 +1,70 @@
+@layer components {
+  .carousel {
+    @apply flex-col-2 items-center w-full;
+  }
+
+  .carousel-container {
+    @apply relative w-full overflow-hidden;
+  }
+
+  .carousel-track {
+    @apply flex-row-2 relative h-full;
+  }
+
+  .carousel-track-inner {
+    @apply flex-row-2 relative h-full w-full px-2 overflow-hidden;
+  }
+
+  .carousel-slide-frame {
+    @apply px-16 h-full;
+  }
+
+  .carousel-slide {
+    @apply focus-style-none;
+  }
+
+  .carousel-container[data-hint-next] .carousel-slide {
+    @apply absolute left-[50%] h-full overflow-hidden transition-transform ease-in-out;
+  }
+
+  .carousel-fade-layover {
+    @apply hidden desktop:block pointer-events-none absolute h-full w-[20%] to-transparent;
+  }
+
+  .carousel-fade-layover[data-side="start"] {
+    @apply left-0 bg-gradient-to-r;
+  }
+
+  .carousel-fade-layover[data-side="end"] {
+    @apply right-0 bg-gradient-to-l;
+  }
+
+  .carousel-arrow {
+    @apply absolute z-10 top-1/2 -translate-y-1/2 shadow-md;
+    --coloring-position-override: absolute;
+  }
+
+  .carousel-arrow[data-direction="previous"] {
+    @apply left-2;
+  }
+
+  .carousel-arrow[data-direction="next"] {
+    @apply right-2;
+  }
+
+  .carousel-arrow[data-hidden] {
+    @apply hidden;
+  }
+
+  .carousel-stepper {
+    @apply flex-row-1 items-center justify-center w-full my-2;
+  }
+
+  .carousel-stepper-tab {
+    @apply w-8 min-w-8 h-3 min-h-3 first:rounded-l-md last:rounded-r-md bg-carousel-dot-disabled hover:bg-carousel-dot-active;
+  }
+
+  .carousel-stepper-tab[data-selected] {
+    @apply bg-carousel-dot-active hover:brightness-90;
+  }
+}
diff --git a/packages/hightide-web/src/style/theme/components/index.css b/packages/hightide-web/src/style/theme/components/index.css
index 3e8e0afe..c7723d36 100644
--- a/packages/hightide-web/src/style/theme/components/index.css
+++ b/packages/hightide-web/src/style/theme/components/index.css
@@ -5,6 +5,7 @@
 @import "./icon.css";
 @import "./icon-button.css";
 @import "./card.css";
+@import "./carousel.css";
 @import "./list-item.css";
 @import "./divider.css";
 @import "./chip.css";

From 99c3588c4dd70065c61c367e2281842948c1a7b6 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Wed, 30 Sep 2026 16:04:16 +0200
Subject: [PATCH 17/25] feat: update modal component

---
 packages/hightide-web/CHANGELOG.md            |  12 ++
 .../ConfirmModal.tsx}                         |  50 ++---
 .../DiscardChangesModal.tsx}                  |  35 ++--
 .../components/layout/Modal/InputModal.tsx    |  23 +++
 .../LanguageModal.tsx}                        |  31 ++--
 .../src/components/layout/Modal/Modal.tsx     |  99 ++++++++++
 .../layout/Modal/ModalBackground.tsx          |  28 +++
 .../layout/Modal/ModalCloseButton.tsx         |  37 ++++
 .../layout/Modal/ModalContainer.tsx           | 119 ++++++++++++
 .../components/layout/Modal/ModalContent.tsx  |  46 +++++
 .../components/layout/Modal/ModalContext.tsx  |  34 ++++
 .../layout/Modal/ModalDescription.tsx         |  31 ++++
 .../components/layout/Modal/ModalOpener.tsx   |  43 +++++
 .../src/components/layout/Modal/ModalRoot.tsx |  38 ++++
 .../components/layout/Modal/ModalTitle.tsx    |  28 +++
 .../ThemeDialog.tsx => Modal/ThemeModal.tsx}  |  35 ++--
 .../src/components/layout/Modal/index.ts      |  29 +++
 .../src/components/layout/dialog/Dialog.tsx   | 173 ------------------
 .../layout/dialog/DialogContext.tsx           |  18 --
 .../components/layout/dialog/DialogOpener.tsx |  42 -----
 .../components/layout/dialog/DialogRoot.tsx   |  30 ---
 .../src/components/layout/dialog/index.ts     |   5 -
 .../layout/dialog/premade/InputDialog.tsx     |  26 ---
 .../components/layout/dialog/premade/index.ts |   5 -
 .../src/components/layout/index.ts            |   2 +-
 .../FileInput/FileInputMenu.tsx               |  72 ++++----
 .../src/style/theme/components/button.css     |   8 +-
 .../src/style/theme/components/index.css      |   2 +-
 .../components/{dialog.css => modal.css}      |  44 ++++-
 .../ExtendTranslations.stories.tsx            |   2 +-
 ....stories.tsx => LanguageModal.stories.tsx} |   6 +-
 .../Layout/Dialog/StackedDialog.stories.tsx   |  86 ---------
 .../ConfirmModal.stories.tsx}                 |  11 +-
 .../DiscardChangesModal.stories.tsx}          |   8 +-
 .../Layout/Modal/StackedModal.stories.tsx     |  80 ++++++++
 ...log.stories.tsx => ThemeModal.stories.tsx} |   6 +-
 .../stories/Themeing/ThemeSelect.stories.tsx  |   2 +-
 .../Focus Management/FocusTrap.stories.tsx    |   8 +-
 38 files changed, 836 insertions(+), 518 deletions(-)
 rename packages/hightide-web/src/components/layout/{dialog/premade/ConfirmDialog.tsx => Modal/ConfirmModal.tsx} (64%)
 rename packages/hightide-web/src/components/layout/{dialog/premade/DiscardChangesDialog.tsx => Modal/DiscardChangesModal.tsx} (53%)
 create mode 100644 packages/hightide-web/src/components/layout/Modal/InputModal.tsx
 rename packages/hightide-web/src/components/layout/{dialog/premade/LanguageDialog.tsx => Modal/LanguageModal.tsx} (70%)
 create mode 100644 packages/hightide-web/src/components/layout/Modal/Modal.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Modal/ModalBackground.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Modal/ModalContainer.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Modal/ModalContent.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Modal/ModalContext.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Modal/ModalDescription.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Modal/ModalOpener.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Modal/ModalRoot.tsx
 create mode 100644 packages/hightide-web/src/components/layout/Modal/ModalTitle.tsx
 rename packages/hightide-web/src/components/layout/{dialog/premade/ThemeDialog.tsx => Modal/ThemeModal.tsx} (73%)
 create mode 100644 packages/hightide-web/src/components/layout/Modal/index.ts
 delete mode 100644 packages/hightide-web/src/components/layout/dialog/Dialog.tsx
 delete mode 100644 packages/hightide-web/src/components/layout/dialog/DialogContext.tsx
 delete mode 100644 packages/hightide-web/src/components/layout/dialog/DialogOpener.tsx
 delete mode 100644 packages/hightide-web/src/components/layout/dialog/DialogRoot.tsx
 delete mode 100644 packages/hightide-web/src/components/layout/dialog/index.ts
 delete mode 100644 packages/hightide-web/src/components/layout/dialog/premade/InputDialog.tsx
 delete mode 100644 packages/hightide-web/src/components/layout/dialog/premade/index.ts
 rename packages/hightide-web/src/style/theme/components/{dialog.css => modal.css} (59%)
 rename packages/hightide-web/stories/Internationalization/{LanguageDialog.stories.tsx => LanguageModal.stories.tsx} (52%)
 delete mode 100644 packages/hightide-web/stories/Layout/Dialog/StackedDialog.stories.tsx
 rename packages/hightide-web/stories/Layout/{Dialog/ConfirmDialog.stories.tsx => Modal/ConfirmModal.stories.tsx} (57%)
 rename packages/hightide-web/stories/Layout/{Dialog/DiscardChangesDialog.stories.tsx => Modal/DiscardChangesModal.stories.tsx} (57%)
 create mode 100644 packages/hightide-web/stories/Layout/Modal/StackedModal.stories.tsx
 rename packages/hightide-web/stories/Themeing/{ThemeDialog.stories.tsx => ThemeModal.stories.tsx} (54%)

diff --git a/packages/hightide-web/CHANGELOG.md b/packages/hightide-web/CHANGELOG.md
index 586cdf5d..2d7bb9cd 100644
--- a/packages/hightide-web/CHANGELOG.md
+++ b/packages/hightide-web/CHANGELOG.md
@@ -58,6 +58,13 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Coloring custom properties start as `initial` instead of `transparent`
 - `Select` and `MultiSelect` show the search field when the option count is at least `searchableThreshold` (default `6`)
 - `Carousel` is a compound component: `Carousel.Root`, `Carousel.Container`, `Carousel.Slide`, `Carousel.Arrows`, `Carousel.FadeLayover`, `Carousel.Stepper`, `Carousel.Context`, and `Carousel.Consumer`. The combined `Carousel` still composes them from `children`, `hintNext`, `arrows`, `dots`, and `blurColor`
+- `Modal` is a compound component: `Modal.Root`, `Modal.Container`, `Modal.Background`, `Modal.Content`, `Modal.Title`, `Modal.Description`, `Modal.CloseButton`, `Modal.Opener`, `Modal.Context`, and `Modal.Consumer`. The combined `Modal` takes `titleElement`, `description`, `position`, `isClosable`, and slot props `containerProps`, `backgroundProps`, `contentProps`, `titleProps`, `descriptionProps`, and `closeButtonProps`
+- `isClosable` (default `true`) hides the close button and ignores close requests when `false`
+- `Modal.Container` closes on Escape when the event default has not been prevented
+- `ConfirmDialog` is `ConfirmModal`, `DiscardChangesDialog` is `DiscardChangesModal`, `InputDialog` is `InputModal`, `LanguageDialog` is `LanguageModal`, and `ThemeDialog` is `ThemeModal`
+- `Modal` content max width is `calc(min(100vw - 1rem, 60rem))` by default, `calc(min(100vw - 2rem, 80rem))` from the tablet breakpoint, and `calc(min(100vw - 4rem, 120rem))` from the desktop breakpoint
+- `Modal` content min height is `calc(min(64rem, 100vh - 1rem))` by default, `calc(min(64rem, 100vh - 2rem))` from the tablet breakpoint, and `calc(min(64rem, 100vh - 4rem))` from the desktop breakpoint
+- `ConfirmModal` and `DiscardChangesModal` action buttons stack in a column below the tablet breakpoint
 
 ### Removed
 
@@ -74,6 +81,11 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `showSearch` on `Select` and `MultiSelect`
 - Standalone `CarouselTabs` and `CarouselSlide`. Use `Carousel.Stepper` and `Carousel.Slide`
 - Unused `Carousel` prop `overScrollThreshold`
+- `Dialog`, `DialogRoot`, and `DialogOpenerWrapper`. Use `Modal`
+- CSS classes `dialog-container`, `dialog-background`, and `dialog-content`. Use `modal-container`, `modal-background`, and `modal-content`
+- `isModal` on `Modal`. A modal is always a modal
+- `backgroundClassName` and `containerClassName` on `Modal`. Use `backgroundProps` and `containerProps`
+- `ConfirmDialog`, `DiscardChangesDialog`, `InputDialog`, `LanguageDialog`, and `ThemeDialog`
 
 
 ## [0.17.2] - 2026-09-23
diff --git a/packages/hightide-web/src/components/layout/dialog/premade/ConfirmDialog.tsx b/packages/hightide-web/src/components/layout/Modal/ConfirmModal.tsx
similarity index 64%
rename from packages/hightide-web/src/components/layout/dialog/premade/ConfirmDialog.tsx
rename to packages/hightide-web/src/components/layout/Modal/ConfirmModal.tsx
index eacce9de..71500901 100644
--- a/packages/hightide-web/src/components/layout/dialog/premade/ConfirmDialog.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/ConfirmModal.tsx
@@ -1,12 +1,13 @@
 import type { PropsWithChildren } from 'react'
-import type { ButtonColor } from '../../../user-interaction/Button'
-import { Button } from '../../../user-interaction/Button'
-import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import clsx from 'clsx'
-import type { DialogProps } from '../Dialog'
-import { Dialog } from '../Dialog'
+import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
-export type ConfirmDialogType = 'positive' | 'negative' | 'neutral' | 'primary'
+import type { ButtonColor } from '../../user-interaction/Button'
+import { Button } from '../../user-interaction/Button'
+import type { ModalProps } from './Modal'
+import { Modal } from './Modal'
+
+export type ConfirmModalType = 'positive' | 'negative' | 'neutral' | 'primary'
 
 type ButtonOverwriteType = {
   text?: string,
@@ -14,35 +15,31 @@ type ButtonOverwriteType = {
   disabled?: boolean,
 }
 
-export type ConfirmDialogProps = Omit<DialogProps, 'onClose'> & {
+export type ConfirmModalProps = Omit<ModalProps, 'onClose'> & {
   isShowingDecline?: boolean,
   requireAnswer?: boolean,
   onCancel: () => void,
   onConfirm: () => void,
   onDecline?: () => void,
-  confirmType?: ConfirmDialogType,
-  /**
-   * Order: Cancel, Decline, Confirm
-   */
+  confirmType?: ConfirmModalType,
   buttonOverwrites?: [ButtonOverwriteType, ButtonOverwriteType, ButtonOverwriteType],
 }
 
-/**
- * A Dialog for asking the user for confirmation
- */
-export const ConfirmDialog = ({
+export const ConfirmModal = ({
   children,
   onCancel,
   onConfirm,
   onDecline,
   confirmType = 'positive',
   buttonOverwrites,
-  className,
+  contentProps,
+  isShowingDecline: _isShowingDecline,
+  requireAnswer: _requireAnswer,
   ...restProps
-}: PropsWithChildren<ConfirmDialogProps>) => {
+}: PropsWithChildren<ConfirmModalProps>) => {
   const translation = useHightideTranslation()
 
-  const mapping: Record<ConfirmDialogType, ButtonColor> = {
+  const mapping: Record<ConfirmModalType, ButtonColor> = {
     neutral: 'neutral',
     negative: 'negative',
     positive: 'positive',
@@ -50,13 +47,21 @@ export const ConfirmDialog = ({
   }
 
   return (
-    <Dialog {...restProps} onClose={onCancel} className={clsx('justify-between', className)}>
+    <Modal
+      {...restProps}
+      onClose={onCancel}
+      contentProps={{
+        ...contentProps,
+        className: clsx('justify-between', contentProps?.className),
+      }}
+    >
       <div className="flex-col-2 grow">
         {children}
       </div>
-      <div className="flex-row-4 mt-3 justify-end">
+      <div className="modal-actions">
         {onCancel && (
           <Button
+            className="modal-actions-button"
             color={buttonOverwrites?.[0].color ?? 'neutral'}
             onClick={onCancel}
             disabled={buttonOverwrites?.[0].disabled ?? false}
@@ -66,15 +71,16 @@ export const ConfirmDialog = ({
         )}
         {onDecline && (
           <Button
+            className="modal-actions-button"
             color={buttonOverwrites?.[1].color ?? 'negative'}
             onClick={onDecline}
-
             disabled={buttonOverwrites?.[1].disabled ?? false}
           >
             {buttonOverwrites?.[1].text ?? translation('decline')}
           </Button>
         )}
         <Button
+          className="modal-actions-button"
           color={buttonOverwrites?.[2].color ?? mapping[confirmType] ?? undefined}
           onClick={onConfirm}
           disabled={buttonOverwrites?.[2].disabled ?? false}
@@ -82,6 +88,6 @@ export const ConfirmDialog = ({
           {buttonOverwrites?.[2].text ?? translation('confirm')}
         </Button>
       </div>
-    </Dialog>
+    </Modal>
   )
 }
diff --git a/packages/hightide-web/src/components/layout/dialog/premade/DiscardChangesDialog.tsx b/packages/hightide-web/src/components/layout/Modal/DiscardChangesModal.tsx
similarity index 53%
rename from packages/hightide-web/src/components/layout/dialog/premade/DiscardChangesDialog.tsx
rename to packages/hightide-web/src/components/layout/Modal/DiscardChangesModal.tsx
index 423326f4..f1354786 100644
--- a/packages/hightide-web/src/components/layout/dialog/premade/DiscardChangesDialog.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/DiscardChangesModal.tsx
@@ -1,21 +1,22 @@
 import type { PropsWithChildren, ReactNode } from 'react'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import type { ConfirmDialogProps } from './ConfirmDialog'
-import { ConfirmDialog } from './ConfirmDialog'
 
-type DiscardChangesDialogProps =
-  Omit<ConfirmDialogProps, 'onDecline' | 'onConfirm' | 'buttonOverwrites' | 'titleElement' | 'description'>
+import type { ConfirmModalProps } from './ConfirmModal'
+import { ConfirmModal } from './ConfirmModal'
+
+type DiscardChangesModalProps =
+  Omit<ConfirmModalProps, 'onDecline' | 'onConfirm' | 'buttonOverwrites' | 'titleElement' | 'description'>
   & {
-  isShowingDecline?: boolean,
-  requireAnswer?: boolean,
-  onCancel: () => void,
-  onSave: () => void,
-  onDontSave: () => void,
-  titleOverwrite?: ReactNode,
-  descriptionOverwrite?: ReactNode,
-}
+    isShowingDecline?: boolean,
+    requireAnswer?: boolean,
+    onCancel: () => void,
+    onSave: () => void,
+    onDontSave: () => void,
+    titleOverwrite?: ReactNode,
+    descriptionOverwrite?: ReactNode,
+  }
 
-export const DiscardChangesDialog = ({
+export const DiscardChangesModal = ({
   children,
   onCancel,
   onSave,
@@ -23,10 +24,10 @@ export const DiscardChangesDialog = ({
   titleOverwrite,
   descriptionOverwrite,
   ...props
-}: PropsWithChildren<DiscardChangesDialogProps>) => {
+}: PropsWithChildren<DiscardChangesModalProps>) => {
   const translation = useHightideTranslation()
   return (
-    <ConfirmDialog
+    <ConfirmModal
       {...props}
       titleElement={titleOverwrite ?? translation('unsavedChanges')}
       description={descriptionOverwrite ?? translation('unsavedChangesSaveQuestion')}
@@ -36,6 +37,8 @@ export const DiscardChangesDialog = ({
       buttonOverwrites={[{ text: translation('cancel') }, { text: translation('discardChanges') }, { text: translation('save') }]}
     >
       {children}
-    </ConfirmDialog>
+    </ConfirmModal>
   )
 }
+
+export type { DiscardChangesModalProps }
diff --git a/packages/hightide-web/src/components/layout/Modal/InputModal.tsx b/packages/hightide-web/src/components/layout/Modal/InputModal.tsx
new file mode 100644
index 00000000..8f8fcb88
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/InputModal.tsx
@@ -0,0 +1,23 @@
+import type { InputProps } from '../../user-interaction/input/Input'
+import { Input } from '../../user-interaction/input/Input'
+import type { ConfirmModalProps } from './ConfirmModal'
+import { ConfirmModal } from './ConfirmModal'
+
+export type InputModalProps = ConfirmModalProps & {
+  inputs: InputProps[],
+}
+
+export const InputModal = ({
+  inputs,
+  buttonOverwrites,
+  ...props
+}: InputModalProps) => {
+  return (
+    <ConfirmModal
+      buttonOverwrites={buttonOverwrites}
+      {...props}
+    >
+      {inputs.map((inputProps, index) => <Input key={`input ${index}`} {...inputProps}/>)}
+    </ConfirmModal>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/dialog/premade/LanguageDialog.tsx b/packages/hightide-web/src/components/layout/Modal/LanguageModal.tsx
similarity index 70%
rename from packages/hightide-web/src/components/layout/dialog/premade/LanguageDialog.tsx
rename to packages/hightide-web/src/components/layout/Modal/LanguageModal.tsx
index a824d2be..39d3c8c1 100644
--- a/packages/hightide-web/src/components/layout/dialog/premade/LanguageDialog.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/LanguageModal.tsx
@@ -1,13 +1,14 @@
 import type { PropsWithChildren, ReactNode } from 'react'
-import type { DialogProps } from '../Dialog'
-import { Dialog } from '../Dialog'
-import { useLocalization } from '../../../../global-contexts/localization/forward-exports'
-import { Button } from '../../../user-interaction/Button'
-import type { SelectProps } from '../../../user-interaction/Select/SelectComponent'
-import { Select } from '../../../user-interaction/Select/Select'
 import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
+import { useLocalization } from '../../../global-contexts/localization/forward-exports'
+import { Button } from '../../user-interaction/Button'
+import type { SelectProps } from '../../user-interaction/Select/SelectComponent'
+import { Select } from '../../user-interaction/Select/Select'
+import type { ModalProps } from './Modal'
+import { Modal } from './Modal'
+
 type LanguageSelectProps = Omit<SelectProps, 'value' | 'children'>
 
 export const LanguageSelect = ({ ...props }: LanguageSelectProps) => {
@@ -39,26 +40,30 @@ export const LanguageSelect = ({ ...props }: LanguageSelectProps) => {
   )
 }
 
-type LanguageDialogProps = Omit<DialogProps, 'titleElement' | 'description'> & PropsWithChildren<{
+type LanguageModalProps = Omit<ModalProps, 'titleElement' | 'description'> & PropsWithChildren<{
   titleOverwrite?: ReactNode,
   descriptionOverwrite?: ReactNode,
 }>
 
-export const LanguageDialog = ({
+export const LanguageModal = ({
   onClose,
   titleOverwrite,
   descriptionOverwrite,
+  contentProps,
   ...props
-}: LanguageDialogProps) => {
+}: LanguageModalProps) => {
   const translation = useHightideTranslation()
 
   return (
-    <Dialog
+    <Modal
+      {...props}
       titleElement={titleOverwrite ?? translation('language')}
       description={descriptionOverwrite ?? translation('chooseLanguage')}
       onClose={onClose}
-      className={clsx('w-80', props.className)}
-      {...props}
+      contentProps={{
+        ...contentProps,
+        className: clsx('w-80', contentProps?.className),
+      }}
     >
       <LanguageSelect />
       <div className="flex-row-4 mt-3 justify-end">
@@ -66,6 +71,6 @@ export const LanguageDialog = ({
           {translation('done')}
         </Button>
       </div>
-    </Dialog>
+    </Modal>
   )
 }
diff --git a/packages/hightide-web/src/components/layout/Modal/Modal.tsx b/packages/hightide-web/src/components/layout/Modal/Modal.tsx
new file mode 100644
index 00000000..83129ef5
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/Modal.tsx
@@ -0,0 +1,99 @@
+'use client'
+
+import type { ForwardedRef, ReactNode } from 'react'
+import { forwardRef } from 'react'
+import clsx from 'clsx'
+
+import { ModalBackground } from './ModalBackground'
+import type { ModalBackgroundProps } from './ModalBackground'
+import { ModalCloseButton } from './ModalCloseButton'
+import type { ModalCloseButtonProps } from './ModalCloseButton'
+import { ModalContainer } from './ModalContainer'
+import type { ModalContainerProps } from './ModalContainer'
+import { ModalContent } from './ModalContent'
+import type { ModalContentProps, ModalPosition } from './ModalContent'
+import { ModalContext } from './ModalContext'
+import { ModalDescription } from './ModalDescription'
+import type { ModalDescriptionProps } from './ModalDescription'
+import { ModalOpener } from './ModalOpener'
+import { ModalRoot } from './ModalRoot'
+import { ModalTitle } from './ModalTitle'
+import type { ModalTitleProps } from './ModalTitle'
+
+export type { ModalPosition }
+
+export type ModalProps = {
+  isOpen?: boolean,
+  titleElement: ReactNode,
+  description: ReactNode,
+  onClose?: () => void,
+  position?: ModalPosition,
+  isClosable?: boolean,
+  children?: ReactNode,
+  containerProps?: Omit<ModalContainerProps, 'children' | 'isOpen' | 'onClose' | 'isClosable' | 'hasDescription' | 'contentId'>,
+  backgroundProps?: ModalBackgroundProps,
+  contentProps?: Omit<ModalContentProps, 'children'>,
+  titleProps?: Omit<ModalTitleProps, 'children'>,
+  descriptionProps?: Omit<ModalDescriptionProps, 'children'>,
+  closeButtonProps?: ModalCloseButtonProps,
+}
+
+const ModalComponent = forwardRef<HTMLDivElement, ModalProps>(function Modal({
+  children,
+  isOpen,
+  titleElement,
+  description,
+  onClose,
+  position = 'center',
+  isClosable = true,
+  containerProps,
+  backgroundProps,
+  contentProps,
+  titleProps,
+  descriptionProps,
+  closeButtonProps,
+}, forwardedRef: ForwardedRef<HTMLDivElement>) {
+  return (
+    <ModalContainer
+      {...containerProps}
+      isOpen={isOpen}
+      onClose={onClose}
+      isClosable={isClosable}
+      hasDescription={!!description}
+      contentId={contentProps?.id}
+      className={clsx(containerProps?.className)}
+    >
+      <ModalBackground {...backgroundProps} />
+      <ModalContent
+        {...contentProps}
+        ref={forwardedRef}
+        position={position}
+        className={clsx(contentProps?.className)}
+      >
+        <ModalTitle {...titleProps}>
+          {titleElement}
+        </ModalTitle>
+        <ModalDescription {...descriptionProps}>
+          {description}
+        </ModalDescription>
+        <ModalCloseButton {...closeButtonProps} />
+        {children}
+      </ModalContent>
+    </ModalContainer>
+  )
+})
+
+const Modal = Object.assign(ModalComponent, {
+  Root: ModalRoot,
+  Container: ModalContainer,
+  Background: ModalBackground,
+  Content: ModalContent,
+  Title: ModalTitle,
+  Description: ModalDescription,
+  CloseButton: ModalCloseButton,
+  Opener: ModalOpener,
+  Context: ModalContext,
+  Consumer: ModalContext.Consumer,
+})
+
+export { Modal }
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalBackground.tsx b/packages/hightide-web/src/components/layout/Modal/ModalBackground.tsx
new file mode 100644
index 00000000..854162c3
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/ModalBackground.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+import { useModalContext } from './ModalContext'
+
+export type ModalBackgroundProps = HTMLAttributes<HTMLDivElement>
+
+export function ModalBackground({
+  ...props
+}: ModalBackgroundProps) {
+  const context = useModalContext()
+  if (!context.ids || !context.onClose || context.transitionState === undefined) {
+    throw new Error('Modal.Background must be used within a Modal.Container')
+  }
+
+  return (
+    <div
+      {...props}
+      id={context.ids.background}
+      onClick={context.onClose}
+      data-state={context.transitionState}
+      aria-hidden={true}
+      className={clsx('modal-background', props.className)}
+    />
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx b/packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx
new file mode 100644
index 00000000..659b3b5e
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import clsx from 'clsx'
+import { X } from 'lucide-react'
+import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
+
+import { Visibility } from '../Visibility'
+import type { IconButtonProps } from '../../user-interaction/IconButton'
+import { IconButton } from '../../user-interaction/IconButton'
+import { useModalContext } from './ModalContext'
+
+export type ModalCloseButtonProps = IconButtonProps
+
+export function ModalCloseButton({
+  ...props
+}: ModalCloseButtonProps) {
+  const translation = useHightideTranslation()
+  const context = useModalContext()
+  if (!context.onClose) {
+    throw new Error('Modal.CloseButton must be used within a Modal.Container')
+  }
+
+  return (
+    <Visibility isVisible={context.isClosable}>
+      <IconButton
+        tooltip={translation('closeDialog')}
+        size="md"
+        color="neutral"
+        variant="foreground"
+        onClick={context.onClose}
+        icon={X}
+        {...props}
+        className={clsx('modal-close-button', props.className)}
+      />
+    </Visibility>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalContainer.tsx b/packages/hightide-web/src/components/layout/Modal/ModalContainer.tsx
new file mode 100644
index 00000000..31c9be99
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/ModalContainer.tsx
@@ -0,0 +1,119 @@
+'use client'
+
+import type { HTMLAttributes, SetStateAction } from 'react'
+import { useCallback, useContext, useId, useMemo, useRef } from 'react'
+import clsx from 'clsx'
+import { useEventCallbackStabilizer, useLogOnce, useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
+
+import { useFocusTrap } from '../../../hooks/focus/useFocusTrap'
+import { usePresenceRef } from '../../../hooks/usePresenceRef'
+import { useTransitionState } from '../../../hooks/useTransitionState'
+import { Portal } from '../../utils/Portal'
+import { Visibility } from '../Visibility'
+import { PropsUtil } from '../../../utils/propsUtil'
+import { ModalContext } from './ModalContext'
+import type { ModalIds } from './ModalContext'
+
+export type ModalContainerProps = HTMLAttributes<HTMLDivElement> & {
+  isOpen?: boolean,
+  onClose?: () => void,
+  isClosable?: boolean,
+  hasDescription?: boolean,
+  contentId?: string,
+}
+
+export function ModalContainer({
+  children,
+  isOpen: isOpenProp,
+  onClose,
+  isClosable: isClosableProp,
+  hasDescription = false,
+  contentId,
+  ...props
+}: ModalContainerProps) {
+  const parent = useContext(ModalContext)
+  const generatedId = useId()
+  const isOpen = isOpenProp ?? parent?.isOpen ?? false
+  const isClosable = isClosableProp ?? parent?.isClosable ?? true
+  const parentSetIsOpen = parent?.setIsOpen
+  const setIsOpen = useCallback((action: SetStateAction<boolean>) => {
+    const next = typeof action === 'function' ? action(isOpen) : action
+    if (!isClosable && isOpen && !next) {
+      return
+    }
+    parentSetIsOpen?.(next)
+  }, [isClosable, isOpen, parentSetIsOpen])
+  const containerRef = useRef<HTMLDivElement>(null)
+  const onCloseStable = useEventCallbackStabilizer(onClose)
+
+  const ids = useMemo<ModalIds>(() => ({
+    container: `modal-container-${generatedId}`,
+    background: `modal-background-${generatedId}`,
+    content: contentId ?? `modal-content-${generatedId}`,
+    title: `modal-title-${generatedId}`,
+    description: `modal-description-${generatedId}`,
+  }), [contentId, generatedId])
+
+  const onCloseWrapper = useCallback(() => {
+    if (!isClosable) {
+      return
+    }
+    onCloseStable()
+    setIsOpen(false)
+  }, [isClosable, onCloseStable, setIsOpen])
+
+  useLogOnce('Modal: onClose should be defined when the modal is closable', isClosable && !onClose && !parent)
+
+  const { isVisible, transitionState } = useTransitionState({ isOpen, ref: containerRef })
+  const { refAssignment, isPresent, ref } = usePresenceRef<HTMLDivElement>({
+    isOpen,
+  })
+  useFocusTrap({
+    container: ref,
+    active: isVisible,
+  })
+  const { zIndex } = useOverlayRegistry({
+    isActive: isVisible,
+  })
+
+  const contextValue = useMemo(() => ({
+    isOpen,
+    setIsOpen,
+    isClosable,
+    ids,
+    onClose: onCloseWrapper,
+    transitionState,
+    hasDescription,
+    contentRef: ref,
+    contentRefAssignment: refAssignment,
+    isContentPresent: isPresent,
+  }), [hasDescription, ids, isClosable, isOpen, isPresent, onCloseWrapper, ref, refAssignment, setIsOpen, transitionState])
+
+  return (
+    <ModalContext.Provider value={contextValue}>
+      <Visibility isVisible={isVisible}>
+        <Portal>
+          <div
+            {...props}
+            ref={containerRef}
+            id={ids.container}
+            data-open={PropsUtil.dataAttributes.bool(isOpen)}
+            data-closable={PropsUtil.dataAttributes.bool(isClosable)}
+            className={clsx('modal-container', props.className)}
+            style={{ ...props.style, zIndex }}
+            onKeyDown={(event) => {
+              props.onKeyDown?.(event)
+              if (event.key !== 'Escape' || event.defaultPrevented) {
+                return
+              }
+              event.preventDefault()
+              onCloseWrapper()
+            }}
+          >
+            {children}
+          </div>
+        </Portal>
+      </Visibility>
+    </ModalContext.Provider>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalContent.tsx b/packages/hightide-web/src/components/layout/Modal/ModalContent.tsx
new file mode 100644
index 00000000..05566a9e
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/ModalContent.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import type { ForwardedRef, HTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import clsx from 'clsx'
+import { ReactUtils } from '@helpwave/hightide-utils/utils'
+
+import { FocusTrap } from '../../utils/FocusTrap'
+import { useModalContext } from './ModalContext'
+
+export type ModalPosition = 'top' | 'center' | 'none'
+
+export type ModalContentProps = HTMLAttributes<HTMLDivElement> & {
+  [key: `data-${string}`]: string | undefined,
+  position?: ModalPosition,
+}
+
+export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(function ModalContent({
+  children,
+  position = 'center',
+  ...props
+}, forwardedRef: ForwardedRef<HTMLDivElement>) {
+  const context = useModalContext()
+  if (!context.ids || !context.onClose || context.transitionState === undefined || !context.contentRef || !context.contentRefAssignment) {
+    throw new Error('Modal.Content must be used within a Modal.Container')
+  }
+
+  return (
+    <FocusTrap active={!!context.isContentPresent && context.isOpen} container={context.contentRef}>
+      <div
+        {...props}
+        id={props.id ?? context.ids.content}
+        ref={ReactUtils.assingRefsBuilder([context.contentRefAssignment, forwardedRef])}
+        data-state={context.transitionState}
+        data-position={position}
+        role="dialog"
+        aria-modal={true}
+        aria-labelledby={context.ids.title}
+        aria-describedby={context.hasDescription ? context.ids.description : undefined}
+        className={clsx('modal-content', props.className)}
+      >
+        {children}
+      </div>
+    </FocusTrap>
+  )
+})
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalContext.tsx b/packages/hightide-web/src/components/layout/Modal/ModalContext.tsx
new file mode 100644
index 00000000..366cca64
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/ModalContext.tsx
@@ -0,0 +1,34 @@
+import type { Dispatch, RefObject, SetStateAction } from 'react'
+import { createContext, useContext } from 'react'
+import type { TransitionState } from '../../../hooks/useTransitionState'
+
+export type ModalIds = {
+  container: string,
+  background: string,
+  content: string,
+  title: string,
+  description: string,
+}
+
+export type ModalContextType = {
+  isOpen: boolean,
+  setIsOpen: Dispatch<SetStateAction<boolean>>,
+  isClosable: boolean,
+  ids?: ModalIds,
+  onClose?: () => void,
+  transitionState?: TransitionState,
+  hasDescription?: boolean,
+  contentRef?: RefObject<HTMLDivElement | null>,
+  contentRefAssignment?: (node: HTMLDivElement | null) => void,
+  isContentPresent?: boolean,
+}
+
+export const ModalContext = createContext<ModalContextType | null>(null)
+
+export function useModalContext() {
+  const context = useContext(ModalContext)
+  if (!context) {
+    throw new Error('Modal components must be used within a Modal.Root')
+  }
+  return context
+}
\ No newline at end of file
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalDescription.tsx b/packages/hightide-web/src/components/layout/Modal/ModalDescription.tsx
new file mode 100644
index 00000000..7ca29c98
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/ModalDescription.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+import { Visibility } from '../Visibility'
+import { useModalContext } from './ModalContext'
+
+export type ModalDescriptionProps = HTMLAttributes<HTMLDivElement>
+
+export function ModalDescription({
+  children,
+  ...props
+}: ModalDescriptionProps) {
+  const context = useModalContext()
+  if (!context.ids) {
+    throw new Error('Modal.Description must be used within a Modal.Container')
+  }
+
+  return (
+    <Visibility isVisible={!!children}>
+      <div
+        {...props}
+        id={context.ids.description}
+        className={clsx('text-description', props.className)}
+      >
+        {children}
+      </div>
+    </Visibility>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalOpener.tsx b/packages/hightide-web/src/components/layout/Modal/ModalOpener.tsx
new file mode 100644
index 00000000..f35131f3
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/ModalOpener.tsx
@@ -0,0 +1,43 @@
+import { useMemo, type ReactNode } from 'react'
+import { BagFunctionUtil } from '@helpwave/hightide-utils/utils'
+
+import { useModalContext } from './ModalContext'
+
+export interface ModalOpenerBag {
+  open: () => void,
+  close: () => void,
+  isOpen: boolean,
+  toggleOpen: () => void,
+  props: {
+    'onClick': () => void,
+    'aria-haspopup': 'dialog',
+  },
+}
+
+export interface ModalOpenerProps {
+  children: (props: ModalOpenerBag) => ReactNode,
+}
+
+export function ModalOpener({ children }: ModalOpenerProps) {
+  const context = useModalContext()
+
+  const bag: ModalOpenerBag = useMemo<ModalOpenerBag>(() => ({
+    open: () => context.setIsOpen(true),
+    close: () => context.setIsOpen(false),
+    toggleOpen: () => context.setIsOpen(prev => !prev),
+    isOpen: context.isOpen,
+    props: {
+      'onClick': () => context.setIsOpen(true),
+      'aria-haspopup': 'dialog',
+    },
+  }), [context])
+
+  return BagFunctionUtil.resolve(children, bag)
+}
+
+
+export interface ModalOpenerPassingProps {
+  'children'?: React.ReactNode,
+  'onClick'?: React.MouseEventHandler<HTMLButtonElement>,
+  'aria-haspopup'?: 'dialog',
+}
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalRoot.tsx b/packages/hightide-web/src/components/layout/Modal/ModalRoot.tsx
new file mode 100644
index 00000000..faefc720
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/ModalRoot.tsx
@@ -0,0 +1,38 @@
+import type { PropsWithChildren, SetStateAction } from 'react'
+import { useCallback } from 'react'
+import { useControlledState } from '@helpwave/hightide-utils/hooks'
+import { ModalContext } from './ModalContext'
+
+export interface ModalRootProps extends PropsWithChildren {
+  isOpen?: boolean,
+  onIsOpenChange?: (isOpen: boolean) => void,
+  initialIsOpen?: boolean,
+  isClosable?: boolean,
+}
+
+export function ModalRoot({
+  children,
+  isOpen: controlledIsOpen,
+  onIsOpenChange,
+  initialIsOpen = false,
+  isClosable = true,
+}: ModalRootProps) {
+  const [isOpen, setIsOpen] = useControlledState({
+    value: controlledIsOpen,
+    onValueChange: onIsOpenChange,
+    defaultValue: initialIsOpen,
+  })
+  const setIsOpenGuarded = useCallback((action: SetStateAction<boolean>) => {
+    const next = typeof action === 'function' ? action(isOpen) : action
+    if (!isClosable && isOpen && !next) {
+      return
+    }
+    setIsOpen(next)
+  }, [isClosable, isOpen, setIsOpen])
+
+  return (
+    <ModalContext.Provider value={{ isOpen, setIsOpen: setIsOpenGuarded, isClosable }}>
+      {children}
+    </ModalContext.Provider>
+  )
+}
\ No newline at end of file
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalTitle.tsx b/packages/hightide-web/src/components/layout/Modal/ModalTitle.tsx
new file mode 100644
index 00000000..143fc4c6
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/ModalTitle.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import type { HTMLAttributes } from 'react'
+import clsx from 'clsx'
+
+import { useModalContext } from './ModalContext'
+
+export type ModalTitleProps = HTMLAttributes<HTMLDivElement>
+
+export function ModalTitle({
+  children,
+  ...props
+}: ModalTitleProps) {
+  const context = useModalContext()
+  if (!context.ids) {
+    throw new Error('Modal.Title must be used within a Modal.Container')
+  }
+
+  return (
+    <div
+      {...props}
+      id={context.ids.title}
+      className={clsx('typography-title-lg mr-10', props.className)}
+    >
+      {children}
+    </div>
+  )
+}
diff --git a/packages/hightide-web/src/components/layout/dialog/premade/ThemeDialog.tsx b/packages/hightide-web/src/components/layout/Modal/ThemeModal.tsx
similarity index 73%
rename from packages/hightide-web/src/components/layout/dialog/premade/ThemeDialog.tsx
rename to packages/hightide-web/src/components/layout/Modal/ThemeModal.tsx
index fd6adfe6..50ac9c38 100644
--- a/packages/hightide-web/src/components/layout/dialog/premade/ThemeDialog.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/ThemeModal.tsx
@@ -1,14 +1,15 @@
 import { type PropsWithChildren, type ReactNode } from 'react'
-import type { DialogProps } from '../Dialog'
-import { Dialog } from '../Dialog'
 import clsx from 'clsx'
-import { useLocalization } from '../../../../global-contexts/localization/forward-exports'
-import { useTheme } from '../../../../global-contexts/theme/ThemeContext'
-import { Button } from '../../../user-interaction/Button'
-import type { SelectProps } from '../../../user-interaction/Select/SelectComponent'
-import { Select } from '../../../user-interaction/Select/Select'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
+import { useLocalization } from '../../../global-contexts/localization/forward-exports'
+import { useTheme } from '../../../global-contexts/theme/ThemeContext'
+import { Button } from '../../user-interaction/Button'
+import type { SelectProps } from '../../user-interaction/Select/SelectComponent'
+import { Select } from '../../user-interaction/Select/Select'
+import type { ModalProps } from './Modal'
+import { Modal } from './Modal'
+
 export type ThemeSelectProps = Omit<SelectProps<string | null>, 'value' | 'children'>
 
 export const ThemeSelect = ({ ...props }: ThemeSelectProps) => {
@@ -43,7 +44,7 @@ export const ThemeSelect = ({ ...props }: ThemeSelectProps) => {
         </div>
       </Select.Option>
       {Object.entries(supportedThemes).map(([themeMode, themeInformation]) => {
-        const label = themeInformation.nameTranslations[locale] ?? `{{ThemeDialog.themeInformation.nameTranslations:${locale}}}`
+        const label = themeInformation.nameTranslations[locale] ?? `{{ThemeModal.themeInformation.nameTranslations:${locale}}}`
         return (
           <Select.Option
             key={themeMode}
@@ -61,26 +62,30 @@ export const ThemeSelect = ({ ...props }: ThemeSelectProps) => {
   )
 }
 
-export interface ThemeDialogProps extends Omit<DialogProps, 'titleElement' | 'description'> {
+export interface ThemeModalProps extends Omit<ModalProps, 'titleElement' | 'description'> {
   titleOverwrite?: ReactNode,
   descriptionOverwrite?: ReactNode,
 }
 
-export const ThemeDialog = ({
+export const ThemeModal = ({
   onClose,
   titleOverwrite,
   descriptionOverwrite,
+  contentProps,
   ...props
-}: PropsWithChildren<ThemeDialogProps>) => {
+}: PropsWithChildren<ThemeModalProps>) => {
   const translation = useHightideTranslation()
 
   return (
-    <Dialog
+    <Modal
+      {...props}
       titleElement={titleOverwrite ?? translation('pThemes', { count: 1 })}
       description={descriptionOverwrite ?? translation('chooseTheme')}
       onClose={onClose}
-      className="w-80"
-      {...props}
+      contentProps={{
+        ...contentProps,
+        className: clsx('w-80', contentProps?.className),
+      }}
     >
       <ThemeSelect />
       <div className="flex-row-4 w-full mt-3 justify-end">
@@ -88,6 +93,6 @@ export const ThemeDialog = ({
           {translation('done')}
         </Button>
       </div>
-    </Dialog>
+    </Modal>
   )
 }
diff --git a/packages/hightide-web/src/components/layout/Modal/index.ts b/packages/hightide-web/src/components/layout/Modal/index.ts
new file mode 100644
index 00000000..431d5eb9
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/index.ts
@@ -0,0 +1,29 @@
+export { Modal } from './Modal'
+export type { ModalProps, ModalPosition } from './Modal'
+export { ModalContainer } from './ModalContainer'
+export type { ModalContainerProps } from './ModalContainer'
+export { ModalBackground } from './ModalBackground'
+export type { ModalBackgroundProps } from './ModalBackground'
+export { ModalContent } from './ModalContent'
+export type { ModalContentProps } from './ModalContent'
+export { ModalTitle } from './ModalTitle'
+export type { ModalTitleProps } from './ModalTitle'
+export { ModalDescription } from './ModalDescription'
+export type { ModalDescriptionProps } from './ModalDescription'
+export { ModalCloseButton } from './ModalCloseButton'
+export type { ModalCloseButtonProps } from './ModalCloseButton'
+export { ModalContext, useModalContext } from './ModalContext'
+export type { ModalContextType, ModalIds } from './ModalContext'
+export { ModalOpener } from './ModalOpener'
+export type { ModalOpenerBag, ModalOpenerPassingProps, ModalOpenerProps } from './ModalOpener'
+export { ModalRoot } from './ModalRoot'
+export type { ModalRootProps } from './ModalRoot'
+export { ConfirmModal } from './ConfirmModal'
+export type { ConfirmModalProps, ConfirmModalType } from './ConfirmModal'
+export { DiscardChangesModal } from './DiscardChangesModal'
+export type { DiscardChangesModalProps } from './DiscardChangesModal'
+export { InputModal } from './InputModal'
+export type { InputModalProps } from './InputModal'
+export { LanguageModal, LanguageSelect } from './LanguageModal'
+export { ThemeModal, ThemeSelect } from './ThemeModal'
+export type { ThemeModalProps, ThemeSelectProps } from './ThemeModal'
diff --git a/packages/hightide-web/src/components/layout/dialog/Dialog.tsx b/packages/hightide-web/src/components/layout/dialog/Dialog.tsx
deleted file mode 100644
index c173880e..00000000
--- a/packages/hightide-web/src/components/layout/dialog/Dialog.tsx
+++ /dev/null
@@ -1,173 +0,0 @@
-'use client'
-
-import clsx from 'clsx'
-
-import type { HTMLAttributes, ReactNode } from 'react'
-import { forwardRef, useCallback, useContext, useId, useMemo, useRef } from 'react'
-import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
-import { X } from 'lucide-react'
-import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { useFocusTrap } from '../../../hooks/focus/useFocusTrap'
-import { useLogOnce } from '@helpwave/hightide-utils/hooks'
-import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
-import { Visibility } from '../Visibility'
-import { useTransitionState } from '../../../hooks/useTransitionState'
-import { Portal } from '../../utils/Portal'
-import { FocusTrap } from '../../utils/FocusTrap'
-import { usePresenceRef } from '../../../hooks/usePresenceRef'
-import { DialogContext } from './DialogContext'
-import { IconButton } from '../../user-interaction/IconButton'
-import { ReactUtils } from '@helpwave/hightide-utils/utils'
-
-import { PropsUtil } from '../../../utils/propsUtil'
-
-export type DialogPosition = 'top' | 'center' | 'none'
-
-export type DialogProps = HTMLAttributes<HTMLDivElement> & {
-  /** Whether the dialog is currently open */
-  isOpen?: boolean,
-  /** Title of the Dialog used for accessibility */
-  titleElement: ReactNode,
-  /** Description of the Dialog used for accessibility */
-  description: ReactNode,
-  /** Callback when the dialog tries to close */
-  onClose?: () => void,
-  /** Styling for the background */
-  backgroundClassName?: string,
-  /** If true shows a close button and sends onClose on background clicks */
-  isModal?: boolean,
-  position?: DialogPosition,
-  isAnimated?: boolean,
-  containerClassName?: string,
-}
-
-/**
- * A generic dialog window which is managed by its parent
- */
-export const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog({
-  children,
-  isOpen: isOpenOverwrite,
-  titleElement,
-  description,
-  isModal: isModalOverwrite = true,
-  onClose,
-  backgroundClassName,
-  position = 'center',
-  containerClassName,
-  ...props
-}, forwardedRef) {
-  const translation = useHightideTranslation()
-  const generatedId = useId()
-  const ids = useMemo(() => ({
-    container: `dialog-container-${generatedId}`,
-    background: `dialog-background-${generatedId}`,
-    content: props.id ?? `dialog-content-${generatedId}`,
-    title: `dialog-title-${generatedId}`,
-    description: `dialog-description-${generatedId}`,
-  }), [generatedId, props.id])
-
-  const containerRef = useRef<HTMLDivElement>(null)
-  const context = useContext(DialogContext)
-  const isOpen = isOpenOverwrite ?? context?.isOpen ?? false
-  const isModal = isModalOverwrite ?? context?.isModal ?? true
-
-  const { refAssignment, isPresent, ref } = usePresenceRef<HTMLDivElement>({
-    isOpen,
-  })
-
-  const onCloseStable = useEventCallbackStabilizer(onClose)
-  const onCloseWrapper = useCallback(() => {
-    if (!isModal) return
-    onCloseStable()
-    context?.setIsOpen(false)
-  }, [onCloseStable, context, isModal])
-
-  useLogOnce('Dialog: onClose should be defined for modal dialogs', isModal && !onClose && !context)
-
-  const { isVisible, transitionState } = useTransitionState({ isOpen, ref: containerRef })
-
-  useFocusTrap({
-    container: ref,
-    active: isVisible,
-  })
-
-  const { zIndex } = useOverlayRegistry({
-    isActive: isVisible,
-  })
-
-  const hasDescription = !!description
-
-  return (
-    <Visibility isVisible={isVisible}>
-      <Portal>
-        <div
-          ref={containerRef}
-          id={ids.container}
-
-          data-open={PropsUtil.dataAttributes.bool(isOpen)}
-
-          className={clsx('dialog-container', containerClassName)}
-          style={{ zIndex }}
-        >
-          <div
-            id={ids.background}
-
-            onClick={onCloseWrapper}
-
-            data-state={transitionState}
-
-            aria-hidden={true}
-
-            className={clsx('dialog-background', backgroundClassName)}
-          />
-          <FocusTrap active={isPresent && isOpen} container={ref}>
-            <div
-              {...props}
-              id={ids.content}
-              ref={ReactUtils.assingRefsBuilder([refAssignment, forwardedRef])}
-
-              onKeyDown={PropsUtil.aria.close(onCloseWrapper)}
-
-              data-state={transitionState}
-              data-position={position}
-
-              role="dialog"
-              aria-modal={isModal}
-              aria-labelledby={ids.title}
-              aria-describedby={hasDescription ? ids.description : undefined}
-
-              className={clsx('dialog-content', props.className)}>
-              <div className="typography-title-lg mr-10">
-                {titleElement}
-              </div>
-              <Visibility isVisible={hasDescription}>
-                <div className="text-description">
-                  {description}
-                </div>
-              </Visibility>
-              <Visibility isVisible={isModal}>
-                <div
-                  className="absolute top-0 right-0"
-                  style={{
-                    paddingTop: 'inherit',
-                    paddingRight: 'inherit'
-                  }}
-                >
-                  <IconButton
-                    tooltip={translation('closeDialog')}
-                    size="xs"
-                    color="neutral"
-                    variant="foreground"
-                    onClick={onCloseWrapper}
-                    icon={X}
-                  />
-                </div>
-              </Visibility>
-              {children}
-            </div>
-          </FocusTrap>
-        </div>
-      </Portal>
-    </Visibility>
-  )
-})
\ No newline at end of file
diff --git a/packages/hightide-web/src/components/layout/dialog/DialogContext.tsx b/packages/hightide-web/src/components/layout/dialog/DialogContext.tsx
deleted file mode 100644
index d6a5a4a9..00000000
--- a/packages/hightide-web/src/components/layout/dialog/DialogContext.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Dispatch, SetStateAction } from 'react'
-import { createContext, useContext } from 'react'
-
-export type DialogContextType = {
-  isOpen: boolean,
-  setIsOpen: Dispatch<SetStateAction<boolean>>,
-  isModal: boolean,
-}
-
-export const DialogContext = createContext<DialogContextType | null>(null)
-
-export function useDialogContext() {
-  const context = useContext(DialogContext)
-  if (!context) {
-    throw new Error('useDialogContext must be used within a <DialogContext.Provider>')
-  }
-  return context
-}
\ No newline at end of file
diff --git a/packages/hightide-web/src/components/layout/dialog/DialogOpener.tsx b/packages/hightide-web/src/components/layout/dialog/DialogOpener.tsx
deleted file mode 100644
index c93be142..00000000
--- a/packages/hightide-web/src/components/layout/dialog/DialogOpener.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useMemo, type ReactNode } from 'react'
-import { useDialogContext } from './DialogContext'
-import { BagFunctionUtil } from '@helpwave/hightide-utils/utils'
-
-export interface DialogOpenerWrapperBag {
-    open: () => void,
-    close: () => void,
-    isOpen: boolean,
-    toggleOpen: () => void,
-    props: {
-        'onClick': () => void,
-        'aria-haspopup': 'dialog',
-    },
-}
-
-export interface DialogOpenerWrapperProps {
-    children: (props: DialogOpenerWrapperBag) => ReactNode,
-}
-
-export function DialogOpenerWrapper({ children }: DialogOpenerWrapperProps) {
-  const context = useDialogContext()
-
-  const bag: DialogOpenerWrapperBag = useMemo<DialogOpenerWrapperBag>(() => ({
-    open: () => context.setIsOpen(true),
-    close: () => context.setIsOpen(false),
-    toggleOpen: () => context.setIsOpen(prev => !prev),
-    isOpen: context.isOpen,
-    props: {
-      'onClick': () => context.setIsOpen(true),
-      'aria-haspopup': 'dialog',
-    },
-  }), [context])
-
-  return BagFunctionUtil.resolve(children, bag)
-}
-
-
-export interface DialogOpenerPassingProps {
-  'children'?: React.ReactNode,
-  'onClick'?: React.MouseEventHandler<HTMLButtonElement>,
-  'aria-haspopup'?: 'dialog',
-}
diff --git a/packages/hightide-web/src/components/layout/dialog/DialogRoot.tsx b/packages/hightide-web/src/components/layout/dialog/DialogRoot.tsx
deleted file mode 100644
index 8e473dd1..00000000
--- a/packages/hightide-web/src/components/layout/dialog/DialogRoot.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useControlledState } from '@helpwave/hightide-utils/hooks'
-import type { PropsWithChildren } from 'react'
-import { DialogContext } from './DialogContext'
-
-export interface DialogRootProps extends PropsWithChildren {
-    isOpen?: boolean,
-    onIsOpenChange?: (isOpen: boolean) => void,
-    initialIsOpen?: boolean,
-    isModal?: boolean,
-}
-
-export function DialogRoot({
-  children,
-  isOpen: controlledIsOpen,
-  onIsOpenChange,
-  initialIsOpen = false,
-  isModal = true,
-}: DialogRootProps) {
-  const [isOpen, setIsOpen] = useControlledState({
-    value: controlledIsOpen,
-    onValueChange: onIsOpenChange,
-    defaultValue: initialIsOpen,
-  })
-
-  return (
-    <DialogContext.Provider value={{ isOpen, setIsOpen, isModal }}>
-      {children}
-    </DialogContext.Provider>
-  )
-}
\ No newline at end of file
diff --git a/packages/hightide-web/src/components/layout/dialog/index.ts b/packages/hightide-web/src/components/layout/dialog/index.ts
deleted file mode 100644
index 1e936897..00000000
--- a/packages/hightide-web/src/components/layout/dialog/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './Dialog'
-export * from './DialogContext'
-export * from './DialogOpener'
-export * from './DialogRoot'
-export * from './premade'
diff --git a/packages/hightide-web/src/components/layout/dialog/premade/InputDialog.tsx b/packages/hightide-web/src/components/layout/dialog/premade/InputDialog.tsx
deleted file mode 100644
index 7ab73320..00000000
--- a/packages/hightide-web/src/components/layout/dialog/premade/InputDialog.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { InputProps } from '../../../user-interaction/input/Input'
-import { Input } from '../../../user-interaction/input/Input'
-import type { ConfirmDialogProps } from './ConfirmDialog'
-import { ConfirmDialog } from './ConfirmDialog'
-
-export type InputModalProps = ConfirmDialogProps & {
-  inputs: InputProps[],
-}
-
-/**
- * A modal for receiving multiple inputs
- */
-export const InputDialog = ({
-  inputs,
-  buttonOverwrites,
-  ...props
-}: InputModalProps) => {
-  return (
-    <ConfirmDialog
-      buttonOverwrites={buttonOverwrites}
-      {...props}
-    >
-      {inputs.map((inputProps, index) => <Input key={`input ${index}`} {...inputProps}/>)}
-    </ConfirmDialog>
-  )
-}
diff --git a/packages/hightide-web/src/components/layout/dialog/premade/index.ts b/packages/hightide-web/src/components/layout/dialog/premade/index.ts
deleted file mode 100644
index 2303ad3e..00000000
--- a/packages/hightide-web/src/components/layout/dialog/premade/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './ConfirmDialog'
-export * from './DiscardChangesDialog'
-export * from './InputDialog'
-export * from './LanguageDialog'
-export * from './ThemeDialog'
diff --git a/packages/hightide-web/src/components/layout/index.ts b/packages/hightide-web/src/components/layout/index.ts
index 255c6f85..c7d998a4 100644
--- a/packages/hightide-web/src/components/layout/index.ts
+++ b/packages/hightide-web/src/components/layout/index.ts
@@ -13,7 +13,7 @@ export * from './TextImage'
 export * from './VerticalDivider'
 export * from './Visibility'
 export * from './app'
-export * from './dialog'
+export * from './Modal'
 export * from './drawer'
 export * from './loading'
 export * from './navigation'
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
index f8cd0709..e74c4529 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
+++ b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
@@ -2,7 +2,7 @@ import type { ComponentPropsWithoutRef, ReactNode } from 'react'
 import { FileText, Plus, X } from 'lucide-react'
 import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { Dialog } from '../../layout/dialog/Dialog'
+import { Modal } from '../../layout/Modal/Modal'
 import { Button } from '../Button'
 import { Icon } from '../../display-and-visualization/Icon'
 import { IconButton } from '../IconButton'
@@ -29,44 +29,46 @@ export const FileInputMenu = ({
   const allowedFileTypes = formatFileInputAccept(context.accept)
 
   return (
-    <Dialog
-      {...props}
+    <Modal
       isOpen={context.isOpen && (context.maxFiles ?? 1) > 1}
       onClose={() => context.setIsOpen(false)}
       titleElement={translation('selectFiles')}
       description={translation('dropFilesHere')}
-      className={clsx('file-input-menu', className)}
-      data-file-drag={context.isDragging ? '' : undefined}
-      data-drag-over={context.isDragOver ? '' : undefined}
-      onDragEnter={(event) => {
-        event.preventDefault()
-        if (canEdit && context.canAddFiles && isFileDataTransfer(event.dataTransfer)) {
-          context.setIsDragOver(true)
-        }
-        props.onDragEnter?.(event)
-      }}
-      onDragOver={(event) => {
-        event.preventDefault()
-        props.onDragOver?.(event)
-      }}
-      onDragLeave={(event) => {
-        event.preventDefault()
-        const nextTarget = event.relatedTarget
-        if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+      contentProps={{
+        ...props,
+        'className': clsx('file-input-menu', className),
+        'data-file-drag': context.isDragging ? '' : undefined,
+        'data-drag-over': context.isDragOver ? '' : undefined,
+        'onDragEnter': (event) => {
+          event.preventDefault()
+          if (canEdit && context.canAddFiles && isFileDataTransfer(event.dataTransfer)) {
+            context.setIsDragOver(true)
+          }
+          props.onDragEnter?.(event)
+        },
+        'onDragOver': (event) => {
+          event.preventDefault()
+          props.onDragOver?.(event)
+        },
+        'onDragLeave': (event) => {
+          event.preventDefault()
+          const nextTarget = event.relatedTarget
+          if (nextTarget instanceof Node && event.currentTarget.contains(nextTarget)) {
+            props.onDragLeave?.(event)
+            return
+          }
+          context.setIsDragOver(false)
           props.onDragLeave?.(event)
-          return
-        }
-        context.setIsDragOver(false)
-        props.onDragLeave?.(event)
-      }}
-      onDrop={(event) => {
-        event.preventDefault()
-        context.setIsDragOver(false)
-        context.setIsDragging(false)
-        if (canEdit && context.canAddFiles) {
-          context.addFiles(createFileInputItemsFromFileList(event.dataTransfer.files))
-        }
-        props.onDrop?.(event)
+        },
+        'onDrop': (event) => {
+          event.preventDefault()
+          context.setIsDragOver(false)
+          context.setIsDragging(false)
+          if (canEdit && context.canAddFiles) {
+            context.addFiles(createFileInputItemsFromFileList(event.dataTransfer.files))
+          }
+          props.onDrop?.(event)
+        },
       }}
     >
       {(context.maxFiles != null || allowedFileTypes != null) && (
@@ -113,6 +115,6 @@ export const FileInputMenu = ({
         </Button>
       )}
       {children}
-    </Dialog>
+    </Modal>
   )
 }
diff --git a/packages/hightide-web/src/style/theme/components/button.css b/packages/hightide-web/src/style/theme/components/button.css
index b05e26cb..cc6b7108 100644
--- a/packages/hightide-web/src/style/theme/components/button.css
+++ b/packages/hightide-web/src/style/theme/components/button.css
@@ -2,7 +2,7 @@
   .button {
     @apply relative;
     &[data-size="xs"] {
-      @apply min-w-20;
+      @apply min-w-16;
       padding: var(--element-padding) var(--element-padding-direction);
 
       &[data-bordered] {
@@ -13,7 +13,7 @@
     }
 
     &[data-size="sm"] {
-      @apply min-w-28;
+      @apply min-w-20;
       padding: var(--element-padding) var(--element-padding-direction);
 
       &[data-bordered] {
@@ -24,7 +24,7 @@
     }
 
     &[data-size="md"] {
-      @apply min-w-36;
+      @apply min-w-24;
       padding: var(--element-padding) var(--element-padding-direction);
 
       &[data-bordered] {
@@ -35,7 +35,7 @@
     }
 
     &[data-size="lg"] {
-      @apply min-w-45;
+      @apply min-w-36;
       padding: var(--element-padding) var(--element-padding-direction);
 
       &[data-bordered] {
diff --git a/packages/hightide-web/src/style/theme/components/index.css b/packages/hightide-web/src/style/theme/components/index.css
index c7723d36..62e8b34b 100644
--- a/packages/hightide-web/src/style/theme/components/index.css
+++ b/packages/hightide-web/src/style/theme/components/index.css
@@ -23,7 +23,7 @@
 @import "./checkbox.css";
 @import "./switch.css";
 @import "./drawer.css";
-@import "./dialog.css";
+@import "./modal.css";
 @import "./textarea.css";
 @import "./form-field.css";
 @import "./calendar-day-picker.css";
diff --git a/packages/hightide-web/src/style/theme/components/dialog.css b/packages/hightide-web/src/style/theme/components/modal.css
similarity index 59%
rename from packages/hightide-web/src/style/theme/components/dialog.css
rename to packages/hightide-web/src/style/theme/components/modal.css
index a210922f..9c8aba0a 100644
--- a/packages/hightide-web/src/style/theme/components/dialog.css
+++ b/packages/hightide-web/src/style/theme/components/modal.css
@@ -1,12 +1,12 @@
 @layer components {
-  .dialog-container {
+  .modal-container {
     @apply fixed inset-0 h-screen w-screen;
     &:not([data-open]) {
       @apply touch-none pointer-events-none;
     }
   }
 
-  .dialog-background {
+  .modal-background {
     @apply fixed inset-0 h-screen w-screen bg-overlay-shadow;
     animation-fill-mode: forwards;
 
@@ -25,8 +25,22 @@
     }
   }
 
-  .dialog-content {
-    @apply flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)];
+  .modal-content {
+    @apply flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-h-[calc(100vh_-_2rem)];
+    max-width: calc(min(100vw - 1rem, 60rem));
+    max-height: calc(min(100vh - 1rem, 60rem));
+    min-width: 20rem;
+    min-height: 10rem;
+
+    @variant tablet {
+      max-width: calc(min(100vw - 2rem, 80rem));
+      max-height: calc(min(100vh - 2rem, 80rem));
+    }
+
+    @variant desktop {
+      max-width: calc(min(100vw - 4rem, 120rem));
+      max-height: calc(min(100vh - 4rem, 120rem));
+    }
     animation-timing-function: ease-out;
     animation-fill-mode: forwards;
 
@@ -49,4 +63,26 @@
       @apply fixed inset-0 m-auto w-fit h-fit;
     }
   }
+
+  .modal-actions {
+    @apply flex-col-4 mt-3;
+
+    @variant tablet {
+      @apply flex-row-4 justify-end;
+    }
+  }
+
+  .modal-actions-button {
+    @apply w-full;
+
+    @variant tablet {
+      @apply w-auto;
+    }
+  }
+
+  .modal-close-button {
+    @apply top-1 right-1;
+    --coloring-position-override: absolute;
+
+  }
 }
diff --git a/packages/hightide-web/stories/Internationalization/ExtendTranslations.stories.tsx b/packages/hightide-web/stories/Internationalization/ExtendTranslations.stories.tsx
index 436d489c..17fffcc3 100644
--- a/packages/hightide-web/stories/Internationalization/ExtendTranslations.stories.tsx
+++ b/packages/hightide-web/stories/Internationalization/ExtendTranslations.stories.tsx
@@ -3,7 +3,7 @@ import type {
   StoryObj
 } from '@storybook/nextjs-vite'
 
-import { LanguageSelect } from '../../src/components/layout/dialog/premade/LanguageDialog'
+import { LanguageSelect } from '../../src/components/layout/Modal/LanguageModal'
 import { HightideProvider } from '../../src/global-contexts/HightideProvider'
 import { HightideConfigUtils } from '../../src/global-contexts/hightide-config/HightideConfigUtils'
 import {
diff --git a/packages/hightide-web/stories/Internationalization/LanguageDialog.stories.tsx b/packages/hightide-web/stories/Internationalization/LanguageModal.stories.tsx
similarity index 52%
rename from packages/hightide-web/stories/Internationalization/LanguageDialog.stories.tsx
rename to packages/hightide-web/stories/Internationalization/LanguageModal.stories.tsx
index cccb3dd6..b14bc39d 100644
--- a/packages/hightide-web/stories/Internationalization/LanguageDialog.stories.tsx
+++ b/packages/hightide-web/stories/Internationalization/LanguageModal.stories.tsx
@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { LanguageDialog } from '../../src/components/layout/dialog/premade/LanguageDialog'
+import { LanguageModal } from '../../src/components/layout/Modal/LanguageModal'
 
 const meta: Meta = {
-  component: LanguageDialog,
+  component: LanguageModal,
 }
 
 export default meta
 type Story = StoryObj<typeof meta>;
 
-export const languageDialog: Story = {
+export const languageModal: Story = {
   args: {
     isOpen: true,
   }
diff --git a/packages/hightide-web/stories/Layout/Dialog/StackedDialog.stories.tsx b/packages/hightide-web/stories/Layout/Dialog/StackedDialog.stories.tsx
deleted file mode 100644
index e5a76b14..00000000
--- a/packages/hightide-web/stories/Layout/Dialog/StackedDialog.stories.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Dialog } from '../../../src/components/layout/dialog/Dialog'
-import { Button } from '../../../src/components/user-interaction/Button'
-import type { DialogPosition } from '../../../src/components/layout/dialog/Dialog'
-import { DialogRoot } from '../../../src/components/layout/dialog/DialogRoot'
-import { DialogOpenerWrapper } from '../../../src/components/layout/dialog/DialogOpener'
-import { DialogContext } from '../../../src/components/layout/dialog/DialogContext'
-
-type StoryArgs = {
-  position: DialogPosition,
-}
-
-const meta: Meta<StoryArgs> = {
-}
-
-export default meta
-type Story = StoryObj<typeof meta>;
-
-export const stackedDialog: Story = {
-  args: {
-    position: 'center'
-  },
-  render: ({ position }) => {
-    return (
-      <>
-        <DialogRoot>
-          <DialogOpenerWrapper>
-            {({ props }) => (
-              <Button {...props}>Open Dialog 1</Button>
-            )}
-          </DialogOpenerWrapper>
-          <Dialog
-            titleElement="Dialog 1"
-            description="This is the first Dialog"
-            className="w-96 h-128"
-            position={position}
-          >
-            <DialogRoot>
-              <DialogOpenerWrapper>
-                {({ props }) => (
-                  <Button {...props}>Open Dialog 2</Button>
-                )}
-              </DialogOpenerWrapper>
-              <Dialog
-                titleElement="Dialog 2"
-                description="This is the second Dialog"
-                className="w-96 h-128"
-                position={position}
-              >
-                <DialogRoot>
-                  <DialogOpenerWrapper>
-                    {({ props }) => (
-                      <Button {...props}>Open Dialog 3</Button>
-                    )}
-                  </DialogOpenerWrapper>
-                  <Dialog
-                    titleElement="Dialog 3"
-                    description="This is the third Dialog"
-                    className="w-96 h-128"
-                    position={position}
-                  >
-                    <DialogContext.Consumer>
-                      {({ setIsOpen }) => (
-                        <Button color="negative" onClick={() => setIsOpen(false)}>Close</Button>
-                      )}
-                    </DialogContext.Consumer>
-                  </Dialog>
-                </DialogRoot>
-                <DialogContext.Consumer>
-                  {({ setIsOpen }) => (
-                    <Button color="negative" onClick={() => setIsOpen(false)}>Close Dialog 2</Button>
-                  )}
-                </DialogContext.Consumer>
-              </Dialog>
-            </DialogRoot>
-            <DialogContext.Consumer>
-              {({ setIsOpen }) => (
-                <Button color="negative" onClick={() => setIsOpen(false)}>Close</Button>
-              )}
-            </DialogContext.Consumer>
-          </Dialog>
-        </DialogRoot>
-      </>
-    )
-  }
-}
diff --git a/packages/hightide-web/stories/Layout/Dialog/ConfirmDialog.stories.tsx b/packages/hightide-web/stories/Layout/Modal/ConfirmModal.stories.tsx
similarity index 57%
rename from packages/hightide-web/stories/Layout/Dialog/ConfirmDialog.stories.tsx
rename to packages/hightide-web/stories/Layout/Modal/ConfirmModal.stories.tsx
index b974f96d..90266564 100644
--- a/packages/hightide-web/stories/Layout/Dialog/ConfirmDialog.stories.tsx
+++ b/packages/hightide-web/stories/Layout/Modal/ConfirmModal.stories.tsx
@@ -1,21 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { ConfirmDialog } from '../../../src/components/layout/dialog/premade/ConfirmDialog'
+import { ConfirmModal } from '../../../src/components/layout/Modal/ConfirmModal'
 
 
 const meta: Meta = {
-  component: ConfirmDialog,
-} satisfies Meta<typeof ConfirmDialog>
+  component: ConfirmModal,
+} satisfies Meta<typeof ConfirmModal>
 
 export default meta
 type Story = StoryObj<typeof meta>;
 
-export const confirmDialog: Story = {
+export const confirmModal: Story = {
   args: {
     isOpen: true,
-    isModal: true,
     titleElement: 'Do you want to confirm this?',
-    description: 'Whatever you click only closes the Dialog',
+    description: 'Whatever you click only closes the modal',
     onDecline: action('onDecline'),
     onConfirm: action('onConfirm'),
     onCancel: action('onCancel'),
diff --git a/packages/hightide-web/stories/Layout/Dialog/DiscardChangesDialog.stories.tsx b/packages/hightide-web/stories/Layout/Modal/DiscardChangesModal.stories.tsx
similarity index 57%
rename from packages/hightide-web/stories/Layout/Dialog/DiscardChangesDialog.stories.tsx
rename to packages/hightide-web/stories/Layout/Modal/DiscardChangesModal.stories.tsx
index 109c4350..32939e95 100644
--- a/packages/hightide-web/stories/Layout/Dialog/DiscardChangesDialog.stories.tsx
+++ b/packages/hightide-web/stories/Layout/Modal/DiscardChangesModal.stories.tsx
@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { DiscardChangesDialog } from '../../../src/components/layout/dialog/premade/DiscardChangesDialog'
+import { DiscardChangesModal } from '../../../src/components/layout/Modal/DiscardChangesModal'
 
 const meta: Meta = {
-  component: DiscardChangesDialog,
-} satisfies Meta<typeof DiscardChangesDialog>
+  component: DiscardChangesModal,
+} satisfies Meta<typeof DiscardChangesModal>
 
 export default meta
 type Story = StoryObj<typeof meta>;
 
-export const discardChangesDialog: Story = {
+export const discardChangesModal: Story = {
   args: {
     isOpen: true,
     onDontSave: action('onDontSave'),
diff --git a/packages/hightide-web/stories/Layout/Modal/StackedModal.stories.tsx b/packages/hightide-web/stories/Layout/Modal/StackedModal.stories.tsx
new file mode 100644
index 00000000..d1829578
--- /dev/null
+++ b/packages/hightide-web/stories/Layout/Modal/StackedModal.stories.tsx
@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite'
+import { Modal } from '../../../src/components/layout/Modal/Modal'
+import type { ModalPosition } from '../../../src/components/layout/Modal/Modal'
+import { Button } from '../../../src/components/user-interaction/Button'
+
+type StoryArgs = {
+  position: ModalPosition,
+}
+
+const meta: Meta<StoryArgs> = {
+}
+
+export default meta
+type Story = StoryObj<typeof meta>;
+
+export const stackedModal: Story = {
+  args: {
+    position: 'center'
+  },
+  render: ({ position }) => {
+    return (
+      <>
+        <Modal.Root>
+          <Modal.Opener>
+            {({ props }) => (
+              <Button {...props}>Open Modal 1</Button>
+            )}
+          </Modal.Opener>
+          <Modal
+            titleElement="Modal 1"
+            description="This is the first Modal"
+            position={position}
+          >
+            <Modal.Root>
+              <Modal.Opener>
+                {({ props }) => (
+                  <Button {...props}>Open Modal 2</Button>
+                )}
+              </Modal.Opener>
+              <Modal
+                titleElement="Modal 2"
+                description="This is the second Modal"
+                position={position}
+              >
+                <Modal.Root>
+                  <Modal.Opener>
+                    {({ props }) => (
+                      <Button {...props}>Open Modal 3</Button>
+                    )}
+                  </Modal.Opener>
+                  <Modal
+                    titleElement="Modal 3"
+                    description="This is the third Modal"
+                    position={position}
+                  >
+                    <Modal.Consumer>
+                      {({ setIsOpen }) => (
+                        <Button color="negative" onClick={() => setIsOpen(false)}>Close</Button>
+                      )}
+                    </Modal.Consumer>
+                  </Modal>
+                </Modal.Root>
+                <Modal.Consumer>
+                  {({ setIsOpen }) => (
+                    <Button color="negative" onClick={() => setIsOpen(false)}>Close Modal 2</Button>
+                  )}
+                </Modal.Consumer>
+              </Modal>
+            </Modal.Root>
+            <Modal.Consumer>
+              {({ setIsOpen }) => (
+                <Button color="negative" onClick={() => setIsOpen(false)}>Close</Button>
+              )}
+            </Modal.Consumer>
+          </Modal>
+        </Modal.Root>
+      </>
+    )
+  }
+}
diff --git a/packages/hightide-web/stories/Themeing/ThemeDialog.stories.tsx b/packages/hightide-web/stories/Themeing/ThemeModal.stories.tsx
similarity index 54%
rename from packages/hightide-web/stories/Themeing/ThemeDialog.stories.tsx
rename to packages/hightide-web/stories/Themeing/ThemeModal.stories.tsx
index ef904a14..b88c88ec 100644
--- a/packages/hightide-web/stories/Themeing/ThemeDialog.stories.tsx
+++ b/packages/hightide-web/stories/Themeing/ThemeModal.stories.tsx
@@ -1,14 +1,14 @@
 import type { Meta, StoryObj  } from '@storybook/nextjs-vite'
-import { ThemeDialog } from '../../src/components/layout/dialog/premade/ThemeDialog'
+import { ThemeModal } from '../../src/components/layout/Modal/ThemeModal'
 
 const meta: Meta = {
-  component: ThemeDialog,
+  component: ThemeModal,
 }
 
 export default meta
 type Story = StoryObj<typeof meta>;
 
-export const themeDialog: Story = {
+export const themeModal: Story = {
   args: {
     isOpen: true,
   }
diff --git a/packages/hightide-web/stories/Themeing/ThemeSelect.stories.tsx b/packages/hightide-web/stories/Themeing/ThemeSelect.stories.tsx
index ddbad379..875fc4f0 100644
--- a/packages/hightide-web/stories/Themeing/ThemeSelect.stories.tsx
+++ b/packages/hightide-web/stories/Themeing/ThemeSelect.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj  } from '@storybook/nextjs-vite'
-import { ThemeSelect } from '../../src/components/layout/dialog/premade/ThemeDialog'
+import { ThemeSelect } from '../../src/components/layout/Modal/ThemeModal'
 
 const meta: Meta = {
   component: ThemeSelect,
diff --git a/packages/hightide-web/stories/Utilities/Focus Management/FocusTrap.stories.tsx b/packages/hightide-web/stories/Utilities/Focus Management/FocusTrap.stories.tsx
index 4cd84068..d31b220c 100644
--- a/packages/hightide-web/stories/Utilities/Focus Management/FocusTrap.stories.tsx	
+++ b/packages/hightide-web/stories/Utilities/Focus Management/FocusTrap.stories.tsx	
@@ -3,7 +3,7 @@ import { useRef, useState } from 'react'
 import { Input } from '../../../src/components/user-interaction/input/Input'
 import { FocusTrapWrapper } from '../../../src/components/utils/FocusTrap'
 import { clsx } from 'clsx'
-import { Dialog } from '../../../src/components/layout/dialog/Dialog'
+import { Modal } from '../../../src/components/layout/Modal/Modal'
 import { Button } from '../../../src/components/user-interaction/Button'
 
 type StoryArgs = unknown
@@ -24,7 +24,7 @@ export const focusTrap: Story = {
 
     return (
       <>
-        <Dialog
+        <Modal
           isOpen={showDialog}
           titleElement="Dialog 1"
           description="This is the second dialog trap"
@@ -36,8 +36,8 @@ export const focusTrap: Story = {
           <Button onClick={() => setShowDialog(false)} color="negative">
           Close
           </Button>
-        </Dialog>
-        <Dialog
+        </Modal>
+        <Modal
           isOpen={showDialog2}
           titleElement="Dialog 2"
           description="This is the second dialog trap"

From 38e20fa6261c5374af7017c5fb71f02aeb6757ab Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Wed, 30 Sep 2026 16:24:50 +0200
Subject: [PATCH 18/25] chore: update select and input styling

---
 packages/hightide-web/CHANGELOG.md               |  2 ++
 .../FileInput/FileInputTrigger.tsx               |  2 --
 .../MultiSelectChipDisplayTrigger.tsx            |  2 --
 .../MultiSelect/MultiSelectOption.tsx            |  6 ++++++
 .../MultiSelect/MultiSelectTrigger.tsx           |  2 --
 .../user-interaction/Select/SelectOption.tsx     |  6 ++++++
 .../user-interaction/Select/SelectTrigger.tsx    |  2 --
 .../src/components/user-interaction/Textarea.tsx |  2 --
 .../user-interaction/input/DateTimeInput.tsx     |  2 --
 .../components/user-interaction/input/Input.tsx  |  2 --
 .../user-interaction/input/NumberInput.tsx       |  2 --
 .../style/theme/components/input-elements.css    | 16 ++++------------
 .../src/style/theme/components/select.css        | 11 +++++++----
 13 files changed, 25 insertions(+), 32 deletions(-)

diff --git a/packages/hightide-web/CHANGELOG.md b/packages/hightide-web/CHANGELOG.md
index 2d7bb9cd..d1cbdbba 100644
--- a/packages/hightide-web/CHANGELOG.md
+++ b/packages/hightide-web/CHANGELOG.md
@@ -57,6 +57,8 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Dark theme background is `gray-800`, surface is `gray-700`, surface variant is `gray-750`, and primary stays `purple-500`
 - Coloring custom properties start as `initial` instead of `transparent`
 - `Select` and `MultiSelect` show the search field when the option count is at least `searchableThreshold` (default `6`)
+- `Select` and `MultiSelect` menu options use interactive foreground coloring with `surface-inverse` instead of a primary highlight
+- Input elements no longer set coloring data attributes. `Select` and `MultiSelect` triggers use the input hover and press background
 - `Carousel` is a compound component: `Carousel.Root`, `Carousel.Container`, `Carousel.Slide`, `Carousel.Arrows`, `Carousel.FadeLayover`, `Carousel.Stepper`, `Carousel.Context`, and `Carousel.Consumer`. The combined `Carousel` still composes them from `children`, `hintNext`, `arrows`, `dots`, and `blurColor`
 - `Modal` is a compound component: `Modal.Root`, `Modal.Container`, `Modal.Background`, `Modal.Content`, `Modal.Title`, `Modal.Description`, `Modal.CloseButton`, `Modal.Opener`, `Modal.Context`, and `Modal.Consumer`. The combined `Modal` takes `titleElement`, `description`, `position`, `isClosable`, and slot props `containerProps`, `backgroundProps`, `contentProps`, `titleProps`, `descriptionProps`, and `closeButtonProps`
 - `isClosable` (default `true`) hides the close button and ignores close requests when `false`
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
index 053840fb..0ecb2bd6 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
@@ -6,7 +6,6 @@ import { FileText, Pencil, Plus } from 'lucide-react'
 import { Icon } from '../../display-and-visualization/Icon'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
-import { ColoringUtils } from '../../../utils/coloring'
 import { useFileInputContext } from './FileInputContext'
 import { splitVisibleFileInputItems } from './fileInputItem'
 
@@ -58,7 +57,6 @@ const FileInputTriggerImpl = forwardRef<HTMLDivElement, FileInputTriggerProps>(f
           event.preventDefault()
         }
       }}
-      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('file-input-trigger', props.className)}
       data-value={hasFiles ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
index b295d34a..ef35ac31 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
@@ -5,7 +5,6 @@ import { IconButton } from '../IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { XIcon, Plus } from 'lucide-react'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
-import { ColoringUtils } from '../../../utils/coloring'
 import clsx from 'clsx'
 
 export type MultiSelectChipDisplayTriggerProps = HTMLAttributes<HTMLDivElement> & {
@@ -46,7 +45,6 @@ export const MultiSelectChipDisplayTrigger = forwardRef<
     <div
       {...props}
       ref={ReactUtils.assingRefsBuilder([innerRef, ref])}
-      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('multi-select-chip-display-container', props.className)}
       data-value={context.value.length > 0 ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
index 8730bd45..4f931fdb 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { CheckIcon } from 'lucide-react'
 import { Icon } from '../../display-and-visualization/Icon'
+import { ColoringUtils } from '../../../utils/coloring'
 import type React from 'react'
 import type { ForwardedRef, HTMLAttributes, RefObject } from 'react'
 import { createContext, forwardRef, useContext, useEffect, useMemo, useRef } from 'react'
@@ -106,6 +107,11 @@ const MultiSelectOptionImpl = forwardRef<
       aria-hidden={!isVisible}
 
       className={clsx('multi-select-list-option', props.className)}
+      {...ColoringUtils.build({
+        color: 'surface-inverse',
+        mode: 'interactive',
+        coloringStyle: 'foreground',
+      })}
       data-highlighted={isHighlighted ? '' : undefined}
       data-selected={isSelected ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
index 557fd49f..37f17367 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
@@ -7,7 +7,6 @@ import { useHightideTranslation } from '@helpwave/hightide-utils/context/transla
 import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
 import { MultiSelectOptionDisplayContext } from './MultiSelectOption'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
-import { ColoringUtils } from '../../../utils/coloring'
 
 export interface MultiSelectTriggerProps<T = string>
   extends ComponentPropsWithoutRef<'div'> {
@@ -92,7 +91,6 @@ const MultiSelectTriggerImpl = forwardRef<
           break
         }
       }}
-      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('multi-select-button', props.className)}
       data-value={hasValue ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
index 245b615f..06627a46 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { CheckIcon } from 'lucide-react'
 import { Icon } from '../../display-and-visualization/Icon'
+import { ColoringUtils } from '../../../utils/coloring'
 import type React from 'react'
 import type { ForwardedRef, HTMLAttributes, RefObject } from 'react'
 import { createContext, forwardRef, useContext, useEffect, useMemo, useRef } from 'react'
@@ -103,6 +104,11 @@ const SelectOptionImpl = forwardRef<
       aria-hidden={!isVisible}
 
       className={clsx('select-list-option', props.className)}
+      {...ColoringUtils.build({
+        color: 'surface-inverse',
+        mode: 'interactive',
+        coloringStyle: 'foreground',
+      })}
       data-highlighted={isHighlighted ? '' : undefined}
       data-selected={isSelected ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
index 0ac3fbef..ad657575 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
@@ -8,7 +8,6 @@ import { useHightideTranslation } from '@helpwave/hightide-utils/context/transla
 import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
 import { SelectOptionDisplayContext } from './SelectOption'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
-import { ColoringUtils } from '../../../utils/coloring'
 
 export interface SelectTriggerProps<T = string> extends ComponentPropsWithoutRef<'div'> {
   placeholder?: ReactNode,
@@ -90,7 +89,6 @@ const SelectTriggerImpl = forwardRef<
           break
         }
       }}
-      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('select-button', props.className)}
       data-value={hasValue ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
diff --git a/packages/hightide-web/src/components/user-interaction/Textarea.tsx b/packages/hightide-web/src/components/user-interaction/Textarea.tsx
index b19ee1fd..fdf59c79 100644
--- a/packages/hightide-web/src/components/user-interaction/Textarea.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Textarea.tsx
@@ -7,7 +7,6 @@ import type { FormFieldDataHandling } from '../form/FormField'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
-import { ColoringUtils } from '../../utils/coloring'
 import { PropsUtil } from '../../utils/propsUtil'
 
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>
@@ -64,7 +63,6 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
         onEditCompleteWrapper(event.target.value)
       }}
 
-      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('textarea', props.className)}
       data-value={PropsUtil.dataAttributes.bool(!!value)}
       {...PropsUtil.dataAttributes.interactionStates({ ...props, invalid })}
diff --git a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
index 96c8a8b7..b23fe312 100644
--- a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
@@ -13,7 +13,6 @@ import type { FormFieldInteractionStates } from '../../form/FieldLayout'
 import { PopUp } from '../../layout/popup/PopUp'
 import { IconButton } from '../IconButton'
 import { DateUtils, type DateTimeFormat } from '@helpwave/hightide-utils/utils'
-import { ColoringUtils } from '../../../utils/coloring'
 import { DateTimeField } from './DateTimeField'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import { PropsUtil } from '../../../utils/propsUtil'
@@ -131,7 +130,6 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
           }
         }}
 
-        {...ColoringUtils.dataColoringMode('interactive')}
         className={clsx('date-time-input', props.className)}
         data-value={PropsUtil.dataAttributes.bool(!!state)}
         data-has-actions={PropsUtil.dataAttributes.bool(hasActions)}
diff --git a/packages/hightide-web/src/components/user-interaction/input/Input.tsx b/packages/hightide-web/src/components/user-interaction/input/Input.tsx
index 17cb377a..adc2585b 100644
--- a/packages/hightide-web/src/components/user-interaction/input/Input.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/Input.tsx
@@ -9,7 +9,6 @@ import type { FormFieldDataHandling } from '../../form/FormField'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
-import { ColoringUtils } from '../../../utils/coloring'
 import { PropsUtil } from '../../../utils/propsUtil'
 
 export type EditCompleteOptionsResolved = {
@@ -105,7 +104,6 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         setValue(value)
       }}
 
-      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('input', props.className)}
       data-value={PropsUtil.dataAttributes.bool(!!value)}
       {...PropsUtil.dataAttributes.interactionStates({ ...props, invalid })}
diff --git a/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx b/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
index 76daaa7a..ad9e9c0c 100644
--- a/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
@@ -6,7 +6,6 @@ import type { FormFieldDataHandling } from '../../form/FormField'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import { MathUtil } from '@helpwave/hightide-utils/utils'
-import { ColoringUtils } from '../../../utils/coloring'
 import { PropsUtil } from '../../../utils/propsUtil'
 
 export type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'type' | 'min' | 'max' | 'step'>
@@ -76,7 +75,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(functi
       data-value={PropsUtil.dataAttributes.bool(Number.isFinite(value))}
       {...PropsUtil.dataAttributes.interactionStates({ disabled, invalid, readOnly, required })}
       {...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props)}
-      {...ColoringUtils.dataColoringMode('interactive')}
       className={clsx('number-input number-input-field', className)}
       style={{
         ...style,
diff --git a/packages/hightide-web/src/style/theme/components/input-elements.css b/packages/hightide-web/src/style/theme/components/input-elements.css
index bee33651..5aa3407d 100644
--- a/packages/hightide-web/src/style/theme/components/input-elements.css
+++ b/packages/hightide-web/src/style/theme/components/input-elements.css
@@ -11,10 +11,6 @@
   &:not([data-disabled]):not([data-invalid]) {
     @apply bg-input-background;
 
-    &:not([data-readonly]) {
-      --coloring-foreground: var(--color-on-surface);
-    }
-
     &:not([data-value]) {
       @apply text-placeholder;
     }
@@ -27,10 +23,6 @@
   &:not([data-disabled])[data-invalid] {
     @apply bg-negative/20 border-negative;
 
-    &:not([data-readonly]) {
-      --coloring-foreground: var(--color-negative);
-    }
-
     --color-focus: var(--color-negative);
 
     &[data-value] {
@@ -46,19 +38,19 @@
     @apply border-disabled bg-disabled text-on-disabled placeholder:text-transparent cursor-not-allowed;
   }
 
-  &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly]):not([data-invalid]):hover {
+  &:not([data-disabled]):not([data-readonly]):not([data-invalid]):hover {
     background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), var(--color-input-background));
   }
 
-  &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly]):not([data-invalid]):active {
+  &:not([data-disabled]):not([data-readonly]):not([data-invalid]):active {
     background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-press), var(--color-input-background));
   }
 
-  &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly])[data-invalid]:hover {
+  &:not([data-disabled]):not([data-readonly])[data-invalid]:hover {
     background-color: color-mix(in oklch, var(--color-negative) var(--coloring-state-hover), color-mix(in oklch, var(--color-negative) 20%, transparent));
   }
 
-  &[data-coloring-mode="interactive"]:is(input, textarea):not([data-disabled]):not([data-readonly])[data-invalid]:active {
+  &:not([data-disabled]):not([data-readonly])[data-invalid]:active {
     background-color: color-mix(in oklch, var(--color-negative) var(--coloring-state-press), color-mix(in oklch, var(--color-negative) 20%, transparent));
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/select.css b/packages/hightide-web/src/style/theme/components/select.css
index d13fc053..7278c498 100644
--- a/packages/hightide-web/src/style/theme/components/select.css
+++ b/packages/hightide-web/src/style/theme/components/select.css
@@ -48,10 +48,6 @@
 
     &:not([data-disabled]) {
       @apply cursor-pointer;
-
-      &[data-highlighted] {
-        @apply bg-primary/20;
-      }
     }
   }
 
@@ -60,3 +56,10 @@
     @apply text-description px-2 py-1 rounded-md;
   }
 }
+
+@layer utilities {
+  .select-list-option:not([data-disabled])[data-highlighted]::before,
+  .multi-select-list-option:not([data-disabled])[data-highlighted]::before {
+    opacity: var(--coloring-state-hover);
+  }
+}

From d0d410b71167aa99c3fa40cf3880068bc61a9aa6 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Wed, 30 Sep 2026 16:46:28 +0200
Subject: [PATCH 19/25] feat: update layout of date time pickers

---
 packages/hightide-web/CHANGELOG.md                    |  3 +++
 .../user-interaction/WheelPicker/WheelPickerRoot.tsx  | 11 ++++++++++-
 .../user-interaction/input/DateTimeInput.tsx          |  9 ++++++---
 .../src/style/theme/components/date-time-input.css    |  9 ++++++---
 .../theme/components/date-time-picker-dialog.css      |  2 +-
 .../src/style/theme/components/wheel-picker.css       |  1 +
 .../DateTimePickerDialog.stories.tsx                  |  6 +++++-
 7 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/packages/hightide-web/CHANGELOG.md b/packages/hightide-web/CHANGELOG.md
index d1cbdbba..bfaa7fa7 100644
--- a/packages/hightide-web/CHANGELOG.md
+++ b/packages/hightide-web/CHANGELOG.md
@@ -59,6 +59,9 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `Select` and `MultiSelect` show the search field when the option count is at least `searchableThreshold` (default `6`)
 - `Select` and `MultiSelect` menu options use interactive foreground coloring with `surface-inverse` instead of a primary highlight
 - Input elements no longer set coloring data attributes. `Select` and `MultiSelect` triggers use the input hover and press background
+- Clicking a looped `WheelPicker` value selects it, including the repeated value past the end of the list
+- `DateTimePickerDialog` centers its wheels horizontally
+- `date-time-input-dialog-popup` sets `data-time-format` (`12h` or `24h`). A 12-hour `dateTime` popup uses a larger tablet minimum width
 - `Carousel` is a compound component: `Carousel.Root`, `Carousel.Container`, `Carousel.Slide`, `Carousel.Arrows`, `Carousel.FadeLayover`, `Carousel.Stepper`, `Carousel.Context`, and `Carousel.Consumer`. The combined `Carousel` still composes them from `children`, `hintNext`, `arrows`, `dots`, and `blurColor`
 - `Modal` is a compound component: `Modal.Root`, `Modal.Container`, `Modal.Background`, `Modal.Content`, `Modal.Title`, `Modal.Description`, `Modal.CloseButton`, `Modal.Opener`, `Modal.Context`, and `Modal.Consumer`. The combined `Modal` takes `titleElement`, `description`, `position`, `isClosable`, and slot props `containerProps`, `backgroundProps`, `contentProps`, `titleProps`, `descriptionProps`, and `closeButtonProps`
 - `isClosable` (default `true`) hides the close button and ignores close requests when `false`
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx
index 3ea64f0d..ed571ddc 100644
--- a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx
+++ b/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx
@@ -221,9 +221,18 @@ export function WheelPickerRoot<T>({
     if (index < 0) {
       return
     }
+    const currentIndex = options.findIndex((option) => Object.is(option.value, selectedRef.current))
+    if (isLooping && currentIndex >= 0 && options.length > 1) {
+      const forward = (index - currentIndex + options.length) % options.length
+      const steps = forward <= options.length / 2 ? forward : forward - options.length
+      if (steps !== 0 && (currentIndex + steps < 0 || currentIndex + steps >= options.length)) {
+        stepBy(steps)
+        return
+      }
+    }
     scrollToIndex(index, 'smooth')
     applyValue(next)
-  }, [applyValue, disabled, scrollToIndex])
+  }, [applyValue, disabled, isLooping, scrollToIndex, stepBy])
 
   const publishOptions = useCallback(() => {
     if (optionsPublishScheduled.current) {
diff --git a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
index b23fe312..94c45b0f 100644
--- a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
@@ -4,7 +4,7 @@ import { CalendarIcon, X } from 'lucide-react'
 import clsx from 'clsx'
 import type { DateTimePickerProps } from '../date/DateTimePicker'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { useLocalization } from '../../../global-contexts/localization/forward-exports'
+import { useDateTimeFormat, useLocalization } from '../../../global-contexts/localization/forward-exports'
 import { Visibility } from '../../layout/Visibility'
 import type { FormFieldDataHandling } from '../../form/FormField'
 import { DateTimePickerDialog } from '../date/DateTimePickerDialog'
@@ -67,7 +67,9 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
 }, forwardedRef) {
   const translation = useHightideTranslation()
   const { timeZone: contextTimeZone } = useLocalization()
+  const { is24HourFormat: contextIs24HourFormat } = useDateTimeFormat()
   const timeZone = timeZoneOverride ?? contextTimeZone
+  const resolvedIs24HourFormat = is24HourFormat ?? contextIs24HourFormat
   const [isOpen, setIsOpen] = useState(false)
   const [state, setState] = useControlledState<Date | null>({
     value,
@@ -140,7 +142,7 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
           value={toZoned(state)}
           mode={mode}
           precision={precision}
-          is24HourFormat={is24HourFormat}
+          is24HourFormat={resolvedIs24HourFormat}
           disabled={disabled}
           readOnly={readOnly}
           invalid={invalid}
@@ -199,6 +201,7 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
         aria-labelledby={ids.label}
 
         data-mode={mode}
+        data-time-format={resolvedIs24HourFormat ? '24h' : '12h'}
 
         className="date-time-input-dialog-popup"
       >
@@ -218,7 +221,7 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
           end={toZoned(end ?? null) ?? undefined}
           weekStart={weekStart}
           markToday={markToday}
-          is24HourFormat={is24HourFormat}
+          is24HourFormat={resolvedIs24HourFormat}
           minuteIncrement={minuteIncrement}
           secondIncrement={secondIncrement}
           millisecondIncrement={millisecondIncrement}
diff --git a/packages/hightide-web/src/style/theme/components/date-time-input.css b/packages/hightide-web/src/style/theme/components/date-time-input.css
index 4d8f0e53..bf76d65a 100644
--- a/packages/hightide-web/src/style/theme/components/date-time-input.css
+++ b/packages/hightide-web/src/style/theme/components/date-time-input.css
@@ -33,11 +33,14 @@
   }
 
   .date-time-input-dialog-popup {
-    @apply flex-col-0 min-w-96;
-    min-width: calc(min(100vw - 4 * var(--spacing), 96 * var(--spacing)));
+    @apply flex-col-0 w-fit min-w-64;
 
     &[data-mode="dateTime"] {
-      @apply tablet:min-w-180;
+      @apply tablet:min-w-100;
+    }
+
+    &[data-mode="dateTime"][data-time-format="12h"] {
+      @apply tablet:min-w-120;
     }
   }
 
diff --git a/packages/hightide-web/src/style/theme/components/date-time-picker-dialog.css b/packages/hightide-web/src/style/theme/components/date-time-picker-dialog.css
index 6ca8b6a6..43fb2df9 100644
--- a/packages/hightide-web/src/style/theme/components/date-time-picker-dialog.css
+++ b/packages/hightide-web/src/style/theme/components/date-time-picker-dialog.css
@@ -1,6 +1,6 @@
 @layer components {
   .date-time-picker-dialog {
-    @apply flex-col-2 w-full overflow-x-hidden overflow-y-auto p-2;
+    @apply flex-col-2 w-full items-center overflow-x-hidden overflow-y-auto p-2;
     container-type: inline-size;
     container-name: date-time-picker-dialog;
   }
diff --git a/packages/hightide-web/src/style/theme/components/wheel-picker.css b/packages/hightide-web/src/style/theme/components/wheel-picker.css
index cc8e01f1..fd6832ba 100644
--- a/packages/hightide-web/src/style/theme/components/wheel-picker.css
+++ b/packages/hightide-web/src/style/theme/components/wheel-picker.css
@@ -50,6 +50,7 @@
   }
 
   .wheel-picker-loop-preview .wheel-picker-option {
+    pointer-events: auto;
     scroll-snap-align: none;
   }
 
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimePickerDialog.stories.tsx b/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimePickerDialog.stories.tsx
index eb7113fa..ab42edf8 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimePickerDialog.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimePickerDialog.stories.tsx	
@@ -36,7 +36,11 @@ export const dateTimePickerDialog: Story = {
     }, [initialValue])
 
     return (
-      <div className="date-time-input-dialog-popup" data-mode={args.mode}>
+      <div
+        className="date-time-input-dialog-popup"
+        data-mode={args.mode}
+        data-time-format={args.is24HourFormat ? '24h' : '12h'}
+      >
         <DateTimePickerDialog
           {...args}
           value={value}

From 8d528bb064893c302aef0884f6a06fdc0538a7c9 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Wed, 30 Sep 2026 18:08:27 +0200
Subject: [PATCH 20/25] feat: introduce InputInterface

---
 conventions/Components.md                     | 45 ++++++++++++-------
 packages/hightide-web/CHANGELOG.md            |  3 ++
 .../src/components/form/FormField.tsx         |  7 +--
 .../hightide-web/src/components/form/index.ts |  7 ++-
 .../components/user-interaction/Checkbox.tsx  |  8 +---
 .../FileInput/FileInputContext.tsx            |  4 +-
 .../FileInput/FileInputRoot.tsx               |  6 +--
 .../user-interaction/LabelledCheckbox.tsx     |  7 +--
 .../MultiSelect/MultiSelectComponent.tsx      |  2 +-
 .../MultiSelect/MultiSelectContext.tsx        |  4 +-
 .../MultiSelect/MultiSelectOption.tsx         |  2 +-
 .../MultiSelect/MultiSelectRoot.tsx           | 16 +++----
 .../MultiSelect/MultiSelectTrigger.tsx        |  2 +-
 .../Select/SelectComponent.tsx                |  2 +-
 .../user-interaction/Select/SelectContext.tsx |  4 +-
 .../user-interaction/Select/SelectOption.tsx  |  2 +-
 .../user-interaction/Select/SelectRoot.tsx    | 17 +++----
 .../user-interaction/Select/SelectTrigger.tsx |  2 +-
 .../components/user-interaction/Switch.tsx    |  9 +---
 .../components/user-interaction/Textarea.tsx  |  7 +--
 .../date/CalendarDatePicker.tsx               |  5 +--
 .../date/CalendarDayPicker.tsx                |  5 +--
 .../user-interaction/date/DateTimePicker.tsx  |  5 +--
 .../date/DateTimePickerDialog.tsx             |  5 +--
 .../date/DateTimeWheelPicker.tsx              |  5 +--
 .../user-interaction/date/DateWheelPicker.tsx |  5 +--
 .../user-interaction/date/TimePicker.tsx      |  5 +--
 .../user-interaction/date/TimeWheelPicker.tsx |  5 +--
 .../user-interaction/date/YearMonthPicker.tsx |  5 +--
 .../user-interaction/input/DateTimeField.tsx  |  7 +--
 .../user-interaction/input/DateTimeInput.tsx  |  9 ++--
 .../user-interaction/input/Input.tsx          | 17 ++++---
 .../user-interaction/input/NumberInput.tsx    |  7 +--
 .../input/NumberStepperInput.tsx              |  7 +--
 .../style/theme/components/input-elements.css | 40 +++++++++++++++++
 .../User Interaction/Form/Form.stories.tsx    | 11 +++--
 .../User Interaction/Input/Input.stories.tsx  |  1 +
 .../Select/Select.stories.tsx                 |  7 ++-
 38 files changed, 163 insertions(+), 144 deletions(-)

diff --git a/conventions/Components.md b/conventions/Components.md
index 6eef8802..adb9c6b9 100644
--- a/conventions/Components.md
+++ b/conventions/Components.md
@@ -4,9 +4,9 @@ How components are structured.
 
 ## Anatomy
 
-Every component is split into primitives, and every component has an aggregate.
+Every component is split into parts, and every component has an aggregate.
 
-The aggregate is the component used in the common case. Primitives are the individual elements of that component, attached as static members of the aggregate.
+The aggregate is the component used in the common case. Parts are the individual elements of that component, attached as static members of the aggregate.
 
 ```tsx
 <Select value={value} onValueChange={setValue}>
@@ -14,13 +14,13 @@ The aggregate is the component used in the common case. Primitives are the indiv
 </Select>
 ```
 
-`<Select />` is the aggregate. `Select.Root`, `Select.Trigger`, `Select.Content`, and `Select.Option` are the primitives. Each element of the component has its own primitive.
+`<Select />` is the aggregate. `Select.Root`, `Select.Trigger`, `Select.Content`, and `Select.Option` are its parts.
 
-The aggregate composes those primitives into the default arrangement. Callers who need a different arrangement use the primitives directly. Both forms are part of the public API.
+The aggregate composes those parts into the default arrangement. Callers who need a different arrangement use the parts directly. Both forms are part of the public API.
 
 ### Aggregate
 
-Props that belong to an individual primitive can be set on the aggregate. A dedicated props object for that primitive overwrites the values the aggregate already applied.
+Props that belong to an individual part can be set on the aggregate. A dedicated props object for that part overwrites the values the aggregate already applied.
 
 ```tsx
 <Select
@@ -47,23 +47,16 @@ That aggregate is the same composition as:
 </Select.Root>
 ```
 
-### Primitives
+### Parts
 
-A primitive owns one element: the root, the trigger, the content panel, an option, and so on. Name them `Component.Element`, and export them on the aggregate.
+Every part of the aggregate is one of these.
 
-### Root
+#### Context, Provider, and Consumer
 
-When primitives share state, the component provides a `Component.Root` primitive. Root parameterizes that state and provides it through context. The other primitives read the context. They do not own the shared state themselves.
-
-`Select.Root` holds the open state, the current value, interaction flags such as disabled, invalid, and read-only, and option registration, and passes them through `Select.Context`.
-
-A component whose primitives do not share state does not have a Root.
-
-### Context
-
-When a component has a context, the object that collects its primitives exposes that context and its consumer.
+When a component has a context, the aggregate always exposes all three.
 
 - `Component.Context` is the React context.
+- `Component.Provider` is `Component.Context.Provider`.
 - `Component.Consumer` is `Component.Context.Consumer`.
 
 ```tsx
@@ -76,6 +69,24 @@ When a component has a context, the object that collects its primitives exposes
 
 Callers read shared state through `Component.Consumer` or the component hook. They do not reach the consumer by importing the context module.
 
+#### Root
+
+`Component.Root` is the logic of the component. It parameterizes shared state and provides it through context. It renders no HTML element.
+
+The other parts read that context. They do not own the shared state themselves.
+
+`Select.Root` holds the open state, the current value, interaction flags such as disabled, invalid, and read-only, and option registration, and passes them through `Select.Context`.
+
+A component whose parts do not share state does not have a Root.
+
+#### Subcomponent
+
+A subcomponent wraps HTML for one purpose: the trigger, the content panel, an option, and so on. Name it `Component.Element`, and export it on the aggregate.
+
+It contains one HTML element. It is a `forwardRef` to that element, and its props extend `HTMLAttributes` for that element.
+
+When a subcomponent contains more than one HTML element, it still forwards a ref, and every HTML element inside has its own `HTMLAttributes` props.
+
 ## Styling identification
 
 Components identify themselves for styling with class names. Do not use `data-name`, or any other data attribute, as the styling hook.
diff --git a/packages/hightide-web/CHANGELOG.md b/packages/hightide-web/CHANGELOG.md
index bfaa7fa7..9d8f6220 100644
--- a/packages/hightide-web/CHANGELOG.md
+++ b/packages/hightide-web/CHANGELOG.md
@@ -62,6 +62,9 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Clicking a looped `WheelPicker` value selects it, including the repeated value past the end of the list
 - `DateTimePickerDialog` centers its wheels horizontally
 - `date-time-input-dialog-popup` sets `data-time-format` (`12h` or `24h`). A 12-hour `dateTime` popup uses a larger tablet minimum width
+- Value callbacks use `InputInterface` on `Input`, including optional `initialValue`, `invalid`, `disabled`, `readOnly`, and `required`. Form fields keep `FormFieldDataHandling` for their own required value props
+- `Select` and `MultiSelect` values are no longer `T | null`. An empty selection is omitted
+- Readonly `.input` text, border, and focus use 80% opacity
 - `Carousel` is a compound component: `Carousel.Root`, `Carousel.Container`, `Carousel.Slide`, `Carousel.Arrows`, `Carousel.FadeLayover`, `Carousel.Stepper`, `Carousel.Context`, and `Carousel.Consumer`. The combined `Carousel` still composes them from `children`, `hintNext`, `arrows`, `dots`, and `blurColor`
 - `Modal` is a compound component: `Modal.Root`, `Modal.Container`, `Modal.Background`, `Modal.Content`, `Modal.Title`, `Modal.Description`, `Modal.CloseButton`, `Modal.Opener`, `Modal.Context`, and `Modal.Consumer`. The combined `Modal` takes `titleElement`, `description`, `position`, `isClosable`, and slot props `containerProps`, `backgroundProps`, `contentProps`, `titleProps`, `descriptionProps`, and `closeButtonProps`
 - `isClosable` (default `true`) hides the close button and ignores close requests when `false`
diff --git a/packages/hightide-web/src/components/form/FormField.tsx b/packages/hightide-web/src/components/form/FormField.tsx
index 16b0f4be..fc38ddaf 100644
--- a/packages/hightide-web/src/components/form/FormField.tsx
+++ b/packages/hightide-web/src/components/form/FormField.tsx
@@ -1,3 +1,4 @@
+import type { InputInterface } from '../user-interaction/input/Input'
 import type { FormFieldAriaAttributes, FormFieldInteractionStates } from './FieldLayout'
 import { FormFieldLayout, type FormFieldLayoutProps } from './FieldLayout'
 import { useFormField } from './FormContext'
@@ -26,11 +27,7 @@ export interface FormFieldProps<T extends FormValue, K extends keyof T> extends
   validationBehaviour?: FormValidationBehaviour,
 }
 
-export type FormFieldDataHandling<T> = {
-  value: T,
-  onValueChange: (value: T) => void,
-  onEditComplete: (value: T) => void,
-}
+export type FormFieldDataHandling<T> = Required<Pick<InputInterface<T>, 'value' | 'onValueChange' | 'onEditComplete'>>
 
 export const FormField = <T extends FormValue, K extends keyof T>({ children, name, triggerUpdateOnEditComplete, validationBehaviour, ...props }: FormFieldProps<T, K>) => {
   const formField = useFormField<T, K>(name, { triggerUpdate: triggerUpdateOnEditComplete, validationBehaviour })
diff --git a/packages/hightide-web/src/components/form/index.ts b/packages/hightide-web/src/components/form/index.ts
index 585dbc17..3d3400fc 100644
--- a/packages/hightide-web/src/components/form/index.ts
+++ b/packages/hightide-web/src/components/form/index.ts
@@ -1,6 +1,11 @@
 export * from './FieldLayout'
 export * from './FormContext'
-export * from './FormField'
+export {
+  FormField,
+  type FormFieldBag,
+  type FormFieldFocusableElementProps,
+  type FormFieldProps,
+} from './FormField'
 export * from './FormObserver'
 export * from './FormStore'
 export * from './useCreateForm'
diff --git a/packages/hightide-web/src/components/user-interaction/Checkbox.tsx b/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
index 4dc41f57..710b0599 100644
--- a/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
@@ -4,8 +4,7 @@ import type { IconSize } from '../display-and-visualization/Icon'
 import { Icon } from '../display-and-visualization/Icon'
 import { useCallback, type HTMLAttributes } from 'react'
 import { Visibility } from '../layout/Visibility'
-import type { FormFieldInteractionStates } from '../form/FieldLayout'
-import type { FormFieldDataHandling } from '../form/FormField'
+import type { InputInterface } from './input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
@@ -15,15 +14,12 @@ import { PropsUtil } from '../../utils/propsUtil'
 type CheckBoxSize = 'sm' | 'md' | 'lg' | null
 
 export type CheckboxProps = HTMLAttributes<HTMLDivElement>
-  & Partial<FormFieldInteractionStates>
-  & Partial<FormFieldDataHandling<boolean>>
+  & InputInterface<boolean>
   & {
-    initialValue?: boolean,
     indeterminate?: boolean,
     size?: CheckBoxSize,
     alwaysShowCheckIcon?: boolean,
     isRounded?: boolean,
-    interactive?: boolean,
   }
 
 /**
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputContext.tsx b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputContext.tsx
index 57db835d..fc5581f9 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputContext.tsx
+++ b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputContext.tsx
@@ -1,11 +1,11 @@
 import type { RefObject } from 'react'
 import { createContext, useContext } from 'react'
-import type { FormFieldInteractionStates } from '../../form/FieldLayout'
+import type { InputInterface } from '../input/Input'
 import type { FileInputItem } from './fileInputItem'
 
 export type FileInputPickFiles = () => Promise<readonly FileInputItem[] | null | undefined>
 
-export type FileInputContextType = Partial<FormFieldInteractionStates> & {
+export type FileInputContextType = Pick<InputInterface<unknown>, 'invalid' | 'disabled' | 'readOnly' | 'required'> & {
   files: readonly FileInputItem[],
   isOpen: boolean,
   isDragging: boolean,
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputRoot.tsx b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputRoot.tsx
index c0486960..4e149a84 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputRoot.tsx
+++ b/packages/hightide-web/src/components/user-interaction/FileInput/FileInputRoot.tsx
@@ -4,8 +4,7 @@ import {
   useControlledState,
   useEventCallbackStabilizer
 } from '@helpwave/hightide-utils/hooks'
-import type { FormFieldDataHandling } from '../../form/FormField'
-import type { FormFieldInteractionStates } from '../../form/FieldLayout'
+import type { InputInterface } from '../input/Input'
 import { SafeGlobals } from '../../../utils/safeGlobals'
 import { FileInputContext, type FileInputContextType, type FileInputPickFiles } from './FileInputContext'
 import {
@@ -17,9 +16,8 @@ import {
   type FileInputItem
 } from './fileInputItem'
 
-export interface FileInputRootProps extends Omit<Partial<FormFieldDataHandling<readonly FileInputItem[]>>, 'value'>, Partial<FormFieldInteractionStates> {
+export interface FileInputRootProps extends Omit<InputInterface<readonly FileInputItem[]>, 'value'> {
   value?: readonly FileInputItem[],
-  initialValue?: readonly FileInputItem[],
   initialIsOpen?: boolean,
   onClose?: () => void,
   onIsOpenChange?: (isOpen: boolean) => void,
diff --git a/packages/hightide-web/src/components/user-interaction/LabelledCheckbox.tsx b/packages/hightide-web/src/components/user-interaction/LabelledCheckbox.tsx
index a1f3b0aa..ece00fcb 100644
--- a/packages/hightide-web/src/components/user-interaction/LabelledCheckbox.tsx
+++ b/packages/hightide-web/src/components/user-interaction/LabelledCheckbox.tsx
@@ -3,19 +3,16 @@ import type { HTMLAttributes, ReactNode } from 'react'
 import { forwardRef, useCallback, useId } from 'react'
 import { Checkbox, type CheckboxProps } from './Checkbox'
 import { PropsUtil } from '../../utils/propsUtil'
-import type { FormFieldDataHandling } from '../form/FormField'
-import type { FormFieldInteractionStates } from '../form/FieldLayout'
+import type { InputInterface } from './input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
 type LabelledCheckboxCheckPosition = 'left' | 'right'
 
 export type LabelledCheckboxProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>
-  & Partial<FormFieldInteractionStates>
-  & Partial<FormFieldDataHandling<boolean>>
+  & InputInterface<boolean>
   & Pick<CheckboxProps, 'indeterminate' | 'size' | 'alwaysShowCheckIcon' | 'isRounded'>
   & {
-    initialValue?: boolean,
     label: ReactNode,
     checkPosition?: LabelledCheckboxCheckPosition,
     checkboxClassName?: string,
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectComponent.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectComponent.tsx
index 997ee0bf..a64b8872 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectComponent.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectComponent.tsx
@@ -20,7 +20,7 @@ type MultiSelectComponentType = <T = string>(
   props: MultiSelectProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement>,
   }
-) => React.ReactElement | null
+) => React.ReactElement
 
 const MultiSelectComponentImpl = forwardRef<
   HTMLDivElement,
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContext.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
index 2693c32d..36165964 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
@@ -1,6 +1,6 @@
 import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'
 import { createContext, useContext } from 'react'
-import type { FormFieldInteractionStates } from '../../form/FieldLayout'
+import type { InputInterface } from '../input/Input'
 import type { UseMultiSelectFirstHighlightBehavior } from './useMultiSelect'
 
 export type MultiSelectOptionIdentity<T> = {
@@ -23,7 +23,7 @@ export interface MultiSelectContextIds {
   searchInput: string,
 }
 
-export interface MultiSelectContextState<T> extends FormFieldInteractionStates {
+export interface MultiSelectContextState<T> extends Required<Pick<InputInterface<T>, 'invalid' | 'disabled' | 'readOnly' | 'required'>> {
   value: T[],
   options: ReadonlyArray<MultiSelectOptionType<T>>,
   selectedIds: string[],
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
index 4f931fdb..03b20dd0 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
@@ -44,7 +44,7 @@ type MultiSelectOptionComponent = <T = string>(
   props: MultiSelectOptionProps<T> & {
     ref?: React.ForwardedRef<HTMLLIElement>,
   }
-) => React.ReactElement | null
+) => React.ReactElement
 
 const toIdentity = <T,>(value: T, valueId: string | undefined): MultiSelectOptionIdentity<T> => {
   if (valueId === undefined) {
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
index 41f94db9..0063356b 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
@@ -4,8 +4,7 @@ import { MultiSelectContext } from './MultiSelectContext'
 import type { MultiSelectContextType, MultiSelectIconAppearance, MultiSelectOptionType } from './MultiSelectContext'
 import { useMultiSelect } from './useMultiSelect'
 import { DOMUtils } from '../../../utils/dom'
-import type { FormFieldDataHandling } from '../../form/FormField'
-import type { FormFieldInteractionStates } from '../../form/FieldLayout'
+import type { InputInterface } from '../input/Input'
 import { PopUpContext } from '../../layout/popup/PopUpContext'
 
 export interface MultiSelectIds {
@@ -15,8 +14,7 @@ export interface MultiSelectIds {
   searchInput: string,
 }
 
-export interface MultiSelectRootProps<T> extends Partial<FormFieldDataHandling<T[]>>, Partial<FormFieldInteractionStates> {
-  initialValue?: T[],
+export interface MultiSelectRootProps<T> extends InputInterface<T[]> {
   compareFunction?: (a: T, b: T) => boolean,
   initialIsOpen?: boolean,
   onClose?: () => void,
@@ -85,14 +83,14 @@ export function MultiSelectRoot<T>({
   )
 
   const mappedValueIds = useMemo(() => {
-    if (value == null) return undefined
+    if (value === undefined) return undefined
     return value
       .map((v) => options.find((o) => compare(o.value.value, v))?.value.id)
       .filter((id) => id !== undefined)
   }, [options, value, compare])
 
   const mappedInitialValueIds = useMemo(() => {
-    if (initialValue == null) return []
+    if (initialValue === undefined) return []
     return initialValue
       .map((v) => options.find((o) => compare(o.value.value, v))?.value.id)
       .filter((id) => id !== undefined)
@@ -102,7 +100,7 @@ export function MultiSelectRoot<T>({
     (ids: string[]) => {
       const values = ids
         .map((id) => idToOptionMap[id]?.value.value)
-        .filter((v): v is T => v != null)
+        .filter((value): value is T => value !== undefined)
       onValueChange?.(values)
     },
     [idToOptionMap, onValueChange]
@@ -112,7 +110,7 @@ export function MultiSelectRoot<T>({
     (ids: string[]) => {
       const values = ids
         .map((id) => idToOptionMap[id]?.value.value)
-        .filter((v): v is T => v != null)
+        .filter((value): value is T => value !== undefined)
       onEditComplete?.(values)
     },
     [idToOptionMap, onEditComplete]
@@ -140,7 +138,7 @@ export function MultiSelectRoot<T>({
   const contextValue = useMemo((): MultiSelectContextType<T> => {
     const valueT = state.value
       .map((id) => idToOptionMap[id]?.value.value)
-      .filter((v): v is T => v != null)
+      .filter((value): value is T => value !== undefined)
     return {
       invalid,
       disabled,
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
index 37f17367..e99d7a85 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
@@ -20,7 +20,7 @@ type MultiSelectTriggerComponent = <T = string>(
   props: MultiSelectTriggerProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement>,
   }
-) => React.ReactElement | null
+) => React.ReactElement
 
 const MultiSelectTriggerImpl = forwardRef<
   HTMLDivElement,
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectComponent.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectComponent.tsx
index f0df5fac..5fad4e2d 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectComponent.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectComponent.tsx
@@ -20,7 +20,7 @@ type SelectComponentType = <T = string>(
   props: SelectProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement>,
   }
-) => React.ReactElement | null
+) => React.ReactElement
 
 const SelectComponentImpl = forwardRef<
   HTMLDivElement,
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectContext.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectContext.tsx
index 239773f8..3fe30c11 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectContext.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectContext.tsx
@@ -1,7 +1,7 @@
 import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'
 import { createContext, useContext } from 'react'
 import type { UseSelectFirstHighlightBehavior } from './useSelect'
-import type { FormFieldInteractionStates } from '../../form/FieldLayout'
+import type { InputInterface } from '../input/Input'
 
 export type SelectOptionIdentity<T> = {
   value: T,
@@ -23,7 +23,7 @@ export interface SelectContextIds {
   searchInput: string,
 }
 
-export interface SelectContextState<T> extends FormFieldInteractionStates {
+export interface SelectContextState<T> extends Required<Pick<InputInterface<T>, 'invalid' | 'disabled' | 'readOnly' | 'required'>> {
   selectedId: string | null,
   options: ReadonlyArray<SelectOptionType<T>>,
   highlightedId: string | null,
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
index 06627a46..ed4ec463 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
@@ -41,7 +41,7 @@ type SelectOptionComponent = <T = string>(
   props: SelectOptionProps<T> & {
     ref?: React.ForwardedRef<HTMLLIElement>,
   }
-) => React.ReactElement | null
+) => React.ReactElement
 
 const toIdentity = <T,>(value: T, valueId: string | undefined): SelectOptionIdentity<T> => {
   if (valueId === undefined) {
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectRoot.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectRoot.tsx
index e7a90197..2d0fbc93 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectRoot.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectRoot.tsx
@@ -4,9 +4,8 @@ import { SelectContext } from './SelectContext'
 import type { SelectContextConfig, SelectContextLayout, SelectOptionType } from './SelectContext'
 import { useSelect } from './useSelect'
 import { DOMUtils } from '../../../utils/dom'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from '../input/Input'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
-import type { FormFieldInteractionStates } from '../../form/FieldLayout'
 import { PopUpContext } from '../../layout/popup/PopUpContext'
 
 export interface SelectIds {
@@ -16,10 +15,8 @@ export interface SelectIds {
   searchInput: string,
 }
 
-export interface SelectRootProps<T> extends Omit<Partial<FormFieldDataHandling<T>>, 'value'>, Partial<FormFieldInteractionStates> {
-  value?: T | null,
-  initialValue?: T | null,
-  compareFunction?: (a: T | null, b: T | null) => boolean,
+export interface SelectRootProps<T> extends InputInterface<T> {
+  compareFunction?: (a: T, b: T) => boolean,
   initialIsOpen?: boolean,
   onClose?: () => void,
   onIsOpenChange?: (isOpen: boolean) => void,
@@ -92,12 +89,12 @@ export function SelectRoot<T>({
 
   const mappedValueId = useMemo(() => {
     if(value === undefined) return undefined
-    return options.find((o) => compare(o.value.value, value))?.value.id ?? null
+    return options.find((o) => compare(o.value.value, value))?.value.id
   }, [options, value, compare])
 
   const mappedInitialValueId = useMemo(() => {
     if(initialValue === undefined) return undefined
-    return options.find((o) => compare(o.value.value, initialValue))?.value.id ?? null
+    return options.find((o) => compare(o.value.value, initialValue))?.value.id
   }, [options, initialValue, compare])
 
   const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
@@ -124,8 +121,8 @@ export function SelectRoot<T>({
 
 
   const state = useSelect({
-    value: mappedValueId,
-    initialValue: mappedInitialValueId,
+    value: value !== undefined && mappedValueId === undefined ? null : mappedValueId,
+    initialValue: initialValue !== undefined && mappedInitialValueId === undefined ? null : mappedInitialValueId,
     onValueChange: onValueChangeWrapper,
     onEditComplete: onEditCompleteWrapper,
     options: options.map((o) => ({
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx b/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
index ad657575..320112d1 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
@@ -20,7 +20,7 @@ type SelectTriggerComponent = <T = string>(
   props: SelectTriggerProps<T> & {
     ref?: React.ForwardedRef<HTMLDivElement>,
   }
-) => React.ReactElement | null
+) => React.ReactElement
 
 const SelectTriggerImpl = forwardRef<
   HTMLDivElement,
diff --git a/packages/hightide-web/src/components/user-interaction/Switch.tsx b/packages/hightide-web/src/components/user-interaction/Switch.tsx
index 37abcf54..767c9d75 100644
--- a/packages/hightide-web/src/components/user-interaction/Switch.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Switch.tsx
@@ -1,18 +1,13 @@
 import clsx from 'clsx'
 import { type HTMLAttributes, useCallback } from 'react'
-import type { FormFieldInteractionStates } from '../form/FieldLayout'
-import type { FormFieldDataHandling } from '../form/FormField'
+import type { InputInterface } from './input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 import { ColoringUtils } from '../../utils/coloring'
 import { PropsUtil } from '../../utils/propsUtil'
 
 export type SwitchProps = HTMLAttributes<HTMLDivElement>
-  & Partial<FormFieldInteractionStates>
-  & Partial<FormFieldDataHandling<boolean>>
-  & {
-    initialValue?: boolean,
-  }
+  & InputInterface<boolean>
 
 /**
  * A binary on/off switch
diff --git a/packages/hightide-web/src/components/user-interaction/Textarea.tsx b/packages/hightide-web/src/components/user-interaction/Textarea.tsx
index fdf59c79..29a53140 100644
--- a/packages/hightide-web/src/components/user-interaction/Textarea.tsx
+++ b/packages/hightide-web/src/components/user-interaction/Textarea.tsx
@@ -2,18 +2,15 @@ import type { LabelHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'rea
 import { forwardRef, useCallback, useId } from 'react'
 import clsx from 'clsx'
 import { useDelay, type UseDelayOptions } from '@helpwave/hightide-utils/hooks'
-import type { FormFieldInteractionStates } from '../form/FieldLayout'
-import type { FormFieldDataHandling } from '../form/FormField'
+import type { InputInterface } from './input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
 import { PropsUtil } from '../../utils/propsUtil'
 
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>
-  & Partial<FormFieldDataHandling<string>>
-  & Partial<FormFieldInteractionStates>
+  & InputInterface<string>
   & {
-    initialValue?: string,
     saveDelayOptions?: UseDelayOptions,
 }
 
diff --git a/packages/hightide-web/src/components/user-interaction/date/CalendarDatePicker.tsx b/packages/hightide-web/src/components/user-interaction/date/CalendarDatePicker.tsx
index e2004aba..a09cf888 100644
--- a/packages/hightide-web/src/components/user-interaction/date/CalendarDatePicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/CalendarDatePicker.tsx
@@ -9,7 +9,7 @@ import type { YearMonthPickerProps } from './YearMonthPicker'
 import { YearMonthPicker } from './YearMonthPicker'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
 import { Button } from '../Button'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from '../input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { IconButton } from '../IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
@@ -17,10 +17,9 @@ import { useHightideTranslation } from '@helpwave/hightide-utils/context/transla
 type DisplayMode = 'yearMonth' | 'day' | 'time'
 
 export interface CalendarDatePickerProps extends
- Partial<FormFieldDataHandling<Date>>,
+ InputInterface<Date>,
  Pick<CalendarDayPickerProps, 'markToday' | 'start' | 'end' | 'weekStart'>
  {
-  initialValue?: Date,
   initialDisplay?: DisplayMode,
   calendarDayPickerProps?: Omit<CalendarDayPickerProps, 'displayedMonth' | 'onChange' | 'selected' | 'weekStart' | 'markToday' | 'start' | 'end'>,
   yearMonthPickerProps?: Omit<YearMonthPickerProps, 'displayedYearMonth' | 'onChange' | 'start' | 'end'>,
diff --git a/packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx
index d4c41ab9..9ed0353a 100644
--- a/packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx
@@ -3,15 +3,14 @@ import type { KeyboardEvent } from 'react'
 import type { Weekday } from '@helpwave/hightide-utils/utils'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from '../input/Input'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
 import { ColoringUtils } from '../../../utils/coloring'
 import { PropsUtil } from '../../../utils/propsUtil'
 
-export type CalendarDayPickerProps = Partial<FormFieldDataHandling<Date>> & {
-  initialValue?: Date,
+export type CalendarDayPickerProps = InputInterface<Date> & {
   displayedMonth?: Date,
   changeDisplayedMonth?: (date: Date) => void,
   initialDisplayedMonth?: Date,
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateTimePicker.tsx b/packages/hightide-web/src/components/user-interaction/date/DateTimePicker.tsx
index 72ea087f..aa939900 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DateTimePicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/DateTimePicker.tsx
@@ -5,7 +5,7 @@ import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import clsx from 'clsx'
 
 import { useDateTimeFormat, useLocalization } from '../../../global-contexts/localization/forward-exports'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from '../input/Input'
 import type { CalendarDatePickerProps } from './CalendarDatePicker'
 import { CalendarDatePicker } from './CalendarDatePicker'
 import type { TimeWheelPickerProps } from './TimeWheelPicker'
@@ -13,11 +13,10 @@ import { TimeWheelPicker } from './TimeWheelPicker'
 
 export interface DateTimePickerProps extends
 HTMLAttributes<HTMLDivElement>,
-Partial<FormFieldDataHandling<Date>>,
+InputInterface<Date>,
 Pick<CalendarDatePickerProps, 'start' | 'end' | 'weekStart' | 'markToday'>,
 Pick<TimeWheelPickerProps, 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>
 {
-  initialValue?: Date,
   mode?: DateTimeFormat,
   calendarDatePickerProps?: Omit<CalendarDatePickerProps, 'onChange' | 'value' | 'start' | 'end' | 'markToday'>,
   timeInputProps?: Omit<TimeWheelPickerProps, 'value' | 'onValueChange' | 'onEditComplete' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>,
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateTimePickerDialog.tsx b/packages/hightide-web/src/components/user-interaction/date/DateTimePickerDialog.tsx
index b7abbbc5..efd8089f 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DateTimePickerDialog.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/DateTimePickerDialog.tsx
@@ -10,16 +10,15 @@ import { IconButton } from '../IconButton'
 import { DateWheelPicker } from './DateWheelPicker'
 import { type DateTimeWheelPickerProps } from './DateTimeWheelPicker'
 import { TimeWheelPicker } from './TimeWheelPicker'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from '../input/Input'
 import type { DateTimeFormat, Weekday } from '@helpwave/hightide-utils/utils'
 import clsx from 'clsx'
 
 export interface DateTimePickerDialogProps extends
 HTMLAttributes<HTMLDivElement>,
-Partial<FormFieldDataHandling<Date | null>>,
+InputInterface<Date | null>,
 Pick<DateTimeWheelPickerProps, 'start' | 'end' | 'isLooping' | 'loopingBehaviour' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>
 {
-  initialValue?: Date | null,
   allowRemove?: boolean,
   weekStart?: Weekday,
   markToday?: boolean,
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateTimeWheelPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/DateTimeWheelPicker.tsx
index a8c98b44..e62cc680 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DateTimeWheelPicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/DateTimeWheelPicker.tsx
@@ -1,17 +1,16 @@
 import clsx from 'clsx'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from '../input/Input'
 import type { DateWheelPickerProps } from './DateWheelPicker'
 import { DateWheelPicker } from './DateWheelPicker'
 import type { TimeWheelPickerProps } from './TimeWheelPicker'
 import { TimeWheelPicker } from './TimeWheelPicker'
 
 export type DateTimeWheelPickerProps =
-  Partial<FormFieldDataHandling<Date>> &
+  InputInterface<Date> &
   Pick<DateWheelPickerProps, 'start' | 'end' | 'isLooping' | 'loopingBehaviour'> &
   Pick<TimeWheelPickerProps, 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'> & {
-    initialValue?: Date,
     className?: string,
     dateWheelPickerProps?: Omit<DateWheelPickerProps, 'value' | 'onValueChange' | 'onEditComplete' | 'start' | 'end' | 'isLooping' | 'loopingBehaviour'>,
     timeWheelPickerProps?: Omit<TimeWheelPickerProps, 'value' | 'onValueChange' | 'onEditComplete' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision' | 'isLooping' | 'loopingBehaviour'>,
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateWheelPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/DateWheelPicker.tsx
index e7159589..5c08f54d 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DateWheelPicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/DateWheelPicker.tsx
@@ -4,7 +4,7 @@ import { DateUtils, range } from '@helpwave/hightide-utils/utils'
 import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from '../input/Input'
 import { WheelPicker } from '../WheelPicker'
 import type { WheelLoopingBehaviour } from './TimeWheelPicker'
 
@@ -32,8 +32,7 @@ function withDateParts(date: Date, year: number, month: number, day: number) {
   return next
 }
 
-export type DateWheelPickerProps = Partial<FormFieldDataHandling<Date>> & {
-  initialValue?: Date,
+export type DateWheelPickerProps = InputInterface<Date> & {
   start?: Date,
   end?: Date,
   isLooping?: boolean,
diff --git a/packages/hightide-web/src/components/user-interaction/date/TimePicker.tsx b/packages/hightide-web/src/components/user-interaction/date/TimePicker.tsx
index 7b530db9..daff8818 100644
--- a/packages/hightide-web/src/components/user-interaction/date/TimePicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/TimePicker.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import { useEffect, useMemo, useRef } from 'react'
 import { closestMatch, range } from '@helpwave/hightide-utils/utils'
 import { Button } from '../Button'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from '../input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import type { DateTimePrecision } from '@helpwave/hightide-utils/utils'
 import { Visibility } from '../../layout/Visibility'
@@ -14,8 +14,7 @@ export type TimePickerSecondIncrement = '1s' | '5s' | '10s' | '15s' | '30s'
 
 export type TimePickerMillisecondIncrement = '1ms' | '5ms' | '10ms' | '25ms' | '50ms' | '100ms' | '250ms' | '500ms'
 
-export interface TimePickerProps extends Partial<FormFieldDataHandling<Date>> {
-  initialValue?: Date,
+export interface TimePickerProps extends InputInterface<Date> {
   is24HourFormat?: boolean,
   precision?: DateTimePrecision,
   minuteIncrement?: TimePickerMinuteIncrement,
diff --git a/packages/hightide-web/src/components/user-interaction/date/TimeWheelPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/TimeWheelPicker.tsx
index 5958ac2d..4246597e 100644
--- a/packages/hightide-web/src/components/user-interaction/date/TimeWheelPicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/TimeWheelPicker.tsx
@@ -4,7 +4,7 @@ import { closestMatch, range, type DateTimePrecision } from '@helpwave/hightide-
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
 import { useDateTimeFormat } from '../../../global-contexts/localization/forward-exports'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from '../input/Input'
 import { Visibility } from '../../layout/Visibility'
 import { WheelPicker, type WheelPickerLoopEvent } from '../WheelPicker'
 import type {
@@ -94,8 +94,7 @@ function set12HourDisplay(date: Date, displayHour: number, loopingBehaviour: Whe
   date.setHours(normalizedHour + (nextIsPM ? 12 : 0))
 }
 
-export interface TimeWheelPickerProps extends Partial<FormFieldDataHandling<Date>> {
-  initialValue?: Date,
+export interface TimeWheelPickerProps extends InputInterface<Date> {
   is24HourFormat?: boolean,
   isLooping?: boolean,
   loopingBehaviour?: WheelLoopingBehaviour,
diff --git a/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx b/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx
index 08ba9a28..9ffc0e6d 100644
--- a/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx
+++ b/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx
@@ -4,7 +4,7 @@ import { DateUtils, range } from '@helpwave/hightide-utils/utils'
 import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from '../input/Input'
 import { WheelPicker } from '../WheelPicker'
 
 const defaultStart = DateUtils.subtractDuration(new Date(), { years: 100 })
@@ -27,8 +27,7 @@ function withYearMonth(date: Date, year: number, month: number) {
   return next
 }
 
-export type YearMonthPickerProps = Partial<FormFieldDataHandling<Date>> & {
-  initialValue?: Date,
+export type YearMonthPickerProps = InputInterface<Date> & {
   start?: Date,
   end?: Date,
   className?: string,
diff --git a/packages/hightide-web/src/components/user-interaction/input/DateTimeField.tsx b/packages/hightide-web/src/components/user-interaction/input/DateTimeField.tsx
index 0b58e177..fb3639ba 100644
--- a/packages/hightide-web/src/components/user-interaction/input/DateTimeField.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/DateTimeField.tsx
@@ -5,8 +5,7 @@ import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { SafeGlobals } from '../../../utils/safeGlobals'
-import type { FormFieldInteractionStates } from '../../form/FieldLayout'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from './Input'
 import type { DateTimeFormat, DateTimePrecision } from '@helpwave/hightide-utils/utils'
 import type { EditableSegmentType, SegmentEditState } from './dateTimeSegments'
 import {
@@ -29,10 +28,8 @@ import { PropsUtil } from '../../../utils/propsUtil'
 const advanceKeys = ['.', ':', '/', ',', '-', ' ']
 
 export interface DateTimeFieldProps extends
-  Partial<FormFieldInteractionStates>,
-  Partial<FormFieldDataHandling<Date | null>>,
+  InputInterface<Date | null>,
   Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
-  initialValue?: Date | null,
   mode?: DateTimeFormat,
   precision?: DateTimePrecision,
   is24HourFormat?: boolean,
diff --git a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
index 94c45b0f..115c7576 100644
--- a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
@@ -6,10 +6,9 @@ import type { DateTimePickerProps } from '../date/DateTimePicker'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { useDateTimeFormat, useLocalization } from '../../../global-contexts/localization/forward-exports'
 import { Visibility } from '../../layout/Visibility'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from './Input'
 import { DateTimePickerDialog } from '../date/DateTimePickerDialog'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
-import type { FormFieldInteractionStates } from '../../form/FieldLayout'
 import { PopUp } from '../../layout/popup/PopUp'
 import { IconButton } from '../IconButton'
 import { DateUtils, type DateTimeFormat } from '@helpwave/hightide-utils/utils'
@@ -18,18 +17,16 @@ import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import { PropsUtil } from '../../../utils/propsUtil'
 
 export interface DateTimeInputProps extends
-  Partial<FormFieldInteractionStates>,
   Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'>,
-  Partial<FormFieldDataHandling<Date | null>>,
+  InputInterface<Date | null>,
   Pick<DateTimePickerProps, 'start' | 'end' | 'weekStart' | 'markToday' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>
 {
-  initialValue?: Date | null,
   allowRemove?: boolean,
   allowClear?: boolean,
   mode?: DateTimeFormat,
   timeZone?: string,
   containerProps?: HTMLAttributes<HTMLDivElement>,
-  pickerProps?: Omit<DateTimePickerProps, keyof FormFieldDataHandling<Date> | 'mode' | 'initialValue' | 'start' | 'end' | 'weekStart' | 'markToday' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>,
+  pickerProps?: Omit<DateTimePickerProps, keyof InputInterface<Date> | 'mode' | 'start' | 'end' | 'weekStart' | 'markToday' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>,
   outsideClickCloses?: boolean,
   onDialogOpeningChange?: (isOpen: boolean) => void,
   actions?: ReactNode[],
diff --git a/packages/hightide-web/src/components/user-interaction/input/Input.tsx b/packages/hightide-web/src/components/user-interaction/input/Input.tsx
index adc2585b..3eec3c25 100644
--- a/packages/hightide-web/src/components/user-interaction/input/Input.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/Input.tsx
@@ -4,8 +4,6 @@ import React, { forwardRef, useRef } from 'react'
 import type { UseDelayOptionsResolved } from '@helpwave/hightide-utils/hooks'
 import { useDelay } from '@helpwave/hightide-utils/hooks'
 import { useFocusManagement } from '../../../hooks/focus/useFocusManagement'
-import type { FormFieldInteractionStates } from '../../form/FieldLayout'
-import type { FormFieldDataHandling } from '../../form/FormField'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
@@ -26,12 +24,21 @@ const defaultEditCompleteOptions: EditCompleteOptionsResolved = {
   delay: 2500
 }
 
+export type InputInterface<In, Out extends In = In> = {
+  value?: In,
+  initialValue?: In,
+  onValueChange?: (value: Out) => void,
+  onEditComplete?: (value: Out) => void,
+  invalid?: boolean,
+  disabled?: boolean,
+  readOnly?: boolean,
+  required?: boolean,
+}
+
 export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>
-  & Partial<FormFieldDataHandling<string>>
-  & Partial<FormFieldInteractionStates>
+  & InputInterface<string>
   & {
     editCompleteOptions?: EditCompleteOptions,
-    initialValue?: string,
   }
 
 /**
diff --git a/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx b/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
index ad9e9c0c..179155fc 100644
--- a/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
@@ -1,18 +1,15 @@
 import type { CSSProperties, InputHTMLAttributes } from 'react'
 import { forwardRef, useRef } from 'react'
 import clsx from 'clsx'
-import type { FormFieldInteractionStates } from '../../form/FieldLayout'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from './Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import { MathUtil } from '@helpwave/hightide-utils/utils'
 import { PropsUtil } from '../../../utils/propsUtil'
 
 export type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'type' | 'min' | 'max' | 'step'>
-  & Partial<FormFieldInteractionStates>
-  & Partial<FormFieldDataHandling<number>>
+  & InputInterface<number>
   & {
-    initialValue?: number,
     minimum?: number,
     maximum?: number,
     approximateMaxCharacters?: number,
diff --git a/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx b/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
index fd177582..94743b19 100644
--- a/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
+++ b/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
@@ -4,8 +4,7 @@ import clsx from 'clsx'
 import { Minus, Plus } from 'lucide-react'
 import { IconButton } from '../IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import type { FormFieldInteractionStates } from '../../form/FieldLayout'
-import type { FormFieldDataHandling } from '../../form/FormField'
+import type { InputInterface } from './Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import type { ChangeRateCurveProps, StepperLoopEvent } from '@helpwave/hightide-utils/hooks'
 import { useStepperHold } from '@helpwave/hightide-utils/hooks'
@@ -24,10 +23,8 @@ type ActiveInputState = {
 }
 
 export type NumberStepperInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'type' | 'min' | 'max' | 'step'>
-  & Partial<FormFieldInteractionStates>
-  & Partial<FormFieldDataHandling<number>>
+  & InputInterface<number>
   & {
-    initialValue?: number,
     minimum?: number,
     maximum?: number,
     stepSize?: number,
diff --git a/packages/hightide-web/src/style/theme/components/input-elements.css b/packages/hightide-web/src/style/theme/components/input-elements.css
index 5aa3407d..9cb0378e 100644
--- a/packages/hightide-web/src/style/theme/components/input-elements.css
+++ b/packages/hightide-web/src/style/theme/components/input-elements.css
@@ -59,5 +59,45 @@
 @layer components {
   .input {
     @apply input-element px-3 py-2 rounded-md h-element-md;
+
+    &[data-readonly]:not([data-disabled]):not([data-invalid]) {
+      border-color: color-mix(in oklch, var(--color-border) 80%, transparent);
+      --focus-border-color: color-mix(in oklch, var(--color-focus) 80%, transparent);
+      --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8)
+        color-mix(in oklch, var(--color-focus) 28%, transparent);
+
+      @variant dark {
+        --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8)
+          color-mix(in oklch, var(--color-focus) 48%, transparent);
+      }
+
+      &[data-value] {
+        color: color-mix(in oklch, var(--color-input-text) 80%, transparent);
+      }
+
+      &:not([data-value]) {
+        color: color-mix(in oklch, var(--color-placeholder) 80%, transparent);
+      }
+    }
+
+    &[data-readonly]:not([data-disabled])[data-invalid] {
+      border-color: color-mix(in oklch, var(--color-negative) 80%, transparent);
+      --focus-border-color: color-mix(in oklch, var(--color-negative) 80%, transparent);
+      --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8)
+        color-mix(in oklch, var(--color-negative) 28%, transparent);
+
+      @variant dark {
+        --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8)
+          color-mix(in oklch, var(--color-negative) 48%, transparent);
+      }
+
+      &[data-value] {
+        color: color-mix(in oklch, var(--color-negative) 80%, transparent);
+      }
+
+      &:not([data-value]) {
+        color: color-mix(in oklch, var(--color-placeholder) 80%, transparent);
+      }
+    }
   }
 }
diff --git a/packages/hightide-web/stories/User Interaction/Form/Form.stories.tsx b/packages/hightide-web/stories/User Interaction/Form/Form.stories.tsx
index 877e8861..9b1df00e 100644
--- a/packages/hightide-web/stories/User Interaction/Form/Form.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Form/Form.stories.tsx	
@@ -13,7 +13,6 @@ import { Visibility } from '../../../src/components/layout/Visibility'
 import { HelpwaveLogo } from '../../../src/components/branding/HelpwaveLogo'
 import { useEffect, useMemo, useState } from 'react'
 import type { FormValidationBehaviour } from '../../../src/components/form/FormStore'
-import type { FormFieldDataHandling } from '../../../src/components/form/FormField'
 import { FormField } from '../../../src/components/form/FormField'
 import { FormProvider } from '../../../src/components/form/FormContext'
 import { DateTimeInput } from '../../../src/components/user-interaction/input/DateTimeInput'
@@ -147,7 +146,7 @@ export const basic: Story = {
               validationBehaviour={validationBehaviour}
             >
               {({ dataProps, focusableElementProps, interactionStates }) => (
-                <Select {...dataProps as FormFieldDataHandling<string>} {...focusableElementProps} {...interactionStates}>
+                <Select {...dataProps} {...focusableElementProps} {...interactionStates}>
                   {StorybookHelper.selectValues.map(value => (
                     <Select.Option key={value} value={value} label={value} />
                   ))}
@@ -178,7 +177,7 @@ export const basic: Story = {
               validationBehaviour={validationBehaviour}
             >
               {({ dataProps, focusableElementProps, interactionStates }) => (
-                <MultiSelect {...dataProps as FormFieldDataHandling<string[]>} {...focusableElementProps} {...interactionStates}>
+                <MultiSelect {...dataProps} {...focusableElementProps} {...interactionStates}>
                   {StorybookHelper.selectValues.map(value => (
                     <MultiSelect.Option key={value} value={value} label={value} />
                   ))}
@@ -338,7 +337,7 @@ return (
           label="Your favourite Fruit"
         >
           {({ dataProps, focusableElementProps, interactionStates }) => (
-            <Select {...dataProps as FormFieldDataHandling<string>} {...focusableElementProps} {...interactionStates}>
+            <Select {...dataProps} {...focusableElementProps} {...interactionStates}>
               {StorybookHelper.selectValues.map(value => (
                 <Select.Option key={value} value={value} />
               ))}
@@ -353,7 +352,7 @@ return (
           label="Your contribution"
         >
           {({ dataProps, focusableElementProps, interactionStates }) => (
-            <MultiSelect {...dataProps as FormFieldDataHandling<string[]>} {...focusableElementProps} {...interactionStates}>
+            <MultiSelect {...dataProps} {...focusableElementProps} {...interactionStates}>
               {StorybookHelper.selectValues.map(value => (
                 <MultiSelect.Option key={value} value={value} />
               ))}
@@ -367,7 +366,7 @@ return (
           label="Allergies"
         >
           {({ dataProps, focusableElementProps, interactionStates }) => (
-            <MultiSelect {...dataProps as FormFieldDataHandling<string[]>} {...focusableElementProps} {...interactionStates}>
+            <MultiSelect {...dataProps} {...focusableElementProps} {...interactionStates}>
               {StorybookHelper.selectValues.map(value => (
                 <MultiSelect.Option key={value} value={value} />
               ))}
diff --git a/packages/hightide-web/stories/User Interaction/Input/Input.stories.tsx b/packages/hightide-web/stories/User Interaction/Input/Input.stories.tsx
index 0b7a7c8d..5f8d237f 100644
--- a/packages/hightide-web/stories/User Interaction/Input/Input.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Input/Input.stories.tsx	
@@ -14,6 +14,7 @@ export const input: Story = {
     initialValue: '',
     disabled: false,
     invalid: false,
+    readOnly: false,
     placeholder: 'Placeholder',
     editCompleteOptions: {
       allowEnterComplete: true,
diff --git a/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx b/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx
index b9d21ff9..bc0d924e 100644
--- a/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx	
+++ b/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx	
@@ -57,8 +57,7 @@ const users: User[] = [
   { uuid: '5', name: 'Eve Wilson', email: 'eve@example.com' },
 ]
 
-function compareUser(a: User | null, b: User | null): boolean {
-  if (a === null || b === null) return a === b
+function compareUser(a: User, b: User): boolean {
   return a.uuid === b.uuid
 }
 
@@ -100,9 +99,9 @@ export const selectWithUser: Story = {
     )),
   },
   render: (args: SelectProps<User>) => {
-    const [value, setValue] = useState<User | null>(args.value ?? null)
+    const [value, setValue] = useState<User | undefined>(args.value)
     useEffect(() => {
-      setValue(args.value ?? null)
+      setValue(args.value)
     }, [args.value])
     return (
       <Select<User>

From 13a6a8128dff7e450e8c45ae52624adf51445c11 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Wed, 30 Sep 2026 19:58:50 +0200
Subject: [PATCH 21/25] chore: restructure folders

---
 conventions/Components.md                     | 38 ++++++++++
 packages/hightide-web/CHANGELOG.md            |  3 +
 .../src/components/branding/index.ts          |  5 +-
 .../{ => visualization}/AppZumDocBadge.tsx    |  0
 .../{ => visualization}/AppZumDocLogo.tsx     |  0
 .../{ => visualization}/HelpwaveBadge.tsx     |  0
 .../{ => visualization}/HelpwaveLogo.tsx      |  0
 .../branding/visualization/index.ts           |  4 +
 .../{ => data-input}/ChatMessageComposer.tsx  | 75 +++++++++++++------
 .../src/components/chat/data-input/index.ts   |  1 +
 .../hightide-web/src/components/chat/index.ts | 14 +---
 .../{ => interaction}/ChatConversationRow.tsx | 10 +--
 .../{ => interaction}/ChatQuickReplyChip.tsx  |  4 +-
 .../src/components/chat/interaction/index.ts  |  2 +
 .../{ => layout}/ChatConversationList.tsx     |  4 +-
 .../chat/{ => layout}/ChatDateDivider.tsx     |  0
 .../chat/{ => layout}/ChatMessageList.tsx     |  0
 .../chat/{ => layout}/ChatThreadHeader.tsx    |  4 +-
 .../src/components/chat/layout/index.ts       |  4 +
 .../ChatAttachmentMessageBubble.tsx           |  4 +-
 .../{ => visualization}/ChatMessageBubble.tsx |  6 +-
 .../{ => visualization}/ChatSystemLine.tsx    |  6 +-
 .../components/chat/visualization/index.ts    |  3 +
 .../Checkbox.tsx                              |  4 +-
 .../FileInput/FileInput.tsx                   |  0
 .../FileInput/FileInputComponent.tsx          |  0
 .../FileInput/FileInputContext.tsx            |  0
 .../FileInput/FileInputMenu.tsx               |  6 +-
 .../FileInput/FileInputRoot.tsx               |  0
 .../FileInput/FileInputTrigger.tsx            |  2 +-
 .../FileInput/fileInputItem.ts                |  0
 .../FileInput/index.ts                        |  0
 .../LabelledCheckbox.tsx                      |  0
 .../MultiSelect/MultiSelect.tsx               |  0
 .../MultiSelectChipDisplayTrigger.tsx         |  2 +-
 .../MultiSelect/MultiSelectComponent.tsx      |  0
 .../MultiSelect/MultiSelectContent.tsx        |  2 +-
 .../MultiSelect/MultiSelectContext.tsx        |  0
 .../MultiSelect/MultiSelectOption.tsx         |  2 +-
 .../MultiSelect/MultiSelectRoot.tsx           |  2 +-
 .../MultiSelect/MultiSelectTrigger.tsx        |  2 +-
 .../MultiSelect/index.ts                      |  0
 .../MultiSelect/useMultiSelect.ts             |  0
 .../Select/Select.tsx                         |  0
 .../Select/SelectComponent.tsx                |  0
 .../Select/SelectContent.tsx                  |  2 +-
 .../Select/SelectContext.tsx                  |  0
 .../Select/SelectOption.tsx                   |  2 +-
 .../Select/SelectRoot.tsx                     |  2 +-
 .../Select/SelectTrigger.tsx                  |  2 +-
 .../Select/index.ts                           |  0
 .../Select/useSelect.ts                       |  0
 .../Switch.tsx                                |  0
 .../Textarea.tsx                              |  0
 .../date/CalendarDatePicker.tsx               |  4 +-
 .../date/CalendarDayPicker.tsx                |  0
 .../date/DateTimePicker.tsx                   |  0
 .../date/DateTimePickerDialog.tsx             |  4 +-
 .../date/DateTimeWheelPicker.tsx              |  0
 .../date/DateWheelPicker.tsx                  |  2 +-
 .../date/TimePicker.tsx                       |  2 +-
 .../date/TimeWheelPicker.tsx                  |  2 +-
 .../date/YearMonthPicker.tsx                  |  2 +-
 .../date/index.ts                             |  1 -
 .../src/components/data-input/index.ts        |  9 +++
 .../input/DateTimeField.tsx                   |  0
 .../input/DateTimeInput.tsx                   |  4 +-
 .../input/FlexibleDateTimeInput.tsx           |  2 +-
 .../input/Input.tsx                           |  0
 .../input/InsideLabelInput.tsx                |  0
 .../input/NumberInput.tsx                     |  0
 .../input/NumberStepperInput.tsx              |  2 +-
 .../input/SearchBar.tsx                       |  6 +-
 .../input/ToggleableInput.tsx                 |  2 +-
 .../input/dateTimeSegments.ts                 |  0
 .../input/index.ts                            |  0
 packages/hightide-web/src/components/index.ts |  9 +--
 .../Button.tsx                                |  6 +-
 .../Combobox/Combobox.tsx                     |  0
 .../Combobox/ComboboxContext.tsx              |  0
 .../Combobox/ComboboxInput.tsx                |  2 +-
 .../Combobox/ComboboxList.tsx                 |  0
 .../Combobox/ComboboxOption.tsx               |  0
 .../Combobox/ComboboxRoot.tsx                 |  0
 .../Combobox/index.ts                         |  0
 .../Combobox/useCombobox.ts                   |  0
 .../CopyToClipboardWrapper.tsx                |  2 +-
 .../{utils => interaction}/FocusTrap.tsx      |  0
 .../IconButton.tsx                            |  4 +-
 .../Menu.tsx                                  |  4 +-
 .../Pressable.tsx                             |  2 +-
 .../{layout => interaction}/TabSwitcher.tsx   |  2 +-
 .../Tooltip.tsx                               |  2 +-
 .../WheelPicker/WheelPicker.tsx               |  0
 .../WheelPicker/WheelPickerBar.tsx            |  0
 .../WheelPicker/WheelPickerContext.tsx        |  0
 .../WheelPicker/WheelPickerOption.tsx         |  0
 .../WheelPicker/WheelPickerRoot.tsx           |  0
 .../WheelPicker/index.ts                      |  0
 .../data/FilterList.tsx                       |  8 +-
 .../data/FilterOperator.tsx                   |  2 +-
 .../data/FilterOperatorLabel.tsx              |  0
 .../data/FilterPopUp.tsx                      | 10 +--
 .../data/SortingList.tsx                      | 10 +--
 .../data/data-types.tsx                       |  2 +-
 .../data/filter-function.ts                   |  0
 .../data/index.ts                             |  0
 .../src/components/interaction/index.ts       | 13 ++++
 .../{ => interaction}/list/ListActionItem.tsx |  8 +-
 .../list/ListNavigationItem.tsx               | 10 +--
 .../{ => interaction}/list/index.ts           |  3 -
 .../navigation/BreadCrumbs.tsx                |  0
 .../navigation/Navigation.tsx                 |  6 +-
 .../navigation/Pagination.tsx                 |  4 +-
 .../navigation/StepperBar.tsx                 |  2 +-
 .../navigation/index.ts                       |  0
 .../navigation-menus/NavigationContext.tsx    |  0
 .../VerticalNavigationMenu.tsx                |  0
 .../VerticalNavigationMenuItem.tsx            |  4 +-
 .../navigation/navigation-menus/index.ts      |  0
 .../navigation/navigation-menus/types.ts      |  0
 .../Card.tsx                                  |  0
 .../layout/Carousel/CarouselArrows.tsx        |  2 +-
 .../layout/{drawer => Drawer}/Drawer.tsx      |  0
 .../{drawer => Drawer}/DrawerCloseButton.tsx  |  4 +-
 .../{drawer => Drawer}/DrawerContainer.tsx    |  2 +-
 .../{drawer => Drawer}/DrawerContext.tsx      |  0
 .../layout/{drawer => Drawer}/DrawerRoot.tsx  |  0
 .../layout/{drawer => Drawer}/index.ts        |  0
 .../ExpandableSectionHeader.tsx               |  2 +-
 .../src/components/layout/InifiniteScroll.tsx |  4 +-
 .../components/layout/Modal/ConfirmModal.tsx  |  4 +-
 .../components/layout/Modal/InputModal.tsx    |  4 +-
 .../components/layout/Modal/LanguageModal.tsx |  6 +-
 .../layout/Modal/ModalCloseButton.tsx         |  4 +-
 .../layout/Modal/ModalContainer.tsx           |  2 +-
 .../components/layout/Modal/ModalContent.tsx  |  2 +-
 .../components/layout/Modal/ThemeModal.tsx    |  6 +-
 .../layout/{popup => PopUp}/PopUp.tsx         |  4 +-
 .../layout/{popup => PopUp}/PopUpContext.tsx  |  0
 .../layout/{popup => PopUp}/PopUpOpener.tsx   |  0
 .../layout/{popup => PopUp}/PopUpRoot.tsx     |  0
 .../layout/{popup => PopUp}/index.ts          |  0
 .../components/{utils => layout}/Portal.tsx   |  0
 .../AutoColumnOrderFeature.ts                 |  0
 .../ColumnSizingWithTargetFeature.ts          |  0
 .../layout/{table => Table}/FillerCell.tsx    |  2 +-
 .../layout/{table => Table}/Table.tsx         |  0
 .../layout/{table => Table}/TableBody.tsx     |  0
 .../layout/{table => Table}/TableCell.tsx     |  0
 .../layout/{table => Table}/TableColumn.tsx   |  2 +-
 .../{table => Table}/TableColumnSwitcher.tsx  | 12 +--
 .../layout/{table => Table}/TableContext.tsx  |  0
 .../layout/{table => Table}/TableDisplay.tsx  |  0
 .../layout/{table => Table}/TableFilter.ts    |  4 +-
 .../{table => Table}/TableFilterButton.tsx    | 10 +--
 .../layout/{table => Table}/TableHeader.tsx   |  2 +-
 .../{table => Table}/TablePagination.tsx      |  6 +-
 .../layout/{table => Table}/TableProvider.tsx |  0
 .../{table => Table}/TableSortButton.tsx      |  6 +-
 .../TableWithSelectionProvider.tsx            |  2 +-
 .../{table => Table}/VirtualizedTableBody.tsx |  0
 .../layout/{table => Table}/columnSizeUtil.ts |  0
 .../layout/{table => Table}/index.ts          |  0
 .../{table => Table}/placeholderColumn.ts     |  0
 .../layout/{table => Table}/types.ts          |  0
 .../useNaturalColumnWidthLock.ts              |  0
 .../src/components/layout/TextImage.tsx       |  2 +-
 .../{utils => layout}/Transition.tsx          |  0
 .../src/components/layout/app/AppPage.tsx     | 12 +--
 .../{ => layout}/form/FieldLayout.tsx         |  2 +-
 .../{ => layout}/form/FormContext.tsx         |  0
 .../{ => layout}/form/FormField.tsx           |  2 +-
 .../{ => layout}/form/FormObserver.tsx        |  0
 .../components/{ => layout}/form/FormStore.ts |  0
 .../src/components/{ => layout}/form/index.ts |  0
 .../{ => layout}/form/useCreateForm.tsx       |  0
 .../src/components/layout/index.ts            | 16 ++--
 .../components/{ => layout}/list/ListItem.tsx |  2 +-
 .../{ => layout}/list/ListItemContent.tsx     |  0
 .../{ => layout}/list/ListItemTypes.ts        |  0
 .../src/components/layout/list/index.ts       |  3 +
 .../src/components/layout/loading/index.ts    |  3 -
 .../properties/CheckboxProperty.tsx           |  4 +-
 .../properties/DateProperty.tsx               |  6 +-
 .../properties/MultiSelectProperty.tsx        |  6 +-
 .../properties/NumberProperty.tsx             |  6 +-
 .../properties/PropertyBase.tsx               |  8 +-
 .../properties/SelectProperty.tsx             |  6 +-
 .../properties/TextProperty.tsx               |  6 +-
 .../properties/index.ts                       |  0
 .../src/components/user-interaction/index.ts  | 18 -----
 .../src/components/utils/index.ts             |  3 -
 .../Avatar/Avatar.tsx                         |  0
 .../Avatar/AvatarComponent.tsx                |  0
 .../Avatar/AvatarContext.tsx                  |  0
 .../Avatar/AvatarFallback.tsx                 |  0
 .../Avatar/AvatarImage.tsx                    |  0
 .../Avatar/AvatarName.tsx                     |  0
 .../Avatar/AvatarRoot.tsx                     |  0
 .../Avatar/AvatarStatusIndicator.tsx          |  0
 .../Avatar/AvatarTypes.ts                     |  0
 .../Avatar/index.ts                           |  0
 .../AvatarGroup/AvatarGroup.tsx               |  0
 .../AvatarGroup/AvatarGroupAdditionalText.tsx |  0
 .../AvatarGroup/AvatarGroupComponent.tsx      |  0
 .../AvatarGroup/AvatarGroupContainer.tsx      |  0
 .../AvatarGroup/AvatarGroupOverlap.tsx        |  0
 .../AvatarGroup/index.ts                      |  0
 .../ChangingNumber.tsx                        |  0
 .../Chip.tsx                                  |  0
 .../ErrorComponent.tsx                        |  2 +-
 .../ExpansionIcon.tsx                         |  0
 .../Icon.tsx                                  |  0
 .../LoadingAnimation.tsx                      |  2 +-
 .../LoadingSpinner.tsx                        |  4 +-
 .../MarkdownInterpreter.tsx                   |  0
 .../ProgressIndicator.tsx                     |  0
 .../date => visualization}/TimeDisplay.tsx    |  2 +-
 .../index.ts                                  |  6 +-
 .../ProcessModelActivityNode.tsx              |  0
 .../process-model/ProcessModelCanvas.tsx      |  0
 .../ProcessModelTerminalNode.tsx              |  0
 .../process-model/ProcessModelTraceReplay.tsx |  4 +-
 .../process-model/index.ts                    |  0
 .../process-model/layoutProcessModel.ts       |  0
 .../process-model/processModelLibrary.ts      |  0
 .../process-model/types.ts                    |  0
 .../Browser Compatibility/Safari.stories.tsx  |  4 +-
 packages/hightide-web/stories/README.md       |  2 +
 .../Focus Management/FocusTrap.stories.tsx    |  6 +-
 .../Utilities/hooks/useDebouncer.stories.tsx  |  4 +-
 .../Utilities/hooks/useDelay.stories.tsx      |  2 +-
 .../Utilities/hooks/useThrottle.stories.tsx   |  4 +-
 .../SemanticColors.stories.tsx                |  0
 .../visualization}/AppZumDocBadge.stories.tsx |  2 +-
 .../visualization}/AppZumDocLogo.stories.tsx  |  2 +-
 .../visualization}/HelpwaveBadge.stories.tsx  |  2 +-
 .../HelpwaveLoadingAnimation.stories.tsx      |  2 +-
 .../{Chat => chat}/ChatDemo.stories.tsx       | 32 ++++----
 .../ChatMessageComposer.stories.tsx           |  4 +-
 .../ChatConversationRow.stories.tsx           |  2 +-
 .../ChatQuickReplyChip.stories.tsx            |  2 +-
 .../layout}/ChatConversationList.stories.tsx  |  6 +-
 .../layout}/ChatDateDivider.stories.tsx       |  4 +-
 .../layout}/ChatMessageList.stories.tsx       | 18 ++---
 .../layout}/ChatThreadHeader.stories.tsx      |  4 +-
 .../ChatAttachmentMessageBubble.stories.tsx   |  2 +-
 .../ChatMessageBubble.stories.tsx             |  2 +-
 .../ChatMessageCard.stories.tsx               | 10 +--
 .../visualization}/ChatSystemLine.stories.tsx |  2 +-
 .../Checkbox.stories.tsx                      |  2 +-
 .../FileInput/FileInput.stories.tsx           |  4 +-
 .../LabelledCheckbox.stories.tsx              |  2 +-
 .../MultiSelect/MultiSelect.stories.tsx       |  4 +-
 .../MultiSelectChipDisplay.stories.tsx        |  2 +-
 .../Select/Select.stories.tsx                 |  6 +-
 .../Switch.stories.tsx                        |  2 +-
 .../Textarea.stories.tsx                      |  2 +-
 .../date}/CalendarDatePicker.stories.tsx      |  2 +-
 .../date}/CalendarDayPicker.stories.tsx       |  2 +-
 .../date}/DateTimePicker.stories.tsx          |  2 +-
 .../date}/DateTimePickerDialog.stories.tsx    |  2 +-
 .../date}/DateTimeWheelPicker.stories.tsx     |  2 +-
 .../date}/DateWheelPicker.stories.tsx         |  2 +-
 .../date}/TimePicker.stories.tsx              |  2 +-
 .../date}/TimeWheelPicker.stories.tsx         |  2 +-
 .../date}/YearMonthPicker.stories.tsx         |  2 +-
 .../input}/DateTimeInput.stories.tsx          |  4 +-
 .../input}/FlexibleDateTimeInput.stories.tsx  |  4 +-
 .../input}/Input.stories.tsx                  |  2 +-
 .../input}/InsideLabelInput.stories.tsx       |  2 +-
 .../input}/NumberStepperInput.stories.tsx     |  2 +-
 .../input}/SearchBar.stories.tsx              |  2 +-
 .../input}/TogglableInput.stories.tsx         |  2 +-
 .../Button.stories.tsx                        |  4 +-
 .../Combobox}/Combobox.stories.tsx            |  4 +-
 .../CopyToClipboardWrapper.stories.tsx        |  2 +-
 .../IconButton.stories.tsx                    |  2 +-
 .../Menu.stories.tsx                          |  4 +-
 .../Pressable.stories.tsx                     |  4 +-
 .../TabSwitcher.stories.tsx                   |  6 +-
 .../Tooltip.stories.tsx                       |  2 +-
 .../WheelPicker}/WheelPicker.stories.tsx      |  2 +-
 .../list}/ListActionItem.stories.tsx          |  6 +-
 .../list}/ListNavigationItem.stories.tsx      |  6 +-
 .../navigation}/BreadCrumbs.stories.tsx       |  2 +-
 .../navigation}/Navigation.stories.tsx        |  2 +-
 .../navigation}/StepperBar.stories.tsx        |  2 +-
 .../VerticalNavigation.stories.tsx            |  4 +-
 .../AnchoredFloatingContainer.stories.tsx     |  0
 .../Card => layout}/Card.stories.tsx          | 12 +--
 .../Carousel}/Carousel.stories.tsx            |  4 +-
 .../Drawer/Drawer.stories.tsx                 |  4 +-
 .../Drawer/StackedDrawer.stories.tsx          |  6 +-
 .../ExpandableSection}/Expandable.stories.tsx |  2 +-
 .../{Layout => layout}/FAQSection.stories.tsx |  4 +-
 .../Modal/ConfirmModal.stories.tsx            |  0
 .../Modal/DiscardChangesModal.stories.tsx     |  0
 .../Modal}/LanguageModal.stories.tsx          |  2 +-
 .../Modal/StackedModal.stories.tsx            |  2 +-
 .../Modal}/ThemeModal.stories.tsx             |  2 +-
 .../Modal}/ThemeSelect.stories.tsx            |  2 +-
 .../PopUp}/PopUp.stories.tsx                  |  6 +-
 .../ScrollableList.stories.tsx                |  2 +-
 .../Table/AsyncDataExample.stories.tsx        | 12 +--
 .../Table/EmptyTable.stories.tsx              |  6 +-
 .../Table/FilterListTable.stories.tsx         | 28 +++----
 .../Table/NaturalColumnSizing.stories.tsx     |  8 +-
 .../Table/PageScrollTable.stories.tsx         |  6 +-
 .../Table/Selection.stories.tsx               | 14 ++--
 .../VirtualizedInfiniteScrolling.stories.tsx  | 10 +--
 .../VerticalDivider.stories.tsx               |  0
 .../app}/AppPage.stories.tsx                  |  8 +-
 .../Form => layout/form}/Form.stories.tsx     | 22 +++---
 .../List => layout/list}/ListItem.stories.tsx |  6 +-
 .../LoadingAndErrorContainer.stories.tsx      |  0
 .../loading}/LoadingContainer.stories.tsx     |  0
 .../VirtualizedCardGrid.stories.tsx           |  2 +-
 .../CheckboxProperty.stories.tsx              |  2 +-
 .../DateProperty.stories.tsx                  |  2 +-
 .../MultiSelectProperty.stories.tsx           |  6 +-
 .../NumberProperty.stories.tsx                |  2 +-
 .../PropertyBase.stories.tsx                  |  2 +-
 .../SingleSelectProperty.stories.tsx          |  6 +-
 .../TextProperty.stories.tsx                  |  2 +-
 .../Avatar/Avatar.stories.tsx                 |  4 +-
 .../Avatar/AvatarWithLabel.stories.tsx        |  2 +-
 .../AvatarGroup}/AvatarGroup.stories.tsx      |  4 +-
 .../ChangingNumber.stories.tsx                |  4 +-
 .../Chip => visualization}/Chip.stories.tsx   |  2 +-
 .../ChipList.stories.tsx                      |  2 +-
 .../Icon.stories.tsx                          |  4 +-
 .../MarkdownInterpreter.stories.tsx           |  2 +-
 .../ProgressIndicator.stories.tsx             |  2 +-
 .../ProcessModelActivityNode.stories.tsx      |  8 +-
 .../ProcessModelCanvas.stories.tsx            |  6 +-
 .../ProcessModelTraceReplay.stories.tsx       |  8 +-
 .../tests/branding/appZumDoc.test.tsx         |  4 +-
 .../tests/input/DateTimeField.test.tsx        |  4 +-
 .../input/FlexibleDateTimeInput.test.tsx      |  2 +-
 .../tests/input/dateTimeSegments.test.ts      |  2 +-
 .../process-model/layoutProcessModel.test.ts  |  4 +-
 .../tests/table/naturalColumnSizing.test.tsx  |  4 +-
 344 files changed, 580 insertions(+), 501 deletions(-)
 rename packages/hightide-web/src/components/branding/{ => visualization}/AppZumDocBadge.tsx (100%)
 rename packages/hightide-web/src/components/branding/{ => visualization}/AppZumDocLogo.tsx (100%)
 rename packages/hightide-web/src/components/branding/{ => visualization}/HelpwaveBadge.tsx (100%)
 rename packages/hightide-web/src/components/branding/{ => visualization}/HelpwaveLogo.tsx (100%)
 create mode 100644 packages/hightide-web/src/components/branding/visualization/index.ts
 rename packages/hightide-web/src/components/chat/{ => data-input}/ChatMessageComposer.tsx (54%)
 create mode 100644 packages/hightide-web/src/components/chat/data-input/index.ts
 rename packages/hightide-web/src/components/chat/{ => interaction}/ChatConversationRow.tsx (87%)
 rename packages/hightide-web/src/components/chat/{ => interaction}/ChatQuickReplyChip.tsx (86%)
 create mode 100644 packages/hightide-web/src/components/chat/interaction/index.ts
 rename packages/hightide-web/src/components/chat/{ => layout}/ChatConversationList.tsx (81%)
 rename packages/hightide-web/src/components/chat/{ => layout}/ChatDateDivider.tsx (100%)
 rename packages/hightide-web/src/components/chat/{ => layout}/ChatMessageList.tsx (100%)
 rename packages/hightide-web/src/components/chat/{ => layout}/ChatThreadHeader.tsx (89%)
 create mode 100644 packages/hightide-web/src/components/chat/layout/index.ts
 rename packages/hightide-web/src/components/chat/{ => visualization}/ChatAttachmentMessageBubble.tsx (95%)
 rename packages/hightide-web/src/components/chat/{ => visualization}/ChatMessageBubble.tsx (92%)
 rename packages/hightide-web/src/components/chat/{ => visualization}/ChatSystemLine.tsx (78%)
 create mode 100644 packages/hightide-web/src/components/chat/visualization/index.ts
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Checkbox.tsx (96%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/FileInput/FileInput.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/FileInput/FileInputComponent.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/FileInput/FileInputContext.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/FileInput/FileInputMenu.tsx (96%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/FileInput/FileInputRoot.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/FileInput/FileInputTrigger.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/FileInput/fileInputItem.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/FileInput/index.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/LabelledCheckbox.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/MultiSelect/MultiSelect.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/MultiSelect/MultiSelectChipDisplayTrigger.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/MultiSelect/MultiSelectComponent.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/MultiSelect/MultiSelectContent.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/MultiSelect/MultiSelectContext.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/MultiSelect/MultiSelectOption.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/MultiSelect/MultiSelectRoot.tsx (99%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/MultiSelect/MultiSelectTrigger.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/MultiSelect/index.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/MultiSelect/useMultiSelect.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Select/Select.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Select/SelectComponent.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Select/SelectContent.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Select/SelectContext.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Select/SelectOption.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Select/SelectRoot.tsx (99%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Select/SelectTrigger.tsx (97%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Select/index.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Select/useSelect.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Switch.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/Textarea.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/date/CalendarDatePicker.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/date/CalendarDayPicker.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/date/DateTimePicker.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/date/DateTimePickerDialog.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/date/DateTimeWheelPicker.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/date/DateWheelPicker.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/date/TimePicker.tsx (99%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/date/TimeWheelPicker.tsx (99%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/date/YearMonthPicker.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/date/index.ts (91%)
 create mode 100644 packages/hightide-web/src/components/data-input/index.ts
 rename packages/hightide-web/src/components/{user-interaction => data-input}/input/DateTimeField.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/input/DateTimeInput.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/input/FlexibleDateTimeInput.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/input/Input.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/input/InsideLabelInput.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/input/NumberInput.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/input/NumberStepperInput.tsx (99%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/input/SearchBar.tsx (91%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/input/ToggleableInput.tsx (97%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/input/dateTimeSegments.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => data-input}/input/index.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Button.tsx (91%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Combobox/Combobox.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Combobox/ComboboxContext.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Combobox/ComboboxInput.tsx (97%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Combobox/ComboboxList.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Combobox/ComboboxOption.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Combobox/ComboboxRoot.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Combobox/index.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Combobox/useCombobox.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/CopyToClipboardWrapper.tsx (97%)
 rename packages/hightide-web/src/components/{utils => interaction}/FocusTrap.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/IconButton.tsx (97%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Menu.tsx (95%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Pressable.tsx (98%)
 rename packages/hightide-web/src/components/{layout => interaction}/TabSwitcher.tsx (99%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/Tooltip.tsx (99%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/WheelPicker/WheelPicker.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/WheelPicker/WheelPickerBar.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/WheelPicker/WheelPickerContext.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/WheelPicker/WheelPickerOption.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/WheelPicker/WheelPickerRoot.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/WheelPicker/index.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/data/FilterList.tsx (97%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/data/FilterOperator.tsx (99%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/data/FilterOperatorLabel.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/data/FilterPopUp.tsx (98%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/data/SortingList.tsx (95%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/data/data-types.tsx (96%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/data/filter-function.ts (100%)
 rename packages/hightide-web/src/components/{user-interaction => interaction}/data/index.ts (100%)
 create mode 100644 packages/hightide-web/src/components/interaction/index.ts
 rename packages/hightide-web/src/components/{ => interaction}/list/ListActionItem.tsx (83%)
 rename packages/hightide-web/src/components/{ => interaction}/list/ListNavigationItem.tsx (91%)
 rename packages/hightide-web/src/components/{ => interaction}/list/index.ts (61%)
 rename packages/hightide-web/src/components/{layout => interaction}/navigation/BreadCrumbs.tsx (100%)
 rename packages/hightide-web/src/components/{layout => interaction}/navigation/Navigation.tsx (97%)
 rename packages/hightide-web/src/components/{layout => interaction}/navigation/Pagination.tsx (96%)
 rename packages/hightide-web/src/components/{layout => interaction}/navigation/StepperBar.tsx (98%)
 rename packages/hightide-web/src/components/{layout => interaction}/navigation/index.ts (100%)
 rename packages/hightide-web/src/components/{layout => interaction}/navigation/navigation-menus/NavigationContext.tsx (100%)
 rename packages/hightide-web/src/components/{layout => interaction}/navigation/navigation-menus/VerticalNavigationMenu.tsx (100%)
 rename packages/hightide-web/src/components/{layout => interaction}/navigation/navigation-menus/VerticalNavigationMenuItem.tsx (95%)
 rename packages/hightide-web/src/components/{layout => interaction}/navigation/navigation-menus/index.ts (100%)
 rename packages/hightide-web/src/components/{layout => interaction}/navigation/navigation-menus/types.ts (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => layout}/Card.tsx (100%)
 rename packages/hightide-web/src/components/layout/{drawer => Drawer}/Drawer.tsx (100%)
 rename packages/hightide-web/src/components/layout/{drawer => Drawer}/DrawerCloseButton.tsx (84%)
 rename packages/hightide-web/src/components/layout/{drawer => Drawer}/DrawerContainer.tsx (98%)
 rename packages/hightide-web/src/components/layout/{drawer => Drawer}/DrawerContext.tsx (100%)
 rename packages/hightide-web/src/components/layout/{drawer => Drawer}/DrawerRoot.tsx (100%)
 rename packages/hightide-web/src/components/layout/{drawer => Drawer}/index.ts (100%)
 rename packages/hightide-web/src/components/layout/{popup => PopUp}/PopUp.tsx (97%)
 rename packages/hightide-web/src/components/layout/{popup => PopUp}/PopUpContext.tsx (100%)
 rename packages/hightide-web/src/components/layout/{popup => PopUp}/PopUpOpener.tsx (100%)
 rename packages/hightide-web/src/components/layout/{popup => PopUp}/PopUpRoot.tsx (100%)
 rename packages/hightide-web/src/components/layout/{popup => PopUp}/index.ts (100%)
 rename packages/hightide-web/src/components/{utils => layout}/Portal.tsx (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/AutoColumnOrderFeature.ts (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/ColumnSizingWithTargetFeature.ts (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/FillerCell.tsx (86%)
 rename packages/hightide-web/src/components/layout/{table => Table}/Table.tsx (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableBody.tsx (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableCell.tsx (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableColumn.tsx (96%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableColumnSwitcher.tsx (97%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableContext.tsx (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableDisplay.tsx (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableFilter.ts (94%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableFilterButton.tsx (89%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableHeader.tsx (99%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TablePagination.tsx (91%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableProvider.tsx (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableSortButton.tsx (91%)
 rename packages/hightide-web/src/components/layout/{table => Table}/TableWithSelectionProvider.tsx (98%)
 rename packages/hightide-web/src/components/layout/{table => Table}/VirtualizedTableBody.tsx (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/columnSizeUtil.ts (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/index.ts (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/placeholderColumn.ts (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/types.ts (100%)
 rename packages/hightide-web/src/components/layout/{table => Table}/useNaturalColumnWidthLock.ts (100%)
 rename packages/hightide-web/src/components/{utils => layout}/Transition.tsx (100%)
 rename packages/hightide-web/src/components/{ => layout}/form/FieldLayout.tsx (98%)
 rename packages/hightide-web/src/components/{ => layout}/form/FormContext.tsx (100%)
 rename packages/hightide-web/src/components/{ => layout}/form/FormField.tsx (96%)
 rename packages/hightide-web/src/components/{ => layout}/form/FormObserver.tsx (100%)
 rename packages/hightide-web/src/components/{ => layout}/form/FormStore.ts (100%)
 rename packages/hightide-web/src/components/{ => layout}/form/index.ts (100%)
 rename packages/hightide-web/src/components/{ => layout}/form/useCreateForm.tsx (100%)
 rename packages/hightide-web/src/components/{ => layout}/list/ListItem.tsx (94%)
 rename packages/hightide-web/src/components/{ => layout}/list/ListItemContent.tsx (100%)
 rename packages/hightide-web/src/components/{ => layout}/list/ListItemTypes.ts (100%)
 create mode 100644 packages/hightide-web/src/components/layout/list/index.ts
 rename packages/hightide-web/src/components/{user-interaction => }/properties/CheckboxProperty.tsx (93%)
 rename packages/hightide-web/src/components/{user-interaction => }/properties/DateProperty.tsx (88%)
 rename packages/hightide-web/src/components/{user-interaction => }/properties/MultiSelectProperty.tsx (88%)
 rename packages/hightide-web/src/components/{user-interaction => }/properties/NumberProperty.tsx (92%)
 rename packages/hightide-web/src/components/{user-interaction => }/properties/PropertyBase.tsx (94%)
 rename packages/hightide-web/src/components/{user-interaction => }/properties/SelectProperty.tsx (89%)
 rename packages/hightide-web/src/components/{user-interaction => }/properties/TextProperty.tsx (87%)
 rename packages/hightide-web/src/components/{user-interaction => }/properties/index.ts (100%)
 delete mode 100644 packages/hightide-web/src/components/user-interaction/index.ts
 delete mode 100644 packages/hightide-web/src/components/utils/index.ts
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Avatar/Avatar.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Avatar/AvatarComponent.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Avatar/AvatarContext.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Avatar/AvatarFallback.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Avatar/AvatarImage.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Avatar/AvatarName.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Avatar/AvatarRoot.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Avatar/AvatarStatusIndicator.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Avatar/AvatarTypes.ts (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Avatar/index.ts (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/AvatarGroup/AvatarGroup.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/AvatarGroup/AvatarGroupAdditionalText.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/AvatarGroup/AvatarGroupComponent.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/AvatarGroup/AvatarGroupContainer.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/AvatarGroup/AvatarGroupOverlap.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/AvatarGroup/index.ts (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/ChangingNumber.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Chip.tsx (100%)
 rename packages/hightide-web/src/components/{layout/loading => visualization}/ErrorComponent.tsx (91%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/ExpansionIcon.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/Icon.tsx (100%)
 rename packages/hightide-web/src/components/{layout/loading => visualization}/LoadingAnimation.tsx (90%)
 rename packages/hightide-web/src/components/{layout/loading => visualization}/LoadingSpinner.tsx (74%)
 rename packages/hightide-web/src/components/{layout => visualization}/MarkdownInterpreter.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/ProgressIndicator.tsx (100%)
 rename packages/hightide-web/src/components/{user-interaction/date => visualization}/TimeDisplay.tsx (97%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/index.ts (58%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/process-model/ProcessModelActivityNode.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/process-model/ProcessModelCanvas.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/process-model/ProcessModelTerminalNode.tsx (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/process-model/ProcessModelTraceReplay.tsx (98%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/process-model/index.ts (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/process-model/layoutProcessModel.ts (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/process-model/processModelLibrary.ts (100%)
 rename packages/hightide-web/src/components/{display-and-visualization => visualization}/process-model/types.ts (100%)
 rename packages/hightide-web/stories/{Branding => branding}/SemanticColors.stories.tsx (100%)
 rename packages/hightide-web/stories/{Branding => branding/visualization}/AppZumDocBadge.stories.tsx (77%)
 rename packages/hightide-web/stories/{Branding => branding/visualization}/AppZumDocLogo.stories.tsx (84%)
 rename packages/hightide-web/stories/{Branding => branding/visualization}/HelpwaveBadge.stories.tsx (77%)
 rename packages/hightide-web/stories/{Branding => branding/visualization}/HelpwaveLoadingAnimation.stories.tsx (79%)
 rename packages/hightide-web/stories/{Chat => chat}/ChatDemo.stories.tsx (91%)
 rename packages/hightide-web/stories/{Chat => chat/data-input}/ChatMessageComposer.stories.tsx (88%)
 rename packages/hightide-web/stories/{Chat => chat/interaction}/ChatConversationRow.stories.tsx (93%)
 rename packages/hightide-web/stories/{Chat => chat/interaction}/ChatQuickReplyChip.stories.tsx (87%)
 rename packages/hightide-web/stories/{Chat => chat/layout}/ChatConversationList.stories.tsx (93%)
 rename packages/hightide-web/stories/{Chat => chat/layout}/ChatDateDivider.stories.tsx (76%)
 rename packages/hightide-web/stories/{Chat => chat/layout}/ChatMessageList.stories.tsx (79%)
 rename packages/hightide-web/stories/{Chat => chat/layout}/ChatThreadHeader.stories.tsx (91%)
 rename packages/hightide-web/stories/{Chat => chat/visualization}/ChatAttachmentMessageBubble.stories.tsx (88%)
 rename packages/hightide-web/stories/{Chat => chat/visualization}/ChatMessageBubble.stories.tsx (94%)
 rename packages/hightide-web/stories/{Chat => chat/visualization}/ChatMessageCard.stories.tsx (92%)
 rename packages/hightide-web/stories/{Chat => chat/visualization}/ChatSystemLine.stories.tsx (78%)
 rename packages/hightide-web/stories/{User Interaction => data-input}/Checkbox.stories.tsx (87%)
 rename packages/hightide-web/stories/{User Interaction => data-input}/FileInput/FileInput.stories.tsx (93%)
 rename packages/hightide-web/stories/{User Interaction => data-input}/LabelledCheckbox.stories.tsx (88%)
 rename packages/hightide-web/stories/{User Interaction => data-input}/MultiSelect/MultiSelect.stories.tsx (95%)
 rename packages/hightide-web/stories/{User Interaction => data-input}/MultiSelect/MultiSelectChipDisplay.stories.tsx (94%)
 rename packages/hightide-web/stories/{User Interaction => data-input}/Select/Select.stories.tsx (93%)
 rename packages/hightide-web/stories/{User Interaction => data-input}/Switch.stories.tsx (95%)
 rename packages/hightide-web/stories/{User Interaction => data-input}/Textarea.stories.tsx (81%)
 rename packages/hightide-web/stories/{User Interaction/Date and Time Input => data-input/date}/CalendarDatePicker.stories.tsx (87%)
 rename packages/hightide-web/stories/{User Interaction/Date and Time Input => data-input/date}/CalendarDayPicker.stories.tsx (84%)
 rename packages/hightide-web/stories/{User Interaction/Date and Time Input => data-input/date}/DateTimePicker.stories.tsx (88%)
 rename packages/hightide-web/stories/{User Interaction/Date and Time Input => data-input/date}/DateTimePickerDialog.stories.tsx (93%)
 rename packages/hightide-web/stories/{User Interaction/Date and Time Input => data-input/date}/DateTimeWheelPicker.stories.tsx (83%)
 rename packages/hightide-web/stories/{User Interaction/Date and Time Input => data-input/date}/DateWheelPicker.stories.tsx (87%)
 rename packages/hightide-web/stories/{User Interaction/Date and Time Input => data-input/date}/TimePicker.stories.tsx (87%)
 rename packages/hightide-web/stories/{User Interaction/Date and Time Input => data-input/date}/TimeWheelPicker.stories.tsx (87%)
 rename packages/hightide-web/stories/{User Interaction/Date and Time Input => data-input/date}/YearMonthPicker.stories.tsx (88%)
 rename packages/hightide-web/stories/{User Interaction/Input => data-input/input}/DateTimeInput.stories.tsx (94%)
 rename packages/hightide-web/stories/{User Interaction/Input => data-input/input}/FlexibleDateTimeInput.stories.tsx (93%)
 rename packages/hightide-web/stories/{User Interaction/Input => data-input/input}/Input.stories.tsx (89%)
 rename packages/hightide-web/stories/{User Interaction/Input => data-input/input}/InsideLabelInput.stories.tsx (85%)
 rename packages/hightide-web/stories/{User Interaction/Input => data-input/input}/NumberStepperInput.stories.tsx (91%)
 rename packages/hightide-web/stories/{User Interaction/Input => data-input/input}/SearchBar.stories.tsx (84%)
 rename packages/hightide-web/stories/{User Interaction/Input => data-input/input}/TogglableInput.stories.tsx (82%)
 rename packages/hightide-web/stories/{User Interaction => interaction}/Button.stories.tsx (88%)
 rename packages/hightide-web/stories/{User Interaction => interaction/Combobox}/Combobox.stories.tsx (86%)
 rename packages/hightide-web/stories/{User Interaction => interaction}/CopyToClipboardWrapper.stories.tsx (81%)
 rename packages/hightide-web/stories/{User Interaction => interaction}/IconButton.stories.tsx (89%)
 rename packages/hightide-web/stories/{User Interaction => interaction}/Menu.stories.tsx (88%)
 rename packages/hightide-web/stories/{User Interaction => interaction}/Pressable.stories.tsx (85%)
 rename packages/hightide-web/stories/{Layout => interaction}/TabSwitcher.stories.tsx (88%)
 rename packages/hightide-web/stories/{User Interaction/Tooltip => interaction}/Tooltip.stories.tsx (90%)
 rename packages/hightide-web/stories/{User Interaction => interaction/WheelPicker}/WheelPicker.stories.tsx (91%)
 rename packages/hightide-web/stories/{User Interaction/List => interaction/list}/ListActionItem.stories.tsx (92%)
 rename packages/hightide-web/stories/{User Interaction/List => interaction/list}/ListNavigationItem.stories.tsx (92%)
 rename packages/hightide-web/stories/{Layout/Navigation => interaction/navigation}/BreadCrumbs.stories.tsx (82%)
 rename packages/hightide-web/stories/{Layout/Navigation => interaction/navigation}/Navigation.stories.tsx (87%)
 rename packages/hightide-web/stories/{User Interaction => interaction/navigation}/StepperBar.stories.tsx (84%)
 rename packages/hightide-web/stories/{Layout/Navigation => interaction/navigation}/VerticalNavigation.stories.tsx (96%)
 rename packages/hightide-web/stories/{Layout => layout}/AnchoredFloatingContainer.stories.tsx (100%)
 rename packages/hightide-web/stories/{Display And Visualization/Card => layout}/Card.stories.tsx (85%)
 rename packages/hightide-web/stories/{Layout => layout/Carousel}/Carousel.stories.tsx (91%)
 rename packages/hightide-web/stories/{Layout => layout}/Drawer/Drawer.stories.tsx (88%)
 rename packages/hightide-web/stories/{Layout => layout}/Drawer/StackedDrawer.stories.tsx (92%)
 rename packages/hightide-web/stories/{Layout => layout/ExpandableSection}/Expandable.stories.tsx (88%)
 rename packages/hightide-web/stories/{Layout => layout}/FAQSection.stories.tsx (90%)
 rename packages/hightide-web/stories/{Layout => layout}/Modal/ConfirmModal.stories.tsx (100%)
 rename packages/hightide-web/stories/{Layout => layout}/Modal/DiscardChangesModal.stories.tsx (100%)
 rename packages/hightide-web/stories/{Internationalization => layout/Modal}/LanguageModal.stories.tsx (74%)
 rename packages/hightide-web/stories/{Layout => layout}/Modal/StackedModal.stories.tsx (97%)
 rename packages/hightide-web/stories/{Themeing => layout/Modal}/ThemeModal.stories.tsx (75%)
 rename packages/hightide-web/stories/{Themeing => layout/Modal}/ThemeSelect.stories.tsx (74%)
 rename packages/hightide-web/stories/{Layout => layout/PopUp}/PopUp.stories.tsx (89%)
 rename packages/hightide-web/stories/{Layout => layout}/ScrollableList.stories.tsx (96%)
 rename packages/hightide-web/stories/{Layout => layout}/Table/AsyncDataExample.stories.tsx (96%)
 rename packages/hightide-web/stories/{Layout => layout}/Table/EmptyTable.stories.tsx (94%)
 rename packages/hightide-web/stories/{Layout => layout}/Table/FilterListTable.stories.tsx (88%)
 rename packages/hightide-web/stories/{Layout => layout}/Table/NaturalColumnSizing.stories.tsx (88%)
 rename packages/hightide-web/stories/{Layout => layout}/Table/PageScrollTable.stories.tsx (95%)
 rename packages/hightide-web/stories/{Layout => layout}/Table/Selection.stories.tsx (93%)
 rename packages/hightide-web/stories/{Layout => layout}/Table/VirtualizedInfiniteScrolling.stories.tsx (94%)
 rename packages/hightide-web/stories/{Layout => layout}/VerticalDivider.stories.tsx (100%)
 rename packages/hightide-web/stories/{Layout => layout/app}/AppPage.stories.tsx (92%)
 rename packages/hightide-web/stories/{User Interaction/Form => layout/form}/Form.stories.tsx (94%)
 rename packages/hightide-web/stories/{User Interaction/List => layout/list}/ListItem.stories.tsx (91%)
 rename packages/hightide-web/stories/{Layout/Loading => layout/loading}/LoadingAndErrorContainer.stories.tsx (100%)
 rename packages/hightide-web/stories/{Layout/Loading => layout/loading}/LoadingContainer.stories.tsx (100%)
 rename packages/hightide-web/stories/{Layout/Virtualization => layout/virtualization}/VirtualizedCardGrid.stories.tsx (98%)
 rename packages/hightide-web/stories/{User Interaction/Properties => properties}/CheckboxProperty.stories.tsx (92%)
 rename packages/hightide-web/stories/{User Interaction/Properties => properties}/DateProperty.stories.tsx (92%)
 rename packages/hightide-web/stories/{User Interaction/Properties => properties}/MultiSelectProperty.stories.tsx (86%)
 rename packages/hightide-web/stories/{User Interaction/Properties => properties}/NumberProperty.stories.tsx (92%)
 rename packages/hightide-web/stories/{User Interaction/Properties => properties}/PropertyBase.stories.tsx (88%)
 rename packages/hightide-web/stories/{User Interaction/Properties => properties}/SingleSelectProperty.stories.tsx (87%)
 rename packages/hightide-web/stories/{User Interaction/Properties => properties}/TextProperty.stories.tsx (92%)
 rename packages/hightide-web/stories/{Display And Visualization => visualization}/Avatar/Avatar.stories.tsx (85%)
 rename packages/hightide-web/stories/{Display And Visualization => visualization}/Avatar/AvatarWithLabel.stories.tsx (95%)
 rename packages/hightide-web/stories/{Display And Visualization/Avatar => visualization/AvatarGroup}/AvatarGroup.stories.tsx (85%)
 rename packages/hightide-web/stories/{Display And Visualization => visualization}/ChangingNumber.stories.tsx (88%)
 rename packages/hightide-web/stories/{Display And Visualization/Chip => visualization}/Chip.stories.tsx (87%)
 rename packages/hightide-web/stories/{Display And Visualization/Chip => visualization}/ChipList.stories.tsx (89%)
 rename packages/hightide-web/stories/{Display And Visualization => visualization}/Icon.stories.tsx (78%)
 rename packages/hightide-web/stories/{Layout => visualization}/MarkdownInterpreter.stories.tsx (85%)
 rename packages/hightide-web/stories/{Display And Visualization => visualization}/ProgressIndicator.stories.tsx (77%)
 rename packages/hightide-web/stories/{Display And Visualization/ProcessModel => visualization/process-model}/ProcessModelActivityNode.stories.tsx (89%)
 rename packages/hightide-web/stories/{Display And Visualization/ProcessModel => visualization/process-model}/ProcessModelCanvas.stories.tsx (82%)
 rename packages/hightide-web/stories/{Display And Visualization/ProcessModel => visualization/process-model}/ProcessModelTraceReplay.stories.tsx (81%)

diff --git a/conventions/Components.md b/conventions/Components.md
index adb9c6b9..fbc6465b 100644
--- a/conventions/Components.md
+++ b/conventions/Components.md
@@ -87,6 +87,44 @@ It contains one HTML element. It is a `forwardRef` to that element, and its prop
 
 When a subcomponent contains more than one HTML element, it still forwards a ref, and every HTML element inside has its own `HTMLAttributes` props.
 
+## Distinction
+
+A component folder matches what the component does.
+
+Grouping folders stay lowercase: `layout`, `interaction`, `data-input`, `visualization`, `properties`, `chat`, and `branding`.
+
+A folder that holds one aggregate uses that aggregate's name, capitalized the same way: `Select`, `Modal`, `Drawer`, `PopUp`, `Table`, `Carousel`, `WheelPicker`, `Avatar`.
+
+### layout
+
+A layout component takes configuration and elements, and arranges those elements. It does not read or write a value through `InputInterface`.
+
+`Modal`, `Carousel`, `Card`, and `Form` are layout components.
+
+### interaction
+
+An interaction component reacts to the user. It does not implement `InputInterface`.
+
+`Button`, `Menu`, `Tooltip`, and `WheelPicker` are interaction components.
+
+### data-input
+
+A data-input component reads and writes a value through `InputInterface`. Every component in `data-input` implements that interface.
+
+`Input`, `Select`, `Checkbox`, and `DateTimeInput` are data-input components.
+
+### visualization
+
+A visualization component takes required data and displays it. Icons are visualization components.
+
+`Icon`, `Avatar`, `Chip`, and `ProgressIndicator` are visualization components.
+
+### Feature folders
+
+A feature that extends the core components has its own folder. `chat` holds chat features. `branding` holds icons and marks for a specific product.
+
+Inside a feature folder, components use the same folders: `layout`, `interaction`, `data-input`, and `visualization`.
+
 ## Styling identification
 
 Components identify themselves for styling with class names. Do not use `data-name`, or any other data attribute, as the styling hook.
diff --git a/packages/hightide-web/CHANGELOG.md b/packages/hightide-web/CHANGELOG.md
index 9d8f6220..d78b2582 100644
--- a/packages/hightide-web/CHANGELOG.md
+++ b/packages/hightide-web/CHANGELOG.md
@@ -63,6 +63,9 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `DateTimePickerDialog` centers its wheels horizontally
 - `date-time-input-dialog-popup` sets `data-time-format` (`12h` or `24h`). A 12-hour `dateTime` popup uses a larger tablet minimum width
 - Value callbacks use `InputInterface` on `Input`, including optional `initialValue`, `invalid`, `disabled`, `readOnly`, and `required`. Form fields keep `FormFieldDataHandling` for their own required value props
+- Components are grouped into `layout`, `interaction`, `data-input`, and `visualization`. Feature folders such as `chat` and `branding` use the same grouping
+- `ChatMessageComposer` implements `InputInterface` and lives in `chat/data-input`
+- `properties` is its own component folder. A folder that holds one aggregate uses that aggregate's name, including `Drawer`, `PopUp`, and `Table`. Stories follow the same folders
 - `Select` and `MultiSelect` values are no longer `T | null`. An empty selection is omitted
 - Readonly `.input` text, border, and focus use 80% opacity
 - `Carousel` is a compound component: `Carousel.Root`, `Carousel.Container`, `Carousel.Slide`, `Carousel.Arrows`, `Carousel.FadeLayover`, `Carousel.Stepper`, `Carousel.Context`, and `Carousel.Consumer`. The combined `Carousel` still composes them from `children`, `hintNext`, `arrows`, `dots`, and `blurColor`
diff --git a/packages/hightide-web/src/components/branding/index.ts b/packages/hightide-web/src/components/branding/index.ts
index 8e9943f6..12d4ad01 100644
--- a/packages/hightide-web/src/components/branding/index.ts
+++ b/packages/hightide-web/src/components/branding/index.ts
@@ -1,4 +1 @@
-export * from './AppZumDocBadge'
-export * from './AppZumDocLogo'
-export * from './HelpwaveBadge'
-export * from './HelpwaveLogo'
+export * from './visualization'
diff --git a/packages/hightide-web/src/components/branding/AppZumDocBadge.tsx b/packages/hightide-web/src/components/branding/visualization/AppZumDocBadge.tsx
similarity index 100%
rename from packages/hightide-web/src/components/branding/AppZumDocBadge.tsx
rename to packages/hightide-web/src/components/branding/visualization/AppZumDocBadge.tsx
diff --git a/packages/hightide-web/src/components/branding/AppZumDocLogo.tsx b/packages/hightide-web/src/components/branding/visualization/AppZumDocLogo.tsx
similarity index 100%
rename from packages/hightide-web/src/components/branding/AppZumDocLogo.tsx
rename to packages/hightide-web/src/components/branding/visualization/AppZumDocLogo.tsx
diff --git a/packages/hightide-web/src/components/branding/HelpwaveBadge.tsx b/packages/hightide-web/src/components/branding/visualization/HelpwaveBadge.tsx
similarity index 100%
rename from packages/hightide-web/src/components/branding/HelpwaveBadge.tsx
rename to packages/hightide-web/src/components/branding/visualization/HelpwaveBadge.tsx
diff --git a/packages/hightide-web/src/components/branding/HelpwaveLogo.tsx b/packages/hightide-web/src/components/branding/visualization/HelpwaveLogo.tsx
similarity index 100%
rename from packages/hightide-web/src/components/branding/HelpwaveLogo.tsx
rename to packages/hightide-web/src/components/branding/visualization/HelpwaveLogo.tsx
diff --git a/packages/hightide-web/src/components/branding/visualization/index.ts b/packages/hightide-web/src/components/branding/visualization/index.ts
new file mode 100644
index 00000000..8e9943f6
--- /dev/null
+++ b/packages/hightide-web/src/components/branding/visualization/index.ts
@@ -0,0 +1,4 @@
+export * from './AppZumDocBadge'
+export * from './AppZumDocLogo'
+export * from './HelpwaveBadge'
+export * from './HelpwaveLogo'
diff --git a/packages/hightide-web/src/components/chat/ChatMessageComposer.tsx b/packages/hightide-web/src/components/chat/data-input/ChatMessageComposer.tsx
similarity index 54%
rename from packages/hightide-web/src/components/chat/ChatMessageComposer.tsx
rename to packages/hightide-web/src/components/chat/data-input/ChatMessageComposer.tsx
index 3449330c..a4bb300b 100644
--- a/packages/hightide-web/src/components/chat/ChatMessageComposer.tsx
+++ b/packages/hightide-web/src/components/chat/data-input/ChatMessageComposer.tsx
@@ -1,43 +1,51 @@
 import type { HTMLAttributes, ReactNode } from 'react'
-import { useCallback, useLayoutEffect, useRef } from 'react'
+import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react'
 import clsx from 'clsx'
 import { SendHorizontal } from 'lucide-react'
-import { Icon } from '../display-and-visualization/Icon'
-import { IconButton } from '../user-interaction/IconButton'
-import { useControlledState } from '@helpwave/hightide-utils/hooks'
-import { useWindowResizeObserver } from '../../hooks/useWindowResizeObserver'
+import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
+
+import { useWindowResizeObserver } from '../../../hooks/useWindowResizeObserver'
+import type { InputInterface } from '../../data-input/input/Input'
+import { IconButton } from '../../interaction/IconButton'
+import { Icon } from '../../visualization/Icon'
+import { PropsUtil } from '../../../utils/propsUtil'
 
 const MAX_INPUT_LINES = 7
 
-export type ChatMessageComposerProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
-  value?: string,
-  initialValue?: string,
-  onValueChange?: (value: string) => void,
-  onSend: (value: string) => void,
-  placeholder?: string,
-  sendLabel?: string,
-  disabled?: boolean,
-  actions?: ReactNode,
-  trailing?: ReactNode,
-}
+export type ChatMessageComposerProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>
+  & InputInterface<string>
+  & {
+    onSend: (value: string) => void,
+    placeholder?: string,
+    sendLabel?: string,
+    actions?: ReactNode,
+    trailing?: ReactNode,
+  }
 
-export const ChatMessageComposer = ({
+export const ChatMessageComposer = forwardRef<HTMLDivElement, ChatMessageComposerProps>(function ChatMessageComposer({
   value: controlledValue,
   initialValue,
   onValueChange,
+  onEditComplete,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  required = false,
   onSend,
   placeholder,
   sendLabel = 'Send',
-  disabled = false,
   actions,
+  trailing,
   ...props
-}: ChatMessageComposerProps) => {
+}, ref) {
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const [value, setValue] = useControlledState({
     value: controlledValue,
     onValueChange,
     defaultValue: initialValue ?? '',
   })
+  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
+  const canEdit = !disabled && !readOnly
 
   const syncTextareaHeight = useCallback(() => {
     const textarea = textareaRef.current
@@ -57,16 +65,25 @@ export const ChatMessageComposer = ({
   useWindowResizeObserver(syncTextareaHeight)
 
   const send = () => {
+    if (!canEdit) {
+      return
+    }
     const trimmed = (value ?? '').trim()
     if (!trimmed) {
       return
     }
+    onEditCompleteStable(trimmed)
     onSend(trimmed)
     setValue('')
   }
 
   return (
-    <div {...props} className={clsx('chat-message-composer', props.className)}>
+    <div
+      {...props}
+      ref={ref}
+      className={clsx('chat-message-composer', props.className)}
+      {...PropsUtil.dataAttributes.interactionStates({ invalid, disabled, readOnly, required })}
+    >
       {actions && (
         <div className="chat-message-composer-actions">
           {actions}
@@ -79,19 +96,31 @@ export const ChatMessageComposer = ({
         value={value ?? ''}
         placeholder={placeholder}
         disabled={disabled}
-        onChange={event => setValue(event.target.value)}
+        readOnly={readOnly}
+        required={required}
+        onChange={event => {
+          if (!canEdit) {
+            return
+          }
+          setValue(event.target.value)
+        }}
+        onBlur={event => {
+          onEditCompleteStable(event.target.value)
+        }}
         onKeyDown={event => {
           if (event.key === 'Enter' && !event.shiftKey) {
             event.preventDefault()
             send()
           }
         }}
+        {...PropsUtil.aria.interactionStates({ invalid, disabled, readOnly, required })}
       />
+      {trailing}
       <IconButton
         tooltip={sendLabel}
         color="primary"
         variant="filled"
-        disabled={disabled || !(value ?? '').trim()}
+        disabled={disabled || readOnly || !(value ?? '').trim()}
         size="md"
         onClick={send}
         className="chat-message-composer-send-button"
@@ -100,4 +129,4 @@ export const ChatMessageComposer = ({
       </IconButton>
     </div>
   )
-}
+})
diff --git a/packages/hightide-web/src/components/chat/data-input/index.ts b/packages/hightide-web/src/components/chat/data-input/index.ts
new file mode 100644
index 00000000..324264f9
--- /dev/null
+++ b/packages/hightide-web/src/components/chat/data-input/index.ts
@@ -0,0 +1 @@
+export * from './ChatMessageComposer'
diff --git a/packages/hightide-web/src/components/chat/index.ts b/packages/hightide-web/src/components/chat/index.ts
index 9726f8ef..30d476d8 100644
--- a/packages/hightide-web/src/components/chat/index.ts
+++ b/packages/hightide-web/src/components/chat/index.ts
@@ -1,10 +1,4 @@
-export * from './ChatAttachmentMessageBubble'
-export * from './ChatConversationList'
-export * from './ChatConversationRow'
-export * from './ChatDateDivider'
-export * from './ChatMessageBubble'
-export * from './ChatMessageComposer'
-export * from './ChatMessageList'
-export * from './ChatQuickReplyChip'
-export * from './ChatSystemLine'
-export * from './ChatThreadHeader'
+export * from './data-input'
+export * from './interaction'
+export * from './layout'
+export * from './visualization'
diff --git a/packages/hightide-web/src/components/chat/ChatConversationRow.tsx b/packages/hightide-web/src/components/chat/interaction/ChatConversationRow.tsx
similarity index 87%
rename from packages/hightide-web/src/components/chat/ChatConversationRow.tsx
rename to packages/hightide-web/src/components/chat/interaction/ChatConversationRow.tsx
index f2b85e5e..d0f82ee0 100644
--- a/packages/hightide-web/src/components/chat/ChatConversationRow.tsx
+++ b/packages/hightide-web/src/components/chat/interaction/ChatConversationRow.tsx
@@ -1,11 +1,11 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 import { Check, CheckCheck } from 'lucide-react'
-import { Icon } from '../display-and-visualization/Icon'
-import { Avatar } from '../display-and-visualization/Avatar/Avatar'
-import type { AvatarProps } from '../display-and-visualization/Avatar/AvatarComponent'
-import { ColoringUtils } from '../../utils/coloring'
-import { PropsUtil } from '../../utils/propsUtil'
+import { Icon } from '../../visualization/Icon'
+import { Avatar } from '../../visualization/Avatar/Avatar'
+import type { AvatarProps } from '../../visualization/Avatar/AvatarComponent'
+import { ColoringUtils } from '../../../utils/coloring'
+import { PropsUtil } from '../../../utils/propsUtil'
 
 export type ChatConversationSentIndicator = 'sent' | 'sentAndReceived'
 
diff --git a/packages/hightide-web/src/components/chat/ChatQuickReplyChip.tsx b/packages/hightide-web/src/components/chat/interaction/ChatQuickReplyChip.tsx
similarity index 86%
rename from packages/hightide-web/src/components/chat/ChatQuickReplyChip.tsx
rename to packages/hightide-web/src/components/chat/interaction/ChatQuickReplyChip.tsx
index a3f4aa4e..8a0c4684 100644
--- a/packages/hightide-web/src/components/chat/ChatQuickReplyChip.tsx
+++ b/packages/hightide-web/src/components/chat/interaction/ChatQuickReplyChip.tsx
@@ -1,7 +1,7 @@
 import type { ButtonHTMLAttributes } from 'react'
 import clsx from 'clsx'
-import { ColoringUtils } from '../../utils/coloring'
-import { PropsUtil } from '../../utils/propsUtil'
+import { ColoringUtils } from '../../../utils/coloring'
+import { PropsUtil } from '../../../utils/propsUtil'
 
 export type ChatQuickReplyChipProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   isActive?: boolean,
diff --git a/packages/hightide-web/src/components/chat/interaction/index.ts b/packages/hightide-web/src/components/chat/interaction/index.ts
new file mode 100644
index 00000000..de77d02b
--- /dev/null
+++ b/packages/hightide-web/src/components/chat/interaction/index.ts
@@ -0,0 +1,2 @@
+export * from './ChatConversationRow'
+export * from './ChatQuickReplyChip'
diff --git a/packages/hightide-web/src/components/chat/ChatConversationList.tsx b/packages/hightide-web/src/components/chat/layout/ChatConversationList.tsx
similarity index 81%
rename from packages/hightide-web/src/components/chat/ChatConversationList.tsx
rename to packages/hightide-web/src/components/chat/layout/ChatConversationList.tsx
index dbf97d6a..dd9dd71d 100644
--- a/packages/hightide-web/src/components/chat/ChatConversationList.tsx
+++ b/packages/hightide-web/src/components/chat/layout/ChatConversationList.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
-import { ScrollableList } from '../layout/ScrollableList'
-import type { ScrollableListProps } from '../layout/ScrollableList'
+import { ScrollableList } from '../../layout/ScrollableList'
+import type { ScrollableListProps } from '../../layout/ScrollableList'
 
 export type ChatConversationListProps = Omit<ScrollableListProps, 'as'>
 
diff --git a/packages/hightide-web/src/components/chat/ChatDateDivider.tsx b/packages/hightide-web/src/components/chat/layout/ChatDateDivider.tsx
similarity index 100%
rename from packages/hightide-web/src/components/chat/ChatDateDivider.tsx
rename to packages/hightide-web/src/components/chat/layout/ChatDateDivider.tsx
diff --git a/packages/hightide-web/src/components/chat/ChatMessageList.tsx b/packages/hightide-web/src/components/chat/layout/ChatMessageList.tsx
similarity index 100%
rename from packages/hightide-web/src/components/chat/ChatMessageList.tsx
rename to packages/hightide-web/src/components/chat/layout/ChatMessageList.tsx
diff --git a/packages/hightide-web/src/components/chat/ChatThreadHeader.tsx b/packages/hightide-web/src/components/chat/layout/ChatThreadHeader.tsx
similarity index 89%
rename from packages/hightide-web/src/components/chat/ChatThreadHeader.tsx
rename to packages/hightide-web/src/components/chat/layout/ChatThreadHeader.tsx
index 1b226883..9417fcb6 100644
--- a/packages/hightide-web/src/components/chat/ChatThreadHeader.tsx
+++ b/packages/hightide-web/src/components/chat/layout/ChatThreadHeader.tsx
@@ -1,8 +1,8 @@
 import type { HTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 
-import { Avatar } from '../display-and-visualization/Avatar/Avatar'
-import type { AvatarProps } from '../display-and-visualization/Avatar/AvatarComponent'
+import { Avatar } from '../../visualization/Avatar/Avatar'
+import type { AvatarProps } from '../../visualization/Avatar/AvatarComponent'
 
 export type ChatThreadHeaderProps = HTMLAttributes<HTMLDivElement> & {
   avatar?: AvatarProps,
diff --git a/packages/hightide-web/src/components/chat/layout/index.ts b/packages/hightide-web/src/components/chat/layout/index.ts
new file mode 100644
index 00000000..b00c01d8
--- /dev/null
+++ b/packages/hightide-web/src/components/chat/layout/index.ts
@@ -0,0 +1,4 @@
+export * from './ChatConversationList'
+export * from './ChatDateDivider'
+export * from './ChatMessageList'
+export * from './ChatThreadHeader'
diff --git a/packages/hightide-web/src/components/chat/ChatAttachmentMessageBubble.tsx b/packages/hightide-web/src/components/chat/visualization/ChatAttachmentMessageBubble.tsx
similarity index 95%
rename from packages/hightide-web/src/components/chat/ChatAttachmentMessageBubble.tsx
rename to packages/hightide-web/src/components/chat/visualization/ChatAttachmentMessageBubble.tsx
index 32f942a1..4efc8c72 100644
--- a/packages/hightide-web/src/components/chat/ChatAttachmentMessageBubble.tsx
+++ b/packages/hightide-web/src/components/chat/visualization/ChatAttachmentMessageBubble.tsx
@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react'
 import clsx from 'clsx'
 import { Download, FileText } from 'lucide-react'
-import { ColoringUtils } from '../../utils/coloring'
-import { Icon } from '../display-and-visualization/Icon'
+import { ColoringUtils } from '../../../utils/coloring'
+import { Icon } from '../../visualization/Icon'
 import { ChatMessageBubble, type ChatMessageBubbleProps } from './ChatMessageBubble'
 
 export type ChatAttachmentMessageBubbleProps = Omit<ChatMessageBubbleProps, 'children'> & {
diff --git a/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx b/packages/hightide-web/src/components/chat/visualization/ChatMessageBubble.tsx
similarity index 92%
rename from packages/hightide-web/src/components/chat/ChatMessageBubble.tsx
rename to packages/hightide-web/src/components/chat/visualization/ChatMessageBubble.tsx
index ec1f7577..5dc740ee 100644
--- a/packages/hightide-web/src/components/chat/ChatMessageBubble.tsx
+++ b/packages/hightide-web/src/components/chat/visualization/ChatMessageBubble.tsx
@@ -2,9 +2,9 @@ import { useMemo, type HTMLAttributes, type ReactNode } from 'react'
 import clsx from 'clsx'
 import { Check, CheckCheck, Clock } from 'lucide-react'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
-import { useDateTimeFormat, useLocalization } from '../../global-contexts/localization/forward-exports'
-import { Icon } from '../display-and-visualization/Icon'
-import { ColoringUtils } from '../user-interaction'
+import { useDateTimeFormat, useLocalization } from '../../../global-contexts/localization/forward-exports'
+import { Icon } from '../../visualization/Icon'
+import { ColoringUtils } from '../../../utils/coloring'
 
 export const chatMessageDirections = ['incoming', 'outgoing'] as const
 
diff --git a/packages/hightide-web/src/components/chat/ChatSystemLine.tsx b/packages/hightide-web/src/components/chat/visualization/ChatSystemLine.tsx
similarity index 78%
rename from packages/hightide-web/src/components/chat/ChatSystemLine.tsx
rename to packages/hightide-web/src/components/chat/visualization/ChatSystemLine.tsx
index 5ffd8629..e142ceef 100644
--- a/packages/hightide-web/src/components/chat/ChatSystemLine.tsx
+++ b/packages/hightide-web/src/components/chat/visualization/ChatSystemLine.tsx
@@ -1,9 +1,9 @@
 import type { ElementType, HTMLAttributes } from 'react'
 import clsx from 'clsx'
 import { CheckCheck } from 'lucide-react'
-import { Icon } from '../display-and-visualization/Icon'
-import type { ChipColor } from '../display-and-visualization/Chip'
-import { ColoringUtils } from '../../utils/coloring'
+import { Icon } from '../../visualization/Icon'
+import type { ChipColor } from '../../visualization/Chip'
+import { ColoringUtils } from '../../../utils/coloring'
 
 export type ChatSystemLineProps = HTMLAttributes<HTMLDivElement> & {
   icon?: ElementType,
diff --git a/packages/hightide-web/src/components/chat/visualization/index.ts b/packages/hightide-web/src/components/chat/visualization/index.ts
new file mode 100644
index 00000000..47e7aae2
--- /dev/null
+++ b/packages/hightide-web/src/components/chat/visualization/index.ts
@@ -0,0 +1,3 @@
+export * from './ChatAttachmentMessageBubble'
+export * from './ChatMessageBubble'
+export * from './ChatSystemLine'
diff --git a/packages/hightide-web/src/components/user-interaction/Checkbox.tsx b/packages/hightide-web/src/components/data-input/Checkbox.tsx
similarity index 96%
rename from packages/hightide-web/src/components/user-interaction/Checkbox.tsx
rename to packages/hightide-web/src/components/data-input/Checkbox.tsx
index 710b0599..3d43f0f2 100644
--- a/packages/hightide-web/src/components/user-interaction/Checkbox.tsx
+++ b/packages/hightide-web/src/components/data-input/Checkbox.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import { Check, Minus } from 'lucide-react'
-import type { IconSize } from '../display-and-visualization/Icon'
-import { Icon } from '../display-and-visualization/Icon'
+import type { IconSize } from '../visualization/Icon'
+import { Icon } from '../visualization/Icon'
 import { useCallback, type HTMLAttributes } from 'react'
 import { Visibility } from '../layout/Visibility'
 import type { InputInterface } from './input/Input'
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInput.tsx b/packages/hightide-web/src/components/data-input/FileInput/FileInput.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/FileInput/FileInput.tsx
rename to packages/hightide-web/src/components/data-input/FileInput/FileInput.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputComponent.tsx b/packages/hightide-web/src/components/data-input/FileInput/FileInputComponent.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/FileInput/FileInputComponent.tsx
rename to packages/hightide-web/src/components/data-input/FileInput/FileInputComponent.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputContext.tsx b/packages/hightide-web/src/components/data-input/FileInput/FileInputContext.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/FileInput/FileInputContext.tsx
rename to packages/hightide-web/src/components/data-input/FileInput/FileInputContext.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx b/packages/hightide-web/src/components/data-input/FileInput/FileInputMenu.tsx
similarity index 96%
rename from packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
rename to packages/hightide-web/src/components/data-input/FileInput/FileInputMenu.tsx
index e74c4529..9dc5087c 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputMenu.tsx
+++ b/packages/hightide-web/src/components/data-input/FileInput/FileInputMenu.tsx
@@ -3,9 +3,9 @@ import { FileText, Plus, X } from 'lucide-react'
 import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { Modal } from '../../layout/Modal/Modal'
-import { Button } from '../Button'
-import { Icon } from '../../display-and-visualization/Icon'
-import { IconButton } from '../IconButton'
+import { Button } from '../../interaction/Button'
+import { Icon } from '../../visualization/Icon'
+import { IconButton } from '../../interaction/IconButton'
 import { useFileInputContext } from './FileInputContext'
 import {
 
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputRoot.tsx b/packages/hightide-web/src/components/data-input/FileInput/FileInputRoot.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/FileInput/FileInputRoot.tsx
rename to packages/hightide-web/src/components/data-input/FileInput/FileInputRoot.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx b/packages/hightide-web/src/components/data-input/FileInput/FileInputTrigger.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
rename to packages/hightide-web/src/components/data-input/FileInput/FileInputTrigger.tsx
index 0ecb2bd6..d980e5db 100644
--- a/packages/hightide-web/src/components/user-interaction/FileInput/FileInputTrigger.tsx
+++ b/packages/hightide-web/src/components/data-input/FileInput/FileInputTrigger.tsx
@@ -3,7 +3,7 @@ import type React from 'react'
 import type { ComponentPropsWithoutRef, ForwardedRef, ReactNode } from 'react'
 import { forwardRef } from 'react'
 import { FileText, Pencil, Plus } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../../visualization/Icon'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import { useFileInputContext } from './FileInputContext'
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/fileInputItem.ts b/packages/hightide-web/src/components/data-input/FileInput/fileInputItem.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/FileInput/fileInputItem.ts
rename to packages/hightide-web/src/components/data-input/FileInput/fileInputItem.ts
diff --git a/packages/hightide-web/src/components/user-interaction/FileInput/index.ts b/packages/hightide-web/src/components/data-input/FileInput/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/FileInput/index.ts
rename to packages/hightide-web/src/components/data-input/FileInput/index.ts
diff --git a/packages/hightide-web/src/components/user-interaction/LabelledCheckbox.tsx b/packages/hightide-web/src/components/data-input/LabelledCheckbox.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/LabelledCheckbox.tsx
rename to packages/hightide-web/src/components/data-input/LabelledCheckbox.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelect.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelect.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelect.tsx
rename to packages/hightide-web/src/components/data-input/MultiSelect/MultiSelect.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectChipDisplayTrigger.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
rename to packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectChipDisplayTrigger.tsx
index ef35ac31..c009f918 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectChipDisplayTrigger.tsx
+++ b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectChipDisplayTrigger.tsx
@@ -1,7 +1,7 @@
 import type { ForwardedRef, HTMLAttributes, ReactNode } from 'react'
 import { forwardRef, useEffect, useRef } from 'react'
 import { useMultiSelectContext } from './MultiSelectContext'
-import { IconButton } from '../IconButton'
+import { IconButton } from '../../interaction/IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { XIcon, Plus } from 'lucide-react'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectComponent.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectComponent.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectComponent.tsx
rename to packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectComponent.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContent.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContent.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
rename to packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContent.tsx
index a60e6243..f140c2f1 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContent.tsx
+++ b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContent.tsx
@@ -3,7 +3,7 @@ import { forwardRef, useCallback, useEffect, useRef } from 'react'
 import { useMultiSelectContext } from './MultiSelectContext'
 import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { PopUp, type PopUpProps } from '../../layout/popup/PopUp'
+import { PopUp, type PopUpProps } from '../../layout/PopUp/PopUp'
 import { Input } from '../input/Input'
 import { Visibility } from '../../layout/Visibility'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContext.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContext.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectContext.tsx
rename to packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContext.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectOption.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
rename to packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectOption.tsx
index 03b20dd0..ddecd65e 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectOption.tsx
+++ b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectOption.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { CheckIcon } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../../visualization/Icon'
 import { ColoringUtils } from '../../../utils/coloring'
 import type React from 'react'
 import type { ForwardedRef, HTMLAttributes, RefObject } from 'react'
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectRoot.tsx
similarity index 99%
rename from packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
rename to packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectRoot.tsx
index 0063356b..95307a3f 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectRoot.tsx
+++ b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectRoot.tsx
@@ -5,7 +5,7 @@ import type { MultiSelectContextType, MultiSelectIconAppearance, MultiSelectOpti
 import { useMultiSelect } from './useMultiSelect'
 import { DOMUtils } from '../../../utils/dom'
 import type { InputInterface } from '../input/Input'
-import { PopUpContext } from '../../layout/popup/PopUpContext'
+import { PopUpContext } from '../../layout/PopUp/PopUpContext'
 
 export interface MultiSelectIds {
   trigger: string,
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectTrigger.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
rename to packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectTrigger.tsx
index e99d7a85..e7d91319 100644
--- a/packages/hightide-web/src/components/user-interaction/MultiSelect/MultiSelectTrigger.tsx
+++ b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectTrigger.tsx
@@ -4,7 +4,7 @@ import type { ComponentPropsWithoutRef, ForwardedRef, ReactNode } from 'react'
 import { forwardRef, useEffect, useRef } from 'react'
 import { useMultiSelectContext } from './MultiSelectContext'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
+import { ExpansionIcon } from '../../visualization/ExpansionIcon'
 import { MultiSelectOptionDisplayContext } from './MultiSelectOption'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/index.ts b/packages/hightide-web/src/components/data-input/MultiSelect/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/MultiSelect/index.ts
rename to packages/hightide-web/src/components/data-input/MultiSelect/index.ts
diff --git a/packages/hightide-web/src/components/user-interaction/MultiSelect/useMultiSelect.ts b/packages/hightide-web/src/components/data-input/MultiSelect/useMultiSelect.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/MultiSelect/useMultiSelect.ts
rename to packages/hightide-web/src/components/data-input/MultiSelect/useMultiSelect.ts
diff --git a/packages/hightide-web/src/components/user-interaction/Select/Select.tsx b/packages/hightide-web/src/components/data-input/Select/Select.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Select/Select.tsx
rename to packages/hightide-web/src/components/data-input/Select/Select.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectComponent.tsx b/packages/hightide-web/src/components/data-input/Select/SelectComponent.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Select/SelectComponent.tsx
rename to packages/hightide-web/src/components/data-input/Select/SelectComponent.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectContent.tsx b/packages/hightide-web/src/components/data-input/Select/SelectContent.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/Select/SelectContent.tsx
rename to packages/hightide-web/src/components/data-input/Select/SelectContent.tsx
index b7f4aec4..64b09242 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectContent.tsx
+++ b/packages/hightide-web/src/components/data-input/Select/SelectContent.tsx
@@ -3,7 +3,7 @@ import { forwardRef, useCallback, useEffect, useRef } from 'react'
 import { useSelectContext } from './SelectContext'
 import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { PopUp, type PopUpProps } from '../../layout/popup/PopUp'
+import { PopUp, type PopUpProps } from '../../layout/PopUp/PopUp'
 import { Input } from '../input/Input'
 import { Visibility } from '../../layout/Visibility'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectContext.tsx b/packages/hightide-web/src/components/data-input/Select/SelectContext.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Select/SelectContext.tsx
rename to packages/hightide-web/src/components/data-input/Select/SelectContext.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx b/packages/hightide-web/src/components/data-input/Select/SelectOption.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
rename to packages/hightide-web/src/components/data-input/Select/SelectOption.tsx
index ed4ec463..e96cac14 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectOption.tsx
+++ b/packages/hightide-web/src/components/data-input/Select/SelectOption.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { CheckIcon } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../../visualization/Icon'
 import { ColoringUtils } from '../../../utils/coloring'
 import type React from 'react'
 import type { ForwardedRef, HTMLAttributes, RefObject } from 'react'
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectRoot.tsx b/packages/hightide-web/src/components/data-input/Select/SelectRoot.tsx
similarity index 99%
rename from packages/hightide-web/src/components/user-interaction/Select/SelectRoot.tsx
rename to packages/hightide-web/src/components/data-input/Select/SelectRoot.tsx
index 2d0fbc93..60d57f76 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectRoot.tsx
+++ b/packages/hightide-web/src/components/data-input/Select/SelectRoot.tsx
@@ -6,7 +6,7 @@ import { useSelect } from './useSelect'
 import { DOMUtils } from '../../../utils/dom'
 import type { InputInterface } from '../input/Input'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
-import { PopUpContext } from '../../layout/popup/PopUpContext'
+import { PopUpContext } from '../../layout/PopUp/PopUpContext'
 
 export interface SelectIds {
   trigger: string,
diff --git a/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx b/packages/hightide-web/src/components/data-input/Select/SelectTrigger.tsx
similarity index 97%
rename from packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
rename to packages/hightide-web/src/components/data-input/Select/SelectTrigger.tsx
index 320112d1..969d5c48 100644
--- a/packages/hightide-web/src/components/user-interaction/Select/SelectTrigger.tsx
+++ b/packages/hightide-web/src/components/data-input/Select/SelectTrigger.tsx
@@ -5,7 +5,7 @@ import { forwardRef, useEffect, useRef } from 'react'
 import type { SelectOptionType } from './SelectContext'
 import { useSelectContext } from './SelectContext'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
+import { ExpansionIcon } from '../../visualization/ExpansionIcon'
 import { SelectOptionDisplayContext } from './SelectOption'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
diff --git a/packages/hightide-web/src/components/user-interaction/Select/index.ts b/packages/hightide-web/src/components/data-input/Select/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Select/index.ts
rename to packages/hightide-web/src/components/data-input/Select/index.ts
diff --git a/packages/hightide-web/src/components/user-interaction/Select/useSelect.ts b/packages/hightide-web/src/components/data-input/Select/useSelect.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Select/useSelect.ts
rename to packages/hightide-web/src/components/data-input/Select/useSelect.ts
diff --git a/packages/hightide-web/src/components/user-interaction/Switch.tsx b/packages/hightide-web/src/components/data-input/Switch.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Switch.tsx
rename to packages/hightide-web/src/components/data-input/Switch.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/Textarea.tsx b/packages/hightide-web/src/components/data-input/Textarea.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Textarea.tsx
rename to packages/hightide-web/src/components/data-input/Textarea.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/date/CalendarDatePicker.tsx b/packages/hightide-web/src/components/data-input/date/CalendarDatePicker.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/date/CalendarDatePicker.tsx
rename to packages/hightide-web/src/components/data-input/date/CalendarDatePicker.tsx
index a09cf888..8476021d 100644
--- a/packages/hightide-web/src/components/user-interaction/date/CalendarDatePicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/CalendarDatePicker.tsx
@@ -8,10 +8,10 @@ import { CalendarDayPicker } from './CalendarDayPicker'
 import type { YearMonthPickerProps } from './YearMonthPicker'
 import { YearMonthPicker } from './YearMonthPicker'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
-import { Button } from '../Button'
+import { Button } from '../../interaction/Button'
 import type { InputInterface } from '../input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
-import { IconButton } from '../IconButton'
+import { IconButton } from '../../interaction/IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
 type DisplayMode = 'yearMonth' | 'day' | 'time'
diff --git a/packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx b/packages/hightide-web/src/components/data-input/date/CalendarDayPicker.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/date/CalendarDayPicker.tsx
rename to packages/hightide-web/src/components/data-input/date/CalendarDayPicker.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateTimePicker.tsx b/packages/hightide-web/src/components/data-input/date/DateTimePicker.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/date/DateTimePicker.tsx
rename to packages/hightide-web/src/components/data-input/date/DateTimePicker.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateTimePickerDialog.tsx b/packages/hightide-web/src/components/data-input/date/DateTimePickerDialog.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/date/DateTimePickerDialog.tsx
rename to packages/hightide-web/src/components/data-input/date/DateTimePickerDialog.tsx
index efd8089f..1ef1aef2 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DateTimePickerDialog.tsx
+++ b/packages/hightide-web/src/components/data-input/date/DateTimePickerDialog.tsx
@@ -5,8 +5,8 @@ import type { HTMLAttributes } from 'react'
 import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react'
 
 import { Visibility } from '../../layout/Visibility'
-import { Button } from '../Button'
-import { IconButton } from '../IconButton'
+import { Button } from '../../interaction/Button'
+import { IconButton } from '../../interaction/IconButton'
 import { DateWheelPicker } from './DateWheelPicker'
 import { type DateTimeWheelPickerProps } from './DateTimeWheelPicker'
 import { TimeWheelPicker } from './TimeWheelPicker'
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateTimeWheelPicker.tsx b/packages/hightide-web/src/components/data-input/date/DateTimeWheelPicker.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/date/DateTimeWheelPicker.tsx
rename to packages/hightide-web/src/components/data-input/date/DateTimeWheelPicker.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/date/DateWheelPicker.tsx b/packages/hightide-web/src/components/data-input/date/DateWheelPicker.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/date/DateWheelPicker.tsx
rename to packages/hightide-web/src/components/data-input/date/DateWheelPicker.tsx
index 5c08f54d..d92a7e4e 100644
--- a/packages/hightide-web/src/components/user-interaction/date/DateWheelPicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/DateWheelPicker.tsx
@@ -5,7 +5,7 @@ import { useControlledState, useEventCallbackStabilizer } from '@helpwave/highti
 
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
 import type { InputInterface } from '../input/Input'
-import { WheelPicker } from '../WheelPicker'
+import { WheelPicker } from '../../interaction/WheelPicker'
 import type { WheelLoopingBehaviour } from './TimeWheelPicker'
 
 const defaultStart = DateUtils.subtractDuration(new Date(), { years: 100 })
diff --git a/packages/hightide-web/src/components/user-interaction/date/TimePicker.tsx b/packages/hightide-web/src/components/data-input/date/TimePicker.tsx
similarity index 99%
rename from packages/hightide-web/src/components/user-interaction/date/TimePicker.tsx
rename to packages/hightide-web/src/components/data-input/date/TimePicker.tsx
index daff8818..cd4610a3 100644
--- a/packages/hightide-web/src/components/user-interaction/date/TimePicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/TimePicker.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import { useEffect, useMemo, useRef } from 'react'
 import { closestMatch, range } from '@helpwave/hightide-utils/utils'
-import { Button } from '../Button'
+import { Button } from '../../interaction/Button'
 import type { InputInterface } from '../input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import type { DateTimePrecision } from '@helpwave/hightide-utils/utils'
diff --git a/packages/hightide-web/src/components/user-interaction/date/TimeWheelPicker.tsx b/packages/hightide-web/src/components/data-input/date/TimeWheelPicker.tsx
similarity index 99%
rename from packages/hightide-web/src/components/user-interaction/date/TimeWheelPicker.tsx
rename to packages/hightide-web/src/components/data-input/date/TimeWheelPicker.tsx
index 4246597e..b455e5d5 100644
--- a/packages/hightide-web/src/components/user-interaction/date/TimeWheelPicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/TimeWheelPicker.tsx
@@ -6,7 +6,7 @@ import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useDateTimeFormat } from '../../../global-contexts/localization/forward-exports'
 import type { InputInterface } from '../input/Input'
 import { Visibility } from '../../layout/Visibility'
-import { WheelPicker, type WheelPickerLoopEvent } from '../WheelPicker'
+import { WheelPicker, type WheelPickerLoopEvent } from '../../interaction/WheelPicker'
 import type {
   TimePickerMillisecondIncrement,
   TimePickerMinuteIncrement,
diff --git a/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx b/packages/hightide-web/src/components/data-input/date/YearMonthPicker.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx
rename to packages/hightide-web/src/components/data-input/date/YearMonthPicker.tsx
index 9ffc0e6d..f622a173 100644
--- a/packages/hightide-web/src/components/user-interaction/date/YearMonthPicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/YearMonthPicker.tsx
@@ -5,7 +5,7 @@ import { useControlledState, useEventCallbackStabilizer } from '@helpwave/highti
 
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
 import type { InputInterface } from '../input/Input'
-import { WheelPicker } from '../WheelPicker'
+import { WheelPicker } from '../../interaction/WheelPicker'
 
 const defaultStart = DateUtils.subtractDuration(new Date(), { years: 100 })
 const defaultEnd = DateUtils.addDuration(new Date(), { years: 100 })
diff --git a/packages/hightide-web/src/components/user-interaction/date/index.ts b/packages/hightide-web/src/components/data-input/date/index.ts
similarity index 91%
rename from packages/hightide-web/src/components/user-interaction/date/index.ts
rename to packages/hightide-web/src/components/data-input/date/index.ts
index fb5b8749..2c720a00 100644
--- a/packages/hightide-web/src/components/user-interaction/date/index.ts
+++ b/packages/hightide-web/src/components/data-input/date/index.ts
@@ -2,7 +2,6 @@ export * from './CalendarDatePicker'
 export * from './DateTimePicker'
 export * from './DateTimePickerDialog'
 export * from './CalendarDayPicker'
-export * from './TimeDisplay'
 export * from './DateTimeWheelPicker'
 export * from './DateWheelPicker'
 export * from './TimeWheelPicker'
diff --git a/packages/hightide-web/src/components/data-input/index.ts b/packages/hightide-web/src/components/data-input/index.ts
new file mode 100644
index 00000000..fdd97a2c
--- /dev/null
+++ b/packages/hightide-web/src/components/data-input/index.ts
@@ -0,0 +1,9 @@
+export * from './Checkbox'
+export * from './FileInput'
+export * from './LabelledCheckbox'
+export * from './MultiSelect'
+export * from './Select'
+export * from './Switch'
+export * from './Textarea'
+export * from './date'
+export * from './input'
diff --git a/packages/hightide-web/src/components/user-interaction/input/DateTimeField.tsx b/packages/hightide-web/src/components/data-input/input/DateTimeField.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/input/DateTimeField.tsx
rename to packages/hightide-web/src/components/data-input/input/DateTimeField.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx b/packages/hightide-web/src/components/data-input/input/DateTimeInput.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
rename to packages/hightide-web/src/components/data-input/input/DateTimeInput.tsx
index 115c7576..516133a9 100644
--- a/packages/hightide-web/src/components/user-interaction/input/DateTimeInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/DateTimeInput.tsx
@@ -9,8 +9,8 @@ import { Visibility } from '../../layout/Visibility'
 import type { InputInterface } from './Input'
 import { DateTimePickerDialog } from '../date/DateTimePickerDialog'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
-import { PopUp } from '../../layout/popup/PopUp'
-import { IconButton } from '../IconButton'
+import { PopUp } from '../../layout/PopUp/PopUp'
+import { IconButton } from '../../interaction/IconButton'
 import { DateUtils, type DateTimeFormat } from '@helpwave/hightide-utils/utils'
 import { DateTimeField } from './DateTimeField'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
diff --git a/packages/hightide-web/src/components/user-interaction/input/FlexibleDateTimeInput.tsx b/packages/hightide-web/src/components/data-input/input/FlexibleDateTimeInput.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/input/FlexibleDateTimeInput.tsx
rename to packages/hightide-web/src/components/data-input/input/FlexibleDateTimeInput.tsx
index 50794c17..cc21deea 100644
--- a/packages/hightide-web/src/components/user-interaction/input/FlexibleDateTimeInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/FlexibleDateTimeInput.tsx
@@ -3,7 +3,7 @@ import { ClockFading, ClockPlus } from 'lucide-react'
 import { DateUtils, type DateTimeFormat } from '@helpwave/hightide-utils/utils'
 import { DateTimeInput, type DateTimeInputProps } from './DateTimeInput'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
-import { IconButton } from '../IconButton'
+import { IconButton } from '../../interaction/IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
 
diff --git a/packages/hightide-web/src/components/user-interaction/input/Input.tsx b/packages/hightide-web/src/components/data-input/input/Input.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/input/Input.tsx
rename to packages/hightide-web/src/components/data-input/input/Input.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/input/InsideLabelInput.tsx b/packages/hightide-web/src/components/data-input/input/InsideLabelInput.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/input/InsideLabelInput.tsx
rename to packages/hightide-web/src/components/data-input/input/InsideLabelInput.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx b/packages/hightide-web/src/components/data-input/input/NumberInput.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/input/NumberInput.tsx
rename to packages/hightide-web/src/components/data-input/input/NumberInput.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx b/packages/hightide-web/src/components/data-input/input/NumberStepperInput.tsx
similarity index 99%
rename from packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
rename to packages/hightide-web/src/components/data-input/input/NumberStepperInput.tsx
index 94743b19..8c2c1eea 100644
--- a/packages/hightide-web/src/components/user-interaction/input/NumberStepperInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/NumberStepperInput.tsx
@@ -2,7 +2,7 @@ import type { InputHTMLAttributes } from 'react'
 import { forwardRef, useCallback, useRef } from 'react'
 import clsx from 'clsx'
 import { Minus, Plus } from 'lucide-react'
-import { IconButton } from '../IconButton'
+import { IconButton } from '../../interaction/IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import type { InputInterface } from './Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
diff --git a/packages/hightide-web/src/components/user-interaction/input/SearchBar.tsx b/packages/hightide-web/src/components/data-input/input/SearchBar.tsx
similarity index 91%
rename from packages/hightide-web/src/components/user-interaction/input/SearchBar.tsx
rename to packages/hightide-web/src/components/data-input/input/SearchBar.tsx
index 9fcbd782..963cd946 100644
--- a/packages/hightide-web/src/components/user-interaction/input/SearchBar.tsx
+++ b/packages/hightide-web/src/components/data-input/input/SearchBar.tsx
@@ -1,12 +1,12 @@
 import type { InputProps } from './Input'
 import { Input } from './Input'
 import { Search } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../../visualization/Icon'
 import { clsx } from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import type { HTMLAttributes } from 'react'
-import type { IconButtonProps } from '../IconButton'
-import { IconButton } from '../IconButton'
+import type { IconButtonProps } from '../../interaction/IconButton'
+import { IconButton } from '../../interaction/IconButton'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
 export type SearchBarProps = Omit<InputProps, 'onValueChange' | 'onEditComplete'> & {
diff --git a/packages/hightide-web/src/components/user-interaction/input/ToggleableInput.tsx b/packages/hightide-web/src/components/data-input/input/ToggleableInput.tsx
similarity index 97%
rename from packages/hightide-web/src/components/user-interaction/input/ToggleableInput.tsx
rename to packages/hightide-web/src/components/data-input/input/ToggleableInput.tsx
index 35ba8729..30dd8101 100644
--- a/packages/hightide-web/src/components/user-interaction/input/ToggleableInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/ToggleableInput.tsx
@@ -1,6 +1,6 @@
 import { forwardRef, useEffect, useRef, useState } from 'react'
 import { Pencil } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../../visualization/Icon'
 import clsx from 'clsx'
 import type { EditCompleteOptions, InputProps } from './Input'
 import { Input } from './Input'
diff --git a/packages/hightide-web/src/components/user-interaction/input/dateTimeSegments.ts b/packages/hightide-web/src/components/data-input/input/dateTimeSegments.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/input/dateTimeSegments.ts
rename to packages/hightide-web/src/components/data-input/input/dateTimeSegments.ts
diff --git a/packages/hightide-web/src/components/user-interaction/input/index.ts b/packages/hightide-web/src/components/data-input/input/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/input/index.ts
rename to packages/hightide-web/src/components/data-input/input/index.ts
diff --git a/packages/hightide-web/src/components/index.ts b/packages/hightide-web/src/components/index.ts
index 69827bb7..9331706d 100644
--- a/packages/hightide-web/src/components/index.ts
+++ b/packages/hightide-web/src/components/index.ts
@@ -1,8 +1,7 @@
 export * from './branding'
 export * from './chat'
-export * from './display-and-visualization'
-export * from './form'
+export * from './data-input'
+export * from './interaction'
 export * from './layout'
-export * from './list'
-export * from './user-interaction'
-export * from './utils'
+export * from './properties'
+export * from './visualization'
diff --git a/packages/hightide-web/src/components/user-interaction/Button.tsx b/packages/hightide-web/src/components/interaction/Button.tsx
similarity index 91%
rename from packages/hightide-web/src/components/user-interaction/Button.tsx
rename to packages/hightide-web/src/components/interaction/Button.tsx
index e0780e08..fb28f81f 100644
--- a/packages/hightide-web/src/components/user-interaction/Button.tsx
+++ b/packages/hightide-web/src/components/interaction/Button.tsx
@@ -2,9 +2,9 @@ import clsx from 'clsx'
 import type { ElementType } from 'react'
 import { forwardRef } from 'react'
 
-import type { IconSize } from '../display-and-visualization/Icon'
-import { Icon } from '../display-and-visualization/Icon'
-import { LoadingSpinner } from '../layout/loading/LoadingSpinner'
+import type { IconSize } from '../visualization/Icon'
+import { Icon } from '../visualization/Icon'
+import { LoadingSpinner } from '../visualization/LoadingSpinner'
 import type { ButtonVariant, PressableProps } from './Pressable'
 import { buttonColorForVariant, mapButtonVariant, Pressable } from './Pressable'
 
diff --git a/packages/hightide-web/src/components/user-interaction/Combobox/Combobox.tsx b/packages/hightide-web/src/components/interaction/Combobox/Combobox.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Combobox/Combobox.tsx
rename to packages/hightide-web/src/components/interaction/Combobox/Combobox.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxContext.tsx b/packages/hightide-web/src/components/interaction/Combobox/ComboboxContext.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Combobox/ComboboxContext.tsx
rename to packages/hightide-web/src/components/interaction/Combobox/ComboboxContext.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxInput.tsx b/packages/hightide-web/src/components/interaction/Combobox/ComboboxInput.tsx
similarity index 97%
rename from packages/hightide-web/src/components/user-interaction/Combobox/ComboboxInput.tsx
rename to packages/hightide-web/src/components/interaction/Combobox/ComboboxInput.tsx
index 08fdbc0c..ca9e1a98 100644
--- a/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxInput.tsx
+++ b/packages/hightide-web/src/components/interaction/Combobox/ComboboxInput.tsx
@@ -1,5 +1,5 @@
 import { type ComponentProps, forwardRef, useCallback } from 'react'
-import { Input } from '../input/Input'
+import { Input } from '../../data-input/input/Input'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { useComboboxContext } from './ComboboxContext'
 
diff --git a/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxList.tsx b/packages/hightide-web/src/components/interaction/Combobox/ComboboxList.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Combobox/ComboboxList.tsx
rename to packages/hightide-web/src/components/interaction/Combobox/ComboboxList.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxOption.tsx b/packages/hightide-web/src/components/interaction/Combobox/ComboboxOption.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Combobox/ComboboxOption.tsx
rename to packages/hightide-web/src/components/interaction/Combobox/ComboboxOption.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/Combobox/ComboboxRoot.tsx b/packages/hightide-web/src/components/interaction/Combobox/ComboboxRoot.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Combobox/ComboboxRoot.tsx
rename to packages/hightide-web/src/components/interaction/Combobox/ComboboxRoot.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/Combobox/index.ts b/packages/hightide-web/src/components/interaction/Combobox/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Combobox/index.ts
rename to packages/hightide-web/src/components/interaction/Combobox/index.ts
diff --git a/packages/hightide-web/src/components/user-interaction/Combobox/useCombobox.ts b/packages/hightide-web/src/components/interaction/Combobox/useCombobox.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/Combobox/useCombobox.ts
rename to packages/hightide-web/src/components/interaction/Combobox/useCombobox.ts
diff --git a/packages/hightide-web/src/components/user-interaction/CopyToClipboardWrapper.tsx b/packages/hightide-web/src/components/interaction/CopyToClipboardWrapper.tsx
similarity index 97%
rename from packages/hightide-web/src/components/user-interaction/CopyToClipboardWrapper.tsx
rename to packages/hightide-web/src/components/interaction/CopyToClipboardWrapper.tsx
index cd17ec4e..e786dc42 100644
--- a/packages/hightide-web/src/components/user-interaction/CopyToClipboardWrapper.tsx
+++ b/packages/hightide-web/src/components/interaction/CopyToClipboardWrapper.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { clsx } from 'clsx'
 import { writeToClipboard } from '../../utils/writeToClipboard'
 import { CheckIcon, Copy } from 'lucide-react'
-import { Icon } from '../display-and-visualization/Icon'
+import { Icon } from '../visualization/Icon'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { TooltipDisplay, TooltipRoot, TooltipTrigger, type TooltipProps } from './Tooltip'
 
diff --git a/packages/hightide-web/src/components/utils/FocusTrap.tsx b/packages/hightide-web/src/components/interaction/FocusTrap.tsx
similarity index 100%
rename from packages/hightide-web/src/components/utils/FocusTrap.tsx
rename to packages/hightide-web/src/components/interaction/FocusTrap.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/IconButton.tsx b/packages/hightide-web/src/components/interaction/IconButton.tsx
similarity index 97%
rename from packages/hightide-web/src/components/user-interaction/IconButton.tsx
rename to packages/hightide-web/src/components/interaction/IconButton.tsx
index 6c45e15b..ca14ee74 100644
--- a/packages/hightide-web/src/components/user-interaction/IconButton.tsx
+++ b/packages/hightide-web/src/components/interaction/IconButton.tsx
@@ -1,12 +1,12 @@
 import type { ElementType, ForwardedRef, ReactNode } from 'react'
 import { forwardRef,type ButtonHTMLAttributes } from 'react'
-import { Icon } from '../display-and-visualization/Icon'
+import { Icon } from '../visualization/Icon'
 import type { ButtonColor, IconButtonVariant } from './Pressable'
 import { buttonColorForVariant, coloringColorName, ColoringUtils, mapButtonVariant } from './Pressable'
 import type { TooltipDisplayProps } from './Tooltip'
 import { TooltipContext, TooltipDisplay, TooltipRoot, useTooltip } from './Tooltip'
 import { Visibility } from '../layout/Visibility'
-import { LoadingSpinner } from '../layout/loading/LoadingSpinner'
+import { LoadingSpinner } from '../visualization/LoadingSpinner'
 import { useLogOnce } from '@helpwave/hightide-utils/hooks'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import clsx from 'clsx'
diff --git a/packages/hightide-web/src/components/user-interaction/Menu.tsx b/packages/hightide-web/src/components/interaction/Menu.tsx
similarity index 95%
rename from packages/hightide-web/src/components/user-interaction/Menu.tsx
rename to packages/hightide-web/src/components/interaction/Menu.tsx
index 6f484eba..05378da4 100644
--- a/packages/hightide-web/src/components/user-interaction/Menu.tsx
+++ b/packages/hightide-web/src/components/interaction/Menu.tsx
@@ -1,8 +1,8 @@
 import { type PropsWithChildren, type ReactNode, useCallback, useRef, useState } from 'react'
 import clsx from 'clsx'
 import { BagFunctionUtil } from '@helpwave/hightide-utils/utils'
-import type { PopUpProps } from '../layout/popup/PopUp'
-import { PopUp } from '../layout/popup/PopUp'
+import type { PopUpProps } from '../layout/PopUp/PopUp'
+import { PopUp } from '../layout/PopUp/PopUp'
 
 export type MenuItemProps = {
   onClick?: () => void,
diff --git a/packages/hightide-web/src/components/user-interaction/Pressable.tsx b/packages/hightide-web/src/components/interaction/Pressable.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/Pressable.tsx
rename to packages/hightide-web/src/components/interaction/Pressable.tsx
index ab6fd1f3..055afbad 100644
--- a/packages/hightide-web/src/components/user-interaction/Pressable.tsx
+++ b/packages/hightide-web/src/components/interaction/Pressable.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import type { ButtonHTMLAttributes } from 'react'
 import { forwardRef } from 'react'
 
-import { LoadingSpinner } from '../layout/loading/LoadingSpinner'
+import { LoadingSpinner } from '../visualization/LoadingSpinner'
 import type { ColoringColor, ColoringColorVariant, ColoringStyle } from '../../utils/coloring'
 import { ColoringUtils } from '../../utils/coloring'
 
diff --git a/packages/hightide-web/src/components/layout/TabSwitcher.tsx b/packages/hightide-web/src/components/interaction/TabSwitcher.tsx
similarity index 99%
rename from packages/hightide-web/src/components/layout/TabSwitcher.tsx
rename to packages/hightide-web/src/components/interaction/TabSwitcher.tsx
index 479c1d9f..7eba8eb6 100644
--- a/packages/hightide-web/src/components/layout/TabSwitcher.tsx
+++ b/packages/hightide-web/src/components/interaction/TabSwitcher.tsx
@@ -4,7 +4,7 @@ import { createContext, useContext, useEffect, useRef } from 'react'
 import clsx from 'clsx'
 import { resolveSetState } from '@helpwave/hightide-utils/utils'
 import { createPortal } from 'react-dom'
-import { Visibility } from './Visibility'
+import { Visibility } from '../layout/Visibility'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { ColoringUtils, PropsUtil } from '../../utils'
 
diff --git a/packages/hightide-web/src/components/user-interaction/Tooltip.tsx b/packages/hightide-web/src/components/interaction/Tooltip.tsx
similarity index 99%
rename from packages/hightide-web/src/components/user-interaction/Tooltip.tsx
rename to packages/hightide-web/src/components/interaction/Tooltip.tsx
index 99df60e1..b81c52b4 100644
--- a/packages/hightide-web/src/components/user-interaction/Tooltip.tsx
+++ b/packages/hightide-web/src/components/interaction/Tooltip.tsx
@@ -8,7 +8,7 @@ import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
 import { useTransitionState } from '../../hooks/useTransitionState'
 import type { TooltipConfig } from '../../global-contexts/hightide-config/HightideConfigContext'
 import { useHightideConfig } from '../../global-contexts/hightide-config/HightideConfigContext'
-import { Portal } from '../utils/Portal'
+import { Portal } from '../layout/Portal'
 import type { AnchoredFloatingContainerProps } from '../layout/AnchoredFloatingContainer'
 import { AnchoredFloatingContainer } from '../layout/AnchoredFloatingContainer'
 import { createContext } from 'react'
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPicker.tsx b/packages/hightide-web/src/components/interaction/WheelPicker/WheelPicker.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPicker.tsx
rename to packages/hightide-web/src/components/interaction/WheelPicker/WheelPicker.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerBar.tsx b/packages/hightide-web/src/components/interaction/WheelPicker/WheelPickerBar.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerBar.tsx
rename to packages/hightide-web/src/components/interaction/WheelPicker/WheelPickerBar.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerContext.tsx b/packages/hightide-web/src/components/interaction/WheelPicker/WheelPickerContext.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerContext.tsx
rename to packages/hightide-web/src/components/interaction/WheelPicker/WheelPickerContext.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerOption.tsx b/packages/hightide-web/src/components/interaction/WheelPicker/WheelPickerOption.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerOption.tsx
rename to packages/hightide-web/src/components/interaction/WheelPicker/WheelPickerOption.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx b/packages/hightide-web/src/components/interaction/WheelPicker/WheelPickerRoot.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/WheelPicker/WheelPickerRoot.tsx
rename to packages/hightide-web/src/components/interaction/WheelPicker/WheelPickerRoot.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/WheelPicker/index.ts b/packages/hightide-web/src/components/interaction/WheelPicker/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/WheelPicker/index.ts
rename to packages/hightide-web/src/components/interaction/WheelPicker/index.ts
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx b/packages/hightide-web/src/components/interaction/data/FilterList.tsx
similarity index 97%
rename from packages/hightide-web/src/components/user-interaction/data/FilterList.tsx
rename to packages/hightide-web/src/components/interaction/data/FilterList.tsx
index d64bfd1d..e46ff87a 100644
--- a/packages/hightide-web/src/components/user-interaction/data/FilterList.tsx
+++ b/packages/hightide-web/src/components/interaction/data/FilterList.tsx
@@ -5,15 +5,15 @@ import { FilterValueUtils, useFilterValueTranslation } from './filter-function'
 import { DataTypeUtils, type DataType } from './data-types'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { PlusIcon } from 'lucide-react'
-import { PopUpRoot } from '../../layout/popup/PopUpRoot'
-import { PopUp } from '../../layout/popup/PopUp'
-import { PopUpOpener } from '../../layout/popup/PopUpOpener'
+import { PopUpRoot } from '../../layout/PopUp/PopUpRoot'
+import { PopUp } from '../../layout/PopUp/PopUp'
+import { PopUpOpener } from '../../layout/PopUp/PopUpOpener'
 import { Button } from '../Button'
 import { Pressable } from '../Pressable'
 import { FilterPopUp } from './FilterPopUp'
 import { Combobox } from '../Combobox/Combobox'
 import { ComboboxOption } from '../Combobox/ComboboxOption'
-import { PopUpContext } from '../../layout/popup/PopUpContext'
+import { PopUpContext } from '../../layout/PopUp/PopUpContext'
 import type { FilterOperator } from './FilterOperator'
 import { FilterOperatorUtils } from './FilterOperator'
 import type { ColumnFilter } from '@tanstack/react-table'
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterOperator.tsx b/packages/hightide-web/src/components/interaction/data/FilterOperator.tsx
similarity index 99%
rename from packages/hightide-web/src/components/user-interaction/data/FilterOperator.tsx
rename to packages/hightide-web/src/components/interaction/data/FilterOperator.tsx
index 23b2439b..26b98b08 100644
--- a/packages/hightide-web/src/components/user-interaction/data/FilterOperator.tsx
+++ b/packages/hightide-web/src/components/interaction/data/FilterOperator.tsx
@@ -10,7 +10,7 @@ import {
   CircleDashed,
   CircleDot
 } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../../visualization/Icon'
 import type { DataType } from './data-types'
 import type { ReactNode } from 'react'
 
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterOperatorLabel.tsx b/packages/hightide-web/src/components/interaction/data/FilterOperatorLabel.tsx
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/data/FilterOperatorLabel.tsx
rename to packages/hightide-web/src/components/interaction/data/FilterOperatorLabel.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx b/packages/hightide-web/src/components/interaction/data/FilterPopUp.tsx
similarity index 98%
rename from packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
rename to packages/hightide-web/src/components/interaction/data/FilterPopUp.tsx
index f6ef5c8a..fda5f5e8 100644
--- a/packages/hightide-web/src/components/user-interaction/data/FilterPopUp.tsx
+++ b/packages/hightide-web/src/components/interaction/data/FilterPopUp.tsx
@@ -2,16 +2,16 @@ import { useHightideTranslation } from '@helpwave/hightide-utils/context/transla
 import { Visibility } from '../../layout/Visibility'
 import { IconButton } from '../IconButton'
 import { Check, TrashIcon } from 'lucide-react'
-import { PopUp, type PopUpProps } from '../../layout/popup/PopUp'
+import { PopUp, type PopUpProps } from '../../layout/PopUp/PopUp'
 import type { FilterValue } from './filter-function'
 import type { FilterOperator } from './FilterOperator'
 import { FilterOperatorUtils } from './FilterOperator'
 import type { ReactNode } from 'react'
 import { forwardRef, useEffect, useId, useMemo, useState } from 'react'
-import { Select } from '../Select/Select'
-import { Input } from '../input/Input'
-import { DateTimeInput } from '../input/DateTimeInput'
-import { MultiSelect } from '../MultiSelect/MultiSelect'
+import { Select } from '../../data-input/Select/Select'
+import { Input } from '../../data-input/input/Input'
+import { DateTimeInput } from '../../data-input/input/DateTimeInput'
+import { MultiSelect } from '../../data-input/MultiSelect/MultiSelect'
 import type { DataType } from './data-types'
 import clsx from 'clsx'
 import { FilterOperatorLabel } from './FilterOperatorLabel'
diff --git a/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx b/packages/hightide-web/src/components/interaction/data/SortingList.tsx
similarity index 95%
rename from packages/hightide-web/src/components/user-interaction/data/SortingList.tsx
rename to packages/hightide-web/src/components/interaction/data/SortingList.tsx
index a8c47d11..2e1b8a6f 100644
--- a/packages/hightide-web/src/components/user-interaction/data/SortingList.tsx
+++ b/packages/hightide-web/src/components/interaction/data/SortingList.tsx
@@ -3,15 +3,15 @@ import type { ColumnSort } from '@tanstack/react-table'
 import { DataTypeUtils, type DataType } from './data-types'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { ArrowDownWideNarrow, ArrowUpNarrowWide, PlusIcon, TrashIcon, XIcon } from 'lucide-react'
-import { PopUpRoot } from '../../layout/popup/PopUpRoot'
-import { PopUp } from '../../layout/popup/PopUp'
-import { PopUpOpener } from '../../layout/popup/PopUpOpener'
-import { Icon } from '../../display-and-visualization/Icon'
+import { PopUpRoot } from '../../layout/PopUp/PopUpRoot'
+import { PopUp } from '../../layout/PopUp/PopUp'
+import { PopUpOpener } from '../../layout/PopUp/PopUpOpener'
+import { Icon } from '../../visualization/Icon'
 import { Button } from '../Button'
 import { Pressable } from '../Pressable'
 import { Combobox } from '../Combobox/Combobox'
 import { ComboboxOption } from '../Combobox/ComboboxOption'
-import { PopUpContext } from '../../layout/popup/PopUpContext'
+import { PopUpContext } from '../../layout/PopUp/PopUpContext'
 import { IconButton } from '../IconButton'
 import clsx from 'clsx'
 
diff --git a/packages/hightide-web/src/components/user-interaction/data/data-types.tsx b/packages/hightide-web/src/components/interaction/data/data-types.tsx
similarity index 96%
rename from packages/hightide-web/src/components/user-interaction/data/data-types.tsx
rename to packages/hightide-web/src/components/interaction/data/data-types.tsx
index 55666808..cd1568da 100644
--- a/packages/hightide-web/src/components/user-interaction/data/data-types.tsx
+++ b/packages/hightide-web/src/components/interaction/data/data-types.tsx
@@ -1,5 +1,5 @@
 import { Binary, Calendar, CalendarClock, Check, Database, Tag, Tags, TextIcon } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../../visualization/Icon'
 import type { ReactNode } from 'react'
 
 const dataTypes = [
diff --git a/packages/hightide-web/src/components/user-interaction/data/filter-function.ts b/packages/hightide-web/src/components/interaction/data/filter-function.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/data/filter-function.ts
rename to packages/hightide-web/src/components/interaction/data/filter-function.ts
diff --git a/packages/hightide-web/src/components/user-interaction/data/index.ts b/packages/hightide-web/src/components/interaction/data/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/data/index.ts
rename to packages/hightide-web/src/components/interaction/data/index.ts
diff --git a/packages/hightide-web/src/components/interaction/index.ts b/packages/hightide-web/src/components/interaction/index.ts
new file mode 100644
index 00000000..f20efbaa
--- /dev/null
+++ b/packages/hightide-web/src/components/interaction/index.ts
@@ -0,0 +1,13 @@
+export * from './Button'
+export * from './Combobox'
+export * from './CopyToClipboardWrapper'
+export * from './FocusTrap'
+export * from './IconButton'
+export * from './Menu'
+export * from './Pressable'
+export * from './TabSwitcher'
+export * from './Tooltip'
+export * from './WheelPicker'
+export * from './data'
+export * from './list'
+export * from './navigation'
diff --git a/packages/hightide-web/src/components/list/ListActionItem.tsx b/packages/hightide-web/src/components/interaction/list/ListActionItem.tsx
similarity index 83%
rename from packages/hightide-web/src/components/list/ListActionItem.tsx
rename to packages/hightide-web/src/components/interaction/list/ListActionItem.tsx
index 5bf5a186..bf31cb6f 100644
--- a/packages/hightide-web/src/components/list/ListActionItem.tsx
+++ b/packages/hightide-web/src/components/interaction/list/ListActionItem.tsx
@@ -1,10 +1,10 @@
 import type { ButtonHTMLAttributes } from 'react'
 import clsx from 'clsx'
 
-import { ColoringUtils } from '../../utils/coloring'
-import { PropsUtil } from '../../utils/propsUtil'
-import { ListItemContent } from './ListItemContent'
-import type { ListItemColor, ListItemContentOrder, ListItemContentProps } from './ListItemTypes'
+import { ColoringUtils } from '../../../utils/coloring'
+import { PropsUtil } from '../../../utils/propsUtil'
+import { ListItemContent } from '../../layout/list/ListItemContent'
+import type { ListItemColor, ListItemContentOrder, ListItemContentProps } from '../../layout/list/ListItemTypes'
 
 export type ListActionItemProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'title' | 'content' | 'color'> & Omit<ListItemContentProps, 'contentOrder'> & {
   contentOrder?: ListItemContentOrder,
diff --git a/packages/hightide-web/src/components/list/ListNavigationItem.tsx b/packages/hightide-web/src/components/interaction/list/ListNavigationItem.tsx
similarity index 91%
rename from packages/hightide-web/src/components/list/ListNavigationItem.tsx
rename to packages/hightide-web/src/components/interaction/list/ListNavigationItem.tsx
index b6c98721..09e30367 100644
--- a/packages/hightide-web/src/components/list/ListNavigationItem.tsx
+++ b/packages/hightide-web/src/components/interaction/list/ListNavigationItem.tsx
@@ -1,11 +1,11 @@
 import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, MouseEvent, ReactNode } from 'react'
 import clsx from 'clsx'
 import { ChevronRight, ExternalLink } from 'lucide-react'
-import { Icon } from '../display-and-visualization/Icon'
-import { ColoringUtils } from '../../utils/coloring'
-import { PropsUtil } from '../../utils/propsUtil'
-import { ListItemContent } from './ListItemContent'
-import type { ListItemColor, ListItemContentOrder } from './ListItemTypes'
+import { Icon } from '../../visualization/Icon'
+import { ColoringUtils } from '../../../utils/coloring'
+import { PropsUtil } from '../../../utils/propsUtil'
+import { ListItemContent } from '../../layout/list/ListItemContent'
+import type { ListItemColor, ListItemContentOrder } from '../../layout/list/ListItemTypes'
 
 export type ListNavigationLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   href: string,
diff --git a/packages/hightide-web/src/components/list/index.ts b/packages/hightide-web/src/components/interaction/list/index.ts
similarity index 61%
rename from packages/hightide-web/src/components/list/index.ts
rename to packages/hightide-web/src/components/interaction/list/index.ts
index 4005bfaa..632ce172 100644
--- a/packages/hightide-web/src/components/list/index.ts
+++ b/packages/hightide-web/src/components/interaction/list/index.ts
@@ -1,7 +1,4 @@
 export { ListActionItem } from './ListActionItem'
 export type { ListActionItemProps } from './ListActionItem'
-export { ListItem } from './ListItem'
-export type { ListItemProps } from './ListItem'
 export { ListNavigationItem } from './ListNavigationItem'
 export type { ListNavigationItemProps, ListNavigationLinkProps } from './ListNavigationItem'
-export type { ListItemColor, ListItemContentOrder } from './ListItemTypes'
diff --git a/packages/hightide-web/src/components/layout/navigation/BreadCrumbs.tsx b/packages/hightide-web/src/components/interaction/navigation/BreadCrumbs.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/navigation/BreadCrumbs.tsx
rename to packages/hightide-web/src/components/interaction/navigation/BreadCrumbs.tsx
diff --git a/packages/hightide-web/src/components/layout/navigation/Navigation.tsx b/packages/hightide-web/src/components/interaction/navigation/Navigation.tsx
similarity index 97%
rename from packages/hightide-web/src/components/layout/navigation/Navigation.tsx
rename to packages/hightide-web/src/components/interaction/navigation/Navigation.tsx
index b1104307..c002f356 100644
--- a/packages/hightide-web/src/components/layout/navigation/Navigation.tsx
+++ b/packages/hightide-web/src/components/interaction/navigation/Navigation.tsx
@@ -5,11 +5,11 @@ import React, { useCallback, useId, useRef, useState } from 'react'
 import clsx from 'clsx'
 import type { UseAnchoredPositionOptions } from '../../../hooks/useAnchoredPosition'
 import { useAnchoredPosition } from '../../../hooks/useAnchoredPosition'
-import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
+import { ExpansionIcon } from '../../visualization/ExpansionIcon'
 import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { Icon } from '../../display-and-visualization/Icon'
-import { IconButton } from '../../user-interaction/IconButton'
+import { Icon } from '../../visualization/Icon'
+import { IconButton } from '../IconButton'
 
 type SimpleNavigationItem = {
   label: ReactNode,
diff --git a/packages/hightide-web/src/components/layout/navigation/Pagination.tsx b/packages/hightide-web/src/components/interaction/navigation/Pagination.tsx
similarity index 96%
rename from packages/hightide-web/src/components/layout/navigation/Pagination.tsx
rename to packages/hightide-web/src/components/interaction/navigation/Pagination.tsx
index 83402e2b..b5e68101 100644
--- a/packages/hightide-web/src/components/layout/navigation/Pagination.tsx
+++ b/packages/hightide-web/src/components/interaction/navigation/Pagination.tsx
@@ -1,11 +1,11 @@
 import { ChevronFirst, ChevronLast, ChevronLeft, ChevronRight } from 'lucide-react'
 import clsx from 'clsx'
-import { Input } from '../../user-interaction/input/Input'
+import { Input } from '../../data-input/input/Input'
 import { MathUtil } from '@helpwave/hightide-utils/utils'
 import type { HTMLAttributes } from 'react'
 import { useEffect, useState } from 'react'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { IconButton } from '../../user-interaction/IconButton'
+import { IconButton } from '../IconButton'
 
 export interface PaginationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   pageIndex: number,
diff --git a/packages/hightide-web/src/components/layout/navigation/StepperBar.tsx b/packages/hightide-web/src/components/interaction/navigation/StepperBar.tsx
similarity index 98%
rename from packages/hightide-web/src/components/layout/navigation/StepperBar.tsx
rename to packages/hightide-web/src/components/interaction/navigation/StepperBar.tsx
index 7bd7e5dc..437b8ef6 100644
--- a/packages/hightide-web/src/components/layout/navigation/StepperBar.tsx
+++ b/packages/hightide-web/src/components/interaction/navigation/StepperBar.tsx
@@ -1,7 +1,7 @@
 import { Check, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { range } from '@helpwave/hightide-utils/utils'
-import { Button } from '../../user-interaction/Button'
+import { Button } from '../Button'
 import clsx from 'clsx'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
diff --git a/packages/hightide-web/src/components/layout/navigation/index.ts b/packages/hightide-web/src/components/interaction/navigation/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/navigation/index.ts
rename to packages/hightide-web/src/components/interaction/navigation/index.ts
diff --git a/packages/hightide-web/src/components/layout/navigation/navigation-menus/NavigationContext.tsx b/packages/hightide-web/src/components/interaction/navigation/navigation-menus/NavigationContext.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/navigation/navigation-menus/NavigationContext.tsx
rename to packages/hightide-web/src/components/interaction/navigation/navigation-menus/NavigationContext.tsx
diff --git a/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenu.tsx b/packages/hightide-web/src/components/interaction/navigation/navigation-menus/VerticalNavigationMenu.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenu.tsx
rename to packages/hightide-web/src/components/interaction/navigation/navigation-menus/VerticalNavigationMenu.tsx
diff --git a/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx b/packages/hightide-web/src/components/interaction/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
similarity index 95%
rename from packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
rename to packages/hightide-web/src/components/interaction/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
index 1ce63368..615df072 100644
--- a/packages/hightide-web/src/components/layout/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
+++ b/packages/hightide-web/src/components/interaction/navigation/navigation-menus/VerticalNavigationMenuItem.tsx
@@ -1,8 +1,8 @@
 import type { ElementType, HTMLAttributeAnchorTarget, ReactNode } from 'react'
 import { useId } from 'react'
 import { ExternalLink } from 'lucide-react'
-import { Icon } from '../../../display-and-visualization/Icon'
-import { ExpansionIcon } from '../../../display-and-visualization/ExpansionIcon'
+import { Icon } from '../../../visualization/Icon'
+import { ExpansionIcon } from '../../../visualization/ExpansionIcon'
 import { useNavigationItem } from './NavigationContext'
 import type { NavigationItemData } from './types'
 
diff --git a/packages/hightide-web/src/components/layout/navigation/navigation-menus/index.ts b/packages/hightide-web/src/components/interaction/navigation/navigation-menus/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/navigation/navigation-menus/index.ts
rename to packages/hightide-web/src/components/interaction/navigation/navigation-menus/index.ts
diff --git a/packages/hightide-web/src/components/layout/navigation/navigation-menus/types.ts b/packages/hightide-web/src/components/interaction/navigation/navigation-menus/types.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/navigation/navigation-menus/types.ts
rename to packages/hightide-web/src/components/interaction/navigation/navigation-menus/types.ts
diff --git a/packages/hightide-web/src/components/display-and-visualization/Card.tsx b/packages/hightide-web/src/components/layout/Card.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Card.tsx
rename to packages/hightide-web/src/components/layout/Card.tsx
diff --git a/packages/hightide-web/src/components/layout/Carousel/CarouselArrows.tsx b/packages/hightide-web/src/components/layout/Carousel/CarouselArrows.tsx
index 862612c4..c9a115d9 100644
--- a/packages/hightide-web/src/components/layout/Carousel/CarouselArrows.tsx
+++ b/packages/hightide-web/src/components/layout/Carousel/CarouselArrows.tsx
@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'react'
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
-import { IconButton } from '../../user-interaction/IconButton'
+import { IconButton } from '../../interaction/IconButton'
 import { useCarouselContext } from './CarouselContext'
 
 export type CarouselArrowsProps = HTMLAttributes<HTMLDivElement>
diff --git a/packages/hightide-web/src/components/layout/drawer/Drawer.tsx b/packages/hightide-web/src/components/layout/Drawer/Drawer.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/drawer/Drawer.tsx
rename to packages/hightide-web/src/components/layout/Drawer/Drawer.tsx
diff --git a/packages/hightide-web/src/components/layout/drawer/DrawerCloseButton.tsx b/packages/hightide-web/src/components/layout/Drawer/DrawerCloseButton.tsx
similarity index 84%
rename from packages/hightide-web/src/components/layout/drawer/DrawerCloseButton.tsx
rename to packages/hightide-web/src/components/layout/Drawer/DrawerCloseButton.tsx
index 8e228349..064f3fa2 100644
--- a/packages/hightide-web/src/components/layout/drawer/DrawerCloseButton.tsx
+++ b/packages/hightide-web/src/components/layout/Drawer/DrawerCloseButton.tsx
@@ -1,7 +1,7 @@
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { X } from 'lucide-react'
-import type { IconButtonProps } from '../../user-interaction/IconButton'
-import { IconButton } from '../../user-interaction/IconButton'
+import type { IconButtonProps } from '../../interaction/IconButton'
+import { IconButton } from '../../interaction/IconButton'
 import { useDrawerContext } from './DrawerContext'
 
 export type DrawerCloseButtonProps = IconButtonProps
diff --git a/packages/hightide-web/src/components/layout/drawer/DrawerContainer.tsx b/packages/hightide-web/src/components/layout/Drawer/DrawerContainer.tsx
similarity index 98%
rename from packages/hightide-web/src/components/layout/drawer/DrawerContainer.tsx
rename to packages/hightide-web/src/components/layout/Drawer/DrawerContainer.tsx
index ae4246ad..d31bf946 100644
--- a/packages/hightide-web/src/components/layout/drawer/DrawerContainer.tsx
+++ b/packages/hightide-web/src/components/layout/Drawer/DrawerContainer.tsx
@@ -2,7 +2,7 @@ import { forwardRef, useId, useMemo, useRef, type HTMLAttributes } from 'react'
 import { useFocusTrap } from '../../../hooks/focus/useFocusTrap'
 import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
 import { useTransitionState } from '../../../hooks/useTransitionState'
-import { Portal } from '../../utils/Portal'
+import { Portal } from '../Portal'
 import { useDrawerContext } from './DrawerContext'
 import type { DrawerAligment } from './Drawer'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
diff --git a/packages/hightide-web/src/components/layout/drawer/DrawerContext.tsx b/packages/hightide-web/src/components/layout/Drawer/DrawerContext.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/drawer/DrawerContext.tsx
rename to packages/hightide-web/src/components/layout/Drawer/DrawerContext.tsx
diff --git a/packages/hightide-web/src/components/layout/drawer/DrawerRoot.tsx b/packages/hightide-web/src/components/layout/Drawer/DrawerRoot.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/drawer/DrawerRoot.tsx
rename to packages/hightide-web/src/components/layout/Drawer/DrawerRoot.tsx
diff --git a/packages/hightide-web/src/components/layout/drawer/index.ts b/packages/hightide-web/src/components/layout/Drawer/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/drawer/index.ts
rename to packages/hightide-web/src/components/layout/Drawer/index.ts
diff --git a/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx
index 4980f800..2e0a5e37 100644
--- a/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx
+++ b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSectionHeader.tsx
@@ -2,7 +2,7 @@ import type { ButtonHTMLAttributes } from 'react'
 import clsx from 'clsx'
 
 import { ColoringUtils } from '../../../utils/coloring'
-import { ExpansionIcon } from '../../display-and-visualization/ExpansionIcon'
+import { ExpansionIcon } from '../../visualization/ExpansionIcon'
 import { useExpandableContext } from '../Expandable/ExpandableContext'
 
 export type ExpandableSectionHeaderProps = ButtonHTMLAttributes<HTMLButtonElement> & {
diff --git a/packages/hightide-web/src/components/layout/InifiniteScroll.tsx b/packages/hightide-web/src/components/layout/InifiniteScroll.tsx
index c1b8f6a8..8c8715dc 100644
--- a/packages/hightide-web/src/components/layout/InifiniteScroll.tsx
+++ b/packages/hightide-web/src/components/layout/InifiniteScroll.tsx
@@ -11,9 +11,9 @@ import {
 } from 'react'
 import clsx from 'clsx'
 import { range } from '@helpwave/hightide-utils/utils'
-import { Pressable } from '../user-interaction/Pressable'
+import { Pressable } from '../interaction/Pressable'
 import { ChevronDown, ChevronUp } from 'lucide-react'
-import { Icon } from '../display-and-visualization/Icon'
+import { Icon } from '../visualization/Icon'
 import { Visibility } from './Visibility'
 
 export interface InfiniteScrollProps {
diff --git a/packages/hightide-web/src/components/layout/Modal/ConfirmModal.tsx b/packages/hightide-web/src/components/layout/Modal/ConfirmModal.tsx
index 71500901..298793f5 100644
--- a/packages/hightide-web/src/components/layout/Modal/ConfirmModal.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/ConfirmModal.tsx
@@ -2,8 +2,8 @@ import type { PropsWithChildren } from 'react'
 import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
-import type { ButtonColor } from '../../user-interaction/Button'
-import { Button } from '../../user-interaction/Button'
+import type { ButtonColor } from '../../interaction/Button'
+import { Button } from '../../interaction/Button'
 import type { ModalProps } from './Modal'
 import { Modal } from './Modal'
 
diff --git a/packages/hightide-web/src/components/layout/Modal/InputModal.tsx b/packages/hightide-web/src/components/layout/Modal/InputModal.tsx
index 8f8fcb88..d4360c27 100644
--- a/packages/hightide-web/src/components/layout/Modal/InputModal.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/InputModal.tsx
@@ -1,5 +1,5 @@
-import type { InputProps } from '../../user-interaction/input/Input'
-import { Input } from '../../user-interaction/input/Input'
+import type { InputProps } from '../../data-input/input/Input'
+import { Input } from '../../data-input/input/Input'
 import type { ConfirmModalProps } from './ConfirmModal'
 import { ConfirmModal } from './ConfirmModal'
 
diff --git a/packages/hightide-web/src/components/layout/Modal/LanguageModal.tsx b/packages/hightide-web/src/components/layout/Modal/LanguageModal.tsx
index 39d3c8c1..1292fc8c 100644
--- a/packages/hightide-web/src/components/layout/Modal/LanguageModal.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/LanguageModal.tsx
@@ -3,9 +3,9 @@ import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
-import { Button } from '../../user-interaction/Button'
-import type { SelectProps } from '../../user-interaction/Select/SelectComponent'
-import { Select } from '../../user-interaction/Select/Select'
+import { Button } from '../../interaction/Button'
+import type { SelectProps } from '../../data-input/Select/SelectComponent'
+import { Select } from '../../data-input/Select/Select'
 import type { ModalProps } from './Modal'
 import { Modal } from './Modal'
 
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx b/packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx
index 659b3b5e..b8f1c56b 100644
--- a/packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx
@@ -5,8 +5,8 @@ import { X } from 'lucide-react'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
 import { Visibility } from '../Visibility'
-import type { IconButtonProps } from '../../user-interaction/IconButton'
-import { IconButton } from '../../user-interaction/IconButton'
+import type { IconButtonProps } from '../../interaction/IconButton'
+import { IconButton } from '../../interaction/IconButton'
 import { useModalContext } from './ModalContext'
 
 export type ModalCloseButtonProps = IconButtonProps
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalContainer.tsx b/packages/hightide-web/src/components/layout/Modal/ModalContainer.tsx
index 31c9be99..d438df7d 100644
--- a/packages/hightide-web/src/components/layout/Modal/ModalContainer.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/ModalContainer.tsx
@@ -8,7 +8,7 @@ import { useEventCallbackStabilizer, useLogOnce, useOverlayRegistry } from '@hel
 import { useFocusTrap } from '../../../hooks/focus/useFocusTrap'
 import { usePresenceRef } from '../../../hooks/usePresenceRef'
 import { useTransitionState } from '../../../hooks/useTransitionState'
-import { Portal } from '../../utils/Portal'
+import { Portal } from '../Portal'
 import { Visibility } from '../Visibility'
 import { PropsUtil } from '../../../utils/propsUtil'
 import { ModalContext } from './ModalContext'
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalContent.tsx b/packages/hightide-web/src/components/layout/Modal/ModalContent.tsx
index 05566a9e..1c1bdc19 100644
--- a/packages/hightide-web/src/components/layout/Modal/ModalContent.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/ModalContent.tsx
@@ -5,7 +5,7 @@ import { forwardRef } from 'react'
 import clsx from 'clsx'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 
-import { FocusTrap } from '../../utils/FocusTrap'
+import { FocusTrap } from '../../interaction/FocusTrap'
 import { useModalContext } from './ModalContext'
 
 export type ModalPosition = 'top' | 'center' | 'none'
diff --git a/packages/hightide-web/src/components/layout/Modal/ThemeModal.tsx b/packages/hightide-web/src/components/layout/Modal/ThemeModal.tsx
index 50ac9c38..2580c16c 100644
--- a/packages/hightide-web/src/components/layout/Modal/ThemeModal.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/ThemeModal.tsx
@@ -4,9 +4,9 @@ import { useHightideTranslation } from '@helpwave/hightide-utils/context/transla
 
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
 import { useTheme } from '../../../global-contexts/theme/ThemeContext'
-import { Button } from '../../user-interaction/Button'
-import type { SelectProps } from '../../user-interaction/Select/SelectComponent'
-import { Select } from '../../user-interaction/Select/Select'
+import { Button } from '../../interaction/Button'
+import type { SelectProps } from '../../data-input/Select/SelectComponent'
+import { Select } from '../../data-input/Select/Select'
 import type { ModalProps } from './Modal'
 import { Modal } from './Modal'
 
diff --git a/packages/hightide-web/src/components/layout/popup/PopUp.tsx b/packages/hightide-web/src/components/layout/PopUp/PopUp.tsx
similarity index 97%
rename from packages/hightide-web/src/components/layout/popup/PopUp.tsx
rename to packages/hightide-web/src/components/layout/PopUp/PopUp.tsx
index 0fc22f7c..136b0999 100644
--- a/packages/hightide-web/src/components/layout/popup/PopUp.tsx
+++ b/packages/hightide-web/src/components/layout/PopUp/PopUp.tsx
@@ -2,12 +2,12 @@ import clsx from 'clsx'
 import type { RefObject } from 'react'
 import { forwardRef, useCallback, useContext, useMemo, useRef } from 'react'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
-import { Portal } from '../../utils/Portal'
+import { Portal } from '../Portal'
 import type { AnchoredFloatingContainerProps } from '../AnchoredFloatingContainer'
 import { AnchoredFloatingContainer } from '../AnchoredFloatingContainer'
 import { Visibility } from '../Visibility'
 import type { UseFocusTrapProps } from '../../../hooks/focus/useFocusTrap'
-import { FocusTrap } from '../../utils/FocusTrap'
+import { FocusTrap } from '../../interaction/FocusTrap'
 import type { UseOutsideClickHandlers, UseOutsideClickOptions } from '../../../hooks/useOutsideClick'
 import { useOutsideClick } from '../../../hooks/useOutsideClick'
 import { usePresenceRef } from '../../../hooks/usePresenceRef'
diff --git a/packages/hightide-web/src/components/layout/popup/PopUpContext.tsx b/packages/hightide-web/src/components/layout/PopUp/PopUpContext.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/popup/PopUpContext.tsx
rename to packages/hightide-web/src/components/layout/PopUp/PopUpContext.tsx
diff --git a/packages/hightide-web/src/components/layout/popup/PopUpOpener.tsx b/packages/hightide-web/src/components/layout/PopUp/PopUpOpener.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/popup/PopUpOpener.tsx
rename to packages/hightide-web/src/components/layout/PopUp/PopUpOpener.tsx
diff --git a/packages/hightide-web/src/components/layout/popup/PopUpRoot.tsx b/packages/hightide-web/src/components/layout/PopUp/PopUpRoot.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/popup/PopUpRoot.tsx
rename to packages/hightide-web/src/components/layout/PopUp/PopUpRoot.tsx
diff --git a/packages/hightide-web/src/components/layout/popup/index.ts b/packages/hightide-web/src/components/layout/PopUp/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/popup/index.ts
rename to packages/hightide-web/src/components/layout/PopUp/index.ts
diff --git a/packages/hightide-web/src/components/utils/Portal.tsx b/packages/hightide-web/src/components/layout/Portal.tsx
similarity index 100%
rename from packages/hightide-web/src/components/utils/Portal.tsx
rename to packages/hightide-web/src/components/layout/Portal.tsx
diff --git a/packages/hightide-web/src/components/layout/table/AutoColumnOrderFeature.ts b/packages/hightide-web/src/components/layout/Table/AutoColumnOrderFeature.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/AutoColumnOrderFeature.ts
rename to packages/hightide-web/src/components/layout/Table/AutoColumnOrderFeature.ts
diff --git a/packages/hightide-web/src/components/layout/table/ColumnSizingWithTargetFeature.ts b/packages/hightide-web/src/components/layout/Table/ColumnSizingWithTargetFeature.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/ColumnSizingWithTargetFeature.ts
rename to packages/hightide-web/src/components/layout/Table/ColumnSizingWithTargetFeature.ts
diff --git a/packages/hightide-web/src/components/layout/table/FillerCell.tsx b/packages/hightide-web/src/components/layout/Table/FillerCell.tsx
similarity index 86%
rename from packages/hightide-web/src/components/layout/table/FillerCell.tsx
rename to packages/hightide-web/src/components/layout/Table/FillerCell.tsx
index 8a5107ce..06978f67 100644
--- a/packages/hightide-web/src/components/layout/table/FillerCell.tsx
+++ b/packages/hightide-web/src/components/layout/Table/FillerCell.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { Minus } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../../visualization/Icon'
 import type { HTMLAttributes } from 'react'
 
 export type FillerCellProps = HTMLAttributes<HTMLDivElement>
diff --git a/packages/hightide-web/src/components/layout/table/Table.tsx b/packages/hightide-web/src/components/layout/Table/Table.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/Table.tsx
rename to packages/hightide-web/src/components/layout/Table/Table.tsx
diff --git a/packages/hightide-web/src/components/layout/table/TableBody.tsx b/packages/hightide-web/src/components/layout/Table/TableBody.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/TableBody.tsx
rename to packages/hightide-web/src/components/layout/Table/TableBody.tsx
diff --git a/packages/hightide-web/src/components/layout/table/TableCell.tsx b/packages/hightide-web/src/components/layout/Table/TableCell.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/TableCell.tsx
rename to packages/hightide-web/src/components/layout/Table/TableCell.tsx
diff --git a/packages/hightide-web/src/components/layout/table/TableColumn.tsx b/packages/hightide-web/src/components/layout/Table/TableColumn.tsx
similarity index 96%
rename from packages/hightide-web/src/components/layout/table/TableColumn.tsx
rename to packages/hightide-web/src/components/layout/Table/TableColumn.tsx
index b78c359b..033a7570 100644
--- a/packages/hightide-web/src/components/layout/table/TableColumn.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TableColumn.tsx
@@ -1,7 +1,7 @@
 import type { ColumnDef } from '@tanstack/react-table'
 import { memo,  useEffect,  useMemo, useState } from 'react'
 import { useTableColumnDefinitionContext } from './TableContext'
-import type { DataType } from '../../user-interaction/data/data-types'
+import type { DataType } from '../../interaction/data/data-types'
 import { useLogOnce } from '@helpwave/hightide-utils/hooks'
 
 export type TableColumnProps<T> = ColumnDef<T> & {
diff --git a/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx b/packages/hightide-web/src/components/layout/Table/TableColumnSwitcher.tsx
similarity index 97%
rename from packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx
rename to packages/hightide-web/src/components/layout/Table/TableColumnSwitcher.tsx
index f8a31978..55056f62 100644
--- a/packages/hightide-web/src/components/layout/table/TableColumnSwitcher.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TableColumnSwitcher.tsx
@@ -1,13 +1,13 @@
 import { useMemo, useRef, useId } from 'react'
 import { ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Eye, EyeOff, Pin, PinOff, Columns3Cog } from 'lucide-react'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import type { PopUpProps } from '../popup/PopUp'
-import { PopUp } from '../popup/PopUp'
-import { PopUpRoot } from '../popup/PopUpRoot'
-import { PopUpOpener } from '../popup/PopUpOpener'
+import type { PopUpProps } from '../PopUp/PopUp'
+import { PopUp } from '../PopUp/PopUp'
+import { PopUpRoot } from '../PopUp/PopUpRoot'
+import { PopUpOpener } from '../PopUp/PopUpOpener'
 import { useTableStateWithoutSizingContext } from './TableContext'
-import type { IconButtonProps } from '../../user-interaction/IconButton'
-import { IconButton } from '../../user-interaction/IconButton'
+import type { IconButtonProps } from '../../interaction/IconButton'
+import { IconButton } from '../../interaction/IconButton'
 import { Visibility } from '../Visibility'
 
 export type TableColumnSwitcherPopUpProps = PopUpProps
diff --git a/packages/hightide-web/src/components/layout/table/TableContext.tsx b/packages/hightide-web/src/components/layout/Table/TableContext.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/TableContext.tsx
rename to packages/hightide-web/src/components/layout/Table/TableContext.tsx
diff --git a/packages/hightide-web/src/components/layout/table/TableDisplay.tsx b/packages/hightide-web/src/components/layout/Table/TableDisplay.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/TableDisplay.tsx
rename to packages/hightide-web/src/components/layout/Table/TableDisplay.tsx
diff --git a/packages/hightide-web/src/components/layout/table/TableFilter.ts b/packages/hightide-web/src/components/layout/Table/TableFilter.ts
similarity index 94%
rename from packages/hightide-web/src/components/layout/table/TableFilter.ts
rename to packages/hightide-web/src/components/layout/Table/TableFilter.ts
index 57640570..833f6eda 100644
--- a/packages/hightide-web/src/components/layout/table/TableFilter.ts
+++ b/packages/hightide-web/src/components/layout/Table/TableFilter.ts
@@ -1,6 +1,6 @@
 import type { FilterFn } from '@tanstack/react-table'
-import { FilterOperatorUtils } from '../../user-interaction/data/FilterOperator'
-import { FilterFunctions, type FilterValue } from '../../user-interaction/data/filter-function'
+import { FilterOperatorUtils } from '../../interaction/data/FilterOperator'
+import { FilterFunctions, type FilterValue } from '../../interaction/data/filter-function'
 
 
 const textFilter: FilterFn<unknown> = (row, columnId, filterValue: FilterValue) => {
diff --git a/packages/hightide-web/src/components/layout/table/TableFilterButton.tsx b/packages/hightide-web/src/components/layout/Table/TableFilterButton.tsx
similarity index 89%
rename from packages/hightide-web/src/components/layout/table/TableFilterButton.tsx
rename to packages/hightide-web/src/components/layout/Table/TableFilterButton.tsx
index 1c63c60f..799af97a 100644
--- a/packages/hightide-web/src/components/layout/table/TableFilterButton.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TableFilterButton.tsx
@@ -1,14 +1,14 @@
 import { FilterIcon } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../../visualization/Icon'
 import { useEffect, useId, useMemo, useRef, useState } from 'react'
 import type { Header } from '@tanstack/react-table'
 import { flexRender } from '@tanstack/react-table'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { Visibility } from '../Visibility'
-import { IconButton } from '../../user-interaction/IconButton'
-import type { DataType } from '../../user-interaction/data/data-types'
-import type { FilterValue } from '../../user-interaction/data/filter-function'
-import { FilterPopUp } from '../../user-interaction/data/FilterPopUp'
+import { IconButton } from '../../interaction/IconButton'
+import type { DataType } from '../../interaction/data/data-types'
+import type { FilterValue } from '../../interaction/data/filter-function'
+import { FilterPopUp } from '../../interaction/data/FilterPopUp'
 
 export type TableFilterButtonProps = {
   filterType: DataType,
diff --git a/packages/hightide-web/src/components/layout/table/TableHeader.tsx b/packages/hightide-web/src/components/layout/Table/TableHeader.tsx
similarity index 99%
rename from packages/hightide-web/src/components/layout/table/TableHeader.tsx
rename to packages/hightide-web/src/components/layout/Table/TableHeader.tsx
index 82cfb310..7c0d2570 100644
--- a/packages/hightide-web/src/components/layout/table/TableHeader.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TableHeader.tsx
@@ -6,7 +6,7 @@ import { TableFilterButton } from './TableFilterButton'
 import { useCallback, useEffect, useRef } from 'react'
 import { PropsUtil } from '../../../utils/propsUtil'
 import { TableStateContext, useTableStateWithoutSizingContext } from './TableContext'
-import { DataTypeUtils, type DataType } from '../../user-interaction/data/data-types'
+import { DataTypeUtils, type DataType } from '../../interaction/data/data-types'
 import { SafeGlobals } from '../../../utils/safeGlobals'
 
 export type TableHeaderProps = {
diff --git a/packages/hightide-web/src/components/layout/table/TablePagination.tsx b/packages/hightide-web/src/components/layout/Table/TablePagination.tsx
similarity index 91%
rename from packages/hightide-web/src/components/layout/table/TablePagination.tsx
rename to packages/hightide-web/src/components/layout/Table/TablePagination.tsx
index 768c6222..2696a4c4 100644
--- a/packages/hightide-web/src/components/layout/table/TablePagination.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TablePagination.tsx
@@ -1,10 +1,10 @@
-import { Pagination, type PaginationProps } from '../navigation/Pagination'
+import { Pagination, type PaginationProps } from '../../interaction/navigation/Pagination'
 import type { HTMLAttributes } from 'react'
-import { Select } from '../../user-interaction/Select/Select'
+import { Select } from '../../data-input/Select/Select'
 import { Visibility } from '../Visibility'
 import clsx from 'clsx'
 import { useTableStateWithoutSizingContext } from './TableContext'
-import type { SelectProps } from '../../user-interaction'
+import type { SelectProps } from '../../data-input'
 
 export type TablePaginationMenuProps = Omit<PaginationProps, 'pageIndex' | 'pageCount'>
 
diff --git a/packages/hightide-web/src/components/layout/table/TableProvider.tsx b/packages/hightide-web/src/components/layout/Table/TableProvider.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/TableProvider.tsx
rename to packages/hightide-web/src/components/layout/Table/TableProvider.tsx
diff --git a/packages/hightide-web/src/components/layout/table/TableSortButton.tsx b/packages/hightide-web/src/components/layout/Table/TableSortButton.tsx
similarity index 91%
rename from packages/hightide-web/src/components/layout/table/TableSortButton.tsx
rename to packages/hightide-web/src/components/layout/Table/TableSortButton.tsx
index efa5f60f..592af05f 100644
--- a/packages/hightide-web/src/components/layout/table/TableSortButton.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TableSortButton.tsx
@@ -1,11 +1,11 @@
 import { ChevronDown, ChevronsUpDown, ChevronUp } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../../visualization/Icon'
 import clsx from 'clsx'
 import type { SortDirection } from '@tanstack/react-table'
 import { Visibility } from '../Visibility'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import type { IconButtonProps } from '../../user-interaction/IconButton'
-import { IconButton } from '../../user-interaction/IconButton'
+import type { IconButtonProps } from '../../interaction/IconButton'
+import { IconButton } from '../../interaction/IconButton'
 
 type SortingIndexDisplay = {
   index: number,
diff --git a/packages/hightide-web/src/components/layout/table/TableWithSelectionProvider.tsx b/packages/hightide-web/src/components/layout/Table/TableWithSelectionProvider.tsx
similarity index 98%
rename from packages/hightide-web/src/components/layout/table/TableWithSelectionProvider.tsx
rename to packages/hightide-web/src/components/layout/Table/TableWithSelectionProvider.tsx
index 98b43535..886e5485 100644
--- a/packages/hightide-web/src/components/layout/table/TableWithSelectionProvider.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TableWithSelectionProvider.tsx
@@ -1,4 +1,4 @@
-import { Checkbox } from '../../user-interaction/Checkbox'
+import { Checkbox } from '../../data-input/Checkbox'
 import { FillerCell } from './FillerCell'
 import type { TableProviderProps } from './TableProvider'
 import { TableProvider } from './TableProvider'
diff --git a/packages/hightide-web/src/components/layout/table/VirtualizedTableBody.tsx b/packages/hightide-web/src/components/layout/Table/VirtualizedTableBody.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/VirtualizedTableBody.tsx
rename to packages/hightide-web/src/components/layout/Table/VirtualizedTableBody.tsx
diff --git a/packages/hightide-web/src/components/layout/table/columnSizeUtil.ts b/packages/hightide-web/src/components/layout/Table/columnSizeUtil.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/columnSizeUtil.ts
rename to packages/hightide-web/src/components/layout/Table/columnSizeUtil.ts
diff --git a/packages/hightide-web/src/components/layout/table/index.ts b/packages/hightide-web/src/components/layout/Table/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/index.ts
rename to packages/hightide-web/src/components/layout/Table/index.ts
diff --git a/packages/hightide-web/src/components/layout/table/placeholderColumn.ts b/packages/hightide-web/src/components/layout/Table/placeholderColumn.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/placeholderColumn.ts
rename to packages/hightide-web/src/components/layout/Table/placeholderColumn.ts
diff --git a/packages/hightide-web/src/components/layout/table/types.ts b/packages/hightide-web/src/components/layout/Table/types.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/types.ts
rename to packages/hightide-web/src/components/layout/Table/types.ts
diff --git a/packages/hightide-web/src/components/layout/table/useNaturalColumnWidthLock.ts b/packages/hightide-web/src/components/layout/Table/useNaturalColumnWidthLock.ts
similarity index 100%
rename from packages/hightide-web/src/components/layout/table/useNaturalColumnWidthLock.ts
rename to packages/hightide-web/src/components/layout/Table/useNaturalColumnWidthLock.ts
diff --git a/packages/hightide-web/src/components/layout/TextImage.tsx b/packages/hightide-web/src/components/layout/TextImage.tsx
index 51ec4d3f..0d461638 100644
--- a/packages/hightide-web/src/components/layout/TextImage.tsx
+++ b/packages/hightide-web/src/components/layout/TextImage.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { Button } from '../user-interaction/Button'
+import { Button } from '../interaction/Button'
 
 type TextImageColor = 'primary' | 'secondary' | 'dark'
 
diff --git a/packages/hightide-web/src/components/utils/Transition.tsx b/packages/hightide-web/src/components/layout/Transition.tsx
similarity index 100%
rename from packages/hightide-web/src/components/utils/Transition.tsx
rename to packages/hightide-web/src/components/layout/Transition.tsx
diff --git a/packages/hightide-web/src/components/layout/app/AppPage.tsx b/packages/hightide-web/src/components/layout/app/AppPage.tsx
index beb349a2..095a0665 100644
--- a/packages/hightide-web/src/components/layout/app/AppPage.tsx
+++ b/packages/hightide-web/src/components/layout/app/AppPage.tsx
@@ -1,16 +1,16 @@
 import clsx from 'clsx'
 import type { ElementType } from 'react'
 import { useCallback, useMemo, useRef, useState, type HTMLAttributes, type ReactNode } from 'react'
-import { IconButton } from '../../user-interaction/IconButton'
+import { IconButton } from '../../interaction/IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { MenuIcon, X } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../../visualization/Icon'
 import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
 import { PropsUtil } from '../../../utils/propsUtil'
-import type { LinkComponentProps } from '../navigation/navigation-menus/VerticalNavigationMenu'
-import { VerticalNavigationMenu, type NavigationItemData } from '../navigation/navigation-menus/VerticalNavigationMenu'
-import type { NavigationGroupItem, NavigationLinkItem, NavigationLabelItem } from '../navigation/navigation-menus/types'
-import { FocusTrap } from '../../utils/FocusTrap'
+import type { LinkComponentProps } from '../../interaction/navigation/navigation-menus/VerticalNavigationMenu'
+import { VerticalNavigationMenu, type NavigationItemData } from '../../interaction/navigation/navigation-menus/VerticalNavigationMenu'
+import type { NavigationGroupItem, NavigationLinkItem, NavigationLabelItem } from '../../interaction/navigation/navigation-menus/types'
+import { FocusTrap } from '../../interaction/FocusTrap'
 
 export interface AppSidebarProps extends HTMLAttributes<HTMLDivElement> {
   isOpen?: boolean,
diff --git a/packages/hightide-web/src/components/form/FieldLayout.tsx b/packages/hightide-web/src/components/layout/form/FieldLayout.tsx
similarity index 98%
rename from packages/hightide-web/src/components/form/FieldLayout.tsx
rename to packages/hightide-web/src/components/layout/form/FieldLayout.tsx
index e15522e3..a9788658 100644
--- a/packages/hightide-web/src/components/form/FieldLayout.tsx
+++ b/packages/hightide-web/src/components/layout/form/FieldLayout.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import type { HTMLAttributes, ReactNode } from 'react'
 import { useId, useMemo, forwardRef } from 'react'
-import type { FormFieldInteractionStates } from '../../utils/propsUtil'
+import type { FormFieldInteractionStates } from '../../../utils/propsUtil'
 
 export type { FormFieldInteractionStates }
 
diff --git a/packages/hightide-web/src/components/form/FormContext.tsx b/packages/hightide-web/src/components/layout/form/FormContext.tsx
similarity index 100%
rename from packages/hightide-web/src/components/form/FormContext.tsx
rename to packages/hightide-web/src/components/layout/form/FormContext.tsx
diff --git a/packages/hightide-web/src/components/form/FormField.tsx b/packages/hightide-web/src/components/layout/form/FormField.tsx
similarity index 96%
rename from packages/hightide-web/src/components/form/FormField.tsx
rename to packages/hightide-web/src/components/layout/form/FormField.tsx
index fc38ddaf..16bce999 100644
--- a/packages/hightide-web/src/components/form/FormField.tsx
+++ b/packages/hightide-web/src/components/layout/form/FormField.tsx
@@ -1,4 +1,4 @@
-import type { InputInterface } from '../user-interaction/input/Input'
+import type { InputInterface } from '../../data-input/input/Input'
 import type { FormFieldAriaAttributes, FormFieldInteractionStates } from './FieldLayout'
 import { FormFieldLayout, type FormFieldLayoutProps } from './FieldLayout'
 import { useFormField } from './FormContext'
diff --git a/packages/hightide-web/src/components/form/FormObserver.tsx b/packages/hightide-web/src/components/layout/form/FormObserver.tsx
similarity index 100%
rename from packages/hightide-web/src/components/form/FormObserver.tsx
rename to packages/hightide-web/src/components/layout/form/FormObserver.tsx
diff --git a/packages/hightide-web/src/components/form/FormStore.ts b/packages/hightide-web/src/components/layout/form/FormStore.ts
similarity index 100%
rename from packages/hightide-web/src/components/form/FormStore.ts
rename to packages/hightide-web/src/components/layout/form/FormStore.ts
diff --git a/packages/hightide-web/src/components/form/index.ts b/packages/hightide-web/src/components/layout/form/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/form/index.ts
rename to packages/hightide-web/src/components/layout/form/index.ts
diff --git a/packages/hightide-web/src/components/form/useCreateForm.tsx b/packages/hightide-web/src/components/layout/form/useCreateForm.tsx
similarity index 100%
rename from packages/hightide-web/src/components/form/useCreateForm.tsx
rename to packages/hightide-web/src/components/layout/form/useCreateForm.tsx
diff --git a/packages/hightide-web/src/components/layout/index.ts b/packages/hightide-web/src/components/layout/index.ts
index c7d998a4..202f313d 100644
--- a/packages/hightide-web/src/components/layout/index.ts
+++ b/packages/hightide-web/src/components/layout/index.ts
@@ -1,4 +1,5 @@
 export * from './AnchoredFloatingContainer'
+export * from './Card'
 export * from './Carousel'
 export * from './Divider'
 export * from './DividerInserter'
@@ -6,17 +7,18 @@ export * from './Expandable'
 export * from './ExpandableSection'
 export * from './FAQSection'
 export * from './InifiniteScroll'
-export * from './MarkdownInterpreter'
+export * from './Portal'
 export * from './ScrollableList'
-export * from './TabSwitcher'
 export * from './TextImage'
+export * from './Transition'
 export * from './VerticalDivider'
 export * from './Visibility'
 export * from './app'
-export * from './Modal'
-export * from './drawer'
+export * from './Drawer'
+export * from './form'
+export * from './list'
 export * from './loading'
-export * from './navigation'
-export * from './popup'
-export * from './table'
+export * from './Modal'
+export * from './PopUp'
+export * from './Table'
 export * from './virtualization'
diff --git a/packages/hightide-web/src/components/list/ListItem.tsx b/packages/hightide-web/src/components/layout/list/ListItem.tsx
similarity index 94%
rename from packages/hightide-web/src/components/list/ListItem.tsx
rename to packages/hightide-web/src/components/layout/list/ListItem.tsx
index 1b836543..114adc20 100644
--- a/packages/hightide-web/src/components/list/ListItem.tsx
+++ b/packages/hightide-web/src/components/layout/list/ListItem.tsx
@@ -1,7 +1,7 @@
 import type { HTMLAttributes } from 'react'
 import clsx from 'clsx'
 
-import { ColoringUtils } from '../../utils/coloring'
+import { ColoringUtils } from '../../../utils/coloring'
 import { ListItemContent } from './ListItemContent'
 import type { ListItemColor, ListItemContentOrder, ListItemContentProps } from './ListItemTypes'
 
diff --git a/packages/hightide-web/src/components/list/ListItemContent.tsx b/packages/hightide-web/src/components/layout/list/ListItemContent.tsx
similarity index 100%
rename from packages/hightide-web/src/components/list/ListItemContent.tsx
rename to packages/hightide-web/src/components/layout/list/ListItemContent.tsx
diff --git a/packages/hightide-web/src/components/list/ListItemTypes.ts b/packages/hightide-web/src/components/layout/list/ListItemTypes.ts
similarity index 100%
rename from packages/hightide-web/src/components/list/ListItemTypes.ts
rename to packages/hightide-web/src/components/layout/list/ListItemTypes.ts
diff --git a/packages/hightide-web/src/components/layout/list/index.ts b/packages/hightide-web/src/components/layout/list/index.ts
new file mode 100644
index 00000000..44517589
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/list/index.ts
@@ -0,0 +1,3 @@
+export { ListItem } from './ListItem'
+export type { ListItemProps } from './ListItem'
+export type { ListItemColor, ListItemContentOrder } from './ListItemTypes'
diff --git a/packages/hightide-web/src/components/layout/loading/index.ts b/packages/hightide-web/src/components/layout/loading/index.ts
index 16d9dbbf..7896b74c 100644
--- a/packages/hightide-web/src/components/layout/loading/index.ts
+++ b/packages/hightide-web/src/components/layout/loading/index.ts
@@ -1,5 +1,2 @@
-export * from './ErrorComponent'
 export * from './LoadingAndErrorComponent'
-export * from './LoadingAnimation'
-export * from './LoadingSpinner'
 export * from './LoadingContainer'
diff --git a/packages/hightide-web/src/components/user-interaction/properties/CheckboxProperty.tsx b/packages/hightide-web/src/components/properties/CheckboxProperty.tsx
similarity index 93%
rename from packages/hightide-web/src/components/user-interaction/properties/CheckboxProperty.tsx
rename to packages/hightide-web/src/components/properties/CheckboxProperty.tsx
index ff3a2f51..f6056573 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/CheckboxProperty.tsx
+++ b/packages/hightide-web/src/components/properties/CheckboxProperty.tsx
@@ -1,8 +1,8 @@
 import { Check } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../visualization/Icon'
 import { PropertyBase, type PropertyField } from './PropertyBase'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { Button } from '../Button'
+import { Button } from '../interaction/Button'
 
 
 export type CheckboxPropertyProps = PropertyField<boolean>
diff --git a/packages/hightide-web/src/components/user-interaction/properties/DateProperty.tsx b/packages/hightide-web/src/components/properties/DateProperty.tsx
similarity index 88%
rename from packages/hightide-web/src/components/user-interaction/properties/DateProperty.tsx
rename to packages/hightide-web/src/components/properties/DateProperty.tsx
index 24b4aec2..a067df49 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/DateProperty.tsx
+++ b/packages/hightide-web/src/components/properties/DateProperty.tsx
@@ -1,8 +1,8 @@
 import { CalendarDays } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../visualization/Icon'
 import { PropertyBase, type PropertyField } from './PropertyBase'
-import { DateTimeInput, type DateTimeInputProps } from '../input/DateTimeInput'
-import { PropsUtil } from '../../../utils/propsUtil'
+import { DateTimeInput, type DateTimeInputProps } from '../data-input/input/DateTimeInput'
+import { PropsUtil } from '../../utils/propsUtil'
 
 export type DatePropertyProps =
   Pick<PropertyField<Date | null>, 'name' | 'onRemove' | 'onValueClear'>
diff --git a/packages/hightide-web/src/components/user-interaction/properties/MultiSelectProperty.tsx b/packages/hightide-web/src/components/properties/MultiSelectProperty.tsx
similarity index 88%
rename from packages/hightide-web/src/components/user-interaction/properties/MultiSelectProperty.tsx
rename to packages/hightide-web/src/components/properties/MultiSelectProperty.tsx
index b9207716..4e0a0804 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/MultiSelectProperty.tsx
+++ b/packages/hightide-web/src/components/properties/MultiSelectProperty.tsx
@@ -1,9 +1,9 @@
 import { List } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../visualization/Icon'
 import { PropertyBase, type PropertyField } from './PropertyBase'
 import type { PropsWithChildren } from 'react'
-import { PropsUtil } from '../../../utils/propsUtil'
-import { MultiSelect } from '../MultiSelect/MultiSelect'
+import { PropsUtil } from '../../utils/propsUtil'
+import { MultiSelect } from '../data-input/MultiSelect/MultiSelect'
 
 export interface MultiSelectPropertyProps extends PropertyField<string[]>, PropsWithChildren {}
 
diff --git a/packages/hightide-web/src/components/user-interaction/properties/NumberProperty.tsx b/packages/hightide-web/src/components/properties/NumberProperty.tsx
similarity index 92%
rename from packages/hightide-web/src/components/user-interaction/properties/NumberProperty.tsx
rename to packages/hightide-web/src/components/properties/NumberProperty.tsx
index 81c6cf6d..e8c47b49 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/NumberProperty.tsx
+++ b/packages/hightide-web/src/components/properties/NumberProperty.tsx
@@ -1,10 +1,10 @@
 import { Binary } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
-import { Input } from '../input/Input'
+import { Icon } from '../visualization/Icon'
+import { Input } from '../data-input/input/Input'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import type { PropertyField } from './PropertyBase'
 import { PropertyBase } from './PropertyBase'
-import { PropsUtil } from '../../../utils/propsUtil'
+import { PropsUtil } from '../../utils/propsUtil'
 
 export type NumberPropertyProps = PropertyField<number>
 & { suffix?: string }
diff --git a/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx b/packages/hightide-web/src/components/properties/PropertyBase.tsx
similarity index 94%
rename from packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx
rename to packages/hightide-web/src/components/properties/PropertyBase.tsx
index 090508de..007e5a8e 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/PropertyBase.tsx
+++ b/packages/hightide-web/src/components/properties/PropertyBase.tsx
@@ -1,11 +1,11 @@
 import type { ReactNode } from 'react'
 import clsx from 'clsx'
 import { AlertTriangle, Trash, X } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../visualization/Icon'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { Tooltip } from '../Tooltip'
-import { PropsUtil } from '../../../utils/propsUtil'
-import { IconButton } from '../IconButton'
+import { Tooltip } from '../interaction/Tooltip'
+import { PropsUtil } from '../../utils/propsUtil'
+import { IconButton } from '../interaction/IconButton'
 
 export type PropertyField<T> = {
   name: string,
diff --git a/packages/hightide-web/src/components/user-interaction/properties/SelectProperty.tsx b/packages/hightide-web/src/components/properties/SelectProperty.tsx
similarity index 89%
rename from packages/hightide-web/src/components/user-interaction/properties/SelectProperty.tsx
rename to packages/hightide-web/src/components/properties/SelectProperty.tsx
index e8f97578..af99b34a 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/SelectProperty.tsx
+++ b/packages/hightide-web/src/components/properties/SelectProperty.tsx
@@ -1,10 +1,10 @@
 import { List } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../visualization/Icon'
 import type { PropsWithChildren } from 'react'
 import type { PropertyField } from './PropertyBase'
 import { PropertyBase } from './PropertyBase'
-import { PropsUtil } from '../../../utils/propsUtil'
-import { Select } from '../Select/Select'
+import { PropsUtil } from '../../utils/propsUtil'
+import { Select } from '../data-input/Select/Select'
 
 export interface SingleSelectPropertyProps extends PropertyField<string>, PropsWithChildren {}
 
diff --git a/packages/hightide-web/src/components/user-interaction/properties/TextProperty.tsx b/packages/hightide-web/src/components/properties/TextProperty.tsx
similarity index 87%
rename from packages/hightide-web/src/components/user-interaction/properties/TextProperty.tsx
rename to packages/hightide-web/src/components/properties/TextProperty.tsx
index 3b4a7269..88dc21b2 100644
--- a/packages/hightide-web/src/components/user-interaction/properties/TextProperty.tsx
+++ b/packages/hightide-web/src/components/properties/TextProperty.tsx
@@ -1,10 +1,10 @@
 import { Text } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from '../visualization/Icon'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { Textarea } from '../Textarea'
+import { Textarea } from '../data-input/Textarea'
 import type { PropertyField } from './PropertyBase'
 import { PropertyBase } from './PropertyBase'
-import { PropsUtil } from '../../../utils/propsUtil'
+import { PropsUtil } from '../../utils/propsUtil'
 
 export type TextPropertyProps = PropertyField<string>
 
diff --git a/packages/hightide-web/src/components/user-interaction/properties/index.ts b/packages/hightide-web/src/components/properties/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/user-interaction/properties/index.ts
rename to packages/hightide-web/src/components/properties/index.ts
diff --git a/packages/hightide-web/src/components/user-interaction/index.ts b/packages/hightide-web/src/components/user-interaction/index.ts
deleted file mode 100644
index bc741250..00000000
--- a/packages/hightide-web/src/components/user-interaction/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export * from './Button'
-export * from './Checkbox'
-export * from './Combobox'
-export * from './CopyToClipboardWrapper'
-export * from './FileInput'
-export * from './IconButton'
-export * from './LabelledCheckbox'
-export * from './Menu'
-export * from './MultiSelect'
-export * from './WheelPicker'
-export * from './Select'
-export * from './Switch'
-export * from './Textarea'
-export * from './Tooltip'
-export * from './data'
-export * from './date'
-export * from './input'
-export * from './properties'
diff --git a/packages/hightide-web/src/components/utils/index.ts b/packages/hightide-web/src/components/utils/index.ts
deleted file mode 100644
index 2d345c1d..00000000
--- a/packages/hightide-web/src/components/utils/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './FocusTrap'
-export * from './Portal'
-export * from './Transition'
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/Avatar.tsx b/packages/hightide-web/src/components/visualization/Avatar/Avatar.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Avatar/Avatar.tsx
rename to packages/hightide-web/src/components/visualization/Avatar/Avatar.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarComponent.tsx b/packages/hightide-web/src/components/visualization/Avatar/AvatarComponent.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarComponent.tsx
rename to packages/hightide-web/src/components/visualization/Avatar/AvatarComponent.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarContext.tsx b/packages/hightide-web/src/components/visualization/Avatar/AvatarContext.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarContext.tsx
rename to packages/hightide-web/src/components/visualization/Avatar/AvatarContext.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarFallback.tsx b/packages/hightide-web/src/components/visualization/Avatar/AvatarFallback.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarFallback.tsx
rename to packages/hightide-web/src/components/visualization/Avatar/AvatarFallback.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarImage.tsx b/packages/hightide-web/src/components/visualization/Avatar/AvatarImage.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarImage.tsx
rename to packages/hightide-web/src/components/visualization/Avatar/AvatarImage.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarName.tsx b/packages/hightide-web/src/components/visualization/Avatar/AvatarName.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarName.tsx
rename to packages/hightide-web/src/components/visualization/Avatar/AvatarName.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarRoot.tsx b/packages/hightide-web/src/components/visualization/Avatar/AvatarRoot.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarRoot.tsx
rename to packages/hightide-web/src/components/visualization/Avatar/AvatarRoot.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarStatusIndicator.tsx b/packages/hightide-web/src/components/visualization/Avatar/AvatarStatusIndicator.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarStatusIndicator.tsx
rename to packages/hightide-web/src/components/visualization/Avatar/AvatarStatusIndicator.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarTypes.ts b/packages/hightide-web/src/components/visualization/Avatar/AvatarTypes.ts
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Avatar/AvatarTypes.ts
rename to packages/hightide-web/src/components/visualization/Avatar/AvatarTypes.ts
diff --git a/packages/hightide-web/src/components/display-and-visualization/Avatar/index.ts b/packages/hightide-web/src/components/visualization/Avatar/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Avatar/index.ts
rename to packages/hightide-web/src/components/visualization/Avatar/index.ts
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroup.tsx b/packages/hightide-web/src/components/visualization/AvatarGroup/AvatarGroup.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroup.tsx
rename to packages/hightide-web/src/components/visualization/AvatarGroup/AvatarGroup.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupAdditionalText.tsx b/packages/hightide-web/src/components/visualization/AvatarGroup/AvatarGroupAdditionalText.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupAdditionalText.tsx
rename to packages/hightide-web/src/components/visualization/AvatarGroup/AvatarGroupAdditionalText.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupComponent.tsx b/packages/hightide-web/src/components/visualization/AvatarGroup/AvatarGroupComponent.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupComponent.tsx
rename to packages/hightide-web/src/components/visualization/AvatarGroup/AvatarGroupComponent.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupContainer.tsx b/packages/hightide-web/src/components/visualization/AvatarGroup/AvatarGroupContainer.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupContainer.tsx
rename to packages/hightide-web/src/components/visualization/AvatarGroup/AvatarGroupContainer.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupOverlap.tsx b/packages/hightide-web/src/components/visualization/AvatarGroup/AvatarGroupOverlap.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/AvatarGroup/AvatarGroupOverlap.tsx
rename to packages/hightide-web/src/components/visualization/AvatarGroup/AvatarGroupOverlap.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/AvatarGroup/index.ts b/packages/hightide-web/src/components/visualization/AvatarGroup/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/AvatarGroup/index.ts
rename to packages/hightide-web/src/components/visualization/AvatarGroup/index.ts
diff --git a/packages/hightide-web/src/components/display-and-visualization/ChangingNumber.tsx b/packages/hightide-web/src/components/visualization/ChangingNumber.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/ChangingNumber.tsx
rename to packages/hightide-web/src/components/visualization/ChangingNumber.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/Chip.tsx b/packages/hightide-web/src/components/visualization/Chip.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Chip.tsx
rename to packages/hightide-web/src/components/visualization/Chip.tsx
diff --git a/packages/hightide-web/src/components/layout/loading/ErrorComponent.tsx b/packages/hightide-web/src/components/visualization/ErrorComponent.tsx
similarity index 91%
rename from packages/hightide-web/src/components/layout/loading/ErrorComponent.tsx
rename to packages/hightide-web/src/components/visualization/ErrorComponent.tsx
index 74e1a799..e618b90e 100644
--- a/packages/hightide-web/src/components/layout/loading/ErrorComponent.tsx
+++ b/packages/hightide-web/src/components/visualization/ErrorComponent.tsx
@@ -1,5 +1,5 @@
 import { AlertOctagon } from 'lucide-react'
-import { Icon } from '../../display-and-visualization/Icon'
+import { Icon } from './Icon'
 import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
diff --git a/packages/hightide-web/src/components/display-and-visualization/ExpansionIcon.tsx b/packages/hightide-web/src/components/visualization/ExpansionIcon.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/ExpansionIcon.tsx
rename to packages/hightide-web/src/components/visualization/ExpansionIcon.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/Icon.tsx b/packages/hightide-web/src/components/visualization/Icon.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/Icon.tsx
rename to packages/hightide-web/src/components/visualization/Icon.tsx
diff --git a/packages/hightide-web/src/components/layout/loading/LoadingAnimation.tsx b/packages/hightide-web/src/components/visualization/LoadingAnimation.tsx
similarity index 90%
rename from packages/hightide-web/src/components/layout/loading/LoadingAnimation.tsx
rename to packages/hightide-web/src/components/visualization/LoadingAnimation.tsx
index 997f84bd..9ed94ff1 100644
--- a/packages/hightide-web/src/components/layout/loading/LoadingAnimation.tsx
+++ b/packages/hightide-web/src/components/visualization/LoadingAnimation.tsx
@@ -1,6 +1,6 @@
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import clsx from 'clsx'
-import { HelpwaveLogo } from '../../branding/HelpwaveLogo'
+import { HelpwaveLogo } from '../branding/visualization/HelpwaveLogo'
 
 export type LoadingAnimationProps = {
   loadingText?: string,
diff --git a/packages/hightide-web/src/components/layout/loading/LoadingSpinner.tsx b/packages/hightide-web/src/components/visualization/LoadingSpinner.tsx
similarity index 74%
rename from packages/hightide-web/src/components/layout/loading/LoadingSpinner.tsx
rename to packages/hightide-web/src/components/visualization/LoadingSpinner.tsx
index 458f53f5..59b42881 100644
--- a/packages/hightide-web/src/components/layout/loading/LoadingSpinner.tsx
+++ b/packages/hightide-web/src/components/visualization/LoadingSpinner.tsx
@@ -1,7 +1,7 @@
 import { LoaderCircle } from 'lucide-react'
 import clsx from 'clsx'
-import type { IconSize } from '../../display-and-visualization/Icon'
-import { Icon } from '../../display-and-visualization/Icon'
+import type { IconSize } from './Icon'
+import { Icon } from './Icon'
 
 export type LoadingSpinnerProps = {
   className?: string,
diff --git a/packages/hightide-web/src/components/layout/MarkdownInterpreter.tsx b/packages/hightide-web/src/components/visualization/MarkdownInterpreter.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/MarkdownInterpreter.tsx
rename to packages/hightide-web/src/components/visualization/MarkdownInterpreter.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/ProgressIndicator.tsx b/packages/hightide-web/src/components/visualization/ProgressIndicator.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/ProgressIndicator.tsx
rename to packages/hightide-web/src/components/visualization/ProgressIndicator.tsx
diff --git a/packages/hightide-web/src/components/user-interaction/date/TimeDisplay.tsx b/packages/hightide-web/src/components/visualization/TimeDisplay.tsx
similarity index 97%
rename from packages/hightide-web/src/components/user-interaction/date/TimeDisplay.tsx
rename to packages/hightide-web/src/components/visualization/TimeDisplay.tsx
index bb464f40..73000e65 100644
--- a/packages/hightide-web/src/components/user-interaction/date/TimeDisplay.tsx
+++ b/packages/hightide-web/src/components/visualization/TimeDisplay.tsx
@@ -2,7 +2,7 @@ import { useHightideTranslation } from '@helpwave/hightide-utils/context/transla
 import {
   useDateTimeFormat,
   useLocalization
-} from '../../../global-contexts/localization/forward-exports'
+} from '../../global-contexts/localization/forward-exports'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 
 type TimeDisplayMode = 'daysFromToday' | 'date' | 'time'
diff --git a/packages/hightide-web/src/components/display-and-visualization/index.ts b/packages/hightide-web/src/components/visualization/index.ts
similarity index 58%
rename from packages/hightide-web/src/components/display-and-visualization/index.ts
rename to packages/hightide-web/src/components/visualization/index.ts
index 82e5f52a..a6b54768 100644
--- a/packages/hightide-web/src/components/display-and-visualization/index.ts
+++ b/packages/hightide-web/src/components/visualization/index.ts
@@ -1,9 +1,13 @@
 export * from './Avatar'
 export * from './AvatarGroup'
-export * from './Card'
 export * from './ChangingNumber'
 export * from './Chip'
+export * from './ErrorComponent'
 export * from './ExpansionIcon'
 export * from './Icon'
+export * from './LoadingAnimation'
+export * from './LoadingSpinner'
+export * from './MarkdownInterpreter'
 export * from './ProgressIndicator'
+export * from './TimeDisplay'
 export * from './process-model'
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelActivityNode.tsx b/packages/hightide-web/src/components/visualization/process-model/ProcessModelActivityNode.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelActivityNode.tsx
rename to packages/hightide-web/src/components/visualization/process-model/ProcessModelActivityNode.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx b/packages/hightide-web/src/components/visualization/process-model/ProcessModelCanvas.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelCanvas.tsx
rename to packages/hightide-web/src/components/visualization/process-model/ProcessModelCanvas.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTerminalNode.tsx b/packages/hightide-web/src/components/visualization/process-model/ProcessModelTerminalNode.tsx
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTerminalNode.tsx
rename to packages/hightide-web/src/components/visualization/process-model/ProcessModelTerminalNode.tsx
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx b/packages/hightide-web/src/components/visualization/process-model/ProcessModelTraceReplay.tsx
similarity index 98%
rename from packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
rename to packages/hightide-web/src/components/visualization/process-model/ProcessModelTraceReplay.tsx
index 40a2fc2a..d9a323e8 100644
--- a/packages/hightide-web/src/components/display-and-visualization/process-model/ProcessModelTraceReplay.tsx
+++ b/packages/hightide-web/src/components/visualization/process-model/ProcessModelTraceReplay.tsx
@@ -7,8 +7,8 @@ import {
   useState
 } from 'react'
 import clsx from 'clsx'
-import { Button } from '../../user-interaction/Button'
-import { Select } from '../../user-interaction/Select/Select'
+import { Button } from '../../interaction/Button'
+import { Select } from '../../data-input/Select/Select'
 import { ProcessModelCanvas } from './ProcessModelCanvas'
 import { ProcessModelLayoutUtilities } from './layoutProcessModel'
 import type { ProcessModelGraphWithTraces, ProcessModelTrace } from './types'
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/index.ts b/packages/hightide-web/src/components/visualization/process-model/index.ts
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/process-model/index.ts
rename to packages/hightide-web/src/components/visualization/process-model/index.ts
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/layoutProcessModel.ts b/packages/hightide-web/src/components/visualization/process-model/layoutProcessModel.ts
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/process-model/layoutProcessModel.ts
rename to packages/hightide-web/src/components/visualization/process-model/layoutProcessModel.ts
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/processModelLibrary.ts b/packages/hightide-web/src/components/visualization/process-model/processModelLibrary.ts
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/process-model/processModelLibrary.ts
rename to packages/hightide-web/src/components/visualization/process-model/processModelLibrary.ts
diff --git a/packages/hightide-web/src/components/display-and-visualization/process-model/types.ts b/packages/hightide-web/src/components/visualization/process-model/types.ts
similarity index 100%
rename from packages/hightide-web/src/components/display-and-visualization/process-model/types.ts
rename to packages/hightide-web/src/components/visualization/process-model/types.ts
diff --git a/packages/hightide-web/stories/Browser Compatibility/Safari.stories.tsx b/packages/hightide-web/stories/Browser Compatibility/Safari.stories.tsx
index 38916eaa..993d23fe 100644
--- a/packages/hightide-web/stories/Browser Compatibility/Safari.stories.tsx	
+++ b/packages/hightide-web/stories/Browser Compatibility/Safari.stories.tsx	
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import type { ReactNode } from 'react'
 import { useState } from 'react'
-import { Button } from '../../src/components/user-interaction/Button'
-import { HelpwaveLogo } from '../../src/components/branding/HelpwaveLogo'
+import { Button } from '../../src/components/interaction/Button'
+import { HelpwaveLogo } from '../../src/components/branding/visualization/HelpwaveLogo'
 
 type DemoSectionProps = {
   title: string,
diff --git a/packages/hightide-web/stories/README.md b/packages/hightide-web/stories/README.md
index 0db0a2ce..e08437d1 100644
--- a/packages/hightide-web/stories/README.md
+++ b/packages/hightide-web/stories/README.md
@@ -1,5 +1,7 @@
 ## Adding a Story
 
+The story path mirrors `src/components`. A story for `src/components/layout/Modal` lives in `stories/layout/Modal`. Grouping folders stay lowercase. A folder that holds one aggregate uses that aggregate's name.
+
 You can use the `title` to change the displayed _hierarchy_.
 **Make sure** that this _hierarchy_ is the **same as the path**
 in which you have saved the story.
diff --git a/packages/hightide-web/stories/Utilities/Focus Management/FocusTrap.stories.tsx b/packages/hightide-web/stories/Utilities/Focus Management/FocusTrap.stories.tsx
index d31b220c..0b79c2c3 100644
--- a/packages/hightide-web/stories/Utilities/Focus Management/FocusTrap.stories.tsx	
+++ b/packages/hightide-web/stories/Utilities/Focus Management/FocusTrap.stories.tsx	
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useRef, useState } from 'react'
-import { Input } from '../../../src/components/user-interaction/input/Input'
-import { FocusTrapWrapper } from '../../../src/components/utils/FocusTrap'
+import { Input } from '../../../src/components/data-input/input/Input'
+import { FocusTrapWrapper } from '../../../src/components/interaction/FocusTrap'
 import { clsx } from 'clsx'
 import { Modal } from '../../../src/components/layout/Modal/Modal'
-import { Button } from '../../../src/components/user-interaction/Button'
+import { Button } from '../../../src/components/interaction/Button'
 
 type StoryArgs = unknown
 
diff --git a/packages/hightide-web/stories/Utilities/hooks/useDebouncer.stories.tsx b/packages/hightide-web/stories/Utilities/hooks/useDebouncer.stories.tsx
index 2d2e9cc7..0b7e1701 100644
--- a/packages/hightide-web/stories/Utilities/hooks/useDebouncer.stories.tsx
+++ b/packages/hightide-web/stories/Utilities/hooks/useDebouncer.stories.tsx
@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { useState } from 'react'
 
-import { Button } from '../../../src/components/user-interaction/Button'
-import { Input } from '../../../src/components/user-interaction/input/Input'
+import { Button } from '../../../src/components/interaction/Button'
+import { Input } from '../../../src/components/data-input/input/Input'
 import { useDebouncer } from '@helpwave/hightide-utils/hooks'
 
 type StoryArgs = {
diff --git a/packages/hightide-web/stories/Utilities/hooks/useDelay.stories.tsx b/packages/hightide-web/stories/Utilities/hooks/useDelay.stories.tsx
index d1b14797..2d5f5173 100644
--- a/packages/hightide-web/stories/Utilities/hooks/useDelay.stories.tsx
+++ b/packages/hightide-web/stories/Utilities/hooks/useDelay.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { useDelay } from '@helpwave/hightide-utils/hooks'
-import { Button } from '../../../src/components/user-interaction/Button'
+import { Button } from '../../../src/components/interaction/Button'
 
 type StoryArgs = {
   delay: number,
diff --git a/packages/hightide-web/stories/Utilities/hooks/useThrottle.stories.tsx b/packages/hightide-web/stories/Utilities/hooks/useThrottle.stories.tsx
index 8129316a..b466ebf2 100644
--- a/packages/hightide-web/stories/Utilities/hooks/useThrottle.stories.tsx
+++ b/packages/hightide-web/stories/Utilities/hooks/useThrottle.stories.tsx
@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { useState } from 'react'
 
-import { Button } from '../../../src/components/user-interaction/Button'
-import { Input } from '../../../src/components/user-interaction/input/Input'
+import { Button } from '../../../src/components/interaction/Button'
+import { Input } from '../../../src/components/data-input/input/Input'
 import { useThrottle } from '@helpwave/hightide-utils/hooks'
 
 type StoryArgs = {
diff --git a/packages/hightide-web/stories/Branding/SemanticColors.stories.tsx b/packages/hightide-web/stories/branding/SemanticColors.stories.tsx
similarity index 100%
rename from packages/hightide-web/stories/Branding/SemanticColors.stories.tsx
rename to packages/hightide-web/stories/branding/SemanticColors.stories.tsx
diff --git a/packages/hightide-web/stories/Branding/AppZumDocBadge.stories.tsx b/packages/hightide-web/stories/branding/visualization/AppZumDocBadge.stories.tsx
similarity index 77%
rename from packages/hightide-web/stories/Branding/AppZumDocBadge.stories.tsx
rename to packages/hightide-web/stories/branding/visualization/AppZumDocBadge.stories.tsx
index 1d8b7a2e..19c23c83 100644
--- a/packages/hightide-web/stories/Branding/AppZumDocBadge.stories.tsx
+++ b/packages/hightide-web/stories/branding/visualization/AppZumDocBadge.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { AppZumDocBadge } from '../../src/components/branding/AppZumDocBadge'
+import { AppZumDocBadge } from '../../../src/components/branding/visualization/AppZumDocBadge'
 
 const meta = {
   component: AppZumDocBadge,
diff --git a/packages/hightide-web/stories/Branding/AppZumDocLogo.stories.tsx b/packages/hightide-web/stories/branding/visualization/AppZumDocLogo.stories.tsx
similarity index 84%
rename from packages/hightide-web/stories/Branding/AppZumDocLogo.stories.tsx
rename to packages/hightide-web/stories/branding/visualization/AppZumDocLogo.stories.tsx
index c2d02cdc..deb01632 100644
--- a/packages/hightide-web/stories/Branding/AppZumDocLogo.stories.tsx
+++ b/packages/hightide-web/stories/branding/visualization/AppZumDocLogo.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { AppZumDocLogo } from '../../src/components/branding/AppZumDocLogo'
+import { AppZumDocLogo } from '../../../src/components/branding/visualization/AppZumDocLogo'
 
 const meta = {
   component: AppZumDocLogo,
diff --git a/packages/hightide-web/stories/Branding/HelpwaveBadge.stories.tsx b/packages/hightide-web/stories/branding/visualization/HelpwaveBadge.stories.tsx
similarity index 77%
rename from packages/hightide-web/stories/Branding/HelpwaveBadge.stories.tsx
rename to packages/hightide-web/stories/branding/visualization/HelpwaveBadge.stories.tsx
index e4d4ea30..743373ea 100644
--- a/packages/hightide-web/stories/Branding/HelpwaveBadge.stories.tsx
+++ b/packages/hightide-web/stories/branding/visualization/HelpwaveBadge.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { HelpwaveBadge } from '../../src/components/branding/HelpwaveBadge'
+import { HelpwaveBadge } from '../../../src/components/branding/visualization/HelpwaveBadge'
 
 const meta = {
   component: HelpwaveBadge,
diff --git a/packages/hightide-web/stories/Branding/HelpwaveLoadingAnimation.stories.tsx b/packages/hightide-web/stories/branding/visualization/HelpwaveLoadingAnimation.stories.tsx
similarity index 79%
rename from packages/hightide-web/stories/Branding/HelpwaveLoadingAnimation.stories.tsx
rename to packages/hightide-web/stories/branding/visualization/HelpwaveLoadingAnimation.stories.tsx
index 1f923dcf..b5b57707 100644
--- a/packages/hightide-web/stories/Branding/HelpwaveLoadingAnimation.stories.tsx
+++ b/packages/hightide-web/stories/branding/visualization/HelpwaveLoadingAnimation.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { HelpwaveLogo } from '../../src/components/branding/HelpwaveLogo'
+import { HelpwaveLogo } from '../../../src/components/branding/visualization/HelpwaveLogo'
 
 const meta = {
   component: HelpwaveLogo,
diff --git a/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx b/packages/hightide-web/stories/chat/ChatDemo.stories.tsx
similarity index 91%
rename from packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
rename to packages/hightide-web/stories/chat/ChatDemo.stories.tsx
index 45e9bb80..8eadc157 100644
--- a/packages/hightide-web/stories/Chat/ChatDemo.stories.tsx
+++ b/packages/hightide-web/stories/chat/ChatDemo.stories.tsx
@@ -4,23 +4,23 @@ import type { ReactNode } from 'react'
 import clsx from 'clsx'
 import { CalendarDays, Camera, ChevronLeft, Paperclip, Phone, Pill, Plus, UserRoundPlus } from 'lucide-react'
 import { action } from 'storybook/actions'
-import type { AvatarStatus } from '../../src/components/display-and-visualization/Avatar/AvatarTypes'
-import { ChatConversationList } from '../../src/components/chat/ChatConversationList'
-import { ChatConversationRow, type ChatConversationSentIndicator } from '../../src/components/chat/ChatConversationRow'
-import { ChatThreadHeader } from '../../src/components/chat/ChatThreadHeader'
-import { ChatMessageList } from '../../src/components/chat/ChatMessageList'
-import { ChatMessageBubble, type ChatMessageDirection, type ChatMessageStatus } from '../../src/components/chat/ChatMessageBubble'
-import { ChatAttachmentMessageBubble } from '../../src/components/chat/ChatAttachmentMessageBubble'
-import { ChatDateDivider } from '../../src/components/chat/ChatDateDivider'
-import { ChatSystemLine } from '../../src/components/chat/ChatSystemLine'
-import { ChatQuickReplyChip } from '../../src/components/chat/ChatQuickReplyChip'
-import { ChatMessageComposer } from '../../src/components/chat/ChatMessageComposer'
-import { Chip } from '../../src/components/display-and-visualization/Chip'
-import { Icon } from '../../src/components/display-and-visualization/Icon'
-import { Button } from '../../src/components/user-interaction/Button'
+import type { AvatarStatus } from '../../src/components/visualization/Avatar/AvatarTypes'
+import { ChatConversationList } from '../../src/components/chat/layout/ChatConversationList'
+import { ChatConversationRow, type ChatConversationSentIndicator } from '../../src/components/chat/interaction/ChatConversationRow'
+import { ChatThreadHeader } from '../../src/components/chat/layout/ChatThreadHeader'
+import { ChatMessageList } from '../../src/components/chat/layout/ChatMessageList'
+import { ChatMessageBubble, type ChatMessageDirection, type ChatMessageStatus } from '../../src/components/chat/visualization/ChatMessageBubble'
+import { ChatAttachmentMessageBubble } from '../../src/components/chat/visualization/ChatAttachmentMessageBubble'
+import { ChatDateDivider } from '../../src/components/chat/layout/ChatDateDivider'
+import { ChatSystemLine } from '../../src/components/chat/visualization/ChatSystemLine'
+import { ChatQuickReplyChip } from '../../src/components/chat/interaction/ChatQuickReplyChip'
+import { ChatMessageComposer } from '../../src/components/chat/data-input/ChatMessageComposer'
+import { Chip } from '../../src/components/visualization/Chip'
+import { Icon } from '../../src/components/visualization/Icon'
+import { Button } from '../../src/components/interaction/Button'
 import { ColoringUtils } from '../../src/utils/coloring'
-import { IconButton } from '../../src/components/user-interaction/IconButton'
-import { TimeDisplay } from '../../src/components/user-interaction/date/TimeDisplay'
+import { IconButton } from '../../src/components/interaction/IconButton'
+import { TimeDisplay } from '../../src/components/visualization/TimeDisplay'
 
 type DemoMessage = {
   id: string,
diff --git a/packages/hightide-web/stories/Chat/ChatMessageComposer.stories.tsx b/packages/hightide-web/stories/chat/data-input/ChatMessageComposer.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/Chat/ChatMessageComposer.stories.tsx
rename to packages/hightide-web/stories/chat/data-input/ChatMessageComposer.stories.tsx
index ef6714ac..a5518ce2 100644
--- a/packages/hightide-web/stories/Chat/ChatMessageComposer.stories.tsx
+++ b/packages/hightide-web/stories/chat/data-input/ChatMessageComposer.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { Camera, Paperclip } from 'lucide-react'
-import { ChatMessageComposer } from '../../src/components/chat/ChatMessageComposer'
-import { IconButton } from '../../src/components/user-interaction/IconButton'
+import { ChatMessageComposer } from '../../../src/components/chat/data-input/ChatMessageComposer'
+import { IconButton } from '../../../src/components/interaction/IconButton'
 
 const meta: Meta<typeof ChatMessageComposer> = {
   component: ChatMessageComposer,
diff --git a/packages/hightide-web/stories/Chat/ChatConversationRow.stories.tsx b/packages/hightide-web/stories/chat/interaction/ChatConversationRow.stories.tsx
similarity index 93%
rename from packages/hightide-web/stories/Chat/ChatConversationRow.stories.tsx
rename to packages/hightide-web/stories/chat/interaction/ChatConversationRow.stories.tsx
index 2db17fe1..0886dcf7 100644
--- a/packages/hightide-web/stories/Chat/ChatConversationRow.stories.tsx
+++ b/packages/hightide-web/stories/chat/interaction/ChatConversationRow.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { ChatConversationRow } from '../../src/components/chat/ChatConversationRow'
+import { ChatConversationRow } from '../../../src/components/chat/interaction/ChatConversationRow'
 
 const meta: Meta<typeof ChatConversationRow> = {
   component: ChatConversationRow,
diff --git a/packages/hightide-web/stories/Chat/ChatQuickReplyChip.stories.tsx b/packages/hightide-web/stories/chat/interaction/ChatQuickReplyChip.stories.tsx
similarity index 87%
rename from packages/hightide-web/stories/Chat/ChatQuickReplyChip.stories.tsx
rename to packages/hightide-web/stories/chat/interaction/ChatQuickReplyChip.stories.tsx
index 123d93f0..ac3cda81 100644
--- a/packages/hightide-web/stories/Chat/ChatQuickReplyChip.stories.tsx
+++ b/packages/hightide-web/stories/chat/interaction/ChatQuickReplyChip.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { ChatQuickReplyChip } from '../../src/components/chat/ChatQuickReplyChip'
+import { ChatQuickReplyChip } from '../../../src/components/chat/interaction/ChatQuickReplyChip'
 
 const meta: Meta<typeof ChatQuickReplyChip> = {
   component: ChatQuickReplyChip,
diff --git a/packages/hightide-web/stories/Chat/ChatConversationList.stories.tsx b/packages/hightide-web/stories/chat/layout/ChatConversationList.stories.tsx
similarity index 93%
rename from packages/hightide-web/stories/Chat/ChatConversationList.stories.tsx
rename to packages/hightide-web/stories/chat/layout/ChatConversationList.stories.tsx
index 0b65eca1..52720352 100644
--- a/packages/hightide-web/stories/Chat/ChatConversationList.stories.tsx
+++ b/packages/hightide-web/stories/chat/layout/ChatConversationList.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { ChatConversationList } from '../../src/components/chat/ChatConversationList'
-import { ChatConversationRow } from '../../src/components/chat/ChatConversationRow'
-import { IconButton } from '../../src/components/user-interaction/IconButton'
+import { ChatConversationList } from '../../../src/components/chat/layout/ChatConversationList'
+import { ChatConversationRow } from '../../../src/components/chat/interaction/ChatConversationRow'
+import { IconButton } from '../../../src/components/interaction/IconButton'
 import { Plus } from 'lucide-react'
 import clsx from 'clsx'
 
diff --git a/packages/hightide-web/stories/Chat/ChatDateDivider.stories.tsx b/packages/hightide-web/stories/chat/layout/ChatDateDivider.stories.tsx
similarity index 76%
rename from packages/hightide-web/stories/Chat/ChatDateDivider.stories.tsx
rename to packages/hightide-web/stories/chat/layout/ChatDateDivider.stories.tsx
index 66b13116..c6d7332f 100644
--- a/packages/hightide-web/stories/Chat/ChatDateDivider.stories.tsx
+++ b/packages/hightide-web/stories/chat/layout/ChatDateDivider.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { ChatDateDivider } from '../../src/components/chat/ChatDateDivider'
-import { TimeDisplay } from '../../src/components/user-interaction/date/TimeDisplay'
+import { ChatDateDivider } from '../../../src/components/chat/layout/ChatDateDivider'
+import { TimeDisplay } from '../../../src/components/visualization/TimeDisplay'
 
 const meta: Meta<typeof ChatDateDivider> = {
   component: ChatDateDivider,
diff --git a/packages/hightide-web/stories/Chat/ChatMessageList.stories.tsx b/packages/hightide-web/stories/chat/layout/ChatMessageList.stories.tsx
similarity index 79%
rename from packages/hightide-web/stories/Chat/ChatMessageList.stories.tsx
rename to packages/hightide-web/stories/chat/layout/ChatMessageList.stories.tsx
index d241b44c..cb080dc1 100644
--- a/packages/hightide-web/stories/Chat/ChatMessageList.stories.tsx
+++ b/packages/hightide-web/stories/chat/layout/ChatMessageList.stories.tsx
@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { CalendarDays } from 'lucide-react'
-import { ChatMessageList } from '../../src/components/chat/ChatMessageList'
-import { ChatMessageBubble } from '../../src/components/chat/ChatMessageBubble'
-import { ChatAttachmentMessageBubble } from '../../src/components/chat/ChatAttachmentMessageBubble'
-import { ChatDateDivider } from '../../src/components/chat/ChatDateDivider'
-import { ChatSystemLine } from '../../src/components/chat/ChatSystemLine'
-import { Chip } from '../../src/components/display-and-visualization/Chip'
-import { Icon } from '../../src/components/display-and-visualization/Icon'
-import { Button } from '../../src/components/user-interaction/Button'
-import { ColoringUtils } from '../../src/utils/coloring'
+import { ChatMessageList } from '../../../src/components/chat/layout/ChatMessageList'
+import { ChatMessageBubble } from '../../../src/components/chat/visualization/ChatMessageBubble'
+import { ChatAttachmentMessageBubble } from '../../../src/components/chat/visualization/ChatAttachmentMessageBubble'
+import { ChatDateDivider } from '../../../src/components/chat/layout/ChatDateDivider'
+import { ChatSystemLine } from '../../../src/components/chat/visualization/ChatSystemLine'
+import { Chip } from '../../../src/components/visualization/Chip'
+import { Icon } from '../../../src/components/visualization/Icon'
+import { Button } from '../../../src/components/interaction/Button'
+import { ColoringUtils } from '../../../src/utils/coloring'
 
 const meta: Meta<typeof ChatMessageList> = {
   component: ChatMessageList,
diff --git a/packages/hightide-web/stories/Chat/ChatThreadHeader.stories.tsx b/packages/hightide-web/stories/chat/layout/ChatThreadHeader.stories.tsx
similarity index 91%
rename from packages/hightide-web/stories/Chat/ChatThreadHeader.stories.tsx
rename to packages/hightide-web/stories/chat/layout/ChatThreadHeader.stories.tsx
index 1bf630d1..e0311da7 100644
--- a/packages/hightide-web/stories/Chat/ChatThreadHeader.stories.tsx
+++ b/packages/hightide-web/stories/chat/layout/ChatThreadHeader.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { ChevronLeft, EllipsisVertical, Phone, UserRoundPlus } from 'lucide-react'
-import { ChatThreadHeader } from '../../src/components/chat/ChatThreadHeader'
-import { IconButton } from '../../src/components/user-interaction/IconButton'
+import { ChatThreadHeader } from '../../../src/components/chat/layout/ChatThreadHeader'
+import { IconButton } from '../../../src/components/interaction/IconButton'
 
 const meta: Meta<typeof ChatThreadHeader> = {
   component: ChatThreadHeader,
diff --git a/packages/hightide-web/stories/Chat/ChatAttachmentMessageBubble.stories.tsx b/packages/hightide-web/stories/chat/visualization/ChatAttachmentMessageBubble.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/Chat/ChatAttachmentMessageBubble.stories.tsx
rename to packages/hightide-web/stories/chat/visualization/ChatAttachmentMessageBubble.stories.tsx
index b264bc42..0365338e 100644
--- a/packages/hightide-web/stories/Chat/ChatAttachmentMessageBubble.stories.tsx
+++ b/packages/hightide-web/stories/chat/visualization/ChatAttachmentMessageBubble.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { ChatAttachmentMessageBubble } from '../../src/components/chat/ChatAttachmentMessageBubble'
+import { ChatAttachmentMessageBubble } from '../../../src/components/chat/visualization/ChatAttachmentMessageBubble'
 
 const meta = {
   component: ChatAttachmentMessageBubble,
diff --git a/packages/hightide-web/stories/Chat/ChatMessageBubble.stories.tsx b/packages/hightide-web/stories/chat/visualization/ChatMessageBubble.stories.tsx
similarity index 94%
rename from packages/hightide-web/stories/Chat/ChatMessageBubble.stories.tsx
rename to packages/hightide-web/stories/chat/visualization/ChatMessageBubble.stories.tsx
index f9e263d4..05b226ab 100644
--- a/packages/hightide-web/stories/Chat/ChatMessageBubble.stories.tsx
+++ b/packages/hightide-web/stories/chat/visualization/ChatMessageBubble.stories.tsx
@@ -3,7 +3,7 @@ import {
   ChatMessageBubble,
   type ChatMessageDirection,
   type ChatMessageStatus
-} from '../../src/components/chat/ChatMessageBubble'
+} from '../../../src/components/chat/visualization/ChatMessageBubble'
 
 const meta = {
   component: ChatMessageBubble,
diff --git a/packages/hightide-web/stories/Chat/ChatMessageCard.stories.tsx b/packages/hightide-web/stories/chat/visualization/ChatMessageCard.stories.tsx
similarity index 92%
rename from packages/hightide-web/stories/Chat/ChatMessageCard.stories.tsx
rename to packages/hightide-web/stories/chat/visualization/ChatMessageCard.stories.tsx
index a3619e60..f5aa1d12 100644
--- a/packages/hightide-web/stories/Chat/ChatMessageCard.stories.tsx
+++ b/packages/hightide-web/stories/chat/visualization/ChatMessageCard.stories.tsx
@@ -1,11 +1,11 @@
 import type { ElementType, ReactNode } from 'react'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { CalendarDays, Pill, Send } from 'lucide-react'
-import { ChatMessageBubble, type ChatMessageBubbleProps } from '../../src/components/chat/ChatMessageBubble'
-import { Chip } from '../../src/components/display-and-visualization/Chip'
-import { Icon } from '../../src/components/display-and-visualization/Icon'
-import { Button } from '../../src/components/user-interaction/Button'
-import { ColoringUtils, type ColoringColor } from '../../src/utils/coloring'
+import { ChatMessageBubble, type ChatMessageBubbleProps } from '../../../src/components/chat/visualization/ChatMessageBubble'
+import { Chip } from '../../../src/components/visualization/Chip'
+import { Icon } from '../../../src/components/visualization/Icon'
+import { Button } from '../../../src/components/interaction/Button'
+import { ColoringUtils, type ColoringColor } from '../../../src/utils/coloring'
 import clsx from 'clsx'
 
 const meta = {
diff --git a/packages/hightide-web/stories/Chat/ChatSystemLine.stories.tsx b/packages/hightide-web/stories/chat/visualization/ChatSystemLine.stories.tsx
similarity index 78%
rename from packages/hightide-web/stories/Chat/ChatSystemLine.stories.tsx
rename to packages/hightide-web/stories/chat/visualization/ChatSystemLine.stories.tsx
index 31c8f6d4..9e19645a 100644
--- a/packages/hightide-web/stories/Chat/ChatSystemLine.stories.tsx
+++ b/packages/hightide-web/stories/chat/visualization/ChatSystemLine.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { ChatSystemLine } from '../../src/components/chat/ChatSystemLine'
+import { ChatSystemLine } from '../../../src/components/chat/visualization/ChatSystemLine'
 
 const meta: Meta<typeof ChatSystemLine> = {
   component: ChatSystemLine,
diff --git a/packages/hightide-web/stories/User Interaction/Checkbox.stories.tsx b/packages/hightide-web/stories/data-input/Checkbox.stories.tsx
similarity index 87%
rename from packages/hightide-web/stories/User Interaction/Checkbox.stories.tsx
rename to packages/hightide-web/stories/data-input/Checkbox.stories.tsx
index b5c31846..0568543a 100644
--- a/packages/hightide-web/stories/User Interaction/Checkbox.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/Checkbox.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Checkbox } from '../../src/components/user-interaction/Checkbox'
+import { Checkbox } from '../../src/components/data-input/Checkbox'
 import { action } from 'storybook/actions'
 
 const meta = {
diff --git a/packages/hightide-web/stories/User Interaction/FileInput/FileInput.stories.tsx b/packages/hightide-web/stories/data-input/FileInput/FileInput.stories.tsx
similarity index 93%
rename from packages/hightide-web/stories/User Interaction/FileInput/FileInput.stories.tsx
rename to packages/hightide-web/stories/data-input/FileInput/FileInput.stories.tsx
index 858ebb7d..c097695e 100644
--- a/packages/hightide-web/stories/User Interaction/FileInput/FileInput.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/FileInput/FileInput.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { FileInput } from '../../../src/components/user-interaction/FileInput/FileInput'
-import { createFileInputItem } from '../../../src/components/user-interaction/FileInput/fileInputItem'
+import { FileInput } from '../../../src/components/data-input/FileInput/FileInput'
+import { createFileInputItem } from '../../../src/components/data-input/FileInput/fileInputItem'
 
 const meta: Meta<typeof FileInput> = {
   component: FileInput,
diff --git a/packages/hightide-web/stories/User Interaction/LabelledCheckbox.stories.tsx b/packages/hightide-web/stories/data-input/LabelledCheckbox.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/User Interaction/LabelledCheckbox.stories.tsx
rename to packages/hightide-web/stories/data-input/LabelledCheckbox.stories.tsx
index 615e45db..35d2faf3 100644
--- a/packages/hightide-web/stories/User Interaction/LabelledCheckbox.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/LabelledCheckbox.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { LabelledCheckbox } from '../../src/components/user-interaction/LabelledCheckbox'
+import { LabelledCheckbox } from '../../src/components/data-input/LabelledCheckbox'
 import { action } from 'storybook/actions'
 
 const meta: Meta<typeof LabelledCheckbox> = {
diff --git a/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelect.stories.tsx b/packages/hightide-web/stories/data-input/MultiSelect/MultiSelect.stories.tsx
similarity index 95%
rename from packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelect.stories.tsx
rename to packages/hightide-web/stories/data-input/MultiSelect/MultiSelect.stories.tsx
index 7a39de02..e11a8a57 100644
--- a/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelect.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/MultiSelect/MultiSelect.stories.tsx
@@ -1,8 +1,8 @@
 import { action } from 'storybook/actions'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useEffect, useState } from 'react'
-import { MultiSelect } from '../../../src/components/user-interaction/MultiSelect/MultiSelect'
-import type { MultiSelectProps } from '../../../src/components/user-interaction/MultiSelect/MultiSelectComponent'
+import { MultiSelect } from '../../../src/components/data-input/MultiSelect/MultiSelect'
+import type { MultiSelectProps } from '../../../src/components/data-input/MultiSelect/MultiSelectComponent'
 
 const meta: Meta<typeof MultiSelect<User>> = {
   component: MultiSelect<User>,
diff --git a/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelectChipDisplay.stories.tsx b/packages/hightide-web/stories/data-input/MultiSelect/MultiSelectChipDisplay.stories.tsx
similarity index 94%
rename from packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelectChipDisplay.stories.tsx
rename to packages/hightide-web/stories/data-input/MultiSelect/MultiSelectChipDisplay.stories.tsx
index 433433dc..1b0c46e6 100644
--- a/packages/hightide-web/stories/User Interaction/MultiSelect/MultiSelectChipDisplay.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/MultiSelect/MultiSelectChipDisplay.stories.tsx
@@ -1,5 +1,5 @@
 import { action } from 'storybook/actions'
-import { MultiSelect } from '../../../src/components/user-interaction/MultiSelect/MultiSelect'
+import { MultiSelect } from '../../../src/components/data-input/MultiSelect/MultiSelect'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
 const meta = {
diff --git a/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx b/packages/hightide-web/stories/data-input/Select/Select.stories.tsx
similarity index 93%
rename from packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx
rename to packages/hightide-web/stories/data-input/Select/Select.stories.tsx
index bc0d924e..2c0edd30 100644
--- a/packages/hightide-web/stories/User Interaction/Select/Select.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/Select/Select.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { useEffect, useState } from 'react'
-import { Select } from '../../../src/components/user-interaction/Select/Select'
-import type { SelectProps } from '../../../src/components/user-interaction/Select/SelectComponent'
-import type { SelectOptionType } from '../../../src/components/user-interaction/Select/SelectContext'
+import { Select } from '../../../src/components/data-input/Select/Select'
+import type { SelectProps } from '../../../src/components/data-input/Select/SelectComponent'
+import type { SelectOptionType } from '../../../src/components/data-input/Select/SelectContext'
 
 const meta: Meta<typeof Select<User>> = {
   component: Select,
diff --git a/packages/hightide-web/stories/User Interaction/Switch.stories.tsx b/packages/hightide-web/stories/data-input/Switch.stories.tsx
similarity index 95%
rename from packages/hightide-web/stories/User Interaction/Switch.stories.tsx
rename to packages/hightide-web/stories/data-input/Switch.stories.tsx
index 3ba7c092..a7e738e2 100644
--- a/packages/hightide-web/stories/User Interaction/Switch.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/Switch.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Switch as SwitchComponent } from '../../src/components/user-interaction/Switch'
+import { Switch as SwitchComponent } from '../../src/components/data-input/Switch'
 import { action } from 'storybook/actions'
 
 const meta = {
diff --git a/packages/hightide-web/stories/User Interaction/Textarea.stories.tsx b/packages/hightide-web/stories/data-input/Textarea.stories.tsx
similarity index 81%
rename from packages/hightide-web/stories/User Interaction/Textarea.stories.tsx
rename to packages/hightide-web/stories/data-input/Textarea.stories.tsx
index 541d9b30..8f6f6605 100644
--- a/packages/hightide-web/stories/User Interaction/Textarea.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/Textarea.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Textarea } from '../../src/components/user-interaction/Textarea'
+import { Textarea } from '../../src/components/data-input/Textarea'
 
 const meta = {
   component: Textarea,
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDatePicker.stories.tsx b/packages/hightide-web/stories/data-input/date/CalendarDatePicker.stories.tsx
similarity index 87%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDatePicker.stories.tsx
rename to packages/hightide-web/stories/data-input/date/CalendarDatePicker.stories.tsx
index 1b109528..d768a4f6 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDatePicker.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/date/CalendarDatePicker.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 
-import { CalendarDatePicker } from '../../../src/components/user-interaction/date/CalendarDatePicker'
+import { CalendarDatePicker } from '../../../src/components/data-input/date/CalendarDatePicker'
 
 const meta = {
   component: CalendarDatePicker,
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDayPicker.stories.tsx b/packages/hightide-web/stories/data-input/date/CalendarDayPicker.stories.tsx
similarity index 84%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDayPicker.stories.tsx
rename to packages/hightide-web/stories/data-input/date/CalendarDayPicker.stories.tsx
index 8b94e345..b9d5ac6e 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/CalendarDayPicker.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/date/CalendarDayPicker.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 
-import { CalendarDayPicker } from '../../../src/components/user-interaction/date/CalendarDayPicker'
+import { CalendarDayPicker } from '../../../src/components/data-input/date/CalendarDayPicker'
 
 const meta = {
   component: CalendarDayPicker,
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimePicker.stories.tsx b/packages/hightide-web/stories/data-input/date/DateTimePicker.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimePicker.stories.tsx
rename to packages/hightide-web/stories/data-input/date/DateTimePicker.stories.tsx
index 757ba630..ac6e2ee2 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimePicker.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/date/DateTimePicker.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { DateTimePicker } from '../../../src/components/user-interaction/date/DateTimePicker'
+import { DateTimePicker } from '../../../src/components/data-input/date/DateTimePicker'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 import { action } from 'storybook/actions'
 
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimePickerDialog.stories.tsx b/packages/hightide-web/stories/data-input/date/DateTimePickerDialog.stories.tsx
similarity index 93%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimePickerDialog.stories.tsx
rename to packages/hightide-web/stories/data-input/date/DateTimePickerDialog.stories.tsx
index ab42edf8..008a19c6 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimePickerDialog.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/date/DateTimePickerDialog.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { useEffect, useState } from 'react'
-import { DateTimePickerDialog } from '../../../src/components/user-interaction/date/DateTimePickerDialog'
+import { DateTimePickerDialog } from '../../../src/components/data-input/date/DateTimePickerDialog'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 
 const meta: Meta<typeof DateTimePickerDialog> = {
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimeWheelPicker.stories.tsx b/packages/hightide-web/stories/data-input/date/DateTimeWheelPicker.stories.tsx
similarity index 83%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimeWheelPicker.stories.tsx
rename to packages/hightide-web/stories/data-input/date/DateTimeWheelPicker.stories.tsx
index 9277750a..8153dbba 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateTimeWheelPicker.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/date/DateTimeWheelPicker.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 
-import { DateTimeWheelPicker } from '../../../src/components/user-interaction/date/DateTimeWheelPicker'
+import { DateTimeWheelPicker } from '../../../src/components/data-input/date/DateTimeWheelPicker'
 
 const meta = {
   component: DateTimeWheelPicker,
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateWheelPicker.stories.tsx b/packages/hightide-web/stories/data-input/date/DateWheelPicker.stories.tsx
similarity index 87%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/DateWheelPicker.stories.tsx
rename to packages/hightide-web/stories/data-input/date/DateWheelPicker.stories.tsx
index 7de75fbb..d8f3e71d 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/DateWheelPicker.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/date/DateWheelPicker.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 
-import { DateWheelPicker } from '../../../src/components/user-interaction/date/DateWheelPicker'
+import { DateWheelPicker } from '../../../src/components/data-input/date/DateWheelPicker'
 
 const meta = {
   component: DateWheelPicker,
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/TimePicker.stories.tsx b/packages/hightide-web/stories/data-input/date/TimePicker.stories.tsx
similarity index 87%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/TimePicker.stories.tsx
rename to packages/hightide-web/stories/data-input/date/TimePicker.stories.tsx
index 31492f3d..0c9c9668 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/TimePicker.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/date/TimePicker.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { TimePicker } from '../../../src/components/user-interaction/date/TimePicker'
+import { TimePicker } from '../../../src/components/data-input/date/TimePicker'
 import { action } from 'storybook/actions'
 
 const meta = {
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/TimeWheelPicker.stories.tsx b/packages/hightide-web/stories/data-input/date/TimeWheelPicker.stories.tsx
similarity index 87%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/TimeWheelPicker.stories.tsx
rename to packages/hightide-web/stories/data-input/date/TimeWheelPicker.stories.tsx
index 6e510e10..f7fd988c 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/TimeWheelPicker.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/date/TimeWheelPicker.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 
-import { TimeWheelPicker } from '../../../src/components/user-interaction/date/TimeWheelPicker'
+import { TimeWheelPicker } from '../../../src/components/data-input/date/TimeWheelPicker'
 
 const meta = {
   component: TimeWheelPicker,
diff --git a/packages/hightide-web/stories/User Interaction/Date and Time Input/YearMonthPicker.stories.tsx b/packages/hightide-web/stories/data-input/date/YearMonthPicker.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/User Interaction/Date and Time Input/YearMonthPicker.stories.tsx
rename to packages/hightide-web/stories/data-input/date/YearMonthPicker.stories.tsx
index e976b37f..fb25fe23 100644
--- a/packages/hightide-web/stories/User Interaction/Date and Time Input/YearMonthPicker.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/date/YearMonthPicker.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { YearMonthPicker } from '../../../src/components/user-interaction/date/YearMonthPicker'
+import { YearMonthPicker } from '../../../src/components/data-input/date/YearMonthPicker'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 
 const meta = {
diff --git a/packages/hightide-web/stories/User Interaction/Input/DateTimeInput.stories.tsx b/packages/hightide-web/stories/data-input/input/DateTimeInput.stories.tsx
similarity index 94%
rename from packages/hightide-web/stories/User Interaction/Input/DateTimeInput.stories.tsx
rename to packages/hightide-web/stories/data-input/input/DateTimeInput.stories.tsx
index 4cdbdd02..f38ac67f 100644
--- a/packages/hightide-web/stories/User Interaction/Input/DateTimeInput.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/input/DateTimeInput.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { useEffect, useState } from 'react'
-import { DateTimeInput } from '../../../src/components/user-interaction/input/DateTimeInput'
-import { TimeDisplay } from '../../../src/components/user-interaction/date/TimeDisplay'
+import { DateTimeInput } from '../../../src/components/data-input/input/DateTimeInput'
+import { TimeDisplay } from '../../../src/components/visualization/TimeDisplay'
 import { LocalizationContext } from '../../../src/global-contexts/localization/forward-exports'
 
 const timeZones = ['', 'UTC', 'America/New_York', 'Europe/Berlin', 'Asia/Tokyo', 'Pacific/Kiritimati']
diff --git a/packages/hightide-web/stories/User Interaction/Input/FlexibleDateTimeInput.stories.tsx b/packages/hightide-web/stories/data-input/input/FlexibleDateTimeInput.stories.tsx
similarity index 93%
rename from packages/hightide-web/stories/User Interaction/Input/FlexibleDateTimeInput.stories.tsx
rename to packages/hightide-web/stories/data-input/input/FlexibleDateTimeInput.stories.tsx
index f2873cad..0f0d7f77 100644
--- a/packages/hightide-web/stories/User Interaction/Input/FlexibleDateTimeInput.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/input/FlexibleDateTimeInput.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { useEffect, useState } from 'react'
-import { FlexibleDateTimeInput } from '../../../src/components/user-interaction/input/FlexibleDateTimeInput'
-import { TimeDisplay } from '../../../src/components/user-interaction/date/TimeDisplay'
+import { FlexibleDateTimeInput } from '../../../src/components/data-input/input/FlexibleDateTimeInput'
+import { TimeDisplay } from '../../../src/components/visualization/TimeDisplay'
 import { LocalizationContext } from '../../../src/global-contexts/localization/forward-exports'
 
 const timeZones = ['', 'UTC', 'America/New_York', 'Europe/Berlin', 'Asia/Tokyo', 'Pacific/Kiritimati']
diff --git a/packages/hightide-web/stories/User Interaction/Input/Input.stories.tsx b/packages/hightide-web/stories/data-input/input/Input.stories.tsx
similarity index 89%
rename from packages/hightide-web/stories/User Interaction/Input/Input.stories.tsx
rename to packages/hightide-web/stories/data-input/input/Input.stories.tsx
index 5f8d237f..097ab4ae 100644
--- a/packages/hightide-web/stories/User Interaction/Input/Input.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/input/Input.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { Input } from '../../../src/components/user-interaction/input/Input'
+import { Input } from '../../../src/components/data-input/input/Input'
 
 const meta = {
   component: Input,
diff --git a/packages/hightide-web/stories/User Interaction/Input/InsideLabelInput.stories.tsx b/packages/hightide-web/stories/data-input/input/InsideLabelInput.stories.tsx
similarity index 85%
rename from packages/hightide-web/stories/User Interaction/Input/InsideLabelInput.stories.tsx
rename to packages/hightide-web/stories/data-input/input/InsideLabelInput.stories.tsx
index 3846a0ff..c8b3a948 100644
--- a/packages/hightide-web/stories/User Interaction/Input/InsideLabelInput.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/input/InsideLabelInput.stories.tsx
@@ -1,6 +1,6 @@
 import { action } from 'storybook/actions'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { InsideLabelInput } from '../../../src/components/user-interaction/input/InsideLabelInput'
+import { InsideLabelInput } from '../../../src/components/data-input/input/InsideLabelInput'
 import { clsx } from 'clsx'
 
 const meta = {
diff --git a/packages/hightide-web/stories/User Interaction/Input/NumberStepperInput.stories.tsx b/packages/hightide-web/stories/data-input/input/NumberStepperInput.stories.tsx
similarity index 91%
rename from packages/hightide-web/stories/User Interaction/Input/NumberStepperInput.stories.tsx
rename to packages/hightide-web/stories/data-input/input/NumberStepperInput.stories.tsx
index b2929b91..0fa8b2cb 100644
--- a/packages/hightide-web/stories/User Interaction/Input/NumberStepperInput.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/input/NumberStepperInput.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useEffect, useState } from 'react'
-import { NumberStepperInput } from '../../../src/components/user-interaction/input/NumberStepperInput'
+import { NumberStepperInput } from '../../../src/components/data-input/input/NumberStepperInput'
 import { action } from 'storybook/actions'
 
 const meta: Meta<typeof NumberStepperInput> = {
diff --git a/packages/hightide-web/stories/User Interaction/Input/SearchBar.stories.tsx b/packages/hightide-web/stories/data-input/input/SearchBar.stories.tsx
similarity index 84%
rename from packages/hightide-web/stories/User Interaction/Input/SearchBar.stories.tsx
rename to packages/hightide-web/stories/data-input/input/SearchBar.stories.tsx
index 3ed6cc98..db4df063 100644
--- a/packages/hightide-web/stories/User Interaction/Input/SearchBar.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/input/SearchBar.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { SearchBar } from '../../../src/components/user-interaction/input/SearchBar'
+import { SearchBar } from '../../../src/components/data-input/input/SearchBar'
 
 const meta = {
   component: SearchBar,
diff --git a/packages/hightide-web/stories/User Interaction/Input/TogglableInput.stories.tsx b/packages/hightide-web/stories/data-input/input/TogglableInput.stories.tsx
similarity index 82%
rename from packages/hightide-web/stories/User Interaction/Input/TogglableInput.stories.tsx
rename to packages/hightide-web/stories/data-input/input/TogglableInput.stories.tsx
index 58504188..72b56e1e 100644
--- a/packages/hightide-web/stories/User Interaction/Input/TogglableInput.stories.tsx	
+++ b/packages/hightide-web/stories/data-input/input/TogglableInput.stories.tsx
@@ -1,6 +1,6 @@
 import { action } from 'storybook/actions'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { ToggleableInput } from '../../../src/components/user-interaction/input/ToggleableInput'
+import { ToggleableInput } from '../../../src/components/data-input/input/ToggleableInput'
 
 const meta = {
   component: ToggleableInput,
diff --git a/packages/hightide-web/stories/User Interaction/Button.stories.tsx b/packages/hightide-web/stories/interaction/Button.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/User Interaction/Button.stories.tsx
rename to packages/hightide-web/stories/interaction/Button.stories.tsx
index 0fbbc683..02accbdd 100644
--- a/packages/hightide-web/stories/User Interaction/Button.stories.tsx	
+++ b/packages/hightide-web/stories/interaction/Button.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Check, ChevronRight } from 'lucide-react'
-import { ButtonUtil } from '../../src/components/user-interaction/Button'
-import { Button } from '../../src/components/user-interaction/Button'
+import { ButtonUtil } from '../../src/components/interaction/Button'
+import { Button } from '../../src/components/interaction/Button'
 import { action } from 'storybook/actions'
 
 const meta = {
diff --git a/packages/hightide-web/stories/User Interaction/Combobox.stories.tsx b/packages/hightide-web/stories/interaction/Combobox/Combobox.stories.tsx
similarity index 86%
rename from packages/hightide-web/stories/User Interaction/Combobox.stories.tsx
rename to packages/hightide-web/stories/interaction/Combobox/Combobox.stories.tsx
index 487bf946..12961b86 100644
--- a/packages/hightide-web/stories/User Interaction/Combobox.stories.tsx	
+++ b/packages/hightide-web/stories/interaction/Combobox/Combobox.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { Combobox } from '../../src/components/user-interaction/Combobox/Combobox'
-import { ComboboxOption } from '../../src/components/user-interaction/Combobox/ComboboxOption'
+import { Combobox } from '../../../src/components/interaction/Combobox/Combobox'
+import { ComboboxOption } from '../../../src/components/interaction/Combobox/ComboboxOption'
 
 const options = [
   { value: 'apple', label: 'Apple' },
diff --git a/packages/hightide-web/stories/User Interaction/CopyToClipboardWrapper.stories.tsx b/packages/hightide-web/stories/interaction/CopyToClipboardWrapper.stories.tsx
similarity index 81%
rename from packages/hightide-web/stories/User Interaction/CopyToClipboardWrapper.stories.tsx
rename to packages/hightide-web/stories/interaction/CopyToClipboardWrapper.stories.tsx
index 9803fec8..03e7fab9 100644
--- a/packages/hightide-web/stories/User Interaction/CopyToClipboardWrapper.stories.tsx	
+++ b/packages/hightide-web/stories/interaction/CopyToClipboardWrapper.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { CopyToClipboardWrapper } from '../../src/components/user-interaction/CopyToClipboardWrapper'
+import { CopyToClipboardWrapper } from '../../src/components/interaction/CopyToClipboardWrapper'
 
 const meta = {
   component: CopyToClipboardWrapper,
diff --git a/packages/hightide-web/stories/User Interaction/IconButton.stories.tsx b/packages/hightide-web/stories/interaction/IconButton.stories.tsx
similarity index 89%
rename from packages/hightide-web/stories/User Interaction/IconButton.stories.tsx
rename to packages/hightide-web/stories/interaction/IconButton.stories.tsx
index f45ad0e4..3043a03c 100644
--- a/packages/hightide-web/stories/User Interaction/IconButton.stories.tsx	
+++ b/packages/hightide-web/stories/interaction/IconButton.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { StorybookStyling } from '../../src/storybook/styling'
 import { action } from 'storybook/actions'
-import { IconButton } from '../../src/components/user-interaction/IconButton'
+import { IconButton } from '../../src/components/interaction/IconButton'
 import { MinusIcon } from 'lucide-react'
 
 const meta = {
diff --git a/packages/hightide-web/stories/User Interaction/Menu.stories.tsx b/packages/hightide-web/stories/interaction/Menu.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/User Interaction/Menu.stories.tsx
rename to packages/hightide-web/stories/interaction/Menu.stories.tsx
index d2e0cd8f..2f1f1359 100644
--- a/packages/hightide-web/stories/User Interaction/Menu.stories.tsx	
+++ b/packages/hightide-web/stories/interaction/Menu.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Menu, MenuItem } from '../../src/components/user-interaction/Menu'
+import { Menu, MenuItem } from '../../src/components/interaction/Menu'
 import { action } from 'storybook/actions'
-import { Button } from '../../src/components/user-interaction/Button'
+import { Button } from '../../src/components/interaction/Button'
 import { range } from '@helpwave/hightide-utils/utils'
 
 const meta = {
diff --git a/packages/hightide-web/stories/User Interaction/Pressable.stories.tsx b/packages/hightide-web/stories/interaction/Pressable.stories.tsx
similarity index 85%
rename from packages/hightide-web/stories/User Interaction/Pressable.stories.tsx
rename to packages/hightide-web/stories/interaction/Pressable.stories.tsx
index 1801f6c3..39c52dd3 100644
--- a/packages/hightide-web/stories/User Interaction/Pressable.stories.tsx	
+++ b/packages/hightide-web/stories/interaction/Pressable.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Plus } from 'lucide-react'
-import { ButtonUtil } from '../../src/components/user-interaction/Pressable'
-import { Pressable } from '../../src/components/user-interaction/Pressable'
+import { ButtonUtil } from '../../src/components/interaction/Pressable'
+import { Pressable } from '../../src/components/interaction/Pressable'
 import { action } from 'storybook/actions'
 
 const meta = {
diff --git a/packages/hightide-web/stories/Layout/TabSwitcher.stories.tsx b/packages/hightide-web/stories/interaction/TabSwitcher.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/Layout/TabSwitcher.stories.tsx
rename to packages/hightide-web/stories/interaction/TabSwitcher.stories.tsx
index dc73935a..76a83e38 100644
--- a/packages/hightide-web/stories/Layout/TabSwitcher.stories.tsx
+++ b/packages/hightide-web/stories/interaction/TabSwitcher.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { TabSwitcherProps } from '../../src/components/layout/TabSwitcher'
-import { TabList, TabPanel, TabSwitcher } from '../../src/components/layout/TabSwitcher'
+import type { TabSwitcherProps } from '../../src/components/interaction/TabSwitcher'
+import { TabList, TabPanel, TabSwitcher } from '../../src/components/interaction/TabSwitcher'
 import { useState } from 'react'
-import { Button } from '../../src/components/user-interaction/Button'
+import { Button } from '../../src/components/interaction/Button'
 import { action } from 'storybook/actions'
 
 
diff --git a/packages/hightide-web/stories/User Interaction/Tooltip/Tooltip.stories.tsx b/packages/hightide-web/stories/interaction/Tooltip.stories.tsx
similarity index 90%
rename from packages/hightide-web/stories/User Interaction/Tooltip/Tooltip.stories.tsx
rename to packages/hightide-web/stories/interaction/Tooltip.stories.tsx
index 03cec16e..e99fa91b 100644
--- a/packages/hightide-web/stories/User Interaction/Tooltip/Tooltip.stories.tsx	
+++ b/packages/hightide-web/stories/interaction/Tooltip.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Tooltip } from '../../../src/components/user-interaction/Tooltip'
+import { Tooltip } from '../../src/components/interaction/Tooltip'
 
 const meta: Meta<typeof Tooltip> = {
   component: Tooltip,
diff --git a/packages/hightide-web/stories/User Interaction/WheelPicker.stories.tsx b/packages/hightide-web/stories/interaction/WheelPicker/WheelPicker.stories.tsx
similarity index 91%
rename from packages/hightide-web/stories/User Interaction/WheelPicker.stories.tsx
rename to packages/hightide-web/stories/interaction/WheelPicker/WheelPicker.stories.tsx
index 5b3e84e4..e663ee70 100644
--- a/packages/hightide-web/stories/User Interaction/WheelPicker.stories.tsx	
+++ b/packages/hightide-web/stories/interaction/WheelPicker/WheelPicker.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useState } from 'react'
 import { range } from '@helpwave/hightide-utils/utils'
 
-import { WheelPicker } from '../../src/components/user-interaction/WheelPicker'
+import { WheelPicker } from '../../../src/components/interaction/WheelPicker'
 
 const meta = {
   component: WheelPicker<number>,
diff --git a/packages/hightide-web/stories/User Interaction/List/ListActionItem.stories.tsx b/packages/hightide-web/stories/interaction/list/ListActionItem.stories.tsx
similarity index 92%
rename from packages/hightide-web/stories/User Interaction/List/ListActionItem.stories.tsx
rename to packages/hightide-web/stories/interaction/list/ListActionItem.stories.tsx
index 5d6bbbcc..dec33b9b 100644
--- a/packages/hightide-web/stories/User Interaction/List/ListActionItem.stories.tsx	
+++ b/packages/hightide-web/stories/interaction/list/ListActionItem.stories.tsx
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { Bell, ChevronRight } from 'lucide-react'
-import { Card } from '../../../src/components/display-and-visualization/Card'
+import { Card } from '../../../src/components/layout/Card'
 import { Divider } from '../../../src/components/layout/Divider'
-import { ListActionItem } from '../../../src/components/list/ListActionItem'
-import type { ListItemColor, ListItemContentOrder } from '../../../src/components/list/ListItemTypes'
+import { ListActionItem } from '../../../src/components/interaction/list/ListActionItem'
+import type { ListItemColor, ListItemContentOrder } from '../../../src/components/layout/list/ListItemTypes'
 
 const contentOrders = ['titleFirst', 'subtitleFirst'] as const satisfies readonly ListItemContentOrder[]
 const colors = ['default', 'primary', 'secondary', 'positive', 'warning', 'negative', 'neutral'] as const
diff --git a/packages/hightide-web/stories/User Interaction/List/ListNavigationItem.stories.tsx b/packages/hightide-web/stories/interaction/list/ListNavigationItem.stories.tsx
similarity index 92%
rename from packages/hightide-web/stories/User Interaction/List/ListNavigationItem.stories.tsx
rename to packages/hightide-web/stories/interaction/list/ListNavigationItem.stories.tsx
index cbcb5ead..24e363f6 100644
--- a/packages/hightide-web/stories/User Interaction/List/ListNavigationItem.stories.tsx	
+++ b/packages/hightide-web/stories/interaction/list/ListNavigationItem.stories.tsx
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { UserRound } from 'lucide-react'
-import { Card } from '../../../src/components/display-and-visualization/Card'
+import { Card } from '../../../src/components/layout/Card'
 import { Divider } from '../../../src/components/layout/Divider'
-import { ListNavigationItem } from '../../../src/components/list/ListNavigationItem'
-import type { ListItemColor, ListItemContentOrder } from '../../../src/components/list/ListItemTypes'
+import { ListNavigationItem } from '../../../src/components/interaction/list/ListNavigationItem'
+import type { ListItemColor, ListItemContentOrder } from '../../../src/components/layout/list/ListItemTypes'
 
 const contentOrders = ['titleFirst', 'subtitleFirst'] as const satisfies readonly ListItemContentOrder[]
 const colors = ['default', 'primary', 'secondary', 'positive', 'warning', 'negative', 'neutral'] as const
diff --git a/packages/hightide-web/stories/Layout/Navigation/BreadCrumbs.stories.tsx b/packages/hightide-web/stories/interaction/navigation/BreadCrumbs.stories.tsx
similarity index 82%
rename from packages/hightide-web/stories/Layout/Navigation/BreadCrumbs.stories.tsx
rename to packages/hightide-web/stories/interaction/navigation/BreadCrumbs.stories.tsx
index 6f3321ee..e20dc5e5 100644
--- a/packages/hightide-web/stories/Layout/Navigation/BreadCrumbs.stories.tsx
+++ b/packages/hightide-web/stories/interaction/navigation/BreadCrumbs.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { BreadCrumbs } from '../../../src/components/layout/navigation/BreadCrumbs'
+import { BreadCrumbs } from '../../../src/components/interaction/navigation/BreadCrumbs'
 
 const meta = {
   component: BreadCrumbs,
diff --git a/packages/hightide-web/stories/Layout/Navigation/Navigation.stories.tsx b/packages/hightide-web/stories/interaction/navigation/Navigation.stories.tsx
similarity index 87%
rename from packages/hightide-web/stories/Layout/Navigation/Navigation.stories.tsx
rename to packages/hightide-web/stories/interaction/navigation/Navigation.stories.tsx
index 13a5484a..f30dc7bc 100644
--- a/packages/hightide-web/stories/Layout/Navigation/Navigation.stories.tsx
+++ b/packages/hightide-web/stories/interaction/navigation/Navigation.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Navigation } from '../../../src/components/layout/navigation/Navigation'
+import { Navigation } from '../../../src/components/interaction/navigation/Navigation'
 
 const meta = {
   component: Navigation,
diff --git a/packages/hightide-web/stories/User Interaction/StepperBar.stories.tsx b/packages/hightide-web/stories/interaction/navigation/StepperBar.stories.tsx
similarity index 84%
rename from packages/hightide-web/stories/User Interaction/StepperBar.stories.tsx
rename to packages/hightide-web/stories/interaction/navigation/StepperBar.stories.tsx
index 5dea40f2..05a4095e 100644
--- a/packages/hightide-web/stories/User Interaction/StepperBar.stories.tsx	
+++ b/packages/hightide-web/stories/interaction/navigation/StepperBar.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { StepperBar } from '../../src/components/layout/navigation/StepperBar'
+import { StepperBar } from '../../../src/components/interaction/navigation/StepperBar'
 
 const meta = {
   component: StepperBar,
diff --git a/packages/hightide-web/stories/Layout/Navigation/VerticalNavigation.stories.tsx b/packages/hightide-web/stories/interaction/navigation/VerticalNavigation.stories.tsx
similarity index 96%
rename from packages/hightide-web/stories/Layout/Navigation/VerticalNavigation.stories.tsx
rename to packages/hightide-web/stories/interaction/navigation/VerticalNavigation.stories.tsx
index fbf6ffe1..249e90f1 100644
--- a/packages/hightide-web/stories/Layout/Navigation/VerticalNavigation.stories.tsx
+++ b/packages/hightide-web/stories/interaction/navigation/VerticalNavigation.stories.tsx
@@ -19,8 +19,8 @@ import {
   Users,
   UsersRound
 } from 'lucide-react'
-import { VerticalNavigationMenu } from '../../../src/components/layout/navigation/navigation-menus/VerticalNavigationMenu'
-import type { NavigationItemData } from '../../../src/components/layout/navigation/navigation-menus/types'
+import { VerticalNavigationMenu } from '../../../src/components/interaction/navigation/navigation-menus/VerticalNavigationMenu'
+import type { NavigationItemData } from '../../../src/components/interaction/navigation/navigation-menus/types'
 
 function navigationLabel(icon: ReactNode, label: string) {
   return (
diff --git a/packages/hightide-web/stories/Layout/AnchoredFloatingContainer.stories.tsx b/packages/hightide-web/stories/layout/AnchoredFloatingContainer.stories.tsx
similarity index 100%
rename from packages/hightide-web/stories/Layout/AnchoredFloatingContainer.stories.tsx
rename to packages/hightide-web/stories/layout/AnchoredFloatingContainer.stories.tsx
diff --git a/packages/hightide-web/stories/Display And Visualization/Card/Card.stories.tsx b/packages/hightide-web/stories/layout/Card.stories.tsx
similarity index 85%
rename from packages/hightide-web/stories/Display And Visualization/Card/Card.stories.tsx
rename to packages/hightide-web/stories/layout/Card.stories.tsx
index ca3477f2..8230dab1 100644
--- a/packages/hightide-web/stories/Display And Visualization/Card/Card.stories.tsx	
+++ b/packages/hightide-web/stories/layout/Card.stories.tsx
@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
 import { Bell, Building2, LogOut, UserRound } from 'lucide-react'
-import { Card } from '../../../src/components/display-and-visualization/Card'
-import { Divider } from '../../../src/components/layout/Divider'
-import { ListActionItem } from '../../../src/components/list/ListActionItem'
-import { ListItem } from '../../../src/components/list/ListItem'
-import { ListNavigationItem } from '../../../src/components/list/ListNavigationItem'
-import { Switch } from '../../../src/components/user-interaction/Switch'
+import { Card } from '../../src/components/layout/Card'
+import { Divider } from '../../src/components/layout/Divider'
+import { ListActionItem } from '../../src/components/interaction/list/ListActionItem'
+import { ListItem } from '../../src/components/layout/list/ListItem'
+import { ListNavigationItem } from '../../src/components/interaction/list/ListNavigationItem'
+import { Switch } from '../../src/components/data-input/Switch'
 
 const meta: Meta<typeof Card> = {
   component: Card,
diff --git a/packages/hightide-web/stories/Layout/Carousel.stories.tsx b/packages/hightide-web/stories/layout/Carousel/Carousel.stories.tsx
similarity index 91%
rename from packages/hightide-web/stories/Layout/Carousel.stories.tsx
rename to packages/hightide-web/stories/layout/Carousel/Carousel.stories.tsx
index 9575f910..2f96a3d0 100644
--- a/packages/hightide-web/stories/Layout/Carousel.stories.tsx
+++ b/packages/hightide-web/stories/layout/Carousel/Carousel.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { clsx } from 'clsx'
-import type { CarouselProps } from '../../src/components/layout/Carousel'
-import { Carousel } from '../../src/components/layout/Carousel'
+import type { CarouselProps } from '../../../src/components/layout/Carousel'
+import { Carousel } from '../../../src/components/layout/Carousel'
 import { range } from '@helpwave/hightide-utils/utils'
 
 type StoryArgs = CarouselProps & {
diff --git a/packages/hightide-web/stories/Layout/Drawer/Drawer.stories.tsx b/packages/hightide-web/stories/layout/Drawer/Drawer.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/Layout/Drawer/Drawer.stories.tsx
rename to packages/hightide-web/stories/layout/Drawer/Drawer.stories.tsx
index 6bfbfb93..98e3fe02 100644
--- a/packages/hightide-web/stories/Layout/Drawer/Drawer.stories.tsx
+++ b/packages/hightide-web/stories/layout/Drawer/Drawer.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { Drawer } from '../../../src/components/layout/drawer/Drawer'
-import { Button } from '../../../src/components/user-interaction/Button'
+import { Drawer } from '../../../src/components/layout/Drawer/Drawer'
+import { Button } from '../../../src/components/interaction/Button'
 
 const meta: Meta<typeof Drawer> = {
   component: Drawer,
diff --git a/packages/hightide-web/stories/Layout/Drawer/StackedDrawer.stories.tsx b/packages/hightide-web/stories/layout/Drawer/StackedDrawer.stories.tsx
similarity index 92%
rename from packages/hightide-web/stories/Layout/Drawer/StackedDrawer.stories.tsx
rename to packages/hightide-web/stories/layout/Drawer/StackedDrawer.stories.tsx
index 7f61d601..2b8c632e 100644
--- a/packages/hightide-web/stories/Layout/Drawer/StackedDrawer.stories.tsx
+++ b/packages/hightide-web/stories/layout/Drawer/StackedDrawer.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { DrawerAligment } from '../../../src/components/layout/drawer/Drawer'
-import { Drawer } from '../../../src/components/layout/drawer/Drawer'
+import type { DrawerAligment } from '../../../src/components/layout/Drawer/Drawer'
+import { Drawer } from '../../../src/components/layout/Drawer/Drawer'
 import { useState } from 'react'
-import { Button } from '../../../src/components/user-interaction/Button'
+import { Button } from '../../../src/components/interaction/Button'
 
 type StoryArgs = {
   alignment: DrawerAligment,
diff --git a/packages/hightide-web/stories/Layout/Expandable.stories.tsx b/packages/hightide-web/stories/layout/ExpandableSection/Expandable.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/Layout/Expandable.stories.tsx
rename to packages/hightide-web/stories/layout/ExpandableSection/Expandable.stories.tsx
index 438ff47e..9b53686b 100644
--- a/packages/hightide-web/stories/Layout/Expandable.stories.tsx
+++ b/packages/hightide-web/stories/layout/ExpandableSection/Expandable.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { ExpandableSection } from '../../src/components/layout/ExpandableSection'
+import { ExpandableSection } from '../../../src/components/layout/ExpandableSection'
 import { range } from '@helpwave/hightide-utils/utils'
 
 const meta = {
diff --git a/packages/hightide-web/stories/Layout/FAQSection.stories.tsx b/packages/hightide-web/stories/layout/FAQSection.stories.tsx
similarity index 90%
rename from packages/hightide-web/stories/Layout/FAQSection.stories.tsx
rename to packages/hightide-web/stories/layout/FAQSection.stories.tsx
index 58e8ad7c..0777d01f 100644
--- a/packages/hightide-web/stories/Layout/FAQSection.stories.tsx
+++ b/packages/hightide-web/stories/layout/FAQSection.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { FAQSection } from '../../src/components/layout/FAQSection'
-import { HelpwaveLogo } from '../../src/components/branding/HelpwaveLogo'
-import { MarkdownInterpreter } from '../../src/components/layout/MarkdownInterpreter'
+import { HelpwaveLogo } from '../../src/components/branding/visualization/HelpwaveLogo'
+import { MarkdownInterpreter } from '../../src/components/visualization/MarkdownInterpreter'
 
 const meta = {
   component: FAQSection,
diff --git a/packages/hightide-web/stories/Layout/Modal/ConfirmModal.stories.tsx b/packages/hightide-web/stories/layout/Modal/ConfirmModal.stories.tsx
similarity index 100%
rename from packages/hightide-web/stories/Layout/Modal/ConfirmModal.stories.tsx
rename to packages/hightide-web/stories/layout/Modal/ConfirmModal.stories.tsx
diff --git a/packages/hightide-web/stories/Layout/Modal/DiscardChangesModal.stories.tsx b/packages/hightide-web/stories/layout/Modal/DiscardChangesModal.stories.tsx
similarity index 100%
rename from packages/hightide-web/stories/Layout/Modal/DiscardChangesModal.stories.tsx
rename to packages/hightide-web/stories/layout/Modal/DiscardChangesModal.stories.tsx
diff --git a/packages/hightide-web/stories/Internationalization/LanguageModal.stories.tsx b/packages/hightide-web/stories/layout/Modal/LanguageModal.stories.tsx
similarity index 74%
rename from packages/hightide-web/stories/Internationalization/LanguageModal.stories.tsx
rename to packages/hightide-web/stories/layout/Modal/LanguageModal.stories.tsx
index b14bc39d..fbdccb84 100644
--- a/packages/hightide-web/stories/Internationalization/LanguageModal.stories.tsx
+++ b/packages/hightide-web/stories/layout/Modal/LanguageModal.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { LanguageModal } from '../../src/components/layout/Modal/LanguageModal'
+import { LanguageModal } from '../../../src/components/layout/Modal/LanguageModal'
 
 const meta: Meta = {
   component: LanguageModal,
diff --git a/packages/hightide-web/stories/Layout/Modal/StackedModal.stories.tsx b/packages/hightide-web/stories/layout/Modal/StackedModal.stories.tsx
similarity index 97%
rename from packages/hightide-web/stories/Layout/Modal/StackedModal.stories.tsx
rename to packages/hightide-web/stories/layout/Modal/StackedModal.stories.tsx
index d1829578..8fd6999b 100644
--- a/packages/hightide-web/stories/Layout/Modal/StackedModal.stories.tsx
+++ b/packages/hightide-web/stories/layout/Modal/StackedModal.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Modal } from '../../../src/components/layout/Modal/Modal'
 import type { ModalPosition } from '../../../src/components/layout/Modal/Modal'
-import { Button } from '../../../src/components/user-interaction/Button'
+import { Button } from '../../../src/components/interaction/Button'
 
 type StoryArgs = {
   position: ModalPosition,
diff --git a/packages/hightide-web/stories/Themeing/ThemeModal.stories.tsx b/packages/hightide-web/stories/layout/Modal/ThemeModal.stories.tsx
similarity index 75%
rename from packages/hightide-web/stories/Themeing/ThemeModal.stories.tsx
rename to packages/hightide-web/stories/layout/Modal/ThemeModal.stories.tsx
index b88c88ec..7d776a82 100644
--- a/packages/hightide-web/stories/Themeing/ThemeModal.stories.tsx
+++ b/packages/hightide-web/stories/layout/Modal/ThemeModal.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj  } from '@storybook/nextjs-vite'
-import { ThemeModal } from '../../src/components/layout/Modal/ThemeModal'
+import { ThemeModal } from '../../../src/components/layout/Modal/ThemeModal'
 
 const meta: Meta = {
   component: ThemeModal,
diff --git a/packages/hightide-web/stories/Themeing/ThemeSelect.stories.tsx b/packages/hightide-web/stories/layout/Modal/ThemeSelect.stories.tsx
similarity index 74%
rename from packages/hightide-web/stories/Themeing/ThemeSelect.stories.tsx
rename to packages/hightide-web/stories/layout/Modal/ThemeSelect.stories.tsx
index 875fc4f0..6ceedf9b 100644
--- a/packages/hightide-web/stories/Themeing/ThemeSelect.stories.tsx
+++ b/packages/hightide-web/stories/layout/Modal/ThemeSelect.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj  } from '@storybook/nextjs-vite'
-import { ThemeSelect } from '../../src/components/layout/Modal/ThemeModal'
+import { ThemeSelect } from '../../../src/components/layout/Modal/ThemeModal'
 
 const meta: Meta = {
   component: ThemeSelect,
diff --git a/packages/hightide-web/stories/Layout/PopUp.stories.tsx b/packages/hightide-web/stories/layout/PopUp/PopUp.stories.tsx
similarity index 89%
rename from packages/hightide-web/stories/Layout/PopUp.stories.tsx
rename to packages/hightide-web/stories/layout/PopUp/PopUp.stories.tsx
index e131a535..5805a95b 100644
--- a/packages/hightide-web/stories/Layout/PopUp.stories.tsx
+++ b/packages/hightide-web/stories/layout/PopUp/PopUp.stories.tsx
@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useRef } from 'react'
-import type { UseAnchoredPositionOptions } from '../../src/hooks/useAnchoredPosition'
-import type { PopUpProps } from '../../src/components/layout/popup/PopUp'
-import { PopUp } from '../../src/components/layout/popup/PopUp'
+import type { UseAnchoredPositionOptions } from '../../../src/hooks/useAnchoredPosition'
+import type { PopUpProps } from '../../../src/components/layout/PopUp/PopUp'
+import { PopUp } from '../../../src/components/layout/PopUp/PopUp'
 import { action } from 'storybook/actions'
 
 type StoryArgs = Omit<PopUpProps, 'options'> & UseAnchoredPositionOptions & {
diff --git a/packages/hightide-web/stories/Layout/ScrollableList.stories.tsx b/packages/hightide-web/stories/layout/ScrollableList.stories.tsx
similarity index 96%
rename from packages/hightide-web/stories/Layout/ScrollableList.stories.tsx
rename to packages/hightide-web/stories/layout/ScrollableList.stories.tsx
index 5b19dc8d..fe6c65cb 100644
--- a/packages/hightide-web/stories/Layout/ScrollableList.stories.tsx
+++ b/packages/hightide-web/stories/layout/ScrollableList.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { ScrollableList } from '../../src/components/layout/ScrollableList'
-import { Button } from '../../src/components/user-interaction/Button'
+import { Button } from '../../src/components/interaction/Button'
 import { ColoringUtils } from '../../src/utils/coloring'
 
 const listItems = [
diff --git a/packages/hightide-web/stories/Layout/Table/AsyncDataExample.stories.tsx b/packages/hightide-web/stories/layout/Table/AsyncDataExample.stories.tsx
similarity index 96%
rename from packages/hightide-web/stories/Layout/Table/AsyncDataExample.stories.tsx
rename to packages/hightide-web/stories/layout/Table/AsyncDataExample.stories.tsx
index 6cc5fff4..3ad520d9 100644
--- a/packages/hightide-web/stories/Layout/Table/AsyncDataExample.stories.tsx
+++ b/packages/hightide-web/stories/layout/Table/AsyncDataExample.stories.tsx
@@ -2,15 +2,15 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useState, useEffect, useMemo } from 'react'
 import { faker } from '@faker-js/faker'
 import { range } from '@helpwave/hightide-utils/utils'
-import { TableColumn } from '../../../src/components/layout/table/TableColumn'
+import { TableColumn } from '../../../src/components/layout/Table/TableColumn'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { TableCell } from '../../../src/components/layout/table/TableCell'
+import { TableCell } from '../../../src/components/layout/Table/TableCell'
 import type { SortingState, ColumnFiltersState, PaginationState, TableOptions } from '@tanstack/react-table'
-import { TableColumnSwitcher } from '../../../src/components/layout/table/TableColumnSwitcher'
-import { Chip } from '../../../src/components/display-and-visualization/Chip'
-import { Table } from '../../../src/components/layout/table/Table'
+import { TableColumnSwitcher } from '../../../src/components/layout/Table/TableColumnSwitcher'
+import { Chip } from '../../../src/components/visualization/Chip'
+import { Table } from '../../../src/components/layout/Table/Table'
 import { Visibility } from '../../../src/components/layout/Visibility'
-import { FilterFunctions, type FilterValue } from '../../../src/components/user-interaction/data/filter-function'
+import { FilterFunctions, type FilterValue } from '../../../src/components/interaction/data/filter-function'
 
 const relationShipTags = ['Friend', 'Family', 'Work', 'School', 'Other'] as const
 type RelationShipTag = (typeof relationShipTags)[number]
diff --git a/packages/hightide-web/stories/Layout/Table/EmptyTable.stories.tsx b/packages/hightide-web/stories/layout/Table/EmptyTable.stories.tsx
similarity index 94%
rename from packages/hightide-web/stories/Layout/Table/EmptyTable.stories.tsx
rename to packages/hightide-web/stories/layout/Table/EmptyTable.stories.tsx
index cb2be819..94d105e5 100644
--- a/packages/hightide-web/stories/Layout/Table/EmptyTable.stories.tsx
+++ b/packages/hightide-web/stories/layout/Table/EmptyTable.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useState } from 'react'
 import type { RowSelectionState } from '@tanstack/react-table'
-import type { TableProviderProps } from '../../../src/components/layout/table/TableProvider'
-import type { TableWithSelectionProviderProps } from '../../../src/components/layout/table/TableWithSelectionProvider'
-import { Table, TableWithSelection } from '../../../src/components/layout/table/Table'
+import type { TableProviderProps } from '../../../src/components/layout/Table/TableProvider'
+import type { TableWithSelectionProviderProps } from '../../../src/components/layout/Table/TableWithSelectionProvider'
+import { Table, TableWithSelection } from '../../../src/components/layout/Table/Table'
 
 type EmptyRow = Record<string, never>
 
diff --git a/packages/hightide-web/stories/Layout/Table/FilterListTable.stories.tsx b/packages/hightide-web/stories/layout/Table/FilterListTable.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/Layout/Table/FilterListTable.stories.tsx
rename to packages/hightide-web/stories/layout/Table/FilterListTable.stories.tsx
index aebe29da..6669b98c 100644
--- a/packages/hightide-web/stories/Layout/Table/FilterListTable.stories.tsx
+++ b/packages/hightide-web/stories/layout/Table/FilterListTable.stories.tsx
@@ -3,23 +3,23 @@ import type { ColumnSort } from '@tanstack/react-table'
 import { useId, useMemo, useState } from 'react'
 import { faker } from '@faker-js/faker'
 import { range } from '@helpwave/hightide-utils/utils'
-import { Table } from '../../../src/components/layout/table/Table'
-import { TableColumn } from '../../../src/components/layout/table/TableColumn'
-import { TableCell } from '../../../src/components/layout/table/TableCell'
+import { Table } from '../../../src/components/layout/Table/Table'
+import { TableColumn } from '../../../src/components/layout/Table/TableColumn'
+import { TableCell } from '../../../src/components/layout/Table/TableCell'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { FilterList } from '../../../src/components/user-interaction/data/FilterList'
-import type { IdentifierFilterValue, FilterListItem, FilterListPopUpBuilderProps } from '../../../src/components/user-interaction/data/FilterList'
-import { FilterFunctions } from '../../../src/components/user-interaction/data/filter-function'
-import type { DataType } from '../../../src/components/user-interaction/data/data-types'
-import { FilterOperatorUtils } from '../../../src/components/user-interaction/data/FilterOperator'
-import { FilterBasePopUp } from '../../../src/components/user-interaction/data/FilterPopUp'
-import { Input } from '../../../src/components/user-interaction/input/Input'
-import { Select } from '../../../src/components/user-interaction/Select/Select'
+import { FilterList } from '../../../src/components/interaction/data/FilterList'
+import type { IdentifierFilterValue, FilterListItem, FilterListPopUpBuilderProps } from '../../../src/components/interaction/data/FilterList'
+import { FilterFunctions } from '../../../src/components/interaction/data/filter-function'
+import type { DataType } from '../../../src/components/interaction/data/data-types'
+import { FilterOperatorUtils } from '../../../src/components/interaction/data/FilterOperator'
+import { FilterBasePopUp } from '../../../src/components/interaction/data/FilterPopUp'
+import { Input } from '../../../src/components/data-input/input/Input'
+import { Select } from '../../../src/components/data-input/Select/Select'
 import { Visibility } from '../../../src/components/layout/Visibility'
-import { SortingList } from '../../../src/components/user-interaction/data/SortingList'
-import type { SortingListItem } from '../../../src/components/user-interaction/data/SortingList'
+import { SortingList } from '../../../src/components/interaction/data/SortingList'
+import type { SortingListItem } from '../../../src/components/interaction/data/SortingList'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
-import { TableColumnSwitcher } from '../../../src/components/layout/table/TableColumnSwitcher'
+import { TableColumnSwitcher } from '../../../src/components/layout/Table/TableColumnSwitcher'
 
 type Row = {
   name: string,
diff --git a/packages/hightide-web/stories/Layout/Table/NaturalColumnSizing.stories.tsx b/packages/hightide-web/stories/layout/Table/NaturalColumnSizing.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/Layout/Table/NaturalColumnSizing.stories.tsx
rename to packages/hightide-web/stories/layout/Table/NaturalColumnSizing.stories.tsx
index 0060fe70..3d93b4dc 100644
--- a/packages/hightide-web/stories/Layout/Table/NaturalColumnSizing.stories.tsx
+++ b/packages/hightide-web/stories/layout/Table/NaturalColumnSizing.stories.tsx
@@ -2,10 +2,10 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useCallback, useState } from 'react'
 import { faker } from '@faker-js/faker'
 import { range } from '@helpwave/hightide-utils/utils'
-import { Table } from '../../../src/components/layout/table/Table'
-import { TableColumn } from '../../../src/components/layout/table/TableColumn'
-import { Button } from '../../../src/components/user-interaction/Button'
-import { Chip } from '../../../src/components/display-and-visualization/Chip'
+import { Table } from '../../../src/components/layout/Table/Table'
+import { TableColumn } from '../../../src/components/layout/Table/TableColumn'
+import { Button } from '../../../src/components/interaction/Button'
+import { Chip } from '../../../src/components/visualization/Chip'
 
 type Row = {
   id: string,
diff --git a/packages/hightide-web/stories/Layout/Table/PageScrollTable.stories.tsx b/packages/hightide-web/stories/layout/Table/PageScrollTable.stories.tsx
similarity index 95%
rename from packages/hightide-web/stories/Layout/Table/PageScrollTable.stories.tsx
rename to packages/hightide-web/stories/layout/Table/PageScrollTable.stories.tsx
index f8aab7de..828bc6d2 100644
--- a/packages/hightide-web/stories/Layout/Table/PageScrollTable.stories.tsx
+++ b/packages/hightide-web/stories/layout/Table/PageScrollTable.stories.tsx
@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { faker } from '@faker-js/faker'
 import { range } from '@helpwave/hightide-utils/utils'
-import { Table } from '../../../src/components/layout/table/Table'
-import { TableColumn } from '../../../src/components/layout/table/TableColumn'
-import { Chip } from '../../../src/components/display-and-visualization/Chip'
+import { Table } from '../../../src/components/layout/Table/Table'
+import { TableColumn } from '../../../src/components/layout/Table/TableColumn'
+import { Chip } from '../../../src/components/visualization/Chip'
 
 type Person = {
   id: string,
diff --git a/packages/hightide-web/stories/Layout/Table/Selection.stories.tsx b/packages/hightide-web/stories/layout/Table/Selection.stories.tsx
similarity index 93%
rename from packages/hightide-web/stories/Layout/Table/Selection.stories.tsx
rename to packages/hightide-web/stories/layout/Table/Selection.stories.tsx
index 78de759e..97b19752 100644
--- a/packages/hightide-web/stories/Layout/Table/Selection.stories.tsx
+++ b/packages/hightide-web/stories/layout/Table/Selection.stories.tsx
@@ -3,14 +3,14 @@ import { useState } from 'react'
 import type { RowSelectionState } from '@tanstack/react-table'
 import { faker } from '@faker-js/faker'
 import { range } from '@helpwave/hightide-utils/utils'
-import type { TableWithSelectionProviderProps } from '../../../src/components/layout/table/TableWithSelectionProvider'
-import { TableColumn } from '../../../src/components/layout/table/TableColumn'
+import type { TableWithSelectionProviderProps } from '../../../src/components/layout/Table/TableWithSelectionProvider'
+import { TableColumn } from '../../../src/components/layout/Table/TableColumn'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import { TableCell } from '../../../src/components/layout/table/TableCell'
-import { Button } from '../../../src/components/user-interaction/Button'
-import { TableColumnSwitcher } from '../../../src/components/layout/table/TableColumnSwitcher'
-import { Chip } from '../../../src/components/display-and-visualization/Chip'
-import { TableWithSelection } from '../../../src/components/layout/table/Table'
+import { TableCell } from '../../../src/components/layout/Table/TableCell'
+import { Button } from '../../../src/components/interaction/Button'
+import { TableColumnSwitcher } from '../../../src/components/layout/Table/TableColumnSwitcher'
+import { Chip } from '../../../src/components/visualization/Chip'
+import { TableWithSelection } from '../../../src/components/layout/Table/Table'
 
 const tags = ['Friend', 'Family', 'Work', 'School', 'Other'] as const
 type Tag = (typeof tags)[number]
diff --git a/packages/hightide-web/stories/Layout/Table/VirtualizedInfiniteScrolling.stories.tsx b/packages/hightide-web/stories/layout/Table/VirtualizedInfiniteScrolling.stories.tsx
similarity index 94%
rename from packages/hightide-web/stories/Layout/Table/VirtualizedInfiniteScrolling.stories.tsx
rename to packages/hightide-web/stories/layout/Table/VirtualizedInfiniteScrolling.stories.tsx
index a7b099b2..c009677e 100644
--- a/packages/hightide-web/stories/Layout/Table/VirtualizedInfiniteScrolling.stories.tsx
+++ b/packages/hightide-web/stories/layout/Table/VirtualizedInfiniteScrolling.stories.tsx
@@ -2,11 +2,11 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { faker } from '@faker-js/faker'
 import { range } from '@helpwave/hightide-utils/utils'
-import { Table } from '../../../src/components/layout/table/Table'
-import { TableColumn } from '../../../src/components/layout/table/TableColumn'
-import { TableCell } from '../../../src/components/layout/table/TableCell'
-import { TableColumnSwitcher } from '../../../src/components/layout/table/TableColumnSwitcher'
-import { Chip } from '../../../src/components/display-and-visualization/Chip'
+import { Table } from '../../../src/components/layout/Table/Table'
+import { TableColumn } from '../../../src/components/layout/Table/TableColumn'
+import { TableCell } from '../../../src/components/layout/Table/TableCell'
+import { TableColumnSwitcher } from '../../../src/components/layout/Table/TableColumnSwitcher'
+import { Chip } from '../../../src/components/visualization/Chip'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
 type Person = {
diff --git a/packages/hightide-web/stories/Layout/VerticalDivider.stories.tsx b/packages/hightide-web/stories/layout/VerticalDivider.stories.tsx
similarity index 100%
rename from packages/hightide-web/stories/Layout/VerticalDivider.stories.tsx
rename to packages/hightide-web/stories/layout/VerticalDivider.stories.tsx
diff --git a/packages/hightide-web/stories/Layout/AppPage.stories.tsx b/packages/hightide-web/stories/layout/app/AppPage.stories.tsx
similarity index 92%
rename from packages/hightide-web/stories/Layout/AppPage.stories.tsx
rename to packages/hightide-web/stories/layout/app/AppPage.stories.tsx
index 65e24456..d033106e 100644
--- a/packages/hightide-web/stories/Layout/AppPage.stories.tsx
+++ b/packages/hightide-web/stories/layout/app/AppPage.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Bell, File, Folder, Package, Settings } from 'lucide-react'
-import type { AppPageNavigationItem } from '../../src/components/layout/app/AppPage'
-import { AppPage } from '../../src/components/layout/app/AppPage'
-import { HelpwaveBadge } from '../../src/components/branding/HelpwaveBadge'
-import { IconButton } from '../../src/components/user-interaction/IconButton'
+import type { AppPageNavigationItem } from '../../../src/components/layout/app/AppPage'
+import { AppPage } from '../../../src/components/layout/app/AppPage'
+import { HelpwaveBadge } from '../../../src/components/branding/visualization/HelpwaveBadge'
+import { IconButton } from '../../../src/components/interaction/IconButton'
 import { useEffect, useState } from 'react'
 
 const initialNavigationItems: AppPageNavigationItem[] = [
diff --git a/packages/hightide-web/stories/User Interaction/Form/Form.stories.tsx b/packages/hightide-web/stories/layout/form/Form.stories.tsx
similarity index 94%
rename from packages/hightide-web/stories/User Interaction/Form/Form.stories.tsx
rename to packages/hightide-web/stories/layout/form/Form.stories.tsx
index 9b1df00e..cc57c23d 100644
--- a/packages/hightide-web/stories/User Interaction/Form/Form.stories.tsx	
+++ b/packages/hightide-web/stories/layout/form/Form.stories.tsx
@@ -3,19 +3,19 @@ import { action } from 'storybook/actions'
 import type { StorybookHelperSelectType } from '../../../src/storybook/helper'
 import { StorybookHelper } from '../../../src/storybook/helper'
 import { useTranslatedValidators } from '../../../src/hooks/useValidators'
-import { Input } from '../../../src/components/user-interaction/input/Input'
-import { MultiSelect } from '../../../src/components/user-interaction/MultiSelect/MultiSelect'
-import { Select } from '../../../src/components/user-interaction/Select/Select'
-import { Textarea } from '../../../src/components/user-interaction/Textarea'
-import { Button } from '../../../src/components/user-interaction/Button'
-import { useCreateForm } from '../../../src/components/form/useCreateForm'
+import { Input } from '../../../src/components/data-input/input/Input'
+import { MultiSelect } from '../../../src/components/data-input/MultiSelect/MultiSelect'
+import { Select } from '../../../src/components/data-input/Select/Select'
+import { Textarea } from '../../../src/components/data-input/Textarea'
+import { Button } from '../../../src/components/interaction/Button'
+import { useCreateForm } from '../../../src/components/layout/form/useCreateForm'
 import { Visibility } from '../../../src/components/layout/Visibility'
-import { HelpwaveLogo } from '../../../src/components/branding/HelpwaveLogo'
+import { HelpwaveLogo } from '../../../src/components/branding/visualization/HelpwaveLogo'
 import { useEffect, useMemo, useState } from 'react'
-import type { FormValidationBehaviour } from '../../../src/components/form/FormStore'
-import { FormField } from '../../../src/components/form/FormField'
-import { FormProvider } from '../../../src/components/form/FormContext'
-import { DateTimeInput } from '../../../src/components/user-interaction/input/DateTimeInput'
+import type { FormValidationBehaviour } from '../../../src/components/layout/form/FormStore'
+import { FormField } from '../../../src/components/layout/form/FormField'
+import { FormProvider } from '../../../src/components/layout/form/FormContext'
+import { DateTimeInput } from '../../../src/components/data-input/input/DateTimeInput'
 
 type FormState = 'editing' | 'sending' | 'submitted'
 
diff --git a/packages/hightide-web/stories/User Interaction/List/ListItem.stories.tsx b/packages/hightide-web/stories/layout/list/ListItem.stories.tsx
similarity index 91%
rename from packages/hightide-web/stories/User Interaction/List/ListItem.stories.tsx
rename to packages/hightide-web/stories/layout/list/ListItem.stories.tsx
index 8868ba2d..c60ae91b 100644
--- a/packages/hightide-web/stories/User Interaction/List/ListItem.stories.tsx	
+++ b/packages/hightide-web/stories/layout/list/ListItem.stories.tsx
@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Bell, ChevronRight } from 'lucide-react'
-import { Card } from '../../../src/components/display-and-visualization/Card'
+import { Card } from '../../../src/components/layout/Card'
 import { Divider } from '../../../src/components/layout/Divider'
-import { ListItem } from '../../../src/components/list/ListItem'
-import type { ListItemContentOrder } from '../../../src/components/list/ListItemTypes'
+import { ListItem } from '../../../src/components/layout/list/ListItem'
+import type { ListItemContentOrder } from '../../../src/components/layout/list/ListItemTypes'
 
 const contentOrders = ['titleFirst', 'subtitleFirst'] as const satisfies readonly ListItemContentOrder[]
 
diff --git a/packages/hightide-web/stories/Layout/Loading/LoadingAndErrorContainer.stories.tsx b/packages/hightide-web/stories/layout/loading/LoadingAndErrorContainer.stories.tsx
similarity index 100%
rename from packages/hightide-web/stories/Layout/Loading/LoadingAndErrorContainer.stories.tsx
rename to packages/hightide-web/stories/layout/loading/LoadingAndErrorContainer.stories.tsx
diff --git a/packages/hightide-web/stories/Layout/Loading/LoadingContainer.stories.tsx b/packages/hightide-web/stories/layout/loading/LoadingContainer.stories.tsx
similarity index 100%
rename from packages/hightide-web/stories/Layout/Loading/LoadingContainer.stories.tsx
rename to packages/hightide-web/stories/layout/loading/LoadingContainer.stories.tsx
diff --git a/packages/hightide-web/stories/Layout/Virtualization/VirtualizedCardGrid.stories.tsx b/packages/hightide-web/stories/layout/virtualization/VirtualizedCardGrid.stories.tsx
similarity index 98%
rename from packages/hightide-web/stories/Layout/Virtualization/VirtualizedCardGrid.stories.tsx
rename to packages/hightide-web/stories/layout/virtualization/VirtualizedCardGrid.stories.tsx
index a50e93f7..1c34185e 100644
--- a/packages/hightide-web/stories/Layout/Virtualization/VirtualizedCardGrid.stories.tsx
+++ b/packages/hightide-web/stories/layout/virtualization/VirtualizedCardGrid.stories.tsx
@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { faker } from '@faker-js/faker'
 import { range } from '@helpwave/hightide-utils/utils'
 import { VirtualizedCardGrid } from '../../../src/components/layout/virtualization/VirtualizedCardGrid'
-import { Chip } from '../../../src/components/display-and-visualization/Chip'
+import { Chip } from '../../../src/components/visualization/Chip'
 
 type Item = {
   id: string,
diff --git a/packages/hightide-web/stories/User Interaction/Properties/CheckboxProperty.stories.tsx b/packages/hightide-web/stories/properties/CheckboxProperty.stories.tsx
similarity index 92%
rename from packages/hightide-web/stories/User Interaction/Properties/CheckboxProperty.stories.tsx
rename to packages/hightide-web/stories/properties/CheckboxProperty.stories.tsx
index d08df7d3..462539ef 100644
--- a/packages/hightide-web/stories/User Interaction/Properties/CheckboxProperty.stories.tsx	
+++ b/packages/hightide-web/stories/properties/CheckboxProperty.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useEffect, useState } from 'react'
-import { CheckboxProperty } from '../../../src/components/user-interaction/properties/CheckboxProperty'
+import { CheckboxProperty } from '../../src/components/properties/CheckboxProperty'
 import { action } from 'storybook/actions'
 
 const meta: Meta<typeof CheckboxProperty> = {
diff --git a/packages/hightide-web/stories/User Interaction/Properties/DateProperty.stories.tsx b/packages/hightide-web/stories/properties/DateProperty.stories.tsx
similarity index 92%
rename from packages/hightide-web/stories/User Interaction/Properties/DateProperty.stories.tsx
rename to packages/hightide-web/stories/properties/DateProperty.stories.tsx
index 2d3264a6..9cd58170 100644
--- a/packages/hightide-web/stories/User Interaction/Properties/DateProperty.stories.tsx	
+++ b/packages/hightide-web/stories/properties/DateProperty.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useEffect, useState } from 'react'
-import { DateProperty } from '../../../src/components/user-interaction/properties/DateProperty'
+import { DateProperty } from '../../src/components/properties/DateProperty'
 import { action } from 'storybook/actions'
 
 const meta: Meta<typeof DateProperty> = {
diff --git a/packages/hightide-web/stories/User Interaction/Properties/MultiSelectProperty.stories.tsx b/packages/hightide-web/stories/properties/MultiSelectProperty.stories.tsx
similarity index 86%
rename from packages/hightide-web/stories/User Interaction/Properties/MultiSelectProperty.stories.tsx
rename to packages/hightide-web/stories/properties/MultiSelectProperty.stories.tsx
index aa9ec9c9..9a505263 100644
--- a/packages/hightide-web/stories/User Interaction/Properties/MultiSelectProperty.stories.tsx	
+++ b/packages/hightide-web/stories/properties/MultiSelectProperty.stories.tsx
@@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useState } from 'react'
 import { action } from 'storybook/actions'
 import clsx from 'clsx'
-import { MultiSelectProperty } from '../../../src/components/user-interaction/properties/MultiSelectProperty'
-import { StorybookHelper } from '../../../src/storybook/helper'
-import { MultiSelect } from '../../../src/components/user-interaction/MultiSelect/MultiSelect'
+import { MultiSelectProperty } from '../../src/components/properties/MultiSelectProperty'
+import { StorybookHelper } from '../../src/storybook/helper'
+import { MultiSelect } from '../../src/components/data-input/MultiSelect/MultiSelect'
 
 const options = StorybookHelper.selectValues
 
diff --git a/packages/hightide-web/stories/User Interaction/Properties/NumberProperty.stories.tsx b/packages/hightide-web/stories/properties/NumberProperty.stories.tsx
similarity index 92%
rename from packages/hightide-web/stories/User Interaction/Properties/NumberProperty.stories.tsx
rename to packages/hightide-web/stories/properties/NumberProperty.stories.tsx
index 2230a93e..d3e35d85 100644
--- a/packages/hightide-web/stories/User Interaction/Properties/NumberProperty.stories.tsx	
+++ b/packages/hightide-web/stories/properties/NumberProperty.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useEffect, useState } from 'react'
-import { NumberProperty } from '../../../src/components/user-interaction/properties/NumberProperty'
+import { NumberProperty } from '../../src/components/properties/NumberProperty'
 import { action } from 'storybook/actions'
 
 const meta: Meta<typeof NumberProperty> = {
diff --git a/packages/hightide-web/stories/User Interaction/Properties/PropertyBase.stories.tsx b/packages/hightide-web/stories/properties/PropertyBase.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/User Interaction/Properties/PropertyBase.stories.tsx
rename to packages/hightide-web/stories/properties/PropertyBase.stories.tsx
index aa68b8a3..543dd974 100644
--- a/packages/hightide-web/stories/User Interaction/Properties/PropertyBase.stories.tsx	
+++ b/packages/hightide-web/stories/properties/PropertyBase.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import clsx from 'clsx'
-import { PropertyBase } from '../../../src/components/user-interaction/properties/PropertyBase'
+import { PropertyBase } from '../../src/components/properties/PropertyBase'
 import { Text } from 'lucide-react'
 import { action } from 'storybook/actions'
 
diff --git a/packages/hightide-web/stories/User Interaction/Properties/SingleSelectProperty.stories.tsx b/packages/hightide-web/stories/properties/SingleSelectProperty.stories.tsx
similarity index 87%
rename from packages/hightide-web/stories/User Interaction/Properties/SingleSelectProperty.stories.tsx
rename to packages/hightide-web/stories/properties/SingleSelectProperty.stories.tsx
index fe958ab4..31c1e2c6 100644
--- a/packages/hightide-web/stories/User Interaction/Properties/SingleSelectProperty.stories.tsx	
+++ b/packages/hightide-web/stories/properties/SingleSelectProperty.stories.tsx
@@ -1,10 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useState } from 'react'
 import { action } from 'storybook/actions'
-import { StorybookHelper } from '../../../src/storybook/helper'
+import { StorybookHelper } from '../../src/storybook/helper'
 import clsx from 'clsx'
-import { SingleSelectProperty } from '../../../src/components/user-interaction/properties/SelectProperty'
-import { Select } from '../../../src/components/user-interaction/Select/Select'
+import { SingleSelectProperty } from '../../src/components/properties/SelectProperty'
+import { Select } from '../../src/components/data-input/Select/Select'
 const options = [...StorybookHelper.selectValues]
 
 
diff --git a/packages/hightide-web/stories/User Interaction/Properties/TextProperty.stories.tsx b/packages/hightide-web/stories/properties/TextProperty.stories.tsx
similarity index 92%
rename from packages/hightide-web/stories/User Interaction/Properties/TextProperty.stories.tsx
rename to packages/hightide-web/stories/properties/TextProperty.stories.tsx
index 3e305d9e..c455a791 100644
--- a/packages/hightide-web/stories/User Interaction/Properties/TextProperty.stories.tsx	
+++ b/packages/hightide-web/stories/properties/TextProperty.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useEffect, useState } from 'react'
-import { TextProperty } from '../../../src/components/user-interaction/properties/TextProperty'
+import { TextProperty } from '../../src/components/properties/TextProperty'
 import { action } from 'storybook/actions'
 
 const meta: Meta<typeof TextProperty> = {
diff --git a/packages/hightide-web/stories/Display And Visualization/Avatar/Avatar.stories.tsx b/packages/hightide-web/stories/visualization/Avatar/Avatar.stories.tsx
similarity index 85%
rename from packages/hightide-web/stories/Display And Visualization/Avatar/Avatar.stories.tsx
rename to packages/hightide-web/stories/visualization/Avatar/Avatar.stories.tsx
index eab0e016..4492c897 100644
--- a/packages/hightide-web/stories/Display And Visualization/Avatar/Avatar.stories.tsx	
+++ b/packages/hightide-web/stories/visualization/Avatar/Avatar.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Avatar } from '../../../src/components/display-and-visualization/Avatar/Avatar'
-import type { AvatarStatus } from '../../../src/components/display-and-visualization/Avatar/AvatarTypes'
+import { Avatar } from '../../../src/components/visualization/Avatar/Avatar'
+import type { AvatarStatus } from '../../../src/components/visualization/Avatar/AvatarTypes'
 
 type StoryArgs = {
   useName: boolean,
diff --git a/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarWithLabel.stories.tsx b/packages/hightide-web/stories/visualization/Avatar/AvatarWithLabel.stories.tsx
similarity index 95%
rename from packages/hightide-web/stories/Display And Visualization/Avatar/AvatarWithLabel.stories.tsx
rename to packages/hightide-web/stories/visualization/Avatar/AvatarWithLabel.stories.tsx
index a7c1260f..01f21b79 100644
--- a/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarWithLabel.stories.tsx	
+++ b/packages/hightide-web/stories/visualization/Avatar/AvatarWithLabel.stories.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import clsx from 'clsx'
-import { Avatar } from '../../../src/components/display-and-visualization/Avatar/Avatar'
+import { Avatar } from '../../../src/components/visualization/Avatar/Avatar'
 
 type LabelPosition = 'left' | 'right'
 
diff --git a/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarGroup.stories.tsx b/packages/hightide-web/stories/visualization/AvatarGroup/AvatarGroup.stories.tsx
similarity index 85%
rename from packages/hightide-web/stories/Display And Visualization/Avatar/AvatarGroup.stories.tsx
rename to packages/hightide-web/stories/visualization/AvatarGroup/AvatarGroup.stories.tsx
index b1e3f695..bfc316fc 100644
--- a/packages/hightide-web/stories/Display And Visualization/Avatar/AvatarGroup.stories.tsx	
+++ b/packages/hightide-web/stories/visualization/AvatarGroup/AvatarGroup.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import type { AvatarProps } from '../../../src/components/display-and-visualization/Avatar/AvatarComponent'
-import { AvatarGroup } from '../../../src/components/display-and-visualization/AvatarGroup/AvatarGroup'
+import type { AvatarProps } from '../../../src/components/visualization/Avatar/AvatarComponent'
+import { AvatarGroup } from '../../../src/components/visualization/AvatarGroup/AvatarGroup'
 import { range } from '@helpwave/hightide-utils/utils'
 import { faker } from '@faker-js/faker'
 
diff --git a/packages/hightide-web/stories/Display And Visualization/ChangingNumber.stories.tsx b/packages/hightide-web/stories/visualization/ChangingNumber.stories.tsx
similarity index 88%
rename from packages/hightide-web/stories/Display And Visualization/ChangingNumber.stories.tsx
rename to packages/hightide-web/stories/visualization/ChangingNumber.stories.tsx
index 147117a4..103b2004 100644
--- a/packages/hightide-web/stories/Display And Visualization/ChangingNumber.stories.tsx	
+++ b/packages/hightide-web/stories/visualization/ChangingNumber.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useState } from 'react'
-import { ChangingNumber } from '../../src/components/display-and-visualization/ChangingNumber'
-import { Button } from '../../src/components/user-interaction/Button'
+import { ChangingNumber } from '../../src/components/visualization/ChangingNumber'
+import { Button } from '../../src/components/interaction/Button'
 
 const meta: Meta<typeof ChangingNumber> = {
   component: ChangingNumber,
diff --git a/packages/hightide-web/stories/Display And Visualization/Chip/Chip.stories.tsx b/packages/hightide-web/stories/visualization/Chip.stories.tsx
similarity index 87%
rename from packages/hightide-web/stories/Display And Visualization/Chip/Chip.stories.tsx
rename to packages/hightide-web/stories/visualization/Chip.stories.tsx
index 3fa97c82..a414676b 100644
--- a/packages/hightide-web/stories/Display And Visualization/Chip/Chip.stories.tsx	
+++ b/packages/hightide-web/stories/visualization/Chip.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { Chip, ChipUtil } from '../../../src/components/display-and-visualization/Chip'
+import { Chip, ChipUtil } from '../../src/components/visualization/Chip'
 
 const meta = {
   component: Chip,
diff --git a/packages/hightide-web/stories/Display And Visualization/Chip/ChipList.stories.tsx b/packages/hightide-web/stories/visualization/ChipList.stories.tsx
similarity index 89%
rename from packages/hightide-web/stories/Display And Visualization/Chip/ChipList.stories.tsx
rename to packages/hightide-web/stories/visualization/ChipList.stories.tsx
index c162d90c..a5525fc5 100644
--- a/packages/hightide-web/stories/Display And Visualization/Chip/ChipList.stories.tsx	
+++ b/packages/hightide-web/stories/visualization/ChipList.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { ChipList } from '../../../src/components/display-and-visualization/Chip'
+import { ChipList } from '../../src/components/visualization/Chip'
 
 const meta = {
   component: ChipList,
diff --git a/packages/hightide-web/stories/Display And Visualization/Icon.stories.tsx b/packages/hightide-web/stories/visualization/Icon.stories.tsx
similarity index 78%
rename from packages/hightide-web/stories/Display And Visualization/Icon.stories.tsx
rename to packages/hightide-web/stories/visualization/Icon.stories.tsx
index 05796d93..85a507b9 100644
--- a/packages/hightide-web/stories/Display And Visualization/Icon.stories.tsx	
+++ b/packages/hightide-web/stories/visualization/Icon.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Plus } from 'lucide-react'
-import { iconSizes } from '../../src/components/display-and-visualization/Icon'
-import { Icon } from '../../src/components/display-and-visualization/Icon'
+import { iconSizes } from '../../src/components/visualization/Icon'
+import { Icon } from '../../src/components/visualization/Icon'
 
 const meta = {
   component: Icon,
diff --git a/packages/hightide-web/stories/Layout/MarkdownInterpreter.stories.tsx b/packages/hightide-web/stories/visualization/MarkdownInterpreter.stories.tsx
similarity index 85%
rename from packages/hightide-web/stories/Layout/MarkdownInterpreter.stories.tsx
rename to packages/hightide-web/stories/visualization/MarkdownInterpreter.stories.tsx
index 86e32c2f..766e5123 100644
--- a/packages/hightide-web/stories/Layout/MarkdownInterpreter.stories.tsx
+++ b/packages/hightide-web/stories/visualization/MarkdownInterpreter.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { MarkdownInterpreter } from '../../src/components/layout/MarkdownInterpreter'
+import { MarkdownInterpreter } from '../../src/components/visualization/MarkdownInterpreter'
 
 const meta = {
   component: MarkdownInterpreter,
diff --git a/packages/hightide-web/stories/Display And Visualization/ProgressIndicator.stories.tsx b/packages/hightide-web/stories/visualization/ProgressIndicator.stories.tsx
similarity index 77%
rename from packages/hightide-web/stories/Display And Visualization/ProgressIndicator.stories.tsx
rename to packages/hightide-web/stories/visualization/ProgressIndicator.stories.tsx
index 61755d8c..5963386c 100644
--- a/packages/hightide-web/stories/Display And Visualization/ProgressIndicator.stories.tsx	
+++ b/packages/hightide-web/stories/visualization/ProgressIndicator.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { ProgressIndicator } from '../../src/components/display-and-visualization/ProgressIndicator'
+import { ProgressIndicator } from '../../src/components/visualization/ProgressIndicator'
 
 const meta = {
   component: ProgressIndicator,
diff --git a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelActivityNode.stories.tsx b/packages/hightide-web/stories/visualization/process-model/ProcessModelActivityNode.stories.tsx
similarity index 89%
rename from packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelActivityNode.stories.tsx
rename to packages/hightide-web/stories/visualization/process-model/ProcessModelActivityNode.stories.tsx
index 56e02ddd..00f753c0 100644
--- a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelActivityNode.stories.tsx	
+++ b/packages/hightide-web/stories/visualization/process-model/ProcessModelActivityNode.stories.tsx
@@ -2,10 +2,10 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { Check, Plus } from 'lucide-react'
 import { useMemo, useState } from 'react'
 import { action } from 'storybook/actions'
-import { ProcessModelActivityNode } from '../../../src/components/display-and-visualization/process-model/ProcessModelActivityNode'
-import { processModelLibrary } from '../../../src/components/display-and-visualization/process-model/processModelLibrary'
-import type { ProcessModelGraphActivityNode } from '../../../src/components/display-and-visualization/process-model/types'
-import { Select } from '../../../src/components/user-interaction/Select/Select'
+import { ProcessModelActivityNode } from '../../../src/components/visualization/process-model/ProcessModelActivityNode'
+import { processModelLibrary } from '../../../src/components/visualization/process-model/processModelLibrary'
+import type { ProcessModelGraphActivityNode } from '../../../src/components/visualization/process-model/types'
+import { Select } from '../../../src/components/data-input/Select/Select'
 
 type ActivityNodeExample = {
   id: string,
diff --git a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelCanvas.stories.tsx b/packages/hightide-web/stories/visualization/process-model/ProcessModelCanvas.stories.tsx
similarity index 82%
rename from packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelCanvas.stories.tsx
rename to packages/hightide-web/stories/visualization/process-model/ProcessModelCanvas.stories.tsx
index 656c1ab5..b4b09d35 100644
--- a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelCanvas.stories.tsx	
+++ b/packages/hightide-web/stories/visualization/process-model/ProcessModelCanvas.stories.tsx
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useMemo, useState } from 'react'
-import { ProcessModelCanvas } from '../../../src/components/display-and-visualization/process-model/ProcessModelCanvas'
+import { ProcessModelCanvas } from '../../../src/components/visualization/process-model/ProcessModelCanvas'
 import {
   getProcessModelLibraryEntry,
   processModelLibrary
-} from '../../../src/components/display-and-visualization/process-model/processModelLibrary'
-import { Select } from '../../../src/components/user-interaction/Select/Select'
+} from '../../../src/components/visualization/process-model/processModelLibrary'
+import { Select } from '../../../src/components/data-input/Select/Select'
 
 const meta: Meta<typeof ProcessModelCanvas> = {
   component: ProcessModelCanvas,
diff --git a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelTraceReplay.stories.tsx b/packages/hightide-web/stories/visualization/process-model/ProcessModelTraceReplay.stories.tsx
similarity index 81%
rename from packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelTraceReplay.stories.tsx
rename to packages/hightide-web/stories/visualization/process-model/ProcessModelTraceReplay.stories.tsx
index 2c917ad8..c932c849 100644
--- a/packages/hightide-web/stories/Display And Visualization/ProcessModel/ProcessModelTraceReplay.stories.tsx	
+++ b/packages/hightide-web/stories/visualization/process-model/ProcessModelTraceReplay.stories.tsx
@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useMemo, useState } from 'react'
-import { ProcessModelTraceReplay } from '../../../src/components/display-and-visualization/process-model/ProcessModelTraceReplay'
+import { ProcessModelTraceReplay } from '../../../src/components/visualization/process-model/ProcessModelTraceReplay'
 import {
   getProcessModelLibraryEntry,
   processModelLibrary
-} from '../../../src/components/display-and-visualization/process-model/processModelLibrary'
-import type { ProcessModelGraphWithTraces } from '../../../src/components/display-and-visualization/process-model/types'
-import { Select } from '../../../src/components/user-interaction/Select/Select'
+} from '../../../src/components/visualization/process-model/processModelLibrary'
+import type { ProcessModelGraphWithTraces } from '../../../src/components/visualization/process-model/types'
+import { Select } from '../../../src/components/data-input/Select/Select'
 
 const meta: Meta<typeof ProcessModelTraceReplay> = {
   component: ProcessModelTraceReplay,
diff --git a/packages/hightide-web/tests/branding/appZumDoc.test.tsx b/packages/hightide-web/tests/branding/appZumDoc.test.tsx
index 4f838c05..4df2e2ab 100644
--- a/packages/hightide-web/tests/branding/appZumDoc.test.tsx
+++ b/packages/hightide-web/tests/branding/appZumDoc.test.tsx
@@ -2,8 +2,8 @@
  * @jest-environment jsdom
  */
 import { render, screen } from '@testing-library/react'
-import { AppZumDocBadge } from '../../src/components/branding/AppZumDocBadge'
-import { AppZumDocLogo } from '../../src/components/branding/AppZumDocLogo'
+import { AppZumDocBadge } from '../../src/components/branding/visualization/AppZumDocBadge'
+import { AppZumDocLogo } from '../../src/components/branding/visualization/AppZumDocLogo'
 
 describe('AppZumDocBadge', () => {
   test('renders the wordmark with the logo', () => {
diff --git a/packages/hightide-web/tests/input/DateTimeField.test.tsx b/packages/hightide-web/tests/input/DateTimeField.test.tsx
index f61d35b7..bb4f4a6e 100644
--- a/packages/hightide-web/tests/input/DateTimeField.test.tsx
+++ b/packages/hightide-web/tests/input/DateTimeField.test.tsx
@@ -4,8 +4,8 @@
 import { useEffect, useState } from 'react'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import { TestHightideProvider } from '../setup/TestHightideProvider'
-import { DateTimeField, type DateTimeFieldProps } from '../../src/components/user-interaction/input/DateTimeField'
-import { DateTimeInput } from '../../src/components/user-interaction/input/DateTimeInput'
+import { DateTimeField, type DateTimeFieldProps } from '../../src/components/data-input/input/DateTimeField'
+import { DateTimeInput } from '../../src/components/data-input/input/DateTimeInput'
 
 
 const renderField = (props?: Partial<DateTimeFieldProps>) => {
diff --git a/packages/hightide-web/tests/input/FlexibleDateTimeInput.test.tsx b/packages/hightide-web/tests/input/FlexibleDateTimeInput.test.tsx
index 7af499da..89385aab 100644
--- a/packages/hightide-web/tests/input/FlexibleDateTimeInput.test.tsx
+++ b/packages/hightide-web/tests/input/FlexibleDateTimeInput.test.tsx
@@ -4,7 +4,7 @@
 import { useState } from 'react'
 import { act, fireEvent, render, screen } from '@testing-library/react'
 import { TestHightideProvider } from '../setup/TestHightideProvider'
-import { FlexibleDateTimeInput, type FlexibleDateTimeInputProps } from '../../src/components/user-interaction/input/FlexibleDateTimeInput'
+import { FlexibleDateTimeInput, type FlexibleDateTimeInputProps } from '../../src/components/data-input/input/FlexibleDateTimeInput'
 
 
 
diff --git a/packages/hightide-web/tests/input/dateTimeSegments.test.ts b/packages/hightide-web/tests/input/dateTimeSegments.test.ts
index 8f311834..22f0f890 100644
--- a/packages/hightide-web/tests/input/dateTimeSegments.test.ts
+++ b/packages/hightide-web/tests/input/dateTimeSegments.test.ts
@@ -9,7 +9,7 @@ import {
   stepSegment,
   typeDigit,
   type SegmentEditState
-} from '../../src/components/user-interaction/input/dateTimeSegments'
+} from '../../src/components/data-input/input/dateTimeSegments'
 
 const dateLayout = buildSegmentLayout({ locale: 'de-DE', mode: 'date', precision: 'minute', is24HourFormat: true })
 const dateTimeLayout = buildSegmentLayout({ locale: 'de-DE', mode: 'dateTime', precision: 'minute', is24HourFormat: true })
diff --git a/packages/hightide-web/tests/process-model/layoutProcessModel.test.ts b/packages/hightide-web/tests/process-model/layoutProcessModel.test.ts
index 98d33708..f74285df 100644
--- a/packages/hightide-web/tests/process-model/layoutProcessModel.test.ts
+++ b/packages/hightide-web/tests/process-model/layoutProcessModel.test.ts
@@ -1,5 +1,5 @@
-import { ProcessModelLayoutUtilities } from '../../src/components/display-and-visualization/process-model/layoutProcessModel'
-import type { ProcessModelGraph } from '../../src/components/display-and-visualization/process-model/types'
+import { ProcessModelLayoutUtilities } from '../../src/components/visualization/process-model/layoutProcessModel'
+import type { ProcessModelGraph } from '../../src/components/visualization/process-model/types'
 
 const verticalTwoNodeGraph: ProcessModelGraph = {
   nodes: [
diff --git a/packages/hightide-web/tests/table/naturalColumnSizing.test.tsx b/packages/hightide-web/tests/table/naturalColumnSizing.test.tsx
index 3ba94969..6fb0d66e 100644
--- a/packages/hightide-web/tests/table/naturalColumnSizing.test.tsx
+++ b/packages/hightide-web/tests/table/naturalColumnSizing.test.tsx
@@ -3,8 +3,8 @@
  */
 import { render } from '@testing-library/react'
 import { TestHightideProvider } from '../setup/TestHightideProvider'
-import { Table } from '../../src/components/layout/table/Table'
-import { TableColumn } from '../../src/components/layout/table/TableColumn'
+import { Table } from '../../src/components/layout/Table/Table'
+import { TableColumn } from '../../src/components/layout/Table/TableColumn'
 
 type Row = { id: string, name: string, grade: string }
 

From 8d8189d03a471675b622ffa9b9844ca54bbbf041 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Thu, 1 Oct 2026 13:30:58 +0200
Subject: [PATCH 22/25] faet: update coloring attributes

---
 conventions/Components.md                     |  2 +-
 packages/hightide-web/CHANGELOG.md            |  3 +-
 .../data-input/Combobox/Combobox.tsx          | 18 ++++
 .../data-input/Combobox/ComboboxComponent.tsx | 49 ++++++++++
 .../Combobox/ComboboxContext.tsx              |  6 +-
 .../Combobox/ComboboxInput.tsx                | 14 ++-
 .../Combobox/ComboboxList.tsx                 |  9 +-
 .../Combobox/ComboboxOption.tsx               | 18 +++-
 .../Combobox/ComboboxRoot.tsx                 | 50 +++++++++-
 .../components/data-input/Combobox/index.ts   |  2 +
 .../Combobox/useCombobox.ts                   |  0
 .../MultiSelectChipDisplayTrigger.tsx         |  3 +-
 .../src/components/data-input/index.ts        |  1 +
 .../interaction/Combobox/Combobox.tsx         | 40 --------
 .../components/interaction/Combobox/index.ts  |  7 --
 .../components/interaction/TabSwitcher.tsx    |  2 +-
 .../interaction/data/FilterList.tsx           |  7 +-
 .../interaction/data/SortingList.tsx          |  7 +-
 .../src/components/interaction/index.ts       |  1 -
 .../interaction/navigation/BreadCrumbs.tsx    |  2 +-
 .../src/components/layout/Card.tsx            |  4 +-
 .../ExpandableSection/ExpandableSection.tsx   |  6 +-
 .../src/components/layout/PopUp/PopUp.tsx     |  5 +-
 .../src/components/layout/Table/TableBody.tsx |  1 -
 .../layout/Table/TableSortButton.tsx          |  4 +-
 .../layout/Table/VirtualizedTableBody.tsx     |  1 -
 .../src/components/layout/list/ListItem.tsx   |  4 +-
 .../visualization/Avatar/AvatarRoot.tsx       |  6 +-
 .../src/style/theme/colors/component.css      |  6 +-
 .../src/style/theme/colors/utilities.css      | 97 -------------------
 .../src/style/theme/components/app-page.css   |  2 +-
 .../src/style/theme/components/avatar.css     |  2 +-
 .../src/style/theme/components/breadcrumb.css |  7 +-
 .../src/style/theme/components/card.css       |  2 +-
 .../src/style/theme/components/combobox.css   |  2 +-
 .../src/style/theme/components/expandable.css |  4 +-
 .../style/theme/components/input-elements.css |  4 +-
 .../src/style/theme/components/pop-up.css     |  2 +-
 .../src/style/theme/components/searchbar.css  |  1 +
 .../src/style/theme/components/select.css     |  2 +-
 .../src/style/theme/components/table.css      |  6 +-
 .../style/theme/components/tabswitcher.css    |  4 +-
 .../theme/components/vertical-navigation.css  | 19 ++--
 .../src/style/utitlity/coloring.css           | 38 +-------
 .../Combobox/Combobox.stories.tsx             |  9 +-
 .../stories/layout/ScrollableList.stories.tsx |  4 +-
 .../stories/layout/app/AppPage.stories.tsx    |  2 +-
 .../VirtualizedCardGrid.stories.tsx           |  2 +-
 48 files changed, 229 insertions(+), 258 deletions(-)
 create mode 100644 packages/hightide-web/src/components/data-input/Combobox/Combobox.tsx
 create mode 100644 packages/hightide-web/src/components/data-input/Combobox/ComboboxComponent.tsx
 rename packages/hightide-web/src/components/{interaction => data-input}/Combobox/ComboboxContext.tsx (88%)
 rename packages/hightide-web/src/components/{interaction => data-input}/Combobox/ComboboxInput.tsx (78%)
 rename packages/hightide-web/src/components/{interaction => data-input}/Combobox/ComboboxList.tsx (89%)
 rename packages/hightide-web/src/components/{interaction => data-input}/Combobox/ComboboxOption.tsx (81%)
 rename packages/hightide-web/src/components/{interaction => data-input}/Combobox/ComboboxRoot.tsx (71%)
 create mode 100644 packages/hightide-web/src/components/data-input/Combobox/index.ts
 rename packages/hightide-web/src/components/{interaction => data-input}/Combobox/useCombobox.ts (100%)
 delete mode 100644 packages/hightide-web/src/components/interaction/Combobox/Combobox.tsx
 delete mode 100644 packages/hightide-web/src/components/interaction/Combobox/index.ts
 rename packages/hightide-web/stories/{interaction => data-input}/Combobox/Combobox.stories.tsx (79%)

diff --git a/conventions/Components.md b/conventions/Components.md
index fbc6465b..c88be8ec 100644
--- a/conventions/Components.md
+++ b/conventions/Components.md
@@ -111,7 +111,7 @@ An interaction component reacts to the user. It does not implement `InputInterfa
 
 A data-input component reads and writes a value through `InputInterface`. Every component in `data-input` implements that interface.
 
-`Input`, `Select`, `Checkbox`, and `DateTimeInput` are data-input components.
+`Input`, `Select`, `Combobox`, `Checkbox`, and `DateTimeInput` are data-input components.
 
 ### visualization
 
diff --git a/packages/hightide-web/CHANGELOG.md b/packages/hightide-web/CHANGELOG.md
index d78b2582..685fd42a 100644
--- a/packages/hightide-web/CHANGELOG.md
+++ b/packages/hightide-web/CHANGELOG.md
@@ -66,6 +66,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - Components are grouped into `layout`, `interaction`, `data-input`, and `visualization`. Feature folders such as `chat` and `branding` use the same grouping
 - `ChatMessageComposer` implements `InputInterface` and lives in `chat/data-input`
 - `properties` is its own component folder. A folder that holds one aggregate uses that aggregate's name, including `Drawer`, `PopUp`, and `Table`. Stories follow the same folders
+- `Combobox` implements `InputInterface` and lives in `data-input`. Its parts are `Combobox.Root`, `Combobox.Input`, `Combobox.List`, `Combobox.Option`, `Combobox.Context`, `Combobox.Provider`, and `Combobox.Consumer`
 - `Select` and `MultiSelect` values are no longer `T | null`. An empty selection is omitted
 - Readonly `.input` text, border, and focus use 80% opacity
 - `Carousel` is a compound component: `Carousel.Root`, `Carousel.Container`, `Carousel.Slide`, `Carousel.Arrows`, `Carousel.FadeLayover`, `Carousel.Stepper`, `Carousel.Context`, and `Carousel.Consumer`. The combined `Carousel` still composes them from `children`, `hintNext`, `arrows`, `dots`, and `blurColor`
@@ -97,7 +98,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `isModal` on `Modal`. A modal is always a modal
 - `backgroundClassName` and `containerClassName` on `Modal`. Use `backgroundProps` and `containerProps`
 - `ConfirmDialog`, `DiscardChangesDialog`, `InputDialog`, `LanguageDialog`, and `ThemeDialog`
-
+- `coloring-*` classNames in favor of the new coloring data attributes
 
 ## [0.17.2] - 2026-09-23
 
diff --git a/packages/hightide-web/src/components/data-input/Combobox/Combobox.tsx b/packages/hightide-web/src/components/data-input/Combobox/Combobox.tsx
new file mode 100644
index 00000000..76f07d4e
--- /dev/null
+++ b/packages/hightide-web/src/components/data-input/Combobox/Combobox.tsx
@@ -0,0 +1,18 @@
+import { ComboboxComponent } from './ComboboxComponent'
+import { ComboboxContext } from './ComboboxContext'
+import { ComboboxInput } from './ComboboxInput'
+import { ComboboxList } from './ComboboxList'
+import { ComboboxOption } from './ComboboxOption'
+import { ComboboxRoot } from './ComboboxRoot'
+
+const Combobox = Object.assign(ComboboxComponent, {
+  Root: ComboboxRoot,
+  Input: ComboboxInput,
+  List: ComboboxList,
+  Option: ComboboxOption,
+  Context: ComboboxContext,
+  Provider: ComboboxContext.Provider,
+  Consumer: ComboboxContext.Consumer,
+})
+
+export { Combobox }
diff --git a/packages/hightide-web/src/components/data-input/Combobox/ComboboxComponent.tsx b/packages/hightide-web/src/components/data-input/Combobox/ComboboxComponent.tsx
new file mode 100644
index 00000000..6602cc35
--- /dev/null
+++ b/packages/hightide-web/src/components/data-input/Combobox/ComboboxComponent.tsx
@@ -0,0 +1,49 @@
+import type React from 'react'
+import type { ForwardedRef, ReactNode } from 'react'
+import { forwardRef } from 'react'
+import type { ComboboxInputProps } from './ComboboxInput'
+import { ComboboxInput } from './ComboboxInput'
+import type { ComboboxListProps } from './ComboboxList'
+import { ComboboxList } from './ComboboxList'
+import type { ComboboxRootProps } from './ComboboxRoot'
+import { ComboboxRoot } from './ComboboxRoot'
+
+export type ComboboxProps<T = string> = Omit<ComboboxRootProps<T>, 'children'> & {
+  children?: ReactNode,
+  placeholder?: ComboboxInputProps['placeholder'],
+  id?: string,
+  inputProps?: ComboboxInputProps,
+  listProps?: Omit<ComboboxListProps, 'children'>,
+}
+
+type ComboboxComponentType = <T = string>(
+  props: ComboboxProps<T> & {
+    ref?: React.ForwardedRef<HTMLInputElement>,
+  }
+) => React.ReactElement
+
+const ComboboxComponentImpl = forwardRef<HTMLInputElement, ComboboxProps<unknown>>(function ComboboxComponent<T>(
+  {
+    children,
+    placeholder,
+    id,
+    inputProps,
+    listProps,
+    ...props
+  }: ComboboxProps<T>,
+  ref: ForwardedRef<HTMLInputElement>
+) {
+  return (
+    <ComboboxRoot<T> {...props}>
+      <ComboboxInput
+        ref={ref}
+        id={id}
+        placeholder={placeholder}
+        {...inputProps}
+      />
+      <ComboboxList {...listProps}>{children}</ComboboxList>
+    </ComboboxRoot>
+  )
+})
+
+export const ComboboxComponent = ComboboxComponentImpl as ComboboxComponentType
diff --git a/packages/hightide-web/src/components/interaction/Combobox/ComboboxContext.tsx b/packages/hightide-web/src/components/data-input/Combobox/ComboboxContext.tsx
similarity index 88%
rename from packages/hightide-web/src/components/interaction/Combobox/ComboboxContext.tsx
rename to packages/hightide-web/src/components/data-input/Combobox/ComboboxContext.tsx
index 064cc0ee..593eb051 100644
--- a/packages/hightide-web/src/components/interaction/Combobox/ComboboxContext.tsx
+++ b/packages/hightide-web/src/components/data-input/Combobox/ComboboxContext.tsx
@@ -1,5 +1,6 @@
 import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'
 import { createContext, useContext } from 'react'
+import type { InputInterface } from '../input/Input'
 
 export interface ComboboxOptionType<T = string> {
   id: string,
@@ -50,7 +51,8 @@ export interface ComboboxContextConfig {
   setIds: Dispatch<SetStateAction<ComboboxContextIds>>,
 }
 
-export interface ComboboxContextType<T> extends ComboboxContextInternalState, ComboboxContextComputedState<T>, ComboboxContextActions<T> {
+export interface ComboboxContextType<T> extends ComboboxContextInternalState, ComboboxContextComputedState<T>, ComboboxContextActions<T>, Required<Pick<InputInterface<T>, 'invalid' | 'disabled' | 'readOnly' | 'required'>> {
+  value?: T,
   config: ComboboxContextConfig,
   layout: ComboboxContextLayout,
   search: ComboboxContextSearch,
@@ -61,7 +63,7 @@ export const ComboboxContext = createContext<ComboboxContextType<unknown> | null
 export function useComboboxContext<T = string>(): ComboboxContextType<T> {
   const ctx = useContext(ComboboxContext)
   if (ctx == null) {
-    throw new Error('useComboboxContext must be used within ComboboxRoot')
+    throw new Error('Combobox components must be used within a Combobox.Root')
   }
   return ctx as ComboboxContextType<T>
 }
diff --git a/packages/hightide-web/src/components/interaction/Combobox/ComboboxInput.tsx b/packages/hightide-web/src/components/data-input/Combobox/ComboboxInput.tsx
similarity index 78%
rename from packages/hightide-web/src/components/interaction/Combobox/ComboboxInput.tsx
rename to packages/hightide-web/src/components/data-input/Combobox/ComboboxInput.tsx
index ca9e1a98..32fd8d3a 100644
--- a/packages/hightide-web/src/components/interaction/Combobox/ComboboxInput.tsx
+++ b/packages/hightide-web/src/components/data-input/Combobox/ComboboxInput.tsx
@@ -1,9 +1,11 @@
-import { type ComponentProps, forwardRef, useCallback } from 'react'
-import { Input } from '../../data-input/input/Input'
+import type { InputHTMLAttributes, KeyboardEvent } from 'react'
+import { forwardRef, useCallback } from 'react'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
+
+import { Input } from '../input/Input'
 import { useComboboxContext } from './ComboboxContext'
 
-export type ComboboxInputProps = Omit<ComponentProps<typeof Input>, 'value'>
+export type ComboboxInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>
 
 export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
   function ComboboxInput(props, ref) {
@@ -12,7 +14,7 @@ export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
     const { highlightNext, highlightPrevious, highlightFirst, highlightLast, highlightedId, selectOption } = context
 
     const handleKeyDown = useCallback(
-      (event: React.KeyboardEvent<HTMLInputElement>) => {
+      (event: KeyboardEvent<HTMLInputElement>) => {
         props.onKeyDown?.(event)
         switch (event.key) {
         case 'ArrowDown':
@@ -50,6 +52,10 @@ export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
         ref={ref}
         value={context.search.searchQuery}
         onValueChange={context.search.setSearchQuery}
+        invalid={context.invalid}
+        disabled={props.disabled ?? context.disabled}
+        readOnly={props.readOnly ?? context.readOnly}
+        required={props.required ?? context.required}
         onKeyDown={handleKeyDown}
         placeholder={props.placeholder ?? translation('search')}
         role="combobox"
diff --git a/packages/hightide-web/src/components/interaction/Combobox/ComboboxList.tsx b/packages/hightide-web/src/components/data-input/Combobox/ComboboxList.tsx
similarity index 89%
rename from packages/hightide-web/src/components/interaction/Combobox/ComboboxList.tsx
rename to packages/hightide-web/src/components/data-input/Combobox/ComboboxList.tsx
index 92a71980..eff98650 100644
--- a/packages/hightide-web/src/components/interaction/Combobox/ComboboxList.tsx
+++ b/packages/hightide-web/src/components/data-input/Combobox/ComboboxList.tsx
@@ -4,10 +4,12 @@ import clsx from 'clsx'
 import { useComboboxContext } from './ComboboxContext'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
-export type ComboboxListProps = HTMLAttributes<HTMLUListElement>
+export type ComboboxListProps = HTMLAttributes<HTMLUListElement> & {
+  statusProps?: HTMLAttributes<HTMLLIElement>,
+}
 
 export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
-  function ComboboxList({ children, ...props }, ref) {
+  function ComboboxList({ children, statusProps, ...props }, ref) {
     const translation = useHightideTranslation()
     const context = useComboboxContext()
     const { layout } = context
@@ -37,12 +39,13 @@ export const ComboboxList = forwardRef<HTMLUListElement, ComboboxListProps>(
         className={clsx('combobox-list', props.className)}>
         {children}
         <li
+          {...statusProps}
           role="option"
           aria-selected={false}
           aria-disabled={true}
           aria-live="polite"
           aria-atomic={true}
-          className={clsx('combobox-list-status', { 'sr-only': count > 0 })}
+          className={clsx('combobox-list-status', { 'sr-only': count > 0 }, statusProps?.className)}
         >
           {translation('nResultsFound', { count })}
         </li>
diff --git a/packages/hightide-web/src/components/interaction/Combobox/ComboboxOption.tsx b/packages/hightide-web/src/components/data-input/Combobox/ComboboxOption.tsx
similarity index 81%
rename from packages/hightide-web/src/components/interaction/Combobox/ComboboxOption.tsx
rename to packages/hightide-web/src/components/data-input/Combobox/ComboboxOption.tsx
index 038d90ef..60ddadc0 100644
--- a/packages/hightide-web/src/components/interaction/Combobox/ComboboxOption.tsx
+++ b/packages/hightide-web/src/components/data-input/Combobox/ComboboxOption.tsx
@@ -1,7 +1,8 @@
 import type { ForwardedRef, HTMLAttributes, ReactNode, RefObject } from 'react'
-import { forwardRef, useEffect, useId, useRef } from 'react'
+import { forwardRef, useEffect, useId, useMemo, useRef } from 'react'
 import clsx from 'clsx'
 import { useComboboxContext } from './ComboboxContext'
+import { ColoringUtils } from '../../interaction'
 
 export interface ComboboxOptionProps<T = string> extends HTMLAttributes<HTMLLIElement> {
   value: T,
@@ -13,7 +14,7 @@ export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps<unkn
   children,
   value,
   label,
-  disabled = false,
+  disabled: disabledOverwrite = false,
   id: idProp,
   className,
   ...restProps
@@ -26,6 +27,14 @@ export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps<unkn
 
   const resolvedDisplay: ReactNode = children ?? label
 
+  const disabled = useMemo(() =>
+    disabledOverwrite ?? context.disabled,
+  [context.disabled, disabledOverwrite])
+
+  const interactable = useMemo(() =>
+    !disabled && !context.readOnly,
+  [context.readOnly, disabled])
+
   useEffect(() => {
     return registerOption({
       id: optionId,
@@ -65,15 +74,16 @@ export const ComboboxOption = forwardRef<HTMLLIElement, ComboboxOptionProps<unkn
       data-highlighted={isHighlighted ? '' : undefined}
       data-visible={isVisible ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
+      {...ColoringUtils.build({ color: 'surface-inverse', coloringStyle: 'foreground', mode: 'interactive' })}
       className={clsx('combobox-option', !isVisible && 'hidden', className)}
       onClick={(event) => {
-        if (!disabled) {
+        if (!interactable) {
           context.selectOption(optionId)
           restProps.onClick?.(event)
         }
       }}
       onMouseEnter={(event) => {
-        if (!disabled) {
+        if (!interactable) {
           context.highlightItem(optionId)
           restProps.onMouseEnter?.(event)
         }
diff --git a/packages/hightide-web/src/components/interaction/Combobox/ComboboxRoot.tsx b/packages/hightide-web/src/components/data-input/Combobox/ComboboxRoot.tsx
similarity index 71%
rename from packages/hightide-web/src/components/interaction/Combobox/ComboboxRoot.tsx
rename to packages/hightide-web/src/components/data-input/Combobox/ComboboxRoot.tsx
index 32bfc855..bda6379f 100644
--- a/packages/hightide-web/src/components/interaction/Combobox/ComboboxRoot.tsx
+++ b/packages/hightide-web/src/components/data-input/Combobox/ComboboxRoot.tsx
@@ -1,18 +1,29 @@
 import type { ReactNode, RefObject } from 'react'
 import { useCallback, useId, useMemo, useState } from 'react'
+import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
+
+import type { InputInterface } from '../input/Input'
+import { DOMUtils } from '../../../utils/dom'
 import { ComboboxContext } from './ComboboxContext'
 import type { ComboboxContextConfig, ComboboxContextIds, ComboboxContextLayout, ComboboxContextType, ComboboxOptionType } from './ComboboxContext'
 import type { UseComboboxOptions } from './useCombobox'
 import { useCombobox } from './useCombobox'
-import { DOMUtils } from '../../../utils/dom'
 
-export interface ComboboxRootProps<T = string> extends Omit<UseComboboxOptions, 'options'> {
+export interface ComboboxRootProps<T = string> extends InputInterface<T>, Omit<UseComboboxOptions, 'options'> {
   children: ReactNode,
   onItemClick?: (value: T) => void,
 }
 
 export function ComboboxRoot<T = string>({
   children,
+  value,
+  initialValue,
+  onValueChange,
+  onEditComplete,
+  invalid = false,
+  disabled = false,
+  readOnly = false,
+  required = false,
   onItemClick,
   ...hookProps
 }: ComboboxRootProps<T>) {
@@ -23,6 +34,18 @@ export function ComboboxRoot<T = string>({
     trigger: `combobox-${generatedId}`,
     listbox: `combobox-${generatedId}-listbox`,
   })
+  const onValueChangeStable = useEventCallbackStabilizer(onValueChange)
+  const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
+  const onItemClickStable = useEventCallbackStabilizer(onItemClick)
+  const [selectedValue, setSelectedValue] = useControlledState<T | undefined>({
+    value,
+    onValueChange: (next) => {
+      if (next !== undefined) {
+        onValueChangeStable(next)
+      }
+    },
+    defaultValue: initialValue,
+  })
 
   const registerOption = useCallback(
     (option: ComboboxOptionType<T>) => {
@@ -65,10 +88,19 @@ export function ComboboxRoot<T = string>({
 
   const selectOption = useCallback(
     (id: string) => {
+      if (disabled || readOnly) {
+        return
+      }
       const option = idToOptionMap[id]
-      if (option) onItemClick?.(option.value as T)
+      if (!option || option.disabled) {
+        return
+      }
+      setSelectedValue(option.value)
+      onEditCompleteStable(option.value)
+      onItemClickStable(option.value)
+      state.setSearchQuery(option.label ?? '')
     },
-    [idToOptionMap, onItemClick]
+    [disabled, readOnly, idToOptionMap, setSelectedValue, onEditCompleteStable, onItemClickStable, state]
   )
 
   const config: ComboboxContextConfig = useMemo(
@@ -94,6 +126,11 @@ export function ComboboxRoot<T = string>({
 
   const contextValue = useMemo(
     () => ({
+      value: selectedValue,
+      invalid,
+      disabled,
+      readOnly,
+      required,
       highlightedId: state.highlightedId,
       options,
       visibleOptionIds: state.visibleOptionIds,
@@ -110,6 +147,11 @@ export function ComboboxRoot<T = string>({
       search,
     }),
     [
+      selectedValue,
+      invalid,
+      disabled,
+      readOnly,
+      required,
       state.highlightedId,
       state.visibleOptionIds,
       state.highlightFirst,
diff --git a/packages/hightide-web/src/components/data-input/Combobox/index.ts b/packages/hightide-web/src/components/data-input/Combobox/index.ts
new file mode 100644
index 00000000..b2507abb
--- /dev/null
+++ b/packages/hightide-web/src/components/data-input/Combobox/index.ts
@@ -0,0 +1,2 @@
+export { Combobox } from './Combobox'
+export type { ComboboxProps } from './ComboboxComponent'
diff --git a/packages/hightide-web/src/components/interaction/Combobox/useCombobox.ts b/packages/hightide-web/src/components/data-input/Combobox/useCombobox.ts
similarity index 100%
rename from packages/hightide-web/src/components/interaction/Combobox/useCombobox.ts
rename to packages/hightide-web/src/components/data-input/Combobox/useCombobox.ts
diff --git a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectChipDisplayTrigger.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectChipDisplayTrigger.tsx
index c009f918..e873d6d4 100644
--- a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectChipDisplayTrigger.tsx
+++ b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectChipDisplayTrigger.tsx
@@ -6,6 +6,7 @@ import { useHightideTranslation } from '@helpwave/hightide-utils/context/transla
 import { XIcon, Plus } from 'lucide-react'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import clsx from 'clsx'
+import { ColoringUtils } from '../../interaction'
 
 export type MultiSelectChipDisplayTriggerProps = HTMLAttributes<HTMLDivElement> & {
   disabled?: boolean,
@@ -63,7 +64,7 @@ export const MultiSelectChipDisplayTrigger = forwardRef<
         className="multi-select-chip-display-button"
       />
       {selectedOptions.map((opt) => (
-        <div key={opt.value.id} className="multi-select-chip-display-chip">
+        <div key={opt.value.id} {...ColoringUtils.build({ color: 'surface-variant' })} className="multi-select-chip-display-chip">
           {opt.display}
           <IconButton
             tooltip={translation('remove')}
diff --git a/packages/hightide-web/src/components/data-input/index.ts b/packages/hightide-web/src/components/data-input/index.ts
index fdd97a2c..61a31967 100644
--- a/packages/hightide-web/src/components/data-input/index.ts
+++ b/packages/hightide-web/src/components/data-input/index.ts
@@ -1,4 +1,5 @@
 export * from './Checkbox'
+export * from './Combobox'
 export * from './FileInput'
 export * from './LabelledCheckbox'
 export * from './MultiSelect'
diff --git a/packages/hightide-web/src/components/interaction/Combobox/Combobox.tsx b/packages/hightide-web/src/components/interaction/Combobox/Combobox.tsx
deleted file mode 100644
index 4884015f..00000000
--- a/packages/hightide-web/src/components/interaction/Combobox/Combobox.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { JSX } from 'react'
-import { forwardRef, type ReactNode } from 'react'
-import { ComboboxRoot } from './ComboboxRoot'
-import { ComboboxInput } from './ComboboxInput'
-import { ComboboxList } from './ComboboxList'
-import type { ComboboxInputProps } from './ComboboxInput'
-import type { ComboboxListProps } from './ComboboxList'
-
-export interface ComboboxProps<T = string> {
-  children: ReactNode,
-  onItemClick?: (value: T) => void,
-  id?: string,
-  searchQuery?: string,
-  onSearchQueryChange?: (value: string) => void,
-  initialSearchQuery?: string,
-  inputProps?: ComboboxInputProps,
-  listProps?: ComboboxListProps,
-}
-
-export const Combobox = forwardRef<HTMLInputElement, ComboboxProps<unknown>>(function Combobox<T = string> ({
-  children,
-  onItemClick,
-  searchQuery,
-  onSearchQueryChange,
-  initialSearchQuery,
-  inputProps,
-  listProps,
-}, ref) {
-  return (
-    <ComboboxRoot<T>
-      onItemClick={onItemClick}
-      searchQuery={searchQuery}
-      onSearchQueryChange={onSearchQueryChange}
-      initialSearchQuery={initialSearchQuery}
-    >
-      <ComboboxInput ref={ref} {...inputProps} />
-      <ComboboxList {...listProps}>{children}</ComboboxList>
-    </ComboboxRoot>
-  )
-}) as <T = string>(props: ComboboxProps<T> & React.RefAttributes<HTMLDivElement>) => JSX.Element
diff --git a/packages/hightide-web/src/components/interaction/Combobox/index.ts b/packages/hightide-web/src/components/interaction/Combobox/index.ts
deleted file mode 100644
index bf198735..00000000
--- a/packages/hightide-web/src/components/interaction/Combobox/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export * from './Combobox'
-export * from './ComboboxContext'
-export * from './ComboboxInput'
-export * from './ComboboxList'
-export * from './ComboboxOption'
-export * from './ComboboxRoot'
-export * from './useCombobox'
diff --git a/packages/hightide-web/src/components/interaction/TabSwitcher.tsx b/packages/hightide-web/src/components/interaction/TabSwitcher.tsx
index 7eba8eb6..3ecd388c 100644
--- a/packages/hightide-web/src/components/interaction/TabSwitcher.tsx
+++ b/packages/hightide-web/src/components/interaction/TabSwitcher.tsx
@@ -201,7 +201,7 @@ export function TabList({ ...props }: TabListProps) {
 
             className="tab-list-item"
             data-active={PropsUtil.dataAttributes.bool(isActive)}
-            {...ColoringUtils.dataColoringMode('interactive')}
+            {...ColoringUtils.build({ color: 'surface-inverse', mode: 'interactive', coloringStyle: 'foreground' })}
             data-disabled={PropsUtil.dataAttributes.bool(isDisabled)}
 
             role="tab"
diff --git a/packages/hightide-web/src/components/interaction/data/FilterList.tsx b/packages/hightide-web/src/components/interaction/data/FilterList.tsx
index e46ff87a..e890951c 100644
--- a/packages/hightide-web/src/components/interaction/data/FilterList.tsx
+++ b/packages/hightide-web/src/components/interaction/data/FilterList.tsx
@@ -11,8 +11,7 @@ import { PopUpOpener } from '../../layout/PopUp/PopUpOpener'
 import { Button } from '../Button'
 import { Pressable } from '../Pressable'
 import { FilterPopUp } from './FilterPopUp'
-import { Combobox } from '../Combobox/Combobox'
-import { ComboboxOption } from '../Combobox/ComboboxOption'
+import { Combobox } from '../../data-input/Combobox/Combobox'
 import { PopUpContext } from '../../layout/PopUp/PopUpContext'
 import type { FilterOperator } from './FilterOperator'
 import { FilterOperatorUtils } from './FilterOperator'
@@ -115,10 +114,10 @@ export const FilterList = ({ value, onValueChange, availableItems }: FilterListP
                   }}
                 >
                   {inactiveItems.map(item => (
-                    <ComboboxOption key={item.id} value={item.id} label={item.label}>
+                    <Combobox.Option key={item.id} value={item.id} label={item.label}>
                       {DataTypeUtils.toIcon(item.dataType)}
                       {item.label}
-                    </ComboboxOption>
+                    </Combobox.Option>
                   ))}
                 </Combobox>
               )}}
diff --git a/packages/hightide-web/src/components/interaction/data/SortingList.tsx b/packages/hightide-web/src/components/interaction/data/SortingList.tsx
index 2e1b8a6f..a4214dc6 100644
--- a/packages/hightide-web/src/components/interaction/data/SortingList.tsx
+++ b/packages/hightide-web/src/components/interaction/data/SortingList.tsx
@@ -9,8 +9,7 @@ import { PopUpOpener } from '../../layout/PopUp/PopUpOpener'
 import { Icon } from '../../visualization/Icon'
 import { Button } from '../Button'
 import { Pressable } from '../Pressable'
-import { Combobox } from '../Combobox/Combobox'
-import { ComboboxOption } from '../Combobox/ComboboxOption'
+import { Combobox } from '../../data-input/Combobox/Combobox'
 import { PopUpContext } from '../../layout/PopUp/PopUpContext'
 import { IconButton } from '../IconButton'
 import clsx from 'clsx'
@@ -87,10 +86,10 @@ export const SortingList = ({ sorting, onSortingChange, availableItems }: Sortin
                   }}
                 >
                   {inactiveItems.map((item) => (
-                    <ComboboxOption key={item.id} value={item.id} label={item.label}>
+                    <Combobox.Option key={item.id} value={item.id} label={item.label}>
                       {DataTypeUtils.toIcon(item.dataType)}
                       {item.label}
-                    </ComboboxOption>
+                    </Combobox.Option>
                   ))}
                 </Combobox>
               )}}
diff --git a/packages/hightide-web/src/components/interaction/index.ts b/packages/hightide-web/src/components/interaction/index.ts
index f20efbaa..ff073083 100644
--- a/packages/hightide-web/src/components/interaction/index.ts
+++ b/packages/hightide-web/src/components/interaction/index.ts
@@ -1,5 +1,4 @@
 export * from './Button'
-export * from './Combobox'
 export * from './CopyToClipboardWrapper'
 export * from './FocusTrap'
 export * from './IconButton'
diff --git a/packages/hightide-web/src/components/interaction/navigation/BreadCrumbs.tsx b/packages/hightide-web/src/components/interaction/navigation/BreadCrumbs.tsx
index a87567b4..16e8f357 100644
--- a/packages/hightide-web/src/components/interaction/navigation/BreadCrumbs.tsx
+++ b/packages/hightide-web/src/components/interaction/navigation/BreadCrumbs.tsx
@@ -13,7 +13,7 @@ export const BreadCrumbLink = ({ LinkElement = DefaultBreadCrumbLinkElement, cla
   return (
     <LinkElement
       {...props}
-      {...ColoringUtils.dataColoringMode('interactive')}
+      {...ColoringUtils.build({ color: 'surface-inverse', mode: 'interactive', coloringStyle: 'foreground' })}
       className={clsx('breadcrumb-link', className)}
     />
   )
diff --git a/packages/hightide-web/src/components/layout/Card.tsx b/packages/hightide-web/src/components/layout/Card.tsx
index ce91dde5..e87b6691 100644
--- a/packages/hightide-web/src/components/layout/Card.tsx
+++ b/packages/hightide-web/src/components/layout/Card.tsx
@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from 'react'
 import clsx from 'clsx'
+import { ColoringUtils } from '../interaction'
 
 export type CardSize = 'sm' | 'md' | 'lg'
 
@@ -14,9 +15,10 @@ export function Card({
 }: CardProps) {
   return (
     <div
+      {...ColoringUtils.build({ color: 'surface' })}
+      data-size={size}
       {...props}
       className={clsx('card', className)}
-      data-size={size}
     />
   )
 }
diff --git a/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSection.tsx b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSection.tsx
index 269cd343..5e97f620 100644
--- a/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSection.tsx
+++ b/packages/hightide-web/src/components/layout/ExpandableSection/ExpandableSection.tsx
@@ -8,6 +8,7 @@ import type { ExpandableRootProps } from '../Expandable/ExpandableRoot'
 import { ExpandableSectionContent } from './ExpandableSectionContent'
 import { ExpandableSectionHeader } from './ExpandableSectionHeader'
 import type { ExpandableSectionHeaderProps } from './ExpandableSectionHeader'
+import { ColoringUtils } from '../../interaction'
 
 export type ExpandableSectionProps = Omit<ExpandableRootProps, 'children'> & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'id'> & {
   trigger: ReactNode,
@@ -27,10 +28,11 @@ const ExpandableSectionFrame = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDiv
 
   return (
     <div
-      {...props}
-      ref={ref}
       data-expanded={isExpanded ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
+      {...ColoringUtils.build({ color: 'surface' })}
+      {...props}
+      ref={ref}
       className={clsx('expandable-section-root', className)}
     >
       {children}
diff --git a/packages/hightide-web/src/components/layout/PopUp/PopUp.tsx b/packages/hightide-web/src/components/layout/PopUp/PopUp.tsx
index 136b0999..60891fcf 100644
--- a/packages/hightide-web/src/components/layout/PopUp/PopUp.tsx
+++ b/packages/hightide-web/src/components/layout/PopUp/PopUp.tsx
@@ -17,6 +17,7 @@ import { useOverlayRegistry } from '@helpwave/hightide-utils/hooks'
 import { useScrollObserver } from '../../../hooks/useScrollObserver'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import { PropsUtil } from '../../../utils/propsUtil'
+import { ColoringUtils } from '../../interaction'
 
 export interface PopUpProps extends Omit<AnchoredFloatingContainerProps, 'anchor'>, Partial<UseOutsideClickHandlers> {
   isOpen?: boolean,
@@ -80,6 +81,7 @@ export const PopUp = forwardRef<HTMLDivElement, PopUpProps>(function PopUp({
       <Portal>
         <FocusTrap {...focusTrapOptions} active={isPresent && isOpen && (focusTrapOptions?.active ?? true)} container={ref}>
           <AnchoredFloatingContainer
+            {...ColoringUtils.build({ color: 'surface' })}
             {...props}
             id={id}
             anchor={anchor}
@@ -99,7 +101,8 @@ export const PopUp = forwardRef<HTMLDivElement, PopUpProps>(function PopUp({
               overflow: 'hidden',
               ...props.style
             }}
-            className={clsx('pop-up', props.className)}>
+            className={clsx('pop-up', props.className)}
+          >
             {children}
           </AnchoredFloatingContainer>
         </FocusTrap>
diff --git a/packages/hightide-web/src/components/layout/Table/TableBody.tsx b/packages/hightide-web/src/components/layout/Table/TableBody.tsx
index 2c4805e1..9a963032 100644
--- a/packages/hightide-web/src/components/layout/Table/TableBody.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TableBody.tsx
@@ -34,7 +34,6 @@ export const TableBody = React.memo(function TableBodyVisual() {
             key={row.id}
             onClick={() => onRowClick?.(row, table)}
             data-clickable={PropsUtil.dataAttributes.bool(!!onRowClick)}
-            {...ColoringUtils.dataColoringMode('interactive')}
             className={clsx('table-body-row', BagFunctionUtil.resolve(table.options.meta?.bodyRowClassName, row.original))}
           >
             {row.getVisibleCells().map(cell => {
diff --git a/packages/hightide-web/src/components/layout/Table/TableSortButton.tsx b/packages/hightide-web/src/components/layout/Table/TableSortButton.tsx
index 592af05f..bc0e101e 100644
--- a/packages/hightide-web/src/components/layout/Table/TableSortButton.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TableSortButton.tsx
@@ -6,6 +6,7 @@ import { Visibility } from '../Visibility'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import type { IconButtonProps } from '../../interaction/IconButton'
 import { IconButton } from '../../interaction/IconButton'
+import { ColoringUtils } from '../../interaction'
 
 type SortingIndexDisplay = {
   index: number,
@@ -62,7 +63,8 @@ export const TableSortButton = ({
     >
       <Visibility isVisible={hasSortingIndex}>
         <div
-          className={clsx('absolute bottom-0 right-1/2 translate-x-1/2 translate-y-2/3 z-1 primary coloring-solid rounded-full h-4 w-5 text-sm')}
+          {...ColoringUtils.build({ color: 'primary' })}
+          className={clsx('absolute bottom-0 right-1/2 translate-x-1/2 translate-y-2/3 z-1 rounded-full h-4 w-5 text-sm')}
         >
           {`${parsedIndex}.`}
         </div>
diff --git a/packages/hightide-web/src/components/layout/Table/VirtualizedTableBody.tsx b/packages/hightide-web/src/components/layout/Table/VirtualizedTableBody.tsx
index e82a5e02..db9e63f1 100644
--- a/packages/hightide-web/src/components/layout/Table/VirtualizedTableBody.tsx
+++ b/packages/hightide-web/src/components/layout/Table/VirtualizedTableBody.tsx
@@ -46,7 +46,6 @@ const VirtualizedTableRow = memo(({
     ref={measureRef}
     onClick={onRowClick ? () => onRowClick(row, table) : undefined}
     data-clickable={PropsUtil.dataAttributes.bool(!!onRowClick)}
-    {...ColoringUtils.dataColoringMode('interactive')}
     className={clsx('table-body-row', className)}
   >
     {cells.map(cell => (
diff --git a/packages/hightide-web/src/components/layout/list/ListItem.tsx b/packages/hightide-web/src/components/layout/list/ListItem.tsx
index 114adc20..43c599a0 100644
--- a/packages/hightide-web/src/components/layout/list/ListItem.tsx
+++ b/packages/hightide-web/src/components/layout/list/ListItem.tsx
@@ -23,9 +23,9 @@ export function ListItem({
 }: ListItemProps) {
   return (
     <div
+      {...(color ? ColoringUtils.build({ color, colorVariant: 'tonal' }) : {})}
       {...props}
-      className={clsx('list-item', color, color && 'coloring-tonal', className)}
-      {...ColoringUtils.dataColor(color)}
+      className={clsx('list-item', className)}
     >
       <ListItemContent
         title={title}
diff --git a/packages/hightide-web/src/components/visualization/Avatar/AvatarRoot.tsx b/packages/hightide-web/src/components/visualization/Avatar/AvatarRoot.tsx
index b0c7ceec..dfe20191 100644
--- a/packages/hightide-web/src/components/visualization/Avatar/AvatarRoot.tsx
+++ b/packages/hightide-web/src/components/visualization/Avatar/AvatarRoot.tsx
@@ -6,6 +6,7 @@ import type { LoadingState } from '@helpwave/hightide-utils/utils'
 import type { ImageComponent } from '../../../utils/image'
 import { AvatarContext } from './AvatarContext'
 import type { AvatarImageConfig, AvatarSize, AvatarStatus } from './AvatarTypes'
+import { ColoringUtils } from '../../interaction'
 
 const DefaultAvatarImage: ImageComponent = 'img'
 
@@ -70,10 +71,11 @@ export function AvatarRoot({
   return (
     <AvatarContext.Provider value={contextValue}>
       <div
-        {...props}
-        className={clsx('avatar', className)}
         data-size={size ?? undefined}
         data-loading-state={imageLoadingState}
+        {...ColoringUtils.build({ color: 'primary' })}
+        {...props}
+        className={clsx('avatar', className)}
       >
         {children}
       </div>
diff --git a/packages/hightide-web/src/style/theme/colors/component.css b/packages/hightide-web/src/style/theme/colors/component.css
index 72f57200..984fb8b3 100644
--- a/packages/hightide-web/src/style/theme/colors/component.css
+++ b/packages/hightide-web/src/style/theme/colors/component.css
@@ -49,12 +49,12 @@
   /* Scrollbar */
   --color-scrollbar-track: #00000033;
   --color-scrollbar-track: oklch(0.000 0 0 / 0.2);
-  --color-scrollbar-thumb: var(--color-gray-600);
+  --color-scrollbar-thumb: var(--color-gray-400);
 
   /* Stepper Bar */
   --color-stepperbar-dot-active: var(--color-primary);
   --color-stepperbar-dot-normal: var(--color-purple-100);
-  --color-stepperbar-dot-disabled: var(--color-description);
+  --color-stepperbar-dot-disabled: var(--color-surface-variant);
 
   /* Switch */
   --color-switch-thumb-inactive: var(--color-on-surface);
@@ -75,7 +75,7 @@
 
   /* Tooltip */
   --color-tooltip-background: var(--color-menu-background);
-  --color-tooltip-text: var(--color-description);
+  --color-tooltip-text: var(--color-menu-text);
 
   /* Other */
   --color-border: var(--color-gray-200);
diff --git a/packages/hightide-web/src/style/theme/colors/utilities.css b/packages/hightide-web/src/style/theme/colors/utilities.css
index 07fa96bb..3c7f97fd 100644
--- a/packages/hightide-web/src/style/theme/colors/utilities.css
+++ b/packages/hightide-web/src/style/theme/colors/utilities.css
@@ -1,101 +1,4 @@
-@utility primary {
-  @apply coloring-reset-variables;
-  --coloring-color: var(--color-primary);
-  --coloring-on-color: var(--color-on-primary);
-  --color-focus: var(--color-primary);
-}
-
-@utility secondary {
-  @apply coloring-reset-variables;
-  --coloring-color: var(--color-secondary);
-  --coloring-on-color: var(--color-on-secondary);
-  --color-focus: var(--color-secondary);
-}
-
-@utility positive {
-  @apply coloring-reset-variables;
-  --coloring-color: var(--color-positive);
-  --coloring-on-color: var(--color-on-positive);
-  --color-focus: var(--color-positive);
-}
-
-@utility negative {
-  @apply coloring-reset-variables;
-  --coloring-color: var(--color-negative);
-  --coloring-on-color: var(--color-on-negative);
-  --color-focus: var(--color-negative);
-}
-
-@utility warning {
-  @apply coloring-reset-variables;
-  --coloring-color: var(--color-warning);
-  --coloring-on-color: var(--color-on-warning);
-  --color-focus: var(--color-warning);
-}
-
-@utility neutral {
-  @apply coloring-reset-variables;
-  --coloring-color: var(--color-neutral);
-  --coloring-on-color: var(--color-on-neutral);
-  --coloring-text: var(--color-neutral-text);
-  --coloring-outline: var(--color-neutral-outline);
-  --coloring-tonal: var(--color-neutral-tonal);
-  --coloring-tonal-text: var(--color-neutral-tonal-text);
-  --coloring-tonal-background: var(--color-neutral-tonal-background);
-}
-
-@utility disabled {
-  @apply coloring-reset-variables;
-  --coloring-color: var(--color-disabled);
-  --coloring-on-color: var(--color-on-disabled);
-}
-
 @utility text-description {
   --color-description: color-mix(in oklch, var(--coloring-foreground, var(--color-on-surface)) var(--appearance-subtle), var(--coloring-color, var(--color-surface)));
   color: var(--color-description);
 }
-
-@utility description {
-  @apply coloring-reset-variables;
-  --coloring-color: var(--color-description);
-}
-
-@utility surface {
-  @apply coloring-reset-variables;
-  --coloring-color: var(--color-surface);
-  --coloring-on-color: var(--color-on-surface);
-}
-
-@utility surface-variant {
-  @apply coloring-reset-variables;
-  --coloring-color: var(--color-surface-variant);
-  --coloring-on-color: var(--color-on-surface-variant);
-}
-
-@utility surface-warning {
-  @apply coloring-reset-variables;
-  --coloring-color: var(--color-surface-warning);
-  --coloring-on-color: var(--color-on-surface-warning);
-}
-
-@utility coloring-style-detect {
-  @apply data-[coloringstyle=solid]:coloring-solid;
-  @apply data-[coloringstyle=text]:coloring-text;
-  @apply data-[coloringstyle=outline]:coloring-outline;
-  @apply data-[coloringstyle=tonal]:coloring-tonal;
-  @apply data-[coloringstyle=tonal-outline]:coloring-tonal-outline;
-}
-
-@utility coloring-color-detect {
-  @apply data-[color=primary]:primary;
-  @apply data-[color=secondary]:secondary;
-  @apply data-[color=positive]:positive;
-  @apply data-[color=warning]:warning;
-  @apply data-[color=negative]:negative;
-  @apply data-[color=neutral]:neutral;
-  @apply data-[color=description]:description;
-  @apply data-[color=surface]:surface;
-  @apply data-[color=surface-variant]:surface-variant;
-  @apply data-[color=surface-warning]:surface-warning;
-  @apply data-[color=disabled]:disabled;
-}
\ No newline at end of file
diff --git a/packages/hightide-web/src/style/theme/components/app-page.css b/packages/hightide-web/src/style/theme/components/app-page.css
index 67759991..b959c7f0 100644
--- a/packages/hightide-web/src/style/theme/components/app-page.css
+++ b/packages/hightide-web/src/style/theme/components/app-page.css
@@ -119,7 +119,7 @@
   }
 
   .app-page-main-spacer {
-    @apply min-h-16;
+    @apply min-h-4;
   }
 
   .app-page-navigation-item-label {
diff --git a/packages/hightide-web/src/style/theme/components/avatar.css b/packages/hightide-web/src/style/theme/components/avatar.css
index c5c0cde0..57c4119b 100644
--- a/packages/hightide-web/src/style/theme/components/avatar.css
+++ b/packages/hightide-web/src/style/theme/components/avatar.css
@@ -1,6 +1,6 @@
 @layer components {
   .avatar {
-    @apply relative flex-row-0 items-center justify-center primary coloring-solid rounded-full;
+    @apply relative flex-row-0 items-center justify-center rounded-full;
     &.avatar-group-avatar {
       @apply absolute shadow-side shadow-r-4 shadow-hard;
     }
diff --git a/packages/hightide-web/src/style/theme/components/breadcrumb.css b/packages/hightide-web/src/style/theme/components/breadcrumb.css
index e1ae6bf6..f0a60f85 100644
--- a/packages/hightide-web/src/style/theme/components/breadcrumb.css
+++ b/packages/hightide-web/src/style/theme/components/breadcrumb.css
@@ -7,13 +7,10 @@
   }
   .breadcrumb-link {
     @apply flex-row-1 px-1.5 py-1 rounded-1.5 h-8;
-    @apply relative;
-    --coloring-on-base: var(--color-description);
-    color: var(--color-description);
+    opacity: 80%;
   }
   .breadcrumb-item:last-child .breadcrumb-link {
-    --coloring-on-base: var(--color-on-surface);
-    color: var(--color-on-surface);
+    opacity: 100%;
   }
 
   .breadcrumb-divider {
diff --git a/packages/hightide-web/src/style/theme/components/card.css b/packages/hightide-web/src/style/theme/components/card.css
index ec4818b5..65e7ffa1 100644
--- a/packages/hightide-web/src/style/theme/components/card.css
+++ b/packages/hightide-web/src/style/theme/components/card.css
@@ -1,6 +1,6 @@
 @layer components {
   .card {
-    @apply flex-col-0 w-full min-w-0 overflow-hidden surface coloring-solid shadow-md;
+    @apply flex-col-0 w-full min-w-0 overflow-hidden shadow-md;
 
     &[data-size="sm"] {
       @apply px-3 py-2 rounded-lg min-h-16;
diff --git a/packages/hightide-web/src/style/theme/components/combobox.css b/packages/hightide-web/src/style/theme/components/combobox.css
index 096f5f70..c0ea8f63 100644
--- a/packages/hightide-web/src/style/theme/components/combobox.css
+++ b/packages/hightide-web/src/style/theme/components/combobox.css
@@ -15,7 +15,7 @@
     @apply flex-row-1 items-center px-2 py-1 rounded-md cursor-pointer;
 
     &[data-highlighted] {
-      @apply bg-primary/20;
+      background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), transparent);
     }
   }
 
diff --git a/packages/hightide-web/src/style/theme/components/expandable.css b/packages/hightide-web/src/style/theme/components/expandable.css
index d3a7e2a7..194fe8cc 100644
--- a/packages/hightide-web/src/style/theme/components/expandable.css
+++ b/packages/hightide-web/src/style/theme/components/expandable.css
@@ -1,6 +1,6 @@
 @layer components {
   .expandable-section-root {
-    @apply flex-col-0 surface coloring-solid rounded-lg shadow-sm;
+    @apply flex-col-0 rounded-lg shadow-sm;
 
     &:not([data-disabled])[data-containertoggleable] {
       @apply cursor-pointer;
@@ -16,7 +16,7 @@
     }
 
     &[data-disabled] {
-      @apply cursor-not-allowed disabled coloring-solid;
+      @apply cursor-not-allowed;
     }
   }
 
diff --git a/packages/hightide-web/src/style/theme/components/input-elements.css b/packages/hightide-web/src/style/theme/components/input-elements.css
index 9cb0378e..db422047 100644
--- a/packages/hightide-web/src/style/theme/components/input-elements.css
+++ b/packages/hightide-web/src/style/theme/components/input-elements.css
@@ -38,7 +38,7 @@
     @apply border-disabled bg-disabled text-on-disabled placeholder:text-transparent cursor-not-allowed;
   }
 
-  &:not([data-disabled]):not([data-readonly]):not([data-invalid]):hover {
+  &:not([data-disabled]):not([data-readonly]):not([data-invalid]):hover:not(:focus) {
     background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), var(--color-input-background));
   }
 
@@ -46,7 +46,7 @@
     background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-press), var(--color-input-background));
   }
 
-  &:not([data-disabled]):not([data-readonly])[data-invalid]:hover {
+  &:not([data-disabled]):not([data-readonly])[data-invalid]:hover:hover:not(:focus) {
     background-color: color-mix(in oklch, var(--color-negative) var(--coloring-state-hover), color-mix(in oklch, var(--color-negative) 20%, transparent));
   }
 
diff --git a/packages/hightide-web/src/style/theme/components/pop-up.css b/packages/hightide-web/src/style/theme/components/pop-up.css
index c75b80e9..c7ed8307 100644
--- a/packages/hightide-web/src/style/theme/components/pop-up.css
+++ b/packages/hightide-web/src/style/theme/components/pop-up.css
@@ -1,5 +1,5 @@
 .pop-up {
-    @apply surface coloring-solid rounded-md border-2 border-outline-variant shadow-lg shadow-black/15;
+    @apply rounded-md border-2 border-outline-variant shadow-lg shadow-black/15;
     @apply focus-within:border-primary;
 
     transition: 
diff --git a/packages/hightide-web/src/style/theme/components/searchbar.css b/packages/hightide-web/src/style/theme/components/searchbar.css
index fc59854e..8e7741fb 100644
--- a/packages/hightide-web/src/style/theme/components/searchbar.css
+++ b/packages/hightide-web/src/style/theme/components/searchbar.css
@@ -14,5 +14,6 @@
 
   .search-bar-icon-button {
     @apply absolute right-1.5 top-1/2 -translate-y-1/2;
+    --coloring-position-override: absolute;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/select.css b/packages/hightide-web/src/style/theme/components/select.css
index 7278c498..4f0db454 100644
--- a/packages/hightide-web/src/style/theme/components/select.css
+++ b/packages/hightide-web/src/style/theme/components/select.css
@@ -21,7 +21,7 @@
   }
 
   .multi-select-chip-display-chip {
-    @apply flex-row-1 items-center pl-2 pr-1 coloring-solid neutral rounded-md h-9 z-1;
+    @apply flex-row-1 items-center pl-2 pr-1 rounded-md h-9 z-1;
   }
 
   .multi-select-chip-display-add-button {
diff --git a/packages/hightide-web/src/style/theme/components/table.css b/packages/hightide-web/src/style/theme/components/table.css
index ace153b8..55720c07 100644
--- a/packages/hightide-web/src/style/theme/components/table.css
+++ b/packages/hightide-web/src/style/theme/components/table.css
@@ -58,11 +58,11 @@
   }
 
   .table-body-row {
-    &[data-coloring-mode="interactive"]:hover {
-      background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), transparent);
-    }
     &[data-clickable] {
       @apply hover:cursor-pointer;
+      &:hover {
+         background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), transparent);
+      }
     }
   }
 
diff --git a/packages/hightide-web/src/style/theme/components/tabswitcher.css b/packages/hightide-web/src/style/theme/components/tabswitcher.css
index 3bac223a..a7f3281f 100644
--- a/packages/hightide-web/src/style/theme/components/tabswitcher.css
+++ b/packages/hightide-web/src/style/theme/components/tabswitcher.css
@@ -6,11 +6,9 @@
 
   .tab-list-item {
     @apply flex-row-0 grow justify-center px-3 py-2 typography-label-md border-b-4 transition-colors;
-    --coloring-on-base: var(--color-on-surface);
-    color: var(--color-on-surface);
     
     &[data-disabled] {
-      @apply cursor-not-allowed disabled coloring-text;
+      @apply cursor-not-allowed;
     }
 
     &:not([data-disabled]) {
diff --git a/packages/hightide-web/src/style/theme/components/vertical-navigation.css b/packages/hightide-web/src/style/theme/components/vertical-navigation.css
index ccb2a5d2..3dc51f9d 100644
--- a/packages/hightide-web/src/style/theme/components/vertical-navigation.css
+++ b/packages/hightide-web/src/style/theme/components/vertical-navigation.css
@@ -14,12 +14,16 @@
       @apply hover:cursor-pointer;
       transition: var(--focus-transitions);
 
-      &:hover,
-      &:focus-visible {
-        @apply bg-primary/15;
+      &:hover {
+        background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), transparent);
+      }
+
+      &:active {
+        background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-press), transparent);
       }
 
       &:focus-visible {
+        background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-press), transparent);
         outline: var(--focus-outline);
         outline-offset: var(--focus-outline-offset);
         box-shadow: var(--focus-box-shadow);
@@ -34,9 +38,12 @@
     &[data-interactable] {
       @apply hover:cursor-pointer;
 
-      &:hover,
-      &:has(:focus-visible) {
-        @apply bg-primary/15;
+      &:hover {
+        background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), transparent);
+      }
+
+      &:active, &:has(:focus-visible) {
+        background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-press), transparent);
       }
     }
   }
diff --git a/packages/hightide-web/src/style/utitlity/coloring.css b/packages/hightide-web/src/style/utitlity/coloring.css
index 624b2e76..84569e1d 100644
--- a/packages/hightide-web/src/style/utitlity/coloring.css
+++ b/packages/hightide-web/src/style/utitlity/coloring.css
@@ -44,37 +44,13 @@
     background-color var(--animation-duration-in, 250ms) ease-in-out;
 }
 
-@utility coloring-solid {
-  @apply bg-[var(--coloring-solid-color,var(--coloring-color))]
-  text-[var(--coloring-solid-text,var(--coloring-on-color))];
-}
-
-@utility coloring-tonal {
-  @apply bg-[var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)))]/20
-  text-[var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)))];
-}
-
-@utility coloring-text {
-  @apply text-[var(--coloring-text,var(--coloring-color))];
-}
-
-@utility coloring-outline {
-  border-width: var(--coloring-outline-width, 0.125rem);
-  @apply border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))];
-  @apply text-[var(--coloring-outline,var(--coloring-color))];
-}
-
-@utility coloring-tonal-outline {
-  @apply coloring-tonal;
-  border-width: var(--coloring-outline-width, 0.125rem);
-  @apply border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))];
-}
-
 @layer utilities {
-  [data-coloring-mode="static"],
   [data-coloring-mode="interactive"] {
-  position: var(--coloring-position-override, relative);
+    position: var(--coloring-position-override, relative);
+  }
 
+  [data-coloring-mode="static"],
+  [data-coloring-mode="interactive"] {
   --coloring-color: var(--coloring-base);
   --coloring-on-color: var(--coloring-on-base);
   --coloring-accent: var(--coloring-base);
@@ -110,11 +86,6 @@
     --coloring-on-base: var(--color-on-neutral);
   }
 
-  &[data-color="description"] {
-    --coloring-base: var(--color-description);
-    --coloring-on-base: var(--color-on-surface);
-  }
-
   &[data-color="surface"] {
     --coloring-base: var(--color-surface);
     --coloring-on-base: var(--color-on-surface);
@@ -167,7 +138,6 @@
 
   &[data-coloring-style="foreground"] {
     --coloring-foreground: var(--coloring-color);
-    background-color: transparent;
     color: var(--coloring-foreground);
   }
 
diff --git a/packages/hightide-web/stories/interaction/Combobox/Combobox.stories.tsx b/packages/hightide-web/stories/data-input/Combobox/Combobox.stories.tsx
similarity index 79%
rename from packages/hightide-web/stories/interaction/Combobox/Combobox.stories.tsx
rename to packages/hightide-web/stories/data-input/Combobox/Combobox.stories.tsx
index 12961b86..b3ab6b4e 100644
--- a/packages/hightide-web/stories/interaction/Combobox/Combobox.stories.tsx
+++ b/packages/hightide-web/stories/data-input/Combobox/Combobox.stories.tsx
@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { Combobox } from '../../../src/components/interaction/Combobox/Combobox'
-import { ComboboxOption } from '../../../src/components/interaction/Combobox/ComboboxOption'
+import { Combobox } from '../../../src/components/data-input/Combobox/Combobox'
 
 const options = [
   { value: 'apple', label: 'Apple' },
@@ -29,11 +28,13 @@ export const combobox: Story = {
   args: {
     id: undefined,
     children: options.map(({ value, label }) => (
-      <ComboboxOption key={value} value={value} label={label}>
+      <Combobox.Option key={value} value={value} label={label}>
         {label}
-      </ComboboxOption>
+      </Combobox.Option>
     )),
     onItemClick: action('onItemClick'),
+    onValueChange: action('onValueChange'),
+    onEditComplete: action('onEditComplete'),
   },
   render: (args) => (
     <div className="w-80 flex flex-col gap-2">
diff --git a/packages/hightide-web/stories/layout/ScrollableList.stories.tsx b/packages/hightide-web/stories/layout/ScrollableList.stories.tsx
index fe6c65cb..a7b18ecf 100644
--- a/packages/hightide-web/stories/layout/ScrollableList.stories.tsx
+++ b/packages/hightide-web/stories/layout/ScrollableList.stories.tsx
@@ -25,7 +25,7 @@ type Story = StoryObj<typeof meta>
 
 export const scrollableList: Story = {
   args: {
-    className: 'surface coloring-solid rounded-lg border border-divider',
+    className: 'rounded-lg border border-divider',
     headerClassName: 'px-4 py-3 border-b border-divider',
     contentClassName: 'px-2 py-1',
     footerClassName: 'px-4 py-2 border-t border-divider',
@@ -57,7 +57,7 @@ export const asNav: Story = {
   args: {
     'as': 'nav',
     'aria-label': 'Sections',
-    'className': 'surface coloring-solid rounded-lg border border-divider',
+    'className': 'rounded-lg border border-divider',
     'headerClassName': 'px-4 py-3 border-b border-divider',
     'contentClassName': 'px-2 py-1',
     'header': (
diff --git a/packages/hightide-web/stories/layout/app/AppPage.stories.tsx b/packages/hightide-web/stories/layout/app/AppPage.stories.tsx
index d033106e..08d0f1ba 100644
--- a/packages/hightide-web/stories/layout/app/AppPage.stories.tsx
+++ b/packages/hightide-web/stories/layout/app/AppPage.stories.tsx
@@ -99,7 +99,7 @@ export const appPage: Story = {
         {Array.from({ length: 12 }, (_, index) => (
           <div
             key={index}
-            className="surface coloring-solid rounded-lg p-4 typography-label-md"
+            className="rounded-lg p-4 typography-label-md"
           >
             {`Section ${index + 1}`}
           </div>
diff --git a/packages/hightide-web/stories/layout/virtualization/VirtualizedCardGrid.stories.tsx b/packages/hightide-web/stories/layout/virtualization/VirtualizedCardGrid.stories.tsx
index 1c34185e..528a8606 100644
--- a/packages/hightide-web/stories/layout/virtualization/VirtualizedCardGrid.stories.tsx
+++ b/packages/hightide-web/stories/layout/virtualization/VirtualizedCardGrid.stories.tsx
@@ -35,7 +35,7 @@ const fetchPage = async (pageIndex: number): Promise<Item[]> => {
 }
 
 const ItemCard = ({ item }: { item: Item }) => (
-  <div className="surface coloring-solid rounded-lg p-4 flex-col-2 h-full">
+  <div className="rounded-lg p-4 flex-col-2 h-full">
     <div className="flex-row-2 items-center justify-between">
       <span className="typography-title-sm truncate">{item.name}</span>
       <Chip>{item.status}</Chip>

From 089be949e17cc965cd4330ac59998b864205a708 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Fri, 2 Oct 2026 12:07:04 +0200
Subject: [PATCH 23/25] feat: update input and modal styling

---
 packages/hightide-web/CHANGELOG.md            |   4 +
 .../ChatAttachmentMessageBubble.tsx           |   2 +-
 .../data-input/Combobox/ComboboxInput.tsx     |   2 +
 .../data-input/FileInput/FileInputMenu.tsx    |   2 +-
 .../data-input/FileInput/FileInputTrigger.tsx |   2 +-
 .../MultiSelectChipDisplayTrigger.tsx         |   9 +-
 .../MultiSelect/MultiSelectTrigger.tsx        |   2 +-
 .../data-input/Select/SelectTrigger.tsx       |   2 +-
 .../src/components/data-input/Textarea.tsx    |   2 +-
 .../data-input/input/DateTimeInput.tsx        |  25 ++++-
 .../src/components/data-input/input/Input.tsx |   2 +-
 .../data-input/input/NumberInput.tsx          |   2 +-
 .../data-input/input/NumberStepperInput.tsx   |   2 +
 .../src/components/layout/Modal/Modal.tsx     |  30 ++---
 .../layout/Modal/ModalCloseButton.tsx         |   2 +-
 .../components/layout/Modal/ModalContent.tsx  |  47 ++------
 .../components/layout/Modal/ModalPanel.tsx    |  46 ++++++++
 .../components/layout/Modal/ModalTitle.tsx    |   2 +-
 .../src/components/layout/Modal/index.ts      |  12 +-
 .../Modal/{ => premade}/ConfirmModal.tsx      |  14 +--
 .../{ => premade}/DiscardChangesModal.tsx     |   0
 .../layout/Modal/{ => premade}/InputModal.tsx |   4 +-
 .../Modal/{ => premade}/LanguageModal.tsx     |  16 +--
 .../layout/Modal/{ => premade}/ThemeModal.tsx |  18 +--
 .../components/layout/Modal/premade/index.ts  |   9 ++
 .../chat/chat-attachment-message-bubble.css   |   2 +-
 .../components/chat/chat-message-composer.css |   4 +-
 .../src/style/theme/components/combobox.css   |   4 -
 .../theme/components/date-time-input.css      |  14 ++-
 .../src/style/theme/components/file-input.css |   2 +-
 .../src/style/theme/components/index.css      |   3 +-
 .../style/theme/components/input-element.css  |  58 ++++++++++
 .../style/theme/components/input-elements.css | 103 ------------------
 .../src/style/theme/components/input.css      |   6 +
 .../src/style/theme/components/modal.css      |  22 +++-
 .../style/theme/components/number-input.css   |   4 +-
 .../theme/components/number-stepper-input.css |   6 +-
 .../src/style/theme/components/select.css     |  12 +-
 .../src/style/theme/components/textarea.css   |   2 +-
 .../theme/components/vertical-navigation.css  |   8 +-
 .../src/style/theme/variables.css             |  28 +++--
 .../src/style/utitlity/coloring.css           |   5 +
 packages/hightide-web/src/utils/coloring.ts   |   1 +
 .../ExtendTranslations.stories.tsx            |   2 +-
 .../data-input/{input => }/Input.stories.tsx  |   2 +-
 .../{input => }/InsideLabelInput.stories.tsx  |   2 +-
 .../NumberStepperInput.stories.tsx            |   2 +-
 .../{input => }/SearchBar.stories.tsx         |   2 +-
 .../Select}/ThemeSelect.stories.tsx           |   0
 .../{input => }/TogglableInput.stories.tsx    |   2 +-
 .../{input => date}/DateTimeInput.stories.tsx |   0
 .../FlexibleDateTimeInput.stories.tsx         |   0
 .../Modal/ConfirmModal.stories.tsx            |   2 +-
 .../Modal/DiscardChangesModal.stories.tsx     |   2 +-
 .../Modal/LanguageModal.stories.tsx           |   2 +-
 .../Modal/StackedModal.stories.tsx            |   0
 .../Modal/ThemeModal.stories.tsx              |   2 +-
 57 files changed, 297 insertions(+), 265 deletions(-)
 create mode 100644 packages/hightide-web/src/components/layout/Modal/ModalPanel.tsx
 rename packages/hightide-web/src/components/layout/Modal/{ => premade}/ConfirmModal.tsx (87%)
 rename packages/hightide-web/src/components/layout/Modal/{ => premade}/DiscardChangesModal.tsx (100%)
 rename packages/hightide-web/src/components/layout/Modal/{ => premade}/InputModal.tsx (80%)
 rename packages/hightide-web/src/components/layout/Modal/{ => premade}/LanguageModal.tsx (81%)
 rename packages/hightide-web/src/components/layout/Modal/{ => premade}/ThemeModal.tsx (84%)
 create mode 100644 packages/hightide-web/src/components/layout/Modal/premade/index.ts
 create mode 100644 packages/hightide-web/src/style/theme/components/input-element.css
 delete mode 100644 packages/hightide-web/src/style/theme/components/input-elements.css
 create mode 100644 packages/hightide-web/src/style/theme/components/input.css
 rename packages/hightide-web/stories/data-input/{input => }/Input.stories.tsx (90%)
 rename packages/hightide-web/stories/data-input/{input => }/InsideLabelInput.stories.tsx (86%)
 rename packages/hightide-web/stories/data-input/{input => }/NumberStepperInput.stories.tsx (92%)
 rename packages/hightide-web/stories/data-input/{input => }/SearchBar.stories.tsx (85%)
 rename packages/hightide-web/stories/{layout/Modal => data-input/Select}/ThemeSelect.stories.tsx (100%)
 rename packages/hightide-web/stories/data-input/{input => }/TogglableInput.stories.tsx (83%)
 rename packages/hightide-web/stories/data-input/{input => date}/DateTimeInput.stories.tsx (100%)
 rename packages/hightide-web/stories/data-input/{input => date}/FlexibleDateTimeInput.stories.tsx (100%)
 rename packages/hightide-web/stories/{layout => interaction}/Modal/ConfirmModal.stories.tsx (96%)
 rename packages/hightide-web/stories/{layout => interaction}/Modal/DiscardChangesModal.stories.tsx (92%)
 rename packages/hightide-web/stories/{layout => interaction}/Modal/LanguageModal.stories.tsx (91%)
 rename packages/hightide-web/stories/{layout => interaction}/Modal/StackedModal.stories.tsx (100%)
 rename packages/hightide-web/stories/{layout => interaction}/Modal/ThemeModal.stories.tsx (93%)

diff --git a/packages/hightide-web/CHANGELOG.md b/packages/hightide-web/CHANGELOG.md
index 685fd42a..e991c330 100644
--- a/packages/hightide-web/CHANGELOG.md
+++ b/packages/hightide-web/CHANGELOG.md
@@ -31,6 +31,7 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `--coloring-state-hover` and `--coloring-state-press`
 - `--appearance-subtle` (`70%`)
 - `text-description`, which sets the text color from the active foreground and background
+- Added a `ModalPanel` component for the modal panel
 
 ### Changed
 
@@ -77,6 +78,9 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `Modal` content max width is `calc(min(100vw - 1rem, 60rem))` by default, `calc(min(100vw - 2rem, 80rem))` from the tablet breakpoint, and `calc(min(100vw - 4rem, 120rem))` from the desktop breakpoint
 - `Modal` content min height is `calc(min(64rem, 100vh - 1rem))` by default, `calc(min(64rem, 100vh - 2rem))` from the tablet breakpoint, and `calc(min(64rem, 100vh - 4rem))` from the desktop breakpoint
 - `ConfirmModal` and `DiscardChangesModal` action buttons stack in a column below the tablet breakpoint
+- `input-element` to a component className instead of a tailwind utility
+- default element sizes to match hightide-design
+- updated `Modal` parts stylings
 
 ### Removed
 
diff --git a/packages/hightide-web/src/components/chat/visualization/ChatAttachmentMessageBubble.tsx b/packages/hightide-web/src/components/chat/visualization/ChatAttachmentMessageBubble.tsx
index 4efc8c72..b0db4d1d 100644
--- a/packages/hightide-web/src/components/chat/visualization/ChatAttachmentMessageBubble.tsx
+++ b/packages/hightide-web/src/components/chat/visualization/ChatAttachmentMessageBubble.tsx
@@ -62,7 +62,7 @@ export const ChatAttachmentMessageBubble = ({
           aria-label={downloadLabel}
           onClick={onDownload}
           {...ColoringUtils.build({
-            color: 'surface-inverse',
+            color: direction === 'outgoing' ? 'primary-inverse' : 'surface-inverse',
             mode: 'interactive',
             coloringStyle: 'foreground'
           })}
diff --git a/packages/hightide-web/src/components/data-input/Combobox/ComboboxInput.tsx b/packages/hightide-web/src/components/data-input/Combobox/ComboboxInput.tsx
index 32fd8d3a..c06972e4 100644
--- a/packages/hightide-web/src/components/data-input/Combobox/ComboboxInput.tsx
+++ b/packages/hightide-web/src/components/data-input/Combobox/ComboboxInput.tsx
@@ -4,6 +4,7 @@ import { useHightideTranslation } from '@helpwave/hightide-utils/context/transla
 
 import { Input } from '../input/Input'
 import { useComboboxContext } from './ComboboxContext'
+import clsx from 'clsx'
 
 export type ComboboxInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>
 
@@ -63,6 +64,7 @@ export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
         aria-controls={context.config.ids.listbox}
         aria-activedescendant={context.highlightedId ?? undefined}
         aria-autocomplete="list"
+        className={clsx('combobox-input', props.className)}
       />
     )
   }
diff --git a/packages/hightide-web/src/components/data-input/FileInput/FileInputMenu.tsx b/packages/hightide-web/src/components/data-input/FileInput/FileInputMenu.tsx
index 9dc5087c..89404620 100644
--- a/packages/hightide-web/src/components/data-input/FileInput/FileInputMenu.tsx
+++ b/packages/hightide-web/src/components/data-input/FileInput/FileInputMenu.tsx
@@ -34,7 +34,7 @@ export const FileInputMenu = ({
       onClose={() => context.setIsOpen(false)}
       titleElement={translation('selectFiles')}
       description={translation('dropFilesHere')}
-      contentProps={{
+      panelProps={{
         ...props,
         'className': clsx('file-input-menu', className),
         'data-file-drag': context.isDragging ? '' : undefined,
diff --git a/packages/hightide-web/src/components/data-input/FileInput/FileInputTrigger.tsx b/packages/hightide-web/src/components/data-input/FileInput/FileInputTrigger.tsx
index d980e5db..08af4b94 100644
--- a/packages/hightide-web/src/components/data-input/FileInput/FileInputTrigger.tsx
+++ b/packages/hightide-web/src/components/data-input/FileInput/FileInputTrigger.tsx
@@ -57,7 +57,7 @@ const FileInputTriggerImpl = forwardRef<HTMLDivElement, FileInputTriggerProps>(f
           event.preventDefault()
         }
       }}
-      className={clsx('file-input-trigger', props.className)}
+      className={clsx('file-input-trigger input-element', props.className)}
       data-value={hasFiles ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       data-readonly={readOnly ? '' : undefined}
diff --git a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectChipDisplayTrigger.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectChipDisplayTrigger.tsx
index e873d6d4..28338aea 100644
--- a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectChipDisplayTrigger.tsx
+++ b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectChipDisplayTrigger.tsx
@@ -46,7 +46,7 @@ export const MultiSelectChipDisplayTrigger = forwardRef<
     <div
       {...props}
       ref={ReactUtils.assingRefsBuilder([innerRef, ref])}
-      className={clsx('multi-select-chip-display-container', props.className)}
+      className={clsx('multi-select-chip-display-container input-element', props.className)}
       data-value={context.value.length > 0 ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       data-readonly={readOnly ? '' : undefined}
@@ -57,14 +57,13 @@ export const MultiSelectChipDisplayTrigger = forwardRef<
     >
       <div
         onClick={() => {
-          console.log('clicked')
           if (!hasInteractions) return
           context.toggleIsOpen()
         }}
         className="multi-select-chip-display-button"
       />
       {selectedOptions.map((opt) => (
-        <div key={opt.value.id} {...ColoringUtils.build({ color: 'surface-variant' })} className="multi-select-chip-display-chip">
+        <div key={opt.value.id} {...ColoringUtils.build({ color: 'neutral' })} className="multi-select-chip-display-chip">
           {opt.display}
           <IconButton
             tooltip={translation('remove')}
@@ -75,7 +74,7 @@ export const MultiSelectChipDisplayTrigger = forwardRef<
             size="sm"
             color="negative"
             variant="foreground"
-            className="flex-row-0 items-center size-7 p-1"
+            className="multi-select-chip-display-chip-icon-button"
             icon={XIcon}
           />
         </div>
@@ -98,7 +97,7 @@ export const MultiSelectChipDisplayTrigger = forwardRef<
           }
         }}
         tooltip={translation('changeSelection')}
-        size="md"
+        size="sm"
         color="neutral"
         aria-invalid={invalid}
         aria-disabled={disabled}
diff --git a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectTrigger.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectTrigger.tsx
index e7d91319..02a29848 100644
--- a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectTrigger.tsx
+++ b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectTrigger.tsx
@@ -91,7 +91,7 @@ const MultiSelectTriggerImpl = forwardRef<
           break
         }
       }}
-      className={clsx('multi-select-button', props.className)}
+      className={clsx('multi-select-button input-element', props.className)}
       data-value={hasValue ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       data-readonly={readOnly ? '' : undefined}
diff --git a/packages/hightide-web/src/components/data-input/Select/SelectTrigger.tsx b/packages/hightide-web/src/components/data-input/Select/SelectTrigger.tsx
index 969d5c48..2599f02c 100644
--- a/packages/hightide-web/src/components/data-input/Select/SelectTrigger.tsx
+++ b/packages/hightide-web/src/components/data-input/Select/SelectTrigger.tsx
@@ -89,7 +89,7 @@ const SelectTriggerImpl = forwardRef<
           break
         }
       }}
-      className={clsx('select-button', props.className)}
+      className={clsx('select-button input-element', props.className)}
       data-value={hasValue ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       data-readonly={readOnly ? '' : undefined}
diff --git a/packages/hightide-web/src/components/data-input/Textarea.tsx b/packages/hightide-web/src/components/data-input/Textarea.tsx
index 29a53140..8792ac85 100644
--- a/packages/hightide-web/src/components/data-input/Textarea.tsx
+++ b/packages/hightide-web/src/components/data-input/Textarea.tsx
@@ -60,7 +60,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
         onEditCompleteWrapper(event.target.value)
       }}
 
-      className={clsx('textarea', props.className)}
+      className={clsx('textarea input-element', props.className)}
       data-value={PropsUtil.dataAttributes.bool(!!value)}
       {...PropsUtil.dataAttributes.interactionStates({ ...props, invalid })}
 
diff --git a/packages/hightide-web/src/components/data-input/input/DateTimeInput.tsx b/packages/hightide-web/src/components/data-input/input/DateTimeInput.tsx
index 516133a9..3f0d69f6 100644
--- a/packages/hightide-web/src/components/data-input/input/DateTimeInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/DateTimeInput.tsx
@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react'
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'
 import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import { CalendarIcon, X } from 'lucide-react'
 import clsx from 'clsx'
@@ -111,10 +111,18 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
 
   const hasClear = !required && allowClear && !readOnly && !disabled && state !== null
   const hasTimePicker = !readOnly
-  const hasActions = hasClear || hasTimePicker || actions.length > 0
+  const actionCount = useMemo(() => {
+    let count = 0
+    if(hasClear) count++
+    if(hasTimePicker) count++
+    count += actions.length
+    return count
+  }, [actions.length, hasClear, hasTimePicker])
+  const hasActions = actionCount > 0
+
 
   return (
-    <div {...containerProps} className={clsx('relative w-full', containerProps?.className)}>
+    <div {...containerProps} className={clsx('date-time-input-container', containerProps?.className)}>
       <div
         {...props}
         ref={ReactUtils.assingRefsBuilder([controlRef, forwardedRef])}
@@ -129,11 +137,16 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
           }
         }}
 
-        className={clsx('date-time-input', props.className)}
+        className={clsx('date-time-input input-element', props.className)}
         data-value={PropsUtil.dataAttributes.bool(!!state)}
         data-has-actions={PropsUtil.dataAttributes.bool(hasActions)}
         {...PropsUtil.dataAttributes.interactionStates({ disabled, readOnly, invalid, required })}
-        {...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)}>
+        {...PropsUtil.aria.interactionStates({ disabled, readOnly, invalid, required }, props)}
+        style={{
+          '--action-count': actionCount,
+          ...props?.style
+        } as CSSProperties}
+      >
         <DateTimeField
           ref={fieldRef}
           value={toZoned(state)}
@@ -149,7 +162,7 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
           aria-labelledby={props['aria-labelledby']}
           aria-describedby={props['aria-describedby']}
         />
-        <div className="flex-row-1 items-center">
+        <div className="data-time-actions-container">
           {actions}
           <Visibility isVisible={hasClear}>
             <IconButton
diff --git a/packages/hightide-web/src/components/data-input/input/Input.tsx b/packages/hightide-web/src/components/data-input/input/Input.tsx
index 3eec3c25..a49def6b 100644
--- a/packages/hightide-web/src/components/data-input/input/Input.tsx
+++ b/packages/hightide-web/src/components/data-input/input/Input.tsx
@@ -111,7 +111,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         setValue(value)
       }}
 
-      className={clsx('input', props.className)}
+      className={clsx('input input-element', props.className)}
       data-value={PropsUtil.dataAttributes.bool(!!value)}
       {...PropsUtil.dataAttributes.interactionStates({ ...props, invalid })}
 
diff --git a/packages/hightide-web/src/components/data-input/input/NumberInput.tsx b/packages/hightide-web/src/components/data-input/input/NumberInput.tsx
index 179155fc..e29bcf07 100644
--- a/packages/hightide-web/src/components/data-input/input/NumberInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/NumberInput.tsx
@@ -72,7 +72,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(functi
       data-value={PropsUtil.dataAttributes.bool(Number.isFinite(value))}
       {...PropsUtil.dataAttributes.interactionStates({ disabled, invalid, readOnly, required })}
       {...PropsUtil.aria.interactionStates({ disabled, invalid, readOnly, required }, props)}
-      className={clsx('number-input number-input-field', className)}
+      className={clsx('input-element number-input', className)}
       style={{
         ...style,
         '--number-input-approximate-max-characters': approximateMaxCharacters,
diff --git a/packages/hightide-web/src/components/data-input/input/NumberStepperInput.tsx b/packages/hightide-web/src/components/data-input/input/NumberStepperInput.tsx
index 8c2c1eea..29ae6b6e 100644
--- a/packages/hightide-web/src/components/data-input/input/NumberStepperInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/NumberStepperInput.tsx
@@ -120,6 +120,7 @@ export const NumberStepperInput = forwardRef<HTMLInputElement, NumberStepperInpu
       disabled={disabled || readOnly}
       tooltip={translation('increaseValue')}
       tooltipProps={{ alignment: layout === 'row' ? 'bottom' : 'top', options: { avoidOverlap: false } }}
+      data-layout={layout === 'col' ? 'col' : 'row'}
       className={clsx('number-stepper-input-button', plusButtonClassName)}
       onPointerDown={() => start('button', 1)}
       onPointerUp={() => stop('button', 1)}
@@ -138,6 +139,7 @@ export const NumberStepperInput = forwardRef<HTMLInputElement, NumberStepperInpu
       disabled={disabled || readOnly}
       tooltip={translation('decreaseValue')}
       tooltipProps={{ alignment: 'bottom', options: { avoidOverlap: false } }}
+      data-layout={layout === 'col' ? 'col' : 'row'}
       className={clsx('number-stepper-input-button', minusButtonClassName)}
       onPointerDown={() => start('button', -1)}
       onPointerUp={() => stop('button', -1)}
diff --git a/packages/hightide-web/src/components/layout/Modal/Modal.tsx b/packages/hightide-web/src/components/layout/Modal/Modal.tsx
index 83129ef5..01d00dcd 100644
--- a/packages/hightide-web/src/components/layout/Modal/Modal.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/Modal.tsx
@@ -10,8 +10,7 @@ import { ModalCloseButton } from './ModalCloseButton'
 import type { ModalCloseButtonProps } from './ModalCloseButton'
 import { ModalContainer } from './ModalContainer'
 import type { ModalContainerProps } from './ModalContainer'
-import { ModalContent } from './ModalContent'
-import type { ModalContentProps, ModalPosition } from './ModalContent'
+import { ModalPanel, type ModalPanelProps, type ModalPosition } from './ModalPanel'
 import { ModalContext } from './ModalContext'
 import { ModalDescription } from './ModalDescription'
 import type { ModalDescriptionProps } from './ModalDescription'
@@ -19,6 +18,7 @@ import { ModalOpener } from './ModalOpener'
 import { ModalRoot } from './ModalRoot'
 import { ModalTitle } from './ModalTitle'
 import type { ModalTitleProps } from './ModalTitle'
+import { ModalContent, type ModalContentProps } from './ModalContent'
 
 export type { ModalPosition }
 
@@ -32,6 +32,7 @@ export type ModalProps = {
   children?: ReactNode,
   containerProps?: Omit<ModalContainerProps, 'children' | 'isOpen' | 'onClose' | 'isClosable' | 'hasDescription' | 'contentId'>,
   backgroundProps?: ModalBackgroundProps,
+  panelProps?: Omit<ModalPanelProps, 'children'>,
   contentProps?: Omit<ModalContentProps, 'children'>,
   titleProps?: Omit<ModalTitleProps, 'children'>,
   descriptionProps?: Omit<ModalDescriptionProps, 'children'>,
@@ -48,6 +49,7 @@ const ModalComponent = forwardRef<HTMLDivElement, ModalProps>(function Modal({
   isClosable = true,
   containerProps,
   backgroundProps,
+  panelProps,
   contentProps,
   titleProps,
   descriptionProps,
@@ -60,25 +62,27 @@ const ModalComponent = forwardRef<HTMLDivElement, ModalProps>(function Modal({
       onClose={onClose}
       isClosable={isClosable}
       hasDescription={!!description}
-      contentId={contentProps?.id}
+      contentId={panelProps?.id}
       className={clsx(containerProps?.className)}
     >
       <ModalBackground {...backgroundProps} />
-      <ModalContent
-        {...contentProps}
+      <ModalPanel
+        {...panelProps}
         ref={forwardedRef}
         position={position}
-        className={clsx(contentProps?.className)}
+        className={clsx(panelProps?.className)}
       >
         <ModalTitle {...titleProps}>
           {titleElement}
         </ModalTitle>
-        <ModalDescription {...descriptionProps}>
-          {description}
-        </ModalDescription>
-        <ModalCloseButton {...closeButtonProps} />
-        {children}
-      </ModalContent>
+        <ModalContent {...contentProps}>
+          <ModalDescription {...descriptionProps}>
+            {description}
+          </ModalDescription>
+          <ModalCloseButton {...closeButtonProps} />
+          {children}
+        </ModalContent>
+      </ModalPanel>
     </ModalContainer>
   )
 })
@@ -87,7 +91,7 @@ const Modal = Object.assign(ModalComponent, {
   Root: ModalRoot,
   Container: ModalContainer,
   Background: ModalBackground,
-  Content: ModalContent,
+  Content: ModalPanel,
   Title: ModalTitle,
   Description: ModalDescription,
   CloseButton: ModalCloseButton,
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx b/packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx
index b8f1c56b..cfaf0c5e 100644
--- a/packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/ModalCloseButton.tsx
@@ -24,7 +24,7 @@ export function ModalCloseButton({
     <Visibility isVisible={context.isClosable}>
       <IconButton
         tooltip={translation('closeDialog')}
-        size="md"
+        size="sm"
         color="neutral"
         variant="foreground"
         onClick={context.onClose}
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalContent.tsx b/packages/hightide-web/src/components/layout/Modal/ModalContent.tsx
index 1c1bdc19..a23818cc 100644
--- a/packages/hightide-web/src/components/layout/Modal/ModalContent.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/ModalContent.tsx
@@ -1,46 +1,21 @@
-'use client'
-
-import type { ForwardedRef, HTMLAttributes } from 'react'
+import type { HTMLAttributes } from 'react'
 import { forwardRef } from 'react'
 import clsx from 'clsx'
-import { ReactUtils } from '@helpwave/hightide-utils/utils'
-
-import { FocusTrap } from '../../interaction/FocusTrap'
-import { useModalContext } from './ModalContext'
 
-export type ModalPosition = 'top' | 'center' | 'none'
-
-export type ModalContentProps = HTMLAttributes<HTMLDivElement> & {
-  [key: `data-${string}`]: string | undefined,
-  position?: ModalPosition,
-}
+export type ModalContentProps = HTMLAttributes<HTMLDivElement>
 
 export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(function ModalContent({
   children,
-  position = 'center',
+  className,
   ...props
-}, forwardedRef: ForwardedRef<HTMLDivElement>) {
-  const context = useModalContext()
-  if (!context.ids || !context.onClose || context.transitionState === undefined || !context.contentRef || !context.contentRefAssignment) {
-    throw new Error('Modal.Content must be used within a Modal.Container')
-  }
-
+}: ModalContentProps, ref) {
   return (
-    <FocusTrap active={!!context.isContentPresent && context.isOpen} container={context.contentRef}>
-      <div
-        {...props}
-        id={props.id ?? context.ids.content}
-        ref={ReactUtils.assingRefsBuilder([context.contentRefAssignment, forwardedRef])}
-        data-state={context.transitionState}
-        data-position={position}
-        role="dialog"
-        aria-modal={true}
-        aria-labelledby={context.ids.title}
-        aria-describedby={context.hasDescription ? context.ids.description : undefined}
-        className={clsx('modal-content', props.className)}
-      >
-        {children}
-      </div>
-    </FocusTrap>
+    <div
+      ref={ref}
+      {...props}
+      className={clsx('modal-content', className)}
+    >
+      {children}
+    </div>
   )
 })
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalPanel.tsx b/packages/hightide-web/src/components/layout/Modal/ModalPanel.tsx
new file mode 100644
index 00000000..51521545
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/ModalPanel.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+import type { ForwardedRef, HTMLAttributes } from 'react'
+import { forwardRef } from 'react'
+import clsx from 'clsx'
+import { ReactUtils } from '@helpwave/hightide-utils/utils'
+
+import { FocusTrap } from '../../interaction/FocusTrap'
+import { useModalContext } from './ModalContext'
+
+export type ModalPosition = 'top' | 'center' | 'none'
+
+export type ModalPanelProps = HTMLAttributes<HTMLDivElement> & {
+  [key: `data-${string}`]: string | undefined,
+  position?: ModalPosition,
+}
+
+export const ModalPanel = forwardRef<HTMLDivElement, ModalPanelProps>(function ModalContent({
+  children,
+  position = 'center',
+  ...props
+}, forwardedRef: ForwardedRef<HTMLDivElement>) {
+  const context = useModalContext()
+  if (!context.ids || !context.onClose || context.transitionState === undefined || !context.contentRef || !context.contentRefAssignment) {
+    throw new Error('Modal.Content must be used within a Modal.Container')
+  }
+
+  return (
+    <FocusTrap active={!!context.isContentPresent && context.isOpen} container={context.contentRef}>
+      <div
+        {...props}
+        id={props.id ?? context.ids.content}
+        ref={ReactUtils.assingRefsBuilder([context.contentRefAssignment, forwardedRef])}
+        data-state={context.transitionState}
+        data-position={position}
+        role="dialog"
+        aria-modal={true}
+        aria-labelledby={context.ids.title}
+        aria-describedby={context.hasDescription ? context.ids.description : undefined}
+        className={clsx('modal-panel', props.className)}
+      >
+        {children}
+      </div>
+    </FocusTrap>
+  )
+})
diff --git a/packages/hightide-web/src/components/layout/Modal/ModalTitle.tsx b/packages/hightide-web/src/components/layout/Modal/ModalTitle.tsx
index 143fc4c6..f8952969 100644
--- a/packages/hightide-web/src/components/layout/Modal/ModalTitle.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/ModalTitle.tsx
@@ -20,7 +20,7 @@ export function ModalTitle({
     <div
       {...props}
       id={context.ids.title}
-      className={clsx('typography-title-lg mr-10', props.className)}
+      className={clsx('modal-title', props.className)}
     >
       {children}
     </div>
diff --git a/packages/hightide-web/src/components/layout/Modal/index.ts b/packages/hightide-web/src/components/layout/Modal/index.ts
index 431d5eb9..e683c238 100644
--- a/packages/hightide-web/src/components/layout/Modal/index.ts
+++ b/packages/hightide-web/src/components/layout/Modal/index.ts
@@ -4,6 +4,8 @@ export { ModalContainer } from './ModalContainer'
 export type { ModalContainerProps } from './ModalContainer'
 export { ModalBackground } from './ModalBackground'
 export type { ModalBackgroundProps } from './ModalBackground'
+export { ModalPanel } from './ModalPanel'
+export type { ModalPanelProps } from './ModalPanel'
 export { ModalContent } from './ModalContent'
 export type { ModalContentProps } from './ModalContent'
 export { ModalTitle } from './ModalTitle'
@@ -18,12 +20,4 @@ export { ModalOpener } from './ModalOpener'
 export type { ModalOpenerBag, ModalOpenerPassingProps, ModalOpenerProps } from './ModalOpener'
 export { ModalRoot } from './ModalRoot'
 export type { ModalRootProps } from './ModalRoot'
-export { ConfirmModal } from './ConfirmModal'
-export type { ConfirmModalProps, ConfirmModalType } from './ConfirmModal'
-export { DiscardChangesModal } from './DiscardChangesModal'
-export type { DiscardChangesModalProps } from './DiscardChangesModal'
-export { InputModal } from './InputModal'
-export type { InputModalProps } from './InputModal'
-export { LanguageModal, LanguageSelect } from './LanguageModal'
-export { ThemeModal, ThemeSelect } from './ThemeModal'
-export type { ThemeModalProps, ThemeSelectProps } from './ThemeModal'
+export * from './premade'
diff --git a/packages/hightide-web/src/components/layout/Modal/ConfirmModal.tsx b/packages/hightide-web/src/components/layout/Modal/premade/ConfirmModal.tsx
similarity index 87%
rename from packages/hightide-web/src/components/layout/Modal/ConfirmModal.tsx
rename to packages/hightide-web/src/components/layout/Modal/premade/ConfirmModal.tsx
index 298793f5..848fe230 100644
--- a/packages/hightide-web/src/components/layout/Modal/ConfirmModal.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/premade/ConfirmModal.tsx
@@ -1,11 +1,10 @@
 import type { PropsWithChildren } from 'react'
-import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
-import type { ButtonColor } from '../../interaction/Button'
-import { Button } from '../../interaction/Button'
-import type { ModalProps } from './Modal'
-import { Modal } from './Modal'
+import type { ButtonColor } from '../../../interaction/Button'
+import { Button } from '../../../interaction/Button'
+import type { ModalProps } from '../Modal'
+import { Modal } from '../Modal'
 
 export type ConfirmModalType = 'positive' | 'negative' | 'neutral' | 'primary'
 
@@ -32,7 +31,6 @@ export const ConfirmModal = ({
   onDecline,
   confirmType = 'positive',
   buttonOverwrites,
-  contentProps,
   isShowingDecline: _isShowingDecline,
   requireAnswer: _requireAnswer,
   ...restProps
@@ -50,10 +48,6 @@ export const ConfirmModal = ({
     <Modal
       {...restProps}
       onClose={onCancel}
-      contentProps={{
-        ...contentProps,
-        className: clsx('justify-between', contentProps?.className),
-      }}
     >
       <div className="flex-col-2 grow">
         {children}
diff --git a/packages/hightide-web/src/components/layout/Modal/DiscardChangesModal.tsx b/packages/hightide-web/src/components/layout/Modal/premade/DiscardChangesModal.tsx
similarity index 100%
rename from packages/hightide-web/src/components/layout/Modal/DiscardChangesModal.tsx
rename to packages/hightide-web/src/components/layout/Modal/premade/DiscardChangesModal.tsx
diff --git a/packages/hightide-web/src/components/layout/Modal/InputModal.tsx b/packages/hightide-web/src/components/layout/Modal/premade/InputModal.tsx
similarity index 80%
rename from packages/hightide-web/src/components/layout/Modal/InputModal.tsx
rename to packages/hightide-web/src/components/layout/Modal/premade/InputModal.tsx
index d4360c27..9b5d0ce7 100644
--- a/packages/hightide-web/src/components/layout/Modal/InputModal.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/premade/InputModal.tsx
@@ -1,5 +1,5 @@
-import type { InputProps } from '../../data-input/input/Input'
-import { Input } from '../../data-input/input/Input'
+import type { InputProps } from '../../../data-input/input/Input'
+import { Input } from '../../../data-input/input/Input'
 import type { ConfirmModalProps } from './ConfirmModal'
 import { ConfirmModal } from './ConfirmModal'
 
diff --git a/packages/hightide-web/src/components/layout/Modal/LanguageModal.tsx b/packages/hightide-web/src/components/layout/Modal/premade/LanguageModal.tsx
similarity index 81%
rename from packages/hightide-web/src/components/layout/Modal/LanguageModal.tsx
rename to packages/hightide-web/src/components/layout/Modal/premade/LanguageModal.tsx
index 1292fc8c..51b1e4e1 100644
--- a/packages/hightide-web/src/components/layout/Modal/LanguageModal.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/premade/LanguageModal.tsx
@@ -2,12 +2,12 @@ import type { PropsWithChildren, ReactNode } from 'react'
 import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
-import { useLocalization } from '../../../global-contexts/localization/forward-exports'
-import { Button } from '../../interaction/Button'
-import type { SelectProps } from '../../data-input/Select/SelectComponent'
-import { Select } from '../../data-input/Select/Select'
-import type { ModalProps } from './Modal'
-import { Modal } from './Modal'
+import { useLocalization } from '../../../../global-contexts/localization/forward-exports'
+import { Button } from '../../../interaction/Button'
+import type { SelectProps } from '../../../data-input/Select/SelectComponent'
+import { Select } from '../../../data-input/Select/Select'
+import type { ModalProps } from '../Modal'
+import { Modal } from '../Modal'
 
 type LanguageSelectProps = Omit<SelectProps, 'value' | 'children'>
 
@@ -49,7 +49,7 @@ export const LanguageModal = ({
   onClose,
   titleOverwrite,
   descriptionOverwrite,
-  contentProps,
+  panelProps: contentProps,
   ...props
 }: LanguageModalProps) => {
   const translation = useHightideTranslation()
@@ -60,7 +60,7 @@ export const LanguageModal = ({
       titleElement={titleOverwrite ?? translation('language')}
       description={descriptionOverwrite ?? translation('chooseLanguage')}
       onClose={onClose}
-      contentProps={{
+      panelProps={{
         ...contentProps,
         className: clsx('w-80', contentProps?.className),
       }}
diff --git a/packages/hightide-web/src/components/layout/Modal/ThemeModal.tsx b/packages/hightide-web/src/components/layout/Modal/premade/ThemeModal.tsx
similarity index 84%
rename from packages/hightide-web/src/components/layout/Modal/ThemeModal.tsx
rename to packages/hightide-web/src/components/layout/Modal/premade/ThemeModal.tsx
index 2580c16c..8ab52406 100644
--- a/packages/hightide-web/src/components/layout/Modal/ThemeModal.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/premade/ThemeModal.tsx
@@ -2,13 +2,13 @@ import { type PropsWithChildren, type ReactNode } from 'react'
 import clsx from 'clsx'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 
-import { useLocalization } from '../../../global-contexts/localization/forward-exports'
-import { useTheme } from '../../../global-contexts/theme/ThemeContext'
-import { Button } from '../../interaction/Button'
-import type { SelectProps } from '../../data-input/Select/SelectComponent'
-import { Select } from '../../data-input/Select/Select'
-import type { ModalProps } from './Modal'
-import { Modal } from './Modal'
+import { useLocalization } from '../../../../global-contexts/localization/forward-exports'
+import { useTheme } from '../../../../global-contexts/theme/ThemeContext'
+import { Button } from '../../../interaction/Button'
+import type { SelectProps } from '../../../data-input/Select/SelectComponent'
+import { Select } from '../../../data-input/Select/Select'
+import type { ModalProps } from '../Modal'
+import { Modal } from '../Modal'
 
 export type ThemeSelectProps = Omit<SelectProps<string | null>, 'value' | 'children'>
 
@@ -71,7 +71,7 @@ export const ThemeModal = ({
   onClose,
   titleOverwrite,
   descriptionOverwrite,
-  contentProps,
+  panelProps: contentProps,
   ...props
 }: PropsWithChildren<ThemeModalProps>) => {
   const translation = useHightideTranslation()
@@ -82,7 +82,7 @@ export const ThemeModal = ({
       titleElement={titleOverwrite ?? translation('pThemes', { count: 1 })}
       description={descriptionOverwrite ?? translation('chooseTheme')}
       onClose={onClose}
-      contentProps={{
+      panelProps={{
         ...contentProps,
         className: clsx('w-80', contentProps?.className),
       }}
diff --git a/packages/hightide-web/src/components/layout/Modal/premade/index.ts b/packages/hightide-web/src/components/layout/Modal/premade/index.ts
new file mode 100644
index 00000000..ea8a38ba
--- /dev/null
+++ b/packages/hightide-web/src/components/layout/Modal/premade/index.ts
@@ -0,0 +1,9 @@
+export { ConfirmModal } from './ConfirmModal'
+export type { ConfirmModalProps, ConfirmModalType } from './ConfirmModal'
+export { DiscardChangesModal } from './DiscardChangesModal'
+export type { DiscardChangesModalProps } from './DiscardChangesModal'
+export { InputModal } from './InputModal'
+export type { InputModalProps } from './InputModal'
+export { LanguageModal, LanguageSelect } from './LanguageModal'
+export { ThemeModal, ThemeSelect } from './ThemeModal'
+export type { ThemeModalProps, ThemeSelectProps } from './ThemeModal'
\ No newline at end of file
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css b/packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css
index e2d06b7a..7c105263 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-attachment-message-bubble.css
@@ -4,7 +4,7 @@
   }
 
   .chat-attachment-message-content {
-    @apply flex-row-3 items-center w-full rounded-md px-2 py-2 text-left;
+    @apply flex-row-3 items-center w-full rounded-md px-2 pr-4 py-2 text-left;
   }
 
   button.chat-attachment-message-content {
diff --git a/packages/hightide-web/src/style/theme/components/chat/chat-message-composer.css b/packages/hightide-web/src/style/theme/components/chat/chat-message-composer.css
index 3c4f8dbf..3315d644 100644
--- a/packages/hightide-web/src/style/theme/components/chat/chat-message-composer.css
+++ b/packages/hightide-web/src/style/theme/components/chat/chat-message-composer.css
@@ -9,8 +9,8 @@
 
   .chat-message-composer-input {
     @apply leading-[var(--text-base--line-height)] resize-none overflow-y-auto;
-    @apply bg-surface-variant text-on-surface p-3 rounded-md;
-    @apply min-w-0  min-h-11 grow;
+    @apply bg-surface-variant text-on-surface p-3.5 rounded-md;
+    @apply min-w-0  min-h-element-md grow;
   }
 
   .chat-message-composer-send-button {
diff --git a/packages/hightide-web/src/style/theme/components/combobox.css b/packages/hightide-web/src/style/theme/components/combobox.css
index c0ea8f63..1b43834b 100644
--- a/packages/hightide-web/src/style/theme/components/combobox.css
+++ b/packages/hightide-web/src/style/theme/components/combobox.css
@@ -3,10 +3,6 @@
     @apply flex-col-2;
   }
 
-  .combobox-input {
-    @apply input-element rounded-md;
-  }
-
   .combobox-list {
     @apply flex-col-1 overflow-y-auto;
   }
diff --git a/packages/hightide-web/src/style/theme/components/date-time-input.css b/packages/hightide-web/src/style/theme/components/date-time-input.css
index bf76d65a..5a37e02d 100644
--- a/packages/hightide-web/src/style/theme/components/date-time-input.css
+++ b/packages/hightide-web/src/style/theme/components/date-time-input.css
@@ -1,6 +1,11 @@
 @layer components {
+  .date-time-input-container {
+    @apply relative w-full;
+  }
+
+
   .date-time-input {
-    @apply input-element flex-row-2 items-center justify-between w-full px-3 h-element-md rounded-md;
+    @apply flex-row-2 items-center justify-between w-full px-3 h-element-md rounded-md;
 
     &:focus-within {
       box-shadow: var(--focus-box-shadow);
@@ -8,7 +13,7 @@
     }
 
     &[data-has-actions] {
-      @apply pr-0.5;
+      padding-inline-end: calc(var(--spacing) * (3 + var(--action-count, 0) * 9))
     }
   }
 
@@ -29,7 +34,10 @@
   }
 
   .date-time-separator {
-    @apply px-px;
+  }
+
+  .data-time-actions-container {
+    @apply absolute right-1 flex-row-1 items-center;
   }
 
   .date-time-input-dialog-popup {
diff --git a/packages/hightide-web/src/style/theme/components/file-input.css b/packages/hightide-web/src/style/theme/components/file-input.css
index 38a2af98..2f392668 100644
--- a/packages/hightide-web/src/style/theme/components/file-input.css
+++ b/packages/hightide-web/src/style/theme/components/file-input.css
@@ -1,6 +1,6 @@
 @layer components {
   .file-input-trigger {
-    @apply input-element flex-row-2 items-center justify-between rounded-md px-3 py-2;
+    @apply flex-row-2 items-center justify-between py-2;
 
     &:not([data-disabled]):not([data-readonly]) {
       @apply hover:cursor-pointer;
diff --git a/packages/hightide-web/src/style/theme/components/index.css b/packages/hightide-web/src/style/theme/components/index.css
index 62e8b34b..7552fb1d 100644
--- a/packages/hightide-web/src/style/theme/components/index.css
+++ b/packages/hightide-web/src/style/theme/components/index.css
@@ -1,4 +1,5 @@
 @import "./general.css";
+@import "./input-element.css";
 @import "./pressable.css";
 @import "./button.css";
 @import "./tooltip.css";
@@ -9,7 +10,7 @@
 @import "./list-item.css";
 @import "./divider.css";
 @import "./chip.css";
-@import "./input-elements.css";
+@import "./input.css";
 @import "./toggleable-intput.css";
 @import "./table.css";
 @import "./scrollbar.css";
diff --git a/packages/hightide-web/src/style/theme/components/input-element.css b/packages/hightide-web/src/style/theme/components/input-element.css
new file mode 100644
index 00000000..fa2763f4
--- /dev/null
+++ b/packages/hightide-web/src/style/theme/components/input-element.css
@@ -0,0 +1,58 @@
+@layer components {
+  .input-element {
+    @apply border-2 focus-style-none focus-style-border focus-style-shadow rounded-md px-3 py-1 min-h-element-md;
+    transition: 
+      border-color var(--animation-duration-in, 250ms) ease-in-out, 
+      box-shadow var(--animation-duration-in, 250ms) ease-in-out,
+      outline-color var(--animation-duration-in, 250ms) ease-in-out,
+      outline-offset var(--animation-duration-in, 250ms) ease-in-out,
+      color var(--animation-duration-in, 250ms) ease-in-out,
+      background-color var(--animation-duration-in, 250ms) ease-in-out;
+
+    &:not([data-disabled]):not([data-invalid]) {
+      @apply bg-input-background;
+
+      &:not([data-value]) {
+        @apply text-placeholder;
+      }
+
+      &[data-value] {
+        @apply text-input-text;
+      }
+    }
+
+    &:not([data-disabled])[data-invalid] {
+      @apply bg-negative/20 border-negative;
+
+      --color-focus: var(--color-negative);
+
+      &[data-value] {
+        @apply text-negative;
+      }
+
+      &:not([data-value]) {
+        @apply text-placeholder;
+      }
+    }
+
+    &[data-disabled] {
+      @apply border-disabled bg-disabled text-on-disabled placeholder:text-transparent cursor-not-allowed;
+    }
+
+    &:not([data-disabled]):not([data-readonly]):not([data-invalid]):hover:not(:focus) {
+      background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), var(--color-input-background));
+    }
+
+    &:not([data-disabled]):not([data-readonly]):not([data-invalid]):active {
+      background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-press), var(--color-input-background));
+    }
+
+    &:not([data-disabled]):not([data-readonly])[data-invalid]:hover:hover:not(:focus) {
+      background-color: color-mix(in oklch, var(--color-negative) var(--coloring-state-hover), color-mix(in oklch, var(--color-negative) 20%, transparent));
+    }
+
+    &:not([data-disabled]):not([data-readonly])[data-invalid]:active {
+      background-color: color-mix(in oklch, var(--color-negative) var(--coloring-state-press), color-mix(in oklch, var(--color-negative) 20%, transparent));
+    }
+  }
+}
diff --git a/packages/hightide-web/src/style/theme/components/input-elements.css b/packages/hightide-web/src/style/theme/components/input-elements.css
deleted file mode 100644
index db422047..00000000
--- a/packages/hightide-web/src/style/theme/components/input-elements.css
+++ /dev/null
@@ -1,103 +0,0 @@
-@utility input-element {
-  @apply border-2 focus-style-none focus-style-border focus-style-shadow;
-  transition: 
-    border-color var(--animation-duration-in, 250ms) ease-in-out, 
-    box-shadow var(--animation-duration-in, 250ms) ease-in-out,
-    outline-color var(--animation-duration-in, 250ms) ease-in-out,
-    outline-offset var(--animation-duration-in, 250ms) ease-in-out,
-    color var(--animation-duration-in, 250ms) ease-in-out,
-    background-color var(--animation-duration-in, 250ms) ease-in-out;
-
-  &:not([data-disabled]):not([data-invalid]) {
-    @apply bg-input-background;
-
-    &:not([data-value]) {
-      @apply text-placeholder;
-    }
-
-    &[data-value] {
-      @apply text-input-text;
-    }
-  }
-
-  &:not([data-disabled])[data-invalid] {
-    @apply bg-negative/20 border-negative;
-
-    --color-focus: var(--color-negative);
-
-    &[data-value] {
-      @apply text-negative;
-    }
-
-    &:not([data-value]) {
-      @apply text-placeholder;
-    }
-  }
-
-  &[data-disabled] {
-    @apply border-disabled bg-disabled text-on-disabled placeholder:text-transparent cursor-not-allowed;
-  }
-
-  &:not([data-disabled]):not([data-readonly]):not([data-invalid]):hover:not(:focus) {
-    background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), var(--color-input-background));
-  }
-
-  &:not([data-disabled]):not([data-readonly]):not([data-invalid]):active {
-    background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-press), var(--color-input-background));
-  }
-
-  &:not([data-disabled]):not([data-readonly])[data-invalid]:hover:hover:not(:focus) {
-    background-color: color-mix(in oklch, var(--color-negative) var(--coloring-state-hover), color-mix(in oklch, var(--color-negative) 20%, transparent));
-  }
-
-  &:not([data-disabled]):not([data-readonly])[data-invalid]:active {
-    background-color: color-mix(in oklch, var(--color-negative) var(--coloring-state-press), color-mix(in oklch, var(--color-negative) 20%, transparent));
-  }
-}
-
-/* input-elements */
-@layer components {
-  .input {
-    @apply input-element px-3 py-2 rounded-md h-element-md;
-
-    &[data-readonly]:not([data-disabled]):not([data-invalid]) {
-      border-color: color-mix(in oklch, var(--color-border) 80%, transparent);
-      --focus-border-color: color-mix(in oklch, var(--color-focus) 80%, transparent);
-      --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8)
-        color-mix(in oklch, var(--color-focus) 28%, transparent);
-
-      @variant dark {
-        --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8)
-          color-mix(in oklch, var(--color-focus) 48%, transparent);
-      }
-
-      &[data-value] {
-        color: color-mix(in oklch, var(--color-input-text) 80%, transparent);
-      }
-
-      &:not([data-value]) {
-        color: color-mix(in oklch, var(--color-placeholder) 80%, transparent);
-      }
-    }
-
-    &[data-readonly]:not([data-disabled])[data-invalid] {
-      border-color: color-mix(in oklch, var(--color-negative) 80%, transparent);
-      --focus-border-color: color-mix(in oklch, var(--color-negative) 80%, transparent);
-      --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8)
-        color-mix(in oklch, var(--color-negative) 28%, transparent);
-
-      @variant dark {
-        --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8)
-          color-mix(in oklch, var(--color-negative) 48%, transparent);
-      }
-
-      &[data-value] {
-        color: color-mix(in oklch, var(--color-negative) 80%, transparent);
-      }
-
-      &:not([data-value]) {
-        color: color-mix(in oklch, var(--color-placeholder) 80%, transparent);
-      }
-    }
-  }
-}
diff --git a/packages/hightide-web/src/style/theme/components/input.css b/packages/hightide-web/src/style/theme/components/input.css
new file mode 100644
index 00000000..a74376c7
--- /dev/null
+++ b/packages/hightide-web/src/style/theme/components/input.css
@@ -0,0 +1,6 @@
+@layer components {
+  /*
+  .input {
+  }
+  */
+}
diff --git a/packages/hightide-web/src/style/theme/components/modal.css b/packages/hightide-web/src/style/theme/components/modal.css
index 9c8aba0a..13deda63 100644
--- a/packages/hightide-web/src/style/theme/components/modal.css
+++ b/packages/hightide-web/src/style/theme/components/modal.css
@@ -25,12 +25,14 @@
     }
   }
 
-  .modal-content {
-    @apply flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-h-[calc(100vh_-_2rem)];
-    max-width: calc(min(100vw - 1rem, 60rem));
-    max-height: calc(min(100vh - 1rem, 60rem));
+  .modal-panel {
+    @apply flex-col-0 bg-overlay-background text-overlay-text rounded-xl max-h-[calc(100vh_-_2rem)] overflow-hidden;
     min-width: 20rem;
     min-height: 10rem;
+    
+    /* mobile */
+    max-width: calc(min(100vw - 1rem, 60rem));
+    max-height: calc(min(100vh - 1rem, 60rem));
 
     @variant tablet {
       max-width: calc(min(100vw - 2rem, 80rem));
@@ -64,8 +66,18 @@
     }
   }
 
+  .modal-title {
+    @apply typography-title-lg mr-11;
+    @apply p-2 tablet:p-3 desktop:p-4 pb-0 tablet:pb-0 desktop:pb-0;
+  }
+
+  .modal-content {
+    @apply flex flex-col-0 grow overflow-auto;
+    @apply p-2 tablet:p-3 desktop:p-4 pt-0 tablet:pt-0 desktop:pt-0;
+  }
+
   .modal-actions {
-    @apply flex-col-4 mt-3;
+    @apply flex-col-2 mt-2;
 
     @variant tablet {
       @apply flex-row-4 justify-end;
diff --git a/packages/hightide-web/src/style/theme/components/number-input.css b/packages/hightide-web/src/style/theme/components/number-input.css
index 916e95a8..b5901da3 100644
--- a/packages/hightide-web/src/style/theme/components/number-input.css
+++ b/packages/hightide-web/src/style/theme/components/number-input.css
@@ -1,6 +1,6 @@
 @layer components {
-  .number-input-field {
-    @apply input-element px-2 py-1 rounded-md h-element-md text-center;
+  .number-input {
+    @apply px-2 py-1 rounded-md h-element-md text-center;
     width: calc(
       var(--number-input-approximate-max-characters, 6) * 1.1ch +
         var(--spacing) * 12
diff --git a/packages/hightide-web/src/style/theme/components/number-stepper-input.css b/packages/hightide-web/src/style/theme/components/number-stepper-input.css
index 69455577..dc8ab128 100644
--- a/packages/hightide-web/src/style/theme/components/number-stepper-input.css
+++ b/packages/hightide-web/src/style/theme/components/number-stepper-input.css
@@ -17,6 +17,10 @@
   }
 
   .number-stepper-input-button {
-    @apply shrink-0 w-full;
+    @apply shrink-0;
+
+    &[data-layout="col"] {
+      @apply min-w-15;
+    }
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/select.css b/packages/hightide-web/src/style/theme/components/select.css
index 4f0db454..b6eb9318 100644
--- a/packages/hightide-web/src/style/theme/components/select.css
+++ b/packages/hightide-web/src/style/theme/components/select.css
@@ -1,7 +1,7 @@
 @layer components {
   .select-button,
   .multi-select-button {
-    @apply input-element flex-row-2 items-center justify-between rounded-md px-3 py-2;
+    @apply flex-row-2 items-center justify-between py-2;
 
     &:not([data-disabled]):not([data-readonly]) {
       @apply hover:cursor-pointer;
@@ -12,8 +12,12 @@
     @apply absolute inset-0 z-0;
   }
 
+  .multi-select-chip-display-chip-icon-button {
+    @apply flex-row-0 items-center;
+  }
+
   .multi-select-chip-display-container {
-    @apply relative input-element flex flex-wrap gap-2 items-center rounded-md px-2.5 py-2.5;
+    @apply relative flex flex-wrap gap-2 items-center py-0.5;
 
     &:not([data-disabled]):not([data-readonly]) {
       @apply hover:cursor-pointer;
@@ -21,11 +25,11 @@
   }
 
   .multi-select-chip-display-chip {
-    @apply flex-row-1 items-center pl-2 pr-1 rounded-md h-9 z-1;
+    @apply flex-row-1 items-center pl-2 pr-0 rounded-md h-element-sm z-1;
   }
 
   .multi-select-chip-display-add-button {
-    @apply size-9 z-1;
+    @apply z-1;
   }
 
   .select-list,
diff --git a/packages/hightide-web/src/style/theme/components/textarea.css b/packages/hightide-web/src/style/theme/components/textarea.css
index 7ccd9045..43e3356d 100644
--- a/packages/hightide-web/src/style/theme/components/textarea.css
+++ b/packages/hightide-web/src/style/theme/components/textarea.css
@@ -1,5 +1,5 @@
 @layer components {
   .textarea {
-    @apply w-full h-32 py-2 px-3 rounded-md resize-none overflow-y-scroll input-element;
+    @apply w-full h-32 py-2 px-3 rounded-md resize-none overflow-y-scroll;
   }
 }
diff --git a/packages/hightide-web/src/style/theme/components/vertical-navigation.css b/packages/hightide-web/src/style/theme/components/vertical-navigation.css
index 3dc51f9d..d0e4fe0f 100644
--- a/packages/hightide-web/src/style/theme/components/vertical-navigation.css
+++ b/packages/hightide-web/src/style/theme/components/vertical-navigation.css
@@ -8,7 +8,7 @@
   }
 
   .vertical-navigation-item-row-container {
-    @apply flex-row-0 items-center min-h-11 min-w-0 w-full rounded-md border-0 bg-transparent p-0 text-inherit text-left font-[inherit];
+    @apply flex-row-0 items-center min-h-element-md min-w-0 w-full rounded-md border-0 bg-transparent p-0 text-inherit text-left font-[inherit];
 
     &[data-has-children] {
       @apply hover:cursor-pointer;
@@ -33,7 +33,7 @@
   }
 
   .vertical-navigation-item-row {
-    @apply flex-row-1 items-center min-h-11 min-w-0 h-full flex-1 rounded-md;
+    @apply flex-row-1 items-center min-h-element-md min-w-0 h-full flex-1 rounded-md;
 
     &[data-interactable] {
       @apply hover:cursor-pointer;
@@ -53,7 +53,7 @@
   }
 
   .vertical-navigation-item-link {
-    @apply min-w-0 w-full min-h-11 min-w-0 min-h-11 rounded-md;
+    @apply min-w-0 w-full min-h-element-md min-w-0 h-element-md rounded-md;
 
     transition: var(--focus-transitions);
     &:has(focus-visible) {
@@ -65,7 +65,7 @@
   }
 
   .vertical-navigation-item-label {
-    @apply flex-row-2 flex-1 items-center min-w-0 w-full min-h-11 px-2.5 py-1.5;
+    @apply flex-row-2 flex-1 items-center min-w-0 w-full min-h-element-md px-2.5 py-1.5;
   }
 
   .vertical-navigation-toggle {
diff --git a/packages/hightide-web/src/style/theme/variables.css b/packages/hightide-web/src/style/theme/variables.css
index 58aa3197..7e058082 100644
--- a/packages/hightide-web/src/style/theme/variables.css
+++ b/packages/hightide-web/src/style/theme/variables.css
@@ -37,23 +37,18 @@
 
   --spacing-element-xs: calc(7 * var(--spacing));
   --spacing-element-sm: calc(9 * var(--spacing));
+  /* This should always be at least 44px on standard settings */
   --spacing-element-md: calc(
-    11 * var(--spacing)
-  ); /* This should always be at least 44px on standard settings */
-  --spacing-element-lg: calc(13 * var(--spacing));
+    12 * var(--spacing)
+  ); 
+  --spacing-element-lg: calc(15 * var(--spacing));
+  --spacing-element-xl: calc(18 * var(--spacing));
 
-  --spacing-element-padding-xs: calc(
-    (var(--spacing-element-xs) - 4 * var(--spacing)) / 2
-  );
-  --spacing-element-padding-sm: calc(
-    (var(--spacing-element-sm) - 6 * var(--spacing)) / 2
-  );
-  --spacing-element-padding-md: calc(
-    (var(--spacing-element-md) - 6 * var(--spacing)) / 2
-  );
-  --spacing-element-padding-lg: calc(
-    (var(--spacing-element-lg) - 8 * var(--spacing)) / 2
-  );
+  --spacing-element-padding-xs: calc(2 / 4 * var(--spacing));
+  --spacing-element-padding-sm: calc(4 / 4 * var(--spacing));
+  --spacing-element-padding-md: calc(6 / 4 * var(--spacing));
+  --spacing-element-padding-lg: calc(10 / 4 * var(--spacing));
+  --spacing-element-padding-xl: calc(14 / 4 * var(--spacing));
 
   --spacing-element-padding-direction-xs: calc(
     var(--spacing-element-padding-xs) * 1.5
@@ -67,4 +62,7 @@
   --spacing-element-padding-direction-lg: calc(
     var(--spacing-element-padding-lg) * 3
   );
+  --spacing-element-padding-direction-xl: calc(
+    var(--spacing-element-padding-xl) * 3
+  );
 }
diff --git a/packages/hightide-web/src/style/utitlity/coloring.css b/packages/hightide-web/src/style/utitlity/coloring.css
index 84569e1d..e94a3eca 100644
--- a/packages/hightide-web/src/style/utitlity/coloring.css
+++ b/packages/hightide-web/src/style/utitlity/coloring.css
@@ -61,6 +61,11 @@
     --coloring-on-base: var(--color-on-primary);
   }
 
+   &[data-color="primary-inverse"] {
+    --coloring-base: var(--color-on-primary);
+    --coloring-on-base: var(--color-primary);
+  }
+
   &[data-color="secondary"] {
     --coloring-base: var(--color-secondary);
     --coloring-on-base: var(--color-on-secondary);
diff --git a/packages/hightide-web/src/utils/coloring.ts b/packages/hightide-web/src/utils/coloring.ts
index 172e9d28..a4b234ed 100644
--- a/packages/hightide-web/src/utils/coloring.ts
+++ b/packages/hightide-web/src/utils/coloring.ts
@@ -14,6 +14,7 @@ export type ColoringColorVariant = typeof coloringColorVariants[number]
 
 export const coloringColors = [
   'primary',
+  'primary-inverse',
   'secondary',
   'positive',
   'warning',
diff --git a/packages/hightide-web/stories/Internationalization/ExtendTranslations.stories.tsx b/packages/hightide-web/stories/Internationalization/ExtendTranslations.stories.tsx
index 17fffcc3..084756f7 100644
--- a/packages/hightide-web/stories/Internationalization/ExtendTranslations.stories.tsx
+++ b/packages/hightide-web/stories/Internationalization/ExtendTranslations.stories.tsx
@@ -3,7 +3,7 @@ import type {
   StoryObj
 } from '@storybook/nextjs-vite'
 
-import { LanguageSelect } from '../../src/components/layout/Modal/LanguageModal'
+import { LanguageSelect } from '../../src/components/layout/Modal/premade/LanguageModal'
 import { HightideProvider } from '../../src/global-contexts/HightideProvider'
 import { HightideConfigUtils } from '../../src/global-contexts/hightide-config/HightideConfigUtils'
 import {
diff --git a/packages/hightide-web/stories/data-input/input/Input.stories.tsx b/packages/hightide-web/stories/data-input/Input.stories.tsx
similarity index 90%
rename from packages/hightide-web/stories/data-input/input/Input.stories.tsx
rename to packages/hightide-web/stories/data-input/Input.stories.tsx
index 097ab4ae..50e7dfa6 100644
--- a/packages/hightide-web/stories/data-input/input/Input.stories.tsx
+++ b/packages/hightide-web/stories/data-input/Input.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { Input } from '../../../src/components/data-input/input/Input'
+import { Input } from '../../src/components/data-input/input/Input'
 
 const meta = {
   component: Input,
diff --git a/packages/hightide-web/stories/data-input/input/InsideLabelInput.stories.tsx b/packages/hightide-web/stories/data-input/InsideLabelInput.stories.tsx
similarity index 86%
rename from packages/hightide-web/stories/data-input/input/InsideLabelInput.stories.tsx
rename to packages/hightide-web/stories/data-input/InsideLabelInput.stories.tsx
index c8b3a948..711c74de 100644
--- a/packages/hightide-web/stories/data-input/input/InsideLabelInput.stories.tsx
+++ b/packages/hightide-web/stories/data-input/InsideLabelInput.stories.tsx
@@ -1,6 +1,6 @@
 import { action } from 'storybook/actions'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { InsideLabelInput } from '../../../src/components/data-input/input/InsideLabelInput'
+import { InsideLabelInput } from '../../src/components/data-input/input/InsideLabelInput'
 import { clsx } from 'clsx'
 
 const meta = {
diff --git a/packages/hightide-web/stories/data-input/input/NumberStepperInput.stories.tsx b/packages/hightide-web/stories/data-input/NumberStepperInput.stories.tsx
similarity index 92%
rename from packages/hightide-web/stories/data-input/input/NumberStepperInput.stories.tsx
rename to packages/hightide-web/stories/data-input/NumberStepperInput.stories.tsx
index 0fa8b2cb..21257ada 100644
--- a/packages/hightide-web/stories/data-input/input/NumberStepperInput.stories.tsx
+++ b/packages/hightide-web/stories/data-input/NumberStepperInput.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { useEffect, useState } from 'react'
-import { NumberStepperInput } from '../../../src/components/data-input/input/NumberStepperInput'
+import { NumberStepperInput } from '../../src/components/data-input/input/NumberStepperInput'
 import { action } from 'storybook/actions'
 
 const meta: Meta<typeof NumberStepperInput> = {
diff --git a/packages/hightide-web/stories/data-input/input/SearchBar.stories.tsx b/packages/hightide-web/stories/data-input/SearchBar.stories.tsx
similarity index 85%
rename from packages/hightide-web/stories/data-input/input/SearchBar.stories.tsx
rename to packages/hightide-web/stories/data-input/SearchBar.stories.tsx
index db4df063..efa378f8 100644
--- a/packages/hightide-web/stories/data-input/input/SearchBar.stories.tsx
+++ b/packages/hightide-web/stories/data-input/SearchBar.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { SearchBar } from '../../../src/components/data-input/input/SearchBar'
+import { SearchBar } from '../../src/components/data-input/input/SearchBar'
 
 const meta = {
   component: SearchBar,
diff --git a/packages/hightide-web/stories/layout/Modal/ThemeSelect.stories.tsx b/packages/hightide-web/stories/data-input/Select/ThemeSelect.stories.tsx
similarity index 100%
rename from packages/hightide-web/stories/layout/Modal/ThemeSelect.stories.tsx
rename to packages/hightide-web/stories/data-input/Select/ThemeSelect.stories.tsx
diff --git a/packages/hightide-web/stories/data-input/input/TogglableInput.stories.tsx b/packages/hightide-web/stories/data-input/TogglableInput.stories.tsx
similarity index 83%
rename from packages/hightide-web/stories/data-input/input/TogglableInput.stories.tsx
rename to packages/hightide-web/stories/data-input/TogglableInput.stories.tsx
index 72b56e1e..2108b873 100644
--- a/packages/hightide-web/stories/data-input/input/TogglableInput.stories.tsx
+++ b/packages/hightide-web/stories/data-input/TogglableInput.stories.tsx
@@ -1,6 +1,6 @@
 import { action } from 'storybook/actions'
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { ToggleableInput } from '../../../src/components/data-input/input/ToggleableInput'
+import { ToggleableInput } from '../../src/components/data-input/input/ToggleableInput'
 
 const meta = {
   component: ToggleableInput,
diff --git a/packages/hightide-web/stories/data-input/input/DateTimeInput.stories.tsx b/packages/hightide-web/stories/data-input/date/DateTimeInput.stories.tsx
similarity index 100%
rename from packages/hightide-web/stories/data-input/input/DateTimeInput.stories.tsx
rename to packages/hightide-web/stories/data-input/date/DateTimeInput.stories.tsx
diff --git a/packages/hightide-web/stories/data-input/input/FlexibleDateTimeInput.stories.tsx b/packages/hightide-web/stories/data-input/date/FlexibleDateTimeInput.stories.tsx
similarity index 100%
rename from packages/hightide-web/stories/data-input/input/FlexibleDateTimeInput.stories.tsx
rename to packages/hightide-web/stories/data-input/date/FlexibleDateTimeInput.stories.tsx
diff --git a/packages/hightide-web/stories/layout/Modal/ConfirmModal.stories.tsx b/packages/hightide-web/stories/interaction/Modal/ConfirmModal.stories.tsx
similarity index 96%
rename from packages/hightide-web/stories/layout/Modal/ConfirmModal.stories.tsx
rename to packages/hightide-web/stories/interaction/Modal/ConfirmModal.stories.tsx
index 90266564..9a4dd9cb 100644
--- a/packages/hightide-web/stories/layout/Modal/ConfirmModal.stories.tsx
+++ b/packages/hightide-web/stories/interaction/Modal/ConfirmModal.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { ConfirmModal } from '../../../src/components/layout/Modal/ConfirmModal'
+import { ConfirmModal } from '../../../src/components/layout/Modal/premade/ConfirmModal'
 
 
 const meta: Meta = {
diff --git a/packages/hightide-web/stories/layout/Modal/DiscardChangesModal.stories.tsx b/packages/hightide-web/stories/interaction/Modal/DiscardChangesModal.stories.tsx
similarity index 92%
rename from packages/hightide-web/stories/layout/Modal/DiscardChangesModal.stories.tsx
rename to packages/hightide-web/stories/interaction/Modal/DiscardChangesModal.stories.tsx
index 32939e95..98918b01 100644
--- a/packages/hightide-web/stories/layout/Modal/DiscardChangesModal.stories.tsx
+++ b/packages/hightide-web/stories/interaction/Modal/DiscardChangesModal.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 import { action } from 'storybook/actions'
-import { DiscardChangesModal } from '../../../src/components/layout/Modal/DiscardChangesModal'
+import { DiscardChangesModal } from '../../../src/components/layout/Modal/premade/DiscardChangesModal'
 
 const meta: Meta = {
   component: DiscardChangesModal,
diff --git a/packages/hightide-web/stories/layout/Modal/LanguageModal.stories.tsx b/packages/hightide-web/stories/interaction/Modal/LanguageModal.stories.tsx
similarity index 91%
rename from packages/hightide-web/stories/layout/Modal/LanguageModal.stories.tsx
rename to packages/hightide-web/stories/interaction/Modal/LanguageModal.stories.tsx
index fbdccb84..73ab5dcd 100644
--- a/packages/hightide-web/stories/layout/Modal/LanguageModal.stories.tsx
+++ b/packages/hightide-web/stories/interaction/Modal/LanguageModal.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
-import { LanguageModal } from '../../../src/components/layout/Modal/LanguageModal'
+import { LanguageModal } from '../../../src/components/layout/Modal/premade/LanguageModal'
 
 const meta: Meta = {
   component: LanguageModal,
diff --git a/packages/hightide-web/stories/layout/Modal/StackedModal.stories.tsx b/packages/hightide-web/stories/interaction/Modal/StackedModal.stories.tsx
similarity index 100%
rename from packages/hightide-web/stories/layout/Modal/StackedModal.stories.tsx
rename to packages/hightide-web/stories/interaction/Modal/StackedModal.stories.tsx
diff --git a/packages/hightide-web/stories/layout/Modal/ThemeModal.stories.tsx b/packages/hightide-web/stories/interaction/Modal/ThemeModal.stories.tsx
similarity index 93%
rename from packages/hightide-web/stories/layout/Modal/ThemeModal.stories.tsx
rename to packages/hightide-web/stories/interaction/Modal/ThemeModal.stories.tsx
index 7d776a82..f90b348b 100644
--- a/packages/hightide-web/stories/layout/Modal/ThemeModal.stories.tsx
+++ b/packages/hightide-web/stories/interaction/Modal/ThemeModal.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj  } from '@storybook/nextjs-vite'
-import { ThemeModal } from '../../../src/components/layout/Modal/ThemeModal'
+import { ThemeModal } from '../../../src/components/layout/Modal/premade/ThemeModal'
 
 const meta: Meta = {
   component: ThemeModal,

From 70d13695aea0fa1ce8d90fa2465a54cbb4f3c4d3 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Fri, 2 Oct 2026 14:12:11 +0200
Subject: [PATCH 24/25] fix: table row feedback

---
 .../src/components/data-input/Checkbox.tsx         |  2 +-
 .../src/components/data-input/input/Input.tsx      |  2 +-
 .../src/components/layout/Table/TableBody.tsx      |  2 --
 .../src/style/theme/components/table.css           | 14 ++------------
 4 files changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/hightide-web/src/components/data-input/Checkbox.tsx b/packages/hightide-web/src/components/data-input/Checkbox.tsx
index 3d43f0f2..aedf1a14 100644
--- a/packages/hightide-web/src/components/data-input/Checkbox.tsx
+++ b/packages/hightide-web/src/components/data-input/Checkbox.tsx
@@ -56,7 +56,7 @@ export const Checkbox = ({
   })
 
   const interactive = !disabled && !readOnly
-  const indicatorSize: IconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'
+  const indicatorSize: IconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'md' : 'sm'
 
   return (
     <div
diff --git a/packages/hightide-web/src/components/data-input/input/Input.tsx b/packages/hightide-web/src/components/data-input/input/Input.tsx
index a49def6b..f714ab7f 100644
--- a/packages/hightide-web/src/components/data-input/input/Input.tsx
+++ b/packages/hightide-web/src/components/data-input/input/Input.tsx
@@ -24,7 +24,7 @@ const defaultEditCompleteOptions: EditCompleteOptionsResolved = {
   delay: 2500
 }
 
-export type InputInterface<In, Out extends In = In> = {
+export type InputInterface<In, Out = In> = {
   value?: In,
   initialValue?: In,
   onValueChange?: (value: Out) => void,
diff --git a/packages/hightide-web/src/components/layout/Table/TableBody.tsx b/packages/hightide-web/src/components/layout/Table/TableBody.tsx
index 9a963032..5ef28365 100644
--- a/packages/hightide-web/src/components/layout/Table/TableBody.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TableBody.tsx
@@ -5,7 +5,6 @@ import { FillerCell } from './FillerCell'
 import React from 'react'
 import { useTableStateWithoutSizingContext } from './TableContext'
 import clsx from 'clsx'
-import { ColoringUtils } from '../../../utils/coloring'
 import { PropsUtil } from '../../../utils/propsUtil'
 import { Visibility } from '../Visibility'
 
@@ -57,7 +56,6 @@ export const TableBody = React.memo(function TableBodyVisual() {
               className={clsx('table-body-filler-row')}
               onClick={() => onFillerRowClick?.(index, table)}
               data-clickable={PropsUtil.dataAttributes.bool(!!onFillerRowClick)}
-              {...ColoringUtils.dataColoringMode(onFillerRowClick ? 'interactive' : undefined)}
             >
               {columns.map((column) => {
                 if(!column) return
diff --git a/packages/hightide-web/src/style/theme/components/table.css b/packages/hightide-web/src/style/theme/components/table.css
index 55720c07..9084ee5c 100644
--- a/packages/hightide-web/src/style/theme/components/table.css
+++ b/packages/hightide-web/src/style/theme/components/table.css
@@ -57,7 +57,8 @@
     @apply px-3 py-2.5 flex-row-1 items-center truncate;
   }
 
-  .table-body-row {
+  .table-body-row,
+  .table-body-filler-row {
     &[data-clickable] {
       @apply hover:cursor-pointer;
       &:hover {
@@ -66,17 +67,6 @@
     }
   }
 
-  .table-body-filler-row {
-    @apply hover:cursor-not-allowed;
-    &[data-clickable] {
-      @apply hover:cursor-pointer;
-
-      &[data-coloring-mode="interactive"]:hover {
-        background-color: color-mix(in oklch, var(--color-on-surface) var(--coloring-state-hover), transparent);
-      }
-    }
-  }
-
   .table-body-cell,
   .table-body-filler-cell {
     @apply px-3 first:pl-6 last:pr-6 py-2.5;

From 9e4f25b2ae1aa2cee4018ed7c2d9a6f72d878546 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Sat, 3 Oct 2026 15:22:15 +0200
Subject: [PATCH 25/25] chore: update input interface callbacks

---
 .../chat/data-input/ChatMessageComposer.tsx   |  8 ++--
 .../src/components/data-input/Checkbox.tsx    |  8 ++--
 .../data-input/Combobox/ComboboxContext.tsx   |  4 +-
 .../data-input/Combobox/ComboboxInput.tsx     |  2 +-
 .../data-input/Combobox/ComboboxRoot.tsx      |  8 ++--
 .../data-input/FileInput/FileInputContext.tsx |  4 +-
 .../data-input/FileInput/FileInputRoot.tsx    |  8 ++--
 .../data-input/LabelledCheckbox.tsx           |  8 ++--
 .../MultiSelect/MultiSelectContent.tsx        |  2 +-
 .../MultiSelect/MultiSelectContext.tsx        |  4 +-
 .../MultiSelect/MultiSelectRoot.tsx           |  8 ++--
 .../data-input/Select/SelectContent.tsx       |  2 +-
 .../data-input/Select/SelectContext.tsx       |  4 +-
 .../data-input/Select/SelectRoot.tsx          |  8 ++--
 .../src/components/data-input/Switch.tsx      |  8 ++--
 .../src/components/data-input/Textarea.tsx    |  8 ++--
 .../data-input/date/CalendarDatePicker.tsx    | 16 ++++----
 .../data-input/date/CalendarDayPicker.tsx     |  8 ++--
 .../data-input/date/DateTimePicker.tsx        | 20 +++++-----
 .../data-input/date/DateTimePickerDialog.tsx  | 16 ++++----
 .../data-input/date/DateTimeWheelPicker.tsx   | 16 ++++----
 .../data-input/date/DateWheelPicker.tsx       |  8 ++--
 .../components/data-input/date/TimePicker.tsx |  8 ++--
 .../data-input/date/TimeWheelPicker.tsx       |  8 ++--
 .../data-input/date/YearMonthPicker.tsx       |  8 ++--
 .../data-input/input/DateTimeField.tsx        |  8 ++--
 .../data-input/input/DateTimeInput.tsx        | 18 ++++-----
 .../input/FlexibleDateTimeInput.tsx           |  4 +-
 .../src/components/data-input/input/Input.tsx | 39 ++++++++++++++++---
 .../data-input/input/InsideLabelInput.tsx     |  4 +-
 .../data-input/input/NumberInput.tsx          |  8 ++--
 .../data-input/input/NumberStepperInput.tsx   | 12 +++---
 .../components/data-input/input/SearchBar.tsx |  4 +-
 .../data-input/input/ToggleableInput.tsx      |  8 ++--
 .../interaction/data/FilterPopUp.tsx          | 36 ++++++++---------
 .../interaction/navigation/Pagination.tsx     |  4 +-
 .../layout/Modal/premade/LanguageModal.tsx    |  4 +-
 .../layout/Modal/premade/ThemeModal.tsx       |  4 +-
 .../layout/Table/TablePagination.tsx          |  2 +-
 .../Table/TableWithSelectionProvider.tsx      |  4 +-
 .../src/components/layout/form/FormField.tsx  |  4 +-
 .../components/properties/DateProperty.tsx    |  8 ++--
 .../properties/MultiSelectProperty.tsx        |  2 +-
 .../components/properties/NumberProperty.tsx  |  4 +-
 .../components/properties/SelectProperty.tsx  |  2 +-
 .../components/properties/TextProperty.tsx    |  4 +-
 .../process-model/ProcessModelTraceReplay.tsx |  2 +-
 .../Utilities/hooks/useDebouncer.stories.tsx  |  2 +-
 .../Utilities/hooks/useThrottle.stories.tsx   |  2 +-
 .../FileInput/FileInput.stories.tsx           |  4 +-
 .../MultiSelect/MultiSelect.stories.tsx       | 12 +++---
 .../MultiSelectChipDisplay.stories.tsx        |  4 +-
 .../data-input/NumberStepperInput.stories.tsx |  4 +-
 .../data-input/Select/Select.stories.tsx      | 12 +++---
 .../data-input/date/DateTimeInput.stories.tsx |  4 +-
 .../date/DateTimePickerDialog.stories.tsx     |  4 +-
 .../date/FlexibleDateTimeInput.stories.tsx    |  4 +-
 .../layout/Table/FilterListTable.stories.tsx  |  4 +-
 .../properties/DateProperty.stories.tsx       |  4 +-
 .../ProcessModelActivityNode.stories.tsx      |  2 +-
 .../ProcessModelCanvas.stories.tsx            |  2 +-
 .../ProcessModelTraceReplay.stories.tsx       |  2 +-
 .../tests/input/DateTimeField.test.tsx        |  8 ++--
 .../input/FlexibleDateTimeInput.test.tsx      |  2 +-
 64 files changed, 246 insertions(+), 217 deletions(-)

diff --git a/packages/hightide-web/src/components/chat/data-input/ChatMessageComposer.tsx b/packages/hightide-web/src/components/chat/data-input/ChatMessageComposer.tsx
index a4bb300b..866f2977 100644
--- a/packages/hightide-web/src/components/chat/data-input/ChatMessageComposer.tsx
+++ b/packages/hightide-web/src/components/chat/data-input/ChatMessageComposer.tsx
@@ -5,7 +5,7 @@ import { SendHorizontal } from 'lucide-react'
 import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
 import { useWindowResizeObserver } from '../../../hooks/useWindowResizeObserver'
-import type { InputInterface } from '../../data-input/input/Input'
+import type { InputComponentInterface } from '../../data-input/input/Input'
 import { IconButton } from '../../interaction/IconButton'
 import { Icon } from '../../visualization/Icon'
 import { PropsUtil } from '../../../utils/propsUtil'
@@ -13,7 +13,7 @@ import { PropsUtil } from '../../../utils/propsUtil'
 const MAX_INPUT_LINES = 7
 
 export type ChatMessageComposerProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>
-  & InputInterface<string>
+  & InputComponentInterface<string>
   & {
     onSend: (value: string) => void,
     placeholder?: string,
@@ -25,8 +25,8 @@ export type ChatMessageComposerProps = Omit<HTMLAttributes<HTMLDivElement>, 'onC
 export const ChatMessageComposer = forwardRef<HTMLDivElement, ChatMessageComposerProps>(function ChatMessageComposer({
   value: controlledValue,
   initialValue,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   invalid = false,
   disabled = false,
   readOnly = false,
diff --git a/packages/hightide-web/src/components/data-input/Checkbox.tsx b/packages/hightide-web/src/components/data-input/Checkbox.tsx
index aedf1a14..bfa0dc79 100644
--- a/packages/hightide-web/src/components/data-input/Checkbox.tsx
+++ b/packages/hightide-web/src/components/data-input/Checkbox.tsx
@@ -4,7 +4,7 @@ import type { IconSize } from '../visualization/Icon'
 import { Icon } from '../visualization/Icon'
 import { useCallback, type HTMLAttributes } from 'react'
 import { Visibility } from '../layout/Visibility'
-import type { InputInterface } from './input/Input'
+import type { InputComponentInterface } from './input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
@@ -14,7 +14,7 @@ import { PropsUtil } from '../../utils/propsUtil'
 type CheckBoxSize = 'sm' | 'md' | 'lg' | null
 
 export type CheckboxProps = HTMLAttributes<HTMLDivElement>
-  & InputInterface<boolean>
+  & InputComponentInterface<boolean>
   & {
     indeterminate?: boolean,
     size?: CheckBoxSize,
@@ -35,8 +35,8 @@ export const Checkbox = ({
   invalid = false,
   disabled = false,
   readOnly = false,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   size = 'md',
   alwaysShowCheckIcon = false,
   isRounded = false,
diff --git a/packages/hightide-web/src/components/data-input/Combobox/ComboboxContext.tsx b/packages/hightide-web/src/components/data-input/Combobox/ComboboxContext.tsx
index 593eb051..f8f37726 100644
--- a/packages/hightide-web/src/components/data-input/Combobox/ComboboxContext.tsx
+++ b/packages/hightide-web/src/components/data-input/Combobox/ComboboxContext.tsx
@@ -1,6 +1,6 @@
 import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'
 import { createContext, useContext } from 'react'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 
 export interface ComboboxOptionType<T = string> {
   id: string,
@@ -51,7 +51,7 @@ export interface ComboboxContextConfig {
   setIds: Dispatch<SetStateAction<ComboboxContextIds>>,
 }
 
-export interface ComboboxContextType<T> extends ComboboxContextInternalState, ComboboxContextComputedState<T>, ComboboxContextActions<T>, Required<Pick<InputInterface<T>, 'invalid' | 'disabled' | 'readOnly' | 'required'>> {
+export interface ComboboxContextType<T> extends ComboboxContextInternalState, ComboboxContextComputedState<T>, ComboboxContextActions<T>, Required<Pick<InputComponentInterface<T>, 'invalid' | 'disabled' | 'readOnly' | 'required'>> {
   value?: T,
   config: ComboboxContextConfig,
   layout: ComboboxContextLayout,
diff --git a/packages/hightide-web/src/components/data-input/Combobox/ComboboxInput.tsx b/packages/hightide-web/src/components/data-input/Combobox/ComboboxInput.tsx
index c06972e4..6b40137c 100644
--- a/packages/hightide-web/src/components/data-input/Combobox/ComboboxInput.tsx
+++ b/packages/hightide-web/src/components/data-input/Combobox/ComboboxInput.tsx
@@ -52,7 +52,7 @@ export const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(
         {...props}
         ref={ref}
         value={context.search.searchQuery}
-        onValueChange={context.search.setSearchQuery}
+        onValueUpdate={context.search.setSearchQuery}
         invalid={context.invalid}
         disabled={props.disabled ?? context.disabled}
         readOnly={props.readOnly ?? context.readOnly}
diff --git a/packages/hightide-web/src/components/data-input/Combobox/ComboboxRoot.tsx b/packages/hightide-web/src/components/data-input/Combobox/ComboboxRoot.tsx
index bda6379f..4b0b0359 100644
--- a/packages/hightide-web/src/components/data-input/Combobox/ComboboxRoot.tsx
+++ b/packages/hightide-web/src/components/data-input/Combobox/ComboboxRoot.tsx
@@ -2,14 +2,14 @@ import type { ReactNode, RefObject } from 'react'
 import { useCallback, useId, useMemo, useState } from 'react'
 import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import { DOMUtils } from '../../../utils/dom'
 import { ComboboxContext } from './ComboboxContext'
 import type { ComboboxContextConfig, ComboboxContextIds, ComboboxContextLayout, ComboboxContextType, ComboboxOptionType } from './ComboboxContext'
 import type { UseComboboxOptions } from './useCombobox'
 import { useCombobox } from './useCombobox'
 
-export interface ComboboxRootProps<T = string> extends InputInterface<T>, Omit<UseComboboxOptions, 'options'> {
+export interface ComboboxRootProps<T = string> extends InputComponentInterface<T>, Omit<UseComboboxOptions, 'options'> {
   children: ReactNode,
   onItemClick?: (value: T) => void,
 }
@@ -18,8 +18,8 @@ export function ComboboxRoot<T = string>({
   children,
   value,
   initialValue,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   invalid = false,
   disabled = false,
   readOnly = false,
diff --git a/packages/hightide-web/src/components/data-input/FileInput/FileInputContext.tsx b/packages/hightide-web/src/components/data-input/FileInput/FileInputContext.tsx
index fc5581f9..002532af 100644
--- a/packages/hightide-web/src/components/data-input/FileInput/FileInputContext.tsx
+++ b/packages/hightide-web/src/components/data-input/FileInput/FileInputContext.tsx
@@ -1,11 +1,11 @@
 import type { RefObject } from 'react'
 import { createContext, useContext } from 'react'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import type { FileInputItem } from './fileInputItem'
 
 export type FileInputPickFiles = () => Promise<readonly FileInputItem[] | null | undefined>
 
-export type FileInputContextType = Pick<InputInterface<unknown>, 'invalid' | 'disabled' | 'readOnly' | 'required'> & {
+export type FileInputContextType = Pick<InputComponentInterface<unknown>, 'invalid' | 'disabled' | 'readOnly' | 'required'> & {
   files: readonly FileInputItem[],
   isOpen: boolean,
   isDragging: boolean,
diff --git a/packages/hightide-web/src/components/data-input/FileInput/FileInputRoot.tsx b/packages/hightide-web/src/components/data-input/FileInput/FileInputRoot.tsx
index 4e149a84..8ed877c5 100644
--- a/packages/hightide-web/src/components/data-input/FileInput/FileInputRoot.tsx
+++ b/packages/hightide-web/src/components/data-input/FileInput/FileInputRoot.tsx
@@ -4,7 +4,7 @@ import {
   useControlledState,
   useEventCallbackStabilizer
 } from '@helpwave/hightide-utils/hooks'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import { SafeGlobals } from '../../../utils/safeGlobals'
 import { FileInputContext, type FileInputContextType, type FileInputPickFiles } from './FileInputContext'
 import {
@@ -16,7 +16,7 @@ import {
   type FileInputItem
 } from './fileInputItem'
 
-export interface FileInputRootProps extends Omit<InputInterface<readonly FileInputItem[]>, 'value'> {
+export interface FileInputRootProps extends Omit<InputComponentInterface<readonly FileInputItem[]>, 'value'> {
   value?: readonly FileInputItem[],
   initialIsOpen?: boolean,
   onClose?: () => void,
@@ -30,8 +30,8 @@ export interface FileInputRootProps extends Omit<InputInterface<readonly FileInp
 export function FileInputRoot({
   children,
   value,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   initialValue,
   initialIsOpen = false,
   onClose,
diff --git a/packages/hightide-web/src/components/data-input/LabelledCheckbox.tsx b/packages/hightide-web/src/components/data-input/LabelledCheckbox.tsx
index ece00fcb..b7d34ea1 100644
--- a/packages/hightide-web/src/components/data-input/LabelledCheckbox.tsx
+++ b/packages/hightide-web/src/components/data-input/LabelledCheckbox.tsx
@@ -3,14 +3,14 @@ import type { HTMLAttributes, ReactNode } from 'react'
 import { forwardRef, useCallback, useId } from 'react'
 import { Checkbox, type CheckboxProps } from './Checkbox'
 import { PropsUtil } from '../../utils/propsUtil'
-import type { InputInterface } from './input/Input'
+import type { InputComponentInterface } from './input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
 type LabelledCheckboxCheckPosition = 'left' | 'right'
 
 export type LabelledCheckboxProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>
-  & InputInterface<boolean>
+  & InputComponentInterface<boolean>
   & Pick<CheckboxProps, 'indeterminate' | 'size' | 'alwaysShowCheckIcon' | 'isRounded'>
   & {
     label: ReactNode,
@@ -25,8 +25,8 @@ export type LabelledCheckboxProps = Omit<HTMLAttributes<HTMLDivElement>, 'childr
 export const LabelledCheckbox = forwardRef<HTMLDivElement, LabelledCheckboxProps>(function LabelledCheckbox({
   value: controlledValue,
   initialValue = false,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   indeterminate,
   required = false,
   invalid = false,
diff --git a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContent.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContent.tsx
index f140c2f1..6bcd1b0b 100644
--- a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContent.tsx
+++ b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContent.tsx
@@ -99,7 +99,7 @@ export const MultiSelectContent = forwardRef<
           ref={searchInputRef}
           id={context.config.ids.searchInput}
           value={context.search.searchQuery ?? ''}
-          onValueChange={context.search.setSearchQuery}
+          onValueUpdate={context.search.setSearchQuery}
           onKeyDown={keyHandler}
           placeholder={searchInputProps?.placeholder ?? translation('filterOptions')}
           role="combobox"
diff --git a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContext.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContext.tsx
index 36165964..9543dac8 100644
--- a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContext.tsx
+++ b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectContext.tsx
@@ -1,6 +1,6 @@
 import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'
 import { createContext, useContext } from 'react'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import type { UseMultiSelectFirstHighlightBehavior } from './useMultiSelect'
 
 export type MultiSelectOptionIdentity<T> = {
@@ -23,7 +23,7 @@ export interface MultiSelectContextIds {
   searchInput: string,
 }
 
-export interface MultiSelectContextState<T> extends Required<Pick<InputInterface<T>, 'invalid' | 'disabled' | 'readOnly' | 'required'>> {
+export interface MultiSelectContextState<T> extends Required<Pick<InputComponentInterface<T>, 'invalid' | 'disabled' | 'readOnly' | 'required'>> {
   value: T[],
   options: ReadonlyArray<MultiSelectOptionType<T>>,
   selectedIds: string[],
diff --git a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectRoot.tsx b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectRoot.tsx
index 95307a3f..142e6d28 100644
--- a/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectRoot.tsx
+++ b/packages/hightide-web/src/components/data-input/MultiSelect/MultiSelectRoot.tsx
@@ -4,7 +4,7 @@ import { MultiSelectContext } from './MultiSelectContext'
 import type { MultiSelectContextType, MultiSelectIconAppearance, MultiSelectOptionType } from './MultiSelectContext'
 import { useMultiSelect } from './useMultiSelect'
 import { DOMUtils } from '../../../utils/dom'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import { PopUpContext } from '../../layout/PopUp/PopUpContext'
 
 export interface MultiSelectIds {
@@ -14,7 +14,7 @@ export interface MultiSelectIds {
   searchInput: string,
 }
 
-export interface MultiSelectRootProps<T> extends InputInterface<T[]> {
+export interface MultiSelectRootProps<T> extends InputComponentInterface<T[]> {
   compareFunction?: (a: T, b: T) => boolean,
   initialIsOpen?: boolean,
   onClose?: () => void,
@@ -26,8 +26,8 @@ export interface MultiSelectRootProps<T> extends InputInterface<T[]> {
 export function MultiSelectRoot<T>({
   children,
   value,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   initialValue,
   compareFunction,
   initialIsOpen = false,
diff --git a/packages/hightide-web/src/components/data-input/Select/SelectContent.tsx b/packages/hightide-web/src/components/data-input/Select/SelectContent.tsx
index 64b09242..afd2bee2 100644
--- a/packages/hightide-web/src/components/data-input/Select/SelectContent.tsx
+++ b/packages/hightide-web/src/components/data-input/Select/SelectContent.tsx
@@ -89,7 +89,7 @@ export const SelectContent = forwardRef<HTMLUListElement, SelectContentProps>(fu
           ref={searchInputRef}
           id={context.config.ids.searchInput}
           value={context.search.searchQuery}
-          onValueChange={context.search.setSearchQuery}
+          onValueUpdate={context.search.setSearchQuery}
           onKeyDown={keyHandler}
           placeholder={searchInputProps?.placeholder ?? translation('filterOptions')}
           role="combobox"
diff --git a/packages/hightide-web/src/components/data-input/Select/SelectContext.tsx b/packages/hightide-web/src/components/data-input/Select/SelectContext.tsx
index 3fe30c11..3c80b755 100644
--- a/packages/hightide-web/src/components/data-input/Select/SelectContext.tsx
+++ b/packages/hightide-web/src/components/data-input/Select/SelectContext.tsx
@@ -1,7 +1,7 @@
 import type { Dispatch, ReactNode, RefObject, SetStateAction } from 'react'
 import { createContext, useContext } from 'react'
 import type { UseSelectFirstHighlightBehavior } from './useSelect'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 
 export type SelectOptionIdentity<T> = {
   value: T,
@@ -23,7 +23,7 @@ export interface SelectContextIds {
   searchInput: string,
 }
 
-export interface SelectContextState<T> extends Required<Pick<InputInterface<T>, 'invalid' | 'disabled' | 'readOnly' | 'required'>> {
+export interface SelectContextState<T> extends Required<Pick<InputComponentInterface<T>, 'invalid' | 'disabled' | 'readOnly' | 'required'>> {
   selectedId: string | null,
   options: ReadonlyArray<SelectOptionType<T>>,
   highlightedId: string | null,
diff --git a/packages/hightide-web/src/components/data-input/Select/SelectRoot.tsx b/packages/hightide-web/src/components/data-input/Select/SelectRoot.tsx
index 60d57f76..1099898d 100644
--- a/packages/hightide-web/src/components/data-input/Select/SelectRoot.tsx
+++ b/packages/hightide-web/src/components/data-input/Select/SelectRoot.tsx
@@ -4,7 +4,7 @@ import { SelectContext } from './SelectContext'
 import type { SelectContextConfig, SelectContextLayout, SelectOptionType } from './SelectContext'
 import { useSelect } from './useSelect'
 import { DOMUtils } from '../../../utils/dom'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 import { PopUpContext } from '../../layout/PopUp/PopUpContext'
 
@@ -15,7 +15,7 @@ export interface SelectIds {
   searchInput: string,
 }
 
-export interface SelectRootProps<T> extends InputInterface<T> {
+export interface SelectRootProps<T> extends InputComponentInterface<T> {
   compareFunction?: (a: T, b: T) => boolean,
   initialIsOpen?: boolean,
   onClose?: () => void,
@@ -28,8 +28,8 @@ export interface SelectRootProps<T> extends InputInterface<T> {
 export function SelectRoot<T>({
   children,
   value,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   initialValue,
   compareFunction,
   initialIsOpen = false,
diff --git a/packages/hightide-web/src/components/data-input/Switch.tsx b/packages/hightide-web/src/components/data-input/Switch.tsx
index 767c9d75..07ddcbad 100644
--- a/packages/hightide-web/src/components/data-input/Switch.tsx
+++ b/packages/hightide-web/src/components/data-input/Switch.tsx
@@ -1,13 +1,13 @@
 import clsx from 'clsx'
 import { type HTMLAttributes, useCallback } from 'react'
-import type { InputInterface } from './input/Input'
+import type { InputComponentInterface } from './input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 import { ColoringUtils } from '../../utils/coloring'
 import { PropsUtil } from '../../utils/propsUtil'
 
 export type SwitchProps = HTMLAttributes<HTMLDivElement>
-  & InputInterface<boolean>
+  & InputComponentInterface<boolean>
 
 /**
  * A binary on/off switch
@@ -21,8 +21,8 @@ export const Switch = ({
   invalid = false,
   disabled = false,
   readOnly = false,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   ...props
 }: SwitchProps) => {
   const onEditCompleteStable = useEventCallbackStabilizer(onEditComplete)
diff --git a/packages/hightide-web/src/components/data-input/Textarea.tsx b/packages/hightide-web/src/components/data-input/Textarea.tsx
index 8792ac85..e713cabe 100644
--- a/packages/hightide-web/src/components/data-input/Textarea.tsx
+++ b/packages/hightide-web/src/components/data-input/Textarea.tsx
@@ -2,14 +2,14 @@ import type { LabelHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'rea
 import { forwardRef, useCallback, useId } from 'react'
 import clsx from 'clsx'
 import { useDelay, type UseDelayOptions } from '@helpwave/hightide-utils/hooks'
-import type { InputInterface } from './input/Input'
+import type { InputComponentInterface } from './input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
 import { PropsUtil } from '../../utils/propsUtil'
 
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'>
-  & InputInterface<string>
+  & InputComponentInterface<string>
   & {
     saveDelayOptions?: UseDelayOptions,
 }
@@ -23,8 +23,8 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function
   value: controlledValue,
   initialValue,
   invalid = false,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   saveDelayOptions,
   ...props
 }, ref) {
diff --git a/packages/hightide-web/src/components/data-input/date/CalendarDatePicker.tsx b/packages/hightide-web/src/components/data-input/date/CalendarDatePicker.tsx
index 8476021d..cbbe4c2a 100644
--- a/packages/hightide-web/src/components/data-input/date/CalendarDatePicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/CalendarDatePicker.tsx
@@ -9,7 +9,7 @@ import type { YearMonthPickerProps } from './YearMonthPicker'
 import { YearMonthPicker } from './YearMonthPicker'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
 import { Button } from '../../interaction/Button'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { IconButton } from '../../interaction/IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
@@ -17,7 +17,7 @@ import { useHightideTranslation } from '@helpwave/hightide-utils/context/transla
 type DisplayMode = 'yearMonth' | 'day' | 'time'
 
 export interface CalendarDatePickerProps extends
- InputInterface<Date>,
+ InputComponentInterface<Date>,
  Pick<CalendarDayPickerProps, 'markToday' | 'start' | 'end' | 'weekStart'>
  {
   initialDisplay?: DisplayMode,
@@ -38,8 +38,8 @@ export const CalendarDatePicker = ({
   end,
   initialDisplay = 'day',
   weekStart,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   yearMonthPickerProps,
   calendarDayPickerProps,
   timeLabel,
@@ -121,11 +121,11 @@ export const CalendarDatePicker = ({
           value={value}
           start={start}
           end={end}
-          onValueChange={newDate => {
+          onValueUpdate={newDate => {
             setValue(newDate)
             setDisplayedMonth(new Date(newDate.getFullYear(), newDate.getMonth(), 1))
           }}
-          onEditComplete={newDate => {
+          onValueCommit={newDate => {
             setDisplayedMonth(new Date(newDate.getFullYear(), newDate.getMonth(), 1))
             onEditComplete?.(newDate)
           }}
@@ -144,8 +144,8 @@ export const CalendarDatePicker = ({
           start={start}
           end={end}
           weekStart={weekStart}
-          onValueChange={setValue}
-          onEditComplete={onEditComplete}
+          onValueUpdate={setValue}
+          onValueCommit={onEditComplete}
           className="calendar-date-picker-content"
         />
       )}
diff --git a/packages/hightide-web/src/components/data-input/date/CalendarDayPicker.tsx b/packages/hightide-web/src/components/data-input/date/CalendarDayPicker.tsx
index 9ed0353a..4543c3e1 100644
--- a/packages/hightide-web/src/components/data-input/date/CalendarDayPicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/CalendarDayPicker.tsx
@@ -3,14 +3,14 @@ import type { KeyboardEvent } from 'react'
 import type { Weekday } from '@helpwave/hightide-utils/utils'
 import { DateUtils } from '@helpwave/hightide-utils/utils'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
 import { ColoringUtils } from '../../../utils/coloring'
 import { PropsUtil } from '../../../utils/propsUtil'
 
-export type CalendarDayPickerProps = InputInterface<Date> & {
+export type CalendarDayPickerProps = InputComponentInterface<Date> & {
   displayedMonth?: Date,
   changeDisplayedMonth?: (date: Date) => void,
   initialDisplayedMonth?: Date,
@@ -32,8 +32,8 @@ export const CalendarDayPicker = ({
   initialValue = new Date(),
   start: providedStart,
   end: providedEnd,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   weekStart: weekStartOverride,
   markToday = true,
   className,
diff --git a/packages/hightide-web/src/components/data-input/date/DateTimePicker.tsx b/packages/hightide-web/src/components/data-input/date/DateTimePicker.tsx
index aa939900..f4c1227e 100644
--- a/packages/hightide-web/src/components/data-input/date/DateTimePicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/DateTimePicker.tsx
@@ -5,7 +5,7 @@ import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import clsx from 'clsx'
 
 import { useDateTimeFormat, useLocalization } from '../../../global-contexts/localization/forward-exports'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import type { CalendarDatePickerProps } from './CalendarDatePicker'
 import { CalendarDatePicker } from './CalendarDatePicker'
 import type { TimeWheelPickerProps } from './TimeWheelPicker'
@@ -13,7 +13,7 @@ import { TimeWheelPicker } from './TimeWheelPicker'
 
 export interface DateTimePickerProps extends
 HTMLAttributes<HTMLDivElement>,
-InputInterface<Date>,
+InputComponentInterface<Date>,
 Pick<CalendarDatePickerProps, 'start' | 'end' | 'weekStart' | 'markToday'>,
 Pick<TimeWheelPickerProps, 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>
 {
@@ -37,8 +37,8 @@ export const DateTimePicker = ({
   secondIncrement,
   millisecondIncrement,
   precision,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   timeInputProps,
   calendarDatePickerProps,
   ...props
@@ -69,8 +69,8 @@ export const DateTimePicker = ({
       millisecondIncrement={millisecondIncrement}
       precision={precision}
       value={value}
-      onValueChange={setValue}
-      onEditComplete={onEditComplete}
+      onValueUpdate={setValue}
+      onValueCommit={onEditComplete}
     />
   )
 
@@ -83,8 +83,8 @@ export const DateTimePicker = ({
         end={end}
         weekStart={weekStart}
         value={value}
-        onValueChange={setValue}
-        onEditComplete={onEditComplete}
+        onValueUpdate={setValue}
+        onValueCommit={onEditComplete}
         timeLabel={timeLabel}
         timePicker={timePicker}
       />
@@ -97,8 +97,8 @@ export const DateTimePicker = ({
         end={end}
         weekStart={weekStart}
         value={value}
-        onValueChange={setValue}
-        onEditComplete={onEditComplete}
+        onValueUpdate={setValue}
+        onValueCommit={onEditComplete}
       />
     )
   } else {
diff --git a/packages/hightide-web/src/components/data-input/date/DateTimePickerDialog.tsx b/packages/hightide-web/src/components/data-input/date/DateTimePickerDialog.tsx
index 1ef1aef2..301d434e 100644
--- a/packages/hightide-web/src/components/data-input/date/DateTimePickerDialog.tsx
+++ b/packages/hightide-web/src/components/data-input/date/DateTimePickerDialog.tsx
@@ -10,13 +10,13 @@ import { IconButton } from '../../interaction/IconButton'
 import { DateWheelPicker } from './DateWheelPicker'
 import { type DateTimeWheelPickerProps } from './DateTimeWheelPicker'
 import { TimeWheelPicker } from './TimeWheelPicker'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import type { DateTimeFormat, Weekday } from '@helpwave/hightide-utils/utils'
 import clsx from 'clsx'
 
 export interface DateTimePickerDialogProps extends
 HTMLAttributes<HTMLDivElement>,
-InputInterface<Date | null>,
+InputComponentInterface<Date | null>,
 Pick<DateTimeWheelPickerProps, 'start' | 'end' | 'isLooping' | 'loopingBehaviour' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>
 {
   allowRemove?: boolean,
@@ -34,8 +34,8 @@ export const DateTimePickerDialog = ({
   initialValue = null,
   value,
   allowRemove = true,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   mode = 'date',
   pickerProps = {},
   start,
@@ -159,8 +159,8 @@ export const DateTimePickerDialog = ({
         {showDate && (
           <DateWheelPicker
             value={pickerState}
-            onValueChange={setPickerState}
-            onEditComplete={setPickerState}
+            onValueUpdate={setPickerState}
+            onValueCommit={setPickerState}
             start={start}
             end={end}
             isLooping={isLooping}
@@ -170,8 +170,8 @@ export const DateTimePickerDialog = ({
         {showTime && (
           <TimeWheelPicker
             value={pickerState}
-            onValueChange={setPickerState}
-            onEditComplete={setPickerState}
+            onValueUpdate={setPickerState}
+            onValueCommit={setPickerState}
             isLooping={isLooping}
             loopingBehaviour={loopingBehaviour}
             is24HourFormat={is24HourFormat}
diff --git a/packages/hightide-web/src/components/data-input/date/DateTimeWheelPicker.tsx b/packages/hightide-web/src/components/data-input/date/DateTimeWheelPicker.tsx
index e62cc680..e3dbe7b8 100644
--- a/packages/hightide-web/src/components/data-input/date/DateTimeWheelPicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/DateTimeWheelPicker.tsx
@@ -1,14 +1,14 @@
 import clsx from 'clsx'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import type { DateWheelPickerProps } from './DateWheelPicker'
 import { DateWheelPicker } from './DateWheelPicker'
 import type { TimeWheelPickerProps } from './TimeWheelPicker'
 import { TimeWheelPicker } from './TimeWheelPicker'
 
 export type DateTimeWheelPickerProps =
-  InputInterface<Date> &
+  InputComponentInterface<Date> &
   Pick<DateWheelPickerProps, 'start' | 'end' | 'isLooping' | 'loopingBehaviour'> &
   Pick<TimeWheelPickerProps, 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'> & {
     className?: string,
@@ -19,8 +19,8 @@ export type DateTimeWheelPickerProps =
 export const DateTimeWheelPicker = ({
   value: controlledValue,
   initialValue = new Date(),
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   start,
   end,
   isLooping,
@@ -49,8 +49,8 @@ export const DateTimeWheelPicker = ({
         end={end}
         isLooping={isLooping}
         loopingBehaviour={loopingBehaviour}
-        onValueChange={setValue}
-        onEditComplete={onEditComplete}
+        onValueUpdate={setValue}
+        onValueCommit={onEditComplete}
       />
       <TimeWheelPicker
         {...timeWheelPickerProps}
@@ -62,8 +62,8 @@ export const DateTimeWheelPicker = ({
         precision={precision}
         isLooping={isLooping}
         loopingBehaviour={loopingBehaviour}
-        onValueChange={setValue}
-        onEditComplete={onEditComplete}
+        onValueUpdate={setValue}
+        onValueCommit={onEditComplete}
       />
     </div>
   )
diff --git a/packages/hightide-web/src/components/data-input/date/DateWheelPicker.tsx b/packages/hightide-web/src/components/data-input/date/DateWheelPicker.tsx
index d92a7e4e..25c89ace 100644
--- a/packages/hightide-web/src/components/data-input/date/DateWheelPicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/DateWheelPicker.tsx
@@ -4,7 +4,7 @@ import { DateUtils, range } from '@helpwave/hightide-utils/utils'
 import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import { WheelPicker } from '../../interaction/WheelPicker'
 import type { WheelLoopingBehaviour } from './TimeWheelPicker'
 
@@ -32,7 +32,7 @@ function withDateParts(date: Date, year: number, month: number, day: number) {
   return next
 }
 
-export type DateWheelPickerProps = InputInterface<Date> & {
+export type DateWheelPickerProps = InputComponentInterface<Date> & {
   start?: Date,
   end?: Date,
   isLooping?: boolean,
@@ -45,8 +45,8 @@ export const DateWheelPicker = ({
   initialValue = new Date(),
   start = defaultStart,
   end = defaultEnd,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   isLooping = true,
   loopingBehaviour = 'update',
   className,
diff --git a/packages/hightide-web/src/components/data-input/date/TimePicker.tsx b/packages/hightide-web/src/components/data-input/date/TimePicker.tsx
index cd4610a3..8dac83dd 100644
--- a/packages/hightide-web/src/components/data-input/date/TimePicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/TimePicker.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx'
 import { useEffect, useMemo, useRef } from 'react'
 import { closestMatch, range } from '@helpwave/hightide-utils/utils'
 import { Button } from '../../interaction/Button'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import type { DateTimePrecision } from '@helpwave/hightide-utils/utils'
 import { Visibility } from '../../layout/Visibility'
@@ -14,7 +14,7 @@ export type TimePickerSecondIncrement = '1s' | '5s' | '10s' | '15s' | '30s'
 
 export type TimePickerMillisecondIncrement = '1ms' | '5ms' | '10ms' | '25ms' | '50ms' | '100ms' | '250ms' | '500ms'
 
-export interface TimePickerProps extends InputInterface<Date> {
+export interface TimePickerProps extends InputComponentInterface<Date> {
   is24HourFormat?: boolean,
   precision?: DateTimePrecision,
   minuteIncrement?: TimePickerMinuteIncrement,
@@ -26,8 +26,8 @@ export interface TimePickerProps extends InputInterface<Date> {
 export const TimePicker = ({
   value: controlledValue,
   initialValue = new Date(),
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   is24HourFormat: is24HourFormatOverride,
   minuteIncrement = '5min',
   secondIncrement = '5s',
diff --git a/packages/hightide-web/src/components/data-input/date/TimeWheelPicker.tsx b/packages/hightide-web/src/components/data-input/date/TimeWheelPicker.tsx
index b455e5d5..86144732 100644
--- a/packages/hightide-web/src/components/data-input/date/TimeWheelPicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/TimeWheelPicker.tsx
@@ -4,7 +4,7 @@ import { closestMatch, range, type DateTimePrecision } from '@helpwave/hightide-
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 
 import { useDateTimeFormat } from '../../../global-contexts/localization/forward-exports'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import { Visibility } from '../../layout/Visibility'
 import { WheelPicker, type WheelPickerLoopEvent } from '../../interaction/WheelPicker'
 import type {
@@ -94,7 +94,7 @@ function set12HourDisplay(date: Date, displayHour: number, loopingBehaviour: Whe
   date.setHours(normalizedHour + (nextIsPM ? 12 : 0))
 }
 
-export interface TimeWheelPickerProps extends InputInterface<Date> {
+export interface TimeWheelPickerProps extends InputComponentInterface<Date> {
   is24HourFormat?: boolean,
   isLooping?: boolean,
   loopingBehaviour?: WheelLoopingBehaviour,
@@ -136,8 +136,8 @@ function NumericWheel({
 export const TimeWheelPicker = ({
   value: controlledValue,
   initialValue = new Date(),
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   is24HourFormat: is24HourFormatOverride,
   minuteIncrement = '1min',
   secondIncrement = '1s',
diff --git a/packages/hightide-web/src/components/data-input/date/YearMonthPicker.tsx b/packages/hightide-web/src/components/data-input/date/YearMonthPicker.tsx
index f622a173..fe4ac1b6 100644
--- a/packages/hightide-web/src/components/data-input/date/YearMonthPicker.tsx
+++ b/packages/hightide-web/src/components/data-input/date/YearMonthPicker.tsx
@@ -4,7 +4,7 @@ import { DateUtils, range } from '@helpwave/hightide-utils/utils'
 import { useControlledState, useEventCallbackStabilizer } from '@helpwave/hightide-utils/hooks'
 
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
-import type { InputInterface } from '../input/Input'
+import type { InputComponentInterface } from '../input/Input'
 import { WheelPicker } from '../../interaction/WheelPicker'
 
 const defaultStart = DateUtils.subtractDuration(new Date(), { years: 100 })
@@ -27,7 +27,7 @@ function withYearMonth(date: Date, year: number, month: number) {
   return next
 }
 
-export type YearMonthPickerProps = InputInterface<Date> & {
+export type YearMonthPickerProps = InputComponentInterface<Date> & {
   start?: Date,
   end?: Date,
   className?: string,
@@ -38,8 +38,8 @@ export const YearMonthPicker = ({
   initialValue = new Date(),
   start = defaultStart,
   end = defaultEnd,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   className,
 }: YearMonthPickerProps) => {
   const { locale } = useLocalization()
diff --git a/packages/hightide-web/src/components/data-input/input/DateTimeField.tsx b/packages/hightide-web/src/components/data-input/input/DateTimeField.tsx
index fb3639ba..417f00a8 100644
--- a/packages/hightide-web/src/components/data-input/input/DateTimeField.tsx
+++ b/packages/hightide-web/src/components/data-input/input/DateTimeField.tsx
@@ -5,7 +5,7 @@ import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { useLocalization } from '../../../global-contexts/localization/forward-exports'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { SafeGlobals } from '../../../utils/safeGlobals'
-import type { InputInterface } from './Input'
+import type { InputComponentInterface } from './Input'
 import type { DateTimeFormat, DateTimePrecision } from '@helpwave/hightide-utils/utils'
 import type { EditableSegmentType, SegmentEditState } from './dateTimeSegments'
 import {
@@ -28,7 +28,7 @@ import { PropsUtil } from '../../../utils/propsUtil'
 const advanceKeys = ['.', ':', '/', ',', '-', ' ']
 
 export interface DateTimeFieldProps extends
-  InputInterface<Date | null>,
+  InputComponentInterface<Date | null>,
   Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'> {
   mode?: DateTimeFormat,
   precision?: DateTimePrecision,
@@ -39,8 +39,8 @@ export interface DateTimeFieldProps extends
 export const DateTimeField = forwardRef<HTMLDivElement, DateTimeFieldProps>(function DateTimeField({
   value: controlledValue,
   initialValue = null,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   mode = 'date',
   precision = 'minute',
   is24HourFormat,
diff --git a/packages/hightide-web/src/components/data-input/input/DateTimeInput.tsx b/packages/hightide-web/src/components/data-input/input/DateTimeInput.tsx
index 3f0d69f6..24c6f091 100644
--- a/packages/hightide-web/src/components/data-input/input/DateTimeInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/DateTimeInput.tsx
@@ -6,7 +6,7 @@ import type { DateTimePickerProps } from '../date/DateTimePicker'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
 import { useDateTimeFormat, useLocalization } from '../../../global-contexts/localization/forward-exports'
 import { Visibility } from '../../layout/Visibility'
-import type { InputInterface } from './Input'
+import type { InputComponentInterface } from './Input'
 import { DateTimePickerDialog } from '../date/DateTimePickerDialog'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { PopUp } from '../../layout/PopUp/PopUp'
@@ -18,7 +18,7 @@ import { PropsUtil } from '../../../utils/propsUtil'
 
 export interface DateTimeInputProps extends
   Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange'>,
-  InputInterface<Date | null>,
+  InputComponentInterface<Date | null>,
   Pick<DateTimePickerProps, 'start' | 'end' | 'weekStart' | 'markToday' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>
 {
   allowRemove?: boolean,
@@ -26,7 +26,7 @@ export interface DateTimeInputProps extends
   mode?: DateTimeFormat,
   timeZone?: string,
   containerProps?: HTMLAttributes<HTMLDivElement>,
-  pickerProps?: Omit<DateTimePickerProps, keyof InputInterface<Date> | 'mode' | 'start' | 'end' | 'weekStart' | 'markToday' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>,
+  pickerProps?: Omit<DateTimePickerProps, keyof InputComponentInterface<Date> | 'mode' | 'start' | 'end' | 'weekStart' | 'markToday' | 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>,
   outsideClickCloses?: boolean,
   onDialogOpeningChange?: (isOpen: boolean) => void,
   actions?: ReactNode[],
@@ -36,8 +36,8 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
   id: inputId,
   value,
   initialValue = null,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   allowRemove = false,
   allowClear = true,
   containerProps,
@@ -157,8 +157,8 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
           readOnly={readOnly}
           invalid={invalid}
           required={required}
-          onValueChange={(next) => setState(fromZoned(next))}
-          onEditComplete={(next) => onEditComplete?.(fromZoned(next))}
+          onValueUpdate={(next) => setState(fromZoned(next))}
+          onValueCommit={(next) => onEditComplete?.(fromZoned(next))}
           aria-labelledby={props['aria-labelledby']}
           aria-describedby={props['aria-describedby']}
         />
@@ -218,8 +218,8 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
         <DateTimePickerDialog
           value={toZoned(dialogValue)}
           allowRemove={allowRemove}
-          onValueChange={(value) => setDialogValue(fromZoned(value))}
-          onEditComplete={(value) => {
+          onValueUpdate={(value) => setDialogValue(fromZoned(value))}
+          onValueCommit={(value) => {
             const absolute = fromZoned(value)
             setState(absolute)
             onEditComplete?.(absolute)
diff --git a/packages/hightide-web/src/components/data-input/input/FlexibleDateTimeInput.tsx b/packages/hightide-web/src/components/data-input/input/FlexibleDateTimeInput.tsx
index cc21deea..c5795514 100644
--- a/packages/hightide-web/src/components/data-input/input/FlexibleDateTimeInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/FlexibleDateTimeInput.tsx
@@ -16,7 +16,7 @@ export const FlexibleDateTimeInput = forwardRef<HTMLDivElement, FlexibleDateTime
   defaultMode = 'date',
   value: controlledValue,
   initialValue,
-  onValueChange,
+  onValueUpdate: onValueChange,
   fixedTime: fixedTimeOverride,
   timeZone: timeZoneOverride,
   actions = [],
@@ -53,7 +53,7 @@ export const FlexibleDateTimeInput = forwardRef<HTMLDivElement, FlexibleDateTime
       timeZone={timeZone}
       mode={mode}
       value={value}
-      onValueChange={(next) => {
+      onValueUpdate={(next) => {
         setValue(next === null ? null : (mode === 'date' ? toDate(next) : next))
       }}
       actions={[
diff --git a/packages/hightide-web/src/components/data-input/input/Input.tsx b/packages/hightide-web/src/components/data-input/input/Input.tsx
index f714ab7f..eff05957 100644
--- a/packages/hightide-web/src/components/data-input/input/Input.tsx
+++ b/packages/hightide-web/src/components/data-input/input/Input.tsx
@@ -25,10 +25,39 @@ const defaultEditCompleteOptions: EditCompleteOptionsResolved = {
 }
 
 export type InputInterface<In, Out = In> = {
+  /**
+   * The controlled value of the component.
+   * The component is controlled when `value` is defined; when `value` is
+   * `undefined`, `initialValue` is used and the component manages its own value.
+   */
   value?: In,
+
+  /**
+   * The initial value used when the component is uncontrolled.
+   */
   initialValue?: In,
-  onValueChange?: (value: Out) => void,
-  onEditComplete?: (value: Out) => void,
+
+  /**
+   * Called when the component updates its current value during an editing
+   * interaction. The callback may be called even when the value is unchanged;
+   * consumers should not assume that the value differs from the previous value.
+   *
+   * This callback is always triggered before onValueCommit with the most current value, but
+   * the onValueCommit might fire significantly later (e.g. when a Multiselect Menu updates the
+   * selection, but is closed only 20 seconds later)
+   */
+  onValueUpdate?: (value: Out) => void,
+
+  /**
+   * Called when the component considers the current editing interaction
+   * complete. The component defines what constitutes completion; for example,
+   * this may occur when editing is committed, an interaction ends, or a
+   * component-specific editing lifecycle is completed.
+   */
+  onValueCommit?: (value: Out) => void,
+}
+
+export type InputComponentInterface<In, Out = In> = InputInterface<In, Out> & {
   invalid?: boolean,
   disabled?: boolean,
   readOnly?: boolean,
@@ -36,7 +65,7 @@ export type InputInterface<In, Out = In> = {
 }
 
 export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>
-  & InputInterface<string>
+  & InputComponentInterface<string>
   & {
     editCompleteOptions?: EditCompleteOptions,
   }
@@ -50,8 +79,8 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   value: controlledValue,
   initialValue,
   invalid = false,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   editCompleteOptions,
   ...props
 }, forwardedRef) {
diff --git a/packages/hightide-web/src/components/data-input/input/InsideLabelInput.tsx b/packages/hightide-web/src/components/data-input/input/InsideLabelInput.tsx
index c74eb568..918d1bbe 100644
--- a/packages/hightide-web/src/components/data-input/input/InsideLabelInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/InsideLabelInput.tsx
@@ -19,7 +19,7 @@ export const InsideLabelInput = forwardRef<HTMLInputElement, InsideLabelInputPro
   id: customId,
   value: controlledValue,
   initialValue,
-  onValueChange,
+  onValueUpdate: onValueChange,
   label,
   ...props
 }, forwardedRef) {
@@ -40,7 +40,7 @@ export const InsideLabelInput = forwardRef<HTMLInputElement, InsideLabelInputPro
         ref={forwardedRef}
 
         value={value}
-        onValueChange={setValue}
+        onValueUpdate={setValue}
 
         onFocus={event => {
           props.onFocus?.(event)
diff --git a/packages/hightide-web/src/components/data-input/input/NumberInput.tsx b/packages/hightide-web/src/components/data-input/input/NumberInput.tsx
index e29bcf07..f1f007ee 100644
--- a/packages/hightide-web/src/components/data-input/input/NumberInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/NumberInput.tsx
@@ -1,14 +1,14 @@
 import type { CSSProperties, InputHTMLAttributes } from 'react'
 import { forwardRef, useRef } from 'react'
 import clsx from 'clsx'
-import type { InputInterface } from './Input'
+import type { InputComponentInterface } from './Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import { ReactUtils } from '@helpwave/hightide-utils/utils'
 import { MathUtil } from '@helpwave/hightide-utils/utils'
 import { PropsUtil } from '../../../utils/propsUtil'
 
 export type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'type' | 'min' | 'max' | 'step'>
-  & InputInterface<number>
+  & InputComponentInterface<number>
   & {
     minimum?: number,
     maximum?: number,
@@ -25,8 +25,8 @@ export type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'valu
 export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(function NumberInput({
   value: controlledValue,
   initialValue = 0,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   minimum,
   maximum,
   approximateMaxCharacters = 6,
diff --git a/packages/hightide-web/src/components/data-input/input/NumberStepperInput.tsx b/packages/hightide-web/src/components/data-input/input/NumberStepperInput.tsx
index 29ae6b6e..98634180 100644
--- a/packages/hightide-web/src/components/data-input/input/NumberStepperInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/NumberStepperInput.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import { Minus, Plus } from 'lucide-react'
 import { IconButton } from '../../interaction/IconButton'
 import { useHightideTranslation } from '@helpwave/hightide-utils/context/translation'
-import type { InputInterface } from './Input'
+import type { InputComponentInterface } from './Input'
 import { useControlledState } from '@helpwave/hightide-utils/hooks'
 import type { ChangeRateCurveProps, StepperLoopEvent } from '@helpwave/hightide-utils/hooks'
 import { useStepperHold } from '@helpwave/hightide-utils/hooks'
@@ -23,7 +23,7 @@ type ActiveInputState = {
 }
 
 export type NumberStepperInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'type' | 'min' | 'max' | 'step'>
-  & InputInterface<number>
+  & InputComponentInterface<number>
   & {
     minimum?: number,
     maximum?: number,
@@ -47,8 +47,8 @@ export type NumberStepperInputProps = Omit<InputHTMLAttributes<HTMLInputElement>
 export const NumberStepperInput = forwardRef<HTMLInputElement, NumberStepperInputProps>(function NumberStepperInput({
   value: controlledValue,
   initialValue = 0,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   minimum,
   maximum,
   stepSize: step = 1,
@@ -161,8 +161,8 @@ export const NumberStepperInput = forwardRef<HTMLInputElement, NumberStepperInpu
         {...props}
         ref={forwardedRef}
         value={value}
-        onValueChange={setValue}
-        onEditComplete={onEditComplete}
+        onValueUpdate={setValue}
+        onValueCommit={onEditComplete}
         minimum={minimum}
         maximum={maximum}
         approximateMaxCharacters={approximateMaxCharacters}
diff --git a/packages/hightide-web/src/components/data-input/input/SearchBar.tsx b/packages/hightide-web/src/components/data-input/input/SearchBar.tsx
index 963cd946..bd9f767e 100644
--- a/packages/hightide-web/src/components/data-input/input/SearchBar.tsx
+++ b/packages/hightide-web/src/components/data-input/input/SearchBar.tsx
@@ -36,8 +36,8 @@ export const SearchBar = ({
       <Input
         {...inputProps}
         value={value}
-        onValueChange={setValue}
-        onEditComplete={onSearch}
+        onValueUpdate={setValue}
+        onValueCommit={onSearch}
         placeholder={inputProps.placeholder ?? translation('search')}
         className={clsx('search-bar-input', inputProps.className)}
       />
diff --git a/packages/hightide-web/src/components/data-input/input/ToggleableInput.tsx b/packages/hightide-web/src/components/data-input/input/ToggleableInput.tsx
index 30dd8101..56a9493f 100644
--- a/packages/hightide-web/src/components/data-input/input/ToggleableInput.tsx
+++ b/packages/hightide-web/src/components/data-input/input/ToggleableInput.tsx
@@ -21,7 +21,7 @@ type ToggleableInputProps = InputProps & {
 export const ToggleableInput = forwardRef<HTMLInputElement, ToggleableInputProps>(function ToggleableInput({
   value: controlledValue,
   initialValue,
-  onValueChange,
+  onValueUpdate: onValueChange,
   initialState = 'display',
   editCompleteOptions,
   ...props
@@ -47,9 +47,9 @@ export const ToggleableInput = forwardRef<HTMLInputElement, ToggleableInputProps
         {...props}
         ref={ReactUtils.assingRefsBuilder([innerRef, forwardedRef])}
         value={value}
-        onValueChange={setValue}
-        onEditComplete={(text) => {
-          props.onEditComplete?.(text)
+        onValueUpdate={setValue}
+        onValueCommit={(text) => {
+          props.onValueCommit?.(text)
           setIsEditing(false)
         }}
         onFocus={event => {
diff --git a/packages/hightide-web/src/components/interaction/data/FilterPopUp.tsx b/packages/hightide-web/src/components/interaction/data/FilterPopUp.tsx
index fda5f5e8..98e1f48a 100644
--- a/packages/hightide-web/src/components/interaction/data/FilterPopUp.tsx
+++ b/packages/hightide-web/src/components/interaction/data/FilterPopUp.tsx
@@ -70,7 +70,7 @@ export const FilterBasePopUp = forwardRef<HTMLDivElement, FilterPopUpBaseProps>(
           <span className="typography-label-sm text-description">{name ?? translation('filter')}</span>
           <Select
             value={operator}
-            onValueChange={(newOperator) => onOperatorChange(newOperator as FilterOperator)}
+            onValueUpdate={(newOperator) => onOperatorChange(newOperator as FilterOperator)}
             triggerProps={{
               className: 'filter-operator-select w-fit flex-row-1 items-center h-element-sm px-2 py-1 rounded-md hover:cursor-pointer font-bold',
               selectedDisplay: (option) => option ? translation(FilterOperatorUtils.getInfo(option.value.value).translationKey as Parameters<typeof translation>[0]) : ''
@@ -150,7 +150,7 @@ export const TextFilterPopUp = forwardRef<HTMLDivElement, FilterPopUpProps>(func
             id={ids.search}
             value={parameter.stringValue ?? ''}
             placeholder={translation('value')}
-            onValueChange={searchText => {
+            onValueUpdate={searchText => {
               onValueChange({
                 dataType: 'text',
                 operator,
@@ -207,7 +207,7 @@ export const NumberFilterPopUp = forwardRef<HTMLDivElement, FilterPopUpProps>(fu
             value={parameter.numberMin?.toString() ?? ''}
             type="number"
             placeholder="0"
-            onValueChange={text => {
+            onValueUpdate={text => {
               const num = Number(text)
               onValueChange({
                 dataType: 'number',
@@ -225,7 +225,7 @@ export const NumberFilterPopUp = forwardRef<HTMLDivElement, FilterPopUpProps>(fu
             value={parameter.numberMax?.toString() ?? ''}
             type="number"
             placeholder="1"
-            onValueChange={text => {
+            onValueUpdate={text => {
               const num = Number(text)
               onValueChange({
                 dataType: 'number',
@@ -242,7 +242,7 @@ export const NumberFilterPopUp = forwardRef<HTMLDivElement, FilterPopUpProps>(fu
           value={parameter.numberValue?.toString() ?? ''}
           type="number"
           placeholder="0"
-          onValueChange={text => {
+          onValueUpdate={text => {
             const num = Number(text)
             onValueChange({
               dataType: 'number',
@@ -297,8 +297,8 @@ export const DateFilterPopUp = forwardRef<HTMLDivElement, FilterPopUpProps>(func
           <DateTimeInput
             id={ids.startDate}
             value={temporaryMinDateValue ?? parameter.dateMin ?? null}
-            onValueChange={setTemporaryMinDateValue}
-            onEditComplete={dateValue => {
+            onValueUpdate={setTemporaryMinDateValue}
+            onValueCommit={dateValue => {
               if (dateValue && parameter.dateMax && dateValue > parameter.dateMax) {
                 if (!parameter.dateMin) {
                   onValueChange({
@@ -333,8 +333,8 @@ export const DateFilterPopUp = forwardRef<HTMLDivElement, FilterPopUpProps>(func
           <DateTimeInput
             id={ids.endDate}
             value={temporaryMaxDateValue ?? parameter.dateMax ?? null}
-            onValueChange={setTemporaryMaxDateValue}
-            onEditComplete={dateValue => {
+            onValueUpdate={setTemporaryMaxDateValue}
+            onValueCommit={dateValue => {
               if (dateValue && parameter.dateMin && dateValue < parameter.dateMin) {
                 if (!parameter.dateMax) {
                   onValueChange({
@@ -370,7 +370,7 @@ export const DateFilterPopUp = forwardRef<HTMLDivElement, FilterPopUpProps>(func
         <DateTimeInput
           id={ids.compareDate}
           value={parameter.dateValue ?? null}
-          onValueChange={compareDate => {
+          onValueUpdate={compareDate => {
             onValueChange({
               dataType: 'date',
               operator,
@@ -432,8 +432,8 @@ export const DatetimeFilterPopUp = forwardRef<HTMLDivElement, FilterPopUpProps>(
             id={ids.startDate}
             mode="dateTime"
             value={temporaryMinDateValue ?? parameter.dateMin ?? null}
-            onValueChange={setTemporaryMinDateValue}
-            onEditComplete={dateValue => {
+            onValueUpdate={setTemporaryMinDateValue}
+            onValueCommit={dateValue => {
               if (dateValue && parameter.dateMax && dateValue > parameter.dateMax) {
                 if (!parameter.dateMin) {
                   onValueChange({
@@ -467,8 +467,8 @@ export const DatetimeFilterPopUp = forwardRef<HTMLDivElement, FilterPopUpProps>(
             id={ids.endDate}
             mode="dateTime"
             value={temporaryMaxDateValue ?? parameter.dateMax ?? null}
-            onValueChange={setTemporaryMaxDateValue}
-            onEditComplete={dateValue => {
+            onValueUpdate={setTemporaryMaxDateValue}
+            onValueCommit={dateValue => {
               if (dateValue && parameter.dateMin && dateValue < parameter.dateMin) {
                 if (!parameter.dateMax) {
                   onValueChange({
@@ -505,7 +505,7 @@ export const DatetimeFilterPopUp = forwardRef<HTMLDivElement, FilterPopUpProps>(
           id={ids.compareDate}
           mode="dateTime"
           value={parameter.dateValue ?? null}
-          onValueChange={compareDate => {
+          onValueUpdate={compareDate => {
             onValueChange({
               dataType: 'dateTime',
               operator,
@@ -587,7 +587,7 @@ export const TagsFilterPopUp = forwardRef<HTMLDivElement, TagsFilterPopUpProps>(
       <Visibility isVisible={needsParameterInput}>
         <MultiSelect
           value={selectedTags}
-          onValueChange={(selected) => {
+          onValueUpdate={(selected) => {
             onValueChange({
               dataType: 'multiTags',
               operator,
@@ -651,7 +651,7 @@ export const TagsSingleFilterPopUp = forwardRef<HTMLDivElement, TagsSingleFilter
       <Visibility isVisible={needsParameterInput && needsMultiSelect}>
         <MultiSelect
           value={selectedTagsMulti}
-          onValueChange={(selected) => {
+          onValueUpdate={(selected) => {
             onValueChange({
               dataType: 'singleTag',
               operator,
@@ -668,7 +668,7 @@ export const TagsSingleFilterPopUp = forwardRef<HTMLDivElement, TagsSingleFilter
       <Visibility isVisible={needsParameterInput && !needsMultiSelect}>
         <Select
           value={selectedTagSingle}
-          onValueChange={(selectedTag) => {
+          onValueUpdate={(selectedTag) => {
             onValueChange({
               dataType: 'singleTag',
               operator,
diff --git a/packages/hightide-web/src/components/interaction/navigation/Pagination.tsx b/packages/hightide-web/src/components/interaction/navigation/Pagination.tsx
index b5e68101..1ebef625 100644
--- a/packages/hightide-web/src/components/interaction/navigation/Pagination.tsx
+++ b/packages/hightide-web/src/components/interaction/navigation/Pagination.tsx
@@ -67,14 +67,14 @@ export const Pagination = ({
           min={1}
           max={pageCount}
           disabled={noPages}
-          onValueChange={value => {
+          onValueUpdate={value => {
             if (value) {
               setValue(MathUtil.clamp(Number(value), 1, pageCount).toString())
             } else {
               setValue(value)
             }
           }}
-          onEditComplete={value => {
+          onValueCommit={value => {
             changePage(MathUtil.clamp(Number(value) - 1, 0, pageCount - 1))
           }}
           editCompleteOptions={{ delay: 800 }}
diff --git a/packages/hightide-web/src/components/layout/Modal/premade/LanguageModal.tsx b/packages/hightide-web/src/components/layout/Modal/premade/LanguageModal.tsx
index 51b1e4e1..5c234c1e 100644
--- a/packages/hightide-web/src/components/layout/Modal/premade/LanguageModal.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/premade/LanguageModal.tsx
@@ -18,9 +18,9 @@ export const LanguageSelect = ({ ...props }: LanguageSelectProps) => {
     <Select
       {...props}
       value={locale}
-      onValueChange={(language: string) => {
+      onValueUpdate={(language: string) => {
         setLocale(language)
-        props.onValueChange?.(language)
+        props.onValueUpdate?.(language)
       }}
       triggerProps={{
         ...props.triggerProps,
diff --git a/packages/hightide-web/src/components/layout/Modal/premade/ThemeModal.tsx b/packages/hightide-web/src/components/layout/Modal/premade/ThemeModal.tsx
index 8ab52406..46ba3b08 100644
--- a/packages/hightide-web/src/components/layout/Modal/premade/ThemeModal.tsx
+++ b/packages/hightide-web/src/components/layout/Modal/premade/ThemeModal.tsx
@@ -21,8 +21,8 @@ export const ThemeSelect = ({ ...props }: ThemeSelectProps) => {
   return (
     <Select<string | null>
       value={preferredThemeMode}
-      onEditComplete={(value) => {
-        props.onEditComplete?.(value)
+      onValueCommit={(value) => {
+        props.onValueCommit?.(value)
         setTheme(value)
       }}
       iconAppearance="right"
diff --git a/packages/hightide-web/src/components/layout/Table/TablePagination.tsx b/packages/hightide-web/src/components/layout/Table/TablePagination.tsx
index 2696a4c4..7fe12258 100644
--- a/packages/hightide-web/src/components/layout/Table/TablePagination.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TablePagination.tsx
@@ -42,7 +42,7 @@ export const TablePageSizeSelect = ({
     <Select
       {...props}
       value={currentPageSize.toString()}
-      onValueChange={(value) => table.setPageSize(Number(value))}
+      onValueUpdate={(value) => table.setPageSize(Number(value))}
     >
       {pageSizeOptions.map(size => (
         <Select.Option key={size} value={size.toString()} label={size.toString()}/>
diff --git a/packages/hightide-web/src/components/layout/Table/TableWithSelectionProvider.tsx b/packages/hightide-web/src/components/layout/Table/TableWithSelectionProvider.tsx
index 886e5485..eb36813a 100644
--- a/packages/hightide-web/src/components/layout/Table/TableWithSelectionProvider.tsx
+++ b/packages/hightide-web/src/components/layout/Table/TableWithSelectionProvider.tsx
@@ -36,7 +36,7 @@ export const TableWithSelectionProvider = <T,>({
                 <Checkbox
                   value={table?.getIsAllRowsSelected()}
                   indeterminate={table?.getIsSomeRowsSelected()}
-                  onValueChange={value => {
+                  onValueUpdate={value => {
                     const newValue = !!value
                     table?.toggleAllRowsSelected(newValue)
                   }}
@@ -52,7 +52,7 @@ export const TableWithSelectionProvider = <T,>({
           <Checkbox
             disabled={!row.getCanSelect()}
             value={row.getIsSelected()}
-            onValueChange={row.getToggleSelectedHandler()}
+            onValueUpdate={row.getToggleSelectedHandler()}
           />
         )
       },
diff --git a/packages/hightide-web/src/components/layout/form/FormField.tsx b/packages/hightide-web/src/components/layout/form/FormField.tsx
index 16bce999..d7326264 100644
--- a/packages/hightide-web/src/components/layout/form/FormField.tsx
+++ b/packages/hightide-web/src/components/layout/form/FormField.tsx
@@ -1,4 +1,4 @@
-import type { InputInterface } from '../../data-input/input/Input'
+import type { InputComponentInterface } from '../../data-input/input/Input'
 import type { FormFieldAriaAttributes, FormFieldInteractionStates } from './FieldLayout'
 import { FormFieldLayout, type FormFieldLayoutProps } from './FieldLayout'
 import { useFormField } from './FormContext'
@@ -27,7 +27,7 @@ export interface FormFieldProps<T extends FormValue, K extends keyof T> extends
   validationBehaviour?: FormValidationBehaviour,
 }
 
-export type FormFieldDataHandling<T> = Required<Pick<InputInterface<T>, 'value' | 'onValueChange' | 'onEditComplete'>>
+export type FormFieldDataHandling<T> = Required<Pick<InputComponentInterface<T>, 'value' | 'onValueChange' | 'onEditComplete'>>
 
 export const FormField = <T extends FormValue, K extends keyof T>({ children, name, triggerUpdateOnEditComplete, validationBehaviour, ...props }: FormFieldProps<T, K>) => {
   const formField = useFormField<T, K>(name, { triggerUpdate: triggerUpdateOnEditComplete, validationBehaviour })
diff --git a/packages/hightide-web/src/components/properties/DateProperty.tsx b/packages/hightide-web/src/components/properties/DateProperty.tsx
index a067df49..43bda243 100644
--- a/packages/hightide-web/src/components/properties/DateProperty.tsx
+++ b/packages/hightide-web/src/components/properties/DateProperty.tsx
@@ -15,8 +15,8 @@ export type DatePropertyProps =
 export const DateProperty = ({
   name,
   value,
-  onValueChange,
-  onEditComplete,
+  onValueUpdate: onValueChange,
+  onValueCommit: onEditComplete,
   onRemove,
   onValueClear,
   required,
@@ -53,8 +53,8 @@ export const DateProperty = ({
           required={required}
           readOnly={readOnly}
           allowClear={false}
-          onValueChange={onValueChange}
-          onEditComplete={onEditComplete}
+          onValueUpdate={onValueChange}
+          onValueCommit={onEditComplete}
           className="property-input flex-row-4 pr-0"
           data-invalid={PropsUtil.dataAttributes.bool(invalid)}
         />
diff --git a/packages/hightide-web/src/components/properties/MultiSelectProperty.tsx b/packages/hightide-web/src/components/properties/MultiSelectProperty.tsx
index 4e0a0804..585d10de 100644
--- a/packages/hightide-web/src/components/properties/MultiSelectProperty.tsx
+++ b/packages/hightide-web/src/components/properties/MultiSelectProperty.tsx
@@ -29,7 +29,7 @@ export const MultiSelectProperty = ({
         >
           <MultiSelect.Root
             value={value}
-            onValueChange={(val) => {
+            onValueUpdate={(val) => {
               const arr = val as string[]
               onValueChange?.(arr)
               onEditComplete?.(arr)
diff --git a/packages/hightide-web/src/components/properties/NumberProperty.tsx b/packages/hightide-web/src/components/properties/NumberProperty.tsx
index e8c47b49..e2244204 100644
--- a/packages/hightide-web/src/components/properties/NumberProperty.tsx
+++ b/packages/hightide-web/src/components/properties/NumberProperty.tsx
@@ -43,7 +43,7 @@ export const NumberProperty = ({
             type="number"
             readOnly={readOnly}
             placeholder={translation('value')}
-            onValueChange={(value) => {
+            onValueUpdate={(value) => {
               const numberValue = parseFloat(value)
               if (isNaN(numberValue)) {
                 onValueClear?.()
@@ -51,7 +51,7 @@ export const NumberProperty = ({
                 onValueChange?.(numberValue)
               }
             }}
-            onEditComplete={(value) => {
+            onValueCommit={(value) => {
               const numberValue = parseFloat(value)
               if (isNaN(numberValue)) {
                 onValueClear?.()
diff --git a/packages/hightide-web/src/components/properties/SelectProperty.tsx b/packages/hightide-web/src/components/properties/SelectProperty.tsx
index af99b34a..04bc9ed3 100644
--- a/packages/hightide-web/src/components/properties/SelectProperty.tsx
+++ b/packages/hightide-web/src/components/properties/SelectProperty.tsx
@@ -30,7 +30,7 @@ export const SingleSelectProperty = ({
         >
           <Select.Root
             value={value}
-            onValueChange={(value) => {
+            onValueUpdate={(value) => {
               onValueChange?.(value)
               onEditComplete?.(value)
             }}
diff --git a/packages/hightide-web/src/components/properties/TextProperty.tsx b/packages/hightide-web/src/components/properties/TextProperty.tsx
index 88dc21b2..78cd0458 100644
--- a/packages/hightide-web/src/components/properties/TextProperty.tsx
+++ b/packages/hightide-web/src/components/properties/TextProperty.tsx
@@ -35,8 +35,8 @@ export const TextProperty = ({
           value={value ?? ''}
           readOnly={readOnly}
           placeholder={translation('text')}
-          onValueChange={(value) => onValueChange?.(value)}
-          onEditComplete={(value) => onEditComplete?.(value)}
+          onValueUpdate={(value) => onValueChange?.(value)}
+          onValueCommit={(value) => onEditComplete?.(value)}
         />
       )}
     </PropertyBase>
diff --git a/packages/hightide-web/src/components/visualization/process-model/ProcessModelTraceReplay.tsx b/packages/hightide-web/src/components/visualization/process-model/ProcessModelTraceReplay.tsx
index d9a323e8..1e73b1bb 100644
--- a/packages/hightide-web/src/components/visualization/process-model/ProcessModelTraceReplay.tsx
+++ b/packages/hightide-web/src/components/visualization/process-model/ProcessModelTraceReplay.tsx
@@ -299,7 +299,7 @@ export const ProcessModelTraceReplay = ({ graph, className }: ProcessModelTraceR
           <span className="process-model-trace-replay-speed-label">{translation('speed')}</span>
           <Select
             value={speedMult}
-            onValueChange={setSpeedMult}
+            onValueUpdate={setSpeedMult}
           >
             {SPEED_OPTIONS.map((option) => (
               <Select.Option<number>
diff --git a/packages/hightide-web/stories/Utilities/hooks/useDebouncer.stories.tsx b/packages/hightide-web/stories/Utilities/hooks/useDebouncer.stories.tsx
index 0b7e1701..f70284e1 100644
--- a/packages/hightide-web/stories/Utilities/hooks/useDebouncer.stories.tsx
+++ b/packages/hightide-web/stories/Utilities/hooks/useDebouncer.stories.tsx
@@ -48,7 +48,7 @@ function DebouncerDemo({ debounceMs }: StoryArgs) {
     <div className="flex w-full max-w-md flex-col gap-8">
       <Input
         value={inputValue}
-        onValueChange={handleInputChange}
+        onValueUpdate={handleInputChange}
         placeholder="Type to trigger debounced updates"
       />
       <Button onClick={handleBurstClick}>
diff --git a/packages/hightide-web/stories/Utilities/hooks/useThrottle.stories.tsx b/packages/hightide-web/stories/Utilities/hooks/useThrottle.stories.tsx
index b466ebf2..6ff2ddf6 100644
--- a/packages/hightide-web/stories/Utilities/hooks/useThrottle.stories.tsx
+++ b/packages/hightide-web/stories/Utilities/hooks/useThrottle.stories.tsx
@@ -52,7 +52,7 @@ function ThrottleDemo({ throttleMs }: StoryArgs) {
     <div className="flex w-full max-w-md flex-col gap-8">
       <Input
         value={inputValue}
-        onValueChange={handleInputChange}
+        onValueUpdate={handleInputChange}
         placeholder="Type to trigger throttled updates"
       />
       <Button onClick={handleClick}>
diff --git a/packages/hightide-web/stories/data-input/FileInput/FileInput.stories.tsx b/packages/hightide-web/stories/data-input/FileInput/FileInput.stories.tsx
index c097695e..1c5caa8e 100644
--- a/packages/hightide-web/stories/data-input/FileInput/FileInput.stories.tsx
+++ b/packages/hightide-web/stories/data-input/FileInput/FileInput.stories.tsx
@@ -92,8 +92,8 @@ export const fileInputComposed: Story = {
       invalid={args.invalid}
       readOnly={args.readOnly}
       maxFiles={args.maxFiles}
-      onValueChange={args.onValueChange}
-      onEditComplete={args.onEditComplete}
+      onValueUpdate={args.onValueChange}
+      onValueCommit={args.onEditComplete}
     >
       <FileInput.Trigger placeholder="Add files…" maxVisualFiles={args.maxVisualFiles} />
       <FileInput.Menu />
diff --git a/packages/hightide-web/stories/data-input/MultiSelect/MultiSelect.stories.tsx b/packages/hightide-web/stories/data-input/MultiSelect/MultiSelect.stories.tsx
index e11a8a57..1c97a242 100644
--- a/packages/hightide-web/stories/data-input/MultiSelect/MultiSelect.stories.tsx
+++ b/packages/hightide-web/stories/data-input/MultiSelect/MultiSelect.stories.tsx
@@ -110,12 +110,12 @@ export const multiSelectWithUser: Story = {
         {...args}
         initialValue={initialValue}
         value={value}
-        onValueChange={(v) => {
-          args.onValueChange?.(v)
+        onValueUpdate={(v) => {
+          args.onValueUpdate?.(v)
           setValue(v)
         }}
-        onEditComplete={(v) => {
-          args.onEditComplete?.(v)
+        onValueCommit={(v) => {
+          args.onValueCommit?.(v)
           setValue(v)
         }}
       />
@@ -141,8 +141,8 @@ export const multiSelectComposed: Story = {
       searchableThreshold={args.searchableThreshold}
       readOnly={args.readOnly}
       required={args.required}
-      onValueChange={args.onValueChange}
-      onEditComplete={args.onEditComplete}
+      onValueUpdate={args.onValueUpdate}
+      onValueCommit={args.onValueCommit}
     >
       <MultiSelect.Trigger placeholder="Select…" />
       <MultiSelect.Content>
diff --git a/packages/hightide-web/stories/data-input/MultiSelect/MultiSelectChipDisplay.stories.tsx b/packages/hightide-web/stories/data-input/MultiSelect/MultiSelectChipDisplay.stories.tsx
index 1b0c46e6..4684f947 100644
--- a/packages/hightide-web/stories/data-input/MultiSelect/MultiSelectChipDisplay.stories.tsx
+++ b/packages/hightide-web/stories/data-input/MultiSelect/MultiSelectChipDisplay.stories.tsx
@@ -42,8 +42,8 @@ export const multiSelectChipDisplay: Story = {
       searchableThreshold={args.searchableThreshold}
       readOnly={args.readOnly}
       required={args.required}
-      onValueChange={args.onValueChange}
-      onEditComplete={args.onEditComplete}
+      onValueUpdate={args.onValueChange}
+      onValueCommit={args.onEditComplete}
     >
       <MultiSelect.ChipDisplayTrigger />
       <MultiSelect.Content>
diff --git a/packages/hightide-web/stories/data-input/NumberStepperInput.stories.tsx b/packages/hightide-web/stories/data-input/NumberStepperInput.stories.tsx
index 21257ada..bb9abdbc 100644
--- a/packages/hightide-web/stories/data-input/NumberStepperInput.stories.tsx
+++ b/packages/hightide-web/stories/data-input/NumberStepperInput.stories.tsx
@@ -36,11 +36,11 @@ export const numberStepperInput: Story = {
       <NumberStepperInput
         {...props}
         value={value}
-        onValueChange={(nextValue) => {
+        onValueUpdate={(nextValue) => {
           props.onValueChange?.(nextValue)
           setValue(nextValue)
         }}
-        onEditComplete={(nextValue) => {
+        onValueCommit={(nextValue) => {
           props.onEditComplete?.(nextValue)
           setValue(nextValue)
         }}
diff --git a/packages/hightide-web/stories/data-input/Select/Select.stories.tsx b/packages/hightide-web/stories/data-input/Select/Select.stories.tsx
index 2c0edd30..cc2a280e 100644
--- a/packages/hightide-web/stories/data-input/Select/Select.stories.tsx
+++ b/packages/hightide-web/stories/data-input/Select/Select.stories.tsx
@@ -107,12 +107,12 @@ export const selectWithUser: Story = {
       <Select<User>
         {...args}
         value={value}
-        onValueChange={(v) => {
-          args.onValueChange?.(v)
+        onValueUpdate={(v) => {
+          args.onValueUpdate?.(v)
           setValue(v)
         }}
-        onEditComplete={(v) => {
-          args.onEditComplete?.(v)
+        onValueCommit={(v) => {
+          args.onValueCommit?.(v)
           setValue(v)
         }}
       />
@@ -138,8 +138,8 @@ export const selectComposed: Story = {
       searchableThreshold={args.searchableThreshold}
       readOnly={args.readOnly}
       required={args.required}
-      onValueChange={args.onValueChange}
-      onEditComplete={args.onEditComplete}
+      onValueUpdate={args.onValueUpdate}
+      onValueCommit={args.onValueCommit}
     >
       <Select.Trigger placeholder="Select…" />
       <Select.Content>
diff --git a/packages/hightide-web/stories/data-input/date/DateTimeInput.stories.tsx b/packages/hightide-web/stories/data-input/date/DateTimeInput.stories.tsx
index f38ac67f..db51e2f7 100644
--- a/packages/hightide-web/stories/data-input/date/DateTimeInput.stories.tsx
+++ b/packages/hightide-web/stories/data-input/date/DateTimeInput.stories.tsx
@@ -66,11 +66,11 @@ export const dateTimeInput: Story = {
           <DateTimeInput
             {...args}
             value={value}
-            onValueChange={(next) => {
+            onValueUpdate={(next) => {
               args.onValueChange?.(next)
               setValue(next)
             }}
-            onEditComplete={(next) => {
+            onValueCommit={(next) => {
               args.onEditComplete?.(next)
               setValue(next)
             }}
diff --git a/packages/hightide-web/stories/data-input/date/DateTimePickerDialog.stories.tsx b/packages/hightide-web/stories/data-input/date/DateTimePickerDialog.stories.tsx
index 008a19c6..2db350cd 100644
--- a/packages/hightide-web/stories/data-input/date/DateTimePickerDialog.stories.tsx
+++ b/packages/hightide-web/stories/data-input/date/DateTimePickerDialog.stories.tsx
@@ -44,11 +44,11 @@ export const dateTimePickerDialog: Story = {
         <DateTimePickerDialog
           {...args}
           value={value}
-          onValueChange={(next) => {
+          onValueUpdate={(next) => {
             args.onValueChange?.(next)
             setValue(next)
           }}
-          onEditComplete={(next) => {
+          onValueCommit={(next) => {
             args.onEditComplete?.(next)
             setValue(next)
           }}
diff --git a/packages/hightide-web/stories/data-input/date/FlexibleDateTimeInput.stories.tsx b/packages/hightide-web/stories/data-input/date/FlexibleDateTimeInput.stories.tsx
index 0f0d7f77..2beb6d05 100644
--- a/packages/hightide-web/stories/data-input/date/FlexibleDateTimeInput.stories.tsx
+++ b/packages/hightide-web/stories/data-input/date/FlexibleDateTimeInput.stories.tsx
@@ -66,11 +66,11 @@ export const flexibleDateTimeInput: Story = {
           <FlexibleDateTimeInput
             {...args}
             value={value}
-            onValueChange={(next) => {
+            onValueUpdate={(next) => {
               args.onValueChange?.(next)
               setValue(next)
             }}
-            onEditComplete={(next) => {
+            onValueCommit={(next) => {
               args.onEditComplete?.(next)
               setValue(next)
             }}
diff --git a/packages/hightide-web/stories/layout/Table/FilterListTable.stories.tsx b/packages/hightide-web/stories/layout/Table/FilterListTable.stories.tsx
index 6669b98c..4ed3266d 100644
--- a/packages/hightide-web/stories/layout/Table/FilterListTable.stories.tsx
+++ b/packages/hightide-web/stories/layout/Table/FilterListTable.stories.tsx
@@ -75,7 +75,7 @@ const AgeFilterPopUp = ({ value, onValueChange, onRemove, name, onClose: close,
           <Select<[number, number]>
             triggerProps={{ id: ids.range }}
             value={parameter.numberMin !== undefined && parameter.numberMax !== undefined ? [parameter.numberMin, parameter.numberMax] : null}
-            onValueChange={(newRange) => {
+            onValueUpdate={(newRange) => {
               onValueChange({ ...value, parameter: { ...parameter, numberMin: newRange[0], numberMax: newRange[1] } })
             }}
             compareFunction={(a, b) => {
@@ -101,7 +101,7 @@ const AgeFilterPopUp = ({ value, onValueChange, onRemove, name, onClose: close,
           value={parameter.numberValue?.toString() ?? ''}
           type="number"
           placeholder="0"
-          onValueChange={text => {
+          onValueUpdate={text => {
             const num = Number(text)
             onValueChange({
               dataType: 'number',
diff --git a/packages/hightide-web/stories/properties/DateProperty.stories.tsx b/packages/hightide-web/stories/properties/DateProperty.stories.tsx
index 9cd58170..f0d87692 100644
--- a/packages/hightide-web/stories/properties/DateProperty.stories.tsx
+++ b/packages/hightide-web/stories/properties/DateProperty.stories.tsx
@@ -33,11 +33,11 @@ export const dateProperty: Story = {
       <DateProperty
         {...props}
         value={usedDate}
-        onValueChange={(date) => {
+        onValueUpdate={(date) => {
           props.onValueChange?.(date)
           setUsedDate(date)
         }}
-        onEditComplete={(date) => {
+        onValueCommit={(date) => {
           props.onEditComplete?.(date)
           setUsedDate(date)
         }}
diff --git a/packages/hightide-web/stories/visualization/process-model/ProcessModelActivityNode.stories.tsx b/packages/hightide-web/stories/visualization/process-model/ProcessModelActivityNode.stories.tsx
index 00f753c0..8590aba4 100644
--- a/packages/hightide-web/stories/visualization/process-model/ProcessModelActivityNode.stories.tsx
+++ b/packages/hightide-web/stories/visualization/process-model/ProcessModelActivityNode.stories.tsx
@@ -64,7 +64,7 @@ export const processModelActivityNode: Story = {
           <span>Example node</span>
           <Select
             value={exampleId}
-            onValueChange={setExampleId}
+            onValueUpdate={setExampleId}
           >
             {activityNodeExamples.map((item) => (
               <Select.Option key={item.id} value={item.id} label={item.optionLabel} />
diff --git a/packages/hightide-web/stories/visualization/process-model/ProcessModelCanvas.stories.tsx b/packages/hightide-web/stories/visualization/process-model/ProcessModelCanvas.stories.tsx
index b4b09d35..5109fd2a 100644
--- a/packages/hightide-web/stories/visualization/process-model/ProcessModelCanvas.stories.tsx
+++ b/packages/hightide-web/stories/visualization/process-model/ProcessModelCanvas.stories.tsx
@@ -27,7 +27,7 @@ export const processModelCanvas: Story = {
           <span>Example model</span>
           <Select
             value={modelId}
-            onValueChange={setModelId}
+            onValueUpdate={setModelId}
           >
             {processModelLibrary.map((entry) => (
               <Select.Option key={entry.id} value={entry.id} label={entry.name} />
diff --git a/packages/hightide-web/stories/visualization/process-model/ProcessModelTraceReplay.stories.tsx b/packages/hightide-web/stories/visualization/process-model/ProcessModelTraceReplay.stories.tsx
index c932c849..c97de968 100644
--- a/packages/hightide-web/stories/visualization/process-model/ProcessModelTraceReplay.stories.tsx
+++ b/packages/hightide-web/stories/visualization/process-model/ProcessModelTraceReplay.stories.tsx
@@ -28,7 +28,7 @@ export const processModelTraceReplay: Story = {
           <span>Example model</span>
           <Select
             value={modelId}
-            onValueChange={setModelId}
+            onValueUpdate={setModelId}
           >
             {processModelLibrary.map((entry) => (
               <Select.Option key={entry.id} value={entry.id} label={entry.name} />
diff --git a/packages/hightide-web/tests/input/DateTimeField.test.tsx b/packages/hightide-web/tests/input/DateTimeField.test.tsx
index bb4f4a6e..8612f70a 100644
--- a/packages/hightide-web/tests/input/DateTimeField.test.tsx
+++ b/packages/hightide-web/tests/input/DateTimeField.test.tsx
@@ -19,7 +19,7 @@ const renderField = (props?: Partial<DateTimeFieldProps>) => {
           locale="de-DE"
           {...props}
           value={value}
-          onValueChange={(next) => {
+          onValueUpdate={(next) => {
             onValueChange(next)
             setValue(next)
           }}
@@ -139,7 +139,7 @@ describe('DateTimeField', () => {
     })
     try {
       const onEditComplete = jest.fn()
-      renderField({ onEditComplete })
+      renderField({ onValueCommit: onEditComplete })
       const [day, month] = screen.getAllByRole('spinbutton')
 
       act(() => day.focus())
@@ -201,7 +201,7 @@ describe('DateTimeInput controlled value', () => {
         <DateTimeInput
           mode="date"
           value={value}
-          onValueChange={(next) => {
+          onValueUpdate={(next) => {
             onValueChange(next)
             setValue(next)
           }}
@@ -314,7 +314,7 @@ describe('DateTimeInput clear button', () => {
             required={props.required}
             allowClear={props.allowClear}
             value={value}
-            onValueChange={(next) => {
+            onValueUpdate={(next) => {
               onValueChange(next)
               setValue(next)
             }}
diff --git a/packages/hightide-web/tests/input/FlexibleDateTimeInput.test.tsx b/packages/hightide-web/tests/input/FlexibleDateTimeInput.test.tsx
index 89385aab..d32e38bf 100644
--- a/packages/hightide-web/tests/input/FlexibleDateTimeInput.test.tsx
+++ b/packages/hightide-web/tests/input/FlexibleDateTimeInput.test.tsx
@@ -17,7 +17,7 @@ const renderFlexible = (props: Partial<FlexibleDateTimeInputProps> & { defaultMo
         <FlexibleDateTimeInput
           {...props}
           value={value}
-          onValueChange={(next) => {
+          onValueUpdate={(next) => {
             onValueChange(next)
             setValue(next)
           }}