1.0.239

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.231",
+  "version": "1.0.239",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.231',
+  version: '1.0.239',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-button.ts

@@ -93,7 +93,6 @@ export class DeesButton extends DeesElement {
       }
 
       .button:hover {
-        cursor: pointer;
         background: #039be5;
         color: #ffffff;
         border: 1px solid #039be5;

ts_web/elements/dees-chips.ts

@@ -81,7 +81,6 @@ export class DeesChips extends DeesElement {
 
       .chip:hover {
         background: #666666;
-        cursor: pointer;
       }
 
       .chip.selected {

ts_web/elements/dees-contextmenu.ts

@@ -130,12 +130,10 @@ export class DeesContextmenu extends DeesElement {
       }
 
       .mainbox .menuitem:hover {
-        cursor: pointer;
         background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
       }
 
       .mainbox .menuitem:active {
-        cursor: pointer;
         background: #ffffff05;
       }
     `,

ts_web/elements/dees-dataview-codebox.ts

@@ -61,51 +61,22 @@ export class DeesDataviewCodebox 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;
         }
 
@@ -209,12 +180,9 @@ export class DeesDataviewCodebox 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">

ts_web/elements/dees-dataview-statusobject.ts

@@ -61,7 +61,6 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .copyMain {
-        cursor: pointer;
         font-size: 10px;
         font-weight: 600;
         text-transform: uppercase;

ts_web/elements/dees-form.demo.ts

@@ -20,9 +20,22 @@ export const demoFunc = () => html`
         form.setStatus('success', 'authenticated!');
       }}
     >
+      <dees-input-dropdown
+        .label=${'title'}
+        .options=${[
+          { option: 'option 1', key: 'option1' },
+          { option: 'option 2', key: 'option2' },
+          { option: 'option 3', key: 'option3' },
+        ]}
+      ></dees-input-dropdown>
       <dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
       <dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
-      <dees-input-text .required="${true}" key="hello3" label="a password" isPasswordBool></dees-input-text>
+      <dees-input-text
+        .required="${true}"
+        key="hello3"
+        label="a password"
+        isPasswordBool
+      ></dees-input-text>
       <dees-input-checkbox
         .required="${true}"
         key="hello3"

ts_web/elements/dees-input-checkbox.ts

@@ -62,7 +62,10 @@ export class DeesInputCheckbox extends DeesElement {
           display: block;
           position: relative;
           margin: 20px 0px;
-          cursor: pointer;
+          cursor: default;
+        }
+        :host(:hover) {
+          filter: ${cssManager.bdTheme('brightness(0.95)', 'brightness(1.1)')};
         }
 
         .maincontainer {

ts_web/elements/dees-input-dropdown.demo.ts

@@ -8,4 +8,20 @@ export const demoFunc = () => html`
     {option: 'option 3', key: 'option3'}
   ]}
 ></dees-input-dropdown>
+<dees-input-dropdown
+  .enableSearch=${false}
+  .options=${[
+    {option: 'option 1', key: 'option1'},
+    {option: 'option 2', key: 'option2'},
+    {option: 'option 3', key: 'option3'}
+  ]}
+></dees-input-dropdown>
+<div style="height: 300px"></div>
+<dees-input-dropdown
+  .options=${[
+    {option: 'option 1', key: 'option1'},
+    {option: 'option 2', key: 'option2'},
+    {option: 'option 3', key: 'option3'}
+  ]}
+></dees-input-dropdown>
 `

ts_web/elements/dees-input-dropdown.ts

@@ -1,6 +1,17 @@
-import { customElement, DeesElement, type TemplateResult, property, html, css, cssManager, type CSSResult, } from '@design.estate/dees-element';
+import {
+  customElement,
+  DeesElement,
+  type TemplateResult,
+  property,
+  state,
+  html,
+  css,
+  cssManager,
+  type CSSResult,
+} from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-input-dropdown.demo.js';
+import { DeesWindowLayer } from './dees-windowlayer.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -10,7 +21,7 @@ declare global {
 
 @customElement('dees-input-dropdown')
 export class DeesInputDropdown extends DeesElement {
-  public static demo = demoFunc
+  public static demo = demoFunc;
 
   // INSTANCE
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();
@@ -25,144 +36,317 @@ export class DeesInputDropdown extends DeesElement {
   public key: string;
 
   @property()
-  public options: {option: string, key: string, payload?: any}[] = [];
+  public options: { option: string; key: string; payload?: any }[] = [];
 
   @property()
-  public selectedOption: {option: string, key: string, payload?: any} = {
-    key: null,
-    option: null,
-    payload: null
-  };
+  public selectedOption: { option: string; key: string; payload?: any } = null;
 
   @property({
-    type: Boolean
+    type: Boolean,
   })
   public required: boolean = false;
 
   @property({
-    type: Boolean
+    type: Boolean,
+  })
+  public enableSearch: boolean = true;
+
+  @property({
+    type: Boolean,
   })
   public disabled: boolean = false;
 
+  @state()
+  public opensToTop: boolean = false;
+
+  @state()
+  private filteredOptions: { option: string; key: string; payload?: any }[] = [];
+
+  @state()
+  private highlightedIndex: number = 0;
+
+  @state()
+  public isOpened = false;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
       * {
-          box-sizing: border-box;
-        }
+        box-sizing: border-box;
+      }
 
-        :host {
-          position: relative;
-          display: block;
-          height: 40px;
-          color: ${cssManager.bdTheme('#222', '#fff')};
-        }
+      :host {
+        font-family: Roboto;
+        position: relative;
+        display: block;
+        color: ${cssManager.bdTheme('#222', '#fff')};
+        margin-bottom: 24px;
+      }
 
-        .maincontainer {
-          display: block;
-        }
+      .maincontainer {
+        display: block;
+      }
 
-        .label {
-          font-size: 14px;
-          margin-bottom: 15px;
-        }
+      .label {
+        font-size: 14px;
+        margin-bottom: 4px;
+      }
 
-        .selectedBox {
-          cursor: pointer;
-          position: relative;
-          max-width: 420px;
-          height: 40px;
-          line-height: 40px;
-          padding: 0px 8px;
-          z-index: 0px;
-          background: ${cssManager.bdTheme('#ffffff', '#333333')};
-          box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
-          border-radius: 3px;
-          border-top: 1px solid #CCCCCC00;
-          border-bottom: 1px solid #66666600;
-        }
+      .selectedBox {
+        user-select: none;
+        position: relative;
+        max-width: 420px;
+        height: 40px;
+        line-height: 40px;
+        padding: 0px 8px;
+        background: ${cssManager.bdTheme('#fafafa', '#222222')};
+        box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
+        border-radius: 3px;
+        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
+        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
+        transition: all 0.2s ease;
+      }
 
-        .selectedBox.show {
-          border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#666666')};
-          border-bottom: 1px solid ${cssManager.bdTheme('#fafafa', '#222222')};
-        }
+      .selectedBox:hover {
+        filter: ${cssManager.bdTheme('brightness(0.95)', 'brightness(1.1)')};
+      }
 
-        .selectionBox {
-          will-change:transform;
-          pointer-events: none;
-          cursor: pointer;
-          transition: all 0.2s ease;
-          opacity: 0;
-          position: absolute;
-          background: ${cssManager.bdTheme('#ffffff', '#222222')};
-          max-width: 420px;
-          box-shadow: 0px 0px 5px  rgba(0,0,0,0.2);
-          min-height: 40px;
-          z-index: 100;
-          border-radius: 3px;
-          padding: 4px;
-          transform: scale(0.99,0.99);
-        }
+      .accentBottom {
+        filter: none !important;
+      }
 
-        .selectionBox.show {
-          pointer-events: all;
-          opacity: 1;
-          transform: scale(1,1);
-        }
+      .accentTop {
+        filter: none !important;
+      }
 
-        .option {
-          transition: all 0.1s;
-          line-height: 40px;
-          padding: 0px 4px;
-          border-radius: 3px;
-        }
+      .selectionBox {
+        will-change: transform;
+        pointer-events: none;
+        transition: all 0.2s ease;
+        opacity: 0;
+        background: ${cssManager.bdTheme('#ffffff', '#222222')};
+        max-width: 420px;
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+        min-height: 40px;
+        border-radius: 3px;
+        padding: 4px 8px;
+        transform: scale(0.98, 0.98);
+        position: absolute;
+        user-select: none;
+      }
 
-        .option:hover {
-          color: #fff;
-          padding-left: 8px;
-          background: #0277bd;
-        }
-    `
-  ]
+      .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: 32px;
+        padding: 0px 4px;
+        border-radius: 3px;
+        margin: 4px 0px;
+      }
+
+      .option.highlighted {
+        border-left: 2px solid #0277bd;
+        padding-left: 6px;
+        background: #ffffff20;
+      }
+
+      .option:hover {
+        color: #fff;
+        padding-left: 8px;
+        background: #0277bd;
+      }
+
+      .search {
+        padding: 8px;
+      }
+      .search input {
+        display: block;
+        width: 80%;
+        background: none;
+        border: none;
+        height: 24px;
+        color: inherit;
+        text-align: center;
+        font-size: 12px;
+        font-weight: 600;
+        background: ${cssManager.bdTheme('#00000010', '#ffffff08')};
+        border-radius: 16px;
+        margin: auto;
+      }
+
+      .search input:focus {
+        border: none;
+        outline: none;
+      }
+    `,
+  ];
 
   public render(): TemplateResult {
     return html`
-      <div class="maincontainer">
-        <div class="selectedBox show" @click="${event => {this.openSelectionBox();}}">
-          ${this.selectedOption?.option}
-        </div>
+      <div class="maincontainer" @keydown="${this.isOpened ? this.handleKeyDown : undefined}">
+        ${this.label ? html`<div class="label">${this.label}</div>` : html``}
         <div class="selectionBox">
-          ${this.options.map(option => {
+          ${this.enableSearch && !this.opensToTop
+            ? html`
+                <div class="search">
+                  <input type="text" placeholder="Search" @input="${this.handleSearch}" />
+                </div>
+              `
+            : null}
+          ${this.filteredOptions.map((option, index) => {
+            const isHighlighted = this.highlightedIndex === index;
             return html`
-              <div class="option" @click=${() => {this.updateSelection(option);}}>${option.option}</div>
-            `
+              <div
+                class="option ${isHighlighted ? 'highlighted' : ''}"
+                @click=${() => {
+                  this.updateSelection(option);
+                }}
+              >
+                ${option.option}
+              </div>
+            `;
           })}
