@wrrdev/fenix-ui 1.1.7 → 1.1.9

package/README.md

@@ -18,8 +18,8 @@ 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.7**, acesso público.
-> Subpaths disponíveis: `./theme`, `./tokens`, `./jsx`, `./vue`, `./button`, `./badge`, `./spinner`, `./select`, `./input`, `./switch`, `./textarea`, `./checkbox`, `./radio`, `./calendar`, `./datepicker`, `./multiselect`, `./table`, `./floatlabel`, `./dialog`, `./toast`, `./tooltip`, `./tabs`, `./progress`, `./skeleton`, `./alert`, `./drawer`, `./dropdown`, `./sidebar`, `./pagination`, `./autocomplete`, `./auto-import` e o curinga `./components/*`.
+> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.1.9**, 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/*`.
 
 
 ## Consumo
@@ -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.7):
+  🔗 Links diretos para CDN (versão 1.1.9):
   • 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
 -->
@@ -77,6 +77,14 @@ Cansado de importar componente por componente? O plugin `FenixAutoImport` percor
 (`.ts`, `.js`, `.tsx`, `.jsx`, `.vue`, `.html`, `.svelte`) em busca de tags `fx-*` conhecidas e injeta
 o `import` do subpath de cada componente **automaticamente** — mantendo o tree-shaking: só entra no
 bundle o que é usado, e ele não duplica imports já existentes.
+- **Vue / Svelte (SFC):** o import entra **dentro do `<script>`** — com CRLF (Windows) e mesmo em
+  arquivos que só têm `<template>` (o plugin cria o bloco `<script>`).
+- **Vue:** nos arquivos `.vue` o plugin injeta também `import '@wrrdev/fenix-ui/vue'`, a augmentação
+  que habilita autocomplete/validação dos atributos `fx-*` no Volar/vue-tsc — sem passo manual no
+  `main.ts` (desligue com `FenixAutoImport({ vueTypes: false })`).
+- **Ícones:** `<fx-icon name="home" />` injeta `@wrrdev/fenix-ui/icon` (componente com `name` tipado
+  e `@font-face` leve); a classe `class="fx-icon fx-icon-home"` injeta `@wrrdev/fenix-ui/icons` (CSS
+  completo, com as ~4.300 classes por glifo).
 
 ### Instale
 
@@ -145,6 +153,10 @@ export default defineConfig({
 | `fx-dropdown-item` | `@wrrdev/fenix-ui/dropdown` |
 | `fx-pagination` | `@wrrdev/fenix-ui/pagination` |
 | `fx-autocomplete` | `@wrrdev/fenix-ui/autocomplete` |
+| `fx-icon` | `@wrrdev/fenix-ui/icon` |
+| `fx-icon` / `fx-icon-*` (classe) | `@wrrdev/fenix-ui/icons` |
+| `fx-knob` | `@wrrdev/fenix-ui/knob` |
+| `fx-accordion` / `fx-accordion-panel` | `@wrrdev/fenix-ui/accordion` |
 
 ### Compatibilidade com frameworks
 
@@ -313,6 +325,9 @@ Importe o subpath `./vue` **uma única vez** no `main.ts`:
 import '@wrrdev/fenix-ui/vue'; // habilita autocomplete de fx-* nos templates SFC
 ```
 
+> Com o plugin `FenixAutoImport` este import é injetado automaticamente em cada arquivo `.vue`
+> (com os tipos) — o passo manual no `main.ts` continua valendo para projetos sem o plugin.
+
 **Configuração essencial do Vue 3** — diga ao compilador que `fx-*` são Web Components:
 
 ```ts

package/dist/assets/{base-css-Be_r8aTo.js → font-CF0TXsAP.js}

@@ -62,13 +62,49 @@ function fenixIconHtml(icon) {
   }
   return `<span aria-hidden="true">${esc(value)}</span>`;
 }
+function resolveFontUrl() {
+  if (typeof __FENIX_ICONS_FONT_URL__ !== "undefined" && __FENIX_ICONS_FONT_URL__) {
+    return __FENIX_ICONS_FONT_URL__;
+  }
+  return new URL("" + new URL("fenix-icons-DmgotBzD.woff2", import.meta.url).href, import.meta.url).toString();
+}
+const FENIX_ICONS_FONT_URL = resolveFontUrl();
+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');}`;
+}
+function buildFenixIconsFontCss() {
+  return buildFenixIconsFontFaceCss() + FENIX_ICON_BASE_CSS;
+}
+let fontInjected = false;
+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;
+}
+function __resetFenixIconsFontInjection() {
+  fontInjected = false;
+}
 export {
-  FENIX_ICON_FONT_FAMILY as F,
+  FENIX_ICONS_STYLE_ID as F,
+  __resetFenixIconsFontInjection as _,
   FENIX_ICON_BASE_CSS as a,
-  stripTags as b,
+  buildFenixIconsFontFaceCss as b,
+  FENIX_ICON_FONT_FAMILY as c,
+  buildFenixIconsFontCss as d,
   esc as e,
   fenixIconHtml as f,
+  stripTags as g,
   isFenixIconName as i,
+  loadFenixIconsFont as l,
   sanitizeData as s
 };
-//# sourceMappingURL=base-css-Be_r8aTo.js.map
+//# sourceMappingURL=font-CF0TXsAP.js.map

package/dist/assets/font-CF0TXsAP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-CF0TXsAP.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/** 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    `font-display:block;src:url('${FENIX_ICONS_FONT_URL}') 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\nlet fontInjected = false;\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  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/** Reseta o estado de injeção da fonte (uso interno/testes). */\nexport function __resetFenixIconsFontInjection(): void {\n  fontInjected = false;\n}"],"names":[],"mappings":"AAQA,MAAM,gBAAwC;AAAA,EAC5C,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;AAGA,MAAM,iBAAiB;AAchB,SAAS,IAAI,OAAwB;AAC1C,MAAI,SAAS,KAAM,QAAO;AAC1B,SAAO,OAAO,KAAK,EAAE,QAAQ,gBAAgB,CAAC,SAAS,cAAc,IAAI,KAAK,IAAI;AACpF;AASO,SAAS,UAAU,MAAsB;AAC9C,SAAO,KAAK,QAAQ,YAAY,EAAE;AACpC;AASO,SAAS,aAAgB,MAAY;AAC1C,MAAI,QAAQ,KAAM,QAAO;AACzB,MAAI,OAAO,SAAS,SAAU,QAAO,IAAI,IAAI;AAC7C,MAAI,MAAM,QAAQ,IAAI,EAAG,QAAO,KAAK,IAAI,YAAY;AACrD,MAAI,OAAO,SAAS,UAAU;AAC5B,UAAM,SAAkC,CAAA;AACxC,eAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,IAA+B,GAAG;AAC1E,aAAO,GAAG,IAAI,aAAa,KAAK;AAAA,IAClC;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;ACxDO,MAAM,yBAAyB;AAG/B,MAAM,sBAAsB,uBAAuB,sBAAsB;AAMzE,MAAM,sBAAsB;AAAA;AAAA,iBAElB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoB7B,SAAS,gBAAgB,OAAwB;AACtD,SAAO,oBAAoB,KAAK,MAAM,KAAA,CAAM;AAC9C;AAiBO,SAAS,cAAc,MAAsB;AAClD,QAAM,SAAS,QAAQ,IAAI,KAAA;AAC3B,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,gBAAgB,KAAK,GAAG;AAC1B,WAAO,yCAAyC,KAAK;AAAA,EACvD;AACA,SAAO,4BAA4B,IAAI,KAAK,CAAC;AAC/C;ACxDA,SAAS,iBAAyB;AAChC,MAAI,OAAO,6BAA6B,eAAe,0BAA0B;AAC/E,WAAO;AAAA,EACT;AAMA,SAAO,IAAA,IAAA,kEAAA,YAAA,GAAA,EAAgD,SAAA;AACzD;AAGO,MAAM,uBAAuB,eAAA;AAG7B,MAAM,4BAA4B;AAGlC,MAAM,uBAAuB;AAG7B,SAAS,6BAAqC;AACnD,SACE,2BAA2B,sBAAsB,uEAClB,oBAAoB;AAEvD;AAGO,SAAS,yBAAiC;AAC/C,SAAO,+BAA+B;AACxC;AAEA,IAAI,eAAe;AAMZ,SAAS,mBACd,SAA+B,OAAO,aAAa,cAAc,WAAW,QACtE;AACN,MAAI,gBAAgB,CAAC,OAAQ;AAC7B,MAAI,OAAO,eAAe,oBAAoB,GAAG;AAC/C,mBAAe;AACf;AAAA,EACF;AACA,QAAM,QAAQ,OAAO,cAAc,OAAO;AAC1C,QAAM,KAAK;AACX,QAAM,cAAc,uBAAA;AACpB,SAAO,KAAK,YAAY,KAAK;AAC7B,iBAAe;AACjB;AAGO,SAAS,iCAAuC;AACrD,iBAAe;AACjB;"}

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;GASG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACtC,OAAgB,MAAM,SAsHpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAa,KAAK,IAAI,MAAM,CAE3B;IACD,IAAa,KAAK,CAAC,CAAC,EAAE,MAAM,EAE3B;IAED,IAAI,QAAQ,IAAI,MAAM,CAGrB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;cAwBd,iBAAiB,IAAI,IAAI;cAYzB,oBAAoB,IAAI,IAAI;IAM/C,OAAO,CAAC,UAAU,CAAwC;IAC1D,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,OAAO,CAAC,MAAM,CAOZ;IAEF,2DAA2D;IAC3D,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,aAAa;CAIrB;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;GASG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACtC,OAAgB,MAAM,SA0HpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAa,KAAK,IAAI,MAAM,CAE3B;IACD,IAAa,KAAK,CAAC,CAAC,EAAE,MAAM,EAE3B;IAED,IAAI,QAAQ,IAAI,MAAM,CAGrB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;cAwBd,iBAAiB,IAAI,IAAI;cAYzB,oBAAoB,IAAI,IAAI;IAM/C,OAAO,CAAC,UAAU,CAAwC;IAC1D,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,OAAO,CAAC,MAAM,CAOZ;IAEF,2DAA2D;IAC3D,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,aAAa;CAIrB;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}

