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

test/elements/test-input-text.ts

@@ -0,0 +1,59 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  property,
+  css,
+} from '@design.estate/dees-element';
+
+@customElement('test-input-text')
+export class TestInputText extends DeesElement {
+  // Different group - "Inputs"
+  public static demoGroup = 'Inputs';
+
+  public static demo = () => html`
+    <test-input-text placeholder="Enter text..."></test-input-text>
+  `;
+
+  @property({ type: String })
+  accessor placeholder: string = '';
+
+  @property({ type: String })
+  accessor value: string = '';
+
+  public static styles = [
+    css`
+      :host {
+        display: inline-block;
+      }
+      input {
+        background: #1a1a1a;
+        color: #e5e5e5;
+        border: 1px solid #333;
+        padding: 10px 14px;
+        border-radius: 6px;
+        font-size: 14px;
+        outline: none;
+        transition: border-color 0.2s;
+        min-width: 200px;
+      }
+      input:focus {
+        border-color: #3b82f6;
+      }
+      input::placeholder {
+        color: #666;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <input
+        type="text"
+        .placeholder=${this.placeholder}
+        .value=${this.value}
+        @input=${(e: Event) => this.value = (e.target as HTMLInputElement).value}
+      />
+    `;
+  }
+}