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

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

@@ -0,0 +1,89 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import './dees-mobile-iconbutton.js';
+import '../dees-mobile-icon/dees-mobile-icon.js';
+
+export const demoFunc = (): TemplateResult => {
+  return html`
+    <style>
+      .demo-container {
+        padding: 2rem;
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+      }
+
+      .demo-section {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+      }
+
+      .demo-label {
+        font-size: 0.75rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: #71717a;
+      }
+
+      .demo-row {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+      }
+    </style>
+
+    <div class="demo-container">
+      <div class="demo-section">
+        <div class="demo-label">Sizes</div>
+        <div class="demo-row">
+          <dees-mobile-iconbutton size="sm" label="Small">
+            <dees-mobile-icon icon="settings" size="16"></dees-mobile-icon>
+          </dees-mobile-iconbutton>
+
+          <dees-mobile-iconbutton size="md" label="Medium">
+            <dees-mobile-icon icon="settings" size="20"></dees-mobile-icon>
+          </dees-mobile-iconbutton>
+
+          <dees-mobile-iconbutton size="lg" label="Large">
+            <dees-mobile-icon icon="settings" size="24"></dees-mobile-icon>
+          </dees-mobile-iconbutton>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <div class="demo-label">Common Actions</div>
+        <div class="demo-row">
+          <dees-mobile-iconbutton label="Edit">
+            <dees-mobile-icon icon="pencil" size="20"></dees-mobile-icon>
+          </dees-mobile-iconbutton>
+
+          <dees-mobile-iconbutton label="Delete">
+            <dees-mobile-icon icon="trash-2" size="20"></dees-mobile-icon>
+          </dees-mobile-iconbutton>
+
+          <dees-mobile-iconbutton label="Share">
+            <dees-mobile-icon icon="share" size="20"></dees-mobile-icon>
+          </dees-mobile-iconbutton>
+
+          <dees-mobile-iconbutton label="More">
+            <dees-mobile-icon icon="more-vertical" size="20"></dees-mobile-icon>
+          </dees-mobile-iconbutton>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <div class="demo-label">States</div>
+        <div class="demo-row">
+          <dees-mobile-iconbutton label="Normal">
+            <dees-mobile-icon icon="check" size="20"></dees-mobile-icon>
+          </dees-mobile-iconbutton>
+
+          <dees-mobile-iconbutton label="Disabled" disabled>
+            <dees-mobile-icon icon="check" size="20"></dees-mobile-icon>
+          </dees-mobile-iconbutton>
+        </div>
+      </div>
+    </div>
+  `;
+};