@14ch/svelte-ui 0.0.70 → 0.0.72

package/dist/assets/styles/core.scss

@@ -19,6 +19,8 @@
 button {
 	background: transparent;
 	border: none;
+	/* UA 既定の color: buttontext は継承より強く、ダークテーマでも黒のままになる */
+	color: inherit;
 	font-size: inherit;
 	font-weight: inherit;
 	cursor: pointer;

package/dist/assets/styles/import.css

@@ -157,6 +157,8 @@
   --svelte-ui-form-bg: var(--base-50-transparent);
   /* サーフェス背景色 */
   --svelte-ui-surface-color: var(--white);
+  /* 浮き上がる面（ポップアップ・ダイアログ等）。ライトは白より明るくできないため地の面と同じ */
+  --svelte-ui-surface-elevated-color: var(--svelte-ui-surface-color);
   --svelte-ui-surface-accent-color: var(--base-50-transparent);
   --svelte-ui-surface-inverse-color: var(--base-800-transparent);
   /* スケルトン色 */
@@ -174,6 +176,10 @@
   --svelte-ui-disabled-bg: var(--base-50-transparent);
   /* Glass色 */
   --svelte-ui-glass-bg: var(--base-50-transparent);
+  /* 影の色（浮き上がり表現） */
+  --svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.2);
+  --svelte-ui-shadow-color: rgba(0, 0, 0, 0.14);
+  --svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.12);
 }
 
 /* ====================================
@@ -199,6 +205,8 @@
   --svelte-ui-form-bg: var(--white-100-transparent);
   /* サーフェス背景色 */
   --svelte-ui-surface-color: var(--base-950);
+  /* 浮き上がる面。暗いテーマでは「明るい＝手前」で奥行きを示すため一段明るくする */
+  --svelte-ui-surface-elevated-color: var(--base-900);
   --svelte-ui-surface-accent-color: var(--white-50-transparent);
   --svelte-ui-surface-inverse-color: var(--white-800-transparent);
   /* スケルトン色 */
@@ -214,6 +222,10 @@
   --svelte-ui-disabled-bg: var(--white-100-transparent);
   /* Glass色 */
   --svelte-ui-glass-bg: var(--white-100-transparent);
+  /* 影の色（浮き上がり表現）。暗い背景では黒い影が沈んで見えないため濃くする */
+  --svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.6);
+  --svelte-ui-shadow-color: rgba(0, 0, 0, 0.45);
+  --svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.4);
 }
 
 :where(:root),
@@ -369,7 +381,7 @@
   --svelte-ui-nav-children-offset: 8px;
   /* Nav: sub-menu */
   --svelte-ui-nav-sub-popup-min-width: 160px;
-  --svelte-ui-nav-sub-popup-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --svelte-ui-nav-sub-popup-shadow: 0 4px 16px var(--svelte-ui-shadow-color-weak);
   --svelte-ui-nav-item-child-indent: 32px;
   --svelte-ui-nav-bottom-sheet-overlay-bg: rgba(0, 0, 0, 0.4);
   --svelte-ui-nav-bottom-sheet-border-radius: 16px 16px 0 0;
@@ -581,7 +593,7 @@
   --svelte-ui-combobox-border-radius: var(--svelte-ui-form-border-radius);
   --svelte-ui-combobox-border-radius-rounded: var(--svelte-ui-form-border-radius-rounded);
   --svelte-ui-combobox-border-color: var(--svelte-ui-border-weak-color);
-  --svelte-ui-combobox-bg: var(--svelte-ui-surface-color);
+  --svelte-ui-combobox-bg: var(--svelte-ui-surface-elevated-color);
   --svelte-ui-combobox-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
   --svelte-ui-combobox-option-hover-bg: var(--svelte-ui-hover-overlay);
   --svelte-ui-combobox-option-selected-bg: var(--svelte-ui-select-overlay);
