diff --git a/packages/studio/src/components/editor/flatSelectHarness.ts b/packages/studio/src/components/editor/flatSelectHarness.ts
new file mode 100644
index 0000000000..ed9b64241a
--- /dev/null
+++ b/packages/studio/src/components/editor/flatSelectHarness.ts
@@ -0,0 +1,55 @@
+/**
+ * Driving a `FlatSelectRow` from a test, now that it is a Base UI select and
+ * not a native one.
+ *
+ * A native `<select>` could be changed in one line: set `value`, dispatch
+ * `change`. A listbox cannot, because its options only exist while the popup is
+ * open and the popup mounts in a portal a task after the trigger is pressed. So
+ * the sequence lives here once instead of in each section's test file.
+ *
+ * Deliberately not named `*.test.*`: vitest collects by that suffix, and a
+ * helper module with no tests in it would fail collection.
+ */
+import { act } from "react";
+
+/** Base UI mounts and unmounts the popup a task later; happy-dom is no faster. */
+const settle = () => act(async () => void (await new Promise((r) => setTimeout(r, 0))));
+
+export function flatSelectRow(host: HTMLElement, label: string) {
+  const rows = Array.from(host.querySelectorAll<HTMLElement>(".group"));
+  const row = rows.find((el) => el.querySelector("span")?.textContent === label);
+  if (!row) throw new Error(`expected a select row for "${label}"`);
+  const trigger = row.querySelector<HTMLElement>('[role="combobox"]');
+  if (!trigger) throw new Error(`expected a select trigger for "${label}"`);
+  const resetButton = row.querySelector<HTMLButtonElement>('[data-flat-select-reset="true"]');
+  return { row, trigger, resetButton };
+}
+
+/** Opens the popup and returns its options, which exist only while it is open. */
+export async function openFlatSelect(host: HTMLElement, label: string): Promise<HTMLElement[]> {
+  const { trigger } = flatSelectRow(host, label);
+  act(() => trigger.click());
+  await settle();
+  return [...document.querySelectorAll<HTMLElement>('[role="option"]')];
+}
+
+/** Picks from a list already open, so a caller that inspected it first does not
+ *  have to reopen the popup — pressing the trigger again would close it. */
+export async function chooseOpenOption(options: HTMLElement[], optionText: string): Promise<void> {
+  const option = options.find((el) => el.textContent === optionText);
+  if (!option) {
+    throw new Error(
+      `no option "${optionText}", among ${JSON.stringify(options.map((el) => el.textContent))}`,
+    );
+  }
+  act(() => option.click());
+  await settle();
+}
+
+export async function chooseFlatSelectOption(
+  host: HTMLElement,
+  label: string,
+  optionText: string,
+): Promise<void> {
+  await chooseOpenOption(await openFlatSelect(host, label), optionText);
+}
diff --git a/packages/studio/src/components/editor/nativeControls.test.ts b/packages/studio/src/components/editor/nativeControls.test.ts
new file mode 100644
index 0000000000..b921215d0d
--- /dev/null
+++ b/packages/studio/src/components/editor/nativeControls.test.ts
@@ -0,0 +1,68 @@
+/**
+ * R13: a hand-rolled range input or a native `<select>` under the inspector is
+ * a duplicate of a shared primitive that already exists.
+ *
+ * A ratchet rather than a flat ban, because the inspector sweep is cut by
+ * section family and the later families have not moved yet. The allowlist is
+ * the set of files that still carry one; a new offender fails the test because
+ * it is not in the list, and a converted file fails it until it is removed, so
+ * the list can only shrink. U12 generalises this into the lint rule.
+ */
+import { readdirSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+const EDITOR_DIR = __dirname;
+
+/** Still native. Delete an entry when its section family moves to the shared primitive. */
+const NATIVE_SELECT_ALLOWED = [
+  "AnimationCardParts.tsx",
+  "BlockParamsPanel.tsx",
+  "EaseParamFields.tsx",
+  "KeyframeEaseList.tsx",
+  "propertyPanelColorGradingControls.tsx",
+  "propertyPanelColorGradingSection.tsx",
+  "propertyPanelFill.tsx",
+  "propertyPanelFlatColorGradingSection.tsx",
+  "propertyPanelFxControls.tsx",
+  "propertyPanelSections.tsx",
+];
+
+const RANGE_INPUT_ALLOWED = [
+  "BlockParamsPanel.tsx",
+  "propertyPanelColorGradingSlider.tsx",
+  "propertyPanelColorWheels.tsx",
+  "propertyPanelFxControls.tsx",
+  "propertyPanelFxEqModule.tsx",
+];
+
+function sourceFiles() {
+  return readdirSync(EDITOR_DIR)
+    .filter((name) => name.endsWith(".tsx") && !name.includes(".test."))
+    .sort();
+}
+
+/** Only real markup counts: a prose mention of `<select>` in a comment is not a control. */
+function filesMatching(pattern: RegExp): string[] {
+  return sourceFiles().filter((name) => {
+    const source = readFileSync(path.join(EDITOR_DIR, name), "utf8");
+    return source
+      .split("\n")
+      .some((line) => pattern.test(line) && !line.trimStart().startsWith("*"));
+  });
+}
+
+describe("duplicate controls under components/editor (R13)", () => {
+  it("leaves no native <select> outside the ratchet", () => {
+    expect(filesMatching(/<select\b/)).toEqual(NATIVE_SELECT_ALLOWED);
+  });
+
+  it("leaves no hand-rolled range input outside the ratchet", () => {
+    expect(filesMatching(/type="range"/)).toEqual(RANGE_INPUT_ALLOWED);
+  });
+
+  it("finds files at all, so the two checks above are not vacuous", () => {
+    expect(sourceFiles().length).toBeGreaterThan(20);
+    expect(filesMatching(/<select\b/).length).toBeGreaterThan(0);
+  });
+});
diff --git a/packages/studio/src/components/editor/propertyPanelColorSecondary.test.tsx b/packages/studio/src/components/editor/propertyPanelColorSecondary.test.tsx
index c863b9182c..4d45946e49 100644
--- a/packages/studio/src/components/editor/propertyPanelColorSecondary.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelColorSecondary.test.tsx
@@ -97,7 +97,7 @@ describe("PropertyPanelColorSecondary", () => {
 
     act(() => {
       host
-        .querySelector<HTMLElement>('[role="slider"][aria-label="Saturation min"]')
+        .querySelector<HTMLElement>('input[type="range"][aria-label="Saturation min"]')
         ?.dispatchEvent(new KeyboardEvent("keydown", { key: "End", bubbles: true }));
     });
     expect(onCommit.mock.calls.at(-1)?.[0]?.[0]?.key.saturation).toMatchObject({
@@ -107,7 +107,7 @@ describe("PropertyPanelColorSecondary", () => {
 
     act(() => {
       host
-        .querySelector<HTMLElement>('[role="slider"][aria-label="Luma max"]')
+        .querySelector<HTMLElement>('input[type="range"][aria-label="Luma max"]')
         ?.dispatchEvent(new KeyboardEvent("keydown", { key: "Home", bubbles: true }));
     });
     expect(onCommit.mock.calls.at(-1)?.[0]?.[0]?.key.luma).toMatchObject({
@@ -128,10 +128,12 @@ describe("PropertyPanelColorSecondary", () => {
     });
     if (!grading?.secondaries) throw new Error("Expected normalized secondaries");
     const { host, root } = renderSecondary({ secondaries: grading.secondaries });
-    const hue = host.querySelector<HTMLElement>('[role="slider"][aria-label="Hue"]');
+    const hue = host.querySelector<HTMLElement>('input[type="range"][aria-label="Hue"]');
 
     expect(Number(hue?.getAttribute("aria-valuenow"))).toBeCloseTo(359.7);
-    expect(hue?.getAttribute("aria-valuemax")).toBe("359.99");
+    // The thumb is a real range input now, so the bound is the native `max`
+    // rather than an aria attribute the hand-rolled track had to write itself.
+    expect(hue?.getAttribute("max")).toBe("359.99");
     act(() => root.unmount());
   });
 
diff --git a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx
index 987bd4ee78..350d6d8295 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatColorGradingSection.test.tsx
@@ -48,7 +48,7 @@ function findRowByText(
 }
 
 function dragSliderTrack(row: Element, clientX: number, trackWidth: number) {
-  const track = row.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
+  const track = row.querySelector<HTMLElement>("[data-slider-control]");
   if (!track) throw new Error("expected a slider track");
   Object.defineProperty(track, "getBoundingClientRect", {
     value: () => ({ left: 0, width: trackWidth, top: 0, height: 2, right: trackWidth, bottom: 2 }),
diff --git a/packages/studio/src/components/editor/propertyPanelFlatEffectsSection.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatEffectsSection.test.tsx
index c16b6f232b..d5d8f4b039 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatEffectsSection.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatEffectsSection.test.tsx
@@ -16,6 +16,7 @@ import {
   FlatEffectsSection,
 } from "./propertyPanelFlatEffectsSection";
 import { EFFECT_SPECS } from "./propertyPanelFlatEffectSpecs";
+import { openFlatSelect } from "./flatSelectHarness";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -111,7 +112,7 @@ describe("FlatEffectsSection", () => {
     for (const effect of EFFECT_SPECS) {
       expect(Boolean(effect.palette)).toBe(capabilities.get(effect.key)?.supportsPalette);
     }
-    expect(host.querySelectorAll('[data-flat-slider-track="true"]')).toHaveLength(0);
+    expect(host.querySelectorAll("[data-slider-control]")).toHaveLength(0);
     act(() => root.unmount());
   });
 
@@ -190,7 +191,7 @@ describe("FlatEffectsSection", () => {
     expect(host.textContent).toContain("Angle");
     const effect = host.querySelector('[data-flat-effect-editor="chromaticAberration"]');
     if (!effect) throw new Error("expected chromatic effect");
-    const rows = effect.querySelectorAll('[data-flat-slider-track="true"]');
+    const rows = effect.querySelectorAll("[data-slider-control]");
     const angleTrack = rows[1] as HTMLElement | undefined;
     if (!angleTrack) throw new Error("expected angle slider");
     Object.defineProperty(angleTrack, "getBoundingClientRect", {
@@ -204,16 +205,14 @@ describe("FlatEffectsSection", () => {
     act(() => root.unmount());
   });
 
-  it("offers native ASCII styles, binary controls, and a bounded custom palette", () => {
+  it("offers native ASCII styles, binary controls, and a bounded custom palette", async () => {
     const onCommit = vi.fn();
     const grading = normalizeHfColorGrading({
       effects: HF_COLOR_GRADING_EFFECT_APPLY_DEFAULTS.ascii,
     });
     if (!grading) throw new Error("expected ASCII grading");
     const { host, root } = renderInto(<FlatEffectsSection {...sectionProps(grading, onCommit)} />);
-    expect(
-      host.querySelector<HTMLSelectElement>('select[aria-label="Style"]')?.options,
-    ).toHaveLength(8);
+    expect(await openFlatSelect(host, "Style")).toHaveLength(8);
     expect(host.querySelectorAll('[role="switch"]')).toHaveLength(2);
     expect(host.querySelector('[data-flat-effect-editor="ascii"]')?.textContent).not.toContain(
       "Mix",
diff --git a/packages/studio/src/components/editor/propertyPanelFlatMediaSection.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatMediaSection.test.tsx
index fcfb626a01..c96ff586bc 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatMediaSection.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatMediaSection.test.tsx
@@ -5,6 +5,7 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { FlatMediaSection } from "./propertyPanelFlatMediaSection";
 import type { DomEditSelection } from "./domEditing";
+import { chooseFlatSelectOption, flatSelectRow } from "./flatSelectHarness";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -150,9 +151,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
       );
     });
     expect(host.textContent).toContain("0.0 dB");
-    expect(
-      host.querySelector('[data-flat-slider-track="true"]')?.getAttribute("aria-valuenow"),
-    ).toBe("0");
+    expect(host.querySelector('input[type="range"]')?.getAttribute("aria-valuenow")).toBe("0");
     act(() => root.unmount());
   });
 
@@ -174,7 +173,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
         />,
       );
     });
-    const volumeTrack = host.querySelectorAll('[data-flat-slider-track="true"]')[0];
+    const volumeTrack = host.querySelectorAll("[data-slider-control]")[0];
     Object.defineProperty(volumeTrack, "getBoundingClientRect", {
       value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
     });
@@ -207,7 +206,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
         />,
       );
     });
-    const rateTrack = host.querySelectorAll('[data-flat-slider-track="true"]')[1];
+    const rateTrack = host.querySelectorAll("[data-slider-control]")[1];
     Object.defineProperty(rateTrack, "getBoundingClientRect", {
       value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
     });
@@ -238,7 +237,7 @@ describe("FlatMediaSection — volume/rate/media-start", () => {
         />,
       );
     });
-    const mediaStartTrack = host.querySelectorAll('[data-flat-slider-track="true"]')[2];
+    const mediaStartTrack = host.querySelectorAll("[data-slider-control]")[2];
     Object.defineProperty(mediaStartTrack, "getBoundingClientRect", {
       value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
     });
@@ -372,7 +371,7 @@ describe("FlatMediaSection — loop/muted/has-audio", () => {
 });
 
 describe("FlatMediaSection — fit/position", () => {
-  it("commits object-fit and object-position changes", () => {
+  it("commits object-fit and object-position changes", async () => {
     const onSetStyle = vi.fn();
     const { host, root } = (() => {
       const element = makeVideoElement();
@@ -393,20 +392,13 @@ describe("FlatMediaSection — fit/position", () => {
       });
       return { host, root };
     })();
-    const selects = host.querySelectorAll("select");
-    const fitSelect = Array.from(selects).find((s) => s.value === "cover");
-    expect(fitSelect).not.toBeUndefined();
-    act(() => {
-      if (fitSelect) {
-        fitSelect.value = "contain";
-        fitSelect.dispatchEvent(new Event("change", { bubbles: true }));
-      }
-    });
+    expect(flatSelectRow(host, "Fit").trigger.textContent).toContain("cover");
+    await chooseFlatSelectOption(host, "Fit", "contain");
     expect(onSetStyle).toHaveBeenCalledWith("object-fit", "contain");
     act(() => root.unmount());
   });
 
-  it("commits an object-position change", () => {
+  it("commits an object-position change", async () => {
     const onSetStyle = vi.fn();
     const element = makeVideoElement();
     const host = document.createElement("div");
@@ -424,15 +416,8 @@ describe("FlatMediaSection — fit/position", () => {
         />,
       );
     });
-    const selects = host.querySelectorAll("select");
-    const positionSelect = Array.from(selects).find((s) => s.value === "center");
-    expect(positionSelect).not.toBeUndefined();
-    act(() => {
-      if (positionSelect) {
-        positionSelect.value = "left top";
-        positionSelect.dispatchEvent(new Event("change", { bubbles: true }));
-      }
-    });
+    expect(flatSelectRow(host, "Position").trigger.textContent).toContain("center");
+    await chooseFlatSelectOption(host, "Position", "left top");
     expect(onSetStyle).toHaveBeenCalledWith("object-position", "left top");
     act(() => root.unmount());
   });
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
index 013fa4bacd..4d6b3f0607 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.test.tsx
@@ -321,8 +321,50 @@ describe("FlatGroupHeader", () => {
   });
 });
 
+/* ------------------------------------------------------------------ */
+/*  Shared harness for the two rows that now wrap a Base UI control.   */
+/* ------------------------------------------------------------------ */
+
+/** Base UI moves focus and mounts a popup a task later; happy-dom is no faster. */
+const settle = () => act(async () => void (await new Promise((r) => setTimeout(r, 0))));
+
+/** happy-dom has no layout, so Base UI's pointer maths needs a rect given to it. */
+function stubRect(el: Element, width = 100) {
+  el.getBoundingClientRect = () =>
+    ({ x: 0, y: 0, top: 0, left: 0, right: width, bottom: 24, width, height: 24 }) as DOMRect;
+}
+
+function sliderControl(host: HTMLElement, width = 100) {
+  const control = host.querySelector<HTMLElement>("[data-slider-control]");
+  if (!control) throw new Error("expected a slider control");
+  stubRect(control, width);
+  return control;
+}
+
+/** The thumb's own input: where the value, the range and the keyboard live. */
+function sliderInput(host: HTMLElement) {
+  const input = host.querySelector<HTMLInputElement>('input[type="range"]');
+  if (!input) throw new Error("expected a slider input");
+  return input;
+}
+
+function fire(el: Element, type: string, init: MouseEventInit & { key?: string } = {}) {
+  const event =
+    init.key === undefined
+      ? new MouseEvent(type, { bubbles: true, ...init })
+      : new KeyboardEvent(type, { bubbles: true, key: init.key });
+  act(() => void el.dispatchEvent(event));
+}
+
+/** `buttons: 1` is not decoration: Base UI reads it to tell a live drag from a
+ *  move whose pointerup another element swallowed. */
+const move = (clientX: number) =>
+  act(() => void document.dispatchEvent(new MouseEvent("pointermove", { clientX, buttons: 1 })));
+const release = (clientX: number) =>
+  act(() => void document.dispatchEvent(new MouseEvent("pointerup", { clientX, buttons: 0 })));
+
 describe("FlatSlider", () => {
-  it("renders the default tier with a dim knob at the correct position", () => {
+  it("shows the display value, tinted by tier", () => {
     const { host, root } = renderInto(
       <FlatSlider
         label="Layer blur"
@@ -334,17 +376,16 @@ describe("FlatSlider", () => {
         onCommit={vi.fn()}
       />,
     );
-    const knob = host.querySelector<HTMLElement>('[data-flat-slider-knob="true"]');
-    expect(knob).not.toBeNull();
-    expect(knob?.className).toContain("bg-panel-text-4");
-    expect(knob?.style.left).toBe("0%");
     const value = host.querySelector('[data-flat-slider-value="true"]');
-    expect(value?.className).toContain("text-panel-text-3");
     expect(value?.textContent).toBe("0px");
+    expect(value?.className).toContain("text-text-3");
+    // The thumb reports the value to assistive tech, which the hand-rolled
+    // knob only did because it carried the aria attributes by hand.
+    expect(sliderInput(host).getAttribute("aria-valuenow")).toBe("0");
     act(() => root.unmount());
   });
 
-  it("renders the explicitCustom tier with a filled track and bright knob", () => {
+  it("marks an explicitly set value with the bright tier", () => {
     const { host, root } = renderInto(
       <FlatSlider
         label="Opacity"
@@ -356,14 +397,13 @@ describe("FlatSlider", () => {
         onCommit={vi.fn()}
       />,
     );
-    const fill = host.querySelector<HTMLElement>('[data-flat-slider-fill="true"]');
-    expect(fill?.style.width).toBe("100%");
-    const knob = host.querySelector<HTMLElement>('[data-flat-slider-knob="true"]');
-    expect(knob?.className).toContain("bg-white");
+    const value = host.querySelector('[data-flat-slider-value="true"]');
+    expect(value?.className).toContain("text-text-0");
+    expect(sliderInput(host).getAttribute("aria-valuenow")).toBe("100");
     act(() => root.unmount());
   });
 
-  it("commits a value on track click, proportional to click position", () => {
+  it("commits a value proportional to where the track was pressed", () => {
     const onCommit = vi.fn();
     const { host, root } = renderInto(
       <FlatSlider
@@ -376,177 +416,20 @@ describe("FlatSlider", () => {
         onCommit={onCommit}
       />,
     );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 200, top: 0, height: 2, right: 200, bottom: 2 }),
-    });
-    act(() => {
-      track.dispatchEvent(new MouseEvent("pointerdown", { bubbles: true, clientX: 100 }));
-      track.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, clientX: 100 }));
-    });
-    expect(onCommit).toHaveBeenCalledWith(50);
-    act(() => root.unmount());
-  });
+    const control = sliderControl(host);
 
-  it("widens the click/drag hit area vertically beyond the thin visible line", () => {
-    const onCommit = vi.fn();
-    const { host, root } = renderInto(
-      <FlatSlider
-        label="Opacity"
-        value={50}
-        min={0}
-        max={100}
-        tier="explicitCustom"
-        displayValue="50%"
-        onCommit={onCommit}
-      />,
-    );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 200, top: 0, height: 20, right: 200, bottom: 20 }),
-    });
-    act(() => {
-      track.dispatchEvent(
-        new MouseEvent("pointerdown", { bubbles: true, clientX: 20, clientY: 18 }),
-      );
-      track.dispatchEvent(new MouseEvent("pointerup", { bubbles: true, clientX: 20 }));
-    });
-    expect(onCommit).toHaveBeenCalledWith(10);
-    act(() => root.unmount());
-  });
+    fire(control, "pointerdown", { clientX: 50, button: 0 });
+    release(50);
 
-  it("tracks the knob instantly on every pointermove during a drag (draft state)", () => {
-    const onCommit = vi.fn();
-    const { host, root } = renderInto(
-      <FlatSlider
-        label="Opacity"
-        value={50}
-        min={0}
-        max={100}
-        tier="explicitCustom"
-        displayValue="50%"
-        onCommit={onCommit}
-      />,
-    );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 200, top: 0, height: 20, right: 200, bottom: 20 }),
-    });
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 20, pointerId: 1 }),
-      );
-    });
-    // Instant, un-throttled knob feedback via aria-valuenow (draft state) —
-    // this must update on every pointermove regardless of the commit throttle.
-    expect(track.getAttribute("aria-valuenow")).toBe("10");
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, clientX: 160, pointerId: 1 }),
-      );
-    });
-    expect(track.getAttribute("aria-valuenow")).toBe("80");
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, clientX: 100, pointerId: 1 }),
-      );
-    });
-    expect(track.getAttribute("aria-valuenow")).toBe("50");
-    act(() => {
-      track.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, pointerId: 1 }));
-    });
-    act(() => root.unmount());
-  });
-
-  it("throttles rapid drag commits to leading edge + final value on release, not every step", () => {
-    const onCommit = vi.fn();
-    const { host, root } = renderInto(
-      <FlatSlider
-        label="Opacity"
-        value={5}
-        min={0}
-        max={100}
-        tier="explicitCustom"
-        displayValue="5%"
-        onCommit={onCommit}
-      />,
-    );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 200, top: 0, height: 20, right: 200, bottom: 20 }),
-    });
-    act(() => {
-      // pointerdown fires the leading-edge commit immediately — a live
-      // preview needs to move the instant the drag starts, not wait 40ms.
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 20, pointerId: 1 }),
-      );
-      track.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, clientX: 160, pointerId: 1 }),
-      );
-      track.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, clientX: 100, pointerId: 1 }),
-      );
-    });
-    // The leading-edge commit (10) fired; the rapid intermediate position (80)
-    // from the first pointermove never committed — it's within the 40ms
-    // throttle window, so only the trailing flush or the pointerup release
-    // gets to send the next value.
-    expect(onCommit).toHaveBeenCalledTimes(1);
-    expect(onCommit).toHaveBeenCalledWith(10);
-    act(() => {
-      // Real pointerup events always carry the pointer's true release position
-      // (matches the last pointermove) — the handler recomputes from this
-      // rather than trusting a possibly-stale `draft` closure.
-      track.dispatchEvent(
-        new PointerEvent("pointerup", { bubbles: true, clientX: 100, pointerId: 1 }),
-      );
-    });
-    // Release flushes immediately with the LAST position only.
-    expect(onCommit).toHaveBeenCalledTimes(2);
-    expect(onCommit).toHaveBeenNthCalledWith(2, 50);
+    expect(onCommit.mock.calls).toEqual([[50]]);
     act(() => root.unmount());
   });
 
