@wrrdev/fenix-ui 1.1.17 → 1.3.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;
@@ -1039,7 +1048,7 @@ const _FxSelect = class _FxSelect extends FxFormElement {
         </span>
       </span>
       <div class="panel" part="panel" role="listbox">
-        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" placeholder="${esc(this.getAttr("search-placeholder", "Pesquisar…"))}">` : ""}
+        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" autocomplete="off" placeholder="${esc(this.getAttr("search-placeholder", "Pesquisar…"))}">` : ""}
         ${filtered.map((o) => `
           <button type="button" class="opt" role="option" data-value="${esc(o.value)}"
             aria-selected="${o.value === current}">${esc(o.label)}</button>`).join("")}
@@ -1347,6 +1356,12 @@ const _FxInput = class _FxInput extends FxFormElement {
       "step",
       "clearable",
       "full",
+      // `autocomplete` é observado porque ele vive no campo INTERNO (autofill
+      // do navegador): mudar o atributo no host precisa refletir no <input>.
+      // `name`/`id` idem — os dois descem para o campo interno.
+      "autocomplete",
+      "name",
+      "id",
       "icon",
       "icon-pos",
       "error",
@@ -1410,6 +1425,9 @@ const _FxInput = class _FxInput extends FxFormElement {
     const min = this.getAttr("min");
     const max = this.getAttr("max");
     const step = this.getAttr("step");
+    const autocomplete = this.getAttr("autocomplete", "off");
+    const name = this.getAttr("name");
+    const id = this.getAttr("id");
     const icon = this.getAttr("icon");
     const iconPos = this.getAttr("icon-pos", "left") === "right" ? "right" : "left";
     const slottedIcon = this.querySelector('[slot="icon"]');
@@ -1420,6 +1438,8 @@ const _FxInput = class _FxInput extends FxFormElement {
       ${useIconBox ? `<div class="field-icon icon-${iconPos}">` : ""}
       ${useIconBox && iconPos === "left" ? iconContent : ""}
       <input class="field" part="input" type="${esc(type)}"
+        ${name ? `name="${esc(name)}"` : ""} ${id ? `id="${esc(id)}"` : ""}
+        autocomplete="${esc(autocomplete)}"
         ${placeholder ? `placeholder="${esc(placeholder)}"` : ""}
         ${min ? `min="${esc(min)}"` : ""} ${max ? `max="${esc(max)}"` : ""} ${step ? `step="${esc(step)}"` : ""}
       />
@@ -1965,7 +1985,7 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
           <span class="count">${chips.length} selecionado${chips.length === 1 ? "" : "s"}</span>
           ${this.hasAttr("clearable") && chips.length ? '<button type="button" class="clear-all">Limpar tudo</button>' : ""}
         </div>
-        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" placeholder="${esc(this.getAttr("search-placeholder", "Pesquisar…"))}">` : ""}
+        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" autocomplete="off" placeholder="${esc(this.getAttr("search-placeholder", "Pesquisar…"))}">` : ""}
         <ul class="list">
           ${filtered.map((o) => `
             <li><button type="button" class="opt" role="option" data-value="${esc(o.value)}"
@@ -2922,7 +2942,7 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
     }
     this.setTemplate(`
       <div class="field" part="field">
-        <input class="display" part="display" type="text" ${this.hasAttr("free-text") && !disabled ? "" : "readonly"}
+        <input class="display" part="display" type="text" autocomplete="off" ${this.hasAttr("free-text") && !disabled ? "" : "readonly"}
           placeholder="${esc(this.getAttr("placeholder", "dd/mm/aaaa"))}"
           value="${esc(text)}" ${disabled ? "disabled" : ""}>
         <button type="button" class="clear" part="clear" aria-label="Limpar"
@@ -2940,9 +2960,9 @@ const _FxDatepicker = class _FxDatepicker extends FxFormElement {
       <div class="pop" part="popover">
         <fx-calendar ${calAttrs}></fx-calendar>
         ${showTime ? `<div class="time-row" part="time">
-                <input class="t-h" type="number" min="0" max="23" value="${this.time.h}" aria-label="Hora"><span class="sep">:</span>
-                <input class="t-m" type="number" min="0" max="59" value="${this.time.m}" aria-label="Minuto"><span class="sep">:</span>
-                <input class="t-s" type="number" min="0" max="59" value="${this.time.s}" aria-label="Segundo">
+                <input class="t-h" type="number" autocomplete="off" min="0" max="23" value="${this.time.h}" aria-label="Hora"><span class="sep">:</span>
+                <input class="t-m" type="number" autocomplete="off" min="0" max="59" value="${this.time.m}" aria-label="Minuto"><span class="sep">:</span>
+                <input class="t-s" type="number" autocomplete="off" min="0" max="59" value="${this.time.s}" aria-label="Segundo">
               </div>` : ""}
       </div>
     `);
@@ -4378,7 +4398,7 @@ const _FxTable = class _FxTable extends FxElement {
       const activeClass = isSorted ? "active" : "";
       return `<th part="header" class="${c.sortable ? "sortable" : ""}" style="text-align:${c.align}" data-field="${esc(c.field)}">${esc(c.header)}${ind ? `<span class="sort-ind ${activeClass}">${ind}</span>` : ""}</th>`;
     }).join("");
-    const filterRow = cols.some((c) => c.filterable) ? `<tr class="filter-row">${cols.map((c) => `<th style="text-align:${c.align}">${c.filterable ? `<input class="filter" data-field="${esc(c.field)}" placeholder="${esc("Filtrar…")}" value="${esc(this.filters[c.field] ?? "")}">` : ""}</th>`).join("")}</tr>` : "";
+    const filterRow = cols.some((c) => c.filterable) ? `<tr class="filter-row">${cols.map((c) => `<th style="text-align:${c.align}">${c.filterable ? `<input class="filter" autocomplete="off" data-field="${esc(c.field)}" placeholder="${esc("Filtrar…")}" value="${esc(this.filters[c.field] ?? "")}">` : ""}</th>`).join("")}</tr>` : "";
     const bodyHtml = rows.length ? rows.map(
       (row, i) => `<tr part="row" data-index="${i}">${cols.map((c) => `<td part="cell" style="text-align:${c.align}">${this.cellHtml(c, row)}</td>`).join("")}</tr>`
     ).join("") : `<tr><td class="empty" colspan="${cols.length || 1}">${esc(this.getAttr("empty-message", "Nenhum registro encontrado"))}</td></tr>`;
@@ -4658,6 +4678,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;
@@ -4702,6 +4729,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;
@@ -4978,6 +5011,7 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.cancelScheduledSync();
     this.observer?.disconnect();
     this._labelObserver?.disconnect();
     this._labelObserver = void 0;
@@ -5007,14 +5041,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) {
@@ -5047,18 +5095,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):
@@ -5136,6 +5182,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. */
@@ -5167,7 +5217,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;
@@ -5185,8 +5235,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 ---- */
@@ -5205,7 +5258,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):
@@ -5236,16 +5290,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) ---- */
@@ -5270,7 +5330,23 @@ function defineFxFloatlabel() {
 defineFxFloatlabel();
 const _FxTextarea = class _FxTextarea extends FxFormElement {
   static get observedAttributes() {
-    return ["size", "placeholder", "disabled", "readonly", "full", "rows", "maxlength", "error", "invalid", "success", "valid"];
+    return [
+      "size",
+      "placeholder",
+      "disabled",
+      "readonly",
+      "full",
+      "rows",
+      "maxlength",
+      "error",
+      "invalid",
+      "success",
+      "valid",
+      // Autofill: vivem no campo interno (ver o JSDoc da classe).
+      "autocomplete",
+      "name",
+      "id"
+    ];
   }
   get size() {
     const s = this.getAttr("size", "md");
@@ -5305,7 +5381,12 @@ const _FxTextarea = class _FxTextarea extends FxFormElement {
     const disabled = this.hasAttr("disabled");
     const rows = this.getAttr("rows");
     const maxlength = this.getAttr("maxlength");
+    const autocomplete = this.getAttr("autocomplete", "off");
+    const name = this.getAttr("name");
+    const id = this.getAttr("id");
     this.setTemplate(`<textarea class="field" part="textarea"
+      ${name ? `name="${esc(name)}"` : ""} ${id ? `id="${esc(id)}"` : ""}
+      autocomplete="${esc(autocomplete)}"
       ${placeholder ? `placeholder="${esc(placeholder)}"` : ""}
       ${rows ? `rows="${esc(rows)}"` : ""}
       ${maxlength ? `maxlength="${esc(maxlength)}"` : ""}
@@ -7826,8 +7907,8 @@ renderToolbar_fn = function() {
     button("removeFormat", "format_clear", "Limpar formatação")
   ].join("");
   const color = [
-    `<label class="tb-color" title="Cor do texto"><input type="color" data-color="foreColor" value="#111827" aria-label="Cor do texto"></label>`,
-    `<label class="tb-color" title="Realçar texto"><input type="color" data-color="hiliteColor" value="#fef08a" aria-label="Realçar texto"></label>`
+    `<label class="tb-color" title="Cor do texto"><input type="color" autocomplete="off" data-color="foreColor" value="#111827" aria-label="Cor do texto"></label>`,
+    `<label class="tb-color" title="Realçar texto"><input type="color" autocomplete="off" data-color="hiliteColor" value="#fef08a" aria-label="Realçar texto"></label>`
   ].join("");
   const alignGroup = [
     button("justifyLeft", "format_align_left", "Alinhar à esquerda"),
@@ -8295,7 +8376,7 @@ fieldHtml_fn = function(field) {
     return `<label class="field"><span>${label}</span><select data-field="${esc(field.name)}">${options}</select></label>`;
   }
   const type = field.type === "url" ? "url" : field.type === "number" ? "number" : "text";
-  return `<label class="field"><span>${label}</span><input data-field="${esc(field.name)}" type="${type}" value="${esc(field.value ?? "")}" placeholder="${esc(field.placeholder ?? "")}"></label>`;
+  return `<label class="field"><span>${label}</span><input data-field="${esc(field.name)}" type="${type}" autocomplete="off" value="${esc(field.value ?? "")}" placeholder="${esc(field.placeholder ?? "")}"></label>`;
 };
 submitDialog_fn = function() {
   const body = this.root.querySelector(".dialog-body");
@@ -14712,7 +14793,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
       <div class="container" part="container">
         ${this.filter ? `
           <div class="filter-wrapper" part="filter-wrapper">
-            <input type="text" class="filter-input" part="filter-input"
+            <input type="text" class="filter-input" part="filter-input" autocomplete="off"
               placeholder="${this.filterPlaceholder}"
               value="${esc(this._filterValue)}"
               aria-label="Filtrar lista" />
@@ -15404,7 +15485,7 @@ const _FxPickList = class _FxPickList extends FxElement {
     const tgtItems = dTgt.length === 0 ? `<li class="empty-message">${this.filter ? "Nenhum resultado" : "Nenhum selecionado"}</li>` : dTgt.map((item, i) => `<li class="list-item${this._isTargetSelected(item, i) ? " selected" : ""}" data-index="${i}" data-list="target" tabindex="0">${hasSel ? '<input type="checkbox" class="checkbox"' + (this._isTargetSelected(item, i) ? " checked" : "") + " />" : ""}<span class="item-content">${this._optionTemplate ? this._optionTemplate(item) : esc(this._getItemLabel(item))}</span></li>`).join("");
     const srcAllBar = showAll ? `<div class="select-all-bar" part="select-all-bar"><label><input type="checkbox" class="select-all-checkbox" data-list="source" ${this._sourceSelection.length > 0 && this._sourceSelection.length === this._source.length ? "checked" : ""} aria-label="Selecionar todos da origem" /> Selecionar Todos</label><span class="selection-count">${this._sourceSelection.length} selecionado(s)</span></div>` : "";
     const tgtAllBar = showAll ? `<div class="select-all-bar" part="select-all-bar"><label><input type="checkbox" class="select-all-checkbox" data-list="target" ${this._targetSelection.length > 0 && this._targetSelection.length === this._target.length ? "checked" : ""} aria-label="Selecionar todos do destino" /> Selecionar Todos</label><span class="selection-count">${this._targetSelection.length} selecionado(s)</span></div>` : "";
-    this.setTemplate(`<div class="container"><div class="list-container"><div class="list-label">${esc(this.sourceLabel)} (${this._source.length})</div>${this.filter ? '<div class="filter-wrapper"><input type="text" class="filter-input source-filter" placeholder="' + this.filterPlaceholder + '" value="' + esc(this._sourceFilterValue) + '" /></div>' : ""}${srcAllBar}<div class="list-wrapper"><ul class="list source-list" role="listbox" tabindex="0">${srcItems}</ul></div></div><div class="controls"><div class="control-group"><button class="control-btn" data-action="move-all-target" part="control-btn" aria-label="Mover todos para destino"><span class="control-btn-icon">»</span></button><button class="control-btn" data-action="move-target" part="control-btn" aria-label="Mover para destino"><span class="control-btn-icon">→</span></button></div><div class="control-group"><button class="control-btn" data-action="move-source" part="control-btn" aria-label="Mover para origem"><span class="control-btn-icon">←</span></button><button class="control-btn" data-action="move-all-source" part="control-btn" aria-label="Mover todos para origem"><span class="control-btn-icon">«</span></button></div></div><div class="list-container"><div class="list-label">${esc(this.targetLabel)} (${this._target.length})</div>${this.filter ? '<div class="filter-wrapper"><input type="text" class="filter-input target-filter" placeholder="' + this.filterPlaceholder + '" value="' + esc(this._targetFilterValue) + '" /></div>' : ""}${tgtAllBar}<div class="list-wrapper"><ul class="list target-list" role="listbox" tabindex="0">${tgtItems}</ul></div></div></div>`);
+    this.setTemplate(`<div class="container"><div class="list-container"><div class="list-label">${esc(this.sourceLabel)} (${this._source.length})</div>${this.filter ? '<div class="filter-wrapper"><input type="text" autocomplete="off" class="filter-input source-filter" placeholder="' + this.filterPlaceholder + '" value="' + esc(this._sourceFilterValue) + '" /></div>' : ""}${srcAllBar}<div class="list-wrapper"><ul class="list source-list" role="listbox" tabindex="0">${srcItems}</ul></div></div><div class="controls"><div class="control-group"><button class="control-btn" data-action="move-all-target" part="control-btn" aria-label="Mover todos para destino"><span class="control-btn-icon">»</span></button><button class="control-btn" data-action="move-target" part="control-btn" aria-label="Mover para destino"><span class="control-btn-icon">→</span></button></div><div class="control-group"><button class="control-btn" data-action="move-source" part="control-btn" aria-label="Mover para origem"><span class="control-btn-icon">←</span></button><button class="control-btn" data-action="move-all-source" part="control-btn" aria-label="Mover todos para origem"><span class="control-btn-icon">«</span></button></div></div><div class="list-container"><div class="list-label">${esc(this.targetLabel)} (${this._target.length})</div>${this.filter ? '<div class="filter-wrapper"><input type="text" autocomplete="off" class="filter-input target-filter" placeholder="' + this.filterPlaceholder + '" value="' + esc(this._targetFilterValue) + '" /></div>' : ""}${tgtAllBar}<div class="list-wrapper"><ul class="list target-list" role="listbox" tabindex="0">${tgtItems}</ul></div></div></div>`);
     this._attachListeners();
   }
   _attachListeners() {