@@ -684,7 +696,7 @@
   --svelte-ui-snackbar-z-index: 9999;
   --svelte-ui-snackbar-font-size: var(--svelte-ui-font-size);
   --svelte-ui-snackbar-line-height: 1.4;
-  --svelte-ui-snackbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --svelte-ui-snackbar-shadow: 0 4px 12px var(--svelte-ui-shadow-color);
   --svelte-ui-snackbar-action-font-size: var(--svelte-ui-font-size-xs);
   --svelte-ui-snackbar-action-font-weight: 600;
   --svelte-ui-snackbar-action-padding: 4px 8px;
@@ -700,7 +712,7 @@
   --svelte-ui-snackbar-default-filled-text-color: var(--svelte-ui-text-inverse-color);
   --svelte-ui-snackbar-default-outlined-bg: color-mix(
   	in srgb,
-  	var(--svelte-ui-surface-color) 85%,
+  	var(--svelte-ui-surface-elevated-color) 85%,
   	transparent
   );
   --svelte-ui-snackbar-default-outlined-text-color: var(--svelte-ui-text-color);
@@ -714,7 +726,7 @@
   --svelte-ui-snackbar-info-filled-text-color: var(--svelte-ui-text-on-filled-color);
   --svelte-ui-snackbar-info-outlined-bg: color-mix(
   	in srgb,
-  	var(--svelte-ui-surface-color) 85%,
+  	var(--svelte-ui-surface-elevated-color) 85%,
   	transparent
   );
   --svelte-ui-snackbar-info-outlined-text-color: var(--svelte-ui-info-color);
@@ -728,7 +740,7 @@
   --svelte-ui-snackbar-success-filled-text-color: var(--svelte-ui-text-on-filled-color);
   --svelte-ui-snackbar-success-outlined-bg: color-mix(
   	in srgb,
-  	var(--svelte-ui-surface-color) 85%,
+  	var(--svelte-ui-surface-elevated-color) 85%,
   	transparent
   );
   --svelte-ui-snackbar-success-outlined-text-color: var(--svelte-ui-success-color);
@@ -742,7 +754,7 @@
   --svelte-ui-snackbar-warning-filled-text-color: var(--svelte-ui-text-on-filled-color);
   --svelte-ui-snackbar-warning-outlined-bg: color-mix(
   	in srgb,
-  	var(--svelte-ui-surface-color) 85%,
+  	var(--svelte-ui-surface-elevated-color) 85%,
   	transparent
   );
   --svelte-ui-snackbar-warning-outlined-text-color: var(--svelte-ui-warning-color);
@@ -756,7 +768,7 @@
   --svelte-ui-snackbar-error-filled-text-color: var(--svelte-ui-text-on-filled-color);
   --svelte-ui-snackbar-error-outlined-bg: color-mix(
   	in srgb,
-  	var(--svelte-ui-surface-color) 85%,
+  	var(--svelte-ui-surface-elevated-color) 85%,
   	transparent
   );
   --svelte-ui-snackbar-error-outlined-text-color: var(--svelte-ui-error-color);
@@ -927,6 +939,8 @@
 button {
   background: transparent;
   border: none;
+  /* UA 既定の color: buttontext は継承より強く、ダークテーマでも黒のままになる */
+  color: inherit;
   font-size: inherit;
   font-weight: inherit;
   cursor: pointer;

package/dist/assets/styles/variables.scss

@@ -163,6 +163,8 @@
 
 	/* サーフェス背景色 */
 	--svelte-ui-surface-color: var(--white);
+	/* 浮き上がる面（ポップアップ・ダイアログ等）。ライトは白より明るくできないため地の面と同じ */
+	--svelte-ui-surface-elevated-color: var(--svelte-ui-surface-color);
 	--svelte-ui-surface-accent-color: var(--base-50-transparent);
 	--svelte-ui-surface-inverse-color: var(--base-800-transparent);
 
@@ -187,6 +189,11 @@
 
 	/* Glass色 */
 	--svelte-ui-glass-bg: var(--base-50-transparent);
+
+	/* 影の色（浮き上がり表現） */
+	--svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.2);
+	--svelte-ui-shadow-color: rgba(0, 0, 0, 0.14);
+	--svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.12);
 }
 
 /* ====================================
@@ -217,6 +224,8 @@
 
 	/* サーフェス背景色 */
 	--svelte-ui-surface-color: var(--base-950);
