@deck.gl/widgets 9.2.8 → 9.2.9

package/dist/lib/components/dropdown-menu.d.ts

@@ -1,8 +1,13 @@
 import { type JSX } from 'preact';
+export type MenuItem = string | {
+    label: string;
+    value: string;
+    icon?: string;
+};
 export type DropdownMenuProps = {
-    menuItems: string[];
+    menuItems: MenuItem[];
     onSelect: (value: string) => void;
     style?: JSX.CSSProperties;
 };
-export declare const DropdownMenu: (props: DropdownMenuProps) => JSX.Element;
+export declare const DropdownMenu: (props: DropdownMenuProps) => JSX.Element | null;
 //# sourceMappingURL=dropdown-menu.d.ts.map

package/dist/lib/components/dropdown-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown-menu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,QAAQ,CAAC;AAGhC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAoFpD,CAAC"}
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/lib/components/dropdown-menu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,GAAG,EAAC,MAAM,QAAQ,CAAC;AAGhC,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC;AAE9E,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC;CAC3B,CAAC;AAcF,eAAO,MAAM,YAAY,UAAW,iBAAiB,uBA0DpD,CAAC"}

package/dist/lib/components/dropdown-menu.js

@@ -1,5 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useState, useRef, useEffect } from 'preact/hooks';
+function getMenuItemValue(item) {
+    return typeof item === 'string' ? item : item.value;
+}
+function getMenuItemLabel(item) {
+    return typeof item === 'string' ? item : item.label;
+}
+function getMenuItemIcon(item) {
+    return typeof item === 'string' ? undefined : item.icon;
+}
 export const DropdownMenu = (props) => {
     const [isOpen, setIsOpen] = useState(false);
     const dropdownRef = useRef(null);
@@ -15,41 +24,17 @@ export const DropdownMenu = (props) => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, []);
-    const handleSelect = (value) => {
-        props.onSelect(value);
+    const handleSelect = (item) => {
+        props.onSelect(getMenuItemValue(item));
         setIsOpen(false);
     };
-    return (_jsxs("div", { className: "dropdown-container", ref: dropdownRef, style: {
-            position: 'relative',
-            display: 'inline-block',
-            ...props.style
-        }, children: [_jsx("button", { onClick: toggleDropdown, style: {
-                    width: '30px',
-                    height: '30px',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    border: '1px solid #ccc',
-                    borderRadius: '4px',
-                    background: '#fff',
-                    cursor: 'pointer',
-                    padding: 0
-                }, children: "\u25BC" }), isOpen && (_jsx("ul", { style: {
-                    position: 'absolute',
-                    top: '100%',
-                    right: '100%',
-                    background: '#fff',
-                    border: '1px solid #ccc',
-                    borderRadius: '4px',
-                    listStyle: 'none',
-                    padding: '4px 0',
-                    margin: 0,
-                    zIndex: 1000,
-                    minWidth: '200px'
-                }, children: props.menuItems.map(item => (_jsx("li", { onClick: () => handleSelect(item), style: {
-                        padding: '4px 8px',
-                        cursor: 'pointer',
-                        whiteSpace: 'nowrap'
-                    }, children: item }, item))) }))] }));
+    // Don't render anything if there are no menu items
+    if (props.menuItems.length === 0) {
+        return null;
+    }
+    return (_jsxs("div", { className: "deck-widget-dropdown-container", ref: dropdownRef, style: props.style, children: [_jsx("button", { className: "deck-widget-dropdown-button", onClick: toggleDropdown, children: _jsx("span", { className: `deck-widget-dropdown-icon ${isOpen ? 'open' : ''}` }) }), isOpen && (_jsx("ul", { className: "deck-widget-dropdown-menu", children: props.menuItems.map(item => {
+                    const icon = getMenuItemIcon(item);
+                    return (_jsxs("li", { className: "deck-widget-dropdown-item", onClick: () => handleSelect(item), children: [icon && (_jsx("span", { className: "deck-widget-dropdown-item-icon", style: { maskImage: `url("${icon}")`, WebkitMaskImage: `url("${icon}")` } })), getMenuItemLabel(item)] }, getMenuItemValue(item)));
+                }) }))] }));
 };
 //# sourceMappingURL=dropdown-menu.js.map

