@wrrdev/fenix-ui 1.1.16 → 1.2.0

package/dist/fenix-ui4.esm.js

@@ -73,6 +73,14 @@ const lightTokens = {
     /** Brilho dos estados `success`/`valid` — acompanha `focus-ring` igualmente. */
     "success-ring": "0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent)"
   },
+  table: {
+    /** Cor do corpo do fx-table; `var()` mantém claro/escuro automáticos. */
+    text: "var(--fx-text-default)",
+    /** Cabeçalho acompanha o corpo por padrão. */
+    "header-text": "var(--fx-table-text)",
+    /** O UA aplica bold no <th>; aqui o valor fica explícito e tokenizado. */
+    "header-weight": "bold"
+  },
   z: { base: "auto", dropdown: "1000", modal: "1100", toast: "1200" }
 };
 const darkTokens = {
@@ -99,6 +107,7 @@ const darkTokens = {
   },
   motion: { ...lightTokens.motion },
   effect: { ...lightTokens.effect },
+  table: { ...lightTokens.table },
   z: { ...lightTokens.z }
 };
 const defaultTokens = lightTokens;
@@ -506,6 +515,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 +700,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 +791,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 +819,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 +830,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 +856,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 +883,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 +892,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 +936,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 +968,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 +990,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 +1022,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 +1102,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 +1122,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 +1250,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 +1320,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 +1354,8 @@ const _FxInput = class _FxInput extends FxFormElement {
       "min",
       "max",
       "step",
+      "clearable",
+      "full",
       "icon",
       "icon-pos",
       "error",
@@ -1234,7 +1383,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 +1393,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 +1441,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 +1477,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 +1675,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 +1794,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 +1818,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 +1842,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 +1871,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 +1895,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 +1919,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 +1947,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 +2730,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 +2775,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 +2795,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 +2804,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 +2853,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 +2971,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 +2987,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 +3031,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 +3096,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 +3292,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 +3321,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 +3334,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 +3406,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 +3416,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 +3463,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 +3496,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 +3514,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 +3602,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;
@@ -3805,6 +4115,7 @@ const _FxTable = class _FxTable extends FxElement {
     this.sortDir = 1;
     this.filters = {};
     this.globalSearch = "";
+    this._boundToolbarInputs = /* @__PURE__ */ new WeakSet();
     this._shellKey = "";
   }
   static get observedAttributes() {
@@ -3852,6 +4163,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);
@@ -3935,7 +4284,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();
@@ -4017,7 +4373,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 ? "⇅" : "";
@@ -4040,7 +4403,7 @@ const _FxTable = class _FxTable extends FxElement {
         <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>
@@ -4061,13 +4424,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">
@@ -4128,21 +4493,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;
@@ -4195,11 +4549,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`
@@ -4277,6 +4667,13 @@ _FxTable.styles = css`
 			border-bottom: 2px solid var(--fx-border-default);
 			white-space: nowrap;
 			user-select: none;
+			/* Cor/peso do cabeçalho por token de TABELA. Sem isso o th herda
+			   --fx-text-default do host e o peso vem do UA (bold). */
+			color: var(
+				--fx-table-header-text,
+				var(--fx-table-text, var(--fx-text-default))
+			);
+			font-weight: var(--fx-table-header-weight, bold);
 		}
 		th.sortable {
 			cursor: pointer;
@@ -4321,6 +4718,12 @@ _FxTable.styles = css`
 		td {
 			padding: var(--fx-space-sm) var(--fx-space-md);
 			border-bottom: 1px solid var(--fx-border-default);
+			/* Texto do corpo: token próprio para não depender de
+			   --fx-text-default (que afeta TODOS os textos do app) e para
+			   não herdar o font-weight do body da página — era isso que
+			   fazia a célula parecer mais clara que o cabeçalho. */
+			color: var(--fx-table-text, var(--fx-text-default));
+			font-weight: var(--fx-table-text-weight, inherit);
 		}
 		tbody tr {
 			cursor: pointer;
@@ -4455,6 +4858,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;
@@ -4505,7 +4913,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();
@@ -4548,7 +5000,10 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.cancelScheduledSync();
     this.observer?.disconnect();
+    this._labelObserver?.disconnect();
+    this._labelObserver = void 0;
   }
   /** Campo de controle = qualquer filho direto que não seja label. */
   findControl() {
@@ -4575,14 +5030,28 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
     }
     if (this.listenersReady) return;
     this.listenersReady = true;
-    this.addEventListener("focusin", () => this.syncState());
-    this.addEventListener(
-      "focusout",
-      () => setTimeout(() => this.syncState(), 60)
-    );
+    this.addEventListener("focusin", () => {
+      this.cancelScheduledSync();
+      this.syncState();
+    });
+    this.addEventListener("focusout", () => this.scheduleSync());
     this.addEventListener("input", () => this.syncState());
     this.addEventListener("change", () => this.syncState());
   }
+  /** Reavalia o estado no próximo tick (o foco já saiu do campo). */
+  scheduleSync() {
+    this.cancelScheduledSync();
+    this._syncTimer = setTimeout(() => {
+      this._syncTimer = void 0;
+      this.syncState();
+    }, 0);
+  }
+  cancelScheduledSync() {
+    if (this._syncTimer !== void 0) {
+      clearTimeout(this._syncTimer);
+      this._syncTimer = void 0;
+    }
+  }
   /** Observa mudanças de atributos do controle (value, open, values...). */
   syncControlReference(control = this.targetControl) {
     if (control !== this.targetControl) {
@@ -4615,18 +5084,16 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
     const c = this.targetControl;
     const attrValue = c.getAttribute ? (c.getAttribute("value") ?? "").trim() : "";
     const attrValues = c.getAttribute ? (c.getAttribute("values") ?? "").trim() : "";
+    const isOpen = Boolean(c.hasAttribute?.("open"));
     const hasValue = Boolean(
-      typeof c.value === "string" && c.value.trim() !== "" || Array.isArray(c.values) && c.values.length > 0 || attrValue !== "" || attrValues !== "" || c.hasAttribute && (c.hasAttribute("open") || c.hasAttribute("start"))
+      typeof c.value === "string" && c.value.trim() !== "" || Array.isArray(c.values) && c.values.length > 0 || attrValue !== "" || attrValues !== "" || c.hasAttribute && c.hasAttribute("start")
     );
     const focused = this.isFocusedInside();
-    if (hasValue || focused) {
-      this.setAttribute("active", "");
-      if (focused) this.setAttribute("focus", "");
-      else this.removeAttribute("focus");
-    } else {
-      this.removeAttribute("active");
-      this.removeAttribute("focus");
-    }
+    const highlighted = focused || isOpen;
+    if (hasValue || highlighted) this.setAttribute("active", "");
+    else this.removeAttribute("active");
+    if (highlighted) this.setAttribute("focus", "");
+    else this.removeAttribute("focus");
   }
   /**
    * variant="in" + ícone à esquerda dentro do campo (fx-input icon):
@@ -4704,6 +5171,10 @@ _FxFloatlabel.styles = css`
 			font-family: var(--fx-font-family);
 			font-size: var(--fx-font-size);
 			vertical-align: middle;
+			/* Cor da label em UM único lugar. active (valor OU foco OU
+			   dropdown) só posiciona; focus (foco OU dropdown) só destaca —
+			   assim a label acompanha a borda, que só fica primária em foco. */
+			--_flabel-color: var(--fx-text-muted, #94a3b8);
 		}
 		/* Full width: o host estica até o pai; o controle interno com
 		   atributo full (ou largura herdada) acompanha. */
@@ -4735,7 +5206,7 @@ _FxFloatlabel.styles = css`
 			transform: translateY(-50%);
 			font-size: calc(var(--fx-font-size, 14px) - 3px);
 			font-weight: 600;
-			color: var(--fx-text-muted, #94a3b8);
+			color: var(--_flabel-color);
 			background-color: var(--fx-surface-background, #fff);
 			padding: 0 4px;
 			line-height: 1;
@@ -4753,8 +5224,11 @@ _FxFloatlabel.styles = css`
 				color var(--fx-motion-duration-normal, 180ms)
 					var(--fx-motion-easing, ease-in-out);
 		}
-		:host([active]) .flabel {
-			color: var(--fx-color-primary, #4f46e5);
+		/* Destacada = foco (ou dropdown aberto). NÃO usar [active]: ele
+		   também é verdadeiro com valor e sem foco — era o que deixava a
+		   label primária com a borda neutra. */
+		:host([focus]) {
+			--_flabel-color: var(--fx-color-primary, #4f46e5);
 		}
 
 		/* ---- variant="in": label como placeholder dentro, sobe ao focar/valor ---- */
@@ -4773,7 +5247,8 @@ _FxFloatlabel.styles = css`
 			font-weight: 600;
 			background-color: var(--fx-surface-background, #fff);
 			padding: 0 5px;
-			color: var(--fx-color-primary, #4f46e5);
+			/* Sem color aqui: a especificidade desta regra
+			   (variant + active) venceria :host([error])/:host([focus]). */
 		}
 
 		/* ---- variant="in" com ícone dentro do campo (fx-input icon):
@@ -4804,16 +5279,22 @@ _FxFloatlabel.styles = css`
 			font-size: calc(var(--fx-font-size, 14px) - 3px);
 			font-weight: 600;
 			white-space: normal;
+			/* Fora do campo, a label pode receber clique: o listener do
+			   render() foca o controle (nas variantes on/in o
+			   pointer-events: none é intencional, para não bloquear a borda). */
+			pointer-events: auto;
 		}
 
-		/* ---- estados de erro / sucesso ---- */
-		:host([error]) .flabel,
-		:host([invalid]) .flabel {
-			color: var(--fx-color-danger, #dc2626);
+		/* ---- estados de erro / sucesso ----
+		   Declarados DEPOIS de :host([focus]) e com a mesma especificidade:
+		   a validação vence o foco pela ordem, sem depender de acidente. */
+		:host([error]),
+		:host([invalid]) {
+			--_flabel-color: var(--fx-color-danger, #dc2626);
 		}
-		:host([success]) .flabel,
-		:host([valid]) .flabel {
-			color: var(--fx-color-success, #10b981);
+		:host([success]),
+		:host([valid]) {
+			--_flabel-color: var(--fx-color-success, #10b981);
 		}
 
 		/* ---- mensagem de erro sob o campo (fonte menor) ---- */
@@ -4838,7 +5319,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");
@@ -4851,10 +5332,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");
@@ -4871,20 +5364,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();
   }
@@ -8530,10 +9030,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"];
@@ -8547,6 +9098,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">
@@ -8565,10 +9121,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) => {
@@ -8577,6 +9131,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;
@@ -8585,29 +9140,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() {
@@ -8616,9 +9190,7 @@ const _FxDialog = class _FxDialog extends FxElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._cleanup?.();
-    this._cleanup = void 0;
-    this._restoreFocus();
+    this._release();
   }
 };
 _FxDialog.styles = css`
@@ -9024,7 +9596,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));
@@ -9705,6 +10305,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");
   }
@@ -9808,6 +10411,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();
@@ -9854,6 +10469,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(`
@@ -12374,6 +12995,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") || "";
@@ -12902,10 +13557,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 })
       );
@@ -12935,6 +13591,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">
@@ -12945,20 +13603,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);
       }
     };
@@ -12966,26 +13644,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() {
@@ -13278,11 +13954,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();
   }
@@ -13816,6 +14498,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   static get observedAttributes() {
     return [
       "data",
+      "items",
       "data-key",
       "filter",
       "filter-by",
@@ -13829,13 +14512,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();
@@ -13915,7 +14620,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);