+	/* 浮き上がる面。暗いテーマでは「明るい＝手前」で奥行きを示すため一段明るくする */
+	--svelte-ui-surface-elevated-color: var(--base-900);
 	--svelte-ui-surface-accent-color: var(--white-50-transparent);
 	--svelte-ui-surface-inverse-color: var(--white-800-transparent);
 
@@ -238,6 +247,11 @@
 
 	/* Glass色 */
 	--svelte-ui-glass-bg: var(--white-100-transparent);
+
+	/* 影の色（浮き上がり表現）。暗い背景では黒い影が沈んで見えないため濃くする */
+	--svelte-ui-shadow-color-strong: rgba(0, 0, 0, 0.6);
+	--svelte-ui-shadow-color: rgba(0, 0, 0, 0.45);
+	--svelte-ui-shadow-color-weak: rgba(0, 0, 0, 0.4);
 }
 
 :where(:root),
@@ -407,7 +421,7 @@
 	--svelte-ui-nav-children-offset: 8px;
 	/* Nav: sub-menu */
 	--svelte-ui-nav-sub-popup-min-width: 160px;
-	--svelte-ui-nav-sub-popup-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+	--svelte-ui-nav-sub-popup-shadow: 0 4px 16px var(--svelte-ui-shadow-color-weak);
 	--svelte-ui-nav-item-child-indent: 32px;
 	--svelte-ui-nav-bottom-sheet-overlay-bg: rgba(0, 0, 0, 0.4);
 	--svelte-ui-nav-bottom-sheet-border-radius: 16px 16px 0 0;
@@ -631,7 +645,7 @@
 	--svelte-ui-combobox-border-radius: var(--svelte-ui-form-border-radius);
 	--svelte-ui-combobox-border-radius-rounded: var(--svelte-ui-form-border-radius-rounded);
 	--svelte-ui-combobox-border-color: var(--svelte-ui-border-weak-color);
-	--svelte-ui-combobox-bg: var(--svelte-ui-surface-color);
+	--svelte-ui-combobox-bg: var(--svelte-ui-surface-elevated-color);
 	--svelte-ui-combobox-dropdown-icon-color: var(--svelte-ui-dropdown-icon-color);
 	--svelte-ui-combobox-option-hover-bg: var(--svelte-ui-hover-overlay);
 	--svelte-ui-combobox-option-selected-bg: var(--svelte-ui-select-overlay);
@@ -744,7 +758,7 @@
 	--svelte-ui-snackbar-z-index: 9999;
 	--svelte-ui-snackbar-font-size: var(--svelte-ui-font-size);
 	--svelte-ui-snackbar-line-height: 1.4;
-	--svelte-ui-snackbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+	--svelte-ui-snackbar-shadow: 0 4px 12px var(--svelte-ui-shadow-color);
 	--svelte-ui-snackbar-action-font-size: var(--svelte-ui-font-size-xs);
 	--svelte-ui-snackbar-action-font-weight: 600;
 	--svelte-ui-snackbar-action-padding: 4px 8px;
@@ -761,7 +775,7 @@
 	--svelte-ui-snackbar-default-filled-text-color: var(--svelte-ui-text-inverse-color);
 	--svelte-ui-snackbar-default-outlined-bg: color-mix(
 		in srgb,
-		var(--svelte-ui-surface-color) 85%,
+		var(--svelte-ui-surface-elevated-color) 85%,
 		transparent
 	);
 	--svelte-ui-snackbar-default-outlined-text-color: var(--svelte-ui-text-color);
