@14ch/svelte-ui 0.0.38 → 0.0.40

package/dist/components/Combobox.svelte

@@ -292,7 +292,6 @@
 				highlightedIndex = -1;
 				isKeyboardNavigation = false;
 				popupRef?.close();
-				isFocused = false;
 				break;
 		}
 	};
@@ -396,8 +395,10 @@
 	};
 
 	// Popup が閉じられたときの処理（isPopupOpen は bind:isOpen で同期される）
-	const handlePopupClose = () => {
-		isFocused = false;
+	const handlePopupClose = (reason: 'escape' | 'outside' | 'explicit') => {
+		if (reason !== 'escape') {
+			isFocused = false;
+		}
 		highlightedIndex = -1;
 	};
 	const handleBlur = (event: FocusEvent) => {

package/dist/components/MultiSelect.svelte

@@ -14,9 +14,8 @@
 	// =========================================================================
 	export type MultiSelectProps = {
 		// 基本プロパティ
-		name?: string;
-		/** Selected values array. Supports `bind:values`. */
-		values: OptionValue[];
+		/** Selected values array. Supports `bind:value`. */
+		value: OptionValue[];
 		/** `{ label, value, disabled? }[]` */
 		options: Option[];
 
@@ -33,6 +32,7 @@
 		focusStyle?: 'background' | 'outline' | 'none';
 		fullWidth?: boolean;
 		rounded?: boolean;
+		customStyle?: string;
 
 		// 状態/動作
 		disabled?: boolean;
@@ -49,8 +49,7 @@
 	};
 
 	let {
-		name,
-		values = $bindable([]),
+		value = $bindable([]),
 		options = [],
 
 		id = `multi-select-${Math.random().toString(36).substring(2, 15)}`,
@@ -62,6 +61,7 @@
 		focusStyle = 'outline',
 		fullWidth = false,
 		rounded = false,
+		customStyle = '',
 
 		disabled = false,
 		required = false,
@@ -85,19 +85,19 @@
 	const listboxId = $derived(`${id}-listbox`);
 
 	const selectedLabels = $derived(
-		options.filter((o) => values.includes(o.value)).map((o) => o.label)
+		options.filter((o) => value.includes(o.value)).map((o) => o.label)
 	);
 
 	// =========================================================================
 	// Methods
 	// =========================================================================
 	const toggleOption = (optionValue: OptionValue) => {
-		if (values.includes(optionValue)) {
-			values = values.filter((v) => v !== optionValue);
+		if (value.includes(optionValue)) {
+			value = value.filter((v) => v !== optionValue);
 		} else {
-			values = [...values, optionValue];
+			value = [...value, optionValue];
 		}
-		onchange(values);
+		onchange(value);
 	};
 
 	const handleTriggerClick = () => {
@@ -129,8 +129,10 @@
 		triggerWidth = triggerEl?.offsetWidth ?? 0;
 	};
 
-	const handlePopupClose = () => {
-		triggerEl?.focus();
+	const handlePopupClose = (reason: 'escape' | 'outside' | 'explicit') => {
+		if (reason !== 'outside') {
+			triggerEl?.focus();
+		}
 	};
 </script>
 
@@ -156,24 +158,27 @@
 		aria-required={required ? 'true' : undefined}
 		{tabindex}
 		{disabled}
+		style={customStyle}
 		onfocus={handleFocus}
 		onblur={handleBlur}
 		onclick={handleTriggerClick}
 		onkeydown={handleTriggerKeydown}
 	>
-		{#if selectedLabels.length > 0}
-			<span class="multi-select__display-text">
-				{#each selectedLabels as label, i}
-					<span>{label}{#if i < selectedLabels.length - 1},{/if}</span>
-				{/each}
+		<span class="multi-select__inner">
+			{#if selectedLabels.length > 0}
+				<span class="multi-select__display-text">
+					{#each selectedLabels as label, i}
+						<span>{label}{#if i < selectedLabels.length - 1},{/if}</span>
+					{/each}
+				</span>
+			{:else if placeholder}
+				<span class="multi-select__placeholder">{placeholder}</span>
+			{/if}
+			<span class="multi-select__dropdown-icon" aria-hidden="true">
+				<Icon>arrow_drop_down</Icon>
 			</span>
-		{:else if placeholder}
-			<span class="multi-select__placeholder">{placeholder}</span>
-		{/if}
+		</span>
 	</button>
-	<div class="multi-select__dropdown-icon" aria-hidden="true">
-		<Icon>arrow_drop_down</Icon>
-	</div>
 
 	<Popup
 		bind:this={popupRef}
@@ -196,7 +201,7 @@
 			{#each options as option, i (option.value)}
 				<li role="presentation" class="multi-select__item">
 					<Checkbox
-						value={values.includes(option.value)}
+						value={value.includes(option.value)}
 						disabled={option.disabled}
 						fullWidth
 						customStyle="padding: 8px 12px"
@@ -229,7 +234,7 @@
   width: 100%;
   min-height: var(--svelte-ui-select-height);
   padding: var(--svelte-ui-select-padding);
-  padding-right: var(--svelte-ui-select-icon-space);
+  padding-right: 0;
   background: transparent;
   border: none;
   font-family: inherit;
@@ -247,6 +252,15 @@
   outline-offset: var(--svelte-ui-focus-outline-offset-inner);
 }
 
+.multi-select__inner {
+  position: relative;
+  flex: 1;
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding-right: var(--svelte-ui-select-icon-space);
+}
+
 .multi-select__display-text {
   display: flex;
   flex-wrap: wrap;
@@ -269,11 +283,12 @@
   justify-content: center;
   align-items: center;
   position: absolute;
-  top: 50%;
+  top: 0;
   right: 4px;
+  margin-top: calc((var(--svelte-ui-select-height) - 32px) / 2);
+  margin-bottom: calc((var(--svelte-ui-select-height) - 32px) / 2);
   width: 32px;
   height: 32px;
-  transform: translateY(-50%);
   font-size: var(--svelte-ui-select-dropdown-icon-size);
   color: var(--svelte-ui-select-dropdown-icon-color);
   pointer-events: none;
@@ -327,7 +342,7 @@
  * ============================================= */
 .multi-select.multi-select--inline .multi-select__trigger {
   padding: inherit;
-  padding-right: var(--svelte-ui-input-icon-space-inline);
+  padding-right: 0;
   background: transparent;
   border: none;
   border-radius: 0;
@@ -335,8 +350,16 @@
   min-height: auto;
   line-height: inherit;
 }
+.multi-select.multi-select--inline .multi-select__inner {
+  align-self: auto;
+  align-items: flex-start;
+  min-height: 1lh;
+  padding-right: var(--svelte-ui-input-icon-space-inline);
+}
 .multi-select.multi-select--inline .multi-select__dropdown-icon {
   right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 /* =============================================

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

@@ -2,9 +2,8 @@ import type { Option, OptionValue } from '../types/options';
 import type { BivariantValueHandler, FocusHandler } from '../types/callbackHandlers';
 import type { PopupPosition } from '../types/propOptions';
 export type MultiSelectProps = {
-    name?: string;
-    /** Selected values array. Supports `bind:values`. */
-    values: OptionValue[];
+    /** Selected values array. Supports `bind:value`. */
+    value: OptionValue[];
     /** `{ label, value, disabled? }[]` */
     options: Option[];
     id?: string | null;
@@ -17,6 +16,7 @@ export type MultiSelectProps = {
     focusStyle?: 'background' | 'outline' | 'none';
     fullWidth?: boolean;
     rounded?: boolean;
+    customStyle?: string;
     disabled?: boolean;
     required?: boolean;
     /** @default 'bottom-left' */
@@ -25,6 +25,6 @@ export type MultiSelectProps = {
     onblur?: FocusHandler;
     onchange?: BivariantValueHandler<OptionValue[]>;
 };
-declare const MultiSelect: import("svelte").Component<MultiSelectProps, {}, "values">;
+declare const MultiSelect: import("svelte").Component<MultiSelectProps, {}, "value">;
 type MultiSelect = ReturnType<typeof MultiSelect>;
 export default MultiSelect;

package/dist/components/Popup.svelte

@@ -19,7 +19,7 @@
 	import { isMobileDevice, disableBodyScroll } from '../utils/mobile';
 	import { announceOpenClose } from '../utils/accessibility';
 	import { popupManager } from '../utils/popupManager';
-	import type { PopupPosition } from '../types/propOptions';
+	import type { CloseReason, PopupPosition } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
@@ -64,7 +64,7 @@
 
 		// イベントハンドラー
 		onOpen?: () => void;
-		onClose?: () => void;
+		onClose?: (reason: CloseReason) => void;
 	};
 
 	let {
@@ -105,6 +105,7 @@
 	let previousActiveElement: HTMLElement | null = null;
 	let isMobile: boolean = $state(false);
 	let bodyScrollCleanup: (() => void) | undefined = $state();
+	let pendingCloseReason: CloseReason = 'explicit';
 
 	// =========================================================================
 	// Lifecycle
@@ -147,7 +148,7 @@
 		switch (event.key) {
 			case 'Escape':
 				event.preventDefault();
-				close();
+				close('escape');
 				break;
 			case 'Tab':
 				if (focusTrap) {
@@ -343,15 +344,17 @@
 		}
 	};
 
+	const closeOnResize = () => close();
+
 	const addEventListenersToClose = () => {
 		if (typeof window === 'undefined' || typeof document === 'undefined') return;
-		window.addEventListener('resize', close);
+		window.addEventListener('resize', closeOnResize);
 		document.addEventListener('scroll', handleScroll, true);
 	};
 
 	const removeEventListenersToClose = () => {
 		if (typeof window === 'undefined' || typeof document === 'undefined') return;
-		window.removeEventListener('resize', close);
+		window.removeEventListener('resize', closeOnResize);
 		document.removeEventListener('scroll', handleScroll, true);
 	};
 
@@ -413,7 +416,9 @@
 		previousActiveElement = null;
 
 		// アニメーション完了後にonCloseを呼ぶ
-		onClose?.();
+		const reason = pendingCloseReason;
+		pendingCloseReason = 'explicit';
+		onClose?.(reason);
 	};
 
 	const clickOutside = (element: HTMLElement, callbackFunction: () => void) => {
@@ -498,7 +503,10 @@
 	};
 
 	/** Closes the popup. */
-	export const close = () => {
+	export const close = (reason: CloseReason = 'explicit') => {
+		if (pendingCloseReason === 'explicit') {
+			pendingCloseReason = reason;
+		}
 		isOpen = false;
 		removeEventListenersToClose();
 		removeKeyboardListener();
@@ -544,7 +552,7 @@
 	aria-modal={undefined}
 	id={popupId}
 	use:clickOutside={() => {
-		close();
+		close('outside');
 	}}
 >
 	{@render children()}

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

@@ -11,7 +11,7 @@
      * This prevents state synchronization bugs and ensures consistent behavior.
      */
 import type { Snippet } from 'svelte';
-import type { PopupPosition } from '../types/propOptions';
+import type { CloseReason, PopupPosition } from '../types/propOptions';
 export type PopupProps = {
     children: Snippet;
     /** The element the popup is anchored to. */
@@ -37,11 +37,11 @@ export type PopupProps = {
     ariaLabelledby?: string;
     ariaDescribedby?: string;
     onOpen?: () => void;
-    onClose?: () => void;
+    onClose?: (reason: CloseReason) => void;
 };
 declare const Popup: import("svelte").Component<PopupProps, {
     /** Opens the popup. */ open: () => Promise<void>;
-    /** Closes the popup. */ close: () => void;
+    /** Closes the popup. */ close: (reason?: CloseReason) => void;
     /** Toggles between open and closed. */ toggle: () => void;
     /** Returns whether the popup is currently open. */ getIsOpen: () => boolean;
 }, "isOpen">;

package/dist/components/PopupMenu.svelte

@@ -189,10 +189,10 @@
 		announceMenuOpened();
 	};
 
-	const handlePopupClose = () => {
+	const handlePopupClose = (reason: 'escape' | 'outside' | 'explicit') => {
 		activeIndex = -1;
 
-		if (anchorElement) {
+		if (anchorElement && reason !== 'outside') {
 			anchorElement.focus();
 		}
 	};

package/dist/types/propOptions.d.ts

@@ -66,3 +66,11 @@ export type NavVariant = 'vertical' | 'horizontal' | 'mobile';
  * - `bottom-sheet`: child items appear in a fixed bottom sheet overlay (mobile only)
  */
 export type ChildrenVariant = 'popup' | 'accordion' | 'expanded' | 'bar' | 'bottom-sheet';
+/**
+ * Reason why a Popup was closed.
+ * Used by Popup's onClose callback to allow consumers to differentiate close triggers.
+ * - `escape`: closed via Escape key
+ * - `outside`: closed by clicking outside the popup
+ * - `explicit`: closed programmatically (e.g. popupRef.close(), selecting an option)
+ */
+export type CloseReason = 'escape' | 'outside' | 'explicit';

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@14ch/svelte-ui",
 	"description": "Modern Svelte UI components library with TypeScript support",
 	"private": false,
-	"version": "0.0.38",
+	"version": "0.0.40",
 	"type": "module",
 	"keywords": [
 		"svelte",