@wrrdev/fenix-ui 1.1.6 → 1.1.8

package/dist/fenix-ui4.esm.js

@@ -5,8 +5,8 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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, render_fn;
-import { a as FENIX_ICON_BASE_CSS, f as fenixIconHtml, e as esc, i as isFenixIconName } from "./assets/base-css-Be_r8aTo.js";
-import { s, b } from "./assets/base-css-Be_r8aTo.js";
+import { a as FENIX_ICON_BASE_CSS, f as fenixIconHtml, e as esc, i as isFenixIconName, l as loadFenixIconsFont } from "./assets/font-CF0TXsAP.js";
+import { s, g } from "./assets/font-CF0TXsAP.js";
 const lightTokens = {
   color: {
     primary: "#c2410c",
@@ -53,7 +53,15 @@ const lightTokens = {
     /** '0' desativa o efeito ripple do botão. */
     ripple: "1",
     /** Anel de foco dos campos de formulário. Use 'none' para campos sem sobra. */
-    "focus-ring": "0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)"
+    "focus-ring": "0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)",
+    /**
+     * Brilho dos estados `error`/`invalid`. Acompanha `focus-ring`: quando o
+     * anel de foco está desligado, `applyTokens` força 'none' — o erro segue
+     * visível pela borda (border-color) e pela mensagem, mas sem o anel.
+     */
+    "error-ring": "0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent)",
+    /** 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)"
   },
   z: { base: "auto", dropdown: "1000", modal: "1100", toast: "1200" }
 };
@@ -113,6 +121,7 @@ function tokenCssVars(tokens) {
 function applyTokens(themeName, overrides, target = document.documentElement) {
   const base = themeName === "dark" ? darkTokens : defaultTokens;
   const finalTokens = deepMerge(base, overrides);
+  syncValidationRings(finalTokens, overrides);
   const vars = tokenCssVars(finalTokens);
   for (const [name, value] of Object.entries(vars)) {
     target.style.setProperty(name, value);
@@ -121,6 +130,17 @@ function applyTokens(themeName, overrides, target = document.documentElement) {
     window.dispatchEvent(new CustomEvent("fenix:theme", { detail: { theme: themeName, tokens: finalTokens } }));
   }
 }
+const RING_OFF_VALUES = /* @__PURE__ */ new Set(["", "none", "0", "unset", "initial"]);
+function syncValidationRings(tokens, overrides) {
+  const focusRing = String(tokens.effect["focus-ring"] ?? "").trim();
+  if (!RING_OFF_VALUES.has(focusRing)) return;
+  const explicit = (key2) => Boolean(overrides?.effect && Object.prototype.hasOwnProperty.call(overrides.effect, key2));
+  tokens.effect = {
+    ...tokens.effect,
+    "error-ring": explicit("error-ring") ? tokens.effect["error-ring"] : "none",
+    "success-ring": explicit("success-ring") ? tokens.effect["success-ring"] : "none"
+  };
+}
 function configure(options = {}, target = document.documentElement) {
   if (options.theme) activeTheme = options.theme;
   if (options.tokens) activeOverrides = options.tokens;
@@ -419,7 +439,9 @@ _FxButton.styles = css`
       font-size: var(--fx-font-size);
       font-weight: var(--fx-font-weight);
       line-height: var(--fx-font-line-height);
-      padding: var(--fx-space-md) var(--fx-space-xl);
+      /* Padding vertical limitado ao orçamento do token --fx-size-*: a altura
+         fica EXATAMENTE em sm 32 / md 40 / lg 48 (mesma medida dos campos). */
+      padding: var(--fx-space-sm) var(--fx-space-xl);
       border-radius: var(--fx-radius-md);
       border: 1px solid transparent;
       color: #fff;
@@ -442,8 +464,8 @@ _FxButton.styles = css`
 
     /* Tamanhos — alturas vindas dos tokens (personalizáveis por preset) */
     .btn { min-height: var(--fx-size-md); }
-    :host([size='sm']) .btn { padding: var(--fx-space-sm) var(--fx-space-lg); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }
-    :host([size='lg']) .btn { padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }
+    :host([size='sm']) .btn { padding: var(--fx-space-xs) var(--fx-space-lg); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }
+    :host([size='lg']) .btn { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }
 
     /* Full width */
     :host([full]) .btn { width: 100%; }
@@ -781,6 +803,9 @@ _FxSelect.styles = css`
       /* Acompanha a largura definida no :host. */
       width: 100%;
       font: inherit;
+      /* Altura/linha determinísticas: a caixa fica no token --fx-size-*
+         (o line-height fixo impede que a herança da página estoure o min-height). */
+      line-height: var(--fx-font-line-height);
       font-weight: var(--fx-font-weight);
       color: var(--fx-text-default);
       text-align: left;
@@ -808,28 +833,31 @@ _FxSelect.styles = css`
     :host([full]) { min-width: 0; }
     :host([full]) .trigger { width: 100%; min-width: 0; }
     :host([full]) .panel { width: 100%; }
-        /* Validação */
+        /* Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o
+           brilho segue --fx-effect-error-ring, que acompanha effect.focus-ring. */
     :host([error]) .trigger,
     :host([invalid]) .trigger {
       border-color: var(--fx-color-danger, #dc2626);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([error]) .trigger:focus-visible,
     :host([invalid]) .trigger:focus-visible,
     :host([error][open]) .trigger,
     :host([invalid][open]) .trigger {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .trigger,
     :host([valid]) .trigger {
       border-color: var(--fx-color-success, #16a34a);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([success]) .trigger:focus-visible,
     :host([valid]) .trigger:focus-visible,
     :host([success][open]) .trigger,
     :host([valid][open]) .trigger {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([disabled]) .trigger,
     .trigger[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; background-color: var(--fx-surface-surface-hover); }
@@ -1036,13 +1064,17 @@ _FxInput.styles = css`
     .field {
       font-family: inherit;
       font-size: inherit;
+      /* Altura determinística: com line-height fixo, o padding vertical cabe no
+         token --fx-size-* e a caixa fica EXATAMENTE no tamanho padrão
+         (sm 32 / md 40 / lg 48), igual para todos os campos. */
+      line-height: var(--fx-font-line-height);
       min-height: var(--fx-size-md);
       font-weight: var(--fx-font-weight);
       color: var(--fx-text-default);
       background-color: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
       border-radius: var(--fx-radius-md);
-      padding: var(--fx-space-md) var(--fx-space-lg);
+      padding: var(--fx-space-sm) var(--fx-space-lg);
       /* Acompanha a largura definida no :host. */
       width: 100%;
       box-sizing: border-box;
@@ -1063,25 +1095,27 @@ _FxInput.styles = css`
       cursor: not-allowed;
       background-color: var(--fx-surface-surface-hover);
     }
-    /* Validação: sobrescrevem a borda/foco via token do preset. */
+    /* Validação: borda sempre; o brilho (anel) segue o token do preset
+       --fx-effect-error-ring, que acompanha effect.focus-ring — anel
+       desligado ⇒ erro só com a borda vermelha, ligado ⇒ soma o brilho. */
     :host([error]) .field,
     :host([invalid]) .field,
     :host([error]) .field:focus-visible,
     :host([invalid]) .field:focus-visible {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .field,
     :host([valid]) .field,
     :host([success]) .field:focus-visible,
     :host([valid]) .field:focus-visible {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([size='sm']) { width: var(--fx-input-width-sm, 220px); }
-    :host([size='sm']) .field { padding: var(--fx-space-sm) var(--fx-space-md); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }
+    :host([size='sm']) .field { padding: var(--fx-space-xs) var(--fx-space-md); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }
     :host([size='lg']) { width: var(--fx-input-width-lg, 300px); }
-    :host([size='lg']) .field { padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }
+    :host([size='lg']) .field { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }
     /* Full width: o host estica até o pai e o campo interno acompanha
        (usar com um container de largura controlada, ex. w-full no Vue). */
     :host([full]) { display: block; width: 100%; }
@@ -1475,6 +1509,8 @@ _FxMultiselect.styles = css`
       min-height: var(--fx-size-md);
       padding: var(--fx-space-xs) var(--fx-space-md);
       font: inherit;
+      /* Altura determinística: a caixa fica no token --fx-size-*. */
+      line-height: var(--fx-font-line-height);
       color: var(--fx-text-default);
       background-color: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
@@ -1500,28 +1536,31 @@ _FxMultiselect.styles = css`
     /* Full width: o host estica até o pai e o trigger acompanha. */
     :host([full]) { display: block; width: 100%; }
     :host([full]) .trigger { width: 100%; }
-    /* Validação */
+    /* Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o brilho
+       segue o token --fx-effect-error-ring, que acompanha effect.focus-ring. */
     :host([error]) .trigger,
     :host([invalid]) .trigger {
       border-color: var(--fx-color-danger, #dc2626);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([error]) .trigger:focus-visible,
     :host([invalid]) .trigger:focus-visible,
     :host([error][open]) .trigger,
     :host([invalid][open]) .trigger {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .trigger,
     :host([valid]) .trigger {
       border-color: var(--fx-color-success, #16a34a);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([success]) .trigger:focus-visible,
     :host([valid]) .trigger:focus-visible,
     :host([success][open]) .trigger,
     :host([valid][open]) .trigger {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     .trigger:hover { border-color: var(--fx-border-hover); }
     .trigger:focus-visible {
@@ -1928,9 +1967,9 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       <div class="grid ${this.view}">${cells}</div>
     `);
     this.root.querySelectorAll("[data-nav]").forEach(
-      (b2) => b2.addEventListener(
+      (b) => b.addEventListener(
         "click",
-        () => this.navigate(Number(b2.dataset.nav))
+        () => this.navigate(Number(b.dataset.nav))
       )
     );
     const gotoBtn = this.root.querySelector("[data-goto]");
@@ -1939,21 +1978,21 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       this.render();
     });
     this.root.querySelectorAll("[data-day]").forEach(
-      (b2) => b2.addEventListener(
+      (b) => b.addEventListener(
         "click",
-        () => this.pickDay(Number(b2.dataset.day))
+        () => this.pickDay(Number(b.dataset.day))
       )
     );
     this.root.querySelectorAll("[data-month]").forEach(
-      (b2) => b2.addEventListener("click", () => {
-        this.cursor.m = Number(b2.dataset.month);
+      (b) => b.addEventListener("click", () => {
+        this.cursor.m = Number(b.dataset.month);
         this.view = "days";
         this.render();
       })
     );
     this.root.querySelectorAll("[data-year]").forEach(
-      (b2) => b2.addEventListener("click", () => {
-        this.cursor.y = Number(b2.dataset.year);
+      (b) => b.addEventListener("click", () => {
+        this.cursor.y = Number(b.dataset.year);
         this.view = "months";
         this.render();
       })
@@ -2364,7 +2403,7 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
     if (Number.isNaN(d.getTime())) return null;
     const [y, m, day] = iso.split("-").map((n) => parseInt(n, 10));
     if (d.getFullYear() !== y || d.getMonth() + 1 !== m || d.getDate() !== day) return null;
-    const cmp = (a, b2) => a.split("T")[0].localeCompare(b2.split("T")[0]);
+    const cmp = (a, b) => a.split("T")[0].localeCompare(b.split("T")[0]);
     const min = this.getAttr("min");
     const max = this.getAttr("max");
     if (min && cmp(iso, min) < 0) return null;
@@ -2391,9 +2430,9 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
         this.setAttribute("start", this.withTime(parsed));
         this.removeAttribute("end");
       } else {
-        const [a, b2] = [this.getAttr("start").split("T")[0], parsed].sort();
+        const [a, b] = [this.getAttr("start").split("T")[0], parsed].sort();
         this.setAttribute("start", this.withTime(a));
-        this.setAttribute("end", this.withTime(b2));
+        this.setAttribute("end", this.withTime(b));
       }
       this.emitChange({ start: this.getAttr("start"), end: this.getAttr("end") });
     } else {
@@ -2423,6 +2462,8 @@ _FxDatepicker.styles = css`
       min-height: var(--fx-size-md, 40px);
       min-width: 150px;
       padding: var(--fx-space-xs) var(--fx-space-md);
+      /* Altura determinística: a caixa fica EXATAMENTE no token --fx-size-*. */
+      line-height: var(--fx-font-line-height);
       background-color: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
       border-radius: var(--fx-radius-md);
@@ -2431,9 +2472,9 @@ _FxDatepicker.styles = css`
         border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),
         box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);
     }
-    :host([size='sm']) .field { min-height: 32px; min-width: 180px; }
-    :host([size='md']) .field { min-height: 40px; }
-    :host([size='lg']) .field { min-height: 48px; min-width: 220px; font-size: calc(var(--fx-font-size) + 4px); }
+    :host([size='sm']) .field { min-height: var(--fx-size-sm); min-width: 180px; }
+    :host([size='md']) .field { min-height: var(--fx-size-md); }
+    :host([size='lg']) .field { min-height: var(--fx-size-lg); min-width: 220px; font-size: calc(var(--fx-font-size) + 4px); }
     /* Range e multiple exibem mais de uma data: campo mais largo */
     :host([mode='range']) .field { min-width: 250px; }
     :host([mode='multiple']) .field { min-width: 220px; }
@@ -2444,28 +2485,31 @@ _FxDatepicker.styles = css`
        descartados para permitir layouts estreitos sob controle do pai). */
     :host([full]) { display: block; width: 100%; }
     :host([full]) .field { min-width: 0; }
-    /* Validação */
+    /* Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o brilho
+       segue o token --fx-effect-error-ring, que acompanha effect.focus-ring. */
     :host([error]) .field,
     :host([invalid]) .field {
       border-color: var(--fx-color-danger, #dc2626);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([error]) .field:focus-within,
     :host([invalid]) .field:focus-within,
     :host([error][open]) .field,
     :host([invalid][open]) .field {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .field,
     :host([valid]) .field {
       border-color: var(--fx-color-success, #16a34a);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([success]) .field:focus-within,
     :host([valid]) .field:focus-within,
     :host([success][open]) .field,
     :host([valid][open]) .field {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     .field:hover { border-color: var(--fx-border-hover); }
     .field:focus-within {
@@ -3355,8 +3399,8 @@ const _FxTable = class _FxTable extends FxElement {
     }
     const total = this.lazy ? this.total : out.length;
     if (this.sortField) {
-      out.sort((a, b2) => {
-        const av = a[this.sortField], bv = b2[this.sortField];
+      out.sort((a, b) => {
+        const av = a[this.sortField], bv = b[this.sortField];
         if (typeof av === "number" && typeof bv === "number")
           return (av - bv) * this.sortDir;
         return String(av ?? "").localeCompare(String(bv ?? ""), "pt-BR") * this.sortDir;
@@ -4140,6 +4184,8 @@ _FxTextarea.styles = css`
     .field {
       font-family: inherit;
       font-size: inherit;
+      /* Altura determinística: a caixa fica EXATAMENTE no token --fx-size-*. */
+      line-height: var(--fx-font-line-height);
       font-weight: var(--fx-font-weight);
       color: var(--fx-text-default);
       background-color: var(--fx-surface-background);
@@ -4168,16 +4214,18 @@ _FxTextarea.styles = css`
       cursor: not-allowed;
       background-color: var(--fx-surface-surface-hover);
     }
+    /* Validação: borda sempre; brilho (anel) via token que acompanha
+       effect.focus-ring — desligado ⇒ erro só com a borda vermelha. */
     :host([error]) .field, :host([invalid]) .field {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .field, :host([valid]) .field {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     :host([size='sm']) { width: var(--fx-textarea-width-sm, 220px); }
-    :host([size='sm']) .field { min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }
+    :host([size='sm']) .field { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-md); }
     :host([size='lg']) { width: var(--fx-textarea-width-lg, 300px); }
     :host([size='lg']) .field { min-height: calc(var(--fx-size-lg) + 80px); }
     /* Full width: o host estica até o pai e o campo interno acompanha. */
@@ -4824,10 +4872,12 @@ _FxFileUpload.styles = css`
          o botão sem precisar do full (host é shrink-to-fit por padrão). */
       width: 100%;
       min-height: var(--fx-size-md);
-      padding: var(--fx-space-md) var(--fx-space-lg);
+      /* Padding vertical no orçamento do token --fx-size-* ⇒ altura padrão. */
+      padding: var(--fx-space-sm) var(--fx-space-lg);
       font-family: inherit;
       font-size: inherit;
       font-weight: var(--fx-font-weight);
+      line-height: var(--fx-font-line-height);
       color: var(--fx-text-default);
       background-color: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
@@ -4854,8 +4904,8 @@ _FxFileUpload.styles = css`
     :host([severity='info']) .btn { background: var(--fx-color-info); border-color: transparent; color: #fff; }
     :host([severity]) .btn:hover { filter: brightness(0.88); }
     :host([severity]) .btn:focus-visible { border-color: transparent; }
-    :host([size='sm']) .btn { min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); font-size: calc(var(--fx-font-size) - 2px); }
-    :host([size='lg']) .btn { min-height: var(--fx-size-lg); padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); }
+    :host([size='sm']) .btn { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-md); font-size: calc(var(--fx-font-size) - 2px); }
+    :host([size='lg']) .btn { min-height: var(--fx-size-lg); padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); }
     :host([size='sm']) .drop { min-height: 72px; }
     :host([size='lg']) .drop { min-height: 132px; }
 
@@ -5415,6 +5465,75 @@ function defineFxAvatar() {
   return defineElement("fx-avatar", FxAvatar);
 }
 defineFxAvatar();
+const _FxIcon = class _FxIcon extends FxElement {
+  static get observedAttributes() {
+    return ["name", "size", "label", "fill", "bold"];
+  }
+  /** Nome do glifo (ou texto livre/emoji). */
+  get name() {
+    return this.getAttr("name");
+  }
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  /** Tamanho: '' (herda 1em) | 'sm' | 'md' | 'lg' | 'xl'. */
+  get size() {
+    return this.getAttr("size");
+  }
+  set size(value) {
+    if (value) this.setAttribute("size", value);
+    else this.removeAttribute("size");
+  }
+  /** Nome acessível; vazio = ícone decorativo (aria-hidden). */
+  get label() {
+    return this.getAttr("label");
+  }
+  set label(value) {
+    if (value) this.setAttribute("label", value);
+    else this.removeAttribute("label");
+  }
+  connectedCallback() {
+    loadFenixIconsFont();
+    super.connectedCallback();
+  }
+  render() {
+    const name = this.getAttr("name").trim();
+    const label = this.getAttr("label").trim();
+    const a11y = label ? `role="img" aria-label="${esc(label)}"` : 'aria-hidden="true"';
+    if (!name) {
+      this.setTemplate(`<span class="icon" part="icon" ${a11y}></span>`);
+      return;
+    }
+    const inner = isFenixIconName(name) ? `<i class="icon fx-icon" part="icon" ${a11y}>${esc(name)}</i>` : `<span class="icon" part="icon" ${a11y}>${esc(name)}</span>`;
+    this.setTemplate(inner);
+  }
+};
+_FxIcon.styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
+      line-height: 1;
+      color: currentColor;
+      font-size: var(--fx-icon-size, 1em);
+    }
+    :host([size='sm']) { font-size: var(--fx-icon-size-sm, 16px); }
+    :host([size='md']) { font-size: var(--fx-icon-size-md, 20px); }
+    :host([size='lg']) { font-size: var(--fx-icon-size-lg, 24px); }
+    :host([size='xl']) { font-size: var(--fx-icon-size-xl, 32px); }
+    :host([hidden]) { display: none; }
+    .icon { display: inline-block; }
+    /* Variantes da fonte (FILL/wght): vencem a classe base .fx-icon. */
+    :host([fill]) .icon { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
+    :host([bold]) .icon { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
+    ${FENIX_ICON_BASE_CSS}
+  `;
+let FxIcon = _FxIcon;
+function defineFxIcon() {
+  return defineElement("fx-icon", FxIcon);
+}
+defineFxIcon();
 const _FxCard = class _FxCard extends FxElement {
   static get observedAttributes() {
     return ["variant", "radius", "size", "padded", "heading"];
@@ -6303,6 +6422,8 @@ _FxToggleButtonGroup.styles = css`
       min-height: var(--fx-size-md);
       padding: var(--fx-space-sm) var(--fx-space-lg);
       font-weight: var(--fx-font-weight);
+      /* Altura determinística: a caixa fica EXATAMENTE no token --fx-size-*. */
+      line-height: var(--fx-font-line-height);
       color: var(--fx-text-default);
       background: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
@@ -6312,7 +6433,7 @@ _FxToggleButtonGroup.styles = css`
       transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing), border-color var(--fx-motion-duration-fast) var(--fx-motion-easing), color var(--fx-motion-duration-fast) var(--fx-motion-easing);
     }
     :host([size='sm']) .option { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-md); font-size: calc(var(--fx-font-size) - 2px); }
-    :host([size='lg']) .option { min-height: var(--fx-size-lg); padding: var(--fx-space-md) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 2px); }
+    :host([size='lg']) .option { min-height: var(--fx-size-lg); padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 2px); }
     .option:hover { border-color: var(--fx-color-primary); }
     .option.active {
       background: var(--fx-color-primary);
@@ -8515,12 +8636,14 @@ _FxAutocomplete.styles = css`
     .field {
       font-family: inherit;
       font-size: inherit;
+      /* Altura determinística: a caixa fica EXATAMENTE no token --fx-size-*. */
+      line-height: var(--fx-font-line-height);
       font-weight: var(--fx-font-weight);
       color: var(--fx-text-default);
       background-color: var(--fx-surface-background);
       border: 1px solid var(--fx-border-default);
       border-radius: var(--fx-radius-md);
-      padding: var(--fx-space-md) var(--fx-space-lg);
+      padding: var(--fx-space-sm) var(--fx-space-lg);
       /* Acompanha a largura definida no :host. */
       width: 100%;
       min-height: var(--fx-size-md);
@@ -8537,22 +8660,23 @@ _FxAutocomplete.styles = css`
       box-shadow: var(--fx-effect-focus-ring, none);
     }
     :host([size='sm']) { width: var(--fx-autocomplete-width-sm, 220px); }
-    :host([size='sm']) .field { min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }
+    :host([size='sm']) .field { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-md); }
     :host([size='lg']) { width: var(--fx-autocomplete-width-lg, 300px); }
-    :host([size='lg']) .field { min-height: var(--fx-size-lg); }
+    :host([size='lg']) .field { min-height: var(--fx-size-lg); padding: var(--fx-space-sm) var(--fx-space-lg); }
     /* Full width: o host estica até o pai e o campo interno acompanha. */
     :host([full]) { display: block; width: 100%; }
     :host([full]) .field { width: 100%; }
-    /* Validação: sobrescrevem a borda/foco via token do preset. */
+    /* Validação: borda sempre; brilho (anel) via token que acompanha
+       effect.focus-ring — desligado ⇒ erro só com a borda vermelha. */
     :host([error]) .field,
     :host([invalid]) .field {
       border-color: var(--fx-color-danger, #dc2626);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));
     }
     :host([success]) .field,
     :host([valid]) .field {
       border-color: var(--fx-color-success, #16a34a);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));
     }
     .list {
       position: absolute;
@@ -8909,7 +9033,9 @@ _FxKnob.styles = css`
       outline: none;
     }
     .knob:focus-visible svg {
-      filter: drop-shadow(var(--fx-effect-focus-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)));
+      /* Mesmo fallback none dos demais componentes: sem motor de tema (ou com
+         effect.focus-ring desligado) não há anel de foco. */
+      filter: drop-shadow(var(--fx-effect-focus-ring, none));
     }
   `;
 let FxKnob = _FxKnob;
@@ -9394,7 +9520,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   _handleMoveAction(action) {
     if (!this._selection.length) return;
     const displayData = this._getDisplayData();
-    const selectedIndices = this._selection.map((s2) => displayData.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(s2, -1))).filter((i) => i >= 0).sort((a, b2) => a - b2);
+    const selectedIndices = this._selection.map((s2) => displayData.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(s2, -1))).filter((i) => i >= 0).sort((a, b) => a - b);
     if (selectedIndices.length === 0) return;
     switch (action) {
       case "top":
@@ -9419,7 +9545,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
       items.push(this._data[actualIdx]);
       actualIndices.push(actualIdx);
     }
-    actualIndices.sort((a, b2) => b2 - a).forEach((i) => this._data.splice(i, 1));
+    actualIndices.sort((a, b) => b - a).forEach((i) => this._data.splice(i, 1));
     const insertIdx = this._getActualIndex(0);
     this._data.splice(insertIdx, 0, ...items);
     this._applyFilter();
@@ -9435,7 +9561,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
       items.push(this._data[actualIdx]);
       actualIndices.push(actualIdx);
     }
-    actualIndices.sort((a, b2) => b2 - a).forEach((i) => this._data.splice(i, 1));
+    actualIndices.sort((a, b) => b - a).forEach((i) => this._data.splice(i, 1));
     const displayData = this._getDisplayData();
     const insertIdx = this._getActualIndex(displayData.length - 1);
     this._data.splice(insertIdx + 1, 0, ...items);
@@ -9447,7 +9573,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   _moveSelectedByOne(indices, delta) {
     const displayData = this._getDisplayData();
     if (displayData.length === 0) return;
-    const actualIndices = indices.map((idx) => this._getActualIndex(idx)).filter((idx) => idx >= 0).sort((a, b2) => a - b2);
+    const actualIndices = indices.map((idx) => this._getActualIndex(idx)).filter((idx) => idx >= 0).sort((a, b) => a - b);
     if (actualIndices.length === 0) return;
     if (delta < 0 && actualIndices[0] <= 0) return;
     if (delta > 0 && actualIndices[actualIndices.length - 1] >= this._data.length - 1) return;
@@ -9515,7 +9641,7 @@ _FxOrderList.styles = css`
     .select-all-bar input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; }
     .filter-wrapper { margin-bottom: var(--fx-space-xs, 4px); }
     .filter-input { width: 100%; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); padding-left: 42px; border: 1.5px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-family: inherit; font-size: inherit; color: var(--orderlist-text); background: var(--orderlist-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 14px center; transition: var(--orderlist-transition); }
-    .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 20%, transparent); }
+    .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: var(--fx-effect-focus-ring, none); }
     .filter-input::placeholder { color: var(--orderlist-text-muted); }
     .main-row { display: flex; align-items: stretch; gap: var(--fx-space-sm, 8px); }
     .list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); overflow: hidden; box-shadow: var(--orderlist-shadow); max-height: 450px; overflow-y: auto; flex: 1; }
@@ -9558,7 +9684,7 @@ _FxOrderList.styles = css`
     button.control-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--orderlist-text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--orderlist-transition); position: relative; }
     button.control-btn:hover:not(:disabled) { background: var(--orderlist-bg-hover); color: var(--orderlist-primary); transform: scale(1.1); }
     button.control-btn:active:not(:disabled) { transform: scale(0.92); background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }
-    button.control-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 30%, transparent); }
+    button.control-btn:focus-visible { outline: none; box-shadow: var(--fx-effect-focus-ring, none); }
     button.control-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
     .control-btn-icon { font-size: 18px; line-height: 1; }
     /* Tooltip nos botoes */
@@ -10169,7 +10295,7 @@ _FxPickList.styles = css`
     .filter-input:focus {
       outline: none;
       border-color: var(--picklist-primary);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--picklist-primary) 20%, transparent);
+      box-shadow: var(--fx-effect-focus-ring, none);
     }
     .filter-input::placeholder {
       color: var(--picklist-text-muted);
@@ -10266,7 +10392,7 @@ _FxPickList.styles = css`
     }
     button.control-btn:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--picklist-primary) 30%, transparent);
+      box-shadow: var(--fx-effect-focus-ring, none);
     }
     button.control-btn:disabled {
       opacity: 0.3;
@@ -10619,6 +10745,7 @@ export {
   FxEmptyState,
   FxFileUpload,
   FxFloatlabel,
+  FxIcon,
   FxInput,
   FxKnob,
   FxMenu,
@@ -10665,7 +10792,7 @@ export {
   resetTheme,
   s as sanitizeData,
   setTokens,
-  b as stripTags,
+  g as stripTags,
   theme,
   themePresets,
   tokenCssVars