@@ -776,7 +790,7 @@
 	--svelte-ui-snackbar-info-filled-text-color: var(--svelte-ui-text-on-filled-color);
 	--svelte-ui-snackbar-info-outlined-bg: color-mix(
 		in srgb,
-		var(--svelte-ui-surface-color) 85%,
+		var(--svelte-ui-surface-elevated-color) 85%,
 		transparent
 	);
 	--svelte-ui-snackbar-info-outlined-text-color: var(--svelte-ui-info-color);
@@ -791,7 +805,7 @@
 	--svelte-ui-snackbar-success-filled-text-color: var(--svelte-ui-text-on-filled-color);
 	--svelte-ui-snackbar-success-outlined-bg: color-mix(
 		in srgb,
-		var(--svelte-ui-surface-color) 85%,
+		var(--svelte-ui-surface-elevated-color) 85%,
 		transparent
 	);
 	--svelte-ui-snackbar-success-outlined-text-color: var(--svelte-ui-success-color);
@@ -806,7 +820,7 @@
 	--svelte-ui-snackbar-warning-filled-text-color: var(--svelte-ui-text-on-filled-color);
 	--svelte-ui-snackbar-warning-outlined-bg: color-mix(
 		in srgb,
-		var(--svelte-ui-surface-color) 85%,
+		var(--svelte-ui-surface-elevated-color) 85%,
 		transparent
 	);
 	--svelte-ui-snackbar-warning-outlined-text-color: var(--svelte-ui-warning-color);
@@ -821,7 +835,7 @@
 	--svelte-ui-snackbar-error-filled-text-color: var(--svelte-ui-text-on-filled-color);
 	--svelte-ui-snackbar-error-outlined-bg: color-mix(
 		in srgb,
-		var(--svelte-ui-surface-color) 85%,
+		var(--svelte-ui-surface-elevated-color) 85%,
 		transparent
 	);
 	--svelte-ui-snackbar-error-outlined-text-color: var(--svelte-ui-error-color);

package/dist/components/ColorPicker.svelte

@@ -385,7 +385,6 @@
 	class:color-picker--readonly={readonly}
 	class:color-picker--focused={isFocused}
 	data-testid="color-picker"
-	style={customStyle}
 >
 	<Input
 		id={id ? `${id}-input` : undefined}

package/dist/components/DatepickerCalendar.svelte

