@wrrdev/fenix-ui 1.0.5 → 1.0.7

package/dist/fenix-ui2.esm.js

@@ -7,9 +7,9 @@ var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "acce
 var _FxToast_instances, render_fn;
 const lightTokens = {
   color: {
-    primary: "#4f46e5",
-    secondary: "#8b5cf6",
-    success: "#10b981",
+    primary: "#c2410c",
+    secondary: "#991B1B",
+    success: "#10b972",
     warning: "#f59e0b",
     danger: "#f43f5e",
     info: "#0ea5e9"
@@ -20,7 +20,7 @@ const lightTokens = {
     "surface-hover": "#eef2f7"
   },
   text: {
-    default: "#0f172a",
+    default: "#10182c",
     muted: "#64748b",
     disabled: "#94a3b8"
   },
@@ -160,23 +160,44 @@ const themePresets = {
     name: "seiya",
     label: "Seiya",
     tokens: {
-      color: { primary: "#e11d48", secondary: "#fb7185", info: "#f43f5e", danger: "#be123c" },
-      radius: { sm: "6px", md: "10px", lg: "16px" }
+      color: {
+        primary: "#e11d48",
+        secondary: "#fb7185",
+        info: "#f43f5e",
+        danger: "#be123c"
+      },
+      radius: { sm: "6px", md: "10px", lg: "16px" },
+      effect: {
+        "focus-ring": "none"
+      }
     }
   }),
   shiryu: register({
     name: "shiryu",
     label: "Shiryu",
     tokens: {
-      color: { primary: "#0d9488", secondary: "#2dd4bf", success: "#059669", info: "#14b8a6" },
-      radius: { sm: "4px", md: "8px", lg: "14px" }
+      color: {
+        primary: "#0d9488",
+        secondary: "#2dd4bf",
+        success: "#059669",
+        info: "#14b8a6"
+      },
+      radius: { sm: "4px", md: "8px", lg: "14px" },
+      effect: {
+        "focus-ring": "none"
+      }
     }
   }),
   hyoga: register({
     name: "hyoga",
     label: "Hyoga",
     tokens: {
-      color: { primary: "#0284c7", secondary: "#38bdf8", info: "#06b6d4", danger: "#e11d48" },
+      color: {
+        primary: "#0284c7",
+        secondary: "#38bdf8",
+        info: "#06b6d4",
+        danger: "#e11d48"
+      },
       surface: { surface: "#f0f9ff", "surface-hover": "#e0f2fe" },
       radius: { sm: "8px", md: "12px", lg: "18px" }
     }
@@ -185,7 +206,12 @@ const themePresets = {
     name: "shun",
     label: "Shun",
     tokens: {
-      color: { primary: "#db2777", secondary: "#f472b6", info: "#ec4899", warning: "#c026d3" },
+      color: {
+        primary: "#db2777",
+        secondary: "#f472b6",
+        info: "#ec4899",
+        warning: "#c026d3"
+      },
       radius: { sm: "10px", md: "14px", lg: "20px" }
     }
   }),
@@ -193,7 +219,12 @@ const themePresets = {
     name: "ikki",
     label: "Ikki",
     tokens: {
-      color: { primary: "#ea580c", secondary: "#fb923c", danger: "#dc2626", warning: "#f59e0b" },
+      color: {
+        primary: "#ea580c",
+        secondary: "#fb923c",
+        danger: "#dc2626",
+        warning: "#f59e0b"
+      },
       radius: { sm: "2px", md: "4px", lg: "6px" }
     }
   }),
@@ -201,8 +232,16 @@ const themePresets = {
     name: "aiolia",
     label: "Aiolia",
     tokens: {
-      color: { primary: "#b45309", secondary: "#f59e0b", warning: "#eab308", info: "#84cc16" },
-      radius: { sm: "6px", md: "12px", lg: "20px" }
+      color: {
+        primary: "#b45309",
+        secondary: "#f59e0b",
+        warning: "#eab308",
+        info: "#84cc16"
+      },
+      radius: { sm: "6px", md: "12px", lg: "20px" },
+      effect: {
+        "focus-ring": "none"
+      }
     }
   })
 };
