@14ch/svelte-ui 0.0.16 → 0.0.18

package/dist/assets/styles/optional/reset.scss

@@ -136,10 +136,10 @@ q {
 	quotes: none;
 }
 
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
 	content: '';
 	content: none;
 }

package/dist/assets/styles/variables.scss

@@ -358,6 +358,21 @@
 	--svelte-ui-segmented-control-selected-text-color: var(--svelte-ui-text-on-filled-color);
 	--svelte-ui-segmented-control-hover-overlay: var(--svelte-ui-hover-overlay);
 
+	/* Tab */
+	--svelte-ui-tab-min-height: var(--svelte-ui-form-height);
+	--svelte-ui-tab-item-text-color: var(--svelte-ui-text-color);
+	--svelte-ui-tab-item-selected-text-color: var(--svelte-ui-primary-color);
+	--svelte-ui-tab-item-selected-bar-color: var(--svelte-ui-primary-color);
+	--svelte-ui-tab-item-padding-x: 16px;
+	--svelte-ui-tab-item-padding-y: 8px;
+	--svelte-ui-tab-item-padding: var(--svelte-ui-tab-item-padding-y)
+		var(--svelte-ui-tab-item-padding-x);
+	--svelte-ui-tab-item-icon-gap: 8px;
+	--svelte-ui-tab-item-selected-bar-offset: 0px;
+	--svelte-ui-tab-item-selected-bar-height: 4px;
+	--svelte-ui-tab-item-selected-bar-radius: 3px 3px 0 0;
+	--svelte-ui-tab-item-disabled-opacity: var(--svelte-ui-disabled-opacity);
+
 	/* Input */
 	--svelte-ui-input-height: var(--svelte-ui-form-height);
 	--svelte-ui-input-padding: var(--svelte-ui-form-padding);
@@ -380,7 +395,11 @@
 
 	/* Textarea */
 	--svelte-ui-textarea-min-height: var(--svelte-ui-form-height);
-	--svelte-ui-textarea-padding: calc((var(--svelte-ui-textarea-min-height) - 1.8em) / 2) 12px;
+	--svelte-ui-textarea-line-height: 1.8em;
+	--svelte-ui-textarea-padding: calc(
+			(var(--svelte-ui-textarea-min-height) - var(--svelte-ui-textarea-line-height)) / 2
+		)
+		12px;
 	--svelte-ui-textarea-border-radius: var(--svelte-ui-border-radius);
 	--svelte-ui-textarea-border-radius-rounded: calc(var(--svelte-ui-textarea-min-height) / 2);
 	--svelte-ui-textarea-bg: var(--svelte-ui-form-bg);
@@ -473,10 +492,10 @@
 	--svelte-ui-radio-line-height: 1.2em;
 
 	/* CheckboxGroup */
-	--svelte-ui-checkbox-group-gap: 0 24px;
+	--svelte-ui-checkbox-group-gap: 8px 24px;
 
 	/* RadioGroup */
-	--svelte-ui-radio-group-gap: 0 24px;
+	--svelte-ui-radio-group-gap: 8px 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);
@@ -605,7 +624,7 @@
 	--svelte-ui-drawer-gap: 16px;
 	--svelte-ui-drawer-gap-sm: 8px;
 	--svelte-ui-drawer-header-padding: 16px 24px;
-	--svelte-ui-drawer-body-padding: 0;
+	--svelte-ui-drawer-body-padding: 24px;
 	--svelte-ui-drawer-header-height: 56px;
 	--svelte-ui-drawer-title-font-size: 1.4rem;
 	--svelte-ui-drawer-description-font-size: 0.875rem;
@@ -635,39 +654,80 @@
 	--svelte-ui-snackbar-action-padding: 4px 8px;
 	--svelte-ui-snackbar-action-border-radius: 4px;
 	--svelte-ui-snackbar-content-gap: 8px;
+	--svelte-ui-snackbar-backdrop-filter: blur(12px);
 
 	/* Snackbar default */
-	--svelte-ui-snackbar-default-filled-bg: var(--svelte-ui-surface-inverse-color);
+	--svelte-ui-snackbar-default-filled-bg: color-mix(
+		in srgb,
+		var(--svelte-ui-surface-inverse-color) 85%,
+		transparent
+	);
 	--svelte-ui-snackbar-default-filled-text-color: var(--svelte-ui-text-inverse-color);
-	--svelte-ui-snackbar-default-outlined-bg: var(--svelte-ui-surface-color);
+	--svelte-ui-snackbar-default-outlined-bg: color-mix(
+		in srgb,
+		var(--svelte-ui-surface-color) 85%,
+		transparent
+	);
 	--svelte-ui-snackbar-default-outlined-text-color: var(--svelte-ui-text-color);