@@ -730,7 +730,8 @@
 .datepicker-calendar__month-button {
   padding: 8px;
   border-radius: var(--svelte-ui-border-radius);
-  background-color: var(--svelte-ui-surface-color);
+  /* 器（ポップアップ）の色に追従させる */
+  background-color: transparent;
   color: var(--svelte-ui-datepicker-date-color);
   font-size: var(--svelte-ui-font-size);
   cursor: pointer;

package/dist/components/Fab.svelte

@@ -488,24 +488,24 @@
   -webkit-backdrop-filter: var(--svelte-ui-glass-blur);
 }
 .fab.fab--shadow {
-  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 3px 5px -1px var(--svelte-ui-shadow-color-strong), 0px 6px 10px 0px var(--svelte-ui-shadow-color), 0px 1px 18px 0px var(--svelte-ui-shadow-color-weak);
 }
 .fab.fab--outlined.fab--shadow {
-  box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 3px 5px -1px var(--svelte-ui-shadow-color-strong), 0px 6px 10px 0px var(--svelte-ui-shadow-color), 0px 1px 18px 0px var(--svelte-ui-shadow-color-weak);
 }
 @media (hover: hover) {
   .fab.fab--shadow:hover {
-    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 5px 5px -3px var(--svelte-ui-shadow-color-strong), 0px 8px 10px 1px var(--svelte-ui-shadow-color), 0px 3px 14px 2px var(--svelte-ui-shadow-color-weak);
   }
   .fab.fab--outlined.fab--shadow:hover {
-    box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+    box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 5px 5px -3px var(--svelte-ui-shadow-color-strong), 0px 8px 10px 1px var(--svelte-ui-shadow-color), 0px 3px 14px 2px var(--svelte-ui-shadow-color-weak);
   }
 }
 .fab.fab--shadow:active {
-  box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+  box-shadow: 0px 7px 8px -4px var(--svelte-ui-shadow-color-strong), 0px 12px 17px 2px var(--svelte-ui-shadow-color), 0px 5px 22px 4px var(--svelte-ui-shadow-color-weak);
 }
 .fab.fab--outlined.fab--shadow:active {
-  box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
+  box-shadow: inset 0 0 0 var(--svelte-ui-border-width) currentColor, 0px 7px 8px -4px var(--svelte-ui-shadow-color-strong), 0px 12px 17px 2px var(--svelte-ui-shadow-color), 0px 5px 22px 4px var(--svelte-ui-shadow-color-weak);
 }
 .fab.fab--no-motion, .fab.fab--no-motion::before {
   transition-duration: 0.01s;

package/dist/components/Input.svelte

@@ -1104,13 +1104,17 @@
  * 機能バリエーション
  * ============================================= */
 	/* clearable */
+	/* 装飾はテキストと同じ content box を基準に中央寄せする（padding-block: inherit）。
+	   絶対配置の基準はルートの padding box なので、そのままだと padding が上下非対称なときにズレる */
 	.input__clear-button {
+		display: flex;
+		justify-content: center;
+		align-items: center;
 		position: absolute;
-		top: 50%;
+		inset-block: 0;
 		right: 4px;
 		width: 32px;
-		height: 32px;
-		transform: translate(0, -50%);
+		padding-block: inherit;
 		opacity: 0;
 		transition: var(--svelte-ui-transition-duration);
 	}
@@ -1137,11 +1141,10 @@
 		justify-content: center;
 		align-items: center;
 		position: absolute;
-		top: 50%;
+		inset-block: 0;
 		left: 4px;
 		width: 32px;
-		height: 32px;
-		transform: translateY(-50%);
+		padding-block: inherit;
 		color: var(--svelte-ui-input-icon-color);
 		pointer-events: none;
 		z-index: 1;
@@ -1152,11 +1155,10 @@
 		justify-content: center;
 		align-items: center;
 		position: absolute;
-		top: 50%;
+		inset-block: 0;
 		right: 4px;
 		width: 32px;
-		height: 32px;
-		transform: translateY(-50%);
+		padding-block: inherit;
 		color: var(--svelte-ui-input-icon-color);
 		pointer-events: none;
 		z-index: 2;

package/dist/components/Modal.svelte

@@ -283,8 +283,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);
+  background-color: var(--svelte-ui-surface-elevated-color);
+  box-shadow: 0 11px 15px -7px var(--svelte-ui-shadow-color-strong), 0 24px 38px 3px var(--svelte-ui-shadow-color), 0 9px 46px 8px var(--svelte-ui-shadow-color-weak);
 }
 
 .modal::backdrop {

package/dist/components/MultiSelect.svelte

@@ -186,9 +186,9 @@
 			{:else if placeholder}
 				<span class="multi-select__placeholder">{placeholder}</span>
 			{/if}
-			<span class="multi-select__dropdown-icon" aria-hidden="true">
-				<Icon>arrow_drop_down</Icon>
-			</span>
+		</span>
+		<span class="multi-select__dropdown-icon" aria-hidden="true">
+			<Icon>arrow_drop_down</Icon>
 		</span>
 	</button>
 
@@ -247,6 +247,7 @@
  * トリガーボタン
  * ============================================= */
 .multi-select__trigger {
+  position: relative;
   width: 100%;
   min-height: var(--svelte-ui-select-height);
   padding: var(--svelte-ui-select-padding);
@@ -287,16 +288,17 @@
   flex: 1;
 }
 
+/* アイコンはテキストと同じ content box を基準に中央寄せする（padding-block: inherit）。
+   絶対配置の基準はトリガーの padding box なので、そのままだと padding が上下非対称なときにズレる */
 .multi-select__dropdown-icon {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
-  top: 50%;
+  inset-block: 0;
   right: 4px;
-  transform: translateY(-50%);
   width: 32px;
-  height: 32px;
+  padding-block: inherit;
   color: var(--svelte-ui-select-dropdown-icon-color);
   pointer-events: none;
 }
@@ -368,9 +370,12 @@
   min-height: 1lh;
 }
 .multi-select.multi-select--inline .multi-select__dropdown-icon {
-  top: calc((1lh - 32px) / 2);
+  /* 複数行になりうるので、箱の中央ではなく最初の行にそろえる */
+  bottom: auto;
+  box-sizing: content-box;
+  height: 1lh;
+  padding-bottom: 0;
   right: 0;
-  transform: none;
 }
 
 /* =============================================

package/dist/components/NavItem.svelte

@@ -60,7 +60,6 @@
 		isChild?: boolean;
 		/** Whether this item's children are currently visible. */
 		isChildrenVisible?: boolean;
