@wrrdev/fenix-ui 1.1.4 → 1.1.5

package/dist/fenix-ui3.esm.js

@@ -5,7 +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, i as isFenixIconName } from "./assets/base-css-BifSeW2H.js";
+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";
 const lightTokens = {
   color: {
     primary: "#c2410c",
@@ -306,37 +307,6 @@ function defineElement(tag, ctor) {
   }
   return customElements.get(tag) ?? ctor;
 }
-const HTML_ENTITIES = {
-  "&": "&",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#39;",
-  "/": "&#x2F;",
-  "`": "&#x60;",
-  "=": "&#x3D;"
-};
-const SANITIZE_REGEX = /[&<>"'`=/]/g;
-function esc(value) {
-  if (value == null) return "";
-  return String(value).replace(SANITIZE_REGEX, (char) => HTML_ENTITIES[char] || char);
-}
-function stripTags(html) {
-  return html.replace(/<[^>]*>/g, "");
-}
-function sanitizeData(data) {
-  if (data == null) return data;
-  if (typeof data === "string") return esc(data);
-  if (Array.isArray(data)) return data.map(sanitizeData);
-  if (typeof data === "object") {
-    const result = {};
-    for (const [key2, value] of Object.entries(data)) {
-      result[key2] = sanitizeData(value);
-    }
-    return result;
-  }
-  return data;
-}
 const FX_JSX_TYPES = true;
 const _FxButton = class _FxButton extends FxElement {
   constructor() {
@@ -359,12 +329,12 @@ const _FxButton = class _FxButton extends FxElement {
     };
   }
   static get observedAttributes() {
-    return ["variant", "size", "disabled", "loading", "type", "full"];
+    return ["variant", "size", "disabled", "loading", "type", "full", "icon", "icon-pos"];
   }
   /** Tamanho. Padrão: `'md'`. */
   get size() {
-    const s = this.getAttr("size", "md");
-    return s === "sm" || s === "lg" ? s : "md";
+    const s2 = this.getAttr("size", "md");
+    return s2 === "sm" || s2 === "lg" ? s2 : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -385,21 +355,28 @@ const _FxButton = class _FxButton extends FxElement {
     const loading = this.hasAttr("loading");
     const disabled = this.hasAttr("disabled") || loading;
     const btnType = this.getAttr("type", "button");
+    const icon = this.getAttr("icon");
+    const iconRight = this.getAttr("icon-pos", "left") === "right";
+    const slottedIcon = this.querySelector('[slot="icon"]');
+    const iconContent = slottedIcon ? '<slot name="icon"></slot>' : icon ? fenixIconHtml(icon) : "";
     this.setTemplate(`
       <button class="btn" part="button" type="${btnType}">
-        <span class="btn__icon" part="icon"><slot name="icon"></slot></span>
+        ${!iconRight ? `<span class="btn__icon" part="icon">${iconContent}</span>` : ""}
         <span class="btn__label" part="label"><slot></slot></span>
+        ${iconRight ? `<span class="btn__icon" part="icon">${iconContent}</span>` : ""}
         ${loading ? '<span class="btn__spinner" aria-hidden="true"></span>' : ""}
       </button>
     `);
     const btn = this.root.querySelector(".btn");
     if (!btn) return;
-    const iconSlot = btn.querySelector(".btn__icon slot");
-    const iconWrap = this.root.querySelector(".btn__icon");
-    const hasIcon = Boolean(iconSlot?.assignedNodes({ flatten: true }).some(
-      (n) => n.nodeType === Node.ELEMENT_NODE || (n.textContent ?? "").trim() !== ""
-    ));
-    iconWrap?.toggleAttribute("hidden", !hasIcon);
+    const hasIcon = iconContent.trim() !== "";
+    for (const wrap of this.root.querySelectorAll(".btn__icon")) {
+      wrap.toggleAttribute("hidden", !hasIcon);
+    }
+    const hasLabel = [...this.childNodes ?? []].some(
+      (n) => n.nodeType === Node.ELEMENT_NODE ? n.getAttribute?.("slot") !== "icon" : (n.textContent ?? "").trim() !== ""
+    );
+    btn.classList.toggle("btn--icon-only", !hasLabel && hasIcon);
     if (disabled) {
       btn.setAttribute("disabled", "");
       btn.setAttribute("aria-disabled", "true");
@@ -420,10 +397,18 @@ const _FxButton = class _FxButton extends FxElement {
   }
 };
 _FxButton.styles = css`
+    ${FENIX_ICON_BASE_CSS}
     :host {
       display: inline-block;
       vertical-align: middle;
     }
+    /* Full width: o host inline-block é shrink-to-fit, então precisa virar
+       block para o 100% do .btn interno ter contra o que esticar. */
+    :host([full]) {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+    }
     .btn {
       display: inline-flex;
       align-items: center;
@@ -475,9 +460,13 @@ _FxButton.styles = css`
     :host([variant='outline']) .btn:hover { background: var(--fx-surface-surface-hover); filter: none; }
 
     /* Ícone e spinner */
-    .btn__icon { display: inline-flex; }
+    .btn__icon { display: inline-flex; align-items: center; font-size: var(--fx-button-icon-size, calc(var(--fx-font-size) + 6px)); line-height: 1; }
     .btn__icon[hidden] { display: none; }
     .btn__label { display: inline-flex; align-items: center; justify-content: center; }
+    /* Icon-only: a label some (o gap do flex some junto) e o botão vira
+       quadrado com padding simétrico — ícone perfeitamente centralizado. */
+    .btn--icon-only { padding-left: var(--fx-space-md); padding-right: var(--fx-space-md); }
+    .btn--icon-only .btn__label { display: none; }
     .btn[hidden] { display: none; }
     .btn__spinner {
       width: 1em;
@@ -571,8 +560,8 @@ const _FxSpinner = class _FxSpinner extends FxElement {
   }
   /** Tamanho do spinner. Padrão: `'md'`. */
   get size() {
-    const s = this.getAttr("size", "md");
-    return s === "sm" || s === "lg" ? s : "md";
+    const s2 = this.getAttr("size", "md");
+    return s2 === "sm" || s2 === "lg" ? s2 : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -612,12 +601,12 @@ const _FxSelect = class _FxSelect extends FxElement {
   // `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", "success"];
+    return ["size", "disabled", "placeholder", "searchable", "clearable", "error", "invalid", "success", "valid"];
   }
   /** Tamanho do campo. Padrão: `'md'`. */
   get size() {
-    const s = this.getAttr("size", "md");
-    return s === "sm" || s === "lg" ? s : "md";
+    const s2 = this.getAttr("size", "md");
+    return s2 === "sm" || s2 === "lg" ? s2 : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -808,6 +797,10 @@ _FxSelect.styles = css`
     }
         :host([size='sm']) .trigger { min-width: 180px; min-height: var(--fx-size-sm); }
     :host([size='lg']) .trigger { min-height: var(--fx-size-lg); font-size: calc(var(--fx-font-size) + 4px); }
+    /* Full width: o host estica até o pai e o trigger acompanha. */
+    :host([full]) { display: block; width: 100%; }
+    :host([full]) .trigger { width: 100%; min-width: 0; }
+    :host([full]) .panel { width: 100%; }
         /* Validação */
     :host([error]) .trigger,
     :host([invalid]) .trigger {
@@ -921,6 +914,8 @@ defineFxSelect();
 const _FxInput = class _FxInput extends FxElement {
   // `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:
+  // é assim que o toggle no playground / setAttribute no submit re-renderiza.
   static get observedAttributes() {
     return [
       "type",
@@ -930,13 +925,19 @@ const _FxInput = class _FxInput extends FxElement {
       "readonly",
       "min",
       "max",
-      "step"
+      "step",
+      "icon",
+      "icon-pos",
+      "error",
+      "invalid",
+      "success",
+      "valid"
     ];
   }
   /** Tamanho do campo. Padrão: `'md'`. */
   get size() {
-    const s = this.getAttr("size", "md");
-    return s === "sm" || s === "lg" ? s : "md";
+    const s2 = this.getAttr("size", "md");
+    return s2 === "sm" || s2 === "lg" ? s2 : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -961,12 +962,21 @@ const _FxInput = class _FxInput extends FxElement {
     const min = this.getAttr("min");
     const max = this.getAttr("max");
     const step = this.getAttr("step");
+    const icon = this.getAttr("icon");
+    const iconPos = this.getAttr("icon-pos", "left") === "right" ? "right" : "left";
+    const slottedIcon = this.querySelector('[slot="icon"]');
+    const iconContent = slottedIcon ? '<slot name="icon" part="icon"></slot>' : icon ? fenixIconHtml(icon) : "";
+    const useIconBox = Boolean(iconContent);
     this.setTemplate(`
-      ${this.hasAttr("clearable") ? '<div class="wrap">' : ""}
+      ${this.hasAttr("clearable") ? '<div class="wrap" part="wrap">' : ""}
+      ${useIconBox ? `<div class="field-icon icon-${iconPos}">` : ""}
+      ${useIconBox && iconPos === "left" ? iconContent : ""}
       <input class="field" part="input" type="${esc(type)}"
         ${placeholder ? `placeholder="${esc(placeholder)}"` : ""}
         ${min ? `min="${esc(min)}"` : ""} ${max ? `max="${esc(max)}"` : ""} ${step ? `step="${esc(step)}"` : ""}
       />
+      ${useIconBox && iconPos === "right" ? iconContent : ""}
+      ${useIconBox ? "</div>" : ""}
       ${this.hasAttr("clearable") ? '<button type="button" class="clear" part="clear" aria-label="Limpar" tabindex="-1">×</button></div>' : ""}
     `);
     const field = this.root.querySelector(".field");
@@ -1056,10 +1066,56 @@ _FxInput.styles = css`
     }
     :host([size='sm']) .field { padding: var(--fx-space-sm) var(--fx-space-md); font-size: var(--fx-font-size); width: 220px; min-height: var(--fx-size-sm); }
     :host([size='lg']) .field { padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); width: 300px; 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%; }
+    :host([full]) .field { width: 100%; }
     /* Clearable */
     :host([clearable]) { position: relative; display: inline-flex; }
+    :host([clearable][full]) { display: block; }
     .wrap { position: relative; display: inline-flex; align-items: center; }
+    :host([full]) .wrap { display: flex; width: 100%; }
     :host([clearable]) .field { padding-right: var(--fx-space-xl); }
+    :host([clearable][full]) .field { flex: 1 1 auto; }
+    /* Ícones (attr icon + slot icon) — DENTRO do campo, sobre o padding
+       (padrão Material/PrimeVue). Tamanho ajustável via --fx-input-icon-size. */
+    .field-icon {
+      position: relative;
+      display: inline-flex;
+      box-sizing: border-box;
+    }
+    .field-icon .field { flex: 1 1 auto; min-width: 0; }
+    :host([full]) .field-icon { display: flex; width: 100%; }
+    .field-icon .fx-icon,
+    .field-icon ::slotted([slot='icon']) {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px));
+      line-height: 1;
+      color: var(--fx-text-muted);
+      pointer-events: none;
+      z-index: 1;
+    }
+    .field-icon.icon-left .fx-icon,
+    .field-icon.icon-left ::slotted([slot='icon']) { left: var(--fx-space-md); }
+    .field-icon.icon-right .fx-icon,
+    .field-icon.icon-right ::slotted([slot='icon']) { right: var(--fx-space-md); }
+    /* padding = posição do ícone + largura + folga extra para o texto
+       não colar no glifo. */
+    .field-icon.icon-left .field {
+      padding-left: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));
+    }
+    .field-icon.icon-right .field {
+      padding-right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));
+    }
+    /* icon-pos right + clearable: desloca o × para não sobrepor o ícone. */
+    .field-icon.icon-right + .clear {
+      right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-lg));
+    }
     .clear {
       position: absolute;
       right: var(--fx-space-xs);
@@ -1074,6 +1130,8 @@ _FxInput.styles = css`
     }
     .clear:hover { color: var(--fx-color-danger); }
     .clear[hidden] { display: none; }
+    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */
+    ${FENIX_ICON_BASE_CSS}
   `;
 let FxInput = _FxInput;
 function defineFxInput() {
@@ -1086,8 +1144,8 @@ const _FxSwitch = class _FxSwitch extends FxElement {
   }
   /** Tamanho da trilha. Padrão: `'md'`. */
   get size() {
-    const s = this.getAttr("size", "md");
-    return s === "sm" || s === "lg" ? s : "md";
+    const s2 = this.getAttr("size", "md");
+    return s2 === "sm" || s2 === "lg" ? s2 : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -1194,7 +1252,7 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
     this.selected = /* @__PURE__ */ new Set();
   }
   static get observedAttributes() {
-    return ["disabled", "placeholder"];
+    return ["disabled", "placeholder", "error", "invalid", "success", "valid"];
   }
   /** Valores selecionados (CSV no atributo / array na propriedade). */
   get values() {
@@ -1416,6 +1474,9 @@ _FxMultiselect.styles = css`
     }
     :host([size='sm']) .trigger { min-height: var(--fx-size-sm); width: 200px; }
     :host([size='lg']) .trigger { min-height: var(--fx-size-lg); width: 280px; font-size: calc(var(--fx-font-size) + 4px); }
+    /* 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 */
     :host([error]) .trigger,
     :host([invalid]) .trigger {
@@ -1715,13 +1776,13 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       this.values.map((iso) => parseBound(iso)?.lo ?? 0).filter(Boolean)
     );
     if (this.mode === "range") {
-      let s = this.pickStart;
+      let s2 = this.pickStart;
       let e = this.pickEnd;
       const attrS = parseBound(this.getAttr("start", ""));
       const attrE = parseBound(this.getAttr("end", ""));
-      if (s === null && attrS) s = attrS.lo;
+      if (s2 === null && attrS) s2 = attrS.lo;
       if (e === null && attrE) e = attrE.lo;
-      return { start: s, end: e, single: null, multi };
+      return { start: s2, end: e, single: null, multi };
     }
     if (this.mode === "multiple") {
       return { start: null, end: null, single: null, multi };
@@ -1844,9 +1905,9 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       <div class="grid ${this.view}">${cells}</div>
     `);
     this.root.querySelectorAll("[data-nav]").forEach(
-      (b) => b.addEventListener(
+      (b2) => b2.addEventListener(
         "click",
-        () => this.navigate(Number(b.dataset.nav))
+        () => this.navigate(Number(b2.dataset.nav))
       )
     );
     const gotoBtn = this.root.querySelector("[data-goto]");
@@ -1855,21 +1916,21 @@ const _FxCalendar = class _FxCalendar extends FxElement {
       this.render();
     });
     this.root.querySelectorAll("[data-day]").forEach(
-      (b) => b.addEventListener(
+      (b2) => b2.addEventListener(
         "click",
-        () => this.pickDay(Number(b.dataset.day))
+        () => this.pickDay(Number(b2.dataset.day))
       )
     );
     this.root.querySelectorAll("[data-month]").forEach(
-      (b) => b.addEventListener("click", () => {
-        this.cursor.m = Number(b.dataset.month);
+      (b2) => b2.addEventListener("click", () => {
+        this.cursor.m = Number(b2.dataset.month);
         this.view = "days";
         this.render();
       })
     );
     this.root.querySelectorAll("[data-year]").forEach(
-      (b) => b.addEventListener("click", () => {
-        this.cursor.y = Number(b.dataset.year);
+      (b2) => b2.addEventListener("click", () => {
+        this.cursor.y = Number(b2.dataset.year);
         this.view = "months";
         this.render();
       })
@@ -2042,7 +2103,7 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
     this.time = { h: 0, m: 0, s: 0 };
   }
   static get observedAttributes() {
-    return ["value", "start", "end", "values", "mode", "min", "max", "placeholder", "disabled", "format", "show-time", "free-text"];
+    return ["value", "start", "end", "values", "mode", "min", "max", "placeholder", "disabled", "format", "show-time", "free-text", "error", "invalid", "success", "valid"];
   }
   get mode() {
     const m = this.getAttr("mode", "single");
@@ -2097,15 +2158,15 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
   /** Texto exibido no input conforme o modo. */
   displayText() {
     if (this.mode === "range") {
-      const s = this.getAttr("start");
+      const s2 = this.getAttr("start");
       const e = this.getAttr("end");
       this.hasAttr("show-time") ? " " : " → ";
-      if (!s && !e) return "";
+      if (!s2 && !e) return "";
       if (this.hasAttr("show-time")) {
         const f = (iso) => iso ? `${this.formatDate(iso)} ${this.timeText()}` : iso ? `${this.formatDate(iso)} …` : "";
-        return s && e ? `${f(s)} → ${f(e)}` : f(s);
+        return s2 && e ? `${f(s2)} → ${f(e)}` : f(s2);
       }
-      return s && e ? `${this.formatDate(s)} → ${this.formatDate(e)}` : s ? `${this.formatDate(s)} → …` : "";
+      return s2 && e ? `${this.formatDate(s2)} → ${this.formatDate(e)}` : s2 ? `${this.formatDate(s2)} → …` : "";
     }
     if (this.mode === "multiple") {
       return this.values.map((v) => this.formatDate(v)).join(", ");
@@ -2123,8 +2184,8 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
     const src = this.value || this.getAttr("start") || "";
     const t = src.split("T")[1];
     if (!t) return;
-    const [h, m, s] = t.split(":").map((n) => parseInt(n, 10));
-    this.time = { h: h || 0, m: m || 0, s: s || 0 };
+    const [h, m, s2] = t.split(":").map((n) => parseInt(n, 10));
+    this.time = { h: h || 0, m: m || 0, s: s2 || 0 };
   }
   /** Anexa o horário interno ao ISO puro vindo do calendário. */
   withTime(iso) {
@@ -2232,12 +2293,12 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
       const applyTime = () => {
         const h = this.root.querySelector(".t-h");
         const m = this.root.querySelector(".t-m");
-        const s = this.root.querySelector(".t-s");
+        const s2 = this.root.querySelector(".t-s");
         const clamp = (v, max) => Math.min(max, Math.max(0, parseInt(v ?? "0", 10) || 0));
         this.time = {
           h: clamp(h?.value, 23),
           m: clamp(m?.value, 59),
-          s: clamp(s?.value, 59)
+          s: clamp(s2?.value, 59)
         };
         const reattach = (iso) => iso.split("T")[0] ? `${iso.split("T")[0]}T${this.timeText()}` : iso;
         if (this.value) this.setAttribute("value", reattach(this.value));
@@ -2280,7 +2341,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, b) => a.split("T")[0].localeCompare(b.split("T")[0]);
+    const cmp = (a, b2) => a.split("T")[0].localeCompare(b2.split("T")[0]);
     const min = this.getAttr("min");
     const max = this.getAttr("max");
     if (min && cmp(iso, min) < 0) return null;
@@ -2307,9 +2368,9 @@ const _FxDatepicker = class _FxDatepicker extends FxElement {
         this.setAttribute("start", this.withTime(parsed));
         this.removeAttribute("end");
       } else {
-        const [a, b] = [this.getAttr("start").split("T")[0], parsed].sort();
+        const [a, b2] = [this.getAttr("start").split("T")[0], parsed].sort();
         this.setAttribute("start", this.withTime(a));
-        this.setAttribute("end", this.withTime(b));
+        this.setAttribute("end", this.withTime(b2));
       }
       this.emitChange({ start: this.getAttr("start"), end: this.getAttr("end") });
     } else {
@@ -2356,6 +2417,10 @@ _FxDatepicker.styles = css`
     :host([mode='range'][size='lg']) .field { min-width: 360px; }
     :host([mode='multiple'][size='lg']) .field { min-width: 320px; }
     :host([show-time]) .field { min-width: 250px; }
+    /* Full width: o host estica até o pai (os min-width dos modos são
+       descartados para permitir layouts estreitos sob controle do pai). */
+    :host([full]) { display: block; width: 100%; }
+    :host([full]) .field { min-width: 0; }
     /* Validação */
     :host([error]) .field,
     :host([invalid]) .field {
@@ -2494,8 +2559,8 @@ const _FxCheckbox = class _FxCheckbox extends FxElement {
   }
   /** Tamanho do controle. Padrão: `'md'`. */
   get size() {
-    const s = this.getAttr("size", "md");
-    return s === "sm" || s === "lg" ? s : "md";
+    const s2 = this.getAttr("size", "md");
+    return s2 === "sm" || s2 === "lg" ? s2 : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -2623,8 +2688,8 @@ const _FxRadio = class _FxRadio extends FxElement {
   }
   /** Tamanho do controle. Padrão: `'md'`. */
   get size() {
-    const s = this.getAttr("size", "md");
-    return s === "sm" || s === "lg" ? s : "md";
+    const s2 = this.getAttr("size", "md");
+    return s2 === "sm" || s2 === "lg" ? s2 : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -3267,8 +3332,8 @@ const _FxTable = class _FxTable extends FxElement {
     }
     const total = this.lazy ? this.total : out.length;
     if (this.sortField) {
-      out.sort((a, b) => {
-        const av = a[this.sortField], bv = b[this.sortField];
+      out.sort((a, b2) => {
+        const av = a[this.sortField], bv = b2[this.sortField];
         if (typeof av === "number" && typeof bv === "number")
           return (av - bv) * this.sortDir;
         return String(av ?? "").localeCompare(String(bv ?? ""), "pt-BR") * this.sortDir;
@@ -3287,7 +3352,7 @@ const _FxTable = class _FxTable extends FxElement {
     if (!input) return [];
     const attr = input.getAttribute("data-search-fields");
     if (attr === null) return [];
-    return attr.split(",").map((s) => s.trim()).filter(Boolean);
+    return attr.split(",").map((s2) => s2.trim()).filter(Boolean);
   }
   cellHtml(col, row) {
     const template = col.template?.innerHTML ?? col.directTemplate;
@@ -3671,7 +3736,7 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
     this.listenersReady = false;
   }
   static get observedAttributes() {
-    return ["variant", "error", "invalid", "success", "valid"];
+    return ["variant", "error", "invalid", "success", "valid", "full", "icon", "icon-pos"];
   }
   render() {
     const control = this.findControl();
@@ -3695,6 +3760,9 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
     this.syncControlReference(control);
     this.syncState();
     this.applyError();
+    this.applyFull();
+    this.applyIcon();
+    this.syncIconIndent();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -3720,6 +3788,7 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
         this.syncControlReference(control);
         this.syncState();
         this.applyError();
+        this.applyFull();
       });
     }
     if (this.listenersReady) return;
@@ -3739,10 +3808,13 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
       this.observer = null;
       this.targetControl = control;
       if (control) {
-        this.observer = new MutationObserver(() => this.syncState());
+        this.observer = new MutationObserver(() => {
+          this.syncState();
+          this.syncIconIndent();
+        });
         this.observer.observe(control, {
           attributes: true,
-          attributeFilter: ["value", "values", "start", "end", "open"]
+          attributeFilter: ["value", "values", "start", "end", "open", "icon", "icon-pos"]
         });
       }
     }
@@ -3774,6 +3846,41 @@ const _FxFloatlabel = class _FxFloatlabel extends FxElement {
       this.removeAttribute("focus");
     }
   }
+  /**
+   * variant="in" + ícone à esquerda dentro do campo (fx-input icon):
+   * enquanto a label é placeholder ela precisa começar depois do glifo.
+   * Detecta via atributos icon/icon-pos (ou slot icon) do controle.
+   */
+  syncIconIndent() {
+    const label = this.root.querySelector(".flabel");
+    if (!label) return;
+    const c = this.targetControl;
+    const hasLeftIcon = Boolean(
+      c && (c.hasAttribute("icon") || c.querySelector(':scope > [slot="icon"]')) && c.getAttribute("icon-pos") !== "right"
+    );
+    label.classList.toggle("icon-indent", hasLeftIcon);
+  }
+  applyFull() {
+    if (this.targetControl && typeof this.targetControl.setAttribute === "function") {
+      if (this.hasAttr("full")) {
+        this.targetControl.setAttribute("full", "");
+      } else {
+        this.targetControl.removeAttribute("full");
+      }
+    }
+  }
+  applyIcon() {
+    if (this.targetControl && typeof this.targetControl.setAttribute === "function") {
+      if (this.hasAttr("icon")) {
+        const icon = this.getAttr("icon");
+        const iconPos = this.getAttr("icon-pos");
+        if (icon !== "") this.targetControl.setAttribute("icon", icon);
+        else this.targetControl.setAttribute("icon", "");
+        if (iconPos && iconPos !== "left") this.targetControl.setAttribute("icon-pos", iconPos);
+        else this.targetControl.removeAttribute("icon-pos");
+      }
+    }
+  }
   applyError() {
     const hasError = this.hasAttr("error") || this.hasAttr("invalid");
     const errMsg = this.root.querySelector(
@@ -3816,6 +3923,12 @@ _FxFloatlabel.styles = css`
 			font-size: var(--fx-font-size);
 			vertical-align: middle;
 		}
+		/* Full width: o host estica até o pai; o controle interno com
+		   atributo full (ou largura herdada) acompanha. */
+		:host([full]) {
+			display: block;
+			width: 100%;
+		}
 		.wrapper {
 			position: relative;
 			display: inline-block;
@@ -3881,6 +3994,21 @@ _FxFloatlabel.styles = css`
 			color: var(--fx-color-primary, #4f46e5);
 		}
 
+		/* ---- variant="in" com ícone dentro do campo (fx-input icon):
+		   enquanto a label funciona como placeholder (sem foco/valor), ela
+		   começa DEPOIS do glifo (mesma métrica de padding do fx-input).
+		   Ao subir (active), volta ao offset padrão da borda. ---- */
+		:host([variant="in"]) .flabel.icon-indent {
+			left: calc(
+				var(--fx-space-md, 12px) +
+				var(--fx-input-icon-size, calc(var(--fx-font-size, 14px) + 6px)) +
+				var(--fx-space-sm, 8px)
+			);
+		}
+		:host([variant="in"][active]) .flabel.icon-indent {
+			left: var(--fx-space-md, 12px);
+		}
+
 		/* ---- variant="over": label estática ACIMA do campo (fora, em fluxo) ---- */
 		:host([variant="over"]) {
 			display: block;
@@ -3928,11 +4056,11 @@ function defineFxFloatlabel() {
 defineFxFloatlabel();
 const _FxTextarea = class _FxTextarea extends FxElement {
   static get observedAttributes() {
-    return ["size", "placeholder", "disabled", "readonly", "rows", "maxlength"];
+    return ["size", "placeholder", "disabled", "readonly", "rows", "maxlength", "error", "invalid", "success", "valid"];
   }
   get size() {
-    const s = this.getAttr("size", "md");
-    return s === "sm" || s === "lg" ? s : "md";
+    const s2 = this.getAttr("size", "md");
+    return s2 === "sm" || s2 === "lg" ? s2 : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -4020,8 +4148,11 @@ _FxTextarea.styles = css`
       border-color: var(--fx-color-success, #16a34a);
       box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
     }
-    :host([size='sm']) .field { width: 220px; 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-sm) var(--fx-space-md); width: 220px; }
     :host([size='lg']) .field { width: 300px; min-height: calc(var(--fx-size-lg) + 80px); }
+    /* Full width: o host estica até o pai e o campo interno acompanha. */
+    :host([full]) { display: block; width: 100%; }
+    :host([full]) .field { width: 100%; }
   `;
 let FxTextarea = _FxTextarea;
 function defineFxTextarea() {
@@ -4508,11 +4639,11 @@ const _FxFileUpload = class _FxFileUpload extends FxElement {
     this._done = false;
   }
   static get observedAttributes() {
-    return ["mode", "size", "severity", "label", "icon", "accept", "multiple", "disabled", "show-progress", "progress", "value"];
+    return ["mode", "size", "severity", "label", "icon", "accept", "multiple", "disabled", "show-progress", "progress", "value", "full"];
   }
   get size() {
-    const s = this.getAttr("size", "md");
-    return s === "sm" || s === "lg" ? s : "md";
+    const s2 = this.getAttr("size", "md");
+    return s2 === "sm" || s2 === "lg" ? s2 : "md";
   }
   set size(value) {
     this.setAttribute("size", value);
@@ -4552,11 +4683,11 @@ const _FxFileUpload = class _FxFileUpload extends FxElement {
     const fileInput = `<input type="file" class="picker" ${accept ? `accept="${esc(accept)}"` : ""} ${multiple ? "multiple" : ""} ${disabled ? "disabled" : ""} />`;
     this.setTemplate(`
       ${advanced ? `<div class="drop" part="dropzone" role="button" tabindex="0" aria-label="${esc(label)}">
-             ${icon ? `<span class="icon" aria-hidden="true">${esc(icon)}</span>` : ""}
+             ${icon ? `<span class="icon" part="icon" aria-hidden="true">${fenixIconHtml(icon)}</span>` : ""}
              <span>${esc(label)}</span>
              <span class="hint">ou arraste e solte aqui</span>
            </div>` : `<button type="button" class="btn" part="button">
-             ${icon ? `<span class="icon" aria-hidden="true">${esc(icon)}</span>` : ""}
+             ${icon ? `<span class="icon" part="icon" aria-hidden="true">${fenixIconHtml(icon)}</span>` : ""}
              <span>${esc(label)}</span>
            </button>`}
       ${fileInput}
@@ -4771,6 +4902,12 @@ _FxFileUpload.styles = css`
       min-width: 34px;
       text-align: right;
     }
+    /* Full width: o host estica até o pai e o botão/dropzone acompanha. */
+    :host([full]) { display: block; width: 100%; }
+    :host([full]) .btn { width: 100%; }
+    :host([full]) .drop { width: 100%; }
+    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */
+    ${FENIX_ICON_BASE_CSS}
   `;
 let FxFileUpload = _FxFileUpload;
 function defineFxFileUpload() {
@@ -5058,7 +5195,7 @@ const _FxChip = class _FxChip extends FxElement {
     this.setTemplate(`
       <span class="chip ${clickable ? "clickable" : ""}" part="chip" role="${clickable ? "button" : "status"}"
         ${clickable ? `tabindex="0" aria-pressed="${this.selected}"` : ""} ${disabled ? 'aria-disabled="true"' : ""}>
-        ${icon ? `<span class="icon" aria-hidden="true">${esc(icon)}</span>` : ""}
+        ${icon ? `<span class="icon" aria-hidden="true">${fenixIconHtml(icon)}</span>` : ""}
         <slot></slot>
         <button type="button" class="remove" part="remove" aria-label="Remover" ${removable ? "" : "hidden"}>×</button>
       </span>
@@ -5135,6 +5272,8 @@ _FxChip.styles = css`
     .chip.clickable:active { transform: scale(0.97); }
 
     .icon { line-height: 1; }
+    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */
+    ${FENIX_ICON_BASE_CSS}
     .remove {
       display: inline-flex;
       align-items: center;
@@ -5349,12 +5488,12 @@ const _FxBreadcrumb = class _FxBreadcrumb extends FxElement {
       item.setAttribute("aria-current", isLast ? "page" : "false");
       nav.appendChild(item);
       if (isLast) return;
-      const s = document.createElement("span");
-      s.className = "sep";
-      s.setAttribute("part", "separator");
-      s.setAttribute("aria-hidden", "true");
-      s.textContent = sep;
-      nav.appendChild(s);
+      const s2 = document.createElement("span");
+      s2.className = "sep";
+      s2.setAttribute("part", "separator");
+      s2.setAttribute("aria-hidden", "true");
+      s2.textContent = sep;
+      nav.appendChild(s2);
     });
   }
   connectedCallback() {
@@ -5928,7 +6067,7 @@ const _FxMenu = class _FxMenu extends FxElement {
   }
   render() {
     const titleAttr = this.getAttr("titles");
-    const titles = titleAttr ? titleAttr.split(",").map((s) => s.trim()) : [];
+    const titles = titleAttr ? titleAttr.split(",").map((s2) => s2.trim()) : [];
     const items = this.items;
     const itemsHtml = items.map((it, i) => {
       const label = titles[i] || it.textContent?.trim() || `Item ${i + 1}`;
@@ -6060,7 +6199,7 @@ const _FxToggleButtonGroup = class _FxToggleButtonGroup extends FxElement {
   }
   get value() {
     const raw = this.getAttr("value");
-    return raw ? raw.split(",").map((s) => s.trim()).filter(Boolean) : [];
+    return raw ? raw.split(",").map((s2) => s2.trim()).filter(Boolean) : [];
   }
   set value(v) {
     this.setAttribute("value", v.join(","));
@@ -6159,7 +6298,7 @@ const _FxEmptyState = class _FxEmptyState extends FxElement {
     const description = this.getAttr("description");
     this.setTemplate(`
       <div class="wrap" part="wrap">
-        <span class="icon" part="icon" aria-hidden="true">${esc(icon)}</span>
+        <span class="icon" part="icon" aria-hidden="true">${fenixIconHtml(icon)}</span>
         <h4 part="heading" ${heading ? "" : "hidden"}>${esc(heading)}</h4>
         <p part="description" ${description ? "" : "hidden"}>${esc(description)}</p>
         <slot name="icon"></slot>
@@ -6206,6 +6345,8 @@ _FxEmptyState.styles = css`
     p[hidden] { display: none; }
     .action { margin-top: var(--fx-space-sm); }
     .action:empty { display: none; }
+    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */
+    ${FENIX_ICON_BASE_CSS}
   `;
 let FxEmptyState = _FxEmptyState;
 function defineFxEmptyState() {
@@ -6487,7 +6628,7 @@ const _FxCarousel = class _FxCarousel extends FxElement {
   }
   render() {
     this._slides = Array.from(this.children).filter((el) => el.matches('[slot="slide"]'));
-    const contentsHtml = this._slides.map((s, i) => `<div class="slide" part="slide" data-i="${i}" ${i === this.active ? "" : "hidden"}>${s.innerHTML}</div>`).join("");
+    const contentsHtml = this._slides.map((s2, i) => `<div class="slide" part="slide" data-i="${i}" ${i === this.active ? "" : "hidden"}>${s2.innerHTML}</div>`).join("");
     this.setTemplate(`
       <div class="viewport" part="viewport">
         ${contentsHtml}
@@ -6521,8 +6662,8 @@ const _FxCarousel = class _FxCarousel extends FxElement {
     }
     if (String(target) === this.getAttribute("active")) return;
     this.active = target;
-    this.root.querySelectorAll(".slide").forEach((s) => {
-      s.toggleAttribute("hidden", Number(s.dataset.i) !== target);
+    this.root.querySelectorAll(".slide").forEach((s2) => {
+      s2.toggleAttribute("hidden", Number(s2.dataset.i) !== target);
     });
     this.root.querySelectorAll(".dot").forEach((d) => {
       d.classList.toggle("on", Number(d.dataset.i) === target);
@@ -7623,8 +7764,8 @@ const _FxSkeleton = class _FxSkeleton extends FxElement {
       return;
     }
     if (variant === "rect") {
-      const s = style || "width:100%;height:80px;";
-      this.setTemplate(`<div class="bone" part="bone" style="${s}"></div>`);
+      const s2 = style || "width:100%;height:80px;";
+      this.setTemplate(`<div class="bone" part="bone" style="${s2}"></div>`);
       return;
     }
     const lines = Number(this.getAttr("lines", "3")) || 3;
@@ -8131,7 +8272,7 @@ const _FxPagination = class _FxPagination extends FxElement {
   render() {
     const pages = this.pages;
     const current = Math.min(Math.max(1, this.page), pages);
-    const opts = (this.getAttr("rows-options", "5,10,20,50") || "").split(",").map((s) => s.trim()).filter(Boolean);
+    const opts = (this.getAttr("rows-options", "5,10,20,50") || "").split(",").map((s2) => s2.trim()).filter(Boolean);
     const window_ = [];
     for (let p = Math.max(1, current - 2); p <= Math.min(pages, current + 2); p++) window_.push(p);
     const from = total0(current, this.rows);
@@ -8228,11 +8369,11 @@ function defineFxPagination() {
 defineFxPagination();
 const _FxAutocomplete = class _FxAutocomplete extends FxElement {
   static get observedAttributes() {
-    return ["size", "placeholder", "source", "disabled", "min-chars"];
+    return ["size", "placeholder", "source", "disabled", "min-chars", "error", "invalid", "success", "valid"];
   }
   get size() {
-    const s = this.getAttr("size", "md");
-    return s === "sm" || s === "lg" ? s : "md";
+    const s2 = this.getAttr("size", "md");
+    return s2 === "sm" || s2 === "lg" ? s2 : "md";
   }
   set size(v) {
     this.setAttribute("size", v);
@@ -8284,7 +8425,7 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
     const openList = () => {
       if (!list) return;
       const q = field.value.toLowerCase();
-      const matches = this.source.filter((s) => s.toLowerCase().includes(q)).slice(0, 8);
+      const matches = this.source.filter((s2) => s2.toLowerCase().includes(q)).slice(0, 8);
       list.innerHTML = matches.length ? matches.map((m) => `<button type="button" class="opt" role="option" data-v="${esc(m)}">${esc(m)}</button>`).join("") : '<div class="empty">Nenhum resultado</div>';
       list.querySelectorAll(".opt").forEach((btn) => {
         btn.addEventListener("click", () => {
@@ -8330,7 +8471,7 @@ _FxAutocomplete.styles = css`
       font-family: var(--fx-font-family);
       font-size: var(--fx-font-size);
     }
-    input {
+    .field {
       font-family: inherit;
       font-size: inherit;
       font-weight: var(--fx-font-weight);
@@ -8346,15 +8487,29 @@ _FxAutocomplete.styles = css`
         border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),
         box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);
     }
-    input::placeholder { color: var(--fx-text-muted); opacity: 1; }
-    input:hover { border-color: var(--fx-border-hover); }
-    input:focus-visible {
+    .field::placeholder { color: var(--fx-text-muted); opacity: 1; }
+    .field:hover { border-color: var(--fx-border-hover); }
+    .field:focus-visible {
       outline: none;
       border-color: var(--fx-color-primary);
       box-shadow: var(--fx-effect-focus-ring, none);
     }
-    :host([size='sm']) input { width: 220px; min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }
-    :host([size='lg']) input { width: 300px; min-height: var(--fx-size-lg); }
+    :host([size='sm']) .field { width: 220px; min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }
+    :host([size='lg']) .field { width: 300px; min-height: var(--fx-size-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. */
+    :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);
+    }
+    :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);
+    }
     .list {
       position: absolute;
       top: calc(100% + 4px);
@@ -8461,8 +8616,8 @@ const _FxKnob = class _FxKnob extends FxElement {
     this.setAttribute("step", String(v));
   }
   get size() {
-    const s = this.getAttr("size", "md");
-    return s === "sm" || s === "lg" ? s : "md";
+    const s2 = this.getAttr("size", "md");
+    return s2 === "sm" || s2 === "lg" ? s2 : "md";
   }
   set size(v) {
     this.setAttribute("size", v);
@@ -8538,9 +8693,9 @@ const _FxKnob = class _FxKnob extends FxElement {
     this.attachListeners();
   }
   getSizeNum() {
-    const s = this.size;
-    if (s === "sm") return 60;
-    if (s === "lg") return 140;
+    const s2 = this.size;
+    if (s2 === "sm") return 60;
+    if (s2 === "lg") return 140;
     return 100;
   }
   /** Valida um valor de cor CSS, retornando-o seguro ou vazio. */
@@ -8802,8 +8957,8 @@ const _FxOrderList = class _FxOrderList extends FxElement {
     this.toggleAttr("striped", v);
   }
   get selectionMode() {
-    const s = this.getAttr("selection-mode", "");
-    return s === "single" || s === "multiple" ? s : "";
+    const s2 = this.getAttr("selection-mode", "");
+    return s2 === "single" || s2 === "multiple" ? s2 : "";
   }
   set selectionMode(v) {
     this.setAttribute("selection-mode", v);
@@ -8885,7 +9040,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
     return JSON.stringify(item);
   }
   _isSelected(item) {
-    return this._selection.some((s) => this._getItemKey(s, -1) === this._getItemKey(item, -1));
+    return this._selection.some((s2) => this._getItemKey(s2, -1) === this._getItemKey(item, -1));
   }
   _moveItem(fromIndex, toIndex) {
     const actualFrom = this._getActualIndex(fromIndex);
@@ -8921,7 +9076,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   }
   _toggleSelection(item) {
     const key2 = this._getItemKey(item, -1);
-    const index = this._selection.findIndex((s) => this._getItemKey(s, -1) === key2);
+    const index = this._selection.findIndex((s2) => this._getItemKey(s2, -1) === key2);
     if (index >= 0) {
       this._selection.splice(index, 1);
     } else if (this.selectionMode === "multiple") {
@@ -9195,7 +9350,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   _handleMoveAction(action) {
     if (!this._selection.length) return;
     const displayData = this._getDisplayData();
-    const selectedIndices = this._selection.map((s) => displayData.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(s, -1))).filter((i) => i >= 0).sort((a, b) => a - b);
+    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);
     if (selectedIndices.length === 0) return;
     switch (action) {
       case "top":
@@ -9220,7 +9375,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
       items.push(this._data[actualIdx]);
       actualIndices.push(actualIdx);
     }
-    actualIndices.sort((a, b) => b - a).forEach((i) => this._data.splice(i, 1));
+    actualIndices.sort((a, b2) => b2 - a).forEach((i) => this._data.splice(i, 1));
     const insertIdx = this._getActualIndex(0);
     this._data.splice(insertIdx, 0, ...items);
     this._applyFilter();
@@ -9236,7 +9391,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
       items.push(this._data[actualIdx]);
       actualIndices.push(actualIdx);
     }
-    actualIndices.sort((a, b) => b - a).forEach((i) => this._data.splice(i, 1));
+    actualIndices.sort((a, b2) => b2 - 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);
@@ -9248,7 +9403,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, b) => a - b);
+    const actualIndices = indices.map((idx) => this._getActualIndex(idx)).filter((idx) => idx >= 0).sort((a, b2) => a - b2);
     if (actualIndices.length === 0) return;
     if (delta < 0 && actualIndices[0] <= 0) return;
     if (delta > 0 && actualIndices[actualIndices.length - 1] >= this._data.length - 1) return;
@@ -9271,7 +9426,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
   }
   _updateControlsState() {
     const displayData = this._getDisplayData();
-    const selectedIndices = this._selection.map((s) => displayData.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(s, -1))).filter((i) => i >= 0);
+    const selectedIndices = this._selection.map((s2) => displayData.findIndex((d) => this._getItemKey(d, -1) === this._getItemKey(s2, -1))).filter((i) => i >= 0);
     const buttons = this.root.querySelectorAll(".control-btn");
     buttons.forEach((btn) => {
       const action = btn.dataset.action;
@@ -9477,8 +9632,8 @@ const _FxPickList = class _FxPickList extends FxElement {
     this.toggleAttr("striped", v);
   }
   get selectionMode() {
-    const s = this.getAttr("selection-mode", "");
-    return s === "single" || s === "multiple" ? s : "";
+    const s2 = this.getAttr("selection-mode", "");
+    return s2 === "single" || s2 === "multiple" ? s2 : "";
   }
   set selectionMode(v) {
     this.setAttribute("selection-mode", v);
@@ -9613,10 +9768,10 @@ const _FxPickList = class _FxPickList extends FxElement {
     return JSON.stringify(item);
   }
   _isSourceSelected(item, index) {
-    return this._sourceSelection.some((s) => this._getItemKey(s, -1, true) === this._getItemKey(item, index, true));
+    return this._sourceSelection.some((s2) => this._getItemKey(s2, -1, true) === this._getItemKey(item, index, true));
   }
   _isTargetSelected(item, index) {
-    return this._targetSelection.some((s) => this._getItemKey(s, -1, false) === this._getItemKey(item, index, false));
+    return this._targetSelection.some((s2) => this._getItemKey(s2, -1, false) === this._getItemKey(item, index, false));
   }
   _emitMoveToTarget() {
     this.dispatchEvent(new CustomEvent("move-to-target", {
@@ -9759,7 +9914,7 @@ const _FxPickList = class _FxPickList extends FxElement {
   _moveToTarget() {
     if (!this._sourceSelection.length) return;
     const items = [...this._sourceSelection];
-    this._source = this._source.filter((s) => !items.some((i) => this._getItemKey(i, -1, true) === this._getItemKey(s, -1, true)));
+    this._source = this._source.filter((s2) => !items.some((i) => this._getItemKey(i, -1, true) === this._getItemKey(s2, -1, true)));
     this._target = [...this._target, ...items];
     this._sourceSelection = [];
     this._filteredSource = null;
@@ -9805,7 +9960,7 @@ const _FxPickList = class _FxPickList extends FxElement {
   _toggleSourceSelection(item, index) {
     const mode = this.selectionMode || "single";
     const key2 = this._getItemKey(item, index, true);
-    const idx = this._sourceSelection.findIndex((s) => this._getItemKey(s, -1, true) === key2);
+    const idx = this._sourceSelection.findIndex((s2) => this._getItemKey(s2, -1, true) === key2);
     if (idx >= 0) {
       this._sourceSelection.splice(idx, 1);
     } else if (mode === "multiple") {
@@ -9820,7 +9975,7 @@ const _FxPickList = class _FxPickList extends FxElement {
   _toggleTargetSelection(item, index) {
     const mode = this.selectionMode || "single";
     const key2 = this._getItemKey(item, index, false);
-    const idx = this._targetSelection.findIndex((s) => this._getItemKey(s, -1, false) === key2);
+    const idx = this._targetSelection.findIndex((s2) => this._getItemKey(s2, -1, false) === key2);
     if (idx >= 0) {
       this._targetSelection.splice(idx, 1);
     } else if (mode === "multiple") {
@@ -10283,7 +10438,7 @@ const _FxAccordion = class _FxAccordion extends FxElement {
   }
   /** Valores ativos como array. */
   get values() {
-    return this.getAttr("value", "").split(",").map((s) => s.trim()).filter(Boolean);
+    return this.getAttr("value", "").split(",").map((s2) => s2.trim()).filter(Boolean);
   }
   set values(v) {
     this.setAttribute("value", v.join(","));
@@ -10464,9 +10619,9 @@ export {
   lightTokens,
   listPresets,
   resetTheme,
-  sanitizeData,
+  s as sanitizeData,
   setTokens,
-  stripTags,
+  b as stripTags,
   theme,
   themePresets,
   tokenCssVars