@wrrdev/fenix-ui 1.1.15 → 1.1.16

package/dist/fenix-ui4.esm.js

@@ -3337,6 +3337,43 @@ function defineFxRadio() {
   return defineElement("fx-radio", FxRadio);
 }
 defineFxRadio();
+function toInt(value, fallback) {
+  return Number.isFinite(value) ? Math.trunc(value) : fallback;
+}
+function range(start, end) {
+  const out = [];
+  for (let p = start; p <= end; p++) out.push(p);
+  return out;
+}
+function pageRange(current, count, options = {}) {
+  const pages = Math.max(0, toInt(count, 0));
+  if (pages === 0) return [];
+  const boundaries = Math.max(0, toInt(options.boundaries ?? 1, 1));
+  const siblings = Math.max(0, toInt(options.siblings ?? 1, 1));
+  const page = Math.min(Math.max(1, toInt(current, 1)), pages);
+  if (pages <= boundaries * 2 + siblings * 2 + 3) return range(1, pages);
+  const startPages = range(1, Math.min(boundaries, pages));
+  const endPages = range(
+    Math.max(pages - boundaries + 1, boundaries + 1),
+    pages
+  );
+  const siblingsStart = Math.max(
+    Math.min(page - siblings, pages - boundaries - siblings * 2 - 1),
+    boundaries + 2
+  );
+  const siblingsEnd = Math.min(
+    Math.max(page + siblings, boundaries + siblings * 2 + 2),
+    endPages.length > 0 ? endPages[0] - 2 : pages - 1
+  );
+  const items = [...startPages];
+  if (siblingsStart > boundaries + 2) items.push("ellipsis");
+  else if (boundaries + 1 < pages - boundaries) items.push(boundaries + 1);
+  items.push(...range(siblingsStart, siblingsEnd));
+  if (siblingsEnd < pages - boundaries - 1) items.push("ellipsis");
+  else if (pages - boundaries > boundaries) items.push(pages - boundaries);
+  items.push(...endPages);
+  return items;
+}
 const LOCALE = "pt-BR";
 const PIPES = {
   /** Formata como moeda brasileira (R$). */
@@ -3991,12 +4028,15 @@ const _FxTable = class _FxTable extends FxElement {
     const bodyHtml = rows.length ? rows.map(
       (row, i) => `<tr part="row" data-index="${i}">${cols.map((c) => `<td part="cell" style="text-align:${c.align}">${this.cellHtml(c, row)}</td>`).join("")}</tr>`
     ).join("") : `<tr><td class="empty" colspan="${cols.length || 1}">${esc(this.getAttr("empty-message", "Nenhum registro encontrado"))}</td></tr>`;
+    const pageButtons = pageRange(this.page + 1, pages).map(
+      (item) => item === "ellipsis" ? `<span class="ellipsis" part="ellipsis" aria-hidden="true">…</span>` : `<button type="button" class="pg-btn" part="page" data-pg="${item - 1}"${item === this.page + 1 ? ' aria-current="page"' : ""}>${item}</button>`
+    ).join("");
     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" 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("")}
+        ${pageButtons}
         <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:")}
@@ -4352,7 +4392,7 @@ _FxTable.styles = css`
 		.pg-btn .fx-icon {
 			font-size: calc(var(--fx-font-size) - 1px);
 		}
-		.pg-btn:hover:not(:disabled):not([aria-current="true"]) {
+		.pg-btn:hover:not(:disabled):not([aria-current="page"]) {
 			border-color: var(--fx-color-primary);
 			color: var(--fx-color-primary);
 		}
@@ -4360,12 +4400,25 @@ _FxTable.styles = css`
 			opacity: 0.5;
 			cursor: not-allowed;
 		}
-		.pg-btn[aria-current="true"] {
+		.pg-btn[aria-current="page"] {
 			background: var(--fx-color-primary);
 			border-color: var(--fx-color-primary);
 			color: #fff;
 			font-weight: var(--fx-font-weight);
 		}
+		/* Elipse da janela de páginas (1 … 499 [500] 501 … 1000): ocupa o
+		   mesmo espaço de um botão para o rodapé não "pular" ao navegar,
+		   mas não é clicável. */
+		.pager .ellipsis {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			min-width: var(--fx-size-sm);
+			height: var(--fx-size-sm);
+			color: var(--fx-text-muted);
+			font-size: calc(var(--fx-font-size) - 2px);
+			user-select: none;
+		}
 		/* O seletor "Por página" só mostra números, então não pode herdar a
 		   largura padrão do <fx-select> (200px / 180px em size="sm"), que
 		   deixava o rodapé da paginação desproporcional. O limite tem que ser
@@ -6118,10 +6171,10 @@ function rootOf(editor) {
   const root = editor.getRootNode();
   return typeof ShadowRoot !== "undefined" && root instanceof ShadowRoot ? root : document;
 }
-function isRangeInside(editor, range) {
-  if (!range) return false;
-  const start = range.startContainer;
-  const end = range.endContainer;
+function isRangeInside(editor, range2) {
+  if (!range2) return false;
+  const start = range2.startContainer;
+  const end = range2.endContainer;
   return editor.contains(start) && editor.contains(end);
 }
 function readSelectionRange(root) {
@@ -6132,10 +6185,10 @@ function readSelectionRange(root) {
       const ranges = selection.getComposedRanges({ shadowRoots: [root] });
       const first = ranges[0];
       if (first) {
-        const range = document.createRange();
-        range.setStart(first.startContainer, first.startOffset);
-        range.setEnd(first.endContainer, first.endOffset);
-        return range;
+        const range2 = document.createRange();
+        range2.setStart(first.startContainer, first.startOffset);
+        range2.setEnd(first.endContainer, first.endOffset);
+        return range2;
       }
     } catch {
     }
@@ -6143,41 +6196,41 @@ function readSelectionRange(root) {
   return selection.rangeCount > 0 ? selection.getRangeAt(0) : null;
 }
 function getRange(editor, fallback) {
-  const range = readSelectionRange(rootOf(editor));
-  if (isRangeInside(editor, range)) return range;
+  const range2 = readSelectionRange(rootOf(editor));
+  if (isRangeInside(editor, range2)) return range2;
   if (isRangeInside(editor, fallback ?? null)) return fallback ?? null;
   return null;
 }
 function saveRange(editor) {
-  const range = getRange(editor);
-  return range ? range.cloneRange() : null;
+  const range2 = getRange(editor);
+  return range2 ? range2.cloneRange() : null;
 }
-function restoreRange(editor, range) {
-  if (!range || !isRangeInside(editor, range)) return;
+function restoreRange(editor, range2) {
+  if (!range2 || !isRangeInside(editor, range2)) return;
   editor.focus({ preventScroll: true });
   const selection = document.getSelection();
   if (!selection) return;
   selection.removeAllRanges();
-  selection.addRange(range);
+  selection.addRange(range2);
 }
 function placeCaretAtEnd(editor) {
-  const range = document.createRange();
-  range.selectNodeContents(editor);
-  range.collapse(false);
+  const range2 = document.createRange();
+  range2.selectNodeContents(editor);
+  range2.collapse(false);
   const selection = document.getSelection();
   if (!selection) return;
   selection.removeAllRanges();
-  selection.addRange(range);
+  selection.addRange(range2);
 }
-function getBlock(editor, range) {
-  const active = range ?? getRange(editor);
+function getBlock(editor, range2) {
+  const active = range2 ?? getRange(editor);
   if (!active) return null;
   const node = active.startContainer;
   const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
   const block = el?.closest(BLOCK_SELECTOR) ?? null;
   return block && editor.contains(block) ? block : null;
 }
-function getSelectedBlocks(editor, range) {
+function getSelectedBlocks(editor, range2) {
   const active = getRange(editor);
   if (!active) return [];
   if (active.collapsed) {
@@ -6197,11 +6250,11 @@ function closestInEditor(editor, node, selector) {
   const match = el?.closest(selector) ?? null;
   return match && editor.contains(match) ? match : null;
 }
-function setSelection(range) {
+function setSelection(range2) {
   const selection = document.getSelection();
   if (!selection) return;
   selection.removeAllRanges();
-  selection.addRange(range);
+  selection.addRange(range2);
 }
 function nativeExec(command, value) {
   const exec = document.execCommand;
@@ -6214,16 +6267,16 @@ function nativeExec(command, value) {
 }
 function insertHtml(editor, html) {
   if (nativeExec("insertHTML", html)) return true;
-  const range = getRange(editor);
-  if (!range) {
+  const range2 = getRange(editor);
+  if (!range2) {
     editor.insertAdjacentHTML("beforeend", html);
     placeCaretAtEnd(editor);
     return true;
   }
-  range.deleteContents();
-  const fragment = range.createContextualFragment(html);
+  range2.deleteContents();
+  const fragment = range2.createContextualFragment(html);
   const last = fragment.lastChild;
-  range.insertNode(fragment);
+  range2.insertNode(fragment);
   if (last) {
     const next = document.createRange();
     next.setStartAfter(last);
@@ -6239,12 +6292,12 @@ function unwrap(el) {
   el.remove();
 }
 function wrapSelection(editor, tag) {
-  const range = getRange(editor);
-  if (!range) return false;
+  const range2 = getRange(editor);
+  if (!range2) return false;
   const el = document.createElement(tag);
-  if (range.collapsed) {
+  if (range2.collapsed) {
     el.appendChild(document.createTextNode("​"));
-    range.insertNode(el);
+    range2.insertNode(el);
     const caret = document.createRange();
     caret.setStart(el.firstChild ?? el, 1);
     caret.collapse(true);
@@ -6252,10 +6305,10 @@ function wrapSelection(editor, tag) {
     return true;
   }
   try {
-    range.surroundContents(el);
+    range2.surroundContents(el);
   } catch {
-    el.appendChild(range.extractContents());
-    range.insertNode(el);
+    el.appendChild(range2.extractContents());
+    range2.insertNode(el);
   }
   return true;
 }
@@ -6271,9 +6324,9 @@ function toggleInline(editor, tag) {
   };
   const nativeCommand = nativeMap[tag];
   if (nativeCommand && nativeExec(nativeCommand)) return true;
-  const range = getRange(editor);
-  if (!range) return false;
-  const current = (range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer : range.startContainer.parentElement)?.closest(tag);
+  const range2 = getRange(editor);
+  if (!range2) return false;
+  const current = (range2.startContainer.nodeType === Node.ELEMENT_NODE ? range2.startContainer : range2.startContainer.parentElement)?.closest(tag);
   if (current && editor.contains(current)) {
     unwrap(current);
     return true;
@@ -6322,31 +6375,31 @@ function toggleList(editor, ordered) {
     list.appendChild(li);
     block.remove();
   }
-  const range = document.createRange();
-  range.selectNodeContents(list.lastElementChild ?? list);
-  range.collapse(false);
-  setSelection(range);
+  const range2 = document.createRange();
+  range2.selectNodeContents(list.lastElementChild ?? list);
+  range2.collapse(false);
+  setSelection(range2);
   return true;
 }
 function removeFormat(editor) {
   if (nativeExec("removeFormat")) return true;
-  const range = getRange(editor);
-  if (!range) return false;
-  const root = range.commonAncestorContainer;
+  const range2 = getRange(editor);
+  if (!range2) return false;
+  const root = range2.commonAncestorContainer;
   const container = root.nodeType === Node.ELEMENT_NODE ? root : root.parentElement;
   if (!container) return false;
   const tags = ["strong", "b", "em", "i", "u", "s", "strike", "span", "mark", "code", "sub", "sup"];
   for (const el of Array.from(container.querySelectorAll(tags.join(",")))) {
-    if (range.intersectsNode(el)) unwrap(el);
+    if (range2.intersectsNode(el)) unwrap(el);
   }
   return true;
 }
 const linkHtml = (href, label, target) => `<a href="${escapeAttr(href)}" target="${target}" rel="noopener noreferrer">${escapeText(label)}</a>`;
 function applyLink(editor, href, text, target = "_blank") {
   const label = text?.trim() || href;
-  const range = getRange(editor);
-  if (!range) return insertHtml(editor, linkHtml(href, label, target));
-  const anchor = (range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer : range.startContainer.parentElement)?.closest("a");
+  const range2 = getRange(editor);
+  if (!range2) return insertHtml(editor, linkHtml(href, label, target));
+  const anchor = (range2.startContainer.nodeType === Node.ELEMENT_NODE ? range2.startContainer : range2.startContainer.parentElement)?.closest("a");
   if (anchor && editor.contains(anchor)) {
     anchor.setAttribute("href", href);
     anchor.setAttribute("target", target);
@@ -6354,9 +6407,9 @@ function applyLink(editor, href, text, target = "_blank") {
     if (text && text !== anchor.textContent) anchor.textContent = text;
     return true;
   }
-  if (!range.collapsed) {
+  if (!range2.collapsed) {
     if (nativeExec("createLink", href)) {
-      const created = (range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer : range.startContainer.parentElement)?.closest("a");
+      const created = (range2.startContainer.nodeType === Node.ELEMENT_NODE ? range2.startContainer : range2.startContainer.parentElement)?.closest("a");
       created?.setAttribute("target", target);
       created?.setAttribute("rel", "noopener noreferrer");
       return true;
@@ -6366,10 +6419,10 @@ function applyLink(editor, href, text, target = "_blank") {
     el.setAttribute("target", target);
     el.setAttribute("rel", "noopener noreferrer");
     try {
-      range.surroundContents(el);
+      range2.surroundContents(el);
     } catch {
-      el.appendChild(range.extractContents());
-      range.insertNode(el);
+      el.appendChild(range2.extractContents());
+      range2.insertNode(el);
     }
     return true;
   }
@@ -6377,9 +6430,9 @@ function applyLink(editor, href, text, target = "_blank") {
 }
 function unlink(editor) {
   if (nativeExec("unlink")) return true;
-  const range = getRange(editor);
-  if (!range) return false;
-  const anchor = (range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer : range.startContainer.parentElement)?.closest("a");
+  const range2 = getRange(editor);
+  if (!range2) return false;
+  const anchor = (range2.startContainer.nodeType === Node.ELEMENT_NODE ? range2.startContainer : range2.startContainer.parentElement)?.closest("a");
   if (anchor && editor.contains(anchor)) {
     unwrap(anchor);
     return true;
@@ -6447,10 +6500,10 @@ function cellPosition(table, cell) {
   }
   return null;
 }
-function selectedCells(table, range) {
+function selectedCells(table, range2) {
   return Array.from(table.querySelectorAll("td,th")).filter((cell) => {
     try {
-      return range.intersectsNode(cell);
+      return range2.intersectsNode(cell);
     } catch {
       return false;
     }
@@ -6462,8 +6515,8 @@ function copyCellAttributes(from, to) {
     to.setAttribute(attr.name, attr.value);
   }
 }
-function mergeSelectedCells(table, range) {
-  const cells = selectedCells(table, range);
+function mergeSelectedCells(table, range2) {
+  const cells = selectedCells(table, range2);
   if (cells.length < 2) return null;
   const { matrix } = tableMatrix(table);
   const positions = cells.map((cell) => ({ cell, position: cellPosition(table, cell) })).filter((item) => Boolean(item.position));
@@ -6846,9 +6899,9 @@ const _FxEditor = class _FxEditor extends FxFormElement {
   mergeCells() {
     const table = __privateMethod(this, _FxEditor_instances, currentTable_fn).call(this);
     const editor = this.editor;
-    const range = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
-    if (!table || !range) return false;
-    const merged = mergeSelectedCells(table, range);
+    const range2 = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
+    if (!table || !range2) return false;
+    const merged = mergeSelectedCells(table, range2);
     if (!merged) return false;
     placeCaretAtEnd(merged);
     __privateMethod(this, _FxEditor_instances, afterCommand_fn).call(this);
@@ -6858,8 +6911,8 @@ const _FxEditor = class _FxEditor extends FxFormElement {
   splitCell() {
     const table = __privateMethod(this, _FxEditor_instances, currentTable_fn).call(this);
     const editor = this.editor;
-    const range = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
-    const cell = editor ? closestInEditor(editor, range?.startContainer ?? null, "td,th") : null;
+    const range2 = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
+    const cell = editor ? closestInEditor(editor, range2?.startContainer ?? null, "td,th") : null;
     if (!table || !cell) return false;
     const created = splitCell(table, cell);
     if (!created.length) return false;
@@ -7119,8 +7172,8 @@ fits_fn = function(extra) {
   const max = this.maxlength;
   if (!max) return true;
   const editor = this.editor;
-  const range = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
-  const selected = range && !range.collapsed ? range.toString().length : 0;
+  const range2 = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
+  const selected = range2 && !range2.collapsed ? range2.toString().length : 0;
   return this.text.length - selected + extra <= max;
 };
 limitError_fn = function() {
@@ -7243,9 +7296,9 @@ bindGlobalSelection_fn = function() {
   const handler = () => {
     const editor = this.editor;
     if (!editor) return;
-    const range = getRange(editor, __privateGet(this, _lastRange));
-    if (!range) return;
-    __privateSet(this, _lastRange, range.cloneRange());
+    const range2 = getRange(editor, __privateGet(this, _lastRange));
+    if (!range2) return;
+    __privateSet(this, _lastRange, range2.cloneRange());
     cancelAnimationFrame(__privateGet(this, _selectionRaf));
     __privateSet(this, _selectionRaf, requestAnimationFrame(() => __privateMethod(this, _FxEditor_instances, updateToolbar_fn).call(this)));
   };
@@ -7370,8 +7423,8 @@ renderToolbar_fn = function() {
 updateToolbar_fn = function() {
   const editor = this.editor;
   if (!editor) return;
-  const range = getRange(editor, __privateGet(this, _lastRange));
-  if (!range) return;
+  const range2 = getRange(editor, __privateGet(this, _lastRange));
+  if (!range2) return;
   const setActive = (cmd, active) => {
     const button = this.root.querySelector(`[data-cmd="${cmd}"]`);
     if (!button) return;
@@ -7379,7 +7432,7 @@ updateToolbar_fn = function() {
     button.setAttribute("aria-pressed", String(active));
   };
   const ancestor = (selector) => {
-    const node = range.startContainer;
+    const node = range2.startContainer;
     const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
     const match = el?.closest(selector);
     return Boolean(match && editor.contains(match));
@@ -7391,7 +7444,7 @@ updateToolbar_fn = function() {
   setActive("code", ancestor("code"));
   setActive("insertUnorderedList", ancestor("ul"));
   setActive("insertOrderedList", ancestor("ol"));
-  const block = getBlock(editor, range);
+  const block = getBlock(editor, range2);
   const blockTag = block?.tagName.toLowerCase() ?? "p";
   const blockSelect = this.root.querySelector("[data-block]");
   if (blockSelect) {
@@ -7635,9 +7688,9 @@ handleKeydown_fn = function(event) {
 tabInTable_fn = function(backwards) {
   const editor = this.editor;
   if (!editor) return false;
-  const range = getRange(editor, __privateGet(this, _lastRange));
-  if (!range) return false;
-  const cell = closestInEditor(editor, range.startContainer, "td,th");
+  const range2 = getRange(editor, __privateGet(this, _lastRange));
+  if (!range2) return false;
+  const cell = closestInEditor(editor, range2.startContainer, "td,th");
   const table = cell?.closest("table");
   if (!cell || !table) return false;
   const cells = Array.from(table.querySelectorAll("td,th"));
@@ -7807,14 +7860,14 @@ openLinkDialog_fn = async function(existing) {
   const editor = this.editor;
   if (!editor) return;
   if (existing) __privateMethod(this, _FxEditor_instances, selectAnchor_fn).call(this, existing);
-  let range = getRange(editor, __privateGet(this, _lastRange));
-  if (!range) {
+  let range2 = getRange(editor, __privateGet(this, _lastRange));
+  if (!range2) {
     placeCaretAtEnd(editor);
-    range = getRange(editor);
-    __privateSet(this, _lastRange, range?.cloneRange() ?? null);
+    range2 = getRange(editor);
+    __privateSet(this, _lastRange, range2?.cloneRange() ?? null);
   }
-  const anchor = existing ?? closestInEditor(editor, range?.startContainer ?? null, "a");
-  const selected = range && !range.collapsed ? range.toString() : anchor?.textContent ?? "";
+  const anchor = existing ?? closestInEditor(editor, range2?.startContainer ?? null, "a");
+  const selected = range2 && !range2.collapsed ? range2.toString() : anchor?.textContent ?? "";
   const result = await __privateMethod(this, _FxEditor_instances, openDialog_fn).call(this, "Link", [
     { name: "url", label: "URL", type: "url", value: anchor?.getAttribute("href") ?? "", placeholder: "https://..." },
     { name: "text", label: "Texto (quando não há seleção)", value: selected, placeholder: "Texto do link" },
@@ -8037,13 +8090,13 @@ selectAnchor_fn = function(anchor) {
   const editor = this.editor;
   if (!editor) return;
   editor.focus({ preventScroll: true });
-  const range = document.createRange();
-  range.selectNodeContents(anchor);
+  const range2 = document.createRange();
+  range2.selectNodeContents(anchor);
   const selection = document.getSelection();
   if (!selection) return;
   selection.removeAllRanges();
-  selection.addRange(range);
-  __privateSet(this, _lastRange, range.cloneRange());
+  selection.addRange(range2);
+  __privateSet(this, _lastRange, range2.cloneRange());
 };
 handleLinkOverlayClick_fn = function(event) {
   const action = event.target.closest("[data-link-action]");
@@ -8314,19 +8367,19 @@ hidePanel_fn = function() {
 currentTable_fn = function() {
   const editor = this.editor;
   if (!editor) return null;
-  const range = getRange(editor, __privateGet(this, _lastRange));
-  return closestInEditor(editor, range?.startContainer ?? null, "table");
+  const range2 = getRange(editor, __privateGet(this, _lastRange));
+  return closestInEditor(editor, range2?.startContainer ?? null, "table");
 };
 tableAction_fn = function(action) {
   const table = __privateMethod(this, _FxEditor_instances, currentTable_fn).call(this);
   if (!table) return;
   const editor = this.editor;
-  const range = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
-  const cell = editor ? closestInEditor(editor, range?.startContainer ?? null, "td,th") : null;
+  const range2 = editor ? getRange(editor, __privateGet(this, _lastRange)) : null;
+  const cell = editor ? closestInEditor(editor, range2?.startContainer ?? null, "td,th") : null;
   const row = cell?.parentElement;
   if (action === "merge-cells") {
-    if (!range) return;
-    const merged = mergeSelectedCells(table, range);
+    if (!range2) return;
+    const merged = mergeSelectedCells(table, range2);
     if (!merged) return;
     placeCaretAtEnd(merged);
     __privateMethod(this, _FxEditor_instances, afterCommand_fn).call(this);
@@ -13101,17 +13154,16 @@ const _FxPagination = class _FxPagination extends FxElement {
     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 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);
+    const pageButtons = pageRange(current, pages).map(
+      (item) => item === "ellipsis" ? `<span class="ellipsis" part="ellipsis" aria-hidden="true">…</span>` : `<button type="button" class="nav ${item === current ? "active" : ""}" part="page" data-go="${item}"${item === current ? ' aria-current="page"' : ""}>${item}</button>`
+    ).join("");
+    const from = (current - 1) * this.rows + 1;
     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="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>` : ""}
+      ${pageButtons}
       <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 ? `
@@ -13119,9 +13171,6 @@ const _FxPagination = class _FxPagination extends FxElement {
           ${opts.map((o) => `<option value="${esc(o)}">${esc(o)}</option>`).join("")}
         </fx-select>` : ""}
     `);
-    function total0(page, rows) {
-      return (page - 1) * rows + 1;
-    }
     this.root.querySelectorAll(".nav[data-go]").forEach((btn) => {
       btn.addEventListener("click", () => {
         const target = Number(btn.dataset.go);
@@ -13153,6 +13202,7 @@ _FxPagination.styles = css`
     :host {
       display: flex;
       align-items: center;
+      flex-wrap: wrap;
       gap: var(--fx-space-sm);
       font-family: var(--fx-font-family);
       font-size: var(--fx-font-size);
@@ -13190,6 +13240,18 @@ _FxPagination.styles = css`
       color: #fff;
       font-weight: 600;
     }
+    /* Elipse entre a janela de páginas e as bordas: ocupa o mesmo espaço de
+       um botão (para o rodapé não "pular" ao navegar) mas não é clicável. */
+    .ellipsis {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--fx-size-sm);
+      height: var(--fx-size-sm);
+      color: var(--fx-text-muted);
+      font-size: calc(var(--fx-font-size) - 2px);
+      user-select: none;
+    }
     .info { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); }
     fx-select { vertical-align: middle; }
     fx-select::part(trigger) {
@@ -13525,8 +13587,8 @@ const _FxKnob = class _FxKnob extends FxFormElement {
     const min = this.min;
     const max = this.max;
     const value = this.clampValue(this.value);
-    const range = max - min;
-    const pct = range > 0 ? (value - min) / range : 0;
+    const range2 = max - min;
+    const pct = range2 > 0 ? (value - min) / range2 : 0;
     const sizeNum = this.getSizeNum();
     const strokeW = this.strokeWidth;
     const radius = (sizeNum - strokeW) / 2;