@stacksjs/hello-world-stx 0.75.329 → 0.75.334

package/dist/ssr.js

@@ -0,0 +1,388 @@
+const definitions = {
+  "stacks-context-menu": {
+    "template": "<div class=\"context-menu\" id=\"{{ id }}\" style=\"display: none;\">\n    <slot />\n  </div>",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "id": {
+        "type": "string",
+        "reflect": true
+      }
+    }
+  },
+  "stacks-context-menu-item": {
+    "template": "@if (hasSubmenu)\n  <div class=\"context-menu-item has-submenu\">\n    @if (icon)\n    <div class=\"context-menu-item-icon\">{{ icon }}</div>\n    @endif\n    <div>{{ label }}</div>\n    <div class=\"context-submenu\">\n      <slot />\n    </div>\n  </div>\n  @else\n  <button class=\"context-menu-item\" @if (onclick)onclick=\"{{ onclick }}\"@endif>\n    @if (icon)\n    <div class=\"context-menu-item-icon\">{{ icon }}</div>\n    @endif\n    <div>{{ label }}</div>\n  </button>\n  @endif",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "icon": {
+        "type": "string",
+        "default": "",
+        "reflect": true
+      },
+      "label": {
+        "type": "string",
+        "reflect": true
+      },
+      "onclick": {
+        "type": "string",
+        "reflect": true
+      },
+      "hasSubmenu": {
+        "type": "boolean",
+        "default": false,
+        "reflect": true
+      }
+    }
+  },
+  "stacks-desktop-icon": {
+    "template": "<button\n    class=\"desktop-icon\"\n    data-icon-id=\"{{ id }}\"\n    data-icon-type=\"{{ type }}\"\n    data-icon-section=\"{{ section }}\"\n    data-icon-url=\"{{ url }}\"\n    style=\"@if(style){{ style }}@else left: {{ left }}; top: {{ top }};@endif\"\n    @if (onclick)\n    onclick=\"{{ onclick }}\"\n    @endif\n  >\n    <div class=\"desktop-icon-image\">{{ icon }}</div>\n    <div class=\"desktop-icon-label\">{{ label }}</div>\n  </button>",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "id": {
+        "type": "string",
+        "reflect": true
+      },
+      "icon": {
+        "type": "string",
+        "default": "📄",
+        "reflect": true
+      },
+      "label": {
+        "type": "string",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "default": "window",
+        "reflect": true
+      },
+      "section": {
+        "type": "string",
+        "default": "",
+        "reflect": true
+      },
+      "url": {
+        "type": "string",
+        "default": "",
+        "reflect": true
+      },
+      "onclick": {
+        "type": "string",
+        "reflect": true
+      },
+      "left": {
+        "type": "string",
+        "default": "20px",
+        "reflect": true
+      },
+      "top": {
+        "type": "string",
+        "default": "20px",
+        "reflect": true
+      },
+      "style": {
+        "type": "string",
+        "default": "",
+        "reflect": true
+      }
+    }
+  },
+  "stacks-feature-button": {
+    "template": "<button\n    class=\"feature-btn @if (active)active@endif\"\n    @if (onclick)onclick=\"{{ onclick }}\"@endif\n  >\n    {{ label }}\n  </button>",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "label": {
+        "type": "string",
+        "reflect": true
+      },
+      "onclick": {
+        "type": "string",
+        "reflect": true
+      },
+      "active": {
+        "type": "boolean",
+        "default": false,
+        "reflect": true
+      }
+    }
+  },
+  "stacks-input-group": {
+    "template": "<div class=\"login-input-group\">\n    <label>{{ label }}:</label>\n    <input\n      type=\"{{ type }}\"\n      id=\"{{ id }}\"\n      class=\"{{ classList }}\"\n      placeholder=\"{{ placeholder }}\"\n    />\n  </div>",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "id": {
+        "type": "string",
+        "reflect": true
+      },
+      "label": {
+        "type": "string",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "default": "text",
+        "reflect": true
+      },
+      "placeholder": {
+        "type": "string",
+        "default": "",
+        "reflect": true
+      },
+      "class": {
+        "type": "string",
+        "default": "login-input",
+        "reflect": true
+      }
+    }
+  },
+  "stacks-login-form": {
+    "template": "<div id=\"{{ id }}\" class=\"hidden login-form\">\n    <div class=\"login-form-background\">\n      <div class=\"login-form-container\">\n        <button class=\"login-close-btn\" onclick=\"closeLoginScreens()\">×</button>\n        <div class=\"login-form-header\">\n          <button class=\"login-back-button\" onclick=\"hideLoginForms()\">← Back</button>\n          <div class=\"login-form-title\">\n            <div class=\"login-form-icon\">{{ icon }}</div>\n            <h2>{{ title }}</h2>\n          </div>\n        </div>\n\n        <div class=\"login-form-content\">\n          <div class=\"login-form-prompt\">{{ prompt }}</div>\n          <slot />\n          <div class=\"login-actions\">\n            <button class=\"login-submit-btn\" onclick=\"{{ submitHandler }}\">\n              <span class=\"login-btn-icon\">→</span>\n              <span>Log In</span>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "id": {
+        "type": "string",
+        "reflect": true
+      },
+      "icon": {
+        "type": "string",
+        "default": "👤",
+        "reflect": true
+      },
+      "title": {
+        "type": "string",
+        "default": "Login",
+        "reflect": true
+      },
+      "prompt": {
+        "type": "string",
+        "default": "Enter your credentials",
+        "reflect": true
+      },
+      "submitHandler": {
+        "type": "string",
+        "default": "handleLogin()",
+        "reflect": true
+      }
+    }
+  },
+  "stacks-login-screen": {
+    "template": "<div id=\"{{ id }}\" class=\"hidden login-screen\">\n    <div class=\"login-background\">\n      <div class=\"login-container\">\n        <button class=\"login-close-btn\" onclick=\"closeLoginScreens()\">×</button>\n        <div class=\"login-header\">\n          <div class=\"login-logo\">{{ logoText }}</div>\n          <div class=\"login-subtitle\">{{ subtitle }}</div>\n        </div>\n\n        <div class=\"login-users\">\n          <slot name=\"login-options\">\n            <button class=\"login-user-button\" id=\"email-login-btn\">\n              <div class=\"login-user-icon\">👤</div>\n              <div class=\"login-user-name\">Email Login</div>\n            </button>\n            <button class=\"login-user-button\" id=\"license-login-btn\">\n              <div class=\"login-user-icon\">🔑</div>\n              <div class=\"login-user-name\">License Key</div>\n            </button>\n          </slot>\n        </div>\n\n        <div class=\"login-footer\">\n          <slot name=\"footer\">\n            <div class=\"login-footer-text\">After you log in, you can access the STACKS Desktop</div>\n          </slot>\n        </div>\n      </div>\n    </div>\n  </div>",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "id": {
+        "type": "string",
+        "default": "login-screen",
+        "reflect": true
+      },
+      "logoText": {
+        "type": "string",
+        "default": "STACKS",
+        "reflect": true
+      },
+      "subtitle": {
+        "type": "string",
+        "default": "To begin, click your user name",
+        "reflect": true
+      }
+    }
+  },
+  "stacks-notification-popup": {
+    "template": "<div class=\"notification-popup\" id=\"{{ id }}\" style=\"display: none;\">\n    <div class=\"notification-header\">\n      <span class=\"notification-title\">{{ title }}</span>\n      <button class=\"notification-close\" onclick=\"closeNotificationPopup()\">×</button>\n    </div>\n    <div class=\"notification-content\">\n      <slot />\n    </div>\n    @if (showSignup)\n    <div class=\"notification-signup\" id=\"notification-signup\">\n      <div class=\"notification-separator\"></div>\n      <div class=\"notification-signup-text\">Get updates on new features & releases:</div>\n      <div class=\"notification-signup-form\">\n        <input\n          type=\"email\"\n          id=\"notification-email\"\n          class=\"notification-email-input\"\n          placeholder=\"your@email.com\"\n          autocomplete=\"email\"\n        />\n        <button class=\"notification-signup-btn\" onclick=\"handleEmailSignup()\">\n          Sign Up\n        </button>\n      </div>\n    </div>\n    <div class=\"notification-success\" id=\"notification-success\" style=\"display: none;\">\n      <div class=\"notification-separator\"></div>\n      <div class=\"notification-success-content\">\n        <div class=\"notification-success-icon\">✓</div>\n        <div class=\"notification-success-text\">\n          <div class=\"notification-success-title\">Thanks for subscribing!</div>\n          <div class=\"notification-success-subtitle\">We'll keep you updated.</div>\n        </div>\n      </div>\n    </div>\n    @endif\n  </div>",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "id": {
+        "type": "string",
+        "default": "notification-popup",
+        "reflect": true
+      },
+      "title": {
+        "type": "string",
+        "default": "Notifications",
+        "reflect": true
+      },
+      "showSignup": {
+        "type": "boolean",
+        "default": true,
+        "reflect": true
+      }
+    }
+  },
+  "stacks-package-item": {
+    "template": "<div class=\"package-item\">\n    <div class=\"package-emoji\">{{ emoji }}</div>\n    <div class=\"package-title\">{{ title }}</div>\n    <div class=\"package-desc\">{{ description }}</div>\n  </div>",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "emoji": {
+        "type": "string",
+        "reflect": true
+      },
+      "title": {
+        "type": "string",
+        "reflect": true
+      },
+      "description": {
+        "type": "string",
+        "reflect": true
+      }
+    }
+  },
+  "stacks-start-menu": {
+    "template": "<div class=\"start-menu\" id=\"{{ id }}\" style=\"display: none;\">\n    <div class=\"start-menu-header\">\n      <div class=\"start-menu-user-image\">{{ userImage }}</div>\n      <div class=\"start-menu-user-name\">{{ userName }}</div>\n    </div>\n\n    <div class=\"start-menu-content\">\n      <div class=\"start-menu-left\">\n        <div class=\"start-menu-pinned\">\n          <slot name=\"pinned-items\" />\n        </div>\n        <div class=\"start-menu-separator\"></div>\n        <slot name=\"all-programs\">\n          <button class=\"start-menu-item all-programs\">\n            <span>All Programs</span>\n            <span class=\"arrow\">▸</span>\n          </button>\n        </slot>\n      </div>\n\n      <div class=\"start-menu-right\">\n        <slot name=\"right-items\" />\n      </div>\n    </div>\n\n    <div class=\"start-menu-footer\">\n      <slot name=\"footer\">\n        <button class=\"start-menu-footer-btn\" onclick=\"showLoginScreen()\">\n          <span class=\"footer-icon\">🔑</span>\n          <span>Log Off</span>\n        </button>\n        <button class=\"start-menu-footer-btn\" onclick=\"window.location.reload()\">\n          <span class=\"footer-icon\">🔄</span>\n          <span>Restart</span>\n        </button>\n      </slot>\n    </div>\n  </div>",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "id": {
+        "type": "string",
+        "default": "start-menu",
+        "reflect": true
+      },
+      "userName": {
+        "type": "string",
+        "default": "Developer",
+        "reflect": true
+      },
+      "userImage": {
+        "type": "string",
+        "default": "👤",
+        "reflect": true
+      }
+    }
+  },
+  "stacks-start-menu-item": {
+    "template": "@if (url)\n  <button\n    class=\"start-menu-item {{ highlighted ? 'highlighted' : '' }}\"\n    onclick=\"window.open('{{ url }}', '_blank')\"\n  >\n    <span class=\"start-menu-item-icon\">{{ icon }}</span>\n    <span class=\"start-menu-item-label\">{{ label }}</span>\n  </button>\n  @elseif (onclick)\n  <button\n    class=\"start-menu-item {{ highlighted ? 'highlighted' : '' }}\"\n    onclick=\"{{ onclick }}\"\n  >\n    <span class=\"start-menu-item-icon\">{{ icon }}</span>\n    <span class=\"start-menu-item-label\">{{ label }}</span>\n  </button>\n  @else\n  <button\n    class=\"start-menu-item {{ highlighted ? 'highlighted' : '' }}\"\n  >\n    <span class=\"start-menu-item-icon\">{{ icon }}</span>\n    <span class=\"start-menu-item-label\">{{ label }}</span>\n  </button>\n  @endif",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "icon": {
+        "type": "string",
+        "default": "📄",
+        "reflect": true
+      },
+      "label": {
+        "type": "string",
+        "reflect": true
+      },
+      "onclick": {
+        "type": "string",
+        "reflect": true
+      },
+      "url": {
+        "type": "string",
+        "reflect": true
+      },
+      "highlighted": {
+        "type": "boolean",
+        "default": false,
+        "reflect": true
+      }
+    }
+  },
+  "stacks-taskbar": {
+    "template": "<div class=\"taskbar\">\n    @if (showStartMenu)\n    <button class=\"start-button\" onclick=\"toggleStartMenu()\">\n      <div class=\"start-button-flag\">\n        <div class=\"flag-red\"></div>\n        <div class=\"flag-green\"></div>\n        <div class=\"flag-blue\"></div>\n        <div class=\"flag-yellow\"></div>\n      </div>\n      <span>Start</span>\n    </button>\n    @endif\n\n    <div class=\"quick-launch\">\n      <slot name=\"quick-launch\" />\n    </div>\n\n    <div class=\"taskbar-windows\" id=\"taskbar-windows\">\n      <slot name=\"taskbar-windows\" />\n    </div>\n\n    <div class=\"system-tray\">\n      <slot name=\"system-tray\">\n        <button class=\"tray-icon\" onclick=\"toggleNotificationPopup()\">🔔</button>\n        <button class=\"tray-icon\" onclick=\"window.open('https://github.com/stacksjs/stacks', '_blank')\">💻</button>\n        <button class=\"tray-icon\" onclick=\"window.open('https://stacksjs.com/discord', '_blank')\">💬</button>\n      </slot>\n      <div class=\"clock\" id=\"clock\"></div>\n    </div>\n  </div>",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "showStartMenu": {
+        "type": "boolean",
+        "default": true,
+        "reflect": true
+      }
+    }
+  },
+  "stacks-window": {
+    "template": "<div id=\"window-{{ id }}\" class=\"window\" style=\"@if(style){{ style }}@else left: {{ left }}; top: {{ top }}; width: {{ width }}; height: {{ height }};@endif\">\n    <div class=\"window-titlebar\">\n      <div class=\"window-icon\">{{ icon }}</div>\n      <div class=\"window-title\">{{ title }}</div>\n      <div class=\"window-controls\">\n        <button class=\"minimize window-control\" onclick=\"minimizeWindow('{{ id }}')\">_</button>\n        <button class=\"maximize window-control\" onclick=\"toggleMaximizeWindow('{{ id }}')\">□</button>\n        <button class=\"close window-control\" onclick=\"closeWindow('{{ id }}')\">×</button>\n      </div>\n    </div>\n    <div class=\"window-content\">\n      <slot />\n    </div>\n  </div>",
+    "styles": "",
+    "shadowMode": false,
+    "properties": {
+      "id": {
+        "type": "string",
+        "reflect": true
+      },
+      "icon": {
+        "type": "string",
+        "default": "📄",
+        "reflect": true
+      },
+      "title": {
+        "type": "string",
+        "reflect": true
+      },
+      "left": {
+        "type": "string",
+        "default": "100px",
+        "reflect": true
+      },
+      "top": {
+        "type": "string",
+        "default": "80px",
+        "reflect": true
+      },
+      "width": {
+        "type": "string",
+        "default": "600px",
+        "reflect": true
+      },
+      "height": {
+        "type": "string",
+        "default": "500px",
+        "reflect": true
+      },
+      "style": {
+        "type": "string",
+        "default": "",
+        "reflect": true
+      }
+    }
+  }
+};
+const escapeHTML = (value) => String(value ?? '')
+  .replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
+  .replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+const valueAt = (values, path) => path.trim().split('.').reduce((value, part) => value?.[part], values);
+
+export function renderComponent(tag, props = {}, slots = {}) {
+  const definition = definitions[tag];
+  if (!definition) throw new Error('Unknown STX component: ' + tag);
+  const values = Object.fromEntries(Object.entries(definition.properties).map(([name, property]) => [name, property.default]));
+  Object.assign(values, props);
+  let template = definition.template
+    .replace(new RegExp("\\{!!\\s*([\\w$.]+)\\s*!!\\}", 'g'), (_match, expression) => String(valueAt(values, expression) ?? ''))
+    .replace(new RegExp("\\{\\{\\s*([\\w$.]+)\\s*\\}\\}", 'g'), (_match, expression) => escapeHTML(valueAt(values, expression)))
+    .replace(new RegExp("<slot(?:\\s+name=[\"\\']([^\"\\']+)[\"\\'])?\\s*\\/?>(?:<\\/slot>)?", 'gi'), (_match, name) => String(slots[name || 'default'] ?? ''));
+  const attributes = Object.entries(definition.properties).flatMap(([name, property]) => {
+    if (property.attribute === false || !(name in props)) return [];
+    const attribute = property.attribute || name.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase());
+    const value = props[name];
+    if (value == null || value === false) return [];
+    if (value === true) return [attribute];
+    const serialized = typeof value === 'object' ? JSON.stringify(value) : value;
+    return [attribute + '=\"' + escapeHTML(serialized) + '\"'];
+  }).join(' ');
+  if (definition.shadowMode) {
+    template = '<template shadowrootmode="' + definition.shadowMode + '">' +
+      (definition.styles ? '<style>' + definition.styles + '</style>' : '') + template + '</template>' +
+      String(slots.default ?? '');
+  }
+  return '<' + tag + (attributes ? ' ' + attributes : '') + '>' + template + '</' + tag + '>';
+}
+
+export const renderContextMenu = (props = {}, slots = {}) => renderComponent('stacks-context-menu', props, slots);
+export const renderContextMenuItem = (props = {}, slots = {}) => renderComponent('stacks-context-menu-item', props, slots);
+export const renderDesktopIcon = (props = {}, slots = {}) => renderComponent('stacks-desktop-icon', props, slots);
+export const renderFeatureButton = (props = {}, slots = {}) => renderComponent('stacks-feature-button', props, slots);
+export const renderInputGroup = (props = {}, slots = {}) => renderComponent('stacks-input-group', props, slots);
+export const renderLoginForm = (props = {}, slots = {}) => renderComponent('stacks-login-form', props, slots);
+export const renderLoginScreen = (props = {}, slots = {}) => renderComponent('stacks-login-screen', props, slots);
+export const renderNotificationPopup = (props = {}, slots = {}) => renderComponent('stacks-notification-popup', props, slots);
+export const renderPackageItem = (props = {}, slots = {}) => renderComponent('stacks-package-item', props, slots);
+export const renderStartMenu = (props = {}, slots = {}) => renderComponent('stacks-start-menu', props, slots);
+export const renderStartMenuItem = (props = {}, slots = {}) => renderComponent('stacks-start-menu-item', props, slots);
+export const renderTaskbar = (props = {}, slots = {}) => renderComponent('stacks-taskbar', props, slots);
+export const renderWindow = (props = {}, slots = {}) => renderComponent('stacks-window', props, slots);

