@wrrdev/fenix-ui 1.1.12 → 1.1.14

package/dist/fenix-ui4.esm.js

@@ -4,7 +4,7 @@ var __typeError = (msg) => {
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _FxToast_instances, syncProgress_fn, render_fn;
+var _FxToast_instances, wirePause_fn, startTimer_fn, pauseTimer_fn, resumeTimer_fn, syncProgress_fn, render_fn, syncMore_fn;
 import { a as FENIX_ICON_BASE_CSS, f as fenixIconHtml, g as esc, l as loadFenixIconsFont, i as isFenixIconName } from "./assets/font-DPeWTz-n.js";
 import { h, j } from "./assets/font-DPeWTz-n.js";
 const lightTokens = {
@@ -167,15 +167,16 @@ const FenixUI = {
   tokenCssVars,
   deepMerge
 };
+const DEFAULT_PRESET = "ikki";
 const registry = /* @__PURE__ */ new Map();
 function register(preset) {
   registry.set(preset.name, preset);
   return preset;
 }
 const themePresets = {
-  fenix: register({
-    name: "fenix",
-    label: "Fenix (padrão)",
+  ikki: register({
+    name: "ikki",
+    label: "Ikki (padrão)",
     tokens: { effect: { "focus-ring": "none" } }
   }),
   seiya: register({
@@ -237,19 +238,6 @@ const themePresets = {
       radius: { sm: "10px", md: "14px", lg: "20px" }
     }
   }),
-  ikki: register({
-    name: "ikki",
-    label: "Ikki",
-    tokens: {
-      color: {
-        primary: "#ea580c",
-        secondary: "#fb923c",
-        danger: "#dc2626",
-        warning: "#f59e0b"
-      },
-      radius: { sm: "2px", md: "4px", lg: "6px" }
-    }
-  }),
   aiolia: register({
     name: "aiolia",
     label: "Aiolia",
@@ -274,7 +262,7 @@ function defineCustomPreset(name, label, tokens) {
   return register({ name, label, tokens });
 }
 function applyPreset(presetName, mode = "light") {
-  const preset = registry.get(presetName) ?? registry.get("fenix");
+  const preset = registry.get(presetName) ?? registry.get(DEFAULT_PRESET);
   const state = configure({ theme: mode, tokens: preset.tokens });
   return { ...state, preset: preset.name };
 }
@@ -290,7 +278,9 @@ const _FxElement = class _FxElement extends HTMLElement {
   }
   constructor() {
     super();
-    this.root = this.attachShadow({ mode: "open" });
+    this.root = this.attachShadow(
+      this.constructor.shadowOptions
+    );
   }
   /** Chamado quando um atributo observado muda. */
   attributeChangedCallback(_name, _oldValue, _newValue) {
@@ -320,7 +310,132 @@ const _FxElement = class _FxElement extends HTMLElement {
   }
 };
 _FxElement.styles = "";
+_FxElement.shadowOptions = { mode: "open" };
 let FxElement = _FxElement;
+const _FxFormElement = class _FxFormElement extends FxElement {
+  constructor() {
+    super();
+    this._initialValue = "";
+    this._initialCaptured = false;
+    this._autofocused = false;
+    this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+  }
+  /** Nome do campo no FormData (atributo `name`, como no nativo). */
+  get name() {
+    return this.getAttribute("name") ?? "";
+  }
+  /** Form ao qual o componente está associado (null se fora de um form). */
+  get form() {
+    return this.internals?.form ?? this.closest("form");
+  }
+  get type() {
+    return this.localName;
+  }
+  get willValidate() {
+    return this.internals?.willValidate ?? false;
+  }
+  get validity() {
+    return this.internals?.validity ?? null;
+  }
+  get validationMessage() {
+    return this.internals?.validationMessage ?? "";
+  }
+  get labels() {
+    return this.internals?.labels ?? this.childNodes;
+  }
+  checkValidity() {
+    return this.internals?.checkValidity?.() ?? true;
+  }
+  reportValidity() {
+    return this.internals?.reportValidity?.() ?? true;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this._initialCaptured) {
+      this._initialCaptured = true;
+      this._initialValue = this.getAttr("value");
+    }
+    this.updateFormValue();
+    if (!this._autofocused && this.hasAttr("autofocus")) {
+      this._autofocused = true;
+      queueMicrotask(() => {
+        if (this.isConnected && this.hasAttr("autofocus")) this.focusInnerControl();
+      });
+    }
+  }
+  /**
+   * Foca o controle interno: primeiro o HOST (com `delegatesFocus` o browser
+   * repassa ao controle interno) e, se nada for focado (ex.: ambientes sem
+   * delegatesFocus, como jsdom nos testes), o primeiro focável do shadow.
+   */
+  focusInnerControl() {
+    this.focus();
+    if (!this.root.activeElement) {
+      const first = this.root.querySelector(
+        'input, textarea, button, select, [tabindex]:not([tabindex="-1"])'
+      );
+      first?.focus();
+    }
+  }
+  /**
+   * Valor publicado no FormData. Sobrescreva quando o valor NÃO é o atributo
+   * `value` (checkbox/switch enviariam `value || 'on'` quando marcados,
+   * seleção múltipla enviaria várias entradas, fileupload enviaria arquivos).
+   */
+  getFormValue() {
+    return this.getAttr("value") || null;
+  }
+  /**
+   * Sincroniza o campo interno, publica name/value no form (ElementInternals)
+   * e emite `input` (v-model do Vue) + `valueChange` ([(value)] do Angular).
+   *
+   * Chame quando o valor mudar — junto do evento semântico (`change`,
+   * `select`, ...) que o componente já dispara. `detail` opcional complementa
+   * o payload (ex.: { start, end } do fx-datepicker).
+   */
+  emitValueEvents(detail) {
+    const value = this.getAttr("value");
+    this.syncInternalControl();
+    this.updateFormValue();
+    const payload = { value, ...detail };
+    for (const type of ["input", "valueChange"]) {
+      this.dispatchEvent(
+        new CustomEvent(type, { bubbles: true, composed: true, detail: payload })
+      );
+    }
+  }
+  /** Sincroniza name/value com o form (ElementInternals). */
+  updateFormValue() {
+    if (!this.internals || typeof this.internals.setFormValue !== "function") return;
+    this.internals.setFormValue(this.getFormValue());
+  }
+  /**
+   * <form disabled>/<fieldset disabled>: espelha no atributo `disabled`
+   * observado — o re-render desabilita o controle interno.
+   */
+  formDisabledCallback(disabled) {
+    if (disabled) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
+  /** form.reset(): restaura o valor inicial e sincroniza o campo interno. */
+  formResetCallback() {
+    this.setAttribute("value", this._initialValue);
+    this.syncInternalControl();
+    this.updateFormValue();
+  }
+  /**
+   * Hook: empurra o valor atual do atributo `value` para o controle interno
+   * SEM re-renderizar (componentes com campo nativo interno sobrescrevem).
+   */
+  syncInternalControl() {
+  }
+};
+_FxFormElement.formAssociated = true;
+_FxFormElement.shadowOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
+let FxFormElement = _FxFormElement;
 function defineElement(tag, ctor) {
   if (typeof customElements !== "undefined" && !customElements.get(tag)) {
     customElements.define(tag, ctor);
@@ -330,7 +445,7 @@ function defineElement(tag, ctor) {
 const FX_JSX_TYPES = true;
 const _FxButton = class _FxButton extends FxElement {
   constructor() {
-    super(...arguments);
+    super();
     this.spawnRipple = (event) => {
       if (this.hasAttr("disabled") || this.hasAttr("loading")) return;
       const enabled = getComputedStyle(this).getPropertyValue("--fx-effect-ripple").trim();
@@ -347,10 +462,20 @@ const _FxButton = class _FxButton extends FxElement {
       btn.appendChild(ripple);
       ripple.addEventListener("animationend", () => ripple.remove());
     };
+    this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
   }
   static get observedAttributes() {
     return ["variant", "size", "disabled", "loading", "type", "full", "icon", "icon-pos"];
   }
+  /** Form ao qual o botão está associado (null se fora de um form). */
+  get form() {
+    return this.internals?.form ?? this.closest("form");
+  }
+  /** <form disabled>/<fieldset disabled>: espelha no atributo observado. */
+  formDisabledCallback(disabled) {
+    if (disabled) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
   /** Tamanho. Padrão: `'md'`. */
   get size() {
     const s = this.getAttr("size", "md");
@@ -406,6 +531,13 @@ const _FxButton = class _FxButton extends FxElement {
     }
     if (loading) btn.setAttribute("aria-busy", "true");
     else btn.removeAttribute("aria-busy");
+    if (btnType === "submit" || btnType === "reset") {
+      btn.addEventListener("click", () => {
+        if (this.hasAttr("disabled") || this.hasAttr("loading")) return;
+        if (btnType === "submit" && this.form) this.form.requestSubmit();
+        else if (btnType === "reset" && this.form) this.form.reset();
+      });
+    }
   }
   connectedCallback() {
     super.connectedCallback();
@@ -416,6 +548,8 @@ const _FxButton = class _FxButton extends FxElement {
     this.removeEventListener("pointerdown", this.spawnRipple);
   }
 };
+_FxButton.formAssociated = true;
+_FxButton.shadowOptions = { mode: "open", delegatesFocus: true };
 _FxButton.styles = css`
     ${FENIX_ICON_BASE_CSS}
     :host {
@@ -619,11 +753,11 @@ function defineFxSpinner() {
   return defineElement("fx-spinner", FxSpinner);
 }
 defineFxSpinner();
-const _FxSelect = class _FxSelect extends FxElement {
+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.
   static get observedAttributes() {
-    return ["size", "disabled", "placeholder", "searchable", "clearable", "error", "invalid", "success", "valid"];
+    return ["size", "disabled", "placeholder", "searchable", "clearable", "error", "invalid", "success", "valid", "placement"];
   }
   /** Tamanho do campo. Padrão: `'md'`. */
   get size() {
@@ -638,6 +772,7 @@ const _FxSelect = class _FxSelect extends FxElement {
   }
   set value(value) {
     this.setAttribute("value", value);
+    this.updateFormValue();
   }
   get disabled() {
     return this.hasAttr("disabled");
@@ -658,7 +793,7 @@ const _FxSelect = class _FxSelect extends FxElement {
     this.docListener = (e) => {
       if (!this.hasAttr("open")) return;
       if (e.composedPath().includes(this)) return;
-      this.removeAttribute("open");
+      this._fechar();
       this.render();
     };
     document.addEventListener("click", this.docListener);
@@ -667,11 +802,79 @@ const _FxSelect = class _FxSelect extends FxElement {
     super.disconnectedCallback();
     this.observer?.disconnect();
     if (this.docListener) document.removeEventListener("click", this.docListener);
+    this._unbindReflow();
+  }
+  /** Abre o dropdown, posiciona o painel e passa a reposicioná-lo no reflow. */
+  _abrir() {
+    this.setAttribute("open", "");
+    this._bindReflow();
+  }
+  /** Fecha o dropdown e libera os listeners de resize/scroll. */
+  _fechar() {
+    this.removeAttribute("open");
+    this.removeAttribute("data-placement");
+    this._unbindReflow();
+  }
+  /** Liga o reposicionamento (resize + scroll interno, em capture). */
+  _bindReflow() {
+    if (this.onReflow) return;
+    this.onReflow = () => {
+      if (this.hasAttr("open")) this.ajustarPosicao();
+    };
+    window.addEventListener("resize", this.onReflow);
+    window.addEventListener("scroll", this.onReflow, true);
+  }
+  _unbindReflow() {
+    if (!this.onReflow) return;
+    window.removeEventListener("resize", this.onReflow);
+    window.removeEventListener("scroll", this.onReflow, true);
+    this.onReflow = void 0;
+  }
+  /**
+   * Decide a posição vertical do painel medindo o espaço real da viewport.
+   *
+   * `placement="top"`/`"bottom"` são respeitados literalmente; o padrão
+   * (`auto`) só inverte quando o painel não cabe embaixo E couber melhor
+   * acima. Também limita a altura ao espaço disponível e evita overflow
+   * horizontal próximo à borda direita.
+   */
+  ajustarPosicao() {
+    const painel = this.root.querySelector(".panel");
+    const trigger = this.root.querySelector(".trigger");
+    if (!painel || !trigger) return;
+    const r = trigger.getBoundingClientRect();
+    const abaixo = window.innerHeight - r.bottom;
+    const acima = r.top;
+    const desejado = painel.scrollHeight;
+    const maxAltura = _FxSelect._maxAltura(this);
+    const pedido = this.getAttr("placement", "auto");
+    const paraCima = pedido === "top" || pedido !== "bottom" && abaixo < Math.min(desejado, maxAltura) && acima > abaixo;
+    if (paraCima) this.setAttribute("data-placement", "top");
+    else this.removeAttribute("data-placement");
+    const disponivel = Math.max(
+      _FxSelect.MIN_ALTURA,
+      (paraCima ? acima : abaixo) - _FxSelect.GAP
+    );
+    painel.style.maxHeight = `${Math.min(desejado || disponivel, disponivel, maxAltura)}px`;
+    painel.style.left = "";
+    const largura = painel.offsetWidth;
+    const excesso = r.left + largura - (window.innerWidth - _FxSelect.MARGEM);
+    if (excesso > 0) {
+      painel.style.left = `${-excesso}px`;
+      painel.style.right = "auto";
+    }
+  }
+  /** 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");
+    const n = parseInt(raw, 10);
+    return Number.isFinite(n) && n > 0 ? n : 260;
   }
   select(value) {
     this.value = value;
-    this.removeAttribute("open");
+    this._fechar();
     this.render();
+    this.emitValueEvents();
     this.dispatchEvent(
       new CustomEvent("change", { bubbles: true, composed: true, detail: { value } })
     );
@@ -680,7 +883,7 @@ const _FxSelect = class _FxSelect extends FxElement {
   _navigateOptions(e) {
     e.preventDefault();
     if (!this.hasAttr("open")) {
-      this.toggleAttribute("open");
+      this._abrir();
       this.render();
     }
     const opts = Array.from(this.root.querySelectorAll(".opt"));
@@ -725,6 +928,7 @@ const _FxSelect = class _FxSelect extends FxElement {
       </div>
     `);
     if (prevOpen) this.setAttribute("open", "");
+    if (this.hasAttr("open")) this.ajustarPosicao();
     const searchInput = this.root.querySelector(".search");
     if (searchInput) {
       searchInput.value = search;
@@ -744,7 +948,8 @@ const _FxSelect = class _FxSelect extends FxElement {
     trigger.addEventListener("click", (e) => {
       if (this.disabled) return;
       if (e.target.closest(".clear")) return;
-      this.toggleAttribute("open");
+      if (this.hasAttr("open")) this._fechar();
+      else this._abrir();
       this.render();
       this.root.querySelector(".search")?.focus();
     });
@@ -757,7 +962,7 @@ const _FxSelect = class _FxSelect extends FxElement {
       }
       if (e.key === "Escape") {
         if (this.hasAttr("open")) {
-          this.removeAttribute("open");
+          this._fechar();
           this.render();
           this.root.querySelector(".trigger")?.focus();
         }
@@ -770,8 +975,9 @@ const _FxSelect = class _FxSelect extends FxElement {
     this.root.querySelector(".clear")?.addEventListener("click", (e) => {
       e.stopPropagation();
       this.value = "";
-      this.removeAttribute("open");
+      this._fechar();
       this.render();
+      this.emitValueEvents();
       this.dispatchEvent(
         new CustomEvent("change", { bubbles: true, composed: true, detail: { value: "" } })
       );
@@ -779,6 +985,12 @@ const _FxSelect = class _FxSelect extends FxElement {
     this.root.querySelectorAll(".opt").forEach((opt) => {
       opt.addEventListener("click", () => this.select(opt.dataset.value));
     });
+    this.updateFormValue();
+  }
+  /** form.reset(): restaura o valor inicial e re-renderiza o rótulo. */
+  formResetCallback() {
+    super.formResetCallback();
+    this.render();
   }
 };
 _FxSelect.styles = css`
@@ -792,6 +1004,11 @@ _FxSelect.styles = css`
          e style inline no elemento definem a largura sem precisar do full. */
       width: var(--fx-select-width, max-content);
       min-width: var(--fx-select-min-width, 200px);
+      /* Espaço entre o campo e o painel + altura máxima do painel. Expostos
+         como custom property porque ::part() do lado do consumidor tem
+         prioridade MENOR que a folha do shadow root e não vence o top. */
+      --fx-select-panel-offset: 4px;
+      --fx-select-panel-max-height: 260px;
     }
     .trigger {
       display: inline-flex;
@@ -879,14 +1096,15 @@ _FxSelect.styles = css`
     }
     .caret { font-size: calc(var(--fx-font-size) - 3px); color: var(--fx-text-muted); pointer-events: none; }
 
-    /* Painel do dropdown */
+    /* Painel do dropdown — a POSIÇÃO vertical é definida pelas regras
+       [data-placement] abaixo (o JS de ajustarPosicao decide), por isso
+       top/bottom não ficam aqui. */
     .panel {
       position: absolute;
-      top: calc(100% + 4px);
       left: 0;
       z-index: var(--fx-z-dropdown, 1000);
       width: max(100%, 220px);
-      max-height: 260px;
+      max-height: var(--fx-select-panel-max-height, 260px);
       overflow-y: auto;
       display: none;
       background: var(--fx-surface-background);
@@ -894,6 +1112,16 @@ _FxSelect.styles = css`
       border-radius: var(--fx-radius-md);
       box-shadow: var(--fx-shadow-lg);
     }
+    /* Padrão: abre para baixo. */
+    :host([open]:not([data-placement='top'])) .panel {
+      top: calc(100% + var(--fx-select-panel-offset, 4px));
+    }
+    /* placement="top" explícito ou auto-flip: abre para cima. */
+    :host([open][placement='top']) .panel,
+    :host([open][data-placement='top']) .panel {
+      top: auto;
+      bottom: calc(100% + var(--fx-select-panel-offset, 4px));
+    }
     :host([open]) .panel { display: block; }
     .search {
       position: sticky;
@@ -941,12 +1169,15 @@ _FxSelect.styles = css`
     .clear:hover { color: var(--fx-color-danger); }
     .clear[hidden] { display: none; }
   `;
+_FxSelect.GAP = 4;
+_FxSelect.MARGEM = 8;
+_FxSelect.MIN_ALTURA = 80;
 let FxSelect = _FxSelect;
 function defineFxSelect() {
   return defineElement("fx-select", FxSelect);
 }
 defineFxSelect();
-const _FxInput = class _FxInput extends FxElement {
+const _FxInput = class _FxInput extends FxFormElement {
   // `value` fica FORA da observação: refleti-lo a cada tecla não pode
   // re-renderizar o template, senão o campo perde o foco ao digitar.
   // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:
@@ -982,6 +1213,8 @@ const _FxInput = class _FxInput extends FxElement {
   }
   set value(value) {
     this.setAttribute("value", value);
+    this.syncInternalControl();
+    this.updateFormValue();
   }
   get disabled() {
     return this.hasAttr("disabled");
@@ -1021,6 +1254,7 @@ const _FxInput = class _FxInput extends FxElement {
     if (readonly) field.setAttribute("readonly", "");
     const emit = (event) => {
       this.value = field.value;
+      this.emitValueEvents();
       this.dispatchEvent(
         new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } })
       );
@@ -1033,6 +1267,12 @@ const _FxInput = class _FxInput extends FxElement {
       e.stopPropagation();
       emit("change");
     });
+    field.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" || e.isComposing) return;
+      if (!this.form) return;
+      e.preventDefault();
+      this.form.requestSubmit();
+    });
     const clearBtn = this.root.querySelector(".clear");
     const syncClear = () => {
       clearBtn?.toggleAttribute("hidden", field.value === "");
@@ -1046,6 +1286,13 @@ const _FxInput = class _FxInput extends FxElement {
       field.focus();
     });
     field.addEventListener("input", syncClear);
+    this.updateFormValue();
+  }
+  /** Empurra o atributo `value` para o campo interno sem re-renderizar. */
+  syncInternalControl() {
+    const field = this.root.querySelector(".field");
+    const value = this.getAttr("value");
+    if (field && field.value !== value) field.value = value;
   }
 };
 _FxInput.styles = css`
@@ -1189,7 +1436,12 @@ function defineFxInput() {
   return defineElement("fx-input", FxInput);
 }
 defineFxInput();
-const _FxSwitch = class _FxSwitch extends FxElement {
+const _FxSwitch = class _FxSwitch extends FxFormElement {
+  constructor() {
+    super(...arguments);
+    this._initialChecked = false;
+    this._initialCheckedCaptured = false;
+  }
   static get observedAttributes() {
     return ["checked", "disabled", "size"];
   }
@@ -1213,6 +1465,17 @@ const _FxSwitch = class _FxSwitch extends FxElement {
   set disabled(value) {
     this.toggleAttr("disabled", Boolean(value));
   }
+  /** getter/setter `value` → espelho do atributo `value` (compat com v-model / [(value)]). */
+  get value() {
+    return this.getAttr("value");
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+  /** No FormData: `value` (ou 'on') quando ligado; null (não envia) quando não. */
+  getFormValue() {
+    return this.checked ? this.getAttr("value") || "on" : null;
+  }
   render() {
     this.setTemplate(`
       <button class="switch" part="switch" type="button" role="switch"
@@ -1234,7 +1497,29 @@ const _FxSwitch = class _FxSwitch extends FxElement {
           detail: { checked: this.checked }
         })
       );
+      this.dispatchEvent(
+        new CustomEvent("checkedChange", {
+          bubbles: true,
+          composed: true,
+          detail: { checked: this.checked, value: this.getAttr("value") }
+        })
+      );
     });
+    this.updateFormValue();
+  }
+  connectedCallback() {
+    if (!this._initialCheckedCaptured) {
+      this._initialCheckedCaptured = true;
+      this._initialChecked = this.checked;
+    }
+    super.connectedCallback();
+  }
+  /** form.reset(): restaura o estado inicial (desligado por padrão). */
+  formResetCallback() {
+    this.checked = this._initialChecked;
+    const btn = this.root.querySelector(".switch");
+    if (btn) btn.setAttribute("aria-checked", String(this.checked));
+    this.updateFormValue();
   }
 };
 _FxSwitch.styles = css`
@@ -1297,7 +1582,7 @@ function defineFxSwitch() {
   return defineElement("fx-switch", FxSwitch);
 }
 defineFxSwitch();
-const _FxMultiselect = class _FxMultiselect extends FxElement {
+const _FxMultiselect = class _FxMultiselect extends FxFormElement {
   constructor() {
     super(...arguments);
     this.selected = /* @__PURE__ */ new Set();
@@ -1313,6 +1598,14 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
   set values(list) {
     this.setAttribute("values", list.join(","));
   }
+  /** No FormData do form: uma entrada `name` por valor selecionado. */
+  getFormValue() {
+    const values = this.values;
+    if (!this.name || values.length === 0) return null;
+    const fd = new FormData();
+    values.forEach((v) => fd.append(this.name, v));
+    return fd;
+  }
   get disabled() {
     return this.hasAttr("disabled");
   }
@@ -1327,6 +1620,7 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
   }
   connectedCallback() {
     this.selected = new Set(this.values);
+    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 });
@@ -1347,6 +1641,7 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
   commit() {
     this.values = [...this.selected];
     this.render();
+    this.updateFormValue();
     this.dispatchEvent(
       new CustomEvent("change", {
         bubbles: true,
@@ -1354,6 +1649,21 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
         detail: { values: [...this.selected] }
       })
     );
+    this.dispatchEvent(
+      new CustomEvent("valuesChange", {
+        bubbles: true,
+        composed: true,
+        detail: { values: [...this.selected] }
+      })
+    );
+  }
+  /** form.reset(): restaura a seleção inicial. */
+  formResetCallback() {
+    const initial = this._initialValues ?? [];
+    this.values = initial;
+    this.selected = new Set(initial);
+    this.render();
+    this.updateFormValue();
   }
   toggleValue(value) {
     if (this.selected.has(value)) this.selected.delete(value);
@@ -2159,7 +2469,7 @@ function defineFxCalendar() {
   return defineElement("fx-calendar", FxCalendar);
 }
 defineFxCalendar();
-const _FxDatepicker = class _FxDatepicker extends FxElement {
+const _FxDatepicker = class _FxDatepicker extends FxFormElement {
   constructor() {
     super(...arguments);
     this.time = { h: 0, m: 0, s: 0 };
@@ -2167,6 +2477,32 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
   static get observedAttributes() {
     return ["value", "start", "end", "values", "mode", "min", "max", "placeholder", "disabled", "format", "show-time", "free-text", "error", "invalid", "success", "valid"];
   }
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (name === "value" || name === "start" || name === "end" || name === "values") {
+      this.updateFormValue();
+    }
+  }
+  /** No FormData do form, conforme o modo (single/range/multiple). */
+  getFormValue() {
+    if (this.mode === "range") {
+      const start = this.getAttr("start");
+      const end = this.getAttr("end");
+      if (!this.name || !start && !end) return null;
+      const fd = new FormData();
+      if (start) fd.append(`${this.name}-start`, start);
+      if (end) fd.append(`${this.name}-end`, end);
+      return fd;
+    }
+    if (this.mode === "multiple") {
+      const values = this.values;
+      if (!this.name || values.length === 0) return null;
+      const fd = new FormData();
+      values.forEach((v) => fd.append(this.name, v));
+      return fd;
+    }
+    return this.getAttr("value") || null;
+  }
   get mode() {
     const m = this.getAttr("mode", "single");
     return ["single", "range", "multiple"].includes(m) ? m : "single";
@@ -2195,6 +2531,14 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
     this.toggleAttr("disabled", Boolean(value));
   }
   connectedCallback() {
+    if (!this._initialState) {
+      this._initialState = {
+        value: this.getAttr("value"),
+        start: this.getAttr("start"),
+        end: this.getAttr("end"),
+        values: this.getAttr("values")
+      };
+    }
     super.connectedCallback();
     this.docListener = (e) => {
       if (!this.hasAttr("open")) return;
@@ -2207,6 +2551,15 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
     super.disconnectedCallback();
     if (this.docListener) document.removeEventListener("click", this.docListener);
   }
+  /** 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.updateFormValue();
+  }
   /** Formata uma data ISO ("YYYY-MM-DD" ou com "THH:mm:ss") segundo o atributo format. */
   formatDate(iso) {
     if (!iso) return "";
@@ -2379,6 +2732,7 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
     }
   }
   emitChange(detail) {
+    this.emitValueEvents(detail);
     this.dispatchEvent(
       new CustomEvent("change", { bubbles: true, composed: true, detail })
     );
@@ -2602,7 +2956,12 @@ function defineFxDatepicker() {
   return defineElement("fx-datepicker", FxDatepicker);
 }
 defineFxDatepicker();
-const _FxCheckbox = class _FxCheckbox extends FxElement {
+const _FxCheckbox = class _FxCheckbox extends FxFormElement {
+  constructor() {
+    super(...arguments);
+    this._initialChecked = false;
+    this._initialCheckedCaptured = false;
+  }
   static get observedAttributes() {
     return ["checked", "disabled", "indeterminate"];
   }
@@ -2624,6 +2983,17 @@ const _FxCheckbox = class _FxCheckbox extends FxElement {
   set disabled(value) {
     this.toggleAttr("disabled", Boolean(value));
   }
+  /** No FormData: `value` (ou 'on') quando marcado; null (não envia) quando não. */
+  getFormValue() {
+    return this.checked ? this.getAttr("value") || "on" : null;
+  }
+  /** getter/setter `value` → espelho do atributo `value` (compat com v-model / [(value)]). */
+  get value() {
+    return this.getAttr("value");
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
   /** Tamanho do controle. Padrão: `'md'`. */
   get size() {
     const s = this.getAttr("size", "md");
@@ -2656,6 +3026,20 @@ const _FxCheckbox = class _FxCheckbox extends FxElement {
         this.toggle();
       }
     });
+    this.updateFormValue();
+  }
+  connectedCallback() {
+    if (!this._initialCheckedCaptured) {
+      this._initialCheckedCaptured = true;
+      this._initialChecked = this.checked;
+    }
+    super.connectedCallback();
+  }
+  /** form.reset(): restaura o estado marcado inicial (checked/indeterminate não enviam nada). */
+  formResetCallback() {
+    this.checked = this._initialChecked;
+    this.indeterminate = false;
+    this.updateFormValue();
   }
   toggle() {
     if (this.disabled) return;
@@ -2668,6 +3052,13 @@ const _FxCheckbox = class _FxCheckbox extends FxElement {
         detail: { checked: this.checked, value: this.getAttr("value") }
       })
     );
+    this.dispatchEvent(
+      new CustomEvent("checkedChange", {
+        bubbles: true,
+        composed: true,
+        detail: { checked: this.checked, value: this.getAttr("value") }
+      })
+    );
   }
 };
 _FxCheckbox.styles = css`
@@ -2737,7 +3128,12 @@ function defineFxCheckbox() {
   return defineElement("fx-checkbox", FxCheckbox);
 }
 defineFxCheckbox();
-const _FxRadio = class _FxRadio extends FxElement {
+const _FxRadio = class _FxRadio extends FxFormElement {
+  constructor() {
+    super(...arguments);
+    this._initialChecked = false;
+    this._initialCheckedCaptured = false;
+  }
   static get observedAttributes() {
     return ["checked", "disabled"];
   }
@@ -2753,6 +3149,25 @@ const _FxRadio = class _FxRadio extends FxElement {
   set disabled(value) {
     this.toggleAttr("disabled", Boolean(value));
   }
+  /**
+   * Grupo = radios com o mesmo `name` NA MESMA árvore. `getRootNode()` devolve
+   * o document OU o ShadowRoot do app consumidor — grupos com o mesmo name
+   * em shadow DOMs diferentes ficam isolados (o `document` global cruzaria
+   * fronteiras indevidamente).
+   */
+  _group() {
+    const name = this.getAttr("name");
+    if (!name) return [this];
+    const root = this.getRootNode();
+    const safeName = name.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+    return Array.from(
+      root.querySelectorAll(`fx-radio[name="${safeName}"]`)
+    );
+  }
+  /** No FormData: só o radio MARCADO envia `value` (ou 'on'). */
+  getFormValue() {
+    return this.checked ? this.getAttr("value") || "on" : null;
+  }
   /** Tamanho do controle. Padrão: `'md'`. */
   get size() {
     const s = this.getAttr("size", "md");
@@ -2777,19 +3192,35 @@ const _FxRadio = class _FxRadio extends FxElement {
     if (!box) return;
     box.addEventListener("click", () => this.select());
     box.addEventListener("keydown", (e) => {
-      if (e.key === " " || e.key === "Enter") {
+      const key2 = e.key;
+      if (key2 === " " || key2 === "Enter") {
         e.preventDefault();
         this.select();
+        return;
+      }
+      if (key2 === "ArrowDown" || key2 === "ArrowRight" || key2 === "ArrowUp" || key2 === "ArrowLeft") {
+        e.preventDefault();
+        this._moveFocus(key2 === "ArrowDown" || key2 === "ArrowRight" ? 1 : -1);
       }
     });
+    this.updateFormValue();
+  }
+  /** Move o foco/marcação para o próximo (ou anterior) radio do grupo. */
+  _moveFocus(dir) {
+    const group = this._group().filter((r) => !r.disabled);
+    if (group.length < 2) return;
+    const i = group.indexOf(this);
+    const next = group[(i + dir + group.length) % group.length];
+    next.focus();
+    if (!next.root.activeElement) {
+      next.root.querySelector(".box")?.focus();
+    }
+    if (!next.checked) next.select();
   }
   select() {
     if (this.disabled || this.checked) return;
-    const name = this.getAttr("name");
-    if (name) {
-      document.querySelectorAll(`fx-radio[name="${CSS.escape(name)}"]`).forEach((r) => {
-        r.checked = false;
-      });
+    for (const r of this._group()) {
+      if (r !== this) r.checked = false;
     }
     this.checked = true;
     this.dispatchEvent(
@@ -2799,6 +3230,25 @@ const _FxRadio = class _FxRadio extends FxElement {
         detail: { checked: true, value: this.getAttr("value") }
       })
     );
+    this.dispatchEvent(
+      new CustomEvent("checkedChange", {
+        bubbles: true,
+        composed: true,
+        detail: { checked: true, value: this.getAttr("value") }
+      })
+    );
+  }
+  connectedCallback() {
+    if (!this._initialCheckedCaptured) {
+      this._initialCheckedCaptured = true;
+      this._initialChecked = this.checked;
+    }
+    super.connectedCallback();
+  }
+  /** form.reset(): restaura o estado marcado inicial do grupo. */
+  formResetCallback() {
+    this.checked = this._initialChecked;
+    this.updateFormValue();
   }
 };
 _FxRadio.styles = css`
@@ -3974,28 +4424,43 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
     this.targetControl = null;
     this.observer = null;
     this.listenersReady = false;
+    this._label = null;
+    this._labelClickBound = false;
   }
   static get observedAttributes() {
     return ["variant", "error", "invalid", "success", "valid", "full", "icon", "icon-pos"];
   }
   render() {
     const control = this.findControl();
-    const label = this.findLabel();
-    const originalLabel = label;
-    const labelText = originalLabel ? originalLabel.textContent?.replace(/\s+/g, " ").trim() : "";
-    const labelFor = originalLabel ? originalLabel.getAttribute("for") || "" : "";
+    const lightLabel = this.findLabel();
+    if (lightLabel) this._label = lightLabel;
+    const label = this._label;
     const isOver = this.getAttribute("variant") === "over";
     this.setTemplate(`
       <div class="wrapper" part="wrapper">
-        ${isOver ? `<label class="flabel" part="label" for="${labelFor}">${labelText}</label>` : ""}
         <div class="field-box" part="field">
           <slot></slot>
-          ${isOver ? "" : `<label class="flabel" part="label" for="${labelFor}">${labelText}</label>`}
         </div>
         <div class="error-message" part="error"></div>
       </div>
     `);
-    if (originalLabel) originalLabel.setAttribute("hidden", "");
+    if (label) {
+      label.classList.add("flabel");
+      label.setAttribute("part", "label");
+      const wrapper = this.root.querySelector(".wrapper");
+      const fieldBox = this.root.querySelector(".field-box");
+      if (wrapper && fieldBox) {
+        if (isOver) wrapper.insertBefore(label, fieldBox);
+        else fieldBox.appendChild(label);
+      }
+      if (!this._labelClickBound) {
+        this._labelClickBound = true;
+        label.addEventListener("click", (e) => {
+          e.preventDefault();
+          this.targetControl?.focus?.();
+        });
+      }
+    }
     this.attachEvents();
     this.syncControlReference(control);
     this.syncState();
@@ -4294,7 +4759,7 @@ function defineFxFloatlabel() {
   return defineElement("fx-floatlabel", FxFloatlabel);
 }
 defineFxFloatlabel();
-const _FxTextarea = class _FxTextarea extends FxElement {
+const _FxTextarea = class _FxTextarea extends FxFormElement {
   static get observedAttributes() {
     return ["size", "placeholder", "disabled", "readonly", "rows", "maxlength", "error", "invalid", "success", "valid"];
   }
@@ -4310,6 +4775,8 @@ const _FxTextarea = class _FxTextarea extends FxElement {
   }
   set value(value) {
     this.setAttribute("value", value);
+    this.syncInternalControl();
+    this.updateFormValue();
   }
   render() {
     const placeholder = this.getAttr("placeholder");
@@ -4329,6 +4796,7 @@ const _FxTextarea = class _FxTextarea extends FxElement {
     if (readonly) field.setAttribute("readonly", "");
     const emit = (event) => {
       this.value = field.value;
+      this.emitValueEvents();
       this.dispatchEvent(
         new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } })
       );
@@ -4341,6 +4809,13 @@ const _FxTextarea = class _FxTextarea extends FxElement {
       e.stopPropagation();
       emit("change");
     });
+    this.updateFormValue();
+  }
+  /** Empurra o atributo `value` para o campo interno sem re-renderizar. */
+  syncInternalControl() {
+    const field = this.root.querySelector(".field");
+    const value = this.getAttr("value");
+    if (field && field.value !== value) field.value = value;
   }
 };
 _FxTextarea.styles = css`
@@ -4883,7 +5358,7 @@ function defineFxConfirmPopup() {
   return defineElement("fx-confirmpopup", FxConfirmPopup);
 }
 defineFxConfirmPopup();
-const _FxFileUpload = class _FxFileUpload extends FxElement {
+const _FxFileUpload = class _FxFileUpload extends FxFormElement {
   constructor() {
     super(...arguments);
     this._files = [];
@@ -4921,6 +5396,14 @@ const _FxFileUpload = class _FxFileUpload extends FxElement {
     this.value = this._files.map((f) => f.name).join(", ");
     this._syncFilesArea();
   }
+  /** No FormData do form: os arquivos selecionados, como o <input type="file">. */
+  getFormValue() {
+    const files = this._files;
+    if (!this.name || files.length === 0) return null;
+    const fd = new FormData();
+    for (const f of files) fd.append(this.name, f, f.name);
+    return fd;
+  }
   render() {
     const mode = this.getAttr("mode", "basic");
     const advanced = mode === "advanced";
@@ -4953,6 +5436,7 @@ const _FxFileUpload = class _FxFileUpload extends FxElement {
     `);
     this._bindPicker();
     this._syncFilesArea();
+    this.updateFormValue();
     if (!this._done && showProgress && pct >= 100 && this._files.length) {
       this._done = true;
       this.dispatchEvent(new CustomEvent("complete", { bubbles: true, composed: true }));
@@ -5001,6 +5485,12 @@ const _FxFileUpload = class _FxFileUpload extends FxElement {
     if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   }
+  /** form.reset(): limpa os arquivos selecionados. */
+  formResetCallback() {
+    this._files = [];
+    this.value = "";
+    this.updateFormValue();
+  }
   /** Renderiza a lista de arquivos sem re-renderizar o template (mantém estado). */
   _syncFilesArea() {
     const area = this.root?.querySelector?.(".files");
@@ -5172,7 +5662,7 @@ function defineFxFileUpload() {
   return defineElement("fx-fileupload", FxFileUpload);
 }
 defineFxFileUpload();
-const _FxSlider = class _FxSlider extends FxElement {
+const _FxSlider = class _FxSlider extends FxFormElement {
   constructor() {
     super(...arguments);
     this._dragging = false;
@@ -5196,6 +5686,7 @@ const _FxSlider = class _FxSlider extends FxElement {
     const snapped = this._snap(v);
     this.setAttribute("value", String(snapped));
     if (this.isConnected) this._syncVisual();
+    this.updateFormValue();
   }
   _num(attr, fallback) {
     const raw = this.getAttribute(attr);
@@ -5270,6 +5761,7 @@ const _FxSlider = class _FxSlider extends FxElement {
       window.removeEventListener("pointerup", up);
       this.value = valueFromEvent(e);
       this._syncVisual();
+      this.emitValueEvents();
       this.dispatchEvent(
         new CustomEvent("change", { bubbles: true, composed: true, detail: { value: this.value } })
       );
@@ -5324,6 +5816,7 @@ const _FxSlider = class _FxSlider extends FxElement {
       ev.preventDefault();
       this.value = next;
       this._syncVisual();
+      this.emitValueEvents();
       this.dispatchEvent(
         new CustomEvent("input", { bubbles: true, composed: true, detail: { value: this.value } })
       );
@@ -5350,6 +5843,11 @@ const _FxSlider = class _FxSlider extends FxElement {
     const labelPct = this.root.querySelector(".label span:last-child");
     if (labelPct) labelPct.textContent = String(this.value);
   }
+  /** form.reset(): restaura o valor inicial e o visual sem re-render. */
+  formResetCallback() {
+    super.formResetCallback();
+    this._syncVisual();
+  }
 };
 _FxSlider.styles = css`
     :host {
@@ -5720,6 +6218,24 @@ const _FxCard = class _FxCard extends FxElement {
         <footer part="footer"><slot name="footer"></slot></footer>
       </div>
     `);
+    this._syncSlots();
+    for (const name of ["header", "footer"]) {
+      this.root.querySelector(`slot[name="${name}"]`)?.addEventListener("slotchange", () => this._syncSlots());
+    }
+  }
+  /**
+   * Esconde `header`/`footer` quando o respectivo slot não recebeu nenhum nó.
+   * O `<slot>` fica no shadow e os nós no light DOM, então a checagem é feita
+   * via `assignedNodes()` — cobre conteúdo adicionado dinamicamente.
+   */
+  _syncSlots() {
+    for (const name of ["header", "footer"]) {
+      const slot = this.root.querySelector(`slot[name="${name}"]`);
+      const section = this.root.querySelector(name);
+      if (!slot || !section) continue;
+      const temConteudo = slot.assignedNodes({ flatten: true }).some((n) => n.nodeType === 1 || (n.textContent ?? "").trim() !== "") || name === "header" && Boolean(this.getAttr("heading"));
+      section.toggleAttribute("hidden", !temConteudo);
+    }
   }
 };
 _FxCard.styles = css`
@@ -6274,7 +6790,7 @@ function defineFxStepper() {
   return defineElement("fx-stepper", FxStepper);
 }
 defineFxStepper();
-const _FxRating = class _FxRating extends FxElement {
+const _FxRating = class _FxRating extends FxFormElement {
   static get observedAttributes() {
     return ["value", "max", "readonly", "disabled", "allow-half", "size"];
   }
@@ -6285,6 +6801,7 @@ const _FxRating = class _FxRating extends FxElement {
   set value(v) {
     this.setAttribute("value", String(Math.min(this.max, Math.max(0, v))));
     this._syncVisual();
+    this.updateFormValue();
   }
   get max() {
     const n = Number(this.getAttr("max", "5"));
@@ -6304,6 +6821,7 @@ const _FxRating = class _FxRating extends FxElement {
     `);
     this._bindStars();
     this._syncVisual();
+    this.updateFormValue();
   }
   _starNodes() {
     return Array.from(this.root.querySelectorAll(".star"));
@@ -6327,6 +6845,7 @@ const _FxRating = class _FxRating extends FxElement {
         let next = n;
         if (this.hasAttr("allow-half")) next += -0.5;
         this.value = next;
+        this.emitValueEvents();
         this.dispatchEvent(
           new CustomEvent("change", { bubbles: true, composed: true, detail: { value: this.value } })
         );
@@ -6533,7 +7052,7 @@ function defineFxMenu() {
   return defineElement("fx-menu", FxMenu);
 }
 defineFxMenu();
-const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxElement {
+const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxFormElement {
   static get observedAttributes() {
     return ["multiple", "size"];
   }
@@ -6543,10 +7062,19 @@ const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxElement {
   }
   set value(v) {
     this.setAttribute("value", v.join(","));
+    this.updateFormValue();
   }
   get multiple() {
     return this.hasAttr("multiple");
   }
+  /** No FormData do form: uma entrada `name` por valor selecionado. */
+  getFormValue() {
+    const values = this.value;
+    if (!this.name || values.length === 0) return null;
+    const fd = new FormData();
+    values.forEach((v) => fd.append(this.name, v));
+    return fd;
+  }
   get options() {
     return Array.from(this.children).filter((el) => el.matches('[slot="option"]')).map((el) => el);
   }
@@ -6564,6 +7092,13 @@ const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxElement {
       </div>
     `);
     this._bindOptions();
+    this.updateFormValue();
+  }
+  /** form.reset(): restaura a seleção inicial e re-renderiza os botões. */
+  formResetCallback() {
+    this.setAttribute("value", this._initialValue);
+    this.render();
+    this.updateFormValue();
   }
   _bindOptions() {
     Array.from(this.root.querySelectorAll(".option") || []).forEach((opt) => {
@@ -6593,6 +7128,7 @@ const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxElement {
       o.setAttribute("aria-pressed", String(on));
     });
     this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { value: current } }));
+    this.dispatchEvent(new CustomEvent("valuesChange", { bubbles: true, composed: true, detail: { values: [...current] } }));
   }
 };
 _FxToggleButtonGroup.styles = css`
@@ -7273,6 +7809,7 @@ const KIND_ICON = {
   warning: "!",
   info: "i"
 };
+const COPY_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
 const CARD_CSS = `
 :host { display: contents; pointer-events: auto; }
 /* Modo explícito: sobrepõe os tokens herdados do tema global SOMENTE neste card. */
@@ -7306,8 +7843,11 @@ const CARD_CSS = `
   user-select: none;
 }
 .card {
-  display: flex; align-items: flex-start; gap: 10px;
+  display: flex; align-items: center; gap: 10px;
   min-width: 260px; max-width: 360px;
+  /* Altura mínima idêntica à de um toast COM título: sem título o card não
+     fica "achatado" e o conjunto mantém o mesmo ritmo visual. */
+  min-height: 56px;
   background: var(--fx-surface-background, #fff);
   color: var(--fx-text-default, #1e293b);
   border: 1px solid var(--fx-border-default, #e2e8f0);
@@ -7326,16 +7866,45 @@ const CARD_CSS = `
   color: #fff;
   display: flex; align-items: center; justify-content: center;
   font-size: 12px; font-weight: 700;
-  flex: none; margin-top: 2px;
+  flex: none; align-self: center;
   user-select: none;
 }
-.body { flex: 1; min-width: 0; }
+.body { flex: 1; min-width: 0; align-self: center; }
 .title { font-weight: 600; font-size: 14px; }
-.msg { font-size: calc(var(--fx-font-size, 14px) - 2px); color: var(--fx-text-muted, #64748b); margin-top: 2px; word-break: break-word; white-space: pre-line; }
-.close {
+.msg {
+  font-size: calc(var(--fx-font-size, 14px) - 2px);
+  color: var(--fx-text-muted, #64748b);
+  margin-top: 2px;
+  word-break: break-word; white-space: pre-line;
+  /* Mensagens longas mantêm o card no tamanho padrão e terminam em "…";
+     "Ver mais" expande o toast (sem perder o restante do texto). */
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
+  line-clamp: 2; overflow: hidden;
+}
+.card.expanded .msg {
+  display: block; overflow: visible;
+  -webkit-line-clamp: unset; line-clamp: unset;
+}
+.more {
+  all: unset; cursor: pointer; display: inline-block;
+  margin-top: 4px; padding: 2px 0;
+  font-size: 11px; font-weight: 600; color: var(--kind);
+}
+.more[hidden] { display: none; }
+.more:hover { text-decoration: underline; }
+.actions {
+  display: flex; align-items: center; gap: 2px;
+  flex: none; align-self: flex-start;
+}
+.copy, .close {
   all: unset; cursor: pointer; flex: none; line-height: 1;
   color: var(--fx-text-muted, #64748b); font-size: 15px; padding: 2px 4px; border-radius: 4px;
 }
+.copy[hidden] { display: none; }
+.copy { font-size: 14px; display: inline-flex; align-items: center; }
+.copy svg { display: block; }
+.copy.done { color: var(--fx-color-success, #10b981); }
+.copy:hover { color: var(--fx-color-primary, #6366f1); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }
 .close:hover { color: var(--fx-color-danger, #f43f5e); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }
 
 /* --- Barra de contagem regressiva (atributo progress) ---
@@ -7364,9 +7933,12 @@ const CARD_CSS = `
   will-change: transform;
 }
 .progress.run { animation: fx-toast-drain var(--toast-duration, 4000ms) linear forwards; }
-/* No modo hover a animação fica parada até o cursor/foco entrar no card. */
+/* Passar o mouse (ou focar) no toast pausa a contagem: a barra e o timer
+   congelam juntos até o cursor sair — tempo de ler a mensagem inteira.
+   progress="hover" é mantido por compatibilidade e se comporta como
+   "always" (o hover já pausa a contagem). */
 .card:hover .progress.run,
-.card:focus-within .progress.run { animation-play-state: running; }
+.card:focus-within .progress.run { animation-play-state: paused; }
 @keyframes fx-toast-drain {
   from { transform: scaleX(1); }
   to   { transform: scaleX(0); }
@@ -7385,6 +7957,12 @@ class FxToast extends HTMLElement {
     super();
     __privateAdd(this, _FxToast_instances);
     this.timer = null;
+    this.remaining = 0;
+    this.startedAt = 0;
+    this.hovering = false;
+    this.disposed = false;
+    this.counting = false;
+    this.wired = false;
     this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
@@ -7393,19 +7971,19 @@ class FxToast extends HTMLElement {
   /**
    * Exibe a barra de contagem regressiva na base do card.
    *
-   * A barra esvazia da esquerda para a direita durante exatamente `duration`
-   * e usa a cor do `kind`. Com `duration="0"` (toast fixo) a barra é
-   * omitida — não há tempo restante a representar.
+   * A barra esvazia durante exatamente `duration` e usa a cor do `kind`.
+   * Com `duration="0"` (toast fixo) a barra é omitida — não há tempo restante.
    *
    * - `'always'` (ou atributo vazio): barra sempre correndo.
-   * - `'hover'`: a barra só corre enquanto o cursor estiver sobre o toast;
-   *   ao sair, a animação pausa, então dá tempo de ler a mensagem.
    * - `'paused'`: barra visível, porém parada.
+   * - `'hover'`: **compatibilidade** — equivale a `'always'`. O hover agora
+   *   pausa a contagem (timer + barra) em qualquer modo, então a barra "só
+   *   correr sob o cursor" deixou de fazer sentido.
    */
   get progress() {
     if (!this.hasAttribute("progress")) return void 0;
     const v = this.getAttribute("progress");
-    return v === "hover" || v === "paused" ? v : "always";
+    return v === "paused" ? "paused" : "always";
   }
   set progress(value) {
     if (value) this.setAttribute("progress", value);
@@ -7445,11 +8023,13 @@ class FxToast extends HTMLElement {
   }
   connectedCallback() {
     if (!this.shadowRoot.firstChild) __privateMethod(this, _FxToast_instances, render_fn).call(this);
+    this.disposed = false;
+    __privateMethod(this, _FxToast_instances, wirePause_fn).call(this);
     const safe = this.safeDuration;
-    if (safe > 0 && !this.timer) {
-      this.timer = setTimeout(() => this.dismiss(), safe);
-    }
+    this.counting = safe > 0;
+    if (safe > 0 && !this.timer) __privateMethod(this, _FxToast_instances, startTimer_fn).call(this, safe);
     __privateMethod(this, _FxToast_instances, syncProgress_fn).call(this);
+    __privateMethod(this, _FxToast_instances, syncMore_fn).call(this);
   }
   /**
    * Limpa recursos ao sair do DOM e avisa a API imperativa (`FenixToast`).
@@ -7460,11 +8040,21 @@ class FxToast extends HTMLElement {
    * sem limite em uso prolongado.
    */
   disconnectedCallback() {
+    this.disposed = true;
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
     this.dispatchEvent(new CustomEvent(REMOVED_EVENT, { bubbles: false, composed: false }));
   }
   attributeChangedCallback(name) {
+    if (name === "duration") {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+      const safe = this.safeDuration;
+      this.counting = safe > 0;
+      if (safe > 0 && this.isConnected && !this.disposed) __privateMethod(this, _FxToast_instances, startTimer_fn).call(this, safe);
+    }
     if (name === "duration" || name === "progress" || name === "progress-origin" || name === "kind") {
       __privateMethod(this, _FxToast_instances, syncProgress_fn).call(this);
     }
@@ -7482,6 +8072,49 @@ class FxToast extends HTMLElement {
   }
 }
 _FxToast_instances = new WeakSet();
+/**
+ * Pausa a contagem enquanto o cursor (ou o foco) estiver no toast e retoma
+ * de onde parou ao sair — assim uma mensagem longa pode ser lida inteira.
+ * A barra de progresso pausa junto (regra CSS de :hover/:focus-within).
+ */
+wirePause_fn = function() {
+  if (this.wired) return;
+  this.wired = true;
+  this.addEventListener("mouseenter", () => {
+    this.hovering = true;
+    __privateMethod(this, _FxToast_instances, pauseTimer_fn).call(this);
+  });
+  this.addEventListener("mouseleave", () => {
+    this.hovering = false;
+    __privateMethod(this, _FxToast_instances, resumeTimer_fn).call(this);
+  });
+  this.addEventListener("focusin", () => __privateMethod(this, _FxToast_instances, pauseTimer_fn).call(this));
+  this.addEventListener("focusout", () => {
+    if (!this.hovering) __privateMethod(this, _FxToast_instances, resumeTimer_fn).call(this);
+  });
+};
+startTimer_fn = function(ms) {
+  this.remaining = ms;
+  this.startedAt = Date.now();
+  this.timer = setTimeout(() => {
+    this.timer = null;
+    this.dismiss();
+  }, ms);
+};
+pauseTimer_fn = function() {
+  if (!this.timer) return;
+  clearTimeout(this.timer);
+  this.timer = null;
+  this.remaining = Math.max(0, this.remaining - (Date.now() - this.startedAt));
+};
+resumeTimer_fn = function() {
+  if (!this.counting || this.timer || this.disposed) return;
+  if (this.remaining <= 0) {
+    this.dismiss();
+    return;
+  }
+  __privateMethod(this, _FxToast_instances, startTimer_fn).call(this, this.remaining);
+};
 /**
  * Aplica (ou remove) a barra de contagem regressiva.
  *
@@ -7526,17 +8159,60 @@ render_fn = function() {
       <div class="card" style="--kind:${color}" role="status" part="card">
         <span class="icon${isFxIcon ? " fx-icon" : ""}">${iconContent}</span>
         <div class="body">
-          ${title ? '<div class="title"></div>' : ""}
-          ${msg ? '<div class="msg"></div>' : ""}
+          ${title ? '<div class="title" part="title"></div>' : ""}
+          ${msg ? '<div class="msg" part="message"></div>' : ""}
+          ${msg ? '<button class="more" part="more" hidden>Ver mais</button>' : ""}
+        </div>
+        <div class="actions">
+          ${msg ? `<button class="copy" part="copy" hidden aria-label="Copiar mensagem" title="Copiar mensagem">${COPY_SVG}</button>` : ""}
+          <button class="close" aria-label="Fechar" title="Fechar">✕</button>
         </div>
-        <button class="close" aria-label="Fechar">✕</button>
       </div>`;
   const t = this.shadowRoot.querySelector(".title");
   const m = this.shadowRoot.querySelector(".msg");
   if (t) t.textContent = title;
-  if (m) m.textContent = msg;
+  if (m) {
+    m.textContent = msg;
+    m.title = msg;
+  }
+  const card = this.shadowRoot.querySelector(".card");
+  const more = this.shadowRoot.querySelector(".more");
+  const copy = this.shadowRoot.querySelector(".copy");
+  more?.addEventListener("click", () => {
+    const expanded = card.classList.toggle("expanded");
+    more.textContent = expanded ? "Ver menos" : "Ver mais";
+    if (copy) copy.hidden = !expanded;
+    if (expanded) __privateMethod(this, _FxToast_instances, pauseTimer_fn).call(this);
+  });
+  copy?.addEventListener("click", (e) => {
+    const btn = e.currentTarget;
+    const text = [title, msg].filter(Boolean).join("\n");
+    navigator.clipboard?.writeText(text).catch(() => {
+    });
+    btn.classList.add("done");
+    btn.title = "Copiado!";
+    setTimeout(() => {
+      btn.classList.remove("done");
+      btn.title = "Copiar mensagem";
+    }, 1200);
+  });
   this.shadowRoot.querySelector(".close").addEventListener("click", () => this.dismiss());
 };
+/**
+ * Mostra "Ver mais" somente quando a mensagem passou de 2 linhas.
+ * Sem layout (jsdom) scrollHeight/clientHeight são 0 → fica oculto.
+ */
+syncMore_fn = function() {
+  const card = this.shadowRoot?.querySelector(".card");
+  const more = this.shadowRoot?.querySelector(".more");
+  const msg = this.shadowRoot?.querySelector(".msg");
+  if (!card || !more || !msg) return;
+  if (card.classList.contains("expanded")) {
+    more.hidden = false;
+    return;
+  }
+  more.hidden = !(msg.scrollHeight - msg.clientHeight > 1);
+};
 function regionFor(position) {
   let region = document.querySelector(`[data-fx-toast-region="${position}"]`);
   if (!region) {
@@ -8904,7 +9580,7 @@ function defineFxPagination() {
   return defineElement("fx-pagination", FxPagination);
 }
 defineFxPagination();
-const _FxAutocomplete = class _FxAutocomplete extends FxElement {
+const _FxAutocomplete = class _FxAutocomplete extends FxFormElement {
   static get observedAttributes() {
     return ["size", "placeholder", "source", "disabled", "min-chars", "error", "invalid", "success", "valid"];
   }
@@ -8920,6 +9596,8 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
   }
   set value(v) {
     this.setAttribute("value", v);
+    this.syncInternalControl();
+    this.updateFormValue();
   }
   get source() {
     try {
@@ -8969,6 +9647,7 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
           field.value = btn.dataset.v ?? "";
           this.value = field.value;
           this.toggleAttr("open", false);
+          this.emitValueEvents();
           this.dispatchEvent(new CustomEvent("select", {
             bubbles: true,
             composed: true,
@@ -8980,6 +9659,7 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
     };
     field.addEventListener("input", () => {
       this.value = field.value;
+      this.emitValueEvents();
       openList();
     });
     field.addEventListener("focus", () => {
@@ -8990,6 +9670,11 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
         this.toggleAttr("open", false);
         return;
       }
+      if (e.key === "Enter" && !e.isComposing && !this.hasAttr("open") && this.form) {
+        e.preventDefault();
+        this.form.requestSubmit();
+        return;
+      }
       if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
       e.preventDefault();
       if (!this.hasAttr("open")) openList();
@@ -8999,6 +9684,13 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
       const next = e.key === "ArrowDown" ? current === -1 ? 0 : Math.min(current + 1, opts.length - 1) : current === -1 ? opts.length - 1 : Math.max(current - 1, 0);
       opts[next]?.focus();
     });
+    this.updateFormValue();
+  }
+  /** Empurra o atributo `value` para o campo interno sem re-renderizar. */
+  syncInternalControl() {
+    const field = this.root.querySelector(".field");
+    const value = this.getAttr("value");
+    if (field && field.value !== value) field.value = value;
   }
 };
 _FxAutocomplete.styles = css`
@@ -9092,7 +9784,7 @@ function defineFxAutocomplete() {
   return defineElement("fx-autocomplete", FxAutocomplete);
 }
 defineFxAutocomplete();
-const _FxKnob = class _FxKnob extends FxElement {
+const _FxKnob = class _FxKnob extends FxFormElement {
   constructor() {
     super(...arguments);
     this._isDragging = false;
@@ -9237,6 +9929,7 @@ const _FxKnob = class _FxKnob extends FxElement {
       </div>
     `);
     this.attachListeners();
+    this.updateFormValue();
   }
   getSizeNum() {
     const s = this.size;
@@ -9268,6 +9961,7 @@ const _FxKnob = class _FxKnob extends FxElement {
     const clamped = this.clampValue(newValue);
     if (clamped !== this.value) {
       this.value = clamped;
+      this.emitValueEvents();
       this.dispatchEvent(
         new CustomEvent("change", {
           bubbles: true,
@@ -11097,6 +11791,7 @@ function defineFxAccordionPanel() {
 defineFxAccordion();
 defineFxAccordionPanel();
 export {
+  DEFAULT_PRESET,
   FX_JSX_TYPES,
   FenixToast,
   FenixUI,
@@ -11123,6 +11818,7 @@ export {
   FxEmptyState,
   FxFileUpload,
   FxFloatlabel,
+  FxFormElement,
   FxIcon,
   FxInput,
   FxKnob,