From f88121d0a2bc87f071f97fb6e64fa3009ac9c934 Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Mon, 6 Jul 2026 16:40:20 +0200
Subject: [PATCH 1/3] feat: update date components

---
 CHANGELOG.md                                  | 29 +++---
 src/components/form/FieldLayout.tsx           |  8 +-
 .../user-interaction/date/DatePicker.tsx      | 88 +++++++++----------
 .../user-interaction/date/DateTimePicker.tsx  |  8 +-
 .../date/DateTimePickerDialog.tsx             | 20 +++--
 .../user-interaction/date/TimeInput.tsx       |  8 +-
 .../user-interaction/input/DateTimeInput.tsx  |  3 +-
 src/hooks/useStepperHold.ts                   |  4 +-
 src/style/theme/components/date-picker.css    | 13 +++
 .../theme/components/date-time-input.css      | 12 ++-
 .../components/date-time-picker-dialog.css    |  2 +-
 .../theme/components/date-time-picker.css     |  5 ++
 src/style/theme/components/form-field.css     |  2 +-
 src/style/theme/components/index.css          |  3 +
 src/utils/math.ts                             | 20 ++---
 .../DateTimePickerDialog.stories.tsx          | 55 ++++++++++++
 16 files changed, 189 insertions(+), 91 deletions(-)
 create mode 100644 src/style/theme/components/date-picker.css
 create mode 100644 src/style/theme/components/date-time-picker.css
 create mode 100644 stories/User Interaction/Date and Time Input/DateTimePickerDialog.stories.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 713eb740..7c365afe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,13 +5,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.14.4] - 2026-07-06
-
-### Changed
-
-- Updated readme.md
-
-## [0.14.3] - 2026-07-06
+## [0.14.5] - 2026-07-06
 
 ### Added
 
@@ -22,17 +16,30 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `DateTimeInput` popup `data-mode` attribute for mode-specific dialog sizing
 - `TabPanel` `data-in-custom-tab-view` attribute so panels skip default padding when portaled into a custom `TabView`
 - `DateTimePickerDialog` Storybook story
-- `TabSwitcher` `tabSwitcherWithTabView` Storybook story demonstrating a custom `TabView` layout
-- `Browser Compatibility/Safari` Storybook story with demos for CSS that requires WebKit prefixes (`sticky`, `user-select`, `appearance`, `touch-action`, `transform`, `::-webkit-scrollbar`)
 
 ### Changed
 
 - Date/time picker family (`DatePicker`, `DateTimePicker`, `DateTimePickerDialog`, `DayPicker`, `YearMonthPicker`, `DateTimeField`, `DateTimeInput`) migrated from `data-name` selectors to class-based CSS
-- `FormFieldLayout` migrated from `data-name` to class-based CSS (`.form-field-container`, `.form-field-label`, `.form-field-description`, `.form-field-error`)
-- `TabSwitcher` (`TabList`, `TabListItem`, `TabPanel`) migrated from `data-name` to class-based CSS
 - `DatePicker` always shows today/previous/next navigation buttons (disabled outside day view); month label uses short month format
 - `DateTimeInput` dialog popup uses a viewport-capped `min-width` and applies the wider tablet width only for `dateTime` mode
 - `FormFieldLayout` error message moved from absolute positioning to in-flow layout with padding
+
+## [0.14.4] - 2026-07-06
+
+### Changed
+
+- Updated readme.md
+
+## [0.14.3] - 2026-07-06
+
+### Added
+
+- `TabSwitcher` `tabSwitcherWithTabView` Storybook story demonstrating a custom `TabView` layout
+- `Browser Compatibility/Safari` Storybook story with demos for CSS that requires WebKit prefixes (`sticky`, `user-select`, `appearance`, `touch-action`, `transform`, `::-webkit-scrollbar`)
+
+### Changed
+
+- `TabSwitcher` (`TabList`, `TabListItem`, `TabPanel`) migrated from `data-name` to class-based CSS
 - `TabPanel` default padding only applied when not rendered inside a custom `TabView`
 - `TimeInput` layout no longer wraps stepper segments
 - `NumberStepperInput` increment/decrement buttons use `tabIndex={-1}`