-  it("ignores pointermove once a drag has ended (pointer capture released)", () => {
-    const onCommit = vi.fn();
-    const { host, root } = renderInto(
-      <FlatSlider
-        label="Opacity"
-        value={50}
-        min={0}
-        max={100}
-        tier="explicitCustom"
-        displayValue="50%"
-        onCommit={onCommit}
-      />,
-    );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 200, top: 0, height: 20, right: 200, bottom: 20 }),
-    });
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 20, pointerId: 1 }),
-      );
-      track.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, pointerId: 1 }));
-    });
-    onCommit.mockClear();
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, clientX: 160, pointerId: 1 }),
-      );
-    });
-    expect(onCommit).not.toHaveBeenCalled();
-    act(() => root.unmount());
-  });
-
-  it("still commits the release position when releasePointerCapture synchronously fires lostpointercapture (real-browser behavior happy-dom doesn't replicate)", () => {
+  it("writes twice for a drag from 10 to 40 across five intermediate moves, not once per move", () => {
+    // The row's onCommit IS the live canvas preview, so mid-drag writes are the
+    // point; what must not happen is one write per pointermove. Five moves get
+    // a leading-edge write and then the released value, because the rest land
+    // inside the same throttle window.
     const onCommit = vi.fn();
     const { host, root } = renderInto(
       <FlatSlider
@@ -559,38 +442,34 @@ describe("FlatSlider", () => {
         onCommit={onCommit}
       />,
     );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
-    });
-    // Real browsers fire lostpointercapture SYNCHRONOUSLY, mid-call, when
-    // releasePointerCapture() is invoked — happy-dom does not replicate this,
-    // so patch it in to reproduce the exact reentrancy hazard onPointerUp
-    // must guard against.
-    const originalRelease = track.releasePointerCapture.bind(track);
-    track.releasePointerCapture = (pointerId: number) => {
-      originalRelease(pointerId);
-      track.dispatchEvent(new Event("lostpointercapture", { bubbles: true }));
-    };
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 30, pointerId: 1 }),
-      );
-    });
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerup", { bubbles: true, clientX: 80, pointerId: 1 }),
-      );
-    });
-    // The real release position (80), not a rollback to the pre-drag value (10)
-    // caused by onLostPointerCapture resyncing mid-handler.
-    expect(onCommit).toHaveBeenLastCalledWith(80);
-    expect(track.getAttribute("aria-valuenow")).toBe("80");
+    const control = sliderControl(host);
+
+    fire(control, "pointerdown", { clientX: 10, button: 0 });
+    for (const x of [15, 20, 25, 30, 40]) move(x);
+    release(40);
+
+    expect(onCommit).toHaveBeenLastCalledWith(40);
+    expect(onCommit.mock.calls.length).toBeLessThanOrEqual(2);
     act(() => root.unmount());
   });
 
