refactor(web-components/pinwheel): update value property to be readonly

.changeset/sad-sloths-mate.md

@@ -0,0 +1,6 @@
+---
+"@tapsioss/web-components": minor
+---
+
+Update `value` property to be readonly
+

packages/web-components/src/pinwheel/item/Controller.ts

@@ -29,21 +29,6 @@ class ItemSelectionController extends SelectionController<PinwheelItem> {
     this._host.dispatchEvent(new Event("change", { bubbles: true }));
   }
 
-  public override handleSelectionChange(): void {
-    super.handleSelectionChange();
-
-    const parent = this._parentTarget as Pinwheel | null;
-
-    if (!parent) return;
-    if (parent.disabled) return;
-
-    const selectedItem = this._elements.find(item => item.selected);
-
-    if (!selectedItem) return;
-
-    parent.value = selectedItem.value;
-  }
-
   public override async handleClick(event: MouseEvent): Promise<boolean> {
     const parent = this._parentTarget as Pinwheel | null;
 
@@ -53,6 +38,7 @@ class ItemSelectionController extends SelectionController<PinwheelItem> {
     if (!(await super.handleClick(event))) return false;
 
     this._emitValueChange();
+    parent.setViewOnItem(this._host);
 
     return true;
   }

packages/web-components/src/pinwheel/item/item.ts

@@ -4,7 +4,7 @@ import {
   type CSSResultGroup,
   type TemplateResult,
 } from "lit";
-import { property } from "lit/decorators.js";
+import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { logger } from "../../utils/index.ts";
 import ItemSelectionController from "./Controller.ts";
@@ -30,7 +30,7 @@ export class PinwheelItem extends LitElement {
    * @attr {string} selected
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public get selected(): boolean {
     return this._selected;
   }
@@ -56,8 +56,27 @@ export class PinwheelItem extends LitElement {
   @property()
   public value = "";
 
+  @query("#root", true)
+  private _root!: HTMLElement | null;
+
   private readonly _selectionController = new ItemSelectionController(this);
 
+  public override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.addEventListener("click", this._handleClick);
+  }
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+
+    this.removeEventListener("click", this._handleClick);
+  }
+
+  private _handleClick() {
+    this._root?.click();
+  }
+
   protected override render(): TemplateResult {
     if (!this.value) {
       logger(

packages/web-components/src/pinwheel/pinwheel.test.ts

@@ -5,6 +5,7 @@ import {
   disposeMocks,
   expect,
   render,
+  setupMocks,
   test,
 } from "@internals/test-helpers";
 import { ErrorMessages, scope } from "./constants.ts";
@@ -39,7 +40,7 @@ describe("🧩 pinwheel", () => {
     await expect(component).toBeFocused();
   });
 
-  test("🧪 should change active item and trigger events (`activate` and `activechange`) using click", async ({
+  test("🧪 should update selected item and trigger events using keyboard", async ({
     page,
   }) => {
     await render(
@@ -53,9 +54,29 @@ describe("🧩 pinwheel", () => {
     `,
     );
 
+    const mocks = await setupMocks(page);
+    const handleChange = mocks.createFakeFn();
+
     const container = page.getByTestId("test-pinwheel");
 
+    await mocks.events.attachMockedEvent(container, "change", handleChange.ref);
+
+    await page.waitForFunction(
+      expected => {
+        const container = document.querySelector("tapsi-pinwheel");
+
+        if (!container) return false;
+
+        return container.value === expected;
+      },
+      "value-1",
+      {
+        timeout: 5000,
+      },
+    );
+
     await expect(container).toHaveJSProperty("value", "value-1");
+    await handleChange.matchResult({ callCount: 0 });
 
     // Focus on pinwheel for keyboard interaction
     await page.keyboard.press("Tab");
@@ -64,22 +85,27 @@ describe("🧩 pinwheel", () => {
     // Test arrow keys
     await page.keyboard.press("ArrowDown");
     await expect(container).toHaveJSProperty("value", "value-2");
+    await handleChange.matchResult({ callCount: 1 });
 
     await page.keyboard.press("ArrowDown");
     await expect(container).toHaveJSProperty("value", "value-3");
+    await handleChange.matchResult({ callCount: 2 });
 
     await page.keyboard.press("ArrowUp");
     await expect(container).toHaveJSProperty("value", "value-2");
+    await handleChange.matchResult({ callCount: 3 });
 
     // Test Home and End keys
     await page.keyboard.press("Home");
     await expect(container).toHaveJSProperty("value", "value-1");
+    await handleChange.matchResult({ callCount: 4 });
 
     await page.keyboard.press("End");
     await expect(container).toHaveJSProperty("value", "value-3");
+    await handleChange.matchResult({ callCount: 5 });
   });
 
-  test("🧪 should change active item and trigger events (`activate` and `activechange`) using keyboard navigation", async ({
+  test("🧪 should update selected item and trigger events using click", async ({
     page,
   }) => {
     await render(
@@ -94,27 +120,35 @@ describe("🧩 pinwheel", () => {
     );
 
     const container = page.getByTestId("test-pinwheel");
-    const item1 = page.getByTestId("test-pinwheel-item-1");
-    const item2 = page.getByTestId("test-pinwheel-item-2");
-    const item3 = page.getByTestId("test-pinwheel-item-3");
-
-    await item1.click();
-    await expect(container).toHaveJSProperty("value", "value-1");
+    const mocks = await setupMocks(page);
+    const handleChange = mocks.createFakeFn();
 
-    await item2.click();
-    await expect(container).toHaveJSProperty("value", "value-2");
+    const click = (itemId: string) => {
+      return page.getByTestId(itemId).click();
+    };
 
-    await item3.click();
-    await expect(container).toHaveJSProperty("value", "value-3");
+    await mocks.events.attachMockedEvent(container, "change", handleChange.ref);
+    await handleChange.matchResult({ callCount: 0 });
 
-    await item1.click();
+    await click("test-pinwheel-item-1");
     await expect(container).toHaveJSProperty("value", "value-1");
+    await handleChange.matchResult({ callCount: 0 });
 
-    await item3.click();
+    await click("test-pinwheel-item-2");
+    await expect(container).toHaveJSProperty("value", "value-2");
+    await handleChange.matchResult({ callCount: 1 });
+
+    await click("test-pinwheel-item-3");
     await expect(container).toHaveJSProperty("value", "value-3");
+    await handleChange.matchResult({ callCount: 2 });
 
-    await item2.click();
+    await click("test-pinwheel-item-2");
     await expect(container).toHaveJSProperty("value", "value-2");
+    await handleChange.matchResult({ callCount: 3 });
+
+    await click("test-pinwheel-item-1");
+    await expect(container).toHaveJSProperty("value", "value-1");
+    await handleChange.matchResult({ callCount: 4 });
   });
 
   test("🧪 should throw error if no valid label was set for the input", async ({