@wrrdev/fenix-ui 1.1.14 → 1.1.16

package/dist/components/editor/table-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-utils.js","sources":["../../../src/components/editor/table-utils.ts"],"sourcesContent":["/**\n * Utilitários de tabela do <fx-editor>.\n *\n * O editor usa `td/th` com colspan/rowspan; para mesclar/dividir células\n * precisamos de uma matriz lógica que considere os spans. Este módulo é puro\n * (recebe a tabela e o Range) para poder ser testado sem o componente.\n */\n\nexport interface TableCellPosition {\n  row: number;\n  col: number;\n}\n\nexport interface TableMatrix {\n  rows: HTMLTableRowElement[];\n  matrix: Array<Array<HTMLTableCellElement | null>>;\n}\n\n/** Constrói a matriz lógica da tabela respeitando colspan/rowspan. */\nexport function tableMatrix(table: HTMLTableElement): TableMatrix {\n  const rows = Array.from(table.rows);\n  const matrix: Array<Array<HTMLTableCellElement | null>> = rows.map(() => []);\n\n  for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {\n    const row = rows[rowIndex];\n    for (const cell of Array.from(row.cells)) {\n      let col = 0;\n      while (matrix[rowIndex][col]) col++;\n\n      const rowspan = Math.max(1, Math.min(cell.rowSpan || 1, rows.length - rowIndex));\n      const colspan = Math.max(1, cell.colSpan || 1);\n\n      for (let r = rowIndex; r < rowIndex + rowspan; r++) {\n        if (!matrix[r]) matrix[r] = [];\n        for (let c = col; c < col + colspan; c++) matrix[r][c] = cell;\n      }\n    }\n  }\n\n  const width = matrix.reduce((max, row) => Math.max(max, row.length), 0);\n  for (const row of matrix) {\n    while (row.length < width) row.push(null);\n  }\n\n  return { rows, matrix };\n}\n\n/** Posição lógica (primeira célula da matriz) de uma célula. */\nexport function cellPosition(table: HTMLTableElement, cell: HTMLTableCellElement): TableCellPosition | null {\n  const { matrix } = tableMatrix(table);\n  for (let row = 0; row < matrix.length; row++) {\n    for (let col = 0; col < matrix[row].length; col++) {\n      if (matrix[row][col] === cell) return { row, col };\n    }\n  }\n  return null;\n}\n\n/** Células tocadas pela seleção atual. */\nexport function selectedCells(table: HTMLTableElement, range: Range): HTMLTableCellElement[] {\n  return Array.from(table.querySelectorAll<HTMLTableCellElement>('td,th')).filter((cell) => {\n    try {\n      return range.intersectsNode(cell);\n    } catch {\n      return false;\n    }\n  });\n}\n\nfunction copyCellAttributes(from: HTMLTableCellElement, to: HTMLTableCellElement): void {\n  for (const attr of Array.from(from.attributes)) {\n    if (attr.name === 'colspan' || attr.name === 'rowspan') continue;\n    to.setAttribute(attr.name, attr.value);\n  }\n}\n\n/**\n * Mescla as células selecionadas em uma única célula retangular.\n * Retorna a célula mesclada ou null quando a seleção não forma um retângulo\n * simples (spans que saem da área, seleção em uma única célula etc.).\n */\nexport function mergeSelectedCells(\n  table: HTMLTableElement,\n  range: Range,\n): HTMLTableCellElement | null {\n  const cells = selectedCells(table, range);\n  if (cells.length < 2) return null;\n\n  const { matrix } = tableMatrix(table);\n  const positions = cells\n    .map((cell) => ({ cell, position: cellPosition(table, cell) }))\n    .filter((item): item is { cell: HTMLTableCellElement; position: TableCellPosition } => Boolean(item.position));\n  if (positions.length !== cells.length) return null;\n\n  const minRow = Math.min(...positions.map((item) => item.position.row));\n  const maxRow = Math.max(...positions.map((item) => item.position.row));\n  const minCol = Math.min(...positions.map((item) => item.position.col));\n  const maxCol = Math.max(...positions.map((item) => item.position.col));\n\n  // Nenhuma célula selecionada pode extrapolar o retângulo.\n  for (const { cell, position } of positions) {\n    if (position.row < minRow || position.col < minCol) return null;\n    if (position.row + Math.max(1, cell.rowSpan || 1) - 1 > maxRow) return null;\n    if (position.col + Math.max(1, cell.colSpan || 1) - 1 > maxCol) return null;\n  }\n\n  // O retângulo inteiro precisa estar coberto pelas células selecionadas.\n  const selected = new Set(cells);\n  for (let row = minRow; row <= maxRow; row++) {\n    for (let col = minCol; col <= maxCol; col++) {\n      const cell = matrix[row]?.[col];\n      if (!cell || !selected.has(cell)) return null;\n    }\n  }\n\n  const anchor = matrix[minRow]?.[minCol];\n  if (!anchor) return null;\n\n  const tag = cells.every((cell) => cell.tagName.toLowerCase() === 'th') ? 'th' : 'td';\n  const merged = document.createElement(tag) as HTMLTableCellElement;\n  copyCellAttributes(anchor, merged);\n  if (tag === 'td') merged.removeAttribute('scope');\n\n  merged.colSpan = maxCol - minCol + 1;\n  merged.rowSpan = maxRow - minRow + 1;\n  if (merged.colSpan === 1) merged.removeAttribute('colspan');\n  if (merged.rowSpan === 1) merged.removeAttribute('rowspan');\n\n  for (const cell of cells) {\n    while (cell.firstChild) merged.appendChild(cell.firstChild);\n  }\n\n  anchor.replaceWith(merged);\n  for (const cell of cells) {\n    if (cell !== anchor && cell.parentNode) cell.remove();\n  }\n\n  return merged;\n}\n\n/** Insere uma célula na posição lógica `col` de uma linha. */\nfunction insertCellAtColumn(\n  table: HTMLTableElement,\n  row: HTMLTableRowElement,\n  col: number,\n  cell: HTMLTableCellElement,\n): void {\n  const rowIndex = Array.from(table.rows).indexOf(row);\n  const { matrix } = tableMatrix(table);\n  let before: HTMLTableCellElement | null = null;\n\n  for (const existing of Array.from(row.cells)) {\n    let start = -1;\n    for (let c = 0; c < (matrix[rowIndex]?.length ?? 0); c++) {\n      if (matrix[rowIndex][c] === existing) {\n        start = c;\n        break;\n      }\n    }\n    if (start >= col) {\n      before = existing;\n      break;\n    }\n  }\n\n  row.insertBefore(cell, before);\n}\n\n/**\n * Divide uma célula mesclada.\n * Retorna as células criadas (sem a original) ou [] se não havia merge.\n */\nexport function splitCell(table: HTMLTableElement, cell: HTMLTableCellElement): HTMLTableCellElement[] {\n  const colspan = Math.max(1, cell.colSpan || 1);\n  const rowspan = Math.max(1, cell.rowSpan || 1);\n  if (colspan === 1 && rowspan === 1) return [];\n\n  const position = cellPosition(table, cell);\n  if (!position) return [];\n\n  const rows = Array.from(table.rows);\n  const makeCell = (): HTMLTableCellElement => {\n    const next = document.createElement(cell.tagName.toLowerCase()) as HTMLTableCellElement;\n    if (next.tagName.toLowerCase() === 'th') {\n      next.setAttribute('scope', cell.getAttribute('scope') ?? 'col');\n    }\n    next.innerHTML = '<p><br></p>';\n    return next;\n  };\n\n  const created: HTMLTableCellElement[] = [];\n\n  // Linha da célula original: abre as colunas extras ao lado dela.\n  let last: Element = cell;\n  for (let index = 1; index < colspan; index++) {\n    const next = makeCell();\n    last.after(next);\n    last = next;\n    created.push(next);\n  }\n\n  // Libera a área lógica antes de preencher as linhas abaixo.\n  cell.removeAttribute('colspan');\n  cell.removeAttribute('rowspan');\n\n  // Linhas abaixo: preenche a área do rowspan.\n  for (let index = 1; index < rowspan; index++) {\n    const row = rows[position.row + index];\n    if (!row) break;\n    for (let offset = 0; offset < colspan; offset++) {\n      const next = makeCell();\n      insertCellAtColumn(table, row, position.col + offset, next);\n      created.push(next);\n    }\n  }\n\n  return created;\n}\n\n"],"names":[],"mappings":"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"}

package/dist/components/input/input.d.ts

@@ -1,4 +1,5 @@
 import { FxFormElement } from '../../core/form-element';
+import type { FxInputType } from '../../core/jsx';
 /**
  * <fx-input> — Campo de texto estilizado com os tokens do tema.
  *
@@ -6,7 +7,7 @@ import { FxFormElement } from '../../core/form-element';
  * (via atributo `name`), recebe reset/disable do form, é alvo de
  * `<label for>`/`autofocus` e o Enter submete o form.
  *
- * Atributos: type (text|number|email|password|search|tel|url), value, name,
+ * Atributos: type (text|number|password), value, name,
  * size, placeholder, disabled, readonly, min, max, step, autofocus,
  * clearable, full (largura 100% acompanhando o elemento pai), icon (nome do
  * glifo Fenix Icons ou emoji/texto livre) e icon-pos (left|right, padrão left).
@@ -20,6 +21,9 @@ import { FxFormElement } from '../../core/form-element';
 export declare class FxInput extends FxFormElement {
     static styles: string;
     static get observedAttributes(): string[];
+    /** Tipo do input interno. Padrão: `'text'`. */
+    get type(): FxInputType;
+    set type(value: FxInputType);
     /** Tamanho do campo. Padrão: `'md'`. */
     get size(): string;
     set size(value: string);

package/dist/components/input/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC,OAAgB,MAAM,SAuIpB;IAMF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAMjD;IAED,wCAAwC;IACxC,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAMtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;cAEkB,MAAM,IAAI,IAAI;IAiFjC,yEAAyE;cACtD,mBAAmB,IAAI,IAAI;CAK/C;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAclD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC,OAAgB,MAAM,SAuIpB;IAMF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAMjD;IAED,+CAA+C;IAC/C,IAAa,IAAI,IAAI,WAAW,CAE/B;IACD,IAAa,IAAI,CAAC,KAAK,EAAE,WAAW,EAEnC;IAED,wCAAwC;IACxC,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAMtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;cAEkB,MAAM,IAAI,IAAI;IAiFjC,yEAAyE;cACtD,mBAAmB,IAAI,IAAI;CAO/C;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}

