@14ch/svelte-ui 0.0.3 → 0.0.5

package/README.md

@@ -346,6 +346,12 @@ MIT License - see the [LICENSE](LICENSE) file for details.
 
 ## Changelog
 
+### v0.0.5
+
+- Improved TabItem hover behavior: replaced background color with indicator bar opacity change
+- TabItem now shows selected text color and indicator bar on hover for better visual feedback
+- Breaking change: Replaced `variant` prop with `inline` prop in Combobox, Datepicker, and Select components
+
 ### v0.0.3
 
 - Improved text vertical alignment in Button, Fab, TabItem, Checkbox, and Radio components using `text-box-trim`

package/dist/assets/styles/import.scss

@@ -7,5 +7,7 @@
 @use './variables';
 @use './core';
 
-/* Material Symbols font (required for Icon component) */
+/* Material Symbols fonts (required for Icon component) */
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

package/dist/assets/styles/variables.scss

@@ -404,9 +404,9 @@
 	--svelte-ui-checkbox-size: 16px;
 	--svelte-ui-checkbox-size-sm: 14px;
 	--svelte-ui-checkbox-size-lg: 20px;
-	--svelte-ui-checkbox-min-height: 20px;
-	--svelte-ui-checkbox-min-height-sm: 16px;
-	--svelte-ui-checkbox-min-height-lg: 24px;
+	--svelte-ui-checkbox-min-height: 1.8em;
+	--svelte-ui-checkbox-min-height-sm: 1.6em;
+	--svelte-ui-checkbox-min-height-lg: 2.2em;
 	--svelte-ui-checkbox-border-radius: 2px;
 	--svelte-ui-checkbox-border-width: 2px;
 	--svelte-ui-checkbox-gap: 8px;
@@ -457,11 +457,17 @@
 	--svelte-ui-radio-dot-size-lg: 10px;
 	--svelte-ui-radio-border-radius: var(--svelte-ui-border-radius-rounded);
 	--svelte-ui-radio-border-width: 2px;
-	--svelte-ui-radio-min-height: 20px;
-	--svelte-ui-radio-min-height-sm: 16px;
-	--svelte-ui-radio-min-height-lg: 24px;
+	--svelte-ui-radio-min-height: 1.8em;
+	--svelte-ui-radio-min-height-sm: 1.6em;
+	--svelte-ui-radio-min-height-lg: 2.2em;
 	--svelte-ui-radio-gap: 8px;
 	--svelte-ui-radio-line-height: 1.2em;
+
+	/* CheckboxGroup */
+	--svelte-ui-checkbox-group-gap: 0 24px;
+
+	/* RadioGroup */
+	--svelte-ui-radio-group-gap: 0 24px;
 	--svelte-ui-radio-disabled-opacity: var(--svelte-ui-disabled-opacity);
 	--svelte-ui-radio-border-color: var(--svelte-ui-border-color);
 	--svelte-ui-radio-bg-checked: var(--svelte-ui-radio-checked-color);

package/dist/components/Button.svelte

@@ -41,12 +41,12 @@
 		// 状態/動作
 		disabled = false,
 		loading = false,
-		reducedMotion = false,
 
 		// ARIA/アクセシビリティ
 		ariaLabel,
 		ariaDescribedby,
 		ariaExpanded,
+		reducedMotion = false,
 
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
@@ -113,12 +113,12 @@
 		// 状態/動作
 		disabled?: boolean;
 		loading?: boolean;
-		reducedMotion?: boolean;
 
 		// ARIA/アクセシビリティ
 		ariaLabel?: string;
 		ariaDescribedby?: string;
 		ariaExpanded?: boolean;
+		reducedMotion?: boolean;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference

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

@@ -22,10 +22,10 @@ type $$ComponentProps = {
     iconVariant?: IconVariant;
     disabled?: boolean;
     loading?: boolean;
-    reducedMotion?: boolean;
     ariaLabel?: string;
     ariaDescribedby?: string;
     ariaExpanded?: boolean;
+    reducedMotion?: boolean;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/Checkbox.svelte

@@ -26,6 +26,8 @@
 		// 状態/動作
 		disabled = false,
 		required = false,
+
+		// ARIA/アクセシビリティ
 		reducedMotion = false,
 
 		// 入力イベント
@@ -85,6 +87,8 @@
 		// 状態/動作
 		disabled?: boolean;
 		required?: boolean;
+
+		// ARIA/アクセシビリティ
 		reducedMotion?: boolean;
 
 		// 入力イベント

package/dist/components/CheckboxGroup.svelte

@@ -11,9 +11,17 @@
 
 		// スタイル/レイアウト
 		direction = 'vertical',
-		gap = '0',
+		gap,
 		wrap = false,
 		minOptionWidth,
+		size = 'medium',
+
+		// 状態/動作
+		disabled = false,
+		required = false,
+
+		// ARIA/アクセシビリティ
+		reducedMotion = false,
 
 		// 入力イベント
 		onchange = () => {} // No params for type inference
@@ -27,6 +35,14 @@
 		gap?: string | number;
 		wrap?: boolean;
 		minOptionWidth?: string | number;
+		size?: 'small' | 'medium' | 'large';
+
+		// 状態/動作
+		disabled?: boolean;
+		required?: boolean;
+
+		// ARIA/アクセシビリティ
+		reducedMotion?: boolean;
 
 		// 入力イベント
 		onchange?: (value: OptionValue[]) => void;
@@ -44,23 +60,30 @@
 		onchange(value);
 	};
 