-	--svelte-ui-snackbar-default-outlined-border-color: var(--svelte-ui-border-color);
+	--svelte-ui-snackbar-default-outlined-border-color: var(--svelte-ui-surface-inverse-color);
 
 	/* Snackbar info */
-	--svelte-ui-snackbar-info-filled-bg: var(--svelte-ui-info-color);
+	--svelte-ui-snackbar-info-filled-bg: color-mix(
+		in srgb,
+		var(--svelte-ui-info-color) 85%,
+		transparent
+	);
 	--svelte-ui-snackbar-info-filled-text-color: var(--svelte-ui-text-on-filled-color);
-	--svelte-ui-snackbar-info-outlined-bg: var(--svelte-ui-surface-color);
+	--svelte-ui-snackbar-info-outlined-bg: color-mix(
+		in srgb,
+		var(--svelte-ui-surface-color) 85%,
+		transparent
+	);
 	--svelte-ui-snackbar-info-outlined-text-color: var(--svelte-ui-info-color);
 	--svelte-ui-snackbar-info-outlined-border-color: var(--svelte-ui-info-color);
 
 	/* Snackbar success */
-	--svelte-ui-snackbar-success-filled-bg: var(--svelte-ui-success-color);
+	--svelte-ui-snackbar-success-filled-bg: color-mix(
+		in srgb,
+		var(--svelte-ui-success-color) 85%,
+		transparent
+	);
 	--svelte-ui-snackbar-success-filled-text-color: var(--svelte-ui-text-on-filled-color);
-	--svelte-ui-snackbar-success-outlined-bg: var(--svelte-ui-surface-color);
+	--svelte-ui-snackbar-success-outlined-bg: color-mix(
+		in srgb,
+		var(--svelte-ui-surface-color) 85%,
+		transparent
+	);
 	--svelte-ui-snackbar-success-outlined-text-color: var(--svelte-ui-success-color);
 	--svelte-ui-snackbar-success-outlined-border-color: var(--svelte-ui-success-color);
 
 	/* Snackbar warning */
-	--svelte-ui-snackbar-warning-filled-bg: var(--svelte-ui-warning-color);
+	--svelte-ui-snackbar-warning-filled-bg: color-mix(
+		in srgb,
+		var(--svelte-ui-warning-color) 85%,
+		transparent
+	);
 	--svelte-ui-snackbar-warning-filled-text-color: var(--svelte-ui-text-on-filled-color);
-	--svelte-ui-snackbar-warning-outlined-bg: var(--svelte-ui-surface-color);
+	--svelte-ui-snackbar-warning-outlined-bg: color-mix(
+		in srgb,
+		var(--svelte-ui-surface-color) 85%,
+		transparent
+	);
 	--svelte-ui-snackbar-warning-outlined-text-color: var(--svelte-ui-warning-color);
 	--svelte-ui-snackbar-warning-outlined-border-color: var(--svelte-ui-warning-color);
 
 	/* Snackbar error */
-	--svelte-ui-snackbar-error-filled-bg: var(--svelte-ui-error-color);
+	--svelte-ui-snackbar-error-filled-bg: color-mix(
+		in srgb,
+		var(--svelte-ui-error-color) 85%,
+		transparent
+	);
 	--svelte-ui-snackbar-error-filled-text-color: var(--svelte-ui-text-on-filled-color);
-	--svelte-ui-snackbar-error-outlined-bg: var(--svelte-ui-surface-color);
+	--svelte-ui-snackbar-error-outlined-bg: color-mix(
+		in srgb,
+		var(--svelte-ui-surface-color) 85%,
+		transparent
+	);
 	--svelte-ui-snackbar-error-outlined-text-color: var(--svelte-ui-error-color);
 	--svelte-ui-snackbar-error-outlined-border-color: var(--svelte-ui-error-color);
 
@@ -792,6 +852,11 @@
 		--svelte-ui-slider-custom-thumb-focus-shadow: 0 0 0 3px Highlight;
 		--svelte-ui-slider-custom-thumb-color: HighlightText;
 
+		/* Tab */
+		--svelte-ui-tab-item-text-color: CanvasText;
+		--svelte-ui-tab-item-selected-text-color: Highlight;
+		--svelte-ui-tab-item-selected-bar-color: Highlight;
+
 		/* Radio */
 		--svelte-ui-radio-border-color: CanvasText;
 		--svelte-ui-radio-border-width: var(--svelte-ui-border-width-thick);