diff --git a/src/components/form/FieldLayout.tsx b/src/components/form/FieldLayout.tsx
index d1e34795..91ff86e9 100644
--- a/src/components/form/FieldLayout.tsx
+++ b/src/components/form/FieldLayout.tsx
@@ -92,14 +92,14 @@ export const FormFieldLayout = forwardRef<HTMLDivElement, FormFieldLayoutProps>(
       {...props}
       ref={ref}
 
-      data-name={props['data-name'] ?? 'form-field-container'}
+      data-name="form-field-container"
     >
       {label && (
         <label
           {...labelProps}
           id={ids.label}
           htmlFor={ids.input}
-          data-name={labelProps?.['data-name'] ?? 'form-field-label'}
+          data-name="form-field-label"
         >
           {label}
           {showRequiredIndicator && required && <div role="none" className="bg-primary w-2 h-2 rounded-full" />}
@@ -110,7 +110,7 @@ export const FormFieldLayout = forwardRef<HTMLDivElement, FormFieldLayoutProps>(
           {...descriptionProps}
           id={ids.description}
 
-          data-name={descriptionProps?.['data-name'] ?? 'form-field-description'}
+          data-name="form-field-description"
         >
           {description}
         </p>
@@ -125,7 +125,7 @@ export const FormFieldLayout = forwardRef<HTMLDivElement, FormFieldLayoutProps>(
           aria-hidden={!invalid}
           aria-live="polite"
 
-          data-name={invalidDescriptionProps?.['data-name'] ?? 'form-field-error'}
+          data-name="form-field-error"
         >
           {invalidDescription}
         </div>
diff --git a/src/components/user-interaction/date/DatePicker.tsx b/src/components/user-interaction/date/DatePicker.tsx
index 4fe8fd59..24dcc119 100644
--- a/src/components/user-interaction/date/DatePicker.tsx
+++ b/src/components/user-interaction/date/DatePicker.tsx
@@ -53,57 +53,55 @@ export const DatePicker = ({
   const [displayedMonth, setDisplayedMonth] = useState<Date>(new Date(value.getFullYear(), value.getMonth(), 1))
   const [displayMode, setDisplayMode] = useState<DisplayMode>(initialDisplay)
 
+  const isDayMode = displayMode === 'day'
+
   return (
-    <div className={clsx('flex-col-3', className)}>
-      <div className="flex-row-2 items-center justify-between">
+    <div className={clsx('date-picker', className)}>
+      <div className="date-picker-header">
         <Button
           size="sm"
           color="neutral"
-          className={clsx('flex-row-1 items-center cursor-pointer select-none', {
-            'text-disabled': displayMode !== 'day',
-          })}
           onClick={() => setDisplayMode(displayMode === 'day' ? 'yearMonth' : 'day')}
         >
-          {`${new Intl.DateTimeFormat(LocalizationUtil.localToLanguage(locale), { month: 'long' }).format(displayedMonth)} ${displayedMonth.getFullYear()}`}
+          {`${new Intl.DateTimeFormat(LocalizationUtil.localToLanguage(locale), { month: 'short' }).format(displayedMonth)} ${displayedMonth.getFullYear()}`}
           <ChevronDown size={16}/>
         </Button>
-        {displayMode === 'day' && (
-          <div className="flex-row-2 justify-end">
-            <IconButton
-              tooltip={translation('time.today')}
-              size="sm"
-              coloringStyle="tonal"
-              onClick={() => {
-                const newDate = new Date()
-                newDate.setHours(value.getHours(), value.getMinutes())
-                setValue(newDate)
-                setDisplayedMonth(newDate)
-              }}
-            >
-              <Calendar className="size-5"/>
-            </IconButton>
-            <IconButton
-              tooltip={translation('time.previousMonth')}
-              size="sm"
-              disabled={!DateUtils.between(DateUtils.subtractDuration(displayedMonth, { months: 1 }), start, end)}
-              onClick={() => {
-                setDisplayedMonth(DateUtils.subtractDuration(displayedMonth, { months: 1 }))
-              }}
-            >
-              <ArrowUp size={20}/>
-            </IconButton>
-            <IconButton
-              tooltip={translation('time.nextMonth')}
-              size="sm"
-              disabled={!DateUtils.between(DateUtils.addDuration(displayedMonth, { months: 1 }), start, end)}
-              onClick={() => {
-                setDisplayedMonth(DateUtils.addDuration(displayedMonth, { months: 1 }))
-              }}
-            >
-              <ArrowDown size={20}/>
-            </IconButton>
-          </div>
-        )}
+        <div className="flex-row-2 justify-end">
+          <IconButton
+            tooltip={translation('time.today')}
+            size="sm"
+            coloringStyle="tonal"
+            disabled={!isDayMode}
+            onClick={() => {
+              const newDate = new Date()
+              newDate.setHours(value.getHours(), value.getMinutes())
+              setValue(newDate)
+              setDisplayedMonth(newDate)
+            }}
+          >
+            <Calendar className="size-5"/>
+          </IconButton>
+          <IconButton
+            tooltip={translation('time.previousMonth')}
+            size="sm"
+            disabled={!isDayMode || !DateUtils.between(DateUtils.subtractDuration(displayedMonth, { months: 1 }), start, end)}
+            onClick={() => {
+              setDisplayedMonth(DateUtils.subtractDuration(displayedMonth, { months: 1 }))
+            }}
+          >
+            <ArrowUp size={20}/>
+          </IconButton>
+          <IconButton
+            tooltip={translation('time.nextMonth')}
+            size="sm"
+            disabled={!isDayMode || !DateUtils.between(DateUtils.addDuration(displayedMonth, { months: 1 }), start, end)}
+            onClick={() => {
+              setDisplayedMonth(DateUtils.addDuration(displayedMonth, { months: 1 }))
+            }}
+          >
+            <ArrowDown size={20}/>
+          </IconButton>
+        </div>
       </div>
       {displayMode === 'yearMonth' ? (
         <YearMonthPicker
@@ -119,7 +117,7 @@ export const DatePicker = ({
             setDisplayedMonth(newDate)
             setDisplayMode('day')
           }}
-          className="h-60 max-h-60"
+          className="date-picker-content"
         />
       ) : (
         <DayPicker
@@ -132,7 +130,7 @@ export const DatePicker = ({
           weekStart={weekStart}
           onValueChange={setValue}
           onEditComplete={onEditComplete}
-          className="h-60 max-h-60"
+          className="date-picker-content"
         />
       )}
     </div>
diff --git a/src/components/user-interaction/date/DateTimePicker.tsx b/src/components/user-interaction/date/DateTimePicker.tsx
index f2c5300d..20e62315 100644
--- a/src/components/user-interaction/date/DateTimePicker.tsx
+++ b/src/components/user-interaction/date/DateTimePicker.tsx
@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'react'
 import { type ReactNode } from 'react'
 import type { DateTimeFormat } from '@/src/utils/date'
 import type { TimeInputProps } from './TimeInput'
@@ -6,8 +7,10 @@ import type { DatePickerProps } from './DatePicker'
 import { DatePicker } from './DatePicker'
 import type { FormFieldDataHandling } from '../../form/FormField'
 import { useControlledState } from '@/src/hooks/useControlledState'
+import clsx from 'clsx'
 
 export interface DateTimePickerProps extends
+HTMLAttributes<HTMLDivElement>,
 Partial<FormFieldDataHandling<Date>>,
 Pick<DatePickerProps, 'start' | 'end' | 'weekStart' | 'markToday'>,
 Pick<TimeInputProps, 'is24HourFormat' | 'minuteIncrement' | 'secondIncrement' | 'millisecondIncrement' | 'precision'>
@@ -37,6 +40,7 @@ export const DateTimePicker = ({
   onEditComplete,
   timeInputProps,
   datePickerProps,
+  ...props
 }: DateTimePickerProps) => {
   const useDate = mode === 'dateTime' || mode === 'date'
   const useTime = mode === 'dateTime' || mode === 'time'
@@ -52,8 +56,6 @@ export const DateTimePicker = ({
     dateDisplay = (
       <DatePicker
         {...datePickerProps}
-        className="min-w-80"
-        yearMonthPickerProps={{ className: 'h-full grow' }}
         start={start}
         end={end}
         weekStart={weekStart}
@@ -80,7 +82,7 @@ export const DateTimePicker = ({
   }
 
   return (
-    <div className="flex-col-2 min-h-71 max-h-71">
+    <div {...props} className={clsx('date-time-picker', props.className)} data-mode={mode}>
       {dateDisplay}
       {timeDisplay}
     </div>
diff --git a/src/components/user-interaction/date/DateTimePickerDialog.tsx b/src/components/user-interaction/date/DateTimePickerDialog.tsx
index 7aef86aa..a36ec1ae 100644
--- a/src/components/user-interaction/date/DateTimePickerDialog.tsx
+++ b/src/components/user-interaction/date/DateTimePickerDialog.tsx
@@ -1,13 +1,16 @@
 import { useControlledState } from '@/src/hooks/useControlledState'
 import { useHightideTranslation } from '@/src/i18n/useHightideTranslation'
 import { DateTimePicker, type DateTimePickerProps } from '@/src/components/user-interaction/date/DateTimePicker'
+import type { HTMLAttributes } from 'react'
 import { useEffect, useState, type ReactNode } from 'react'
 import { Visibility } from '@/src/components/layout/Visibility'
 import { Button } from '@/src/components/user-interaction/Button'
 import type { FormFieldDataHandling } from '@/src/components/form/FormField'
 import type { DateTimeFormat } from '@/src/utils/date'
+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'>
 {
@@ -38,6 +41,7 @@ export const DateTimePickerDialog = ({
   precision,
   labelId,
   label,
+  ...props
 }: DateTimePickerDialogProps) => {
   const translation = useHightideTranslation()
   const [state, setState] = useControlledState({
@@ -53,11 +57,11 @@ export const DateTimePickerDialog = ({
   }, [state])
 
   return (
-    <>
-      <div className="flex-row-2 justify-center w-full py-1">
+    <div {...props} className={clsx('date-time-picker-dialog', props?.className)}>
+      <div className="date-time-picker-dialog-header">
         <span
           id={labelId}
-          className="typography-title-md font-semibold"
+          className="date-time-picker-dialog-label"
         >
           {label ?? translation('sDateTimeSelect', { datetimeMode: mode })}
         </span>
@@ -78,7 +82,7 @@ export const DateTimePickerDialog = ({
         millisecondIncrement={millisecondIncrement}
         precision={precision}
       />
-      <div className="flex-row-2 justify-end">
+      <div className="date-time-picker-dialog-actions">
         <Visibility isVisible={allowRemove && !!state}>
           <Button
             size="md"
@@ -87,7 +91,7 @@ export const DateTimePickerDialog = ({
               setState(null)
               onEditComplete?.(null)
             }}
-            className="min-w-26"
+            className="date-time-picker-dialog-action"
           >
             {translation('clear')}
           </Button>
@@ -100,7 +104,7 @@ export const DateTimePickerDialog = ({
               setState(state)
               onEditComplete?.(state)
             }}
-            className="min-w-26"
+            className="date-time-picker-dialog-action"
           >
             {translation('cancel')}
           </Button>
@@ -110,11 +114,11 @@ export const DateTimePickerDialog = ({
           onClick={() => {
             onEditComplete?.(pickerState)
           }}
-          className="min-w-26"
+          className="date-time-picker-dialog-action"
         >
           {translation('done')}
         </Button>
       </div>
-    </>
+    </div>
   )
 }
\ No newline at end of file
diff --git a/src/components/user-interaction/date/TimeInput.tsx b/src/components/user-interaction/date/TimeInput.tsx
index 85790660..a935467d 100644
--- a/src/components/user-interaction/date/TimeInput.tsx
+++ b/src/components/user-interaction/date/TimeInput.tsx
@@ -163,7 +163,7 @@ export const TimeInput = ({
     <div data-name="time-input" className={clsx('time-input', className)}>
       <NumberStepperInput
         layout="col"
-        looping={true}
+        looping={allowLooping}
         approximateMaxCharacters={2}
         minimum={is24HourFormat ? 0 : 1}
         maximum={allowLooping ?
@@ -180,7 +180,7 @@ export const TimeInput = ({
       <span className="time-input-separator">:</span>
       <NumberStepperInput
         layout="col"
-        looping={true}
+        looping={allowLooping}
         approximateMaxCharacters={2}
         minimum={0}
         maximum={59}
@@ -197,7 +197,7 @@ export const TimeInput = ({
         <span className="time-input-separator">:</span>
         <NumberStepperInput
           layout="col"
-          looping={true}
+          looping={allowLooping}
           approximateMaxCharacters={2}
           minimum={0}
           maximum={59}
@@ -214,7 +214,7 @@ export const TimeInput = ({
         <span className="time-input-separator">.</span>
         <NumberStepperInput
           layout="col"
-          looping={true}
+          looping={allowLooping}
           approximateMaxCharacters={3}
           minimum={0}
           maximum={999}
diff --git a/src/components/user-interaction/input/DateTimeInput.tsx b/src/components/user-interaction/input/DateTimeInput.tsx
index 4da5fed6..af3f6037 100644
--- a/src/components/user-interaction/input/DateTimeInput.tsx
+++ b/src/components/user-interaction/input/DateTimeInput.tsx
@@ -216,7 +216,7 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
             onEditComplete?.(absolute)
             changeOpenWrapper(false)
           }}
-          pickerProps={pickerProps}
+          pickerProps={{ ...(pickerProps ?? {}), className: 'date-time-input-date-time-picker' }}
           mode={mode}
           start={toZoned(start ?? null) ?? undefined}
           end={toZoned(end ?? null) ?? undefined}
@@ -227,6 +227,7 @@ export const DateTimeInput = forwardRef<HTMLDivElement, DateTimeInputProps>(func
           secondIncrement={secondIncrement}
           millisecondIncrement={millisecondIncrement}
           precision={precision}
+          className="date-time-input-dialog"
         />
       </PopUp>
     </div>
diff --git a/src/hooks/useStepperHold.ts b/src/hooks/useStepperHold.ts
index c6f21c75..6b3f39e7 100644
--- a/src/hooks/useStepperHold.ts
+++ b/src/hooks/useStepperHold.ts
@@ -127,14 +127,14 @@ export function useStepperHold({
         holdState.value = minimum
         shouldStop = true
       }
-      result = MathUtil.toModulo(holdState.value, stepSize, minimum, maximum)
+      result = MathUtil.toStepRange(holdState.value, stepSize, minimum, maximum)
     } else {
       if(minimum !== undefined && maximum !== undefined) {
         loopingRangeResult = MathUtil.resolveLoopingRangeValue(holdState.value, minimum, maximum)
       } else {
         loopingRangeResult = { value: MathUtil.clamp(holdState.value, minimum, maximum), loopedOver: null }
       }
-      loopingRangeResult.value = MathUtil.toModulo(loopingRangeResult.value, stepSize, minimum, maximum)
+      loopingRangeResult.value = MathUtil.toStepRange(loopingRangeResult.value, stepSize, minimum, maximum)
       result = loopingRangeResult.value
     }
 
diff --git a/src/style/theme/components/date-picker.css b/src/style/theme/components/date-picker.css
new file mode 100644
index 00000000..db7afb48
--- /dev/null
+++ b/src/style/theme/components/date-picker.css
@@ -0,0 +1,13 @@
+@layer components {
+  .date-picker {
+    @apply flex-col-3 grow;
+  }
+
+  .date-picker-content {
+    @apply h-60 max-h-60;
+  }
+
+  .date-picker-header {
+    @apply flex-row-2 items-center justify-between;
+  }
+}
diff --git a/src/style/theme/components/date-time-input.css b/src/style/theme/components/date-time-input.css
index ccaef0df..1496a359 100644
--- a/src/style/theme/components/date-time-input.css
+++ b/src/style/theme/components/date-time-input.css
@@ -33,11 +33,21 @@
   }
 
   .date-time-input-dialog-popup {
-    @apply p-2 min-w-96;
+    @apply flex-col-0 min-w-96;
     min-width: calc(min(100vw - 4 * var(--spacing), 96 * var(--spacing)));
 
     &[data-mode="dateTime"] {
       @apply tablet:min-w-180;
     }
   }
+
+  .date-time-input-date-time-picker {
+    &[data-mode="dateTime"] {
+      @apply tablet:flex-row-6;
+    }
+  }
+
+  .date-time-input-dialog {
+    @apply p-2 h-full overflow-y-auto;
+  }
 }
diff --git a/src/style/theme/components/date-time-picker-dialog.css b/src/style/theme/components/date-time-picker-dialog.css
index b75a4a38..386fe92f 100644
--- a/src/style/theme/components/date-time-picker-dialog.css
+++ b/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;
+    @apply flex-col-2 w-full overflow-y-auto p-2;
     container-type: inline-size;
     container-name: date-time-picker-dialog;
   }
diff --git a/src/style/theme/components/date-time-picker.css b/src/style/theme/components/date-time-picker.css
new file mode 100644
index 00000000..24a66d36
--- /dev/null
+++ b/src/style/theme/components/date-time-picker.css
@@ -0,0 +1,5 @@
+@layer components {
+  .date-time-picker {
+    @apply flex-col-3;
+  }
+}
diff --git a/src/style/theme/components/form-field.css b/src/style/theme/components/form-field.css
index a9d8ae66..324f541e 100644
--- a/src/style/theme/components/form-field.css
+++ b/src/style/theme/components/form-field.css
@@ -8,7 +8,7 @@
   }
 
   [data-name="form-field-error"] {
-    @apply absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium;
+    @apply p-1 text-negative text-sm font-medium;
   }
 
   [data-name="form-field-label"] {
diff --git a/src/style/theme/components/index.css b/src/style/theme/components/index.css
index 5a56cc5d..4fdb1d9f 100644
--- a/src/style/theme/components/index.css
+++ b/src/style/theme/components/index.css
@@ -35,3 +35,6 @@
 @import "./vertical-navigation.css";
 @import "./app-page.css";
 @import "./searchbar.css";
+@import "./date-time-picker-dialog.css";
+@import "./date-time-picker.css";
+@import "./date-picker.css";
diff --git a/src/utils/math.ts b/src/utils/math.ts
index 4ce2ca40..d3c26b15 100644
--- a/src/utils/math.ts
+++ b/src/utils/math.ts
@@ -19,16 +19,16 @@ function clamp01(value: number): number {
   return clamp(value, 0, 1)
 }
 
-function closestModulo(value: number, modulo: number): number {
-  return Math.round(value / modulo) * modulo
+function closestStep(value: number, stepSize: number): number {
+  return Math.round(value / stepSize) * stepSize
 }
 
-function toModulo(value: number, modulo: number, min: number | undefined, max: number | undefined): number {
-  const minModulo = min !== undefined ? Math.ceil(min / modulo) * modulo : undefined
-  const maxModulo = max !== undefined ? Math.floor(max / modulo) * modulo : undefined
-  value = closestModulo(value, modulo)
-  if(minModulo !== undefined) value = Math.max(value, minModulo)
-  if(maxModulo !== undefined) value = Math.min(value, maxModulo)
+function toStepRange(value: number, stepSize: number, min: number | undefined, max: number | undefined): number {
+  const minStep = min !== undefined ? Math.ceil(min / stepSize) * stepSize : undefined
+  const maxStep = max !== undefined ? Math.floor(max / stepSize) * stepSize : undefined
+  value = closestStep(value, stepSize)
+  if(minStep !== undefined) value = Math.max(value, minStep)
+  if(maxStep !== undefined) value = Math.min(value, maxStep)
   return value
 }
 
@@ -62,7 +62,7 @@ function resolveLoopingRangeValue(
 export const MathUtil = {
   clamp,
   clamp01,
-  toModulo,
-  closestModulo,
+  toStepRange,
+  closestStep,
   resolveLoopingRangeValue,
 }
diff --git a/stories/User Interaction/Date and Time Input/DateTimePickerDialog.stories.tsx b/stories/User Interaction/Date and Time Input/DateTimePickerDialog.stories.tsx
new file mode 100644
index 00000000..2fc06a6a
--- /dev/null
+++ b/stories/User Interaction/Date and Time Input/DateTimePickerDialog.stories.tsx	
@@ -0,0 +1,55 @@
+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 { DateUtils } from '@/src/utils/date'
+
+const meta: Meta<typeof DateTimePickerDialog> = {
+  component: DateTimePickerDialog,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const dateTimePickerDialog: Story = {
+  args: {
+    mode: 'dateTime',
+    initialValue: new Date(),
+    allowRemove: true,
+    start: DateUtils.subtractDuration(new Date(), { years: 50 }),
+    end: DateUtils.addDuration(new Date(), { years: 50 }),
+    weekStart: 'monday',
+    markToday: true,
+    is24HourFormat: true,
+    precision: 'minute',
+    minuteIncrement: '5min',
+    secondIncrement: '1s',
+    millisecondIncrement: '100ms',
+    onValueChange: action('onValueChange'),
+    onEditComplete: action('onEditComplete'),
+  },
+  render: ({ initialValue, ...args }) => {
+    const [value, setValue] = useState<Date | null>(initialValue ?? null)
+
+    useEffect(() => {
+      setValue(initialValue ?? null)
+    }, [initialValue])
+
+    return (
+      <div className="date-time-input-dialog-popup" data-mode={args.mode}>
+        <DateTimePickerDialog
+          {...args}
+          value={value}
+          onValueChange={(next) => {
+            args.onValueChange?.(next)
+            setValue(next)
+          }}
+          onEditComplete={(next) => {
+            args.onEditComplete?.(next)
+            setValue(next)
+          }}
+        />
+      </div>
+    )
+  },
+}

From a8d42b97b0a20e2a27286e67d927c1389593957b Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Mon, 6 Jul 2026 16:44:22 +0200
Subject: [PATCH 2/3] chore: bump package version

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

diff --git a/package.json b/package.json
index cdb44517..c3d2ba0f 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "MPL-2.0",
-  "version": "0.14.4",
+  "version": "0.14.5",
   "browserslist": [
     "> 0.2%",
     "last 3 versions",

From 3a6d7abe2ac98bec53fd951c55d6d97a0dc312cd Mon Sep 17 00:00:00 2001
From: Felix Thape <67233923+DasProffi@users.noreply.github.com>
Date: Mon, 6 Jul 2026 17:16:55 +0200
Subject: [PATCH 3/3] fix: fix flaky test

---
 CHANGELOG.md                                  |  5 ++++
 locales/de-DE.arb                             |  2 +-
 locales/en-US.arb                             |  2 +-
 src/components/layout/table/TableProvider.tsx |  8 ++++++-
 tests/utils/math.test.ts                      | 24 +++++++++----------
 5 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c365afe..fdcf00d1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,11 @@ and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - `DateTimeInput` dialog popup uses a viewport-capped `min-width` and applies the wider tablet width only for `dateTime` mode
 - `FormFieldLayout` error message moved from absolute positioning to in-flow layout with padding
 
+### Fixed
+
+- `TableProvider`'s `computeWidth` method not checking whether a float was parsed correctly
+- Add missing enum value "time" to the translation for key `sDateTimeSelect`
+
 ## [0.14.4] - 2026-07-06
 
 ### Changed
diff --git a/locales/de-DE.arb b/locales/de-DE.arb
index b705f9d2..7763c813 100644
--- a/locales/de-DE.arb
+++ b/locales/de-DE.arb
@@ -195,7 +195,7 @@
       "theme": {}
     }
   },
-  "sDateTimeSelect": "{datetimeMode, select, date{Datum auswählen} dateTime{Datum und Uhrzeit auswählen}}",
+  "sDateTimeSelect": "{datetimeMode, select, time{Zeit auswählen} date{Datum auswählen} dateTime{Datum und Uhrzeit auswählen}}",
   "@sDateTimeSelect": {
     "placeholders": {
       "datetimeMode": {}
diff --git a/locales/en-US.arb b/locales/en-US.arb
index b0c5c9fb..bbb4a7e2 100644
--- a/locales/en-US.arb
+++ b/locales/en-US.arb
@@ -196,7 +196,7 @@
       "theme": {}
     }
   },
-  "sDateTimeSelect": "{datetimeMode, select, date{Select Date} dateTime{Select Date and Time}}",
+  "sDateTimeSelect": "{datetimeMode, select, time{Select Time} date{Select Date} dateTime{Select Date and Time}}",
   "@sDateTimeSelect": {
     "placeholders": {
       "datetimeMode": {}
diff --git a/src/components/layout/table/TableProvider.tsx b/src/components/layout/table/TableProvider.tsx
index b6e5a83b..2a2e8606 100644
--- a/src/components/layout/table/TableProvider.tsx
+++ b/src/components/layout/table/TableProvider.tsx
@@ -84,13 +84,19 @@ export const TableProvider = <T,>({
 
     if(width === undefined || !el) return width
     const styles = getComputedStyle(el)
-    width = width - parseFloat(styles.borderLeftWidth) - parseFloat(styles.borderRightWidth)
+    let leftBorderWidth = parseFloat(styles.borderLeftWidth)
+    if(isNaN(leftBorderWidth)) leftBorderWidth = 0
+    let rightBorderWidth = parseFloat(styles.borderRightWidth)
+    if(isNaN(rightBorderWidth)) rightBorderWidth = 0
+    width = width - leftBorderWidth - rightBorderWidth
     return Math.floor(width)
   }, [containerRef])
+
   useLayoutEffect(() => {
     if(!negotiatesWidths) return
     setTargetWidth(computeWidth())
   }, [computeWidth, negotiatesWidths])
+
   useWindowResizeObserver(useCallback(() => {
     if(!negotiatesWidths) return
     setTargetWidth(computeWidth())
diff --git a/tests/utils/math.test.ts b/tests/utils/math.test.ts
index b981adf4..6fcf74a8 100644
--- a/tests/utils/math.test.ts
+++ b/tests/utils/math.test.ts
@@ -31,26 +31,26 @@ describe('MathUtil', () => {
     })
   })
 
-  describe('closestModulo', () => {
+  describe('closestStep', () => {
     test('returns value unchanged when already aligned to modulo', () => {
-      expect(MathUtil.closestModulo(10, 5)).toBe(10)
-      expect(MathUtil.closestModulo(0, 5)).toBe(0)
+      expect(MathUtil.closestStep(10, 5)).toBe(10)
+      expect(MathUtil.closestStep(0, 5)).toBe(0)
     })
 
-    test('rounds to nearest multiple of modulo', () => {
-      expect(MathUtil.closestModulo(7, 5)).toBe(5)
-      expect(MathUtil.closestModulo(8, 5)).toBe(10)
-      expect(MathUtil.closestModulo(2, 5)).toBe(0)
+    test('rounds to nearest step', () => {
+      expect(MathUtil.closestStep(7, 5)).toBe(5)
+      expect(MathUtil.closestStep(8, 5)).toBe(10)
+      expect(MathUtil.closestStep(2, 5)).toBe(0)
     })
 
-    test('supports fractional modulo', () => {
-      expect(MathUtil.closestModulo(1.3, 0.5)).toBe(1.5)
-      expect(MathUtil.closestModulo(1.1, 0.5)).toBe(1)
+    test('supports fractional step sizes', () => {
+      expect(MathUtil.closestStep(1.3, 0.5)).toBe(1.5)
+      expect(MathUtil.closestStep(1.1, 0.5)).toBe(1)
     })
 
     test('rounds negative values to nearest multiple', () => {
-      expect(MathUtil.closestModulo(-7, 5)).toBe(-5)
-      expect(MathUtil.closestModulo(-8, 5)).toBe(-10)
+      expect(MathUtil.closestStep(-7, 5)).toBe(-5)
+      expect(MathUtil.closestStep(-8, 5)).toBe(-10)
     })
   })