fix(combobox): fix ComboboxInput height for soft variant

Author: lepture

docs/content/components/combobox.md

@@ -49,3 +49,13 @@ The root element of a combobox, it contains all the parts of a combobox.
 ### Multiple
 
 <Example name="combobox/Multiple.vue" variant="hide" />
+
+### Variant
+
+The input field supports two variants: `soft` and `surface`.
+
+<Example name="combobox/InputVariant.vue" />
+
+The content popup supports two variants: `soft` and `solid`.
+
+<Example name="combobox/ContentVariant.vue" />

docs/examples/combobox/ContentVariant.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import {
+  ComboboxRoot,
+  ComboboxContent,
+  ComboboxItem,
+  ComboboxInput,
+  ComboboxEmpty,
+} from '#components'
+
+const fruits = [
+  { name: 'Apple' },
+  { name: 'Banana' },
+  { name: 'Orange' },
+  { name: 'Honeydew' },
+  { name: 'Grapes' },
+  { name: 'Watermelon' },
+  { name: 'Cantaloupe' },
+  { name: 'Pear' },
+]
+</script>
+
+<template>
+  <div class="flex flex-items gap-4">
+    <ComboboxRoot>
+      <ComboboxInput placeholder="Select fruit..." />
+      <ComboboxContent variant="soft">
+        <ComboboxItem
+          v-for="option in fruits"
+          :key="option.name"
+          :value="option.name"
+        >
+          {{ option.name }}
+        </ComboboxItem>
+        <ComboboxEmpty>
+          <span>No fruit found</span>
+        </ComboboxEmpty>
+      </ComboboxContent>
+    </ComboboxRoot>
+
+    <ComboboxRoot>
+      <ComboboxInput placeholder="Select fruit..." />
+      <ComboboxContent variant="solid">
+        <ComboboxItem
+          v-for="option in fruits"
+          :key="option.name"
+          :value="option.name"
+        >
+          {{ option.name }}
+        </ComboboxItem>
+        <ComboboxEmpty>
+          <span>No fruit found</span>
+        </ComboboxEmpty>
+      </ComboboxContent>
+    </ComboboxRoot>
+  </div>
+</template>

docs/examples/combobox/InputVariant.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import {
+  ComboboxRoot,
+  ComboboxContent,
+  ComboboxItem,
+  ComboboxInput,
+  ComboboxEmpty,
+} from '#components'
+
+const fruits = [
+  { name: 'Apple' },
+  { name: 'Banana' },
+  { name: 'Orange' },
+  { name: 'Honeydew' },
+  { name: 'Grapes' },
+  { name: 'Watermelon' },
+  { name: 'Cantaloupe' },
+  { name: 'Pear' },
+]
+</script>
+
+<template>
+  <div class="flex flex-items gap-4">
+    <ComboboxRoot>
+      <ComboboxInput placeholder="Select fruit..." variant="soft" />
+      <ComboboxContent>
+        <ComboboxItem
+          v-for="option in fruits"
+          :key="option.name"
+          :value="option.name"
+        >
+          {{ option.name }}
+        </ComboboxItem>
+        <ComboboxEmpty>
+          <span>No fruit found</span>
+        </ComboboxEmpty>
+      </ComboboxContent>
+    </ComboboxRoot>
+
+    <ComboboxRoot>
+      <ComboboxInput placeholder="Select fruit..." variant="surface" />
+      <ComboboxContent>
+        <ComboboxItem
+          v-for="option in fruits"
+          :key="option.name"
+          :value="option.name"
+        >
+          {{ option.name }}
+        </ComboboxItem>
+        <ComboboxEmpty>
+          <span>No fruit found</span>
+        </ComboboxEmpty>
+      </ComboboxContent>
+    </ComboboxRoot>
+  </div>
+</template>

src/components/combobox/ComboboxInput.vue

@@ -194,7 +194,7 @@ watch(values, () => {
   background-color: transparent;
   border-radius: calc(var(--combobox-field-border-radius) - var(--combobox-field-border-width));
   text-indent: var(--combobox-field-padding);
-  height: calc(var(--combobox-field-height) - var(--space-1));
+  height: var(--combobox-input-height);
   cursor: auto;
 }
 
@@ -228,7 +228,7 @@ watch(values, () => {
   order: 0;
   margin-left: 0;
   margin-right: calc(var(--combobox-field-border-width) * -1);
-  height: calc(var(--combobox-field-height) - 4px);
+  height: var(--combobox-trigger-height);
 }
 :where(.r-size-1) .ui-ComboboxField {
   --combobox-field-height: var(--space-5);
@@ -303,6 +303,9 @@ watch(values, () => {
   --combobox-field-focus-color: var(--focus-a8);
   --combobox-field-border-width: 1px;
   --combobox-field-border-color: var(--gray-a7);
+  --combobox-input-height: calc(var(--combobox-field-height) - var(--space-1));
+  --combobox-trigger-height: calc(var(--combobox-field-height) - var(--space-1));
+
   /* Blend inner shadow with page background */
   background-clip: content-box;
   background-color: var(--color-surface);
@@ -333,6 +336,9 @@ watch(values, () => {
   --combobox-field-selection-color: var(--accent-a5);
   --combobox-field-focus-color: var(--accent-8);
   --combobox-field-border-width: 0px;
+  --combobox-input-height: var(--combobox-field-height);
+  --combobox-trigger-height: var(--combobox-field-height);
+
   background-color: var(--accent-a3);
   color: var(--accent-12);
 }