From 3e415a73411ddd3f81b2130bd2f47ab9df3645c5 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 10 Feb 2026 08:29:01 +0100
Subject: [PATCH 1/4] feat: support locale in DatePicker

---
 packages/ui/src/lib/internal/DatePicker.svelte         |  3 +++
 packages/ui/src/lib/types.ts                           |  1 +
 .../routes/components/date-picker/BasicExample.svelte  |  2 +-
 .../routes/components/date-picker/ShapeExample.svelte  |  6 +++---
 .../routes/components/date-picker/SizeExample.svelte   |  2 +-
 .../components/date-picker/ValidationExample.svelte    | 10 +++++-----
 6 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/lib/internal/DatePicker.svelte b/packages/ui/src/lib/internal/DatePicker.svelte
index 874a1875..eaaad827 100644
--- a/packages/ui/src/lib/internal/DatePicker.svelte
+++ b/packages/ui/src/lib/internal/DatePicker.svelte
@@ -13,6 +13,7 @@
   import { tv } from 'tailwind-variants';
 
   type Props = {
+    locale: string | undefined;
     onChange?: (date?: DateValue) => void;
     minDate?: DateValue;
     maxDate?: DateValue;
@@ -23,6 +24,7 @@
   };
 
   let {
+    locale,
     onChange,
     minDate,
     maxDate,
@@ -75,6 +77,7 @@
     maxValue={maxDate}
     bind:value={date}
     readonly={readOnly}
+    {locale}
     {disabled}
   >
     <DatePicker.Input
diff --git a/packages/ui/src/lib/types.ts b/packages/ui/src/lib/types.ts
index 2794fd37..9ec23c5a 100644
--- a/packages/ui/src/lib/types.ts
+++ b/packages/ui/src/lib/types.ts
@@ -310,6 +310,7 @@ export type ContextMenuProps = ContextMenuBaseProps & {
 };
 
 export type DatePickerProps = {
+  locale: string | undefined;
   onChange?: (date: DateTime | undefined) => void;
   value?: DateTime | undefined;
   minDate?: DateTime;
diff --git a/packages/ui/src/routes/components/date-picker/BasicExample.svelte b/packages/ui/src/routes/components/date-picker/BasicExample.svelte
index b567ec7d..2864d931 100644
--- a/packages/ui/src/routes/components/date-picker/BasicExample.svelte
+++ b/packages/ui/src/routes/components/date-picker/BasicExample.svelte
@@ -7,7 +7,7 @@
 
 <Stack gap={4} class="max-w-[250px]">
   <Field label="Select a date">
-    <DatePicker bind:value={selectedDate} />
+    <DatePicker bind:value={selectedDate} locale={navigator.language} />
   </Field>
   <Text>Selected date: {selectedDate?.toISODate() ?? 'undefined'}</Text>
 </Stack>
diff --git a/packages/ui/src/routes/components/date-picker/ShapeExample.svelte b/packages/ui/src/routes/components/date-picker/ShapeExample.svelte
index 2b99f59e..6dd6e4d5 100644
--- a/packages/ui/src/routes/components/date-picker/ShapeExample.svelte
+++ b/packages/ui/src/routes/components/date-picker/ShapeExample.svelte
@@ -4,12 +4,12 @@
 
 <Stack gap={4} class="max-w-[250px]">
   <Field label="Round">
-    <DatePicker shape="round" />
+    <DatePicker shape="round" locale={navigator.language} />
   </Field>
   <Field label="Semi-round">
-    <DatePicker shape="semi-round" />
+    <DatePicker shape="semi-round" locale={navigator.language} />
   </Field>
   <Field label="Rectangle">
-    <DatePicker shape="rectangle" />
+    <DatePicker shape="rectangle" locale={navigator.language} />
   </Field>
 </Stack>
diff --git a/packages/ui/src/routes/components/date-picker/SizeExample.svelte b/packages/ui/src/routes/components/date-picker/SizeExample.svelte
index 3f2e49d8..4c2732e6 100644
--- a/packages/ui/src/routes/components/date-picker/SizeExample.svelte
+++ b/packages/ui/src/routes/components/date-picker/SizeExample.svelte
@@ -7,7 +7,7 @@
   <ComponentSizes>
     {#snippet child({ size, label })}
       <Field {size} {label}>
-        <DatePicker />
+        <DatePicker locale={navigator.language} />
       </Field>
     {/snippet}
   </ComponentSizes>
diff --git a/packages/ui/src/routes/components/date-picker/ValidationExample.svelte b/packages/ui/src/routes/components/date-picker/ValidationExample.svelte
index 1b44d505..97cbc895 100644
--- a/packages/ui/src/routes/components/date-picker/ValidationExample.svelte
+++ b/packages/ui/src/routes/components/date-picker/ValidationExample.svelte
@@ -5,18 +5,18 @@
 
 <Stack gap={4} class="max-w-[250px]">
   <Field label="Required" required="indicator">
-    <DatePicker />
+    <DatePicker locale={navigator.language} />
   </Field>
   <Field label="Invalid" invalid>
-    <DatePicker />
+    <DatePicker locale={navigator.language} />
   </Field>
   <Field label="Disabled" disabled>
-    <DatePicker />
+    <DatePicker locale={navigator.language} />
   </Field>
   <Field label="Minimum date">
-    <DatePicker minDate={DateTime.now().minus({ days: 1 })} />
+    <DatePicker minDate={DateTime.now().minus({ days: 1 })} locale={navigator.language} />
   </Field>
   <Field label="Maximum date">
-    <DatePicker maxDate={DateTime.now().plus({ days: 1 })} />
+    <DatePicker maxDate={DateTime.now().plus({ days: 1 })} locale={navigator.language} />
   </Field>
 </Stack>

From 40d2cdf8b2c761a8280bce6d2d783edbfc04ef65 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 10 Feb 2026 19:04:29 +0100
Subject: [PATCH 2/4] add locale state

---
 packages/ui/src/lib/index.ts                           |  1 +
 packages/ui/src/lib/internal/DatePicker.svelte         |  5 ++---
 packages/ui/src/lib/state/locale-state.svelte.ts       |  6 ++++++
 packages/ui/src/lib/types.ts                           |  1 -
 .../routes/components/date-picker/BasicExample.svelte  |  2 +-
 .../routes/components/date-picker/ShapeExample.svelte  |  6 +++---
 .../routes/components/date-picker/SizeExample.svelte   |  2 +-
 .../components/date-picker/ValidationExample.svelte    | 10 +++++-----
 8 files changed, 19 insertions(+), 14 deletions(-)
 create mode 100644 packages/ui/src/lib/state/locale-state.svelte.ts

diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index d033584c..2181661d 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -107,6 +107,7 @@ export * from '$lib/services/modal-manager.svelte.js';
 export * from '$lib/services/theme.svelte.js';
 export * from '$lib/services/toast-manager.svelte.js';
 export * from '$lib/services/translation.svelte.js';
+export * from '$lib/state/locale-state.svelte.js';
 export * from '$lib/types.js';
 export * from '$lib/utilities/byte-units.js';
 export * from '$lib/utilities/common.js';
diff --git a/packages/ui/src/lib/internal/DatePicker.svelte b/packages/ui/src/lib/internal/DatePicker.svelte
index eaaad827..7138909f 100644
--- a/packages/ui/src/lib/internal/DatePicker.svelte
+++ b/packages/ui/src/lib/internal/DatePicker.svelte
@@ -4,6 +4,7 @@
   import IconButton from '$lib/components/IconButton/IconButton.svelte';
   import Label from '$lib/components/Label/Label.svelte';
   import { zIndex } from '$lib/constants.js';
+  import { getLocale } from '$lib/state/locale-state.svelte.js';
   import { styleVariants } from '$lib/styles.js';
   import type { Shape, Size } from '$lib/types.js';
   import { cleanClass, generateId } from '$lib/utilities/internal.js';
@@ -13,7 +14,6 @@
   import { tv } from 'tailwind-variants';
 
   type Props = {
-    locale: string | undefined;
     onChange?: (date?: DateValue) => void;
     minDate?: DateValue;
     maxDate?: DateValue;
@@ -24,7 +24,6 @@
   };
 
   let {
-    locale,
     onChange,
     minDate,
     maxDate,
@@ -77,7 +76,7 @@
     maxValue={maxDate}
     bind:value={date}
     readonly={readOnly}
-    {locale}
+    locale={getLocale()}
     {disabled}
   >
     <DatePicker.Input
diff --git a/packages/ui/src/lib/state/locale-state.svelte.ts b/packages/ui/src/lib/state/locale-state.svelte.ts
new file mode 100644
index 00000000..3721c3eb
--- /dev/null
+++ b/packages/ui/src/lib/state/locale-state.svelte.ts
@@ -0,0 +1,6 @@
+let locale = $state<string>();
+
+export const getLocale = () => locale;
+export const setLocale = (newLocale: string) => {
+  locale = newLocale;
+}
\ No newline at end of file
diff --git a/packages/ui/src/lib/types.ts b/packages/ui/src/lib/types.ts
index 9ec23c5a..2794fd37 100644
--- a/packages/ui/src/lib/types.ts
+++ b/packages/ui/src/lib/types.ts
@@ -310,7 +310,6 @@ export type ContextMenuProps = ContextMenuBaseProps & {
 };
 
 export type DatePickerProps = {
-  locale: string | undefined;
   onChange?: (date: DateTime | undefined) => void;
   value?: DateTime | undefined;
   minDate?: DateTime;
diff --git a/packages/ui/src/routes/components/date-picker/BasicExample.svelte b/packages/ui/src/routes/components/date-picker/BasicExample.svelte
index 2864d931..b567ec7d 100644
--- a/packages/ui/src/routes/components/date-picker/BasicExample.svelte
+++ b/packages/ui/src/routes/components/date-picker/BasicExample.svelte
@@ -7,7 +7,7 @@
 
 <Stack gap={4} class="max-w-[250px]">
   <Field label="Select a date">
-    <DatePicker bind:value={selectedDate} locale={navigator.language} />
+    <DatePicker bind:value={selectedDate} />
   </Field>
   <Text>Selected date: {selectedDate?.toISODate() ?? 'undefined'}</Text>
 </Stack>
diff --git a/packages/ui/src/routes/components/date-picker/ShapeExample.svelte b/packages/ui/src/routes/components/date-picker/ShapeExample.svelte
index 6dd6e4d5..2b99f59e 100644
--- a/packages/ui/src/routes/components/date-picker/ShapeExample.svelte
+++ b/packages/ui/src/routes/components/date-picker/ShapeExample.svelte
@@ -4,12 +4,12 @@
 
 <Stack gap={4} class="max-w-[250px]">
   <Field label="Round">
-    <DatePicker shape="round" locale={navigator.language} />
+    <DatePicker shape="round" />
   </Field>
   <Field label="Semi-round">
-    <DatePicker shape="semi-round" locale={navigator.language} />
+    <DatePicker shape="semi-round" />
   </Field>
   <Field label="Rectangle">
-    <DatePicker shape="rectangle" locale={navigator.language} />
+    <DatePicker shape="rectangle" />
   </Field>
 </Stack>
diff --git a/packages/ui/src/routes/components/date-picker/SizeExample.svelte b/packages/ui/src/routes/components/date-picker/SizeExample.svelte
index 4c2732e6..3f2e49d8 100644
--- a/packages/ui/src/routes/components/date-picker/SizeExample.svelte
+++ b/packages/ui/src/routes/components/date-picker/SizeExample.svelte
@@ -7,7 +7,7 @@
   <ComponentSizes>
     {#snippet child({ size, label })}
       <Field {size} {label}>
-        <DatePicker locale={navigator.language} />
+        <DatePicker />
       </Field>
     {/snippet}
   </ComponentSizes>
diff --git a/packages/ui/src/routes/components/date-picker/ValidationExample.svelte b/packages/ui/src/routes/components/date-picker/ValidationExample.svelte
index 97cbc895..1b44d505 100644
--- a/packages/ui/src/routes/components/date-picker/ValidationExample.svelte
+++ b/packages/ui/src/routes/components/date-picker/ValidationExample.svelte
@@ -5,18 +5,18 @@
 
 <Stack gap={4} class="max-w-[250px]">
   <Field label="Required" required="indicator">
-    <DatePicker locale={navigator.language} />
+    <DatePicker />
   </Field>
   <Field label="Invalid" invalid>
-    <DatePicker locale={navigator.language} />
+    <DatePicker />
   </Field>
   <Field label="Disabled" disabled>
-    <DatePicker locale={navigator.language} />
+    <DatePicker />
   </Field>
   <Field label="Minimum date">
-    <DatePicker minDate={DateTime.now().minus({ days: 1 })} locale={navigator.language} />
+    <DatePicker minDate={DateTime.now().minus({ days: 1 })} />
   </Field>
   <Field label="Maximum date">
-    <DatePicker maxDate={DateTime.now().plus({ days: 1 })} locale={navigator.language} />
+    <DatePicker maxDate={DateTime.now().plus({ days: 1 })} />
   </Field>
 </Stack>

From 75ec9da322096d5d546a93ffb4550f9a4cbdb4ac Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 10 Feb 2026 19:05:57 +0100
Subject: [PATCH 3/4] newline

---
 packages/ui/src/lib/state/locale-state.svelte.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/lib/state/locale-state.svelte.ts b/packages/ui/src/lib/state/locale-state.svelte.ts
index 3721c3eb..15e841f1 100644
--- a/packages/ui/src/lib/state/locale-state.svelte.ts
+++ b/packages/ui/src/lib/state/locale-state.svelte.ts
@@ -3,4 +3,4 @@ let locale = $state<string>();
 export const getLocale = () => locale;
 export const setLocale = (newLocale: string) => {
   locale = newLocale;
-}
\ No newline at end of file
+}

From 38b7fd2318ea9d4dad36f55cf98166ff54b0b733 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 10 Feb 2026 19:07:32 +0100
Subject: [PATCH 4/4] format

---
 packages/ui/src/lib/state/locale-state.svelte.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/lib/state/locale-state.svelte.ts b/packages/ui/src/lib/state/locale-state.svelte.ts
index 15e841f1..6e2a386b 100644
--- a/packages/ui/src/lib/state/locale-state.svelte.ts
+++ b/packages/ui/src/lib/state/locale-state.svelte.ts
@@ -3,4 +3,4 @@ let locale = $state<string>();
 export const getLocale = () => locale;
 export const setLocale = (newLocale: string) => {
   locale = newLocale;
-}
+};