@wrrdev/fenix-ui 1.1.17 → 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;
@@ -4658,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;
@@ -4702,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;
@@ -4978,6 +5000,7 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.cancelScheduledSync();
     this.observer?.disconnect();
     this._labelObserver?.disconnect();
     this._labelObserver = void 0;
@@ -5007,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) {
@@ -5047,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):
@@ -5136,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. */
@@ -5167,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;
@@ -5185,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 ---- */
@@ -5205,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):
@@ -5236,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) ---- */