+          ${this.enableSearch && this.opensToTop
+            ? html`
+                <div class="search">
+                  <input type="text" placeholder="Search" @input="${this.handleSearch}" />
+                </div>
+              `
+            : null}
+        </div>
+        <div
+          class="selectedBox"
+          @click="${(event) => {
+            if (!this.isElevated) {
+              this.toggleSelectionBox();
+            } else {
+              this.updateSelection(this.selectedOption);
+            }
+          }}"
+        >
+          ${this.selectedOption?.option}
         </div>
       </div>
     `;
   }
 
   firstUpdated() {
-    this.selectedOption = this.options[0] || null;
+    this.selectedOption = this.selectedOption || this.options[0] || null;
+    this.filteredOptions = this.options; // Initialize filteredOptions
   }
 
   public async updateSelection(selectedOption) {
     this.selectedOption = selectedOption;
 
-    this.dispatchEvent(new CustomEvent('selectedOption', {
-      detail: selectedOption,
-      bubbles: true
-    }));
-    this.openSelectionBox();
+    this.dispatchEvent(
+      new CustomEvent('selectedOption', {
+        detail: selectedOption,
+        bubbles: true,
+      })
+    );
+    if (this.isElevated) {
+      this.toggleSelectionBox();
+    }
     this.changeSubject.next(this);
   }
 
-  public openSelectionBox() {
-    this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
-    this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
+  private isElevated: boolean = false;
+  private windowOverlay: DeesWindowLayer;
+  public async toggleSelectionBox() {
+    this.isOpened = !this.isOpened;
+    const domtoolsInstance = await this.domtoolsPromise;
+    const selectedBox: HTMLElement = this.shadowRoot.querySelector('.selectedBox');
+    const selectionBox: HTMLElement = this.shadowRoot.querySelector('.selectionBox');
+    if (!this.isElevated) {
+      this.windowOverlay = await DeesWindowLayer.createAndShow({
+        blur: false,
+      });
+      const elevatedDropdown = new DeesInputDropdown();
+      elevatedDropdown.isElevated = true;
+      elevatedDropdown.label = this.label;
+      elevatedDropdown.enableSearch = this.enableSearch;
+      elevatedDropdown.required = this.required;
+      elevatedDropdown.disabled = this.disabled;
+      elevatedDropdown.style.position = 'fixed';
+      elevatedDropdown.style.top = this.getBoundingClientRect().top + 'px';
+      elevatedDropdown.style.left = this.getBoundingClientRect().left + 'px';
+      elevatedDropdown.style.width = this.clientWidth + 'px';
+      elevatedDropdown.options = this.options;
+      elevatedDropdown.selectedOption = this.selectedOption;
+      console.log(elevatedDropdown.selectedOption);
+      this.windowOverlay.appendChild(elevatedDropdown);
+      await domtoolsInstance.convenience.smartdelay.delayFor(0);
+      elevatedDropdown.toggleSelectionBox();
+      const destroyOverlay = async () => {
+        (elevatedDropdown.shadowRoot.querySelector('.selectionBox') as HTMLElement).style.opacity =
+          '0';
+        elevatedDropdown.removeEventListener('selectedOption', handleSelection);
+        this.windowOverlay.removeEventListener('clicked', destroyOverlay);
+        this.windowOverlay.destroy();
+      };
+      const handleSelection = async (event) => {
+        await this.updateSelection(elevatedDropdown.selectedOption);
+        destroyOverlay();
+      };
+      elevatedDropdown.addEventListener('selectedOption', handleSelection);
+      this.windowOverlay.addEventListener('clicked', destroyOverlay);
+    } else {
+      if (!selectionBox.classList.contains('show')) {
+        selectionBox.style.width = selectedBox.clientWidth + 'px';
+        selectionBox.classList.add('show');
+        const spaceData = selectedBox.getBoundingClientRect();
+        if (300 > window.innerHeight - spaceData.bottom) {
+          this.opensToTop = true;
+          selectedBox.classList.add('accentTop');
+          selectionBox.style.bottom = selectedBox.clientHeight + 2 + 'px';
+        } else {
+          selectedBox.classList.add('accentBottom');
+          this.opensToTop = false;
+          const labelOffset = this.label ? 24 : 0;
+          selectionBox.style.top = selectedBox.clientHeight + labelOffset + 'px';
+        }
+        await domtoolsInstance.convenience.smartdelay.delayFor(0);
+        const searchInput = selectionBox.querySelector('input');
+        searchInput.focus();
+      } else {
+        selectedBox.style.pointerEvents = 'none';
+        selectionBox.classList.remove('show');
+        selectedBox.style.opacity = '0';
+      }
+    }
   }
 
-  public closeSelectionBox() {
-    
+  private handleSearch(event: Event): void {
+    const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
+    this.filteredOptions = this.options.filter((option) =>
+      option.option.toLowerCase().includes(searchTerm)
+    );
+    this.highlightedIndex = 0; // Reset highlighted index
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    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();
+    }
   }
 }

ts_web/elements/dees-input-fileupload.ts

@@ -88,7 +88,6 @@ export class DeesInputFileupload extends DeesElement {
 
       .uploadButton {
         position: relative;
-        cursor: pointer;
         padding: 8px;
         max-width: 600px;
         background: ${cssManager.bdTheme('#fafafa', '#333333')};

ts_web/elements/dees-input-quantityselector.ts

@@ -85,7 +85,6 @@ export class DeesInputQuantitySelector extends DeesElement {
         }
 
         .selector:hover {
-          cursor: pointer;
         }
 
         .quantity {

ts_web/elements/dees-input-radio.ts

@@ -51,7 +51,6 @@ export class DeesInputRadio extends DeesElement {
           display: block;
           position: relative;
           margin: 20px 0px;
-          cursor: pointer;
         }
 
         .maincontainer {

ts_web/elements/dees-input-text.ts

@@ -120,6 +120,7 @@ export class DeesInputText extends DeesElement {
         font-size: 16px;
         position: relative;
         z-index: 2;
+        cursor: default;
         // see template for more
       }
 
@@ -133,6 +134,11 @@ export class DeesInputText extends DeesElement {
       input:focus {
         outline: none;
         border-bottom: 1px solid #e4002b;
+        cursor: text;
+      }
+
+      input:hover {
+        filter: ${cssManager.bdTheme('brightness(0.95)', 'brightness(1.1)')};
       }
 
       .showPassword {
@@ -143,10 +149,10 @@ export class DeesInputText extends DeesElement {
         border-radius: 7px;
         padding: 4px 0px;
         width: 40px;
+        z-index: 3;
       }
 
       .showPassword:hover {
-        cursor: pointer;
         background: ${cssManager.bdTheme('#00000010', '#ffffff10')};
       }
 
@@ -169,7 +175,7 @@ export class DeesInputText extends DeesElement {
     return html`
       <style>
         input {
-          font-family: ${this.isPasswordBool ? 'monospace' : 'Inter'};
+          font-family: ${this.isPasswordBool ? 'monospace' : 'Roboto'};
           letter-spacing: ${this.isPasswordBool ? '1px' : 'normal'};
           color: ${this.goBright ? '#333' : '#ccc'};
         }