@@ -1488,7 +1527,18 @@ const _FxCalendar = class _FxCalendar extends FxElement {
     this.pickEnd = null;
   }
   static get observedAttributes() {
-    return ["value", "start", "end", "min", "max", "range", "mode", "values", "locale", "disabled"];
+    return [
+      "value",
+      "start",
+      "end",
+      "min",
+      "max",
+      "range",
+      "mode",
+      "values",
+      "locale",
+      "disabled"
+    ];
   }
   /** Modo de seleção: 'single' | 'range' | 'multiple'. */
   get mode() {
@@ -1556,7 +1606,11 @@ const _FxCalendar = class _FxCalendar extends FxElement {
     return key(date.getFullYear(), date.getMonth() + 1, date.getDate());
   }
   keyToDate(k) {
-    return new Date(Math.floor(k / 1e4), Math.floor(k / 100) % 100 - 1, k % 100);
+    return new Date(
+      Math.floor(k / 1e4),
+      Math.floor(k / 100) % 100 - 1,
+      k % 100
+    );
   }
   iso(k) {
     const d = this.keyToDate(k);
@@ -1565,7 +1619,9 @@ const _FxCalendar = class _FxCalendar extends FxElement {
   }
   /** Seleção atual para pintura (chaves). */
   selection() {
-    const multi = new Set(this.values.map((iso) => parseBound(iso)?.lo ?? 0).filter(Boolean));
+    const multi = new Set(
+      this.values.map((iso) => parseBound(iso)?.lo ?? 0).filter(Boolean)
+    );
     if (this.mode === "range") {
       let s = this.pickStart;
       let e = this.pickEnd;
@@ -1589,13 +1645,31 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       };
       this.setAttribute("start", detail.start);
       this.setAttribute("end", detail.end);
-      this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail }));
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: true,
+          composed: true,
+          detail
+        })
+      );
     } else if (this.mode === "multiple") {
       const values = this.values;
-      this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { values } }));
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: true,
+          composed: true,
+          detail: { values }
+        })
+      );
     } else {
       const value = this.getAttr("value");
-      this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { value } }));
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: true,
+          composed: true,
+          detail: { value }
+        })
+      );
     }
   }
   pickDay(k) {
@@ -1608,7 +1682,8 @@ const _FxCalendar = class _FxCalendar extends FxElement {
         this.render();
         return;
       }
-      if (k < this.pickStart) [this.pickStart, this.pickEnd] = [k, this.pickStart];
+      if (k < this.pickStart)
+        [this.pickStart, this.pickEnd] = [k, this.pickStart];
       else this.pickEnd = k;
       this.emit();
     } else if (this.mode === "multiple") {
@@ -1640,7 +1715,10 @@ const _FxCalendar = class _FxCalendar extends FxElement {
     const sel = this.selection();
     const loc = this.locale();
     const titles = {
-      days: this.fmt({ month: "long", year: "numeric" }, new Date(this.cursor.y, this.cursor.m, 1)),
+      days: this.fmt(
+        { month: "long", year: "numeric" },
+        new Date(this.cursor.y, this.cursor.m, 1)
+      ),
       months: String(this.cursor.y),
       years: `${Math.floor(this.cursor.y / 12) * 12} – ${Math.floor(this.cursor.y / 12) * 12 + 11}`
     };
@@ -1674,7 +1752,10 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       <div class="grid ${this.view}">${cells}</div>
     `);
     this.root.querySelectorAll("[data-nav]").forEach(
-      (b) => b.addEventListener("click", () => this.navigate(Number(b.dataset.nav)))
+      (b) => b.addEventListener(
+        "click",
+        () => this.navigate(Number(b.dataset.nav))
+      )
     );
     const gotoBtn = this.root.querySelector("[data-goto]");
     gotoBtn?.addEventListener("click", () => {
@@ -1682,7 +1763,10 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       this.render();
     });
     this.root.querySelectorAll("[data-day]").forEach(
-      (b) => b.addEventListener("click", () => this.pickDay(Number(b.dataset.day)))
+      (b) => b.addEventListener(
+        "click",
+        () => this.pickDay(Number(b.dataset.day))
+      )
     );
     this.root.querySelectorAll("[data-month]").forEach(
       (b) => b.addEventListener("click", () => {
@@ -1713,95 +1797,148 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       const k = key(y, m + 1, d);
       const isSel = sel.single === k || sel.start === k || sel.end === k || sel.multi.has(k);
       const inRange = sel.start !== null && sel.end !== null && k > sel.start && k < sel.end;
-      const cls = ["cell", isSel ? "sel" : "", inRange ? "in-range" : "", k === todayK ? "today" : ""].filter(Boolean).join(" ");
+      const cls = [
+        "cell",
+        isSel ? "sel" : "",
+        inRange ? "in-range" : "",
+        k === todayK ? "today" : ""
+      ].filter(Boolean).join(" ");
       html += `<button type="button" class="${cls}" data-day="${k}" ${this.dayDisabled(y, m, d) ? "disabled" : ""}>${d}</button>`;
     }
     return html;
   }
 };
 _FxCalendar.styles = css`
-    :host {
-      display: inline-block;
-      font-family: var(--fx-font-family);
-      font-size: var(--fx-font-size);
-      color: var(--fx-text-default);
-      background: var(--fx-surface-background);
-      border: 1px solid var(--fx-border-default);
-      border-radius: var(--fx-radius-md);
-      box-shadow: var(--fx-shadow-sm);
-      padding: var(--fx-space-sm);
-      user-select: none;
-    }
-    :host([disabled]) { opacity: 0.55; pointer-events: none; }
-    .head {
+		:host {
+			display: inline-block;
+			font-family: var(--fx-font-family);
+			font-size: var(--fx-font-size);
+			color: var(--fx-text-default);
+			background: var(--fx-surface-background);
+			border: 1px solid var(--fx-border-default);
+			border-radius: var(--fx-radius-md);
+			box-shadow: var(--fx-shadow-sm);
+			padding: var(--fx-space-sm);
+			user-select: none;
+		}
+		:host([disabled]) {
+			opacity: 0.55;
+			pointer-events: none;
+		}
+		.head {
+			display: flex;
+			height: 48px;
+			align-items: center;
+			justify-content: space-between;
+			gap: var(--fx-space-xs);
+			margin-bottom: var(--fx-space-xs);
+			border-bottom: 1px solid var(--fx-border-default);
+		}
+
+		.title {
+			min-width: 24px;
+			border: none;
+			background: none;
+			color: var(--fx-text-default);
+			cursor: pointer;
+			font: inherit;
+			border-radius: var(--fx-radius-sm);
+		}
+    .nav {
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      gap: var(--fx-space-xs);
-      margin-bottom: var(--fx-space-xs);
-    }
-    .nav,
-    .title {
-      border: none;
-      background: none;
-      color: var(--fx-text-default);
-      cursor: pointer;
-      font: inherit;
-      border-radius: var(--fx-radius-sm);
-      padding: var(--fx-space-3xs, 4px) var(--fx-space-xs);
-    }
-    .nav:hover, .title:hover { background: var(--fx-surface-surface-hover); }
-    .title { font-weight: var(--fx-font-weight); text-transform: capitalize; flex: 1; }
-    .grid {
-      display: grid;
-      grid-template-columns: repeat(7, 34px);
-      gap: 2px;
-    }
-    .grid.months, .grid.years { grid-template-columns: repeat(4, minmax(52px, 1fr)); }
-    .wd {
-      text-align: center;
-      color: var(--fx-text-muted);
-      font-size: calc(var(--fx-font-size) - 2px);
-      padding: var(--fx-space-3xs, 4px) 0;
-      text-transform: capitalize;
-    }
-    .cell {
-      position: relative;
-      border: none;
-      background: none;
-      font: inherit;
-      color: var(--fx-text-default);
-      height: 32px;
-      border-radius: var(--fx-radius-sm);
-      cursor: pointer;
-      display: inline-flex;
-      align-items: center;
       justify-content: center;
+      font-size: 20px;
+      border: none;
+			background: none;
+			color: var(--fx-text-muted);
+			cursor: pointer;
+			border-radius: var(--fx-radius-sm);
     }
-    .cell:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }
-    .cell.muted { color: var(--fx-text-disabled); }
-    .cell.today::after {
-      content: '';
-      position: absolute;
-      bottom: 3px;
-      width: 4px;
-      height: 4px;
-      border-radius: var(--fx-radius-full);
-      background: var(--fx-color-primary);
-    }
-    .cell.sel {
-      background: var(--fx-color-primary);
-      color: #fff;
-      font-weight: var(--fx-font-weight);
-    }
-    .cell.sel::after { background: #fff; }
-    .cell.in-range {
-      background: color-mix(in srgb, var(--fx-color-primary) 16%, transparent);
-      border-radius: 0;
-    }
-    .grid.months .cell, .grid.years .cell { height: 40px; }
-    .cell[disabled] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
-  `;
+		.nav:hover,
+		.title:hover {
+			background: var(--fx-surface-surface-hover);
+		}
+		.title {
+    	padding: var(--fx-space-3xs, 4px) var(--fx-space-xs);
+			font-weight: var(--fx-font-weight);
+			text-transform: capitalize;
+			flex: 1;
+		}
+		.grid {
+			display: grid;
+			grid-template-columns: repeat(7, 34px);
+			gap: 2px;
+		}
+		.grid.months,
+		.grid.years {
+			grid-template-columns: repeat(4, minmax(52px, 1fr));
+		}
+		.wd {
+			text-align: center;
+			color: var(--fx-text-muted);
+			font-size: calc(var(--fx-font-size) - 2px);
+			padding: var(--fx-space-3xs, 4px) 0;
+			text-transform: capitalize;
+		}
+		.cell {
+			position: relative;
+			border: none;
+			background: none;
+			font: inherit;
+			color: var(--fx-text-default);
+			height: 32px;
+			border-radius: var(--fx-radius-sm);
+			cursor: pointer;
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.cell:hover {
+			background: color-mix(
+				in srgb,
+				var(--fx-color-primary) 12%,
+				transparent
+			);
+		}
+		.cell.muted {
+			color: var(--fx-text-disabled);
+		}
+		.cell.today::after {
+			content: "";
+			position: absolute;
+			bottom: 3px;
+			width: 4px;
+			height: 4px;
+			border-radius: var(--fx-radius-full);
+			background: var(--fx-color-primary);
+		}
+		.cell.sel {
+			background: var(--fx-color-primary);
+			color: #fff;
+			font-weight: var(--fx-font-weight);
+		}
+		.cell.sel::after {
+			background: #fff;
+		}
+		.cell.in-range {
+			background: color-mix(
+				in srgb,
+				var(--fx-color-primary) 16%,
+				transparent
+			);
+			border-radius: 0;
+		}
+		.grid.months .cell,
+		.grid.years .cell {
+			height: 40px;
+		}
+		.cell[disabled] {
+			opacity: 0.35;
+			cursor: not-allowed;
+			pointer-events: none;
+		}
+	`;
 let FxCalendar = _FxCalendar;
 function defineFxCalendar() {
   return defineElement("fx-calendar", FxCalendar);
@@ -3487,6 +3624,295 @@ let FxTooltip = _FxTooltip;
 function defineFxTooltip() {
   return defineElement("fx-tooltip", FxTooltip);
 }
+const DEFAULT_CONFIG = {
+  position: "top"
+};
+class TooltipBehavior {
+  constructor(element) {
+    this.tooltipElement = null;
+    this.showTimeout = null;
+    this.hideTimeout = null;
+    this.show = () => {
+      if (this.hideTimeout) {
+        clearTimeout(this.hideTimeout);
+        this.hideTimeout = null;
+      }
+      this.showTimeout = window.setTimeout(() => {
+        if (this.tooltipElement) {
+          this.tooltipElement.classList.add("fx-tooltip-visible");
+        }
+      }, 100);
+    };
+    this.hide = () => {
+      if (this.showTimeout) {
+        clearTimeout(this.showTimeout);
+        this.showTimeout = null;
+      }
+      this.hideTimeout = window.setTimeout(() => {
+        if (this.tooltipElement) {
+          this.tooltipElement.classList.remove("fx-tooltip-visible");
+        }
+      }, 50);
+    };
+    this.element = element;
+    this.config = this.parseConfig();
+    this.init();
+  }
+  parseConfig() {
+    const position = this.element.getAttribute("fx-tooltip-position");
+    return {
+      position: position && ["top", "bottom", "left", "right"].includes(position) ? position : DEFAULT_CONFIG.position,
+      html: this.element.hasAttribute("fx-tooltip-html")
+    };
+  }
+  init() {
+    const computedStyle = window.getComputedStyle(this.element);
+    if (computedStyle.position === "static") {
+      this.element.style.position = "relative";
+    }
+    this.createTooltipElement();
+    this.element.addEventListener("mouseenter", this.show);
+    this.element.addEventListener("mouseleave", this.hide);
+    this.element.addEventListener("focus", this.show);
+    this.element.addEventListener("blur", this.hide);
+  }
+  createTooltipElement() {
+    const content = this.element.getAttribute("fx-tooltip");
+    if (!content) return;
+    this.tooltipElement = document.createElement("span");
+    this.tooltipElement.setAttribute("role", "tooltip");
+    this.tooltipElement.setAttribute("data-fx-tooltip", "");
+    this.tooltipElement.className = `fx-tooltip-bubble fx-tooltip-${this.config.position}`;
+    if (this.config.html) {
+      this.tooltipElement.innerHTML = content;
+    } else {
+      this.tooltipElement.textContent = content;
+    }
+    this.element.appendChild(this.tooltipElement);
+  }
+  update() {
+    this.config = this.parseConfig();
+    if (this.tooltipElement) {
+      this.tooltipElement.remove();
+      this.tooltipElement = null;
+    }
+    this.createTooltipElement();
+  }
+  destroy() {
+    this.element.removeEventListener("mouseenter", this.show);
+    this.element.removeEventListener("mouseleave", this.hide);
+    this.element.removeEventListener("focus", this.show);
+    this.element.removeEventListener("blur", this.hide);
+    if (this.showTimeout) clearTimeout(this.showTimeout);
+    if (this.hideTimeout) clearTimeout(this.hideTimeout);
+    if (this.tooltipElement) {
+      this.tooltipElement.remove();
+      this.tooltipElement = null;
+    }
+  }
+}
+const _FxTooltipManager = class _FxTooltipManager {
+  constructor() {
+    this.observer = null;
+    this.behaviors = /* @__PURE__ */ new Map();
+    this.injectedStyles = null;
+    this.injectStyles();
+    this.observe();
+    this.processExistingElements();
+  }
+  static getInstance() {
+    if (!_FxTooltipManager.instance) {
+      _FxTooltipManager.instance = new _FxTooltipManager();
+    }
+    return _FxTooltipManager.instance;
+  }
+  injectStyles() {
+    if (document.getElementById("fx-tooltip-directive-styles")) return;
+    this.injectedStyles = document.createElement("style");
+    this.injectedStyles.id = "fx-tooltip-directive-styles";
+    this.injectedStyles.textContent = getTooltipStyles();
+    document.head.appendChild(this.injectedStyles);
+  }
+  observe() {
+    this.observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          mutation.addedNodes.forEach((node) => {
+            if (node instanceof HTMLElement) {
+              this.processElement(node);
+              node.querySelectorAll("[fx-tooltip]").forEach((el) => this.processElement(el));
+            }
+          });
+        }
+        if (mutation.type === "attributes" && mutation.target instanceof HTMLElement) {
+          const target = mutation.target;
+          if (target.hasAttribute("fx-tooltip")) {
+            this.processElement(target);
+          } else if (this.behaviors.has(target)) {
+            this.removeBehavior(target);
+          }
+        }
+      }
+    });
+    this.observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["fx-tooltip", "fx-tooltip-position", "fx-tooltip-html"]
+    });
+  }
+  processExistingElements() {
+    document.querySelectorAll("[fx-tooltip]").forEach((el) => this.processElement(el));
+  }
+  processElement(element) {
+    if (!element.hasAttribute("fx-tooltip")) {
+      this.removeBehavior(element);
+      return;
+    }
+    if (this.behaviors.has(element)) {
+      this.behaviors.get(element).update();
+    } else {
+      this.behaviors.set(element, new TooltipBehavior(element));
+    }
+  }
+  removeBehavior(element) {
+    const behavior = this.behaviors.get(element);
+    if (behavior) {
+      behavior.destroy();
+      this.behaviors.delete(element);
+    }
+  }
+  destroy() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+    this.behaviors.forEach((behavior) => behavior.destroy());
+    this.behaviors.clear();
+    if (this.injectedStyles) {
+      this.injectedStyles.remove();
+      this.injectedStyles = null;
+    }
+    _FxTooltipManager.instance = null;
+  }
+};
+_FxTooltipManager.instance = null;
+let FxTooltipManager = _FxTooltipManager;
+function getTooltipStyles() {
+  return (
+    /* css */
+    `
+    [fx-tooltip] {
+      position: relative;
+    }
+
+    .fx-tooltip-bubble {
+      position: absolute;
+      background: var(--fx-text-default, #1e293b);
+      color: var(--fx-surface-background, #fff);
+      font-family: var(--fx-font-family, system-ui, -apple-system, sans-serif);
+      font-size: calc(var(--fx-font-size, 14px) - 2px);
+      line-height: 1.45;
+      padding: var(--fx-space-xs, 4px) var(--fx-space-md, 12px);
+      border-radius: var(--fx-radius-sm, 4px);
+      box-shadow: var(--fx-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+      width: max-content;
+      min-width: 60px;
+      max-width: var(--fx-tooltip-max-width, 320px);
+      white-space: normal;
+      text-align: center;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity var(--fx-motion-duration-fast, 150ms) var(--fx-motion-easing, ease);
+      z-index: var(--fx-z-tooltip, 1050);
+      pointer-events: none;
+    }
+
+    .fx-tooltip-bubble.fx-tooltip-visible {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .fx-tooltip-top {
+      bottom: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .fx-tooltip-top::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 5px solid transparent;
+      border-top-color: var(--fx-text-default, #1e293b);
+    }
+
+    .fx-tooltip-bottom {
+      top: calc(100% + 6px);
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: auto;
+    }
+    .fx-tooltip-bottom::after {
+      content: '';
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 5px solid transparent;
+      border-bottom-color: var(--fx-text-default, #1e293b);
+    }
+
+    .fx-tooltip-left {
+      right: calc(100% + 6px);
+      top: 50%;
+      transform: translateY(-50%);
+      left: auto;
+      bottom: auto;
+    }
+    .fx-tooltip-left::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 100%;
+      transform: translateY(-50%);
+      border: 5px solid transparent;
+      border-left-color: var(--fx-text-default, #1e293b);
+    }
+
+    .fx-tooltip-right {
+      left: calc(100% + 6px);
+      top: 50%;
+      transform: translateY(-50%);
+      right: auto;
+      bottom: auto;
+    }
+    .fx-tooltip-right::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 100%;
+      transform: translateY(-50%);
+      border: 5px solid transparent;
+      border-right-color: var(--fx-text-default, #1e293b);
+    }
+  `
+  );
+}
+function defineFxTooltipDirective() {
+  if (typeof window === "undefined") return;
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      FxTooltipManager.getInstance();
+    });
+  } else {
+    FxTooltipManager.getInstance();
+  }
+}
+function destroyFxTooltipDirective() {
+  FxTooltipManager.getInstance().destroy();
+}
 defineFxTooltip();
 const _FxTabs = class _FxTabs extends FxElement {
   static get observedAttributes() {
@@ -3870,7 +4296,7 @@ const _FxDropdown = class _FxDropdown extends FxElement {
         ${label} ▾
       </span>
       <div class="panel" role="menu" part="panel">
-        ${items.length ? items.map((i) => `<div class="item-slot"><slot name="_${i.getAttribute("value") ?? ""}"></slot></div>`) : '<div class="empty">Nenhuma ação</div>'}
+        ${items.length ? "" : '<div class="empty">Nenhuma ação</div>'}
         <slot></slot>
       </div>
     `);
@@ -4419,10 +4845,1998 @@ function defineFxAutocomplete() {
   return defineElement("fx-autocomplete", FxAutocomplete);
 }
 defineFxAutocomplete();
+const _FxKnob = class _FxKnob extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._isDragging = false;
+    this._startY = 0;
+    this._startValue = 0;
+    this._onMouseMove = (e) => {
+      if (!this._isDragging) return;
+      const deltaY = this._startY - e.clientY;
+      const sensitivity = (this.max - this.min) / 100;
+      this.emitChange(this._startValue + deltaY * sensitivity);
+    };
+    this._onMouseUp = () => {
+      this._isDragging = false;
+      document.removeEventListener("mousemove", this._onMouseMove);
+      document.removeEventListener("mouseup", this._onMouseUp);
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "min",
+      "max",
+      "step",
+      "size",
+      "stroke-width",
+      "value-color",
+      "range-color",
+      "readonly",
+      "disabled",
+      "value-template"
+    ];
+  }
+  get value() {
+    return this.clampValue(Number(this.getAttr("value", "0")) || 0);
+  }
+  set value(v) {
+    if (this.readonly || this.disabled) return;
+    const clamped = this.clampValue(v);
+    const current = this.clampValue(Number(this.getAttr("value", "0")) || 0);
+    if (clamped !== current) {
+      this.setAttribute("value", String(clamped));
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: true,
+          composed: true,
+          detail: { value: clamped }
+        })
+      );
+    }
+  }
+  get min() {
+    return Number(this.getAttr("min", "0")) || 0;
+  }
+  set min(v) {
+    this.setAttribute("min", String(v));
+  }
+  get max() {
+    return Number(this.getAttr("max", "100")) || 100;
+  }
+  set max(v) {
+    this.setAttribute("max", String(v));
+  }
+  get step() {
+    return Number(this.getAttr("step", "1")) || 1;
+  }
+  set step(v) {
+    this.setAttribute("step", String(v));
+  }
+  get size() {
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
+  }
+  set size(v) {
+    this.setAttribute("size", v);
+  }
+  get strokeWidth() {
+    return Number(this.getAttr("stroke-width", "8")) || 8;
+  }
+  set strokeWidth(v) {
+    this.setAttribute("stroke-width", String(v));
+  }
+  get valueColor() {
+    return this.getAttr("value-color", "");
+  }
+  set valueColor(v) {
+    this.setAttribute("value-color", v);
+  }
+  get rangeColor() {
+    return this.getAttr("range-color", "");
+  }
+  set rangeColor(v) {
+    this.setAttribute("range-color", v);
+  }
+  get readonly() {
+    return this.hasAttr("readonly");
+  }
+  set readonly(v) {
+    this.toggleAttr("readonly", Boolean(v));
+  }
+  get disabled() {
+    return this.hasAttr("disabled");
+  }
+  set disabled(v) {
+    this.toggleAttr("disabled", Boolean(v));
+  }
+  get valueTemplate() {
+    return this.getAttr("value-template", "{value}");
+  }
+  set valueTemplate(v) {
+    this.setAttribute("value-template", v);
+  }
+  render() {
+    const min = this.min;
+    const max = this.max;
+    const value = this.clampValue(this.value);
+    const range = max - min;
+    const pct = range > 0 ? (value - min) / range : 0;
+    const sizeNum = this.getSizeNum();
+    const strokeW = this.strokeWidth;
+    const radius = (sizeNum - strokeW) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference * (1 - pct);
+    const valueColorStyle = this.valueColor ? `--_value-color: ${this.valueColor};` : "";
+    const rangeColorStyle = this.rangeColor ? `--_range-color: ${this.rangeColor};` : "";
+    const displayValue = this.valueTemplate.replace("{value}", String(Math.round(value)));
+    this.setTemplate(`
+      <div class="knob" part="knob" tabindex="${this.disabled ? "-1" : "0"}"
+        role="slider" aria-valuenow="${value}" aria-valuemin="${min}" aria-valuemax="${max}"
+        aria-readonly="${this.readonly}" aria-disabled="${this.disabled}"
+        style="${valueColorStyle}${rangeColorStyle}">
+        <svg viewBox="0 0 ${sizeNum} ${sizeNum}" part="svg">
+          <circle class="track" part="track"
+            cx="${sizeNum / 2}" cy="${sizeNum / 2}" r="${radius}" />
+          <circle class="value" part="value"
+            cx="${sizeNum / 2}" cy="${sizeNum / 2}" r="${radius}"
+            stroke-dasharray="${circumference}"
+            stroke-dashoffset="${offset}" />
+        </svg>
+        <div class="label" part="label">${displayValue}</div>
+      </div>
+    `);
+    this.attachListeners();
+  }
+  getSizeNum() {
+    const s = this.size;
+    if (s === "sm") return 60;
+    if (s === "lg") return 140;
+    return 100;
+  }
+  clampValue(v) {
+    const min = this.min;
+    const max = this.max;
+    const step = this.step;
+    let clamped = Math.min(max, Math.max(min, v));
+    if (step > 0) {
+      clamped = Math.round((clamped - min) / step) * step + min;
+      clamped = Math.min(max, Math.max(min, clamped));
+    }
+    return clamped;
+  }
+  emitChange(newValue) {
+    const clamped = this.clampValue(newValue);
+    if (clamped !== this.value) {
+      this.value = clamped;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: true,
+          composed: true,
+          detail: { value: clamped }
+        })
+      );
+    }
+  }
+  attachListeners() {
+    const knob = this.root.querySelector(".knob");
+    if (!knob) return;
+    knob.addEventListener("mousedown", (e) => {
+      if (this.readonly || this.disabled) return;
+      e.preventDefault();
+      this._isDragging = true;
+      this._startY = e.clientY;
+      this._startValue = this.value;
+      knob.focus();
+      document.addEventListener("mousemove", this._onMouseMove);
+      document.addEventListener("mouseup", this._onMouseUp);
+    });
+    knob.addEventListener("touchstart", (e) => {
+      if (this.readonly || this.disabled) return;
+      e.preventDefault();
+      this._isDragging = true;
+      this._startY = e.touches[0].clientY;
+      this._startValue = this.value;
+      knob.focus();
+    }, { passive: false });
+    knob.addEventListener("touchmove", (e) => {
+      if (!this._isDragging || this.readonly || this.disabled) return;
+      e.preventDefault();
+      const deltaY = this._startY - e.touches[0].clientY;
+      const sensitivity = (this.max - this.min) / 100;
+      this.emitChange(this._startValue + deltaY * sensitivity);
+    }, { passive: false });
+    knob.addEventListener("touchend", () => {
+      this._isDragging = false;
+    });
+    knob.addEventListener("keydown", (e) => {
+      if (this.readonly || this.disabled) return;
+      const step = this.step;
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowRight":
+          e.preventDefault();
+          this.emitChange(this.value + step);
+          break;
+        case "ArrowDown":
+        case "ArrowLeft":
+          e.preventDefault();
+          this.emitChange(this.value - step);
+          break;
+        case "Home":
+          e.preventDefault();
+          this.emitChange(this.min);
+          break;
+        case "End":
+          e.preventDefault();
+          this.emitChange(this.max);
+          break;
+        case "PageUp":
+          e.preventDefault();
+          this.emitChange(this.value + step * 10);
+          break;
+        case "PageDown":
+          e.preventDefault();
+          this.emitChange(this.value - step * 10);
+          break;
+      }
+    });
+  }
+  disconnectedCallback() {
+    document.removeEventListener("mousemove", this._onMouseMove);
+    document.removeEventListener("mouseup", this._onMouseUp);
+    super.disconnectedCallback();
+  }
+};
+_FxKnob.styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      --_size: 100px;
+      --_stroke-width: 8px;
+      --_value-color: var(--fx-color-primary);
+      --_range-color: var(--fx-border-default);
+    }
+    :host([size='sm']) { --_size: 60px; }
+    :host([size='lg']) { --_size: 140px; }
+    .knob {
+      position: relative;
+      width: var(--_size);
+      height: var(--_size);
+      cursor: pointer;
+      user-select: none;
+      touch-action: none;
+    }
+    :host([readonly]) .knob,
+    :host([disabled]) .knob {
+      cursor: default;
+      pointer-events: none;
+    }
+    :host([disabled]) .knob {
+      opacity: 0.55;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      transform: rotate(-90deg);
+    }
+    .track {
+      fill: none;
+      stroke: var(--_range-color);
+      stroke-width: var(--_stroke-width);
+    }
+    .value {
+      fill: none;
+      stroke: var(--_value-color);
+      stroke-width: var(--_stroke-width);
+      stroke-linecap: round;
+      transition: stroke-dashoffset var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .label {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      color: var(--fx-text-default);
+      pointer-events: none;
+    }
+    :host([size='sm']) .label { font-size: 11px; }
+    :host([size='md']) .label { font-size: 14px; }
+    :host([size='lg']) .label { font-size: 18px; }
+    .knob:focus-visible {
+      outline: none;
+    }
+    .knob:focus-visible svg {
+      filter: drop-shadow(var(--fx-effect-focus-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)));
+    }
+  `;
+let FxKnob = _FxKnob;
+function defineFxKnob() {
+  return defineElement("fx-knob", FxKnob);
+}
+defineFxKnob();
+const _FxOrderList = class _FxOrderList extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._data = [];
+    this._filteredData = null;
+    this._selection = [];
+    this._filterValue = "";
+    this._draggedIndex = null;
+    this._listenersAttached = false;
+    this._optionTemplate = null;
+  }
+  static get observedAttributes() {
+    return [
+      "data",
+      "data-key",
+      "filter",
+      "filter-by",
+      "filter-placeholder",
+      "breakpoint",
+      "controls-location",
+      "dragdrop",
+      "striped",
+      "selection-mode",
+      "show-select-all"
+    ];
+  }
+  set data(value) {
+    this._data = value;
+    this._filteredData = null;
+    this.render();
+  }
+  get data() {
+    return this._data;
+  }
+  set selection(value) {
+    this._selection = value;
+    this.render();
+  }
+  get selection() {
+    return this._selection;
+  }
+  get dataKey() {
+    return this.getAttr("data-key", "");
+  }
+  set dataKey(v) {
+    this.setAttribute("data-key", v);
+  }
+  get filter() {
+    return this.hasAttr("filter");
+  }
+  set filter(v) {
+    this.toggleAttr("filter", v);
+  }
+  get filterBy() {
+    return this.getAttr("filter-by", "label");
+  }
+  set filterBy(v) {
+    this.setAttribute("filter-by", v);
+  }
+  get filterPlaceholder() {
+    return this.getAttr("filter-placeholder", "Buscar...");
+  }
+  set filterPlaceholder(v) {
+    this.setAttribute("filter-placeholder", v);
+  }
+  get breakpoint() {
+    return this.getAttr("breakpoint", "960px");
+  }
+  set breakpoint(v) {
+    this.setAttribute("breakpoint", v);
+  }
+  get dragdrop() {
+    return this.hasAttr("dragdrop");
+  }
+  set dragdrop(v) {
+    this.toggleAttr("dragdrop", v);
+  }
+  get striped() {
+    return this.hasAttr("striped");
+  }
+  set striped(v) {
+    this.toggleAttr("striped", v);
+  }
+  get selectionMode() {
+    const s = this.getAttr("selection-mode", "");
+    return s === "single" || s === "multiple" ? s : "";
+  }
+  set selectionMode(v) {
+    this.setAttribute("selection-mode", v);
+  }
+  get showSelectAll() {
+    return this.hasAttr("show-select-all");
+  }
+  set showSelectAll(v) {
+    this.toggleAttr("show-select-all", v);
+  }
+  get filterValue() {
+    return this._filterValue;
+  }
+  set filterValue(v) {
+    this._filterValue = v;
+    this._applyFilter();
+    this._updateListDisplay();
+  }
+  setOptionTemplate(template) {
+    this._optionTemplate = template;
+    this.render();
+  }
+  connectedCallback() {
+    this._parseDataAttribute();
+    super.connectedCallback();
+  }
+  attributeChangedCallback() {
+    if (this.getAttr("data", "") !== "") {
+      this._parseDataAttribute();
+    }
+    super.attributeChangedCallback();
+  }
+  _parseDataAttribute() {
+    const dataAttr = this.getAttr("data", "");
+    if (dataAttr) {
+      try {
+        this._data = JSON.parse(dataAttr);
+        this._filteredData = null;
+      } catch {
+        this._data = [];
+      }
+    }
+  }
+  _applyFilter() {
+    if (!this._filterValue) {
+      this._filteredData = null;
+      return;
+    }
+    const filterFields = this.filterBy.split(",").map((f) => f.trim());
+    this._filteredData = this._data.filter((item) => {
+      return filterFields.some((field) => {
+        const value = item[field];
+        if (value == null) return false;
+        return String(value).toLowerCase().includes(this._filterValue.toLowerCase());
+      });
+    });
+  }
+  _getDisplayData() {
+    return this._filteredData || this._data;
+  }
+  _getItemKey(item, index) {
+    if (this.dataKey && item[this.dataKey] != null) {
+      return String(item[this.dataKey]);
+    }
+    if (item["id"] != null) return String(item["id"]);
+    if (item["key"] != null) return String(item["key"]);
+    if (item["label"] != null) return String(item["label"]);
+    if (item["name"] != null) return String(item["name"]);
+    if (item["value"] != null) return String(item["value"]);
+    return String(index);
+  }
+  _getItemLabel(item) {
+    const fields = ["label", "name", "title", "text", "value"];
+    for (const field of fields) {
+      if (item[field] != null) {
+        return String(item[field]);
+      }
+    }
+    return JSON.stringify(item);
+  }
+  _isSelected(item) {
+    return this._selection.some((s) => this._getItemKey(s, -1) === this._getItemKey(item, -1));
+  }
+  _moveItem(fromIndex, toIndex) {
+    const actualFrom = this._getActualIndex(fromIndex);
+    const actualTo = this._getActualIndex(toIndex);
+    if (actualFrom === -1 || actualTo === -1) return;
+    const item = this._data.splice(actualFrom, 1)[0];
+    this._data.splice(actualTo, 0, item);
+    this._applyFilter();
+    this._updateListDisplay();
+    this._updateControlsState();
+    this._emitReorder();
+  }
+  _getActualIndex(displayIndex) {
+    if (this._filteredData) {
+      const item = this._filteredData[displayIndex];
+      return this._data.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(item, -1));
+    }
+    return displayIndex;
+  }
+  _emitReorder() {
+    this.dispatchEvent(new CustomEvent("reorder", {
+      bubbles: true,
+      composed: true,
+      detail: { items: [...this._data] }
+    }));
+  }
+  _emitSelectionChange() {
+    this.dispatchEvent(new CustomEvent("selection-change", {
+      bubbles: true,
+      composed: true,
+      detail: { selection: [...this._selection] }
+    }));
+  }
+  _toggleSelection(item) {
+    const key2 = this._getItemKey(item, -1);
+    const index = this._selection.findIndex((s) => this._getItemKey(s, -1) === key2);
+    if (index >= 0) {
+      this._selection.splice(index, 1);
+    } else if (this.selectionMode === "multiple") {
+      this._selection.push(item);
+    } else {
+      this._selection = [item];
+    }
+    this._emitSelectionChange();
+    this._updateListDisplay();
+    this._updateControlsState();
+  }
+  _selectAll() {
+    const displayData = this._getDisplayData();
+    this._selection = [...displayData];
+    this._emitSelectionChange();
+    this._updateListDisplay();
+    this._updateControlsState();
+  }
+  _deselectAll() {
+    this._selection = [];
+    this._emitSelectionChange();
+    this._updateListDisplay();
+    this._updateControlsState();
+  }
+  _toggleSelectAll() {
+    const displayData = this._getDisplayData();
+    if (this._selection.length === displayData.length) {
+      this._deselectAll();
+    } else {
+      this._selectAll();
+    }
+  }
+  render() {
+    const displayData = this._getDisplayData();
+    const hasSelection = this.selectionMode;
+    const hasMultipleSelection = this.selectionMode === "multiple";
+    const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;
+    this.setTemplate(`
+      <div class="container" part="container">
+        ${this.filter ? `
+          <div class="filter-wrapper" part="filter-wrapper">
+            <input type="text" class="filter-input" part="filter-input"
+              placeholder="${this.filterPlaceholder}"
+              value="${esc$1(this._filterValue)}"
+              aria-label="Filtrar lista" />
+          </div>
+        ` : ""}
+        <div class="main-row" part="main-row">
+          <div class="controls-bar" part="controls-bar">
+            <div class="control-group">
+              <button class="control-btn" data-action="top" part="control-btn" aria-label="Mover para o inicio">
+                <span class="control-btn-icon">«</span>
+              </button>
+              <button class="control-btn" data-action="up" part="control-btn" aria-label="Mover para cima">
+                <span class="control-btn-icon">↑</span>
+              </button>
+            </div>
+            <div class="control-group">
+              <button class="control-btn" data-action="down" part="control-btn" aria-label="Mover para baixo">
+                <span class="control-btn-icon">↓</span>
+              </button>
+              <button class="control-btn" data-action="bottom" part="control-btn" aria-label="Mover para o fim">
+                <span class="control-btn-icon">»</span>
+              </button>
+            </div>
+          </div>
+          <div class="list-wrapper" part="list-wrapper">
+            ${hasMultipleSelection && this.showSelectAll ? `
+              <div class="select-all-bar" part="select-all-bar">
+                <label>
+                  <input type="checkbox" class="select-all-checkbox"
+                    ${allSelected ? "checked" : ""}
+                    aria-label="Selecionar todos" />
+                  Selecionar Todos
+                </label>
+                <span class="selection-count">${this._selection.length} selecionado(s)</span>
+              </div>
+            ` : ""}
+            <ul class="list" part="list" role="listbox"
+              aria-multiselectable="${hasMultipleSelection}"
+              tabindex="0">
+              ${displayData.length === 0 ? `
+                <li class="empty-message" part="empty-message">
+                  ${this.filter ? "Nenhum resultado encontrado" : "Nenhum item disponivel"}
+                </li>
+              ` : displayData.map((item, index) => {
+      const key2 = this._getItemKey(item, index);
+      const label = this._getItemLabel(item);
+      const isSelected = this._isSelected(item);
+      const content = this._optionTemplate ? this._optionTemplate(item) : esc$1(label);
+      return `
+                  <li class="list-item${isSelected ? " selected" : ""}" part="list-item"
+                    data-index="${index}" data-key="${esc$1(key2)}"
+                    role="option" aria-selected="${isSelected}"
+                    ${this.dragdrop ? 'draggable="true"' : ""}
+                    tabindex="0">
+                    ${this.dragdrop ? '<span class="drag-handle" part="drag-handle" aria-label="Arrastar">⋮⋮</span>' : ""}
+                    ${hasSelection ? `
+                      <input type="checkbox" class="checkbox" part="checkbox"
+                        ${isSelected ? "checked" : ""}
+                        aria-label="Selecionar ${esc$1(label)}" />
+                    ` : ""}
+                    <span class="item-content" part="item-content">${content}</span>
+                  </li>
+                `;
+    }).join("")}
+            </ul>
+          </div>
+        </div>
+      </div>
+    `);
+    this._attachListeners();
+    this._attachItemListeners(this.root.querySelector(".list"));
+    this._updateControlsState();
+  }
+  _attachListeners() {
+    if (this._listenersAttached) return;
+    this._listenersAttached = true;
+    const root = this.root;
+    root.addEventListener("input", (e) => {
+      const t = e.target;
+      if (t.classList.contains("filter-input")) {
+        this.filterValue = t.value;
+      }
+    });
+    root.addEventListener("change", (e) => {
+      const t = e.target;
+      if (t.classList.contains("select-all-checkbox")) {
+        this._toggleSelectAll();
+      }
+    });
+    root.addEventListener("click", (e) => {
+      const target = e.target;
+      const btn = target.closest(".control-btn");
+      if (btn) {
+        this._handleMoveAction(btn.dataset.action);
+      }
+    });
+    let dragOverElement = null;
+    root.addEventListener("dragstart", (e) => {
+      const target = e.target.closest(".list-item");
+      if (!target) return;
+      this._draggedIndex = Number(target.dataset.index);
+      target.classList.add("dragging");
+      e.dataTransfer.effectAllowed = "move";
+    });
+    root.addEventListener("dragend", (e) => {
+      const target = e.target;
+      target.classList.remove("dragging");
+      this._draggedIndex = null;
+      root.querySelectorAll(".drag-over").forEach((el) => el.classList.remove("drag-over"));
+      dragOverElement = null;
+    });
+    root.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      const target = e.target.closest(".list-item");
+      if (!target || target.classList.contains("dragging")) return;
+      if (dragOverElement) dragOverElement.classList.remove("drag-over");
+      target.classList.add("drag-over");
+      dragOverElement = target;
+    });
+    root.addEventListener("drop", (e) => {
+      e.preventDefault();
+      if (this._draggedIndex === null) return;
+      const target = e.target.closest(".list-item");
+      if (!target) return;
+      const toIndex = Number(target.dataset.index);
+      target.classList.remove("drag-over");
+      dragOverElement = null;
+      this._moveItem(this._draggedIndex, toIndex);
+      this._draggedIndex = null;
+    });
+    this._updateControlsState();
+  }
+  _attachItemListeners(list) {
+    if (!list) return;
+    list.addEventListener("click", (e) => {
+      const target = e.target;
+      const itemEl = target.closest(".list-item");
+      if (!itemEl) return;
+      if (target.classList.contains("checkbox")) {
+        e.stopPropagation();
+        const idxC = Number(itemEl.dataset.index);
+        this._toggleSelection(this._getDisplayData()[idxC]);
+        return;
+      }
+      const idxI = Number(itemEl.dataset.index);
+      this._toggleSelection(this._getDisplayData()[idxI]);
+    });
+    list.addEventListener("keydown", (e) => {
+      const target = e.target;
+      if (!target.classList.contains("list-item")) return;
+      const items = Array.from(list.querySelectorAll(".list-item"));
+      const currentIndex = items.indexOf(target);
+      const ke = e;
+      switch (ke.key) {
+        case "ArrowUp":
+          e.preventDefault();
+          if (currentIndex > 0) items[currentIndex - 1].focus();
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (currentIndex < items.length - 1) items[currentIndex + 1].focus();
+          break;
+        case " ":
+        case "Enter":
+          e.preventDefault();
+          if (this.selectionMode) {
+            const index = Number(target.dataset.index);
+            this._toggleSelection(this._getDisplayData()[index]);
+          }
+          break;
+      }
+    });
+  }
+  _updateListDisplay() {
+    const listWrapper = this.root.querySelector(".list-wrapper");
+    if (!listWrapper) {
+      this.render();
+      return;
+    }
+    const displayData = this._getDisplayData();
+    const hasSelection = this.selectionMode;
+    const hasMultipleSelection = this.selectionMode === "multiple";
+    const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;
+    listWrapper.innerHTML = `
+      ${hasMultipleSelection && this.showSelectAll ? `
+        <div class="select-all-bar" part="select-all-bar">
+          <label>
+            <input type="checkbox" class="select-all-checkbox"
+              ${allSelected ? "checked" : ""}
+              aria-label="Selecionar todos" />
+            Selecionar Todos
+          </label>
+          <span class="selection-count">${this._selection.length} selecionado(s)</span>
+        </div>
+      ` : ""}
+      <ul class="list" part="list" role="listbox"
+        aria-multiselectable="${hasMultipleSelection}"
+        tabindex="0">
+        ${displayData.length === 0 ? `
+          <li class="empty-message" part="empty-message">
+            ${this.filter ? "Nenhum resultado encontrado" : "Nenhum item disponivel"}
+          </li>
+        ` : displayData.map((item, index) => {
+      const key2 = this._getItemKey(item, index);
+      const label = this._getItemLabel(item);
+      const isSelected = this._isSelected(item);
+      const content = this._optionTemplate ? this._optionTemplate(item) : esc$1(label);
+      return `
+            <li class="list-item${isSelected ? " selected" : ""}" part="list-item"
+              data-index="${index}" data-key="${esc$1(key2)}"
+              role="option" aria-selected="${isSelected}"
+              ${this.dragdrop ? 'draggable="true"' : ""}
+              tabindex="0">
+              ${this.dragdrop ? '<span class="drag-handle" part="drag-handle" aria-label="Arrastar">⋮⋮</span>' : ""}
+              ${hasSelection ? `
+                <input type="checkbox" class="checkbox" part="checkbox"
+                  ${isSelected ? "checked" : ""}
+                  aria-label="Selecionar ${esc$1(label)}" />
+              ` : ""}
+              <span class="item-content" part="item-content">${content}</span>
+            </li>
+          `;
+    }).join("")}
+            </ul>
+    `;
+    this._attachListeners();
+    this._attachItemListeners(this.root.querySelector(".list"));
+  }
+  _handleMoveAction(action) {
+    if (!this._selection.length) return;
+    const displayData = this._getDisplayData();
+    const selectedIndices = this._selection.map((s) => displayData.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(s, -1))).filter((i) => i >= 0).sort((a, b) => a - b);
+    if (selectedIndices.length === 0) return;
+    switch (action) {
+      case "top":
+        this._moveSelectedToStart(selectedIndices);
+        break;
+      case "up":
+        this._moveSelectedByOne(selectedIndices, -1);
+        break;
+      case "down":
+        this._moveSelectedByOne(selectedIndices, 1);
+        break;
+      case "bottom":
+        this._moveSelectedToEnd(selectedIndices);
+        break;
+    }
+  }
+  _moveSelectedToStart(indices) {
+    const items = [];
+    const actualIndices = [];
+    for (const idx of indices) {
+      const actualIdx = this._getActualIndex(idx);
+      items.push(this._data[actualIdx]);
+      actualIndices.push(actualIdx);
+    }
+    actualIndices.sort((a, b) => b - a).forEach((i) => this._data.splice(i, 1));
+    const insertIdx = this._getActualIndex(0);
+    this._data.splice(insertIdx, 0, ...items);
+    this._applyFilter();
+    this._updateListDisplay();
+    this._updateControlsState();
+    this._emitReorder();
+  }
+  _moveSelectedToEnd(indices) {
+    const items = [];
+    const actualIndices = [];
+    for (const idx of indices) {
+      const actualIdx = this._getActualIndex(idx);
+      items.push(this._data[actualIdx]);
+      actualIndices.push(actualIdx);
+    }
+    actualIndices.sort((a, b) => b - a).forEach((i) => this._data.splice(i, 1));
+    const displayData = this._getDisplayData();
+    const insertIdx = this._getActualIndex(displayData.length - 1);
+    this._data.splice(insertIdx + 1, 0, ...items);
+    this._applyFilter();
+    this._updateListDisplay();
+    this._updateControlsState();
+    this._emitReorder();
+  }
+  _moveSelectedByOne(indices, delta) {
+    const displayData = this._getDisplayData();
+    if (displayData.length === 0) return;
+    const actualIndices = indices.map((idx) => this._getActualIndex(idx)).filter((idx) => idx >= 0).sort((a, b) => a - b);
+    if (actualIndices.length === 0) return;
+    if (delta < 0 && actualIndices[0] <= 0) return;
+    if (delta > 0 && actualIndices[actualIndices.length - 1] >= this._data.length - 1) return;
+    const selectedItems = actualIndices.map((idx) => this._data[idx]);
+    for (let i = actualIndices.length - 1; i >= 0; i--) {
+      this._data.splice(actualIndices[i], 1);
+    }
+    let insertIndex;
+    if (delta < 0) {
+      insertIndex = actualIndices[0] - 1;
+    } else {
+      insertIndex = actualIndices[actualIndices.length - 1] - actualIndices.length + 1 + 1;
+    }
+    insertIndex = Math.max(0, Math.min(insertIndex, this._data.length));
+    this._data.splice(insertIndex, 0, ...selectedItems);
+    this._applyFilter();
+    this._updateListDisplay();
+    this._updateControlsState();
+    this._emitReorder();
+  }
+  _updateControlsState() {
+    const displayData = this._getDisplayData();
+    const selectedIndices = this._selection.map((s) => displayData.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(s, -1))).filter((i) => i >= 0);
+    const buttons = this.root.querySelectorAll(".control-btn");
+    buttons.forEach((btn) => {
+      const action = btn.dataset.action;
+      let disabled = selectedIndices.length === 0;
+      if (!disabled) {
+        switch (action) {
+          case "top":
+          case "up":
+            disabled = selectedIndices[0] === 0;
+            break;
+          case "bottom":
+          case "down":
+            disabled = selectedIndices[selectedIndices.length - 1] === displayData.length - 1;
+            break;
+        }
+      }
+      btn.disabled = disabled;
+    });
+  }
+};
+_FxOrderList.styles = css`
+
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      --orderlist-primary: var(--fx-color-primary, #3b82f6);
+      --orderlist-border: var(--fx-border-default, #e2e8f0);
+      --orderlist-bg: var(--fx-surface-background, #ffffff);
+      --orderlist-bg-hover: var(--fx-surface-surface-hover, #f1f5f9);
+      --orderlist-text: var(--fx-text-default, #1e293b);
+      --orderlist-text-muted: var(--fx-text-muted, #64748b);
+      --orderlist-radius: var(--fx-radius-md, 8px);
+      --orderlist-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      --orderlist-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    * { box-sizing: border-box; }
+    .container { display: flex; flex-direction: column; gap: var(--fx-space-md, 16px); }
+    .list-wrapper { display: flex; flex-direction: column; gap: var(--fx-space-sm, 8px); flex: 1; min-width: 0; }
+    .select-all-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: linear-gradient(135deg, var(--orderlist-bg), var(--orderlist-bg-hover)); border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-size: 0.9em; font-weight: 500; }
+    .select-all-bar label { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); cursor: pointer; user-select: none; color: var(--orderlist-text); }
+    .select-all-bar input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; }
+    .filter-wrapper { margin-bottom: var(--fx-space-xs, 4px); }
+    .filter-input { width: 100%; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); padding-left: 42px; border: 1.5px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-family: inherit; font-size: inherit; color: var(--orderlist-text); background: var(--orderlist-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 14px center; transition: var(--orderlist-transition); }
+    .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 20%, transparent); }
+    .filter-input::placeholder { color: var(--orderlist-text-muted); }
+    .main-row { display: flex; align-items: stretch; gap: var(--fx-space-sm, 8px); }
+    .list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); overflow: hidden; box-shadow: var(--orderlist-shadow); max-height: 450px; overflow-y: auto; flex: 1; }
+    .list::-webkit-scrollbar { width: 6px; }
+    .list::-webkit-scrollbar-track { background: transparent; }
+    .list::-webkit-scrollbar-thumb { background: var(--orderlist-border); border-radius: 3px; }
+    .list::-webkit-scrollbar-thumb:hover { background: var(--orderlist-text-muted); }
+    .selection-count { font-size: 0.85em; color: var(--orderlist-primary); background: color-mix(in srgb, var(--orderlist-primary) 12%, transparent); padding: 4px 12px; border-radius: 20px; font-weight: 600; }
+    :host([striped]) .list-item:nth-child(even) { background: var(--fx-surface-surface, #f8fafc); }
+    .list-item { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: var(--orderlist-bg); border-bottom: 1px solid var(--orderlist-border); cursor: pointer; user-select: none; transition: var(--orderlist-transition); }
+    .list-item:last-child { border-bottom: none; }
+    .list-item:hover { background: var(--orderlist-bg-hover); }
+    .list-item.selected { background: color-mix(in srgb, var(--orderlist-primary) 8%, transparent); border-left: 3px solid var(--orderlist-primary); padding-left: 11px; }
+    .list-item:focus-visible { outline: none; background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }
+    .list-item.dragging { opacity: 0.5; background: var(--orderlist-bg-hover); }
+    .list-item.drag-over { border-top: 2px solid var(--orderlist-primary); }
+    .drag-handle { color: var(--orderlist-text-muted); cursor: grab; flex-shrink: 0; font-size: 1.2em; opacity: 0.6; transition: var(--orderlist-transition); }
+    .drag-handle:hover { opacity: 1; }
+    .drag-handle:active { cursor: grabbing; }
+    .item-content { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .checkbox { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; transition: var(--orderlist-transition); }
+    .checkbox:hover { transform: scale(1.1); }
+    .empty-message { padding: var(--fx-space-xl, 32px); text-align: center; color: var(--orderlist-text-muted); font-style: italic; }
+    .controls-bar {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: var(--fx-space-xs, 6px);
+      background: var(--orderlist-bg);
+      border: 1px solid var(--orderlist-border);
+      border-radius: var(--orderlist-radius);
+      box-shadow: var(--orderlist-shadow);
+      height: fit-content;
+      position: sticky;
+      top: 0;
+      align-self: flex-start;
+    }
+    .control-group { display: flex; flex-direction: column; gap: 3px; }
+    .control-group + .control-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--orderlist-border); }
+    button.control-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--orderlist-text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--orderlist-transition); position: relative; }
+    button.control-btn:hover:not(:disabled) { background: var(--orderlist-bg-hover); color: var(--orderlist-primary); transform: scale(1.1); }
+    button.control-btn:active:not(:disabled) { transform: scale(0.92); background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }
+    button.control-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 30%, transparent); }
+    button.control-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
+    .control-btn-icon { font-size: 18px; line-height: 1; }
+    /* Tooltip nos botoes */
+    button.control-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
+    @media (max-width: 640px) { .main-row { flex-direction: column; } .controls-bar { flex-direction: row; flex-wrap: wrap; justify-content: center; position: relative; } .control-group { flex-direction: row; } .control-group + .control-group { margin-top: 0; margin-left: 4px; padding-top: 0; padding-left: 4px; border-top: none; border-left: 1px solid var(--orderlist-border); } button.control-btn { width: 44px; height: 40px; } button.control-btn::after { display: none; } .list { max-height: 300px; } }
+    @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
+    .list-item { animation: slideIn 0.2s ease-out; }
+    @media (prefers-color-scheme: light) { :host { --orderlist-border: #334155; --orderlist-bg: #1e293b; --orderlist-bg-hover: #334155; --orderlist-text: #f1f5f9; --orderlist-text-muted: #94a3b8; --orderlist-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } }
+    `;
+let FxOrderList = _FxOrderList;
+function esc$1(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function defineFxOrderList() {
+  return defineElement("fx-orderlist", FxOrderList);
+}
+defineFxOrderList();
+const _FxPickList = class _FxPickList extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._source = [];
+    this._filteredSource = null;
+    this._target = [];
+    this._filteredTarget = null;
+    this._sourceSelection = [];
+    this._targetSelection = [];
+    this._sourceFilterValue = "";
+    this._targetFilterValue = "";
+    this._filterListenersAttached = false;
+    this._optionTemplate = null;
+  }
+  static get observedAttributes() {
+    return [
+      "source",
+      "target",
+      "source-key",
+      "target-key",
+      "filter",
+      "filter-by",
+      "filter-placeholder",
+      "dragdrop",
+      "striped",
+      "selection-mode",
+      "show-select-all",
+      "source-label",
+      "target-label"
+    ];
+  }
+  set source(value) {
+    this._source = value;
+    this._filteredSource = null;
+    this.render();
+  }
+  get source() {
+    return this._source;
+  }
+  set target(value) {
+    this._target = value;
+    this._filteredTarget = null;
+    this.render();
+  }
+  get target() {
+    return this._target;
+  }
+  set sourceSelection(value) {
+    this._sourceSelection = value;
+    this.render();
+  }
+  get sourceSelection() {
+    return this._sourceSelection;
+  }
+  set targetSelection(value) {
+    this._targetSelection = value;
+    this.render();
+  }
+  get targetSelection() {
+    return this._targetSelection;
+  }
+  get sourceKey() {
+    return this.getAttr("source-key", "");
+  }
+  set sourceKey(v) {
+    this.setAttribute("source-key", v);
+  }
+  get targetKey() {
+    return this.getAttr("target-key", "");
+  }
+  set targetKey(v) {
+    this.setAttribute("target-key", v);
+  }
+  get filter() {
+    return this.hasAttr("filter");
+  }
+  set filter(v) {
+    this.toggleAttr("filter", v);
+  }
+  get filterBy() {
+    return this.getAttr("filter-by", "label");
+  }
+  set filterBy(v) {
+    this.setAttribute("filter-by", v);
+  }
+  get filterPlaceholder() {
+    return this.getAttr("filter-placeholder", "Buscar...");
+  }
+  set filterPlaceholder(v) {
+    this.setAttribute("filter-placeholder", v);
+  }
+  get dragdrop() {
+    return this.hasAttr("dragdrop");
+  }
+  set dragdrop(v) {
+    this.toggleAttr("dragdrop", v);
+  }
+  get striped() {
+    return this.hasAttr("striped");
+  }
+  set striped(v) {
+    this.toggleAttr("striped", v);
+  }
+  get selectionMode() {
+    const s = this.getAttr("selection-mode", "");
+    return s === "single" || s === "multiple" ? s : "";
+  }
+  set selectionMode(v) {
+    this.setAttribute("selection-mode", v);
+  }
+  get showSelectAll() {
+    return this.hasAttr("show-select-all");
+  }
+  set showSelectAll(v) {
+    this.toggleAttr("show-select-all", v);
+  }
+  get sourceLabel() {
+    return this.getAttr("source-label", "Disponíveis");
+  }
+  set sourceLabel(v) {
+    this.setAttribute("source-label", v);
+  }
+  get targetLabel() {
+    return this.getAttr("target-label", "Selecionados");
+  }
+  set targetLabel(v) {
+    this.setAttribute("target-label", v);
+  }
+  get sourceFilterValue() {
+    return this._sourceFilterValue;
+  }
+  set sourceFilterValue(v) {
+    this._sourceFilterValue = v;
+    this._applySourceFilter();
+    this._updateListDisplay();
+  }
+  get targetFilterValue() {
+    return this._targetFilterValue;
+  }
+  set targetFilterValue(v) {
+    this._targetFilterValue = v;
+    this._applyTargetFilter();
+    this._updateListDisplay();
+  }
+  setOptionTemplate(template) {
+    this._optionTemplate = template;
+    this.render();
+  }
+  connectedCallback() {
+    this._parseSourceAttribute();
+    this._parseTargetAttribute();
+    super.connectedCallback();
+  }
+  attributeChangedCallback() {
+    if (this.getAttr("source", "") !== "") {
+      this._parseSourceAttribute();
+    }
+    if (this.getAttr("target", "") !== "") {
+      this._parseTargetAttribute();
+    }
+    super.attributeChangedCallback();
+  }
+  _parseSourceAttribute() {
+    const dataAttr = this.getAttr("source", "");
+    if (dataAttr) {
+      try {
+        this._source = JSON.parse(dataAttr);
+        this._filteredSource = null;
+      } catch {
+        this._source = [];
+      }
+    }
+  }
+  _parseTargetAttribute() {
+    const dataAttr = this.getAttr("target", "");
+    if (dataAttr) {
+      try {
+        this._target = JSON.parse(dataAttr);
+        this._filteredTarget = null;
+      } catch {
+        this._target = [];
+      }
+    }
+  }
+  _applySourceFilter() {
+    if (!this._sourceFilterValue) {
+      this._filteredSource = null;
+      return;
+    }
+    const filterFields = this.filterBy.split(",").map((f) => f.trim());
+    this._filteredSource = this._source.filter((item) => {
+      return filterFields.some((field) => {
+        const value = item[field];
+        if (value == null) return false;
+        return String(value).toLowerCase().includes(this._sourceFilterValue.toLowerCase());
+      });
+    });
+  }
+  _applyTargetFilter() {
+    if (!this._targetFilterValue) {
+      this._filteredTarget = null;
+      return;
+    }
+    const filterFields = this.filterBy.split(",").map((f) => f.trim());
+    this._filteredTarget = this._target.filter((item) => {
+      return filterFields.some((field) => {
+        const value = item[field];
+        if (value == null) return false;
+        return String(value).toLowerCase().includes(this._targetFilterValue.toLowerCase());
+      });
+    });
+  }
+  _getDisplaySource() {
+    return this._filteredSource || this._source;
+  }
+  _getDisplayTarget() {
+    return this._filteredTarget || this._target;
+  }
+  _getItemKey(item, index, isSource) {
+    const keyField = isSource ? this.sourceKey : this.targetKey;
+    if (keyField && item[keyField] != null) {
+      return String(item[keyField]);
+    }
+    if (item["id"] != null) return String(item["id"]);
+    if (item["key"] != null) return String(item["key"]);
+    if (item["label"] != null) return String(item["label"]);
+    if (item["name"] != null) return String(item["name"]);
+    if (item["value"] != null) return String(item["value"]);
+    return String(index);
+  }
+  _getItemLabel(item) {
+    const fields = ["label", "name", "title", "text", "value"];
+    for (const field of fields) {
+      if (item[field] != null) {
+        return String(item[field]);
+      }
+    }
+    return JSON.stringify(item);
+  }
+  _isSourceSelected(item, index) {
+    return this._sourceSelection.some((s) => this._getItemKey(s, -1, true) === this._getItemKey(item, index, true));
+  }
+  _isTargetSelected(item, index) {
+    return this._targetSelection.some((s) => this._getItemKey(s, -1, false) === this._getItemKey(item, index, false));
+  }
+  _emitMoveToTarget() {
+    this.dispatchEvent(new CustomEvent("move-to-target", {
+      bubbles: true,
+      composed: true,
+      detail: { items: [...this._sourceSelection], source: [...this._source], target: [...this._target] }
+    }));
+  }
+  _emitMoveToSource() {
+    this.dispatchEvent(new CustomEvent("move-to-source", {
+      bubbles: true,
+      composed: true,
+      detail: { items: [...this._targetSelection], source: [...this._source], target: [...this._target] }
+    }));
+  }
+  _emitSelectionChangeSource() {
+    this.dispatchEvent(new CustomEvent("selection-change-source", {
+      bubbles: true,
+      composed: true,
+      detail: { selection: [...this._sourceSelection] }
+    }));
+  }
+  _emitSelectionChangeTarget() {
+    this.dispatchEvent(new CustomEvent("selection-change-target", {
+      bubbles: true,
+      composed: true,
+      detail: { selection: [...this._targetSelection] }
+    }));
+  }
+  render() {
+    const dSrc = this._getDisplaySource();
+    const dTgt = this._getDisplayTarget();
+    const hasSel = this.selectionMode;
+    const showAll = hasSel === "multiple" && this.showSelectAll;
+    const srcItems = dSrc.length === 0 ? `<li class="empty-message">${this.filter ? "Nenhum resultado" : "Nenhum item"}</li>` : dSrc.map((item, i) => `<li class="list-item${this._isSourceSelected(item, i) ? " selected" : ""}" data-index="${i}" data-list="source" tabindex="0">${hasSel ? '<input type="checkbox" class="checkbox"' + (this._isSourceSelected(item, i) ? " checked" : "") + " />" : ""}<span class="item-content">${this._optionTemplate ? this._optionTemplate(item) : esc(this._getItemLabel(item))}</span></li>`).join("");
+    const tgtItems = dTgt.length === 0 ? `<li class="empty-message">${this.filter ? "Nenhum resultado" : "Nenhum selecionado"}</li>` : dTgt.map((item, i) => `<li class="list-item${this._isTargetSelected(item, i) ? " selected" : ""}" data-index="${i}" data-list="target" tabindex="0">${hasSel ? '<input type="checkbox" class="checkbox"' + (this._isTargetSelected(item, i) ? " checked" : "") + " />" : ""}<span class="item-content">${this._optionTemplate ? this._optionTemplate(item) : esc(this._getItemLabel(item))}</span></li>`).join("");
+    const srcAllBar = showAll ? `<div class="select-all-bar" part="select-all-bar"><label><input type="checkbox" class="select-all-checkbox" data-list="source" ${this._sourceSelection.length > 0 && this._sourceSelection.length === this._source.length ? "checked" : ""} aria-label="Selecionar todos da origem" /> Selecionar Todos</label><span class="selection-count">${this._sourceSelection.length} selecionado(s)</span></div>` : "";
+    const tgtAllBar = showAll ? `<div class="select-all-bar" part="select-all-bar"><label><input type="checkbox" class="select-all-checkbox" data-list="target" ${this._targetSelection.length > 0 && this._targetSelection.length === this._target.length ? "checked" : ""} aria-label="Selecionar todos do destino" /> Selecionar Todos</label><span class="selection-count">${this._targetSelection.length} selecionado(s)</span></div>` : "";
+    this.setTemplate(`<div class="container"><div class="list-container"><div class="list-label">${esc(this.sourceLabel)} (${this._source.length})</div>${this.filter ? '<div class="filter-wrapper"><input type="text" class="filter-input source-filter" placeholder="' + this.filterPlaceholder + '" value="' + esc(this._sourceFilterValue) + '" /></div>' : ""}${srcAllBar}<div class="list-wrapper"><ul class="list source-list" role="listbox" tabindex="0">${srcItems}</ul></div></div><div class="controls"><div class="control-group"><button class="control-btn" data-action="move-all-target" part="control-btn" aria-label="Mover todos para destino"><span class="control-btn-icon">»</span></button><button class="control-btn" data-action="move-target" part="control-btn" aria-label="Mover para destino"><span class="control-btn-icon">→</span></button></div><div class="control-group"><button class="control-btn" data-action="move-source" part="control-btn" aria-label="Mover para origem"><span class="control-btn-icon">←</span></button><button class="control-btn" data-action="move-all-source" part="control-btn" aria-label="Mover todos para origem"><span class="control-btn-icon">«</span></button></div></div><div class="list-container"><div class="list-label">${esc(this.targetLabel)} (${this._target.length})</div>${this.filter ? '<div class="filter-wrapper"><input type="text" class="filter-input target-filter" placeholder="' + this.filterPlaceholder + '" value="' + esc(this._targetFilterValue) + '" /></div>' : ""}${tgtAllBar}<div class="list-wrapper"><ul class="list target-list" role="listbox" tabindex="0">${tgtItems}</ul></div></div></div>`);
+    this._attachListeners();
+  }
+  _attachListeners() {
+    if (!this._filterListenersAttached) {
+      this._filterListenersAttached = true;
+      this.root.addEventListener("input", (e) => {
+        const t = e.target;
+        if (t.classList.contains("select-all-checkbox")) {
+          this._handleSelectAll(t);
+          return;
+        }
+        if (t.classList.contains("source-filter")) {
+          this.sourceFilterValue = t.value;
+        } else if (t.classList.contains("target-filter")) {
+          this.targetFilterValue = t.value;
+        }
+      });
+      this.root.addEventListener("click", (e) => {
+        const t = e.target;
+        const btn = t.closest(".control-btn");
+        if (btn) {
+          switch (btn.dataset.action) {
+            case "move-target":
+              this._moveToTarget();
+              break;
+            case "move-all-target":
+              this._moveAllToTarget();
+              break;
+            case "move-source":
+              this._moveToSource();
+              break;
+            case "move-all-source":
+              this._moveAllToSource();
+              break;
+          }
+          return;
+        }
+        const el = t.closest(".list-item");
+        if (!el) return;
+        const isSrc = el.dataset.list === "source";
+        const idx = Number(el.dataset.index);
+        const item = (isSrc ? this._getDisplaySource() : this._getDisplayTarget())[idx];
+        if (isSrc) this._toggleSourceSelection(item, idx);
+        else this._toggleTargetSelection(item, idx);
+      });
+    }
+    this._updateControlsState();
+  }
+  _handleSelectAll(checkbox) {
+    const isSrc = checkbox.dataset.list === "source";
+    if (isSrc) {
+      this._sourceSelection = checkbox.checked ? [...this._getDisplaySource()] : [];
+      this._emitSelectionChangeSource();
+    } else {
+      this._targetSelection = checkbox.checked ? [...this._getDisplayTarget()] : [];
+      this._emitSelectionChangeTarget();
+    }
+    this._updateSelectionDisplay();
+    this._updateControlsState();
+  }
+  /**
+   * Atualiza a selecao visual in-place (classes e checkboxes dos itens existentes),
+   * sem recriar o DOM — mantendo referencias de elementos validas durante cliques.
+   */
+  _updateSelectionDisplay() {
+    const updateList = (listSel, isSelFn, getData) => {
+      if (!listSel) return;
+      listSel.querySelectorAll(".list-item").forEach((el) => {
+        const idx = Number(el.dataset.index);
+        const selected = isSelFn(getData()[idx], idx);
+        el.classList.toggle("selected", selected);
+        el.setAttribute("aria-selected", String(selected));
+        const cb = el.querySelector(".checkbox");
+        if (cb) cb.checked = selected;
+      });
+    };
+    updateList(this.root.querySelector(".source-list"), (it, i) => this._isSourceSelected(it, i), () => this._getDisplaySource());
+    updateList(this.root.querySelector(".target-list"), (it, i) => this._isTargetSelected(it, i), () => this._getDisplayTarget());
+    this._updateSelectAllBars();
+  }
+  /** Sincroniza as barras "Selecionar Todos" (checkbox + contador) sem re-render completo. */
+  _updateSelectAllBars() {
+    if (!(this.selectionMode === "multiple" && this.showSelectAll)) return;
+    const bars = [
+      { el: this.root.querySelector('.select-all-checkbox[data-list="source"]'), total: this._source.length, sel: this._sourceSelection.length },
+      { el: this.root.querySelector('.select-all-checkbox[data-list="target"]'), total: this._target.length, sel: this._targetSelection.length }
+    ];
+    bars.forEach(({ el, total, sel }) => {
+      if (!el) return;
+      el.checked = total > 0 && sel === total;
+      const count = el.closest(".select-all-bar")?.querySelector(".selection-count");
+      if (count) count.textContent = `${sel} selecionado(s)`;
+    });
+  }
+  _updateControlsState() {
+    this.root.querySelectorAll(".control-btn").forEach((btn) => {
+      const a = btn.dataset.action;
+      btn.disabled = a === "move-target" && this._sourceSelection.length === 0 || a === "move-all-target" && this._source.length === 0 || a === "move-source" && this._targetSelection.length === 0 || a === "move-all-source" && this._target.length === 0;
+    });
+  }
+  _moveToTarget() {
+    if (!this._sourceSelection.length) return;
+    const items = [...this._sourceSelection];
+    this._source = this._source.filter((s) => !items.some((i) => this._getItemKey(i, -1, true) === this._getItemKey(s, -1, true)));
+    this._target = [...this._target, ...items];
+    this._sourceSelection = [];
+    this._filteredSource = null;
+    this._filteredTarget = null;
+    this._updateListDisplay();
+    this._updateControlsState();
+    this._emitMoveToTarget();
+  }
+  _moveToSource() {
+    if (!this._targetSelection.length) return;
+    const items = [...this._targetSelection];
+    this._target = this._target.filter((t) => !items.some((i) => this._getItemKey(i, -1, false) === this._getItemKey(t, -1, false)));
+    this._source = [...this._source, ...items];
+    this._targetSelection = [];
+    this._filteredSource = null;
+    this._filteredTarget = null;
+    this._updateListDisplay();
+    this._updateControlsState();
+    this._emitMoveToSource();
+  }
+  _moveAllToTarget() {
+    const items = [...this._source];
+    this._source = [];
+    this._target = [...this._target, ...items];
+    this._sourceSelection = [];
+    this._filteredSource = null;
+    this._filteredTarget = null;
+    this._updateListDisplay();
+    this._updateControlsState();
+    this._emitMoveToTarget();
+  }
+  _moveAllToSource() {
+    const items = [...this._target];
+    this._target = [];
+    this._source = [...this._source, ...items];
+    this._targetSelection = [];
+    this._filteredSource = null;
+    this._filteredTarget = null;
+    this._updateListDisplay();
+    this._updateControlsState();
+    this._emitMoveToSource();
+  }
+  _toggleSourceSelection(item, index) {
+    const mode = this.selectionMode || "single";
+    const key2 = this._getItemKey(item, index, true);
+    const idx = this._sourceSelection.findIndex((s) => this._getItemKey(s, -1, true) === key2);
+    if (idx >= 0) {
+      this._sourceSelection.splice(idx, 1);
+    } else if (mode === "multiple") {
+      this._sourceSelection.push(item);
+    } else {
+      this._sourceSelection = [item];
+    }
+    this._emitSelectionChangeSource();
+    this._updateSelectionDisplay();
+    this._updateControlsState();
+  }
+  _toggleTargetSelection(item, index) {
+    const mode = this.selectionMode || "single";
+    const key2 = this._getItemKey(item, index, false);
+    const idx = this._targetSelection.findIndex((s) => this._getItemKey(s, -1, false) === key2);
+    if (idx >= 0) {
+      this._targetSelection.splice(idx, 1);
+    } else if (mode === "multiple") {
+      this._targetSelection.push(item);
+    } else {
+      this._targetSelection = [item];
+    }
+    this._emitSelectionChangeTarget();
+    this._updateSelectionDisplay();
+    this._updateControlsState();
+  }
+  _updateListDisplay() {
+    const srcWrapper = this.root.querySelector(".source-list")?.parentElement;
+    const tgtWrapper = this.root.querySelector(".target-list")?.parentElement;
+    const srcLabel = this.root.querySelector(".list-container:first-of-type .list-label");
+    const tgtLabel = this.root.querySelector(".list-container:last-of-type .list-label");
+    if (!srcWrapper || !tgtWrapper) {
+      this.render();
+      return;
+    }
+    const dSrc = this._getDisplaySource();
+    const dTgt = this._getDisplayTarget();
+    const hasSel = this.selectionMode;
+    const srcItems = dSrc.length === 0 ? `<li class="empty-message" part="empty-message">${this.filter ? "Nenhum resultado" : "Nenhum item"}</li>` : dSrc.map((item, i) => `<li class="list-item${this._isSourceSelected(item, i) ? " selected" : ""}" part="list-item" data-index="${i}" data-list="source" role="option" aria-selected="${this._isSourceSelected(item, i)}" tabindex="0">${hasSel ? '<input type="checkbox" class="checkbox" part="checkbox"' + (this._isSourceSelected(item, i) ? " checked" : "") + " />" : ""}<span class="item-content" part="item-content">${this._optionTemplate ? this._optionTemplate(item) : esc(this._getItemLabel(item))}</span></li>`).join("");
+    const tgtItems = dTgt.length === 0 ? `<li class="empty-message" part="empty-message">${this.filter ? "Nenhum resultado" : "Nenhum selecionado"}</li>` : dTgt.map((item, i) => `<li class="list-item${this._isTargetSelected(item, i) ? " selected" : ""}" part="list-item" data-index="${i}" data-list="target" role="option" aria-selected="${this._isTargetSelected(item, i)}" tabindex="0">${hasSel ? '<input type="checkbox" class="checkbox" part="checkbox"' + (this._isTargetSelected(item, i) ? " checked" : "") + " />" : ""}<span class="item-content" part="item-content">${this._optionTemplate ? this._optionTemplate(item) : esc(this._getItemLabel(item))}</span></li>`).join("");
+    srcWrapper.innerHTML = `<ul class="list source-list" role="listbox" tabindex="0">${srcItems}</ul>`;
+    tgtWrapper.innerHTML = `<ul class="list target-list" role="listbox" tabindex="0">${tgtItems}</ul>`;
+    if (srcLabel) srcLabel.textContent = `${this.sourceLabel} (${this._source.length})`;
+    if (tgtLabel) tgtLabel.textContent = `${this.targetLabel} (${this._target.length})`;
+    this._updateSelectAllBars();
+    this._attachListeners();
+  }
+};
+_FxPickList.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      --picklist-primary: var(--fx-color-primary, #3b82f6);
+      --picklist-border: var(--fx-border-default, #e2e8f0);
+      --picklist-bg: var(--fx-surface-background, #ffffff);
+      --picklist-bg-hover: var(--fx-surface-surface-hover, #f1f5f9);
+      --picklist-text: var(--fx-text-default, #1e293b);
+      --picklist-text-muted: var(--fx-text-muted, #64748b);
+      --picklist-radius: var(--fx-radius-md, 8px);
+      --picklist-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      --picklist-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    * { box-sizing: border-box; }
+    .container {
+      display: flex;
+      gap: var(--fx-space-sm, 8px);
+      align-items: stretch;
+    }
+    .list-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: var(--fx-space-sm, 8px);
+      min-width: 0;
+    }
+    .list-label {
+      font-weight: 600;
+      color: var(--picklist-text);
+      font-size: calc(var(--fx-font-size) - 1px);
+    }
+    .select-all-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px);
+      background: linear-gradient(135deg, var(--picklist-bg), var(--picklist-bg-hover));
+      border: 1px solid var(--picklist-border);
+      border-radius: var(--picklist-radius);
+      font-size: 0.9em;
+      font-weight: 500;
+    }
+    .select-all-bar label {
+      display: flex;
+      align-items: center;
+      gap: var(--fx-space-sm, 10px);
+      cursor: pointer;
+      user-select: none;
+      color: var(--picklist-text);
+    }
+    .select-all-bar input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      accent-color: var(--picklist-primary);
+      cursor: pointer;
+    }
+    .selection-count {
+      font-size: 0.85em;
+      color: var(--picklist-primary);
+      background: color-mix(in srgb, var(--picklist-primary) 12%, transparent);
+      padding: 4px 12px;
+      border-radius: 20px;
+      font-weight: 600;
+    }
+    .controls {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      justify-content: center;
+      padding: var(--fx-space-xs, 6px);
+      background: var(--picklist-bg);
+      border: 1px solid var(--picklist-border);
+      border-radius: var(--picklist-radius);
+      box-shadow: var(--picklist-shadow);
+      height: fit-content;
+      position: sticky;
+      top: 0;
+      align-self: center;
+    }
+    .control-group {
+      display: flex;
+      flex-direction: column;
+      gap: 3px;
+    }
+    .control-group + .control-group {
+      margin-top: 4px;
+      padding-top: 6px;
+      border-top: 1px solid var(--picklist-border);
+    }
+    .list-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: var(--fx-space-sm, 8px);
+    }
+    .filter-wrapper {
+      margin-bottom: var(--fx-space-xs, 4px);
+    }
+    .filter-input {
+      width: 100%;
+      box-sizing: border-box;
+      padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px);
+      padding-left: 42px;
+      border: 1.5px solid var(--picklist-border);
+      border-radius: var(--picklist-radius);
+      font-family: inherit;
+      font-size: inherit;
+      color: var(--picklist-text);
+      background: var(--picklist-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 14px center;
+      transition: var(--picklist-transition);
+    }
+    .filter-input:focus {
+      outline: none;
+      border-color: var(--picklist-primary);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--picklist-primary) 20%, transparent);
+    }
+    .filter-input::placeholder {
+      color: var(--picklist-text-muted);
+    }
+    .list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      border: 1px solid var(--picklist-border);
+      border-radius: var(--picklist-radius);
+      overflow: hidden;
+      box-shadow: var(--picklist-shadow);
+      min-height: 200px;
+      max-height: 450px;
+      overflow-y: auto;
+      flex: 1;
+    }
+    .list::-webkit-scrollbar { width: 6px; }
+    .list::-webkit-scrollbar-track { background: transparent; }
+    .list::-webkit-scrollbar-thumb { background: var(--picklist-border); border-radius: 3px; }
+    .list::-webkit-scrollbar-thumb:hover { background: var(--picklist-text-muted); }
+    :host([striped]) .list-item:nth-child(even) {
+      background: var(--fx-surface-surface, #f8fafc);
+    }
+    .list-item {
+      display: flex;
+      align-items: center;
+      gap: var(--fx-space-sm, 10px);
+      padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px);
+      background: var(--picklist-bg);
+      border-bottom: 1px solid var(--picklist-border);
+      cursor: pointer;
+      user-select: none;
+      transition: var(--picklist-transition);
+    }
+    .list-item:last-child { border-bottom: none; }
+    .list-item:hover { background: var(--picklist-bg-hover); }
+    .list-item.selected {
+      background: color-mix(in srgb, var(--picklist-primary) 8%, transparent);
+      border-left: 3px solid var(--picklist-primary);
+      padding-left: 11px;
+    }
+    .list-item:focus-visible {
+      outline: none;
+      background: color-mix(in srgb, var(--picklist-primary) 15%, transparent);
+    }
+    .checkbox {
+      flex-shrink: 0;
+      width: 18px;
+      height: 18px;
+      accent-color: var(--picklist-primary);
+      cursor: pointer;
+      transition: var(--picklist-transition);
+    }
+    .checkbox:hover { transform: scale(1.1); }
+    .item-content {
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .empty-message {
+      padding: var(--fx-space-xl, 32px);
+      text-align: center;
+      color: var(--picklist-text-muted);
+      font-style: italic;
+    }
+    button.control-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 42px;
+      height: 38px;
+      padding: 0;
+      border: none;
+      border-radius: 8px;
+      background: transparent;
+      color: var(--picklist-text-muted);
+      cursor: pointer;
+      font-size: 16px;
+      line-height: 1;
+      transition: var(--picklist-transition);
+      position: relative;
+    }
+    button.control-btn:hover:not(:disabled) {
+      background: var(--picklist-bg-hover);
+      color: var(--picklist-primary);
+      transform: scale(1.1);
+    }
+    button.control-btn:active:not(:disabled) {
+      transform: scale(0.92);
+      background: color-mix(in srgb, var(--picklist-primary) 15%, transparent);
+    }
+    button.control-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--picklist-primary) 30%, transparent);
+    }
+    button.control-btn:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+      transform: none;
+    }
+    .control-btn-icon { font-size: 18px; line-height: 1; }
+
+    button.control-btn:hover::after {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+    @media (max-width: 640px) {
+      .container { flex-direction: column; }
+      .controls {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: center;
+        position: relative;
+      }
+      .control-group { flex-direction: row; }
+      .control-group + .control-group {
+        margin-top: 0;
+        margin-left: 4px;
+        padding-top: 0;
+        padding-left: 4px;
+        border-top: none;
+        border-left: 1px solid var(--picklist-border);
+      }
+      button.control-btn { width: 44px; height: 40px; }
+      button.control-btn::after { display: none; }
+      .list { max-height: 300px; min-height: 150px; }
+    }
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateX(-10px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    .list-item { animation: slideIn 0.2s ease-out; }
+  `;
+let FxPickList = _FxPickList;
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function defineFxPickList() {
+  return defineElement("fx-picklist", FxPickList);
+}
+defineFxPickList();
+const _FxAccordionPanel = class _FxAccordionPanel extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._mo = null;
+  }
+  static get observedAttributes() {
+    return ["header", "expanded", "disabled"];
+  }
+  get header() {
+    return this.getAttr("header", "");
+  }
+  set header(v) {
+    this.setAttribute("header", v);
+  }
+  get value() {
+    return this.getAttr("value", "");
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+  get expanded() {
+    return this.hasAttr("expanded");
+  }
+  set expanded(v) {
+    this.toggleAttr("expanded", v);
+  }
+  get disabled() {
+    return this.hasAttr("disabled");
+  }
+  set disabled(v) {
+    this.toggleAttr("disabled", v);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", (e) => {
+      const path = e.composedPath();
+      if (!path.some((el) => el.classList?.contains("header"))) return;
+      if (this.disabled) return;
+      this.dispatchEvent(
+        new CustomEvent("fx-accordion-toggle", {
+          bubbles: true,
+          composed: true,
+          detail: { panel: this }
+        })
+      );
+    });
+    this._mo = new MutationObserver(() => this.render());
+    this._mo.observe(this, { attributes: true, attributeFilter: ["expanded", "header", "disabled"] });
+  }
+  disconnectedCallback() {
+    this._mo?.disconnect();
+    this._mo = null;
+  }
+  render() {
+    this.setTemplate(`
+      <button type="button" class="header" part="header" role="button"
+        aria-expanded="${this.expanded}"
+        ${this.disabled ? 'aria-disabled="true"' : ""}>
+        <span class="header-text" part="header-text">
+          <slot name="header">${this.header}</slot>
+        </span>
+        <span class="chevron" part="chevron" aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </span>
+      </button>
+      <div class="content" part="content" role="region">
+        <div class="content-inner">
+          <div class="content-pad" part="content-pad"><slot></slot></div>
+        </div>
+      </div>
+    `);
+  }
+};
+_FxAccordionPanel.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      color: var(--fx-text-default);
+      border-bottom: 1px solid var(--fx-border-default);
+    }
+    :host(:last-child) { border-bottom: none; }
+    :host([disabled]) { opacity: 0.6; pointer-events: none; }
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--fx-space-md);
+      width: 100%;
+      box-sizing: border-box;
+      padding: var(--fx-space-lg, 20px) var(--fx-space-md, 14px);
+      border: none;
+      background: transparent;
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: 500;
+      color: var(--fx-text-muted);
+      text-align: left;
+      cursor: pointer;
+      transition: color var(--fx-motion-duration-fast, 150ms) var(--fx-motion-easing, ease),
+        background var(--fx-motion-duration-fast, 150ms) var(--fx-motion-easing, ease);
+    }
+    .header:hover { color: var(--fx-text-default); }
+    .header:focus-visible {
+      outline: none;
+      box-shadow: var(--fx-effect-focus-ring, none);
+      border-radius: var(--fx-radius-sm, 4px);
+    }
+    :host([expanded]) .header {
+      color: var(--fx-text-default);
+      font-weight: 700;
+    }
+    .header-text { flex: 1; min-width: 0; }
+    .chevron {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      color: var(--fx-text-muted);
+      transition: transform var(--fx-motion-duration-normal, 250ms) var(--fx-motion-easing, ease);
+    }
+    :host([expanded]) .chevron { transform: rotate(180deg); color: var(--fx-color-primary); }
+    .content {
+      display: grid;
+      grid-template-rows: 0fr;
+      transition: grid-template-rows var(--fx-motion-duration-normal, 250ms) var(--fx-motion-easing, ease);
+    }
+    :host([expanded]) .content { grid-template-rows: 1fr; }
+    .content-inner { overflow: hidden; }
+    .content-pad {
+      padding: 0 var(--fx-space-md, 14px) var(--fx-space-lg, 20px);
+      color: var(--fx-text-muted);
+      line-height: 1.6;
+    }
+  `;
+let FxAccordionPanel = _FxAccordionPanel;
+const _FxAccordion = class _FxAccordion extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._observer = null;
+    this._initialized = false;
+    this._listenersAttached = false;
+  }
+  static get observedAttributes() {
+    return ["value", "multiple"];
+  }
+  get multiple() {
+    return this.hasAttr("multiple");
+  }
+  set multiple(v) {
+    this.toggleAttr("multiple", v);
+  }
+  /** Valores ativos como array. */
+  get values() {
+    return this.getAttr("value", "").split(",").map((s) => s.trim()).filter(Boolean);
+  }
+  set values(v) {
+    this.setAttribute("value", v.join(","));
+  }
+  connectedCallback() {
+    this._observer = new MutationObserver(() => this._sync());
+    this._observer.observe(this, { childList: true, subtree: true });
+    super.connectedCallback();
+    queueMicrotask(() => this._sync());
+  }
+  disconnectedCallback() {
+    this._observer?.disconnect();
+    this._observer = null;
+  }
+  render() {
+    this.setTemplate(`
+      <div class="accordion" part="accordion">
+        <slot></slot>
+      </div>
+    `);
+    this._sync();
+    this._attachListeners();
+  }
+  /** Painéis do accordion (filhos diretos ou descendentes). */
+  get panels() {
+    return Array.from(this.querySelectorAll("fx-accordion-panel"));
+  }
+  _sync() {
+    const actives = this.values;
+    const panels = Array.from(this.querySelectorAll("fx-accordion-panel"));
+    if (!this._initialized && actives.length === 0 && panels.length > 0) {
+      this._initialized = true;
+      const first = panels.find((p) => !p.hasAttribute("disabled"));
+      if (first) {
+        this.values = [first.getAttribute("value") || "0"];
+        return;
+      }
+    }
+    this._initialized = true;
+    panels.forEach((p, i) => {
+      const v = p.getAttribute("value") || String(i);
+      if (!p.hasAttribute("value")) p.setAttribute("value", v);
+      p.toggleAttribute("expanded", actives.includes(v));
+    });
+  }
+  _attachListeners() {
+    if (this._listenersAttached) return;
+    this._listenersAttached = true;
+    this.addEventListener("fx-accordion-toggle", (e) => {
+      const panel = e.detail?.panel;
+      if (!panel || panel.disabled) return;
+      this.toggle(panel);
+    });
+  }
+  /** Abre/fecha um painel respeitando o modo (single | multiple). */
+  toggle(panel) {
+    const v = panel.value;
+    let actives = this.values;
+    if (panel.expanded) {
+      actives = actives.filter((a) => a !== v);
+    } else if (this.multiple) {
+      actives = [...actives, v];
+    } else {
+      actives = [v];
+    }
+    this.values = actives;
+    this._sync();
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        composed: true,
+        detail: { value: actives }
+      })
+    );
+  }
+  /** Abre um painel pelo valor. */
+  open(value) {
+    const panel = this.panels.find((p, i) => (p.value || String(i)) === value);
+    if (panel && !panel.expanded) this.toggle(panel);
+  }
+  /** Fecha um painel pelo valor. */
+  close(value) {
+    const panel = this.panels.find((p, i) => (p.value || String(i)) === value);
+    if (panel && panel.expanded) this.toggle(panel);
+  }
+};
+_FxAccordion.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    .accordion {
+      background: var(--fx-surface-background, #ffffff);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-md, 8px);
+      overflow: hidden;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+    }
+  `;
+let FxAccordion = _FxAccordion;
+function defineFxAccordion() {
+  return defineElement("fx-accordion", FxAccordion);
+}
+function defineFxAccordionPanel() {
+  return defineElement("fx-accordion-panel", FxAccordionPanel);
+}
+defineFxAccordion();
+defineFxAccordionPanel();
 export {
   FX_JSX_TYPES,
   FenixToast,
   FenixUI,
+  FxAccordion,
+  FxAccordionPanel,
   FxAlert,
   FxAutocomplete,
   FxBadge,
@@ -4437,8 +6851,11 @@ export {
   FxElement,
   FxFloatlabel,
   FxInput,
+  FxKnob,
   FxMultiselect,
+  FxOrderList,
   FxPagination,
+  FxPickList,
   FxProgress,
   FxRadio,
   FxSelect,
@@ -4461,6 +6878,8 @@ export {
   defaultTokens,
   defineCustomPreset,
   defineElement,
+  defineFxTooltipDirective,
+  destroyFxTooltipDirective,
   kebabToCamel,
   lightTokens,
   listPresets,