package/dist/stacks-context-menu-item.d.ts

@@ -0,0 +1,27 @@
+export interface ContextMenuItemProps {
+  icon?: string
+  label?: string
+  onclick?: string
+  hasSubmenu?: boolean
+}
+
+export interface ContextMenuItemEventMap {
+
+}
+
+export interface ContextMenuItem extends Required<Pick<ContextMenuItemProps, Exclude<keyof ContextMenuItemProps, keyof HTMLElement>>> {}
+
+export declare class ContextMenuItem extends HTMLElement {
+
+  readonly updateComplete: Promise<void>
+  requestUpdate(): Promise<void>
+  emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "stacks-context-menu-item": ContextMenuItem
+  }
+}
+
+export default ContextMenuItem

package/dist/stacks-context-menu-item.js

@@ -0,0 +1,85 @@
+import { StxElement, defineComponent } from './runtime.js';
+
+/** ContextMenuItem web component generated from ContextMenuItem.stx. */
+export class ContextMenuItem extends StxElement {
+
+  render(__helpers) {
+    const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
+    const { icon = "", label, onclick, hasSubmenu = false } = this._props();
+      let out = "";
+      if (hasSubmenu) {
+        out += `
+      <div class="context-menu-item has-submenu">
+        `;
+        if (icon) {
+          out += `
+        <div class="context-menu-item-icon">`;
+          out += __escape(icon);
+          out += `</div>
+        `;
+        }
+        out += "<div>";
+        out += __escape(label);
+        out += `</div>
+        <div class="context-submenu">
+          <slot />
+        </div>
+      </div>
+      `;
+      } else {
+        out += '<button class="context-menu-item" ';
+        if (onclick) {
+          out += 'onclick="';
+          out += __escape(onclick);
+          out += '"';
+        }
+        out += `>
+        `;
+        if (icon) {
+          out += `
+        <div class="context-menu-item-icon">`;
+          out += __escape(icon);
+          out += `</div>
+        `;
+        }
+        out += "<div>";
+        out += __escape(label);
+        out += `</div>
+      </button>
+      `;
+      }
+      return out;
+  }
+
+}
+
+defineComponent(ContextMenuItem, {
+  "tag": "stacks-context-menu-item",
+  "template": "@if (hasSubmenu)\n  <div class=\"context-menu-item has-submenu\">\n    @if (icon)\n    <div class=\"context-menu-item-icon\">{{ icon }}</div>\n    @endif\n    <div>{{ label }}</div>\n    <div class=\"context-submenu\">\n      <slot />\n    </div>\n  </div>\n  @else\n  <button class=\"context-menu-item\" @if (onclick)onclick=\"{{ onclick }}\"@endif>\n    @if (icon)\n    <div class=\"context-menu-item-icon\">{{ icon }}</div>\n    @endif\n    <div>{{ label }}</div>\n  </button>\n  @endif",
+  "styles": "",
+  "shadowMode": false,
+  "progressive": true,
+  "properties": {
+    "icon": {
+      "type": "string",
+      "default": "",
+      "reflect": true
+    },
+    "label": {
+      "type": "string",
+      "reflect": true
+    },
+    "onclick": {
+      "type": "string",
+      "reflect": true
+    },
+    "hasSubmenu": {
+      "type": "boolean",
+      "default": false,
+      "reflect": true
+    }
+  },
+  "eventTypes": [],
+  "bindings": []
+});
+export default ContextMenuItem;

