@14ch/svelte-ui 0.0.1

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

@@ -0,0 +1,75 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+type $$ComponentProps = {
+    name?: string;
+    value: string | number | undefined;
+    id?: string | null;
+    type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
+    tabindex?: number | null;
+    maxlength?: number | null;
+    pattern?: string | null;
+    min?: number | null;
+    max?: number | null;
+    step?: number | null;
+    size?: number | null;
+    autocomplete?: HTMLInputElement['autocomplete'] | null;
+    inputAttributes?: HTMLInputAttributes | undefined;
+    inline?: boolean;
+    focusStyle?: 'background' | 'outline' | 'none';
+    placeholder?: string;
+    fullWidth?: boolean;
+    width?: string | number | null;
+    minWidth?: string | number | null;
+    maxWidth?: string | number | null;
+    rounded?: boolean;
+    customStyle?: string;
+    rightIcon?: string;
+    leftIcon?: string;
+    leftIconAriaLabel?: string;
+    rightIconAriaLabel?: string;
+    iconFilled?: boolean;
+    iconWeight?: IconWeight;
+    iconGrade?: IconGrade;
+    iconOpticalSize?: IconOpticalSize;
+    iconVariant?: IconVariant;
+    disabled?: boolean;
+    readonly?: boolean;
+    required?: boolean;
+    clearable?: boolean;
+    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;
+    onchange?: (value: any) => void;
+    oninput?: (value: any) => void;
+    onsubmit?: (value: any) => void;
+    oncompositionstart?: Function;
+    oncompositionend?: Function;
+    onRightIconClick?: Function;
+    onLeftIconClick?: Function;
+    [key: string]: any;
+};
+declare const Input: import("svelte").Component<$$ComponentProps, {
+    focus: () => void;
+}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/LoadingSpinner.svelte

