@14ch/svelte-ui 0.0.13 → 0.0.14

package/dist/components/PopupMenu.svelte

@@ -8,36 +8,19 @@
 	import type { SvelteComponent } from 'svelte';
 	import { tick } from 'svelte';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+	import type { PopupPosition } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
 	export type PopupMenuProps = {
 		isOpen?: boolean;
-		anchorElement: HTMLElement;
-		position?:
-			| 'top'
-			| 'bottom'
-			| 'left'
-			| 'right'
-			| 'top-left'
-			| 'top-center'
-			| 'top-right'
-			| 'bottom-left'
-			| 'bottom-center'
-			| 'bottom-right'
-			| 'left-top'
-			| 'left-center'
-			| 'left-bottom'
-			| 'right-top'
-			| 'right-center'
-			| 'right-bottom'
-			| 'auto';
+		anchorElement: HTMLElement | null | undefined;
+		position?: PopupPosition;
 		menuItems: (MenuItem | 'separator')[];
 		id?: string;
 		ariaLabel?: string;
 		mobileFullscreen?: boolean;
-		mobileBehavior?: 'auto' | 'fullscreen' | 'popup';
 		iconFilled?: boolean;
 		iconWeight?: IconWeight;
 		iconGrade?: IconGrade;
@@ -61,7 +44,6 @@
 		// 状態/動作
 		isOpen = $bindable(false),
 		mobileFullscreen = true,
-		mobileBehavior = 'auto',
 
 		// アイコン関連
 		iconFilled = false,
@@ -85,7 +67,9 @@
 	// =========================================================================
 	const getMenuItemId = (index: number): string => `${menuId}-item-${index}`;
 
-	const executeMenuItem = (item: MenuItem) => {
+	const executeMenuItem = (item: MenuItem, event?: MouseEvent) => {
+		event?.stopPropagation();
+		event?.preventDefault();
 		if (item.callback) {
 			item.callback();
 		}
@@ -95,30 +79,40 @@
 	const handleKeyDown = async (event: KeyboardEvent) => {
 		switch (event.key) {
 			case 'ArrowDown':
+			case 'ArrowUp':
+			case 'Home':
+			case 'End':
+			case 'Enter':
+			case ' ':
+			case 'Escape':
 				event.preventDefault();
+				event.stopPropagation(); // PopupのhandleKeyDownに伝播させない
+				break;
+			case 'Tab':
+				event.stopPropagation(); // PopupのhandleKeyDownに伝播させない
+				break;
+		}
+
+		switch (event.key) {
+			case 'ArrowDown':
 				moveToNextItem();
 				break;
 			case 'ArrowUp':
-				event.preventDefault();
 				moveToPreviousItem();
 				break;
 			case 'Home':
-				event.preventDefault();
 				moveToFirstItem();
 				break;
 			case 'End':
-				event.preventDefault();
 				moveToLastItem();
 				break;
 			case 'Enter':
 			case ' ':
-				event.preventDefault();
 				if (activeIndex >= 0 && activeIndex < actionableItems.length) {
 					executeMenuItem(actionableItems[activeIndex].item);
 				}
 				break;
 			case 'Escape':
-				event.preventDefault();
 				close();
 				break;
 			case 'Tab':
@@ -180,18 +174,16 @@
 	};
 
 	const handlePopupOpen = () => {
-		activeIndex = 0;
+		activeIndex = -1; // 初期状態ではハイライトなし
 		tick().then(() => {
 			menuContainerRef?.focus();
 		});
 
-		document.addEventListener('keydown', handleKeyDown);
 		announceMenuOpened();
 	};
 
 	const handlePopupClose = () => {
 		activeIndex = -1;
-		document.removeEventListener('keydown', handleKeyDown);
 
 		if (anchorElement) {
 			anchorElement.focus();
@@ -210,6 +202,13 @@
 		popupRef?.toggle();
 	};
 
+	const cancelParentEvent = (event: Event) => {
+		event.stopPropagation();
+		if (event.cancelable) {
+			event.preventDefault();
+		}
+	};
+
 	// =========================================================================
 	// $derived
 	// =========================================================================
@@ -231,7 +230,6 @@
 	onClose={handlePopupClose}
 	role="menu"
 	{mobileFullscreen}
-	{mobileBehavior}
 	id={id ? `${id}-popup` : undefined}
 >
 	<div
@@ -242,6 +240,8 @@
 		aria-activedescendant={activeIndex >= 0 ? getMenuItemId(activeIndex) : undefined}
 		tabindex="-1"
 		{id}
+		onclick={cancelParentEvent}
+		onkeydown={handleKeyDown}
 	>
 		<ul class="popup-menu__list" role="none">
 			{#each menuItems as item, index}
@@ -261,7 +261,7 @@
 								tabindex="-1"
 								aria-describedby={item.icon ? `${getMenuItemId(actionableIndex)}-icon` : undefined}
 								href={item.href}
-								onclick={() => executeMenuItem(item)}
+								onclick={(e) => executeMenuItem(item, e)}
 								onmouseenter={() => handleMouseEnter(actionableIndex)}
 								onfocus={() => handleFocus(actionableIndex)}
 							>
@@ -278,7 +278,7 @@
 										{item.icon}
 									</Icon>
 								{/if}
-								<span class="popup-menu__text">{item.title}</span>
+								<span class="popup-menu__text">{item.label}</span>
 							</a>
 						{:else}
 							<button
@@ -289,7 +289,7 @@
 								role="menuitem"
 								tabindex="-1"
 								aria-describedby={item.icon ? `${getMenuItemId(actionableIndex)}-icon` : undefined}
-								onclick={() => executeMenuItem(item)}
+								onclick={(e) => executeMenuItem(item, e)}
 								onmouseenter={() => handleMouseEnter(actionableIndex)}
 								onfocus={() => handleFocus(actionableIndex)}
 							>
@@ -306,7 +306,7 @@
 										{item.icon}
 									</Icon>
 								{/if}
-								<span class="popup-menu__text">{item.title}</span>
+								<span class="popup-menu__text">{item.label}</span>
 							</button>
 						{/if}
 					{/if}
@@ -316,7 +316,8 @@
 	</div>
 </Popup>
 
-<style>.popup-menu {
+<style>@charset "UTF-8";
+.popup-menu {
   background-color: var(--svelte-ui-surface-color);
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -392,29 +393,12 @@
     padding: 12px 16px;
   }
 }
-/* Enhanced mobile menu styles */
-:global(.popup--mobile) .popup-menu {
-  border-radius: 0;
-  box-shadow: none;
-  background: transparent;
-  width: 100%;
-  max-width: none;
-  min-width: auto;
-}
-
-:global(.popup--mobile.popup--fullscreen) .popup-menu {
-  background: var(--svelte-ui-surface-color);
-  border-radius: var(--svelte-ui-popup-mobile-border-radius);
-  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
-  margin: 0;
-  padding: 0;
-}
-
-:global(.popup--mobile.popup--fullscreen) .popup-menu__list {
+/* Enhanced mobile menu spacing (layoutはPopup側に任せる) */
+:global(.popup--fullscreen) .popup-menu__list {
   padding: 16px 0;
 }
 
-:global(.popup--mobile.popup--fullscreen) .popup-menu__button {
+:global(.popup--fullscreen) .popup-menu__button {
   padding: 16px 24px;
   font-size: 1.1rem;
   min-height: var(--svelte-ui-touch-target-lg);

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

@@ -1,14 +1,14 @@
 import type { MenuItem } from '../types/menuItem';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+import type { PopupPosition } from '../types/propOptions';
 export type PopupMenuProps = {
     isOpen?: boolean;
-    anchorElement: HTMLElement;
-    position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'right-top' | 'right-center' | 'right-bottom' | 'auto';
+    anchorElement: HTMLElement | null | undefined;
+    position?: PopupPosition;
     menuItems: (MenuItem | 'separator')[];
     id?: string;
     ariaLabel?: string;
     mobileFullscreen?: boolean;
-    mobileBehavior?: 'auto' | 'fullscreen' | 'popup';
     iconFilled?: boolean;
     iconWeight?: IconWeight;
     iconGrade?: IconGrade;

package/dist/components/PopupMenuButton.svelte

@@ -11,7 +11,8 @@
 		MouseHandler,
 		TouchHandler,
 		PointerHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
+	import type { PopupPosition, ButtonVariant } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -27,24 +28,8 @@
 		id?: string;
 
 		// スタイル/レイアウト
-		position?:
-			| 'top'
-			| 'bottom'
-			| 'left'
-			| 'right'
-			| 'top-left'
-			| 'top-center'
-			| 'top-right'
-			| 'bottom-left'
-			| 'bottom-center'
-			| 'bottom-right'
-			| 'left-top'
-			| 'left-center'
-			| 'left-bottom'
-			| 'right-top'
-			| 'right-center'
-			| 'right-bottom';
-		variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
+		position?: PopupPosition;
+		variant?: ButtonVariant;
 		size?: number;
 		color?: string;
 		rounded?: boolean;
@@ -52,7 +37,7 @@
 		// 状態/動作
 		disabled?: boolean;
 		mobileFullscreen?: boolean;
-		mobileBehavior?: 'auto' | 'fullscreen' | 'popup';
+		cancelParentClick?: boolean;
 
 		// フォーカスイベント
 		onfocus?: FocusHandler;
@@ -111,7 +96,7 @@
 		// 状態/動作
 		disabled = false,
 		mobileFullscreen = true,
-		mobileBehavior = 'auto',
+		cancelParentClick = false,
 
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
@@ -159,7 +144,10 @@
 	// =========================================================================
 	const handleClick = (event: MouseEvent) => {
 		if (disabled) return;
-		event.stopPropagation();
+		if (cancelParentClick) {
+			event.stopPropagation();
+			event.preventDefault();
+		}
 		onclick?.(event);
 		toggle();
 	};
@@ -350,7 +338,6 @@
 	{ariaLabel}
 	{position}
 	{mobileFullscreen}
-	{mobileBehavior}
 	id={id ? `${id}-menu` : undefined}
 />
 

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

@@ -1,18 +1,19 @@
 import type { MenuItem } from '../types/menuItem';
 import type { Snippet } from 'svelte';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { PopupPosition, ButtonVariant } from '../types/propOptions';
 export type PopupMenuButtonProps = {
     children?: Snippet;
     menuItems: (MenuItem | 'separator')[];
     id?: string;
-    position?: 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'left-top' | 'left-center' | 'left-bottom' | 'right-top' | 'right-center' | 'right-bottom';
-    variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
+    position?: PopupPosition;
+    variant?: ButtonVariant;
     size?: number;
     color?: string;
     rounded?: boolean;
     disabled?: boolean;
     mobileFullscreen?: boolean;
-    mobileBehavior?: 'auto' | 'fullscreen' | 'popup';
+    cancelParentClick?: boolean;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;

package/dist/components/Radio.svelte

@@ -10,7 +10,7 @@
 		TouchHandler,
 		PointerHandler,
 		BivariantValueHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
 	import type { OptionValue } from '../types/options';
 
 	// =========================================================================

package/dist/components/Radio.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, BivariantValueHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
 import type { OptionValue } from '../types/options';
 export type RadioProps = {
     children?: Snippet;

package/dist/components/RadioGroup.svelte

@@ -4,7 +4,7 @@
 	import type { Option, OptionValue } from '../types/options';
 	import Radio from './Radio.svelte';
 	import { getStyleFromNumber } from '../utils/style';
-	import type { BivariantValueHandler } from '../types/eventHandlers';
+	import type { BivariantValueHandler } from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants

package/dist/components/RadioGroup.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 RadioGroupProps = {
     name?: string;
     options: Option[];

package/dist/components/SegmentedControl.svelte

@@ -5,13 +5,12 @@
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import type { SegmentedControlItem } from '../types/segmentedControlItem';
 	import type {
-		BivariantValueHandler,
 		FocusHandler,
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
 		PointerHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants

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

@@ -1,6 +1,6 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { SegmentedControlItem } from '../types/segmentedControlItem';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
 export type SegmentedControlProps = {
     items: SegmentedControlItem[];
     value: string;

package/dist/components/Select.svelte

@@ -10,7 +10,7 @@
 		TouchHandler,
 		PointerHandler,
 		BivariantValueHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
 	import type { Option } from '../types/options';
 
 	// =========================================================================

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

@@ -1,5 +1,5 @@
 import type { HTMLSelectAttributes } 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';
 import type { Option } from '../types/options';
 export type SelectProps = {
     name?: string;

package/dist/components/Slider.svelte

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

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

@@ -1,5 +1,5 @@
 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 SliderProps = {
     value: number;
     name?: string;

package/dist/components/Snackbar.svelte

@@ -4,15 +4,16 @@
 	import { onMount } from 'svelte';
 	import { snackbarManager, type SnackbarItem as SnackbarData } from '../utils/snackbar.svelte';
 	import SnackbarItem from './SnackbarItem.svelte';
+	import type { SnackbarPosition, SnackbarVariant } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
 	export type SnackbarProps = {
 		// スタイル/レイアウト
-		position?: 'top' | 'bottom';
+		position?: SnackbarPosition;
 		maxVisible?: number;
-		variant?: 'filled' | 'outlined';
+		variant?: SnackbarVariant;
 
 		// 状態/動作
 		duration?: number;

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

@@ -1,7 +1,8 @@
+import type { SnackbarPosition, SnackbarVariant } from '../types/propOptions';
 export type SnackbarProps = {
-    position?: 'top' | 'bottom';
+    position?: SnackbarPosition;
     maxVisible?: number;
-    variant?: 'filled' | 'outlined';
+    variant?: SnackbarVariant;
     duration?: number;
 };
 declare const Snackbar: import("svelte").Component<SnackbarProps, {}, "">;

package/dist/components/SnackbarItem.svelte

@@ -5,6 +5,7 @@
 	import type { Snippet } from 'svelte';
 	import { snackbar } from '../utils/snackbar.svelte';
 	import type { IconVariant } from '../types/icon';
+	import type { SnackbarType, SnackbarVariant, SnackbarPosition } from '../types/propOptions';
 	import Icon from './Icon.svelte';
 	import IconButton from './IconButton.svelte';
 	import Button from './Button.svelte';
@@ -18,15 +19,15 @@
 
 		// 基本プロパティ
 		message?: string;
-		type?: 'info' | 'success' | 'warning' | 'error' | 'default';
+		type?: SnackbarType;
 		actionLabel?: string;
 
 		// HTML属性系
 		id: string;
 
 		// スタイル/レイアウト
-		variant?: 'filled' | 'outlined';
-		position?: 'top' | 'bottom';
+		variant?: SnackbarVariant;
+		position?: SnackbarPosition;
 		color?: string;
 		textColor?: string;
 

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

@@ -1,13 +1,14 @@
 import type { Snippet } from 'svelte';
 import type { IconVariant } from '../types/icon';
+import type { SnackbarType, SnackbarVariant, SnackbarPosition } from '../types/propOptions';
 export type SnackbarItemProps = {
     children?: Snippet;
     message?: string;
-    type?: 'info' | 'success' | 'warning' | 'error' | 'default';
+    type?: SnackbarType;
     actionLabel?: string;
     id: string;
-    variant?: 'filled' | 'outlined';
-    position?: 'top' | 'bottom';
+    variant?: SnackbarVariant;
+    position?: SnackbarPosition;
     color?: string;
     textColor?: string;
     duration?: number;

package/dist/components/Switch.svelte

@@ -8,9 +8,8 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler,
-		BivariantValueHandler
-	} from '../types/eventHandlers';
+		PointerHandler
+	} from '../types/callbackHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -138,7 +137,6 @@
 	}: SwitchProps = $props();
 
 	let inputRef: HTMLInputElement | undefined = $state();
-	let errorId = `switch-error-${Math.random().toString(36).substring(2, 15)}`;
 
 	// =========================================================================
 	// Methods

package/dist/components/Switch.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 SwitchProps = {
     children?: Snippet;
     value: boolean;

package/dist/components/TabItem.svelte

@@ -70,9 +70,9 @@
 			>
 		</div>
 	{/if}
-	{#if tabItem.title}
+	{#if tabItem.label}
 		<div class="tab-item__label">
-			{tabItem.title}
+			{tabItem.label}
 		</div>
 	{/if}
 </a>

package/dist/components/Textarea.svelte

@@ -12,9 +12,9 @@
 		KeyboardHandler,
 		MouseHandler,
 		TouchHandler,
-		PointerHandler,
-		BivariantValueHandler
-	} from '../types/eventHandlers';
+		PointerHandler
+	} from '../types/callbackHandlers';
+	import type { FocusStyle } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -22,7 +22,7 @@
 	export type TextareaProps = {
 		// 基本プロパティ
 		name?: string;
-		value: string;
+		value: string | null | undefined;
 		placeholder?: string;
 
 		// HTML属性系
@@ -40,7 +40,7 @@
 		minHeight?: string | number | null;
 		maxHeight?: string | number | null;
 		inline?: boolean;
-		focusStyle?: 'background' | 'outline' | 'none';
+		focusStyle?: FocusStyle;
 		fullWidth?: boolean;
 		fullHeight?: boolean;
 		width?: string | number | null;
@@ -339,13 +339,14 @@
 
 	// HTML表示用の値（autoResize時の高さ調整用）
 	const htmlValue = $derived.by(() => {
-		if (value !== '') {
-			const converted = convertToHtml(value);
-			let html = typeof converted === 'string' ? converted : String(converted ?? '');
+		const normalizedValue = value ?? '';
+		if (normalizedValue !== '') {
+			const converted = convertToHtml(normalizedValue);
+			const html = String(converted ?? '');
 			// 最後の行が空だったら空白を追加（高さ調整のため）
 			const lines = html.split('<br />');
 			if (lines.length > 0 && lines[lines.length - 1] === '') {
-				html += '&nbsp;';
+				return html + '&nbsp;';
 			}
 			return html;
 		} else {
@@ -360,11 +361,12 @@
 
 	// URLをリンク化した表示用HTML（クリック検出用オーバーレイで使用）
 	const linkHtmlValue = $derived.by(() => {
-		if (!linkify || value === '') {
+		const normalizedValue = value ?? '';
+		if (!linkify || normalizedValue === '') {
 			return '';
 		}
-		const result = convertToHtmlWithLink(value);
-		return typeof result === 'string' ? result : String(result ?? '');
+		const result = convertToHtmlWithLink(normalizedValue);
+		return String(result ?? '');
 	});
 </script>
 

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

@@ -1,9 +1,10 @@
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 import type { IconVariant } 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 { FocusStyle } from '../types/propOptions';
 export type TextareaProps = {
     name?: string;
-    value: string;
+    value: string | null | undefined;
     placeholder?: string;
     id?: string | null;
     tabindex?: number | null;
@@ -17,7 +18,7 @@ export type TextareaProps = {
     minHeight?: string | number | null;
     maxHeight?: string | number | null;
     inline?: boolean;
-    focusStyle?: 'background' | 'outline' | 'none';
+    focusStyle?: FocusStyle;
     fullWidth?: boolean;
     fullHeight?: boolean;
     width?: string | number | null;