package/dist/components/drawer/drawer.js

@@ -184,6 +184,10 @@ _FxDrawer.styles = css`
 			position: sticky;
 			top: 0;
 			background: var(--fx-surface-background);
+			/* O conteúdo do drawer (ex.: abas da customização de tema)
+			   rola por trás do header: sem z-index o texto passava POR CIMA
+			   e o header parecia transparente. */
+			z-index: 1;
 		}
 		.title {
 			font-weight: 700;

package/dist/components/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../../src/components/drawer/drawer.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-drawer> — Painel deslizante (drawer) com overlay.\n *\n * Atributos:\n *  - position: 'left' | 'right' | 'top' | 'bottom' (padrão: right);\n *  - title: texto do cabeçalho;\n *  - open: exibe o drawer.\n * Conteúdo: livre, via slot.\n * Eventos: `open` e `close` (composed). Fecha por ESC ou clique no overlay.\n */\nexport class FxDrawer extends FxElement {\n\tstatic override styles = css`\n\t\t:host {\n\t\t\tdisplay: contents;\n\t\t\tfont-family: var(--fx-font-family);\n\t\t\tfont-size: var(--fx-font-size);\n\t\t\tcolor: var(--fx-text-default);\n\t\t}\n\t\t.overlay {\n\t\t\tdisplay: none;\n\t\t\tposition: fixed;\n\t\t\tinset: 0;\n\t\t\tbackground: color-mix(\n\t\t\t\tin srgb,\n\t\t\t\tvar(--fx-text-default, #000) 45%,\n\t\t\t\ttransparent\n\t\t\t);\n\t\t\tbackdrop-filter: blur(3px);\n\t\t\t-webkit-backdrop-filter: blur(3px);\n\t\t\tz-index: var(--fx-z-overlay, 1090);\n\t\t\tanimation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n\t\t}\n\t\t:host([open]) .overlay {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.panel {\n\t\t\tposition: fixed;\n\t\t\tbackground: var(--fx-surface-background);\n\t\t\tbox-shadow: var(--fx-shadow-xl);\n\t\t\tz-index: var(--fx-z-modal, 1000);\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: auto;\n\t\t}\n\t\t:host(:not([open])) .panel {\n\t\t\tdisplay: none;\n\t\t}\n\t\t:host([open]) .panel {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t/* left / right — altura total, largura mínima fixa e expansível */\n\t\t:host([position=\"left\"]) .panel,\n\t\t:host(:not([position])) .panel,\n\t\t:host([position=\"right\"]) .panel {\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: var(--fx-drawer-width, 360px);\n\t\t\tmin-width: 300px;\n\t\t\tmax-width: 90vw;\n\t\t}\n\t\t:host([position=\"left\"]) .panel {\n\t\t\tleft: 0;\n\t\t}\n\t\t:host([position=\"right\"]) .panel,\n\t\t:host(:not([position])) .panel {\n\t\t\tright: 0;\n\t\t}\n\n\t\t/* top / bottom — largura total, altura mínima fixa e expansível */\n\t\t:host([position=\"top\"]) .panel,\n\t\t:host([position=\"bottom\"]) .panel {\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: var(--fx-drawer-height, 280px);\n\t\t\tmin-height: 180px;\n\t\t\tmax-height: 85vh;\n\t\t}\n\t\t:host([position=\"top\"]) .panel {\n\t\t\ttop: 0;\n\t\t}\n\t\t:host([position=\"bottom\"]) .panel {\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t.header {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--fx-space-sm);\n\t\t\tmin-height: var(--fx-size-lg);\n\t\t\tpadding: var(--fx-space-sm) var(--fx-space-md);\n\t\t\tborder-bottom: 1px solid var(--fx-border-default);\n\t\t\tflex: none;\n\t\t\tposition: sticky;\n\t\t\ttop: 0;\n\t\t\tbackground: var(--fx-surface-background);\n\t\t}\n\t\t.title {\n\t\t\tfont-weight: 700;\n\t\t\tflex: 1;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t\t.close {\n\t\t\tborder: none;\n\t\t\tbackground: transparent;\n\t\t\tcursor: pointer;\n\t\t\tcolor: var(--fx-text-muted);\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tline-height: 1;\n\t\t\tborder-radius: var(--fx-radius-sm);\n\t\t\tfont-size: 16px;\n\t\t\ttransition: background var(--fx-motion-duration-fast)\n\t\t\t\tvar(--fx-motion-easing);\n\t\t}\n\t\t.close:hover {\n\t\t\tbackground: color-mix(\n\t\t\t\tin srgb,\n\t\t\t\tvar(--fx-color-danger) 14%,\n\t\t\t\tvar(--fx-surface-background)\n\t\t\t);\n\t\t\tcolor: var(--fx-color-danger);\n\t\t}\n\t\t.body {\n\t\t\tpadding: var(--fx-space-md);\n\t\t\tflex: 1;\n\t\t}\n\t`;\n\n\tstatic override get observedAttributes(): string[] {\n\t\treturn [\"open\", \"title\", \"position\"];\n\t}\n\n\tget open(): boolean {\n\t\treturn this.hasAttr(\"open\");\n\t}\n\tset open(value: boolean) {\n\t\tthis.toggleAttr(\"open\", value);\n\t}\n\n\toverride get title(): string {\n\t\treturn this.getAttr(\"title\");\n\t}\n\toverride set title(v: string) {\n\t\tthis.setAttribute(\"title\", v);\n\t}\n\n\tget position(): string {\n\t\tconst p = this.getAttr(\"position\");\n\t\treturn [\"left\", \"right\", \"top\", \"bottom\"].includes(p) ? p : \"right\";\n\t}\n\tset position(v: string) {\n\t\tthis.setAttribute(\"position\", v);\n\t}\n\n\tprotected override render(): void {\n\t\tconst title = this.getAttr(\"title\");\n\n\t\tthis.setTemplate(`\n      <div class=\"overlay\" part=\"overlay\"></div>\n      <div class=\"panel\" part=\"panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${esc(title || \"Drawer\")}\" tabindex=\"-1\">\n        ${title !== \"\" ? `<div class=\"header\" part=\"header\"><span class=\"title\">${esc(title)}</span><button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">✕</button></div>` : \"\"}\n        <div class=\"body\" part=\"body\"><slot></slot></div>\n      </div>\n    `);\n\n\t\tthis.root.querySelector(\".overlay\")?.addEventListener(\"click\", this._close);\n\t\tthis.root.querySelector(\".close\")?.addEventListener(\"click\", this._close);\n\n\t\tif (this.open) {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this._previouslyFocused === null) {\n\t\t\t\t\tthis._previouslyFocused = document.activeElement as HTMLElement | null;\n\t\t\t\t}\n\t\t\t\tthis.root.querySelector<HTMLElement>(\".panel\")?.focus();\n\t\t\t});\n\t\t}\n\t}\n\n\tprotected override connectedCallback(): void {\n\t\tsuper.connectedCallback?.();\n\t\tthis._onKeydown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === \"Escape\" && this.open) {\n\t\t\t\tthis._close();\n\t\t\t} else if (e.key === \"Tab\" && this.open) {\n\t\t\t\tthis._trapFocus(e);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"keydown\", this._onKeydown);\n\t}\n\n\tprotected override disconnectedCallback(): void {\n\t\tdocument.removeEventListener(\"keydown\", this._onKeydown);\n\t\tthis._restoreFocus();\n\t\tsuper.disconnectedCallback?.();\n\t}\n\n\tprivate _onKeydown: (e: KeyboardEvent) => void = () => {};\n\tprivate _previouslyFocused: HTMLElement | null = null;\n\n\tprivate _close = (): void => {\n\t\tif (!this.open) return;\n\t\tthis.open = false;\n\t\tthis._restoreFocus();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent(\"close\", { bubbles: true, composed: true }),\n\t\t);\n\t};\n\n\t/** Mantém o foco dentro do drawer (WCAG 2.4.3 / 2.1.2). */\n\tprivate _trapFocus(e: KeyboardEvent): void {\n\t\tconst panel = this.root.querySelector<HTMLElement>(\".panel\");\n\t\tif (!panel) return;\n\t\tconst focusables = panel.querySelectorAll<HTMLElement>(\n\t\t\t'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n\t\t);\n\t\tif (!focusables.length) return;\n\t\tconst first = focusables[0];\n\t\tconst last = focusables[focusables.length - 1];\n\t\tconst active = this.root.activeElement;\n\t\tif (e.shiftKey && (active === first || active === panel)) {\n\t\t\te.preventDefault();\n\t\t\tlast.focus();\n\t\t} else if (!e.shiftKey && active === last) {\n\t\t\te.preventDefault();\n\t\t\tfirst.focus();\n\t\t}\n\t}\n\n\tprivate _restoreFocus(): void {\n\t\tif (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n\t\tthis._previouslyFocused = null;\n\t}\n}\n\nexport function defineFxDrawer(): typeof FxDrawer {\n  return defineElement('fx-drawer', FxDrawer);\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"drawer.js","sources":["../../../src/components/drawer/drawer.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-drawer> — Painel deslizante (drawer) com overlay.\n *\n * Atributos:\n *  - position: 'left' | 'right' | 'top' | 'bottom' (padrão: right);\n *  - title: texto do cabeçalho;\n *  - open: exibe o drawer.\n * Conteúdo: livre, via slot.\n * Eventos: `open` e `close` (composed). Fecha por ESC ou clique no overlay.\n */\nexport class FxDrawer extends FxElement {\n\tstatic override styles = css`\n\t\t:host {\n\t\t\tdisplay: contents;\n\t\t\tfont-family: var(--fx-font-family);\n\t\t\tfont-size: var(--fx-font-size);\n\t\t\tcolor: var(--fx-text-default);\n\t\t}\n\t\t.overlay {\n\t\t\tdisplay: none;\n\t\t\tposition: fixed;\n\t\t\tinset: 0;\n\t\t\tbackground: color-mix(\n\t\t\t\tin srgb,\n\t\t\t\tvar(--fx-text-default, #000) 45%,\n\t\t\t\ttransparent\n\t\t\t);\n\t\t\tbackdrop-filter: blur(3px);\n\t\t\t-webkit-backdrop-filter: blur(3px);\n\t\t\tz-index: var(--fx-z-overlay, 1090);\n\t\t\tanimation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n\t\t}\n\t\t:host([open]) .overlay {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.panel {\n\t\t\tposition: fixed;\n\t\t\tbackground: var(--fx-surface-background);\n\t\t\tbox-shadow: var(--fx-shadow-xl);\n\t\t\tz-index: var(--fx-z-modal, 1000);\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: auto;\n\t\t}\n\t\t:host(:not([open])) .panel {\n\t\t\tdisplay: none;\n\t\t}\n\t\t:host([open]) .panel {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t/* left / right — altura total, largura mínima fixa e expansível */\n\t\t:host([position=\"left\"]) .panel,\n\t\t:host(:not([position])) .panel,\n\t\t:host([position=\"right\"]) .panel {\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: var(--fx-drawer-width, 360px);\n\t\t\tmin-width: 300px;\n\t\t\tmax-width: 90vw;\n\t\t}\n\t\t:host([position=\"left\"]) .panel {\n\t\t\tleft: 0;\n\t\t}\n\t\t:host([position=\"right\"]) .panel,\n\t\t:host(:not([position])) .panel {\n\t\t\tright: 0;\n\t\t}\n\n\t\t/* top / bottom — largura total, altura mínima fixa e expansível */\n\t\t:host([position=\"top\"]) .panel,\n\t\t:host([position=\"bottom\"]) .panel {\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: var(--fx-drawer-height, 280px);\n\t\t\tmin-height: 180px;\n\t\t\tmax-height: 85vh;\n\t\t}\n\t\t:host([position=\"top\"]) .panel {\n\t\t\ttop: 0;\n\t\t}\n\t\t:host([position=\"bottom\"]) .panel {\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t.header {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--fx-space-sm);\n\t\t\tmin-height: var(--fx-size-lg);\n\t\t\tpadding: var(--fx-space-sm) var(--fx-space-md);\n\t\t\tborder-bottom: 1px solid var(--fx-border-default);\n\t\t\tflex: none;\n\t\t\tposition: sticky;\n\t\t\ttop: 0;\n\t\t\tbackground: var(--fx-surface-background);\n\t\t\t/* O conteúdo do drawer (ex.: abas da customização de tema)\n\t\t\t   rola por trás do header: sem z-index o texto passava POR CIMA\n\t\t\t   e o header parecia transparente. */\n\t\t\tz-index: 1;\n\t\t}\n\t\t.title {\n\t\t\tfont-weight: 700;\n\t\t\tflex: 1;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t\t.close {\n\t\t\tborder: none;\n\t\t\tbackground: transparent;\n\t\t\tcursor: pointer;\n\t\t\tcolor: var(--fx-text-muted);\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tline-height: 1;\n\t\t\tborder-radius: var(--fx-radius-sm);\n\t\t\tfont-size: 16px;\n\t\t\ttransition: background var(--fx-motion-duration-fast)\n\t\t\t\tvar(--fx-motion-easing);\n\t\t}\n\t\t.close:hover {\n\t\t\tbackground: color-mix(\n\t\t\t\tin srgb,\n\t\t\t\tvar(--fx-color-danger) 14%,\n\t\t\t\tvar(--fx-surface-background)\n\t\t\t);\n\t\t\tcolor: var(--fx-color-danger);\n\t\t}\n\t\t.body {\n\t\t\tpadding: var(--fx-space-md);\n\t\t\tflex: 1;\n\t\t}\n\t`;\n\n\tstatic override get observedAttributes(): string[] {\n\t\treturn [\"open\", \"title\", \"position\"];\n\t}\n\n\tget open(): boolean {\n\t\treturn this.hasAttr(\"open\");\n\t}\n\tset open(value: boolean) {\n\t\tthis.toggleAttr(\"open\", value);\n\t}\n\n\toverride get title(): string {\n\t\treturn this.getAttr(\"title\");\n\t}\n\toverride set title(v: string) {\n\t\tthis.setAttribute(\"title\", v);\n\t}\n\n\tget position(): string {\n\t\tconst p = this.getAttr(\"position\");\n\t\treturn [\"left\", \"right\", \"top\", \"bottom\"].includes(p) ? p : \"right\";\n\t}\n\tset position(v: string) {\n\t\tthis.setAttribute(\"position\", v);\n\t}\n\n\tprotected override render(): void {\n\t\tconst title = this.getAttr(\"title\");\n\n\t\tthis.setTemplate(`\n      <div class=\"overlay\" part=\"overlay\"></div>\n      <div class=\"panel\" part=\"panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${esc(title || \"Drawer\")}\" tabindex=\"-1\">\n        ${title !== \"\" ? `<div class=\"header\" part=\"header\"><span class=\"title\">${esc(title)}</span><button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">✕</button></div>` : \"\"}\n        <div class=\"body\" part=\"body\"><slot></slot></div>\n      </div>\n    `);\n\n\t\tthis.root.querySelector(\".overlay\")?.addEventListener(\"click\", this._close);\n\t\tthis.root.querySelector(\".close\")?.addEventListener(\"click\", this._close);\n\n\t\tif (this.open) {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this._previouslyFocused === null) {\n\t\t\t\t\tthis._previouslyFocused = document.activeElement as HTMLElement | null;\n\t\t\t\t}\n\t\t\t\tthis.root.querySelector<HTMLElement>(\".panel\")?.focus();\n\t\t\t});\n\t\t}\n\t}\n\n\tprotected override connectedCallback(): void {\n\t\tsuper.connectedCallback?.();\n\t\tthis._onKeydown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === \"Escape\" && this.open) {\n\t\t\t\tthis._close();\n\t\t\t} else if (e.key === \"Tab\" && this.open) {\n\t\t\t\tthis._trapFocus(e);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"keydown\", this._onKeydown);\n\t}\n\n\tprotected override disconnectedCallback(): void {\n\t\tdocument.removeEventListener(\"keydown\", this._onKeydown);\n\t\tthis._restoreFocus();\n\t\tsuper.disconnectedCallback?.();\n\t}\n\n\tprivate _onKeydown: (e: KeyboardEvent) => void = () => {};\n\tprivate _previouslyFocused: HTMLElement | null = null;\n\n\tprivate _close = (): void => {\n\t\tif (!this.open) return;\n\t\tthis.open = false;\n\t\tthis._restoreFocus();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent(\"close\", { bubbles: true, composed: true }),\n\t\t);\n\t};\n\n\t/** Mantém o foco dentro do drawer (WCAG 2.4.3 / 2.1.2). */\n\tprivate _trapFocus(e: KeyboardEvent): void {\n\t\tconst panel = this.root.querySelector<HTMLElement>(\".panel\");\n\t\tif (!panel) return;\n\t\tconst focusables = panel.querySelectorAll<HTMLElement>(\n\t\t\t'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n\t\t);\n\t\tif (!focusables.length) return;\n\t\tconst first = focusables[0];\n\t\tconst last = focusables[focusables.length - 1];\n\t\tconst active = this.root.activeElement;\n\t\tif (e.shiftKey && (active === first || active === panel)) {\n\t\t\te.preventDefault();\n\t\t\tlast.focus();\n\t\t} else if (!e.shiftKey && active === last) {\n\t\t\te.preventDefault();\n\t\t\tfirst.focus();\n\t\t}\n\t}\n\n\tprivate _restoreFocus(): void {\n\t\tif (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n\t\tthis._previouslyFocused = null;\n\t}\n}\n\nexport function defineFxDrawer(): typeof FxDrawer {\n  return defineElement('fx-drawer', FxDrawer);\n}"],"names":[],"mappings":"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"}

package/dist/components/icon/icon.js

@@ -0,0 +1,79 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+import { esc } from "../../core/sanitize.js";
+import { FENIX_ICON_BASE_CSS, isFenixIconName } from "../../icons/base-css.js";
+import { loadFenixIconsFont } from "../../icons/font.js";
+const _FxIcon = class _FxIcon extends FxElement {
+  static get observedAttributes() {
+    return ["name", "size", "label", "fill", "bold"];
+  }
+  /** Nome do glifo (ou texto livre/emoji). */
+  get name() {
+    return this.getAttr("name");
+  }
+  set name(value) {
+    this.setAttribute("name", value);
+  }
+  /** Tamanho: '' (herda 1em) | 'sm' | 'md' | 'lg' | 'xl'. */
+  get size() {
+    return this.getAttr("size");
+  }
+  set size(value) {
+    if (value) this.setAttribute("size", value);
+    else this.removeAttribute("size");
+  }
+  /** Nome acessível; vazio = ícone decorativo (aria-hidden). */
+  get label() {
+    return this.getAttr("label");
+  }
+  set label(value) {
+    if (value) this.setAttribute("label", value);
+    else this.removeAttribute("label");
+  }
+  connectedCallback() {
+    loadFenixIconsFont();
+    super.connectedCallback();
+  }
+  render() {
+    const name = this.getAttr("name").trim();
+    const label = this.getAttr("label").trim();
+    const a11y = label ? `role="img" aria-label="${esc(label)}"` : 'aria-hidden="true"';
+    if (!name) {
+      this.setTemplate(`<span class="icon" part="icon" ${a11y}></span>`);
+      return;
+    }
+    const inner = isFenixIconName(name) ? `<i class="icon fx-icon" part="icon" ${a11y}>${esc(name)}</i>` : `<span class="icon" part="icon" ${a11y}>${esc(name)}</span>`;
+    this.setTemplate(inner);
+  }
+};
+_FxIcon.styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
+      line-height: 1;
+      color: currentColor;
+      font-size: var(--fx-icon-size, 1em);
+    }
+    :host([size='sm']) { font-size: var(--fx-icon-size-sm, 16px); }
+    :host([size='md']) { font-size: var(--fx-icon-size-md, 20px); }
+    :host([size='lg']) { font-size: var(--fx-icon-size-lg, 24px); }
+    :host([size='xl']) { font-size: var(--fx-icon-size-xl, 32px); }
+    :host([hidden]) { display: none; }
+    .icon { display: inline-block; }
+    /* Variantes da fonte (FILL/wght): vencem a classe base .fx-icon. */
+    :host([fill]) .icon { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
+    :host([bold]) .icon { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
+    ${FENIX_ICON_BASE_CSS}
+  `;
+let FxIcon = _FxIcon;
+function defineFxIcon() {
+  return defineElement("fx-icon", FxIcon);
+}
+export {
+  FxIcon,
+  defineFxIcon
+};
+//# sourceMappingURL=icon.js.map

package/dist/components/icon/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../../../src/components/icon/icon.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, isFenixIconName } from '../../icons/base-css';\nimport { loadFenixIconsFont } from '../../icons/font';\n\n/**\n * <fx-icon> — Glifo da Fenix Icons com AUTOCOMPLETE no editor.\n *\n * Por que existe: a forma antiga (`<i class=\"fx-icon fx-icon-home\">`) é CSS\n * puro — o TypeScript não valida nem sugere nada enquanto você digita, e o\n * auto-import só injeta o import. Com o elemento, o atributo `name` é tipado\n * como `FenixIconName`, então Volar/vue-tsc, React e TSX listam os +4.000\n * glifos válidos (e o hover mostra a assinatura do atributo).\n *\n * Atributos:\n *  - name  → nome do glifo (ex.: `home`); texto livre/emoji também funciona\n *  - size  → sm | md | lg | xl (default: 1em, herda o texto ao redor)\n *  - label → nome acessível; sem label o ícone é aria-hidden (decorativo)\n *  - fill  → variante preenchida\n *  - bold  → traço mais pesado\n *\n * O glifo sai por LIGADURA (o nome vira o conteúdo de texto com a\n * font-family de ícones) — por isso funciona dentro do Shadow DOM, onde as\n * classes `fx-icon-<nome>` do documento não atravessam a fronteira.\n *\n * Tamanho via CSS: --fx-icon-size (-sm/-md/-lg/-xl).\n */\nexport class FxIcon extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      vertical-align: middle;\n      line-height: 1;\n      color: currentColor;\n      font-size: var(--fx-icon-size, 1em);\n    }\n    :host([size='sm']) { font-size: var(--fx-icon-size-sm, 16px); }\n    :host([size='md']) { font-size: var(--fx-icon-size-md, 20px); }\n    :host([size='lg']) { font-size: var(--fx-icon-size-lg, 24px); }\n    :host([size='xl']) { font-size: var(--fx-icon-size-xl, 32px); }\n    :host([hidden]) { display: none; }\n    .icon { display: inline-block; }\n    /* Variantes da fonte (FILL/wght): vencem a classe base .fx-icon. */\n    :host([fill]) .icon { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }\n    :host([bold]) .icon { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }\n    ${FENIX_ICON_BASE_CSS}\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['name', 'size', 'label', 'fill', 'bold'];\n  }\n\n  /** Nome do glifo (ou texto livre/emoji). */\n  get name(): string {\n    return this.getAttr('name');\n  }\n  set name(value: string) {\n    this.setAttribute('name', value);\n  }\n\n  /** Tamanho: '' (herda 1em) | 'sm' | 'md' | 'lg' | 'xl'. */\n  get size(): string {\n    return this.getAttr('size');\n  }\n  set size(value: string) {\n    if (value) this.setAttribute('size', value);\n    else this.removeAttribute('size');\n  }\n\n  /** Nome acessível; vazio = ícone decorativo (aria-hidden). */\n  get label(): string {\n    return this.getAttr('label');\n  }\n  set label(value: string) {\n    if (value) this.setAttribute('label', value);\n    else this.removeAttribute('label');\n  }\n\n  protected override connectedCallback(): void {\n    // O glifo depende do @font-face: garante o CSS leve (sem as 4k classes).\n    loadFenixIconsFont();\n    super.connectedCallback();\n  }\n\n  protected override render(): void {\n    const name = this.getAttr('name').trim();\n    const label = this.getAttr('label').trim();\n    const a11y = label ? `role=\"img\" aria-label=\"${esc(label)}\"` : 'aria-hidden=\"true\"';\n    if (!name) {\n      this.setTemplate(`<span class=\"icon\" part=\"icon\" ${a11y}></span>`);\n      return;\n    }\n    // Nome válido → ligadura (glifo). Emoji/texto livre → texto puro.\n    const inner = isFenixIconName(name)\n      ? `<i class=\"icon fx-icon\" part=\"icon\" ${a11y}>${esc(name)}</i>`\n      : `<span class=\"icon\" part=\"icon\" ${a11y}>${esc(name)}</span>`;\n    this.setTemplate(inner);\n  }\n}\n\nexport function defineFxIcon(): typeof FxIcon {\n  return defineElement('fx-icon', FxIcon);\n}\n"],"names":[],"mappings":";;;;;;AA6BO,MAAM,UAAN,MAAM,gBAAe,UAAU;AAAA,EAuBpC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,QAAQ,SAAS,QAAQ,MAAM;AAAA,EACjD;AAAA;AAAA,EAGA,IAAI,OAAe;AACjB,WAAO,KAAK,QAAQ,MAAM;AAAA,EAC5B;AAAA,EACA,IAAI,KAAK,OAAe;AACtB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA;AAAA,EAGA,IAAI,OAAe;AACjB,WAAO,KAAK,QAAQ,MAAM;AAAA,EAC5B;AAAA,EACA,IAAI,KAAK,OAAe;AACtB,QAAI,MAAO,MAAK,aAAa,QAAQ,KAAK;AAAA,QACrC,MAAK,gBAAgB,MAAM;AAAA,EAClC;AAAA;AAAA,EAGA,IAAI,QAAgB;AAClB,WAAO,KAAK,QAAQ,OAAO;AAAA,EAC7B;AAAA,EACA,IAAI,MAAM,OAAe;AACvB,QAAI,MAAO,MAAK,aAAa,SAAS,KAAK;AAAA,QACtC,MAAK,gBAAgB,OAAO;AAAA,EACnC;AAAA,EAEmB,oBAA0B;AAE3C,uBAAA;AACA,UAAM,kBAAA;AAAA,EACR;AAAA,EAEmB,SAAe;AAChC,UAAM,OAAO,KAAK,QAAQ,MAAM,EAAE,KAAA;AAClC,UAAM,QAAQ,KAAK,QAAQ,OAAO,EAAE,KAAA;AACpC,UAAM,OAAO,QAAQ,0BAA0B,IAAI,KAAK,CAAC,MAAM;AAC/D,QAAI,CAAC,MAAM;AACT,WAAK,YAAY,kCAAkC,IAAI,UAAU;AACjE;AAAA,IACF;AAEA,UAAM,QAAQ,gBAAgB,IAAI,IAC9B,uCAAuC,IAAI,IAAI,IAAI,IAAI,CAAC,SACxD,kCAAkC,IAAI,IAAI,IAAI,IAAI,CAAC;AACvD,SAAK,YAAY,KAAK;AAAA,EACxB;AACF;AAxEE,QAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAmBrB,mBAAmB;AAAA;AApBlB,IAAM,SAAN;AA2EA,SAAS,eAA8B;AAC5C,SAAO,cAAc,WAAW,MAAM;AACxC;"}

package/dist/components/icon/index.js

@@ -0,0 +1,7 @@
+import { defineFxIcon } from "./icon.js";
+import { FxIcon } from "./icon.js";
+defineFxIcon();
+export {
+  FxIcon
+};
+//# sourceMappingURL=index.js.map

package/dist/components/icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/icon/index.ts"],"sourcesContent":["import { FxIcon, defineFxIcon } from './icon';\n\nexport { FxIcon };\n\ndefineFxIcon();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-icon': FxIcon;\n  }\n}\n"],"names":[],"mappings":";;AAIA,aAAA;"}

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

@@ -17,6 +17,7 @@ export declare class FxPagination extends FxElement {
     get rows(): number;
     set rows(v: number);
     private get pages();
+    protected connectedCallback(): void;
     protected render(): void;
     private emit;
 }

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;AAI5C,OAAO,WAAW,CAAC;AAEnB;;;;;;GAMG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SA2CpB;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,MAAM,IAAI,IAAI;IAgDjC,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;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"}

package/dist/components/pagination/pagination.js

@@ -2,6 +2,8 @@ import { FxElement } from "../../core/base.js";
 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";
+import { loadFenixIconsFont } from "../../icons/font.js";
 import "../select/index.js";
 const _FxPagination = class _FxPagination extends FxElement {
   static get observedAttributes() {
@@ -28,6 +30,10 @@ const _FxPagination = class _FxPagination extends FxElement {
   get pages() {
     return Math.max(1, Math.ceil(this.total / this.rows));
   }
+  connectedCallback() {
+    loadFenixIconsFont();
+    super.connectedCallback();
+  }
   render() {
     const pages = this.pages;
     const current = Math.min(Math.max(1, this.page), pages);
@@ -38,11 +44,13 @@ const _FxPagination = class _FxPagination extends FxElement {
     const to = Math.min(current * this.rows, this.total);
     this.setTemplate(`
       <span class="info">${this.total ? `${from}-${to} de ${this.total}` : "0 itens"}</span>
-      <button type="button" class="nav" part="prev" data-go="${current - 1}" ${current <= 1 ? "disabled" : ""}>‹</button>
+      <button type="button" class="nav" part="first" aria-label="Primeira página" data-go="1" ${current <= 1 ? "disabled" : ""}>${fenixIconHtml("first_page")}</button>
+      <button type="button" class="nav" part="prev" aria-label="Página anterior" data-go="${current - 1}" ${current <= 1 ? "disabled" : ""}>${fenixIconHtml("navigate_before")}</button>
       ${window_[0] !== 1 && pages > 5 ? `<button type="button" class="nav" data-go="1">1</button>` : ""}
       ${window_.map((p) => `<button type="button" class="nav ${p === current ? "active" : ""}" data-go="${p}">${p}</button>`).join("")}
       ${window_[window_.length - 1] !== pages && pages > 5 ? `<button type="button" class="nav" data-go="${pages}">${pages}</button>` : ""}
-      <button type="button" class="nav" part="next" data-go="${current + 1}" ${current >= pages ? "disabled" : ""}>›</button>
+      <button type="button" class="nav" part="next" aria-label="Próxima página" data-go="${current + 1}" ${current >= pages ? "disabled" : ""}>${fenixIconHtml("navigate_next")}</button>
+      <button type="button" class="nav" part="last" aria-label="Última página" data-go="${pages}" ${current >= pages ? "disabled" : ""}>${fenixIconHtml("last_page")}</button>
       ${opts.length ? `
         <fx-select class="rows-sel" part="rows" size="sm" value="${this.rows}" aria-label="Itens por página">
           ${opts.map((o) => `<option value="${esc(o)}">${esc(o)}</option>`).join("")}
@@ -78,6 +86,7 @@ const _FxPagination = class _FxPagination extends FxElement {
   }
 };
 _FxPagination.styles = css`
+    ${FENIX_ICON_BASE_CSS}
     :host {
       display: flex;
       align-items: center;
@@ -89,6 +98,9 @@ _FxPagination.styles = css`
     :host([position='center']) { justify-content: center; }
     :host([position='right']) { justify-content: flex-end; }
     .nav {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       min-width: var(--fx-size-sm);
       height: var(--fx-size-sm);
       border: 1px solid var(--fx-border-default);
@@ -103,6 +115,10 @@ _FxPagination.styles = css`
         border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),
         background var(--fx-motion-duration-fast) var(--fx-motion-easing);
     }
+    /* O glifo precisa de 1px a mais que o dígito: a altura de traço do ícone é
+       maior que a do número, então igualar os dois font-size deixa a seta
+       visivelmente maior que o texto. */
+    .nav .fx-icon { font-size: calc(var(--fx-font-size) - 1px); }
     .nav:hover:not([disabled]):not(.active) { border-color: var(--fx-color-primary); color: var(--fx-color-primary); }
     .nav[disabled] { opacity: 0.5; cursor: not-allowed; }
     .nav.active {

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 '../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    :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      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    .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 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=\"prev\" data-go=\"${current - 1}\" ${current <= 1 ? 'disabled' : ''}>‹</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\" data-go=\"${current + 1}\" ${current >= pages ? 'disabled' : ''}>›</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 { 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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"}

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

@@ -7,20 +7,29 @@ import "../select";
  *
  * Colunas (light DOM):
  *   <fx-column field="nome" header="Nome" sortable filterable align="left">
- *     opcional: <template>R$ {{value}}</template> para render customizado
+ *     opcional: <fx-cell>R$ {{value}}</fx-cell> para render customizado
  *     ou conteúdo direto (HTML + {{ }}) como template alternativo
  *   </fx-column>
  *
+ *   IMPORTANTE (frameworks): use <fx-cell>, NÃO <template>. A tag nativa
+ *   <template> é reservada — o Vue 3 a transforma em bloco do compilador e o
+ *   React gerencia os filhos, então o innerHTML chega vazio. <fx-cell> é uma
+ *   tag própria, sem significado especial para nenhum framework. A forma
+ *   antiga com <template> continua funcionando (compatibilidade) e há ainda
+ *   a opção `template="#id"` apontando para um <template> externo.
+ *
  * Toolbar (opcional):
- *   <template slot="toolbar">
+ *   <fx-toolbar>
  *     <input data-search-fields="nome,cargo" placeholder="Buscar…">
  *     <button>Nova ação</button>
- *   </template>
+ *   </fx-toolbar>
+ *   (legado ainda aceito: <template slot="toolbar">…</template>)
  *
  * Dados: propriedade `data` (array de objetos) ou atributo `data` (JSON).
  *
  * Atributos: pagination, rows, rows-options, pagination-position (left|center|right),
- * striped, empty-message, lazy, total, loading, loading-message.
+ * striped, hover, empty-message, lazy, total, loading, loading-message,
+ * sort-field, sort-order.
  * Eventos: page-change, sort-change, row-click, filter-change (todos composed).
  */
 export declare class FxTable extends FxElement {
@@ -42,9 +51,34 @@ export declare class FxTable extends FxElement {
     set rowsPerPage(value: number);
     get lazy(): boolean;
     private get columns();
+    /**
+     * Resolve o template de célula de uma `<fx-column>`, em ordem de prioridade:
+     *
+     * 1. `<fx-cell>` — **recomendado**. Tag própria, sem significado especial
+     *    para Vue/React/Angular/Svelte: nenhum framework a intercepta, então o
+     *    `innerHTML` sempre chega intacto ao componente. O light DOM do
+     *    `<fx-table>` não é exibido (a tabela não usa `<slot>`), então o
+     *    conteúdo-fonte nunca aparece na tela.
+     * 2. `template="#id"` (ou `template="id"`) — aponta para um `<template>`
+     *    declarado **fora** da tabela, útil em React/Angular, onde é mais
+     *    simples manter o markup num único lugar.
+     * 3. `<template>` dentro da coluna — forma **legada**, mantida por
+     *    compatibilidade. Em Vue 3 ela vira um bloco do compilador e em React os
+     *    filhos são gerenciados pelo framework; nos dois casos o `innerHTML`
+     *    chega vazio e a célula não renderiza. Prefira `<fx-cell>`.
+     */
+    private _resolveCellTemplate;
     private get toolbarTemplate();
+    /**
+     * Resolve `ref` para um elemento: `#id`/`id` ⇒ `getElementById` no
+     * documento; qualquer outro valor é tratado como seletor CSS relativo à
+     * própria tabela. Valores inválidos devolvem `null` (sem exceção).
+     */
+    private _resolveRef;
     protected connectedCallback(): void;
     protected disconnectedCallback(): void;
+    /** Ordenação inicial via `sort-field` / `sort-order` (documentados na API). */
+    private _parseSortAttributes;
     private _parseDataAttribute;
     private computeRows;
     private _getSearchFields;

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;AAK5C,OAAO,WAAW,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACrC,OAAgB,MAAM,SA0MpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAajD;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,OAAO,KAAK,eAAe,GAI1B;cAEkB,iBAAiB,IAAI,IAAI;cAOzB,oBAAoB,IAAI,IAAI;IAK/C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;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;;;;;;;;;;;;;;;OAeG;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"}