package/dist/components/Button.svelte

@@ -470,7 +470,7 @@
 	}
 
 	/* Hover effects */
-	.button:before {
+	.button::before {
 		content: '';
 		display: block;
 		position: absolute;
@@ -486,7 +486,7 @@
 	}
 
 	@media (hover: hover) {
-		.button:hover:before {
+		.button:hover::before {
 			opacity: 1;
 		}
 	}
@@ -497,16 +497,14 @@
 		outline-offset: 2px;
 	}
 
-	/* Disabled state */
+	/* Disabled */
 	.button:disabled {
 		opacity: var(--svelte-ui-button-disabled-opacity);
-		cursor: not-allowed;
-		pointer-events: none;
-	}
+		cursor: not-allowed !important;
 
-	/* Loading state */
-	.button--loading {
-		cursor: wait;
+		&:hover::before {
+			opacity: 0;
+		}
 	}
 
 	/* Content sections */
@@ -536,7 +534,7 @@
 	}
 
 	.button__popup-icon {
-		margin-right: -4px;
+		margin: -12px -4px -12px 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -586,7 +584,7 @@
 
 	/* Reduced motion */
 	.button--no-motion,
-	.button--no-motion:before,
+	.button--no-motion::before,
 	.button--no-motion .button__label {
 		transition-duration: 0.01s;
 	}
@@ -594,7 +592,7 @@
 	/* Prefers reduced motion */
 	@media (prefers-reduced-motion: reduce) {
 		.button,
-		.button:before,
+		.button::before,
 		.button__label {
 			transition-duration: 0.01s;
 		}

package/dist/components/Checkbox.svelte

@@ -418,12 +418,13 @@
 	   ========================================================================= */
 
 	/* Disabled state */
-	.checkbox--disabled input[type='checkbox'] {
-		cursor: not-allowed;
+	.checkbox--disabled {
+		opacity: var(--svelte-ui-button-disabled-opacity);
 	}
 
+	.checkbox--disabled input[type='checkbox'],
+	.checkbox--disabled .checkbox__icon,
 	.checkbox--disabled .checkbox__label {
-		opacity: var(--svelte-ui-button-disabled-opacity);
 		cursor: not-allowed;
 	}
 
@@ -440,6 +441,7 @@
 	input[type='checkbox']:indeterminate + .checkbox__icon::after {
 		content: 'remove';
 		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);
@@ -473,10 +475,6 @@
 		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);
@@ -490,10 +488,6 @@
 		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);
@@ -509,15 +503,15 @@
 
 	/* Mobile touch targets */
 	@media (hover: none) and (pointer: coarse) {
-		.checkbox__label {
+		.checkbox {
 			min-height: var(--svelte-ui-touch-target);
 		}
 
-		.checkbox--small .checkbox__label {
+		.checkbox--small {
 			min-height: var(--svelte-ui-touch-target-sm);
 		}
 
-		.checkbox--large .checkbox__label {
+		.checkbox--large {
 			min-height: var(--svelte-ui-touch-target-lg);
 		}
 	}

package/dist/components/ColorPicker.svelte

@@ -23,12 +23,16 @@
 
 		// HTML属性系
 		id?: string;
+		ariaLabel?: string;
 		inputAttributes?: HTMLInputAttributes | undefined;
 
 		// スタイル/レイアウト
 		customStyle?: string;
 		focusStyle?: 'background' | 'outline' | 'none';
 		fullWidth?: boolean;
+		width?: string | number | null;
+		minWidth?: string | number | null;
+		maxWidth?: string | number | null;
 		rounded?: boolean;
 
 		// 状態/動作
@@ -85,12 +89,16 @@
 
 		// HTML属性系
 		id = `colorpicker-${Math.random().toString(36).substring(2, 15)}`,
+		ariaLabel,
 		inputAttributes,
 
 		// スタイル/レイアウト
 		customStyle = '',
 		focusStyle = 'outline',
 		fullWidth = false,
+		width,
+		minWidth,
+		maxWidth,
 		rounded = false,
 
 		// 状態/動作
@@ -181,17 +189,19 @@
 	// Methods
 	// =========================================================================
 
-	const handleChange = (value: string): void => {
-		if (value && !value.startsWith('#')) {
-			localValue = '#' + value;
-		} else {
-			localValue = value;
+	const handleChange = (newValue: string): void => {
+		let normalizedValue = newValue;
+
+		if (normalizedValue && !normalizedValue.startsWith('#')) {
+			normalizedValue = '#' + normalizedValue;
 		}
 
-		if (value !== prevValue || localValue !== prevValue) {
-			value = localValue;
-			prevValue = value;
-			onchange(value);
+		localValue = normalizedValue;
+
+		if (normalizedValue !== prevValue || localValue !== prevValue) {
+			value = normalizedValue;
+			prevValue = normalizedValue;
+			onchange(normalizedValue);
 		}
 	};
 
@@ -352,6 +362,9 @@
 		{clearButtonAriaLabel}
 		{focusStyle}
 		{fullWidth}
+		{width}
+		{minWidth}
+		{maxWidth}
 		{rounded}
 		customStyle={`padding-left: var(--svelte-ui-colorpicker-text-padding-left); ${customStyle}`}
 		{inputAttributes}
@@ -386,6 +399,7 @@
 	<div class="color-picker__trigger">
 		<input
 			type="color"
+			aria-label={ariaLabel ?? t('colorpicker.chooseColor')}
 			bind:value
 			onchange={handleValueChange}
 			onfocus={handleFocus}
@@ -393,7 +407,7 @@
 			onclick={handleClick}
 			onkeydown={handleKeydown}
 			{disabled}
-			class="color-picker__color-input"
+			class="color-picker__trigger-input"
 			{...inputAttributes}
 			{...restProps}
 		/>
@@ -443,14 +457,13 @@
 		}
 	}
 
-	.color-picker__color-input {
+	.color-picker__trigger-input {
 		opacity: 0;
 		position: absolute;
 		width: 100%;
 		height: 100%;
 		padding: 0;
 		z-index: 2;
-		pointer-events: auto;
 		cursor: pointer;
 	}
 
@@ -458,7 +471,6 @@
 		display: block;
 		width: 100%;
 		height: 100%;
-		cursor: pointer;
 		position: relative;
 		border-radius: var(--svelte-ui-colorpicker-trigger-border-radius);
 		z-index: 1;
@@ -475,10 +487,9 @@
  * 状態管理（disabled, focused等）
  * ============================================= */
 	.color-picker--disabled {
-		opacity: var(--svelte-ui-input-disabled-opacity);
-		pointer-events: none;
-
-		.color-picker__color-input {
+		/* Input 側は .input--disabled で opacity を持つため、ラッパーでは opacity をかけない（二重防止） */
+		.color-picker__trigger {
+			opacity: var(--svelte-ui-input-disabled-opacity);
 			cursor: not-allowed;
 			pointer-events: none;
 		}
@@ -488,7 +499,7 @@
  * 状態管理（readonly等）
  * ============================================= */
 	.color-picker--readonly {
-		.color-picker__color-input,
+		.color-picker__trigger-input,
 		.color-picker__trigger {
 			pointer-events: none;
 		}

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

@@ -4,10 +4,14 @@ import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, Pointer
 export type ColorPickerProps = {
     value: string | null | undefined;
     id?: string;
+    ariaLabel?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
     customStyle?: string;
     focusStyle?: 'background' | 'outline' | 'none';
     fullWidth?: boolean;
+    width?: string | number | null;
+    minWidth?: string | number | null;
+    maxWidth?: string | number | null;
     rounded?: boolean;
     disabled?: boolean;
     readonly?: boolean;

package/dist/components/Combobox.svelte

@@ -36,8 +36,9 @@
 		focusStyle?: 'background' | 'outline' | 'none';
 		placeholder?: string;
 		fullWidth?: boolean;
-		minWidth?: number | null;
-		maxWidth?: number | null;
+		width?: string | number | null;
+		minWidth?: string | number | null;
+		maxWidth?: string | number | null;
 		rounded?: boolean;
 
 		// 状態/動作
@@ -106,8 +107,9 @@
 		focusStyle = 'outline',
 		placeholder = t('combobox.placeholder'),
 		fullWidth = false,
-		minWidth = inline ? null : 120,
-		maxWidth = null,
+		width,
+		minWidth,
+		maxWidth,
 		rounded = false,
 
 		// 状態/動作
@@ -163,6 +165,7 @@
 	let listElement = $state<HTMLDivElement>();
 	let comboboxElement = $state<HTMLDivElement>();
 	let popupRef = $state<any>();
+	let isPopupOpen = $state(false);
 	let highlightedIndex = $state(-1);
 	let isFocused = $state(false);
 	let isKeyboardNavigation = $state(false);
@@ -172,6 +175,8 @@
 	// =========================================================================
 	// オプションを選択
 	const selectOption = (option: string) => {
+		if (disabled || readonly) return;
+
 		value = option;
 		inputValue = option;
 		popupRef?.close();
@@ -190,9 +195,14 @@
 	// input要素のフォーカス/クリック時
 	const handleInputFocus = (event: FocusEvent) => {
 		if (disabled) return;
-		isFocused = true;
-		popupRef?.open();
-		highlightedIndex = -1;
+
+		// readonly の場合はフォーカスイベントだけ伝播し、ポップアップは開かない
+		if (!readonly) {
+			isFocused = true;
+			popupRef?.open();
+			highlightedIndex = -1;
+		}
+
 		onfocus(event);
 	};
 
@@ -221,12 +231,14 @@
 
 	const handleClick = (event: MouseEvent) => {
 		if (disabled) return;
-		// クリック時にもポップアップを開く
-		if (!isFocused) {
+
+		// readonly の場合はクリックイベントだけ伝播し、ポップアップは開かない
+		if (!readonly && !isFocused) {
 			isFocused = true;
 			popupRef?.open();
 			highlightedIndex = -1;
 		}
+
 		onclick?.(event);
 	};
 
@@ -234,6 +246,9 @@
 		if (disabled) return;
 		onkeydown(event);
 
+		// readonly の場合はキーボード操作でのポップアップ制御や選択を無効化
+		if (readonly) return;
+
 		switch (event.key) {
 			case 'ArrowDown':
 				event?.preventDefault?.();
@@ -368,7 +383,7 @@
 		onpointercancel?.(event);
 	};
 
-	// Popup が閉じられたときの処理
+	// Popup が閉じられたときの処理（isPopupOpen は bind:isOpen で同期される）
 	const handlePopupClose = () => {
 		isFocused = false;
 		highlightedIndex = -1;
@@ -404,12 +419,11 @@
 	{id}
 	class="combobox"
 	class:combobox--full-width={fullWidth}
-	style="max-width: {maxWidth}px; min-width: {minWidth}px"
 	role="combobox"
-	aria-expanded={!!popupRef}
-	aria-controls={listboxId}
+	aria-expanded={isPopupOpen}
+	aria-controls={isPopupOpen ? listboxId : undefined}
 	aria-haspopup="listbox"
-	aria-owns={listboxId}
+	aria-owns={isPopupOpen ? listboxId : undefined}
 	data-testid="combobox"
 >
 	<!-- Inputコンポーネントを使用 -->
@@ -423,6 +437,9 @@
 		{focusStyle}
 		{placeholder}
 		{fullWidth}
+		{width}
+		{minWidth}
+		{maxWidth}
 		{disabled}
 		{readonly}
 		{required}
@@ -460,11 +477,12 @@
 		{...restProps}
 		role="textbox"
 		aria-autocomplete="list"
-		aria-controls={listboxId}
+		aria-controls={isPopupOpen ? listboxId : undefined}
 	/>
 	<!-- オプションリスト -->
 	<Popup
 		bind:this={popupRef}
+		bind:isOpen={isPopupOpen}
 		anchorElement={comboboxElement}
 		position="bottom-left"
 		mobileFullscreen={false}

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

@@ -13,8 +13,9 @@ export type ComboboxProps = {
     focusStyle?: 'background' | 'outline' | 'none';
     placeholder?: string;
     fullWidth?: boolean;
-    minWidth?: number | null;
-    maxWidth?: number | null;
+    width?: string | number | null;
+    minWidth?: string | number | null;
+    maxWidth?: string | number | null;
     rounded?: boolean;
     disabled?: boolean;
     readonly?: boolean;

package/dist/components/ConfirmDialog.svelte

@@ -22,6 +22,7 @@
 		// スタイル/レイアウト
 		danger?: boolean;
 		width?: string | number;
+		scrollable?: boolean;
 
 		// 状態/動作
 		isOpen?: boolean;
@@ -45,6 +46,7 @@
 		// スタイル/レイアウト
 		danger = false,
 		width = 400,
+		scrollable = false,
 
 		// 状態/動作
 		isOpen = $bindable(false),
@@ -88,6 +90,7 @@
 	bind:isOpen
 	{title}
 	{width}
+	{scrollable}
 	{closeIfClickOutside}
 	id={id ? `${id}-dialog` : undefined}
 >
@@ -108,7 +111,3 @@
 		</Button>
 	{/snippet}
 </Dialog>
-
-<style>.confirm-dialog-message {
-  padding: 16px 0;
-}</style>

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

@@ -6,6 +6,7 @@ export type ConfirmDialogProps = {
     id?: string;
     danger?: boolean;
     width?: string | number;
+    scrollable?: boolean;
     isOpen?: boolean;
     closeIfClickOutside?: boolean;
     onSubmit?: () => void;