@14ch/svelte-ui 0.0.1

package/dist/components/COMPONENT_DESIGN_GUIDELINES.md

@@ -0,0 +1,127 @@
+# コンポーネント設計ガイドライン
+
+## ID命名ルール
+
+### コンポーネント内包時のID受け渡しルール
+
+#### 基本ルール
+
+- **親コンポーネント**: `id`プロパティを受け取る
+- **子コンポーネント**: 受け取った`id`にsuffixを付けて自身のIDを生成
+- **内部要素**: 受け取った`id`にsuffixを付けてIDを生成
+
+#### 命名パターン
+
+```typescript
+// 親 → 子コンポーネント
+<ChildComponent id={id ? `${id}-child-suffix` : undefined} />
+
+// 内部要素
+<div id={id ? `${id}-element-suffix` : undefined}>
+```
+
+#### 具体例
+
+```typescript
+// ConfirmDialog → Dialog → Modal
+<Dialog id={id ? `${id}-dialog` : undefined} />
+<Modal id={id ? `${id}-modal` : undefined} />
+
+// 内部要素
+<div id={id ? `${id}-dialog-title` : undefined}>
+<div id={id ? `${id}-modal-description` : undefined}>
+
+// 他の例
+<Input id={id ? `${id}-input` : undefined} />
+<Popup id={id ? `${id}-popup` : undefined} />
+<DatepickerCalendar id={id ? `${id}-calendar` : undefined} />
+```
+
+#### 判断基準
+
+- **✅ IDを渡すべき**: 1対1の親子関係、アクセシビリティ上重要な要素、テストで個別特定が必要
+- **❌ IDを渡さない**: 同じコンポーネントが複数存在、内部実装の詳細、動的生成要素
+
+### 理由
+
+- **階層構造の明確化**: `${id}-suffix`パターンにより、コンポーネントの階層関係が分かりやすい
+- **グローバル一意性**: 親のIDをベースにすることで、DOM全体で一意なIDを保証
+- **アクセシビリティ**: ARIA属性との連携で、スクリーンリーダーなどの支援技術に対応
+- **テストの安定性**: 一意なIDにより、テストでの要素特定が確実
+
+## コンポーネント設計原則
+
+### プロパティ設計
+
+- **基本プロパティ**: 必須の機能に関わるプロパティ
+- **HTML属性**: 標準的なHTML属性（id, class, style等）
+- **スタイル/レイアウト**: 見た目やレイアウトに関わるプロパティ
+- **状態/動作**: コンポーネントの動作状態に関わるプロパティ
+- **ARIA/アクセシビリティ**: アクセシビリティに関わるプロパティ
+- **イベントハンドラー**: イベント処理に関わるプロパティ
+
+### イベントハンドラー設計
+
+```typescript
+// Svelte 5の推奨パターン
+onclick = () => {}, // パラメータなしで型推論を可能にする
+onchange = () => {}, // パラメータなしで型推論を可能にする
+```
+
+### データテストID
+
+- 最上位のDOM要素に`data-testid`を設定
+- テストでの要素特定を容易にする
+- コンポーネント名をベースに命名（例: `data-testid="dialog"`）
+
+## 実装例
+
+### 基本的なコンポーネント構造
+
+```svelte
+<script lang="ts">
+	// Props, States & Constants
+	let {
+		// 基本プロパティ
+		title = 'Default Title',
+
+		// HTML属性
+		id,
+
+		// スタイル/レイアウト
+		variant = 'default',
+
+		// 状態/動作
+		isOpen = $bindable(false),
+
+		// イベントハンドラー
+		onclick = () => {}
+	}: {
+		// 型定義
+		title?: string;
+		id?: string;
+		variant?: 'default' | 'primary';
+		isOpen?: boolean;
+		onclick?: () => void;
+	} = $props();
+</script>
+
+<div class="component" {id} data-testid="component">
+	<!-- コンテンツ -->
+</div>
+```
+
+### 内包コンポーネントの例
+
+```svelte
+<script lang="ts">
+	let { id }: { id?: string } = $props();
+</script>
+
+<div class="parent" {id} data-testid="parent">
+	<ChildComponent id={id ? `${id}-child` : undefined} />
+	<div id={id ? `${id}-element` : undefined}>
+		<!-- 内部要素 -->
+	</div>
+</div>
+```

