@14ch/svelte-ui 0.0.68 → 0.0.70

package/dist/assets/styles/import.css

@@ -139,10 +139,13 @@
     * ==================================== */
   /* 基本テキスト色の定義 */
   --svelte-ui-text-color: var(--base-800-transparent);
-  --svelte-ui-text-subtle-color: var(--base-500-transparent);
+  --svelte-ui-text-weak-color: var(--base-500-transparent);
+  /* weak のエイリアス。weak から派生させることでどちらを上書きしても効く */
+  --svelte-ui-text-subtle-color: var(--svelte-ui-text-weak-color);
   --svelte-ui-text-on-filled-color: #ffffff;
   --svelte-ui-text-inverse-color: var(--white-800-transparent);
-  --svelte-ui-text-inverse-subtle-color: var(--white-500-transparent);
+  --svelte-ui-text-inverse-weak-color: var(--white-500-transparent);
+  --svelte-ui-text-inverse-subtle-color: var(--svelte-ui-text-inverse-weak-color);
   --svelte-ui-text-placeholder-color: var(--base-500-transparent);
   /* ボーダーカラー */
   --svelte-ui-border-color: var(--base-200-transparent);
@@ -179,10 +182,12 @@
 [data-theme=dark] {
   /* 基本テキスト色の定義 */
   --svelte-ui-text-color: var(--white-800-transparent);
-  --svelte-ui-text-subtle-color: var(--white-500-transparent);
+  --svelte-ui-text-weak-color: var(--white-500-transparent);
+  --svelte-ui-text-subtle-color: var(--svelte-ui-text-weak-color);
   --svelte-ui-text-on-filled-color: #ffffff;
   --svelte-ui-text-inverse-color: var(--base-800-transparent);
-  --svelte-ui-text-inverse-subtle-color: var(--base-500-transparent);
+  --svelte-ui-text-inverse-weak-color: var(--base-500-transparent);
+  --svelte-ui-text-inverse-subtle-color: var(--svelte-ui-text-inverse-weak-color);
   --svelte-ui-text-placeholder-color: var(--white-500-transparent);
   /* ボーダーカラー */
   --svelte-ui-border-color: var(--white-200-transparent);
@@ -460,6 +465,15 @@
   --svelte-ui-select-border-color: var(--svelte-ui-border-weak-color);
   --svelte-ui-select-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
   --svelte-ui-select-placeholder-color: var(--svelte-ui-text-placeholder-color);
+  --svelte-ui-select-options-min-width: 160px;
+  --svelte-ui-select-options-max-height: 280px;
+  --svelte-ui-select-option-padding: 8px 12px;
+  --svelte-ui-select-option-gap: 4px;
+  --svelte-ui-select-option-check-size: 18px;
+  --svelte-ui-select-option-hover-bg: var(--svelte-ui-hover-overlay);
+  --svelte-ui-select-option-selected-bg: var(--svelte-ui-select-overlay);
+  --svelte-ui-select-separator-margin: 4px 0;
+  --svelte-ui-select-separator-color: var(--svelte-ui-border-color);
   /* Checkbox */
   --svelte-ui-checkbox-size: 16px;
   --svelte-ui-checkbox-size-sm: 14px;
@@ -789,7 +803,7 @@
   [data-theme=dark] {
     /* ===== 基本色の上書き ===== */
     --svelte-ui-text-color: CanvasText;
-    --svelte-ui-text-subtle-color: CanvasText;
+    --svelte-ui-text-weak-color: CanvasText;
     --svelte-ui-surface-accent-color: CanvasText;
     --svelte-ui-text-on-filled-color: HighlightText;
     --svelte-ui-text-placeholder-color: CanvasText;
@@ -827,6 +841,7 @@
     --svelte-ui-select-border-color: CanvasText;
     --svelte-ui-select-text-color: CanvasText;
     --svelte-ui-select-dropdown-icon-color: CanvasText;
+    --svelte-ui-select-separator-color: CanvasText;
     --svelte-ui-colorpicker-border-color: CanvasText;
     --svelte-ui-colorpicker-trigger-border-color: CanvasText;
     --svelte-ui-colorpicker-bg: Canvas;
@@ -875,6 +890,8 @@
     /* ===== オーバーレイ・インタラクション色の上書き ===== */
     --svelte-ui-hover-overlay: Highlight;
     --svelte-ui-select-overlay: Highlight;
+    --svelte-ui-select-option-hover-bg: Highlight;
+    --svelte-ui-select-option-selected-bg: Highlight;
     --svelte-ui-combobox-option-hover-bg: Highlight;
     --svelte-ui-combobox-option-selected-bg: Highlight;
     /* ===== アイコンボタンの上書き ===== */

package/dist/assets/styles/variables.scss

@@ -141,10 +141,13 @@
 
 	/* 基本テキスト色の定義 */
 	--svelte-ui-text-color: var(--base-800-transparent);
-	--svelte-ui-text-subtle-color: var(--base-500-transparent);
+	--svelte-ui-text-weak-color: var(--base-500-transparent);
+	/* weak のエイリアス。weak から派生させることでどちらを上書きしても効く */
+	--svelte-ui-text-subtle-color: var(--svelte-ui-text-weak-color);
 	--svelte-ui-text-on-filled-color: #ffffff;
 	--svelte-ui-text-inverse-color: var(--white-800-transparent);
-	--svelte-ui-text-inverse-subtle-color: var(--white-500-transparent);
+	--svelte-ui-text-inverse-weak-color: var(--white-500-transparent);
+	--svelte-ui-text-inverse-subtle-color: var(--svelte-ui-text-inverse-weak-color);
 	--svelte-ui-text-placeholder-color: var(--base-500-transparent);
 
 	/* ボーダーカラー */
@@ -193,10 +196,12 @@
 [data-theme='dark'] {
 	/* 基本テキスト色の定義 */
 	--svelte-ui-text-color: var(--white-800-transparent);
-	--svelte-ui-text-subtle-color: var(--white-500-transparent);
+	--svelte-ui-text-weak-color: var(--white-500-transparent);
+	--svelte-ui-text-subtle-color: var(--svelte-ui-text-weak-color);
 	--svelte-ui-text-on-filled-color: #ffffff;
 	--svelte-ui-text-inverse-color: var(--base-800-transparent);
-	--svelte-ui-text-inverse-subtle-color: var(--base-500-transparent);
+	--svelte-ui-text-inverse-weak-color: var(--base-500-transparent);
+	--svelte-ui-text-inverse-subtle-color: var(--svelte-ui-text-inverse-weak-color);
 	--svelte-ui-text-placeholder-color: var(--white-500-transparent);
 
 	/* ボーダーカラー */
@@ -502,6 +507,15 @@
 	--svelte-ui-select-border-color: var(--svelte-ui-border-weak-color);
 	--svelte-ui-select-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
 	--svelte-ui-select-placeholder-color: var(--svelte-ui-text-placeholder-color);
+	--svelte-ui-select-options-min-width: 160px;
+	--svelte-ui-select-options-max-height: 280px;
+	--svelte-ui-select-option-padding: 8px 12px;
+	--svelte-ui-select-option-gap: 4px;
+	--svelte-ui-select-option-check-size: 18px;
+	--svelte-ui-select-option-hover-bg: var(--svelte-ui-hover-overlay);
+	--svelte-ui-select-option-selected-bg: var(--svelte-ui-select-overlay);
+	--svelte-ui-select-separator-margin: 4px 0;
+	--svelte-ui-select-separator-color: var(--svelte-ui-border-color);
 
 	/* Checkbox */
 	--svelte-ui-checkbox-size: 16px;
@@ -860,7 +874,7 @@
 	[data-theme='dark'] {
 		/* ===== 基本色の上書き ===== */
 		--svelte-ui-text-color: CanvasText;
-		--svelte-ui-text-subtle-color: CanvasText;
+		--svelte-ui-text-weak-color: CanvasText;
 		--svelte-ui-surface-accent-color: CanvasText;
 		--svelte-ui-text-on-filled-color: HighlightText;
 		--svelte-ui-text-placeholder-color: CanvasText;
@@ -905,6 +919,7 @@
 		--svelte-ui-select-border-color: CanvasText;
 		--svelte-ui-select-text-color: CanvasText;
 		--svelte-ui-select-dropdown-icon-color: CanvasText;
+		--svelte-ui-select-separator-color: CanvasText;
 		--svelte-ui-colorpicker-border-color: CanvasText;
 		--svelte-ui-colorpicker-trigger-border-color: CanvasText;
 		--svelte-ui-colorpicker-bg: Canvas;
@@ -960,6 +975,8 @@
 		/* ===== オーバーレイ・インタラクション色の上書き ===== */
 		--svelte-ui-hover-overlay: Highlight;
 		--svelte-ui-select-overlay: Highlight;
+		--svelte-ui-select-option-hover-bg: Highlight;
+		--svelte-ui-select-option-selected-bg: Highlight;
 		--svelte-ui-combobox-option-hover-bg: Highlight;
 		--svelte-ui-combobox-option-selected-bg: Highlight;
 

package/dist/components/ColorPicker.svelte

@@ -402,7 +402,7 @@
 		{minWidth}
 		{maxWidth}
 		{rounded}
-		customStyle={`padding-left: var(--svelte-ui-colorpicker-text-padding-left); ${customStyle}`}
+		customStyle={`${customStyle}; padding-left: var(--svelte-ui-colorpicker-text-padding-left)`}
 		onchange={handleChange}
 		oninput={handleInput}
 		onfocus={handleFocus}

package/dist/components/Input.svelte

@@ -704,9 +704,37 @@
 	// --------------------------------
 	// style from number
 	// --------------------------------
+	// アイコンの領域は customStyle で消されないよう、customStyle より後ろに指定する
+	const iconSpaceSuffix = $derived(inline ? '-inline' : '');
+	const iconPaddingStyle = $derived(
+		[
+			hasLeftIcon ? `padding-left: var(--svelte-ui-input-icon-space${iconSpaceSuffix})` : '',
+			clearable && hasRightIcon
+				? `padding-right: var(--svelte-ui-input-icon-space-double${iconSpaceSuffix})`
+				: clearable || hasRightIcon
+					? `padding-right: var(--svelte-ui-input-icon-space${iconSpaceSuffix})`
+					: ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 	const widthStyle = $derived(getStyleFromNumber(width));
 	const maxWidthStyle = $derived(getStyleFromNumber(maxWidth));
 	const minWidthStyle = $derived(getStyleFromNumber(minWidth));
+
+	// style: ディレクティブは style 属性に勝つため、幅の指定も customStyle と同じ文字列に混ぜる。
+	// 専用プロップが指定されたときだけ customStyle より後ろに置いてプロップを優先させる
+	const boxStyle = $derived(
+		[
+			customStyle,
+			iconPaddingStyle,
+			widthStyle ? `width: ${widthStyle}` : '',
+			minWidthStyle ? `min-width: ${minWidthStyle}` : '',
+			maxWidthStyle ? `max-width: ${maxWidthStyle}` : ''
+		]
+			.filter(Boolean)
+			.join('; ')
+	);
 </script>
 
 <div
@@ -727,12 +755,10 @@
 	class:input--readonly={readonly}
 	class:input--focused={isFocused}
 	data-testid="input"
-	style:width={widthStyle}
-	style:max-width={maxWidthStyle}
-	style:min-width={minWidthStyle}
+	style={boxStyle}
 >
 	<!-- 表示用テキスト -->
-	<div class="input__display-text" style={customStyle}>
+	<div class="input__display-text">
 		<div
 			class="input__display-text-content"
 			class:input__display-text-content--placeholder={!hasDisplayValue}
@@ -753,7 +779,6 @@
 			bind:value
 			bind:this={ref}
 			type={resolvedType}
-			style={customStyle}
 			{placeholder}
 			{autocomplete}
 			{min}
@@ -798,7 +823,7 @@
 		/>
 	</div>
 	{#if isLinkifyActive}
-		<div class="input__link-text" style={customStyle}>
+		<div class="input__link-text">
 			<div class="input__link-text-content">
 				{@html linkHtmlValue}
 			</div>
@@ -905,6 +930,11 @@
 		width: auto;
 		max-width: 100%;
 		height: inherit;
+		min-height: var(--svelte-ui-input-height);
+		padding: var(--svelte-ui-input-padding);
+		background-color: var(--svelte-ui-input-bg);
+		box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-input-border-color);
+		border-radius: var(--svelte-ui-input-border-radius);
 	}
 
 	.input__wrapper {
@@ -915,9 +945,8 @@
 		height: 100%;
 		padding: inherit;
 		border: none;
-		border-radius: var(--svelte-ui-input-border-radius);
-		background-color: var(--svelte-ui-input-bg);
-		box-shadow: 0 0 0 var(--svelte-ui-border-width) inset var(--svelte-ui-input-border-color);
+		border-radius: inherit;
+		background-color: transparent;
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;
@@ -935,10 +964,10 @@
 		width: 100%;
 		min-width: 1em;
 		min-height: var(--svelte-ui-input-height);
-		padding: var(--svelte-ui-input-padding);
+		padding: 0;
 		background-color: transparent;
 		border: none;
-		border-radius: var(--svelte-ui-input-border-radius);
+		border-radius: inherit;
 		font-family: inherit;
 		font-size: inherit;
 		font-weight: inherit;
@@ -962,7 +991,7 @@
 		width: 100%;
 		min-width: 1em;
 		height: var(--svelte-ui-input-height);
-		padding: var(--svelte-ui-input-padding);
+		padding: 0;
 		font-size: inherit;
 		font-weight: inherit;
 		color: inherit;
@@ -990,6 +1019,7 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
+		padding: inherit;
 		pointer-events: none;
 		z-index: 1;
 	}
@@ -1005,7 +1035,7 @@
 	/* =============================================
  * 表示制御
  * ============================================= */
-	/* 非フォーカス時: input要素自体を不可視化（枠線・背景はラッパーにあるため display-text のみ表示） */
+	/* 非フォーカス時: input要素自体を不可視化（枠線・背景はルートにあるため display-text のみ表示） */
 	.input:not(.input--focused) input {
 		opacity: 0;
 	}
@@ -1027,7 +1057,11 @@
 	/* =============================================
  * フォーカス効果バリエーション
  * ============================================= */
-	.input--focus-outline input:focus {
+	input:focus {
+		outline: none;
+	}
+
+	.input--focus-outline.input--focused .input__wrapper {
 		outline: var(--svelte-ui-focus-outline-inner);
 		outline-offset: var(--svelte-ui-focus-outline-offset-inner);
 	}
@@ -1036,14 +1070,6 @@
 		background: var(--svelte-ui-hover-overlay);
 	}
 
-	.input--focus-background input:focus {
-		outline: none;
-	}
-
-	.input--focus-none input:focus {
-		outline: none;
-	}
-
 	/* =============================================
  * 状態管理（disabled, readonly等）
  * ============================================= */
@@ -1089,22 +1115,6 @@
 		transition: var(--svelte-ui-transition-duration);
 	}
 
-	.input--clearable {
-		input,
-		.input__display-text,
-		.input__link-text {
-			padding-right: var(--svelte-ui-input-icon-space);
-		}
-	}
-
-	.input--clearable.input--has-right-icon {
-		input,
-		.input__display-text,
-		.input__link-text {
-			padding-right: var(--svelte-ui-input-icon-space-double);
-		}
-	}
-
 	.input--has-right-icon .input__clear-button {
 		right: var(--svelte-ui-input-icon-space);
 	}
@@ -1122,22 +1132,6 @@
 	}
 
 	/* アイコン */
-	.input--has-left-icon {
-		input,
-		.input__display-text,
-		.input__link-text {
-			padding-left: var(--svelte-ui-input-icon-space);
-		}
-	}
-
-	.input--has-right-icon {
-		input,
-		.input__display-text,
-		.input__link-text {
-			padding-right: var(--svelte-ui-input-icon-space);
-		}
-	}
-
 	.input__icon-left {
 		display: flex;
 		justify-content: center;
@@ -1214,29 +1208,27 @@
  * デザインバリエーション
  * ============================================= */
 	/* rounded */
-	.input--rounded .input__wrapper,
-	.input--rounded input {
+	.input--rounded {
 		border-radius: var(--svelte-ui-input-border-radius-rounded);
 	}
 
 	/* inline */
-	.input--inline .input__wrapper,
-	.input--inline input {
-		min-height: inherit;
-		line-height: inherit;
+	.input--inline {
+		min-height: 0;
+		padding: 0;
 		background-color: transparent;
 		box-shadow: none;
-		border: inherit;
 		border-radius: 0;
-	}
 
-	.input--inline {
+		input {
+			min-height: 0;
+		}
+
 		input,
 		.input__display-text,
 		.input__link-text {
 			height: inherit;
 			line-height: inherit;
-			padding: inherit;
 		}
 
 		/*
@@ -1249,41 +1241,11 @@
 			line-height: normal;
 		}
 
-		&.input--has-left-icon {
-			input,
-			.input__display-text,
-			.input__link-text {
-				padding-left: var(--svelte-ui-input-icon-space-inline);
-			}
-		}
-
 		&.input--has-right-icon {
-			input,
-			.input__display-text,
-			.input__link-text {
-				padding-right: var(--svelte-ui-input-icon-space-inline);
-			}
-
 			.input__icon-right {
 				right: 0;
 			}
 		}
-
-		&.input--clearable {
-			input,
-			.input__display-text,
-			.input__link-text {
-				padding-right: var(--svelte-ui-input-icon-space-inline);
-			}
-		}
-
-		&.input--clearable.input--has-right-icon {
-			input,
-			.input__display-text,
-			.input__link-text {
-				padding-right: var(--svelte-ui-input-icon-space-double-inline);
-			}
-		}
 	}
 
 	/* full-width */

package/dist/components/MultiSelect.svelte

@@ -16,8 +16,8 @@
 		// 基本プロパティ
 		/** Selected values array. Supports `bind:value`. */
 		value: OptionValue[];
-		/** `{ label, value, disabled? }[]` */
-		options: Option[];
+		/** `{ label, value, disabled? }[]` or `'separator'` for dividers. */
+		options: (Option | 'separator')[];
 
 		// HTML属性系
 		id?: string | null;
@@ -82,11 +82,20 @@
 	// =========================================================================
 	// $derived
 	// =========================================================================
+	// アイコンの領域は customStyle で消されないよう、customStyle より後ろに指定する
+	const triggerStyle = $derived(
+		[customStyle, `padding-right: var(--svelte-ui-select-icon-space${inline ? '-inline' : ''})`]
+			.filter(Boolean)
+			.join('; ')
+	);
+
 	const fallbackId = `multi-select-${Math.random().toString(36).substring(2, 15)}`;
 	const listboxId = $derived(`${id ?? fallbackId}-listbox`);
 
 	const selectedLabels = $derived(
-		options.filter((o) => value.includes(o.value)).map((o) => o.label)
+		options
+			.filter((option): option is Option => option !== 'separator' && value.includes(option.value))
+			.map((option) => option.label)
 	);
 
 	// =========================================================================
@@ -159,7 +168,7 @@
 		aria-required={required ? 'true' : undefined}
 		{tabindex}
 		{disabled}
-		style={customStyle}
+		style={triggerStyle}
 		onfocus={handleFocus}
 		onblur={handleBlur}
 		onclick={handleTriggerClick}
@@ -199,20 +208,24 @@
 			role="listbox"
 			aria-multiselectable="true"
 			aria-label={ariaLabel ?? t('multiSelect.accessibleName')}
-			style:min-width="{triggerWidth}px"
+			style:--internal-multi-select-trigger-width="{triggerWidth}px"
 		>
-			{#each options as option (option.value)}
-				<li role="presentation" class="multi-select__item">
-					<Checkbox
-						value={value.includes(option.value)}
-						disabled={option.disabled}
-						fullWidth
-						customStyle="padding: 8px 12px"
-						onchange={() => toggleOption(option.value)}
-					>
-						{option.label}
-					</Checkbox>
-				</li>
+			{#each options as option, index (option === 'separator' ? `separator-${index}` : option.value)}
+				{#if option === 'separator'}
+					<li class="multi-select__separator" role="separator"></li>
+				{:else}
+					<li role="presentation" class="multi-select__item">
+						<Checkbox
+							value={value.includes(option.value)}
+							disabled={option.disabled}
+							fullWidth
+							customStyle="padding: 8px 12px"
+							onchange={() => toggleOption(option.value)}
+						>
+							{option.label}
+						</Checkbox>
+					</li>
+				{/if}
 			{/each}
 		</ul>
 	</Popup>
@@ -237,7 +250,6 @@
   width: 100%;
   min-height: var(--svelte-ui-select-height);
   padding: var(--svelte-ui-select-padding);
-  padding-right: var(--svelte-ui-select-icon-space);
   background: transparent;
   border: none;
   font-family: inherit;
@@ -252,7 +264,6 @@
 }
 
 .multi-select__inner {
-  position: relative;
   flex: 1;
   align-self: stretch;
   display: flex;
@@ -281,11 +292,9 @@
   justify-content: center;
   align-items: center;
   position: absolute;
-  top: 0;
+  top: 50%;
   right: 4px;
-  margin-top: calc((var(--svelte-ui-select-height) - 32px) / 2);
-  margin-bottom: calc((var(--svelte-ui-select-height) - 32px) / 2);
-  margin-right: calc(0px - var(--svelte-ui-select-icon-space));
+  transform: translateY(-50%);
   width: 32px;
   height: 32px;
   color: var(--svelte-ui-select-dropdown-icon-color);
@@ -346,7 +355,6 @@
  * ============================================= */
 .multi-select.multi-select--inline .multi-select__trigger {
   padding: inherit;
-  padding-right: var(--svelte-ui-input-icon-space-inline);
   background: transparent;
   border: none;
   border-radius: 0;
@@ -362,9 +370,7 @@
 .multi-select.multi-select--inline .multi-select__dropdown-icon {
   top: calc((1lh - 32px) / 2);
   right: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-right: calc(0px - var(--svelte-ui-input-icon-space-inline));
+  transform: none;
 }
 
 /* =============================================
@@ -381,8 +387,9 @@
   list-style: none;
   margin: 0;
   padding: 0;
-  min-width: 160px;
-  max-height: var(--svelte-ui-combobox-options-max-height);
+  /* トリガー幅に合わせつつ、トリガーが狭いときはテーマの下限を保つ */
+  min-width: max(var(--internal-multi-select-trigger-width, 0px), var(--svelte-ui-select-options-min-width));
+  max-height: var(--svelte-ui-select-options-max-height);
   overflow-y: auto;
 }
 
@@ -397,11 +404,8 @@
   }
 }
 
-.multi-select__option-cover {
-  position: absolute;
-  inset: 0;
-  cursor: pointer;
-}
-.multi-select__option-cover--disabled {
-  cursor: not-allowed;
+.multi-select__separator {
+  height: 0;
+  margin: var(--svelte-ui-select-separator-margin);
+  border-bottom: solid 1px var(--svelte-ui-select-separator-color);
 }</style>

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

@@ -4,8 +4,8 @@ import type { PopupPosition } from '../types/propOptions';
 export type MultiSelectProps = {
     /** Selected values array. Supports `bind:value`. */
     value: OptionValue[];
-    /** `{ label, value, disabled? }[]` */
-    options: Option[];
+    /** `{ label, value, disabled? }[]` or `'separator'` for dividers. */
+    options: (Option | 'separator')[];
     id?: string | null;
     ariaLabel?: string;
     tabindex?: number | null;