@14ch/svelte-ui 0.0.36 → 0.0.38

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