-  it("Escape during a drag reverts to the pre-drag value and releases pointer capture, instead of leaving the last dragged-to position committed", () => {
+  /** Past the throttle window, so a queued write actually lands. */
+  const past = () => act(async () => void (await new Promise((r) => setTimeout(r, 60))));
+
+  /**
+   * The three ways a drag is abandoned rather than finished. All three have to
+   * put back the value the drag started from, and the interesting part is that
+   * a mid-drag write has ALREADY applied an intermediate value to the document
+   * by then, so an abort that merely stopped listening would leave the canvas
+   * wherever the pointer happened to be.
+   */
+  const aborts = [
+    ["the right button", (control: HTMLElement) => fire(control, "contextmenu", { button: 2 })],
+    ["the platform cancelling the gesture", (c: HTMLElement) => fire(c, "pointercancel", {})],
+    ["Escape", (control: HTMLElement) => fire(control, "keydown", { key: "Escape" })],
+  ] as const;
+
+  it.each(aborts)("reverts a drag in flight aborted with %s (KTD8)", async (_name, abort) => {
     const onCommit = vi.fn();
     const { host, root } = renderInto(
       <FlatSlider
@@ -603,103 +482,78 @@ describe("FlatSlider", () => {
         onCommit={onCommit}
       />,
     );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
-    });
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 30, pointerId: 1 }),
-      );
-    });
-    // The leading-edge commit already applied the dragged-to value (30).
-    expect(onCommit).toHaveBeenLastCalledWith(30);
-    act(() => {
-      track.dispatchEvent(
-        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
-      );
-    });
-    expect(onCommit).toHaveBeenLastCalledWith(10);
-    expect(track.getAttribute("aria-valuenow")).toBe("10");
-    expect(track.hasPointerCapture(1)).toBe(false);
-    // A subsequent pointermove for the now-released pointer must not resume
-    // the cancelled drag.
-    onCommit.mockClear();
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, clientX: 80, pointerId: 1 }),
-      );
-    });
-    expect(onCommit).not.toHaveBeenCalled();
+    const control = sliderControl(host);
+
+    fire(control, "pointerdown", { clientX: 10, button: 0 });
+    move(60);
+    expect(onCommit.mock.calls).toEqual([[60]]);
+
+    abort(control);
+    // The pointer is still down: the abort has to stop Base UI applying any
+    // further move, not merely reset the number once.
+    move(90);
+    release(90);
+    await past();
+
+    expect(sliderInput(host).value).toBe("10");
+    expect(onCommit.mock.calls).toEqual([[60], [10]]);
     act(() => root.unmount());
   });
 
-  it("right-click (contextmenu) during a drag cancels it and reverts to the pre-drag value, instead of committing the last dragged-to position", () => {
+  it("steps with the arrow keys and clamps with Home and End", () => {
     const onCommit = vi.fn();
     const { host, root } = renderInto(
       <FlatSlider
-        label="Opacity"
-        value={10}
+        label="Volume"
+        value={50}
         min={0}
         max={100}
-        tier="explicitCustom"
-        displayValue="10%"
+        tier="default"
+        displayValue="50%"
         onCommit={onCommit}
       />,
     );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
-    });
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 65, pointerId: 1 }),
-      );
-    });
-    expect(onCommit).toHaveBeenLastCalledWith(65);
-    const contextMenuEvent = new MouseEvent("contextmenu", { bubbles: true, cancelable: true });
-    act(() => {
-      track.dispatchEvent(contextMenuEvent);
-    });
-    expect(contextMenuEvent.defaultPrevented).toBe(true);
-    expect(onCommit).toHaveBeenLastCalledWith(10);
-    expect(track.getAttribute("aria-valuenow")).toBe("10");
-    expect(track.hasPointerCapture(1)).toBe(false);
+    const input = sliderInput(host);
+    expect(input.min).toBe("0");
+    expect(input.max).toBe("100");
+
+    fire(input, "keydown", { key: "ArrowRight" });
+    expect(onCommit).toHaveBeenLastCalledWith(51);
+    fire(input, "keydown", { key: "Home" });
+    expect(onCommit).toHaveBeenLastCalledWith(0);
+    fire(input, "keydown", { key: "End" });
+    expect(onCommit).toHaveBeenLastCalledWith(100);
     act(() => root.unmount());
   });
 
-  it("a native pointercancel during a drag reverts to the pre-drag value, instead of leaving the last dragged-to position committed", () => {
+  it("ignores the committed value echoing back mid-drag, so the thumb does not snap", () => {
     const onCommit = vi.fn();
-    const { host, root } = renderInto(
-      <FlatSlider
-        label="Opacity"
-        value={10}
-        min={0}
-        max={100}
-        tier="explicitCustom"
-        displayValue="10%"
-        onCommit={onCommit}
-      />,
-    );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
-    });
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 65, pointerId: 1 }),
+    function Harness() {
+      const [value, setValue] = React.useState(10);
+      return (
+        <FlatSlider
+          label="Opacity"
+          value={value}
+          min={0}
+          max={100}
+          tier="explicitCustom"
+          displayValue={`${value}%`}
+          onCommit={(next) => {
+            onCommit(next);
+            setValue(next);
+          }}
+        />
       );
-    });
-    expect(onCommit).toHaveBeenLastCalledWith(65);
-    act(() => {
-      track.dispatchEvent(new PointerEvent("pointercancel", { bubbles: true, pointerId: 1 }));
-    });
-    expect(onCommit).toHaveBeenLastCalledWith(10);
-    expect(track.getAttribute("aria-valuenow")).toBe("10");
-    expect(track.hasPointerCapture(1)).toBe(false);
+    }
+    const { host, root } = renderInto(<Harness />);
+    const control = sliderControl(host);
+
+    fire(control, "pointerdown", { clientX: 30, button: 0 });
+    expect(onCommit).toHaveBeenCalledWith(30);
+    move(60);
+
+    // 60, not the 30 the parent echoed back a render later.
+    expect(sliderInput(host).value).toBe("60");
     act(() => root.unmount());
   });
 });
@@ -814,7 +668,7 @@ describe("FlatSlider — Grade extensions", () => {
     act(() => root.unmount());
   });
 
-  it("never commits from a click released on a disabled slider", () => {
+  it("never commits from a press released on a disabled slider", () => {
     const onCommit = vi.fn();
     const { host, root } = renderInto(
       <FlatSlider
@@ -828,19 +682,11 @@ describe("FlatSlider — Grade extensions", () => {
         onCommit={onCommit}
       />,
     );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 200, top: 0, height: 20, right: 200, bottom: 20 }),
-    });
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 50, pointerId: 1 }),
-      );
-      track.dispatchEvent(
-        new PointerEvent("pointerup", { bubbles: true, clientX: 50, pointerId: 1 }),
-      );
-    });
+    const control = sliderControl(host, 200);
+
+    fire(control, "pointerdown", { clientX: 50, button: 0 });
+    release(50);
+
     expect(onCommit).not.toHaveBeenCalled();
     act(() => root.unmount());
   });
@@ -867,8 +713,7 @@ describe("FlatSlider — Grade extensions", () => {
     act(() => root.unmount());
   });
 
-  it("a trailing throttled commit uses the current render's onCommit, not the one captured when it was scheduled", () => {
-    vi.useFakeTimers();
+  it("a trailing throttled write uses the current render's onCommit, not the one captured when it was scheduled", async () => {
     const onCommitA = vi.fn();
     const { host, root } = renderInto(
       <FlatSlider
@@ -881,32 +726,19 @@ describe("FlatSlider — Grade extensions", () => {
         onCommit={onCommitA}
       />,
     );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 200, top: 0, height: 20, right: 200, bottom: 20 }),
-    });
-    act(() => {
-      // Leading-edge commit fires synchronously with onCommitA (clientX 150
-      // on a -100..100 track maps to 50, distinct from the initial value 0).
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 150, pointerId: 1 }),
-      );
-    });
+    const control = sliderControl(host, 200);
+
+    // Leading edge: clientX 150 on a 200px, -100..100 track is 50.
+    fire(control, "pointerdown", { clientX: 150, button: 0 });
     expect(onCommitA).toHaveBeenCalledTimes(1);
-    act(() => {
-      // Within the 40ms throttle window — queues a trailing commit (to 80,
-      // distinct from the just-committed 50) instead of firing immediately.
-      track.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, clientX: 180, pointerId: 1 }),
-      );
-    });
+    // Inside the throttle window, so this queues rather than writes.
+    move(180);
     expect(onCommitA).toHaveBeenCalledTimes(1);
