@14ch/svelte-ui 0.0.70 → 0.0.71

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/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/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/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.71",
 	"type": "module",
 	"keywords": [
 		"svelte",