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

test/elements/index.ts

@@ -4,3 +4,10 @@ export * from './test-complextypes.js';
 export * from './test-withwrapper.js';
 export * from './test-edgecases.js';
 export * from './test-nested.js';
+
+// Grouped elements to demo the demoGroup feature
+export * from './test-button-primary.js';
+export * from './test-button-secondary.js';
+export * from './test-button-danger.js';
+export * from './test-input-text.js';
+export * from './test-input-checkbox.js';

test/elements/test-button-danger.ts

@@ -0,0 +1,45 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  property,
+  css,
+} from '@design.estate/dees-element';
+
+@customElement('test-button-danger')
+export class TestButtonDanger extends DeesElement {
+  // Same group as other buttons
+  public static demoGroup = 'Buttons';
+
+  public static demo = () => html`
+    <test-button-danger>Delete</test-button-danger>
+  `;
+
+  @property({ type: String })
+  accessor label: string = 'Delete';
+
+  public static styles = [
+    css`
+      :host {
+        display: inline-block;
+      }
+      button {
+        background: #ef4444;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      button:hover {
+        background: #dc2626;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`<button><slot>${this.label}</slot></button>`;
+  }
+}

test/elements/test-button-primary.ts

@@ -0,0 +1,45 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  property,
+  css,
+} from '@design.estate/dees-element';
+
+@customElement('test-button-primary')
+export class TestButtonPrimary extends DeesElement {
+  // This groups the element with other "Buttons" in the sidebar
+  public static demoGroup = 'Buttons';
+
+  public static demo = () => html`
+    <test-button-primary>Click Me</test-button-primary>
+  `;
+
+  @property({ type: String })
+  accessor label: string = 'Button';
+
+  public static styles = [
+    css`
+      :host {
+        display: inline-block;
+      }
+      button {
+        background: #3b82f6;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      button:hover {
+        background: #2563eb;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`<button><slot>${this.label}</slot></button>`;
+  }
+}

test/elements/test-button-secondary.ts

@@ -0,0 +1,45 @@
+import {
+  DeesElement,
+  customElement,
+  html,
+  property,
+  css,
+} from '@design.estate/dees-element';
+
+@customElement('test-button-secondary')
+export class TestButtonSecondary extends DeesElement {
+  // Same group as test-button-primary - they'll appear together
+  public static demoGroup = 'Buttons';
+
+  public static demo = () => html`
+    <test-button-secondary>Secondary Action</test-button-secondary>
+  `;
+
+  @property({ type: String })
+  accessor label: string = 'Button';
+
+  public static styles = [
+    css`
+      :host {
+        display: inline-block;
+      }
+      button {
+        background: transparent;
+        color: #3b82f6;
+        border: 1px solid #3b82f6;
+        padding: 10px 20px;
+        border-radius: 6px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      button:hover {
+        background: rgba(59, 130, 246, 0.1);
+      }
+    `,
+  ];
+
+  public render() {
+    return html`<button><slot>${this.label}</slot></button>`;
+  }
+}

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>
+    `;
+  }
+}

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}
+      />
+    `;
+  }
+}