wox-gui 0.1.7 → 0.1.8

package/dist/wox-gui.cdn.js

@@ -21,7 +21,7 @@ s(T, "BASE_STYLES", `
     :host([hidden]) { display: none !important; }
 `);
 let w = T;
-const S = `
+const M = `
     /* glow: neon glow effect using --wox-fx-color */
     .glow {
         border-color: var(--wox-fx-color);
@@ -53,14 +53,14 @@ class H extends w {
   constructor() {
     super(...arguments);
     s(this, "_render", () => {
-      const t = this.getAttribute("name"), e = this.getAttribute("size") || "18", n = this.getAttribute("color") || "", o = this.hasAttribute("glow"), i = this.hasAttribute("pulse"), a = t ? `<span class="material-icons" style="--size:${e}px">${t}</span>` : "<slot></slot>", r = o || i ? `<span class="fx-wrap${o ? " glow" : ""}${i ? " pulse" : ""}" style="--wox-fx-color:${n};color:${n}">${a}</span>` : a;
+      const t = this.getAttribute("name"), e = this.getAttribute("size") || "18", n = this.getAttribute("color") || "", o = this.hasAttribute("glow"), i = this.hasAttribute("pulse"), r = t ? `<span class="material-icons" style="--size:${e}px">${t}</span>` : "<slot></slot>", a = o || i ? `<span class="fx-wrap${o ? " glow" : ""}${i ? " pulse" : ""}" style="--wox-fx-color:${n};color:${n}">${r}</span>` : r;
       this.render(`
     :host { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
     .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: var(--size, 18px); display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; color: inherit; }
     ::slotted(svg) { width: var(--size, 18px); height: var(--size, 18px); }
     slot { display: inline-flex; align-items: center; justify-content: center; }
     .fx-wrap { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--wox-radius-sm, 3px); padding: 4px; }
- ${S} :host { --size: ${e}px; }`, r);
+ ${M} :host { --size: ${e}px; }`, a);
     });
   }
   connectedCallback() {
@@ -71,7 +71,7 @@ class H extends w {
   }
 }
 s(H, "observedAttributes", ["name", "size", "color", "glow", "pulse"]);
-class G extends w {
+class j extends w {
   constructor() {
     super(...arguments);
     s(this, "_render", () => {
@@ -92,8 +92,8 @@ class G extends w {
     this.isConnected && this._render();
   }
 }
-s(G, "observedAttributes", ["direction", "spacing"]);
-class j extends w {
+s(j, "observedAttributes", ["direction", "spacing"]);
+class G extends w {
   constructor() {
     super(...arguments);
     s(this, "_render", () => {
@@ -115,27 +115,30 @@ class j extends w {
     this.isConnected && this._render();
   }
 }
-s(j, "observedAttributes", ["variant", "text", "color"]);
+s(G, "observedAttributes", ["variant", "text", "color"]);
 class Y extends w {
   constructor() {
     super(...arguments);
     s(this, "_render", () => {
-      const t = this.getAttribute("variant") || "icon", e = this.getAttribute("icon") || "", n = this.getAttribute("label") || "", o = this.hasAttribute("active"), i = this.hasAttribute("disabled"), a = this.getAttribute("dash") || "solid", r = this.getAttribute("color") || "", l = [`v-${t}`, o ? "active" : "", this.hasAttribute("glow") ? "glow" : "", this.hasAttribute("pulse") ? "pulse" : ""].filter(Boolean).join(" ");
-      let h = "";
-      t === "icon" ? h = e ? `<span class="material-icons">${e}</span>` : "<slot></slot>" : t === "text" ? h = (e ? `<span class="material-icons" style="font-size:14px">${e}</span>` : "") + (n || "<slot></slot>") : t === "tile" ? h = (e ? `<span class="material-icons">${e}</span>` : '<slot name="icon"></slot>') + `<span>${n}</span>` : t === "dash" && (h = `<div class="dash-line${a === "solid" ? "" : ` ${a}`}"></div>`);
-      const d = r ? ` data-color style="--wox-fx-color:${r}"` : "";
+      const t = this.getAttribute("variant") || "icon", e = this.getAttribute("icon") || "", n = this.getAttribute("label") || "", o = this.hasAttribute("active"), i = this.hasAttribute("disabled"), r = this.getAttribute("dash") || "solid", a = this.getAttribute("color") || "", l = this.hasAttribute("glow"), x = this.hasAttribute("pulse"), d = this.getAttribute("border-color") || "", u = this.getAttribute("border-style") || "", h = this.getAttribute("icon-color") || "", v = this.getAttribute("text-color") || "", b = [`v-${t}`, o ? "active" : "", l ? "glow" : "", x ? "pulse" : ""].filter(Boolean).join(" ");
+      let g = "";
+      t === "icon" ? g = e ? `<span class="material-icons">${e}</span>` : "<slot></slot>" : t === "text" ? g = (e ? `<span class="material-icons" style="font-size:14px">${e}</span>` : "") + (n || "<slot></slot>") : t === "tile" ? g = (e ? `<span class="material-icons">${e}</span>` : '<slot name="icon"></slot>') + `<span>${n}</span>` : t === "dash" && (g = `<div class="dash-line${r === "solid" ? "" : ` ${r}`}"></div>`);
+      const f = [];
+      a && f.push(`--wox-fx-color:${a}`), d && f.push(`--wox-btn-border:${d}`), u && f.push(`--wox-btn-border-style:${u}`), h && f.push(`--wox-btn-icon:${h}`), v && f.push(`--wox-btn-text:${v}`);
+      const k = a ? " data-color" : "", E = f.length ? ` style="${f.join(";")}"` : "";
       this.render(`
     :host { display: inline-block; }
     button {
         display: flex; align-items: center; justify-content: center; gap: 6px;
-        background: transparent; border: 1px solid var(--wox-border); color: var(--wox-text-secondary, #999);
+        background: transparent; border: 1px solid var(--wox-btn-border, var(--wox-border)); border-style: var(--wox-btn-border-style, solid); color: var(--wox-btn-text, var(--wox-text-secondary, #999));
         cursor: pointer; font-family: var(--wox-font, sans-serif); font-size: var(--wox-font-size-base, 12px);
         transition: all var(--wox-transition-fast, 0.12s); border-radius: var(--wox-radius-sm, 3px);
         padding: 0; margin: 0; line-height: 1; user-select: none;
     }
-    button:hover { background: var(--wox-bg-hover, #2a2a2e); color: var(--wox-text-hi, #fff); }
+    button:hover { background: var(--wox-bg-hover, #2a2a2e); color: var(--wox-btn-text, var(--wox-text-hi, #fff)); }
     button:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
-    button.active { background: var(--wox-bg-hover, #2a2a2e); color: var(--wox-accent, #00e5ff); border-color: var(--wox-border-light, #444); }
+    button.active { background: var(--wox-bg-hover, #2a2a2e); color: var(--wox-btn-text, var(--wox-accent, #00e5ff)); border-color: var(--wox-btn-border, var(--wox-border-light, #444)); }
+    .material-icons { color: var(--wox-btn-icon, inherit); }
 
     /* icon variant */
     button.v-icon { width: 34px; height: 32px; border-radius: var(--wox-radius-sm, 3px); }
@@ -147,13 +150,13 @@ class Y extends w {
     /* tile variant */
     button.v-tile {
         flex-direction: column; gap: 6px; background: var(--wox-bg-toolbar, #1e1e22);
-        border: 1px solid var(--wox-border, #333); border-radius: var(--wox-radius-xl, 10px);
+        border: 1px solid var(--wox-border, #333); border-style: var(--wox-btn-border-style, solid); border-radius: var(--wox-radius-xl, 10px);
         padding: 12px 10px; min-width: 68px; font-size: var(--wox-font-size-sm, 10px);
         font-weight: 500; text-transform: uppercase;
         transition: all var(--wox-transition-smooth, 0.25s cubic-bezier(0.4, 0, 0.2, 1));
         position: relative; overflow: hidden;
     }
-    button.v-tile:hover { background: var(--wox-bg-hover, #2a2a2e); border-color: var(--wox-border-light, #555); color: var(--wox-text-primary, #eee); transform: translateY(-1px); }
+    button.v-tile:hover { background: var(--wox-bg-hover, #2a2a2e); border-color: var(--wox-btn-border, var(--wox-border-light, #555)); color: var(--wox-btn-text, var(--wox-text-primary, #eee)); transform: translateY(-1px); }
     button.v-tile:hover svg, button.v-tile:hover .material-icons { transform: scale(1.05); opacity: 1; }
     button.v-tile svg, button.v-tile .material-icons { display: block; width: 32px; height: 32px; transition: transform 0.2s; opacity: 0.8; font-size: 28px; }
     button.v-tile.delete:hover { border-color: var(--wox-danger, #f72585); color: var(--wox-danger, #f72585); background: rgba(247, 37, 133, 0.05); }
@@ -162,7 +165,7 @@ class Y extends w {
     button.v-tile[data-color] { --wox-fx-color: var(--wox-text-secondary, #999); }
     button.v-tile[data-color]:hover {
         background: color-mix(in srgb, var(--wox-fx-color), transparent 92%);
-        border-color: var(--wox-fx-color); color: var(--wox-fx-color);
+        border-color: var(--wox-btn-border, var(--wox-fx-color)); color: var(--wox-btn-text, var(--wox-fx-color));
         box-shadow: 0 0 15px color-mix(in srgb, var(--wox-fx-color), transparent 80%);
     }
     button.v-tile[data-color]:hover svg { filter: drop-shadow(0 0 4px var(--wox-fx-color)); }
@@ -170,27 +173,27 @@ class Y extends w {
     /* dash variant */
     button.v-dash {
         width: 42px; height: 26px; background: var(--wox-bg-panel, #1c1c21);
-        border: 1px solid var(--wox-border, #333); border-radius: var(--wox-radius-lg, 8px);
+        border: 1px solid var(--wox-border, #333); border-style: var(--wox-btn-border-style, solid); border-radius: var(--wox-radius-lg, 8px);
         transition: all 0.2s;
     }
-    button.v-dash:hover { background: var(--wox-bg-hover, #2a2a2e); border-color: var(--wox-border-light, #555); transform: translateY(-1px); }
-    button.v-dash.active { border-color: var(--wox-accent, #00e5ff); box-shadow: var(--wox-shadow-accent, 0 0 10px rgba(0, 229, 255, 0.3)); }
-    .dash-line { width: 16px; height: 3px; background: var(--wox-text-secondary, #666); border-radius: 1px; }
-    button.v-dash.active .dash-line { background: var(--wox-accent, #00e5ff); }
-    .dash-line.dotted { background: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 4px 100%; color: var(--wox-text-secondary, #666); }
-    button.v-dash.active .dash-line.dotted { color: var(--wox-accent, #00e5ff); }
-    .dash-line.dashed { background: linear-gradient(to right, currentColor 6px, transparent 6px); background-size: 10px 100%; color: var(--wox-text-secondary, #666); }
-    button.v-dash.active .dash-line.dashed { color: var(--wox-accent, #00e5ff); }
-    .dash-line.longdash { background: linear-gradient(to right, currentColor 12px, transparent 4px); background-size: 16px 100%; color: var(--wox-text-secondary, #666); }
-    button.v-dash.active .dash-line.longdash { color: var(--wox-accent, #00e5ff); }
-    .dash-line.dotdash { background: linear-gradient(to right, currentColor 8px, transparent 4px, currentColor 2px, transparent 4px); background-size: 18px 100%; color: var(--wox-text-secondary, #666); }
-    button.v-dash.active .dash-line.dotdash { color: var(--wox-accent, #00e5ff); }
-    .dash-line.zigzag { background: repeating-linear-gradient(45deg, currentColor, currentColor 2px, transparent 2px, transparent 4px); color: var(--wox-text-secondary, #666); }
-    button.v-dash.active .dash-line.zigzag { color: var(--wox-accent, #00e5ff); }
+    button.v-dash:hover { background: var(--wox-bg-hover, #2a2a2e); border-color: var(--wox-btn-border, var(--wox-border-light, #555)); transform: translateY(-1px); }
+    button.v-dash.active { border-color: var(--wox-btn-border, var(--wox-accent, #00e5ff)); box-shadow: var(--wox-shadow-accent, 0 0 10px rgba(0, 229, 255, 0.3)); }
+    .dash-line { width: 16px; height: 3px; background: var(--wox-btn-text, var(--wox-text-secondary, #666)); border-radius: 1px; }
+    button.v-dash.active .dash-line { background: var(--wox-btn-text, var(--wox-accent, #00e5ff)); }
+    .dash-line.dotted { background: radial-gradient(circle, currentColor 1px, transparent 1px); background-size: 4px 100%; color: var(--wox-btn-text, var(--wox-text-secondary, #666)); }
+    button.v-dash.active .dash-line.dotted { color: var(--wox-btn-text, var(--wox-accent, #00e5ff)); }
+    .dash-line.dashed { background: linear-gradient(to right, currentColor 6px, transparent 6px); background-size: 10px 100%; color: var(--wox-btn-text, var(--wox-text-secondary, #666)); }
+    button.v-dash.active .dash-line.dashed { color: var(--wox-btn-text, var(--wox-accent, #00e5ff)); }
+    .dash-line.longdash { background: linear-gradient(to right, currentColor 12px, transparent 4px); background-size: 16px 100%; color: var(--wox-btn-text, var(--wox-text-secondary, #666)); }
+    button.v-dash.active .dash-line.longdash { color: var(--wox-btn-text, var(--wox-accent, #00e5ff)); }
+    .dash-line.dotdash { background: linear-gradient(to right, currentColor 8px, transparent 4px, currentColor 2px, transparent 4px); background-size: 18px 100%; color: var(--wox-btn-text, var(--wox-text-secondary, #666)); }
+    button.v-dash.active .dash-line.dotdash { color: var(--wox-btn-text, var(--wox-accent, #00e5ff)); }
+    .dash-line.zigzag { background: repeating-linear-gradient(45deg, currentColor, currentColor 2px, transparent 2px, transparent 4px); color: var(--wox-btn-text, var(--wox-text-secondary, #666)); }
+    button.v-dash.active .dash-line.zigzag { color: var(--wox-btn-text, var(--wox-accent, #00e5ff)); }
 
     .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; }
-` + S, `<button class="${l}"${d} ${i ? "disabled" : ""}>${h}</button>`), this.$("button").addEventListener("click", (u) => {
-        i || this.emit("wox-click", { originalEvent: u });
+` + M, `<button class="${b}"${k}${E} ${i ? "disabled" : ""}>${g}</button>`), this.$("button").addEventListener("click", (z) => {
+        i || this.emit("wox-click", { originalEvent: z });
       });
     });
   }
@@ -201,12 +204,12 @@ class Y extends w {
     this.isConnected && this._render();
   }
 }
-s(Y, "observedAttributes", ["variant", "icon", "label", "active", "disabled", "color", "size", "dash", "glow", "pulse"]);
+s(Y, "observedAttributes", ["variant", "icon", "label", "active", "disabled", "color", "size", "dash", "glow", "pulse", "border-color", "border-style", "icon-color", "text-color"]);
 class X extends w {
   constructor() {
     super(...arguments);
     s(this, "_render", () => {
-      const t = this.getAttribute("type") || "text", e = this.getAttribute("value") || "", n = this.getAttribute("unit") || "", o = this.getAttribute("label") || "", i = this.getAttribute("min"), a = this.getAttribute("max"), r = this.getAttribute("step"), l = this.getAttribute("placeholder") || "", h = this.hasAttribute("disabled"), d = t === "number", u = d ? `${i !== null ? ` min="${i}"` : ""}${a !== null ? ` max="${a}"` : ""}${r !== null ? ` step="${r}"` : ""}` : "";
+      const t = this.getAttribute("type") || "text", e = this.getAttribute("value") || "", n = this.getAttribute("unit") || "", o = this.getAttribute("label") || "", i = this.getAttribute("min"), r = this.getAttribute("max"), a = this.getAttribute("step"), l = this.getAttribute("placeholder") || "", x = this.hasAttribute("disabled"), d = t === "number", u = d ? `${i !== null ? ` min="${i}"` : ""}${r !== null ? ` max="${r}"` : ""}${a !== null ? ` step="${a}"` : ""}` : "";
       this.render(`
     :host { display: inline-block; }
     .wrapper { display: flex; flex-direction: column; gap: 3px; }
@@ -233,32 +236,32 @@ class X extends w {
             <div class="wrapper">
                 ${o ? `<label class="${d ? "scrub" : ""}">${o}${n ? `<span class="unit">${n}</span>` : ""}</label>` : ""}
                 <div class="input-wrap">
-                    <input type="${d ? "number" : "text"}" value="${e}" placeholder="${l}" ${u} ${h ? "disabled" : ""} class="${n && !o ? "has-unit" : ""}">
+                    <input type="${d ? "number" : "text"}" value="${e}" placeholder="${l}" ${u} ${x ? "disabled" : ""} class="${n && !o ? "has-unit" : ""}">
                     ${n && !o ? `<span class="suffix">${n}</span>` : ""}
                 </div>
             </div>
         `);
-      const x = this.$("input");
-      if (x.addEventListener("input", () => {
-        const v = d ? parseFloat(x.value) : x.value;
+      const h = this.$("input");
+      if (h.addEventListener("input", () => {
+        const v = d ? parseFloat(h.value) : h.value;
         this.emit("wox-input", { value: v });
-      }), x.addEventListener("change", () => {
-        const v = d ? parseFloat(x.value) : x.value;
+      }), h.addEventListener("change", () => {
+        const v = d ? parseFloat(h.value) : h.value;
         this.emit("wox-change", { value: v });
-      }), x.addEventListener("keydown", (v) => {
-        v.key === "Enter" && x.blur();
+      }), h.addEventListener("keydown", (v) => {
+        v.key === "Enter" && h.blur();
       }), d && o) {
         const v = this.$("label");
-        let g = 0, b = 0;
-        const y = (A) => {
-          const M = A.clientX - g, m = parseFloat(r) || 1;
-          let _ = b + Math.round(M / 2) * m;
-          i !== null && (_ = Math.max(parseFloat(i), _)), a !== null && (_ = Math.min(parseFloat(a), _)), x.value = _, this.emit("wox-input", { value: _ });
-        }, E = () => {
-          document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", E), this.emit("wox-change", { value: parseFloat(x.value) });
+        let b = 0, g = 0;
+        const f = (E) => {
+          const z = E.clientX - b, m = parseFloat(a) || 1;
+          let y = g + Math.round(z / 2) * m;
+          i !== null && (y = Math.max(parseFloat(i), y)), r !== null && (y = Math.min(parseFloat(r), y)), h.value = y, this.emit("wox-input", { value: y });
+        }, k = () => {
+          document.removeEventListener("mousemove", f), document.removeEventListener("mouseup", k), this.emit("wox-change", { value: parseFloat(h.value) });
         };
-        v.addEventListener("mousedown", (A) => {
-          h || (g = A.clientX, b = parseFloat(x.value) || 0, document.addEventListener("mousemove", y), document.addEventListener("mouseup", E), A.preventDefault());
+        v.addEventListener("mousedown", (E) => {
+          x || (b = E.clientX, g = parseFloat(h.value) || 0, document.addEventListener("mousemove", f), document.addEventListener("mouseup", k), E.preventDefault());
         });
       }
     });
@@ -286,7 +289,7 @@ class X extends w {
   }
 }
 s(X, "observedAttributes", ["type", "value", "unit", "label", "min", "max", "step", "placeholder", "disabled"]);
-const k = (p) => String(p).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+const $ = (p) => String(p).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 class q extends w {
   constructor() {
     super(...arguments);
@@ -317,8 +320,8 @@ class q extends w {
     s(this, "_calculateDropdownPosition", () => {
       const t = this.$(".trigger");
       if (!t) return null;
-      const e = t.getBoundingClientRect(), n = window.innerHeight, o = window.innerWidth, i = n - e.bottom, a = e.top, r = e.width, l = Math.max(0, Math.min(e.left, o - r));
-      return this._openUpward ? { bottom: n - e.top + 2, left: l, width: r, maxHeight: Math.max(100, Math.min(200, a - 10)) } : { top: e.bottom + 2, left: l, width: r, maxHeight: Math.max(100, Math.min(200, i - 10)) };
+      const e = t.getBoundingClientRect(), n = window.innerHeight, o = window.innerWidth, i = n - e.bottom, r = e.top, a = e.width, l = Math.max(0, Math.min(e.left, o - a));
+      return this._openUpward ? { bottom: n - e.top + 2, left: l, width: a, maxHeight: Math.max(100, Math.min(200, r - 10)) } : { top: e.bottom + 2, left: l, width: a, maxHeight: Math.max(100, Math.min(200, i - 10)) };
     });
     s(this, "_updateDropdownPosition", () => {
       requestAnimationFrame(() => {
@@ -368,25 +371,25 @@ class q extends w {
       let e = "";
       if (this.multiple && this._selectedOptions.length > 0) e = this._selectedOptions.map((o) => `
                 <span class="tag">
-                    ${o.image ? `<img src="${k(o.image)}" class="tag-img" alt="">` : ""}
-                    ${k(o.label)}
-                    <span class="remove-tag" data-value="${k(o.value)}">×</span>
+                    ${o.image ? `<img src="${$(o.image)}" class="tag-img" alt="">` : ""}
+                    ${$(o.label)}
+                    <span class="remove-tag" data-value="${$(o.value)}">×</span>
                 </span>
             `).join("");
       else if (this._selectedOptions.length > 0) {
         const o = this._selectedOptions[0];
         e = `<span class="single-value">
-                ${o.image ? `<img src="${k(o.image)}" class="single-img" alt="">` : ""}
-                <span>${k(o.label)}</span>
+                ${o.image ? `<img src="${$(o.image)}" class="single-img" alt="">` : ""}
+                <span>${$(o.label)}</span>
             </span>`;
-      } else e = `<span class="placeholder">${k(this.placeholder)}</span>`;
+      } else e = `<span class="placeholder">${$(this.placeholder)}</span>`;
       let n = "";
-      if (this._isOpen && (n = `<div class="dropdown">${this.searchable ? `<input type="text" class="search-input" placeholder="Search..." value="${k(this._searchValue)}">` : ""}${this._filteredOptions.length > 0 ? this._filteredOptions.map((o, i) => `<div
-                        class="option${this._selectedOptions.some((a) => a.value === o.value) ? " selected" : ""}${i === this._focusedIndex ? " focused" : ""}"
-                        data-value="${k(o.value)}"
+      if (this._isOpen && (n = `<div class="dropdown">${this.searchable ? `<input type="text" class="search-input" placeholder="Search..." value="${$(this._searchValue)}">` : ""}${this._filteredOptions.length > 0 ? this._filteredOptions.map((o, i) => `<div
+                        class="option${this._selectedOptions.some((r) => r.value === o.value) ? " selected" : ""}${i === this._focusedIndex ? " focused" : ""}"
+                        data-value="${$(o.value)}"
                     >
-                        ${o.image ? `<img src="${k(o.image)}" class="option-img" alt="">` : ""}
-                        <span>${k(o.label)}</span>
+                        ${o.image ? `<img src="${$(o.image)}" class="option-img" alt="">` : ""}
+                        <span>${$(o.label)}</span>
                     </div>`).join("") : '<div class="no-options">No options found</div>'}</div>`), this.render(`
     :host {
         display: inline-block;
@@ -615,7 +618,7 @@ class q extends w {
       if (t === "options") {
         this._parsedOptions = null;
         const o = this.options;
-        this._filteredOptions = [...o], this._selectedOptions = this._selectedOptions.filter((i) => o.some((a) => a.value === i.value));
+        this._filteredOptions = [...o], this._selectedOptions = this._selectedOptions.filter((i) => o.some((r) => r.value === i.value));
       } else if (t === "value" && n !== null) {
         const o = this.options.find((i) => i.value === n);
         this._selectedOptions = o ? [o] : [];
@@ -716,11 +719,11 @@ class J extends w {
       return e === "%" ? Math.round(100 * t) + "%" : n < 1 ? t.toFixed(2) : String(t);
     });
     s(this, "_updateVisuals", () => {
-      const { min: t, max: e } = this._getConfig(), n = parseFloat(this.getAttribute("value") ?? t), o = (n - t) / (e - t) * 100, i = this.$(".fill"), a = this.$(".thumb"), r = this.$(".value");
-      i && (i.style.width = o + "%"), a && (a.style.left = o + "%"), r && (r.textContent = this._formatVal(n));
+      const { min: t, max: e } = this._getConfig(), n = parseFloat(this.getAttribute("value") ?? t), o = (n - t) / (e - t) * 100, i = this.$(".fill"), r = this.$(".thumb"), a = this.$(".value");
+      i && (i.style.width = o + "%"), r && (r.style.left = o + "%"), a && (a.textContent = this._formatVal(n));
     });
     s(this, "_build", () => {
-      const { min: t, max: e } = this._getConfig(), n = parseFloat(this.getAttribute("value") ?? t), o = this.getAttribute("label") || "", i = this.hasAttribute("show-value"), a = (n - t) / (e - t) * 100, r = this.getAttribute("color") || "", l = [this.hasAttribute("glow") ? "glow" : "", this.hasAttribute("pulse") ? "pulse" : ""].filter(Boolean).join(" "), h = r ? `--wox-fx-color:${r};border-color:${r}` : "", d = r ? " custom-color" : "";
+      const { min: t, max: e } = this._getConfig(), n = parseFloat(this.getAttribute("value") ?? t), o = this.getAttribute("label") || "", i = this.hasAttribute("show-value"), r = (n - t) / (e - t) * 100, a = this.getAttribute("color") || "", l = [this.hasAttribute("glow") ? "glow" : "", this.hasAttribute("pulse") ? "pulse" : ""].filter(Boolean).join(" "), x = a ? `--wox-fx-color:${a};border-color:${a}` : "", d = a ? " custom-color" : "";
       this.render(`
     :host { display: inline-block; width: 100%; }
     .wrapper { display: flex; align-items: center; gap: var(--wox-space-lg, 12px); }
@@ -745,38 +748,38 @@ class J extends w {
     }
     .fill.custom-color { background: var(--wox-fx-color); }
     .thumb.glow { width: 16px; height: 16px; }
-` + S, `
+` + M, `
             <div class="wrapper">
                 ${o ? `<span class="label">${o}</span>` : ""}
                 <div class="track-wrap">
-                    <div class="track"><div class="fill${d}" style="width:${a}%;${r ? "--wox-fx-color:" + r : ""}"></div></div>
-                    <div class="thumb ${l}" style="${h};left:${a}%"></div>
+                    <div class="track"><div class="fill${d}" style="width:${r}%;${a ? "--wox-fx-color:" + a : ""}"></div></div>
+                    <div class="thumb ${l}" style="${x};left:${r}%"></div>
                 </div>
                 ${i ? `<span class="value">${this._formatVal(n)}</span>` : ""}
             </div>
         `), this._attachDrag();
     });
     s(this, "_attachDrag", () => {
-      const { min: t, max: e, step: n, unit: o } = this._getConfig(), i = this.$(".track-wrap"), a = this.$(".fill"), r = this.$(".thumb"), l = this.$(".value"), h = (x) => {
+      const { min: t, max: e, step: n, unit: o } = this._getConfig(), i = this.$(".track-wrap"), r = this.$(".fill"), a = this.$(".thumb"), l = this.$(".value"), x = (h) => {
         const v = i.getBoundingClientRect();
-        let g = (x - v.left) / v.width;
-        g = Math.max(0, Math.min(1, g));
-        let b = t + g * (e - t);
-        b = Math.round(b / n) * n, b = Math.max(t, Math.min(e, b));
-        const y = (b - t) / (e - t) * 100;
-        return a.style.width = y + "%", r.style.left = y + "%", l && (l.textContent = o === "%" ? Math.round(100 * b) + "%" : n < 1 ? b.toFixed(2) : String(b)), b;
-      }, d = (x) => {
-        const v = h(x.clientX);
+        let b = (h - v.left) / v.width;
+        b = Math.max(0, Math.min(1, b));
+        let g = t + b * (e - t);
+        g = Math.round(g / n) * n, g = Math.max(t, Math.min(e, g));
+        const f = (g - t) / (e - t) * 100;
+        return r.style.width = f + "%", a.style.left = f + "%", l && (l.textContent = o === "%" ? Math.round(100 * g) + "%" : n < 1 ? g.toFixed(2) : String(g)), g;
+      }, d = (h) => {
+        const v = x(h.clientX);
         this.emit("wox-input", { value: v });
-      }, u = (x) => {
-        this._dragging = !1, r.classList.remove("dragging"), document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u);
-        const v = h(x.clientX);
+      }, u = (h) => {
+        this._dragging = !1, a.classList.remove("dragging"), document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u);
+        const v = x(h.clientX);
         this.setAttribute("value", v), this.emit("wox-change", { value: v });
       };
-      i.addEventListener("mousedown", (x) => {
-        this._dragging = !0, r.classList.add("dragging");
-        const v = h(x.clientX);
-        this.emit("wox-input", { value: v }), document.addEventListener("mousemove", d), document.addEventListener("mouseup", u), x.preventDefault();
+      i.addEventListener("mousedown", (h) => {
+        this._dragging = !0, a.classList.add("dragging");
+        const v = x(h.clientX);
+        this.emit("wox-input", { value: v }), document.addEventListener("mousemove", d), document.addEventListener("mouseup", u), h.preventDefault();
       });
     });
     this._dragging = !1;
@@ -793,7 +796,7 @@ class K extends w {
   constructor() {
     super(...arguments);
     s(this, "_render", () => {
-      const t = this.getAttribute("color") || "transparent", e = this.getAttribute("size") || "24", n = this.hasAttribute("selected"), o = this.hasAttribute("glow"), i = this.hasAttribute("pulse"), a = [n ? "selected" : "", o ? "glow" : "", i ? "pulse" : ""].filter(Boolean).join(" "), r = o || i ? ` style="--wox-fx-color:${t}"` : "";
+      const t = this.getAttribute("color") || "transparent", e = this.getAttribute("size") || "24", n = this.hasAttribute("selected"), o = this.hasAttribute("glow"), i = this.hasAttribute("pulse"), r = [n ? "selected" : "", o ? "glow" : "", i ? "pulse" : ""].filter(Boolean).join(" "), a = o || i ? ` style="--wox-fx-color:${t}"` : "";
       this.render(`
     :host { display: inline-block; }
     .swatch {
@@ -811,7 +814,7 @@ class K extends w {
         background: repeating-conic-gradient(#888 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;
     }
     .color { position: absolute; inset: 0; }
- ${S} :host { --size: ${e}px; }`, `<div class="swatch ${a}"${r}>
+ ${M} :host { --size: ${e}px; }`, `<div class="swatch ${r}"${a}>
                 <div class="checker"></div>
                 <div class="color" style="background:${t}"></div>
             </div>`), this.$(".swatch").addEventListener("click", () => {
@@ -851,9 +854,9 @@ class V extends w {
     s(this, "_position", () => {
       const t = this.shadowRoot.querySelector(".tip");
       if (!t) return;
-      const e = this.getAttribute("position") || "top", n = this.getBoundingClientRect(), o = t.getBoundingClientRect(), i = window.innerWidth, a = window.innerHeight, r = { top: n.top - 6 - o.height >= 0, bottom: n.bottom + 6 + o.height <= a, left: n.left - 6 - o.width >= 0, right: n.right + 6 + o.width <= i }, l = { top: "bottom", bottom: "top", left: "right", right: "left" }, h = [e, l[e], ...["top", "bottom", "left", "right"].filter((x) => x !== e && x !== l[e])].find((x) => r[x]) || e;
+      const e = this.getAttribute("position") || "top", n = this.getBoundingClientRect(), o = t.getBoundingClientRect(), i = window.innerWidth, r = window.innerHeight, a = { top: n.top - 6 - o.height >= 0, bottom: n.bottom + 6 + o.height <= r, left: n.left - 6 - o.width >= 0, right: n.right + 6 + o.width <= i }, l = { top: "bottom", bottom: "top", left: "right", right: "left" }, x = [e, l[e], ...["top", "bottom", "left", "right"].filter((h) => h !== e && h !== l[e])].find((h) => a[h]) || e;
       let d, u;
-      h === "top" ? (d = n.top - 6 - o.height, u = n.left + n.width / 2 - o.width / 2) : h === "bottom" ? (d = n.bottom + 6, u = n.left + n.width / 2 - o.width / 2) : h === "left" ? (d = n.top + n.height / 2 - o.height / 2, u = n.left - 6 - o.width) : (d = n.top + n.height / 2 - o.height / 2, u = n.right + 6), u = Math.max(4, Math.min(u, i - o.width - 4)), d = Math.max(4, Math.min(d, a - o.height - 4)), t.style.top = `${d}px`, t.style.left = `${u}px`;
+      x === "top" ? (d = n.top - 6 - o.height, u = n.left + n.width / 2 - o.width / 2) : x === "bottom" ? (d = n.bottom + 6, u = n.left + n.width / 2 - o.width / 2) : x === "left" ? (d = n.top + n.height / 2 - o.height / 2, u = n.left - 6 - o.width) : (d = n.top + n.height / 2 - o.height / 2, u = n.right + 6), u = Math.max(4, Math.min(u, i - o.width - 4)), d = Math.max(4, Math.min(d, r - o.height - 4)), t.style.top = `${d}px`, t.style.left = `${u}px`;
     });
   }
   connectedCallback() {
@@ -973,21 +976,21 @@ class U extends w {
       const t = this._wCtx, e = 220;
       t.clearRect(0, 0, e, e);
       const n = t.createConicGradient(-Math.PI / 2, 110, 110);
-      for (let x = 0; x <= 36; x++) n.addColorStop(x / 36, `hsl(${10 * x},100%,50%)`);
+      for (let h = 0; h <= 36; h++) n.addColorStop(h / 36, `hsl(${10 * h},100%,50%)`);
       t.fillStyle = n, t.beginPath(), t.arc(110, 110, 104, 0, 2 * Math.PI), t.fill(), t.save(), t.globalCompositeOperation = "destination-out", t.beginPath(), t.arc(110, 110, 78, 0, 2 * Math.PI), t.fill(), t.restore(), t.strokeStyle = "rgba(0,0,0,0.25)", t.lineWidth = 1, t.beginPath(), t.arc(110, 110, 103.5, 0, 2 * Math.PI), t.stroke(), t.beginPath(), t.arc(110, 110, 78.5, 0, 2 * Math.PI), t.stroke();
-      const o = this._hue * Math.PI * 2 - Math.PI / 2, i = 110 + 91 * Math.cos(o), a = 110 + 91 * Math.sin(o);
-      t.strokeStyle = "#fff", t.lineWidth = 2.5, t.beginPath(), t.arc(i, a, 8, 0, 2 * Math.PI), t.stroke(), t.strokeStyle = "rgba(0,0,0,0.4)", t.lineWidth = 1, t.beginPath(), t.arc(i, a, 8, 0, 2 * Math.PI), t.stroke();
-      const r = 104, l = t.createLinearGradient(58, 0, 162, 0);
-      l.addColorStop(0, "#fff"), l.addColorStop(1, `hsl(${360 * this._hue},100%,50%)`), t.fillStyle = l, t.fillRect(58, 58, r, r);
-      const h = t.createLinearGradient(0, 58, 0, 162);
-      h.addColorStop(0, "rgba(0,0,0,0)"), h.addColorStop(1, "rgba(0,0,0,1)"), t.fillStyle = h, t.fillRect(58, 58, r, r);
-      const d = 58 + this._sat * r, u = 58 + (1 - this._val) * r;
+      const o = this._hue * Math.PI * 2 - Math.PI / 2, i = 110 + 91 * Math.cos(o), r = 110 + 91 * Math.sin(o);
+      t.strokeStyle = "#fff", t.lineWidth = 2.5, t.beginPath(), t.arc(i, r, 8, 0, 2 * Math.PI), t.stroke(), t.strokeStyle = "rgba(0,0,0,0.4)", t.lineWidth = 1, t.beginPath(), t.arc(i, r, 8, 0, 2 * Math.PI), t.stroke();
+      const a = 104, l = t.createLinearGradient(58, 0, 162, 0);
+      l.addColorStop(0, "#fff"), l.addColorStop(1, `hsl(${360 * this._hue},100%,50%)`), t.fillStyle = l, t.fillRect(58, 58, a, a);
+      const x = t.createLinearGradient(0, 58, 0, 162);
+      x.addColorStop(0, "rgba(0,0,0,0)"), x.addColorStop(1, "rgba(0,0,0,1)"), t.fillStyle = x, t.fillRect(58, 58, a, a);
+      const d = 58 + this._sat * a, u = 58 + (1 - this._val) * a;
       t.strokeStyle = "#fff", t.lineWidth = 2.5, t.beginPath(), t.arc(d, u, 7, 0, 2 * Math.PI), t.stroke(), t.strokeStyle = "rgba(0,0,0,0.4)", t.lineWidth = 1, t.beginPath(), t.arc(d, u, 7, 0, 2 * Math.PI), t.stroke();
     });
     s(this, "_drawAlpha", () => {
       const t = this._aCtx;
       t.clearRect(0, 0, 192, 14);
-      for (let a = 0; a < 192; a += 8) for (let r = 0; r < 14; r += 8) t.fillStyle = (a / 8 + r / 8) % 2 == 0 ? "#aaa" : "#fff", t.fillRect(a, r, 8, 8);
+      for (let r = 0; r < 192; r += 8) for (let a = 0; a < 14; a += 8) t.fillStyle = (r / 8 + a / 8) % 2 == 0 ? "#aaa" : "#fff", t.fillRect(r, a, 8, 8);
       const [e, n, o] = this._hsvToRgb(this._hue, this._sat, this._val), i = t.createLinearGradient(0, 0, 192, 0);
       i.addColorStop(0, `rgba(${e},${n},${o},0)`), i.addColorStop(1, `rgba(${e},${n},${o},1)`), t.fillStyle = i, t.fillRect(0, 0, 192, 14), this._alphaKnob.style.left = 192 * this._alpha - 7 + "px";
     });
@@ -1022,16 +1025,16 @@ class U extends w {
     });
     s(this, "_hsvToRgb", (t, e, n) => {
       const o = (i) => {
-        const a = (i + 6 * t) % 6;
-        return n - n * e * Math.max(0, Math.min(a, 4 - a, 1));
+        const r = (i + 6 * t) % 6;
+        return n - n * e * Math.max(0, Math.min(r, 4 - r, 1));
       };
       return [Math.round(255 * o(5)), Math.round(255 * o(3)), Math.round(255 * o(1))];
     });
     s(this, "_rgbToHsv", (t, e, n) => {
       t /= 255, e /= 255, n /= 255;
       const o = Math.max(t, e, n), i = o - Math.min(t, e, n);
-      let a = 0;
-      return i && (a = o === t ? ((e - n) / i % 6 + 6) % 6 : o === e ? (n - t) / i + 2 : (t - e) / i + 4), [a / 6, o ? i / o : 0, o];
+      let r = 0;
+      return i && (r = o === t ? ((e - n) / i % 6 + 6) % 6 : o === e ? (n - t) / i + 2 : (t - e) / i + 4), [r / 6, o ? i / o : 0, o];
     });
     s(this, "_hexToRgb", (t) => {
       const e = parseInt(t.slice(1), 16);
@@ -1076,13 +1079,13 @@ class Q extends w {
   constructor() {
     super(...arguments);
     s(this, "_render", () => {
-      const t = this.getAttribute("type") || "item", e = this.getAttribute("label") || "", n = this.getAttribute("shortcut") || "", o = this.getAttribute("icon") || "", i = this.hasAttribute("disabled"), a = this.hasAttribute("submenu");
+      const t = this.getAttribute("type") || "item", e = this.getAttribute("label") || "", n = this.getAttribute("shortcut") || "", o = this.getAttribute("icon") || "", i = this.hasAttribute("disabled"), r = this.hasAttribute("submenu");
       t !== "separator" ? t !== "header" ? (this.render(P, `
             <div class="item ${i ? "disabled" : ""}">
                 ${o ? `<span class="icon material-icons">${o}</span>` : ""}
                 <span class="label">${e}</span>
                 ${n ? `<span class="shortcut">${n}</span>` : ""}
-                ${a ? '<span class="arrow">&#9654;</span>' : ""}
+                ${r ? '<span class="arrow">&#9654;</span>' : ""}
             </div>
         `), i || this.$(".item").addEventListener("click", () => {
         this.emit("wox-select", { label: e });
@@ -1124,7 +1127,7 @@ class Z extends w {
         `);
       const o = this.$(".trigger");
       this.$(".dropdown"), n === "click" ? o.addEventListener("click", (i) => {
-        i.stopPropagation(), this._toggle();
+        i.stopPropagation(), this.children.length === 0 ? this.emit("wox-click", { label: this.getAttribute("label") || "" }) : this._toggle();
       }) : n === "hover" && (this.addEventListener("mouseenter", () => this._open()), this.addEventListener("mouseleave", () => this._close())), this._outsideClick = (i) => {
         !this.contains(i.target) && this.hasAttribute("open") && this._close();
       }, document.addEventListener("mousedown", this._outsideClick), this.addEventListener("wox-select", () => this._close());
@@ -1139,10 +1142,10 @@ class Z extends w {
       requestAnimationFrame(() => {
         const t = this.$(".trigger"), e = this.$(".dropdown");
         if (!t || !e) return;
-        const n = t.getBoundingClientRect(), o = window.innerWidth, i = window.innerHeight, a = e.getBoundingClientRect();
-        n.left + a.width > o ? e.style.left = n.right - a.width + "px" : e.style.left = `${n.left}px`;
-        const r = i - n.bottom, l = n.top;
-        r >= a.height || r >= l ? (e.style.top = `${n.bottom}px`, e.style.bottom = "") : (e.style.top = "", e.style.bottom = i - n.top + "px");
+        const n = t.getBoundingClientRect(), o = window.innerWidth, i = window.innerHeight, r = e.getBoundingClientRect();
+        n.left + r.width > o ? e.style.left = n.right - r.width + "px" : e.style.left = `${n.left}px`;
+        const a = i - n.bottom, l = n.top;
+        a >= r.height || a >= l ? (e.style.top = `${n.bottom}px`, e.style.bottom = "") : (e.style.top = "", e.style.bottom = i - n.top + "px");
       });
     });
     s(this, "_close", () => {
@@ -1171,7 +1174,7 @@ class tt extends w {
   constructor() {
     super(...arguments);
     s(this, "_render", () => {
-      const t = this.getAttribute("name") || "Layer", e = this.getAttribute("type") || "layer", n = this.hasAttribute("visible"), o = this.hasAttribute("locked"), i = this.hasAttribute("selected"), a = $t[e] || "layers";
+      const t = this.getAttribute("name") || "Layer", e = this.getAttribute("type") || "layer", n = this.hasAttribute("visible"), o = this.hasAttribute("locked"), i = this.hasAttribute("selected"), r = $t[e] || "layers";
       this.render(`
     :host { display: block; }
     .layer {
@@ -1199,19 +1202,19 @@ class tt extends w {
     .toggle:hover, .toggle.on { opacity: 1; color: var(--wox-accent, #00e5ff); }
 `, `
             <div class="layer ${i ? "selected" : ""}">
-                <span class="type-icon material-icons">${a}</span>
+                <span class="type-icon material-icons">${r}</span>
                 <span class="name">${t}</span>
                 <span class="toggle eye ${n ? "on" : ""} material-icons">${n ? "visibility" : "visibility_off"}</span>
                 <span class="toggle lock ${o ? "on" : ""} material-icons">${o ? "lock" : "lock_open"}</span>
             </div>
-        `), this.$(".layer").addEventListener("click", (r) => {
-        r.target.closest(".toggle") || this.emit("wox-select", { name: t });
-      }), this.$(".name").addEventListener("dblclick", () => this._startEditing()), this.$(".eye").addEventListener("click", (r) => {
-        r.stopPropagation();
+        `), this.$(".layer").addEventListener("click", (a) => {
+        a.target.closest(".toggle") || this.emit("wox-select", { name: t });
+      }), this.$(".name").addEventListener("dblclick", () => this._startEditing()), this.$(".eye").addEventListener("click", (a) => {
+        a.stopPropagation();
         const l = !n;
         l ? this.setAttribute("visible", "") : this.removeAttribute("visible"), this.emit("wox-visibility", { visible: l });
-      }), this.$(".lock").addEventListener("click", (r) => {
-        r.stopPropagation();
+      }), this.$(".lock").addEventListener("click", (a) => {
+        a.stopPropagation();
         const l = !o;
         l ? this.setAttribute("locked", "") : this.removeAttribute("locked"), this.emit("wox-lock", { locked: l });
       });
@@ -1359,9 +1362,9 @@ class ot extends w {
       t.innerHTML = "";
       const e = this._getTabs(), n = this.getAttribute("active") || ((o = e[0]) == null ? void 0 : o.getAttribute("name")) || "";
       e.forEach((i) => {
-        const a = i.getAttribute("name") || "", r = i.getAttribute("label") || a, l = document.createElement("button");
-        l.className = "tab-btn" + (a === n ? " active" : ""), l.textContent = r, l.addEventListener("click", () => {
-          this.setAttribute("active", a), this.emit("wox-tab-change", { name: a });
+        const r = i.getAttribute("name") || "", a = i.getAttribute("label") || r, l = document.createElement("button");
+        l.className = "tab-btn" + (r === n ? " active" : ""), l.textContent = a, l.addEventListener("click", () => {
+          this.setAttribute("active", r), this.emit("wox-tab-change", { name: r });
         }), t.appendChild(l);
       }), this._updateActive();
     });
@@ -1371,9 +1374,9 @@ class ot extends w {
       t.forEach((o) => {
         (o.getAttribute("name") || "") === e ? o.setAttribute("active", "") : o.removeAttribute("active");
       }), this.$$(".tab-btn").forEach((o, i) => {
-        var r;
-        const a = ((r = t[i]) == null ? void 0 : r.getAttribute("name")) || "";
-        o.classList.toggle("active", a === e);
+        var a;
+        const r = ((a = t[i]) == null ? void 0 : a.getAttribute("name")) || "";
+        o.classList.toggle("active", r === e);
       });
     });
     s(this, "_getTabs", () => [...this.querySelectorAll(":scope > wox-tab")]);
@@ -1434,7 +1437,7 @@ class st extends w {
   }
 }
 s(st, "observedAttributes", ["width", "position"]);
-class at extends w {
+class rt extends w {
   constructor() {
     super(...arguments);
     s(this, "_render", () => {
@@ -1460,14 +1463,14 @@ class at extends w {
         const n = this.$(".resizer");
         if (!n) return;
         let o = 0, i = 0;
-        const a = this.getAttribute("position") === "left", r = (h) => {
-          const d = a ? h.clientX - o : o - h.clientX, u = Math.max(180, Math.min(600, i + d));
+        const r = this.getAttribute("position") === "left", a = (x) => {
+          const d = r ? x.clientX - o : o - x.clientX, u = Math.max(180, Math.min(600, i + d));
           this.style.width = u + "px";
         }, l = () => {
-          document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", l);
+          document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", l);
         };
-        n.addEventListener("mousedown", (h) => {
-          o = h.clientX, i = this.getBoundingClientRect().width, document.addEventListener("mousemove", r), document.addEventListener("mouseup", l), h.preventDefault();
+        n.addEventListener("mousedown", (x) => {
+          o = x.clientX, i = this.getBoundingClientRect().width, document.addEventListener("mousemove", a), document.addEventListener("mouseup", l), x.preventDefault();
         });
       }
     });
@@ -1479,8 +1482,8 @@ class at extends w {
     this.isConnected && this._render();
   }
 }
-s(at, "observedAttributes", ["width", "position", "resizable"]);
-class rt extends w {
+s(rt, "observedAttributes", ["width", "position", "resizable"]);
+class at extends w {
   constructor() {
     super(...arguments);
     s(this, "_render", () => {
@@ -1506,7 +1509,7 @@ class rt extends w {
     this.isConnected && this._render();
   }
 }
-s(rt, "observedAttributes", ["height"]);
+s(at, "observedAttributes", ["height"]);
 class dt extends w {
   constructor() {
     super(...arguments);
@@ -1540,7 +1543,7 @@ class lt extends w {
   constructor() {
     super(...arguments);
     s(this, "_render", () => {
-      const t = this.getAttribute("title") || "", e = !this.hasAttribute("closable") || this.getAttribute("closable") !== "false", n = this.getAttribute("width") || "400px", o = this.getAttribute("color") || "", i = [this.hasAttribute("glow") ? "glow" : "", this.hasAttribute("pulse") ? "pulse" : ""].filter(Boolean).join(" "), a = o ? ` style="--wox-fx-color:${o}"` : "";
+      const t = this.getAttribute("title") || "", e = !this.hasAttribute("closable") || this.getAttribute("closable") !== "false", n = this.getAttribute("width") || "400px", o = this.getAttribute("color") || "", i = [this.hasAttribute("glow") ? "glow" : "", this.hasAttribute("pulse") ? "pulse" : ""].filter(Boolean).join(" "), r = o ? ` style="--wox-fx-color:${o}"` : "";
       this.render(`
     :host { display: none; }
     :host([open]) { display: block; }
@@ -1577,9 +1580,9 @@ class lt extends w {
     .btn-secondary:hover { background: var(--wox-border-light, #444); }
     .btn-primary { background: var(--wox-accent, #00e5ff); color: var(--wox-text-hi, #fff); }
     .btn-primary:hover { filter: brightness(0.85); }
- ${S} .box { --width: ${n}; }`, `
+ ${M} .box { --width: ${n}; }`, `
             <div class="overlay">
-                <div class="box ${i}"${a}>
+                <div class="box ${i}"${r}>
                     <div class="header">
                         <span class="title">${t}</span>
                         ${e ? '<button class="close-btn">&#x2715;</button>' : ""}
@@ -1596,16 +1599,16 @@ class lt extends w {
         `), this.$(".overlay").addEventListener("click", (d) => {
         d.target === this.$(".overlay") && (this.removeAttribute("open"), this.emit("wox-close", {}));
       });
-      const r = this.$(".close-btn");
-      r && r.addEventListener("click", () => {
+      const a = this.$(".close-btn");
+      a && a.addEventListener("click", () => {
         this.removeAttribute("open"), this.emit("wox-close", {});
       });
       const l = this.$(".cancel-btn");
       l && l.addEventListener("click", () => {
         this.removeAttribute("open"), this.emit("wox-cancel", {});
       });
-      const h = this.$(".ok-btn");
-      h && h.addEventListener("click", () => {
+      const x = this.$(".ok-btn");
+      x && x.addEventListener("click", () => {
         this.removeAttribute("open"), this.emit("wox-confirm", {});
       });
     });
@@ -1655,26 +1658,26 @@ class vt extends w {
       if (!this._sortKey) return this._rows;
       const t = this._sortKey, e = this._sortDir === "asc" ? 1 : -1;
       return [...this._rows].sort((n, o) => {
-        const i = n[t], a = o[t];
-        return i == null && a == null ? 0 : i == null ? e : a == null ? -e : typeof i == "number" && typeof a == "number" ? (i - a) * e : String(i).localeCompare(String(a)) * e;
+        const i = n[t], r = o[t];
+        return i == null && r == null ? 0 : i == null ? e : r == null ? -e : typeof i == "number" && typeof r == "number" ? (i - r) * e : String(i).localeCompare(String(r)) * e;
       });
     });
     s(this, "_render", () => {
       const t = this._getSortedRows(), e = this._columns.map((o, i) => {
-        const a = this._sortKey === o.key, r = [a ? "sorted" : "", a && this._sortDir === "desc" ? "desc" : ""].filter(Boolean).join(" "), l = o.sortable !== !1;
-        return `<div class="header-cell ${r}" data-col="${i}" style="width:${this._colWidths[i]}px" draggable="true">
+        const r = this._sortKey === o.key, a = [r ? "sorted" : "", r && this._sortDir === "desc" ? "desc" : ""].filter(Boolean).join(" "), l = o.sortable !== !1;
+        return `<div class="header-cell ${a}" data-col="${i}" style="width:${this._colWidths[i]}px" draggable="true">
                 <span class="label-text">${o.label || o.key}</span>
                 ${l ? '<span class="sort-arrow">&#9650;</span>' : ""}
                 <div class="resize-handle" data-col="${i}"></div>
             </div>`;
       }).join(""), n = t.length === 0 ? '<div class="empty">No data</div>' : t.map((o, i) => {
-        const a = i % 2 == 0 ? "even" : "odd", r = this._columns.map((l, h) => {
-          const d = l.align ? ` align-${l.align}` : "", u = this._editingCell && this._editingCell.rowIndex === i && this._editingCell.key === l.key, x = o[l.key] != null ? o[l.key] : "";
-          return u ? `<div class="cell${d}" style="width:${this._colWidths[h]}px" data-key="${l.key}">
+        const r = i % 2 == 0 ? "even" : "odd", a = this._columns.map((l, x) => {
+          const d = l.align ? ` align-${l.align}` : "", u = this._editingCell && this._editingCell.rowIndex === i && this._editingCell.key === l.key, h = o[l.key] != null ? o[l.key] : "";
+          return u ? `<div class="cell${d}" style="width:${this._colWidths[x]}px" data-key="${l.key}">
                             <input class="cell-input" spellcheck="false">
-                        </div>` : `<div class="cell${d}" style="width:${this._colWidths[h]}px" data-key="${l.key}">${x}</div>`;
+                        </div>` : `<div class="cell${d}" style="width:${this._colWidths[x]}px" data-key="${l.key}">${h}</div>`;
         }).join("");
-        return `<div class="row ${a}" data-row="${i}">${r}</div>`;
+        return `<div class="row ${r}" data-row="${i}">${a}</div>`;
       }).join("");
       if (this.render(`
     :host { display: block; overflow: hidden; border: 1px solid var(--wox-border, #333); border-radius: var(--wox-radius-md, 6px); background: var(--wox-bg-panel, #17171a); }
@@ -1768,11 +1771,11 @@ class vt extends w {
         `), this._bindEvents(), this._editingCell) {
         const o = this.$(".cell-input");
         if (o) {
-          const { rowIndex: i, key: a } = this._editingCell, r = this._getSortedRows();
-          let l = r[i][a] != null ? r[i][a] : "";
-          const h = document.createElement("div");
-          h.innerHTML = l;
-          const d = h.textContent || h.innerText || l;
+          const { rowIndex: i, key: r } = this._editingCell, a = this._getSortedRows();
+          let l = a[i][r] != null ? a[i][r] : "";
+          const x = document.createElement("div");
+          x.innerHTML = l;
+          const d = x.textContent || x.innerText || l;
           o.value = d, o.dataset.oldValue = d, o.focus(), o.select(), o.addEventListener("keydown", (u) => {
             u.key === "Enter" ? this._commitEdit(o.value) : u.key === "Escape" && (this._editingCell = null, this._render());
           }), o.addEventListener("blur", () => {
@@ -1783,8 +1786,8 @@ class vt extends w {
     });
     s(this, "_commitEdit", (t) => {
       if (!this._editingCell) return;
-      const { rowIndex: e, key: n } = this._editingCell, o = this.$(".cell-input"), i = o ? o.dataset.oldValue : "", a = this._getSortedRows()[e];
-      i !== t && (this.emit("wox-cell-change", { row: a, key: n, oldValue: i, newValue: t }), a[n] = t), this._editingCell = null, this._render();
+      const { rowIndex: e, key: n } = this._editingCell, o = this.$(".cell-input"), i = o ? o.dataset.oldValue : "", r = this._getSortedRows()[e];
+      i !== t && (this.emit("wox-cell-change", { row: r, key: n, oldValue: i, newValue: t }), r[n] = t), this._editingCell = null, this._render();
     });
     s(this, "_bindEvents", () => {
       this.$$(".header-cell").forEach((t) => {
@@ -1813,8 +1816,8 @@ class vt extends w {
         }), t.querySelectorAll(".cell").forEach((e) => {
           e.addEventListener("dblclick", (n) => {
             n.stopPropagation();
-            const o = Number(t.dataset.row), i = e.dataset.key, a = this._columns.findIndex((r) => r.key === i);
-            this._columns[a].editable !== !1 && (this._editingCell = { rowIndex: o, key: i }, this._render());
+            const o = Number(t.dataset.row), i = e.dataset.key, r = this._columns.findIndex((a) => a.key === i);
+            this._columns[r].editable !== !1 && (this._editingCell = { rowIndex: o, key: i }, this._render());
           });
         });
       }), this.$$(".resize-handle").forEach((t) => {
@@ -1822,13 +1825,13 @@ class vt extends w {
           e.preventDefault(), e.stopPropagation();
           const n = Number(t.dataset.col), o = e.clientX, i = this._colWidths[n];
           t.classList.add("active");
-          const a = (l) => {
-            const h = l.clientX - o;
-            this._colWidths[n] = Math.max(40, i + h), this._applyWidths();
-          }, r = () => {
-            t.classList.remove("active"), document.removeEventListener("mousemove", a), document.removeEventListener("mouseup", r);
+          const r = (l) => {
+            const x = l.clientX - o;
+            this._colWidths[n] = Math.max(40, i + x), this._applyWidths();
+          }, a = () => {
+            t.classList.remove("active"), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", a);
           };
-          document.addEventListener("mousemove", a), document.addEventListener("mouseup", r);
+          document.addEventListener("mousemove", r), document.addEventListener("mouseup", a);
         });
       });
     });
@@ -1844,8 +1847,8 @@ class vt extends w {
     s(this, "_swapColumns", (t, e) => {
       const n = [...this._columns], o = [...this._colWidths], [i] = n.splice(t, 1);
       n.splice(e, 0, i);
-      const [a] = o.splice(t, 1);
-      o.splice(e, 0, a), this._columns = n, this._colWidths = o, this._render();
+      const [r] = o.splice(t, 1);
+      o.splice(e, 0, r), this._columns = n, this._colWidths = o, this._render();
     });
   }
   connectedCallback() {
@@ -1864,7 +1867,7 @@ class vt extends w {
     return this._rows;
   }
 }
-const Et = 4e3, ht = { TL: { top: "16px", left: "16px" }, TC: { top: "16px", left: "50%", transform: "translateX(-50%)" }, TR: { top: "16px", right: "16px" }, BL: { bottom: "16px", left: "16px" }, BC: { bottom: "16px", left: "50%", transform: "translateX(-50%)" }, BR: { bottom: "16px", right: "16px" } }, Ct = { TL: "translateX(-120%)", TC: "translateY(-120%)", TR: "translateX(120%)", BL: "translateX(-120%)", BC: "translateY(120%)", BR: "translateX(120%)" }, At = { success: { bg: "#1a2e1a", border: "#4CAF50", icon: "#66BB6A", progress: "#4CAF50", text: "#c8e6c9" }, error: { bg: "#2e1a1a", border: "#f44336", icon: "#ef5350", progress: "#f44336", text: "#ffcdd2" }, warning: { bg: "#2e2a1a", border: "#FF9800", icon: "#FFA726", progress: "#FF9800", text: "#ffe0b2" }, info: { bg: "#1a222e", border: "#2196F3", icon: "#42A5F5", progress: "#2196F3", text: "#bbdefb" } }, zt = { success: { bg: "#e8f5e9", border: "#2e7d32", icon: "#388e3c", progress: "#2e7d32", text: "#1b5e20" }, error: { bg: "#fce4ec", border: "#c62828", icon: "#d32f2f", progress: "#c62828", text: "#b71c1c" }, warning: { bg: "#fff8e1", border: "#e65100", icon: "#ef6c00", progress: "#e65100", text: "#bf360c" }, info: { bg: "#e3f2fd", border: "#1565c0", icon: "#1976d2", progress: "#1565c0", text: "#0d47a1" } }, xt = { success: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>', error: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>', warning: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>', info: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>' };
+const Ct = 4e3, ht = { TL: { top: "16px", left: "16px" }, TC: { top: "16px", left: "50%", transform: "translateX(-50%)" }, TR: { top: "16px", right: "16px" }, BL: { bottom: "16px", left: "16px" }, BC: { bottom: "16px", left: "50%", transform: "translateX(-50%)" }, BR: { bottom: "16px", right: "16px" } }, Et = { TL: "translateX(-120%)", TC: "translateY(-120%)", TR: "translateX(120%)", BL: "translateX(-120%)", BC: "translateY(120%)", BR: "translateX(120%)" }, At = { success: { bg: "#1a2e1a", border: "#4CAF50", icon: "#66BB6A", progress: "#4CAF50", text: "#c8e6c9" }, error: { bg: "#2e1a1a", border: "#f44336", icon: "#ef5350", progress: "#f44336", text: "#ffcdd2" }, warning: { bg: "#2e2a1a", border: "#FF9800", icon: "#FFA726", progress: "#FF9800", text: "#ffe0b2" }, info: { bg: "#1a222e", border: "#2196F3", icon: "#42A5F5", progress: "#2196F3", text: "#bbdefb" } }, zt = { success: { bg: "#e8f5e9", border: "#2e7d32", icon: "#388e3c", progress: "#2e7d32", text: "#1b5e20" }, error: { bg: "#fce4ec", border: "#c62828", icon: "#d32f2f", progress: "#c62828", text: "#b71c1c" }, warning: { bg: "#fff8e1", border: "#e65100", icon: "#ef6c00", progress: "#e65100", text: "#bf360c" }, info: { bg: "#e3f2fd", border: "#1565c0", icon: "#1976d2", progress: "#1565c0", text: "#0d47a1" } }, xt = { success: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>', error: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>', warning: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>', info: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>' };
 let ut = !1;
 const N = /* @__PURE__ */ new Set(), F = {}, D = (p, c, t = {}) => {
   (() => {
@@ -1930,61 +1933,61 @@ const N = /* @__PURE__ */ new Set(), F = {}, D = (p, c, t = {}) => {
   const e = `${p}::${c}`;
   if (N.has(e)) return;
   N.add(e);
-  const { duration: n = Et, closable: o = !0, position: i = "BR" } = t, a = document.documentElement.dataset.woxTheme === "light", r = ((m) => {
-    const _ = document.documentElement.dataset.woxTheme === "light" ? zt : At;
-    return _[m] || _.info;
-  })(p), l = ht[i] ? i : "BR", h = ((m) => {
+  const { duration: n = Ct, closable: o = !0, position: i = "BR" } = t, r = document.documentElement.dataset.woxTheme === "light", a = ((m) => {
+    const y = document.documentElement.dataset.woxTheme === "light" ? zt : At;
+    return y[m] || y.info;
+  })(p), l = ht[i] ? i : "BR", x = ((m) => {
     if (F[m]) return F[m];
-    const _ = document.createElement("div");
-    _.className = `wox-toast-container wox-toast-container-${m}`;
+    const y = document.createElement("div");
+    y.className = `wox-toast-container wox-toast-container-${m}`;
     const _t = ht[m];
-    return Object.assign(_.style, _t), m.startsWith("B") && (_.style.flexDirection = "column-reverse"), document.body.appendChild(_), F[m] = _, _;
+    return Object.assign(y.style, _t), m.startsWith("B") && (y.style.flexDirection = "column-reverse"), document.body.appendChild(y), F[m] = y, y;
   })(l), d = document.createElement("div");
-  d.className = `wox-toast wox-toast-${p}`, d.style.backgroundColor = r.bg, d.style.borderLeftColor = r.border, d.style.color = r.text;
+  d.className = `wox-toast wox-toast-${p}`, d.style.backgroundColor = a.bg, d.style.borderLeftColor = a.border, d.style.color = a.text;
   let u = `
-		<span class="wox-toast-icon" style="color:${r.icon}">${xt[p] || xt.info}</span>
+		<span class="wox-toast-icon" style="color:${a.icon}">${xt[p] || xt.info}</span>
 		<span class="wox-toast-message">${c}</span>
 	`;
   if (o && (u += '<button class="wox-toast-close" aria-label="Close">&times;</button>'), d.innerHTML = u, o) {
     const m = d.querySelector(".wox-toast-close");
     m && (m.addEventListener("mouseenter", () => {
-      m.style.color = r.icon;
+      m.style.color = a.icon;
     }), m.addEventListener("mouseleave", () => {
-      m.style.color = a ? "#999" : "#666";
+      m.style.color = r ? "#999" : "#666";
     }));
   }
-  let x = null;
-  n > 0 && (x = document.createElement("div"), x.className = "wox-toast-progress", x.style.backgroundColor = r.progress, x.style.width = "100%", d.appendChild(x));
-  const v = Ct[l];
-  d.animate([{ transform: v, opacity: 0 }, { transform: "translateX(0) translateY(0)", opacity: 1 }], { duration: 300, easing: "cubic-bezier(.22,1,.36,1)", fill: "forwards" }), h.appendChild(d);
-  let g = null, b = n, y = 0, E = null;
-  const A = () => {
-    n <= 0 || (y = Date.now(), x && (E = x.animate([{ width: x.style.width }, { width: "0%" }], { duration: b, easing: "linear", fill: "forwards" })), g = setTimeout(() => M(), b));
-  }, M = () => {
-    N.delete(e), g && (clearTimeout(g), g = null), E && E.cancel(), d.animate([{ transform: "translateX(0) translateY(0)", opacity: 1 }, { transform: v, opacity: 0 }], { duration: 300, easing: "cubic-bezier(.22,1,.36,1)", fill: "forwards" }).onfinish = () => {
+  let h = null;
+  n > 0 && (h = document.createElement("div"), h.className = "wox-toast-progress", h.style.backgroundColor = a.progress, h.style.width = "100%", d.appendChild(h));
+  const v = Et[l];
+  d.animate([{ transform: v, opacity: 0 }, { transform: "translateX(0) translateY(0)", opacity: 1 }], { duration: 300, easing: "cubic-bezier(.22,1,.36,1)", fill: "forwards" }), x.appendChild(d);
+  let b = null, g = n, f = 0, k = null;
+  const E = () => {
+    n <= 0 || (f = Date.now(), h && (k = h.animate([{ width: h.style.width }, { width: "0%" }], { duration: g, easing: "linear", fill: "forwards" })), b = setTimeout(() => z(), g));
+  }, z = () => {
+    N.delete(e), b && (clearTimeout(b), b = null), k && k.cancel(), d.animate([{ transform: "translateX(0) translateY(0)", opacity: 1 }, { transform: v, opacity: 0 }], { duration: 300, easing: "cubic-bezier(.22,1,.36,1)", fill: "forwards" }).onfinish = () => {
       const m = d.offsetHeight;
       d.style.minHeight = "0", d.style.padding = "0", d.style.margin = "0", d.style.overflow = "hidden", d.animate([{ height: `${m}px` }, { height: "0px" }], { duration: 200, easing: "ease" }).onfinish = () => d.remove();
     };
   };
   if (d.addEventListener("mouseenter", () => {
-    g && (clearTimeout(g), g = null), E && E.pause();
-    const m = Date.now() - y;
-    if (b = Math.max(b - m, 0), x && E) {
-      const _ = n > 0 ? b / n * 100 : 0;
-      x.style.width = `${_}%`;
+    b && (clearTimeout(b), b = null), k && k.pause();
+    const m = Date.now() - f;
+    if (g = Math.max(g - m, 0), h && k) {
+      const y = n > 0 ? g / n * 100 : 0;
+      h.style.width = `${y}%`;
     }
-  }), d.addEventListener("mouseleave", A), o) {
+  }), d.addEventListener("mouseleave", E), o) {
     const m = d.querySelector(".wox-toast-close");
-    m && m.addEventListener("click", M);
+    m && m.addEventListener("click", z);
   }
-  A();
+  E();
 };
-class z extends w {
+class L extends w {
 }
-s(z, "success", (c, t) => D("success", c, t)), s(z, "error", (c, t) => D("error", c, t)), s(z, "warning", (c, t) => D("warning", c, t)), s(z, "info", (c, t) => D("info", c, t));
-const f = class f extends w {
+s(L, "success", (c, t) => D("success", c, t)), s(L, "error", (c, t) => D("error", c, t)), s(L, "warning", (c, t) => D("warning", c, t)), s(L, "info", (c, t) => D("info", c, t));
+const _ = class _ extends w {
 };
-s(f, "_el", null), s(f, "_listenersReady", !1), s(f, "show", (c, t) => {
+s(_, "_el", null), s(_, "_listenersReady", !1), s(_, "show", (c, t) => {
   if (!c || !t) return;
   c.preventDefault(), c.stopPropagation(), (() => {
     if (document.getElementById("wox-ctx-menu-styles")) return;
@@ -2018,37 +2021,37 @@ s(f, "_el", null), s(f, "_listenersReady", !1), s(f, "show", (c, t) => {
 .wox-ctx-menu-divider { height: 1px; background: var(--wox-border, #333); margin: 4px 8px; }
 `, document.head.appendChild(n);
   })();
-  let e = f._el;
-  e || (e = document.createElement("div"), e.id = "wox-ctx-menu", e.className = "wox-ctx-menu", document.body.appendChild(e), f._el = e), e.innerHTML = "", t.forEach((n) => {
+  let e = _._el;
+  e || (e = document.createElement("div"), e.id = "wox-ctx-menu", e.className = "wox-ctx-menu", document.body.appendChild(e), _._el = e), e.innerHTML = "", t.forEach((n) => {
     if (n.divider) {
-      const r = document.createElement("div");
-      return r.className = "wox-ctx-menu-divider", void e.appendChild(r);
+      const a = document.createElement("div");
+      return a.className = "wox-ctx-menu-divider", void e.appendChild(a);
     }
     const o = document.createElement("div");
     o.className = "wox-ctx-menu-item", n.disabled && o.classList.add("wox-ctx-menu-item--disabled");
     const i = document.createElement("i");
     i.className = "material-icons wox-ctx-menu-icon", i.textContent = n.icon || "", o.appendChild(i);
-    const a = document.createElement("span");
-    if (a.className = "wox-ctx-menu-label", a.textContent = n.label || "", o.appendChild(a), n.shortcut) {
-      const r = document.createElement("span");
-      r.className = "wox-ctx-menu-shortcut", r.textContent = n.shortcut, o.appendChild(r);
+    const r = document.createElement("span");
+    if (r.className = "wox-ctx-menu-label", r.textContent = n.label || "", o.appendChild(r), n.shortcut) {
+      const a = document.createElement("span");
+      a.className = "wox-ctx-menu-shortcut", a.textContent = n.shortcut, o.appendChild(a);
     }
     n.disabled || o.addEventListener("click", () => {
-      f.hide(), n.action && n.action();
+      _.hide(), n.action && n.action();
     }), e.appendChild(o);
   }), e.style.display = "block", e.style.left = `${c.clientX}px`, e.style.top = `${c.clientY}px`, requestAnimationFrame(() => {
     const n = e.getBoundingClientRect(), o = window.innerWidth, i = window.innerHeight;
     n.right > o && (e.style.left = o - n.width - 4 + "px"), n.bottom > i && (e.style.top = i - n.height - 4 + "px");
-  }), f._listenersReady || (document.addEventListener("click", f._onClickOutside, !0), document.addEventListener("contextmenu", f._onClickOutside, !0), document.addEventListener("keydown", f._onKeyDown, !0), f._listenersReady = !0);
-}), s(f, "hide", () => {
-  f._el && (f._el.style.display = "none");
-}), s(f, "_onClickOutside", (c) => {
-  f._el && f._el.style.display !== "none" && (f._el.contains(c.target) || f.hide());
-}), s(f, "_onKeyDown", (c) => {
-  c.key === "Escape" && f.hide();
+  }), _._listenersReady || (document.addEventListener("click", _._onClickOutside, !0), document.addEventListener("contextmenu", _._onClickOutside, !0), document.addEventListener("keydown", _._onKeyDown, !0), _._listenersReady = !0);
+}), s(_, "hide", () => {
+  _._el && (_._el.style.display = "none");
+}), s(_, "_onClickOutside", (c) => {
+  _._el && _._el.style.display !== "none" && (_._el.contains(c.target) || _.hide());
+}), s(_, "_onKeyDown", (c) => {
+  c.key === "Escape" && _.hide();
 });
-let O = f;
-const C = (p) => {
+let O = _;
+const A = (p) => {
   if (!p || !p.stops || p.stops.length < 2) return "";
   const c = [...p.stops].sort((t, e) => t.position - e.position).map((t) => `${t.color} ${t.position}%`).join(", ");
   return p.type === "linear" ? `linear-gradient(${p.angle}deg, ${c})` : `radial-gradient(circle, ${c})`;
@@ -2057,13 +2060,13 @@ const C = (p) => {
   let c = null, t = 90, e = null;
   const n = p.match(/^linear-gradient\(\s*(\d+)deg\s*,\s*(.+)\)$/i);
   if (n && (c = "linear", t = parseInt(n[1], 10), e = n[2]), !c) {
-    const r = p.match(/^radial-gradient\(\s*(?:circle|ellipse)?\s*,?\s*(.+)\)$/i);
-    r && (c = "radial", e = r[1]);
+    const a = p.match(/^radial-gradient\(\s*(?:circle|ellipse)?\s*,?\s*(.+)\)$/i);
+    a && (c = "radial", e = a[1]);
   }
   if (!c || !e) return null;
   const o = [], i = /(#[0-9a-fA-F]{3,8}|rgba?\([^)]+\))\s+(\d+(?:\.\d+)?)%/g;
-  let a;
-  for (; (a = i.exec(e)) !== null; ) o.push({ color: a[1], position: parseFloat(a[2]) });
+  let r;
+  for (; (r = i.exec(e)) !== null; ) o.push({ color: r[1], position: parseFloat(r[2]) });
   return o.length < 2 ? null : { type: c, angle: t, stops: o };
 };
 class mt extends w {
@@ -2074,7 +2077,7 @@ class mt extends w {
     s(this, "_justDragged", !1);
     s(this, "_build", () => {
       if (!this._gradient) return;
-      const t = C(this._gradient);
+      const t = A(this._gradient);
       this.render(`
     :host { display: block; }
     .editor { padding: var(--wox-space-md, 8px) 0; }
@@ -2108,10 +2111,10 @@ class mt extends w {
     });
     s(this, "_updatePreview", () => {
       const t = this.$(".bar");
-      t && (t.style.background = C(this._gradient));
+      t && (t.style.background = A(this._gradient));
     });
     s(this, "_emitGradient", (t) => {
-      this.emit(t, { gradient: this.gradient, css: C(this._gradient) });
+      this.emit(t, { gradient: this.gradient, css: A(this._gradient) });
     });
     s(this, "_renderStops", () => {
       const t = this.$(".stops");
@@ -2119,30 +2122,30 @@ class mt extends w {
         const n = this._gradient.stops.indexOf(e), o = document.createElement("div");
         o.className = "handle", o.style.left = e.position + "%", o.style.backgroundColor = e.color, o.dataset.index = n;
         const i = document.createElement("input");
-        i.type = "color", i.value = e.color, i.className = "color-input", o.appendChild(i), o.addEventListener("click", (a) => {
-          this._justDragged ? this._justDragged = !1 : (a.stopPropagation(), i.click());
-        }), i.addEventListener("input", (a) => {
-          const r = parseInt(o.dataset.index, 10);
-          this._gradient.stops[r].color = a.target.value, o.style.backgroundColor = a.target.value, this._updatePreview(), this._emitGradient("wox-gradient-input");
+        i.type = "color", i.value = e.color, i.className = "color-input", o.appendChild(i), o.addEventListener("click", (r) => {
+          this._justDragged ? this._justDragged = !1 : (r.stopPropagation(), i.click());
+        }), i.addEventListener("input", (r) => {
+          const a = parseInt(o.dataset.index, 10);
+          this._gradient.stops[a].color = r.target.value, o.style.backgroundColor = r.target.value, this._updatePreview(), this._emitGradient("wox-gradient-input");
         }), i.addEventListener("change", () => {
           this._emitGradient("wox-gradient-change");
-        }), i.addEventListener("click", (a) => a.stopPropagation()), o.addEventListener("mousedown", (a) => {
-          if (a.target === i) return;
-          a.preventDefault(), a.stopPropagation();
-          const r = this.$(".bar");
-          if (!r) return;
-          const l = r.getBoundingClientRect(), h = parseInt(o.dataset.index, 10);
-          this._dragging = { idx: h, startY: a.clientY }, o.classList.add("dragging");
-          const d = (x) => {
-            const v = (x.clientX - l.left) / l.width * 100, g = Math.max(0, Math.min(100, Math.round(10 * v) / 10));
-            this._gradient.stops[h].position = g, o.style.left = g + "%", Math.abs(x.clientY - this._dragging.startY) > 40 && this._gradient.stops.length > 2 ? o.classList.add("removing") : o.classList.remove("removing"), this._updatePreview(), this._emitGradient("wox-gradient-input");
-          }, u = (x) => {
-            var b;
+        }), i.addEventListener("click", (r) => r.stopPropagation()), o.addEventListener("mousedown", (r) => {
+          if (r.target === i) return;
+          r.preventDefault(), r.stopPropagation();
+          const a = this.$(".bar");
+          if (!a) return;
+          const l = a.getBoundingClientRect(), x = parseInt(o.dataset.index, 10);
+          this._dragging = { idx: x, startY: r.clientY }, o.classList.add("dragging");
+          const d = (h) => {
+            const v = (h.clientX - l.left) / l.width * 100, b = Math.max(0, Math.min(100, Math.round(10 * v) / 10));
+            this._gradient.stops[x].position = b, o.style.left = b + "%", Math.abs(h.clientY - this._dragging.startY) > 40 && this._gradient.stops.length > 2 ? o.classList.add("removing") : o.classList.remove("removing"), this._updatePreview(), this._emitGradient("wox-gradient-input");
+          }, u = (h) => {
+            var g;
             document.removeEventListener("mousemove", d), document.removeEventListener("mouseup", u), o.classList.remove("dragging");
-            const v = Math.abs(x.clientY - this._dragging.startY);
-            v > 40 && this._gradient.stops.length > 2 ? (this._gradient.stops.splice(h, 1), this._renderStops(), this._updatePreview(), this._emitGradient("wox-gradient-change")) : this._emitGradient("wox-gradient-change");
-            const g = Math.abs(x.clientX - (l.left + (((b = this._gradient.stops[h]) == null ? void 0 : b.position) || 0) * l.width / 100));
-            (v > 3 || g > 3) && (this._justDragged = !0), this._dragging = null;
+            const v = Math.abs(h.clientY - this._dragging.startY);
+            v > 40 && this._gradient.stops.length > 2 ? (this._gradient.stops.splice(x, 1), this._renderStops(), this._updatePreview(), this._emitGradient("wox-gradient-change")) : this._emitGradient("wox-gradient-change");
+            const b = Math.abs(h.clientX - (l.left + (((g = this._gradient.stops[x]) == null ? void 0 : g.position) || 0) * l.width / 100));
+            (v > 3 || b > 3) && (this._justDragged = !0), this._dragging = null;
           };
           document.addEventListener("mousemove", d), document.addEventListener("mouseup", u);
         }), t.appendChild(o);
@@ -2151,13 +2154,13 @@ class mt extends w {
     s(this, "_bindBarEvents", () => {
       const t = this.$(".bar");
       t && t.addEventListener("dblclick", (e) => {
-        const n = t.getBoundingClientRect(), o = Math.round((e.clientX - n.left) / n.width * 100), i = Math.max(0, Math.min(100, o)), a = [...this._gradient.stops].sort((l, h) => l.position - h.position);
-        let r = "#888888";
-        for (let l = 0; l < a.length - 1; l++) if (i >= a[l].position && i <= a[l + 1].position) {
-          r = a[l].color;
+        const n = t.getBoundingClientRect(), o = Math.round((e.clientX - n.left) / n.width * 100), i = Math.max(0, Math.min(100, o)), r = [...this._gradient.stops].sort((l, x) => l.position - x.position);
+        let a = "#888888";
+        for (let l = 0; l < r.length - 1; l++) if (i >= r[l].position && i <= r[l + 1].position) {
+          a = r[l].color;
           break;
         }
-        this._gradient.stops.push({ color: r, position: i }), this._renderStops(), this._updatePreview(), this._emitGradient("wox-gradient-change");
+        this._gradient.stops.push({ color: a, position: i }), this._renderStops(), this._updatePreview(), this._emitGradient("wox-gradient-change");
       });
     });
   }
@@ -2216,7 +2219,7 @@ class ct extends w {
     s(this, "_labelForValue", (t) => {
       if (!t) return "None";
       if (bt(t)) {
-        for (const e of this._gradients) if (C(e) === t) return e.name;
+        for (const e of this._gradients) if (A(e) === t) return e.name;
         return "Custom Gradient";
       }
       return t;
@@ -2374,10 +2377,10 @@ class ct extends w {
       o && o.setAttribute("value", this._gradient.angle);
       const i = this.$(".speed-row wox-slider");
       i && i.setAttribute("value", this._animationSpeed);
-      const a = this.$(".anim-type-row");
-      a && (a.style.display = this._animationSpeed > 0 ? "" : "none");
-      const r = this.$(".anim-select");
-      r && (r.value = this._animationType);
+      const r = this.$(".anim-type-row");
+      r && (r.style.display = this._animationSpeed > 0 ? "" : "none");
+      const a = this.$(".anim-select");
+      a && (a.value = this._animationType);
     });
     s(this, "_bindEvents", () => {
       this.$(".current").addEventListener("click", (d) => {
@@ -2385,7 +2388,7 @@ class ct extends w {
       }), this.$$(".type-btn").forEach((d) => {
         d.addEventListener("click", () => {
           if (!this._gradient) return;
-          this.$$(".type-btn").forEach((x) => x.classList.remove("active")), d.classList.add("active"), this._gradient.type = d.dataset.type;
+          this.$$(".type-btn").forEach((h) => h.classList.remove("active")), d.classList.add("active"), this._gradient.type = d.dataset.type;
           const u = this.$(".angle-row");
           u && (u.style.display = d.dataset.type === "linear" ? "" : "none"), this._applyGradient();
         });
@@ -2418,12 +2421,12 @@ class ct extends w {
       i && i.addEventListener("click", () => {
         this._applyFromEditor(!1);
       });
-      const a = this.$(".save-btn");
-      a && a.addEventListener("click", () => {
+      const r = this.$(".save-btn");
+      r && r.addEventListener("click", () => {
         this._applyFromEditor(!0);
       });
-      const r = this.$(".name-input");
-      r && r.addEventListener("input", (d) => {
+      const a = this.$(".name-input");
+      a && a.addEventListener("input", (d) => {
         this._editingName = d.target.value.trim();
       });
       const l = this.$(".modal-editor");
@@ -2432,8 +2435,8 @@ class ct extends w {
       }), l.addEventListener("wox-gradient-change", (d) => {
         this._editingGradient = d.detail.gradient;
       }));
-      const h = this.$(".editor-modal");
-      h && h.addEventListener("wox-close", () => {
+      const x = this.$(".editor-modal");
+      x && x.addEventListener("wox-close", () => {
         this._editingGradient = null, this._editingName = "";
       });
     });
@@ -2445,8 +2448,8 @@ class ct extends w {
       if (!t || !e) return;
       const n = t.getBoundingClientRect(), o = window.innerHeight;
       e.style.left = `${n.left}px`, e.style.width = `${n.width}px`;
-      const i = o - n.bottom, a = n.top;
-      i >= 280 || i >= a ? (e.style.top = `${n.bottom}px`, e.style.bottom = "", e.style.maxHeight = `${Math.min(280, i - 4)}px`) : (e.style.top = "", e.style.bottom = o - n.top + "px", e.style.maxHeight = `${Math.min(280, a - 4)}px`);
+      const i = o - n.bottom, r = n.top;
+      i >= 280 || i >= r ? (e.style.top = `${n.bottom}px`, e.style.bottom = "", e.style.maxHeight = `${Math.min(280, i - 4)}px`) : (e.style.top = "", e.style.bottom = o - n.top + "px", e.style.maxHeight = `${Math.min(280, r - 4)}px`);
     });
     s(this, "_closeDropdown", () => {
       this._open = !1, this.$(".selector").classList.remove("open");
@@ -2463,14 +2466,14 @@ class ct extends w {
                 <input type="color" class="solid-input" value="${n}">
             </div>
         `, this._gradients.forEach((o) => {
-        const i = C(o), a = o.id.startsWith("grad_preset_"), r = a ? `<button class="dropdown-item-btn" data-dup-id="${o.id}" title="Duplicate gradient">&#x2398;</button>` : "", l = a ? "" : `<button class="dropdown-item-btn" data-edit-id="${o.id}" title="Edit gradient">&#9998;</button>`, h = a ? "" : `<button class="dropdown-item-btn delete-btn" data-delete-id="${o.id}" title="Delete gradient">&times;</button>`;
+        const i = A(o), r = o.id.startsWith("grad_preset_"), a = r ? `<button class="dropdown-item-btn" data-dup-id="${o.id}" title="Duplicate gradient">&#x2398;</button>` : "", l = r ? "" : `<button class="dropdown-item-btn" data-edit-id="${o.id}" title="Edit gradient">&#9998;</button>`, x = r ? "" : `<button class="dropdown-item-btn delete-btn" data-delete-id="${o.id}" title="Delete gradient">&times;</button>`;
         e += `
                 <div class="dropdown-item" data-gradient-id="${o.id}">
                     <div class="dropdown-item-preview" style="background: ${i}"></div>
                     <span class="dropdown-item-label">${o.name}</span>
-                    ${r}
+                    ${a}
                     ${l}
-                    ${h}
+                    ${x}
                 </div>
             `;
       }), e += `
@@ -2490,28 +2493,28 @@ class ct extends w {
       }), n.addEventListener("change", () => {
         n.style.pointerEvents = "none";
       }), n.addEventListener("click", (i) => i.stopPropagation())), t.querySelectorAll("[data-gradient-id]").forEach((i) => {
-        i.addEventListener("click", (a) => {
-          if (a.target.hasAttribute("data-delete-id") || a.target.hasAttribute("data-edit-id") || a.target.hasAttribute("data-dup-id")) return;
-          const r = this._getById(i.dataset.gradientId);
-          r && (this._gradient = JSON.parse(JSON.stringify(r)), this._value = C(this._gradient), this._updatePreview(), this._syncControls(), this._emitChange(), this._closeDropdown());
+        i.addEventListener("click", (r) => {
+          if (r.target.hasAttribute("data-delete-id") || r.target.hasAttribute("data-edit-id") || r.target.hasAttribute("data-dup-id")) return;
+          const a = this._getById(i.dataset.gradientId);
+          a && (this._gradient = JSON.parse(JSON.stringify(a)), this._value = A(this._gradient), this._updatePreview(), this._syncControls(), this._emitChange(), this._closeDropdown());
         });
       }), t.querySelectorAll("[data-dup-id]").forEach((i) => {
-        i.addEventListener("click", (a) => {
-          a.stopPropagation();
-          const r = this._getById(i.dataset.dupId);
-          if (!r) return;
-          const l = { id: R(), name: r.name + " Copy", type: r.type, angle: r.angle, stops: r.stops.map((h) => ({ ...h })) };
+        i.addEventListener("click", (r) => {
+          r.stopPropagation();
+          const a = this._getById(i.dataset.dupId);
+          if (!a) return;
+          const l = { id: R(), name: a.name + " Copy", type: a.type, angle: a.angle, stops: a.stops.map((x) => ({ ...x })) };
           this._closeDropdown(), this._openEditorDialog(l);
         });
       }), t.querySelectorAll("[data-edit-id]").forEach((i) => {
-        i.addEventListener("click", (a) => {
-          a.stopPropagation();
-          const r = this._getById(i.dataset.editId);
-          r && (this._closeDropdown(), this._openEditorDialog(JSON.parse(JSON.stringify(r))));
+        i.addEventListener("click", (r) => {
+          r.stopPropagation();
+          const a = this._getById(i.dataset.editId);
+          a && (this._closeDropdown(), this._openEditorDialog(JSON.parse(JSON.stringify(a))));
         });
       }), t.querySelectorAll("[data-delete-id]").forEach((i) => {
-        i.addEventListener("click", (a) => {
-          a.stopPropagation(), this._delete(i.dataset.deleteId), this._populateDropdown();
+        i.addEventListener("click", (r) => {
+          r.stopPropagation(), this._delete(i.dataset.deleteId), this._populateDropdown();
         });
       });
       const o = t.querySelector('[data-action="custom"]');
@@ -2532,14 +2535,14 @@ class ct extends w {
     s(this, "_applyFromEditor", (t) => {
       if (!this._editingGradient) return;
       const e = JSON.parse(JSON.stringify(this._editingGradient));
-      this._editingName && (e.name = this._editingName), e.id = this._editingOriginalId || e.id || R(), t && this._save(e), this._gradient = JSON.parse(JSON.stringify(e)), this._value = C(this._gradient), this._updatePreview(), this._syncControls(), this._emitChange(), this._closeModal();
+      this._editingName && (e.name = this._editingName), e.id = this._editingOriginalId || e.id || R(), t && this._save(e), this._gradient = JSON.parse(JSON.stringify(e)), this._value = A(this._gradient), this._updatePreview(), this._syncControls(), this._emitChange(), this._closeModal();
     });
     s(this, "_closeModal", () => {
       const t = this.$(".editor-modal");
       t && t.removeAttribute("open"), this._editingGradient = null, this._editingName = "", this._editingOriginalId = null;
     });
     s(this, "_applyGradient", () => {
-      this._gradient && (this._value = C(this._gradient), this._updatePreview(), this._emitChange());
+      this._gradient && (this._value = A(this._gradient), this._updatePreview(), this._emitChange());
     });
     s(this, "_emitChange", () => {
       this.emit("wox-gradient-change", { value: this._value, animationSpeed: this._animationSpeed, animationType: this._animationType });
@@ -2606,22 +2609,22 @@ class pt extends w {
       return e;
     });
     s(this, "_generateGrid", (t, e) => {
-      const n = /* @__PURE__ */ new Date(), o = wt(n), i = new Date(t, e, 1).getDay(), a = new Date(t, e + 1, 0).getDate();
-      let r = "";
-      const l = e === 0 ? t - 1 : t, h = e === 0 ? 11 : e - 1, d = new Date(l, h + 1, 0).getDate();
-      for (let g = i - 1; g >= 0; g--) {
-        const b = d - g;
-        r += `<div class="day-cell other-month" data-date="${B(l, h, b)}">${b}</div>`;
+      const n = /* @__PURE__ */ new Date(), o = wt(n), i = new Date(t, e, 1).getDay(), r = new Date(t, e + 1, 0).getDate();
+      let a = "";
+      const l = e === 0 ? t - 1 : t, x = e === 0 ? 11 : e - 1, d = new Date(l, x + 1, 0).getDate();
+      for (let b = i - 1; b >= 0; b--) {
+        const g = d - b;
+        a += `<div class="day-cell other-month" data-date="${B(l, x, g)}">${g}</div>`;
       }
-      for (let g = 1; g <= a; g++) {
-        const b = B(t, e, g);
-        let y = "day-cell";
-        b === o && (y += " today"), this.rangeMode ? this._selectedRange.start && b === this._selectedRange.start ? y += " range-start" : this._selectedRange.end && b === this._selectedRange.end ? y += " range-end" : Dt(b, this._selectedRange.start, this._selectedRange.end) && (y += " in-range") : this._selectedDate && b === this._selectedDate && (y += " selected"), r += `<div class="${y}" data-date="${b}">${g}</div>`;
+      for (let b = 1; b <= r; b++) {
+        const g = B(t, e, b);
+        let f = "day-cell";
+        g === o && (f += " today"), this.rangeMode ? this._selectedRange.start && g === this._selectedRange.start ? f += " range-start" : this._selectedRange.end && g === this._selectedRange.end ? f += " range-end" : Dt(g, this._selectedRange.start, this._selectedRange.end) && (f += " in-range") : this._selectedDate && g === this._selectedDate && (f += " selected"), a += `<div class="${f}" data-date="${g}">${b}</div>`;
       }
-      const u = 7 * Math.ceil((i + a) / 7), x = e === 11 ? t + 1 : t, v = e === 11 ? 0 : e + 1;
-      for (let g = 1; g <= u - i - a; g++)
-        r += `<div class="day-cell other-month" data-date="${B(x, v, g)}">${g}</div>`;
-      return r;
+      const u = 7 * Math.ceil((i + r) / 7), h = e === 11 ? t + 1 : t, v = e === 11 ? 0 : e + 1;
+      for (let b = 1; b <= u - i - r; b++)
+        a += `<div class="day-cell other-month" data-date="${B(h, v, b)}">${b}</div>`;
+      return a;
     });
     s(this, "_getModeHint", () => this.rangeMode ? this._selectedRange.start ? this._selectedRange.end ? `${this._selectedRange.start} → ${this._selectedRange.end}` : "Select end date" : "Select start date" : "Select a date");
     s(this, "_render", () => {
@@ -2920,9 +2923,9 @@ s(pt, "observedAttributes", ["range-mode", "value", "range-start", "range-end",
 const wt = (p) => `${p.getFullYear()}-${String(p.getMonth() + 1).padStart(2, "0")}-${String(p.getDate()).padStart(2, "0")}`, I = (p) => {
   const [c, t, e] = p.split("-").map(Number);
   return new Date(c, t - 1, e);
-}, B = (p, c, t) => `${p}-${String(c + 1).padStart(2, "0")}-${String(t).padStart(2, "0")}`, Dt = (p, c, t) => !(!c || !t) && p > c && p < t, W = "woxTheme", $ = class $ {
+}, B = (p, c, t) => `${p}-${String(c + 1).padStart(2, "0")}-${String(t).padStart(2, "0")}`, Dt = (p, c, t) => !(!c || !t) && p > c && p < t, W = "woxTheme", C = class C {
 };
-s($, "get", () => document.documentElement.dataset[W] === "light" ? "light" : "dark"), s($, "set", (c) => {
+s(C, "get", () => document.documentElement.dataset[W] === "light" ? "light" : "dark"), s(C, "set", (c) => {
   if (c === "dark" || c === "light") {
     c === "light" ? document.documentElement.dataset[W] = "light" : delete document.documentElement.dataset[W];
     try {
@@ -2931,25 +2934,25 @@ s($, "get", () => document.documentElement.dataset[W] === "light" ? "light" : "d
     }
     document.documentElement.dispatchEvent(new CustomEvent("wox-theme-change", { detail: { theme: c }, bubbles: !0, composed: !0 }));
   }
-}), s($, "toggle", () => {
-  $.set($.get() === "dark" ? "light" : "dark");
-}), s($, "auto", () => {
+}), s(C, "toggle", () => {
+  C.set(C.get() === "dark" ? "light" : "dark");
+}), s(C, "auto", () => {
   try {
     const t = localStorage.getItem("wox-theme");
-    if (t === "dark" || t === "light") return void $.set(t);
+    if (t === "dark" || t === "light") return void C.set(t);
   } catch {
   }
   const c = window.matchMedia("(prefers-color-scheme: light)").matches;
-  $.set(c ? "light" : "dark");
+  C.set(c ? "light" : "dark");
 });
-let L = $;
+let S = C;
 class ft extends w {
   constructor() {
     super(...arguments);
     s(this, "_onThemeChange", null);
   }
   connectedCallback() {
-    this._render(), this.hasAttribute("auto") && L.auto(), this._onThemeChange = () => this._updateIcon(), document.documentElement.addEventListener("wox-theme-change", this._onThemeChange), this._updateIcon();
+    this._render(), this.hasAttribute("auto") && S.auto(), this._onThemeChange = () => this._updateIcon(), document.documentElement.addEventListener("wox-theme-change", this._onThemeChange), this._updateIcon();
   }
   disconnectedCallback() {
     this._onThemeChange && (document.documentElement.removeEventListener("wox-theme-change", this._onThemeChange), this._onThemeChange = null);
@@ -2989,16 +2992,16 @@ class ft extends w {
         -webkit-font-smoothing: antialiased;
         text-rendering: optimizeLegibility;
     }
-`, '<button type="button" title="Toggle theme"><span class="icon">light_mode</span></button>'), this.$("button").addEventListener("click", () => L.toggle());
+`, '<button type="button" title="Toggle theme"><span class="icon">light_mode</span></button>'), this.$("button").addEventListener("click", () => S.toggle());
   }
   _updateIcon() {
     const t = this.$(".icon");
     if (!t) return;
-    const e = L.get() === "dark";
+    const e = S.get() === "dark";
     t.textContent = e ? "light_mode" : "dark_mode", this.$("button").title = e ? "Switch to light mode" : "Switch to dark mode";
   }
 }
-customElements.define("wox-icon", H), customElements.define("wox-separator", G), customElements.define("wox-badge", j), customElements.define("wox-button", Y), customElements.define("wox-input", X), customElements.define("wox-select", q), customElements.define("wox-slider", J), customElements.define("wox-color-swatch", K), customElements.define("wox-tooltip", V), customElements.define("wox-color-picker", U), customElements.define("wox-menu-item", Q), customElements.define("wox-menu", Z), customElements.define("wox-layer-item", tt), customElements.define("wox-section", et), customElements.define("wox-tab", nt), customElements.define("wox-tabs", ot), customElements.define("wox-toolbar-group", it), customElements.define("wox-toolbar", st), customElements.define("wox-panel", at), customElements.define("wox-menubar", rt), customElements.define("wox-statusbar", dt), customElements.define("wox-modal", lt), customElements.define("wox-datagrid", vt), customElements.define("wox-toast", z), customElements.define("wox-context-menu", O), customElements.define("wox-gradient-editor", mt), customElements.define("wox-gradient-selector", ct), customElements.define("wox-date-picker", pt), customElements.define("wox-theme-toggle", ft);
+customElements.define("wox-icon", H), customElements.define("wox-separator", j), customElements.define("wox-badge", G), customElements.define("wox-button", Y), customElements.define("wox-input", X), customElements.define("wox-select", q), customElements.define("wox-slider", J), customElements.define("wox-color-swatch", K), customElements.define("wox-tooltip", V), customElements.define("wox-color-picker", U), customElements.define("wox-menu-item", Q), customElements.define("wox-menu", Z), customElements.define("wox-layer-item", tt), customElements.define("wox-section", et), customElements.define("wox-tab", nt), customElements.define("wox-tabs", ot), customElements.define("wox-toolbar-group", it), customElements.define("wox-toolbar", st), customElements.define("wox-panel", rt), customElements.define("wox-menubar", at), customElements.define("wox-statusbar", dt), customElements.define("wox-modal", lt), customElements.define("wox-datagrid", vt), customElements.define("wox-toast", L), customElements.define("wox-context-menu", O), customElements.define("wox-gradient-editor", mt), customElements.define("wox-gradient-selector", ct), customElements.define("wox-date-picker", pt), customElements.define("wox-theme-toggle", ft);
 const Rt = `/* wox-theme.css — Global CSS custom properties for the WOX component library */
 :root {
     --wox-bg-app: #121214;
@@ -3086,10 +3089,10 @@ const Rt = `/* wox-theme.css — Global CSS custom properties for the WOX compon
   if (document.getElementById("wox-theme")) return;
   const p = document.createElement("style");
   p.id = "wox-theme", p.textContent = Rt, document.head.appendChild(p);
-})(), window.WoxIcon = H, window.WoxSeparator = G, window.WoxBadge = j, window.WoxButton = Y, window.WoxInput = X, window.WoxSelect = q, window.WoxSlider = J, window.WoxColorSwatch = K, window.WoxTooltip = V, window.WoxColorPicker = U, window.WoxMenuItem = Q, window.WoxMenu = Z, window.WoxLayerItem = tt, window.WoxSection = et, window.WoxTab = nt, window.WoxTabs = ot, window.WoxToolbarGroup = it, window.WoxToolbar = st, window.WoxPanel = at, window.WoxMenubar = rt, window.WoxStatusbar = dt, window.WoxModal = lt, window.WoxDatagrid = vt, window.WoxToast = z, window.WoxContextMenu = O, window.WoxGradientEditor = mt, window.WoxGradientSelector = ct, window.WoxDatePicker = pt, window.WoxThemeToggle = ft;
+})(), window.WoxIcon = H, window.WoxSeparator = j, window.WoxBadge = G, window.WoxButton = Y, window.WoxInput = X, window.WoxSelect = q, window.WoxSlider = J, window.WoxColorSwatch = K, window.WoxTooltip = V, window.WoxColorPicker = U, window.WoxMenuItem = Q, window.WoxMenu = Z, window.WoxLayerItem = tt, window.WoxSection = et, window.WoxTab = nt, window.WoxTabs = ot, window.WoxToolbarGroup = it, window.WoxToolbar = st, window.WoxPanel = rt, window.WoxMenubar = at, window.WoxStatusbar = dt, window.WoxModal = lt, window.WoxDatagrid = vt, window.WoxToast = L, window.WoxContextMenu = O, window.WoxGradientEditor = mt, window.WoxGradientSelector = ct, window.WoxDatePicker = pt, window.WoxThemeToggle = ft;
 export {
-  S as FX_STYLES,
-  j as WoxBadge,
+  M as FX_STYLES,
+  G as WoxBadge,
   Y as WoxButton,
   U as WoxColorPicker,
   K as WoxColorSwatch,
@@ -3104,22 +3107,22 @@ export {
   tt as WoxLayerItem,
   Z as WoxMenu,
   Q as WoxMenuItem,
-  rt as WoxMenubar,
+  at as WoxMenubar,
   lt as WoxModal,
-  at as WoxPanel,
+  rt as WoxPanel,
   et as WoxSection,
   q as WoxSelect,
-  G as WoxSeparator,
+  j as WoxSeparator,
   J as WoxSlider,
   dt as WoxStatusbar,
   nt as WoxTab,
   ot as WoxTabs,
-  L as WoxTheme,
+  S as WoxTheme,
   ft as WoxThemeToggle,
-  z as WoxToast,
+  L as WoxToast,
   st as WoxToolbar,
   it as WoxToolbarGroup,
   V as WoxTooltip,
   gt as cssToGradient,
-  C as gradientToCSS
+  A as gradientToCSS
 };