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

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

@@ -0,0 +1,129 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { mobileComponentStyles } from '../../00componentstyles.js';
+import { demoFunc } from './dees-mobile-iconbutton.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-mobile-iconbutton': DeesMobileIconbutton;
+  }
+}
+
+@customElement('dees-mobile-iconbutton')
+export class DeesMobileIconbutton extends DeesElement {
+  public static demo = demoFunc;
+
+  @property({ type: String })
+  accessor label: string = '';
+
+  @property({ type: Boolean })
+  accessor disabled: boolean = false;
+
+  @property({ type: String })
+  accessor size: 'sm' | 'md' | 'lg' = 'md';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    mobileComponentStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: none;
+        border-radius: 0.375rem;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        cursor: pointer;
+        transition: all 150ms ease;
+        transform: scale(1);
+        position: relative;
+        -webkit-tap-highlight-color: transparent;
+        width: 100%;
+        height: 100%;
+      }
+
+      button:hover:not(:disabled) {
+        background-color: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        transform: scale(1.1);
+      }
+
+      button:active:not(:disabled) {
+        transform: scale(0.95);
+      }
+
+      button:focus-visible {
+        outline: 2px solid ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        outline-offset: 2px;
+      }
+
+      button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      /* Sizes */
+      button.sm {
+        width: 2rem;
+        height: 2rem;
+      }
+
+      button.md {
+        width: 2.5rem;
+        height: 2.5rem;
+      }
+
+      button.lg {
+        width: 3rem;
+        height: 3rem;
+      }
+
+      ::slotted(svg),
+      ::slotted(div),
+      ::slotted(dees-mobile-icon) {
+        width: 1.25rem;
+        height: 1.25rem;
+        pointer-events: none;
+      }
+
+      button.sm ::slotted(svg),
+      button.sm ::slotted(div),
+      button.sm ::slotted(dees-mobile-icon) {
+        width: 1rem;
+        height: 1rem;
+      }
+
+      button.lg ::slotted(svg),
+      button.lg ::slotted(div),
+      button.lg ::slotted(dees-mobile-icon) {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <button
+        class=${this.size}
+        ?disabled=${this.disabled}
+        aria-label=${this.label}
+        title=${this.label}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}