@@ -0,0 +1,116 @@
+<!-- LoadingSpinner.svelte -->
+
+<script lang="ts">
+	import { getStyleFromNumber } from '../utils/style';
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// スタイル/レイアウト
+		size = 32,
+		color,
+		strokeWidth = 3,
+
+		// 状態/動作
+		speed = 1,
+		reducedMotion = false
+	}: {
+		// スタイル/レイアウト
+		size?: number;
+		color?: string;
+		strokeWidth?: number;
+
+		// 状態/動作
+		speed?: number;
+		reducedMotion?: boolean;
+	} = $props();
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const radius = $derived((size - strokeWidth) / 2);
+	const circumference = $derived(2 * Math.PI * radius);
+	const halfCircumference = $derived((circumference * 3) / 4);
+	const negativeHalfCircumference = $derived(-halfCircumference);
+	const growDuration = $derived(1.6 / speed);
+	const rotateDuration = $derived(0.8 / speed);
+</script>
+
+<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}
+	data-testid="loading-spinner"
+>
+	<svg viewBox="0 0 {size} {size}" width={size} height={size}>
+		<circle cx={size / 2} cy={size / 2} r={radius} style:stroke-width={strokeWidth} />
+	</svg>
+</div>
+
+<style>
+	.loading-spinner {
+		width: var(--spinner-size, var(--svelte-ui-loadingspinner-size));
+		height: var(--spinner-size, var(--svelte-ui-loadingspinner-size));
+		line-height: 1px;
+	}
+
+	.loading-spinner svg {
+		width: 100%;
+		height: 100%;
+		transform: rotate(-90deg);
+		animation: rotate var(--rotate-duration, 0.8s) linear infinite;
+	}
+
+	.loading-spinner circle {
+		fill: none;
+		stroke: var(--spinner-color, var(--svelte-ui-loadingspinner-color));
+		stroke-linecap: butt;
+		animation: complex-grow var(--grow-duration, 1.6s) linear infinite;
+		transform-origin: center;
+	}
+
+	@keyframes rotate {
+		0% {
+			transform: rotate(-90deg);
+		}
+		100% {
+			transform: rotate(270deg);
+		}
+	}
+
+	@keyframes complex-grow {
+		/* 負の値も別のCSS変数として定義 */
+		0% {
+			stroke-dasharray: 0 var(--circumference);
+			stroke-dashoffset: var(--negative-half-circumference);
+		}
+		50% {
+			stroke-dasharray: var(--half-circumference) var(--circumference);
+			stroke-dashoffset: 0;
+		}
+		100% {
+			stroke-dasharray: 0 var(--circumference);
+			stroke-dashoffset: var(--negative-half-circumference);
+		}
+	}
+
+	/* Reduced motion */
+	.spinner--no-motion svg,
+	.spinner--no-motion circle {
+		animation-duration: 0.01s;
+	}
+
+	/* Prefers reduced motion */
+	@media (prefers-reduced-motion: reduce) {
+		.loading-spinner svg,
+		.loading-spinner circle {
+			animation-duration: 0.01s;
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+    speed?: number;
+    reducedMotion?: boolean;
+};
+declare const LoadingSpinner: import("svelte").Component<$$ComponentProps, {}, "">;
+type LoadingSpinner = ReturnType<typeof LoadingSpinner>;
+export default LoadingSpinner;

package/dist/components/Modal.svelte

@@ -0,0 +1,313 @@
+<!-- Modal.svelte -->
+<script lang="ts">
+	/**
+	 * 🚨 CRITICAL: DO NOT MANAGE MODAL STATE FROM PARENT COMPONENTS
+	 *
+	 * This Modal component manages its own open/closed state internally.
+	 * Parent components must NEVER create their own Modal state variables.
+	 *
+	 * ❌ WRONG: let isModalOpen = $state(false)
+	 * ✅ RIGHT: Use modalRef.open(), modalRef.close(), modalRef.toggle()
+	 * ✅ RIGHT: Use onOpen/onClose callbacks for side effects
+	 *
+	 * This prevents state synchronization bugs and ensures consistent behavior.
+	 */
+	import type { Snippet } from 'svelte';
+	import { announceOpenClose } from '../utils/accessibility';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// Snippet
+		children,
+
+		// 基本プロパティ
+		componentType = 'Modal',
+
+		// スタイル/レイアウト
+		customClass = '',
+		customStyles = '',
+
+		// 状態/動作
+		isOpen = $bindable(false),
+		closeIfClickOutside = true,
+		restoreFocus = false,
+
+		// ARIA/アクセシビリティ
+		ariaLabel,
+		ariaLabelledby,
+		ariaDescribedby,
+
+		// HTML属性
+		id
+	}: {
+		// Snippet
+		children?: Snippet;
+
+		// 基本プロパティ
+		componentType?: string;
+
+		// スタイル/レイアウト
+		customClass?: string;
+		customStyles?: string;
+
+		// 状態/動作
+		isOpen?: boolean;
+		closeIfClickOutside?: boolean;
+		restoreFocus?: boolean;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaLabelledby?: string;
+		ariaDescribedby?: string;
+
+		// HTML属性
+		id?: string;
+	} = $props();
+
+	let dialogRef: HTMLDialogElement;
+	let containerRef: HTMLDivElement;
+	let previousActiveElement: HTMLElement | null = null;
+
+	// =========================================================================
+	// Effects
+	// =========================================================================
+	$effect(() => {
+		if (!dialogRef || !isOpen) return;
+
+		const handleClick = (event: MouseEvent) => {
+			if (!closeIfClickOutside) return;
+			if (!containerRef || !event.target) return;
+			if (!containerRef.contains(event.target as Node)) {
+				close();
+			}
+		};
+
+		dialogRef.addEventListener('click', handleClick);
+
+		return () => {
+			if (dialogRef) {
+				dialogRef.removeEventListener('click', handleClick);
+			}
+		};
+	});
+
+	$effect(() => {
+		if (!isOpen || !dialogRef) return;
+
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				close();
+			}
+		};
+
+		document.addEventListener('keydown', handleKeyDown);
+
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	});
+
+	$effect(() => {
+		if (!isOpen || !dialogRef) return;
+
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key !== 'Tab') return;
+
+			const focusableElements = dialogRef.querySelectorAll(
+				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+			);
+
+			if (focusableElements.length === 0) return;
+
+			const firstElement = focusableElements[0] as HTMLElement;
+			const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
+
+			if (event.shiftKey) {
+				if (document.activeElement === firstElement) {
+					event.preventDefault();
+					lastElement?.focus();
+				}
+			} else {
+				if (document.activeElement === lastElement) {
+					event.preventDefault();
+					firstElement?.focus();
+				}
+			}
+		};
+
+		dialogRef.addEventListener('keydown', handleKeyDown);
+
+		return () => {
+			if (dialogRef) {
+				dialogRef.removeEventListener('keydown', handleKeyDown);
+			}
+		};
+	});
+
+	$effect(() => {
+		if (dialogRef) {
+			if (isOpen) {
+				open();
+			} else {
+				close();
+			}
+		}
+	});
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+	export const open = (title?: string): void => {
+		if (!dialogRef) return;
+
+		isOpen = true;
+		previousActiveElement = document.activeElement as HTMLElement;
+
+		dialogRef.classList.add('fade-in');
+		dialogRef.removeEventListener('animationend', closeEnd);
+		dialogRef.showModal();
+
+		setTimeout(() => {
+			const firstFocusableElement = dialogRef?.querySelector(
+				'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+			) as HTMLElement;
+			firstFocusableElement?.focus();
+
+			announceOpenClose(componentType, true, title || ariaLabel || '');
+		}, 0);
+
+		// 自動フォーカス時の枠線制御用クラス
+		dialogRef.classList.add('modal-opening');
+		setTimeout(() => {
+			dialogRef?.classList.remove('modal-opening');
+		}, 100); // 短い時間で制御
+	};
+
+	export const close = (title?: string): void => {
+		if (!dialogRef) return;
+
+		isOpen = false;
+		dialogRef.classList.add('fade-out');
+		dialogRef.addEventListener('animationend', closeEnd, { once: true });
+
+		announceOpenClose(componentType, false, title || ariaLabel || '');
+	};
+
+	export const closeEnd = (): void => {
+		if (!dialogRef) return;
+
+		dialogRef.close();
+		dialogRef.classList.remove('fade-out');
+
+		if (restoreFocus && previousActiveElement) {
+			previousActiveElement.focus();
+		}
+		previousActiveElement = null;
+	};
+
+	export const toggle = (title?: string): void => {
+		if (isOpen) {
+			close(title);
+		} else {
+			open(title);
+		}
+	};
+</script>
+
+<dialog
+	bind:this={dialogRef}
+	class="modal {customClass} {isOpen ? 'fade-in' : 'fade-out'}"
+	style={customStyles}
+	aria-modal="true"
+	aria-label={ariaLabel}
+	aria-labelledby={ariaLabelledby}
+	aria-describedby={ariaDescribedby}
+	data-testid="modal"
+	{id}
+>
+	<div class="modal-contents" bind:this={containerRef}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</dialog>
+
+<style>@charset "UTF-8";
+.modal {
+  padding: 0;
+  border-width: 0;
+  background-color: var(--svelte-ui-surface-color);
+  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);
+}
+
+.modal::backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.modal:focus {
+  outline: none;
+}
+
+/* Modal内の要素のフォーカス枠線をコントロール */
+.modal *:focus {
+  outline: none;
+}
+
+/* キーボードナビゲーション時のみフォーカス枠線を表示 */
+.modal *:focus-visible {
+  outline: var(--svelte-ui-focus-outline-outer);
+  outline-offset: var(--svelte-ui-focus-outline-offset-outer);
+}
+
+/* 自動フォーカス時の枠線制御用 */
+.modal.modal-opening *:focus {
+  outline: none !important;
+}
+
+.modal-contents {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* アニメーション */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.fade-in,
+.fade-in::backdrop {
+  animation: fadeIn var(--svelte-ui-transition-duration, 300ms) forwards;
+}
+
+.fade-out,
+.fade-out::backdrop {
+  animation: fadeOut var(--svelte-ui-transition-duration, 300ms) forwards;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .fade-in,
+  .fade-in::backdrop,
+  .fade-out,
+  .fade-out::backdrop {
+    animation-duration: 0.01s;
+  }
+}</style>

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

@@ -0,0 +1,34 @@
+/**
+     * 🚨 CRITICAL: DO NOT MANAGE MODAL STATE FROM PARENT COMPONENTS
+     *
+     * This Modal component manages its own open/closed state internally.
+     * Parent components must NEVER create their own Modal state variables.
+     *
+     * ❌ WRONG: let isModalOpen = $state(false)
+     * ✅ RIGHT: Use modalRef.open(), modalRef.close(), modalRef.toggle()
+     * ✅ RIGHT: Use onOpen/onClose callbacks for side effects
+     *
+     * This prevents state synchronization bugs and ensures consistent behavior.
+     */
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children?: Snippet;
+    componentType?: string;
+    customClass?: string;
+    customStyles?: string;
+    isOpen?: boolean;
+    closeIfClickOutside?: boolean;
+    restoreFocus?: boolean;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    id?: string;
+};
+declare const Modal: import("svelte").Component<$$ComponentProps, {
+    open: (title?: string) => void;
+    close: (title?: string) => void;
+    closeEnd: () => void;
+    toggle: (title?: string) => void;
+}, "isOpen">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;