-    // Simulate the real-world race: something else causes this slider to
-    // re-render with a NEW onCommit closure before the queued timer fires
-    // (e.g. Grade's per-detail onCommit spreads the render-time whole
-    // grading object, so a different control committing in between produces
-    // a fresh closure). The stale closure must not win.
+
+    // The real race: something else re-renders this row with a NEW onCommit
+    // closure before the queued write fires. Grade's per-detail onCommit
+    // spreads the render-time grading object, so a stale closure winning here
+    // would silently revert whatever changed in between.
     const onCommitB = vi.fn();
     act(() => {
       root.render(
@@ -921,18 +753,14 @@ describe("FlatSlider — Grade extensions", () => {
         />,
       );
     });
-    act(() => {
-      vi.advanceTimersByTime(45);
-    });
-    expect(onCommitB).toHaveBeenCalledTimes(1);
-    expect(onCommitB).toHaveBeenCalledWith(80);
+    await act(async () => void (await new Promise((r) => setTimeout(r, 60))));
+
+    expect(onCommitB.mock.calls).toEqual([[80]]);
     expect(onCommitA).toHaveBeenCalledTimes(1);
     act(() => root.unmount());
-    vi.useRealTimers();
   });
 
-  it("flushes a still-queued trailing commit on unmount instead of dropping it", () => {
-    vi.useFakeTimers();
+  it("flushes a still-queued trailing write on unmount instead of dropping it", () => {
     const onCommit = vi.fn();
     const { host, root } = renderInto(
       <FlatSlider
@@ -945,258 +773,133 @@ describe("FlatSlider — Grade extensions", () => {
         onCommit={onCommit}
       />,
     );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 200, top: 0, height: 20, right: 200, bottom: 20 }),
-    });
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 20, pointerId: 1 }),
-      );
-    });
+    const control = sliderControl(host, 200);
+
+    fire(control, "pointerdown", { clientX: 20, button: 0 });
     expect(onCommit).toHaveBeenCalledTimes(1);
-    act(() => {
-      // Queues a trailing commit that never gets to fire before unmount.
-      track.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, clientX: 160, pointerId: 1 }),
-      );
-    });
+    // Queues a write that never gets to fire before the row goes away.
+    move(160);
     expect(onCommit).toHaveBeenCalledTimes(1);
+
     act(() => root.unmount());
+
     expect(onCommit).toHaveBeenCalledTimes(2);
     expect(onCommit).toHaveBeenNthCalledWith(2, 80);
-    vi.useRealTimers();
   });
+});
 
-  it("supports keyboard operation: focusable, arrow keys step, Home/End clamp to range", () => {
-    const onCommit = vi.fn();
-    const { host, root } = renderInto(
-      <FlatSlider
-        label="Volume"
-        value={50}
-        min={0}
-        max={100}
-        tier="default"
-        displayValue="50%"
-        onCommit={onCommit}
-      />,
-    );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    expect(track.getAttribute("tabindex")).toBe("0");
-    expect(track.getAttribute("aria-valuemin")).toBe("0");
-    expect(track.getAttribute("aria-valuemax")).toBe("100");
-    act(() => {
-      track.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
-    });
-    expect(onCommit).toHaveBeenLastCalledWith(51);
-    act(() => {
-      track.dispatchEvent(new KeyboardEvent("keydown", { key: "Home", bubbles: true }));
-    });
-    expect(onCommit).toHaveBeenLastCalledWith(0);
-    act(() => root.unmount());
-  });
+/* ------------------------------------------------------------------ */
+/*  FlatSelectRow                                                      */
+/* ------------------------------------------------------------------ */
 
-  it("ignores the committed prop echoing back mid-drag (no knob snap-back)", () => {
-    const onCommit = vi.fn();
-    function Harness() {
-      const [value, setValue] = React.useState(10);
-      return (
-        <FlatSlider
-          label="Opacity"
-          value={value}
-          min={0}
-          max={100}
-          tier="explicitCustom"
-          displayValue={`${value}%`}
-          onCommit={(next) => {
-            onCommit(next);
-            setValue(next);
-          }}
-        />
-      );
-    }
-    const { host, root } = renderInto(<Harness />);
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
-    });
-    act(() => {
-      // Leading-edge commit fires at 30 and echoes back through the parent's
-      // state — mid-drag, that echo must NOT reset the draft.
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 30, pointerId: 1 }),
-      );
-    });
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, clientX: 80, pointerId: 1 }),
-      );
-    });
-    // Draft tracks the pointer (80), not the stale committed echo (30).
-    expect(track.getAttribute("aria-valuenow")).toBe("80");
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerup", { bubbles: true, clientX: 80, pointerId: 1 }),
-      );
-    });
-    expect(onCommit).toHaveBeenLastCalledWith(80);
-    expect(track.getAttribute("aria-valuenow")).toBe("80");
-    act(() => root.unmount());
-  });
+function selectTrigger(host: HTMLElement) {
+  const trigger = host.querySelector<HTMLElement>('[role="combobox"]');
+  if (!trigger) throw new Error("expected a select trigger");
+  return trigger;
+}
 
-  it("resets the dragging state on lostpointercapture even without a prior pointerup/pointercancel", () => {
+/** Opens the popup and returns its options, which only exist while open. */
+async function openOptions(host: HTMLElement) {
+  act(() => selectTrigger(host).click());
+  await settle();
+  return [...document.querySelectorAll('[role="option"]')] as HTMLElement[];
+}
+
+async function choose(host: HTMLElement, text: string) {
+  const options = await openOptions(host);
+  const option = options.find((el) => el.textContent === text);
+  if (!option) throw new Error(`no option "${text}" among ${options.map((o) => o.textContent)}`);
+  act(() => option.click());
+  await settle();
+}
+
+describe("FlatSelectRow", () => {
+  it("renders the default tier with no reset button", () => {
     const { host, root } = renderInto(
-      <FlatSlider
-        label="Opacity"
-        value={10}
-        min={0}
-        max={100}
-        tier="explicitCustom"
-        displayValue="10%"
-        onCommit={vi.fn()}
+      <FlatSelectRow
+        label="Overflow"
+        value="visible"
+        options={["visible", "hidden"]}
+        tier="default"
+        onChange={vi.fn()}
       />,
     );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
-    });
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 30, pointerId: 1 }),
-      );
-    });
-    expect(track.getAttribute("aria-valuenow")).toBe("30");
-    act(() => {
-      // Capture lost WITHOUT a pointerup/pointercancel first — e.g. another
-      // element steals it, or the browser reclaims it for a scroll gesture.
-      track.dispatchEvent(new Event("lostpointercapture", { bubbles: true }));
-    });
-    act(() => {
-      root.render(
-        <FlatSlider
-          label="Opacity"
-          value={99}
-          min={0}
-          max={100}
-          tier="explicitCustom"
-          displayValue="99%"
-          onCommit={vi.fn()}
-        />,
-      );
-    });
-    // If lostpointercapture hadn't cleared the dragging flag, this external
-    // value change would be silently ignored (mid-drag echo suppression)
-    // forever — the knob would be stuck at 30.
-    expect(track.getAttribute("aria-valuenow")).toBe("99");
+    expect(selectTrigger(host).textContent).toContain("visible");
+    expect(host.querySelector('[data-flat-select-reset="true"]')).toBeNull();
     act(() => root.unmount());
   });
 
-  it("resyncs immediately from the latest value on lostpointercapture, even when the value changed WHILE still dragging", () => {
+  it("boxes the trigger the way the row's other fields are boxed", () => {
+    // R10 and R8 together: the value carries its own boundary, and it is the
+    // same boundary the text fields wear, not a native control's.
     const { host, root } = renderInto(
-      <FlatSlider
-        label="Opacity"
-        value={10}
-        min={0}
-        max={100}
-        tier="explicitCustom"
-        displayValue="10%"
-        onCommit={vi.fn()}
+      <FlatSelectRow
+        label="Overflow"
+        value="hidden"
+        options={["visible", "hidden"]}
+        tier="explicitDefault"
+        onChange={vi.fn()}
       />,
     );
-    const track = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
-    if (!track) throw new Error("expected a track element");
-    Object.defineProperty(track, "getBoundingClientRect", {
-      value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
-    });
-    act(() => {
-      track.dispatchEvent(
-        new PointerEvent("pointerdown", { bubbles: true, clientX: 30, pointerId: 1 }),
-      );
-    });
-    expect(track.getAttribute("aria-valuenow")).toBe("30");
-    // Value changes to 99 WHILE still dragging — the [value] sync effect
-    // must skip it (draggingRef is still true), so draft stays at 30.
-    act(() => {
-      root.render(
-        <FlatSlider
-          label="Opacity"
-          value={99}
-          min={0}
-          max={100}
-          tier="explicitCustom"
-          displayValue="99%"
-          onCommit={vi.fn()}
-        />,
-      );
-    });
-    expect(track.getAttribute("aria-valuenow")).toBe("30");
-    act(() => {
-      // Capture lost with NO further render afterward — if the resync
-      // depended on a subsequent [value] effect run rather than reading
-      // latestValueRef directly, this would leave the knob stuck at 30.
-      track.dispatchEvent(new Event("lostpointercapture", { bubbles: true }));
-    });
-    expect(track.getAttribute("aria-valuenow")).toBe("99");
+    const trigger = selectTrigger(host);
+    expect(trigger.className).toContain("border-border-input");
+    expect(trigger.className).toContain("bg-input");
     act(() => root.unmount());
-  });
-});
 
