fix(ui): release the scroll lock on closed drawers, add stepper wizard controls, slide tabs

The scroll lock was mine, and it broke every page carrying a Drawer or Modal.
Making dialog visibility testable, I replaced a size check with a data-show
check -- but a Drawer animates open, so its panel cannot be hidden with
data-show at all: display:none is not transitionable. Every closed Drawer
therefore looked open, took the body scroll lock and never released it, and
the page could not be scrolled. Both components publish data-open, which is
the signal that actually means open, and that is what is read now.

Stepper gains the wizard surface: showPanel renders each step body and shows
only the active one, the same contract Tabs uses, and controls adds Back,
Skip and Next, which becomes Finish on the last step. nextDisabled lets a form
hold the step; the component never validates anything itself, since the page
owns the form.

Stepper also gets a single root. The panels and controls were siblings of the
list, so the component had several roots and anything scoped to
data-ui-component missed most of it.

Tabs panels now slide in the direction of travel rather than fading upward.

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

packages/ui/test/ui.test.ts

@@ -2522,7 +2522,10 @@ test("stepper marks complete, current and upcoming steps", async () => {
   expect(items[1]!.getAttribute("data-status")).toBe("current");
   expect(items[2]!.getAttribute("data-status")).toBe("upcoming");
   expect(items[1]!.getAttribute("aria-current")).toBe("step");
-  expect(dom.querySelector(".wire-stepper")!.tagName.toLowerCase()).toBe("ol");
+  // One root wraps the list, the panels and the controls; the steps
+  // themselves are still an ordered list, which is what carries the semantics.
+  expect(dom.querySelector(".wire-stepper")!.tagName.toLowerCase()).toBe("div");
+  expect(dom.querySelector(".wire-stepper__list")!.tagName.toLowerCase()).toBe("ol");
 });
 
 test("stepper renders vertically and clamps an out-of-range active index", async () => {
@@ -2887,3 +2890,57 @@ test("mega menu bridges the gap between its trigger and panel", async () => {
   expect(source).toContain(".wire-mega__panel::before");
   expect(source).toMatch(/\.wire-mega__panel::before \{[^}]*bottom: 100%/s);
 });
+
+test("stepper shows only the active step content and offers back, next and skip", async () => {
+  const source = readFileSync(uiComponentPath("Stepper"), "utf8");
+  const html = await renderComponent(source, {
+    steps: [
+      { label: "Account", content: "ACCOUNT BODY" },
+      { label: "Billing", content: "BILLING BODY" },
+      { label: "Confirm", content: "CONFIRM BODY" },
+    ],
+    active: 1,
+    showPanel: true,
+    controls: true,
+    allowSkip: true,
+  });
+  const dom = mountHtml(html);
+
+  const panels = [...dom.querySelectorAll(".wire-stepper__panel")];
+  expect(panels).toHaveLength(3);
+  /*
+   * Asserted through aria-hidden rather than data-show. data-show is emitted
+   * verbatim for the client runtime to evaluate, so its server-rendered value
+   * is not a reliable statement about which step is showing; aria-hidden is
+   * interpolated at render and says exactly that.
+   */
+  expect(panels.map((p) => p.getAttribute("aria-hidden"))).toEqual(["true", "false", "true"]);
+
+  expect(dom.querySelector(".wire-stepper__back")).not.toBeNull();
+  expect(dom.querySelector(".wire-stepper__next")).not.toBeNull();
+  expect(dom.querySelector(".wire-stepper__skip")).not.toBeNull();
+});
+
+test("stepper back is disabled on the first step and next becomes finish on the last", async () => {
+  const source = readFileSync(uiComponentPath("Stepper"), "utf8");
+  const steps = [{ label: "One" }, { label: "Two" }];
+
+  const first = mountHtml(await renderComponent(source, { steps, active: 0, controls: true }));
+  expect(first.querySelector(".wire-stepper__back")!.getAttribute("disabled")).not.toBeNull();
+  expect(first.querySelector(".wire-stepper__next")!.textContent).toContain("Next");
+
+  const last = mountHtml(await renderComponent(source, { steps, active: 1, controls: true }));
+  expect(last.querySelector(".wire-stepper__next")!.textContent).toContain("Finish");
+});
+
+test("stepper next can be gated so a form can hold it until the step validates", async () => {
+  const source = readFileSync(uiComponentPath("Stepper"), "utf8");
+  const html = await renderComponent(source, {
+    steps: [{ label: "One" }, { label: "Two" }],
+    active: 0,
+    controls: true,
+    nextDisabled: true,
+  });
+  const dom = mountHtml(html);
+  expect(dom.querySelector(".wire-stepper__next")!.getAttribute("disabled")).not.toBeNull();
+});