feat(wcctools): add context menu and pinning support, persist pinned state in URL, and add grouped demo test elements

test/elements/test-input-checkbox.ts

@@ -0,0 +1,68 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  property,
+  css,
+} from '@design.estate/dees-element';
+
+@customElement('test-input-checkbox')
+export class TestInputCheckbox extends DeesElement {
+  // Same group as test-input-text
+  public static demoGroup = 'Inputs';
+
+  public static demo = () => html`
+    <test-input-checkbox label="Accept terms and conditions"></test-input-checkbox>
+  `;
+
+  @property({ type: String })
+  accessor label: string = 'Checkbox';
+
+  @property({ type: Boolean })
+  accessor checked: boolean = false;
+
+  public static styles = [
+    css`
+      :host {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        cursor: pointer;
+      }
+      .checkbox {
+        width: 18px;
+        height: 18px;
+        border: 1px solid #333;
+        border-radius: 4px;
+        background: #1a1a1a;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.2s;
+      }
+      .checkbox.checked {
+        background: #3b82f6;
+        border-color: #3b82f6;
+      }
+      .checkbox.checked::after {
+        content: '✓';
+        color: white;
+        font-size: 12px;
+      }
+      .label {
+        color: #e5e5e5;
+        font-size: 14px;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <div
+        class="checkbox ${this.checked ? 'checked' : ''}"
+        @click=${() => this.checked = !this.checked}
+      ></div>
+      <span class="label">${this.label}</span>
+    `;
+  }
+}