package/dist/components/Checkbox.svelte

@@ -0,0 +1,523 @@
+<!-- Checkbox.svelte -->
+
+<script lang="ts">
+	import { type Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// Snippet
+		children,
+
+		// 基本プロパティ
+		name = '',
+		value = $bindable(false),
+		indeterminate = $bindable(false),
+
+		// HTML属性系
+		id = `checkbox-${Math.random().toString(36).substring(2, 15)}`,
+		inputAttributes,
+
+		// スタイル/レイアウト
+		size = 'medium',
+
+		// 状態/動作
+		disabled = false,
+		required = false,
+		reducedMotion = false,
+
+		// 入力イベント
+		onchange = () => {}, // No params for type inference
+
+		// フォーカスイベント
+		onfocus = () => {}, // No params for type inference
+		onblur = () => {}, // No params for type inference
+
+		// キーボードイベント
+		onkeydown = () => {}, // No params for type inference
+		onkeyup = () => {}, // No params for type inference
+
+		// マウスイベント
+		onclick = () => {}, // No params for type inference
+		onmousedown = () => {}, // No params for type inference
+		onmouseup = () => {}, // No params for type inference
+		onmouseenter = () => {}, // No params for type inference
+		onmouseleave = () => {}, // No params for type inference
+		onmouseover = () => {}, // No params for type inference
+		onmouseout = () => {}, // No params for type inference
+		oncontextmenu = () => {}, // No params for type inference
+		onauxclick = () => {}, // No params for type inference
+
+		// タッチイベント
+		ontouchstart = () => {}, // No params for type inference
+		ontouchend = () => {}, // No params for type inference
+		ontouchmove = () => {}, // No params for type inference
+		ontouchcancel = () => {}, // No params for type inference
+
+		// ポインターイベント
+		onpointerdown = () => {}, // No params for type inference
+		onpointerup = () => {}, // No params for type inference
+		onpointerenter = () => {}, // No params for type inference
+		onpointerleave = () => {}, // No params for type inference
+		onpointermove = () => {}, // No params for type inference
+		onpointercancel = () => {}, // No params for type inference
+
+		// その他
+		...restProps
+	}: {
+		// Snippet
+		children?: Snippet;
+
+		// 基本プロパティ
+		name?: string;
+		value: boolean;
+		indeterminate?: boolean;
+
+		// HTML属性系
+		id?: string;
+		inputAttributes?: HTMLInputAttributes | undefined;
+
+		// スタイル/レイアウト
+		size?: 'small' | 'medium' | 'large';
+
+		// 状態/動作
+		disabled?: boolean;
+		required?: boolean;
+		reducedMotion?: boolean;
+
+		// 入力イベント
+		onchange?: (value: boolean) => void;
+
+		// フォーカスイベント
+		onfocus?: Function; // No params for type inference
+		onblur?: Function; // No params for type inference
+
+		// キーボードイベント
+		onkeydown?: Function; // No params for type inference
+		onkeyup?: Function; // No params for type inference
+
+		// マウスイベント
+		onclick?: Function; // No params for type inference
+		onmousedown?: Function; // No params for type inference
+		onmouseup?: Function; // No params for type inference
+		onmouseenter?: Function; // No params for type inference
+		onmouseleave?: Function; // No params for type inference
+		onmouseover?: Function; // No params for type inference
+		onmouseout?: Function; // No params for type inference
+		oncontextmenu?: Function; // No params for type inference
+		onauxclick?: Function; // No params for type inference
+
+		// タッチイベント
+		ontouchstart?: Function; // No params for type inference
+		ontouchend?: Function; // No params for type inference
+		ontouchmove?: Function; // No params for type inference
+		ontouchcancel?: Function; // No params for type inference
+
+		// ポインターイベント
+		onpointerdown?: Function; // No params for type inference
+		onpointerup?: Function; // No params for type inference
+		onpointerenter?: Function; // No params for type inference
+		onpointerleave?: Function; // No params for type inference
+		onpointermove?: Function; // No params for type inference
+		onpointercancel?: Function; // No params for type inference
+
+		// その他
+		[key: string]: any;
+	} = $props();
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const containerClasses = $derived(
+		[
+			'checkbox',
+			`checkbox--${size}`,
+			disabled && 'checkbox--disabled',
+			reducedMotion && 'checkbox--no-motion'
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	// =========================================================================
+
+	// Methods
+	// =========================================================================
+	const handleFocus = (event: FocusEvent) => {
+		if (disabled) return;
+		onfocus(event);
+	};
+
+	const handleBlur = (event: FocusEvent) => {
+		if (disabled) return;
+		onblur(event);
+	};
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (disabled) return;
+		if (event.key === ' ' || event.key === 'Enter') {
+			event.preventDefault();
+			value = !value;
+			onchange(value);
+		}
+		onkeydown(event);
+	};
+
+	const handleKeyup = (event: KeyboardEvent) => {
+		onkeyup(event);
+	};
+
+	// マウスイベント
+	const handleClick = (event: MouseEvent) => {
+		if (disabled) return;
+		onclick?.(event);
+	};
+
+	const handleMouseDown = (event: MouseEvent) => {
+		if (disabled) return;
+		onmousedown?.(event);
+	};
+
+	const handleMouseUp = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseup?.(event);
+	};
+
+	const handleMouseEnter = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseenter?.(event);
+	};
+
+	const handleMouseLeave = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseleave?.(event);
+	};
+
+	const handleMouseOver = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseover?.(event);
+	};
+
+	const handleMouseOut = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseout?.(event);
+	};
+
+	const handleContextMenu = (event: MouseEvent) => {
+		if (disabled) return;
+		oncontextmenu?.(event);
+	};
+
+	const handleAuxClick = (event: MouseEvent) => {
+		if (disabled) return;
+		onauxclick?.(event);
+	};
+
+	// タッチイベント
+	const handleTouchStart = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchstart?.(event);
+	};
+
+	const handleTouchEnd = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchend?.(event);
+	};
+
+	const handleTouchMove = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchmove?.(event);
+	};
+
+	const handleTouchCancel = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchcancel?.(event);
+	};
+
+	// ポインターイベント
+	const handlePointerDown = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerdown?.(event);
+	};
+
+	const handlePointerUp = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerup?.(event);
+	};
+
+	const handlePointerEnter = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerenter?.(event);
+	};
+
+	const handlePointerLeave = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerleave?.(event);
+	};
+
+	const handlePointerMove = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointermove?.(event);
+	};
+
+	const handlePointerCancel = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointercancel?.(event);
+	};
+
+	// 変更イベント
+	const handleChange = (event: Event) => {
+		onchange(value);
+	};
+</script>
+
+<div class={containerClasses} data-testid="checkbox">
+	<input
+		type="checkbox"
+		bind:checked={value}
+		bind:indeterminate
+		{id}
+		{name}
+		{disabled}
+		{required}
+		aria-invalid={false}
+		aria-required={required ? 'true' : 'false'}
+		aria-describedby={undefined}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		onkeydown={handleKeydown}
+		onkeyup={handleKeyup}
+		onclick={handleClick}
+		onmousedown={handleMouseDown}
+		onmouseup={handleMouseUp}
+		onmouseenter={handleMouseEnter}
+		onmouseleave={handleMouseLeave}
+		onmouseover={handleMouseOver}
+		onmouseout={handleMouseOut}
+		oncontextmenu={handleContextMenu}
+		onauxclick={handleAuxClick}
+		ontouchstart={handleTouchStart}
+		ontouchend={handleTouchEnd}
+		ontouchmove={handleTouchMove}
+		ontouchcancel={handleTouchCancel}
+		onpointerdown={handlePointerDown}
+		onpointerup={handlePointerUp}
+		onpointerenter={handlePointerEnter}
+		onpointerleave={handlePointerLeave}
+		onpointermove={handlePointerMove}
+		onpointercancel={handlePointerCancel}
+		onchange={handleChange}
+		{...inputAttributes}
+		{...restProps}
+	/>
+	<label for={id} class="checkbox__icon"></label>
+
+	{#if children}
+		<label for={id} class="checkbox__label">
+			{@render children()}
+		</label>
+	{/if}
+</div>
+
+<style>
+	/* =========================================================================
+	 * Base Styles
+	 * ========================================================================= */
+
+	.checkbox {
+		display: flex;
+		align-items: center;
+		width: fit-content;
+		contain: layout;
+	}
+
+	.checkbox input[type='checkbox'] {
+		position: absolute;
+		width: 16px;
+		height: 16px;
+		margin: 0;
+		opacity: 0;
+		cursor: pointer;
+	}
+
+	/* Label */
+	.checkbox__label {
+		display: flex;
+		align-items: center;
+		min-height: var(--svelte-ui-checkbox-min-height);
+		padding-left: var(--svelte-ui-checkbox-gap);
+		white-space: nowrap;
+		font-size: inherit;
+		color: inherit;
+		cursor: pointer;
+	}
+
+	/* Checkbox box */
+	.checkbox__icon {
+		position: relative;
+		width: var(--svelte-ui-checkbox-size);
+		height: var(--svelte-ui-checkbox-size);
+		border: var(--svelte-ui-checkbox-border-width) solid var(--svelte-ui-checkbox-border-color);
+		border-radius: var(--svelte-ui-checkbox-border-radius);
+		background-color: transparent;
+		transition-property: background-color, border-color, opacity;
+		transition-duration: var(--svelte-ui-transition-duration);
+		flex-shrink: 0;
+		cursor: pointer;
+	}
+
+	/* Check mark */
+	.checkbox__icon::after {
+		content: 'check';
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: fit-content;
+		clip-path: inset(0 100% 0 0);
+		font-size: var(--svelte-ui-checkbox-icon-size);
+		font-family: 'Material Symbols Outlined';
+		font-weight: bold;
+		font-style: normal;
+		color: var(--svelte-ui-checkbox-icon-color);
+		text-align: center;
+		line-height: 1;
+		letter-spacing: normal;
+		text-transform: none;
+		display: inline-block;
+		white-space: nowrap;
+		word-wrap: normal;
+		direction: ltr;
+		font-feature-settings: 'liga';
+		-webkit-font-smoothing: antialiased;
+		opacity: 0;
+		transition-property: clip-path, opacity;
+		transition-delay: 0s, 0s;
+		transition-duration: var(--svelte-ui-transition-duration), var(--svelte-ui-transition-duration);
+	}
+
+	/* =========================================================================
+	   State Modifiers
+	   ========================================================================= */
+
+	/* Disabled state */
+	.checkbox--disabled input[type='checkbox'] {
+		cursor: not-allowed;
+	}
+
+	.checkbox--disabled .checkbox__label {
+		opacity: var(--svelte-ui-button-disabled-opacity);
+		cursor: not-allowed;
+	}
+
+	/* Checked state */
+	input[type='checkbox']:checked + .checkbox__icon::after {
+		width: var(--svelte-ui-checkbox-icon-width);
+		clip-path: inset(0 0 0 0);
+		opacity: 1;
+		transition-delay:
+			var(--svelte-ui-transition-duration-fast), var(--svelte-ui-transition-duration-fast);
+	}
+
+	/* Indeterminate state */
+	input[type='checkbox']:indeterminate + .checkbox__icon::after {
+		content: 'remove';
+		width: var(--svelte-ui-checkbox-icon-width);
+		opacity: 1;
+		transition-delay:
+			var(--svelte-ui-transition-duration-fast), var(--svelte-ui-transition-duration-fast);
+	}
+
+	/* Hover states */
+	@media (hover: hover) {
+		.checkbox:not(.checkbox--disabled):hover .checkbox__icon {
+			border-color: var(--svelte-ui-checkbox-hover-color);
+		}
+	}
+
+	/* Focus states */
+	input[type='checkbox']:focus-visible + .checkbox__icon {
+		outline: var(--svelte-ui-focus-outline-outer);
+		outline-offset: var(--svelte-ui-focus-outline-offset-outer);
+	}
+
+	/* Checked/Indeterminate background */
+	input[type='checkbox']:checked + .checkbox__icon,
+	input[type='checkbox']:indeterminate + .checkbox__icon {
+		background-color: var(--svelte-ui-checkbox-bg-checked);
+		border-color: transparent;
+	}
+
+	/* =========================================================================
+	 * Size Variants
+	 * ========================================================================= */
+
+	.checkbox--small {
+		font-size: inherit;
+	}
+
+	.checkbox--small .checkbox__label {
+		min-height: var(--svelte-ui-checkbox-min-height-sm);
+	}
+
+	.checkbox--small .checkbox__icon {
+		width: var(--svelte-ui-checkbox-size-sm);
+		height: var(--svelte-ui-checkbox-size-sm);
+	}
+
+	.checkbox--small .checkbox__icon::after {
+		font-size: var(--svelte-ui-checkbox-icon-size-sm);
+	}
+
+	.checkbox--large {
+		font-size: inherit;
+	}
+
+	.checkbox--large .checkbox__label {
+		min-height: var(--svelte-ui-checkbox-min-height-lg);
+	}
+
+	.checkbox--large .checkbox__icon {
+		width: var(--svelte-ui-checkbox-size-lg);
+		height: var(--svelte-ui-checkbox-size-lg);
+	}
+
+	.checkbox--large .checkbox__icon::after {
+		font-size: var(--svelte-ui-checkbox-icon-size-lg);
+	}
+
+	/* =========================================================================
+	 * Motion & Media Queries
+	 * ========================================================================= */
+
+	/* Mobile touch targets */
+	@media (hover: none) and (pointer: coarse) {
+		.checkbox__label {
+			min-height: var(--svelte-ui-touch-target);
+		}
+
+		.checkbox--small .checkbox__label {
+			min-height: var(--svelte-ui-touch-target-sm);
+		}
+
+		.checkbox--large .checkbox__label {
+			min-height: var(--svelte-ui-touch-target-lg);
+		}
+	}
+
+	/* Reduced motion */
+	.checkbox--no-motion .checkbox__icon,
+	.checkbox--no-motion .checkbox__icon::after {
+		transition-duration: 0.01s;
+	}
+
+	/* Prefers reduced motion */
+	@media (prefers-reduced-motion: reduce) {
+		.checkbox__icon,
+		.checkbox__icon::after {
+			transition-duration: 0.01s;
+		}
+	}
+</style>

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

@@ -0,0 +1,42 @@
+import { type Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    children?: Snippet;
+    name?: string;
+    value: boolean;
+    indeterminate?: boolean;
+    id?: string;
+    inputAttributes?: HTMLInputAttributes | undefined;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    required?: boolean;
+    reducedMotion?: boolean;
+    onchange?: (value: boolean) => void;
+    onfocus?: Function;
+    onblur?: Function;
+    onkeydown?: Function;
+    onkeyup?: Function;
+    onclick?: Function;
+    onmousedown?: Function;
+    onmouseup?: Function;
+    onmouseenter?: Function;
+    onmouseleave?: Function;
+    onmouseover?: Function;
+    onmouseout?: Function;
+    oncontextmenu?: Function;
+    onauxclick?: Function;
+    ontouchstart?: Function;
+    ontouchend?: Function;
+    ontouchmove?: Function;
+    ontouchcancel?: Function;
+    onpointerdown?: Function;
+    onpointerup?: Function;
+    onpointerenter?: Function;
+    onpointerleave?: Function;
+    onpointermove?: Function;
+    onpointercancel?: Function;
+    [key: string]: any;
+};
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "value" | "indeterminate">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;