-describe("FlatSelectRow", () => {
-  it("renders the default tier with no reset button", () => {
-    const { host, root } = renderInto(
+    // An explicitly set value tints that same box, and `cn` has to let the
+    // tint win over the base border rather than leave both classes standing.
+    const { host: custom, root: rootB } = renderInto(
       <FlatSelectRow
-        label="Blend"
-        value="normal"
-        options={["normal", "multiply", "screen"]}
-        tier="default"
+        label="Overflow"
+        value="hidden"
+        options={["visible", "hidden"]}
+        tier="explicitCustom"
         onChange={vi.fn()}
       />,
     );
-    const select = host.querySelector("select");
-    expect(select?.value).toBe("normal");
-    expect(host.querySelector('[data-flat-select-reset="true"]')).toBeNull();
-    act(() => root.unmount());
+    const tinted = selectTrigger(custom);
+    expect(tinted.className).toContain("border-accent/30");
+    expect(tinted.className).not.toContain("border-border-input");
+    expect(tinted.className).toContain("text-accent");
+    act(() => rootB.unmount());
   });
 
   it("renders the explicitCustom tier with a reset button and fires onReset", () => {
     const onReset = vi.fn();
     const { host, root } = renderInto(
       <FlatSelectRow
-        label="Shadow"
-        value="soft"
-        options={["none", "soft", "lift", "glow"]}
+        label="Overflow"
+        value="hidden"
+        options={["visible", "hidden"]}
         tier="explicitCustom"
         onChange={vi.fn()}
         onReset={onReset}
       />,
     );
-    const select = host.querySelector<HTMLSelectElement>("select");
-    expect(select?.className).toContain("text-accent");
     const reset = host.querySelector<HTMLButtonElement>('[data-flat-select-reset="true"]');
+    expect(reset).not.toBeNull();
     act(() => reset?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
     expect(onReset).toHaveBeenCalledTimes(1);
     act(() => root.unmount());
   });
 
-  it("disables the reset button (and gives the select an accessible name) when the row itself is disabled", () => {
+  it("disables the reset button, and names the trigger, when the row itself is disabled", () => {
     const onReset = vi.fn();
     const { host, root } = renderInto(
       <FlatSelectRow
-        label="Shadow"
-        value="soft"
-        options={["none", "soft", "lift", "glow"]}
+        label=""
+        ariaLabel="Preset"
+        value="warm"
+        options={["neutral", "warm"]}
         tier="explicitCustom"
         disabled
         onChange={vi.fn()}
         onReset={onReset}
       />,
     );
-    const select = host.querySelector<HTMLSelectElement>("select");
-    expect(select?.getAttribute("aria-label")).toBe("Shadow");
+    const trigger = selectTrigger(host);
+    expect(trigger.getAttribute("aria-label")).toBe("Preset");
+    expect(trigger.hasAttribute("disabled")).toBe(true);
     const reset = host.querySelector<HTMLButtonElement>('[data-flat-select-reset="true"]');
     expect(reset?.disabled).toBe(true);
     act(() => reset?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
@@ -1204,87 +907,80 @@ describe("FlatSelectRow", () => {
     act(() => root.unmount());
   });
 
-  it("fires onChange when the select value changes", () => {
+  it("commits the chosen option's literal value", async () => {
     const onChange = vi.fn();
     const { host, root } = renderInto(
       <FlatSelectRow
         label="Overflow"
         value="visible"
-        options={["visible", "hidden", "clip", "auto", "scroll"]}
+        options={["visible", "hidden", "scroll"]}
         tier="default"
         onChange={onChange}
       />,
     );
-    const select = host.querySelector<HTMLSelectElement>("select");
-    if (!select) throw new Error("expected a select");
-    act(() => {
-      select.value = "hidden";
-      select.dispatchEvent(new Event("change", { bubbles: true }));
-    });
-    expect(onChange).toHaveBeenCalledWith("hidden");
+
+    await choose(host, "scroll");
+
+    expect(onChange.mock.calls).toEqual([["scroll"]]);
     act(() => root.unmount());
   });
 });
 
 describe("FlatSelectRow — label/value options", () => {
-  it("renders distinct labels for entries with a different display label than value", () => {
+  it("renders distinct labels for entries with a different display label than value", async () => {
+    const onChange = vi.fn();
     const { host, root } = renderInto(
       <FlatSelectRow
-        label="Preset"
-        value="clean-studio"
+        label="Weight"
+        value="400"
         options={[
-          { value: "neutral", label: "Neutral" },
-          { value: "clean-studio", label: "Clean Studio" },
-          { value: "bright-pop", label: "Bright Pop" },
+          { value: "400", label: "400 · Regular" },
+          { value: "600", label: "600 · Semibold" },
         ]}
-        tier="explicitCustom"
-        onChange={vi.fn()}
+        tier="default"
+        onChange={onChange}
       />,
     );
-    const select = host.querySelector("select");
-    expect(select?.value).toBe("clean-studio");
-    const options = Array.from(host.querySelectorAll("option")).map((o) => o.textContent);
-    expect(options).toEqual(["Neutral", "Clean Studio", "Bright Pop"]);
+    expect(selectTrigger(host).textContent).toContain("400 · Regular");
+
+    await choose(host, "600 · Semibold");
+
+    // The literal union value, not its display label.
+    expect(onChange.mock.calls).toEqual([["600"]]);
     act(() => root.unmount());
   });
 
-  it("still treats a bare string array as value===label (Plan 2 behavior unchanged)", () => {
+  it("still treats a bare string array as value===label", async () => {
     const { host, root } = renderInto(
       <FlatSelectRow
-        label="Blend"
-        value="multiply"
-        options={["normal", "multiply", "screen"]}
-        tier="explicitCustom"
+        label="Overflow"
+        value="visible"
+        options={["visible", "hidden", "clip"]}
+        tier="default"
         onChange={vi.fn()}
       />,
     );
-    const options = Array.from(host.querySelectorAll("option")).map((o) => o.textContent);
-    expect(options).toEqual(["normal", "multiply", "screen"]);
+    const options = await openOptions(host);
+    expect(options.map((el) => el.textContent)).toEqual(["visible", "hidden", "clip"]);
     act(() => root.unmount());
   });
 
-  it("preserves a valid authored value outside the preset list instead of misrepresenting it as the first option", () => {
-    const onChange = vi.fn();
+  it("preserves a valid authored value outside the preset list instead of dropping it", async () => {
+    // A `mix-blend-mode` this row does not offer as a preset still has to be
+    // displayable, or the row shows nothing and any choice silently overwrites
+    // a value the user never saw.
     const { host, root } = renderInto(
       <FlatSelectRow
         label="Blend"
-        value="difference"
-        options={["normal", "multiply", "screen", "overlay"]}
+        value="color-dodge"
+        options={["normal", "multiply"]}
         tier="explicitCustom"
-        onChange={onChange}
+        onChange={vi.fn()}
       />,
     );
-    const select = host.querySelector<HTMLSelectElement>("select");
-    // A native <select> whose `value` matches no <option> falls back to
-    // selectedIndex 0 — silently showing "normal" as selected even though
-    // the real persisted value is "difference". The row must add an option
-    // for the current value so it's genuinely representable.
-    expect(select?.value).toBe("difference");
-    const options = Array.from(host.querySelectorAll("option")).map((o) => o.textContent);
-    expect(options).toContain("difference");
-    // And reselecting the (still-present) first preset must be an explicit
-    // user choice, not something that already happened silently.
-    expect(onChange).not.toHaveBeenCalled();
+    expect(selectTrigger(host).textContent).toContain("color-dodge");
+    const options = await openOptions(host);
+    expect(options.map((el) => el.textContent)).toEqual(["color-dodge", "normal", "multiply"]);
     act(() => root.unmount());
   });
 });
diff --git a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
index e1d6dcde20..8435c1f11a 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatPrimitives.tsx
@@ -1,6 +1,7 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useEffect, useRef, type ReactNode } from "react";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { RotateCcw } from "../../icons/SystemIcons";
+import { Slider } from "../ui";
 import { CommitField } from "./propertyPanelPrimitives";
 import {
   VALUE_TIER_LABEL_CLASS,
@@ -238,28 +239,8 @@ export function FlatGroupHeader({
 /*  FlatSlider — full-width label/track/value row                      */
 /* ------------------------------------------------------------------ */
 
-/** Keyboard target for a slider keydown, or null for keys we don't handle. */
-function sliderKeyTarget(
-  key: string,
-  current: number,
-  min: number,
-  max: number,
-  step: number,
-): number | null {
-  if (key === "Home") return min;
-  if (key === "End") return max;
-  const deltas: Record<string, number> = {
-    ArrowLeft: -step,
-    ArrowDown: -step,
-    ArrowRight: step,
-    ArrowUp: step,
-    PageDown: -step * 10,
-    PageUp: step * 10,
-  };
-  const delta = deltas[key];
-  if (delta === undefined) return null;
-  return Math.max(min, Math.min(max, current + delta));
-}
+/** At most one durable write per this many ms while a drag is in flight. */
+const COMMIT_INTERVAL_MS = 40;
 
 export function FlatSlider({
   label,
@@ -287,256 +268,97 @@ export function FlatSlider({
   onCommit: (nextValue: number) => void;
 }) {
   const track = useTrackDesignInput();
-  // `draft` gives the knob instant, drag-local visual feedback. `onCommit` is
-  // throttled (not debounced) to at most once per 40ms: a real drag fires
-  // pointermove faster than that, and a pure debounce (reset the timer on
-  // every move) never commits until the pointer pauses or lifts — which kills
-  // live preview updates during a continuous drag. Throttling still fires on
-  // the leading edge and on a trailing timer, so the preview keeps updating
-  // while dragging, with an immediate flush on release for the final value.
-  const [draft, setDraft] = useState(value);
+  // The shared Slider owns the thumb, the keyboard, the pointer capture and
+  // the abort. What stays here is the write RATE, because this row has exactly
+  // one channel: a caller's `onCommit` writes the style, and that write IS the
+  // live canvas preview. So the continuous `onPreview` stream is throttled to
+  // at most one write per COMMIT_INTERVAL_MS rather than dropped. A debounce
+  // would be wrong: it never fires until the pointer pauses, which is exactly
+  // when a preview is least wanted.
   const commitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const lastCommitAtRef = useRef(0);
   const pendingRef = useRef<number | null>(null);
-  // True from pointerdown to pointerup/cancel. While dragging, the committed
-  // prop echoing back through the parent must NOT reset `draft` — the echo is
-  // up to 40ms stale (throttled commit), and syncing it mid-drag snaps the
-  // knob backwards under the user's pointer.
-  const draggingRef = useRef(false);
-  // Tracks the last value actually sent to onCommit — separate from `value`
-  // (the committed prop) because in a single pointerdown+pointerup click the
-  // leading-edge commit fires before the parent has re-rendered with the new
-  // prop, so the release flush must dedupe against what we just sent, not
-  // against the stale prop, or the same value commits twice.
+  // What was last handed to `onCommit`. Separate from the `value` prop: a
+  // leading-edge write lands before the parent has re-rendered, so the release
+  // flush has to dedupe against what was sent, not against the stale prop.
   const lastCommittedRef = useRef(value);
-  // Always the current render's onCommit — read inside the throttle timer
-  // instead of closing over the callback at schedule time. A caller whose
-  // onCommit spreads other current state (e.g. Grade's "...grading, details:
-  // {...}") would otherwise let a queued trailing commit fire ~40ms later
-  // with a stale snapshot and silently revert whatever the user changed on a
-  // different control in between.
+  // Always the current render's `onCommit`, read inside the throttle timer
+  // instead of closed over at schedule time. A caller whose onCommit spreads
+  // other current state (Grade's `...grading, details: {...}`) would otherwise
+  // let a queued write fire a frame later with a stale snapshot and silently
+  // revert whatever the user changed on another control in between.
   const onCommitRef = useRef(onCommit);
   onCommitRef.current = onCommit;
-  // Always this render's committed value — read directly (not via the
-  // effect below) by onLostPointerCapture, so the resync there doesn't
-  // depend on ordering between the native event and the [value] effect.
-  const latestValueRef = useRef(value);
-  latestValueRef.current = value;
-  // releasePointerCapture() (called explicitly below in onPointerUp/
-  // onPointerCancel) fires lostpointercapture SYNCHRONOUSLY in real
-  // browsers — i.e. onLostPointerCapture runs mid-onPointerUp, BEFORE
-  // onPointerUp's own draggingRef check and final commitDraft. Without this
-  // flag, a NORMAL release would have onLostPointerCapture reset
-  // draggingRef/draft to the stale value first, making onPointerUp's own
-  // "if (!draggingRef.current) return" bail out and silently drop the
-  // real final-position commit. Set right before each explicit release
-  // call so onLostPointerCapture can tell "our own release, the caller's
-  // own logic already handles it" apart from a genuine EXTERNAL capture
-  // loss (another element steals it, or the browser reclaims it for a
-  // scroll/touch gesture) where no other handler is about to run.
-  const explicitReleaseRef = useRef(false);
-  // The committed value when the current drag began — Escape and right-click
-  // both cancel an in-progress drag by reverting to this, not by leaving
-  // whatever position the pointer last reached committed.
-  const dragStartValueRef = useRef(value);
-  const activePointerIdRef = useRef<number | null>(null);
 
   useEffect(() => {
-    if (draggingRef.current) return;
-    setDraft(value);
     lastCommittedRef.current = value;
   }, [value]);
   useEffect(
     () => () => {
-      if (commitTimerRef.current) {
-        clearTimeout(commitTimerRef.current);
-        // Flush rather than drop a still-queued edit — this only fires if the
-        // component unmounts mid-drag (e.g. selection changes away), and
-        // silently discarding the user's last dragged position would look
-        // like data loss.
-        if (pendingRef.current !== null) onCommitRef.current(pendingRef.current);
-      }
+      if (!commitTimerRef.current) return;
+      clearTimeout(commitTimerRef.current);
+      // Flush rather than drop a queued edit. This only runs if the row
+      // unmounts mid-drag (the selection changes away), and discarding the
+      // last dragged position would look like data loss.
+      if (pendingRef.current !== null) onCommitRef.current(pendingRef.current);
     },
     [],
   );
 
-  const clampedPct = Math.max(0, Math.min(100, ((draft - min) / Math.max(max - min, 1e-6)) * 100));
-
-  const stepFromClientX = (clientX: number, rect: DOMRect) => {
-    const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / Math.max(rect.width, 1)));
-    const raw = min + ratio * (max - min);
-    const stepped = Math.round(raw / step) * step;
-    return Math.max(min, Math.min(max, stepped));
-  };
-  const commitDraft = (nextDraft: number) => {
+  const commitNow = (next: number) => {
     if (commitTimerRef.current) {
       clearTimeout(commitTimerRef.current);
       commitTimerRef.current = null;
     }
     pendingRef.current = null;
     lastCommitAtRef.current = Date.now();
-    if (nextDraft !== lastCommittedRef.current) {
-      lastCommittedRef.current = nextDraft;
-      onCommitRef.current(nextDraft);
-    }
+    if (next === lastCommittedRef.current) return;
+    lastCommittedRef.current = next;
+    onCommitRef.current(next);
   };
-  const scheduleCommit = (nextDraft: number) => {
+  const scheduleCommit = (next: number) => {
     const elapsed = Date.now() - lastCommitAtRef.current;
-    if (elapsed >= 40) {
-      commitDraft(nextDraft);
+    if (elapsed >= COMMIT_INTERVAL_MS) {
+      commitNow(next);
       return;
     }
-    pendingRef.current = nextDraft;
-    if (!commitTimerRef.current) {
-      commitTimerRef.current = setTimeout(() => {
-        commitTimerRef.current = null;
-        if (pendingRef.current !== null) commitDraft(pendingRef.current);
-      }, 40 - elapsed);
-    }
-  };
-  // Reverts to the pre-drag value instead of leaving whatever position the
-  // pointer last reached committed — the drag's own leading-edge commit (in
-  // onPointerDown) may already have applied an intermediate value, so this
-  // must go through commitDraft (not just a visual setDraft) to actually
-  // undo it.
-  const cancelDrag = (target: HTMLDivElement) => {
-    if (!draggingRef.current) return;
-    draggingRef.current = false;
-    const pointerId = activePointerIdRef.current;
-    if (pointerId !== null && target.hasPointerCapture(pointerId)) {
-      explicitReleaseRef.current = true;
-      target.releasePointerCapture(pointerId);
-    }
-    setDraft(dragStartValueRef.current);
-    commitDraft(dragStartValueRef.current);
+    pendingRef.current = next;
+    if (commitTimerRef.current) return;
+    commitTimerRef.current = setTimeout(() => {
+      commitTimerRef.current = null;
+      if (pendingRef.current !== null) commitNow(pendingRef.current);
+    }, COMMIT_INTERVAL_MS - elapsed);
   };
 
   return (
     <div className="flex min-h-[28px] items-center gap-2.5">
-      <span className="w-[86px] shrink-0 text-[11px] text-panel-text-3">{label}</span>
-      <div
-        data-flat-slider-track="true"
-        role="slider"
-        aria-label={label}
-        aria-valuenow={draft}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-disabled={disabled}
-        tabIndex={disabled ? -1 : 0}
-        style={{ touchAction: "none" }}
-        className={`relative h-5 flex-1 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
-        onPointerDown={(e) => {
-          if (disabled) return;
-          draggingRef.current = true;
-          dragStartValueRef.current = latestValueRef.current;
-          activePointerIdRef.current = e.pointerId;
-          e.currentTarget.setPointerCapture(e.pointerId);
-          const stepped = stepFromClientX(e.clientX, e.currentTarget.getBoundingClientRect());
-          setDraft(stepped);
-          scheduleCommit(stepped);
-        }}
-        onPointerMove={(e) => {
-          if (disabled || !e.currentTarget.hasPointerCapture(e.pointerId)) return;
-          const stepped = stepFromClientX(e.clientX, e.currentTarget.getBoundingClientRect());
-          setDraft(stepped);
-          scheduleCommit(stepped);
-        }}
-        onPointerUp={(e) => {
-          if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-            explicitReleaseRef.current = true;
-            e.currentTarget.releasePointerCapture(e.pointerId);
-          }
-          if (disabled) return;
-          if (!draggingRef.current) return;
-          draggingRef.current = false;
-          // Recompute from the event itself rather than reading the `draft`
-          // closure — if pointerdown+pointerup land in the same React batch
-          // (e.g. a very fast click), the onPointerUp handler can still be
-          // bound to the pre-drag render, making `draft` stale.
-          const stepped = stepFromClientX(e.clientX, e.currentTarget.getBoundingClientRect());
-          setDraft(stepped);
-          commitDraft(stepped);
-          if (stepped !== dragStartValueRef.current) track("slider", label);
-        }}
-        onPointerCancel={(e) => {
-          // A native pointercancel means the platform aborted the gesture (a
-          // scroll/touch takeover, pen leaving range, etc.) — that must cancel
-          // the drag the same way Escape/right-click do (revert to the
-          // pre-drag value), not just stop dragging and leave whatever
-          // intermediate position the pointer last reached committed.
-          cancelDrag(e.currentTarget);
-        }}
-        onLostPointerCapture={() => {
-          if (explicitReleaseRef.current) {
-            // Our own onPointerUp/onPointerCancel just released capture —
-            // their own logic already handles (or intentionally leaves)
-            // draggingRef/draft correctly. Resyncing here too would race
-            // onPointerUp's still-pending final commitDraft(stepped) below
-            // this call, since draggingRef flipping false would make its
-            // own "if (!draggingRef.current) return" bail out first.
-            explicitReleaseRef.current = false;
-            return;
-          }
-          // A genuine EXTERNAL capture loss (another element steals it, or
-          // the browser reclaims it for a scroll/touch gesture) — no other
-          // handler is about to run, so resync immediately and directly
-          // from latestValueRef rather than only clearing draggingRef and
-          // waiting for the [value] effect to notice (that effect depends
-          // on `value` actually changing again to re-run).
-          draggingRef.current = false;
-          setDraft(latestValueRef.current);
-          lastCommittedRef.current = latestValueRef.current;
-        }}
-        onKeyDown={(e) => {
-          if (disabled) return;
-          if (e.key === "Escape" && draggingRef.current) {
-            e.preventDefault();
-            cancelDrag(e.currentTarget);
-            return;
-          }
-          const next = sliderKeyTarget(e.key, draft, min, max, step);
-          if (next === null) return;
-          e.preventDefault();
-          setDraft(next);
-          commitDraft(next);
-          if (next !== draft) track("slider", label);
-        }}
-        onContextMenu={(e) => {
-          // Right-click during a drag must cancel it (revert to the pre-drag
-          // value), not leave the last dragged-to position committed while
-          // the native context menu opens on top of the slider.
-          if (!draggingRef.current) return;
-          e.preventDefault();
-          cancelDrag(e.currentTarget);
-        }}
-      >
-        <div className="absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 rounded-full bg-panel-hover">
-          {centerTick && (
-            <div
-              data-flat-slider-center-tick="true"
-              className="absolute left-1/2 -top-px h-1 w-px -translate-x-1/2 bg-panel-text-5"
-            />
-          )}
-          {tier === "explicitCustom" && (
-            <div
-              data-flat-slider-fill="true"
-              className="absolute inset-y-0 left-0 rounded-full bg-panel-text-5"
-              style={{ width: `${clampedPct}%` }}
-            />
-          )}
-        </div>
-        <div
-          data-flat-slider-knob="true"
-          className={`absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full ${
-            tier === "explicitCustom" ? "h-2 w-2 bg-white" : "h-[7px] w-[7px] bg-panel-text-4"
-          }`}
-          style={{ left: `${clampedPct}%` }}
+      <span className="w-[86px] shrink-0 text-step-11 text-text-3">{label}</span>
+      <div className="relative flex min-w-0 flex-1 items-center">
+        <Slider
+          label={label}
+          value={value}
+          min={min}
+          max={max}
+          step={step}
+          disabled={disabled}
+          onPreview={scheduleCommit}
+          onCommit={commitNow}
+          onTrack={() => track("slider", label)}
+          className="w-full"
         />
+        {centerTick && (
+          // After the slider so it paints over the track, and inert so it
+          // cannot swallow a press aimed at the track under it.
+          <div
+            data-flat-slider-center-tick="true"
+            className="pointer-events-none absolute left-1/2 top-1/2 h-1 w-px -translate-x-1/2 -translate-y-1/2 bg-text-5"
+          />
+        )}
       </div>
       <span
         data-flat-slider-value="true"
-        className={`w-11 shrink-0 text-right font-mono text-[10px] ${
-          tier === "explicitCustom" ? "text-panel-text-0" : "text-panel-text-3"
+        className={`w-11 shrink-0 text-right font-mono text-step-10 ${
+          tier === "explicitCustom" ? "text-text-0" : "text-text-3"
         }`}
       >
         {displayValue}
@@ -553,7 +375,7 @@ export function FlatSlider({
                 track("button", `Reset ${label}`);
                 onReset();
               }}
-              className="text-panel-text-3 hover:text-panel-text-1 disabled:cursor-not-allowed disabled:opacity-40"
+              className="text-text-3 hover:text-text-1 disabled:cursor-not-allowed disabled:opacity-40"
             >
               <RotateCcw size={11} />
             </button>
diff --git a/packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx b/packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx
index 22d1b9ad23..571c96a4e7 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatSelectRow.tsx
@@ -1,5 +1,6 @@
 import { RotateCcw } from "../../icons/SystemIcons";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+import { Select } from "../ui";
 import {
   VALUE_TIER_LABEL_CLASS,
   VALUE_TIER_VALUE_CLASS,
@@ -7,7 +8,7 @@ import {
 } from "./propertyPanelValueTier";
 
 /* ------------------------------------------------------------------ */
-/*  FlatSelectRow — label/value row backed by a native <select>        */
+/*  FlatSelectRow — label/value row backed by the shared Select        */
 /* ------------------------------------------------------------------ */
 
 export function FlatSelectRow({
@@ -23,7 +24,7 @@ export function FlatSelectRow({
   label: string;
   /** Accessible name when a caller renders the visible label OUTSIDE this
    *  row (label="" to avoid a duplicate) — e.g. Grade's "Preset" row, which
-   *  shows its own label span and would otherwise leave the <select>
+   *  shows its own label span and would otherwise leave the trigger
    *  unnamed. Falls back to `label` when omitted. */
   ariaLabel?: string;
   value: string;
@@ -40,52 +41,34 @@ export function FlatSelectRow({
   );
   // A valid authored value outside the preset list (e.g. a `mix-blend-mode`
   // or `object-position` this row doesn't offer as a preset) must not be
-  // silently misrepresented as the first option — the native <select> falls
-  // back to selectedIndex 0 when `value` matches no <option>, and reselecting
-  // that visible-but-wrong preset overwrites the real persisted value. Prepend
-  // the current value so it's always representable, matching legacy
-  // `SelectField`'s same guard.
+  // silently dropped: a select whose value matches no item has nothing to
+  // display, and choosing any preset would then overwrite the real persisted
+  // value with something the user never saw. Prepend the current value so it
+  // is always representable, matching legacy `SelectField`'s same guard.
   const renderedOptions =
     value && !normalizedOptions.some((option) => option.value === value)
       ? [{ value, label: value }, ...normalizedOptions]
       : normalizedOptions;
   return (
-    <div className="group flex min-h-[30px] items-center justify-between">
-      <span className={`text-[11px] ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
-      <span className="flex items-center gap-2">
-        <label
-          className={`flex items-center gap-1.5 border-b pb-px ${
-            tier === "explicitCustom"
-              ? "border-panel-accent/30 group-hover:border-panel-accent/70"
-              : "border-panel-border-input/50 group-hover:border-panel-border-input"
+    <div className="group flex min-h-[30px] items-center justify-between gap-3">
+      <span className={`text-step-11 ${VALUE_TIER_LABEL_CLASS[tier]}`}>{label}</span>
+      <span className="flex min-w-0 shrink-0 items-center gap-1.5">
+        {/* Same box as the row's CommitField sibling (R10): the field's own
+            boundary is what says "this is editable", and the tier tints it.
+            Width floors at the metric field's 96px so a row of short values
+            stays a column, and ceilings before a long option ("900 · Black",
+            "color-burn") can push the label off the row. */}
+        <Select
+          label={trackName}
+          value={value}
+          options={renderedOptions}
+          disabled={disabled}
+          className={`w-auto min-w-24 max-w-40 font-mono ${VALUE_TIER_VALUE_CLASS[tier]} ${
+            tier === "explicitCustom" ? "border-accent/30 hover:border-accent/70" : ""
           }`}
-        >
-          <select
-            value={value}
-            disabled={disabled}
-            aria-label={ariaLabel || label || undefined}
-            onChange={(e) => {
-              track("select", trackName);
-              onChange(e.target.value);
-            }}
-            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-hidden disabled:cursor-not-allowed ${VALUE_TIER_VALUE_CLASS[tier]}`}
-          >
-            {renderedOptions.map((option) => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-          <svg
-            width="10"
-            height="10"
-            viewBox="0 0 10 10"
-            fill="currentColor"
-            className="shrink-0 text-panel-text-5"
-          >
-            <path d="M2 3l3 4 3-4z" />
-          </svg>
-        </label>
+          onCommit={onChange}
+          onTrack={() => track("select", trackName)}
+        />
         {tier === "explicitCustom" && onReset && (
           <button
             type="button"
@@ -96,7 +79,7 @@ export function FlatSelectRow({
               track("button", `Reset ${trackName}`);
               onReset();
             }}
-            className="shrink-0 text-panel-text-3 opacity-0 transition-opacity hover:text-panel-text-1 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-40"
+            className="shrink-0 text-text-3 opacity-0 transition-opacity hover:text-text-1 group-hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-40"
           >
             <RotateCcw size={11} />
           </button>
diff --git a/packages/studio/src/components/editor/propertyPanelFlatStyleSections.test.tsx b/packages/studio/src/components/editor/propertyPanelFlatStyleSections.test.tsx
index c9f1df4083..2de87f7331 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatStyleSections.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatStyleSections.test.tsx
@@ -6,6 +6,12 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { FlatStyleSection } from "./propertyPanelFlatStyleSections";
 import type { DomEditSelection } from "./domEditing";
 import { buildDefaultGradientModel, serializeGradient } from "./gradientValue";
+import {
+  chooseFlatSelectOption,
+  chooseOpenOption,
+  flatSelectRow,
+  openFlatSelect,
+} from "./flatSelectHarness";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -216,9 +222,9 @@ describe("FlatStyleSection — Stroke and Radius", () => {
     act(() => root.unmount());
   });
 
-  it("commits a stroke style change through the discoverable Stroke style select (fix 2)", () => {
+  it("commits a stroke style change through the discoverable Stroke style select (fix 2)", async () => {
     const { host, root, onSetStyle } = renderSection(STROKE_STYLES);
-    changeFlatSelectRow(host, "Stroke style", "dashed");
+    await chooseFlatSelectOption(host, "Stroke style", "dashed");
     expect(onSetStyle).toHaveBeenCalledWith("border-style", "dashed");
     act(() => root.unmount());
   });
@@ -298,44 +304,25 @@ describe("FlatStyleSection — Stroke and Radius", () => {
   });
 });
 
-function getFlatSelectRow(host: HTMLElement, label: string) {
-  const rows = Array.from(host.querySelectorAll<HTMLElement>(".group"));
-  const row = rows.find((el) => el.querySelector("span")?.textContent === label);
-  if (!row) throw new Error(`expected a select row for "${label}"`);
-  const select = row.querySelector<HTMLSelectElement>("select");
-  if (!select) throw new Error(`expected a select for "${label}"`);
-  const resetButton = row.querySelector<HTMLButtonElement>('[data-flat-select-reset="true"]');
-  return { row, select, resetButton };
-}
-
-function changeFlatSelectRow(host: HTMLElement, label: string, nextValue: string) {
-  const { select } = getFlatSelectRow(host, label);
-  act(() => {
-    select.value = nextValue;
-    select.dispatchEvent(new Event("change", { bubbles: true }));
-  });
-}
-
 describe("FlatStyleSection — Shadow and Blend", () => {
   it("renders Shadow with the inferred preset and a reset when set, Blend with a plain select", () => {
     const { host, root } = renderSection({ "box-shadow": "0 8px 24px rgba(0,0,0,.35)" });
     expect(host.textContent).toContain("Shadow");
     expect(host.textContent).toContain("Blend");
-    const selects = host.querySelectorAll("select");
-    expect(selects.length).toBeGreaterThanOrEqual(2);
+    expect(host.querySelectorAll('[role="combobox"]').length).toBeGreaterThanOrEqual(2);
     act(() => root.unmount());
   });
 
-  it("commits a shadow preset change through onSetStyle", () => {
+  it("commits a shadow preset change through onSetStyle", async () => {
     const { host, root, onSetStyle } = renderSection({});
-    changeFlatSelectRow(host, "Shadow", "soft");
+    await chooseFlatSelectOption(host, "Shadow", "soft");
     expect(onSetStyle).toHaveBeenCalledWith("box-shadow", expect.any(String));
     act(() => root.unmount());
   });
 
-  it("commits a blend mode change through onSetStyle", () => {
+  it("commits a blend mode change through onSetStyle", async () => {
     const { host, root, onSetStyle } = renderSection({});
-    changeFlatSelectRow(host, "Blend", "multiply");
+    await chooseFlatSelectOption(host, "Blend", "multiply");
     expect(onSetStyle).toHaveBeenCalledWith("mix-blend-mode", "multiply");
     act(() => root.unmount());
   });
@@ -344,7 +331,7 @@ describe("FlatStyleSection — Shadow and Blend", () => {
     const { host, root, onSetStyle } = renderSection({
       "box-shadow": "0 12px 36px rgba(0, 0, 0, 0.28)",
     });
-    const { resetButton } = getFlatSelectRow(host, "Shadow");
+    const { resetButton } = flatSelectRow(host, "Shadow");
     if (!resetButton) throw new Error("expected the shadow reset button");
     act(() => resetButton.dispatchEvent(new MouseEvent("click", { bubbles: true })));
     expect(onSetStyle).toHaveBeenCalledWith("box-shadow", "none");
@@ -353,7 +340,7 @@ describe("FlatStyleSection — Shadow and Blend", () => {
 
   it("resets the blend mode back to normal via the reset button", () => {
     const { host, root, onSetStyle } = renderSection({ "mix-blend-mode": "multiply" });
-    const { resetButton } = getFlatSelectRow(host, "Blend");
+    const { resetButton } = flatSelectRow(host, "Blend");
     if (!resetButton) throw new Error("expected the blend reset button");
     act(() => resetButton.dispatchEvent(new MouseEvent("click", { bubbles: true })));
     expect(onSetStyle).toHaveBeenCalledWith("mix-blend-mode", "normal");
@@ -382,7 +369,7 @@ describe("FlatStyleSection — blur sliders", () => {
     expect(host.textContent).toContain("Layer blur");
     expect(host.textContent).toContain("Backdrop");
     expect(host.textContent).toContain("4px");
-    const track = host.querySelectorAll('[data-flat-slider-track="true"]')[0];
+    const track = host.querySelectorAll("[data-slider-control]")[0];
     Object.defineProperty(track, "getBoundingClientRect", {
       value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
     });
@@ -399,7 +386,7 @@ describe("FlatStyleSection — blur sliders", () => {
     const { host, root, onSetStyle } = renderSection({ "backdrop-filter": "blur(6px)" });
     expect(host.textContent).toContain("Backdrop");
     expect(host.textContent).toContain("6px");
-    const tracks = host.querySelectorAll('[data-flat-slider-track="true"]');
+    const tracks = host.querySelectorAll("[data-slider-control]");
     // Track order is Layer blur, Backdrop, Opacity — Backdrop is the second track.
     const backdropTrack = tracks[1];
     Object.defineProperty(backdropTrack, "getBoundingClientRect", {
@@ -414,15 +401,20 @@ describe("FlatStyleSection — blur sliders", () => {
     act(() => root.unmount());
   });
 
-  it("does not render a fill/knob highlight for a zero-value blur (default tier)", () => {
+  it("puts both blur sliders at zero when no blur is set", () => {
+    // This replaces an assertion that the two unset blur tracks drew no fill.
+    // The shared Slider has one look, so the track no longer says whether a
+    // property is explicitly set; the row's value text and its reset button
+    // are what carry the tier now. Zero is still the thing worth pinning,
+    // and the thumb is where it is readable.
     const { host, root } = renderSection({});
-    const tracks = host.querySelectorAll('[data-flat-slider-track="true"]');
-    // Only the first two tracks are the blur sliders (Layer blur, Backdrop); Opacity
-    // (the third track) always renders a fill by design, so it's excluded here.
-    const blurTracks = Array.from(tracks).slice(0, 2);
-    for (const track of blurTracks) {
-      expect(track.querySelectorAll('[data-flat-slider-fill="true"]')).toHaveLength(0);
-    }
+    const [layerBlur, backdrop] = [
+      ...host.querySelectorAll<HTMLInputElement>('input[type="range"]'),
+    ];
+    expect(layerBlur?.getAttribute("aria-label")).toBe("Layer blur");
+    expect(layerBlur?.value).toBe("0");
+    expect(backdrop?.getAttribute("aria-label")).toBe("Backdrop");
+    expect(backdrop?.value).toBe("0");
     act(() => root.unmount());
   });
 });
@@ -470,7 +462,7 @@ describe("FlatStyleSection — Overflow and Mask", () => {
     act(() => root.unmount());
   });
 
-  it("commits an overflow change through onSetStyle", () => {
+  it("commits an overflow change through onSetStyle", async () => {
     const onSetStyle = vi.fn();
     const host = document.createElement("div");
     document.body.append(host);
@@ -487,37 +479,34 @@ describe("FlatStyleSection — Overflow and Mask", () => {
         />,
       );
     });
-    const overflowSelect = Array.from(host.querySelectorAll("select")).find((s) =>
-      Array.from(s.options).some((o) => o.value === "scroll"),
-    );
-    if (!overflowSelect) throw new Error("expected the overflow select");
-    act(() => {
-      overflowSelect.value = "hidden";
-      overflowSelect.dispatchEvent(new Event("change", { bubbles: true }));
-    });
+    // The row is identified by its own presets, not by position: "scroll" is
+    // an overflow value and nothing else in this section offers it.
+    const options = await openFlatSelect(host, "Overflow");
+    expect(options.map((el) => el.textContent)).toContain("scroll");
+    await chooseOpenOption(options, "hidden");
     expect(onSetStyle).toHaveBeenCalledWith("overflow", "hidden");
     act(() => root.unmount());
   });
 
   it("resets overflow back to visible via the reset button", () => {
     const { host, root, onSetStyle } = renderSection({ overflow: "scroll" });
-    const { resetButton } = getFlatSelectRow(host, "Overflow");
+    const { resetButton } = flatSelectRow(host, "Overflow");
     if (!resetButton) throw new Error("expected the overflow reset button");
     act(() => resetButton.dispatchEvent(new MouseEvent("click", { bubbles: true })));
     expect(onSetStyle).toHaveBeenCalledWith("overflow", "visible");
     act(() => root.unmount());
   });
 
-  it("commits a mask preset change through onSetStyle, building an inset() clip-path", () => {
+  it("commits a mask preset change through onSetStyle, building an inset() clip-path", async () => {
     const { host, root, onSetStyle } = renderSection({});
-    changeFlatSelectRow(host, "Mask", "inset");
+    await chooseFlatSelectOption(host, "Mask", "inset");
     expect(onSetStyle).toHaveBeenCalledWith("clip-path", "inset(0 round 0px)");
     act(() => root.unmount());
   });
 
   it("resets the mask back to none via the reset button", () => {
     const { host, root, onSetStyle } = renderSection({ "clip-path": "circle(50% at 50% 50%)" });
-    const { resetButton } = getFlatSelectRow(host, "Mask");
+    const { resetButton } = flatSelectRow(host, "Mask");
     if (!resetButton) throw new Error("expected the mask reset button");
     act(() => resetButton.dispatchEvent(new MouseEvent("click", { bubbles: true })));
     expect(onSetStyle).toHaveBeenCalledWith("clip-path", "none");
@@ -561,7 +550,7 @@ describe("FlatStyleSection — Overflow and Mask", () => {
   it("renders a uniform Mask inset slider and commits clip-path via buildInsetClipPathValue (fix 4)", () => {
     const { host, root, onSetStyle } = renderSection({ "clip-path": "inset(8px round 4px)" });
     expect(host.textContent).toContain("Mask inset");
-    const tracks = host.querySelectorAll('[data-flat-slider-track="true"]');
+    const tracks = host.querySelectorAll("[data-slider-control]");
     // Track order: Layer blur, Backdrop, Mask inset, Opacity.
     const maskInsetTrack = tracks[2];
     Object.defineProperty(maskInsetTrack, "getBoundingClientRect", {
@@ -599,7 +588,7 @@ describe("FlatStyleSection — Opacity", () => {
     });
     expect(host.textContent).toContain("Opacity");
     expect(host.textContent).toContain("100%");
-    const tracks = host.querySelectorAll('[data-flat-slider-track="true"]');
+    const tracks = host.querySelectorAll("[data-slider-control]");
     const opacityTrack = tracks[tracks.length - 1];
     Object.defineProperty(opacityTrack, "getBoundingClientRect", {
       value: () => ({ left: 0, width: 100, top: 0, height: 2, right: 100, bottom: 2 }),
diff --git a/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx b/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
index 3731734485..ec96a315e3 100644
--- a/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
+++ b/packages/studio/src/components/editor/propertyPanelFlatTextSection.tsx
@@ -7,12 +7,8 @@ import { normalizeTextMetricValue } from "./propertyPanelHelpers";
 import { ColorField } from "./propertyPanelColor";
 import { FontFamilyField } from "./propertyPanelFont";
 import { PromotableControl } from "./PromotableControl";
-import { FlatRow, FlatSegmentedRow } from "./propertyPanelFlatPrimitives";
-import {
-  resolveValueTier,
-  VALUE_TIER_LABEL_CLASS,
-  VALUE_TIER_VALUE_CLASS,
-} from "./propertyPanelValueTier";
+import { FlatRow, FlatSegmentedRow, FlatSelectRow } from "./propertyPanelFlatPrimitives";
+import { resolveValueTier } from "./propertyPanelValueTier";
 import {
   detectAvailableWeights,
   formatTextFieldPreview,
@@ -59,7 +55,6 @@ function FlatTextFieldEditor({
   onPreviewTextFieldStyle?: (fieldKey: string, property: string, value: string) => void;
   autoFocus?: boolean;
 }) {
-  const track = useTrackDesignInput();
   const weight = getTextStyleValue(field, styles, "font-weight", "400");
   const weightOptions = detectAvailableWeights(
     field.computedStyles["font-family"] || styles["font-family"] || "",
@@ -105,45 +100,21 @@ function FlatTextFieldEditor({
         onPreview={(next) => onPreviewTextFieldStyle?.(field.key, "font-size", next)}
         onCommit={(next) => onSetTextFieldStyle(field.key, "font-size", next)}
       />
-      <div className="flex min-h-[30px] items-center justify-between">
-        <span
-          className={
-            VALUE_TIER_LABEL_CLASS[resolveValueTier(field.inlineStyles["font-weight"], "400")]
-          }
-          style={{ fontSize: 11 }}
-        >
-          Weight
-        </span>
-        <label className="flex items-center gap-1.5 border-b border-panel-border-input/50 pb-px hover:border-panel-border-input">
-          <select
-            value={weight}
-            onChange={(e) => {
-              track("select", "Weight");
-              onSetTextFieldStyle(field.key, "font-weight", e.target.value);
-            }}
-            className={`appearance-none bg-transparent text-right font-mono text-[11px] outline-hidden ${
-              VALUE_TIER_VALUE_CLASS[resolveValueTier(field.inlineStyles["font-weight"], "400")]
-            }`}
-          >
-            {(weightOptions.includes(weight) ? weightOptions : [weight, ...weightOptions]).map(
-              (option) => (
-                <option key={option} value={option}>
-                  {WEIGHT_LABELS[option] ?? option}
-                </option>
-              ),
-            )}
-          </select>
-          <svg
-            width="10"
-            height="10"
-            viewBox="0 0 10 10"
-            fill="currentColor"
-            className="shrink-0 text-panel-text-5"
-          >
-            <path d="M2 3l3 4 3-4z" />
-          </svg>
-        </label>
-      </div>
+      {/* Was a copy of FlatSelectRow rendered inline: the same native select,
+          the same underline, the same caret. The row it copied is now boxed,
+          so the copy was the last bare row in the panel. FlatSelectRow already
+          keeps an authored weight outside the list representable, which is
+          what the local `weightOptions.includes` branch was for. */}
+      <FlatSelectRow
+        label="Weight"
+        value={weight}
+        options={weightOptions.map((option) => ({
+          value: option,
+          label: WEIGHT_LABELS[option] ?? option,
+        }))}
+        tier={resolveValueTier(field.inlineStyles["font-weight"], "400")}
+        onChange={(next) => onSetTextFieldStyle(field.key, "font-weight", next)}
+      />
       <FlatRow
         label="Letter spacing"
         value={getTextStyleValue(field, styles, "letter-spacing", "0px")}
diff --git a/packages/studio/src/components/editor/propertyPanelInputCoverage.test.tsx b/packages/studio/src/components/editor/propertyPanelInputCoverage.test.tsx
index acd981e075..41edfaead0 100644
--- a/packages/studio/src/components/editor/propertyPanelInputCoverage.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelInputCoverage.test.tsx
@@ -26,6 +26,7 @@ import {
   SliderControl,
 } from "./propertyPanelPrimitives";
 import { TextAreaField } from "./propertyPanelSections";
+import { chooseFlatSelectOption } from "./flatSelectHarness";
 
 const trackStudioEvent = vi.hoisted(() => vi.fn());
 
@@ -372,7 +373,7 @@ describe("flat property-panel primitive telemetry", () => {
         />,
       ),
     );
-    const slider = host.querySelector<HTMLElement>('[data-flat-slider-track="true"]');
+    const slider = host.querySelector<HTMLElement>("[data-slider-control]");
     if (!slider) throw new Error("expected flat slider");
     Object.defineProperty(slider, "getBoundingClientRect", {
       value: () => ({ left: 0, width: 100, top: 0, height: 20, right: 100, bottom: 20 }),
@@ -382,8 +383,14 @@ describe("flat property-panel primitive telemetry", () => {
       slider.dispatchEvent(
         new PointerEvent("pointerdown", { bubbles: true, clientX: 20, pointerId: 1 }),
       );
+    });
+    // `buttons: 1` is not decoration: Base UI reads it to tell a live drag from
+    // a move whose pointerup another element swallowed, and treats `buttons: 0`
+    // as the end of the gesture. A move without it would settle the drag here
+    // and this assertion would pass for the wrong reason.
+    act(() => {
       slider.dispatchEvent(
-        new PointerEvent("pointermove", { bubbles: true, clientX: 80, pointerId: 1 }),
+        new PointerEvent("pointermove", { bubbles: true, clientX: 80, pointerId: 1, buttons: 1 }),
       );
     });
     expect(trackStudioEvent).not.toHaveBeenCalled();
@@ -424,7 +431,7 @@ describe("flat property-panel primitive telemetry", () => {
     expectFlatTracked("toggle", "loop");
   });
 
-  it("tracks FlatSelectRow changes with its accessible label", () => {
+  it("tracks FlatSelectRow changes with its accessible label", async () => {
     const host = render(
       flatSection(
         <FlatSelectRow
@@ -437,12 +444,9 @@ describe("flat property-panel primitive telemetry", () => {
         />,
       ),
     );
-    const select = host.querySelector("select");
-    if (!select) throw new Error("expected flat select");
-    act(() => {
-      select.value = "warm";
-      select.dispatchEvent(new Event("change", { bubbles: true }));
-    });
+    // The row renders no visible label of its own here, so it is found by the
+    // accessible name the caller supplied — the same name the event carries.
+    await chooseFlatSelectOption(host, "", "warm");
     expectFlatTracked("select", "preset");
   });
 });
diff --git a/packages/studio/src/components/editor/propertyPanelSections.test.tsx b/packages/studio/src/components/editor/propertyPanelSections.test.tsx
index 075915ed1d..3ddeb545d1 100644
--- a/packages/studio/src/components/editor/propertyPanelSections.test.tsx
+++ b/packages/studio/src/components/editor/propertyPanelSections.test.tsx
@@ -5,6 +5,7 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { FlatTextSection } from "./propertyPanelFlatTextSection";
 import type { DomEditSelection } from "./domEditingTypes";
+import { chooseFlatSelectOption } from "./flatSelectHarness";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -104,7 +105,7 @@ describe("FlatTextSection", () => {
     act(() => root.unmount());
   });
 
-  it("commits a font-weight change through onSetTextFieldStyle", () => {
+  it("commits a font-weight change through onSetTextFieldStyle", async () => {
     const onSetTextFieldStyle = vi.fn();
     const host = document.createElement("div");
     document.body.append(host);
@@ -123,12 +124,9 @@ describe("FlatTextSection", () => {
         />,
       );
     });
-    const select = host.querySelector<HTMLSelectElement>("select");
-    if (!select) throw new Error("expected a weight <select>");
-    act(() => {
-      select.value = "700";
-      select.dispatchEvent(new Event("change", { bubbles: true }));
-    });
+    // The literal weight, not its display label: the row's options carry a
+    // "700 · Bold" label, and the style has to receive "700".
+    await chooseFlatSelectOption(host, "Weight", "700 · Bold");
     expect(onSetTextFieldStyle).toHaveBeenCalledWith("field-0", "font-weight", "700");
     act(() => root.unmount());
   });
diff --git a/packages/studio/src/components/ui/Slider.tsx b/packages/studio/src/components/ui/Slider.tsx
index a6833cac8f..67e8f5d741 100644
--- a/packages/studio/src/components/ui/Slider.tsx
+++ b/packages/studio/src/components/ui/Slider.tsx
@@ -139,6 +139,11 @@ export function Slider({
           event.preventDefault();
           abort();
         }}
+        // The platform aborted the gesture (a scroll or touch takeover, a pen
+        // leaving range). Base UI has no handler for it, so without this the
+        // drag simply stops and whatever position the pointer last reached
+        // stays applied, which is not what an aborted gesture means.
+        onPointerCancel={abort}
         onKeyDown={(event) => {
           if (event.key !== "Escape" || !draggingRef.current) return;
           event.preventDefault();