@14ch/svelte-ui 0.0.13 → 0.0.14

package/dist/assets/styles/variables.scss

@@ -610,8 +610,8 @@
 	/* Drawer */
 	--svelte-ui-drawer-gap: 16px;
 	--svelte-ui-drawer-gap-sm: 8px;
-	--svelte-ui-drawer-padding: 16px 24px;
-	--svelte-ui-drawer-body-padding: 24px;
+	--svelte-ui-drawer-header-padding: 16px 24px;
+	--svelte-ui-drawer-body-padding: 0;
 	--svelte-ui-drawer-header-height: 56px;
 	--svelte-ui-drawer-title-font-size: 1.4rem;
 	--svelte-ui-drawer-description-font-size: 0.875rem;

package/dist/components/Button.svelte

@@ -10,7 +10,8 @@
 		MouseHandler,
 		TouchHandler,
 		PointerHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
+	import type { ButtonVariant, ButtonSize } from '../types/propOptions';
 	import Icon from './Icon.svelte';
 	import LoadingSpinner from './LoadingSpinner.svelte';
 	import { getStyleFromNumber } from '../utils/style';
@@ -29,10 +30,11 @@
 
 		// スタイル/レイアウト
 		customStyle?: HTMLButtonAttributes['style'];
-		variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
-		size?: 'small' | 'medium' | 'large';
+		variant?: ButtonVariant;
+		size?: ButtonSize;
 		color?: string;
 		fullWidth?: boolean;
+		align?: 'left' | 'center' | 'right';
 		minWidth?: string | number;
 		rounded?: boolean;
 		popup?: boolean;
@@ -107,6 +109,7 @@
 		size = 'medium',
 		color,
 		fullWidth = false,
+		align = 'center',
 		minWidth = 0,
 		rounded = false,
 		popup = false,
@@ -310,6 +313,7 @@
 			popup && 'button--popup',
 			rounded && 'button--rounded',
 			fullWidth && 'button--full-width',
+			`button--align-${align}`,
 			loading && 'button--loading',
 			reducedMotion && 'button--no-motion'
 		]
@@ -453,6 +457,14 @@
 		width: 100%;
 	}
 
+	.button--align-left {
+		justify-content: flex-start;
+	}
+
+	.button--align-right {
+		justify-content: flex-end;
+	}
+
 	.button--rounded {
 		border-radius: var(--svelte-ui-button-border-radius-rounded);
 	}
@@ -510,9 +522,8 @@
 	}
 
 	.button__label {
-		width: 100%;
 		display: block;
-		text-align: center;
+		width: auto;
 		line-height: var(--svelte-ui-button-line-height);
 		text-box-trim: trim-both;
 		text-box-edge: cap alphabetic;
@@ -531,6 +542,11 @@
 		justify-content: center;
 	}
 
+	.button--align-left .button__popup-icon {
+		margin-left: auto;
+		margin-right: -4px;
+	}
+
 	.button__loading {
 		position: absolute;
 		top: 50%;
@@ -550,6 +566,11 @@
 		margin-right: -2px;
 	}
 
+	.button--align-left.button--small .button__popup-icon {
+		margin-left: auto;
+		margin-right: -2px;
+	}
+
 	.button--large .button__icon {
 		margin-left: -6px;
 	}
@@ -558,6 +579,11 @@
 		margin-right: -6px;
 	}
 
+	.button--align-left.button--large .button__popup-icon {
+		margin-left: auto;
+		margin-right: -6px;
+	}
+
 	/* Reduced motion */
 	.button--no-motion,
 	.button--no-motion:before,

package/dist/components/Button.svelte.d.ts

@@ -1,17 +1,19 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { ButtonVariant, ButtonSize } from '../types/propOptions';
 export type ButtonProps = {
     children: Snippet;
     buttonAttributes?: HTMLButtonAttributes | undefined;
     type?: HTMLButtonAttributes['type'];
     tabindex?: number | null;
     customStyle?: HTMLButtonAttributes['style'];
-    variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
-    size?: 'small' | 'medium' | 'large';
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     color?: string;
     fullWidth?: boolean;
+    align?: 'left' | 'center' | 'right';
     minWidth?: string | number;
     rounded?: boolean;
     popup?: boolean;

package/dist/components/Checkbox.svelte

@@ -8,9 +8,8 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler,
-		BivariantValueHandler
-	} from '../types/eventHandlers';
+		PointerHandler
+	} from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants

package/dist/components/Checkbox.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type CheckboxProps = {
     children?: Snippet;
     name?: string;

package/dist/components/CheckboxGroup.svelte

@@ -5,7 +5,7 @@
 	import Checkbox from './Checkbox.svelte';
 	import { onMount } from 'svelte';
 	import { getStyleFromNumber } from '../utils/style';
-	import type { BivariantValueHandler } from '../types/eventHandlers';
+	import type { BivariantValueHandler } from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -78,8 +78,11 @@
 		onchange(value);
 	};
 
-	const gapStyle = gap !== undefined ? getStyleFromNumber(gap) : undefined;
-	const minOptionWidthStyle = getStyleFromNumber(minOptionWidth);
+	// =========================================================================
+	// $defived
+	// =========================================================================
+	const gapStyle = $derived(gap !== undefined ? getStyleFromNumber(gap) : undefined);
+	const minOptionWidthStyle = $derived(getStyleFromNumber(minOptionWidth));
 </script>
 
 <ul

package/dist/components/CheckboxGroup.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { Option, OptionValue } from '../types/options';
-import type { BivariantValueHandler } from '../types/eventHandlers';
+import type { BivariantValueHandler } from '../types/callbackHandlers';
 export type CheckboxGroupProps = {
     options: Option[];
     value: OptionValue[];

package/dist/components/ColorPicker.svelte

@@ -11,9 +11,8 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler,
-		BivariantValueHandler
-	} from '../types/eventHandlers';
+		PointerHandler
+	} from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -40,8 +39,8 @@
 		iconVariant?: IconVariant;
 
 		// 入力イベント
-		onchange?: BivariantValueHandler<string>;
-		oninput?: BivariantValueHandler<string>;
+		onchange?: (value: string) => void;
+		oninput?: (value: string) => void;
 
 		// フォーカスイベント
 		onfocus?: FocusHandler;

