@@ -0,0 +1,13 @@
+---
+'@object-ui/plugin-designer': patch
+---
+
+The dashboard designer's widget property panel picks a widget's Type and Color Variant with the shared `Select`, and the designers' property panel (`PropertyEditor`) draws a `select` field with it too: the control the rest of the console picks with (objectui#11865, the dashboard designer's part of that card).
+
+The three pickers were browser-native selects, so they looked and behaved differently from the console's other dropdowns. They now use the shared Radix `Select`: the same trigger, dropdown and keyboard behaviour.
+
+What they write is unchanged. Each option hands the panel the same value as before: a type pick still writes `type`, a colour pick still writes `colorVariant`, and a `select` field still calls `onChange` with the field's name and the option's value, an option whose value is empty included. A type the widget door refuses the widget's measures under is still a disabled option and still writes nothing. Re-picking the current option writes nothing. The Type and Color Variant pickers keep the accessible name their labels gave the native selects; a `select` field's caption named no control before and names none now. Read-only disables the Type and Color Variant triggers in the shared `Select`'s own disabled look; `PropertyEditor` has no read-only state, as before.
+
+One display change: a value none of a picker's options carries now shows as itself (a stored `area` type, a `metric-card` entry's type, a field value no option carries). The native select showed its first option instead ("KPI Metric", "Default"), which is not what the widget or the field holds. A `select` field with no value and no empty option shows nothing rather than its first option.
+
+**Clause-②: no.** No published face moves: the package entry exports the same names, `DashboardEditorProps`, `PropertyEditorProps` and `PropertyField` take the same members, and no i18n key is added. What moves is the panels' own markup, described above: a test that drove one of these controls as a native select now picks through the trigger.
@@ -50,6 +50,13 @@ import {
 } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@object-ui/components';
 import { DASHBOARD_COMPONENT_WIDGET_TYPES, completeWidgetLayout, defaultWidgetPlacement } from '@object-ui/types';
 import { DashboardWidgetSchema as DashboardWidgetDoor } from '@object-ui/types/zod';
 import { pickLocalized, setLocalized } from '@object-ui/i18n';
