@wrrdev/fenix-ui 1.1.7 → 1.1.9

package/dist/fenix-ui4.esm.js

@@ -4,9 +4,9 @@ var __typeError = (msg) => {
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _FxToast_instances, 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";
+var _FxToast_instances, syncProgress_fn, render_fn;
+import { a as FENIX_ICON_BASE_CSS, f as fenixIconHtml, e as esc, l as loadFenixIconsFont, i as isFenixIconName } from "./assets/font-CF0TXsAP.js";
+import { s, g } from "./assets/font-CF0TXsAP.js";
 const lightTokens = {
   color: {
     primary: "#c2410c",
@@ -1967,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]");
@@ -1978,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();
       })
@@ -2403,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;
@@ -2430,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 {
@@ -3301,12 +3301,16 @@ const _FxTable = class _FxTable extends FxElement {
       "rows",
       "rows-options",
       "striped",
+      "hover",
+      "toolbar",
       "empty-message",
       "pagination-position",
       "lazy",
       "total",
       "loading",
-      "loading-message"
+      "loading-message",
+      "sort-field",
+      "sort-order"
     ];
   }
   get data() {
@@ -3335,7 +3339,7 @@ const _FxTable = class _FxTable extends FxElement {
   }
   get columns() {
     return [...this.querySelectorAll("fx-column")].map((c) => {
-      const tpl = c.querySelector("template");
+      const tpl = this._resolveCellTemplate(c);
       const direct = tpl ? void 0 : c.innerHTML.trim();
       const align = c.getAttribute("align") ?? "left";
       return {
@@ -3349,13 +3353,65 @@ const _FxTable = class _FxTable extends FxElement {
       };
     });
   }
+  /**
+   * Resolve o template de célula de uma `<fx-column>`, em ordem de prioridade:
+   *
+   * 1. `<fx-cell>` — **recomendado**. Tag própria, sem significado especial
+   *    para Vue/React/Angular/Svelte: nenhum framework a intercepta, então o
+   *    `innerHTML` sempre chega intacto ao componente. O light DOM do
+   *    `<fx-table>` não é exibido (a tabela não usa `<slot>`), então o
+   *    conteúdo-fonte nunca aparece na tela.
+   * 2. `template="#id"` (ou `template="id"`) — aponta para um `<template>`
+   *    declarado **fora** da tabela, útil em React/Angular, onde é mais
+   *    simples manter o markup num único lugar.
+   * 3. `<template>` dentro da coluna — forma **legada**, mantida por
+   *    compatibilidade. Em Vue 3 ela vira um bloco do compilador e em React os
+   *    filhos são gerenciados pelo framework; nos dois casos o `innerHTML`
+   *    chega vazio e a célula não renderiza. Prefira `<fx-cell>`.
+   */
+  _resolveCellTemplate(c) {
+    const cell = c.querySelector(":scope > fx-cell");
+    if (cell) return cell;
+    const ref = c.getAttribute("template");
+    if (ref) {
+      const alvo = this._resolveRef(ref);
+      if (alvo) return alvo;
+    }
+    return c.querySelector("template");
+  }
   get toolbarTemplate() {
-    return this.querySelector(
-      'template[slot="toolbar"]'
-    );
+    const bar = this.querySelector(":scope > fx-toolbar");
+    if (bar) return bar;
+    const ref = this.getAttr("toolbar");
+    if (ref) {
+      const alvo = this._resolveRef(ref);
+      if (alvo) return alvo;
+    }
+    return this.querySelector('template[slot="toolbar"]');
+  }
+  /**
+   * Resolve `ref` para um elemento: `#id`/`id` ⇒ `getElementById` no
+   * documento; qualquer outro valor é tratado como seletor CSS relativo à
+   * própria tabela. Valores inválidos devolvem `null` (sem exceção).
+   */
+  _resolveRef(ref) {
+    const valor = ref.trim();
+    if (!valor) return null;
+    const doc = this.ownerDocument;
+    if (valor.startsWith("#")) return doc?.getElementById(valor.slice(1)) ?? null;
+    if (/^[.#[>]/.test(valor)) {
+      try {
+        return this.querySelector(valor);
+      } catch {
+        return null;
+      }
+    }
+    return doc?.getElementById(valor) ?? null;
   }
   connectedCallback() {
     this._parseDataAttribute();
+    this._parseSortAttributes();
+    loadFenixIconsFont();
     super.connectedCallback();
     this._columnObserver = new MutationObserver(() => this.render());
     this._columnObserver.observe(this, { childList: true, subtree: true });
@@ -3364,6 +3420,13 @@ const _FxTable = class _FxTable extends FxElement {
     this._columnObserver?.disconnect();
     super.disconnectedCallback();
   }
+  /** Ordenação inicial via `sort-field` / `sort-order` (documentados na API). */
+  _parseSortAttributes() {
+    const field = this.getAttr("sort-field");
+    if (field) this.sortField = field;
+    const order = this.getAttr("sort-order");
+    if (order === "asc" || order === "desc") this.sortDir = order === "asc" ? 1 : -1;
+  }
   _parseDataAttribute() {
     if (!this._data.length) {
       try {
@@ -3399,8 +3462,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;
@@ -3447,11 +3510,11 @@ const _FxTable = class _FxTable extends FxElement {
     const pagerHtml = !paginated ? "" : `
       <div class="pager" part="pager">
         <span class="info">Página ${this.page + 1} de ${pages} · ${total} registros</span>
-        <button type="button" class="pg-btn" data-pg="first" ${this.page === 0 ? "disabled" : ""}>«</button>
-        <button type="button" class="pg-btn" data-pg="prev" ${this.page === 0 ? "disabled" : ""}>‹</button>
+        <button type="button" class="pg-btn" part="first" aria-label="Primeira página" data-pg="first" ${this.page === 0 ? "disabled" : ""}>${fenixIconHtml("first_page")}</button>
+        <button type="button" class="pg-btn" part="prev" aria-label="Página anterior" data-pg="prev" ${this.page === 0 ? "disabled" : ""}>${fenixIconHtml("navigate_before")}</button>
         ${Array.from({ length: pages }, (_, p) => `<button type="button" class="pg-btn" data-pg="${p}" aria-current="${p === this.page}">${p + 1}</button>`).join("")}
-        <button type="button" class="pg-btn" data-pg="next" ${this.page >= pages - 1 ? "disabled" : ""}>›</button>
-        <button type="button" class="pg-btn" data-pg="last" ${this.page >= pages - 1 ? "disabled" : ""}>»</button>
+        <button type="button" class="pg-btn" part="next" aria-label="Próxima página" data-pg="next" ${this.page >= pages - 1 ? "disabled" : ""}>${fenixIconHtml("navigate_next")}</button>
+        <button type="button" class="pg-btn" part="last" aria-label="Última página" data-pg="last" ${this.page >= pages - 1 ? "disabled" : ""}>${fenixIconHtml("last_page")}</button>
         <label class="info">${esc("Por página:")}
           <fx-select class="rows-sel" size="sm" value="${this.rowsPerPage}" aria-label="Itens por página">${this.getAttr(
       "rows-options",
@@ -3588,6 +3651,7 @@ const _FxTable = class _FxTable extends FxElement {
   }
 };
 _FxTable.styles = css`
+		${FENIX_ICON_BASE_CSS}
 		:host {
 			display: block;
 			font-family: var(--fx-font-family);
@@ -3664,17 +3728,14 @@ _FxTable.styles = css`
 			transition: background-color var(--fx-motion-duration-fast)
 				var(--fx-motion-easing);
 		}
-		tbody tr:hover {
-			background: color-mix(
-				in srgb,
-				var(--fx-color-primary) 8%,
-				transparent
-			);
-		}
+		/* Listrado: alterna a superfície (cinza). Antes usava
+		   --fx-surface-background, que é a MESMA cor do fundo do :host e
+		   portanto pintava branco sobre branco (listrado invisível). */
 		:host([striped]) tbody tr:nth-child(even) {
-			background: var(--fx-surface-background);
+			background: var(--fx-surface-surface, #f8fafc);
 		}
-		:host([striped]) tbody tr:hover {
+		/* O hover é opt-in via atributo (o clique na linha continua sempre ativo). */
+		:host([hover]) tbody tr:hover {
 			background: color-mix(
 				in srgb,
 				var(--fx-color-primary) 8%,
@@ -3704,6 +3765,9 @@ _FxTable.styles = css`
 			font-size: calc(var(--fx-font-size) - 2px);
 		}
 		.pg-btn {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
 			min-width: var(--fx-size-sm);
 			height: var(--fx-size-sm);
 			font: inherit;
@@ -3717,6 +3781,12 @@ _FxTable.styles = css`
 			transition: border-color var(--fx-motion-duration-fast)
 				var(--fx-motion-easing);
 		}
+		/* O glifo precisa de 1px a mais que o dígito: a altura de traço do ícone é
+		   maior que a do número, então igualar os dois font-size deixa a seta
+		   visivelmente maior que o texto. */
+		.pg-btn .fx-icon {
+			font-size: calc(var(--fx-font-size) - 1px);
+		}
 		.pg-btn:hover:not(:disabled):not([aria-current="true"]) {
 			border-color: var(--fx-color-primary);
 			color: var(--fx-color-primary);
@@ -5465,6 +5535,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"];
@@ -7084,6 +7223,48 @@ const CARD_CSS = `
   color: var(--fx-text-muted, #64748b); font-size: 15px; padding: 2px 4px; border-radius: 4px;
 }
 .close:hover { color: var(--fx-color-danger, #f43f5e); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }
+
+/* --- Barra de contagem regressiva (atributo progress) ---
+   Fica na base do card e esvazia durante a duração, na cor do kind (--kind) —
+   ou seja, acompanha success/error/warning/info sem configuração extra.
+
+   O lado é configurável pelo atributo progress-origin (padrão: left):
+     left  → a barra drena da direita para a esquerda (ancorada à esquerda)
+     right → a barra drena da esquerda para a direita (ancorada à direita)
+   A origem entra como custom property, então os keyframes são compartilhados.
+
+   Usa escalaX em vez de width: a animação escreve só na compositor, sem
+   reflow por frame. */
+.card { position: relative; overflow: hidden; }
+.progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 3px;
+  background: var(--kind);
+  transform-origin: var(--toast-progress-origin, left center);
+  transform: scaleX(1);
+  border-radius: 0 0 var(--fx-radius-md, 8px) var(--fx-radius-md, 8px);
+  pointer-events: none;
+  will-change: transform;
+}
+.progress.run { animation: fx-toast-drain var(--toast-duration, 4000ms) linear forwards; }
+/* No modo hover a animação fica parada até o cursor/foco entrar no card. */
+.card:hover .progress.run,
+.card:focus-within .progress.run { animation-play-state: running; }
+@keyframes fx-toast-drain {
+  from { transform: scaleX(1); }
+  to   { transform: scaleX(0); }
+}
+/* A barra só começa a correr no 2º frame: no 1º ela já apareceria zerada
+   (o elemento acabou de ser inserido e a animação aplica o estado final). */
+.card.entering .progress { animation: none; }
+/* Ao dispensar, congela a barra: ela some junto com o card em .2s. */
+.card.leaving .progress { animation-play-state: paused; }
+@media (prefers-reduced-motion: reduce) {
+  .progress.run { animation-duration: 0.01ms; }
+}
 `;
 class FxToast extends HTMLElement {
   constructor() {
@@ -7093,7 +7274,51 @@ class FxToast extends HTMLElement {
     this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["kind", "title", "message", "duration", "icon", "mode"];
+    return ["kind", "title", "message", "duration", "icon", "mode", "progress", "progress-origin"];
+  }
+  /**
+   * Exibe a barra de contagem regressiva na base do card.
+   *
+   * A barra esvazia da esquerda para a direita durante exatamente `duration`
+   * e usa a cor do `kind`. Com `duration="0"` (toast fixo) a barra é
+   * omitida — não há tempo restante a representar.
+   *
+   * - `'always'` (ou atributo vazio): barra sempre correndo.
+   * - `'hover'`: a barra só corre enquanto o cursor estiver sobre o toast;
+   *   ao sair, a animação pausa, então dá tempo de ler a mensagem.
+   * - `'paused'`: barra visível, porém parada.
+   */
+  get progress() {
+    if (!this.hasAttribute("progress")) return void 0;
+    const v = this.getAttribute("progress");
+    return v === "hover" || v === "paused" ? v : "always";
+  }
+  set progress(value) {
+    if (value) this.setAttribute("progress", value);
+    else this.removeAttribute("progress");
+  }
+  /**
+   * Lado a partir do qual a barra esvazia.
+   *
+   * - `'left'` (padrão): a barra fica ancorada à esquerda e drena da direita
+   *   para a esquerda.
+   * - `'right'`: a barra fica ancorada à direita e drena da esquerda para a
+   *   direita (espelhado).
+   *
+   * Só tem efeito junto com `progress`; qualquer valor fora da lista cai em
+   * `'left'`.
+   */
+  get progressOrigin() {
+    return this.getAttribute("progress-origin") === "right" ? "right" : "left";
+  }
+  set progressOrigin(value) {
+    this.setAttribute("progress-origin", value);
+  }
+  /** Duração efetiva em ms (0 = fixo). Mesma regra usada no timer. */
+  get safeDuration() {
+    const dur = Number(this.getAttribute("duration") ?? "4000");
+    if (dur === 0) return 0;
+    return Math.max(Number.isNaN(dur) ? 4e3 : dur, 1e3);
   }
   /** Esquema de cores forçado do card: 'light' | 'dark' | undefined (segue o tema). */
   get mode() {
@@ -7106,16 +7331,21 @@ class FxToast extends HTMLElement {
   }
   connectedCallback() {
     if (!this.shadowRoot.firstChild) __privateMethod(this, _FxToast_instances, render_fn).call(this);
-    const dur = Number(this.getAttribute("duration") ?? "4000");
-    const safe = dur === 0 ? 0 : Math.max(Number.isNaN(dur) ? 4e3 : dur, 1e3);
-    if (!Number.isNaN(safe) && safe > 0 && !this.timer) {
+    const safe = this.safeDuration;
+    if (safe > 0 && !this.timer) {
       this.timer = setTimeout(() => this.dismiss(), safe);
     }
+    __privateMethod(this, _FxToast_instances, syncProgress_fn).call(this);
   }
   disconnectedCallback() {
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
   }
+  attributeChangedCallback(name) {
+    if (name === "duration" || name === "progress" || name === "progress-origin" || name === "kind") {
+      __privateMethod(this, _FxToast_instances, syncProgress_fn).call(this);
+    }
+  }
   dismiss() {
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
@@ -7129,6 +7359,36 @@ class FxToast extends HTMLElement {
   }
 }
 _FxToast_instances = new WeakSet();
+/**
+ * Aplica (ou remove) a barra de contagem regressiva.
+ *
+ * A barra só existe com `progress` e `duration > 0`. O tempo da animação
+ * vem de `--toast-duration`, sempre igual ao do `setTimeout` que fecha o
+ * toast — assim a barra e o desaparecimento nunca desalinham.
+ */
+syncProgress_fn = function() {
+  const card = this.shadowRoot?.querySelector(".card");
+  if (!card) return;
+  const bar = this.shadowRoot.querySelector(".progress");
+  const mode = this.progress;
+  const dur = this.safeDuration;
+  const shouldShow = !!mode && dur > 0;
+  if (!shouldShow) {
+    bar?.remove();
+    card.classList.remove("entering");
+    return;
+  }
+  if (!bar) {
+    this.shadowRoot.querySelector(".card").insertAdjacentHTML("beforeend", '<span class="progress" part="progress" aria-hidden="true"></span>');
+  }
+  const el = this.shadowRoot.querySelector(".progress");
+  el.style.setProperty("--toast-duration", `${dur}ms`);
+  el.style.setProperty("--toast-progress-origin", `${this.progressOrigin} center`);
+  el.classList.remove("run");
+  if (mode !== "paused") el.classList.add("run");
+  card.classList.add("entering");
+  requestAnimationFrame(() => requestAnimationFrame(() => card.classList.remove("entering")));
+};
 render_fn = function() {
   const kind = this.getAttribute("kind") || "info";
   const title = this.getAttribute("title") ?? "";
@@ -7198,6 +7458,8 @@ class ToastApi {
     el.setAttribute("position", o.position ?? "top-right");
     el.setAttribute("duration", String(o.duration ?? 4e3));
     if (o.mode) el.setAttribute("mode", o.mode);
+    if (o.progress) el.setAttribute("progress", o.progress);
+    if (o.progressOrigin) el.setAttribute("progress-origin", o.progressOrigin);
     regionFor(o.position ?? "top-right").appendChild(el);
     this.map.set(id, el);
     return id;
@@ -8295,6 +8557,10 @@ _FxDrawer.styles = css`
 			position: sticky;
 			top: 0;
 			background: var(--fx-surface-background);
+			/* O conteúdo do drawer (ex.: abas da customização de tema)
+			   rola por trás do header: sem z-index o texto passava POR CIMA
+			   e o header parecia transparente. */
+			z-index: 1;
 		}
 		.title {
 			font-weight: 700;
@@ -8359,6 +8625,10 @@ const _FxPagination = class _FxPagination extends FxElement {
   get pages() {
     return Math.max(1, Math.ceil(this.total / this.rows));
   }
+  connectedCallback() {
+    loadFenixIconsFont();
+    super.connectedCallback();
+  }
   render() {
     const pages = this.pages;
     const current = Math.min(Math.max(1, this.page), pages);
@@ -8369,11 +8639,13 @@ const _FxPagination = class _FxPagination extends FxElement {
     const to = Math.min(current * this.rows, this.total);
     this.setTemplate(`
       <span class="info">${this.total ? `${from}-${to} de ${this.total}` : "0 itens"}</span>
-      <button type="button" class="nav" part="prev" data-go="${current - 1}" ${current <= 1 ? "disabled" : ""}>‹</button>
+      <button type="button" class="nav" part="first" aria-label="Primeira página" data-go="1" ${current <= 1 ? "disabled" : ""}>${fenixIconHtml("first_page")}</button>
+      <button type="button" class="nav" part="prev" aria-label="Página anterior" data-go="${current - 1}" ${current <= 1 ? "disabled" : ""}>${fenixIconHtml("navigate_before")}</button>
       ${window_[0] !== 1 && pages > 5 ? `<button type="button" class="nav" data-go="1">1</button>` : ""}
       ${window_.map((p) => `<button type="button" class="nav ${p === current ? "active" : ""}" data-go="${p}">${p}</button>`).join("")}
       ${window_[window_.length - 1] !== pages && pages > 5 ? `<button type="button" class="nav" data-go="${pages}">${pages}</button>` : ""}
-      <button type="button" class="nav" part="next" data-go="${current + 1}" ${current >= pages ? "disabled" : ""}>›</button>
+      <button type="button" class="nav" part="next" aria-label="Próxima página" data-go="${current + 1}" ${current >= pages ? "disabled" : ""}>${fenixIconHtml("navigate_next")}</button>
+      <button type="button" class="nav" part="last" aria-label="Última página" data-go="${pages}" ${current >= pages ? "disabled" : ""}>${fenixIconHtml("last_page")}</button>
       ${opts.length ? `
         <fx-select class="rows-sel" part="rows" size="sm" value="${this.rows}" aria-label="Itens por página">
           ${opts.map((o) => `<option value="${esc(o)}">${esc(o)}</option>`).join("")}
@@ -8409,6 +8681,7 @@ const _FxPagination = class _FxPagination extends FxElement {
   }
 };
 _FxPagination.styles = css`
+    ${FENIX_ICON_BASE_CSS}
     :host {
       display: flex;
       align-items: center;
@@ -8420,6 +8693,9 @@ _FxPagination.styles = css`
     :host([position='center']) { justify-content: center; }
     :host([position='right']) { justify-content: flex-end; }
     .nav {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       min-width: var(--fx-size-sm);
       height: var(--fx-size-sm);
       border: 1px solid var(--fx-border-default);
@@ -8434,6 +8710,10 @@ _FxPagination.styles = css`
         border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),
         background var(--fx-motion-duration-fast) var(--fx-motion-easing);
     }
+    /* O glifo precisa de 1px a mais que o dígito: a altura de traço do ícone é
+       maior que a do número, então igualar os dois font-size deixa a seta
+       visivelmente maior que o texto. */
+    .nav .fx-icon { font-size: calc(var(--fx-font-size) - 1px); }
     .nav:hover:not([disabled]):not(.active) { border-color: var(--fx-color-primary); color: var(--fx-color-primary); }
     .nav[disabled] { opacity: 0.5; cursor: not-allowed; }
     .nav.active {
@@ -9451,7 +9731,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":
@@ -9476,7 +9756,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();
@@ -9492,7 +9772,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);
@@ -9504,7 +9784,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;
@@ -10676,6 +10956,7 @@ export {
   FxEmptyState,
   FxFileUpload,
   FxFloatlabel,
+  FxIcon,
   FxInput,
   FxKnob,
   FxMenu,
@@ -10722,7 +11003,7 @@ export {
   resetTheme,
   s as sanitizeData,
   setTokens,
-  b as stripTags,
+  g as stripTags,
   theme,
   themePresets,
   tokenCssVars