@wrrdev/fenix-ui 1.1.10 → 1.1.12

package/README.md

@@ -18,7 +18,7 @@ import { FenixUI } from '@wrrdev/fenix-ui';  // API de tema/tokens (índice)
 FenixUI.theme('dark');
 ```
 
-> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.1.10**, acesso público.
+> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.1.12**, acesso público.
 > Subpaths disponíveis: `./theme`, `./tokens`, `./jsx`, `./vue`, `./react`, `./button`, `./badge`, `./spinner`, `./select`, `./input`, `./switch`, `./textarea`, `./checkbox`, `./radio`, `./calendar`, `./datepicker`, `./multiselect`, `./table`, `./floatlabel`, `./dialog`, `./toast`, `./tooltip`, `./tabs`, `./progress`, `./skeleton`, `./alert`, `./drawer`, `./dropdown`, `./icon`, `./icons`, `./pagination`, `./autocomplete`, `./knob`, `./orderlist`, `./picklist`, `./auto-import` e o curinga `./components/*`.
 
 
@@ -65,7 +65,7 @@ Carregue o bundle **UMD** único: ele registra todos os componentes e expõe os
 <fx-toast></fx-toast>
 
 <!--
-  🔗 Links diretos para CDN (versão 1.1.10):
+  🔗 Links diretos para CDN (versão 1.1.12):
   • https://cdn.jsdelivr.net/npm/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
   • https://unpkg.com/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
 -->
@@ -349,6 +349,24 @@ Requisitos:
 - Volar / vue-tsc (já incluído no `@vue/language-tools` usado pelo VS Code + Volar);
 - no `tsconfig`, `"moduleResolution": "bundler"`.
 
+#### Reduzindo o peso da fonte de ícones (opcional)
+
+A fonte embarca **todos** os ~4.300 glifos, o que dá ~5 MB. Ela já usa
+`font-display: swap` (o ícone aparece na hora com a fonte de fallback — nunca
+mais a tela em branco esperando o download). Se o seu app usa apenas algumas
+dezenas de ícones, gere um *subset* e aponte a biblioteca para ele:
+
+```ts
+import { setFenixIconsFontUrl } from '@wrrdev/fenix-ui/icons';
+
+setFenixIconsFontUrl('/fonts/fenix-icons-subset.woff2');
+```
+
+Isso derruba a fonte para algumas dezenas de KB. **A tipagem não muda**:
+`FenixIconName` continua sugerindo todos os nomes no editor — garanta apenas
+que o subset contenha os glifos que o app usa. Chame a função antes do primeiro
+`<fx-icon>` ser montado; use `setFenixIconsFontUrl('')` para voltar ao padrão.
+
 Com isso o editor mostra as propriedades de cada componente (`variant`, `size`, `loading`, …)
 nos templates. Para além do autocomplete, **validar** valores inválidos (ex.: `variant="foo"`),
 ative o modo estrito do Volar no `tsconfig.json`:

package/dist/assets/{font-CF0TXsAP.js → font-DPeWTz-n.js}

@@ -69,26 +69,69 @@ function resolveFontUrl() {
   return new URL("" + new URL("fenix-icons-DmgotBzD.woff2", import.meta.url).href, import.meta.url).toString();
 }
 const FENIX_ICONS_FONT_URL = resolveFontUrl();
+function setFenixIconsFontUrl(url) {
+  const next = url.trim() || void 0;
+  if (fontUrlOverride === next) return;
+  fontUrlOverride = next;
+  const target = typeof document !== "undefined" ? document : void 0;
+  if (!target) return;
+  const hadFull = !!target.getElementById(FENIX_ICONS_STYLE_ID);
+  const hadFont = !!target.getElementById(FENIX_ICONS_FONT_STYLE_ID);
+  resetInjectedStyles(target);
+  if (hadFull) reinjectFull(target, fullNamesRef);
+  if (hadFont) injectFontStyle(target);
+}
+let fullNamesRef = [];
+function __setFenixIconNames(names) {
+  fullNamesRef = names;
+}
+let fontUrlOverride;
+function currentFontUrl() {
+  return fontUrlOverride ?? FENIX_ICONS_FONT_URL;
+}
 const FENIX_ICONS_FONT_STYLE_ID = "fenix-icons-font";
 const FENIX_ICONS_STYLE_ID = "fenix-icons";
 function buildFenixIconsFontFaceCss() {
-  return `@font-face{font-family:'${FENIX_ICON_FONT_FAMILY}';font-style:normal;font-weight:100 700;font-display:block;src:url('${FENIX_ICONS_FONT_URL}') format('woff2');}`;
+  return `@font-face{font-family:'${FENIX_ICON_FONT_FAMILY}';font-style:normal;font-weight:100 700;font-display:swap;src:url('${currentFontUrl()}') format('woff2');}`;
 }
 function buildFenixIconsFontCss() {
   return buildFenixIconsFontFaceCss() + FENIX_ICON_BASE_CSS;
 }
+function buildFullCss(names) {
+  let rules = "";
+  for (const name of names) {
+    rules += `.fx-icon-${name}::before{content:"${name}"}`;
+  }
+  return buildFenixIconsFontFaceCss() + FENIX_ICON_BASE_CSS + rules;
+}
 let fontInjected = false;
+function resetInjectedStyles(target = typeof document !== "undefined" ? document : void 0) {
+  fontInjected = false;
+  if (!target) return;
+  target.getElementById(FENIX_ICONS_FONT_STYLE_ID)?.remove();
+  target.getElementById(FENIX_ICONS_STYLE_ID)?.remove();
+}
+function injectFontStyle(target) {
+  const style = target.createElement("style");
+  style.id = FENIX_ICONS_FONT_STYLE_ID;
+  style.textContent = buildFenixIconsFontCss();
+  target.head.appendChild(style);
+  fontInjected = true;
+}
+function reinjectFull(target, names) {
+  if (target.getElementById(FENIX_ICONS_STYLE_ID)) return;
+  const style = target.createElement("style");
+  style.id = FENIX_ICONS_STYLE_ID;
+  style.textContent = buildFullCss(names);
+  target.head.appendChild(style);
+}
 function loadFenixIconsFont(target = typeof document !== "undefined" ? document : void 0) {
   if (fontInjected || !target) return;
   if (target.getElementById(FENIX_ICONS_STYLE_ID)) {
     fontInjected = true;
     return;
   }
-  const style = target.createElement("style");
-  style.id = FENIX_ICONS_FONT_STYLE_ID;
-  style.textContent = buildFenixIconsFontCss();
-  target.head.appendChild(style);
-  fontInjected = true;
+  injectFontStyle(target);
 }
 function __resetFenixIconsFontInjection() {
   fontInjected = false;
@@ -97,14 +140,16 @@ export {
   FENIX_ICONS_STYLE_ID as F,
   __resetFenixIconsFontInjection as _,
   FENIX_ICON_BASE_CSS as a,
-  buildFenixIconsFontFaceCss as b,
-  FENIX_ICON_FONT_FAMILY as c,
-  buildFenixIconsFontCss as d,
-  esc as e,
+  buildFullCss as b,
+  __setFenixIconNames as c,
+  FENIX_ICON_FONT_FAMILY as d,
+  buildFenixIconsFontCss as e,
   fenixIconHtml as f,
-  stripTags as g,
+  esc as g,
+  sanitizeData as h,
   isFenixIconName as i,
+  stripTags as j,
   loadFenixIconsFont as l,
-  sanitizeData as s
+  setFenixIconsFontUrl as s
 };
-//# sourceMappingURL=font-CF0TXsAP.js.map
+//# sourceMappingURL=font-DPeWTz-n.js.map

package/dist/assets/font-DPeWTz-n.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-DPeWTz-n.js","sources":["../../src/core/sanitize.ts","../../src/icons/base-css.ts","../../src/icons/font.ts"],"sourcesContent":["/**\n * Sanitização de strings para injeção segura em HTML.\n *\n * Previne XSS ao escapar caracteres especiais antes de usar innerHTML.\n * Use SEMPRE que dados externos (API, usuário) forem injetados no DOM.\n */\n\n/** Caracteres que devem ser escapados para prevenir XSS. */\nconst HTML_ENTITIES: Record<string, string> = {\n  '&': '&amp;',\n  '<': '&lt;',\n  '>': '&gt;',\n  '\"': '&quot;',\n  \"'\": '&#39;',\n  '/': '&#x2F;',\n  '`': '&#x60;',\n  '=': '&#x3D;',\n};\n\n/** Regex que captura todos os caracteres perigosos. */\nconst SANITIZE_REGEX = /[&<>\"'`=/]/g;\n\n/**\n * Escapa caracteres especiais de HTML para prevenir XSS.\n *\n * @param value - Valor a ser escapado (convertido para string)\n * @returns String segura para innerHTML\n *\n * @example\n * // Seguro contra XSS\n * const userInput = '<img src=x onerror=alert(1)>';\n * element.innerHTML = `<div>${esc(userInput)}</div>`;\n * // Resultado: &lt;img src=x onerror=alert(1)&gt;\n */\nexport function esc(value: unknown): string {\n  if (value == null) return '';\n  return String(value).replace(SANITIZE_REGEX, (char) => HTML_ENTITIES[char] || char);\n}\n\n/**\n * Remove todas as tags HTML da string (strip tags).\n * Use quando quiser apenas texto puro, sem nenhuma marcação.\n *\n * @param html - String potencialmente contendo HTML\n * @returns String sem tags HTML\n */\nexport function stripTags(html: string): string {\n  return html.replace(/<[^>]*>/g, '');\n}\n\n/**\n * Sanitiza um objeto de dados recursivamente.\n * Útil para sanitizar arrays de registros antes de renderizar.\n *\n * @param data - Objeto ou array a ser sanitizado\n * @returns Cópia sanitizada do objeto\n */\nexport function sanitizeData<T>(data: T): T {\n  if (data == null) return data;\n  if (typeof data === 'string') return esc(data) as unknown as T;\n  if (Array.isArray(data)) return data.map(sanitizeData) as unknown as T;\n  if (typeof data === 'object') {\n    const result: Record<string, unknown> = {};\n    for (const [key, value] of Object.entries(data as Record<string, unknown>)) {\n      result[key] = sanitizeData(value);\n    }\n    return result as T;\n  }\n  return data;\n}\n","/**\n * CSS base da biblioteca de ícones — módulo LEVE (não importa a lista de nomes\n * nem dispara o carregamento da fonte). Usado dentro dos Shadow DOMs dos\n * componentes que suportam o atributo `icon`.\n *\n * O @font-face em si é injetado no <head> por `@wrrdev/fenix-ui/icons`\n * (ver ./index.ts) — @font-face registrado no documento também se aplica\n * dentro dos Shadow DOMs.\n */\n\nimport { esc } from '../core/sanitize';\n\n/** Nome da família de fontes dos ícones (self-hosted, sem dependência externa). */\nexport const FENIX_ICON_FONT_FAMILY = 'Fenix Icons';\n\n/** Família configurável via CSS custom property (fallback para o nome padrão). */\nexport const FENIX_ICON_FONT_VAR = `var(--fx-icon-font, ${FENIX_ICON_FONT_FAMILY})`;\n\n/**\n * Regras da classe `.fx-icon` para uso DENTRO de Shadow DOM\n * (concatene às `static styles` do componente).\n */\nexport const FENIX_ICON_BASE_CSS = `\n.fx-icon {\n  font-family: ${FENIX_ICON_FONT_VAR};\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  user-select: none;\n}\n.fx-icon.fx-icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }\n.fx-icon.fx-icon-bold { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }\n`;\n\n/** Verifica se o valor parece um nome de ícone da Fenix Icons (e não emoji/texto livre). */\nexport function isFenixIconName(value: string): boolean {\n  return /^[a-z][a-z0-9_]*$/.test(value.trim());\n}\n\n/**\n * HTML do ícone para uso DENTRO de Shadow DOM (concatenar ao template).\n *\n * - Nome válido da Fenix Icons (ex.: `home`) → glifo via LIGADURA: o nome\n *   vira o conteúdo de texto do elemento com a font-family de ícones.\n *   Isso é obrigatório dentro de Shadow DOM: as regras\n *   `.fx-icon-<nome>::before` são injetadas no <head> do documento e NÃO\n *   atravessam a fronteira do shadow root (apenas o @font-face vale\n *   dentro dele) — a classe vazia renderizaria um elemento sem glifo.\n * - Qualquer outro valor (emoji, texto) → texto puro escapado.\n *\n * A classe base `.fx-icon` é fornecida por `FENIX_ICON_BASE_CSS`\n * (concatenada às `static styles` do componente); o @font-face vem do\n * `@wrrdev/fenix-ui/icons` (injetado no <head>).\n */\nexport function fenixIconHtml(icon: string): string {\n  const value = (icon ?? '').trim();\n  if (!value) return '';\n  if (isFenixIconName(value)) {\n    return `<i class=\"fx-icon\" aria-hidden=\"true\">${value}</i>`;\n  }\n  return `<span aria-hidden=\"true\">${esc(value)}</span>`;\n}\n","/**\n * Carregamento LEVE da fonte de ícones (@font-face + classe base).\n *\n * Separado de ./index de propósito: importar este módulo NÃO injeta o CSS\n * completo com as ~4.300 regras `fx-icon-<nome>`. É o que o <fx-icon> usa —\n * dentro do Shadow DOM o glifo vem da ligadura (o nome como conteúdo), então\n * as classes por ícone não atravessam a fronteira do shadow root.\n */\n\nimport { FENIX_ICON_BASE_CSS, FENIX_ICON_FONT_FAMILY } from './base-css';\n\n/** URL da fonte woff2: no build ESM a fonte vive na mesma pasta do módulo (dist/icons). */\ndeclare const __FENIX_ICONS_FONT_URL__: string | undefined;\n\nfunction resolveFontUrl(): string {\n  if (typeof __FENIX_ICONS_FONT_URL__ !== 'undefined' && __FENIX_ICONS_FONT_URL__) {\n    return __FENIX_ICONS_FONT_URL__;\n  }\n  // IMPORTANTE: o `import.meta.url` precisa ser usado DIRETAMENTE como 2º\n  // argumento de `new URL` (sem variável intermediária). É assim que Vite,\n  // webpack e Rollup reconhecem o padrão de asset e copiam/reescrevem a URL\n  // da fonte no build do PROJETO CONSUMIDOR — com variável, a URL permanece\n  // dinâmica e quebra em produção (a fonte 404 e os ícones viram texto).\n  return new URL('./fenix-icons.woff2', import.meta.url).toString();\n}\n\n/** URL resolvida da fonte (reutilizada por ./index para o CSS completo). */\nexport const FENIX_ICONS_FONT_URL = resolveFontUrl();\n\n/**\n * Sobrescreve a URL da fonte em tempo de execução.\n *\n * Use para apontar para um SUBSET próprio (só os glifos que o app usa), o que\n * derruba a fonte de ~5 MB para algumas dezenas de KB:\n *\n *   import { setFenixIconsFontUrl } from '@wrrdev/fenix-ui/icons';\n *   setFenixIconsFontUrl('/fonts/fenix-icons-subset.woff2');\n *\n * Deve ser chamado ANTES do primeiro `loadFenixIcons()`/`loadFenixIconsFont()`\n * (ou de `<fx-icon>` ser montado). A tipagem dos ícones não muda: continua\n * valendo a lista completa de `FenixIconName` — o subset precisa conter os\n * glifos que você realmente usa. Passe `''` para voltar à URL do build.\n */\nexport function setFenixIconsFontUrl(url: string): void {\n  const next = url.trim() || undefined;\n  if (fontUrlOverride === next) return;\n  fontUrlOverride = next;\n  // O CSS já injetado embute a URL antiga: remove e reinjeta com a nova,\n  // senão a troca não teria efeito em apps que já carregaram a fonte.\n  const target = typeof document !== 'undefined' ? document : undefined;\n  if (!target) return;\n  const hadFull = !!target.getElementById(FENIX_ICONS_STYLE_ID);\n  const hadFont = !!target.getElementById(FENIX_ICONS_FONT_STYLE_ID);\n  resetInjectedStyles(target);\n  if (hadFull) reinjectFull(target, fullNamesRef);\n  if (hadFont) injectFontStyle(target);\n}\n\n/**\n * Nomes registrados por ./index, usados só se for preciso recriar o CSS\n * completo. Evita que ./font dependa da lista de ~4.300 nomes.\n */\nlet fullNamesRef: readonly string[] = [];\n\n/** Informa os nomes disponíveis para a reinjeção do CSS completo. */\nexport function __setFenixIconNames(names: readonly string[]): void {\n  fullNamesRef = names;\n}\n\nlet fontUrlOverride: string | undefined;\n\n/** URL efetiva: a sobrescrita em runtime tem prioridade sobre a do build. */\nfunction currentFontUrl(): string {\n  return fontUrlOverride ?? FENIX_ICONS_FONT_URL;\n}\n\n/** Id do <style> com @font-face + classe base. */\nexport const FENIX_ICONS_FONT_STYLE_ID = 'fenix-icons-font';\n\n/** Id do <style> com o CSS completo (@font-face + base + classes por ícone). */\nexport const FENIX_ICONS_STYLE_ID = 'fenix-icons';\n\n/** CSS do @font-face. */\nexport function buildFenixIconsFontFaceCss(): string {\n  return (\n    `@font-face{font-family:'${FENIX_ICON_FONT_FAMILY}';font-style:normal;font-weight:100 700;` +\n    // `swap` (e não `block`): com `block` o texto fica INVISÍVEL até a fonte\n    // baixar — em 3G/4G isso vira tela branca por vários segundos. `swap`\n    // mostra o glifo de fallback imediatamente e troca quando a fonte chega.\n    `font-display:swap;src:url('${currentFontUrl()}') format('woff2');}`\n  );\n}\n\n/** CSS leve: @font-face + classe base (sem as classes por ícone). */\nexport function buildFenixIconsFontCss(): string {\n  return buildFenixIconsFontFaceCss() + FENIX_ICON_BASE_CSS;\n}\n\n/**\n * CSS completo (@font-face + base + uma regra por ícone), com a URL de fonte\n * vigente. Vive aqui (e não só em ./index) para que `setFenixIconsFontUrl`\n * consiga recriar o estilo completo sem importar outro módulo.\n */\nexport function buildFullCss(names: readonly string[]): string {\n  let rules = '';\n  for (const name of names) {\n    rules += `.fx-icon-${name}::before{content:\"${name}\"}`;\n  }\n  return buildFenixIconsFontFaceCss() + FENIX_ICON_BASE_CSS + rules;\n}\n\nlet fontInjected = false;\n\n/**\n * Remove os <style> de ícones já injetados, para reinjetar com outra URL.\n * Usado por `setFenixIconsFontUrl`.\n */\nfunction resetInjectedStyles(\n  target: Document | undefined = typeof document !== 'undefined' ? document : undefined,\n): void {\n  fontInjected = false;\n  if (!target) return;\n  target.getElementById(FENIX_ICONS_FONT_STYLE_ID)?.remove();\n  target.getElementById(FENIX_ICONS_STYLE_ID)?.remove();\n}\n\n/** Cria e anexa o <style> leve (@font-face + classe base) no <head>. */\nfunction injectFontStyle(target: Document): void {\n  const style = target.createElement('style');\n  style.id = FENIX_ICONS_FONT_STYLE_ID;\n  style.textContent = buildFenixIconsFontCss();\n  target.head.appendChild(style);\n  fontInjected = true;\n}\n\n/**\n * Reinjeta o CSS completo (o de `./index`).\n *\n * Fica aqui para que a troca de URL da fonte recrie o estilo. Não usa o flag\n * `injected` de ./index: o <style> antigo já foi removido do DOM, então\n * recriá-lo aqui é sempre seguro e evita depender do estado de outro módulo.\n */\nfunction reinjectFull(target: Document, names: readonly string[]): void {\n  if (target.getElementById(FENIX_ICONS_STYLE_ID)) return;\n  const style = target.createElement('style');\n  style.id = FENIX_ICONS_STYLE_ID;\n  style.textContent = buildFullCss(names);\n  target.head.appendChild(style);\n}\n\n/**\n * Injeta @font-face + classe base no <head> (idempotente). Não duplica quando\n * o CSS completo (`fenix-icons`) já foi carregado por `import '.../icons'`.\n */\nexport function loadFenixIconsFont(\n  target: Document | undefined = typeof document !== 'undefined' ? document : undefined,\n): void {\n  if (fontInjected || !target) return;\n  if (target.getElementById(FENIX_ICONS_STYLE_ID)) {\n    fontInjected = true;\n    return;\n  }\n  injectFontStyle(target);\n}\n\n/** Reseta o estado de injeção da fonte (uso interno/testes). */\nexport function __resetFenixIconsFontInjection(): void {\n  fontInjected = false;\n}"],"names":[],"mappings":"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"}

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -28,7 +28,11 @@ export declare class FxBreadcrumb extends FxElement {
      */
     private _decorateItems;
     private _items;
+    /** Observer de upgrade dos filhos; precisa ser solto no disconnect. */
+    private _childObserver?;
     protected connectedCallback(): void;
+    /** Desconecta o observer de filhos (evita trabalho eterno após o connect). */
+    private _stopObservingChildren;
     protected disconnectedCallback(): void;
 }
 export declare function defineFxBreadcrumb(): typeof FxBreadcrumb;

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SAuCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;IAUjC;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IA4BtB,OAAO,CAAC,MAAM,CAAiB;cAEZ,iBAAiB,IAAI,IAAI;cAczB,oBAAoB,IAAI,IAAI;CAIhD;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;;;;;;;;GAgBG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SAuCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;IAUjC;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IA4BtB,OAAO,CAAC,MAAM,CAAiB;IAC/B,uEAAuE;IACvE,OAAO,CAAC,cAAc,CAAC,CAAmB;cAEvB,iBAAiB,IAAI,IAAI;IAkB5C,8EAA8E;IAC9E,OAAO,CAAC,sBAAsB;cAKX,oBAAoB,IAAI,IAAI;CAKhD;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -50,14 +50,24 @@ const _FxBreadcrumb = class _FxBreadcrumb extends FxElement {
     super.connectedCallback();
     const obs = new MutationObserver(() => {
       if (this.children.length > 0) {
-        obs.disconnect();
+        this._stopObservingChildren();
         this._decorateItems();
       }
     });
+    this._childObserver = obs;
     obs.observe(this, { childList: true });
-    if (this.children.length > 0) this._decorateItems();
+    if (this.children.length > 0) {
+      this._stopObservingChildren();
+      this._decorateItems();
+    }
+  }
+  /** Desconecta o observer de filhos (evita trabalho eterno após o connect). */
+  _stopObservingChildren() {
+    this._childObserver?.disconnect();
+    this._childObserver = void 0;
   }
   disconnectedCallback() {
+    this._stopObservingChildren();
     super.disconnectedCallback();
     this._items = [];
   }