package/dist/lib/components/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../src/lib/components/dropdown-menu.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAQzD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACvD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IAEhD,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IAAI,WAAW,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YAC/E,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;QACrC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QACtB,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,eACE,SAAS,EAAC,oBAAoB,EAC9B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,cAAc;YACvB,GAAG,KAAK,CAAC,KAAK;SACf,aAED,iBACE,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE;oBACL,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;oBACxB,MAAM,EAAE,gBAAgB;oBACxB,YAAY,EAAE,KAAK;oBACnB,UAAU,EAAE,MAAM;oBAClB,MAAM,EAAE,SAAS;oBACjB,OAAO,EAAE,CAAC;iBACX,uBAGM,EACR,MAAM,IAAI,CACT,aACE,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,GAAG,EAAE,MAAM;oBACX,KAAK,EAAE,MAAM;oBACb,UAAU,EAAE,MAAM;oBAClB,MAAM,EAAE,gBAAgB;oBACxB,YAAY,EAAE,KAAK;oBACnB,SAAS,EAAE,MAAM;oBACjB,OAAO,EAAE,OAAO;oBAChB,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,IAAI;oBACZ,QAAQ,EAAE,OAAO;iBAClB,YAEA,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAC3B,aAEE,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EACjC,KAAK,EAAE;wBACL,OAAO,EAAE,SAAS;wBAClB,MAAM,EAAE,SAAS;wBACjB,UAAU,EAAE,QAAQ;qBACrB,YAEA,IAAI,IARA,IAAI,CASN,CACN,CAAC,GACC,CACN,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"dropdown-menu.js","sourceRoot":"","sources":["../../../src/lib/components/dropdown-menu.tsx"],"names":[],"mappings":"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"}

package/dist/stylesheet.css

@@ -24,7 +24,7 @@
 .deck-widget-button-group {
   width: calc(var(--button-size, 28px) - 2);
   height: calc((var(--button-size, 28px) * 2) - 1);
-  
+
   flex-direction: row;
   padding: 1px;
   gap: 1px;
@@ -66,7 +66,6 @@
   border-top-right-radius: 0;
 }
 
