@14ch/svelte-ui 0.0.37 → 0.0.38

package/dist/assets/styles/variables.scss

@@ -498,6 +498,9 @@
 	--svelte-ui-switch-thumb-size-lg: calc(
 		var(--svelte-ui-switch-height-lg) - var(--svelte-ui-switch-thumb-margin) * 2
 	);
+	--svelte-ui-switch-min-height: 1.8em;
+	--svelte-ui-switch-min-height-sm: 1.6em;
+	--svelte-ui-switch-min-height-lg: 2.2em;
 	--svelte-ui-switch-gap: 8px;
 	--svelte-ui-switch-line-height: 1.2em;
 	--svelte-ui-switch-disabled-opacity: var(--svelte-ui-disabled-opacity);
@@ -629,6 +632,7 @@
 	--svelte-ui-datepicker-selected-text-color: var(--svelte-ui-text-on-filled-color);
 
 	/* Popup */
+	--svelte-ui-popup-border-radius: var(--svelte-ui-border-radius);
 	--svelte-ui-popup-mobile-margin: 16px;
 	--svelte-ui-popup-mobile-border-radius: 12px;
 	--svelte-ui-popup-focus-color: var(--svelte-ui-primary-color);

package/dist/components/Checkbox.svelte

@@ -28,13 +28,17 @@
 
 		// HTML属性系
 		id?: string;
+
 		// スタイル/レイアウト
 		/** Checkbox size. @default 'medium' */
 		size?: 'small' | 'medium' | 'large';
+		customStyle?: string;
 
 		// 状態/動作
 		/** Disables the checkbox. @default false */
 		disabled?: boolean;
+		/** Stretches the checkbox to fill its container width. @default false */
+		fullWidth?: boolean;
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
@@ -95,9 +99,11 @@
 
 		// スタイル/レイアウト
 		size = 'medium',
+		customStyle = '',
 
 		// 状態/動作
 		disabled = false,
+		fullWidth = false,
 		required = false,
 
 		// ARIA/アクセシビリティ
@@ -281,6 +287,7 @@
 			'checkbox',
 			`checkbox--${size}`,
 			disabled && 'checkbox--disabled',
+			fullWidth && 'checkbox--full-width',
 			reducedMotion && 'checkbox--no-motion'
 		]
 			.filter(Boolean)
@@ -288,7 +295,7 @@
 	);
 </script>
 
-<div class={containerClasses} data-testid="checkbox">
+<label class={containerClasses} style={customStyle} data-testid="checkbox">
 	<input
 		type="checkbox"
 		bind:checked={value}
@@ -326,14 +333,14 @@
 		onchange={handleChange}
 		{...restProps}
 	/>
-	<label for={id} class="checkbox__icon"></label>
+	<span class="checkbox__icon"></span>
 
 	{#if children}
-		<label for={id} class="checkbox__label">
+		<span class="checkbox__label">
 			{@render children()}
-		</label>
+		</span>
 	{/if}
-</div>
+</label>
 
 <style>
 	/* =========================================================================
@@ -342,11 +349,12 @@
 
 	.checkbox {
 		display: inline-flex;
-		align-items: center;
+		align-items: flex-start;
 		width: fit-content;
 		min-height: var(--svelte-ui-checkbox-min-height);
 		vertical-align: top;
 		contain: layout;
+		cursor: pointer;
 	}
 
 	.checkbox input[type='checkbox'] {
@@ -355,20 +363,18 @@
 		height: 16px;
 		margin: 0;
 		opacity: 0;
-		cursor: pointer;
 	}
 
 	/* Label */
 	.checkbox__label {
 		display: block;
 		padding-left: var(--svelte-ui-checkbox-gap);
-		white-space: nowrap;
 		font-size: inherit;
 		color: inherit;
 		line-height: var(--svelte-ui-checkbox-line-height);
-		cursor: pointer;
 		text-box-trim: trim-both;
 		text-box-edge: cap alphabetic;
+		margin-block: calc((var(--svelte-ui-checkbox-min-height) - 1cap) / 2);
 	}
 
 	/* Checkbox box */
@@ -382,7 +388,7 @@
 		transition-property: background-color, border-color, opacity;
 		transition-duration: var(--svelte-ui-transition-duration);
 		flex-shrink: 0;
-		cursor: pointer;
+		margin-block: calc((var(--svelte-ui-checkbox-min-height) - var(--svelte-ui-checkbox-size)) / 2);
 	}
 
 	/* Check mark */
@@ -420,13 +426,19 @@
 	   ========================================================================= */
 
 	/* Disabled state */
+	.checkbox--full-width {
+		width: 100%;
+	}
+
+	.checkbox--full-width .checkbox__label {
+		flex: 1;
+	}
+
 	.checkbox--disabled {
 		opacity: var(--svelte-ui-button-disabled-opacity);
 	}
 