package/dist/components/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-breadcrumb> — Trilha de navegação hierárquica.\n *\n * Atributos: size (sm|md|lg), separator (glifo entre itens, padrão '/'),\n * label (acessibilidade, padrão 'Breadcrumb').\n * Slots: `item` (repetível — cada <fx-breadcrumb-item> ou elemento com\n * [slot=\"item\"] vira um passo) e `separator` (customiza o separador).\n *\n * Marcação declarativa recomendada:\n *   <fx-breadcrumb>\n *     <fx-breadcrumb-item href=\"/\">Home</fx-breadcrumb-item>\n *     <fx-breadcrumb-item href=\"/produtos\">Produtos</fx-breadcrumb-item>\n *     <fx-breadcrumb-item>Detalhe</fx-breadcrumb-item>\n *   </fx-breadcrumb>\n *\n * Eventos (composed): `select` (detail: { item, index }) ao clicar num item.\n */\nexport class FxBreadcrumb extends FxElement {\n  static override styles = css`\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    nav {\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: var(--fx-space-xs);\n    }\n    :host([size='sm']) nav { font-size: calc(var(--fx-font-size) - 2px); }\n    :host([size='lg']) nav { font-size: calc(var(--fx-font-size) + 2px); }\n\n    /* itens (movidos para o nav no shadow DOM) */\n    nav [slot='item'] {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-xs);\n      color: var(--fx-text-muted);\n      text-decoration: none;\n      cursor: pointer;\n      transition: color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    nav [slot='item']:hover { color: var(--fx-color-primary); }\n    nav [slot='item'][aria-current='page'] {\n      color: var(--fx-text-default);\n      font-weight: 600;\n      cursor: default;\n    }\n    nav [slot='item'][aria-current='page']:hover { color: var(--fx-text-default); }\n\n    .sep {\n      color: var(--fx-text-muted);\n      user-select: none;\n      display: inline-flex;\n      align-items: center;\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['size', 'separator', 'label'];\n  }\n\n  protected override render(): void {\n    const label = this.getAttr('label', 'Breadcrumb');\n\n    this.setTemplate(`\n      <nav part=\"nav\" aria-label=\"${esc(label)}\"></nav>\n    `);\n\n    this._decorateItems();\n  }\n\n  /**\n   * Move os itens do light DOM para o nav e intercala separadores.\n   * Como o playground atribui innerHTML (filhos chegam assincronamente) e\n   * re-renders posteriores já terão os itens no nav, a lógica abaixo é\n   * idempotente: coleta filhos do light DOM apenas na 1ª chamada.\n   */\n  private _decorateItems(): void {\n    const nav = this.shadowRoot?.querySelector('nav');\n    if (!nav) return;\n    const sep = this.getAttr('separator', '/');\n\n    // 1ª vez: captura itens do light DOM (idempotente — só coleta uma vez)\n    if (this._items.length === 0) {\n      this._items = Array.from(this.children).filter((el) =>\n        el.matches('[slot=\"item\"]'),\n      );\n    }\n\n    // limpa nav e reconstrói com os itens armazenados\n    nav.innerHTML = '';\n    this._items.forEach((item, i) => {\n      const isLast = i === this._items.length - 1;\n      item.setAttribute('aria-current', isLast ? 'page' : 'false');\n      nav.appendChild(item);\n      if (isLast) return;\n      const s = document.createElement('span');\n      s.className = 'sep';\n      s.setAttribute('part', 'separator');\n      s.setAttribute('aria-hidden', 'true');\n      s.textContent = sep;\n      nav.appendChild(s);\n    });\n  }\n\n  private _items: Element[] = [];\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    // filhos podem não estar disponíveis ainda (innerHTML do playground)\n    const obs = new MutationObserver(() => {\n      if (this.children.length > 0) {\n        obs.disconnect();\n        this._decorateItems();\n      }\n    });\n    obs.observe(this, { childList: true });\n    // se já tem filhos, decora na hora\n    if (this.children.length > 0) this._decorateItems();\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._items = [];\n  }\n}\n\nexport function defineFxBreadcrumb(): typeof FxBreadcrumb {\n  return defineElement('fx-breadcrumb', FxBreadcrumb);\n}\n"],"names":[],"mappings":";;;;AAsBO,MAAM,gBAAN,MAAM,sBAAqB,UAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AA0FL,SAAQ,SAAoB,CAAA;AAAA,EAAC;AAAA,EAhD7B,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,aAAa,OAAO;AAAA,EACtC;AAAA,EAEmB,SAAe;AAChC,UAAM,QAAQ,KAAK,QAAQ,SAAS,YAAY;AAEhD,SAAK,YAAY;AAAA,oCACe,IAAI,KAAK,CAAC;AAAA,KACzC;AAED,SAAK,eAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,iBAAuB;AAC7B,UAAM,MAAM,KAAK,YAAY,cAAc,KAAK;AAChD,QAAI,CAAC,IAAK;AACV,UAAM,MAAM,KAAK,QAAQ,aAAa,GAAG;AAGzC,QAAI,KAAK,OAAO,WAAW,GAAG;AAC5B,WAAK,SAAS,MAAM,KAAK,KAAK,QAAQ,EAAE;AAAA,QAAO,CAAC,OAC9C,GAAG,QAAQ,eAAe;AAAA,MAAA;AAAA,IAE9B;AAGA,QAAI,YAAY;AAChB,SAAK,OAAO,QAAQ,CAAC,MAAM,MAAM;AAC/B,YAAM,SAAS,MAAM,KAAK,OAAO,SAAS;AAC1C,WAAK,aAAa,gBAAgB,SAAS,SAAS,OAAO;AAC3D,UAAI,YAAY,IAAI;AACpB,UAAI,OAAQ;AACZ,YAAM,IAAI,SAAS,cAAc,MAAM;AACvC,QAAE,YAAY;AACd,QAAE,aAAa,QAAQ,WAAW;AAClC,QAAE,aAAa,eAAe,MAAM;AACpC,QAAE,cAAc;AAChB,UAAI,YAAY,CAAC;AAAA,IACnB,CAAC;AAAA,EACH;AAAA,EAImB,oBAA0B;AAC3C,UAAM,kBAAA;AAEN,UAAM,MAAM,IAAI,iBAAiB,MAAM;AACrC,UAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,YAAI,WAAA;AACJ,aAAK,eAAA;AAAA,MACP;AAAA,IACF,CAAC;AACD,QAAI,QAAQ,MAAM,EAAE,WAAW,MAAM;AAErC,QAAI,KAAK,SAAS,SAAS,QAAQ,eAAA;AAAA,EACrC;AAAA,EAEmB,uBAA6B;AAC9C,UAAM,qBAAA;AACN,SAAK,SAAS,CAAA;AAAA,EAChB;AACF;AA7GE,cAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,eAAN;AAgHA,SAAS,qBAA0C;AACxD,SAAO,cAAc,iBAAiB,YAAY;AACpD;"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-breadcrumb> — Trilha de navegação hierárquica.\n *\n * Atributos: size (sm|md|lg), separator (glifo entre itens, padrão '/'),\n * label (acessibilidade, padrão 'Breadcrumb').\n * Slots: `item` (repetível — cada <fx-breadcrumb-item> ou elemento com\n * [slot=\"item\"] vira um passo) e `separator` (customiza o separador).\n *\n * Marcação declarativa recomendada:\n *   <fx-breadcrumb>\n *     <fx-breadcrumb-item href=\"/\">Home</fx-breadcrumb-item>\n *     <fx-breadcrumb-item href=\"/produtos\">Produtos</fx-breadcrumb-item>\n *     <fx-breadcrumb-item>Detalhe</fx-breadcrumb-item>\n *   </fx-breadcrumb>\n *\n * Eventos (composed): `select` (detail: { item, index }) ao clicar num item.\n */\nexport class FxBreadcrumb extends FxElement {\n  static override styles = css`\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    nav {\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      gap: var(--fx-space-xs);\n    }\n    :host([size='sm']) nav { font-size: calc(var(--fx-font-size) - 2px); }\n    :host([size='lg']) nav { font-size: calc(var(--fx-font-size) + 2px); }\n\n    /* itens (movidos para o nav no shadow DOM) */\n    nav [slot='item'] {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-xs);\n      color: var(--fx-text-muted);\n      text-decoration: none;\n      cursor: pointer;\n      transition: color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    nav [slot='item']:hover { color: var(--fx-color-primary); }\n    nav [slot='item'][aria-current='page'] {\n      color: var(--fx-text-default);\n      font-weight: 600;\n      cursor: default;\n    }\n    nav [slot='item'][aria-current='page']:hover { color: var(--fx-text-default); }\n\n    .sep {\n      color: var(--fx-text-muted);\n      user-select: none;\n      display: inline-flex;\n      align-items: center;\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['size', 'separator', 'label'];\n  }\n\n  protected override render(): void {\n    const label = this.getAttr('label', 'Breadcrumb');\n\n    this.setTemplate(`\n      <nav part=\"nav\" aria-label=\"${esc(label)}\"></nav>\n    `);\n\n    this._decorateItems();\n  }\n\n  /**\n   * Move os itens do light DOM para o nav e intercala separadores.\n   * Como o playground atribui innerHTML (filhos chegam assincronamente) e\n   * re-renders posteriores já terão os itens no nav, a lógica abaixo é\n   * idempotente: coleta filhos do light DOM apenas na 1ª chamada.\n   */\n  private _decorateItems(): void {\n    const nav = this.shadowRoot?.querySelector('nav');\n    if (!nav) return;\n    const sep = this.getAttr('separator', '/');\n\n    // 1ª vez: captura itens do light DOM (idempotente — só coleta uma vez)\n    if (this._items.length === 0) {\n      this._items = Array.from(this.children).filter((el) =>\n        el.matches('[slot=\"item\"]'),\n      );\n    }\n\n    // limpa nav e reconstrói com os itens armazenados\n    nav.innerHTML = '';\n    this._items.forEach((item, i) => {\n      const isLast = i === this._items.length - 1;\n      item.setAttribute('aria-current', isLast ? 'page' : 'false');\n      nav.appendChild(item);\n      if (isLast) return;\n      const s = document.createElement('span');\n      s.className = 'sep';\n      s.setAttribute('part', 'separator');\n      s.setAttribute('aria-hidden', 'true');\n      s.textContent = sep;\n      nav.appendChild(s);\n    });\n  }\n\n  private _items: Element[] = [];\n  /** Observer de upgrade dos filhos; precisa ser solto no disconnect. */\n  private _childObserver?: MutationObserver;\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    // filhos podem não estar disponíveis ainda (innerHTML do playground)\n    const obs = new MutationObserver(() => {\n      if (this.children.length > 0) {\n        this._stopObservingChildren();\n        this._decorateItems();\n      }\n    });\n    this._childObserver = obs;\n    obs.observe(this, { childList: true });\n    // se já tem filhos, decora na hora\n    if (this.children.length > 0) {\n      this._stopObservingChildren();\n      this._decorateItems();\n    }\n  }\n\n  /** Desconecta o observer de filhos (evita trabalho eterno após o connect). */\n  private _stopObservingChildren(): void {\n    this._childObserver?.disconnect();\n    this._childObserver = undefined;\n  }\n\n  protected override disconnectedCallback(): void {\n    this._stopObservingChildren();\n    super.disconnectedCallback();\n    this._items = [];\n  }\n}\n\nexport function defineFxBreadcrumb(): typeof FxBreadcrumb {\n  return defineElement('fx-breadcrumb', FxBreadcrumb);\n}\n"],"names":[],"mappings":";;;;AAsBO,MAAM,gBAAN,MAAM,sBAAqB,UAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA;AA0FL,SAAQ,SAAoB,CAAA;AAAA,EAAC;AAAA,EAhD7B,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,aAAa,OAAO;AAAA,EACtC;AAAA,EAEmB,SAAe;AAChC,UAAM,QAAQ,KAAK,QAAQ,SAAS,YAAY;AAEhD,SAAK,YAAY;AAAA,oCACe,IAAI,KAAK,CAAC;AAAA,KACzC;AAED,SAAK,eAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQQ,iBAAuB;AAC7B,UAAM,MAAM,KAAK,YAAY,cAAc,KAAK;AAChD,QAAI,CAAC,IAAK;AACV,UAAM,MAAM,KAAK,QAAQ,aAAa,GAAG;AAGzC,QAAI,KAAK,OAAO,WAAW,GAAG;AAC5B,WAAK,SAAS,MAAM,KAAK,KAAK,QAAQ,EAAE;AAAA,QAAO,CAAC,OAC9C,GAAG,QAAQ,eAAe;AAAA,MAAA;AAAA,IAE9B;AAGA,QAAI,YAAY;AAChB,SAAK,OAAO,QAAQ,CAAC,MAAM,MAAM;AAC/B,YAAM,SAAS,MAAM,KAAK,OAAO,SAAS;AAC1C,WAAK,aAAa,gBAAgB,SAAS,SAAS,OAAO;AAC3D,UAAI,YAAY,IAAI;AACpB,UAAI,OAAQ;AACZ,YAAM,IAAI,SAAS,cAAc,MAAM;AACvC,QAAE,YAAY;AACd,QAAE,aAAa,QAAQ,WAAW;AAClC,QAAE,aAAa,eAAe,MAAM;AACpC,QAAE,cAAc;AAChB,UAAI,YAAY,CAAC;AAAA,IACnB,CAAC;AAAA,EACH;AAAA,EAMmB,oBAA0B;AAC3C,UAAM,kBAAA;AAEN,UAAM,MAAM,IAAI,iBAAiB,MAAM;AACrC,UAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,aAAK,uBAAA;AACL,aAAK,eAAA;AAAA,MACP;AAAA,IACF,CAAC;AACD,SAAK,iBAAiB;AACtB,QAAI,QAAQ,MAAM,EAAE,WAAW,MAAM;AAErC,QAAI,KAAK,SAAS,SAAS,GAAG;AAC5B,WAAK,uBAAA;AACL,WAAK,eAAA;AAAA,IACP;AAAA,EACF;AAAA;AAAA,EAGQ,yBAA+B;AACrC,SAAK,gBAAgB,WAAA;AACrB,SAAK,iBAAiB;AAAA,EACxB;AAAA,EAEmB,uBAA6B;AAC9C,SAAK,uBAAA;AACL,UAAM,qBAAA;AACN,SAAK,SAAS,CAAA;AAAA,EAChB;AACF;AA1HE,cAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,eAAN;AA6HA,SAAS,qBAA0C;AACxD,SAAO,cAAc,iBAAiB,YAAY;AACpD;"}

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

@@ -45,7 +45,8 @@ import "../select";
  *
  * Atributos: pagination, rows, rows-options, pagination-position (left|center|right),
  * striped, hover, empty-message, lazy, total, loading, loading-message,
- * sort-field, sort-order.
+ * sort-field, sort-order, rounded (none|sm|md|lg, padrão md; `radius` é alias),
+ * no-borders-x (remove apenas as bordas laterais, mantendo topo e base).
  * Eventos: page-change, sort-change, row-click, filter-change (todos composed).
  */
 export declare class FxTable extends FxElement {
@@ -105,7 +106,23 @@ export declare class FxTable extends FxElement {
     private computeRows;
     private _getSearchFields;
     private cellHtml;
+    /**
+     * Assinatura da "casca" da tabela: tudo que NÃO depende das linhas
+     * (colunas, toolbar, filtros, paginação, loading).
+     *
+     * Serve para o caminho rápido: quando só `data` muda, a casca é idêntica e
+     * podemos trocar apenas o `<tbody>`, sem recriar `<style>`, `<thead>`,
+     * toolbar e paginação — nem religar todos os listeners.
+     */
+    private _shellKey;
     protected render(): void;
+    /**
+     * Liga o clique das linhas ao evento `row-click`.
+     *
+     * Extraído do render para ser reaproveitado no caminho rápido (troca só do
+     * <tbody>): os <tr> são novos, então precisam ser rebound.
+     */
+    private _bindRowClicks;
     private _restoreToolbarSearch;
 }
 export declare function defineFxTable(): typeof FxTable;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACrC,OAAgB,MAAM,SAiNpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAiBjD;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;cAaG,MAAM,IAAI,IAAI;IAyNjC,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;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"}

package/dist/components/table/table.js

@@ -15,6 +15,7 @@ const _FxTable = class _FxTable extends FxElement {
     this.sortDir = 1;
     this.filters = {};
     this.globalSearch = "";
+    this._shellKey = "";
   }
   static get observedAttributes() {
     return [
@@ -31,7 +32,10 @@ const _FxTable = class _FxTable extends FxElement {
       "loading",
       "loading-message",
       "sort-field",
-      "sort-order"
+      "sort-order",
+      "rounded",
+      "radius",
+      "no-borders-x"
     ];
   }
   get data() {
@@ -251,18 +255,37 @@ const _FxTable = class _FxTable extends FxElement {
       </div>`;
     const loading = this.hasAttr("loading");
     const loadingHtml = loading ? `<div class="loading-overlay" part="loading-overlay"><div class="tbl-spinner" part="spinner"></div><span class="loading-text">${esc(this.getAttr("loading-message", "Carregando…"))}</span></div>` : "";
+    const shellKey = [
+      toolbarHtml,
+      headHtml,
+      filterRow,
+      pagerHtml,
+      loadingHtml,
+      cols.length
+    ].join("|");
+    if (shellKey === this._shellKey) {
+      const tbody = this.root.querySelector("tbody");
+      if (tbody) {
+        tbody.innerHTML = bodyHtml;
+        this._bindRowClicks(rows);
+        return;
+      }
+    }
+    this._shellKey = shellKey;
     this.setTemplate(`
       ${toolbarHtml}
-      <div class="table-wrap">
-        <div class="scroll">
-          <table part="table">
-            <thead><tr>${headHtml}</tr>${filterRow}</thead>
-            <tbody>${bodyHtml}</tbody>
-          </table>
+      <div class="frame${toolbar ? " has-toolbar" : ""}" part="frame">
+        <div class="table-wrap">
+          <div class="scroll">
+            <table part="table">
+              <thead><tr>${headHtml}</tr>${filterRow}</thead>
+              <tbody>${bodyHtml}</tbody>
+            </table>
+          </div>
+          ${loadingHtml}
         </div>
-        ${loadingHtml}
+        ${pagerHtml}
       </div>
-      ${pagerHtml}
     `);
     this.root.querySelectorAll("th.sortable").forEach((th) => {
       th.addEventListener("click", () => {
@@ -354,6 +377,16 @@ const _FxTable = class _FxTable extends FxElement {
       this.page = 0;
       this.render();
     });
+    this._bindRowClicks(rows);
+    this._restoreToolbarSearch();
+  }
+  /**
+   * Liga o clique das linhas ao evento `row-click`.
+   *
+   * Extraído do render para ser reaproveitado no caminho rápido (troca só do
+   * <tbody>): os <tr> são novos, então precisam ser rebound.
+   */
+  _bindRowClicks(rows) {
     this.root.querySelectorAll("tbody tr[data-index]").forEach((tr) => {
       tr.addEventListener("click", () => {
         this.dispatchEvent(
@@ -368,7 +401,6 @@ const _FxTable = class _FxTable extends FxElement {
         );
       });
     });
-    this._restoreToolbarSearch();
   }
   _restoreToolbarSearch() {
     const input = this.root.querySelector(
@@ -385,14 +417,61 @@ _FxTable.styles = css`
 			font-size: var(--fx-font-size);
 			color: var(--fx-text-default);
 			background: var(--fx-surface-background);
+			/* Raio da moldura (tabela + paginação). O atributo "rounded"
+			   sobrescreve este valor e o consumidor também pode sobrescrever
+			   por CSS: fx-table { --fx-table-radius: 20px; }. */
+			--fx-table-radius: var(--fx-radius-md);
+		}
+		/* Arredondamento das bordas — "none" deixa tudo reto, como nos demais
+		   tokens de radius do design system. "rounded" é o nome atual; "radius"
+		   segue aceito como alias para ficar consistente com o <fx-card>. */
+		:host([rounded="none"]),
+		:host([radius="none"]) {
+			--fx-table-radius: var(--fx-radius-none, 0);
+		}
+		:host([rounded="sm"]),
+		:host([radius="sm"]) {
+			--fx-table-radius: var(--fx-radius-sm);
+		}
+		:host([rounded="md"]),
+		:host([radius="md"]) {
+			--fx-table-radius: var(--fx-radius-md);
+		}
+		:host([rounded="lg"]),
+		:host([radius="lg"]) {
+			--fx-table-radius: var(--fx-radius-lg);
+		}
+		/* Moldura: uma única borda envolvendo a tabela E a paginação, para que
+		   o pager não fique "solto" fora do contorno da tabela. */
+		.frame {
+			border: 1px solid var(--fx-border-default);
+			border-radius: var(--fx-table-radius);
+			background: var(--fx-surface-background);
+		}
+		/* Com toolbar no topo, quem desenha a borda superior é a própria
+		   toolbar — a moldura desenha apenas o contorno restante. */
+		.frame.has-toolbar {
+			border-top: none;
+		}
+		/* "no-borders-x": mantém somente as bordas de topo e de base
+		   (tabela encaixada em um layout que já desenha as laterais). */
+		:host([no-borders-x]) .frame,
+		:host([no-borders-x]) .toolbar {
+			border-left: none;
+			border-right: none;
 		}
 		.table-wrap {
 			position: relative;
 		}
 		.scroll {
 			overflow-x: auto;
-			border: 1px solid var(--fx-border-default);
-			border-radius: var(--fx-radius-md);
+			/* O topo acompanha o raio da moldura; a base fica reta porque o
+			   rodapé (.pager) é quem a desenha. */
+			border-radius: var(--fx-table-radius) var(--fx-table-radius) 0 0;
+		}
+		/* Sem paginação não existe rodapé: a moldura fecha embaixo. */
+		:host(:not([pagination])) .scroll {
+			border-radius: var(--fx-table-radius);
 		}
 		table {
 			width: 100%;
@@ -479,7 +558,13 @@ _FxTable.styles = css`
 			align-items: center;
 			gap: var(--fx-space-sm);
 			flex-wrap: wrap;
-			padding: var(--fx-space-sm) 0;
+			/* O rodapé é parte da moldura: borda só no topo (separando da
+			   tabela) e o mesmo padding horizontal das células. Antes ele
+			   ficava fora do contorno, sem borda e sem respiro lateral. */
+			padding: var(--fx-space-sm) var(--fx-space-md);
+			border-top: 1px solid var(--fx-border-default);
+			border-radius: 0 0 var(--fx-table-radius) var(--fx-table-radius);
+			background: var(--fx-surface-background);
 		}
 		:host([pagination-position="center"]) .pager {
 			justify-content: center;
@@ -528,15 +613,27 @@ _FxTable.styles = css`
 			color: #fff;
 			font-weight: var(--fx-font-weight);
 		}
-		fx-select {
+		/* 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
+		   no HOST — apertar só ::part(trigger) não funciona, porque o
+		   trigger é width:100% e continua herdando o min-width do host.
+		   O painel (dropdown) continua largo (220px) em select.ts. */
+		fx-select.rows-sel {
 			vertical-align: middle;
-		}
-		fx-select::part(trigger) {
-			min-width: 64px !important;
-			min-height: var(--fx-size-sm) !important;
-			padding: 0 var(--fx-space-sm) !important;
-			border-radius: var(--fx-radius-sm) !important;
-			font-size: calc(var(--fx-font-size) - 2px) !important;
+			/* Não deixa o flex do .pager esticar nem esmagar o controle. */
+			flex: none;
+			width: auto;
+			--fx-select-min-width: 56px;
+			--fx-select-min-width-sm: 56px;
+		}
+		fx-select.rows-sel::part(trigger) {
+			min-width: 0;
+			min-height: var(--fx-size-sm);
+			/* Padding curto: sobra espaço para o número + caret. */
+			padding: 0 var(--fx-space-xs);
+			border-radius: var(--fx-radius-sm);
+			font-size: calc(var(--fx-font-size) - 2px);
 		}
 		.toolbar {
 			display: flex;
@@ -546,7 +643,7 @@ _FxTable.styles = css`
 			padding: var(--fx-space-sm) var(--fx-space-md);
 			border: 1px solid var(--fx-border-default);
 			border-bottom: none;
-			border-radius: var(--fx-radius-md) var(--fx-radius-md) 0 0;
+			border-radius: var(--fx-table-radius) var(--fx-table-radius) 0 0;
 			background: var(--fx-surface-background);
 		}
 		.toolbar:empty {
@@ -567,7 +664,7 @@ _FxTable.styles = css`
 			);
 			backdrop-filter: blur(2px);
 			z-index: 10;
-			border-radius: var(--fx-radius-md);
+			border-radius: var(--fx-table-radius) var(--fx-table-radius) 0 0;
 		}
 		.tbl-spinner {
 			width: 32px;