refactor(web-components): remove unnecessary reflect behaviors

.changeset/ninety-mugs-shine.md

@@ -0,0 +1,6 @@
+---
+"@tapsioss/web-components": minor
+---
+
+Remove unnecessary `reflect` behaviors
+

.changeset/sad-sloths-mate.md

@@ -2,5 +2,5 @@
 "@tapsioss/web-components": minor
 ---
 
-Update `value` property to be readonly
+Update `value` property to be readonly in pinwheel
 

.changeset/sad-webs-fall.md

@@ -2,5 +2,5 @@
 "@tapsioss/web-components": patch
 ---
 
-Remove iOS-specific behaviors xD
+Remove iOS-specific behaviors for scroll locker
 

packages/web-components/src/base-text-input/base-text-input.ts

@@ -100,7 +100,7 @@ export abstract class BaseTextInput extends BaseInput {
    * @attr {string} error
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public error = false;
 
   /**

packages/web-components/src/bottom-navigation/item/item.ts

@@ -39,7 +39,7 @@ export class BottomNavigationItem extends LitElement {
    * @attr {string} active
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public get active(): boolean {
     return this._active;
   }

packages/web-components/src/button/base/base-button.ts

@@ -77,7 +77,7 @@ export abstract class BaseButton extends BaseClass implements FormSubmitter {
    * @attr {string} loading
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public loading = false;
 
   /**

packages/web-components/src/checkbox/checkbox.ts

@@ -33,7 +33,7 @@ export class Checkbox extends BaseInput {
    * @attr {string} checked
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public checked = false;
 
   /**
@@ -67,7 +67,7 @@ export class Checkbox extends BaseInput {
    * @attr {string} error
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public error = false;
 
   @state()

packages/web-components/src/chip-group/chip-group.test.ts

@@ -72,30 +72,30 @@ describe("🧩 chip-group", () => {
 
     await item1.click();
     await handleSelectChange.matchResult({ callCount: 1 });
-    await expect(item1).toHaveAttribute("selected");
+    await expect(item1).toHaveJSProperty("selected", true);
     await forEachLocator([item2, item3, item4], async chip => {
-      await expect(chip).not.toHaveAttribute("selected");
+      await expect(chip).toHaveJSProperty("selected", false);
     });
 
     await item2.click();
     await handleSelectChange.matchResult({ callCount: 2 });
-    await expect(item2).toHaveAttribute("selected");
+    await expect(item2).toHaveJSProperty("selected", true);
     await forEachLocator([item1, item3, item4], async chip => {
-      await expect(chip).not.toHaveAttribute("selected");
+      await expect(chip).toHaveJSProperty("selected", false);
     });
 
     await item3.click();
     await handleSelectChange.matchResult({ callCount: 3 });
-    await expect(item3).toHaveAttribute("selected");
+    await expect(item3).toHaveJSProperty("selected", true);
     await forEachLocator([item1, item2, item4], async chip => {
-      await expect(chip).not.toHaveAttribute("selected");
+      await expect(chip).toHaveJSProperty("selected", false);
     });
 
     await item4.click();
     await handleSelectChange.matchResult({ callCount: 4 });
-    await expect(item4).toHaveAttribute("selected");
+    await expect(item4).toHaveJSProperty("selected", true);
     await forEachLocator([item1, item2, item3], async chip => {
-      await expect(chip).not.toHaveAttribute("selected");
+      await expect(chip).toHaveJSProperty("selected", false);
     });
   });
 
@@ -118,32 +118,32 @@ describe("🧩 chip-group", () => {
     const item4 = page.getByTestId("test-chip-4");
 
     await forEachLocator([item1, item2, item3, item4], async chip => {
-      await expect(chip).not.toHaveAttribute("selected");
+      await expect(chip).toHaveJSProperty("selected", false);
     });
 
     await item1.click();
-    await expect(item1).toHaveAttribute("selected");
+    await expect(item1).toHaveJSProperty("selected", true);
     await forEachLocator([item2, item3, item4], async chip => {
-      await expect(chip).not.toHaveAttribute("selected");
+      await expect(chip).toHaveJSProperty("selected", false);
     });
 
     await item2.click();
     await forEachLocator([item1, item2], async chip => {
-      await expect(chip).toHaveAttribute("selected");
+      await expect(chip).toHaveJSProperty("selected", true);
     });
     await forEachLocator([item3, item4], async chip => {
-      await expect(chip).not.toHaveAttribute("selected");
+      await expect(chip).toHaveJSProperty("selected", false);
     });
 
     await item3.click();
     await forEachLocator([item1, item2, item3], async chip => {
-      await expect(chip).toHaveAttribute("selected");
+      await expect(chip).toHaveJSProperty("selected", true);
     });
-    await expect(item4).not.toHaveAttribute("selected");
+    await expect(item4).toHaveJSProperty("selected", false);
 
     await item4.click();
     await forEachLocator([item1, item2, item3, item4], async chip => {
-      await expect(chip).toHaveAttribute("selected");
+      await expect(chip).toHaveJSProperty("selected", true);
     });
   });
 
@@ -160,16 +160,15 @@ describe("🧩 chip-group", () => {
 
     const item1 = page.getByTestId("test-chip-1");
 
-    await expect(item1).toHaveAttribute("selected");
+    await expect(item1).toHaveJSProperty("selected", true);
 
     await item1.click();
-    await expect(item1).not.toHaveAttribute("selected");
+    await expect(item1).toHaveJSProperty("selected", false);
   });
 
   test("🧪 should work with multiple `cols` in `vertical` orientation", async ({
     page,
   }) => {
-    // we have 6 chips (c1-c6) inside out chip group.
     await render(
       page,
       `

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

@@ -8,16 +8,16 @@ describe("🧩 chip", () => {
     );
     const chip = page.getByTestId("test-chip");
 
-    await expect(chip).not.toHaveAttribute("selected");
+    await expect(chip).toHaveJSProperty("selected", false);
 
     await page.keyboard.press("Tab");
     await expect(chip).toBeFocused();
 
     await page.keyboard.press("Space");
-    await expect(chip).toHaveAttribute("selected");
+    await expect(chip).toHaveJSProperty("selected", true);
 
     await page.keyboard.press("Space");
-    await expect(chip).not.toHaveAttribute("selected");
+    await expect(chip).toHaveJSProperty("selected", false);
   });
 
   test("🧪 should toggle on click", async ({ page }) => {
@@ -27,13 +27,13 @@ describe("🧩 chip", () => {
     );
     const chip = page.getByTestId("test-chip");
 
-    await expect(chip).not.toHaveAttribute("selected");
+    await expect(chip).toHaveJSProperty("selected", false);
 
     await chip.click();
-    await expect(chip).toHaveAttribute("selected");
+    await expect(chip).toHaveJSProperty("selected", true);
 
     await chip.click();
-    await expect(chip).not.toHaveAttribute("selected");
+    await expect(chip).toHaveJSProperty("selected", false);
   });
 
   test("🧪 should render leading and trailing icons", async ({ page }) => {

packages/web-components/src/chip/chip.ts

@@ -64,7 +64,7 @@ export class Chip extends LitElement {
    * @attr {string} selected
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public get selected(): boolean {
     return this._selected;
   }

packages/web-components/src/file-input/file-input.ts

@@ -180,7 +180,7 @@ export class FileInput extends BaseClass {
    * @attr {string} error
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public error = false;
 
   /**

packages/web-components/src/modal/modal.ts

@@ -127,7 +127,7 @@ export class Modal extends LitElement {
    *
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public set open(openState: boolean) {
     if (openState === this._open) return;
 

packages/web-components/src/notice/notice.ts

@@ -63,7 +63,7 @@ export class Notice extends LitElement {
    * @attr {string} visible
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public visible = false;
 
   /**

packages/web-components/src/pin-input/pin-input.ts

@@ -204,7 +204,7 @@ export class PinInput extends BaseClass {
    * @attr {string} error
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public error = false;
 
   /**

packages/web-components/src/snackbar/snackbar.ts

@@ -77,7 +77,7 @@ export class Snackbar extends LitElement {
    * @attr {string} open
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public open = false;
 
   /**

packages/web-components/src/text-field/text-field.ts

@@ -41,7 +41,7 @@ export class TextField extends BaseTextInput {
    * @attr {string} type
    * @default "text"
    */
-  @property({ reflect: true })
+  @property()
   public type:
     | "email"
     | "number"
@@ -97,7 +97,7 @@ export class TextField extends BaseTextInput {
    * @attr {string} multiple
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public multiple = false;
 
   /**

packages/web-components/src/tooltip/tooltip.ts

@@ -106,7 +106,7 @@ export class Tooltip extends LitElement {
    * @attr {string} visible
    * @default false
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean })
   public visible = false;
 
   /**