@wrrdev/fenix-ui 1.1.15 → 1.1.17

package/dist/fenix-ui4.esm.js

@@ -506,6 +506,12 @@ const _FxButton = class _FxButton extends FxElement {
   set loading(value) {
     this.toggleAttr("loading", Boolean(value));
   }
+  get full() {
+    return this.hasAttr("full");
+  }
+  set full(value) {
+    this.toggleAttr("full", Boolean(value));
+  }
   render() {
     const loading = this.hasAttr("loading");
     const disabled = this.hasAttr("disabled") || loading;
@@ -685,6 +691,18 @@ const _FxBadge = class _FxBadge extends FxElement {
   static get observedAttributes() {
     return ["variant", "round"];
   }
+  get variant() {
+    return this.getAttr("variant", "default");
+  }
+  set variant(v) {
+    this.setAttribute("variant", v);
+  }
+  get round() {
+    return this.hasAttr("round");
+  }
+  set round(v) {
+    this.toggleAttr("round", Boolean(v));
+  }
   render() {
     this.setTemplate(`<span class="badge" part="badge"><slot></slot></span>`);
   }
@@ -764,10 +782,21 @@ function defineFxSpinner() {
 }
 defineFxSpinner();
 const _FxSelect = class _FxSelect extends FxFormElement {
-  // `value` fica FORA da observação: refleti-lo no change não pode
-  // re-renderizar o template e fechar o dropdown.
+  constructor() {
+    super(...arguments);
+    this._suppressRender = false;
+    this._fixedMode = false;
+    this._fixedResolved = false;
+  }
+  // `value` é observado para que `setAttribute('value', ...)` (HTML puro)
+  // também atualize o rótulo. Os caminhos internos de change usam
+  // `_suppressRender` para renderizar UMA vez, depois de fechar o painel.
   static get observedAttributes() {
-    return ["size", "disabled", "placeholder", "searchable", "clearable", "error", "invalid", "success", "valid", "placement"];
+    return ["value", "size", "disabled", "placeholder", "searchable", "clearable", "full", "error", "invalid", "success", "valid", "placement"];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (this._suppressRender) return;
+    super.attributeChangedCallback(name, oldValue, newValue);
   }
   /** Tamanho do campo. Padrão: `'md'`. */
   get size() {
@@ -781,7 +810,9 @@ const _FxSelect = class _FxSelect extends FxFormElement {
     return this.getAttr("value");
   }
   set value(value) {
-    this.setAttribute("value", value);
+    const next = value == null ? "" : String(value);
+    const prev = this.getAttr("value");
+    if (prev !== next) this.setAttribute("value", next);
     this.updateFormValue();
   }
   get disabled() {
@@ -790,6 +821,24 @@ const _FxSelect = class _FxSelect extends FxFormElement {
   set disabled(value) {
     this.toggleAttr("disabled", Boolean(value));
   }
+  get searchable() {
+    return this.hasAttr("searchable");
+  }
+  set searchable(value) {
+    this.toggleAttr("searchable", Boolean(value));
+  }
+  get clearable() {
+    return this.hasAttr("clearable");
+  }
+  set clearable(value) {
+    this.toggleAttr("clearable", Boolean(value));
+  }
+  get full() {
+    return this.hasAttr("full");
+  }
+  set full(value) {
+    this.toggleAttr("full", Boolean(value));
+  }
   get options() {
     return [...this.querySelectorAll("option")].map((o) => ({
       value: o.getAttribute("value") ?? o.textContent?.trim() ?? "",
@@ -798,8 +847,17 @@ const _FxSelect = class _FxSelect extends FxFormElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.observer = new MutationObserver(() => this.render());
-    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
+    this.observer = new MutationObserver((mutations) => {
+      if (mutations.every((m) => m.type === "attributes" && m.target === this)) return;
+      this.render();
+    });
+    this.observer.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["value", "selected"]
+    });
     this.docListener = (e) => {
       if (!this.hasAttr("open")) return;
       if (e.composedPath().includes(this)) return;
@@ -816,6 +874,8 @@ const _FxSelect = class _FxSelect extends FxFormElement {
   }
   /** Abre o dropdown, posiciona o painel e passa a reposicioná-lo no reflow. */
   _abrir() {
+    this._fixedMode = _FxSelect._precisaFixed(this);
+    this._fixedResolved = true;
     this.setAttribute("open", "");
     this._bindReflow();
   }
@@ -823,6 +883,8 @@ const _FxSelect = class _FxSelect extends FxFormElement {
   _fechar() {
     this.removeAttribute("open");
     this.removeAttribute("data-placement");
+    this._fixedMode = false;
+    this._fixedResolved = false;
     this._unbindReflow();
   }
   /** Liga o reposicionamento (resize + scroll interno, em capture). */
@@ -865,7 +927,30 @@ const _FxSelect = class _FxSelect extends FxFormElement {
       _FxSelect.MIN_ALTURA,
       (paraCima ? acima : abaixo) - _FxSelect.GAP
     );
-    painel.style.maxHeight = `${Math.min(desejado || disponivel, disponivel, maxAltura)}px`;
+    const altura = Math.min(desejado || disponivel, disponivel, maxAltura);
+    painel.style.maxHeight = `${altura}px`;
+    if (!this._fixedResolved) {
+      this._fixedMode = _FxSelect._precisaFixed(this);
+      this._fixedResolved = true;
+    }
+    if (this._fixedMode) {
+      this.setAttribute("data-fixed", "");
+      const largura2 = Math.max(r.width, 220);
+      const esquerda = Math.max(
+        _FxSelect.MARGEM,
+        Math.min(r.left, window.innerWidth - largura2 - _FxSelect.MARGEM)
+      );
+      const topo = paraCima ? Math.max(_FxSelect.MARGEM, r.top - _FxSelect.GAP - altura) : r.bottom + _FxSelect.GAP;
+      painel.style.bottom = "auto";
+      painel.style.width = `${largura2}px`;
+      painel.style.left = `${esquerda}px`;
+      painel.style.top = `${topo}px`;
+      return;
+    }
+    this.removeAttribute("data-fixed");
+    painel.style.top = "";
+    painel.style.bottom = "";
+    painel.style.width = "";
     painel.style.left = "";
     const largura = painel.offsetWidth;
     const excesso = r.left + largura - (window.innerWidth - _FxSelect.MARGEM);
@@ -874,6 +959,21 @@ const _FxSelect = class _FxSelect extends FxFormElement {
       painel.style.right = "auto";
     }
   }
+  /**
+   * Existe ancestral com overflow que cortaria o painel absoluto?
+   * `getComputedStyle` é defensivo: em jsdom retorna vazio e o modo
+   * histórico (absoluto) é mantido.
+   */
+  static _precisaFixed(host) {
+    let el = host.parentElement;
+    while (el && el !== document.body && el !== document.documentElement) {
+      const cs = getComputedStyle(el);
+      const overflow = `${cs.overflow}${cs.overflowX}${cs.overflowY}`;
+      if (/(hidden|clip|auto|scroll|overlay)/.test(overflow)) return true;
+      el = el.parentElement;
+    }
+    return false;
+  }
   /** Altura máxima do painel a partir de `--fx-select-panel-max-height`. */
   static _maxAltura(host) {
     const raw = getComputedStyle(host).getPropertyValue("--fx-select-panel-max-height");
@@ -881,7 +981,12 @@ const _FxSelect = class _FxSelect extends FxFormElement {
     return Number.isFinite(n) && n > 0 ? n : 260;
   }
   select(value) {
-    this.value = value;
+    this._suppressRender = true;
+    try {
+      this.value = value;
+    } finally {
+      this._suppressRender = false;
+    }
     this._fechar();
     this.render();
     this.emitValueEvents();
@@ -908,6 +1013,10 @@ const _FxSelect = class _FxSelect extends FxFormElement {
   }
   render() {
     const prevOpen = this.hasAttr("open");
+    if (!prevOpen) {
+      this._fixedMode = false;
+      this._fixedResolved = false;
+    }
     const prevSearch = this.root.querySelector(".search");
     const search = prevSearch?.value ?? "";
     const searchFocused = prevSearch != null && this.root.activeElement === prevSearch;
@@ -984,7 +1093,12 @@ const _FxSelect = class _FxSelect extends FxFormElement {
     });
     this.root.querySelector(".clear")?.addEventListener("click", (e) => {
       e.stopPropagation();
-      this.value = "";
+      this._suppressRender = true;
+      try {
+        this.value = "";
+      } finally {
+        this._suppressRender = false;
+      }
       this._fechar();
       this.render();
       this.emitValueEvents();
@@ -999,7 +1113,12 @@ const _FxSelect = class _FxSelect extends FxFormElement {
   }
   /** form.reset(): restaura o valor inicial e re-renderiza o rótulo. */
   formResetCallback() {
-    super.formResetCallback();
+    this._suppressRender = true;
+    try {
+      super.formResetCallback();
+    } finally {
+      this._suppressRender = false;
+    }
     this.render();
   }
 };
@@ -1122,6 +1241,11 @@ _FxSelect.styles = css`
       border-radius: var(--fx-radius-md);
       box-shadow: var(--fx-shadow-lg);
     }
+    /* Ancestral com overflow (ex.: fx-card) cortaria o painel absoluto:
+       nesse caso o JS posiciona com position:fixed a partir do trigger. */
+    :host([data-fixed]) .panel {
+      position: fixed;
+    }
     /* Padrão: abre para baixo. */
     :host([open]:not([data-placement='top'])) .panel {
       top: calc(100% + var(--fx-select-panel-offset, 4px));
@@ -1187,7 +1311,21 @@ function defineFxSelect() {
   return defineElement("fx-select", FxSelect);
 }
 defineFxSelect();
-const INPUT_TYPES = /* @__PURE__ */ new Set(["text", "number", "password"]);
+const INPUT_TYPES = /* @__PURE__ */ new Set([
+  "text",
+  "number",
+  "password",
+  "email",
+  "tel",
+  "url",
+  "search",
+  "date",
+  "time",
+  "datetime-local",
+  "month",
+  "week",
+  "color"
+]);
 function normalizeInputType(value) {
   const type = (value || "text").toLowerCase();
   return INPUT_TYPES.has(type) ? type : "text";
@@ -1207,6 +1345,8 @@ const _FxInput = class _FxInput extends FxFormElement {
       "min",
       "max",
       "step",
+      "clearable",
+      "full",
       "icon",
       "icon-pos",
       "error",
@@ -1234,7 +1374,7 @@ const _FxInput = class _FxInput extends FxFormElement {
     return this.getAttr("value");
   }
   set value(value) {
-    this.setAttribute("value", value);
+    this.setAttribute("value", value == null ? "" : String(value));
     this.syncInternalControl();
     this.updateFormValue();
   }
@@ -1244,6 +1384,24 @@ const _FxInput = class _FxInput extends FxFormElement {
   set disabled(value) {
     this.toggleAttr("disabled", Boolean(value));
   }
+  get readonly() {
+    return this.hasAttr("readonly");
+  }
+  set readonly(value) {
+    this.toggleAttr("readonly", Boolean(value));
+  }
+  get clearable() {
+    return this.hasAttr("clearable");
+  }
+  set clearable(value) {
+    this.toggleAttr("clearable", Boolean(value));
+  }
+  get full() {
+    return this.hasAttr("full");
+  }
+  set full(value) {
+    this.toggleAttr("full", Boolean(value));
+  }
   render() {
     const type = this.type;
     const placeholder = this.getAttr("placeholder");
@@ -1274,20 +1432,27 @@ const _FxInput = class _FxInput extends FxFormElement {
     field.value = this.getAttr("value");
     if (disabled) field.setAttribute("disabled", "");
     if (readonly) field.setAttribute("readonly", "");
-    const emit = (event) => {
+    const notifyInput = () => {
       this.value = field.value;
       this.emitValueEvents();
+    };
+    const notifyChange = () => {
+      this.value = field.value;
       this.dispatchEvent(
-        new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } })
+        new CustomEvent("change", {
+          bubbles: true,
+          composed: true,
+          detail: { value: field.value }
+        })
       );
     };
     field.addEventListener("input", (e) => {
       e.stopPropagation();
-      emit("input");
+      notifyInput();
     });
     field.addEventListener("change", (e) => {
       e.stopPropagation();
-      emit("change");
+      notifyChange();
     });
     field.addEventListener("keydown", (e) => {
       if (e.key !== "Enter" || e.isComposing) return;
@@ -1303,8 +1468,15 @@ const _FxInput = class _FxInput extends FxFormElement {
     clearBtn?.addEventListener("click", () => {
       field.value = "";
       syncClear();
-      emit("input");
-      emit("change");
+      this.value = "";
+      this.emitValueEvents();
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: true,
+          composed: true,
+          detail: { value: "" }
+        })
+      );
       field.focus();
     });
     field.addEventListener("input", syncClear);
@@ -1494,7 +1666,8 @@ const _FxSwitch = class _FxSwitch extends FxFormElement {
     return this.getAttr("value");
   }
   set value(v) {
-    this.setAttribute("value", v);
+    this.setAttribute("value", v == null ? "" : String(v));
+    this.updateFormValue();
   }
   /** No FormData: `value` (ou 'on') quando ligado; null (não envia) quando não. */
   getFormValue() {
@@ -1612,7 +1785,23 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
     this.selected = /* @__PURE__ */ new Set();
   }
   static get observedAttributes() {
-    return ["disabled", "placeholder", "error", "invalid", "success", "valid"];
+    return [
+      "values",
+      "size",
+      "disabled",
+      "placeholder",
+      "searchable",
+      "clearable",
+      "full",
+      "error",
+      "invalid",
+      "success",
+      "valid"
+    ];
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "values") this.selected = new Set(this.values);
+    super.attributeChangedCallback(name, oldValue, newValue);
   }
   /** Valores selecionados (CSV no atributo / array na propriedade). */
   get values() {
@@ -1620,7 +1809,15 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
     return csv ? csv.split(",").map((v) => v.trim()).filter(Boolean) : [];
   }
   set values(list) {
-    this.setAttribute("values", list.join(","));
+    const values = Array.isArray(list) ? list.map(String) : [];
+    this.selected = new Set(values);
+    const csv = values.join(",");
+    if (this.getAttr("values") !== csv) {
+      this.setAttribute("values", csv);
+    } else if (this.isConnected) {
+      this.render();
+    }
+    this.updateFormValue();
   }
   /** No FormData do form: uma entrada `name` por valor selecionado. */
   getFormValue() {
@@ -1636,6 +1833,24 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
   set disabled(value) {
     this.toggleAttr("disabled", Boolean(value));
   }
+  get searchable() {
+    return this.hasAttr("searchable");
+  }
+  set searchable(value) {
+    this.toggleAttr("searchable", Boolean(value));
+  }
+  get clearable() {
+    return this.hasAttr("clearable");
+  }
+  set clearable(value) {
+    this.toggleAttr("clearable", Boolean(value));
+  }
+  get full() {
+    return this.hasAttr("full");
+  }
+  set full(value) {
+    this.toggleAttr("full", Boolean(value));
+  }
   get options() {
     return [...this.querySelectorAll("option")].map((o) => ({
       value: o.getAttribute("value") ?? o.textContent?.trim() ?? "",
@@ -1647,7 +1862,15 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
     if (!this._initialValues) this._initialValues = [...this.values];
     super.connectedCallback();
     this.observer = new MutationObserver(() => this.render());
-    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
+    this.observer.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      // Vue atualiza `:value`/`:selected` das <option> no light DOM; sem
+      // observar atributos o label/valor antigo permanecia em tela.
+      attributes: true,
+      attributeFilter: ["value", "selected"]
+    });
     this.docListener = (e) => {
       if (!this.hasAttr("open")) return;
       if (e.composedPath().includes(this)) return;
@@ -1663,8 +1886,10 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
   }
   /** Aplica a seleção, reflete e emite change. */
   commit() {
-    this.values = [...this.selected];
-    this.render();
+    const next = [...this.selected];
+    const same = next.join(",") === this.values.join(",");
+    this.values = next;
+    if (same && this.isConnected) this.render();
     this.updateFormValue();
     this.dispatchEvent(
       new CustomEvent("change", {
@@ -1685,8 +1910,6 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
   formResetCallback() {
     const initial = this._initialValues ?? [];
     this.values = initial;
-    this.selected = new Set(initial);
-    this.render();
     this.updateFormValue();
   }
   toggleValue(value) {
@@ -1715,8 +1938,10 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
     const wasOpen = this.hasAttr("open");
     const search = this.root.querySelector(".search")?.value ?? "";
     const opts = this.options;
-    for (const v of [...this.selected]) {
-      if (!opts.some((o) => o.value === v)) this.selected.delete(v);
+    if (opts.length > 0) {
+      for (const v of [...this.selected]) {
+        if (!opts.some((o) => o.value === v)) this.selected.delete(v);
+      }
     }
     const chips = opts.filter((o) => this.selected.has(o.value));
     const placeholder = this.getAttr("placeholder", "Selecione…");
@@ -2496,13 +2721,16 @@ defineFxCalendar();
 const _FxDatepicker = class _FxDatepicker extends FxFormElement {
   constructor() {
     super(...arguments);
+    this._suppressRender = false;
     this.time = { h: 0, m: 0, s: 0 };
   }
   static get observedAttributes() {
-    return ["value", "start", "end", "values", "mode", "min", "max", "placeholder", "disabled", "format", "show-time", "free-text", "error", "invalid", "success", "valid"];
+    return ["value", "start", "end", "values", "mode", "min", "max", "placeholder", "disabled", "format", "show-time", "free-text", "clearable", "full", "error", "invalid", "success", "valid"];
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
+    if (!this._suppressRender) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+    }
     if (name === "value" || name === "start" || name === "end" || name === "values") {
       this.updateFormValue();
     }
@@ -2538,7 +2766,19 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
     return this.getAttr("value");
   }
   set value(v) {
-    this.setAttribute("value", v);
+    this.setAttribute("value", v == null ? "" : String(v));
+  }
+  get start() {
+    return this.getAttr("start");
+  }
+  set start(v) {
+    this.setAttribute("start", v == null ? "" : String(v));
+  }
+  get end() {
+    return this.getAttr("end");
+  }
+  set end(v) {
+    this.setAttribute("end", v == null ? "" : String(v));
   }
   /** Datas do modo múltiplo (CSV no atributo). */
   get values() {
@@ -2546,7 +2786,8 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
     return csv ? csv.split(",").map((v) => v.trim()).filter(Boolean) : [];
   }
   set values(list) {
-    this.setAttribute("values", list.join(","));
+    const values = Array.isArray(list) ? list.map(String) : [];
+    this.setAttribute("values", values.join(","));
   }
   get disabled() {
     return this.hasAttr("disabled");
@@ -2554,6 +2795,31 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
   set disabled(value) {
     this.toggleAttr("disabled", Boolean(value));
   }
+  /** `:show-time` procura a propriedade LITERAL no Vue (sem camelização). */
+  get "show-time"() {
+    return this.hasAttr("show-time");
+  }
+  set "show-time"(value) {
+    this.toggleAttr("show-time", Boolean(value));
+  }
+  get "free-text"() {
+    return this.hasAttr("free-text");
+  }
+  set "free-text"(value) {
+    this.toggleAttr("free-text", Boolean(value));
+  }
+  get clearable() {
+    return this.hasAttr("clearable");
+  }
+  set clearable(value) {
+    this.toggleAttr("clearable", Boolean(value));
+  }
+  get full() {
+    return this.hasAttr("full");
+  }
+  set full(value) {
+    this.toggleAttr("full", Boolean(value));
+  }
   connectedCallback() {
     if (!this._initialState) {
       this._initialState = {
@@ -2578,11 +2844,17 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
   /** form.reset(): restaura value/start/end/values iniciais (re-render via atributos observados). */
   formResetCallback() {
     const s = this._initialState ?? { value: "", start: "", end: "", values: "" };
-    this.setAttribute("value", s.value);
-    this.setAttribute("start", s.start);
-    this.setAttribute("end", s.end);
-    this.setAttribute("values", s.values);
+    this._suppressRender = true;
+    try {
+      this.setAttribute("value", s.value);
+      this.setAttribute("start", s.start);
+      this.setAttribute("end", s.end);
+      this.setAttribute("values", s.values);
+    } finally {
+      this._suppressRender = false;
+    }
     this.updateFormValue();
+    if (this.isConnected) this.render();
   }
   /** Formata uma data ISO ("YYYY-MM-DD" ou com "THH:mm:ss") segundo o atributo format. */
   formatDate(iso) {
@@ -2690,10 +2962,15 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
     });
     this.root.querySelector(".clear")?.addEventListener("click", (e) => {
       e.stopPropagation();
-      this.removeAttribute("value");
-      this.removeAttribute("start");
-      this.removeAttribute("end");
-      this.removeAttribute("values");
+      this._suppressRender = true;
+      try {
+        this.removeAttribute("value");
+        this.removeAttribute("start");
+        this.removeAttribute("end");
+        this.removeAttribute("values");
+      } finally {
+        this._suppressRender = false;
+      }
       this.removeAttribute("open");
       this.render();
       this.emitChange({});
@@ -2701,19 +2978,24 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
     const cal = this.root.querySelector(".pop fx-calendar");
     cal?.addEventListener("change", (e) => {
       const d = e.detail ?? {};
-      if (d.start !== void 0 || d.end !== void 0) {
-        if (d.start) this.setAttribute("start", this.withTime(d.start));
-        else this.removeAttribute("start");
-        if (d.end) this.setAttribute("end", this.withTime(d.end));
-        else this.removeAttribute("end");
-      }
-      if (d.values !== void 0) {
-        this.values = d.values.map((v) => this.withTime(v));
-      }
-      if (d.value !== void 0) {
-        if (d.value) this.setAttribute("value", this.withTime(d.value));
-        else this.removeAttribute("value");
-        if (this.mode === "single") this.removeAttribute("open");
+      this._suppressRender = true;
+      try {
+        if (d.start !== void 0 || d.end !== void 0) {
+          if (d.start) this.setAttribute("start", this.withTime(d.start));
+          else this.removeAttribute("start");
+          if (d.end) this.setAttribute("end", this.withTime(d.end));
+          else this.removeAttribute("end");
+        }
+        if (d.values !== void 0) {
+          this.values = d.values.map((v) => this.withTime(v));
+        }
+        if (d.value !== void 0) {
+          if (d.value) this.setAttribute("value", this.withTime(d.value));
+          else this.removeAttribute("value");
+          if (this.mode === "single") this.removeAttribute("open");
+        }
+      } finally {
+        this._suppressRender = false;
       }
       this.render();
       this.emitChange(d);
@@ -2740,11 +3022,16 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
           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));
-        if (this.getAttr("start")) this.setAttribute("start", reattach(this.getAttr("start")));
-        if (this.getAttr("end")) this.setAttribute("end", reattach(this.getAttr("end")));
-        if (this.values.length) {
-          this.values = this.values.map((v) => reattach(v));
+        this._suppressRender = true;
+        try {
+          if (this.value) this.setAttribute("value", reattach(this.value));
+          if (this.getAttr("start")) this.setAttribute("start", reattach(this.getAttr("start")));
+          if (this.getAttr("end")) this.setAttribute("end", reattach(this.getAttr("end")));
+          if (this.values.length) {
+            this.values = this.values.map((v) => reattach(v));
+          }
+        } finally {
+          this._suppressRender = false;
         }
         const display2 = this.root.querySelector(".display");
         if (display2) display2.value = this.displayText();
@@ -2800,23 +3087,32 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
       setTimeout(() => input.classList.remove("invalid"), 1500);
       return;
     }
+    this._suppressRender = true;
+    try {
+      if (this.mode === "single") {
+        this.setAttribute("value", this.withTime(parsed));
+      } else if (this.mode === "range") {
+        if (!this.getAttr("start") || this.getAttr("start") && this.getAttr("end")) {
+          this.setAttribute("start", this.withTime(parsed));
+          this.removeAttribute("end");
+        } else {
+          const [a, b] = [this.getAttr("start").split("T")[0], parsed].sort();
+          this.setAttribute("start", this.withTime(a));
+          this.setAttribute("end", this.withTime(b));
+        }
+      } else {
+        const list = this.values.filter((v) => v.split("T")[0] !== parsed);
+        list.push(this.withTime(parsed));
+        this.values = list;
+      }
+    } finally {
+      this._suppressRender = false;
+    }
     if (this.mode === "single") {
-      this.setAttribute("value", this.withTime(parsed));
       this.emitChange({ value: this.value });
     } else if (this.mode === "range") {
-      if (!this.getAttr("start") || this.getAttr("start") && this.getAttr("end")) {
-        this.setAttribute("start", this.withTime(parsed));
-        this.removeAttribute("end");
-      } else {
-        const [a, b] = [this.getAttr("start").split("T")[0], parsed].sort();
-        this.setAttribute("start", this.withTime(a));
-        this.setAttribute("end", this.withTime(b));
-      }
       this.emitChange({ start: this.getAttr("start"), end: this.getAttr("end") });
     } else {
-      const list = this.values.filter((v) => v.split("T")[0] !== parsed);
-      list.push(this.withTime(parsed));
-      this.values = list;
       this.emitChange({ values: this.values });
     }
     this.render();
@@ -2987,7 +3283,7 @@ const _FxCheckbox = class _FxCheckbox extends FxFormElement {
     this._initialCheckedCaptured = false;
   }
   static get observedAttributes() {
-    return ["checked", "disabled", "indeterminate"];
+    return ["checked", "disabled", "indeterminate", "size"];
   }
   get checked() {
     return this.hasAttr("checked");
@@ -3016,7 +3312,8 @@ const _FxCheckbox = class _FxCheckbox extends FxFormElement {
     return this.getAttr("value");
   }
   set value(v) {
-    this.setAttribute("value", v);
+    this.setAttribute("value", v == null ? "" : String(v));
+    this.updateFormValue();
   }
   /** Tamanho do controle. Padrão: `'md'`. */
   get size() {
@@ -3028,9 +3325,7 @@ const _FxCheckbox = class _FxCheckbox extends FxFormElement {
   }
   render() {
     const px = this.size === "sm" ? "14px" : this.size === "lg" ? "22px" : "18px";
-    if (!this.style.getPropertyValue("--fx-size-checkbox")) {
-      this.style.setProperty("--fx-size-checkbox", px);
-    }
+    this.style.setProperty("--_fx-size-checkbox", px);
     this.setTemplate(`
       <span class="box" part="box" role="checkbox" tabindex="0"
         aria-checked="${this.indeterminate ? "mixed" : this.checked}"
@@ -3102,8 +3397,8 @@ _FxCheckbox.styles = css`
       -webkit-tap-highlight-color: transparent;
     }
     .control {
-      width: var(--fx-size-checkbox, 18px);
-      height: var(--fx-size-checkbox, 18px);
+      width: var(--fx-size-checkbox, var(--_fx-size-checkbox, 18px));
+      height: var(--fx-size-checkbox, var(--_fx-size-checkbox, 18px));
       flex-shrink: 0;
       display: inline-flex;
       align-items: center;
@@ -3112,7 +3407,7 @@ _FxCheckbox.styles = css`
       border-radius: calc(var(--fx-radius-sm) + 2px);
       background: var(--fx-surface-background);
       color: #fff;
-      font-size: calc(var(--fx-size-checkbox, 18px) - 6px);
+      font-size: calc(var(--fx-size-checkbox, var(--_fx-size-checkbox, 18px)) - 6px);
       line-height: 1;
       transition:
         background-color var(--fx-motion-duration-fast) var(--fx-motion-easing),
@@ -3159,7 +3454,7 @@ const _FxRadio = class _FxRadio extends FxFormElement {
     this._initialCheckedCaptured = false;
   }
   static get observedAttributes() {
-    return ["checked", "disabled"];
+    return ["checked", "disabled", "size"];
   }
   get checked() {
     return this.hasAttr("checked");
@@ -3192,6 +3487,14 @@ const _FxRadio = class _FxRadio extends FxFormElement {
   getFormValue() {
     return this.checked ? this.getAttr("value") || "on" : null;
   }
+  /** getter/setter `value` — sem o setter o Vue não consegue escrever a propriedade. */
+  get value() {
+    return this.getAttr("value");
+  }
+  set value(v) {
+    this.setAttribute("value", v == null ? "" : String(v));
+    this.updateFormValue();
+  }
   /** Tamanho do controle. Padrão: `'md'`. */
   get size() {
     const s = this.getAttr("size", "md");
@@ -3202,9 +3505,7 @@ const _FxRadio = class _FxRadio extends FxFormElement {
   }
   render() {
     const px = this.size === "sm" ? "14px" : this.size === "lg" ? "22px" : "18px";
-    if (!this.style.getPropertyValue("--fx-size-radio")) {
-      this.style.setProperty("--fx-size-radio", px);
-    }
+    this.style.setProperty("--_fx-size-radio", px);
     this.setTemplate(`
       <span class="box" part="box" role="radio" tabindex="0"
         aria-checked="${this.checked}" aria-disabled="${this.disabled}">
@@ -3292,8 +3593,8 @@ _FxRadio.styles = css`
       -webkit-tap-highlight-color: transparent;
     }
     .control {
-      width: var(--fx-size-radio, 18px);
-      height: var(--fx-size-radio, 18px);
+      width: var(--fx-size-radio, var(--_fx-size-radio, 18px));
+      height: var(--fx-size-radio, var(--_fx-size-radio, 18px));
       flex-shrink: 0;
       display: inline-flex;
       align-items: center;
@@ -3337,6 +3638,43 @@ function defineFxRadio() {
   return defineElement("fx-radio", FxRadio);
 }
 defineFxRadio();
+function toInt(value, fallback) {
+  return Number.isFinite(value) ? Math.trunc(value) : fallback;
+}
+function range(start, end) {
+  const out = [];
+  for (let p = start; p <= end; p++) out.push(p);
+  return out;
+}
+function pageRange(current, count, options = {}) {
+  const pages = Math.max(0, toInt(count, 0));
+  if (pages === 0) return [];
+  const boundaries = Math.max(0, toInt(options.boundaries ?? 1, 1));
+  const siblings = Math.max(0, toInt(options.siblings ?? 1, 1));
+  const page = Math.min(Math.max(1, toInt(current, 1)), pages);
+  if (pages <= boundaries * 2 + siblings * 2 + 3) return range(1, pages);
+  const startPages = range(1, Math.min(boundaries, pages));
+  const endPages = range(
+    Math.max(pages - boundaries + 1, boundaries + 1),
+    pages
+  );
+  const siblingsStart = Math.max(
+    Math.min(page - siblings, pages - boundaries - siblings * 2 - 1),
+    boundaries + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(page + siblings, boundaries + siblings * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : pages - 1
+  );
+  const items = [...startPages];
+  if (siblingsStart > boundaries + 2) items.push("ellipsis");
+  else if (boundaries + 1 < pages - boundaries) items.push(boundaries + 1);
+  items.push(...range(siblingsStart, siblingsEnd));
+  if (siblingsEnd < pages - boundaries - 1) items.push("ellipsis");
+  else if (pages - boundaries > boundaries) items.push(pages - boundaries);
+  items.push(...endPages);
+  return items;
+}
 const LOCALE = "pt-BR";
 const PIPES = {
   /** Formata como moeda brasileira (R$). */
@@ -3768,6 +4106,7 @@ const _FxTable = class _FxTable extends FxElement {
     this.sortDir = 1;
     this.filters = {};
     this.globalSearch = "";
+    this._boundToolbarInputs = /* @__PURE__ */ new WeakSet();
     this._shellKey = "";
   }
   static get observedAttributes() {
@@ -3815,6 +4154,44 @@ const _FxTable = class _FxTable extends FxElement {
   get lazy() {
     return this.hasAttr("lazy");
   }
+  set lazy(value) {
+    this.toggleAttr("lazy", Boolean(value));
+  }
+  get pagination() {
+    return this.hasAttr("pagination");
+  }
+  set pagination(value) {
+    this.toggleAttr("pagination", Boolean(value));
+  }
+  get striped() {
+    return this.hasAttr("striped");
+  }
+  set striped(value) {
+    this.toggleAttr("striped", Boolean(value));
+  }
+  get hover() {
+    return this.hasAttr("hover");
+  }
+  set hover(value) {
+    this.toggleAttr("hover", Boolean(value));
+  }
+  get loading() {
+    return this.hasAttr("loading");
+  }
+  set loading(value) {
+    this.toggleAttr("loading", Boolean(value));
+  }
+  /**
+   * Vue não cameliza atributos de elementos customizados:
+   * `:no-borders-x="false"` procura a propriedade LITERAL
+   * `'no-borders-x'` — o accessor literal evita o contorno `.attr`.
+   */
+  get "no-borders-x"() {
+    return this.hasAttr("no-borders-x");
+  }
+  set "no-borders-x"(value) {
+    this.toggleAttr("no-borders-x", Boolean(value));
+  }
   get columns() {
     return [...this.querySelectorAll("fx-column")].map((c) => {
       const tpl = this._resolveCellTemplate(c);
@@ -3898,7 +4275,14 @@ const _FxTable = class _FxTable extends FxElement {
     loadFenixIconsFont();
     super.connectedCallback();
     this._columnObserver = new MutationObserver(() => this.render());
-    this._columnObserver.observe(this, { childList: true, subtree: true });
+    this._columnObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      // Colunas com header/field/align/sortable/filterable alterados
+      // em runtime também precisam re-renderizar.
+      attributes: true,
+      attributeFilter: ["header", "field", "align", "sortable", "filterable", "template"]
+    });
   }
   disconnectedCallback() {
     this._columnObserver?.disconnect();
@@ -3980,7 +4364,14 @@ const _FxTable = class _FxTable extends FxElement {
     const pages = Math.max(1, Math.ceil(total / this.rowsPerPage));
     if (this.page >= pages) this.page = pages - 1;
     const toolbar = this.toolbarTemplate;
-    const toolbarHtml = toolbar ? `<div class="toolbar" part="toolbar">${toolbar.innerHTML}</div>` : "";
+    const toolbarSlotted = toolbar?.localName === "fx-toolbar";
+    const toolbarHasContent = Boolean(
+      toolbar && (toolbarSlotted ? toolbar.children.length > 0 || (toolbar.textContent ?? "").trim() !== "" : toolbar.innerHTML.trim() !== "")
+    );
+    if (toolbarSlotted && toolbarHasContent) {
+      toolbar.setAttribute("slot", "fx-toolbar");
+    }
+    const toolbarHtml = toolbarHasContent ? `<div class="toolbar" part="toolbar">${toolbarSlotted ? '<slot name="fx-toolbar"></slot>' : toolbar.innerHTML}</div>` : "";
     const headHtml = cols.map((c) => {
       const isSorted = this.sortField === c.field;
       const ind = isSorted ? this.sortDir === 1 ? "▲" : "▼" : c.sortable ? "⇅" : "";
@@ -3991,16 +4382,19 @@ const _FxTable = class _FxTable extends FxElement {
     const bodyHtml = rows.length ? rows.map(
       (row, i) => `<tr part="row" data-index="${i}">${cols.map((c) => `<td part="cell" style="text-align:${c.align}">${this.cellHtml(c, row)}</td>`).join("")}</tr>`
     ).join("") : `<tr><td class="empty" colspan="${cols.length || 1}">${esc(this.getAttr("empty-message", "Nenhum registro encontrado"))}</td></tr>`;
+    const pageButtons = pageRange(this.page + 1, pages).map(
+      (item) => item === "ellipsis" ? `<span class="ellipsis" part="ellipsis" aria-hidden="true">…</span>` : `<button type="button" class="pg-btn" part="page" data-pg="${item - 1}"${item === this.page + 1 ? ' aria-current="page"' : ""}>${item}</button>`
+    ).join("");
     const pagerHtml = !paginated ? "" : `
       <div class="pager" part="pager">
         <span class="info">Página ${this.page + 1} de ${pages} · ${total} registros</span>
         <button type="button" class="pg-btn" part="first" aria-label="Primeira página" data-pg="first" ${this.page === 0 ? "disabled" : ""}>${fenixIconHtml("first_page")}</button>
         <button type="button" class="pg-btn" part="prev" aria-label="Página anterior" data-pg="prev" ${this.page === 0 ? "disabled" : ""}>${fenixIconHtml("navigate_before")}</button>
-        ${Array.from({ length: pages }, (_, p) => `<button type="button" class="pg-btn" data-pg="${p}" aria-current="${p === this.page}">${p + 1}</button>`).join("")}
+        ${pageButtons}
         <button type="button" class="pg-btn" part="next" aria-label="Próxima página" data-pg="next" ${this.page >= pages - 1 ? "disabled" : ""}>${fenixIconHtml("navigate_next")}</button>
         <button type="button" class="pg-btn" part="last" aria-label="Última página" data-pg="last" ${this.page >= pages - 1 ? "disabled" : ""}>${fenixIconHtml("last_page")}</button>
         <label class="info">${esc("Por página:")}
-          <fx-select class="rows-sel" size="sm" value="${this.rowsPerPage}" aria-label="Itens por página">${this.getAttr(
+          <fx-select class="rows-sel" size="sm" placement="top" value="${this.rowsPerPage}" aria-label="Itens por página">${this.getAttr(
       "rows-options",
       "5,10,20,50"
     ).split(",").map((n) => n.trim()).map((n) => `<option value="${esc(n)}">${esc(n)}</option>`).join("")}</fx-select>
@@ -4021,13 +4415,15 @@ const _FxTable = class _FxTable extends FxElement {
       if (tbody) {
         tbody.innerHTML = bodyHtml;
         this._bindRowClicks(rows);
+        this._bindSlottedToolbarSearch(toolbar);
+        this._restoreToolbarSearch();
         return;
       }
     }
     this._shellKey = shellKey;
     this.setTemplate(`
       ${toolbarHtml}
-      <div class="frame${toolbar ? " has-toolbar" : ""}" part="frame">
+      <div class="frame${toolbarHasContent ? " has-toolbar" : ""}" part="frame">
         <div class="table-wrap">
           <div class="scroll">
             <table part="table">
@@ -4088,21 +4484,10 @@ const _FxTable = class _FxTable extends FxElement {
       });
       inp.addEventListener("click", (e) => e.stopPropagation());
     });
-    this.root.querySelectorAll("[data-search-fields]").forEach((inp) => {
-      inp.addEventListener("input", () => {
-        this.globalSearch = inp.value;
-        this.page = 0;
-        const pos = inp.selectionStart;
-        this.render();
-        const again = this.root.querySelector(
-          "[data-search-fields]"
-        );
-        if (again) {
-          again.focus();
-          again.setSelectionRange(pos, pos);
-        }
-      });
-    });
+    this.root.querySelectorAll("[data-search-fields]").forEach((inp) => this._bindSearchInput(inp, false));
+    if (toolbarSlotted && toolbar) {
+      this._bindSlottedToolbarSearch(toolbar);
+    }
     this.root.querySelectorAll(".pg-btn").forEach((btn) => {
       btn.addEventListener("click", () => {
         const pg = btn.dataset.pg;
@@ -4155,11 +4540,47 @@ const _FxTable = class _FxTable extends FxElement {
       });
     });
   }
+  /** Liga (uma vez) os inputs de busca de um <fx-toolbar> slotted. */
+  _bindSlottedToolbarSearch(toolbar) {
+    if (!toolbar || toolbar.localName !== "fx-toolbar") return;
+    toolbar.querySelectorAll("[data-search-fields]").forEach((inp) => {
+      if (this._boundToolbarInputs.has(inp)) return;
+      this._boundToolbarInputs.add(inp);
+      this._bindSearchInput(inp, true);
+    });
+  }
+  /**
+   * Liga um input da toolbar à busca global.
+   * `persistent` = input slotted (não é recriado pelo render): o foco volta
+   * no próprio nó. Inputs clonados são substituídos, então o foco é
+   * restaurado no clone novo do shadow.
+   */
+  _bindSearchInput(inp, persistent) {
+    inp.addEventListener("input", () => {
+      this.globalSearch = inp.value;
+      this.page = 0;
+      const pos = inp.selectionStart;
+      this.render();
+      const again = persistent && inp.isConnected ? inp : this.root.querySelector("[data-search-fields]");
+      if (again) {
+        again.focus();
+        again.setSelectionRange(pos, pos);
+      }
+    });
+  }
   _restoreToolbarSearch() {
-    const input = this.root.querySelector(
+    const shadow = this.root.querySelector(
       "[data-search-fields]"
     );
-    if (input && this.globalSearch) input.value = this.globalSearch;
+    if (shadow && this.globalSearch) shadow.value = this.globalSearch;
+    const toolbar = this.toolbarTemplate;
+    if (toolbar?.localName === "fx-toolbar") {
+      toolbar.querySelectorAll("[data-search-fields]").forEach((input) => {
+        if (this.globalSearch && input.value !== this.globalSearch) {
+          input.value = this.globalSearch;
+        }
+      });
+    }
   }
 };
 _FxTable.styles = css`
@@ -4352,7 +4773,7 @@ _FxTable.styles = css`
 		.pg-btn .fx-icon {
 			font-size: calc(var(--fx-font-size) - 1px);
 		}
-		.pg-btn:hover:not(:disabled):not([aria-current="true"]) {
+		.pg-btn:hover:not(:disabled):not([aria-current="page"]) {
 			border-color: var(--fx-color-primary);
 			color: var(--fx-color-primary);
 		}
@@ -4360,12 +4781,25 @@ _FxTable.styles = css`
 			opacity: 0.5;
 			cursor: not-allowed;
 		}
-		.pg-btn[aria-current="true"] {
+		.pg-btn[aria-current="page"] {
 			background: var(--fx-color-primary);
 			border-color: var(--fx-color-primary);
 			color: #fff;
 			font-weight: var(--fx-font-weight);
 		}
+		/* Elipse da janela de páginas (1 … 499 [500] 501 … 1000): ocupa o
+		   mesmo espaço de um botão para o rodapé não "pular" ao navegar,
+		   mas não é clicável. */
+		.pager .ellipsis {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			min-width: var(--fx-size-sm);
+			height: var(--fx-size-sm);
+			color: var(--fx-text-muted);
+			font-size: calc(var(--fx-font-size) - 2px);
+			user-select: none;
+		}
 		/* 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
@@ -4402,6 +4836,11 @@ _FxTable.styles = css`
 		.toolbar:empty {
 			display: none;
 		}
+		/* <fx-toolbar> é apenas um invólucro no light DOM: o slot projeta
+		   seus filhos (com listeners do Vue preservados) direto no flex. */
+		::slotted(fx-toolbar) {
+			display: contents;
+		}
 		.loading-overlay {
 			position: absolute;
 			inset: 0;
@@ -4452,7 +4891,51 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
     this._labelClickBound = false;
   }
   static get observedAttributes() {
-    return ["variant", "error", "invalid", "success", "valid", "full", "icon", "icon-pos"];
+    return ["variant", "error", "invalid", "success", "valid", "full", "icon", "icon-pos", "error-text"];
+  }
+  get error() {
+    return this.hasAttr("error");
+  }
+  set error(value) {
+    this.toggleAttr("error", Boolean(value));
+  }
+  get invalid() {
+    return this.hasAttr("invalid");
+  }
+  set invalid(value) {
+    this.toggleAttr("invalid", Boolean(value));
+  }
+  get success() {
+    return this.hasAttr("success");
+  }
+  set success(value) {
+    this.toggleAttr("success", Boolean(value));
+  }
+  get valid() {
+    return this.hasAttr("valid");
+  }
+  set valid(value) {
+    this.toggleAttr("valid", Boolean(value));
+  }
+  get full() {
+    return this.hasAttr("full");
+  }
+  set full(value) {
+    this.toggleAttr("full", Boolean(value));
+  }
+  get errorText() {
+    return this.getAttr("error-text");
+  }
+  set errorText(value) {
+    this.setAttribute("error-text", value == null ? "" : String(value));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._labelObserver = new MutationObserver(() => {
+      const label = this.findLabel();
+      if (label && label !== this._label) this.render();
+    });
+    this._labelObserver.observe(this, { childList: true });
   }
   render() {
     const control = this.findControl();
@@ -4496,6 +4979,8 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.observer?.disconnect();
+    this._labelObserver?.disconnect();
+    this._labelObserver = void 0;
   }
   /** Campo de controle = qualquer filho direto que não seja label. */
   findControl() {
@@ -4785,7 +5270,7 @@ function defineFxFloatlabel() {
 defineFxFloatlabel();
 const _FxTextarea = class _FxTextarea extends FxFormElement {
   static get observedAttributes() {
-    return ["size", "placeholder", "disabled", "readonly", "rows", "maxlength", "error", "invalid", "success", "valid"];
+    return ["size", "placeholder", "disabled", "readonly", "full", "rows", "maxlength", "error", "invalid", "success", "valid"];
   }
   get size() {
     const s = this.getAttr("size", "md");
@@ -4798,10 +5283,22 @@ const _FxTextarea = class _FxTextarea extends FxFormElement {
     return this.getAttr("value");
   }
   set value(value) {
-    this.setAttribute("value", value);
+    this.setAttribute("value", value == null ? "" : String(value));
     this.syncInternalControl();
     this.updateFormValue();
   }
+  get readonly() {
+    return this.hasAttr("readonly");
+  }
+  set readonly(value) {
+    this.toggleAttr("readonly", Boolean(value));
+  }
+  get full() {
+    return this.hasAttr("full");
+  }
+  set full(value) {
+    this.toggleAttr("full", Boolean(value));
+  }
   render() {
     const placeholder = this.getAttr("placeholder");
     const readonly = this.hasAttr("readonly");
@@ -4818,20 +5315,27 @@ const _FxTextarea = class _FxTextarea extends FxFormElement {
     field.value = this.getAttr("value");
     if (disabled) field.setAttribute("disabled", "");
     if (readonly) field.setAttribute("readonly", "");
-    const emit = (event) => {
+    const notifyInput = () => {
       this.value = field.value;
       this.emitValueEvents();
+    };
+    const notifyChange = () => {
+      this.value = field.value;
       this.dispatchEvent(
-        new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } })
+        new CustomEvent("change", {
+          bubbles: true,
+          composed: true,
+          detail: { value: field.value }
+        })
       );
     };
     field.addEventListener("input", (e) => {
       e.stopPropagation();
-      emit("input");
+      notifyInput();
     });
     field.addEventListener("change", (e) => {
       e.stopPropagation();
-      emit("change");
+      notifyChange();
     });
     this.updateFormValue();
   }
@@ -6118,10 +6622,10 @@ function rootOf(editor) {
   const root = editor.getRootNode();
   return typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot ? root : document;
 }
-function isRangeInside(editor, range) {
-  if (!range) return false;
-  const start = range.startContainer;
-  const end = range.endContainer;
+function isRangeInside(editor, range2) {
+  if (!range2) return false;
+  const start = range2.startContainer;
+  const end = range2.endContainer;
   return editor.contains(start) && editor.contains(end);
 }
 function readSelectionRange(root) {
@@ -6132,10 +6636,10 @@ function readSelectionRange(root) {
       const ranges = selection.getComposedRanges({ shadowRoots: [root] });
       const first = ranges[0];
       if (first) {
-        const range = document.createRange();
-        range.setStart(first.startContainer, first.startOffset);
-        range.setEnd(first.endContainer, first.endOffset);
-        return range;
+        const range2 = document.createRange();
+        range2.setStart(first.startContainer, first.startOffset);
+        range2.setEnd(first.endContainer, first.endOffset);
+        return range2;
       }
     } catch {
     }
@@ -6143,41 +6647,41 @@ function readSelectionRange(root) {
   return selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
 }
 function getRange(editor, fallback) {
-  const range = readSelectionRange(rootOf(editor));
-  if (isRangeInside(editor, range)) return range;
+  const range2 = readSelectionRange(rootOf(editor));
+  if (isRangeInside(editor, range2)) return range2;
   if (isRangeInside(editor, fallback ?? null)) return fallback ?? null;
   return null;
 }
 function saveRange(editor) {
-  const range = getRange(editor);
-  return range ? range.cloneRange() : null;
+  const range2 = getRange(editor);
+  return range2 ? range2.cloneRange() : null;
 }
-function restoreRange(editor, range) {
-  if (!range || !isRangeInside(editor, range)) return;
+function restoreRange(editor, range2) {
+  if (!range2 || !isRangeInside(editor, range2)) return;
   editor.focus({ preventScroll: true });
   const selection = document.getSelection();
   if (!selection) return;
   selection.removeAllRanges();
-  selection.addRange(range);
+  selection.addRange(range2);
 }
 function placeCaretAtEnd(editor) {
-  const range = document.createRange();
-  range.selectNodeContents(editor);
-  range.collapse(false);
+  const range2 = document.createRange();
+  range2.selectNodeContents(editor);
+  range2.collapse(false);
   const selection = document.getSelection();
   if (!selection) return;
   selection.removeAllRanges();
-  selection.addRange(range);
+  selection.addRange(range2);
 }
-function getBlock(editor, range) {
-  const active = range ?? getRange(editor);
+function getBlock(editor, range2) {
+  const active = range2 ?? getRange(editor);
   if (!active) return null;
   const node = active.startContainer;
   const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
   const block = el?.closest(BLOCK_SELECTOR) ?? null;
   return block && editor.contains(block) ? block : null;
 }
-function getSelectedBlocks(editor, range) {
+function getSelectedBlocks(editor, range2) {
   const active = getRange(editor);
   if (!active) return [];
   if (active.collapsed) {
@@ -6197,11 +6701,11 @@ function closestInEditor(editor, node, selector) {
   const match = el?.closest(selector) ?? null;
   return match && editor.contains(match) ? match : null;
 }
-function setSelection(range) {
+function setSelection(range2) {
   const selection = document.getSelection();
   if (!selection) return;
   selection.removeAllRanges();
-  selection.addRange(range);
+  selection.addRange(range2);
 }
 function nativeExec(command, value) {
   const exec = document.execCommand;
@@ -6214,16 +6718,16 @@ function nativeExec(command, value) {
 }
 function insertHtml(editor, html) {
   if (nativeExec("insertHTML", html)) return true;
-  const range = getRange(editor);
-  if (!range) {
+  const range2 = getRange(editor);
+  if (!range2) {
     editor.insertAdjacentHTML("beforeend", html);
     placeCaretAtEnd(editor);
     return true;
   }
-  range.deleteContents();
-  const fragment = range.createContextualFragment(html);
+  range2.deleteContents();
+  const fragment = range2.createContextualFragment(html);
   const last = fragment.lastChild;
-  range.insertNode(fragment);
+  range2.insertNode(fragment);
   if (last) {
     const next = document.createRange();
     next.setStartAfter(last);
@@ -6239,12 +6743,12 @@ function unwrap(el) {
   el.remove();
 }
 function wrapSelection(editor, tag) {
-  const range = getRange(editor);
-  if (!range) return false;
+  const range2 = getRange(editor);
+  if (!range2) return false;
   const el = document.createElement(tag);
-  if (range.collapsed) {
+  if (range2.collapsed) {
     el.appendChild(document.createTextNode("​"));
-    range.insertNode(el);
+    range2.insertNode(el);
     const caret = document.createRange();
     caret.setStart(el.firstChild ?? el, 1);
     caret.collapse(true);
@@ -6252,10 +6756,10 @@ function wrapSelection(editor, tag) {
     return true;
   }
   try {
-    range.surroundContents(el);
+    range2.surroundContents(el);
   } catch {
-    el.appendChild(range.extractContents());
-    range.insertNode(el);
+    el.appendChild(range2.extractContents());
+    range2.insertNode(el);
   }
   return true;
 }
@@ -6271,9 +6775,9 @@ function toggleInline(editor, tag) {
   };
   const nativeCommand = nativeMap[tag];
   if (nativeCommand && nativeExec(nativeCommand)) return true;
-  const range = getRange(editor);
-  if (!range) return false;
-  const current = (range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer : range.startContainer.parentElement)?.closest(tag);
+  const range2 = getRange(editor);
+  if (!range2) return false;
+  const current = (range2.startContainer.nodeType === Node.ELEMENT_NODE ? range2.startContainer : range2.startContainer.parentElement)?.closest(tag);
   if (current && editor.contains(current)) {
     unwrap(current);
     return true;
@@ -6322,31 +6826,31 @@ function toggleList(editor, ordered) {
     list.appendChild(li);
     block.remove();
   }
-  const range = document.createRange();
-  range.selectNodeContents(list.lastElementChild ?? list);
-  range.collapse(false);
-  setSelection(range);
+  const range2 = document.createRange();
+  range2.selectNodeContents(list.lastElementChild ?? list);
+  range2.collapse(false);
+  setSelection(range2);
   return true;
 }
 function removeFormat(editor) {
   if (nativeExec("removeFormat")) return true;
-  const range = getRange(editor);
-  if (!range) return false;
-  const root = range.commonAncestorContainer;
+  const range2 = getRange(editor);
+  if (!range2) return false;
+  const root = range2.commonAncestorContainer;
   const container = root.nodeType === Node.ELEMENT_NODE ? root : root.parentElement;
   if (!container) return false;
   const tags = ["strong", "b", "em", "i", "u", "s", "strike", "span", "mark", "code", "sub", "sup"];
   for (const el of Array.from(container.querySelectorAll(tags.join(",")))) {
-    if (range.intersectsNode(el)) unwrap(el);
+    if (range2.intersectsNode(el)) unwrap(el);
   }
   return true;
 }
 const linkHtml = (href, label, target) => `<a href="${escapeAttr(href)}" target="${target}" rel="noopener noreferrer">${escapeText(label)}</a>`;
 function applyLink(editor, href, text, target = "_blank") {
   const label = text?.trim() || href;
-  const range = getRange(editor);
-  if (!range) return insertHtml(editor, linkHtml(href, label, target));
-  const anchor = (range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer : range.startContainer.parentElement)?.closest("a");
+  const range2 = getRange(editor);
+  if (!range2) return insertHtml(editor, linkHtml(href, label, target));
+  const anchor = (range2.startContainer.nodeType === Node.ELEMENT_NODE ? range2.startContainer : range2.startContainer.parentElement)?.closest("a");
   if (anchor && editor.contains(anchor)) {
     anchor.setAttribute("href", href);
     anchor.setAttribute("target", target);
@@ -6354,9 +6858,9 @@ function applyLink(editor, href, text, target = "_blank") {
     if (text && text !== anchor.textContent) anchor.textContent = text;
     return true;
   }
-  if (!range.collapsed) {
+  if (!range2.collapsed) {
     if (nativeExec("createLink", href)) {
-      const created = (range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer : range.startContainer.parentElement)?.closest("a");
+      const created = (range2.startContainer.nodeType === Node.ELEMENT_NODE ? range2.startContainer : range2.startContainer.parentElement)?.closest("a");
       created?.setAttribute("target", target);
       created?.setAttribute("rel", "noopener noreferrer");
       return true;
@@ -6366,10 +6870,10 @@ function applyLink(editor, href, text, target = "_blank") {
     el.setAttribute("target", target);
     el.setAttribute("rel", "noopener noreferrer");
     try {
-      range.surroundContents(el);
+      range2.surroundContents(el);
     } catch {
-      el.appendChild(range.extractContents());
-      range.insertNode(el);
+      el.appendChild(range2.extractContents());
+      range2.insertNode(el);
     }
     return true;
   }
@@ -6377,9 +6881,9 @@ function applyLink(editor, href, text, target = "_blank") {
 }
 function unlink(editor) {
   if (nativeExec("unlink")) return true;
-  const range = getRange(editor);
-  if (!range) return false;
-  const anchor = (range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer : range.startContainer.parentElement)?.closest("a");
+  const range2 = getRange(editor);
+  if (!range2) return false;
+  const anchor = (range2.startContainer.nodeType === Node.ELEMENT_NODE ? range2.startContainer : range2.startContainer.parentElement)?.closest("a");
   if (anchor && editor.contains(anchor)) {
     unwrap(anchor);
     return true;
@@ -6447,10 +6951,10 @@ function cellPosition(table, cell) {
   }
   return null;
 }
-function selectedCells(table, range) {
+function selectedCells(table, range2) {
   return Array.from(table.querySelectorAll("td,th")).filter((cell) => {
     try {
-      return range.intersectsNode(cell);
+      return range2.intersectsNode(cell);
     } catch {
       return false;
     }
@@ -6462,8 +6966,8 @@ function copyCellAttributes(from, to) {
     to.setAttribute(attr.name, attr.value);
   }
 }
-function mergeSelectedCells(table, range) {
-  const cells = selectedCells(table, range);
+function mergeSelectedCells(table, range2) {
+  const cells = selectedCells(table, range2);
   if (cells.length < 2) return null;
   const { matrix } = tableMatrix(table);
   const positions = cells.map((cell) => ({ cell, position: cellPosition(table, cell) })).filter((item) => Boolean(item.position));
@@ -6846,9 +7350,9 @@ const _FxEditor = class _FxEditor extends FxFormElement {
   mergeCells() {
     const table = __privateMethod(this, _FxEditor_instances, currentTable_fn).call(this);
     const editor = this.editor;
-    const range = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
-    if (!table || !range) return false;
-    const merged = mergeSelectedCells(table, range);
+    const range2 = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
+    if (!table || !range2) return false;
+    const merged = mergeSelectedCells(table, range2);
     if (!merged) return false;
     placeCaretAtEnd(merged);
     __privateMethod(this, _FxEditor_instances, afterCommand_fn).call(this);
@@ -6858,8 +7362,8 @@ const _FxEditor = class _FxEditor extends FxFormElement {
   splitCell() {
     const table = __privateMethod(this, _FxEditor_instances, currentTable_fn).call(this);
     const editor = this.editor;
-    const range = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
-    const cell = editor ? closestInEditor(editor, range?.startContainer ?? null, "td,th") : null;
+    const range2 = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
+    const cell = editor ? closestInEditor(editor, range2?.startContainer ?? null, "td,th") : null;
     if (!table || !cell) return false;
     const created = splitCell(table, cell);
     if (!created.length) return false;
@@ -7119,8 +7623,8 @@ fits_fn = function(extra) {
   const max = this.maxlength;
   if (!max) return true;
   const editor = this.editor;
-  const range = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
-  const selected = range && !range.collapsed ? range.toString().length : 0;
+  const range2 = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
+  const selected = range2 && !range2.collapsed ? range2.toString().length : 0;
   return this.text.length - selected + extra <= max;
 };
 limitError_fn = function() {
@@ -7243,9 +7747,9 @@ bindGlobalSelection_fn = function() {
   const handler = () => {
     const editor = this.editor;
     if (!editor) return;
-    const range = getRange(editor, __privateGet(this, _lastRange));
-    if (!range) return;
-    __privateSet(this, _lastRange, range.cloneRange());
+    const range2 = getRange(editor, __privateGet(this, _lastRange));
+    if (!range2) return;
+    __privateSet(this, _lastRange, range2.cloneRange());
     cancelAnimationFrame(__privateGet(this, _selectionRaf));
     __privateSet(this, _selectionRaf, requestAnimationFrame(() => __privateMethod(this, _FxEditor_instances, updateToolbar_fn).call(this)));
   };
@@ -7370,8 +7874,8 @@ renderToolbar_fn = function() {
 updateToolbar_fn = function() {
   const editor = this.editor;
   if (!editor) return;
-  const range = getRange(editor, __privateGet(this, _lastRange));
-  if (!range) return;
+  const range2 = getRange(editor, __privateGet(this, _lastRange));
+  if (!range2) return;
   const setActive = (cmd, active) => {
     const button = this.root.querySelector(`[data-cmd="${cmd}"]`);
     if (!button) return;
@@ -7379,7 +7883,7 @@ updateToolbar_fn = function() {
     button.setAttribute("aria-pressed", String(active));
   };
   const ancestor = (selector) => {
-    const node = range.startContainer;
+    const node = range2.startContainer;
     const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
     const match = el?.closest(selector);
     return Boolean(match && editor.contains(match));
@@ -7391,7 +7895,7 @@ updateToolbar_fn = function() {
   setActive("code", ancestor("code"));
   setActive("insertUnorderedList", ancestor("ul"));
   setActive("insertOrderedList", ancestor("ol"));
-  const block = getBlock(editor, range);
+  const block = getBlock(editor, range2);
   const blockTag = block?.tagName.toLowerCase() ?? "p";
   const blockSelect = this.root.querySelector("[data-block]");
   if (blockSelect) {
@@ -7635,9 +8139,9 @@ handleKeydown_fn = function(event) {
 tabInTable_fn = function(backwards) {
   const editor = this.editor;
   if (!editor) return false;
-  const range = getRange(editor, __privateGet(this, _lastRange));
-  if (!range) return false;
-  const cell = closestInEditor(editor, range.startContainer, "td,th");
+  const range2 = getRange(editor, __privateGet(this, _lastRange));
+  if (!range2) return false;
+  const cell = closestInEditor(editor, range2.startContainer, "td,th");
   const table = cell?.closest("table");
   if (!cell || !table) return false;
   const cells = Array.from(table.querySelectorAll("td,th"));
@@ -7807,14 +8311,14 @@ openLinkDialog_fn = async function(existing) {
   const editor = this.editor;
   if (!editor) return;
   if (existing) __privateMethod(this, _FxEditor_instances, selectAnchor_fn).call(this, existing);
-  let range = getRange(editor, __privateGet(this, _lastRange));
-  if (!range) {
+  let range2 = getRange(editor, __privateGet(this, _lastRange));
+  if (!range2) {
     placeCaretAtEnd(editor);
-    range = getRange(editor);
-    __privateSet(this, _lastRange, range?.cloneRange() ?? null);
+    range2 = getRange(editor);
+    __privateSet(this, _lastRange, range2?.cloneRange() ?? null);
   }
-  const anchor = existing ?? closestInEditor(editor, range?.startContainer ?? null, "a");
-  const selected = range && !range.collapsed ? range.toString() : anchor?.textContent ?? "";
+  const anchor = existing ?? closestInEditor(editor, range2?.startContainer ?? null, "a");
+  const selected = range2 && !range2.collapsed ? range2.toString() : anchor?.textContent ?? "";
   const result = await __privateMethod(this, _FxEditor_instances, openDialog_fn).call(this, "Link", [
     { name: "url", label: "URL", type: "url", value: anchor?.getAttribute("href") ?? "", placeholder: "https://..." },
     { name: "text", label: "Texto (quando não há seleção)", value: selected, placeholder: "Texto do link" },
@@ -8037,13 +8541,13 @@ selectAnchor_fn = function(anchor) {
   const editor = this.editor;
   if (!editor) return;
   editor.focus({ preventScroll: true });
-  const range = document.createRange();
-  range.selectNodeContents(anchor);
+  const range2 = document.createRange();
+  range2.selectNodeContents(anchor);
   const selection = document.getSelection();
   if (!selection) return;
   selection.removeAllRanges();
-  selection.addRange(range);
-  __privateSet(this, _lastRange, range.cloneRange());
+  selection.addRange(range2);
+  __privateSet(this, _lastRange, range2.cloneRange());
 };
 handleLinkOverlayClick_fn = function(event) {
   const action = event.target.closest("[data-link-action]");
@@ -8314,19 +8818,19 @@ hidePanel_fn = function() {
 currentTable_fn = function() {
   const editor = this.editor;
   if (!editor) return null;
-  const range = getRange(editor, __privateGet(this, _lastRange));
-  return closestInEditor(editor, range?.startContainer ?? null, "table");
+  const range2 = getRange(editor, __privateGet(this, _lastRange));
+  return closestInEditor(editor, range2?.startContainer ?? null, "table");
 };
 tableAction_fn = function(action) {
   const table = __privateMethod(this, _FxEditor_instances, currentTable_fn).call(this);
   if (!table) return;
   const editor = this.editor;
-  const range = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
-  const cell = editor ? closestInEditor(editor, range?.startContainer ?? null, "td,th") : null;
+  const range2 = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
+  const cell = editor ? closestInEditor(editor, range2?.startContainer ?? null, "td,th") : null;
   const row = cell?.parentElement;
   if (action === "merge-cells") {
-    if (!range) return;
-    const merged = mergeSelectedCells(table, range);
+    if (!range2) return;
+    const merged = mergeSelectedCells(table, range2);
     if (!merged) return;
     placeCaretAtEnd(merged);
     __privateMethod(this, _FxEditor_instances, afterCommand_fn).call(this);
@@ -8477,10 +8981,61 @@ function defineFxEditor() {
   return defineElement("fx-editor", FxEditor);
 }
 defineFxEditor();
+const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+function usable(nodes) {
+  return [...nodes].filter(
+    (el) => !el.hasAttribute("disabled") && el.getAttribute("aria-hidden") !== "true" && el.getAttribute("tabindex") !== "-1"
+  );
+}
+function modalFocusables(panel, host) {
+  const shadow = panel.querySelectorAll(FOCUSABLE_SELECTOR);
+  const light = host.querySelectorAll(FOCUSABLE_SELECTOR);
+  return usable([...shadow, ...light]);
+}
+function firstLightFocusable(host) {
+  return usable(host.querySelectorAll(FOCUSABLE_SELECTOR))[0] ?? null;
+}
+const modalStack = [];
+function registerModalOpen(host) {
+  if (!modalStack.includes(host)) modalStack.push(host);
+}
+function registerModalClose(host) {
+  const index = modalStack.indexOf(host);
+  if (index !== -1) modalStack.splice(index, 1);
+}
+function isTopmostModal(host) {
+  if (modalStack.length === 0) return true;
+  return modalStack[modalStack.length - 1] === host;
+}
+let scrollLocks = 0;
+let previousOverflow = "";
+let previousPaddingRight = "";
+function lockBodyScroll() {
+  if (typeof document === "undefined" || !document.body) return;
+  if (scrollLocks === 0) {
+    const body = document.body;
+    previousOverflow = body.style.overflow;
+    previousPaddingRight = body.style.paddingRight;
+    const scrollbar = window.innerWidth - document.documentElement.clientWidth;
+    body.style.overflow = "hidden";
+    if (scrollbar > 0) body.style.paddingRight = `${scrollbar}px`;
+  }
+  scrollLocks += 1;
+}
+function unlockBodyScroll() {
+  if (typeof document === "undefined" || !document.body) return;
+  if (scrollLocks === 0) return;
+  scrollLocks -= 1;
+  if (scrollLocks === 0) {
+    document.body.style.overflow = previousOverflow;
+    document.body.style.paddingRight = previousPaddingRight;
+  }
+}
 const _FxDialog = class _FxDialog extends FxElement {
   constructor() {
     super(...arguments);
     this._previouslyFocused = null;
+    this._locked = false;
   }
   static get observedAttributes() {
     return ["open", "size", "heading"];
@@ -8494,6 +9049,11 @@ const _FxDialog = class _FxDialog extends FxElement {
   render() {
     const isOpen = this.open;
     const heading = this.getAttr("heading");
+    if (!isOpen) {
+      this._release();
+      this.setTemplate("");
+      return;
+    }
     this.setTemplate(`
       <div class="overlay" part="overlay" ${isOpen ? "" : "hidden"}>
         <div class="dialog" role="dialog" aria-modal="true" aria-label="${esc(heading)}" tabindex="-1">
@@ -8512,10 +9072,8 @@ const _FxDialog = class _FxDialog extends FxElement {
     const overlay = this.root.querySelector(".overlay");
     const closeBtn = this.root.querySelector(".close");
     const close = () => {
+      if (!this.open) return;
       this.open = false;
-      this._cleanup?.();
-      this._cleanup = void 0;
-      this._restoreFocus();
       this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
     };
     overlay?.addEventListener("click", (e) => {
@@ -8524,6 +9082,7 @@ const _FxDialog = class _FxDialog extends FxElement {
     closeBtn?.addEventListener("click", close);
     const onKey = (e) => {
       if (e.key === "Escape") {
+        if (!isTopmostModal(this)) return;
         e.stopPropagation();
         close();
         return;
@@ -8532,29 +9091,48 @@ const _FxDialog = class _FxDialog extends FxElement {
     };
     document.addEventListener("keydown", onKey);
     this._cleanup = () => document.removeEventListener("keydown", onKey);
-    requestAnimationFrame(() => {
-      this._previouslyFocused = document.activeElement;
-      this.root.querySelector(".dialog")?.focus();
-    });
+    const alreadyOpen = this._locked;
+    if (!this._locked) {
+      lockBodyScroll();
+      registerModalOpen(this);
+      this._locked = true;
+    }
+    if (!alreadyOpen) {
+      requestAnimationFrame(() => {
+        if (!this.open) return;
+        this._previouslyFocused = document.activeElement;
+        const first = firstLightFocusable(this) ?? this.root.querySelector(".dialog");
+        first?.focus();
+      });
+    }
     this.dispatchEvent(new CustomEvent("open", { bubbles: true, composed: true }));
   }
-  /** Mantém o foco dentro do modal (WCAG 2.4.3 / 2.1.2). */
+  /** Desfaz listeners, foco e scroll lock ao fechar/desconectar. */
+  _release() {
+    this._cleanup?.();
+    this._cleanup = void 0;
+    registerModalClose(this);
+    if (this._locked) {
+      unlockBodyScroll();
+      this._locked = false;
+    }
+    this._restoreFocus();
+  }
+  /** Mantém o foco dentro do modal (WCAG 2.4.3 / 2.1.2), incluindo o slot. */
   _trapFocus(e) {
     const dialog = this.root.querySelector(".dialog");
     if (!dialog) return;
-    const focusables = dialog.querySelectorAll(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
+    const focusables = modalFocusables(dialog, this);
     if (!focusables.length) return;
     const first = focusables[0];
     const last = focusables[focusables.length - 1];
-    const active = this.root.activeElement;
-    if (e.shiftKey && (active === first || active === dialog)) {
+    const active = this.root.activeElement ?? document.activeElement;
+    if (e.shiftKey && (active === first || active === dialog || active === this)) {
       e.preventDefault();
-      last.focus();
+      last?.focus();
     } else if (!e.shiftKey && active === last) {
       e.preventDefault();
-      first.focus();
+      first?.focus();
     }
   }
   _restoreFocus() {
@@ -8563,9 +9141,7 @@ const _FxDialog = class _FxDialog extends FxElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._cleanup?.();
-    this._cleanup = void 0;
-    this._restoreFocus();
+    this._release();
   }
 };
 _FxDialog.styles = css`
@@ -8971,7 +9547,35 @@ const _FxFileUpload = class _FxFileUpload extends FxFormElement {
     return this.getAttr("value");
   }
   set value(v) {
-    this.setAttribute("value", v);
+    this.setAttribute("value", v == null ? "" : String(v));
+  }
+  get disabled() {
+    return this.hasAttr("disabled");
+  }
+  set disabled(v) {
+    this.toggleAttr("disabled", Boolean(v));
+  }
+  get multiple() {
+    return this.hasAttr("multiple");
+  }
+  set multiple(v) {
+    this.toggleAttr("multiple", Boolean(v));
+  }
+  get full() {
+    return this.hasAttr("full");
+  }
+  set full(v) {
+    this.toggleAttr("full", Boolean(v));
+  }
+  /**
+   * Nome literal: o Vue NÃO cameliza atributos em elementos customizados,
+   * então `:show-progress` procura a propriedade `'show-progress'`.
+   */
+  get "show-progress"() {
+    return this.hasAttr("show-progress");
+  }
+  set "show-progress"(v) {
+    this.toggleAttr("show-progress", Boolean(v));
   }
   get progress() {
     return Math.min(100, Math.max(0, Number(this.getAttr("progress", "0")) || 0));
@@ -9652,6 +10256,9 @@ const _FxAvatar = class _FxAvatar extends FxElement {
   get variant() {
     return this.getAttr("variant", "text");
   }
+  set variant(v) {
+    this.setAttribute("variant", v);
+  }
   get src() {
     return this.getAttr("src");
   }
@@ -9755,6 +10362,18 @@ const _FxIcon = class _FxIcon extends FxElement {
     if (value) this.setAttribute("label", value);
     else this.removeAttribute("label");
   }
+  get fill() {
+    return this.hasAttr("fill");
+  }
+  set fill(value) {
+    this.toggleAttr("fill", Boolean(value));
+  }
+  get bold() {
+    return this.hasAttr("bold");
+  }
+  set bold(value) {
+    this.toggleAttr("bold", Boolean(value));
+  }
   connectedCallback() {
     loadFenixIconsFont();
     super.connectedCallback();
@@ -9801,6 +10420,12 @@ const _FxCard = class _FxCard extends FxElement {
   static get observedAttributes() {
     return ["variant", "radius", "size", "padded", "heading"];
   }
+  get padded() {
+    return this.hasAttr("padded");
+  }
+  set padded(value) {
+    this.toggleAttr("padded", Boolean(value));
+  }
   render() {
     const heading = this.getAttr("heading");
     this.setTemplate(`
@@ -12321,6 +12946,40 @@ const _FxTabs = class _FxTabs extends FxElement {
   set value(value) {
     this.setAttribute("value", value);
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this._observeLightDom();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._lightObserver?.disconnect();
+    this._siblingObserver?.disconnect();
+    this._lightObserver = void 0;
+    this._siblingObserver = void 0;
+  }
+  _observeLightDom() {
+    this._lightObserver?.disconnect();
+    this._lightObserver = new MutationObserver(() => this.render());
+    this._lightObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["tab", "disabled"]
+    });
+    this._siblingObserver?.disconnect();
+    const parent = this.parentNode;
+    if (parent) {
+      this._siblingObserver = new MutationObserver((mutations) => {
+        const affectsPanels = mutations.some(
+          (m) => [...m.addedNodes, ...m.removedNodes].some(
+            (node) => node.nodeType === Node.ELEMENT_NODE && (node.matches("fx-tab-panel") || Boolean(node.querySelector("fx-tab-panel")))
+          )
+        );
+        if (affectsPanels) this.render();
+      });
+      this._siblingObserver.observe(parent, { childList: true });
+    }
+  }
   render() {
     const tabs = Array.from(this.querySelectorAll("fx-tab"));
     const active = this.value || tabs[0]?.getAttribute("tab") || "";
@@ -12849,10 +13508,11 @@ const _FxDrawer = class _FxDrawer extends FxElement {
     this._onKeydown = () => {
     };
     this._previouslyFocused = null;
+    this._locked = false;
+    this._wasOpen = false;
     this._close = () => {
       if (!this.open) return;
       this.open = false;
-      this._restoreFocus();
       this.dispatchEvent(
         new CustomEvent("close", { bubbles: true, composed: true })
       );
@@ -12882,6 +13542,8 @@ const _FxDrawer = class _FxDrawer extends FxElement {
   }
   render() {
     const title = this.getAttr("title");
+    const wasOpen = this._wasOpen;
+    this._wasOpen = this.open;
     this.setTemplate(`
       <div class="overlay" part="overlay"></div>
       <div class="panel" part="panel" role="dialog" aria-modal="true" aria-label="${esc(title || "Drawer")}" tabindex="-1">
@@ -12892,20 +13554,40 @@ const _FxDrawer = class _FxDrawer extends FxElement {
     this.root.querySelector(".overlay")?.addEventListener("click", this._close);
     this.root.querySelector(".close")?.addEventListener("click", this._close);
     if (this.open) {
-      requestAnimationFrame(() => {
-        if (this._previouslyFocused === null) {
+      if (!this._locked) {
+        lockBodyScroll();
+        registerModalOpen(this);
+        this._locked = true;
+      }
+      if (!wasOpen) {
+        requestAnimationFrame(() => {
+          if (!this.open) return;
           this._previouslyFocused = document.activeElement;
-        }
-        this.root.querySelector(".panel")?.focus();
-      });
+          const first = firstLightFocusable(this) ?? this.root.querySelector(".panel");
+          first?.focus();
+        });
+      }
+    } else {
+      this._release();
+    }
+  }
+  /** Desfaz scroll lock e restaura o foco ao fechar/desconectar. */
+  _release() {
+    registerModalClose(this);
+    if (this._locked) {
+      unlockBodyScroll();
+      this._locked = false;
     }
+    this._restoreFocus();
   }
   connectedCallback() {
     super.connectedCallback?.();
     this._onKeydown = (e) => {
-      if (e.key === "Escape" && this.open) {
+      if (!this.open) return;
+      if (e.key === "Escape") {
+        if (!isTopmostModal(this)) return;
         this._close();
-      } else if (e.key === "Tab" && this.open) {
+      } else if (e.key === "Tab") {
         this._trapFocus(e);
       }
     };
@@ -12913,26 +13595,24 @@ const _FxDrawer = class _FxDrawer extends FxElement {
   }
   disconnectedCallback() {
     document.removeEventListener("keydown", this._onKeydown);
-    this._restoreFocus();
+    this._release();
     super.disconnectedCallback?.();
   }
-  /** Mantém o foco dentro do drawer (WCAG 2.4.3 / 2.1.2). */
+  /** Mantém o foco dentro do drawer (WCAG 2.4.3 / 2.1.2), incluindo o slot. */
   _trapFocus(e) {
     const panel = this.root.querySelector(".panel");
     if (!panel) return;
-    const focusables = panel.querySelectorAll(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
+    const focusables = modalFocusables(panel, this);
     if (!focusables.length) return;
     const first = focusables[0];
     const last = focusables[focusables.length - 1];
-    const active = this.root.activeElement;
-    if (e.shiftKey && (active === first || active === panel)) {
+    const active = this.root.activeElement ?? document.activeElement;
+    if (e.shiftKey && (active === first || active === panel || active === this)) {
       e.preventDefault();
-      last.focus();
+      last?.focus();
     } else if (!e.shiftKey && active === last) {
       e.preventDefault();
-      first.focus();
+      first?.focus();
     }
   }
   _restoreFocus() {
@@ -13101,17 +13781,16 @@ const _FxPagination = class _FxPagination extends FxElement {
     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((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);
+    const pageButtons = pageRange(current, pages).map(
+      (item) => item === "ellipsis" ? `<span class="ellipsis" part="ellipsis" aria-hidden="true">…</span>` : `<button type="button" class="nav ${item === current ? "active" : ""}" part="page" data-go="${item}"${item === current ? ' aria-current="page"' : ""}>${item}</button>`
+    ).join("");
+    const from = (current - 1) * this.rows + 1;
     const to = Math.min(current * this.rows, this.total);
     this.setTemplate(`
       <span class="info">${this.total ? `${from}-${to} de ${this.total}` : "0 itens"}</span>
       <button type="button" class="nav" part="first" aria-label="Primeira página" data-go="1" ${current <= 1 ? "disabled" : ""}>${fenixIconHtml("first_page")}</button>
       <button type="button" class="nav" part="prev" aria-label="Página anterior" data-go="${current - 1}" ${current <= 1 ? "disabled" : ""}>${fenixIconHtml("navigate_before")}</button>
-      ${window_[0] !== 1 && pages > 5 ? `<button type="button" class="nav" data-go="1">1</button>` : ""}
-      ${window_.map((p) => `<button type="button" class="nav ${p === current ? "active" : ""}" data-go="${p}">${p}</button>`).join("")}
-      ${window_[window_.length - 1] !== pages && pages > 5 ? `<button type="button" class="nav" data-go="${pages}">${pages}</button>` : ""}
+      ${pageButtons}
       <button type="button" class="nav" part="next" aria-label="Próxima página" data-go="${current + 1}" ${current >= pages ? "disabled" : ""}>${fenixIconHtml("navigate_next")}</button>
       <button type="button" class="nav" part="last" aria-label="Última página" data-go="${pages}" ${current >= pages ? "disabled" : ""}>${fenixIconHtml("last_page")}</button>
       ${opts.length ? `
@@ -13119,9 +13798,6 @@ const _FxPagination = class _FxPagination extends FxElement {
           ${opts.map((o) => `<option value="${esc(o)}">${esc(o)}</option>`).join("")}
         </fx-select>` : ""}
     `);
-    function total0(page, rows) {
-      return (page - 1) * rows + 1;
-    }
     this.root.querySelectorAll(".nav[data-go]").forEach((btn) => {
       btn.addEventListener("click", () => {
         const target = Number(btn.dataset.go);
@@ -13153,6 +13829,7 @@ _FxPagination.styles = css`
     :host {
       display: flex;
       align-items: center;
+      flex-wrap: wrap;
       gap: var(--fx-space-sm);
       font-family: var(--fx-font-family);
       font-size: var(--fx-font-size);
@@ -13190,6 +13867,18 @@ _FxPagination.styles = css`
       color: #fff;
       font-weight: 600;
     }
+    /* Elipse entre a janela de páginas e as bordas: ocupa o mesmo espaço de
+       um botão (para o rodapé não "pular" ao navegar) mas não é clicável. */
+    .ellipsis {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--fx-size-sm);
+      height: var(--fx-size-sm);
+      color: var(--fx-text-muted);
+      font-size: calc(var(--fx-font-size) - 2px);
+      user-select: none;
+    }
     .info { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); }
     fx-select { vertical-align: middle; }
     fx-select::part(trigger) {
@@ -13216,11 +13905,17 @@ const _FxAutocomplete = class _FxAutocomplete extends FxFormElement {
   set size(v) {
     this.setAttribute("size", v);
   }
+  get disabled() {
+    return this.hasAttr("disabled");
+  }
+  set disabled(v) {
+    this.toggleAttr("disabled", Boolean(v));
+  }
   get value() {
     return this.getAttr("value");
   }
   set value(v) {
-    this.setAttribute("value", v);
+    this.setAttribute("value", v == null ? "" : String(v));
     this.syncInternalControl();
     this.updateFormValue();
   }
@@ -13525,8 +14220,8 @@ const _FxKnob = class _FxKnob extends FxFormElement {
     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 range2 = max - min;
+    const pct = range2 > 0 ? (value - min) / range2 : 0;
     const sizeNum = this.getSizeNum();
     const strokeW = this.strokeWidth;
     const radius = (sizeNum - strokeW) / 2;
@@ -13754,6 +14449,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   static get observedAttributes() {
     return [
       "data",
+      "items",
       "data-key",
       "filter",
       "filter-by",
@@ -13767,13 +14463,35 @@ const _FxOrderList = class _FxOrderList extends FxElement {
     ];
   }
   set data(value) {
-    this._data = value;
+    this._data = Array.isArray(value) ? value : [];
     this._filteredData = null;
     this.render();
   }
   get data() {
     return this._data;
   }
+  /**
+   * Alias de `data` para o binding do Vue/React: `data` colide com a
+   * tipagem nativa de atributos HTML (`dataset`/`data-*`) e não reflete em
+   * atributo. `items` funciona como propriedade e como atributo JSON.
+   */
+  get items() {
+    return this._data;
+  }
+  set items(value) {
+    const list = Array.isArray(value) ? value : [];
+    this._data = list;
+    this._filteredData = null;
+    const json = (() => {
+      try {
+        return JSON.stringify(list);
+      } catch {
+        return null;
+      }
+    })();
+    if (json !== null && this.getAttr("items") !== json) this.setAttribute("items", json);
+    else if (this.isConnected) this.render();
+  }
   set selection(value) {
     this._selection = value;
     this.render();
@@ -13853,7 +14571,16 @@ const _FxOrderList = class _FxOrderList extends FxElement {
     super.connectedCallback();
   }
   attributeChangedCallback(name, oldValue, newValue) {
-    if (this.getAttr("data", "") !== "") {
+    if (name === "items") {
+      try {
+        const parsed = JSON.parse(newValue ?? "[]");
+        this._data = Array.isArray(parsed) ? parsed : [];
+        this._filteredData = null;
+      } catch {
+        this._data = [];
+        this._filteredData = null;
+      }
+    } else if (this.getAttr("data", "") !== "") {
       this._parseDataAttribute();
     }
     super.attributeChangedCallback(name, oldValue, newValue);