package/dist/components/input/input.js

@@ -3,6 +3,11 @@ import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
 import { esc } from "../../core/sanitize.js";
 import { FENIX_ICON_BASE_CSS, fenixIconHtml } from "../../icons/base-css.js";
+const INPUT_TYPES = /* @__PURE__ */ new Set(["text", "number", "password"]);
+function normalizeInputType(value) {
+  const type = (value || "text").toLowerCase();
+  return INPUT_TYPES.has(type) ? type : "text";
+}
 const _FxInput = class _FxInput extends FxFormElement {
   // `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.
@@ -26,6 +31,13 @@ const _FxInput = class _FxInput extends FxFormElement {
       "valid"
     ];
   }
+  /** Tipo do input interno. Padrão: `'text'`. */
+  get type() {
+    return normalizeInputType(this.getAttr("type", "text"));
+  }
+  set type(value) {
+    this.setAttribute("type", normalizeInputType(value));
+  }
   /** Tamanho do campo. Padrão: `'md'`. */
   get size() {
     const s = this.getAttr("size", "md");
@@ -49,7 +61,7 @@ const _FxInput = class _FxInput extends FxFormElement {
     this.toggleAttr("disabled", Boolean(value));
   }
   render() {
-    const type = this.getAttr("type", "text");
+    const type = this.type;
     const placeholder = this.getAttr("placeholder");
     const readonly = this.hasAttr("readonly");
     const disabled = this.hasAttr("disabled");
@@ -118,6 +130,8 @@ const _FxInput = class _FxInput extends FxFormElement {
   syncInternalControl() {
     const field = this.root.querySelector(".field");
     const value = this.getAttr("value");
+    const type = this.type;
+    if (field && field.type !== type) field.type = type;
     if (field && field.value !== value) field.value = value;
   }
 };

package/dist/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/components/input/input.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\n\n/**\n * <fx-input> — Campo de texto estilizado com os tokens do tema.\n *\n * Form-Associated Custom Element: dentro de um <form> entra no FormData\n * (via atributo `name`), recebe reset/disable do form, é alvo de\n * `<label for>`/`autofocus` e o Enter submete o form.\n *\n * Atributos: type (text|number|email|password|search|tel|url), value, name,\n * size, placeholder, disabled, readonly, min, max, step, autofocus,\n * clearable, full (largura 100% acompanhando o elemento pai), icon (nome do\n * glifo Fenix Icons ou emoji/texto livre) e icon-pos (left|right, padrão left).\n * Largura: o default (260px; sm 220px / lg 300px) fica no HOST via tokens\n * --fx-input-width(-sm|-lg) — CSS externo, classes e style inline no elemento\n * vencem o default sem precisar de atributo.\n * Slots: `icon` (ícone customizado no lugar do atributo).\n * Eventos: `input`, `change` e `valueChange` (composed, detail: { value }) —\n * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.\n */\nexport class FxInput extends FxFormElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n      /* Largura padrão no HOST (e não no .field interno): assim CSS externo,\n         classes do framework (ex.: w-full) e style inline no elemento vencem\n         este default naturalmente — regras do documento têm precedência sobre\n         :host. Default global trocável via token: --fx-input-width (-sm/-lg). */\n      width: var(--fx-input-width, 260px);\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .field {\n      font-family: inherit;\n      font-size: inherit;\n      /* Altura determinística: com line-height fixo, o padding vertical cabe no\n         token --fx-size-* e a caixa fica EXATAMENTE no tamanho padrão\n         (sm 32 / md 40 / lg 48), igual para todos os campos. */\n      line-height: var(--fx-font-line-height);\n      min-height: var(--fx-size-md);\n      font-weight: var(--fx-font-weight);\n      color: var(--fx-text-default);\n      background-color: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      padding: var(--fx-space-sm) var(--fx-space-lg);\n      /* Acompanha a largura definida no :host. */\n      width: 100%;\n      box-sizing: border-box;\n      transition:\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .field::placeholder { color: var(--fx-text-muted); opacity: 1; }\n    .field:hover { border-color: var(--fx-border-hover); }\n        .field:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .field:disabled,\n    .field[readonly] {\n      opacity: 0.55;\n      cursor: not-allowed;\n      background-color: var(--fx-surface-surface-hover);\n    }\n    /* Validação: borda sempre; o brilho (anel) segue o token do preset\n       --fx-effect-error-ring, que acompanha effect.focus-ring — anel\n       desligado ⇒ erro só com a borda vermelha, ligado ⇒ soma o brilho. */\n    :host([error]) .field,\n    :host([invalid]) .field,\n    :host([error]) .field:focus-visible,\n    :host([invalid]) .field:focus-visible {\n      border-color: var(--fx-color-danger, #dc2626);\n      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n    }\n    :host([success]) .field,\n    :host([valid]) .field,\n    :host([success]) .field:focus-visible,\n    :host([valid]) .field:focus-visible {\n      border-color: var(--fx-color-success, #16a34a);\n      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n    }\n    :host([size='sm']) { width: var(--fx-input-width-sm, 220px); }\n    :host([size='sm']) .field { padding: var(--fx-space-xs) var(--fx-space-md); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }\n    :host([size='lg']) { width: var(--fx-input-width-lg, 300px); }\n    :host([size='lg']) .field { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }\n    /* Full width: o host estica até o pai e o campo interno acompanha\n       (usar com um container de largura controlada, ex. w-full no Vue). */\n    :host([full]) { display: block; width: 100%; }\n    :host([full]) .field { width: 100%; }\n    /* Clearable */\n    :host([clearable]) { position: relative; display: inline-flex; }\n    :host([clearable][full]) { display: block; }\n    .wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }\n    :host([full]) .wrap { display: flex; width: 100%; }\n    :host([clearable]) .field { padding-right: var(--fx-space-xl); }\n    :host([clearable][full]) .field { flex: 1 1 auto; }\n    /* Ícones (attr icon + slot icon) — DENTRO do campo, sobre o padding\n       (padrão Material/PrimeVue). Tamanho ajustável via --fx-input-icon-size. */\n    .field-icon {\n      position: relative;\n      display: inline-flex;\n      box-sizing: border-box;\n      width: 100%;\n    }\n    .field-icon .field { flex: 1 1 auto; min-width: 0; }\n    :host([full]) .field-icon { display: flex; width: 100%; }\n    .field-icon .fx-icon,\n    .field-icon ::slotted([slot='icon']) {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px));\n      line-height: 1;\n      color: var(--fx-text-muted);\n      pointer-events: none;\n      z-index: 1;\n    }\n    .field-icon.icon-left .fx-icon,\n    .field-icon.icon-left ::slotted([slot='icon']) { left: var(--fx-space-md); }\n    .field-icon.icon-right .fx-icon,\n    .field-icon.icon-right ::slotted([slot='icon']) { right: var(--fx-space-md); }\n    /* padding = posição do ícone + largura + folga extra para o texto\n       não colar no glifo. */\n    .field-icon.icon-left .field {\n      padding-left: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n    }\n    .field-icon.icon-right .field {\n      padding-right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n    }\n    /* icon-pos right + clearable: desloca o × para não sobrepor o ícone. */\n    .field-icon.icon-right + .clear {\n      right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-lg));\n    }\n    .clear {\n      position: absolute;\n      right: var(--fx-space-xs);\n      border: none;\n      background: transparent;\n      color: var(--fx-text-muted);\n      font-size: calc(var(--fx-font-size) + 4px);\n      line-height: 1;\n      cursor: pointer;\n      padding: 0 var(--fx-space-xs);\n      border-radius: var(--fx-radius-full);\n    }\n    .clear:hover { color: var(--fx-color-danger); }\n    .clear[hidden] { display: none; }\n    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */\n    ${FENIX_ICON_BASE_CSS}\n  `;\n\n  // `value` fica FORA da observação: refleti-lo a cada tecla não pode\n  // re-renderizar o template, senão o campo perde o foco ao digitar.\n  // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n  // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n  static override get observedAttributes(): string[] {\n    return [\n      'type', 'size', 'placeholder',\n      'disabled', 'readonly', 'min', 'max', 'step',\n      'icon', 'icon-pos', 'error', 'invalid', 'success', 'valid',\n    ];\n  }\n\n  /** Tamanho do campo. Padrão: `'md'`. */\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(value: string) {\n    this.setAttribute('size', value);\n  }\n\n  get value(): string {\n    return this.getAttr('value');\n  }\n  set value(value: string) {\n    this.setAttribute('value', value);\n    // `value` NÃO é observado (re-render a cada tecla perderia o foco): o\n    // campo interno é sincronizado aqui, sem re-render, preservando foco/cursor.\n    this.syncInternalControl();\n    this.updateFormValue();\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  protected override render(): void {\n    const type = this.getAttr('type', 'text');\n    const placeholder = this.getAttr('placeholder');\n    const readonly = this.hasAttr('readonly');\n    const disabled = this.hasAttr('disabled');\n    const min = this.getAttr('min');\n    const max = this.getAttr('max');\n    const step = this.getAttr('step');\n    const icon = this.getAttr('icon');\n    const iconPos = this.getAttr('icon-pos', 'left') === 'right' ? 'right' : 'left';\n    // Slot `icon` vence o atributo `icon`; sem nenhum dos dois, sem ícone.\n    const slottedIcon = this.querySelector<HTMLElement>('[slot=\"icon\"]');\n    const iconContent = slottedIcon\n      ? '<slot name=\"icon\" part=\"icon\"></slot>'\n      : (icon ? fenixIconHtml(icon) : '');\n    const useIconBox = Boolean(iconContent);\n\n    this.setTemplate(`\n      ${this.hasAttr('clearable') ? '<div class=\"wrap\" part=\"wrap\">' : ''}\n      ${useIconBox ? `<div class=\"field-icon icon-${iconPos}\">` : ''}\n      ${useIconBox && iconPos === 'left' ? iconContent : ''}\n      <input class=\"field\" part=\"input\" type=\"${esc(type)}\"\n        ${placeholder ? `placeholder=\"${esc(placeholder)}\"` : ''}\n        ${min ? `min=\"${esc(min)}\"` : ''} ${max ? `max=\"${esc(max)}\"` : ''} ${step ? `step=\"${esc(step)}\"` : ''}\n      />\n      ${useIconBox && iconPos === 'right' ? iconContent : ''}\n      ${useIconBox ? '</div>' : ''}\n      ${this.hasAttr('clearable') ? '<button type=\"button\" class=\"clear\" part=\"clear\" aria-label=\"Limpar\" tabindex=\"-1\">×</button></div>' : ''}\n    `);\n\n    const field = this.root.querySelector<HTMLInputElement>('.field');\n    if (!field) return;\n    field.value = this.getAttr('value');\n    if (disabled) field.setAttribute('disabled', '');\n    if (readonly) field.setAttribute('readonly', '');\n\n    const emit = (event: string): void => {\n      this.value = field.value;\n      // input (v-model do Vue) + valueChange ([(value)] do Angular).\n      this.emitValueEvents();\n      this.dispatchEvent(\n        new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } }),\n      );\n    };\n    // Bloqueia o evento nativo (composed, sem detail) para que só o\n    // CustomEvent com detail chegue aos consumidores.\n    field.addEventListener('input', (e) => { e.stopPropagation(); emit('input'); });\n    field.addEventListener('change', (e) => { e.stopPropagation(); emit('change'); });\n\n    // Enter submete o form: o <input> interno vive no Shadow DOM e NÃO se\n    // associa ao <form> do light DOM (a fronteira do shadow corta a associação\n    // por árvore) — por isso a submissão implícita é acionada manualmente.\n    // Ouvintes de submit no form (ex.: submit.prevent de frameworks) seguem\n    // recebendo o evento normalmente.\n    field.addEventListener('keydown', (e) => {\n      if (e.key !== 'Enter' || e.isComposing) return;\n      if (!this.form) return;\n      e.preventDefault();\n      this.form.requestSubmit();\n    });\n\n    // Clearable: botão × que limpa o campo e emite input/change vazios.\n    const clearBtn = this.root.querySelector<HTMLButtonElement>('.clear');\n    const syncClear = (): void => {\n      clearBtn?.toggleAttribute('hidden', field.value === '');\n    };\n    syncClear();\n    clearBtn?.addEventListener('click', () => {\n      field.value = '';\n      syncClear();\n      emit('input');\n      emit('change');\n      field.focus();\n    });\n    field.addEventListener('input', syncClear);\n\n    // Publica name/value no form (ElementInternals) a cada render — cobre o\n    // estado inicial e mudanças de atributos observados.\n    this.updateFormValue();\n  }\n\n  /** Empurra o atributo `value` para o campo interno sem re-renderizar. */\n  protected override syncInternalControl(): void {\n    const field = this.root.querySelector<HTMLInputElement>('.field');\n    const value = this.getAttr('value');\n    if (field && field.value !== value) field.value = value;\n  }\n}\n\nexport function defineFxInput(): typeof FxInput {\n  return defineElement('fx-input', FxInput);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"input.js","sources":["../../../src/components/input/input.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\nimport type { FxInputType } from '../../core/jsx';\n\n/**\n * Tipos suportados pelo <fx-input>: text, number e password.\n * Qualquer outro tipo (email, search, date, file, range, checkbox, radio…)\n * cai em `text` em runtime.\n */\nconst INPUT_TYPES = new Set(['text', 'number', 'password']);\n\nfunction normalizeInputType(value: string): string {\n  const type = (value || 'text').toLowerCase();\n  return INPUT_TYPES.has(type) ? type : 'text';\n}\n\n/**\n * <fx-input> — Campo de texto estilizado com os tokens do tema.\n *\n * Form-Associated Custom Element: dentro de um <form> entra no FormData\n * (via atributo `name`), recebe reset/disable do form, é alvo de\n * `<label for>`/`autofocus` e o Enter submete o form.\n *\n * Atributos: type (text|number|password), value, name,\n * size, placeholder, disabled, readonly, min, max, step, autofocus,\n * clearable, full (largura 100% acompanhando o elemento pai), icon (nome do\n * glifo Fenix Icons ou emoji/texto livre) e icon-pos (left|right, padrão left).\n * Largura: o default (260px; sm 220px / lg 300px) fica no HOST via tokens\n * --fx-input-width(-sm|-lg) — CSS externo, classes e style inline no elemento\n * vencem o default sem precisar de atributo.\n * Slots: `icon` (ícone customizado no lugar do atributo).\n * Eventos: `input`, `change` e `valueChange` (composed, detail: { value }) —\n * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.\n */\nexport class FxInput extends FxFormElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n      /* Largura padrão no HOST (e não no .field interno): assim CSS externo,\n         classes do framework (ex.: w-full) e style inline no elemento vencem\n         este default naturalmente — regras do documento têm precedência sobre\n         :host. Default global trocável via token: --fx-input-width (-sm/-lg). */\n      width: var(--fx-input-width, 260px);\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .field {\n      font-family: inherit;\n      font-size: inherit;\n      /* Altura determinística: com line-height fixo, o padding vertical cabe no\n         token --fx-size-* e a caixa fica EXATAMENTE no tamanho padrão\n         (sm 32 / md 40 / lg 48), igual para todos os campos. */\n      line-height: var(--fx-font-line-height);\n      min-height: var(--fx-size-md);\n      font-weight: var(--fx-font-weight);\n      color: var(--fx-text-default);\n      background-color: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      padding: var(--fx-space-sm) var(--fx-space-lg);\n      /* Acompanha a largura definida no :host. */\n      width: 100%;\n      box-sizing: border-box;\n      transition:\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .field::placeholder { color: var(--fx-text-muted); opacity: 1; }\n    .field:hover { border-color: var(--fx-border-hover); }\n        .field:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .field:disabled,\n    .field[readonly] {\n      opacity: 0.55;\n      cursor: not-allowed;\n      background-color: var(--fx-surface-surface-hover);\n    }\n    /* Validação: borda sempre; o brilho (anel) segue o token do preset\n       --fx-effect-error-ring, que acompanha effect.focus-ring — anel\n       desligado ⇒ erro só com a borda vermelha, ligado ⇒ soma o brilho. */\n    :host([error]) .field,\n    :host([invalid]) .field,\n    :host([error]) .field:focus-visible,\n    :host([invalid]) .field:focus-visible {\n      border-color: var(--fx-color-danger, #dc2626);\n      box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n    }\n    :host([success]) .field,\n    :host([valid]) .field,\n    :host([success]) .field:focus-visible,\n    :host([valid]) .field:focus-visible {\n      border-color: var(--fx-color-success, #16a34a);\n      box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n    }\n    :host([size='sm']) { width: var(--fx-input-width-sm, 220px); }\n    :host([size='sm']) .field { padding: var(--fx-space-xs) var(--fx-space-md); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }\n    :host([size='lg']) { width: var(--fx-input-width-lg, 300px); }\n    :host([size='lg']) .field { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }\n    /* Full width: o host estica até o pai e o campo interno acompanha\n       (usar com um container de largura controlada, ex. w-full no Vue). */\n    :host([full]) { display: block; width: 100%; }\n    :host([full]) .field { width: 100%; }\n    /* Clearable */\n    :host([clearable]) { position: relative; display: inline-flex; }\n    :host([clearable][full]) { display: block; }\n    .wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }\n    :host([full]) .wrap { display: flex; width: 100%; }\n    :host([clearable]) .field { padding-right: var(--fx-space-xl); }\n    :host([clearable][full]) .field { flex: 1 1 auto; }\n    /* Ícones (attr icon + slot icon) — DENTRO do campo, sobre o padding\n       (padrão Material/PrimeVue). Tamanho ajustável via --fx-input-icon-size. */\n    .field-icon {\n      position: relative;\n      display: inline-flex;\n      box-sizing: border-box;\n      width: 100%;\n    }\n    .field-icon .field { flex: 1 1 auto; min-width: 0; }\n    :host([full]) .field-icon { display: flex; width: 100%; }\n    .field-icon .fx-icon,\n    .field-icon ::slotted([slot='icon']) {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px));\n      line-height: 1;\n      color: var(--fx-text-muted);\n      pointer-events: none;\n      z-index: 1;\n    }\n    .field-icon.icon-left .fx-icon,\n    .field-icon.icon-left ::slotted([slot='icon']) { left: var(--fx-space-md); }\n    .field-icon.icon-right .fx-icon,\n    .field-icon.icon-right ::slotted([slot='icon']) { right: var(--fx-space-md); }\n    /* padding = posição do ícone + largura + folga extra para o texto\n       não colar no glifo. */\n    .field-icon.icon-left .field {\n      padding-left: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n    }\n    .field-icon.icon-right .field {\n      padding-right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n    }\n    /* icon-pos right + clearable: desloca o × para não sobrepor o ícone. */\n    .field-icon.icon-right + .clear {\n      right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-lg));\n    }\n    .clear {\n      position: absolute;\n      right: var(--fx-space-xs);\n      border: none;\n      background: transparent;\n      color: var(--fx-text-muted);\n      font-size: calc(var(--fx-font-size) + 4px);\n      line-height: 1;\n      cursor: pointer;\n      padding: 0 var(--fx-space-xs);\n      border-radius: var(--fx-radius-full);\n    }\n    .clear:hover { color: var(--fx-color-danger); }\n    .clear[hidden] { display: none; }\n    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */\n    ${FENIX_ICON_BASE_CSS}\n  `;\n\n  // `value` fica FORA da observação: refleti-lo a cada tecla não pode\n  // re-renderizar o template, senão o campo perde o foco ao digitar.\n  // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n  // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n  static override get observedAttributes(): string[] {\n    return [\n      'type', 'size', 'placeholder',\n      'disabled', 'readonly', 'min', 'max', 'step',\n      'icon', 'icon-pos', 'error', 'invalid', 'success', 'valid',\n    ];\n  }\n\n  /** Tipo do input interno. Padrão: `'text'`. */\n  override get type(): FxInputType {\n    return normalizeInputType(this.getAttr('type', 'text')) as FxInputType;\n  }\n  override set type(value: FxInputType) {\n    this.setAttribute('type', normalizeInputType(value));\n  }\n\n  /** Tamanho do campo. Padrão: `'md'`. */\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(value: string) {\n    this.setAttribute('size', value);\n  }\n\n  get value(): string {\n    return this.getAttr('value');\n  }\n  set value(value: string) {\n    this.setAttribute('value', value);\n    // `value` NÃO é observado (re-render a cada tecla perderia o foco): o\n    // campo interno é sincronizado aqui, sem re-render, preservando foco/cursor.\n    this.syncInternalControl();\n    this.updateFormValue();\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  protected override render(): void {\n    const type = this.type;\n    const placeholder = this.getAttr('placeholder');\n    const readonly = this.hasAttr('readonly');\n    const disabled = this.hasAttr('disabled');\n    const min = this.getAttr('min');\n    const max = this.getAttr('max');\n    const step = this.getAttr('step');\n    const icon = this.getAttr('icon');\n    const iconPos = this.getAttr('icon-pos', 'left') === 'right' ? 'right' : 'left';\n    // Slot `icon` vence o atributo `icon`; sem nenhum dos dois, sem ícone.\n    const slottedIcon = this.querySelector<HTMLElement>('[slot=\"icon\"]');\n    const iconContent = slottedIcon\n      ? '<slot name=\"icon\" part=\"icon\"></slot>'\n      : (icon ? fenixIconHtml(icon) : '');\n    const useIconBox = Boolean(iconContent);\n\n    this.setTemplate(`\n      ${this.hasAttr('clearable') ? '<div class=\"wrap\" part=\"wrap\">' : ''}\n      ${useIconBox ? `<div class=\"field-icon icon-${iconPos}\">` : ''}\n      ${useIconBox && iconPos === 'left' ? iconContent : ''}\n      <input class=\"field\" part=\"input\" type=\"${esc(type)}\"\n        ${placeholder ? `placeholder=\"${esc(placeholder)}\"` : ''}\n        ${min ? `min=\"${esc(min)}\"` : ''} ${max ? `max=\"${esc(max)}\"` : ''} ${step ? `step=\"${esc(step)}\"` : ''}\n      />\n      ${useIconBox && iconPos === 'right' ? iconContent : ''}\n      ${useIconBox ? '</div>' : ''}\n      ${this.hasAttr('clearable') ? '<button type=\"button\" class=\"clear\" part=\"clear\" aria-label=\"Limpar\" tabindex=\"-1\">×</button></div>' : ''}\n    `);\n\n    const field = this.root.querySelector<HTMLInputElement>('.field');\n    if (!field) return;\n    field.value = this.getAttr('value');\n    if (disabled) field.setAttribute('disabled', '');\n    if (readonly) field.setAttribute('readonly', '');\n\n    const emit = (event: string): void => {\n      this.value = field.value;\n      // input (v-model do Vue) + valueChange ([(value)] do Angular).\n      this.emitValueEvents();\n      this.dispatchEvent(\n        new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } }),\n      );\n    };\n    // Bloqueia o evento nativo (composed, sem detail) para que só o\n    // CustomEvent com detail chegue aos consumidores.\n    field.addEventListener('input', (e) => { e.stopPropagation(); emit('input'); });\n    field.addEventListener('change', (e) => { e.stopPropagation(); emit('change'); });\n\n    // Enter submete o form: o <input> interno vive no Shadow DOM e NÃO se\n    // associa ao <form> do light DOM (a fronteira do shadow corta a associação\n    // por árvore) — por isso a submissão implícita é acionada manualmente.\n    // Ouvintes de submit no form (ex.: submit.prevent de frameworks) seguem\n    // recebendo o evento normalmente.\n    field.addEventListener('keydown', (e) => {\n      if (e.key !== 'Enter' || e.isComposing) return;\n      if (!this.form) return;\n      e.preventDefault();\n      this.form.requestSubmit();\n    });\n\n    // Clearable: botão × que limpa o campo e emite input/change vazios.\n    const clearBtn = this.root.querySelector<HTMLButtonElement>('.clear');\n    const syncClear = (): void => {\n      clearBtn?.toggleAttribute('hidden', field.value === '');\n    };\n    syncClear();\n    clearBtn?.addEventListener('click', () => {\n      field.value = '';\n      syncClear();\n      emit('input');\n      emit('change');\n      field.focus();\n    });\n    field.addEventListener('input', syncClear);\n\n    // Publica name/value no form (ElementInternals) a cada render — cobre o\n    // estado inicial e mudanças de atributos observados.\n    this.updateFormValue();\n  }\n\n  /** Empurra o atributo `value` para o campo interno sem re-renderizar. */\n  protected override syncInternalControl(): void {\n    const field = this.root.querySelector<HTMLInputElement>('.field');\n    const value = this.getAttr('value');\n    const type = this.type;\n    if (field && field.type !== type) field.type = type;\n    if (field && field.value !== value) field.value = value;\n  }\n}\n\nexport function defineFxInput(): typeof FxInput {\n  return defineElement('fx-input', FxInput);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/pagination/pagination.d.ts

@@ -6,6 +6,9 @@ import '../select';
  * Atributos: page (atual), total (itens), rows (por página), rows-options,
  * position (left|center|right).
  * Evento: `page-change` (composed, detail: { page, rows }).
+ *
+ * Com muitas páginas o pager usa janela deslizante com elipses
+ * (1 … 499 [500] 501 … 1000) em vez de um botão por página.
  */
 export declare class FxPagination extends FxElement {
     static styles: string;

package/dist/components/pagination/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C,OAAO,WAAW,CAAC;AAEnB;;;;;;GAMG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SAmDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAAmD;IACrE,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAA2C;IAC7D,IAAI,KAAK,IAAI,MAAM,CAAoD;IACvE,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAA4C;IAC/D,IAAI,IAAI,IAAI,MAAM,CAAqD;IACvE,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAA2C;IAE7D,OAAO,KAAK,KAAK,GAEhB;cAEkB,iBAAiB,IAAI,IAAI;cAOzB,MAAM,IAAI,IAAI;IAkDjC,OAAO,CAAC,IAAI;CAMb;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAO5C,OAAO,WAAW,CAAC;AAEnB;;;;;;;;;GASG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SAgEpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAAmD;IACrE,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAA2C;IAC7D,IAAI,KAAK,IAAI,MAAM,CAAoD;IACvE,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAA4C;IAC/D,IAAI,IAAI,IAAI,MAAM,CAAqD;IACvE,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAA2C;IAE7D,OAAO,KAAK,KAAK,GAEhB;cAEkB,iBAAiB,IAAI,IAAI;cAOzB,MAAM,IAAI,IAAI;IAkDjC,OAAO,CAAC,IAAI;CAMb;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}

package/dist/components/pagination/pagination.js

@@ -1,6 +1,7 @@
 import { FxElement } from "../../core/base.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
+import { pageRange } from "../../core/page-range.js";
 import { esc } from "../../core/sanitize.js";
 import { FENIX_ICON_BASE_CSS, fenixIconHtml } from "../../icons/base-css.js";
 import { loadFenixIconsFont } from "../../icons/font.js";
@@ -38,17 +39,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 ? `
@@ -56,9 +56,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);
@@ -90,6 +87,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);
@@ -127,6 +125,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) {

package/dist/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\nimport { loadFenixIconsFont } from '../../icons/font';\nimport '../select';\n\n/**\n * <fx-pagination> — Paginação standalone.\n *\n * Atributos: page (atual), total (itens), rows (por página), rows-options,\n * position (left|center|right).\n * Evento: `page-change` (composed, detail: { page, rows }).\n */\nexport class FxPagination extends FxElement {\n  static override styles = css`\n    ${FENIX_ICON_BASE_CSS}\n    :host {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      color: var(--fx-text-default);\n    }\n    :host([position='center']) { justify-content: center; }\n    :host([position='right']) { justify-content: flex-end; }\n    .nav {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--fx-size-sm);\n      height: var(--fx-size-sm);\n      border: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-background);\n      color: var(--fx-text-default);\n      font-family: inherit;\n      font-size: calc(var(--fx-font-size) - 2px);\n      border-radius: var(--fx-radius-sm);\n      cursor: pointer;\n      padding: 0 var(--fx-space-sm);\n      transition:\n        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    /* O glifo precisa de 1px a mais que o dígito: a altura de traço do ícone é\n       maior que a do número, então igualar os dois font-size deixa a seta\n       visivelmente maior que o texto. */\n    .nav .fx-icon { font-size: calc(var(--fx-font-size) - 1px); }\n    .nav:hover:not([disabled]):not(.active) { border-color: var(--fx-color-primary); color: var(--fx-color-primary); }\n    .nav[disabled] { opacity: 0.5; cursor: not-allowed; }\n    .nav.active {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n      color: #fff;\n      font-weight: 600;\n    }\n    .info { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); }\n    fx-select { vertical-align: middle; }\n    fx-select::part(trigger) {\n      min-width: 64px !important;\n      min-height: var(--fx-size-sm) !important;\n      padding: 0 var(--fx-space-sm) !important;\n      border-radius: var(--fx-radius-sm) !important;\n      font-size: calc(var(--fx-font-size) - 2px) !important;\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['page', 'total', 'rows', 'rows-options', 'position'];\n  }\n\n  get page(): number { return Number(this.getAttr('page', '1')) || 1; }\n  set page(v: number) { this.setAttribute('page', String(v)); }\n  get total(): number { return Number(this.getAttr('total', '0')) || 0; }\n  set total(v: number) { this.setAttribute('total', String(v)); }\n  get rows(): number { return Number(this.getAttr('rows', '10')) || 10; }\n  set rows(v: number) { this.setAttribute('rows', String(v)); }\n\n  private get pages(): number {\n    return Math.max(1, Math.ceil(this.total / this.rows));\n  }\n\n  protected override connectedCallback(): void {\n    // O pager usa glifos da Fenix Icons: garante o @font-face mesmo quando o\n    // app não importou `@wrrdev/fenix-ui/icons` (idempotente).\n    loadFenixIconsFont();\n    super.connectedCallback();\n  }\n\n  protected override render(): void {\n    const pages = this.pages;\n    const current = Math.min(Math.max(1, this.page), pages);\n    const opts = (this.getAttr('rows-options', '5,10,20,50') || '').split(',').map((s) => s.trim()).filter(Boolean);\n\n    // Janela de páginas: mostra até 5 com elipses simplificada\n    const window_: number[] = [];\n    for (let p = Math.max(1, current - 2); p <= Math.min(pages, current + 2); p++) window_.push(p);\n\n    const from = total0(current, this.rows);\n    const to = Math.min(current * this.rows, this.total);\n\n    this.setTemplate(`\n      <span class=\"info\">${this.total ? `${from}-${to} de ${this.total}` : '0 itens'}</span>\n      <button type=\"button\" class=\"nav\" part=\"first\" aria-label=\"Primeira página\" data-go=\"1\" ${current <= 1 ? 'disabled' : ''}>${fenixIconHtml('first_page')}</button>\n      <button type=\"button\" class=\"nav\" part=\"prev\" aria-label=\"Página anterior\" data-go=\"${current - 1}\" ${current <= 1 ? 'disabled' : ''}>${fenixIconHtml('navigate_before')}</button>\n      ${window_[0] !== 1 && pages > 5 ? `<button type=\"button\" class=\"nav\" data-go=\"1\">1</button>` : ''}\n      ${window_.map((p) => `<button type=\"button\" class=\"nav ${p === current ? 'active' : ''}\" data-go=\"${p}\">${p}</button>`).join('')}\n      ${window_[window_.length - 1] !== pages && pages > 5 ? `<button type=\"button\" class=\"nav\" data-go=\"${pages}\">${pages}</button>` : ''}\n      <button type=\"button\" class=\"nav\" part=\"next\" aria-label=\"Próxima página\" data-go=\"${current + 1}\" ${current >= pages ? 'disabled' : ''}>${fenixIconHtml('navigate_next')}</button>\n      <button type=\"button\" class=\"nav\" part=\"last\" aria-label=\"Última página\" data-go=\"${pages}\" ${current >= pages ? 'disabled' : ''}>${fenixIconHtml('last_page')}</button>\n      ${opts.length ? `\n        <fx-select class=\"rows-sel\" part=\"rows\" size=\"sm\" value=\"${this.rows}\" aria-label=\"Itens por página\">\n          ${opts.map((o) => `<option value=\"${esc(o)}\">${esc(o)}</option>`).join('')}\n        </fx-select>` : ''}\n    `);\n\n    function total0(page: number, rows: number): number {\n      return (page - 1) * rows + 1;\n    }\n\n    this.root.querySelectorAll<HTMLButtonElement>('.nav[data-go]').forEach((btn) => {\n      btn.addEventListener('click', () => {\n        const target = Number(btn.dataset.go);\n        if (target >= 1 && target <= pages && target !== current) {\n          this.page = target;\n          this.emit();\n        }\n      });\n    });\n    const sel = this.root.querySelector<HTMLElement>('fx-select.rows-sel');\n    sel?.addEventListener('change', (e) => {\n      const value = Number((e as CustomEvent).detail?.value);\n      if (!value || value === this.rows) return;\n      this.rows = value;\n      this.page = 1;\n      this.emit();\n    });\n  }\n\n  private emit(): void {\n    this.dispatchEvent(new CustomEvent('page-change', {\n      bubbles: true, composed: true,\n      detail: { page: this.page, rows: this.rows },\n    }));\n  }\n}\n\nexport function defineFxPagination(): typeof FxPagination {\n  return defineElement('fx-pagination', FxPagination);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { pageRange } from '../../core/page-range';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\nimport { loadFenixIconsFont } from '../../icons/font';\nimport '../select';\n\n/**\n * <fx-pagination> — Paginação standalone.\n *\n * Atributos: page (atual), total (itens), rows (por página), rows-options,\n * position (left|center|right).\n * Evento: `page-change` (composed, detail: { page, rows }).\n *\n * Com muitas páginas o pager usa janela deslizante com elipses\n * (1 … 499 [500] 501 … 1000) em vez de um botão por página.\n */\nexport class FxPagination extends FxElement {\n  static override styles = css`\n    ${FENIX_ICON_BASE_CSS}\n    :host {\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: var(--fx-space-sm);\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      color: var(--fx-text-default);\n    }\n    :host([position='center']) { justify-content: center; }\n    :host([position='right']) { justify-content: flex-end; }\n    .nav {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--fx-size-sm);\n      height: var(--fx-size-sm);\n      border: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-background);\n      color: var(--fx-text-default);\n      font-family: inherit;\n      font-size: calc(var(--fx-font-size) - 2px);\n      border-radius: var(--fx-radius-sm);\n      cursor: pointer;\n      padding: 0 var(--fx-space-sm);\n      transition:\n        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    /* O glifo precisa de 1px a mais que o dígito: a altura de traço do ícone é\n       maior que a do número, então igualar os dois font-size deixa a seta\n       visivelmente maior que o texto. */\n    .nav .fx-icon { font-size: calc(var(--fx-font-size) - 1px); }\n    .nav:hover:not([disabled]):not(.active) { border-color: var(--fx-color-primary); color: var(--fx-color-primary); }\n    .nav[disabled] { opacity: 0.5; cursor: not-allowed; }\n    .nav.active {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n      color: #fff;\n      font-weight: 600;\n    }\n    /* Elipse entre a janela de páginas e as bordas: ocupa o mesmo espaço de\n       um botão (para o rodapé não \"pular\" ao navegar) mas não é clicável. */\n    .ellipsis {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--fx-size-sm);\n      height: var(--fx-size-sm);\n      color: var(--fx-text-muted);\n      font-size: calc(var(--fx-font-size) - 2px);\n      user-select: none;\n    }\n    .info { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); }\n    fx-select { vertical-align: middle; }\n    fx-select::part(trigger) {\n      min-width: 64px !important;\n      min-height: var(--fx-size-sm) !important;\n      padding: 0 var(--fx-space-sm) !important;\n      border-radius: var(--fx-radius-sm) !important;\n      font-size: calc(var(--fx-font-size) - 2px) !important;\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['page', 'total', 'rows', 'rows-options', 'position'];\n  }\n\n  get page(): number { return Number(this.getAttr('page', '1')) || 1; }\n  set page(v: number) { this.setAttribute('page', String(v)); }\n  get total(): number { return Number(this.getAttr('total', '0')) || 0; }\n  set total(v: number) { this.setAttribute('total', String(v)); }\n  get rows(): number { return Number(this.getAttr('rows', '10')) || 10; }\n  set rows(v: number) { this.setAttribute('rows', String(v)); }\n\n  private get pages(): number {\n    return Math.max(1, Math.ceil(this.total / this.rows));\n  }\n\n  protected override connectedCallback(): void {\n    // O pager usa glifos da Fenix Icons: garante o @font-face mesmo quando o\n    // app não importou `@wrrdev/fenix-ui/icons` (idempotente).\n    loadFenixIconsFont();\n    super.connectedCallback();\n  }\n\n  protected override render(): void {\n    const pages = this.pages;\n    const current = Math.min(Math.max(1, this.page), pages);\n    const opts = (this.getAttr('rows-options', '5,10,20,50') || '').split(',').map((s) => s.trim()).filter(Boolean);\n\n    // Janela de páginas: primeira + última + vizinhas da atual, com elipse no\n    // miolo. Mantém o pager compacto mesmo com milhares de páginas.\n    const pageButtons = pageRange(current, pages)\n      .map((item) =>\n        item === 'ellipsis'\n          ? `<span class=\"ellipsis\" part=\"ellipsis\" aria-hidden=\"true\">…</span>`\n          : `<button type=\"button\" class=\"nav ${item === current ? 'active' : ''}\" part=\"page\" data-go=\"${item}\"${item === current ? ' aria-current=\"page\"' : ''}>${item}</button>`,\n      )\n      .join('');\n\n    const from = (current - 1) * this.rows + 1;\n    const to = Math.min(current * this.rows, this.total);\n\n    this.setTemplate(`\n      <span class=\"info\">${this.total ? `${from}-${to} de ${this.total}` : '0 itens'}</span>\n      <button type=\"button\" class=\"nav\" part=\"first\" aria-label=\"Primeira página\" data-go=\"1\" ${current <= 1 ? 'disabled' : ''}>${fenixIconHtml('first_page')}</button>\n      <button type=\"button\" class=\"nav\" part=\"prev\" aria-label=\"Página anterior\" data-go=\"${current - 1}\" ${current <= 1 ? 'disabled' : ''}>${fenixIconHtml('navigate_before')}</button>\n      ${pageButtons}\n      <button type=\"button\" class=\"nav\" part=\"next\" aria-label=\"Próxima página\" data-go=\"${current + 1}\" ${current >= pages ? 'disabled' : ''}>${fenixIconHtml('navigate_next')}</button>\n      <button type=\"button\" class=\"nav\" part=\"last\" aria-label=\"Última página\" data-go=\"${pages}\" ${current >= pages ? 'disabled' : ''}>${fenixIconHtml('last_page')}</button>\n      ${opts.length ? `\n        <fx-select class=\"rows-sel\" part=\"rows\" size=\"sm\" value=\"${this.rows}\" aria-label=\"Itens por página\">\n          ${opts.map((o) => `<option value=\"${esc(o)}\">${esc(o)}</option>`).join('')}\n        </fx-select>` : ''}\n    `);\n\n    this.root.querySelectorAll<HTMLButtonElement>('.nav[data-go]').forEach((btn) => {\n      btn.addEventListener('click', () => {\n        const target = Number(btn.dataset.go);\n        if (target >= 1 && target <= pages && target !== current) {\n          this.page = target;\n          this.emit();\n        }\n      });\n    });\n    const sel = this.root.querySelector<HTMLElement>('fx-select.rows-sel');\n    sel?.addEventListener('change', (e) => {\n      const value = Number((e as CustomEvent).detail?.value);\n      if (!value || value === this.rows) return;\n      this.rows = value;\n      this.page = 1;\n      this.emit();\n    });\n  }\n\n  private emit(): void {\n    this.dispatchEvent(new CustomEvent('page-change', {\n      bubbles: true, composed: true,\n      detail: { page: this.page, rows: this.rows },\n    }));\n  }\n}\n\nexport function defineFxPagination(): typeof FxPagination {\n  return defineElement('fx-pagination', FxPagination);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAO5C,OAAO,WAAW,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACrC,OAAgB,MAAM,SAkRpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAoBjD;IAED,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,MAAM,CAAC,CAAS;IACxB,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,eAAe,CAAC,CAAmB;IAE3C,IAAI,IAAI,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAEpC;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAGxC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAED,IAAI,WAAW,IAAI,MAAM,CAGxB;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,EAE5B;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,OAAO,KAAK,OAAO,GAuBlB;IAED;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,oBAAoB;IAW5B,OAAO,KAAK,eAAe,GAU1B;IAED;;;;OAIG;IACH,OAAO,CAAC,WAAW;cAeA,iBAAiB,IAAI,IAAI;cAWzB,oBAAoB,IAAI,IAAI;IAK/C,+EAA+E;IAC/E,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,WAAW;IAiDnB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,QAAQ;IAahB;;;;;;;OAOG;IACH,OAAO,CAAC,SAAS,CAAM;cAEJ,MAAM,IAAI,IAAI;IAkOjC;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,qBAAqB;CAM7B;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAQ5C,OAAO,WAAW,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACrC,OAAgB,MAAM,SA+RpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAoBjD;IAED,OAAO,CAAC,KAAK,CAAiC;IAC9C,OAAO,CAAC,MAAM,CAAC,CAAS;IACxB,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,OAAO,CAA8B;IAC7C,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,eAAe,CAAC,CAAmB;IAE3C,IAAI,IAAI,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAEpC;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAGxC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAGtB;IAED,IAAI,WAAW,IAAI,MAAM,CAGxB;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,EAE5B;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,OAAO,KAAK,OAAO,GAuBlB;IAED;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,OAAO,CAAC,oBAAoB;IAW5B,OAAO,KAAK,eAAe,GAU1B;IAED;;;;OAIG;IACH,OAAO,CAAC,WAAW;cAeA,iBAAiB,IAAI,IAAI;cAWzB,oBAAoB,IAAI,IAAI;IAK/C,+EAA+E;IAC/E,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,WAAW;IAiDnB,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,QAAQ;IAahB;;;;;;;OAOG;IACH,OAAO,CAAC,SAAS,CAAM;cAEJ,MAAM,IAAI,IAAI;IA4OjC;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,qBAAqB;CAM7B;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}

package/dist/components/table/table.js

@@ -1,6 +1,7 @@
 import { FxElement } from "../../core/base.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
+import { pageRange } from "../../core/page-range.js";
 import { esc } from "../../core/sanitize.js";
 import { FENIX_ICON_BASE_CSS, fenixIconHtml } from "../../icons/base-css.js";
 import { loadFenixIconsFont } from "../../icons/font.js";
@@ -238,12 +239,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:")}
@@ -599,7 +603,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);
 		}
@@ -607,12 +611,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