feat(ui): build LayoutSplitter and CustomScrollbar for real

Both advertised behaviour they did not have. LayoutSplitter declared
resizeStart, resize and resizeEnd with no pointer handling whatsoever, so a
caller wired up @resize and received nothing, for ever, with no error, and its
props were columns, gap and maxWidth copied from a grid scaffold.
CustomScrollbar was the same shape with a scroll output.

The splitter now resizes. Dragging lives in the reactive runtime behind
data-wrn-splitter, because a pointermove fires far too often to route through
a client function and a state write made in that callback is dropped; the
resolved size is held on the container as a --wrn-split custom property and
the component grids from it. The handle is a real separator: arrow keys step
it, Home and End go to the bounds rather than to nothing, and it carries
aria-valuenow, aria-valuemin and aria-valuemax. minSize fixes both bounds so
neither pane can be dragged away and left unrecoverable.

CustomScrollbar is CSS rather than script -- scrollbar-width and
scrollbar-color with webkit rules for the engines that still need them -- and
its fake scroll output is removed rather than left unimplemented, since a
caller can listen for a plain scroll event.

The test harness needed a fix too: mount did not bind the window CustomEvent,
so the runtime built events from the host global and happy-dom listeners never
matched them, which made anything dispatched look silently lost.

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

packages/ui/test/ui.test.ts

@@ -2944,3 +2944,78 @@ test("stepper next can be gated so a form can hold it until the step validates",
   const dom = mountHtml(html);
   expect(dom.querySelector(".wire-stepper__next")!.getAttribute("disabled")).not.toBeNull();
 });
+
+test("layout splitter renders two panes and an operable separator", async () => {
+  const source = readFileSync(uiComponentPath("LayoutSplitter"), "utf8");
+  /*
+   * It used to declare resizeStart, resize and resizeEnd with no pointer
+   * handling at all, so a caller wired up @resize and received nothing for
+   * ever. The behaviour now lives in the runtime behind these markers.
+   */
+  expect(source).toContain("data-wrn-splitter");
+  expect(source).toContain("data-wrn-splitter-handle");
+
+  const html = await renderComponent(source, {
+    orientation: "horizontal",
+    size: 40,
+    minSize: 20,
+    label: "Resize panels",
+  });
+  const dom = mountHtml(html);
+
+  const root = dom.querySelector(".wire-splitter") as HTMLElement;
+  expect(root.getAttribute("data-wrn-splitter")).toBe("horizontal");
+  expect(root.getAttribute("style")).toContain("--wrn-split");
+
+  const handle = dom.querySelector("[data-wrn-splitter-handle]") as HTMLElement;
+  expect(handle.getAttribute("role")).toBe("separator");
+  expect(handle.getAttribute("tabindex")).toBe("0");
+  expect(handle.getAttribute("aria-valuenow")).toBe("40");
+  expect(handle.getAttribute("aria-valuemin")).toBe("20");
+  expect(handle.getAttribute("aria-valuemax")).toBe("80");
+  expect(handle.getAttribute("aria-orientation")).toBe("vertical");
+
+  expect(dom.querySelectorAll(".wire-splitter__pane")).toHaveLength(2);
+});
+
+test("layout splitter clamps an out-of-range size and flips orientation", async () => {
+  const source = readFileSync(uiComponentPath("LayoutSplitter"), "utf8");
+  const dom = mountHtml(
+    await renderComponent(source, { orientation: "vertical", size: 95, minSize: 25 }),
+  );
+  const handle = dom.querySelector("[data-wrn-splitter-handle]") as HTMLElement;
+  // 95 is past the 75 bound implied by minSize, so it clamps rather than
+  // leaving one pane unrecoverable.
+  expect(handle.getAttribute("aria-valuenow")).toBe("75");
+  // A vertical splitter stacks, so its separator is a horizontal bar.
+  expect(handle.getAttribute("aria-orientation")).toBe("horizontal");
+});
+
+test("custom scrollbar styles the scrollbar and drops its fake output", async () => {
+  const source = readFileSync(uiComponentPath("CustomScrollbar"), "utf8");
+  /*
+   * It declared a scroll output it never emitted, and its props were columns,
+   * gap and maxWidth copied from a grid scaffold. A caller can listen for a
+   * plain scroll event on the element, so the output is gone rather than left
+   * unimplemented.
+   */
+  expect(source).not.toContain("outputs {");
+  // Matched as a declaration: the word still appears in the comment recording
+  // why those props were wrong.
+  expect(source).not.toMatch(/^\s*columns:/m);
+  expect(source).not.toMatch(/^\s*gap:/m);
+  expect(source).toContain("scrollbar-color");
+  expect(source).toContain("::-webkit-scrollbar");
+
+  const html = await renderComponent(source, {
+    axis: "vertical",
+    thickness: 10,
+    maxHeight: "18rem",
+  });
+  const dom = mountHtml(html);
+  const root = dom.querySelector(".wire-scrollbar") as HTMLElement;
+  expect(root.getAttribute("data-axis")).toBe("vertical");
+  const style = root.getAttribute("style") || "";
+  expect(style).toContain("--scrollbar-thickness");
+  expect(style).toContain("18rem");
+});