@@ -385,6 +392,102 @@ function WidgetCard({
 // Widget Property Panel
 // ============================================================================
 
+/**
+ * The colour variants the panel offers, in the order the native control
+ * listed them. TYPED to the widget's own `colorVariant`, so a pick reaches
+ * `onChange` as that type with no cast of a DOM string.
+ */
+const COLOR_VARIANTS: ReadonlyArray<{
+  value: NonNullable<DashboardWidgetSchema['colorVariant']>;
+  label: string;
+}> = [
+  { value: 'default', label: 'Default' },
+  { value: 'blue', label: 'Blue' },
+  { value: 'teal', label: 'Teal' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'purple', label: 'Purple' },
+  { value: 'success', label: 'Success' },
+  { value: 'warning', label: 'Warning' },
+  { value: 'danger', label: 'Danger' },
+];
+
+/** The item a stored value none of a picker's options carries is shown by. */
+const OUTSIDE_OPTIONS = 'outside';
+
+/** The classes a picker takes, at the size of the inputs beside it. */
+const PICKER = 'h-auto border-gray-300 px-2.5 py-1.5 text-sm';
+
+/**
+ * objectui#11865 — one of the property panel's pickers (the widget's type and
+ * its colour variant), drawn with the shared `Select`, the control the rest of
+ * the console picks with. They used to be browser-native `<select>`s. What a
+ * pick writes is unchanged: `onPick` receives the picked option's own `value`,
+ * the string the native control's `change` carried, and each caller turns it
+ * into the same `onChange` update as before. Re-picking the current option
+ * writes nothing, as it did there.
+ *
+ * - Items carry their option's INDEX, not its value, so the picked option is
+ *   resolved against the very list that rendered the items, and no option
+ *   value can collide with the outside item below.
+ * - An option may be `disabled`, as a native `<option>` was: the type picker
+ *   disables the types the widget door refuses this widget's measures under.
+ * - A stored value none of the options carries gets an item of its own,
+ *   labelled with the value, so the trigger shows what the widget holds (a
+ *   stored `area`, a `metric-card` entry). The native control showed its first
+ *   option there ("KPI Metric", "Default"), which is not what the widget says.
+ *   Picking that item writes nothing. An empty value gets no such item: the
+ *   trigger shows nothing.
+ * - Read-only follows the primitive (objectui#11781): `disabled` disables the
+ *   trigger, which wears `SelectTrigger`'s own disabled look.
+ * - `id` lands on the trigger, so the caller's `<label htmlFor>` names it as it
+ *   named the native control.
+ */
+function WidgetPropPicker<V extends string>({
+  id,
+  testId,
+  value,
+  options,
+  onPick,
+  disabled,
+}: {
+  id: string;
+  testId: string;
+  value: string;
+  options: ReadonlyArray<{ value: V; label: string; disabled?: boolean }>;
+  onPick: (value: V) => void;
+  disabled: boolean;
+}) {
+  const at = options.findIndex((o) => o.value === value);
+  const outside = at === -1 && value !== '';
+  return (
+    <Select
+      value={at !== -1 ? String(at) : outside ? OUTSIDE_OPTIONS : ''}
+      onValueChange={(token) => {
+        // `undefined` for the outside item: it is the stored value, so there is nothing to write.
+        const picked = options[Number(token)];
+        if (picked) onPick(picked.value);
+      }}
+      disabled={disabled}
+    >
+      <SelectTrigger id={id} data-testid={testId} className={PICKER}>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {outside && (
+          <SelectItem value={OUTSIDE_OPTIONS} data-option-value={value}>
+            {value}
+          </SelectItem>
+        )}
+        {options.map((o, i) => (
+          <SelectItem key={`${i}:${o.value}`} value={String(i)} disabled={o.disabled} data-option-value={o.value}>
+            {o.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
 interface WidgetPropertyPanelProps {
   widget: DashboardWidgetEntry;
   /** The widget's position in `widgets[]`, which the grid auto-places it by. */
@@ -478,30 +581,27 @@ function WidgetPropertyPanel({
       {/* Type */}
       <div className="space-y-1">
         <label htmlFor="widget-type" className="text-xs font-medium text-gray-600">Type</label>
-        <select
+        <WidgetPropPicker
           id="widget-type"
-          data-testid="widget-prop-type"
-          value={widget.type ?? 'metric'}
-          onChange={(e) => {
-            // Resolve the DOM string against the very list that rendered the
-            // options, rather than casting it onto the closed type. No cast, no
-            // tolerance: a value not in the palette writes nothing at all,
+          testId="widget-prop-type"
+          value={currentType}
+          options={WIDGET_TYPES.map((t) => ({
+            value: t.type,
+            label: t.label,
+            disabled: t.type !== currentType && refusedUnder(t.type),
+          }))}
+          onPick={(type) => {
+            // The picker resolves its item against the very list that rendered
+            // the options, so the type arrives typed off the palette, never as a
+            // cast DOM string: a value not in the palette writes nothing at all,
             // instead of storing a `type` the platform refuses at publish.
             // A type the door refuses this widget's measures under writes
-            // nothing either (objectui#8894): its option is disabled, and this
-            // keeps a programmatic change from storing what publish refuses.
-            const picked = WIDGET_TYPES.find((t) => t.type === e.target.value);
-            if (picked && (picked.type === currentType || !refusedUnder(picked.type))) onChange({ type: picked.type });
+            // nothing either (objectui#8894): its item is disabled, and this
+            // keeps any other route to it from storing what publish refuses.
+            if (type === currentType || !refusedUnder(type)) onChange({ type });
           }}
           disabled={readOnly}
-          className="block w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:bg-gray-50"
-        >
-          {WIDGET_TYPES.map((t) => (
-            <option key={t.type} value={t.type} disabled={t.type !== currentType && refusedUnder(t.type)}>
-              {t.label}
-            </option>
-          ))}
-        </select>
+        />
         {currentRefusal && (
           <p role="alert" data-testid="widget-prop-measure-refusal" className="break-words text-xs text-red-600">
             {currentRefusal}
@@ -522,23 +622,14 @@ function WidgetPropertyPanel({
       {widgetArm && (
         <div className="space-y-1">
           <label htmlFor="widget-color" className="text-xs font-medium text-gray-600">Color Variant</label>
-          <select
+          <WidgetPropPicker
             id="widget-color"
-            data-testid="widget-prop-color"
+            testId="widget-prop-color"
             value={widgetArm.colorVariant ?? 'default'}
-            onChange={(e) => onChange({ colorVariant: e.target.value as DashboardWidgetSchema['colorVariant'] })}
+            options={COLOR_VARIANTS}
+            onPick={(colorVariant) => onChange({ colorVariant })}
             disabled={readOnly}
-            className="block w-full rounded-md border border-gray-300 px-2.5 py-1.5 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 disabled:bg-gray-50"
-          >
-            <option value="default">Default</option>
-            <option value="blue">Blue</option>
-            <option value="teal">Teal</option>
-            <option value="orange">Orange</option>
-            <option value="purple">Purple</option>
-            <option value="success">Success</option>
-            <option value="warning">Warning</option>
-            <option value="danger">Danger</option>
-          </select>
+          />
         </div>
       )}
 
 
@@ -41,7 +41,7 @@
 
 import { describe, it, expect, vi } from 'vitest';
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, within } from '@testing-library/react';
 import type { DashboardComponentSchema } from '@object-ui/types';
 import { DashboardEditor } from '../DashboardEditor';
 
@@ -184,12 +184,14 @@ describe('DashboardEditor — the title INPUT is a write path, not a display (#4
     expect(reopened.value).toBe('Pipelinex');
   });
 
-  it('an inline map survives an UNRELATED edit-and-save round trip untouched', () => {
+  it('an inline map survives an UNRELATED edit-and-save round trip untouched', async () => {
     // The ruling's acceptance criterion, end to end: the author changes
     // something else entirely on the same widget, and the stored map comes back
-    // byte-identical rather than flattened to one locale.
+    // byte-identical rather than flattened to one locale. The colour is picked
+    // through the shared Select's trigger (objectui#11865).
     const onChange = openPanelFor(schemaWith(MAP_TITLE), 'dashboard-widget-w1');
-    fireEvent.change(screen.getByTestId('widget-prop-color'), { target: { value: 'blue' } });
+    fireEvent.keyDown(screen.getByTestId('widget-prop-color'), { key: 'ArrowDown' });
+    fireEvent.click(within(await screen.findByRole('listbox')).getByRole('option', { name: 'Blue' }));
 
     expect(onChange).toHaveBeenCalled();
     const saved = lastSchema(onChange);
 
@@ -18,20 +18,25 @@
  * save swallows the error. Now the picker asks the door (`measureRefusal`):
  *
  *   - a type the door refuses this widget's measures under is a DISABLED
- *     option, and a change to it writes nothing;
+ *     option, and a pick of it writes nothing;
  *   - a stored widget the door already refuses shows the door's message.
  *
  * ## Which options must be disabled is read off the SPEC, per option
  *
- * Every `<option>` the editor renders is judged by the spec's own
+ * Every option the editor renders is judged by the spec's own
  * `DashboardWidgetSchema` with the widget's measures: refused at `values` ⇒ the
  * option must be disabled, accepted ⇒ enabled. No type list is written here, so
  * the rows move with the spec and with the editor's palette.
+ *
+ * The picker is the shared `Select` (objectui#11865), so the options are read
+ * off its opened list: each item carries its type as `data-option-value` and a
+ * disabled item says so with `aria-disabled`, as a native `<option>` did with
+ * `disabled`.
  */
 
 import { describe, it, expect, vi } from 'vitest';
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, within } from '@testing-library/react';
 import { DashboardWidgetSchema as SpecDashboardWidgetSchema } from '@objectstack/spec/ui';
 import type { DashboardComponentSchema, DashboardWidgetSchema } from '@object-ui/types';
 import { DashboardEditor } from '../DashboardEditor';
@@ -65,14 +70,22 @@ function specArityIssue(widget: DashboardWidgetSchema, type: string): Issue | un
   return (r.error.issues as Issue[]).find((i) => i.code === 'custom' && i.path.map(String).join('.') === 'values');
 }
 
-const typeOptions = () =>
-  Array.from((screen.getByTestId('widget-prop-type') as HTMLSelectElement).options);
+/** The type picker's options, read off its opened list, in order. */
+async function typeOptions(): Promise<Array<{ value: string; disabled: boolean; element: HTMLElement }>> {
+  fireEvent.keyDown(screen.getByTestId('widget-prop-type'), { key: 'ArrowDown' });
+  const listbox = await screen.findByRole('listbox');
+  return within(listbox).getAllByRole('option').map((element) => {
+    const value = element.getAttribute('data-option-value');
+    if (!value) throw new Error(`option "${element.textContent}" carries no data-option-value`);
+    return { value, disabled: element.getAttribute('aria-disabled') === 'true', element };
+  });
+}
 
 describe('objectui#8894 — the type picker offers only what the door accepts', () => {
-  it('SUBJECT: a two-measure bar cannot be turned into a type the spec refuses two measures on', () => {
+  it('SUBJECT: a two-measure bar cannot be turned into a type the spec refuses two measures on', async () => {
     const widget = bound('w1', { values: ['revenue', 'deal_count'] });
     openPanelFor(widget);
-    const options = typeOptions();
+    const options = await typeOptions();
     const refused = options.filter((o) => specArityIssue(widget, o.value) !== undefined);
     // Not vacuous: the editor's palette offers at least one metric-family type.
     expect(refused.length).toBeGreaterThan(0);
@@ -83,37 +96,38 @@ describe('objectui#8894 — the type picker offers only what the door accepts',
     expect(screen.queryByTestId('widget-prop-measure-refusal')).toBeNull();
   });
 
-  it('SUBJECT: a change to a refused type writes nothing', () => {
+  it('SUBJECT: a pick of a refused type writes nothing', async () => {
     const widget = bound('w1', { values: ['revenue', 'deal_count'] });
     const onChange = openPanelFor(widget);
-    const refused = typeOptions().find((o) => specArityIssue(widget, o.value) !== undefined)!;
-    fireEvent.change(screen.getByTestId('widget-prop-type'), { target: { value: refused.value } });
+    const refused = (await typeOptions()).find((o) => specArityIssue(widget, o.value) !== undefined)!;
+    fireEvent.click(refused.element);
+    fireEvent.keyDown(refused.element, { key: 'Enter' });
     expect(onChange).not.toHaveBeenCalled();
   });
 
-  it('CONTROL: a change to an accepted type is written as before', () => {
+  it('CONTROL: a pick of an accepted type is written as before', async () => {
     const widget = bound('w1', { values: ['revenue', 'deal_count'] });
     const onChange = openPanelFor(widget);
-    fireEvent.change(screen.getByTestId('widget-prop-type'), { target: { value: 'line' } });
+    fireEvent.click((await typeOptions()).find((o) => o.value === 'line')!.element);
     const schema = onChange.mock.calls[onChange.mock.calls.length - 1][0] as DashboardComponentSchema;
     expect((schema.widgets as DashboardWidgetSchema[])[0].type).toBe('line');
   });
 
-  it('CONTROL: a one-measure widget is offered every type', () => {
+  it('CONTROL: a one-measure widget is offered every type', async () => {
     openPanelFor(bound('w1'));
-    expect(typeOptions().filter((o) => o.disabled)).toEqual([]);
+    expect((await typeOptions()).filter((o) => o.disabled)).toEqual([]);
   });
 
-  it('SUBJECT: a stored widget the door already refuses shows the door\'s own message, and stays what it is', () => {
+  it('SUBJECT: a stored widget the door already refuses shows the door\'s own message, and stays what it is', async () => {
     const widget = bound('w1', { type: 'metric', dimensions: undefined, values: ['revenue', 'deal_count'] });
     openPanelFor(widget);
     const shown = screen.getByTestId('widget-prop-measure-refusal');
     expect(shown).toHaveAttribute('role', 'alert');
     expect(shown.textContent).toBe(specArityIssue(widget, 'metric')!.message);
     // Its own type stays selected and selectable — the editor reports, it does
     // not rewrite the stored widget.
-    const select = screen.getByTestId('widget-prop-type') as HTMLSelectElement;
-    expect(select.value).toBe('metric');
-    expect(typeOptions().find((o) => o.value === 'metric')!.disabled).toBe(false);
+    const metric = (await typeOptions()).find((o) => o.value === 'metric')!;
+    expect(metric.element).toHaveAttribute('data-state', 'checked');
+    expect(metric.disabled).toBe(false);
   });
 });