custom-electron-titlebar 4.2.4 → 4.2.6

package/README.md

@@ -2,9 +2,10 @@
 
 This project is a typescript library for electron that allows you to configure a fully customizable title bar.
 
-[![LICENSE](https://img.shields.io/github/license/AlexTorresDev/custom-electron-titlebar.svg)](https://github.com/AlexTorresDev/custom-electron-titlebar/blob/master/LICENSE)
-[![NPM Version](https://img.shields.io/npm/v/custom-electron-titlebar.svg)](https://npmjs.org/package/custom-electron-titlebar)
-[![install size](https://packagephobia.com/badge?p=custom-electron-titlebar)](https://packagephobia.com/result?p=custom-electron-titlebar)
+[![CI](https://badgen.net/github/checks/AlexTorresDev/custom-electron-titlebar?label=CI)](https://github.com/AlexTorresDev/custom-electron-titlebar/actions/workflows/build-release.yml)
+[![License](https://badgen.net/github/license/AlexTorresDev/custom-electron-titlebar?label=License)](https://github.com/AlexTorresDev/custom-electron-titlebar/blob/master/LICENSE)
+[![NPM](https://badgen.net/npm/v/custom-electron-titlebar?label=NPM)](https://npmjs.org/package/custom-electron-titlebar)
+[![Install size](https://badgen.net/packagephobia/install/custom-electron-titlebar?label=Install%20size)](https://packagephobia.com/result?p=custom-electron-titlebar)
 
 [📄 Visit Documentation](https://cet.alextrs.dev)
 
@@ -72,12 +73,14 @@ window.addEventListener('DOMContentLoaded', () => {
 To see the options you can include in the Title Bar constructor, such as color of elements, icons, menu position, and much more, and the methods you can use, go to the [wiki](https://github.com/AlexTorresDev/custom-electron-titlebar/wiki)
 
 ## 💰 Support
-If you want to support my development, you can do so by donating through [Buy me a coffee](https://www.buymeacoffee.com/AlexTorresDev)
+If you want to support my development, you can do so by donating through [💖 Sponsor](https://github.com/sponsors/AlexTorresDev)
 
 
-## 📝 Collaborators
+## 📝 Contributors
 I would like to express my sincere gratitude to all the people who have collaborated in the development and advancement of this project. I appreciate your contributions.
 
+[![](https://contrib.rocks/image?repo=AlexTorresDev/custom-electron-titlebar)](https://github.com/AlexTorresDev/custom-electron-titlebar/graphs/contributors)
+
 
 ## ✅ License
 This project is under the [MIT](https://github.com/AlexTorresDev/custom-electron-titlebar/blob/master/LICENSE) license.

package/base/browser/touch.js

@@ -50,7 +50,7 @@ var EventType;
   EventType.Start = '-monaco-gesturestart';
   EventType.End = '-monaco-gesturesend';
   EventType.Contextmenu = '-monaco-gesturecontextmenu';
-})(_assign__("EventType", exports.EventType || (exports.EventType = {})));
+})(_get__("EventType") || (exports.EventType = _assign__("EventType", {})));
 class Gesture extends _get__("lifecycle_1").Disposable {
   constructor() {
     super();
@@ -250,10 +250,10 @@ class Gesture extends _get__("lifecycle_1").Disposable {
     }
   }
 }
+exports.Gesture = _get__("Gesture");
 _get__("Gesture").SCROLL_FRICTION = -0.005;
 _get__("Gesture").HOLD_DELAY = 700;
 _get__("Gesture").CLEAR_TAP_COUNT_TIME = 400; // ms
-exports.Gesture = _get__("Gesture");
 function _getGlobalObject() {
   try {
     if (!!global) {

package/base/common/color.js

@@ -340,6 +340,7 @@ class Color {
     return of.darken(factor);
   }
 }
+exports.Color = _get__("Color");
 _get__("Color").WHITE = new (_get__("Color"))(new (_get__("RGBA"))(255, 255, 255, 1));
 _get__("Color").BLACK = new (_get__("Color"))(new (_get__("RGBA"))(0, 0, 0, 1));
 _get__("Color").RED = new (_get__("Color"))(new (_get__("RGBA"))(255, 0, 0, 1));
@@ -348,7 +349,6 @@ _get__("Color").GREEN = new (_get__("Color"))(new (_get__("RGBA"))(0, 255, 0, 1)
 _get__("Color").CYAN = new (_get__("Color"))(new (_get__("RGBA"))(0, 255, 255, 1));
 _get__("Color").LIGHTGREY = new (_get__("Color"))(new (_get__("RGBA"))(211, 211, 211, 1));
 _get__("Color").TRANSPARENT = new (_get__("Color"))(new (_get__("RGBA"))(0, 0, 0, 0));
-exports.Color = _get__("Color");
 (function (Color) {
   let Format;
   (function (Format) {
@@ -515,8 +515,7 @@ exports.Color = _get__("Color");
       }
     })(CSS = Format.CSS || (Format.CSS = {}));
   })(Format = Color.Format || (Color.Format = {}));
-})(_assign__("Color", exports.Color || (exports.Color = {})));
-exports.Color = _get__("Color");
+})(_get__("Color") || (exports.Color = _assign__("Color", {})));
 function _getGlobalObject() {
   try {
     if (!!global) {

package/base/common/event.js

@@ -298,7 +298,7 @@ var Event;
     return new Promise(c => once(event)(c));
   }
   Event.toPromise = toPromise;
-})(_assign__("Event", exports.Event || (exports.Event = {})));
+})(_get__("Event") || (exports.Event = _assign__("Event", {})));
 let _globalLeakWarningThreshold = -1;
 function setGlobalLeakWarningThreshold(n) {
   const oldValue = _get__("_globalLeakWarningThreshold");
@@ -479,8 +479,8 @@ class Emitter {
     this._disposed = true;
   }
 }
-_get__("Emitter")._noop = function () {};
 exports.Emitter = _get__("Emitter");
+_get__("Emitter")._noop = function () {};
 class AsyncEmitter extends _get__("Emitter") {
   async fireAsync(eventFn) {
     if (!this._listeners) {

package/base/common/iterator.js

@@ -94,7 +94,7 @@ var Iterator;
     return result;
   }
   Iterator.collect = collect;
-})(_assign__("Iterator", exports.Iterator || (exports.Iterator = {})));
+})(_get__("Iterator") || (exports.Iterator = _assign__("Iterator", {})));
 function getSequenceIterator(arg) {
   if (Array.isArray(arg)) {
     return _get__("Iterator").fromArray(arg);

package/base/common/keyCodes.js

@@ -176,7 +176,7 @@ var KeyCodeUtils;
     return _get__("userSettingsUSMap").strToKeyCode(key) || _get__("userSettingsGeneralMap").strToKeyCode(key);
   }
   KeyCodeUtils.fromUserSettings = fromUserSettings;
-})(_assign__("KeyCodeUtils", exports.KeyCodeUtils || (exports.KeyCodeUtils = {})));
+})(_get__("KeyCodeUtils") || (exports.KeyCodeUtils = _assign__("KeyCodeUtils", {})));
 function KeyChord(firstPart, secondPart) {
   const chordPart = (secondPart & 0x0000FFFF) << 16 >>> 0;
   return (firstPart | chordPart) >>> 0;

package/base/common/lifecycle.js

@@ -65,10 +65,10 @@ class Disposable {
     return t;
   }
 }
+exports.Disposable = _get__("Disposable");
 _get__("Disposable").None = Object.freeze({
   dispose() {}
 });
-exports.Disposable = _get__("Disposable");
 function _getGlobalObject() {
   try {
     if (!!global) {

package/base/common/platform.d.ts

@@ -5,12 +5,14 @@ export declare const enum Platform {
     Web = 0,
     Mac = 1,
     Linux = 2,
-    Windows = 3
+    FreeBSD = 3,
+    Windows = 4
 }
-export declare function PlatformToString(platform: Platform): "Windows" | "Linux" | "Web" | "Mac";
+export declare function PlatformToString(platform: Platform): "Windows" | "Linux" | "FreeBSD" | "Web" | "Mac";
 export declare const isWindows: boolean;
 export declare const isMacintosh: boolean;
 export declare const isLinux: boolean;
+export declare const isFreeBSD: boolean;
 export declare const isNative: boolean;
 export declare const isWeb: boolean;
 export declare const platform: Platform;
@@ -20,9 +22,10 @@ export declare function setImmediate(callback: (...args: any[]) => void): number
 export declare const enum OperatingSystem {
     Windows = 1,
     Macintosh = 2,
-    Linux = 3
+    Linux = 3,
+    FreeBSD = 4
 }
-export declare const OS: OperatingSystem;
+export declare const OS: number;
 export declare const enum AccessibilitySupport {
     /**
      * This should be the browser case where it is not known if a screen reader is attached or no.

package/base/common/platform.js

@@ -8,10 +8,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OS = exports.setImmediate = exports.globals = exports.isRootUser = exports.platform = exports.isWeb = exports.isNative = exports.isLinux = exports.isMacintosh = exports.isWindows = exports.PlatformToString = void 0;
+exports.OS = exports.setImmediate = exports.globals = exports.isRootUser = exports.platform = exports.isWeb = exports.isNative = exports.isFreeBSD = exports.isLinux = exports.isMacintosh = exports.isWindows = exports.PlatformToString = void 0;
 let _isWindows = false;
 let _isMacintosh = false;
 let _isLinux = false;
+let _isFreeBSD = false;
 let _isNative = false;
 let _isWeb = false;
 const isElectronRenderer = typeof process !== 'undefined' && typeof process.versions !== 'undefined' && typeof process.versions.electron !== 'undefined' && process.type === 'renderer';
@@ -21,11 +22,13 @@ if (typeof navigator === 'object' && !_get__("isElectronRenderer")) {
   _assign__("_isWindows", userAgent.indexOf('Windows') >= 0);
   _assign__("_isMacintosh", userAgent.indexOf('Macintosh') >= 0);
   _assign__("_isLinux", userAgent.indexOf('Linux') >= 0);
+  _assign__("_isFreeBSD", userAgent.indexOf('FreeBSD') >= 0);
   _assign__("_isWeb", true);
 } else if (typeof process === 'object') {
   _assign__("_isWindows", process.platform === 'win32');
   _assign__("_isMacintosh", process.platform === 'darwin');
   _assign__("_isLinux", process.platform === 'linux');
+  _assign__("_isFreeBSD", process.platform === 'freebsd');
   _assign__("_isNative", true);
 }
 function PlatformToString(platform) {
@@ -36,7 +39,9 @@ function PlatformToString(platform) {
       return 'Mac';
     case 2 /* Platform.Linux */:
       return 'Linux';
-    case 3 /* Platform.Windows */:
+    case 3 /* Platform.FreeBSD */:
+      return 'FreeBSD';
+    case 4 /* Platform.Windows */:
       return 'Windows';
   }
 }
@@ -46,14 +51,17 @@ if (_get__("_isNative")) {
   if (_get__("_isMacintosh")) {
     _assign__("_platform", 1) /* Platform.Mac */;
   } else if (_get__("_isWindows")) {
-    _assign__("_platform", 3) /* Platform.Windows */;
+    _assign__("_platform", 4) /* Platform.Windows */;
   } else if (_get__("_isLinux")) {
     _assign__("_platform", 2) /* Platform.Linux */;
+  } else if (_get__("_isFreeBSD")) {
+    _assign__("_platform", 3) /* Platform.FreeBSD */;
   }
 }
 exports.isWindows = _get__("_isWindows");
 exports.isMacintosh = _get__("_isMacintosh");
 exports.isLinux = _get__("_isLinux");
+exports.isFreeBSD = _get__("_isFreeBSD");
 exports.isNative = _get__("_isNative");
 exports.isWeb = _get__("_isWeb");
 exports.platform = _get__("_platform");
@@ -78,7 +86,7 @@ function setImmediate(callback) {
   return _get__("_setImmediate")(callback);
 }
 exports.setImmediate = _get__("setImmediate");
-const _wl = _get__("_isWindows") ? 1 /* OperatingSystem.Windows */ : 3 /* OperatingSystem.Linux */;
+const _wl = _get__("_isWindows") ? 1 /* OperatingSystem.Windows */ : 3 /* OperatingSystem.Linux */ | 4 /* OperatingSystem.FreeBSD */;
 exports.OS = _get__("_isMacintosh") ? 2 /* OperatingSystem.Macintosh */ : _get__("_wl");
 function _getGlobalObject() {
   try {
@@ -173,6 +181,8 @@ function _get_original__(variableName) {
       return _isMacintosh;
     case "_isLinux":
       return _isLinux;
+    case "_isFreeBSD":
+      return _isFreeBSD;
     case "_isWeb":
       return _isWeb;
     case "_isNative":
@@ -212,6 +222,8 @@ function _set_original__(variableName, _value) {
       return _isMacintosh = _value;
     case "_isLinux":
       return _isLinux = _value;
+    case "_isFreeBSD":
+      return _isFreeBSD = _value;
     case "_isWeb":
       return _isWeb = _value;
     case "_isNative":

package/consts.d.ts

@@ -20,6 +20,12 @@ interface ITitlebarIcons extends IMenuIcons {
         restore: string;
         close: string;
     };
+    freebsd: {
+        minimize: string;
+        maximize: string;
+        restore: string;
+        close: string;
+    };
     windows: {
         minimize: string;
         maximize: string;
@@ -32,6 +38,7 @@ export declare const menuIcons: ITitlebarIcons;
  * Handles mnemonics for menu items. Depending on OS:
  * - Windows: Supported via & character (replace && with &)
  * - Linux: Supported via & character (replace && with &)
+ * - FreeBSD: Supported via & character (replace && with &)
  * - macOS: Unsupported (replace && with empty string)
  */
 export declare function mnemonicMenuLabel(label: string, forceDisableMnemonics?: boolean): string;
@@ -39,6 +46,7 @@ export declare function mnemonicMenuLabel(label: string, forceDisableMnemonics?:
  * Handles mnemonics for buttons. Depending on OS:
  * - Windows: Supported via & character (replace && with & and & with && for escaping)
  * - Linux: Supported via _ character (replace && with _)
+ * - FreeBSD: Supported via _ character (replace && with _)
  * - macOS: Unsupported (replace && with empty string)
  */
 export declare function mnemonicButtonLabel(label: string, forceDisableMnemonics?: boolean): string;

package/consts.js

@@ -34,6 +34,12 @@ exports.menuIcons = {
     restore: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M7.9,2.2h-7C0.4,2.2,0,2.6,0,3.1v7C0,10.6,0.4,11,0.9,11h7c0.5,0,0.9-0.4,0.9-0.9v-7C8.8,2.6,8.4,2.2,7.9,2.2z M7.7,9.6 c0,0.2-0.1,0.3-0.3,0.3h-6c-0.2,0-0.3-0.1-0.3-0.3v-6c0-0.2,0.1-0.3,0.3-0.3h6c0.2,0,0.3,0.1,0.3,0.3V9.6z M10,0.9 c0,0.5-0.4,0.9-0.9,0.9h-2.1 c-0.5,0-0.9-0.4-0.9-0.9V0.9c0-0.5,0.4-0.9,0.9-0.9h2.1C9.6,0,10,0.4,10,0.9z"/></svg>',
     close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z"/></svg>'
   },
+  freebsd: {
+    minimize: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M11,4.9v1.1H0V4.399h11z"/></svg>',
+    maximize: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M0,1.7v7.6C0,10.2,0.8,11,1.7,11h7.6c0.9,0,1.7-0.8,1.7-1.7V1.7C11,0.8,10.2,0,9.3,0H1.7C0.8,0,0,0.8,0,1.7z M8.8,9.9H2.2c-0.6,0-1.1-0.5-1.1-1.1V2.2c0-0.6,0.5-1.1,1.1-1.1h6.7c0.6,0,1.1,0.5,1.1,1.1v6.7C9.9,9.4,9.4,9.9,8.8,9.9z"/></svg>',
+    restore: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M7.9,2.2h-7C0.4,2.2,0,2.6,0,3.1v7C0,10.6,0.4,11,0.9,11h7c0.5,0,0.9-0.4,0.9-0.9v-7C8.8,2.6,8.4,2.2,7.9,2.2z M7.7,9.6 c0,0.2-0.1,0.3-0.3,0.3h-6c-0.2,0-0.3-0.1-0.3-0.3v-6c0-0.2,0.1-0.3,0.3-0.3h6c0.2,0,0.3,0.1,0.3,0.3V9.6z M10,0.9 c0,0.5-0.4,0.9-0.9,0.9h-2.1 c-0.5,0-0.9-0.4-0.9-0.9V0.9c0-0.5,0.4-0.9,0.9-0.9h2.1C9.6,0,10,0.4,10,0.9z"/></svg>',
+    close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z"/></svg>'
+  },
   windows: {
     minimize: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M11,4.9v1.1H0V4.399h11z"/></svg>',
     maximize: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11"><path d="M0,1.7v7.6C0,10.2,0.8,11,1.7,11h7.6c0.9,0,1.7-0.8,1.7-1.7V1.7C11,0.8,10.2,0,9.3,0H1.7C0.8,0,0,0.8,0,1.7z M8.8,9.9H2.2c-0.6,0-1.1-0.5-1.1-1.1V2.2c0-0.6,0.5-1.1,1.1-1.1h6.7c0.6,0,1.1,0.5,1.1,1.1v6.7C9.9,9.4,9.4,9.9,8.8,9.9z"/></svg>',
@@ -45,6 +51,7 @@ exports.menuIcons = {
  * Handles mnemonics for menu items. Depending on OS:
  * - Windows: Supported via & character (replace && with &)
  * - Linux: Supported via & character (replace && with &)
+ * - FreeBSD: Supported via & character (replace && with &)
  * - macOS: Unsupported (replace && with empty string)
  */
 function mnemonicMenuLabel(label, forceDisableMnemonics) {
@@ -58,6 +65,7 @@ exports.mnemonicMenuLabel = _get__("mnemonicMenuLabel");
  * Handles mnemonics for buttons. Depending on OS:
  * - Windows: Supported via & character (replace && with & and & with && for escaping)
  * - Linux: Supported via _ character (replace && with _)
+ * - FreeBSD: Supported via _ character (replace && with _)
  * - macOS: Unsupported (replace && with empty string)
  */
 function mnemonicButtonLabel(label, forceDisableMnemonics) {

package/menubar/index.js

@@ -510,9 +510,9 @@ class MenuBar extends _get__("lifecycle_1").Disposable {
       const replaceDoubleEscapes = str => str.replace(/&&/g, '&');
       if (escMatch) {
         titleElement.innerText = '';
-        titleElement.append(_get__("strings").ltrim(replaceDoubleEscapes(cleanLabel.substr(0, escMatch.index)), ' '), _get__("$")('mnemonic', {
+        titleElement.append(_get__("strings").ltrim(replaceDoubleEscapes(cleanLabel.substring(0, escMatch.index)), ' '), _get__("$")('mnemonic', {
           'aria-hidden': 'true'
-        }, escMatch[3]), _get__("strings").rtrim(replaceDoubleEscapes(cleanLabel.substr(escMatch.index + escMatch[0].length)), ' '));
+        }, escMatch[3]), _get__("strings").rtrim(replaceDoubleEscapes(cleanLabel.substring(escMatch.index + escMatch[0].length)), ' '));
       } else {
         titleElement.innerText = replaceDoubleEscapes(cleanLabel).trim();
       }
@@ -899,8 +899,8 @@ class MenuBar extends _get__("lifecycle_1").Disposable {
     };
   }
 }
-_get__("MenuBar").OVERFLOW_INDEX = -1;
 exports.MenuBar = _get__("MenuBar");
+_get__("MenuBar").OVERFLOW_INDEX = -1;
 function _getGlobalObject() {
   try {
     if (!!global) {

package/menubar/menu/index.js

@@ -22,7 +22,7 @@ var Direction;
 (function (Direction) {
   Direction[Direction["Right"] = 0] = "Right";
   Direction[Direction["Left"] = 1] = "Left";
-})(_assign__("Direction", exports.Direction || (exports.Direction = {})));
+})(_get__("Direction") || (exports.Direction = _assign__("Direction", {})));
 class CETMenu extends _get__("lifecycle_1").Disposable {
   constructor(menuContainer, menuIcons, parentOptions, currentOptions, closeSubMenu = () => {}) {
     super();
@@ -114,6 +114,20 @@ class CETMenu extends _get__("lifecycle_1").Disposable {
         }
       }));
     }
+    if (_get__("platform_1").isFreeBSD) {
+      this._register((0, _get__("dom_1").addDisposableListener)(this.menuContainer, _get__("dom_1").EventType.KEY_DOWN, e => {
+        const event = new (_get__("keyboardEvent_1").StandardKeyboardEvent)(e);
+        if (event.equals(14 /* KeyCode.Home */) || event.equals(11 /* KeyCode.PageUp */)) {
+          this.focusedItem = this.items.length - 1;
+          this.focusNext();
+          _get__("dom_1").EventHelper.stop(e, true);
+        } else if (event.equals(13 /* KeyCode.End */) || event.equals(12 /* KeyCode.PageDown */)) {
+          this.focusedItem = 0;
+          this.focusPrevious();
+          _get__("dom_1").EventHelper.stop(e, true);
+        }
+      }));
+    }
     this._register((0, _get__("dom_1").addDisposableListener)(this.menuContainer, _get__("dom_1").EventType.MOUSE_OUT, e => {
       const relatedTarget = e.relatedTarget;
       if (!(0, _get__("dom_1").isAncestor)(relatedTarget, this.menuContainer)) {

package/menubar/menubar-options.d.ts

@@ -1,4 +1,3 @@
-import { Menu } from 'electron';
 import { Color } from '../base/common/color';
 export interface MenuBarOptions {
     /**
@@ -15,13 +14,6 @@ export interface MenuBarOptions {
      * **The default is undefined**
      */
     itemBackgroundColor?: Color;
-    /**
-     * @deprecated Use `setupTitlebar` method instead.
-     * The menu to show in the title bar.
-     * You can use `Menu` or not add this option and the menu created in the main process will be taken.
-     * **The default menu is undefined**
-     */
-    menu?: Menu;
     /**
      * The background color of the menu.
      * **The default is automatic**

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "custom-electron-titlebar",
-  "version": "4.2.4",
+  "version": "4.2.6",
   "description": "Library for electron that allows you to configure a fully customizable title bar.",
   "types": "./index.d.ts",
-  "main": "./index.js",
+  "main": "./index.ts",
   "typesVersions": {
     "*": {
       "main": [
@@ -16,13 +16,13 @@
     "./main": "./main/index.js"
   },
   "scripts": {
-    "clean": "rimraf ./dist",
+    "clean": "rimraf dist",
     "build:package": "tsc && tsc-alias",
-    "build:babel": "babel ./dist --out-dir ./dist --extensions \".js\"",
+    "build:babel": "babel dist --out-dir dist --extensions \".js\"",
     "start": "electron example/main.js",
     "dev": "npm run build && npm run start",
     "build": "npm run clean && npm run build:package && npm run build:babel",
-    "test": ""
+    "test": "jest"
   },
   "author": "AlexTorresDev <alextorressk@gmail.com>",
   "license": "MIT",
@@ -36,7 +36,8 @@
     "title bar",
     "menubar",
     "windows",
-    "linux"
+    "linux",
+    "freebsd"
   ],
   "bugs": {
     "url": "https://github.com/AlexTorresDev/custom-electron-titlebar/issues"
@@ -46,24 +47,28 @@
     "electron": ">20.0.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.21.5",
-    "@babel/core": "7.21.8",
-    "@typescript-eslint/eslint-plugin": "5.59.2",
-    "@typescript-eslint/parser": "5.59.2",
+    "@babel/cli": "7.22.9",
+    "@babel/core": "7.22.9",
+    "@jest/globals": "29.6.1",
+    "@typescript-eslint/eslint-plugin": "6.1.0",
+    "@typescript-eslint/parser": "6.1.0",
     "babel-plugin-import-require-as-string": "1.0.2",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-rewire": "1.2.0",
-    "electron": "24.2.0",
-    "eslint": "8.40.0",
+    "electron": "25.3.1",
+    "eslint": "8.45.0",
     "eslint-config-prettier": "8.8.0",
-    "eslint-config-standard": "17.0.0",
+    "eslint-config-standard": "17.1.0",
     "eslint-plugin-import": "2.27.5",
-    "eslint-plugin-n": "15.7.0",
+    "eslint-plugin-n": "16.0.1",
     "eslint-plugin-promise": "6.1.1",
-    "rimraf": "5.0.0",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "29.6.1",
+    "rimraf": "5.0.1",
     "standard": "17.1.0",
-    "tsc-alias": "1.8.6",
-    "typescript": "5.0.4"
+    "ts-jest": "29.1.1",
+    "tsc-alias": "1.8.7",
+    "typescript": "5.1.6"
   },
   "eslintConfig": {
     "extends": "./node_modules/standard/eslintrc.json"

package/titlebar/index.d.ts

@@ -1,4 +1,5 @@
 import { Color } from '../base/common/color';
+import { MenuBar } from '../menubar';
 import { TitleBarOptions } from './options';
 import { ThemeBar } from './themebar';
 export declare class CustomTitlebar extends ThemeBar {
@@ -96,4 +97,8 @@ export declare class CustomTitlebar extends ThemeBar {
      * Remove the titlebar, menubar and all methods.
      */
     dispose(): void;
+    get titlebarElement(): HTMLElement;
+    get menubarElement(): MenuBar | undefined;
+    get containerElement(): HTMLElement;
+    get titleElement(): HTMLElement;
 }

package/titlebar/index.js

@@ -24,6 +24,7 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
     super();
     this.isInactive = false;
     this.currentOptions = {
+      backgroundColor: _get__("color_1").Color.WHITE,
       closeable: true,
       enableMnemonics: true,
       // hideWhenClickingClose: false,
@@ -53,7 +54,7 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
       ...this.currentOptions,
       ...options
     };
-    const jWindowIcons = _get__("consts_1").menuIcons[(0, _get__("platform_1").PlatformToString)(_get__("platform_1").platform).toLocaleLowerCase()];
+    const jWindowIcons = _get__("consts_1").menuIcons[(0, _get__("platform_1").PlatformToString)(_get__("platform_1").platform)?.toLocaleLowerCase()];
     this.platformIcons = jWindowIcons;
     this.titlebar = (0, _get__("dom_1").$)('.cet-titlebar');
     this.dragRegion = (0, _get__("dom_1").$)('.cet-drag-region');
@@ -145,7 +146,7 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
     this.icon.firstElementChild.setAttribute('style', `height: ${size}px`);
   }
   setupMenubar() {
-    _get__("electron_1").ipcRenderer.invoke('request-application-menu').then(menu => this.updateMenu(menu));
+    _get__("electron_1").ipcRenderer.invoke('request-application-menu')?.then(menu => this.updateMenu(menu));
     const menuPosition = this.currentOptions.menuPosition;
     if (menuPosition) {
       this.updateMenuPosition(menuPosition);
@@ -172,9 +173,9 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
     const onlyRendererMenuBar = this.currentOptions.onlyShowMenuBar;
     const tooltips = this.currentOptions.tooltips;
     if (_get__("platform_1").isMacintosh || onlyRendererMenuBar) return;
-    this.createControlButton(this.controls.minimize, this.platformIcons.minimize, tooltips.minimize, this.currentOptions.minimizable);
-    this.createControlButton(this.controls.maximize, this.platformIcons.maximize, tooltips.maximize, this.currentOptions.maximizable);
-    this.createControlButton(this.controls.close, this.platformIcons.close, tooltips.close, this.currentOptions.closeable);
+    this.createControlButton(this.controls.minimize, this.platformIcons?.minimize, tooltips.minimize, this.currentOptions.minimizable);
+    this.createControlButton(this.controls.maximize, this.platformIcons?.maximize, tooltips.maximize, this.currentOptions.maximizable);
+    this.createControlButton(this.controls.close, this.platformIcons?.close, tooltips.close, this.currentOptions.closeable);
     (0, _get__("dom_1").append)(this.titlebar, this.controlsContainer);
   }
   setupContainer() {
@@ -190,7 +191,7 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
   setupTitleBar() {
     const order = this.currentOptions.order;
     const hasShadow = this.currentOptions.shadow;
-    (0, _get__("dom_1").addClass)(this.titlebar, `cet-${(0, _get__("platform_1").PlatformToString)(_get__("platform_1").platform).toLocaleLowerCase()}`);
+    (0, _get__("dom_1").addClass)(this.titlebar, `cet-${(0, _get__("platform_1").PlatformToString)(_get__("platform_1").platform)?.toLocaleLowerCase()}`);
     if (order) {
       (0, _get__("dom_1").addClass)(this.titlebar, `cet-${order}`);
     }
@@ -241,7 +242,7 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
     this.updateStyles();
   }
   onMenuBarVisibilityChanged(visible) {
-    if (_get__("platform_1").isWindows || _get__("platform_1").isLinux) {
+    if (_get__("platform_1").isWindows || _get__("platform_1").isLinux || _get__("platform_1").isFreeBSD) {
       if (visible) {
         // Hack to fix issue #52522 with layered webkit-app-region elements appearing under cursor
         (0, _get__("dom_1").hide)(this.dragRegion);
@@ -250,7 +251,7 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
     }
   }
   onMenuBarFocusChanged(focused) {
-    if (_get__("platform_1").isWindows || _get__("platform_1").isLinux) {
+    if (_get__("platform_1").isWindows || _get__("platform_1").isLinux || _get__("platform_1").isFreeBSD) {
       if (focused) (0, _get__("dom_1").hide)(this.dragRegion);else (0, _get__("dom_1").show)(this.dragRegion);
     }
   }
@@ -294,16 +295,16 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
       (0, _get__("dom_1").removeClass)(this.titlebar, 'light');
       foregroundColor = this.isInactive ? _get__("consts_1").INACTIVE_FOREGROUND : _get__("consts_1").ACTIVE_FOREGROUND;
     }
-    this.titlebar.style.color = foregroundColor.toString();
+    this.titlebar.style.color = foregroundColor?.toString();
     if (this.menuBar) {
       let fgColor;
-      const backgroundColor = this.currentOptions.menuBarBackgroundColor ?? this.currentOptions.backgroundColor?.darken(0.12);
+      const backgroundColor = this.currentOptions.menuBarBackgroundColor || this.currentOptions.backgroundColor.darken(0.12);
       const foregroundColor = backgroundColor?.isLighter() ? _get__("consts_1").INACTIVE_FOREGROUND_DARK : _get__("consts_1").INACTIVE_FOREGROUND;
-      const bgColor = !this.currentOptions.itemBackgroundColor || this.currentOptions.itemBackgroundColor.equals(backgroundColor) ? _get__("consts_1").DEFAULT_ITEM_SELECTOR : this.currentOptions.itemBackgroundColor;
-      if (bgColor.equals(_get__("consts_1").DEFAULT_ITEM_SELECTOR)) {
+      const bgColor = this.currentOptions.itemBackgroundColor && !this.currentOptions.itemBackgroundColor.equals(backgroundColor) ? this.currentOptions.itemBackgroundColor : _get__("consts_1").DEFAULT_ITEM_SELECTOR;
+      if (bgColor?.equals(_get__("consts_1").DEFAULT_ITEM_SELECTOR)) {
         fgColor = backgroundColor?.isLighter() ? _get__("consts_1").ACTIVE_FOREGROUND_DARK : _get__("consts_1").ACTIVE_FOREGROUND;
       } else {
-        fgColor = bgColor.isLighter() ? _get__("consts_1").ACTIVE_FOREGROUND_DARK : _get__("consts_1").ACTIVE_FOREGROUND;
+        fgColor = bgColor?.isLighter() ? _get__("consts_1").ACTIVE_FOREGROUND_DARK : _get__("consts_1").ACTIVE_FOREGROUND;
       }
       this.menuBar.setStyles({
         backgroundColor,
@@ -420,8 +421,9 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
    * @param backgroundColor The color for the background
    */
   updateBackground(backgroundColor) {
+    if (typeof backgroundColor === 'string') backgroundColor = _get__("color_1").Color.fromHex(backgroundColor);
     this.currentOptions.backgroundColor = backgroundColor;
-    // this.updateStyles()
+    this.updateStyles();
     return this;
   }
   /**
@@ -429,8 +431,9 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
    * @param itemBGColor The color for the item background
    */
   updateItemBGColor(itemBGColor) {
+    if (typeof itemBGColor === 'string') itemBGColor = _get__("color_1").Color.fromHex(itemBGColor);
     this.currentOptions.itemBackgroundColor = itemBGColor;
-    // this._updateStyles()
+    this.updateStyles();
     return this;
   }
   /**
@@ -471,6 +474,18 @@ class CustomTitlebar extends _get__("themebar_1").ThemeBar {
     while (this.container.firstChild) (0, _get__("dom_1").append)(document.body, this.container.firstChild);
     this.container.remove();
   }
+  get titlebarElement() {
+    return this.titlebar;
+  }
+  get menubarElement() {
+    return this.menuBar;
+  }
+  get containerElement() {
+    return this.container;
+  }
+  get titleElement() {
+    return this.title;
+  }
 }
 exports.CustomTitlebar = _get__("CustomTitlebar");
 function _getGlobalObject() {
@@ -558,14 +573,14 @@ function _get__(variableName) {
 }
 function _get_original__(variableName) {
   switch (variableName) {
+    case "color_1":
+      return color_1;
     case "consts_1":
       return consts_1;
     case "platform_1":
       return platform_1;
     case "dom_1":
       return dom_1;
-    case "color_1":
-      return color_1;
     case "electron_1":
       return electron_1;
     case "menubar_1":

package/titlebar/themebar.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ThemeBar = void 0;
 const lifecycle_1 = require("../base/common/lifecycle");
-const baseTheme = "body {\n  margin: 0 !important;\n  overflow: hidden !important;\n}\n\n/* Titlebar */\n.cet-titlebar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  font-size: 13px;\n  font-family: Arial, Helvetica, sans-serif;\n  box-sizing: border-box;\n  padding: 0 16px;\n  overflow: hidden;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  zoom: 1;\n  width: 100%;\n  height: 31px;\n  line-height: 31px;\n  z-index: 99999;\n}\n\n.cet-titlebar *,\n.cet-titlebar *:before,\n.cet-titlebar *:after {\n  box-sizing: border-box;\n}\n\n.cet-titlebar.cet-windows,\n.cet-titlebar.cet-linux {\n  padding: 0;\n  height: 30px;\n  line-height: 30px;\n  justify-content: left;\n  overflow: visible;\n}\n\n/* Inverted */\n.cet-titlebar.cet-inverted {\n  flex-direction: row-reverse;\n}\n\n.cet-titlebar.cet-inverted .cet-menubar,\n.cet-titlebar.cet-inverted .cet-window-controls {\n  flex-direction: row-reverse;\n  margin-left: 20px;\n  margin-right: 0;\n}\n\n/* First buttons */\n.cet-titlebar.cet-first-buttons .cet-window-controls {\n  order: -1;\n  margin: 0 5px 0 0;\n}\n\n.cet-titlebar.cet-inverted .cet-window-controls {\n  margin: 0 5px 0 0;\n}\n\n/* Shadow */\n.cet-titlebar.cet-shadow {\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\n}\n\n/* Drag region */\n.cet-drag-region {\n  top: 0;\n  left: 0;\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  -webkit-app-region: drag;\n}\n\n/* Icon */\n.cet-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 30px;\n  z-index: 99;\n  overflow: hidden;\n}\n\n/* Title */\n.cet-title {\n  flex: 0 1 auto;\n  font-size: 12px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  zoom: 1;\n}\n\n/* Title alignment */\n.cet-title.cet-title-left {\n  margin-left: 8px;\n  margin-right: auto;\n}\n\n.cet-title.cet-title-right {\n  margin-left: auto;\n  margin-right: 8px;\n}\n\n.cet-title.cet-title-center {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.cet-title.cet-bigsur {\n  font-size: 13px;\n  font-weight: 600;\n}\n\n/* Window controls */\n.cet-window-controls {\n  display: flex;\n  flex-grow: 0;\n  flex-shrink: 0;\n  text-align: center;\n  position: relative;\n  z-index: 99;\n  -webkit-app-region: no-drag;\n  height: 30px;\n  font-family: initial !important;\n  margin-left: auto;\n}\n\n.cet-control-icon {\n  width: 46px;\n}\n\n.cet-control-icon:not(.inactive):hover {\n  background-color: rgb(255 255 255 / 12%);\n}\n\n.light .cet-control-icon:not(.inactive):hover {\n  background-color: rgb(0 0 0 / 12%);\n}\n\n.cet-control-icon.inactive svg {\n  opacity: 0.4;\n}\n\n.cet-control-icon svg {\n  width: 10px;\n  height: -webkit-fill-available;\n  fill: #fff;\n  display: initial !important;\n  vertical-align: unset !important;\n}\n\n.cet-titlebar.light .cet-control-icon svg {\n  fill: #222222 !important;\n}\n\n.cet-control-close:not(.inactive):hover {\n  background-color: rgb(232 17 35 / 90%) !important;\n}\n\n.cet-control-close:not(.inactive):hover svg {\n  fill: #fff !important;\n}\n\n/* Resizer */\n.cet-resizer {\n  -webkit-app-region: no-drag;\n  position: absolute;\n}\n\n.cet-resizer.left {\n  top: 0;\n  left: 0;\n  width: 6px;\n  height: 100%;\n}\n\n.cet-resizer.top {\n  top: 0;\n  width: 100%;\n  height: 6px;\n}\n\n/* Container */\n.cet-container {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: auto;\n  z-index: 1;\n}\n\n/* MenuBar */\n.cet-menubar {\n  display: flex;\n  flex-shrink: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n  flex-wrap: wrap;\n  margin-right: 20px;\n}\n\n.cet-menubar.bottom {\n  order: 1;\n  width: 100%;\n  padding: 0 5px 5px;\n  margin-right: 0;\n}\n\n.cet-menubar.bottom .cet-menubar-menu-button {\n  border-radius: 4px;\n}\n\n.cet-menubar.bottom .cet-menubar-menu-button .cet-menubar-menu-title {\n  line-height: 26px;\n}\n\n.cet-menubar .cet-menubar-menu-button {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  height: 100%;\n  cursor: default;\n  zoom: 1;\n  white-space: nowrap;\n  -webkit-app-region: no-drag;\n  outline: 0;\n}\n\n.cet-menubar .cet-menubar-menu-button .cet-menubar-menu-title {\n  font-size: 12px;\n}\n\n.cet-menubar .cet-menubar-menu-button.disabled {\n  opacity: 0.4;\n}\n\n.cet-menubar .cet-menubar-menu-button:not(.disabled):focus,\n.cet-menubar .cet-menubar-menu-button:not(.disabled):hover,\n.cet-menubar .cet-menubar-menu-button:not(.disabled).open {\n  background-color: rgb(255 255 255 / 12%);\n}\n\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled):focus,\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled):hover,\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled).open {\n  background-color: rgb(0 0 0 / 12%);\n}\n\n.cet-menubar-menu-container {\n  position: absolute;\n  display: block;\n  left: 0px;\n  opacity: 1;\n  outline: 0;\n  border: none;\n  text-align: left;\n  margin: 0 auto;\n  margin-left: 0;\n  font-size: inherit;\n  overflow-x: visible;\n  overflow-y: visible;\n  -webkit-overflow-scrolling: touch;\n  justify-content: flex-end;\n  white-space: nowrap;\n  border-radius: 7px;\n  backdrop-filter: blur(5px);\n  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);\n  z-index: 99999;\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar {\n  width: 8px;\n  height: 4px;\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar-track {\n  border: none;\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar-thumb {\n  border-radius: 10px;\n  background-color: rgba(110, 110, 110, 0.2);\n}\n\n.cet-menubar-menu-container:focus {\n  outline: 0;\n}\n\n.cet-menubar-menu-container .cet-action-item {\n  padding: 0;\n  margin: 0;\n  transform: none;\n  display: -ms-flexbox;\n  display: flex;\n  outline: none;\n}\n\n.cet-menubar-menu-container .cet-action-item.active {\n  transform: none;\n}\n\n.cet-menubar-menu-container .cet-action-item.disabled .cet-action-menu-item {\n  opacity: 0.4;\n}\n\n.cet-menubar-menu-container .cet-action-item .cet-submenu {\n  position: absolute;\n}\n\n.cet-menubar-menu-container .cet-action-menu-item {\n  -ms-flex: 1 1 auto;\n  flex: 1 1 auto;\n  display: -ms-flexbox;\n  display: flex;\n  height: 2.231em;\n  margin: 4px 3px;\n  align-items: center;\n  position: relative;\n  border-radius: 4px;\n  text-decoration: none;\n}\n\n.cet-menubar-menu-container .cet-action-label {\n  -ms-flex: 1 1 auto;\n  flex: 1 1 auto;\n  text-decoration: none;\n  padding: 0 1em;\n  background: none;\n  font-size: 12px;\n  line-height: 1;\n}\n\n.cet-menubar-menu-container .cet-action-label:not(.separator) {\n  display: inline-block;\n  -webkit-box-sizing: border-box;\n  -o-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  -ms-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0 2em 0 0.8em;\n}\n\n.cet-menubar-menu-container .cet-action-label.separator {\n  opacity: 0.1;\n  font-size: inherit;\n  width: 100%;\n  border-bottom: 1px solid transparent;\n}\n\n.cet-menubar-menu-container .cet-action-label.separator.text {\n  padding: 0.7em 1em 0.1em 1em;\n  font-weight: bold;\n  opacity: 1;\n}\n\n.cet-menubar-menu-container .cet-action-label:hover {\n  color: inherit;\n}\n\n.cet-menubar-menu-container .keybinding,\n.cet-menubar-menu-container .cet-submenu-indicator {\n  display: inline-block;\n  -ms-flex: 2 1 auto;\n  flex: 2 1 auto;\n  padding: 0 2em 0 1em;\n  text-align: right;\n  font-size: 11px;\n  line-height: 1;\n}\n\n.cet-menubar-menu-container .cet-submenu-indicator {\n  position: absolute;\n  right: 4px;\n  height: 12px;\n  width: 12px;\n  padding: 0;\n}\n\n.cet-menubar-menu-container .cet-submenu-indicator img,\n.cet-menubar-menu-container .cet-menu-item-icon .icon,\n.cet-menubar-menu-container .cet-submenu-indicator svg,\n.cet-menubar-menu-container .cet-menu-item-icon svg {\n  display: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n.cet-menubar-menu-container .cet-action-menu-item.checked>.cet-menu-item-icon.checkbox {\n  visibility: visible;\n}\n\n.cet-menubar-menu-container .cet-menu-item-icon {\n  width: 14px;\n  height: 14px;\n  margin: 0 0 0 12px;\n}\n\n.cet-menubar-menu-container .cet-menu-item-icon.checkbox {\n  visibility: hidden;\n}";
+const baseTheme = "body {\n  margin: 0 !important;\n  overflow: hidden !important;\n}\n\n/* Titlebar */\n.cet-titlebar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  font-size: 13px;\n  font-family: Arial, Helvetica, sans-serif;\n  box-sizing: border-box;\n  padding: 0 16px;\n  overflow: hidden;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n  zoom: 1;\n  width: 100%;\n  height: 31px;\n  line-height: 31px;\n  z-index: 99999;\n}\n\n.cet-titlebar *,\n.cet-titlebar *:before,\n.cet-titlebar *:after {\n  box-sizing: border-box;\n}\n\n.cet-titlebar.cet-windows,\n.cet-titlebar.cet-linux,\n.cet-titlebar.cet-freebsd {\n  padding: 0;\n  height: 30px;\n  line-height: 30px;\n  justify-content: left;\n  overflow: visible;\n}\n\n/* Inverted */\n.cet-titlebar.cet-inverted {\n  flex-direction: row-reverse;\n}\n\n.cet-titlebar.cet-inverted .cet-menubar,\n.cet-titlebar.cet-inverted .cet-window-controls {\n  flex-direction: row-reverse;\n  margin-left: 20px;\n  margin-right: 0;\n}\n\n/* First buttons */\n.cet-titlebar.cet-first-buttons .cet-window-controls {\n  order: -1;\n  margin: 0 5px 0 0;\n}\n\n.cet-titlebar.cet-inverted .cet-window-controls {\n  margin: 0 5px 0 0;\n}\n\n/* Shadow */\n.cet-titlebar.cet-shadow {\n  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);\n}\n\n/* Drag region */\n.cet-drag-region {\n  top: 0;\n  left: 0;\n  display: block;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: -1;\n  -webkit-app-region: drag;\n}\n\n/* Icon */\n.cet-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 34px;\n  height: 30px;\n  z-index: 99;\n  overflow: hidden;\n}\n\n/* Title */\n.cet-title {\n  flex: 0 1 auto;\n  font-size: 12px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  zoom: 1;\n}\n\n/* Title alignment */\n.cet-title.cet-title-left {\n  margin-left: 8px;\n  margin-right: auto;\n}\n\n.cet-title.cet-title-right {\n  margin-left: auto;\n  margin-right: 8px;\n}\n\n.cet-title.cet-title-center {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.cet-title.cet-bigsur {\n  font-size: 13px;\n  font-weight: 600;\n}\n\n/* Window controls */\n.cet-window-controls {\n  display: flex;\n  flex-grow: 0;\n  flex-shrink: 0;\n  text-align: center;\n  position: relative;\n  z-index: 99;\n  -webkit-app-region: no-drag;\n  height: 30px;\n  font-family: initial !important;\n  margin-left: auto;\n}\n\n.cet-control-icon {\n  width: 46px;\n}\n\n.cet-control-icon:not(.inactive):hover {\n  background-color: rgb(255 255 255 / 12%);\n}\n\n.light .cet-control-icon:not(.inactive):hover {\n  background-color: rgb(0 0 0 / 12%);\n}\n\n.cet-control-icon.inactive svg {\n  opacity: 0.4;\n}\n\n.cet-control-icon svg {\n  width: 10px;\n  height: -webkit-fill-available;\n  fill: #fff;\n  display: initial !important;\n  vertical-align: unset !important;\n}\n\n.cet-titlebar.light .cet-control-icon svg {\n  fill: #222222 !important;\n}\n\n.cet-control-close:not(.inactive):hover {\n  background-color: rgb(232 17 35 / 90%) !important;\n}\n\n.cet-control-close:not(.inactive):hover svg {\n  fill: #fff !important;\n}\n\n/* Resizer */\n.cet-resizer {\n  -webkit-app-region: no-drag;\n  position: absolute;\n}\n\n.cet-resizer.left {\n  top: 0;\n  left: 0;\n  width: 6px;\n  height: 100%;\n}\n\n.cet-resizer.top {\n  top: 0;\n  width: 100%;\n  height: 6px;\n}\n\n/* Container */\n.cet-container {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: auto;\n  z-index: 1;\n}\n\n/* MenuBar */\n.cet-menubar {\n  display: flex;\n  flex-shrink: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n  flex-wrap: wrap;\n  margin-right: 20px;\n}\n\n.cet-menubar.bottom {\n  order: 1;\n  width: 100%;\n  padding: 0 5px 5px;\n  margin-right: 0;\n}\n\n.cet-menubar.bottom .cet-menubar-menu-button {\n  border-radius: 4px;\n}\n\n.cet-menubar.bottom .cet-menubar-menu-button .cet-menubar-menu-title {\n  line-height: 26px;\n}\n\n.cet-menubar .cet-menubar-menu-button {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  height: 100%;\n  cursor: default;\n  zoom: 1;\n  white-space: nowrap;\n  -webkit-app-region: no-drag;\n  outline: 0;\n}\n\n.cet-menubar .cet-menubar-menu-button .cet-menubar-menu-title {\n  font-size: 12px;\n}\n\n.cet-menubar .cet-menubar-menu-button.disabled {\n  opacity: 0.4;\n}\n\n.cet-menubar .cet-menubar-menu-button:not(.disabled):hover,\n.cet-menubar .cet-menubar-menu-button:not(.disabled).open {\n  background-color: rgb(255 255 255 / 12%);\n}\n\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled):hover,\n.cet-titlebar.light .cet-menubar .cet-menubar-menu-button:not(.disabled).open {\n  background-color: rgb(0 0 0 / 12%);\n}\n\n.cet-menubar-menu-container {\n  position: absolute;\n  display: block;\n  left: 0px;\n  opacity: 1;\n  outline: 0;\n  border: none;\n  text-align: left;\n  margin: 0 auto;\n  margin-left: 0;\n  font-size: inherit;\n  overflow-x: visible;\n  overflow-y: visible;\n  -webkit-overflow-scrolling: touch;\n  justify-content: flex-end;\n  white-space: nowrap;\n  border-radius: 7px;\n  backdrop-filter: blur(5px);\n  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);\n  z-index: 99999;\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar {\n  width: 8px;\n  height: 4px;\n  cursor: pointer;\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar-track {\n  border: none;\n  background-color: rgba(0, 0, 0, 0);\n}\n\n.cet-menubar-menu-container::-webkit-scrollbar-thumb {\n  border-radius: 10px;\n  background-color: rgba(110, 110, 110, 0.2);\n}\n\n.cet-menubar-menu-container:focus {\n  outline: 0;\n}\n\n.cet-menubar-menu-container .cet-action-item {\n  padding: 0;\n  margin: 0;\n  transform: none;\n  display: -ms-flexbox;\n  display: flex;\n  outline: none;\n}\n\n.cet-menubar-menu-container .cet-action-item.active {\n  transform: none;\n}\n\n.cet-menubar-menu-container .cet-action-item.disabled .cet-action-menu-item {\n  opacity: 0.4;\n}\n\n.cet-menubar-menu-container .cet-action-item .cet-submenu {\n  position: absolute;\n}\n\n.cet-menubar-menu-container .cet-action-menu-item {\n  -ms-flex: 1 1 auto;\n  flex: 1 1 auto;\n  display: -ms-flexbox;\n  display: flex;\n  height: 2.231em;\n  margin: 4px 3px;\n  align-items: center;\n  position: relative;\n  border-radius: 4px;\n  text-decoration: none;\n}\n\n.cet-menubar-menu-container .cet-action-label {\n  -ms-flex: 1 1 auto;\n  flex: 1 1 auto;\n  text-decoration: none;\n  padding: 0 1em;\n  background: none;\n  font-size: 12px;\n  line-height: 1;\n}\n\n.cet-menubar-menu-container .cet-action-label:not(.separator) {\n  display: inline-block;\n  -webkit-box-sizing: border-box;\n  -o-box-sizing: border-box;\n  -moz-box-sizing: border-box;\n  -ms-box-sizing: border-box;\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0 2em 0 0.8em;\n}\n\n.cet-menubar-menu-container .cet-action-label.separator {\n  opacity: 0.1;\n  font-size: inherit;\n  width: 100%;\n  border-bottom: 1px solid transparent;\n}\n\n.cet-menubar-menu-container .cet-action-label.separator.text {\n  padding: 0.7em 1em 0.1em 1em;\n  font-weight: bold;\n  opacity: 1;\n}\n\n.cet-menubar-menu-container .cet-action-label:hover {\n  color: inherit;\n}\n\n.cet-menubar-menu-container .keybinding,\n.cet-menubar-menu-container .cet-submenu-indicator {\n  display: inline-block;\n  -ms-flex: 2 1 auto;\n  flex: 2 1 auto;\n  padding: 0 2em 0 1em;\n  text-align: right;\n  font-size: 11px;\n  line-height: 1;\n}\n\n.cet-menubar-menu-container .cet-submenu-indicator {\n  position: absolute;\n  right: 4px;\n  height: 12px;\n  width: 12px;\n  padding: 0;\n}\n\n.cet-menubar-menu-container .cet-submenu-indicator img,\n.cet-menubar-menu-container .cet-menu-item-icon .icon,\n.cet-menubar-menu-container .cet-submenu-indicator svg,\n.cet-menubar-menu-container .cet-menu-item-icon svg {\n  display: inherit;\n  width: 100%;\n  height: 100%;\n}\n\n.cet-menubar-menu-container .cet-action-menu-item.checked>.cet-menu-item-icon.checkbox {\n  visibility: visible;\n}\n\n.cet-menubar-menu-container .cet-menu-item-icon {\n  width: 14px;\n  height: 14px;\n  margin: 0 0 0 12px;\n}\n\n.cet-menubar-menu-container .cet-menu-item-icon.checkbox {\n  visibility: hidden;\n}";
 const macTheme = "";
 const winTheme = "";
 class ThemingRegistry extends _get__("lifecycle_1").Disposable {