feat(combox): Introduce singleton SioCombox attached to document.body with open/close/toggle API and animated show/hide; integrate SioFab to use the singleton and update styles/positioning

ts_web/elements/sio-fab.ts

@@ -32,9 +32,6 @@ export class SioFab extends DeesElement {
   @property({ type: Boolean })
   public accessor showCombox = false;
 
-  @state()
-  private accessor hasShownOnce = false;
-
   @state()
   private accessor shouldPulse = false;
 
@@ -62,7 +59,6 @@ export class SioFab extends DeesElement {
         --fab-gradient-hover-end: #c026d3;
         --fab-shadow-color: rgba(139, 92, 246, 0.25);
         --fab-size: 60px;
-        --fab-combox-offset: calc(var(--fab-size) + ${unsafeCSS(spacing["4"])});
       }
 
       #mainbox {
@@ -201,63 +197,13 @@ export class SioFab extends DeesElement {
       #mainbox .icon.close sio-icon {
         transform: scale(1);
       }
-
-      #comboxContainer {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        pointer-events: none;
-      }
-
-      #comboxContainer sio-combox {
-        position: absolute;
-        bottom: var(--fab-combox-offset);
-        right: 0;
-        transition: ${unsafeCSS(transitions.all)};
-        will-change: transform;
-        transform: translateY(${unsafeCSS(spacing["5"])});
-        opacity: 0;
-        pointer-events: none;
-      }
-
-      #comboxContainer.show {
-        pointer-events: all;
-      }
-
-      #comboxContainer.show sio-combox {
-        transform: translateY(0px);
-        opacity: 1;
-        pointer-events: all;
-      }
     `,
-    // Mobile responsive styles - smaller FAB and full-screen combox
+    // Mobile responsive styles - smaller FAB
     cssManager.cssForPhablet(css`
       :host {
         --fab-size: 48px;
         bottom: 16px;
         right: 16px;
-        will-change: auto;
-      }
-
-      #comboxContainer {
-        position: fixed;
-        top: 0;
-        left: 0;
-        bottom: auto;
-        right: auto;
-        width: 100vw;
-        height: 100vh;
-        height: 100dvh;
-      }
-
-      #comboxContainer sio-combox {
-        bottom: 0;
-        right: 0;
-        transform: none;
-      }
-
-      #comboxContainer.show sio-combox {
-        transform: none;
       }
     `),
   ];
@@ -276,11 +222,6 @@ export class SioFab extends DeesElement {
           <sio-icon icon="x" size="20"></sio-icon>
         </div>
       </div>
-      <div id="comboxContainer" class="${this.showCombox ? 'show' : ''}">
-        ${this.showCombox || this.hasShownOnce ? html`
-          <sio-combox @close=${() => this.showCombox = false}></sio-combox>
-        ` : ''}
-      </div>
     `;
   }
 
@@ -288,12 +229,12 @@ export class SioFab extends DeesElement {
    * toggles the combox
    */
   public async toggleCombox() {
-    console.log('toggle combox');
-    const wasOpen = this.showCombox;
-    this.showCombox = !this.showCombox;
-    if (this.showCombox) {
-      this.hasShownOnce = true;
-      if (!wasOpen) {
+    const combox = SioCombox.getInstance();
+    if (combox) {
+      const wasOpen = combox.getIsOpen();
+      combox.toggle();
+      this.showCombox = combox.getIsOpen();
+      if (this.showCombox && !wasOpen) {
         this.shouldPulse = true;
       }
     }
@@ -303,6 +244,14 @@ export class SioFab extends DeesElement {
     super.firstUpdated(args);
     const domtools = await this.domtoolsPromise;
 
+    // Create the singleton combox on body
+    const combox = SioCombox.createOnBody();
+
+    // Listen for close events
+    combox.addEventListener('close', () => {
+      this.showCombox = false;
+    });
+
     // Set up keyboard shortcut
     domtools.keyboard
       .on([domtools.keyboard.keyEnum.Ctrl, domtools.keyboard.keyEnum.S])
@@ -322,15 +271,5 @@ export class SioFab extends DeesElement {
         this.classList.remove('combox-open');
       }
     }
-
-    // Set reference object when combox is rendered
-    if ((changedProperties.has('showCombox') || changedProperties.has('hasShownOnce')) &&
-        (this.showCombox || this.hasShownOnce)) {
-      const sioCombox: SioCombox = this.shadowRoot.querySelector('sio-combox');
-      const mainBox: HTMLElement = this.shadowRoot.querySelector('#mainbox');
-      if (sioCombox && mainBox && !sioCombox.referenceObject) {
-        sioCombox.referenceObject = mainBox;
-      }
-    }
   }
 }