fix(uptimelink-webwidget): Modernize element props (use accessor), bump deps, add CI/workflows, export pages and update package metadata/docs

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@uptime.link/webwidget',
-  version: '1.2.3',
+  version: '1.2.4',
   description: 'The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.'
 }

ts_web/elements/uptimelink-webwidget.ts

@@ -26,22 +26,22 @@ export class UptimelinkWebwidget extends DeesElement {
     type: Boolean,
     reflect: true,
   })
-  isOnTop = false;
+  accessor isOnTop = false;
 
   @property()
-  public projectSlug: string;
+  public accessor projectSlug: string;
 
   @property()
-  public isFocused = false;
+  public accessor isFocused = false;
 
   @property()
-  public isElevated = false;
+  public accessor isElevated = false;
 
   @property({
     type: Boolean,
     reflect: true,
   })
-  public showExpanded: boolean = false;
+  public accessor showExpanded: boolean = false;
 
   public parentWebwidget: UptimelinkWebwidget;
 
@@ -168,7 +168,7 @@ export class UptimelinkWebwidget extends DeesElement {
     return html`
       <style>
       :host {
-        z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'};
+        z-index: ${this.isElevated || this.isOnTop ? '2000' : 'auto'};
       }
       </style>
       <div class="mainbox ${this.isFocused ? 'focused' : null}">

ts_web/pages/index.ts

@@ -0,0 +1,2 @@
+export * from './page2.js';
+export * from './page1.js';

ts_web/pages/page1.ts

@@ -0,0 +1,18 @@
+import { html } from "@design.estate/dees-element";
+
+export const page1 = () => html`
+  <style>
+    .container {
+      box-sizing: border-box;
+      position: absolute;
+      top: 20px;
+      height: 120px;
+      padding: 40px;
+      width: 100%;
+      background: rgba(0,0,0,0.2);
+    }
+  </style>
+  <div class="container">
+    <uptimelink-webwidget></uptimelink-webwidget>
+  </div>
+`;

ts_web/pages/page2.ts

@@ -0,0 +1,5 @@
+import { html } from "@design.estate/dees-element";
+
+export const page2 = () => html`
+  <lele-statusbar></lele-statusbar>
+`;