SEV-408: combobox displayValue option (show code, search by label) v0.5.0

When displayValue:true, the input shows the selected option's value (e.g. a
state code "TX") while the dropdown stays label-searchable ("Texas") — for a
field searched by name but displayed compactly. Backward-compatible
(default false). 20/20 tests pass.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/combobox.test.js

@@ -64,3 +64,30 @@ test('setOptions feeds reactive option lists (SEV-392)', () => {
   c.query = 'tes';
   assert.deepEqual(c.filtered.map((o) => o.value), ['Tesla']);
 });
+
+test('displayValue shows the code in the input, searches by label (SEV-408)', () => {
+  const c = comboboxData({
+    options: [{ value: 'CA', label: 'California' }, { value: 'TX', label: 'Texas' }],
+    allowFree: false,
+    displayValue: true,
+  });
+  c.init();
+  // search by name
+  c.query = 'tex';
+  assert.deepEqual(c.filtered.map((o) => o.value), ['TX']);
+  // choosing shows the CODE, not the name
+  c.choose({ value: 'TX', label: 'Texas' });
+  assert.equal(c.value, 'TX');
+  assert.equal(c.query, 'TX');
+});
+
+test('displayValue syncs the code from an external value (SEV-408)', () => {
+  const c = comboboxData({
+    options: [{ value: 'OR', label: 'Oregon' }],
+    allowFree: false,
+    displayValue: true,
+    value: 'OR',
+  });
+  c.init();
+  assert.equal(c.query, 'OR'); // shows code, not "Oregon"
+});