-
 	};
 
 	let {
@@ -84,7 +83,11 @@
 		textColor,
 		selectedTextColor,
 		selectedBarColor,
-		childrenVariant = variant === 'mobile' ? 'bottom-sheet' : variant === 'vertical' ? 'accordion' : 'bar',
+		childrenVariant = variant === 'mobile'
+			? 'bottom-sheet'
+			: variant === 'vertical'
+				? 'accordion'
+				: 'bar',
 		customStyle,
 		customChildrenStyle,
 		customChildrenContainerStyle,
@@ -93,8 +96,7 @@
 		isSelected = false,
 		isDisabled = false,
 		isChild = false,
-		isChildrenVisible = $bindable(false),
-
+		isChildrenVisible = $bindable(false)
 	}: NavItemProps = $props();
 
 	// =========================================================================
@@ -139,14 +141,17 @@
 		container?.querySelector<HTMLElement>('[data-nav-item-child]:not([tabindex="-1"])')?.focus();
 
 	$effect(() => {
-		if (isChildrenVisible && childrenVariant === 'bottom-sheet') tick().then(() => focusFirstChild(bottomSheetEl));
+		if (isChildrenVisible && childrenVariant === 'bottom-sheet')
+			tick().then(() => focusFirstChild(bottomSheetEl));
 	});
 
 	const popupPosition = $derived<PopupPosition>(
 		variant === 'vertical' ? 'right-top' : variant === 'mobile' ? 'top-center' : 'bottom-left'
 	);
 
