feat(ui): add mobile context menu and iconbutton components with demos and exports

ts_web/elements/00group-ui/dees-mobile-contextmenu/dees-mobile-contextmenu.demo.ts

@@ -0,0 +1,82 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { IContextMenuItem } from './dees-mobile-contextmenu.js';
+
+export const demoFunc = (): TemplateResult => {
+  const showContextMenu = (e: MouseEvent) => {
+    e.preventDefault();
+
+    const items: IContextMenuItem[] = [
+      {
+        label: 'Edit',
+        icon: 'pencil',
+        action: () => console.log('Edit clicked'),
+      },
+      {
+        label: 'Duplicate',
+        icon: 'copy',
+        action: () => console.log('Duplicate clicked'),
+      },
+      { divider: true },
+      {
+        label: 'Share',
+        icon: 'share',
+        action: () => console.log('Share clicked'),
+      },
+      { divider: true },
+      {
+        label: 'Delete',
+        icon: 'trash-2',
+        danger: true,
+        action: () => console.log('Delete clicked'),
+      },
+    ];
+
+    import('./dees-mobile-contextmenu.js').then(({ DeesMobileContextmenu }) => {
+      DeesMobileContextmenu.createAndShow(items, e.clientX, e.clientY);
+    });
+  };
+
+  return html`
+    <style>
+      .demo-container {
+        padding: 2rem;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      .demo-area {
+        padding: 3rem;
+        border: 2px dashed #e4e4e7;
+        border-radius: 0.5rem;
+        text-align: center;
+        cursor: context-menu;
+        user-select: none;
+      }
+
+      .demo-area:hover {
+        border-color: #a1a1aa;
+        background: #f4f4f5;
+      }
+
+      .demo-description {
+        font-size: 0.875rem;
+        color: #71717a;
+        text-align: center;
+      }
+    </style>
+
+    <div class="demo-container">
+      <div class="demo-description">
+        Right-click (or long-press on touch) to show context menu
+      </div>
+
+      <div
+        class="demo-area"
+        @contextmenu=${showContextMenu}
+      >
+        Right-click here
+      </div>
+    </div>
+  `;
+};