package/dist/stacks-context-menu.d.ts

@@ -0,0 +1,24 @@
+export interface ContextMenuProps {
+  id?: string
+}
+
+export interface ContextMenuEventMap {
+
+}
+
+export interface ContextMenu extends Required<Pick<ContextMenuProps, Exclude<keyof ContextMenuProps, keyof HTMLElement>>> {}
+
+export declare class ContextMenu extends HTMLElement {
+
+  readonly updateComplete: Promise<void>
+  requestUpdate(): Promise<void>
+  emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "stacks-context-menu": ContextMenu
+  }
+}
+
+export default ContextMenu

package/dist/stacks-context-menu.js

@@ -0,0 +1,35 @@
+import { StxElement, defineComponent } from './runtime.js';
+
+/** ContextMenu web component generated from ContextMenu.stx. */
+export class ContextMenu extends StxElement {
+
+  render(__helpers) {
+    const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
+    const { id } = this._props();
+      let out = "";
+      out += '<div class="context-menu" id="';
+      out += __escape(id);
+      out += `" style="display: none;">
+        <slot />
+      </div>`;
+      return out;
+  }
+
+}
+
+defineComponent(ContextMenu, {
+  "tag": "stacks-context-menu",
+  "template": "<div class=\"context-menu\" id=\"{{ id }}\" style=\"display: none;\">\n    <slot />\n  </div>",
+  "styles": "",
+  "shadowMode": false,
+  "progressive": true,
+  "properties": {
+    "id": {
+      "type": "string",
+      "reflect": true
+    }
+  },
+  "eventTypes": [],
+  "bindings": []
+});
+export default ContextMenu;

package/dist/stacks-desktop-icon.d.ts

@@ -0,0 +1,33 @@
+export interface DesktopIconProps {
+  id?: string
+  icon?: string
+  label?: string
+  type?: string
+  section?: string
+  url?: string
+  onclick?: string
+  left?: string
+  top?: string
+  style?: string
+}
+
+export interface DesktopIconEventMap {
+
+}
+
+export interface DesktopIcon extends Required<Pick<DesktopIconProps, Exclude<keyof DesktopIconProps, keyof HTMLElement>>> {}
+
+export declare class DesktopIcon extends HTMLElement {
+
+  readonly updateComplete: Promise<void>
+  requestUpdate(): Promise<void>
+  emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "stacks-desktop-icon": DesktopIcon
+  }
+}
+
+export default DesktopIcon