-
 .deck-widget-button-group.horizontal > *:not(:last-child),
 .deck-widget-button-group.horizontal > *:not(:last-child) > button {
   border-top-right-radius: 0;
@@ -192,14 +191,14 @@
 .deck-widget.deck-widget-reset-view button.deck-widget-reset-focus .deck-widget-icon {
   mask-image: var(
     --icon-camera,
-      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/></svg>')
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/></svg>')
   );
   -webkit-mask-image: var(
     --icon-camera,
-      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/></svg>')
+    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="black"><path d="M480-320v-100q0-25 17.5-42.5T540-480h100v60H540v100h-60Zm60 240q-25 0-42.5-17.5T480-140v-100h60v100h100v60H540Zm280-240v-100H720v-60h100q25 0 42.5 17.5T880-420v100h-60ZM720-80v-60h100v-100h60v100q0 25-17.5 42.5T820-80H720Zm111-480h-83q-26-88-99-144t-169-56q-117 0-198.5 81.5T200-480q0 72 32.5 132t87.5 98v-110h80v240H160v-80h94q-62-50-98-122.5T120-480q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-840q129 0 226.5 79.5T831-560Z"/></svg>')
   );
 }
- 
+
 /* Timeline widget styles */
 .deck-widget.deck-widget-timeline {
   display: flex;
@@ -248,7 +247,7 @@
 
 .deck-widget.deck-widget-loading button.deck-widget-spinner .deck-widget-icon {
   mask-image: var(
-    --loading-icon, 
+    --loading-icon,
     url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" ><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>')
   );
   -webkit-mask-image: var(
@@ -267,7 +266,151 @@
 /* Geocoder styles */
 .deck-widget .deck-widget-geocoder {
   pointer-events: auto;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  background: var(--button-stroke, rgba(255, 255, 255, 0.3));
+  border-radius: var(--button-corner-radius, 8px);
+  box-shadow: var(--button-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.25));
+  padding: 1px;
+  gap: 1px;
+}
+
+.deck-widget .deck-widget-geocoder-input {
+  flex: 1 1 auto;
+  min-width: 200px;
+  height: calc(var(--button-size, 28px) - 2px);
+  margin: 0;
+  padding: 0 8px;
+  box-sizing: border-box;
+  background: var(--button-background, #fff);
+  backdrop-filter: var(--button-backdrop-filter, unset);
+  color: var(--button-text, rgb(24, 24, 26));
+  border: var(--button-inner-stroke, unset);
+  border-radius: calc(var(--button-corner-radius, 8px) - 1px);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 13px;
+}
+
+.deck-widget .deck-widget-geocoder-input:focus {
+  outline: none;
+}
+
+.deck-widget .deck-widget-geocoder-input::placeholder {
+  color: var(--button-icon-idle, rgba(97, 97, 102, 1));
+}
+
+.deck-widget .deck-widget-geocoder-error {
+  position: absolute;
+  top: calc(100% + var(--menu-gap, 4px));
+  left: 1px;
+  right: 1px;
+  padding: 6px 10px;
+  background: var(--button-background, #fff);
+  backdrop-filter: var(--button-backdrop-filter, unset);
+  border: var(--button-inner-stroke, unset);
+  border-radius: var(--button-corner-radius, 8px);
+  box-shadow: var(--button-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.25));
+  color: rgb(220, 80, 80);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 12px;
+  text-align: center;
+}
+
+/* When dropdown is not present, input should have full rounded corners */
+.deck-widget .deck-widget-geocoder-input:last-child {
+  border-top-right-radius: calc(var(--button-corner-radius, 8px) - 1px);
+  border-bottom-right-radius: calc(var(--button-corner-radius, 8px) - 1px);
+}
+
+/* Dropdown menu styles */
+.deck-widget .deck-widget-dropdown-container {
+  position: static;
+  display: inline-block;
+}
+
+.deck-widget .deck-widget-dropdown-button {
+  width: calc(var(--button-size, 28px) - 2px);
+  height: calc(var(--button-size, 28px) - 2px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
   cursor: pointer;
+  background: var(--button-background, #fff);
+  backdrop-filter: var(--button-backdrop-filter, unset);
+  border: var(--button-inner-stroke, unset);
+  border-radius: calc(var(--button-corner-radius, 8px) - 1px);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  outline: none;
+}
+
+.deck-widget .deck-widget-dropdown-icon {
+  width: 12px;
+  height: 12px;
+  background-color: var(--button-icon-idle, rgba(97, 97, 102, 1));
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>');
+  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>');
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  transition: transform 0.2s ease;
+}
+
+.deck-widget .deck-widget-dropdown-icon.open {
+  transform: rotate(180deg);
+}
+
+.deck-widget .deck-widget-dropdown-button:hover .deck-widget-dropdown-icon {
+  background-color: var(--button-icon-hover, rgba(24, 24, 26, 1));
+}
+
+.deck-widget .deck-widget-dropdown-menu {
+  position: absolute;
+  top: calc(100% + var(--menu-gap, 4px));
+  left: 1px;
+  right: 1px;
+  margin: 0;
+  padding: 4px 0;
+  list-style: none;
+  z-index: 1000;
+  background: var(--menu-background, #fff);
+  backdrop-filter: var(--menu-backdrop-filter, unset);
+  border: var(--menu-border, unset);
+  border-radius: var(--button-corner-radius, 8px);
+  box-shadow: var(--menu-shadow, 0px 0px 8px 0px rgba(0, 0, 0, 0.25));
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-size: 13px;
+}
+
+.deck-widget .deck-widget-dropdown-item {
+  padding: 8px 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--menu-text, rgb(24, 24, 26));
+}
+
+.deck-widget .deck-widget-dropdown-item:hover {
+  background: var(--menu-item-hover, rgba(128, 128, 128, 0.15));
+}
+
+.deck-widget .deck-widget-dropdown-item-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-right: 8px;
+  vertical-align: text-bottom;
+  background-color: var(--menu-text, rgb(24, 24, 26));
+  mask-size: contain;
+  -webkit-mask-size: contain;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
 }
 
 /* Stats styles */
@@ -281,16 +424,11 @@
   line-height: 1.6;
   font-family:
     'SF Mono',
-    /* macOS */
-    'Menlo',
-    /* macOS */
-    'Consolas',
-    /* Windows */
-    'DejaVu Sans Mono',
-    /* Linux */
-    'Liberation Mono',
-    /* Linux */
-    monospace;
+    /* macOS */ 'Menlo',
+    /* macOS */ 'Consolas',
+    /* Windows */ 'DejaVu Sans Mono',
+    /* Linux */ 'Liberation Mono',
+    /* Linux */ monospace;
   background-color: var(--button-background, #fff);
   color: var(--button-text, rgb(24, 24, 26));
 }

package/dist/themes.d.ts

@@ -16,6 +16,12 @@ export type DeckWidgetTheme = {
     '--icon-compass-north-color'?: string;
     '--icon-compass-south-color'?: string;
     '--menu-gap'?: string;
+    '--menu-background'?: string;
+    '--menu-backdrop-filter'?: string;
+    '--menu-border'?: string;
+    '--menu-shadow'?: string;
+    '--menu-text'?: string;
+    '--menu-item-hover'?: string;
 };
 export declare const LightTheme: {
     readonly '--widget-margin': "12px";
@@ -32,6 +38,12 @@ export declare const LightTheme: {
     readonly '--icon-compass-north-color': "rgb(240, 92, 68)";
     readonly '--icon-compass-south-color': "rgb(204, 204, 204)";
     readonly '--menu-gap': "4px";
+    readonly '--menu-background': "#fff";
+    readonly '--menu-backdrop-filter': "unset";
+    readonly '--menu-border': "unset";
+    readonly '--menu-shadow': "0px 0px 8px 0px rgba(0, 0, 0, 0.25)";
+    readonly '--menu-text': "rgb(24, 24, 26, 1)";
+    readonly '--menu-item-hover': "rgba(0, 0, 0, 0.08)";
 };
 export declare const DarkTheme: {
     readonly '--widget-margin': "12px";
@@ -48,6 +60,12 @@ export declare const DarkTheme: {
     readonly '--icon-compass-north-color': "rgb(240, 92, 68)";
     readonly '--icon-compass-south-color': "rgb(200, 199, 209)";
     readonly '--menu-gap': "4px";
+    readonly '--menu-background': "rgba(18, 18, 20, 1)";
+    readonly '--menu-backdrop-filter': "unset";
+    readonly '--menu-border': "unset";
+    readonly '--menu-shadow': "0px 0px 8px 0px rgba(0, 0, 0, 0.25)";
+    readonly '--menu-text': "rgb(215, 214, 229, 1)";
+    readonly '--menu-item-hover': "rgba(255, 255, 255, 0.1)";
 };
 export declare const LightGlassTheme: {
     readonly '--widget-margin': "12px";
@@ -64,6 +82,12 @@ export declare const LightGlassTheme: {
     readonly '--icon-compass-north-color': "rgb(240, 92, 68)";
     readonly '--icon-compass-south-color': "rgb(204, 204, 204)";
     readonly '--menu-gap': "4px";
+    readonly '--menu-background': "rgba(255, 255, 255, 0.6)";
+    readonly '--menu-backdrop-filter': "blur(4px)";
+    readonly '--menu-border': "1px solid rgba(255, 255, 255, 0.6)";
+    readonly '--menu-shadow': "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset";
+    readonly '--menu-text': "rgb(24, 24, 26, 1)";
+    readonly '--menu-item-hover': "rgba(0, 0, 0, 0.08)";
 };
 export declare const DarkGlassTheme: {
     readonly '--widget-margin': "12px";
@@ -80,5 +104,11 @@ export declare const DarkGlassTheme: {
     readonly '--icon-compass-north-color': "rgb(240, 92, 68)";
     readonly '--icon-compass-south-color': "rgb(200, 199, 209)";
     readonly '--menu-gap': "4px";
+    readonly '--menu-background': "rgba(18, 18, 20, 0.75)";
+    readonly '--menu-backdrop-filter': "blur(4px)";
+    readonly '--menu-border': "1px solid rgba(18, 18, 20, 0.75)";
+    readonly '--menu-shadow': "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset";
+    readonly '--menu-text': "rgb(215, 214, 229, 1)";
+    readonly '--menu-item-hover': "rgba(255, 255, 255, 0.1)";
 };
 //# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAE5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IAEtC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;CAeuB,CAAC;AAE/C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;CAewB,CAAC;AAE/C,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;CAgBkB,CAAC;AAE/C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;CAgBmB,CAAC"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAE5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,4BAA4B,CAAC,EAAE,MAAM,CAAC;IACtC,4BAA4B,CAAC,EAAE,MAAM,CAAC;IAEtC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;CAqBuB,CAAC;AAE/C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;CAqBwB,CAAC;AAE/C,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;CAsBkB,CAAC;AAE/C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;CAsBmB,CAAC"}

package/dist/themes.js

@@ -15,7 +15,13 @@ export const LightTheme = {
     '--button-text': 'rgb(24, 24, 26, 1)',
     '--icon-compass-north-color': 'rgb(240, 92, 68)',
     '--icon-compass-south-color': 'rgb(204, 204, 204)',
-    '--menu-gap': '4px'
+    '--menu-gap': '4px',
+    '--menu-background': '#fff',
+    '--menu-backdrop-filter': 'unset',
+    '--menu-border': 'unset',
+    '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
+    '--menu-text': 'rgb(24, 24, 26, 1)',
+    '--menu-item-hover': 'rgba(0, 0, 0, 0.08)'
 };
 export const DarkTheme = {
     '--widget-margin': '12px',
@@ -31,7 +37,13 @@ export const DarkTheme = {
     '--button-text': 'rgb(215, 214, 229, 1)',
     '--icon-compass-north-color': 'rgb(240, 92, 68)',
     '--icon-compass-south-color': 'rgb(200, 199, 209)',
-    '--menu-gap': '4px'
+    '--menu-gap': '4px',
+    '--menu-background': 'rgba(18, 18, 20, 1)',
+    '--menu-backdrop-filter': 'unset',
+    '--menu-border': 'unset',
+    '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25)',
+    '--menu-text': 'rgb(215, 214, 229, 1)',
+    '--menu-item-hover': 'rgba(255, 255, 255, 0.1)'
 };
 export const LightGlassTheme = {
     '--widget-margin': '12px',
@@ -47,7 +59,13 @@ export const LightGlassTheme = {
     '--button-text': 'rgb(24, 24, 26, 1)',
     '--icon-compass-north-color': 'rgb(240, 92, 68)',
     '--icon-compass-south-color': 'rgb(204, 204, 204)',
-    '--menu-gap': '4px'
+    '--menu-gap': '4px',
+    '--menu-background': 'rgba(255, 255, 255, 0.6)',
+    '--menu-backdrop-filter': 'blur(4px)',
+    '--menu-border': '1px solid rgba(255, 255, 255, 0.6)',
+    '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
+    '--menu-text': 'rgb(24, 24, 26, 1)',
+    '--menu-item-hover': 'rgba(0, 0, 0, 0.08)'
 };
 export const DarkGlassTheme = {
     '--widget-margin': '12px',
@@ -63,6 +81,12 @@ export const DarkGlassTheme = {
     '--button-text': 'rgb(215, 214, 229, 1)',
     '--icon-compass-north-color': 'rgb(240, 92, 68)',
     '--icon-compass-south-color': 'rgb(200, 199, 209)',
-    '--menu-gap': '4px'
+    '--menu-gap': '4px',
+    '--menu-background': 'rgba(18, 18, 20, 0.75)',
+    '--menu-backdrop-filter': 'blur(4px)',
+    '--menu-border': '1px solid rgba(18, 18, 20, 0.75)',
+    '--menu-shadow': '0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset',
+    '--menu-text': 'rgb(215, 214, 229, 1)',
+    '--menu-item-hover': 'rgba(255, 255, 255, 0.1)'
 };
 //# sourceMappingURL=themes.js.map

package/dist/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA,UAAU;AACV,+BAA+B;AAC/B,oCAAoC;AA0BpC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,iBAAiB,EAAE,MAAM;IACzB,eAAe,EAAE,MAAM;IACvB,wBAAwB,EAAE,KAAK;IAC/B,qBAAqB,EAAE,MAAM;IAC7B,iBAAiB,EAAE,0BAA0B;IAC7C,uBAAuB,EAAE,OAAO;IAChC,iBAAiB,EAAE,qCAAqC;IACxD,0BAA0B,EAAE,OAAO;IACnC,oBAAoB,EAAE,sBAAsB;IAC5C,qBAAqB,EAAE,qBAAqB;IAC5C,eAAe,EAAE,oBAAoB;IACrC,4BAA4B,EAAE,kBAAkB;IAChD,4BAA4B,EAAE,oBAAoB;IAClD,YAAY,EAAE,KAAK;CACyB,CAAC;AAE/C,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,MAAM;IACzB,eAAe,EAAE,MAAM;IACvB,wBAAwB,EAAE,KAAK;IAC/B,qBAAqB,EAAE,qBAAqB;IAC5C,iBAAiB,EAAE,wBAAwB;IAC3C,uBAAuB,EAAE,OAAO;IAChC,iBAAiB,EAAE,qCAAqC;IACxD,0BAA0B,EAAE,OAAO;IACnC,oBAAoB,EAAE,wBAAwB;IAC9C,qBAAqB,EAAE,wBAAwB;IAC/C,eAAe,EAAE,uBAAuB;IACxC,4BAA4B,EAAE,kBAAkB;IAChD,4BAA4B,EAAE,oBAAoB;IAClD,YAAY,EAAE,KAAK;CACyB,CAAC;AAE/C,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,iBAAiB,EAAE,MAAM;IACzB,eAAe,EAAE,MAAM;IACvB,wBAAwB,EAAE,KAAK;IAC/B,qBAAqB,EAAE,0BAA0B;IACjD,iBAAiB,EAAE,0BAA0B;IAC7C,uBAAuB,EAAE,oCAAoC;IAC7D,iBAAiB,EACf,+EAA+E;IACjF,0BAA0B,EAAE,WAAW;IACvC,oBAAoB,EAAE,sBAAsB;IAC5C,qBAAqB,EAAE,qBAAqB;IAC5C,eAAe,EAAE,oBAAoB;IACrC,4BAA4B,EAAE,kBAAkB;IAChD,4BAA4B,EAAE,oBAAoB;IAClD,YAAY,EAAE,KAAK;CACyB,CAAC;AAE/C,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,iBAAiB,EAAE,MAAM;IACzB,eAAe,EAAE,MAAM;IACvB,wBAAwB,EAAE,KAAK;IAC/B,qBAAqB,EAAE,wBAAwB;IAC/C,iBAAiB,EAAE,wBAAwB;IAC3C,uBAAuB,EAAE,kCAAkC;IAC3D,iBAAiB,EACf,+EAA+E;IACjF,0BAA0B,EAAE,WAAW;IACvC,oBAAoB,EAAE,wBAAwB;IAC9C,qBAAqB,EAAE,wBAAwB;IAC/C,eAAe,EAAE,uBAAuB;IACxC,4BAA4B,EAAE,kBAAkB;IAChD,4BAA4B,EAAE,oBAAoB;IAClD,YAAY,EAAE,KAAK;CACyB,CAAC"}
+{"version":3,"file":"themes.js","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"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"}