-	.checkbox--disabled input[type='checkbox'],
-	.checkbox--disabled .checkbox__icon,
-	.checkbox--disabled .checkbox__label {
+	.checkbox--disabled {
 		cursor: not-allowed;
 	}
 
@@ -480,12 +492,19 @@
 	.checkbox--small .checkbox__icon {
 		width: var(--svelte-ui-checkbox-size-sm);
 		height: var(--svelte-ui-checkbox-size-sm);
+		margin-block: calc(
+			(var(--svelte-ui-checkbox-min-height-sm) - var(--svelte-ui-checkbox-size-sm)) / 2
+		);
 	}
 
 	.checkbox--small .checkbox__icon::after {
 		font-size: var(--svelte-ui-checkbox-icon-size-sm);
 	}
 
+	.checkbox--small .checkbox__label {
+		margin-block: calc((var(--svelte-ui-checkbox-min-height-sm) - 1cap) / 2);
+	}
+
 	.checkbox--large {
 		font-size: inherit;
 	}
@@ -493,12 +512,19 @@
 	.checkbox--large .checkbox__icon {
 		width: var(--svelte-ui-checkbox-size-lg);
 		height: var(--svelte-ui-checkbox-size-lg);
+		margin-block: calc(
+			(var(--svelte-ui-checkbox-min-height-lg) - var(--svelte-ui-checkbox-size-lg)) / 2
+		);
 	}
 
 	.checkbox--large .checkbox__icon::after {
 		font-size: var(--svelte-ui-checkbox-icon-size-lg);
 	}
 
+	.checkbox--large .checkbox__label {
+		margin-block: calc((var(--svelte-ui-checkbox-min-height-lg) - 1cap) / 2);
+	}
+
 	/* =========================================================================
 	 * Motion & Media Queries
 	 * ========================================================================= */

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

@@ -12,8 +12,11 @@ export type CheckboxProps = {
     id?: string;
     /** Checkbox size. @default 'medium' */
     size?: 'small' | 'medium' | 'large';
+    customStyle?: string;
     /** Disables the checkbox. @default false */
     disabled?: boolean;
+    /** Stretches the checkbox to fill its container width. @default false */
+    fullWidth?: boolean;
     required?: boolean;
     /** Disables animations for users who prefer reduced motion. @default false */
     reducedMotion?: boolean;

package/dist/components/Combobox.svelte

@@ -562,7 +562,6 @@
 		width: max-content;
 		max-width: var(--svelte-ui-combobox-max-width);
 		background: var(--svelte-ui-combobox-bg);
-		border-radius: var(--svelte-ui-combobox-border-radius);
 		max-height: var(--svelte-ui-combobox-options-max-height);
 		overflow-y: auto;
 		margin: 0;

package/dist/components/Input.svelte

@@ -919,15 +919,20 @@
 		color: inherit;
 		line-height: inherit;
 		text-align: inherit;
-		white-space: nowrap;
-		overflow: hidden;
-		text-overflow: ellipsis;
 		opacity: 1;
 		transition: none;
 	}
 
 	.input__display-text-content {
 		width: 100%;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	.input__link-text-content {
+		width: 100%;
+		overflow: hidden;
+		white-space: nowrap;
 	}
 
 	.input__link-text {

package/dist/components/MultiSelect.svelte

@@ -0,0 +1,379 @@
+<!-- MultiSelect.svelte -->
+
+<script lang="ts">
+	import Popup from './Popup.svelte';
+	import Checkbox from './Checkbox.svelte';
+	import Icon from './Icon.svelte';
+	import { t } from '../i18n';
+	import type { Option, OptionValue } from '../types/options';
+	import type { BivariantValueHandler, FocusHandler } from '../types/callbackHandlers';
+	import type { PopupPosition } from '../types/propOptions';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	export type MultiSelectProps = {
+		// 基本プロパティ
+		name?: string;
+		/** Selected values array. Supports `bind:values`. */
+		values: OptionValue[];
+		/** `{ label, value, disabled? }[]` */
+		options: Option[];
+
+		// HTML属性系
+		id?: string | null;
+		ariaLabel?: string;
+		tabindex?: number | null;
+		placeholder?: string;
+
+		// スタイル/レイアウト
+		/** Renders inline. @default false */
+		inline?: boolean;
+		/** @default 'outline' */
+		focusStyle?: 'background' | 'outline' | 'none';
+		fullWidth?: boolean;
+		rounded?: boolean;
+
+		// 状態/動作
+		disabled?: boolean;
+		required?: boolean;
+
+		// ポップアップ
+		/** @default 'bottom-left' */
+		position?: PopupPosition;
+
+		// イベントハンドラ
+		onfocus?: FocusHandler;
+		onblur?: FocusHandler;
+		onchange?: BivariantValueHandler<OptionValue[]>;
+	};
+
+	let {
+		name,
+		values = $bindable([]),
+		options = [],
+
+		id = `multi-select-${Math.random().toString(36).substring(2, 15)}`,
+		ariaLabel,
+		tabindex = null,
+		placeholder = '',
+
+		inline = false,
+		focusStyle = 'outline',
+		fullWidth = false,
+		rounded = false,
+
+		disabled = false,
+		required = false,
+
+		position = 'bottom-left',
+
+		onfocus = () => {},
+		onblur = () => {},
+		onchange = () => {}
+	}: MultiSelectProps = $props();
+
+	let popupRef = $state<any>();
+	let triggerEl = $state<HTMLButtonElement>();
+	let isPopupOpen = $state(false);
+	let triggerWidth = $state(0);
+	let isFocused = $state(false);
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const listboxId = $derived(`${id}-listbox`);
+
+	const selectedLabels = $derived(
+		options.filter((o) => values.includes(o.value)).map((o) => o.label)
+	);
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+	const toggleOption = (optionValue: OptionValue) => {
+		if (values.includes(optionValue)) {
+			values = values.filter((v) => v !== optionValue);
+		} else {
+			values = [...values, optionValue];
+		}
+		onchange(values);
+	};
+
+	const handleTriggerClick = () => {
+		if (disabled) return;
+		popupRef?.toggle();
+	};
+
+	const handleTriggerKeydown = (event: KeyboardEvent) => {
+		if (disabled) return;
+		if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
+			event.preventDefault();
+			popupRef?.open();
+		}
+	};
+
+	const handleFocus = (event: FocusEvent) => {
+		if (disabled) return;
+		isFocused = true;
+		onfocus(event);
+	};
+
+	const handleBlur = (event: FocusEvent) => {
+		if (disabled) return;
+		isFocused = false;
+		onblur(event);
+	};
+
+	const handlePopupOpen = () => {
+		triggerWidth = triggerEl?.offsetWidth ?? 0;
+	};
+
+	const handlePopupClose = () => {
+		triggerEl?.focus();
+	};
+</script>
+
+<div
+	class="multi-select multi-select--focus-{focusStyle}"
+	class:multi-select--inline={inline}
+	class:multi-select--full-width={fullWidth}
+	class:multi-select--disabled={disabled}
+	class:multi-select--focused={isFocused}
+	class:multi-select--rounded={rounded}
+	data-testid="multi-select"
+>
+	<button
+		bind:this={triggerEl}
+		{id}
+		type="button"
+		class="multi-select__trigger"
+		role="combobox"
+		aria-expanded={isPopupOpen}
+		aria-haspopup="listbox"
+		aria-controls={isPopupOpen ? listboxId : undefined}
+		aria-label={ariaLabel ?? t('multiSelect.accessibleName')}
+		aria-required={required ? 'true' : undefined}
+		{tabindex}
+		{disabled}
+		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>
+		{:else if placeholder}
+			<span class="multi-select__placeholder">{placeholder}</span>
+		{/if}
+	</button>
+	<div class="multi-select__dropdown-icon" aria-hidden="true">
+		<Icon>arrow_drop_down</Icon>
+	</div>
+
+	<Popup
+		bind:this={popupRef}
+		bind:isOpen={isPopupOpen}
+		anchorElement={triggerEl}
+		{position}
+		mobileFullscreen={true}
+		onOpen={handlePopupOpen}
+		onClose={handlePopupClose}
+		margin={4}
+	>
+		<ul
+			id={listboxId}
+			class="multi-select__options"
+			role="listbox"
+			aria-multiselectable="true"
+			aria-label={ariaLabel ?? t('multiSelect.accessibleName')}
+			style:min-width="{triggerWidth}px"
+		>
+			{#each options as option, i (option.value)}
+				<li role="presentation" class="multi-select__item">
+					<Checkbox
+						value={values.includes(option.value)}
+						disabled={option.disabled}
+						fullWidth
+						customStyle="padding: 8px 12px"
+						onchange={() => toggleOption(option.value)}
+					>
+						{option.label}
+					</Checkbox>
+				</li>
+			{/each}
+		</ul>
+	</Popup>
+</div>
+
+<style>@charset "UTF-8";
+/* =============================================
+ * 基本構造・レイアウト
+ * ============================================= */
+.multi-select {
+  display: inline-block;
+  position: relative;
+  width: auto;
+  max-width: 100%;
+  vertical-align: top;
+}
+
+/* =============================================
+ * トリガーボタン
+ * ============================================= */
+.multi-select__trigger {
+  width: 100%;
+  min-height: var(--svelte-ui-select-height);
+  padding: var(--svelte-ui-select-padding);
+  padding-right: var(--svelte-ui-select-icon-space);
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: inherit;
+  line-height: inherit;
+  text-align: left;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.multi-select__trigger:focus, .multi-select__trigger:focus-visible {
+  outline: var(--svelte-ui-focus-outline-inner);
+  outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+}
+
+.multi-select__display-text {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0 0.5em;
+  flex: 1;
+}
+
+.multi-select__placeholder {
+  color: var(--svelte-ui-select-placeholder-color);
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.multi-select__dropdown-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  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;
+}
+
+/* =============================================
+ * レイアウトバリエーション
+ * ============================================= */
+.multi-select--full-width {
+  width: 100%;
+}
+
+/* =============================================
+ * フォーカス効果バリエーション
+ * ============================================= */
+.multi-select--focus-outline .multi-select__trigger:focus {
+  outline: var(--svelte-ui-focus-outline-inner);
+  outline-offset: var(--svelte-ui-focus-outline-offset-inner);
+}
+
+.multi-select--focus-background .multi-select__trigger:focus {
+  background: var(--svelte-ui-hover-overlay);
+}
+
+/* =============================================
+ * 状態管理
+ * ============================================= */
+.multi-select--disabled {
+  opacity: var(--svelte-ui-input-disabled-opacity);
+  cursor: not-allowed;
+}
+.multi-select--disabled .multi-select__trigger {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* =============================================
+ * デザインバリアント：default
+ * ============================================= */
+.multi-select:not(.multi-select--inline) .multi-select__trigger {
+  min-height: var(--svelte-ui-select-height);
+  background-color: var(--svelte-ui-select-bg);
+  box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-select-border-color);
+  border: none;
+  border-radius: var(--svelte-ui-select-border-radius);
+  font-size: 1rem;
+}
+
+/* =============================================
+ * デザインバリアント：inline
+ * ============================================= */
+.multi-select.multi-select--inline .multi-select__trigger {
+  padding: inherit;
+  padding-right: var(--svelte-ui-input-icon-space-inline);
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+  min-height: auto;
+  line-height: inherit;
+}
+.multi-select.multi-select--inline .multi-select__dropdown-icon {
+  right: 0;
+}
+
+/* =============================================
+ * デザインバリアント：rounded
+ * ============================================= */
+.multi-select--rounded:not(.multi-select--inline) .multi-select__trigger {
+  border-radius: var(--svelte-ui-select-border-radius-rounded);
+}
+
+/* =============================================
+ * オプションリスト（ポップアップ内）
+ * ============================================= */
+.multi-select__options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-width: 160px;
+  max-height: var(--svelte-ui-combobox-options-max-height);
+  overflow-y: auto;
+}
+
+.multi-select__item {
+  position: relative;
+  padding: 0;
+  margin: 0;
+}
+@media (hover: hover) {
+  .multi-select__item:hover :global(.checkbox:not(.checkbox--disabled)) {
+    background-color: var(--svelte-ui-hover-overlay);
+  }
+}
+
+.multi-select__option-cover {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+.multi-select__option-cover--disabled {
+  cursor: not-allowed;
+}</style>

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

@@ -0,0 +1,30 @@
+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[];
+    /** `{ label, value, disabled? }[]` */
+    options: Option[];
+    id?: string | null;
+    ariaLabel?: string;
+    tabindex?: number | null;
+    placeholder?: string;
+    /** Renders inline. @default false */
+    inline?: boolean;
+    /** @default 'outline' */
+    focusStyle?: 'background' | 'outline' | 'none';
+    fullWidth?: boolean;
+    rounded?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    /** @default 'bottom-left' */
+    position?: PopupPosition;
+    onfocus?: FocusHandler;
+    onblur?: FocusHandler;
+    onchange?: BivariantValueHandler<OptionValue[]>;
+};
+declare const MultiSelect: import("svelte").Component<MultiSelectProps, {}, "values">;
+type MultiSelect = ReturnType<typeof MultiSelect>;
+export default MultiSelect;

package/dist/components/Popup.svelte

@@ -553,9 +553,10 @@
 <style>@charset "UTF-8";
 :popover-open {
   border: solid 1px var(--svelte-ui-border-weak-color);
-  border-radius: 4px;
+  border-radius: var(--svelte-ui-popup-border-radius);
   box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
   background: var(--svelte-ui-surface-color);
+  color: var(--svelte-ui-text-color);
   z-index: 1000; /* Popupを最前面に表示 */
 }
 

package/dist/components/Radio.svelte

@@ -30,13 +30,17 @@
 
 		// HTML属性系
 		id?: string;
+
 		// スタイル/レイアウト
 		/** Radio button size. @default 'medium' */
 		size?: 'small' | 'medium' | 'large';
+		customStyle?: string;
 
 		// 状態/動作
 		/** Disables this radio button. @default false */
 		disabled?: boolean;
+		/** Stretches the radio to fill its container width. @default false */
+		fullWidth?: boolean;
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
@@ -97,9 +101,11 @@
 
 		// スタイル/レイアウト
 		size = 'medium',
+		customStyle = '',
 
 		// 状態/動作
 		disabled = false,
+		fullWidth = false,
 		required = false,
 
 		// ARIA/アクセシビリティ
@@ -310,13 +316,19 @@
 	const isChecked: boolean = $derived(currentValue === value);
 
 	const containerClasses = $derived(
-		['radio', `radio--${size}`, disabled && 'radio--disabled', reducedMotion && 'radio--no-motion']
+		[
+			'radio',
+			`radio--${size}`,
+			disabled && 'radio--disabled',
+			fullWidth && 'radio--full-width',
+			reducedMotion && 'radio--no-motion'
+		]
 			.filter(Boolean)
 			.join(' ')
 	);
 </script>
 
-<div class={containerClasses} data-testid="radio">
+<label class={containerClasses} style={customStyle} data-testid="radio">
 	<input
 		type="radio"
 		checked={isChecked}
@@ -352,14 +364,14 @@
 		onchange={handleChange}
 		{...restProps}
 	/>
-	<label for={id} class="radio__icon"></label>
+	<span class="radio__icon"></span>
 
 	{#if children}
-		<label for={id} class="radio__label">
+		<span class="radio__label">
 			{@render children()}
-		</label>
+		</span>
 	{/if}
-</div>
+</label>
 
 <style>
 	/* =============================================
@@ -368,11 +380,12 @@
 
 	.radio {
 		display: inline-flex;
-		align-items: center;
+		align-items: flex-start;
 		width: fit-content;
 		min-height: var(--svelte-ui-radio-min-height);
 		vertical-align: top;
 		contain: layout;
+		cursor: pointer;
 	}
 
 	.radio input[type='radio'] {
@@ -382,20 +395,18 @@
 		margin: 0;
 		line-height: 1px;
 		opacity: 0;
-		cursor: pointer;
 	}
 
 	/* Label */
 	.radio__label {
 		display: block;
 		padding-left: var(--svelte-ui-radio-gap);
-		white-space: nowrap;
 		font-size: inherit;
 		color: inherit;
 		line-height: var(--svelte-ui-radio-line-height);
-		cursor: pointer;
 		text-box-trim: trim-both;
 		text-box-edge: cap alphabetic;
+		margin-block: calc((var(--svelte-ui-radio-min-height) - 1cap) / 2);
 	}
 
 	/* Icon */
@@ -404,11 +415,11 @@
 		display: flex;
 		align-items: center;
 		width: var(--svelte-ui-radio-size);
-		white-space: nowrap;
+		height: var(--svelte-ui-radio-size);
 		font-size: inherit;
 		color: inherit;
-		cursor: pointer;
-		min-height: var(--svelte-ui-radio-min-height);
+		flex-shrink: 0;
+		margin-block: calc((var(--svelte-ui-radio-min-height) - var(--svelte-ui-radio-size)) / 2);
 	}
 
 	.radio__icon::before,
@@ -453,13 +464,19 @@
 	/* =============================================
    * Status
    * ============================================= */
+	.radio--full-width {
+		width: 100%;
+	}
+
+	.radio--full-width .radio__label {
+		flex: 1;
+	}
+
 	.radio--disabled {
 		opacity: var(--svelte-ui-button-disabled-opacity);
 	}
 
-	.radio--disabled input[type='radio'],
-	.radio--disabled .radio__icon,
-	.radio--disabled .radio__label {
+	.radio--disabled {
 		cursor: not-allowed;
 	}
 
@@ -493,7 +510,12 @@
 
 	.radio--small .radio__icon {
 		width: var(--svelte-ui-radio-size-sm);
-		min-height: var(--svelte-ui-radio-min-height-sm);
+		height: var(--svelte-ui-radio-size-sm);
+		margin-block: calc((var(--svelte-ui-radio-min-height-sm) - var(--svelte-ui-radio-size-sm)) / 2);
+	}
+
+	.radio--small .radio__label {
+		margin-block: calc((var(--svelte-ui-radio-min-height-sm) - 1cap) / 2);
 	}
 
 	.radio--small .radio__icon::after {
@@ -517,7 +539,12 @@
 
 	.radio--large .radio__icon {
 		width: var(--svelte-ui-radio-size-lg);
-		min-height: var(--svelte-ui-radio-min-height-lg);
+		height: var(--svelte-ui-radio-size-lg);
+		margin-block: calc((var(--svelte-ui-radio-min-height-lg) - var(--svelte-ui-radio-size-lg)) / 2);
+	}
+
+	.radio--large .radio__label {
+		margin-block: calc((var(--svelte-ui-radio-min-height-lg) - 1cap) / 2);
 	}
 
 	.radio--large .radio__icon::after {

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

@@ -13,8 +13,11 @@ export type RadioProps = {
     id?: string;
     /** Radio button size. @default 'medium' */
     size?: 'small' | 'medium' | 'large';
+    customStyle?: string;
     /** Disables this radio button. @default false */
     disabled?: boolean;
+    /** Stretches the radio to fill its container width. @default false */
+    fullWidth?: boolean;
     required?: boolean;
     /** Disables animations for users who prefer reduced motion. @default false */
     reducedMotion?: boolean;

package/dist/components/Switch.svelte

@@ -26,9 +26,12 @@
 		// スタイル/レイアウト
 		/** @default 'medium' */
 		size?: 'small' | 'medium' | 'large';
+		customStyle?: string;
 
 		// 状態/動作
 		disabled?: boolean;
+		/** Stretches the switch to fill its container width. @default false */
+		fullWidth?: boolean;
 		required?: boolean;
 
 		// ARIA/アクセシビリティ
@@ -87,9 +90,11 @@
 
 		// スタイル/レイアウト
 		size = 'medium',
+		customStyle = '',
 
 		// 状態/動作
 		disabled = false,
+		fullWidth = false,
 		required = false,
 
 		// ARIA/アクセシビリティ
@@ -271,14 +276,16 @@
 	};
 </script>
 
-<div
+<label
 	class="switch"
 	class:switch--small={size === 'small'}
 	class:switch--medium={size === 'medium'}
 	class:switch--large={size === 'large'}
 	class:switch--disabled={disabled}
+	class:switch--full-width={fullWidth}
 	class:switch--checked={value}
 	class:switch--reduced-motion={reducedMotion}
+	style={customStyle}
 	data-testid="switch"
 >
 	<input
@@ -316,16 +323,16 @@
 		{...restProps}
 	/>
 
-	<label for={id} class="switch__track">
+	<span class="switch__track">
 		<span class="switch-thumb"></span>
-	</label>
+	</span>
 
-	<label for={id} class="switch__label" class:switch__label--disabled={disabled}>
+	<span class="switch__label" class:switch__label--disabled={disabled}>
 		{#if children}
 			{@render children()}
 		{/if}
-	</label>
-</div>
+	</span>
+</label>
 
 <style>@charset "UTF-8";
 /* =============================================
@@ -333,9 +340,19 @@
   * ============================================= */
 .switch {
   display: inline-flex;
-  align-items: center;
+  align-items: flex-start;
   width: fit-content;
+  min-height: var(--svelte-ui-switch-min-height);
   contain: layout;
+  cursor: pointer;
+}
+
+.switch--full-width {
+  width: 100%;
+}
+
+.switch--full-width .switch__label {
+  flex: 1;
 }
 
 .switch--disabled {
@@ -358,15 +375,13 @@
 .switch__label {
   display: block;
   padding-left: var(--svelte-ui-switch-gap);
-  white-space: nowrap;
   line-height: var(--svelte-ui-checkbox-line-height);
-  cursor: pointer;
   text-box-trim: trim-both;
   text-box-edge: cap alphabetic;
   user-select: none;
+  margin-block: calc((var(--svelte-ui-switch-min-height) - 1cap) / 2);
 }
 .switch__label--disabled {
-  cursor: not-allowed;
   opacity: 0.5;
 }
 
@@ -378,7 +393,7 @@
   border-radius: var(--switch-border-radius);
   transition: background-color var(--svelte-ui-transition-duration) ease, filter var(--svelte-ui-transition-duration) ease;
   flex-shrink: 0;
-  cursor: pointer;
+  margin-block: calc((var(--svelte-ui-switch-min-height) - var(--switch-height, var(--svelte-ui-switch-height))) / 2);
 }
 .switch--checked .switch__track {
   background-color: var(--switch-active-color, var(--svelte-ui-switch-active-color));
@@ -412,6 +427,15 @@
   --switch-thumb-margin: var(--svelte-ui-switch-thumb-margin);
   --switch-border-radius: var(--svelte-ui-switch-border-radius);
   --switch-thumb-border-radius: var(--svelte-ui-switch-thumb-border-radius);
+  min-height: var(--svelte-ui-switch-min-height-sm);
+}
+
+.switch--small .switch__track {
+  margin-block: calc((var(--svelte-ui-switch-min-height-sm) - var(--svelte-ui-switch-height-sm)) / 2);
+}
+
+.switch--small .switch__label {
+  margin-block: calc((var(--svelte-ui-switch-min-height-sm) - 1cap) / 2);
 }
 
 .switch--medium {
@@ -430,6 +454,15 @@
   --switch-thumb-margin: var(--svelte-ui-switch-thumb-margin);
   --switch-border-radius: var(--svelte-ui-switch-border-radius);
   --switch-thumb-border-radius: var(--svelte-ui-switch-thumb-border-radius);
+  min-height: var(--svelte-ui-switch-min-height-lg);
+}
+
+.switch--large .switch__track {
+  margin-block: calc((var(--svelte-ui-switch-min-height-lg) - var(--svelte-ui-switch-height-lg)) / 2);
+}
+
+.switch--large .switch__label {
+  margin-block: calc((var(--svelte-ui-switch-min-height-lg) - 1cap) / 2);
 }
 
 /* =============================================
@@ -448,12 +481,30 @@
   .switch {
     min-height: var(--svelte-ui-touch-target);
   }
+  .switch__track {
+    margin-block: calc((var(--svelte-ui-touch-target) - var(--switch-height, var(--svelte-ui-switch-height))) / 2);
+  }
+  .switch__label {
+    margin-block: calc((var(--svelte-ui-touch-target) - 1cap) / 2);
+  }
   .switch--small {
     min-height: var(--svelte-ui-touch-target-sm);
   }
+  .switch--small .switch__track {
+    margin-block: calc((var(--svelte-ui-touch-target-sm) - var(--switch-height, var(--svelte-ui-switch-height-sm))) / 2);
+  }
+  .switch--small .switch__label {
+    margin-block: calc((var(--svelte-ui-touch-target-sm) - 1cap) / 2);
+  }
   .switch--large {
     min-height: var(--svelte-ui-touch-target-lg);
   }
+  .switch--large .switch__track {
+    margin-block: calc((var(--svelte-ui-touch-target-lg) - var(--switch-height, var(--svelte-ui-switch-height-lg))) / 2);
+  }
+  .switch--large .switch__label {
+    margin-block: calc((var(--svelte-ui-touch-target-lg) - 1cap) / 2);
+  }
 }
 .switch--reduced-motion * {
   transition: none !important;

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

@@ -7,7 +7,10 @@ export type SwitchProps = {
     id?: string;
     /** @default 'medium' */
     size?: 'small' | 'medium' | 'large';
+    customStyle?: string;
     disabled?: boolean;
+    /** Stretches the switch to fill its container width. @default false */
+    fullWidth?: boolean;
     required?: boolean;
     /** Disables animations for accessibility. @default false */
     reducedMotion?: boolean;

package/dist/components/Textarea.svelte

@@ -699,12 +699,6 @@
 		transition: none;
 		overflow-y: auto;
 		overflow-x: hidden;
-		scrollbar-width: none; /* Firefox */
-		-ms-overflow-style: none; /* IE and Edge */
-
-		&::-webkit-scrollbar {
-			display: none; /* Chrome, Safari, Opera */
-		}
 
 		&::before {
 			content: '';
@@ -715,6 +709,20 @@
 		}
 	}
 
+	/* display-text: スクロールバーの幅を確保しつつ透明にする（textarea と幅を一致させる） */
+	.textarea__display-text {
+		scrollbar-color: transparent transparent;
+	}
+
+	/* link-text: 絶対配置のオーバーレイなのでスクロールバーを完全に非表示 */
+	.textarea__link-text {
+		scrollbar-width: none;
+
+		&::-webkit-scrollbar {
+			display: none;
+		}
+	}
+
 	/* クリック可能なリンク用オーバーレイ */
 	.textarea__link-text {
 		position: absolute;

package/dist/i18n/index.d.ts

@@ -33,6 +33,10 @@ export declare const TRANSLATIONS: {
         readonly select: {
             readonly accessibleName: "Select option";
         };
+        readonly multiSelect: {
+            readonly accessibleName: "Select options";
+            readonly placeholder: "Select options";
+        };
         readonly slider: {
             readonly accessibleName: "Slider";
         };
@@ -88,6 +92,10 @@ export declare const TRANSLATIONS: {
         readonly select: {
             readonly accessibleName: "選択";
         };
+        readonly multiSelect: {
+            readonly accessibleName: "複数選択";
+            readonly placeholder: "選択してください";
+        };
         readonly slider: {
             readonly accessibleName: "スライダー";
         };
@@ -143,6 +151,10 @@ export declare const TRANSLATIONS: {
         readonly select: {
             readonly accessibleName: "Choisir une option";
         };
+        readonly multiSelect: {
+            readonly accessibleName: "Sélectionner des options";
+            readonly placeholder: "Sélectionnez des options";
+        };
         readonly slider: {
             readonly accessibleName: "Curseur";
         };
@@ -198,6 +210,10 @@ export declare const TRANSLATIONS: {
         readonly select: {
             readonly accessibleName: "Option auswählen";
         };
+        readonly multiSelect: {
+            readonly accessibleName: "Optionen auswählen";
+            readonly placeholder: "Bitte wählen";
+        };
         readonly slider: {
             readonly accessibleName: "Schieberegler";
         };
@@ -253,6 +269,10 @@ export declare const TRANSLATIONS: {
         readonly select: {
             readonly accessibleName: "Seleccionar opción";
         };
+        readonly multiSelect: {
+            readonly accessibleName: "Seleccionar opciones";
+            readonly placeholder: "Seleccione opciones";
+        };
         readonly slider: {
             readonly accessibleName: "Control deslizante";
         };
@@ -308,6 +328,10 @@ export declare const TRANSLATIONS: {
         readonly select: {
             readonly accessibleName: "选择";
         };
+        readonly multiSelect: {
+            readonly accessibleName: "多选";
+            readonly placeholder: "请选择";
+        };
         readonly slider: {
             readonly accessibleName: "滑块";
         };

package/dist/i18n/locales/de.d.ts

@@ -31,6 +31,10 @@ export declare const de: {
     readonly select: {
         readonly accessibleName: "Option auswählen";
     };
+    readonly multiSelect: {
+        readonly accessibleName: "Optionen auswählen";
+        readonly placeholder: "Bitte wählen";
+    };
     readonly slider: {
         readonly accessibleName: "Schieberegler";
     };

package/dist/i18n/locales/de.js

@@ -31,6 +31,10 @@ export const de = {
     select: {
         accessibleName: 'Option auswählen'
     },
+    multiSelect: {
+        accessibleName: 'Optionen auswählen',
+        placeholder: 'Bitte wählen'
+    },
     slider: {
         accessibleName: 'Schieberegler'
     },

package/dist/i18n/locales/en.d.ts

@@ -31,6 +31,10 @@ export declare const en: {
     readonly select: {
         readonly accessibleName: "Select option";
     };
+    readonly multiSelect: {
+        readonly accessibleName: "Select options";
+        readonly placeholder: "Select options";
+    };
     readonly slider: {
         readonly accessibleName: "Slider";
     };

package/dist/i18n/locales/en.js

@@ -31,6 +31,10 @@ export const en = {
     select: {
         accessibleName: 'Select option'
     },
+    multiSelect: {
+        accessibleName: 'Select options',
+        placeholder: 'Select options'
+    },
     slider: {
         accessibleName: 'Slider'
     },

package/dist/i18n/locales/es.d.ts

@@ -31,6 +31,10 @@ export declare const es: {
     readonly select: {
         readonly accessibleName: "Seleccionar opción";
     };
+    readonly multiSelect: {
+        readonly accessibleName: "Seleccionar opciones";
+        readonly placeholder: "Seleccione opciones";
+    };
     readonly slider: {
         readonly accessibleName: "Control deslizante";
     };

package/dist/i18n/locales/es.js

@@ -31,6 +31,10 @@ export const es = {
     select: {
         accessibleName: 'Seleccionar opción'
     },
+    multiSelect: {
+        accessibleName: 'Seleccionar opciones',
+        placeholder: 'Seleccione opciones'
+    },
     slider: {
         accessibleName: 'Control deslizante'
     },

package/dist/i18n/locales/fr.d.ts

@@ -31,6 +31,10 @@ export declare const fr: {
     readonly select: {
         readonly accessibleName: "Choisir une option";
     };
+    readonly multiSelect: {
+        readonly accessibleName: "Sélectionner des options";
+        readonly placeholder: "Sélectionnez des options";
+    };
     readonly slider: {
         readonly accessibleName: "Curseur";
     };

package/dist/i18n/locales/fr.js

@@ -31,6 +31,10 @@ export const fr = {
     select: {
         accessibleName: 'Choisir une option'
     },
+    multiSelect: {
+        accessibleName: 'Sélectionner des options',
+        placeholder: 'Sélectionnez des options'
+    },
     slider: {
         accessibleName: 'Curseur'
     },

package/dist/i18n/locales/ja.d.ts

@@ -31,6 +31,10 @@ export declare const ja: {
     readonly select: {
         readonly accessibleName: "選択";
     };
+    readonly multiSelect: {
+        readonly accessibleName: "複数選択";
+        readonly placeholder: "選択してください";
+    };
     readonly slider: {
         readonly accessibleName: "スライダー";
     };

package/dist/i18n/locales/ja.js

@@ -31,6 +31,10 @@ export const ja = {
     select: {
         accessibleName: '選択'
     },
+    multiSelect: {
+        accessibleName: '複数選択',
+        placeholder: '選択してください'
+    },
     slider: {
         accessibleName: 'スライダー'
     },

package/dist/i18n/locales/zh-cn.d.ts

@@ -31,6 +31,10 @@ export declare const zhCn: {
     readonly select: {
         readonly accessibleName: "选择";
     };
+    readonly multiSelect: {
+        readonly accessibleName: "多选";
+        readonly placeholder: "请选择";
+    };
     readonly slider: {
         readonly accessibleName: "滑块";
     };

package/dist/i18n/locales/zh-cn.js

@@ -31,6 +31,10 @@ export const zhCn = {
     select: {
         accessibleName: '选择'
     },
+    multiSelect: {
+        accessibleName: '多选',
+        placeholder: '请选择'
+    },
     slider: {
         accessibleName: '滑块'
     },

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export { default as ImageUploader } from './components/ImageUploader.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner.svelte';
 export { default as Modal } from './components/Modal.svelte';
+export { default as MultiSelect } from './components/MultiSelect.svelte';
 export { default as Pagination } from './components/Pagination.svelte';
 export { default as Popup } from './components/Popup.svelte';
 export { default as PopupMenu } from './components/PopupMenu.svelte';
@@ -55,6 +56,7 @@ export type { ImageUploaderPreviewProps } from './components/ImageUploaderPrevie
 export type { InputProps } from './components/Input.svelte';
 export type { LoadingSpinnerProps } from './components/LoadingSpinner.svelte';
 export type { ModalProps } from './components/Modal.svelte';
+export type { MultiSelectProps } from './components/MultiSelect.svelte';
 export type { PaginationProps } from './components/Pagination.svelte';
 export type { PopupProps } from './components/Popup.svelte';
 export type { PopupMenuProps } from './components/PopupMenu.svelte';

package/dist/index.js

@@ -17,6 +17,7 @@ export { default as ImageUploader } from './components/ImageUploader.svelte';
 export { default as Input } from './components/Input.svelte';
 export { default as LoadingSpinner } from './components/LoadingSpinner.svelte';
 export { default as Modal } from './components/Modal.svelte';
+export { default as MultiSelect } from './components/MultiSelect.svelte';
 export { default as Pagination } from './components/Pagination.svelte';
 export { default as Popup } from './components/Popup.svelte';
 export { default as PopupMenu } from './components/PopupMenu.svelte';

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.37",
+	"version": "0.0.38",
 	"type": "module",
 	"keywords": [
 		"svelte",