package/dist/components/ColorPicker.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type ColorPickerProps = {
     value: string;
     id?: string;
@@ -14,8 +14,8 @@ export type ColorPickerProps = {
     clearable?: boolean;
     clearButtonAriaLabel?: string;
     iconVariant?: IconVariant;
-    onchange?: BivariantValueHandler<string>;
-    oninput?: BivariantValueHandler<string>;
+    onchange?: (value: string) => void;
+    oninput?: (value: string) => void;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;

package/dist/components/Combobox.svelte

@@ -13,7 +13,7 @@
 		TouchHandler,
 		PointerHandler,
 		BivariantValueHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -165,10 +165,7 @@
 	let popupRef = $state<any>();
 	let highlightedIndex = $state(-1);
 	let isFocused = $state(false);
-
-	// 各要素のIDを生成
-	const inputId = `${id}-input`;
-	const listboxId = `${id}-listbox`;
+	let isKeyboardNavigation = $state(false);
 
 	// =========================================================================
 	// Methods
@@ -180,6 +177,7 @@
 		popupRef?.close();
 		highlightedIndex = -1;
 		isFocused = false;
+		isKeyboardNavigation = false;
 
 		// スクリーンリーダーアナウンス
 		if (option !== null && option !== undefined) {
@@ -239,6 +237,7 @@
 		switch (event.key) {
 			case 'ArrowDown':
 				event?.preventDefault?.();
+				isKeyboardNavigation = true;
 				if (!isFocused) {
 					isFocused = true;
 					popupRef?.open();
@@ -247,6 +246,7 @@
 				break;
 			case 'ArrowUp':
 				event?.preventDefault?.();
+				isKeyboardNavigation = true;
 				if (!isFocused) {
 					isFocused = true;
 					popupRef?.open();
@@ -263,6 +263,7 @@
 				event?.preventDefault?.();
 				inputValue = '';
 				highlightedIndex = -1;
+				isKeyboardNavigation = false;
 				popupRef?.close();
 				isFocused = false;
 				break;
@@ -387,6 +388,9 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
+	// 各要素のIDを生成
+	const inputId = $derived(`${id}-input`);
+	const listboxId = $derived(`${id}-listbox`);
 
 	// フィルタリングされたオプション
 	const filteredOptions = $derived.by(() => {
@@ -463,7 +467,7 @@
 		bind:this={popupRef}
 		anchorElement={comboboxElement}
 		position="bottom-left"
-		focusTrap={false}
+		mobileFullscreen={false}
 		onClose={handlePopupClose}
 		margin={4}
 	>
@@ -481,6 +485,7 @@
 						type="button"
 						class="combobox__option"
 						class:combobox__option--highlighted={index === highlightedIndex}
+						class:combobox__option--keyboard={isKeyboardNavigation && index === highlightedIndex}
 						class:combobox__option--selected={option === inputValue}
 						role="option"
 						aria-selected={option === inputValue}
@@ -489,7 +494,10 @@
 							event?.stopPropagation?.();
 							selectOption(option);
 						}}
-						onmouseenter={() => (highlightedIndex = index)}
+						onmouseenter={() => {
+							highlightedIndex = index;
+							isKeyboardNavigation = false; // マウス操作時はキーボード操作フラグをリセット
+						}}
 					>
 						{option}
 					</button>
@@ -553,6 +561,12 @@
 			background-color: var(--svelte-ui-combobox-option-hover-bg);
 		}
 
+		/* キーボード操作時のみ枠線を表示 */
+		&.combobox__option--keyboard {
+			outline: var(--svelte-ui-focus-outline-inner);
+			outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+		}
+
 		&.combobox__option--selected {
 			background-color: var(--svelte-ui-combobox-option-selected-bg);
 		}
@@ -561,6 +575,11 @@
 			background-color: var(--svelte-ui-combobox-option-selected-bg);
 		}
 
+		&.combobox__option--selected.combobox__option--keyboard {
+			outline: var(--svelte-ui-focus-outline-inner);
+			outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+		}
+
 		&:focus,
 		&:focus-visible {
 			outline: var(--svelte-ui-focus-outline-inner);

package/dist/components/Combobox.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 export type ComboboxProps = {
     name?: string;
     value: string | number | null | undefined;

package/dist/components/ConfirmDialog.svelte

@@ -20,7 +20,7 @@
 		id?: string;
 
 		// スタイル/レイアウト
-		variant?: 'info' | 'warning' | 'danger';
+		danger?: boolean;
 		width?: string | number;
 
 		// 状態/動作
@@ -43,7 +43,7 @@
 		id,
 
 		// スタイル/レイアウト
-		variant = 'info',
+		danger = false,
 		width = 400,
 
 		// 状態/動作
@@ -101,11 +101,7 @@
 		</Button>
 		<Button
 			variant="filled"
-			color={variant === 'danger'
-				? 'var(--svelte-ui-danger-color)'
-				: variant === 'warning'
-					? 'var(--svelte-ui-warning-color)'
-					: undefined}
+			color={danger ? 'var(--svelte-ui-danger-color)' : undefined}
 			onclick={handleSubmit}
 		>
 			{submitLabel}

package/dist/components/ConfirmDialog.svelte.d.ts

@@ -4,7 +4,7 @@ export type ConfirmDialogProps = {
     submitLabel?: string;
     cancelLabel?: string;
     id?: string;
-    variant?: 'info' | 'warning' | 'danger';
+    danger?: boolean;
     width?: string | number;
     isOpen?: boolean;
     closeIfClickOutside?: boolean;

package/dist/components/Datepicker.svelte

@@ -14,6 +14,7 @@
 	import Popup from './Popup.svelte';
 	import DatepickerCalendar from './DatepickerCalendar.svelte';
 	import { announceToScreenReader } from '../utils/accessibility';
+	import { getLocale } from '../config';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import type {
@@ -23,7 +24,8 @@
 		MouseHandler,
 		TouchHandler,
 		PointerHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
+	import type { DatepickerMode, FocusStyle } from '../types/propOptions';
 
 	dayjs.extend(localeData);
 
@@ -44,7 +46,7 @@
 
 		// スタイル/レイアウト
 		inline?: boolean;
-		focusStyle?: 'background' | 'outline' | 'none';
+		focusStyle?: FocusStyle;
 		fullWidth?: boolean;
 		rounded?: boolean;
 
@@ -58,7 +60,7 @@
 
 		// 状態/動作
 		disabled?: boolean;
-		mode?: 'single' | 'range';
+		mode?: DatepickerMode;
 		/** テキスト入力を有効にするか */
 		enableTextInput?: boolean;
 		/** クリック時にポップアップを開くかどうかを有効にするか */
@@ -104,7 +106,7 @@
 		value = $bindable(),
 		format,
 		nullString = '',
-		locale = 'en',
+		locale,
 		rangeSeparator = ' - ',
 
 		// HTML属性系
@@ -184,8 +186,6 @@
 	let openedViaKeyboard: boolean = $state(false);
 	let displayValue = $state('');
 
-	const calendarId = `${id}-calendar`;
-
 	const localeConfig = {
 		en: {
 			defaultFormat: 'MM/DD/YYYY (ddd)',
@@ -234,12 +234,22 @@
 	// =========================================================================
 	// Effects
 	// =========================================================================
+	const effectiveLocale = $derived(locale ?? getLocale());
+
 	$effect(() => {
-		dayjs.locale(locale);
+		// range モードのときは、value を「start <= end」の順序に正規化
+		if (mode === 'range' && value && 'start' in value && 'end' in value) {
+			const startDay = dayjs(value.start).locale(effectiveLocale);
+			const endDay = dayjs(value.end).locale(effectiveLocale);
+			if (startDay.isAfter(endDay)) {
+				value = { start: value.end, end: value.start };
+			}
+		}
 	});
 
 	$effect(() => {
-		const formatWithLocale = (date: Date) => dayjs(date).locale(locale).format(finalFormat);
+		const formatWithLocale = (date: Date) =>
+			dayjs(date).locale(effectiveLocale).format(finalFormat);
 
 		if (mode === 'range' && value && 'start' in value && 'end' in value) {
 			displayValue = `${formatWithLocale(value.start)}${rangeSeparator}${formatWithLocale(value.end)}`;
@@ -257,11 +267,11 @@
 		// スクリーンリーダーアナウンス
 		if (value) {
 			if (mode === 'range' && typeof value === 'object' && 'start' in value && 'end' in value) {
-				const startDate = dayjs(value.start).format(finalFormat);
-				const endDate = dayjs(value.end).format(finalFormat);
+				const startDate = dayjs(value.start).locale(effectiveLocale).format(finalFormat);
+				const endDate = dayjs(value.end).locale(effectiveLocale).format(finalFormat);
 				announceToScreenReader(`Date range selected: ${startDate} to ${endDate}`);
 			} else if (value instanceof Date) {
-				const formattedDate = dayjs(value).format(finalFormat);
+				const formattedDate = dayjs(value).locale(effectiveLocale).format(finalFormat);
 				announceToScreenReader(`Date selected: ${formattedDate}`);
 			}
 		}
@@ -285,8 +295,13 @@
 	const handleClick = (event: MouseEvent) => {
 		if (disabled) return;
 		if (enableClickToOpen) {
-			openedViaKeyboard = false;
-			open();
+			const isOpen = popupRef?.getIsOpen && popupRef.getIsOpen();
+			if (isOpen) {
+				close();
+			} else {
+				openedViaKeyboard = false;
+				open();
+			}
 		}
 		onclick?.(event);
 	};
@@ -487,24 +502,73 @@
 		if (!enableTextInput) return;
 
 		const inputStr = String(inputValue ?? '').trim();
+
+		// 空文字列の場合は値をクリア
 		if (!inputStr) {
 			value = undefined;
 			onchange(value);
 			return;
 		}
 
-		// 入力値のうち「日付として有効な部分」（数字と区切り記号）だけを抽出してパースする
-		const datePartMatch = inputStr.match(/^[0-9０-９./-]+/);
-		const datePart = datePartMatch ? datePartMatch[0] : inputStr;
+		// 日付パース処理
+		if (mode === 'range') {
+			const parsedRange = parseRangeInput(inputStr, effectiveLocale);
+			if (!parsedRange) return;
 
-		// ロケールごとの日付専用フォーマット（rangeFormat は曜日を含まない）
-		const parseFormat = currentLocaleConfig.rangeFormat;
+			value = parsedRange;
+			onchange(value);
+			return;
+		}
+
+		// single モードでは先頭の「日付本体」のみを解釈する
+		const parsedSingle = parseSingleInput(inputStr, effectiveLocale);
+		if (!parsedSingle) return;
 
+		value = parsedSingle;
+		onchange(value);
+	};
+
+	const parseSingleInput = (inputStr: string, locale: string): Date | null => {
+		const parseFormat = currentLocaleConfig.defaultFormat;
+		const datePart = extractDatePart(inputStr);
 		const parsedDate = dayjs(datePart, parseFormat, locale, true);
-		if (parsedDate.isValid()) {
-			value = parsedDate.toDate();
-			onchange(value);
+		if (!parsedDate.isValid()) return null;
+		return parsedDate.toDate();
+	};
+
+	const parseRangeInput = (inputStr: string, locale: string): { start: Date; end: Date } | null => {
+		const parseFormat = currentLocaleConfig.rangeFormat;
+		const dateLikeParts = inputStr.match(/[0-9０-９./-]+/g) ?? [];
+
+		if (dateLikeParts.length < 2) {
+			return null;
 		}
+
+		const startRaw = extractDatePart(dateLikeParts[0]);
+		const endRaw = extractDatePart(dateLikeParts[1]);
+
+		const startParsed = dayjs(startRaw, parseFormat, locale, true);
+		const endParsed = dayjs(endRaw, parseFormat, locale, true);
+
+		if (!startParsed.isValid() || !endParsed.isValid()) {
+			return null;
+		}
+
+		const startDate = startParsed.toDate();
+		const endDate = endParsed.toDate();
+
+		// start > end の場合はここで入れ替えて正規化して返す
+		return startDate <= endDate
+			? { start: startDate, end: endDate }
+			: { start: endDate, end: startDate };
+	};
+
+	const extractDatePart = (raw: string): string => {
+		// 入力値のうち「日付として有効な部分」（数字と区切り記号）だけを抽出してパースする。
+		// 曜日やカッコなどの装飾はここで無視される。
+		const trimmed = raw.trim();
+		const match = trimmed.match(/^[0-9０-９./-]+/);
+		return match ? match[0] : trimmed;
 	};
 
 	export const open = () => {
@@ -524,8 +588,8 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
-
-	const currentLocaleConfig = $derived(localeConfig[locale]);
+	const calendarId = $derived(`${id}-calendar`);
+	const currentLocaleConfig = $derived(localeConfig[effectiveLocale]);
 	const finalFormat = $derived(
 		format ||
 			(mode === 'range' ? currentLocaleConfig.rangeFormat : currentLocaleConfig.defaultFormat)
@@ -606,7 +670,7 @@
 		onchange={handleChange}
 		{minDate}
 		{maxDate}
-		{locale}
+		locale={effectiveLocale}
 		id={calendarId}
 	/>
 </Popup>

package/dist/components/Datepicker.svelte.d.ts

@@ -6,7 +6,8 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/zh-cn';
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { DatepickerMode, FocusStyle } from '../types/propOptions';
 export type DatepickerProps = {
     value: Date | {
         start: Date;
@@ -19,7 +20,7 @@ export type DatepickerProps = {
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
     inline?: boolean;
-    focusStyle?: 'background' | 'outline' | 'none';
+    focusStyle?: FocusStyle;
     fullWidth?: boolean;
     rounded?: boolean;
     hasIcon?: boolean;
@@ -29,7 +30,7 @@ export type DatepickerProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     disabled?: boolean;
-    mode?: 'single' | 'range';
+    mode?: DatepickerMode;
     /** テキスト入力を有効にするか */
     enableTextInput?: boolean;
     /** クリック時にポップアップを開くかどうかを有効にするか */

package/dist/components/DatepickerCalendar.svelte

@@ -14,7 +14,7 @@
 	import IconButton from './IconButton.svelte';
 	import { onMount } from 'svelte';
 	import { t } from '../i18n';
-	import type { BivariantValueHandler } from '../types/eventHandlers';
+	import type { BivariantValueHandler } from '../types/callbackHandlers';
 
 	dayjs.extend(localeData);
 	dayjs.extend(isSameOrBefore);

package/dist/components/DatepickerCalendar.svelte.d.ts

@@ -4,7 +4,7 @@ import 'dayjs/locale/fr';
 import 'dayjs/locale/de';
 import 'dayjs/locale/es';
 import 'dayjs/locale/zh-cn';
-import type { BivariantValueHandler } from '../types/eventHandlers';
+import type { BivariantValueHandler } from '../types/callbackHandlers';
 export type DatepickerCalendarProps = {
     value: Date | {
         start: Date;

package/dist/components/Drawer.svelte

@@ -310,7 +310,7 @@
   align-items: center;
   justify-content: stretch;
   min-height: var(--svelte-ui-drawer-header-height);
-  padding: var(--svelte-ui-drawer-padding);
+  padding: var(--svelte-ui-drawer-header-padding);
   margin-bottom: calc(0px - var(--svelte-ui-drawer-body-padding));
 }
 .drawer__header .drawer__title {