@wrrdev/fenix-ui 1.1.10 → 1.1.12

package/dist/fenix-ui4.esm.js

@@ -5,8 +5,8 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _FxToast_instances, syncProgress_fn, render_fn;
-import { a as FENIX_ICON_BASE_CSS, f as fenixIconHtml, e as esc, l as loadFenixIconsFont, i as isFenixIconName } from "./assets/font-CF0TXsAP.js";
-import { s, g } from "./assets/font-CF0TXsAP.js";
+import { a as FENIX_ICON_BASE_CSS, f as fenixIconHtml, g as esc, l as loadFenixIconsFont, i as isFenixIconName } from "./assets/font-DPeWTz-n.js";
+import { h, j } from "./assets/font-DPeWTz-n.js";
 const lightTokens = {
   color: {
     primary: "#c2410c",
@@ -353,8 +353,8 @@ const _FxButton = class _FxButton extends FxElement {
   }
   /** Tamanho. Padrão: `'md'`. */
   get size() {
-    const s2 = this.getAttr("size", "md");
-    return s2 === "sm" || s2 === "lg" ? s2 : "md";
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -582,8 +582,8 @@ const _FxSpinner = class _FxSpinner extends FxElement {
   }
   /** Tamanho do spinner. Padrão: `'md'`. */
   get size() {
-    const s2 = this.getAttr("size", "md");
-    return s2 === "sm" || s2 === "lg" ? s2 : "md";
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -627,8 +627,8 @@ const _FxSelect = class _FxSelect extends FxElement {
   }
   /** Tamanho do campo. Padrão: `'md'`. */
   get size() {
-    const s2 = this.getAttr("size", "md");
-    return s2 === "sm" || s2 === "lg" ? s2 : "md";
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -971,8 +971,8 @@ const _FxInput = class _FxInput extends FxElement {
   }
   /** Tamanho do campo. Padrão: `'md'`. */
   get size() {
-    const s2 = this.getAttr("size", "md");
-    return s2 === "sm" || s2 === "lg" ? s2 : "md";
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -1195,8 +1195,8 @@ const _FxSwitch = class _FxSwitch extends FxElement {
   }
   /** Tamanho da trilha. Padrão: `'md'`. */
   get size() {
-    const s2 = this.getAttr("size", "md");
-    return s2 === "sm" || s2 === "lg" ? s2 : "md";
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -1838,13 +1838,13 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       this.values.map((iso) => parseBound(iso)?.lo ?? 0).filter(Boolean)
     );
     if (this.mode === "range") {
-      let s2 = this.pickStart;
+      let s = this.pickStart;
       let e = this.pickEnd;
       const attrS = parseBound(this.getAttr("start", ""));
       const attrE = parseBound(this.getAttr("end", ""));
-      if (s2 === null && attrS) s2 = attrS.lo;
+      if (s === null && attrS) s = attrS.lo;
       if (e === null && attrE) e = attrE.lo;
-      return { start: s2, end: e, single: null, multi };
+      return { start: s, end: e, single: null, multi };
     }
     if (this.mode === "multiple") {
       return { start: null, end: null, single: null, multi };
@@ -2220,15 +2220,15 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
   /** Texto exibido no input conforme o modo. */
   displayText() {
     if (this.mode === "range") {
-      const s2 = this.getAttr("start");
+      const s = this.getAttr("start");
       const e = this.getAttr("end");
       this.hasAttr("show-time") ? " " : " → ";
-      if (!s2 && !e) return "";
+      if (!s && !e) return "";
       if (this.hasAttr("show-time")) {
         const f = (iso) => iso ? `${this.formatDate(iso)} ${this.timeText()}` : iso ? `${this.formatDate(iso)} …` : "";
-        return s2 && e ? `${f(s2)} → ${f(e)}` : f(s2);
+        return s && e ? `${f(s)} → ${f(e)}` : f(s);
       }
-      return s2 && e ? `${this.formatDate(s2)} → ${this.formatDate(e)}` : s2 ? `${this.formatDate(s2)} → …` : "";
+      return s && e ? `${this.formatDate(s)} → ${this.formatDate(e)}` : s ? `${this.formatDate(s)} → …` : "";
     }
     if (this.mode === "multiple") {
       return this.values.map((v) => this.formatDate(v)).join(", ");
@@ -2246,8 +2246,8 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
     const src = this.value || this.getAttr("start") || "";
     const t = src.split("T")[1];
     if (!t) return;
-    const [h, m, s2] = t.split(":").map((n) => parseInt(n, 10));
-    this.time = { h: h || 0, m: m || 0, s: s2 || 0 };
+    const [h2, m, s] = t.split(":").map((n) => parseInt(n, 10));
+    this.time = { h: h2 || 0, m: m || 0, s: s || 0 };
   }
   /** Anexa o horário interno ao ISO puro vindo do calendário. */
   withTime(iso) {
@@ -2353,14 +2353,14 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
     }
     if (showTime) {
       const applyTime = () => {
-        const h = this.root.querySelector(".t-h");
+        const h2 = this.root.querySelector(".t-h");
         const m = this.root.querySelector(".t-m");
-        const s2 = this.root.querySelector(".t-s");
+        const s = this.root.querySelector(".t-s");
         const clamp = (v, max) => Math.min(max, Math.max(0, parseInt(v ?? "0", 10) || 0));
         this.time = {
-          h: clamp(h?.value, 23),
+          h: clamp(h2?.value, 23),
           m: clamp(m?.value, 59),
-          s: clamp(s2?.value, 59)
+          s: clamp(s?.value, 59)
         };
         const reattach = (iso) => iso.split("T")[0] ? `${iso.split("T")[0]}T${this.timeText()}` : iso;
         if (this.value) this.setAttribute("value", reattach(this.value));
@@ -2626,8 +2626,8 @@ const _FxCheckbox = class _FxCheckbox extends FxElement {
   }
   /** Tamanho do controle. Padrão: `'md'`. */
   get size() {
-    const s2 = this.getAttr("size", "md");
-    return s2 === "sm" || s2 === "lg" ? s2 : "md";
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -2755,8 +2755,8 @@ const _FxRadio = class _FxRadio extends FxElement {
   }
   /** Tamanho do controle. Padrão: `'md'`. */
   get size() {
-    const s2 = this.getAttr("size", "md");
-    return s2 === "sm" || s2 === "lg" ? s2 : "md";
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -3294,6 +3294,7 @@ const _FxTable = class _FxTable extends FxElement {
     this.sortDir = 1;
     this.filters = {};
     this.globalSearch = "";
+    this._shellKey = "";
   }
   static get observedAttributes() {
     return [
@@ -3310,7 +3311,10 @@ const _FxTable = class _FxTable extends FxElement {
       "loading",
       "loading-message",
       "sort-field",
-      "sort-order"
+      "sort-order",
+      "rounded",
+      "radius",
+      "no-borders-x"
     ];
   }
   get data() {
@@ -3488,7 +3492,7 @@ const _FxTable = class _FxTable extends FxElement {
     if (!input) return [];
     const attr = input.getAttribute("data-search-fields");
     if (attr === null) return [];
-    return attr.split(",").map((s2) => s2.trim()).filter(Boolean);
+    return attr.split(",").map((s) => s.trim()).filter(Boolean);
   }
   cellHtml(col, row) {
     const template = col.template?.innerHTML ?? col.directTemplate;
@@ -3530,18 +3534,37 @@ const _FxTable = class _FxTable extends FxElement {
       </div>`;
     const loading = this.hasAttr("loading");
     const loadingHtml = loading ? `<div class="loading-overlay" part="loading-overlay"><div class="tbl-spinner" part="spinner"></div><span class="loading-text">${esc(this.getAttr("loading-message", "Carregando…"))}</span></div>` : "";
+    const shellKey = [
+      toolbarHtml,
+      headHtml,
+      filterRow,
+      pagerHtml,
+      loadingHtml,
+      cols.length
+    ].join("|");
+    if (shellKey === this._shellKey) {
+      const tbody = this.root.querySelector("tbody");
+      if (tbody) {
+        tbody.innerHTML = bodyHtml;
+        this._bindRowClicks(rows);
+        return;
+      }
+    }
+    this._shellKey = shellKey;
     this.setTemplate(`
       ${toolbarHtml}
-      <div class="table-wrap">
-        <div class="scroll">
-          <table part="table">
-            <thead><tr>${headHtml}</tr>${filterRow}</thead>
-            <tbody>${bodyHtml}</tbody>
-          </table>
+      <div class="frame${toolbar ? " has-toolbar" : ""}" part="frame">
+        <div class="table-wrap">
+          <div class="scroll">
+            <table part="table">
+              <thead><tr>${headHtml}</tr>${filterRow}</thead>
+              <tbody>${bodyHtml}</tbody>
+            </table>
+          </div>
+          ${loadingHtml}
         </div>
-        ${loadingHtml}
+        ${pagerHtml}
       </div>
-      ${pagerHtml}
     `);
     this.root.querySelectorAll("th.sortable").forEach((th) => {
       th.addEventListener("click", () => {
@@ -3633,6 +3656,16 @@ const _FxTable = class _FxTable extends FxElement {
       this.page = 0;
       this.render();
     });
+    this._bindRowClicks(rows);
+    this._restoreToolbarSearch();
+  }
+  /**
+   * Liga o clique das linhas ao evento `row-click`.
+   *
+   * Extraído do render para ser reaproveitado no caminho rápido (troca só do
+   * <tbody>): os <tr> são novos, então precisam ser rebound.
+   */
+  _bindRowClicks(rows) {
     this.root.querySelectorAll("tbody tr[data-index]").forEach((tr) => {
       tr.addEventListener("click", () => {
         this.dispatchEvent(
@@ -3647,7 +3680,6 @@ const _FxTable = class _FxTable extends FxElement {
         );
       });
     });
-    this._restoreToolbarSearch();
   }
   _restoreToolbarSearch() {
     const input = this.root.querySelector(
@@ -3664,14 +3696,61 @@ _FxTable.styles = css`
 			font-size: var(--fx-font-size);
 			color: var(--fx-text-default);
 			background: var(--fx-surface-background);
+			/* Raio da moldura (tabela + paginação). O atributo "rounded"
+			   sobrescreve este valor e o consumidor também pode sobrescrever
+			   por CSS: fx-table { --fx-table-radius: 20px; }. */
+			--fx-table-radius: var(--fx-radius-md);
+		}
+		/* Arredondamento das bordas — "none" deixa tudo reto, como nos demais
+		   tokens de radius do design system. "rounded" é o nome atual; "radius"
+		   segue aceito como alias para ficar consistente com o <fx-card>. */
+		:host([rounded="none"]),
+		:host([radius="none"]) {
+			--fx-table-radius: var(--fx-radius-none, 0);
+		}
+		:host([rounded="sm"]),
+		:host([radius="sm"]) {
+			--fx-table-radius: var(--fx-radius-sm);
+		}
+		:host([rounded="md"]),
+		:host([radius="md"]) {
+			--fx-table-radius: var(--fx-radius-md);
+		}
+		:host([rounded="lg"]),
+		:host([radius="lg"]) {
+			--fx-table-radius: var(--fx-radius-lg);
+		}
+		/* Moldura: uma única borda envolvendo a tabela E a paginação, para que
+		   o pager não fique "solto" fora do contorno da tabela. */
+		.frame {
+			border: 1px solid var(--fx-border-default);
+			border-radius: var(--fx-table-radius);
+			background: var(--fx-surface-background);
+		}
+		/* Com toolbar no topo, quem desenha a borda superior é a própria
+		   toolbar — a moldura desenha apenas o contorno restante. */
+		.frame.has-toolbar {
+			border-top: none;
+		}
+		/* "no-borders-x": mantém somente as bordas de topo e de base
+		   (tabela encaixada em um layout que já desenha as laterais). */
+		:host([no-borders-x]) .frame,
+		:host([no-borders-x]) .toolbar {
+			border-left: none;
+			border-right: none;
 		}
 		.table-wrap {
 			position: relative;
 		}
 		.scroll {
 			overflow-x: auto;
-			border: 1px solid var(--fx-border-default);
-			border-radius: var(--fx-radius-md);
+			/* O topo acompanha o raio da moldura; a base fica reta porque o
+			   rodapé (.pager) é quem a desenha. */
+			border-radius: var(--fx-table-radius) var(--fx-table-radius) 0 0;
+		}
+		/* Sem paginação não existe rodapé: a moldura fecha embaixo. */
+		:host(:not([pagination])) .scroll {
+			border-radius: var(--fx-table-radius);
 		}
 		table {
 			width: 100%;
@@ -3758,7 +3837,13 @@ _FxTable.styles = css`
 			align-items: center;
 			gap: var(--fx-space-sm);
 			flex-wrap: wrap;
-			padding: var(--fx-space-sm) 0;
+			/* O rodapé é parte da moldura: borda só no topo (separando da
+			   tabela) e o mesmo padding horizontal das células. Antes ele
+			   ficava fora do contorno, sem borda e sem respiro lateral. */
+			padding: var(--fx-space-sm) var(--fx-space-md);
+			border-top: 1px solid var(--fx-border-default);
+			border-radius: 0 0 var(--fx-table-radius) var(--fx-table-radius);
+			background: var(--fx-surface-background);
 		}
 		:host([pagination-position="center"]) .pager {
 			justify-content: center;
@@ -3807,15 +3892,27 @@ _FxTable.styles = css`
 			color: #fff;
 			font-weight: var(--fx-font-weight);
 		}
-		fx-select {
+		/* O seletor "Por página" só mostra números, então não pode herdar a
+		   largura padrão do <fx-select> (200px / 180px em size="sm"), que
+		   deixava o rodapé da paginação desproporcional. O limite tem que ser
+		   no HOST — apertar só ::part(trigger) não funciona, porque o
+		   trigger é width:100% e continua herdando o min-width do host.
+		   O painel (dropdown) continua largo (220px) em select.ts. */
+		fx-select.rows-sel {
 			vertical-align: middle;
+			/* Não deixa o flex do .pager esticar nem esmagar o controle. */
+			flex: none;
+			width: auto;
+			--fx-select-min-width: 56px;
+			--fx-select-min-width-sm: 56px;
 		}
-		fx-select::part(trigger) {
-			min-width: 64px !important;
-			min-height: var(--fx-size-sm) !important;
-			padding: 0 var(--fx-space-sm) !important;
-			border-radius: var(--fx-radius-sm) !important;
-			font-size: calc(var(--fx-font-size) - 2px) !important;
+		fx-select.rows-sel::part(trigger) {
+			min-width: 0;
+			min-height: var(--fx-size-sm);
+			/* Padding curto: sobra espaço para o número + caret. */
+			padding: 0 var(--fx-space-xs);
+			border-radius: var(--fx-radius-sm);
+			font-size: calc(var(--fx-font-size) - 2px);
 		}
 		.toolbar {
 			display: flex;
@@ -3825,7 +3922,7 @@ _FxTable.styles = css`
 			padding: var(--fx-space-sm) var(--fx-space-md);
 			border: 1px solid var(--fx-border-default);
 			border-bottom: none;
-			border-radius: var(--fx-radius-md) var(--fx-radius-md) 0 0;
+			border-radius: var(--fx-table-radius) var(--fx-table-radius) 0 0;
 			background: var(--fx-surface-background);
 		}
 		.toolbar:empty {
@@ -3846,7 +3943,7 @@ _FxTable.styles = css`
 			);
 			backdrop-filter: blur(2px);
 			z-index: 10;
-			border-radius: var(--fx-radius-md);
+			border-radius: var(--fx-table-radius) var(--fx-table-radius) 0 0;
 		}
 		.tbl-spinner {
 			width: 32px;
@@ -4202,8 +4299,8 @@ const _FxTextarea = class _FxTextarea extends FxElement {
     return ["size", "placeholder", "disabled", "readonly", "rows", "maxlength", "error", "invalid", "success", "valid"];
   }
   get size() {
-    const s2 = this.getAttr("size", "md");
-    return s2 === "sm" || s2 === "lg" ? s2 : "md";
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -4796,8 +4893,8 @@ const _FxFileUpload = class _FxFileUpload extends FxElement {
     return ["mode", "size", "severity", "label", "icon", "accept", "multiple", "disabled", "show-progress", "progress", "value", "full"];
   }
   get size() {
-    const s2 = this.getAttr("size", "md");
-    return s2 === "sm" || s2 === "lg" ? s2 : "md";
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -5721,26 +5818,36 @@ const _FxBreadcrumb = class _FxBreadcrumb extends FxElement {
       item.setAttribute("aria-current", isLast ? "page" : "false");
       nav.appendChild(item);
       if (isLast) return;
-      const s2 = document.createElement("span");
-      s2.className = "sep";
-      s2.setAttribute("part", "separator");
-      s2.setAttribute("aria-hidden", "true");
-      s2.textContent = sep;
-      nav.appendChild(s2);
+      const s = document.createElement("span");
+      s.className = "sep";
+      s.setAttribute("part", "separator");
+      s.setAttribute("aria-hidden", "true");
+      s.textContent = sep;
+      nav.appendChild(s);
     });
   }
   connectedCallback() {
     super.connectedCallback();
     const obs = new MutationObserver(() => {
       if (this.children.length > 0) {
-        obs.disconnect();
+        this._stopObservingChildren();
         this._decorateItems();
       }
     });
+    this._childObserver = obs;
     obs.observe(this, { childList: true });
-    if (this.children.length > 0) this._decorateItems();
+    if (this.children.length > 0) {
+      this._stopObservingChildren();
+      this._decorateItems();
+    }
+  }
+  /** Desconecta o observer de filhos (evita trabalho eterno após o connect). */
+  _stopObservingChildren() {
+    this._childObserver?.disconnect();
+    this._childObserver = void 0;
   }
   disconnectedCallback() {
+    this._stopObservingChildren();
     super.disconnectedCallback();
     this._items = [];
   }
@@ -6300,7 +6407,7 @@ const _FxMenu = class _FxMenu extends FxElement {
   }
   render() {
     const titleAttr = this.getAttr("titles");
-    const titles = titleAttr ? titleAttr.split(",").map((s2) => s2.trim()) : [];
+    const titles = titleAttr ? titleAttr.split(",").map((s) => s.trim()) : [];
     const items = this.items;
     const itemsHtml = items.map((it, i) => {
       const label = titles[i] || it.textContent?.trim() || `Item ${i + 1}`;
@@ -6432,7 +6539,7 @@ const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxElement {
   }
   get value() {
     const raw = this.getAttr("value");
-    return raw ? raw.split(",").map((s2) => s2.trim()).filter(Boolean) : [];
+    return raw ? raw.split(",").map((s) => s.trim()).filter(Boolean) : [];
   }
   set value(v) {
     this.setAttribute("value", v.join(","));
@@ -6863,7 +6970,7 @@ const _FxCarousel = class _FxCarousel extends FxElement {
   }
   render() {
     this._slides = Array.from(this.children).filter((el) => el.matches('[slot="slide"]'));
-    const contentsHtml = this._slides.map((s2, i) => `<div class="slide" part="slide" data-i="${i}" ${i === this.active ? "" : "hidden"}>${s2.innerHTML}</div>`).join("");
+    const contentsHtml = this._slides.map((s, i) => `<div class="slide" part="slide" data-i="${i}" ${i === this.active ? "" : "hidden"}>${s.innerHTML}</div>`).join("");
     this.setTemplate(`
       <div class="viewport" part="viewport">
         ${contentsHtml}
@@ -6897,8 +7004,8 @@ const _FxCarousel = class _FxCarousel extends FxElement {
     }
     if (String(target) === this.getAttribute("active")) return;
     this.active = target;
-    this.root.querySelectorAll(".slide").forEach((s2) => {
-      s2.toggleAttribute("hidden", Number(s2.dataset.i) !== target);
+    this.root.querySelectorAll(".slide").forEach((s) => {
+      s.toggleAttribute("hidden", Number(s.dataset.i) !== target);
     });
     this.root.querySelectorAll(".dot").forEach((d) => {
       d.classList.toggle("on", Number(d.dataset.i) === target);
@@ -7153,6 +7260,7 @@ function defineFxTree() {
   return defineElement("fx-tree", FxTree);
 }
 defineFxTree();
+const REMOVED_EVENT = "fx-toast:removed";
 const KIND_COLOR = {
   success: "var(--fx-color-success, #10b981)",
   error: "var(--fx-color-danger, #f43f5e)",
@@ -7343,9 +7451,18 @@ class FxToast extends HTMLElement {
     }
     __privateMethod(this, _FxToast_instances, syncProgress_fn).call(this);
   }
+  /**
+   * Limpa recursos ao sair do DOM e avisa a API imperativa (`FenixToast`).
+   *
+   * O aviso é essencial: `dismiss()` (timer ou botão de fechar) tira o
+   * elemento do DOM mas, sem isto, `ToastApi.map` continuaria segurando uma
+   * referência forte para cada toast já dispensado — crescimento de memória
+   * sem limite em uso prolongado.
+   */
   disconnectedCallback() {
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
+    this.dispatchEvent(new CustomEvent(REMOVED_EVENT, { bubbles: false, composed: false }));
   }
   attributeChangedCallback(name) {
     if (name === "duration" || name === "progress" || name === "progress-origin" || name === "kind") {
@@ -7467,6 +7584,9 @@ class ToastApi {
     if (o.progress) el.setAttribute("progress", o.progress);
     if (o.progressOrigin) el.setAttribute("progress-origin", o.progressOrigin);
     regionFor(o.position ?? "top-right").appendChild(el);
+    el.addEventListener(REMOVED_EVENT, () => {
+      if (this.map.get(id) === el) this.map.delete(id);
+    });
     this.map.set(id, el);
     return id;
   }
@@ -7651,6 +7771,8 @@ const _FxTooltipManager = class _FxTooltipManager {
     this.observer = null;
     this.behaviors = /* @__PURE__ */ new Map();
     this.injectedStyles = null;
+    this._pending = { added: [] };
+    this._flushScheduled = false;
     this.injectStyles();
     this.observe();
     this.processExistingElements();
@@ -7661,6 +7783,20 @@ const _FxTooltipManager = class _FxTooltipManager {
     }
     return _FxTooltipManager.instance;
   }
+  /** Quantos tooltips estão ativos agora (0 se a diretiva nunca foi iniciada). */
+  static peekActiveCount() {
+    return _FxTooltipManager.instance?.behaviors.size ?? 0;
+  }
+  /**
+   * Quantos tooltips estão ativamente gerenciados.
+   *
+   * Deve acompanhar o número de elementos `[fx-tooltip]` no documento: um
+   * valor crescente depois de trocar de tela significa comportamento retido
+   * (vazamento). Usado nos testes de regressão e no diagnóstico em produção.
+   */
+  get activeCount() {
+    return this.behaviors.size;
+  }
   injectStyles() {
     if (document.getElementById("fx-tooltip-directive-styles")) return;
     this.injectedStyles = document.createElement("style");
@@ -7670,32 +7806,55 @@ const _FxTooltipManager = class _FxTooltipManager {
   }
   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._pending.added.push(...mutations);
+      if (this._flushScheduled) return;
+      this._flushScheduled = true;
+      const run = () => {
+        this._flushScheduled = false;
+        const batch = this._pending;
+        this._pending = { added: [] };
+        this._flush(batch.added);
+      };
+      if (typeof requestAnimationFrame === "function") requestAnimationFrame(run);
+      else setTimeout(run, 0);
     });
     this.observer.observe(document.body, {
       childList: true,
       subtree: true,
       attributes: true,
+      // `attributeFilter` é o que mantém o custo baixo: o browser só notifica
+      // mudanças nestes 3 atributos, e não em qualquer atributo da página.
       attributeFilter: ["fx-tooltip", "fx-tooltip-position", "fx-tooltip-html"]
     });
   }
+  /** Um passe de verificação sobre todos os registros acumulados. */
+  _flush(records) {
+    const toProcess = /* @__PURE__ */ new Set();
+    const toRemove = /* @__PURE__ */ new Set();
+    for (const mutation of records) {
+      if (mutation.type === "childList") {
+        mutation.addedNodes.forEach((node) => {
+          if (node instanceof HTMLElement) {
+            toProcess.add(node);
+            node.querySelectorAll("[fx-tooltip]").forEach((el) => toProcess.add(el));
+          }
+        });
+        mutation.removedNodes.forEach((node) => {
+          if (node instanceof HTMLElement) {
+            toRemove.add(node);
+            node.querySelectorAll("[fx-tooltip]").forEach((el) => toRemove.add(el));
+          }
+        });
+      }
+      if (mutation.type === "attributes" && mutation.target instanceof HTMLElement) {
+        const target = mutation.target;
+        if (target.hasAttribute("fx-tooltip")) toProcess.add(target);
+        else toRemove.add(target);
+      }
+    }
+    toRemove.forEach((el) => this.removeBehavior(el));
+    toProcess.forEach((el) => this.processElement(el));
+  }
   processExistingElements() {
     document.querySelectorAll("[fx-tooltip]").forEach((el) => this.processElement(el));
   }
@@ -7718,6 +7877,8 @@ const _FxTooltipManager = class _FxTooltipManager {
     }
   }
   destroy() {
+    this._pending.added = [];
+    this._flushScheduled = false;
     if (this.observer) {
       this.observer.disconnect();
       this.observer = null;
@@ -8122,8 +8283,8 @@ const _FxSkeleton = class _FxSkeleton extends FxElement {
       return;
     }
     if (variant === "rect") {
-      const s2 = style || "width:100%;height:80px;";
-      this.setTemplate(`<div class="bone" part="bone" style="${s2}"></div>`);
+      const s = style || "width:100%;height:80px;";
+      this.setTemplate(`<div class="bone" part="bone" style="${s}"></div>`);
       return;
     }
     const lines = Number(this.getAttr("lines", "3")) || 3;
@@ -8638,7 +8799,7 @@ const _FxPagination = class _FxPagination extends FxElement {
   render() {
     const pages = this.pages;
     const current = Math.min(Math.max(1, this.page), pages);
-    const opts = (this.getAttr("rows-options", "5,10,20,50") || "").split(",").map((s2) => s2.trim()).filter(Boolean);
+    const opts = (this.getAttr("rows-options", "5,10,20,50") || "").split(",").map((s) => s.trim()).filter(Boolean);
     const window_ = [];
     for (let p = Math.max(1, current - 2); p <= Math.min(pages, current + 2); p++) window_.push(p);
     const from = total0(current, this.rows);
@@ -8748,8 +8909,8 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
     return ["size", "placeholder", "source", "disabled", "min-chars", "error", "invalid", "success", "valid"];
   }
   get size() {
-    const s2 = this.getAttr("size", "md");
-    return s2 === "sm" || s2 === "lg" ? s2 : "md";
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
   }
   set size(v) {
     this.setAttribute("size", v);
@@ -8801,7 +8962,7 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
     const openList = () => {
       if (!list) return;
       const q = field.value.toLowerCase();
-      const matches = this.source.filter((s2) => s2.toLowerCase().includes(q)).slice(0, 8);
+      const matches = this.source.filter((s) => s.toLowerCase().includes(q)).slice(0, 8);
       list.innerHTML = matches.length ? matches.map((m) => `<button type="button" class="opt" role="option" data-v="${esc(m)}">${esc(m)}</button>`).join("") : '<div class="empty">Nenhum resultado</div>';
       list.querySelectorAll(".opt").forEach((btn) => {
         btn.addEventListener("click", () => {
@@ -9001,8 +9162,8 @@ const _FxKnob = class _FxKnob extends FxElement {
     this.setAttribute("step", String(v));
   }
   get size() {
-    const s2 = this.getAttr("size", "md");
-    return s2 === "sm" || s2 === "lg" ? s2 : "md";
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
   }
   set size(v) {
     this.setAttribute("size", v);
@@ -9078,9 +9239,9 @@ const _FxKnob = class _FxKnob extends FxElement {
     this.attachListeners();
   }
   getSizeNum() {
-    const s2 = this.size;
-    if (s2 === "sm") return 60;
-    if (s2 === "lg") return 140;
+    const s = this.size;
+    if (s === "sm") return 60;
+    if (s === "lg") return 140;
     return 100;
   }
   /** Valida um valor de cor CSS, retornando-o seguro ou vazio. */
@@ -9344,8 +9505,8 @@ const _FxOrderList = class _FxOrderList extends FxElement {
     this.toggleAttr("striped", v);
   }
   get selectionMode() {
-    const s2 = this.getAttr("selection-mode", "");
-    return s2 === "single" || s2 === "multiple" ? s2 : "";
+    const s = this.getAttr("selection-mode", "");
+    return s === "single" || s === "multiple" ? s : "";
   }
   set selectionMode(v) {
     this.setAttribute("selection-mode", v);
@@ -9427,7 +9588,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
     return JSON.stringify(item);
   }
   _isSelected(item) {
-    return this._selection.some((s2) => this._getItemKey(s2, -1) === this._getItemKey(item, -1));
+    return this._selection.some((s) => this._getItemKey(s, -1) === this._getItemKey(item, -1));
   }
   _moveItem(fromIndex, toIndex) {
     const actualFrom = this._getActualIndex(fromIndex);
@@ -9463,7 +9624,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   }
   _toggleSelection(item) {
     const key2 = this._getItemKey(item, -1);
-    const index = this._selection.findIndex((s2) => this._getItemKey(s2, -1) === key2);
+    const index = this._selection.findIndex((s) => this._getItemKey(s, -1) === key2);
     if (index >= 0) {
       this._selection.splice(index, 1);
     } else if (this.selectionMode === "multiple") {
@@ -9737,7 +9898,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   _handleMoveAction(action) {
     if (!this._selection.length) return;
     const displayData = this._getDisplayData();
-    const selectedIndices = this._selection.map((s2) => displayData.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(s2, -1))).filter((i) => i >= 0).sort((a, b) => a - b);
+    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":
@@ -9813,7 +9974,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   }
   _updateControlsState() {
     const displayData = this._getDisplayData();
-    const selectedIndices = this._selection.map((s2) => displayData.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(s2, -1))).filter((i) => i >= 0);
+    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;
@@ -10019,8 +10180,8 @@ const _FxPickList = class _FxPickList extends FxElement {
     this.toggleAttr("striped", v);
   }
   get selectionMode() {
-    const s2 = this.getAttr("selection-mode", "");
-    return s2 === "single" || s2 === "multiple" ? s2 : "";
+    const s = this.getAttr("selection-mode", "");
+    return s === "single" || s === "multiple" ? s : "";
   }
   set selectionMode(v) {
     this.setAttribute("selection-mode", v);
@@ -10155,10 +10316,10 @@ const _FxPickList = class _FxPickList extends FxElement {
     return JSON.stringify(item);
   }
   _isSourceSelected(item, index) {
-    return this._sourceSelection.some((s2) => this._getItemKey(s2, -1, true) === this._getItemKey(item, index, true));
+    return this._sourceSelection.some((s) => this._getItemKey(s, -1, true) === this._getItemKey(item, index, true));
   }
   _isTargetSelected(item, index) {
-    return this._targetSelection.some((s2) => this._getItemKey(s2, -1, false) === this._getItemKey(item, index, false));
+    return this._targetSelection.some((s) => this._getItemKey(s, -1, false) === this._getItemKey(item, index, false));
   }
   _emitMoveToTarget() {
     this.dispatchEvent(new CustomEvent("move-to-target", {
@@ -10301,7 +10462,7 @@ const _FxPickList = class _FxPickList extends FxElement {
   _moveToTarget() {
     if (!this._sourceSelection.length) return;
     const items = [...this._sourceSelection];
-    this._source = this._source.filter((s2) => !items.some((i) => this._getItemKey(i, -1, true) === this._getItemKey(s2, -1, true)));
+    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;
@@ -10347,7 +10508,7 @@ const _FxPickList = class _FxPickList extends FxElement {
   _toggleSourceSelection(item, index) {
     const mode = this.selectionMode || "single";
     const key2 = this._getItemKey(item, index, true);
-    const idx = this._sourceSelection.findIndex((s2) => this._getItemKey(s2, -1, true) === key2);
+    const idx = this._sourceSelection.findIndex((s) => this._getItemKey(s, -1, true) === key2);
     if (idx >= 0) {
       this._sourceSelection.splice(idx, 1);
     } else if (mode === "multiple") {
@@ -10362,7 +10523,7 @@ const _FxPickList = class _FxPickList extends FxElement {
   _toggleTargetSelection(item, index) {
     const mode = this.selectionMode || "single";
     const key2 = this._getItemKey(item, index, false);
-    const idx = this._targetSelection.findIndex((s2) => this._getItemKey(s2, -1, false) === key2);
+    const idx = this._targetSelection.findIndex((s) => this._getItemKey(s, -1, false) === key2);
     if (idx >= 0) {
       this._targetSelection.splice(idx, 1);
     } else if (mode === "multiple") {
@@ -10825,7 +10986,7 @@ const _FxAccordion = class _FxAccordion extends FxElement {
   }
   /** Valores ativos como array. */
   get values() {
-    return this.getAttr("value", "").split(",").map((s2) => s2.trim()).filter(Boolean);
+    return this.getAttr("value", "").split(",").map((s) => s.trim()).filter(Boolean);
   }
   set values(v) {
     this.setAttribute("value", v.join(","));
@@ -11007,9 +11168,9 @@ export {
   lightTokens,
   listPresets,
   resetTheme,
-  s as sanitizeData,
+  h as sanitizeData,
   setTokens,
-  g as stripTags,
+  j as stripTags,
   theme,
   themePresets,
   tokenCssVars