@design.estate/dees-catalog 1.0.235 → 1.0.237

package/dist_watch/bundle.js

@@ -59301,7 +59301,7 @@ var Action = function(_super) {
   function Action2(scheduler, work) {
     return _super.call(this) || this;
   }
-  Action2.prototype.schedule = function(state6, delay) {
+  Action2.prototype.schedule = function(state7, delay) {
     if (delay === void 0) {
       delay = 0;
     }
@@ -59340,7 +59340,7 @@ var AsyncAction = function(_super) {
     _this.pending = false;
     return _this;
   }
-  AsyncAction2.prototype.schedule = function(state6, delay) {
+  AsyncAction2.prototype.schedule = function(state7, delay) {
     var _a;
     if (delay === void 0) {
       delay = 0;
@@ -59348,7 +59348,7 @@ var AsyncAction = function(_super) {
     if (this.closed) {
       return this;
     }
-    this.state = state6;
+    this.state = state7;
     var id = this.id;
     var scheduler = this.scheduler;
     if (id != null) {
@@ -59377,23 +59377,23 @@ var AsyncAction = function(_super) {
     }
     return void 0;
   };
-  AsyncAction2.prototype.execute = function(state6, delay) {
+  AsyncAction2.prototype.execute = function(state7, delay) {
     if (this.closed) {
       return new Error("executing a cancelled action");
     }
     this.pending = false;
-    var error = this._execute(state6, delay);
+    var error = this._execute(state7, delay);
     if (error) {
       return error;
     } else if (this.pending === false && this.id != null) {
       this.id = this.recycleAsyncId(this.scheduler, this.id, null);
     }
   };
-  AsyncAction2.prototype._execute = function(state6, _delay) {
+  AsyncAction2.prototype._execute = function(state7, _delay) {
     var errored = false;
     var errorValue;
     try {
-      this.work(state6);
+      this.work(state7);
     } catch (e11) {
       errored = true;
       errorValue = e11 ? e11 : new Error("Scheduled action threw falsy error");
@@ -59429,11 +59429,11 @@ var Scheduler = function() {
     this.schedulerActionCtor = schedulerActionCtor;
     this.now = now2;
   }
-  Scheduler2.prototype.schedule = function(work, delay, state6) {
+  Scheduler2.prototype.schedule = function(work, delay, state7) {
     if (delay === void 0) {
       delay = 0;
     }
-    return new this.schedulerActionCtor(this, work).schedule(state6, delay);
+    return new this.schedulerActionCtor(this, work).schedule(state7, delay);
   };
   Scheduler2.now = dateTimestampProvider.now;
   return Scheduler2;
@@ -64371,18 +64371,18 @@ var isNode = Object.prototype.toString.call(typeof process !== "undefined" ? pro
 var microSeconds2 = microSeconds;
 var type = "native";
 function create(channelName) {
-  var state6 = {
+  var state7 = {
     messagesCallback: null,
     bc: new BroadcastChannel(channelName),
     subFns: []
     // subscriberFunctions
   };
-  state6.bc.onmessage = function(msg) {
-    if (state6.messagesCallback) {
-      state6.messagesCallback(msg.data);
+  state7.bc.onmessage = function(msg) {
+    if (state7.messagesCallback) {
+      state7.messagesCallback(msg.data);
     }
   };
-  return state6;
+  return state7;
 }
 function close(channelState) {
   channelState.bc.close();
@@ -64626,7 +64626,7 @@ function cleanOldMessages(db, ttl) {
 function create2(channelName, options) {
   options = fillOptionsWithDefaults(options);
   return createDatabase(channelName).then(function(db) {
-    var state6 = {
+    var state7 = {
       closed: false,
       lastCursorId: 0,
       channelName,
@@ -64645,54 +64645,54 @@ function create2(channelName, options) {
       db
     };
     db.onclose = function() {
-      state6.closed = true;
+      state7.closed = true;
       if (options.idb.onclose)
         options.idb.onclose();
     };
-    _readLoop(state6);
-    return state6;
+    _readLoop(state7);
+    return state7;
   });
 }
-function _readLoop(state6) {
-  if (state6.closed)
+function _readLoop(state7) {
+  if (state7.closed)
     return;
-  readNewMessages(state6).then(function() {
-    return sleep(state6.options.idb.fallbackInterval);
+  readNewMessages(state7).then(function() {
+    return sleep(state7.options.idb.fallbackInterval);
   }).then(function() {
-    return _readLoop(state6);
+    return _readLoop(state7);
   });
 }
-function _filterMessage(msgObj, state6) {
-  if (msgObj.uuid === state6.uuid)
+function _filterMessage(msgObj, state7) {
+  if (msgObj.uuid === state7.uuid)
     return false;
-  if (state6.eMIs.has(msgObj.id))
+  if (state7.eMIs.has(msgObj.id))
     return false;
-  if (msgObj.data.time < state6.messagesCallbackTime)
+  if (msgObj.data.time < state7.messagesCallbackTime)
     return false;
   return true;
 }
-function readNewMessages(state6) {
-  if (state6.closed)
+function readNewMessages(state7) {
+  if (state7.closed)
     return Promise.resolve();
-  if (!state6.messagesCallback)
+  if (!state7.messagesCallback)
     return Promise.resolve();
-  return getMessagesHigherThan(state6.db, state6.lastCursorId).then(function(newerMessages) {
+  return getMessagesHigherThan(state7.db, state7.lastCursorId).then(function(newerMessages) {
     var useMessages = newerMessages.filter(function(msgObj) {
       return !!msgObj;
     }).map(function(msgObj) {
-      if (msgObj.id > state6.lastCursorId) {
-        state6.lastCursorId = msgObj.id;
+      if (msgObj.id > state7.lastCursorId) {
+        state7.lastCursorId = msgObj.id;
       }
       return msgObj;
     }).filter(function(msgObj) {
-      return _filterMessage(msgObj, state6);
+      return _filterMessage(msgObj, state7);
     }).sort(function(msgObjA, msgObjB) {
       return msgObjA.time - msgObjB.time;
     });
     useMessages.forEach(function(msgObj) {
-      if (state6.messagesCallback) {
-        state6.eMIs.add(msgObj.id);
-        state6.messagesCallback(msgObj.data);
+      if (state7.messagesCallback) {
+        state7.eMIs.add(msgObj.id);
+        state7.messagesCallback(msgObj.data);
       }
     });
     return Promise.resolve();
@@ -64798,25 +64798,25 @@ function create3(channelName, options) {
   }
   var uuid = randomToken();
   var eMIs = new ObliviousSet(options.localstorage.removeTimeout);
-  var state6 = {
+  var state7 = {
     channelName,
     uuid,
     eMIs
     // emittedMessagesIds
   };
-  state6.listener = addStorageEventListener(channelName, function(msgObj) {
-    if (!state6.messagesCallback)
+  state7.listener = addStorageEventListener(channelName, function(msgObj) {
+    if (!state7.messagesCallback)
       return;
     if (msgObj.uuid === uuid)
       return;
     if (!msgObj.token || eMIs.has(msgObj.token))
       return;
-    if (msgObj.data.time && msgObj.data.time < state6.messagesCallbackTime)
+    if (msgObj.data.time && msgObj.data.time < state7.messagesCallbackTime)
       return;
     eMIs.add(msgObj.token);
-    state6.messagesCallback(msgObj.data);
+    state7.messagesCallback(msgObj.data);
   });
-  return state6;
+  return state7;
 }
 function close3(channelState) {
   removeStorageEventListener(channelState.listener);
@@ -64864,12 +64864,12 @@ var microSeconds5 = microSeconds;
 var type4 = "simulate";
 var SIMULATE_CHANNELS = /* @__PURE__ */ new Set();
 function create4(channelName) {
-  var state6 = {
+  var state7 = {
     name: channelName,
     messagesCallback: null
   };
-  SIMULATE_CHANNELS.add(state6);
-  return state6;
+  SIMULATE_CHANNELS.add(state7);
+  return state7;
 }
 function close4(channelState) {
   SIMULATE_CHANNELS["delete"](channelState);
@@ -65584,11 +65584,11 @@ var SmartRouter = class {
   /**
    * Push route state to history stack
    */
-  async pushUrl(url2 = "/", state6 = {}) {
+  async pushUrl(url2 = "/", state7 = {}) {
     if (url2 !== window.location.pathname) {
-      window.history.pushState(state6, window.document.title, url2);
+      window.history.pushState(state7, window.document.title, url2);
     } else {
-      window.history.replaceState(state6, window.document.title, url2);
+      window.history.replaceState(state7, window.document.title, url2);
     }
     await this._handleRouteState();
   }
@@ -65871,7 +65871,7 @@ var StatePart = class {
    */
   select(selectorFn) {
     if (!selectorFn) {
-      selectorFn = (state6) => state6;
+      selectorFn = (state7) => state7;
     }
     const mapped = this.state.pipe(dist_ts_exports2.rxjs.ops.startWith(this.getState()), dist_ts_exports2.rxjs.ops.map((stateArg) => {
       try {
@@ -67455,8 +67455,8 @@ var DeesElement = class extends lit.LitElement {
   }
   async connectedCallback() {
     super.connectedCallback();
-    const domtools6 = await this.domtoolsPromise;
-    this.themeSubscription = domtools6.themeManager.themeObservable.subscribe((goBrightArg) => {
+    const domtools7 = await this.domtoolsPromise;
+    this.themeSubscription = domtools7.themeManager.themeObservable.subscribe((goBrightArg) => {
       this.goBright = goBrightArg;
     });
     this.rxSubscriptions.push(this.themeSubscription);
@@ -67785,7 +67785,7 @@ var WccSidebar = class WccSidebar2 extends DeesElement {
               <div
                 class="selectOption ${this.selectedItem === item ? "selected" : null}"
                 @click=${async () => {
-          const domtools6 = await dist_ts_exports25.DomTools.setupDomTools();
+          const domtools7 = await dist_ts_exports25.DomTools.setupDomTools();
           this.selectItem("page", pageName, item);
         }}
               >
@@ -67804,7 +67804,7 @@ var WccSidebar = class WccSidebar2 extends DeesElement {
               <div
                 class="selectOption ${this.selectedItem === item ? "selected" : null}"
                 @click=${async () => {
-          const domtools6 = await dist_ts_exports25.DomTools.setupDomTools();
+          const domtools7 = await dist_ts_exports25.DomTools.setupDomTools();
           this.selectItem("element", elementName, item);
         }}
               >
@@ -69048,6 +69048,7 @@ __export(elements_exports, {
   DeesTable: () => DeesTable,
   DeesToast: () => DeesToast,
   DeesUpdater: () => DeesUpdater,
+  DeesWindowControls: () => DeesWindowControls,
   DeesWindowLayer: () => DeesWindowLayer,
   faIcons: () => faIcons
 });
@@ -69186,7 +69187,6 @@ DeesButton.styles = [
       }
 
       .button:hover {
-        cursor: pointer;
         background: #039be5;
         color: #ffffff;
         border: 1px solid #039be5;
@@ -69449,7 +69449,6 @@ DeesChips.styles = [
 
       .chip:hover {
         background: #666666;
-        cursor: pointer;
       }
 
       .chip.selected {
@@ -69570,10 +69569,10 @@ var DeesWindowLayer = class extends DeesElement {
       blur: false
     };
     this.visible = false;
-    domtools_elementbasic_exports.setup();
+    dist_ts_exports25.elementBasic.setup();
   }
   static async createAndShow(optionsArg) {
-    const domtoolsInstance = DomTools.getGlobalDomToolsSync();
+    const domtoolsInstance = dist_ts_exports25.DomTools.getGlobalDomToolsSync();
     const windowLayer = new DeesWindowLayer();
     windowLayer.options = {
       ...windowLayer.options,
@@ -69586,7 +69585,7 @@ var DeesWindowLayer = class extends DeesElement {
   }
   render() {
     return x`
-      ${domtools_elementbasic_exports.styles}
+      ${dist_ts_exports25.elementBasic.styles}
       <style>
         .windowOverlay {
           transition: all 0.2s;
@@ -69639,19 +69638,19 @@ var DeesWindowLayer = class extends DeesElement {
     this.visible = !this.visible;
   }
   async show() {
-    const domtools6 = await this.domtoolsPromise;
-    await domtools6.convenience.smartdelay.delayFor(0);
+    const domtools7 = await this.domtoolsPromise;
+    await domtools7.convenience.smartdelay.delayFor(0);
     this.visible = true;
   }
   async hide() {
-    const domtools6 = await this.domtoolsPromise;
-    await domtools6.convenience.smartdelay.delayFor(0);
+    const domtools7 = await this.domtoolsPromise;
+    await domtools7.convenience.smartdelay.delayFor(0);
     this.visible = false;
   }
   async destroy() {
-    const domtools6 = await this.domtoolsPromise;
+    const domtools7 = await this.domtoolsPromise;
     await this.hide();
-    await domtools6.convenience.smartdelay.delayFor(300);
+    await domtools7.convenience.smartdelay.delayFor(300);
     this.remove();
   }
 };
@@ -69798,12 +69797,10 @@ DeesContextmenu.styles = [
       }
 
       .mainbox .menuitem:hover {
-        cursor: pointer;
         background: ${cssManager.bdTheme("#00000010", "#ffffff10")};
       }
 
       .mainbox .menuitem:active {
-        cursor: pointer;
         background: #ffffff05;
       }
     `
@@ -69870,51 +69867,22 @@ var DeesDataviewCodebox = class extends DeesElement {
         }
 
         .appbar {
+          position: relative;
           color: ${cssManager.bdTheme("#333", "#ccc")};
           background: ${cssManager.bdTheme("#ffffff", "#161616")};
           border-bottom: 1px solid ${cssManager.bdTheme("#eeeeeb", "#222222")};
           height: 24px;
+          display: flex;
           font-size: 12px;
           line-height: 24px;
-        }
-
-        .appbar .macControls {
-          position: absolute;
-          top: 6px;
-          left: 20px;
-          width: 200px;
-          display: grid;
-          grid-template-columns: 24px 24px 24px;
-        }
-
-        .appbar .macControls div {
-          width: 12px;
-          height: 12px;
-          display: inline-block;
-          border-radius: 50%;
-          margin: 0px;
-          padding: 0px;
-          cursor: pointer;
-          background: #222222;
-        }
-
-        .appbar .macControls div.close {
-          background: #ff5f57;
-        }
-
-        .appbar .macControls div.toDock {
-          background: #ffbd2e;
-        }
-
-        .appbar .macControls div.minMax {
-          background: #27c93f;
-        }
-
-        .appbar .macControls div:hover {
-          background: #333333;
+          justify-content: center;
+          align-items: center;
         }
 
         .appbar .fileName {
+          line-height: inherit;
+          position: relative;
+          flex: 1;
           text-align: center;
         }
 
@@ -70018,12 +69986,9 @@ var DeesDataviewCodebox = class extends DeesElement {
     }}"
       >
         <div class="appbar">
-          <div class="macControls">
-            <div class="close"></div>
-            <div class="toDock"></div>
-            <div class="minMax"></div>
-          </div>
+          <dees-windowcontrols type="mac" position="left"></dees-windowcontrols>
           <div class="fileName">index.ts</div>
+          <dees-windowcontrols type="mac" position="right"></dees-windowcontrols>
         </div>
         <div class="codegrid">
           <div class="lineNumbers">
@@ -70188,7 +70153,6 @@ DeesDataviewStatusobject.styles = [
       }
 
       .copyMain {
-        cursor: pointer;
         font-size: 10px;
         font-weight: 600;
         text-transform: uppercase;
@@ -70268,7 +70232,6 @@ var DeesInputCheckbox = class extends DeesElement {
           display: block;
           position: relative;
           margin: 20px 0px;
-          cursor: pointer;
         }
 
         .maincontainer {
@@ -70485,7 +70448,7 @@ var DeesInputText = class extends DeesElement {
     this.disabled = false;
   }
   async togglePasswordView() {
-    const domtools6 = await this.domtoolsPromise;
+    const domtools7 = await this.domtoolsPromise;
     this.showPasswordBool = !this.showPasswordBool;
     console.log(`this.showPasswordBool is: ${this.showPasswordBool}`);
   }
@@ -70570,7 +70533,6 @@ DeesInputText.styles = [
       }
 
       .showPassword:hover {
-        cursor: pointer;
         background: ${cssManager.bdTheme("#00000010", "#ffffff10")};
       }
 
@@ -70699,7 +70661,6 @@ var DeesInputQuantitySelector = class extends DeesElement {
         }
 
         .selector:hover {
-          cursor: pointer;
         }
 
         .quantity {
@@ -70783,7 +70744,6 @@ var DeesInputRadio = class extends DeesElement {
           display: block;
           position: relative;
           margin: 20px 0px;
-          cursor: pointer;
         }
 
         .maincontainer {
@@ -71256,8 +71216,8 @@ var DeesTable = class extends DeesElement {
     this.determineColumnWidths();
   }
   async determineColumnWidths() {
-    const domtools6 = await this.domtoolsPromise;
-    await domtools6.convenience.smartdelay.delayFor(0);
+    const domtools7 = await this.domtoolsPromise;
+    await domtools7.convenience.smartdelay.delayFor(0);
     const table = this.shadowRoot.querySelector("table");
     if (!table)
       return;
@@ -71300,7 +71260,7 @@ var DeesTable = class extends DeesElement {
     return actions;
   }
   async handleCellEditing(event, itemArg, key) {
-    const domtools6 = await this.domtoolsPromise;
+    const domtools7 = await this.domtoolsPromise;
     const target = event.target;
     const originalColor = target.style.color;
     target.style.color = "transparent";
@@ -71380,7 +71340,6 @@ DeesTable.styles = [
 
       .headerActions {
         margin-left: auto;
-        cursor: pointer;
       }
       .headerAction {
         display: flex;
@@ -71414,7 +71373,7 @@ DeesTable.styles = [
         text-align: left;
       }
       tr:hover {
-        cursor: pointer;
+        
       }
       tr:hover td {
         background: ${cssManager.bdTheme("#22222210", "#ffffff10")};
@@ -71521,7 +71480,6 @@ DeesTable.styles = [
       }
 
       .footerActions .footerAction {
-        cursor: pointer;
         padding: 8px 16px;
         display: flex;
       }
@@ -73143,9 +73101,9 @@ var DeesFormSubmit = class extends DeesElement {
     parentElement.gatherAndDispatch();
   }
   async focus() {
-    const domtools6 = await this.domtoolsPromise;
+    const domtools7 = await this.domtoolsPromise;
     if (!this.disabled) {
-      domtools6.convenience.smartdelay.delayFor(0);
+      domtools7.convenience.smartdelay.delayFor(0);
       this.submit();
     }
   }
@@ -76142,22 +76100,26 @@ var DeesInputDropdown = class extends DeesElement {
     this.enableSearch = true;
     this.disabled = false;
     this.opensToTop = false;
+    this.filteredOptions = [];
+    this.highlightedIndex = 0;
+    this.isOpened = false;
     this.isElevated = false;
   }
   render() {
     return x`
-      <div class="maincontainer">
+      <div class="maincontainer" @keydown="${this.isOpened ? this.handleKeyDown : void 0}">
         ${this.label ? x`<div class="label">${this.label}</div>` : x``}
         <div class="selectionBox">
           ${this.enableSearch && !this.opensToTop ? x`
                 <div class="search">
-                  <input type="text" placeholder="Search" />
+                  <input type="text" placeholder="Search" @input="${this.handleSearch}" />
                 </div>
               ` : null}
-          ${this.options.map((option) => {
+          ${this.filteredOptions.map((option, index) => {
+      const isHighlighted = this.highlightedIndex === index;
       return x`
               <div
-                class="option"
+                class="option ${isHighlighted ? "highlighted" : ""}"
                 @click=${() => {
         this.updateSelection(option);
       }}
@@ -76168,7 +76130,7 @@ var DeesInputDropdown = class extends DeesElement {
     })}
           ${this.enableSearch && this.opensToTop ? x`
                 <div class="search">
-                  <input type="text" placeholder="Search" />
+                  <input type="text" placeholder="Search" @input="${this.handleSearch}" />
                 </div>
               ` : null}
         </div>
@@ -76189,6 +76151,7 @@ var DeesInputDropdown = class extends DeesElement {
   }
   firstUpdated() {
     this.selectedOption = this.selectedOption || this.options[0] || null;
+    this.filteredOptions = this.options;
   }
   async updateSelection(selectedOption) {
     this.selectedOption = selectedOption;
@@ -76204,6 +76167,7 @@ var DeesInputDropdown = class extends DeesElement {
     this.changeSubject.next(this);
   }
   async toggleSelectionBox() {
+    this.isOpened = !this.isOpened;
     const domtoolsInstance = await this.domtoolsPromise;
     const selectedBox = this.shadowRoot.querySelector(".selectedBox");
     const selectionBox = this.shadowRoot.querySelector(".selectionBox");
@@ -76264,6 +76228,31 @@ var DeesInputDropdown = class extends DeesElement {
       }
     }
   }
+  handleSearch(event) {
+    const searchTerm = event.target.value.toLowerCase();
+    this.filteredOptions = this.options.filter(
+      (option) => option.option.toLowerCase().includes(searchTerm)
+    );
+    this.highlightedIndex = 0;
+  }
+  handleKeyDown(event) {
+    if (!this.isOpened) {
+      console.log("discarded key event. Check why this function is called.");
+      return;
+    }
+    const key = event.key;
+    const maxIndex = this.filteredOptions.length - 1;
+    if (key === "ArrowDown") {
+      this.highlightedIndex = this.highlightedIndex + 1 > maxIndex ? 0 : this.highlightedIndex + 1;
+      event.preventDefault();
+    } else if (key === "ArrowUp") {
+      this.highlightedIndex = this.highlightedIndex - 1 < 0 ? maxIndex : this.highlightedIndex - 1;
+      event.preventDefault();
+    } else if (key === "Enter") {
+      this.updateSelection(this.filteredOptions[this.highlightedIndex]);
+      event.preventDefault();
+    }
+  }
 };
 DeesInputDropdown.demo = demoFunc11;
 DeesInputDropdown.styles = [
@@ -76292,7 +76281,6 @@ DeesInputDropdown.styles = [
 
       .selectedBox {
         user-select: none;
-        cursor: pointer;
         position: relative;
         max-width: 420px;
         height: 40px;
@@ -76306,18 +76294,17 @@ DeesInputDropdown.styles = [
         transition: all 0.2s ease;
       }
 
-      .accentTop {
-        border-top: 1px solid #e4002b;
+      .accentBottom {
+        background: #ffffff10;
       }
 
-      .accentBottom {
-        border-bottom: 1px solid #e4002b;
+      .accentTop {
+        background: #ffffff10;
       }
 
       .selectionBox {
         will-change: transform;
         pointer-events: none;
-        cursor: pointer;
         transition: all 0.2s ease;
         opacity: 0;
         background: ${cssManager.bdTheme("#ffffff", "#222222")};
@@ -76325,22 +76312,31 @@ DeesInputDropdown.styles = [
         box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
         min-height: 40px;
         border-radius: 3px;
-        padding: 4px;
-        transform: scale(0.99, 0.99);
+        padding: 4px 8px;
+        transform: scale(0.98, 0.98);
         position: absolute;
+        user-select: none;
       }
 
       .selectionBox.show {
         pointer-events: all;
         opacity: 1;
         transform: scale(1, 1);
+        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8);
       }
 
       .option {
         transition: all 0.1s;
-        line-height: 40px;
+        line-height: 32px;
         padding: 0px 4px;
         border-radius: 3px;
+        margin: 4px 0px;
+      }
+
+      .option.highlighted {
+        border-left: 2px solid #0277bd;
+        padding-left: 6px;
+        background: #ffffff20;
       }
 
       .option:hover {
@@ -76406,6 +76402,15 @@ __decorateClass([
 __decorateClass([
   r6()
 ], DeesInputDropdown.prototype, "opensToTop", 2);
+__decorateClass([
+  r6()
+], DeesInputDropdown.prototype, "filteredOptions", 2);
+__decorateClass([
+  r6()
+], DeesInputDropdown.prototype, "highlightedIndex", 2);
+__decorateClass([
+  r6()
+], DeesInputDropdown.prototype, "isOpened", 2);
 DeesInputDropdown = __decorateClass([
   t4("dees-input-dropdown")
 ], DeesInputDropdown);
@@ -76515,7 +76520,6 @@ DeesInputFileupload.styles = [
 
       .uploadButton {
         position: relative;
-        cursor: pointer;
         padding: 8px;
         max-width: 600px;
         background: ${cssManager.bdTheme("#fafafa", "#333333")};
@@ -76667,7 +76671,7 @@ var DeesMobilenavigation = class extends DeesElement {
    * inits the show
    */
   async show() {
-    const domtools6 = await this.domtoolsPromise;
+    const domtools7 = await this.domtoolsPromise;
     const main = this.shadowRoot.querySelector(".main");
     if (!this.windowLayer) {
       this.windowLayer = new DeesWindowLayer();
@@ -76677,16 +76681,16 @@ var DeesMobilenavigation = class extends DeesElement {
       });
     }
     document.body.append(this.windowLayer);
-    await domtools6.convenience.smartdelay.delayFor(0);
+    await domtools7.convenience.smartdelay.delayFor(0);
     this.windowLayer.show();
-    await domtools6.convenience.smartdelay.delayFor(0);
+    await domtools7.convenience.smartdelay.delayFor(0);
     main.classList.add("show");
   }
   /**
    * inits the hide function
    */
   async hide() {
-    const domtools6 = await this.domtoolsPromise;
+    const domtools7 = await this.domtoolsPromise;
     const main = this.shadowRoot.querySelector(".main");
     main.classList.remove("show");
     this.windowLayer.hide();
@@ -76745,7 +76749,6 @@ DeesMobilenavigation.styles = [
         padding: 8px;
         margin-left: -8px;
         margin-right: -8px;
-        cursor: pointer;
         border-radius: 3px;
       }
       .menuItem:hover {
@@ -76862,8 +76865,8 @@ var DeesModal = class extends DeesElement {
   }
   async firstUpdated(_changedProperties) {
     super.firstUpdated(_changedProperties);
-    const domtools6 = await this.domtoolsPromise;
-    await domtools6.convenience.smartdelay.delayFor(30);
+    const domtools7 = await this.domtoolsPromise;
+    await domtools7.convenience.smartdelay.delayFor(30);
     const modal = this.shadowRoot.querySelector(".modal");
     modal.classList.add("show");
   }
@@ -76875,10 +76878,10 @@ var DeesModal = class extends DeesElement {
     }
   }
   async destroy() {
-    const domtools6 = await this.domtoolsPromise;
+    const domtools7 = await this.domtoolsPromise;
     const modal = this.shadowRoot.querySelector(".modal");
     modal.classList.add("predestroy");
-    await domtools6.convenience.smartdelay.delayFor(200);
+    await domtools7.convenience.smartdelay.delayFor(200);
     document.body.removeChild(this);
     await this.windowLayer.destroy();
   }
@@ -76953,7 +76956,6 @@ DeesModal.styles = [
         text-align: center;
         font-size: 14px;
         border-right: 1px solid #222;
-        cursor: pointer;
       }
       .modal .bottomButtons .bottomButton:hover {
         background: #222;
@@ -77089,7 +77091,7 @@ var DeesSimpleAppDash = class extends DeesElement {
     `;
   }
   async firstUpdated(_changedProperties) {
-    const domtools6 = await this.domtoolsPromise;
+    const domtools7 = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
   }
 };
@@ -77157,7 +77159,7 @@ var DeesSimpleLogin = class extends DeesElement {
     `;
   }
   async firstUpdated(_changedProperties) {
-    const domtools6 = await this.domtoolsPromise;
+    const domtools7 = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
     const form = this.shadowRoot.querySelector("dees-form");
     await form.readyDeferred.promise;
@@ -77172,7 +77174,7 @@ var DeesSimpleLogin = class extends DeesElement {
    * allows switching to slotted content
    */
   async switchToSlottedContent() {
-    const domtools6 = await this.domtoolsPromise;
+    const domtools7 = await this.domtoolsPromise;
     const loginDiv = this.shadowRoot.querySelector(".login");
     const loginContainerDiv = this.shadowRoot.querySelector(".loginContainer");
     const slotContainerDiv = this.shadowRoot.querySelector(".slotContainer");
@@ -77180,10 +77182,10 @@ var DeesSimpleLogin = class extends DeesElement {
     loginDiv.style.transform = "translateY(20px)";
     loginContainerDiv.style.pointerEvents = "none";
     slotContainerDiv.style.transform = "translateY(20px)";
-    await domtools6.convenience.smartdelay.delayFor(300);
+    await domtools7.convenience.smartdelay.delayFor(300);
     slotContainerDiv.style.opacity = "1";
     slotContainerDiv.style.transform = "translateY(0px)";
-    await domtools6.convenience.smartdelay.delayFor(300);
+    await domtools7.convenience.smartdelay.delayFor(300);
     slotContainerDiv.style.pointerEvents = "all";
   }
 };
@@ -77269,7 +77271,6 @@ DeesSpeechbubble.styles = [
         display: block;
         box-sizing: border-box;
         color: ${cssManager.bdTheme("#333", "#fff")};
-        cursor: pointer;
         user-select: none;
       }
       :host([hidden]) {
@@ -77665,7 +77666,6 @@ DeesStepper.styles = [
         font-size: 12px;
         border-bottom-right-radius: 3px;
         background: ${cssManager.bdTheme("#00000008", "#ffffff08")};
-        cursor: pointer;
       }
 
       .step .goBack:hover {
@@ -77799,6 +77799,89 @@ DeesUpdater = __decorateClass([
   t4("dees-updater")
 ], DeesUpdater);
 
+// ts_web/elements/dees-windowcontrols.ts
+var DeesWindowControls = class extends DeesElement {
+  constructor() {
+    super(...arguments);
+    this.type = "mac";
+    this.position = "left";
+  }
+  render() {
+    return x`
+      ${this.type === "mac" && this.position === "left" || (this.type === "linux" || this.type === "windows") && this.position === "right" ? x`
+            <div class="windowControls">
+              <div class="close"></div>
+              <div class="toDock"></div>
+              <div class="minMax"></div>
+            </div>
+          ` : x``}
+    `;
+  }
+};
+// STATIC
+DeesWindowControls.demo = () => x`<dees-windowcontrols></dees-windowcontrols>`;
+DeesWindowControls.styles = [
+  cssManager.defaultStyles,
+  i`
+      :host {
+        position: relative;
+        display: block;
+        box-sizing: border-box;
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+
+      .windowControls {
+        height: 100%;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .windowControls div {
+        width: 12px;
+        height: 12px;
+        display: inline-block;
+        border-radius: 50%;
+        margin: 0px;
+        padding: 0px;
+        background: #222222;
+      }
+
+      .windowControls div.close {
+        background: #ff5f57;
+        margin-right: 12px;
+      }
+
+      .windowControls div.toDock {
+        background: #ffbd2e;
+        margin-right: 12px;
+      }
+
+      .windowControls div.minMax {
+        background: #27c93f;
+      }
+
+      .windowControls div:hover {
+        background: #333333;
+      }
+    `
+];
+__decorateClass([
+  n4({
+    reflect: true
+  })
+], DeesWindowControls.prototype, "type", 2);
+__decorateClass([
+  n4({
+    reflect: true
+  })
+], DeesWindowControls.prototype, "position", 2);
+DeesWindowControls = __decorateClass([
+  t4("dees-windowcontrols")
+], DeesWindowControls);
+
 // ts_web/pages/index.ts
 var pages_exports = {};
 __export(pages_exports, {