@wrrdev/fenix-ui 1.1.7 → 1.1.8

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.8**, 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.8):
   • 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/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/docs/app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/docs/app.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAMH,OAAO,EAAiB,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAgE5B;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAuBlD;AAkDD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAmC9C;AAqqED,eAAO,MAAM,iBAAiB,QAAO,OAAO,CAAC,IAAI,CAAgB,CAAC"}
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/docs/app.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAMH,OAAO,EAAiB,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAgE5B;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAuBlD;AAkDD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAmC9C;AA0rED,eAAO,MAAM,iBAAiB,QAAO,OAAO,CAAC,IAAI,CAAgB,CAAC"}