-	const showChevron = $derived(hasChildren && chevron && variant !== 'mobile' && childrenVariant !== 'expanded');
+	const showChevron = $derived(
+		hasChildren && chevron && variant !== 'mobile' && childrenVariant !== 'expanded'
+	);
 
 	// popup の方向に合わせたアイコン。それ以外は expand_more
 	const chevronIcon = $derived(
@@ -342,7 +347,12 @@
 
 		<!-- accordion / expanded サブメニュー -->
 		{#if childrenVariant === 'expanded' || (childrenVariant === 'accordion' && isChildrenVisible)}
-			<div class="nav-item__children" role="presentation" style={customChildrenContainerStyle} transition:slide={{ duration: 200 }}>
+			<div
+				class="nav-item__children"
+				role="presentation"
+				style={customChildrenContainerStyle}
+				transition:slide={{ duration: 200 }}
+			>
 				{#each item.children! as child}
 					<NavItem
 						item={child}
@@ -652,7 +662,7 @@
   left: 0;
   right: 0;
   z-index: 1001;
-  background-color: var(--svelte-ui-surface-color);
+  background-color: var(--svelte-ui-surface-elevated-color);
   border-radius: var(--svelte-ui-nav-bottom-sheet-border-radius);
   padding: var(--svelte-ui-nav-bottom-sheet-padding);
   display: flex;

package/dist/components/Popup.svelte

@@ -582,8 +582,8 @@
 :popover-open {
   border: solid 1px var(--svelte-ui-border-weak-color);
   border-radius: var(--svelte-ui-popup-border-radius);
-  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);
-  background: var(--svelte-ui-surface-color);
+  box-shadow: 0 11px 15px -7px var(--svelte-ui-shadow-color-strong), 0 24px 38px 3px var(--svelte-ui-shadow-color), 0 9px 46px 8px var(--svelte-ui-shadow-color-weak);
+  background: var(--svelte-ui-surface-elevated-color);
   color: var(--svelte-ui-text-color);
   z-index: 1000; /* Popupを最前面に表示 */
 }
@@ -640,8 +640,8 @@
   border-top-right-radius: var(--svelte-ui-popup-mobile-border-radius);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1), 0 -2px 4px -1px rgba(0, 0, 0, 0.06);
-  background: var(--svelte-ui-surface-color);
+  box-shadow: 0 -4px 6px -1px var(--svelte-ui-shadow-color-weak), 0 -2px 4px -1px var(--svelte-ui-shadow-color-weak);
+  background: var(--svelte-ui-surface-elevated-color);
   z-index: var(--svelte-ui-z-modal);
   overflow-y: auto;
   overflow-x: hidden;

package/dist/components/PopupMenu.svelte

@@ -318,9 +318,9 @@
 
 <style>@charset "UTF-8";
 .popup-menu {
-  background-color: var(--svelte-ui-surface-color);
+  background-color: var(--svelte-ui-surface-elevated-color);
   border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 12px var(--svelte-ui-shadow-color);
   outline: none;
   min-width: 160px;
 }

package/dist/components/Select.svelte

@@ -405,9 +405,9 @@
 			{:else if placeholder}
 				<span class="select__placeholder">{placeholder}</span>
 			{/if}
-			<span class="select__dropdown-icon" aria-hidden="true">
-				<Icon>arrow_drop_down</Icon>
-			</span>
+		</span>
+		<span class="select__dropdown-icon" aria-hidden="true">
+			<Icon>arrow_drop_down</Icon>
 		</span>
 	</button>
 
@@ -490,6 +490,7 @@
 .select__trigger {
   display: flex;
   align-items: center;
+  position: relative;
   width: 100%;
   min-height: var(--svelte-ui-select-height);
   padding: var(--svelte-ui-select-padding);
@@ -525,16 +526,17 @@
   color: var(--svelte-ui-select-placeholder-color);
 }
 
+/* アイコンはテキストと同じ content box を基準に中央寄せする（padding-block: inherit）。
+   絶対配置の基準はトリガーの padding box なので、そのままだと padding が上下非対称なときにズレる */
 .select__dropdown-icon {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
-  top: 50%;
+  inset-block: 0;
   right: 4px;
-  transform: translateY(-50%);
   width: 32px;
-  height: 32px;
+  padding-block: inherit;
   color: var(--svelte-ui-select-dropdown-icon-color);
   pointer-events: none;
 }
@@ -606,9 +608,12 @@
   min-height: 1lh;
 }
 .select.select--inline .select__dropdown-icon {
-  top: calc((1lh - 32px) / 2);
+  /* 複数行になりうるので、箱の中央ではなく最初の行にそろえる */
+  bottom: auto;
+  box-sizing: content-box;
+  height: 1lh;
+  padding-bottom: 0;
   right: 0;
-  transform: none;
 }
 
 /* =============================================

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.70",
+	"version": "0.0.72",
 	"type": "module",
 	"keywords": [
 		"svelte",