ts_web/elements/dees-mobilenavigation.ts

@@ -105,7 +105,6 @@ export class DeesMobilenavigation extends DeesElement {
         padding: 8px;
         margin-left: -8px;
         margin-right: -8px;
-        cursor: pointer;
         border-radius: 3px;
       }
       .menuItem:hover {

ts_web/elements/dees-modal.ts

@@ -133,7 +133,6 @@ export class DeesModal extends DeesElement {
         text-align: center;
         font-size: 14px;
         border-right: 1px solid #222;
-        cursor: pointer;
       }
       .modal .bottomButtons .bottomButton:hover {
         background: #222;

ts_web/elements/dees-speechbubble.ts

@@ -52,7 +52,6 @@ export class DeesSpeechbubble extends DeesElement {
         display: block;
         box-sizing: border-box;
         color: ${cssManager.bdTheme('#333', '#fff')};
-        cursor: pointer;
         user-select: none;
       }
       :host([hidden]) {

ts_web/elements/dees-stepper.ts

@@ -144,7 +144,6 @@ export class DeesStepper extends DeesElement {
         font-size: 12px;
         border-bottom-right-radius: 3px;
         background: ${cssManager.bdTheme('#00000008', '#ffffff08')};
-        cursor: pointer;
       }
 
       .step .goBack:hover {

ts_web/elements/dees-table.ts

@@ -202,7 +202,6 @@ export class DeesTable<T> extends DeesElement {
 
       .headerActions {
         margin-left: auto;
-        cursor: pointer;
       }
       .headerAction {
         display: flex;
@@ -236,7 +235,7 @@ export class DeesTable<T> extends DeesElement {
         text-align: left;
       }
       tr:hover {
-        cursor: pointer;
+        
       }
       tr:hover td {
         background: ${cssManager.bdTheme('#22222210', '#ffffff10')};
@@ -343,7 +342,6 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .footerActions .footerAction {
-        cursor: pointer;
         padding: 8px 16px;
         display: flex;
       }

ts_web/elements/dees-windowcontrols.ts

@@ -0,0 +1,99 @@
+import {
+  customElement,
+  DeesElement,
+  domtools,
+  type TemplateResult,
+  html,
+  property,
+  type CSSResult,
+  state,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-windowcontrols': DeesWindowControls;
+  }
+}
+
+@customElement('dees-windowcontrols')
+export class DeesWindowControls extends DeesElement {
+  // STATIC
+  public static demo = () => html`<dees-windowcontrols></dees-windowcontrols>`;
+
+  // Instance
+  @property({
+    reflect: true,
+  })
+  public type: 'mac' | 'linux' | 'windows' = 'mac';
+
+  @property({
+    reflect: true,
+  })
+  public position: 'left' | 'right' = 'left';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :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;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      ${(this.type === 'mac' && this.position === 'left') ||
+      ((this.type === 'linux' || this.type === 'windows') && this.position === 'right')
+        ? html`
+            <div class="windowControls">
+              <div class="close"></div>
+              <div class="toDock"></div>
+              <div class="minMax"></div>
+            </div>
+          `
+        : html``}
+    `;
+  }
+}

ts_web/elements/dees-windowlayer.ts

@@ -1,6 +1,4 @@
-import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
-
-import * as domtools from '@design.estate/dees-domtools';
+import { customElement, DeesElement, domtools, type TemplateResult, html, property, type CSSResult, state, } from '@design.estate/dees-element';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -67,16 +65,19 @@ export class DeesWindowLayer extends DeesElement {
           z-index: 200;
         }
         .slotContent {
+          position: fixed;
           height: 100vh;
           width: 100vw;
           display: flex;
           justify-content: center;
           align-items: center;
+          z-index: 201;
         }
         
         .visible {
           background: rgba(0, 0, 0, 0.2);
           backdrop-filter: brightness(0.9) ${this.options.blur ? 'blur(2px)' : ''};
+          pointer-events: all;
         }
       </style>
       <div class="windowOverlay ${this.visible ? 'visible' : null}">

ts_web/elements/index.ts

@@ -27,4 +27,5 @@ export * from './dees-stepper.js';
 export * from './dees-table.js';
 export * from './dees-toast.js';
 export * from './dees-updater.js';
+export * from './dees-windowcontrols.js';
 export * from './dees-windowlayer.js';