-	const gapStyle = getStyleFromNumber(gap);
+	const gapStyle = gap !== undefined ? getStyleFromNumber(gap) : undefined;
 
 	const minOptionWidthStyle = getStyleFromNumber(minOptionWidth);
 </script>
 
 <ul
 	class="checkbox-group"
-	style="--flex-direction: {direction === 'vertical' ? 'column' : 'row'};
-    --gap: {gapStyle};
-    --wrap: {wrap ? 'wrap' : 'none'};
-    --min-option-width: {minOptionWidthStyle}
+	style="--svelte-ui-checkbox-group-flex-direction: {direction === 'vertical' ? 'column' : 'row'};
+    {gapStyle ? `--svelte-ui-checkbox-group-gap: ${gapStyle};` : ''}
+    --svelte-ui-checkbox-group-wrap: {wrap ? 'wrap' : 'none'};
+    --svelte-ui-checkbox-group-min-option-width: {minOptionWidthStyle}
     "
 >
 	{#each options as option (option.value)}
 		{#if localValues[option.value] !== undefined}
 			<li class="checkbox-group__option">
-				<Checkbox bind:value={localValues[option.value]} onchange={handleChange}>
+				<Checkbox
+					bind:value={localValues[option.value]}
+					{size}
+					{disabled}
+					{required}
+					{reducedMotion}
+					onchange={handleChange}
+				>
 					{option.label}
 				</Checkbox>
 			</li>
@@ -71,12 +94,12 @@
 <style>
 	.checkbox-group {
 		display: flex;
-		flex-direction: var(--flex-direction);
-		gap: var(--gap);
-		flex-wrap: var(--wrap);
+		flex-direction: var(--svelte-ui-checkbox-group-flex-direction);
+		gap: var(--svelte-ui-checkbox-group-gap);
+		flex-wrap: var(--svelte-ui-checkbox-group-wrap);
 	}
 
 	.checkbox-group__option {
-		min-width: var(--min-option-width);
+		min-width: var(--svelte-ui-checkbox-group-min-option-width);
 	}
 </style>

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

@@ -6,6 +6,10 @@ type $$ComponentProps = {
     gap?: string | number;
     wrap?: boolean;
     minOptionWidth?: string | number;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    required?: boolean;
+    reducedMotion?: boolean;
     onchange?: (value: OptionValue[]) => void;
 };
 declare const CheckboxGroup: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/Combobox.svelte

@@ -24,11 +24,11 @@
 
 		// スタイル/レイアウト
 		customStyle = '',
-		variant = 'default',
+		inline = false,
 		focusStyle = 'outline',
 		placeholder = '選択してください',
 		fullWidth = false,
-		minWidth = variant === 'inline' ? null : 120,
+		minWidth = inline ? null : 120,
 		maxWidth = null,
 		rounded = false,
 
@@ -92,7 +92,7 @@
 
 		// スタイル/レイアウト
 		customStyle?: string;
-		variant?: 'default' | 'inline';
+		inline?: boolean;
 		focusStyle?: 'background' | 'outline' | 'none';
 		placeholder?: string;
 		fullWidth?: boolean;
@@ -412,7 +412,7 @@
 		{name}
 		id={inputId}
 		{customStyle}
-		{variant}
+		{inline}
 		{focusStyle}
 		{placeholder}
 		{fullWidth}
@@ -420,7 +420,7 @@
 		{readonly}
 		{required}
 		{clearable}
-		rightIcon={variant !== 'inline' ? 'arrow_drop_down' : undefined}
+		rightIcon={inline ? undefined : 'arrow_drop_down'}
 		{tabindex}
 		{maxlength}
 		{rounded}

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

@@ -8,7 +8,7 @@ type $$ComponentProps = {
     tabindex?: number | null;
     maxlength?: number | null;
     customStyle?: string;
-    variant?: 'default' | 'inline';
+    inline?: boolean;
     focusStyle?: 'background' | 'outline' | 'none';
     placeholder?: string;
     fullWidth?: boolean;

package/dist/components/Datepicker.svelte

@@ -36,7 +36,7 @@
 		inputAttributes,
 
 		// スタイル/レイアウト
-		variant = 'default',
+		inline = false,
 		focusStyle = 'outline',
 		fullWidth = false,
 		rounded = false,
@@ -109,7 +109,7 @@
 		inputAttributes?: HTMLInputAttributes | undefined;
 
 		// スタイル/レイアウト
-		variant?: 'default' | 'inline';
+		inline?: boolean;
 		focusStyle?: 'background' | 'outline' | 'none';
 		fullWidth?: boolean;
 		rounded?: boolean;
@@ -502,7 +502,7 @@
 	<Input
 		bind:this={inputRef}
 		value={displayValue}
-		{variant}
+		{inline}
 		{focusStyle}
 		{fullWidth}
 		{rounded}

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

@@ -17,7 +17,7 @@ type $$ComponentProps = {
     rangeSeparator?: string;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
-    variant?: 'default' | 'inline';
+    inline?: boolean;
     focusStyle?: 'background' | 'outline' | 'none';
     fullWidth?: boolean;
     rounded?: boolean;

package/dist/components/FileUploader.svelte

@@ -230,6 +230,11 @@
 			value = dataTransfer.files;
 			onchange(value);
 		}
+
+		// input要素をリセット
+		if (fileInputRef) {
+			fileInputRef.value = '';
+		}
 	};
 
 	export const reset = () => {
@@ -252,8 +257,8 @@
 	class:file-uploader--hover={isHover}
 	class:rounded
 	style="
-		--file-uploader-width: {widthStyle};
-		--file-uploader-height: {height}px
+		--svelte-ui-file-uploader-width: {widthStyle};
+		--svelte-ui-file-uploader-height: {height}px
 	"
 	data-testid="file-uploader"
 	onclick={handleClick}
@@ -365,8 +370,8 @@
 		align-items: center;
 		gap: 16px;
 		position: relative;
-		width: var(--file-uploader-width, 100%);
-		height: var(--file-uploader-height);
+		width: var(--svelte-ui-file-uploader-width, 100%);
+		height: var(--svelte-ui-file-uploader-height);
 		min-height: 100px;
 		padding: 16px;
 		background-color: var(--svelte-ui-file-uploader-bg);

package/dist/components/Icon.svelte

@@ -111,11 +111,9 @@
 
 <style>
 	.material-symbols-outlined,
-	.material-symbols-filled,
 	.material-symbols-rounded,
 	.material-symbols-sharp {
 		display: block;
-		font-family: 'Material Symbols Outlined';
 		font-size: inherit;
 		color: inherit;
 		line-height: inherit;
@@ -129,6 +127,18 @@
 		transition-timing-function: ease;
 	}
 
+	.material-symbols-outlined {
+		font-family: 'Material Symbols Outlined';
+	}
+
+	.material-symbols-rounded {
+		font-family: 'Material Symbols Rounded';
+	}
+
+	.material-symbols-sharp {
+		font-family: 'Material Symbols Sharp';
+	}
+
 	/* font-variation-settings are controlled via inline styles for dynamic props */
 
 	.icon-fallback-text {

package/dist/components/IconButton.svelte

@@ -47,12 +47,12 @@
 		disabled = false,
 		loading = false,
 		pressed = false,
-		reducedMotion = false,
 
 		// ARIA/アクセシビリティ
 		ariaLabel,
 		ariaDescribedby,
 		ariaPressed,
+		reducedMotion = false,
 
 		// フォーカスイベント
 		onfocus = () => {}, // No params for type inference
@@ -125,12 +125,12 @@
 		disabled?: boolean;
 		loading?: boolean;
 		pressed?: boolean;
-		reducedMotion?: boolean;
 
 		// ARIA/アクセシビリティ
 		ariaLabel: string;
 		ariaDescribedby?: string;
 		ariaPressed?: boolean;
+		reducedMotion?: boolean;
 
 		// フォーカスイベント
 		onfocus?: Function; // No params for type inference

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

@@ -26,10 +26,10 @@ type $$ComponentProps = {
     disabled?: boolean;
     loading?: boolean;
     pressed?: boolean;
-    reducedMotion?: boolean;
     ariaLabel: string;
     ariaDescribedby?: string;
     ariaPressed?: boolean;
+    reducedMotion?: boolean;
     onfocus?: Function;
     onblur?: Function;
     onkeydown?: Function;

package/dist/components/ImageUploader.svelte

@@ -27,6 +27,7 @@
 		width = '120px',
 		height = '120px',
 		rounded = false,
+		previewStyle = 'framed',
 
 		// アイコン系
 		icon = 'add_photo_alternate',
@@ -39,7 +40,7 @@
 		removeFileAriaLabel = t('imageUploader.removeFile'),
 
 		// 状態/動作
-		adaptiveSize = false,
+		previewAdaptive = false,
 
 		// 入力イベント
 		onchange = () => {}, // No params for type inference
@@ -75,11 +76,11 @@
 		accept?: string;
 
 		// スタイル/レイアウト
-
 		width?: string | number;
 		height?: string | number;
 		rounded?: boolean;
-		adaptiveSize?: boolean;
+		previewStyle?: 'plain' | 'framed';
+		previewAdaptive?: boolean;
 
 		// アイコン系
 		icon?: string;
@@ -250,6 +251,11 @@
 			value = dataTransfer.files;
 			onchange(value);
 		}
+
+		// input要素をリセット
+		if (fileInputRef) {
+			fileInputRef.value = '';
+		}
 	};
 
 	const removeFile = (index: number) => {
@@ -307,8 +313,9 @@
 		{file}
 		{width}
 		{height}
-		{adaptiveSize}
+		{previewAdaptive}
 		{rounded}
+		{previewStyle}
 		id={id ? `${id}-preview-${index}` : undefined}
 		{removeFileAriaLabel}
 		onRemove={() => removeFile(index)}
@@ -319,17 +326,19 @@
 	class="image-uploader"
 	class:image-uploader--multiple={multiple}
 	class:image-uploader--rounded={rounded}
-	class:image-uploader--adaptive={adaptiveSize}
+	class:image-uploader--adaptive={previewAdaptive}
 	style="
-			--image-uploader-button-width: {previewWidthStyle};
-			--image-uploader-button-height: {previewHeightStyle};
+			--svelte-ui-image-uploader-button-width: {previewWidthStyle};
+			--svelte-ui-image-uploader-button-height: {previewHeightStyle};
 		"
 	data-testid="image-uploader"
 >
 	{#if multiple}
-		{#each value as file, index}
-			{@render preview(file, index)}
-		{/each}
+		{#if value}
+			{#each value as file, index}
+				{@render preview(file, index)}
+			{/each}
+		{/if}
 	{/if}
 	<button
 		bind:this={dropAreaRef}
@@ -427,8 +436,8 @@
 		align-items: center;
 		position: relative;
 		max-width: 100%;
-		min-width: var(--image-uploader-button-width);
-		min-height: var(--image-uploader-button-height);
+		min-width: var(--svelte-ui-image-uploader-button-width);
+		min-height: var(--svelte-ui-image-uploader-button-height);
 		padding: 16px;
 		background-color: var(--svelte-ui-form-bg);
 		border-radius: var(--svelte-ui-border-radius);

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

@@ -9,7 +9,8 @@ type $$ComponentProps = {
     width?: string | number;
     height?: string | number;
     rounded?: boolean;
-    adaptiveSize?: boolean;
+    previewStyle?: 'plain' | 'framed';
+    previewAdaptive?: boolean;
     icon?: string;
     iconSize?: number;
     iconFilled?: boolean;

package/dist/components/ImageUploaderPreview.svelte

@@ -3,27 +3,45 @@
 	import IconButton from './IconButton.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 
-	type ImagePreviewProps = {
-		file: File;
-		width?: string | number;
-		height?: string | number;
-		adaptiveSize?: boolean;
-		rounded?: boolean;
-		removeFileAriaLabel?: string;
-		onRemove: () => void;
-		id?: string;
-	};
-
 	let {
+		// 基本プロパティ
 		file,
+
+		// HTML属性系
+		id,
+
+		// スタイル/レイアウト
 		width = '120px',
 		height = '120px',
-		adaptiveSize = false,
+		previewAdaptive = false,
 		rounded = false,
+		previewStyle = 'framed',
+
+		// ARIA/アクセシビリティ
 		removeFileAriaLabel,
-		onRemove,
-		id
-	}: ImagePreviewProps = $props();
+
+		// 入力イベント
+		onRemove
+	}: {
+		// 基本プロパティ
+		file: File;
+
+		// HTML属性系
+		id?: string;
+
+		// スタイル/レイアウト
+		width?: string | number;
+		height?: string | number;
+		previewAdaptive?: boolean;
+		rounded?: boolean;
+		previewStyle?: 'plain' | 'framed';
+
+		// ARIA/アクセシビリティ
+		removeFileAriaLabel?: string;
+
+		// 入力イベント
+		onRemove: () => void;
+	} = $props();
 
 	let imageSizes = $state<Record<string, { width: number; height: number }>>({});
 
@@ -49,9 +67,9 @@
 		img.src = getImageUrl(file);
 	};
 
-	// adaptiveSizeによる分岐を最初に行う
+	// previewAdaptiveによる分岐を最初に行う
 	const imageSizeStyle = $derived.by(() => {
-		if (adaptiveSize) {
+		if (previewAdaptive) {
 			return `
 			  width: 100%;
         height: auto;
@@ -73,9 +91,11 @@
 </script>
 
 <div
+	{id}
 	class="image-uploader-preview"
 	class:image-uploader-preview--rounded={rounded}
-	class:image-uploader-preview--adaptive={adaptiveSize}
+	class:image-uploader-preview--adaptive={previewAdaptive}
+	class:image-uploader-preview--plain={previewStyle === 'plain'}
 	style={imageSizeStyle}
 >
 	<img
@@ -120,6 +140,7 @@
 
 	.image-uploader-preview--adaptive .image-uploader-preview__image {
 		object-fit: contain;
+		height: auto;
 	}
 
 	.image-uploader-preview::after {
@@ -138,6 +159,14 @@
 		border-radius: var(--svelte-ui-image-uploader-preview-border-radius-rounded);
 	}
 
+	.image-uploader-preview--plain::after {
+		display: none;
+	}
+
+	.image-uploader-preview--plain .image-uploader-preview__image {
+		border-radius: 0;
+	}
+
 	.image-uploader-preview__delete {
 		position: absolute;
 		top: 4px;

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

@@ -1,13 +1,14 @@
-type ImagePreviewProps = {
+type $$ComponentProps = {
     file: File;
+    id?: string;
     width?: string | number;
     height?: string | number;
-    adaptiveSize?: boolean;
+    previewAdaptive?: boolean;
     rounded?: boolean;
+    previewStyle?: 'plain' | 'framed';
     removeFileAriaLabel?: string;
     onRemove: () => void;
-    id?: string;
 };
-declare const ImageUploaderPreview: import("svelte").Component<ImagePreviewProps, {}, "">;
+declare const ImageUploaderPreview: import("svelte").Component<$$ComponentProps, {}, "">;
 type ImageUploaderPreview = ReturnType<typeof ImageUploaderPreview>;
 export default ImageUploaderPreview;

package/dist/components/LoadingSpinner.svelte

@@ -13,6 +13,8 @@
 
 		// 状態/動作
 		speed = 1,
+
+		// ARIA/アクセシビリティ
 		reducedMotion = false
 	}: {
 		// スタイル/レイアウト
@@ -22,6 +24,8 @@
 
 		// 状態/動作
 		speed?: number;
+
+		// ARIA/アクセシビリティ
 		reducedMotion?: boolean;
 	} = $props();
 
@@ -39,13 +43,13 @@
 <div
 	class="loading-spinner"
 	class:spinner--no-motion={reducedMotion}
-	style:--grow-duration="{growDuration}s"
-	style:--rotate-duration="{rotateDuration}s"
-	style:--spinner-size="{size}px"
-	style:--spinner-color={color}
-	style:--circumference={circumference}
-	style:--half-circumference={halfCircumference}
-	style:--negative-half-circumference={negativeHalfCircumference}
+	style:--svelte-ui-loading-spinner-grow-duration="{growDuration}s"
+	style:--svelte-ui-loading-spinner-rotate-duration="{rotateDuration}s"
+	style:--svelte-ui-loading-spinner-size="{size}px"
+	style:--svelte-ui-loading-spinner-color={color}
+	style:--svelte-ui-loading-spinner-circumference={circumference}
+	style:--svelte-ui-loading-spinner-half-circumference={halfCircumference}
+	style:--svelte-ui-loading-spinner-negative-half-circumference={negativeHalfCircumference}
 	data-testid="loading-spinner"
 >
 	<svg viewBox="0 0 {size} {size}" width={size} height={size}>
@@ -55,8 +59,8 @@
 
 <style>
 	.loading-spinner {
-		width: var(--spinner-size, var(--svelte-ui-loadingspinner-size));
-		height: var(--spinner-size, var(--svelte-ui-loadingspinner-size));
+		width: var(--svelte-ui-loading-spinner-size, var(--svelte-ui-loadingspinner-size));
+		height: var(--svelte-ui-loading-spinner-size, var(--svelte-ui-loadingspinner-size));
 		line-height: 1px;
 	}
 
@@ -64,14 +68,14 @@
 		width: 100%;
 		height: 100%;
 		transform: rotate(-90deg);
-		animation: rotate var(--rotate-duration, 0.8s) linear infinite;
+		animation: rotate var(--svelte-ui-loading-spinner-rotate-duration, 0.8s) linear infinite;
 	}
 
 	.loading-spinner circle {
 		fill: none;
-		stroke: var(--spinner-color, var(--svelte-ui-loadingspinner-color));
+		stroke: var(--svelte-ui-loading-spinner-color, var(--svelte-ui-loadingspinner-color));
 		stroke-linecap: butt;
-		animation: complex-grow var(--grow-duration, 1.6s) linear infinite;
+		animation: complex-grow var(--svelte-ui-loading-spinner-grow-duration, 1.6s) linear infinite;
 		transform-origin: center;
 	}
 
@@ -87,16 +91,17 @@
 	@keyframes complex-grow {
 		/* 負の値も別のCSS変数として定義 */
 		0% {
-			stroke-dasharray: 0 var(--circumference);
-			stroke-dashoffset: var(--negative-half-circumference);
+			stroke-dasharray: 0 var(--svelte-ui-loading-spinner-circumference);
+			stroke-dashoffset: var(--svelte-ui-loading-spinner-negative-half-circumference);
 		}
 		50% {
-			stroke-dasharray: var(--half-circumference) var(--circumference);
+			stroke-dasharray: var(--svelte-ui-loading-spinner-half-circumference)
+				var(--svelte-ui-loading-spinner-circumference);
 			stroke-dashoffset: 0;
 		}
 		100% {
-			stroke-dasharray: 0 var(--circumference);
-			stroke-dashoffset: var(--negative-half-circumference);
+			stroke-dasharray: 0 var(--svelte-ui-loading-spinner-circumference);
+			stroke-dashoffset: var(--svelte-ui-loading-spinner-negative-half-circumference);
 		}
 	}
 

package/dist/components/Radio.svelte

@@ -26,6 +26,8 @@
 		// 状態/動作
 		disabled = false,
 		required = false,
+
+		// ARIA/アクセシビリティ
 		reducedMotion = false,
 
 		// 入力イベント
@@ -85,6 +87,8 @@
 		// 状態/動作
 		disabled?: boolean;
 		required?: boolean;
+
+		// ARIA/アクセシビリティ
 		reducedMotion?: boolean;
 
 		// 入力イベント

package/dist/components/RadioGroup.svelte

@@ -11,9 +11,17 @@
 
 		// スタイル/レイアウト
 		direction = 'vertical',
-		gap = '0',
+		gap,
 		wrap = false,
 		minOptionWidth,
+		size = 'medium',
+
+		// 状態/動作
+		disabled = false,
+		required = false,
+
+		// ARIA/アクセシビリティ
+		reducedMotion = false,
 
 		// 入力イベント
 		onchange = () => {} // No params for type inference
@@ -28,32 +36,48 @@
 		gap?: string | number;
 		wrap?: boolean;
 		minOptionWidth?: string | number;
+		size?: 'small' | 'medium' | 'large';
+
+		// 状態/動作
+		disabled?: boolean;
+		required?: boolean;
+
+		// ARIA/アクセシビリティ
+		reducedMotion?: boolean;
 
 		// 入力イベント
 		onchange?: (value: OptionValue) => void;
 	} = $props();
-	let localValues: Record<string, boolean> = $state({});
 
 	const handleChange = () => {
 		onchange(value);
 	};
 
-	const gapStyle = getStyleFromNumber(gap);
+	const gapStyle = gap !== undefined ? getStyleFromNumber(gap) : undefined;
 
 	const minOptionWidthStyle = getStyleFromNumber(minOptionWidth);
 </script>
 
 <ul
-	class="checkbox-group"
-	style="--flex-direction: {direction === 'vertical' ? 'column' : 'row'};
-    --gap: {gapStyle};
-    --wrap: {wrap ? 'wrap' : 'none'};
-    --min-option-width: {minOptionWidthStyle}
+	class="radio-group"
+	style="--svelte-ui-radio-group-flex-direction: {direction === 'vertical' ? 'column' : 'row'};
+    {gapStyle ? `--svelte-ui-radio-group-gap: ${gapStyle};` : ''}
+    --svelte-ui-radio-group-wrap: {wrap ? 'wrap' : 'none'};
+    --svelte-ui-radio-group-min-option-width: {minOptionWidthStyle}
     "
 >
 	{#each options as option (option.value)}
-		<li class="checkbox-group__option">
-			<Radio {name} bind:currentValue={value} value={option.value} onchange={handleChange}>
+		<li class="radio-group__option">
+			<Radio
+				{name}
+				bind:currentValue={value}
+				value={option.value}
+				{size}
+				{disabled}
+				{required}
+				{reducedMotion}
+				onchange={handleChange}
+			>
 				{option.label}
 			</Radio>
 		</li>
@@ -61,14 +85,14 @@
 </ul>
 
 <style>
-	.checkbox-group {
+	.radio-group {
 		display: flex;
-		flex-direction: var(--flex-direction);
-		gap: var(--gap);
-		flex-wrap: var(--wrap);
+		flex-direction: var(--svelte-ui-radio-group-flex-direction);
+		gap: var(--svelte-ui-radio-group-gap);
+		flex-wrap: var(--svelte-ui-radio-group-wrap);
 	}
 
-	.checkbox-group__option {
-		min-width: var(--min-option-width);
+	.radio-group__option {
+		min-width: var(--svelte-ui-radio-group-min-option-width);
 	}
 </style>

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

@@ -7,6 +7,10 @@ type $$ComponentProps = {
     gap?: string | number;
     wrap?: boolean;
     minOptionWidth?: string | number;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    required?: boolean;
+    reducedMotion?: boolean;
     onchange?: (value: OptionValue) => void;
 };
 declare const RadioGroup: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/Select.svelte

@@ -22,7 +22,7 @@
 
 		// スタイル/レイアウト
 		size = null,
-		variant = 'default',
+		inline = false,
 		focusStyle = 'outline',
 		fullWidth = false,
 		rounded = false,
@@ -84,7 +84,7 @@
 
 		// スタイル/レイアウト
 		size?: number | null;
-		variant?: 'default' | 'inline';
+		inline?: boolean;
 		focusStyle?: 'background' | 'outline' | 'none';
 		fullWidth?: boolean;
 		rounded?: boolean;
@@ -275,7 +275,7 @@
 <div
 	class="select
 select--focus-{focusStyle}"
-	class:select--inline={variant === 'inline'}
+	class:select--inline={inline}
 	class:select--full-width={fullWidth}
 	class:select--disabled={disabled}
 	class:select--focused={isFocused}

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

@@ -9,7 +9,7 @@ type $$ComponentProps = {
     placeholder?: string;
     selectAttributes?: HTMLSelectAttributes | undefined;
     size?: number | null;
-    variant?: 'default' | 'inline';
+    inline?: boolean;
     focusStyle?: 'background' | 'outline' | 'none';
     fullWidth?: boolean;
     rounded?: boolean;

package/dist/components/SnackbarItem.svelte

@@ -112,7 +112,7 @@
 				);
 			const requiredMargin = -containerHeight;
 
-			snackbarRef.style.setProperty('--collapse-margin', `${requiredMargin}px`);
+			snackbarRef.style.setProperty('--svelte-ui-snackbar-item-collapse-margin', `${requiredMargin}px`);
 
 			// CSSカスタムプロパティが確実に設定されるまで少し待つ
 			requestAnimationFrame(() => {
@@ -149,7 +149,7 @@
 		class="snackbar-item__content snackbar-item__content--{type} snackbar-item__content--{variant} snackbar-item__content--{position} {visible
 			? 'snackbar-item__content--visible'
 			: ''}"
-		style="--custom-color: {color ?? 'unset'}; --custom-text-color: {textColor ?? 'unset'};"
+		style="--svelte-ui-snackbar-item-custom-color: {color ?? 'unset'}; --svelte-ui-snackbar-item-custom-text-color: {textColor ?? 'unset'};"
 		role={type === 'error' || type === 'warning' ? 'alert' : 'status'}
 		aria-live={type === 'error' || type === 'warning' ? 'assertive' : 'polite'}
 		aria-atomic="true"
@@ -219,7 +219,7 @@
 		}
 		100% {
 			opacity: 0;
-			margin-bottom: var(--collapse-margin);
+			margin-bottom: var(--svelte-ui-snackbar-item-collapse-margin);
 		}
 	}
 
@@ -230,7 +230,7 @@
 		}
 		100% {
 			opacity: 0;
-			margin-top: var(--collapse-margin);
+			margin-top: var(--svelte-ui-snackbar-item-collapse-margin);
 		}
 	}
 
@@ -321,103 +321,103 @@
 
 	/* Type variants - filled */
 	.snackbar-item__content--filled.snackbar-item__content--info {
-		background-color: var(--custom-color, var(--svelte-ui-snackbar-info-filled-bg));
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-info-filled-text-color));
+		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-filled-bg));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-filled-text-color));
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--info .snackbar-item__icon {
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-info-filled-text-color));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-filled-text-color));
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--success {
-		background-color: var(--custom-color, var(--svelte-ui-snackbar-success-filled-bg));
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-success-filled-text-color));
+		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-filled-bg));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-filled-text-color));
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--success .snackbar-item__icon {
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-success-filled-text-color));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-filled-text-color));
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--warning {
-		background-color: var(--custom-color, var(--svelte-ui-snackbar-warning-filled-bg));
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-warning-filled-text-color));
+		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-filled-bg));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-filled-text-color));
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--warning .snackbar-item__icon {
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-warning-filled-text-color));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-filled-text-color));
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--error {
-		background-color: var(--custom-color, var(--svelte-ui-snackbar-error-filled-bg));
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-error-filled-text-color));
+		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-filled-bg));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-filled-text-color));
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--error .snackbar-item__icon {
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-error-filled-text-color));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-filled-text-color));
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--default {
-		background-color: var(--custom-color, var(--svelte-ui-snackbar-default-filled-bg));
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-default-filled-text-color));
+		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-filled-bg));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-filled-text-color));
 	}
 
 	.snackbar-item__content--filled.snackbar-item__content--default .snackbar-item__icon {
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-default-filled-text-color));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-filled-text-color));
 	}
 
 	/* Type variants - outlined */
 	.snackbar-item__content--outlined.snackbar-item__content--info {
-		background-color: var(--custom-color, var(--svelte-ui-snackbar-info-outlined-bg));
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-info-outlined-text-color));
+		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-outlined-bg));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-outlined-text-color));
 		box-shadow: inset 0 0 0 1px
-			var(--custom-color, var(--svelte-ui-snackbar-info-outlined-border-color));
+			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-info-outlined-border-color));
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--info .snackbar-item__icon {
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-info-outlined-text-color));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-info-outlined-text-color));
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--success {
-		background-color: var(--custom-color, var(--svelte-ui-snackbar-success-outlined-bg));
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-success-outlined-text-color));
+		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-outlined-bg));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-outlined-text-color));
 		box-shadow: inset 0 0 0 1px
-			var(--custom-color, var(--svelte-ui-snackbar-success-outlined-border-color));
+			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-success-outlined-border-color));
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--success .snackbar-item__icon {
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-success-outlined-text-color));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-success-outlined-text-color));
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--warning {
-		background-color: var(--custom-color, var(--svelte-ui-snackbar-warning-outlined-bg));
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-warning-outlined-text-color));
+		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-outlined-bg));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-outlined-text-color));
 		box-shadow: inset 0 0 0 1px
-			var(--custom-color, var(--svelte-ui-snackbar-warning-outlined-border-color));
+			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-warning-outlined-border-color));
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--warning .snackbar-item__icon {
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-warning-outlined-text-color));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-warning-outlined-text-color));
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--error {
-		background-color: var(--custom-color, var(--svelte-ui-snackbar-error-outlined-bg));
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-error-outlined-text-color));
+		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-outlined-bg));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-outlined-text-color));
 		box-shadow: inset 0 0 0 1px
-			var(--custom-color, var(--svelte-ui-snackbar-error-outlined-border-color));
+			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-error-outlined-border-color));
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--error .snackbar-item__icon {
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-error-outlined-text-color));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-error-outlined-text-color));
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--default {
-		background-color: var(--custom-color, var(--svelte-ui-snackbar-default-outlined-bg));
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-default-outlined-text-color));
+		background-color: var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-outlined-bg));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-outlined-text-color));
 		box-shadow: inset 0 0 0 1px
-			var(--custom-color, var(--svelte-ui-snackbar-default-outlined-border-color));
+			var(--svelte-ui-snackbar-item-custom-color, var(--svelte-ui-snackbar-default-outlined-border-color));
 	}
 
 	.snackbar-item__content--outlined.snackbar-item__content--default .snackbar-item__icon {
-		color: var(--custom-text-color, var(--svelte-ui-snackbar-default-outlined-text-color));
+		color: var(--svelte-ui-snackbar-item-custom-text-color, var(--svelte-ui-snackbar-default-outlined-text-color));
 	}
 </style>

package/dist/components/Switch.svelte

@@ -24,6 +24,8 @@
 		// 状態/動作
 		disabled = false,
 		required = false,
+
+		// ARIA/アクセシビリティ
 		reducedMotion = false,
 
 		// フォーカスイベント
@@ -59,32 +61,30 @@
 		onpointermove = () => {}, // No params for type inference
 		onpointercancel = () => {}, // No params for type inference
 
-		// 変更イベント
+		// 入力イベント
 		onchange = (value: boolean) => {},
 
 		// その他
 		...restProps
 	}: {
+		// Snippet
+		children?: Snippet;
+
 		// 基本プロパティ
 		value?: boolean;
 
-		// ラベル
-		children?: Snippet;
-
 		// HTML属性系
 		id?: string;
 		inputAttributes?: HTMLInputAttributes | undefined;
 
-		// サイズ
+		// スタイル/レイアウト
 		size?: 'small' | 'medium' | 'large';
 
-		// 無効状態
+		// 状態/動作
 		disabled?: boolean;
-
-		// 必須項目
 		required?: boolean;
 
-		// アニメーション無効化
+		// ARIA/アクセシビリティ
 		reducedMotion?: boolean;
 
 		// フォーカスイベント
@@ -120,7 +120,7 @@
 		onpointermove?: Function; // No params for type inference
 		onpointercancel?: Function; // No params for type inference
 
-		// 変更イベント
+		// 入力イベント
 		onchange?: (value: boolean) => void;
 
 		// その他

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

@@ -1,8 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
 type $$ComponentProps = {
-    value?: boolean;
     children?: Snippet;
+    value?: boolean;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
     size?: 'small' | 'medium' | 'large';

package/dist/components/TabItem.svelte

@@ -52,7 +52,7 @@
 	href={tabItem.href}
 	class="tab-item"
 	class:tab-item--selected={isSelected}
-	style="--text-color: {textColor}; --selected-text-color: {selectedTextColor}; --selected-bar-color: {selectedBarColor}"
+	style="--svelte-ui-tab-item-text-color: {textColor}; --svelte-ui-tab-item-selected-text-color: {selectedTextColor}; --svelte-ui-tab-item-selected-bar-color: {selectedBarColor}"
 	role="tab"
 	aria-selected={isSelected}
 	tabindex={0}
@@ -84,7 +84,7 @@
   gap: 8px;
   position: relative;
   padding: 8px 16px;
-  color: var(--text-color);
+  color: var(--svelte-ui-tab-item-text-color);
   white-space: nowrap;
   text-decoration: none;
   transition-property: background-color, color, outline;
@@ -94,7 +94,10 @@
 
 @media (hover: hover) {
   .tab-item:hover:not(.tab-item--selected) {
-    background-color: var(--svelte-ui-hover-overlay);
+    color: var(--svelte-ui-tab-item-selected-text-color);
+  }
+  .tab-item:hover:not(.tab-item--selected)::before {
+    opacity: 1;
   }
 }
 /* キーボードフォーカス時のみ枠線を表示 */
@@ -110,7 +113,10 @@
     outline-offset: var(--svelte-ui-focus-outline-offset-inner);
   }
   .tab-item:focus:not(.tab-item--selected) {
-    background-color: var(--svelte-ui-hover-overlay);
+    color: var(--svelte-ui-tab-item-selected-text-color);
+  }
+  .tab-item:focus:not(.tab-item--selected)::before {
+    opacity: 1;
   }
 }
 /* 選択状態のインジケーター */
@@ -122,7 +128,7 @@
   bottom: 0;
   width: calc(100% - 32px);
   height: 4px;
-  background-color: var(--selected-bar-color);
+  background-color: var(--svelte-ui-tab-item-selected-bar-color);
   border-radius: 3px 3px 0 0;
   opacity: 0;
   transition-property: opacity;
@@ -130,7 +136,7 @@
 }
 
 .tab-item--selected {
-  color: var(--selected-text-color);
+  color: var(--svelte-ui-tab-item-selected-text-color);
   background-color: transparent;
 }
 

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.3",
+	"version": "0.0.5",
 	"type": "module",
 	"keywords": [
 		"svelte",
@@ -57,7 +57,8 @@
 		"test:browser": "vitest --config vitest.config.ts --run",
 		"storybook": "storybook dev -p 6006",
 		"build-storybook": "storybook build",
-		"prepublishOnly": "npm run package"
+		"prepublishOnly": "npm run package",
+		"publish": "npm publish"
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "^4.1.1",