@r2digisolutions/components 0.8.3 → 0.8.4

package/dist/components/molecules/Calendar/Calendar.svelte

@@ -29,6 +29,8 @@
 		dots?: CalendarDot[];
 		/** Show border/shadow chrome. */
 		framed?: boolean;
+		/** BCP 47 locale for weekday and month names. */
+		locale?: string;
 		class?: string;
 		onchange?: (detail: {
 			mode: CalendarMode;
@@ -52,6 +54,7 @@
 		enabledDates,
 		dots = [],
 		framed = true,
+		locale = 'en',
 		class: className = '',
 		onchange
 	}: CalendarProps = $props();
@@ -64,9 +67,15 @@
 	/** Which month column owns the month/year picker when months=2. */
 	let pickerOffset = $state(0);
 
-	const weekDays = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-	const monthNames = Array.from({ length: 12 }, (_, i) =>
-		new Date(2000, i, 1).toLocaleString('en', { month: 'short' })
+	const weekDays = $derived(
+		Array.from({ length: 7 }, (_, i) =>
+			new Date(2024, 0, 1 + i).toLocaleDateString(locale, { weekday: 'short' })
+		)
+	);
+	const monthNames = $derived(
+		Array.from({ length: 12 }, (_, i) =>
+			new Date(2000, i, 1).toLocaleString(locale, { month: 'short' })
+		)
 	);
 
 	const viewYear = $derived(view.getFullYear());

package/dist/components/molecules/Calendar/Calendar.svelte.d.ts

@@ -27,6 +27,8 @@ interface CalendarProps {
     dots?: CalendarDot[];
     /** Show border/shadow chrome. */
     framed?: boolean;
+    /** BCP 47 locale for weekday and month names. */
+    locale?: string;
     class?: string;
     onchange?: (detail: {
         mode: CalendarMode;

package/dist/components/molecules/DatePicker/DatePicker.svelte

@@ -3,6 +3,8 @@
 		type CalendarDot,
 		type CalendarMode
 	} from '../Calendar/Calendar.svelte';
+	import { i18n } from '../../../utils/i18n.svelte.js';
+	import { resolveLocaleTag } from '../../../utils/i18n.js';
 
 	export type DatePickerPlacement =
 		| 'auto'
@@ -43,6 +45,8 @@
 		 * alignment from available viewport space.
 		 */
 		placement?: DatePickerPlacement;
+		/** BCP 47 locale for displayed dates. Defaults to the components i18n locale. */
+		locale?: string;
 		class?: string;
 		onchange?: (detail: {
 			mode: CalendarMode;
@@ -76,10 +80,13 @@
 		variant = 'field',
 		closeOnSelect = true,
 		placement = 'auto',
+		locale,
 		class: className = '',
 		onchange
 	}: DatePickerProps = $props();
 
+	const dateLocale = $derived(locale || resolveLocaleTag(i18n.locale));
+
 	let rootEl = $state<HTMLDivElement | null>(null);
 	let panelEl = $state<HTMLDivElement | null>(null);
 	let activeField = $state<'start' | 'end' | 'value'>('value');
@@ -92,9 +99,9 @@
 		if (!iso) return '';
 		const [y, m, d] = iso.split('-').map(Number);
 		const date = new Date(y, m - 1, d);
-		return date.toLocaleDateString('en', {
-			month: 'short',
+		return date.toLocaleDateString(dateLocale, {
 			day: 'numeric',
+			month: 'short',
 			year: 'numeric'
 		});
 	}
@@ -277,7 +284,11 @@
 <div
 	class={[
 		'relative',
-		months === 2 ? 'w-full max-w-xl' : 'w-full min-w-[18rem] max-w-[20rem]',
+		variant === 'split'
+			? 'w-full'
+			: months === 2
+				? 'w-full max-w-xl'
+				: 'w-full min-w-[18rem] max-w-[20rem]',
 		className
 	]}
 	bind:this={rootEl}
@@ -330,7 +341,7 @@
 					type="button"
 					onclick={clear}
 					class="px-3 text-muted hover:text-primary"
-					aria-label="Clear dates"
+					aria-label={i18n.t('clearAll')}
 				>
 					<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -409,6 +420,7 @@
 					{enabledDates}
 					{dots}
 					framed={false}
+					locale={dateLocale}
 					onchange={handleChange}
 				/>
 			{:else if mode === 'multiple'}
@@ -422,6 +434,7 @@
 					{enabledDates}
 					{dots}
 					framed={false}
+					locale={dateLocale}
 					onchange={handleChange}
 				/>
 			{:else}
@@ -436,6 +449,7 @@
 					{enabledDates}
 					{dots}
 					framed={false}
+					locale={dateLocale}
 					onchange={handleChange}
 				/>
 			{/if}

package/dist/components/molecules/DatePicker/DatePicker.svelte.d.ts

@@ -30,6 +30,8 @@ interface DatePickerProps {
      * alignment from available viewport space.
      */
     placement?: DatePickerPlacement;
+    /** BCP 47 locale for displayed dates. Defaults to the components i18n locale. */
+    locale?: string;
     class?: string;
     onchange?: (detail: {
         mode: CalendarMode;

package/dist/components/molecules/DateRangePicker/DateRangePicker.svelte

@@ -23,6 +23,7 @@
 		variant?: 'field' | 'split';
 		closeOnSelect?: boolean;
 		placement?: DatePickerPlacement;
+		locale?: string;
 		class?: string;
 		onchange?: (detail: { start: string; end: string }) => void;
 	}
@@ -47,6 +48,7 @@
 		variant = 'split',
 		closeOnSelect = true,
 		placement = 'auto',
+		locale,
 		class: className = '',
 		onchange
 	}: DateRangePickerProps = $props();
@@ -73,6 +75,7 @@
 	{variant}
 	{closeOnSelect}
 	{placement}
+	{locale}
 	class={className}
 	onchange={(detail) => onchange?.({ start: detail.start, end: detail.end })}
 />

package/dist/components/molecules/DateRangePicker/DateRangePicker.svelte.d.ts

@@ -21,6 +21,7 @@ interface DateRangePickerProps {
     variant?: 'field' | 'split';
     closeOnSelect?: boolean;
     placement?: DatePickerPlacement;
+    locale?: string;
     class?: string;
     onchange?: (detail: {
         start: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.8.3",
+	"version": "0.8.4",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",