feat(elements): add eco-provider-frame and dataprovider interfaces; improve virtual keyboard interactions; add demos, exports and bump dev dependencies

ts_web/elements/00group-applauncher/eco-applauncher-keyboard/eco-applauncher-keyboard.ts

@@ -211,6 +211,10 @@ export class EcoApplauncherKeyboard extends DeesElement {
         background: ${cssManager.bdTheme('hsl(220 15% 92%)', 'hsl(240 5% 28%)')};
       }
 
+      .key:focus {
+        outline: none;
+      }
+
       .key.special {
         background: ${cssManager.bdTheme('hsl(220 10% 88%)', 'hsl(240 5% 16%)')};
         font-size: 16px;
@@ -375,10 +379,12 @@ export class EcoApplauncherKeyboard extends DeesElement {
     return html`
       <div
         class="key ${type} ${widthClass} ${isActive ? 'active' : ''}"
+        tabindex="-1"
         @pointerdown=${(e: PointerEvent) => this.handlePointerDown(e, config)}
         @pointerup=${(e: PointerEvent) => this.handlePointerUp(e, config)}
         @pointerleave=${(e: PointerEvent) => this.handlePointerLeave(e, config)}
         @pointermove=${(e: PointerEvent) => this.handlePointerMove(e, config)}
+        @mousedown=${(e: MouseEvent) => e.preventDefault()}
       >
         ${displayValue}
       </div>
@@ -418,6 +424,7 @@ export class EcoApplauncherKeyboard extends DeesElement {
 
   private handlePointerDown(e: PointerEvent, config: IKeyConfig): void {
     e.preventDefault();
+    e.stopPropagation();
     const target = e.currentTarget as HTMLElement;
     target.setPointerCapture(e.pointerId);
 
@@ -483,6 +490,7 @@ export class EcoApplauncherKeyboard extends DeesElement {
 
   private handlePointerUp(e: PointerEvent, config: IKeyConfig): void {
     e.preventDefault();
+    e.stopPropagation();
     this.clearLongPressTimer();
     this.keyPreview = null;
 

ts_web/elements/00group-applauncher/eco-applauncher/eco-applauncher.ts

@@ -644,7 +644,11 @@ export class EcoApplauncher extends DeesElement {
       <div class="launcher-container">
         ${this.mode === 'login' ? '' : this.renderTopBar()}
         ${this.renderMainContent()}
-        <div class="keyboard-area ${this.keyboardVisible ? 'visible' : ''}">
+        <div
+          class="keyboard-area ${this.keyboardVisible ? 'visible' : ''}"
+          tabindex="-1"
+          @mousedown=${(e: MouseEvent) => e.preventDefault()}
+        >
           <eco-applauncher-keyboard
             ?visible=${this.keyboardVisible}
             @key-press=${this.handleKeyboardKeyPress}
@@ -962,7 +966,9 @@ export class EcoApplauncher extends DeesElement {
     return html`
       <div
         class="status-item clickable ${this.keyboardVisible ? 'active' : ''}"
+        tabindex="-1"
         @click=${this.handleKeyboardToggle}
+        @mousedown=${(e: MouseEvent) => e.preventDefault()}
       >
         <dees-icon .icon=${'lucide:keyboard'} .iconSize=${18}></dees-icon>
       </div>