@wrrdev/fenix-ui 1.0.16 → 1.1.0

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.0.16**, acesso público.
+> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.1.0**, 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/*`.
 
 
@@ -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.0.16):
+  🔗 Links diretos para CDN (versão 1.1.0):
   • 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
 -->

package/dist/_virtual/preload-helper.js

@@ -0,0 +1,68 @@
+const scriptRel = "modulepreload";
+const assetsURL = function(dep) {
+  return "/" + dep;
+};
+const seen = {};
+const __vitePreload = function preload(baseModule, deps, importerUrl) {
+  let promise = Promise.resolve();
+  if (deps && deps.length > 0) {
+    document.getElementsByTagName("link");
+    const cspNonceMeta = document.querySelector(
+      "meta[property=csp-nonce]"
+    );
+    const cspNonce = cspNonceMeta?.nonce || cspNonceMeta?.getAttribute("nonce");
+    promise = Promise.allSettled(
+      deps.map((dep) => {
+        dep = assetsURL(dep);
+        if (dep in seen) return;
+        seen[dep] = true;
+        const isCss = dep.endsWith(".css");
+        const cssSelector = isCss ? '[rel="stylesheet"]' : "";
+        if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
+          return;
+        }
+        const link = document.createElement("link");
+        link.rel = isCss ? "stylesheet" : scriptRel;
+        if (!isCss) {
+          link.as = "script";
+        }
+        link.crossOrigin = "";
+        link.href = dep;
+        if (cspNonce) {
+          link.setAttribute("nonce", cspNonce);
+        }
+        document.head.appendChild(link);
+        if (isCss) {
+          return new Promise((res, rej) => {
+            link.addEventListener("load", res);
+            link.addEventListener(
+              "error",
+              () => rej(new Error(`Unable to preload CSS for ${dep}`))
+            );
+          });
+        }
+      })
+    );
+  }
+  function handlePreloadError(err) {
+    const e = new Event("vite:preloadError", {
+      cancelable: true
+    });
+    e.payload = err;
+    window.dispatchEvent(e);
+    if (!e.defaultPrevented) {
+      throw err;
+    }
+  }
+  return promise.then((res) => {
+    for (const item of res || []) {
+      if (item.status !== "rejected") continue;
+      handlePreloadError(item.reason);
+    }
+    return baseModule().catch(handlePreloadError);
+  });
+};
+export {
+  __vitePreload
+};
+//# sourceMappingURL=preload-helper.js.map

package/dist/_virtual/preload-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preload-helper.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/assets/base-css-BifSeW2H.js

@@ -0,0 +1,31 @@
+const FENIX_ICON_FONT_FAMILY = "Fenix Icons";
+const FENIX_ICON_FONT_VAR = `var(--fx-icon-font, ${FENIX_ICON_FONT_FAMILY})`;
+const FENIX_ICON_BASE_CSS = `
+.fx-icon {
+  font-family: ${FENIX_ICON_FONT_VAR};
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  user-select: none;
+}
+.fx-icon.fx-icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
+.fx-icon.fx-icon-bold { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
+`;
+function isFenixIconName(value) {
+  return /^[a-z][a-z0-9_]*$/.test(value.trim());
+}
+export {
+  FENIX_ICON_FONT_FAMILY as F,
+  FENIX_ICON_BASE_CSS as a,
+  isFenixIconName as i
+};
+//# sourceMappingURL=base-css-BifSeW2H.js.map

package/dist/assets/base-css-BifSeW2H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-css-BifSeW2H.js","sources":["../../src/icons/base-css.ts"],"sourcesContent":["/**\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\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"],"names":[],"mappings":"AAWO,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;"}

package/dist/components/alert/alert.d.ts

@@ -2,7 +2,8 @@ import { FxElement } from '../../core/base';
 /**
  * <fx-alert> — Aviso inline com variantes semânticas.
  *
- * Atributos: variant (info|success|warning|danger, padrão info), title, dismissible.
+ * Atributos: variant (info|success|warning|danger, padrão info), title, dismissible,
+ * icon (nome da Fenix Icons, ex.: icon="notification" — substitui o glifo padrão).
  * Slot padrão: conteúdo da mensagem. Evento `dismiss`.
  */
 export declare class FxAlert extends FxElement {

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

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;GAKG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,SAiCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;CAuBlC;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C;;;;;;GAMG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,SAmCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;CA4BlC;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}

package/dist/components/alert/alert.js

@@ -1,23 +1,29 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["icons/index.js","icons/names.js","icons/base-css.js"])))=>i.map(i=>d[i]);
+import { __vitePreload } from "../../_virtual/preload-helper.js";
 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";
 const _FxAlert = class _FxAlert extends FxElement {
   static get observedAttributes() {
-    return ["variant", "title", "dismissible"];
+    return ["variant", "title", "dismissible", "icon"];
   }
   render() {
     const variant = this.getAttr("variant", "info");
     const title = this.getAttr("title");
+    const iconName = this.getAttr("icon");
+    if (isFenixIconName(iconName)) void __vitePreload(() => import("../../icons/index.js"), true ? __vite__mapDeps([0,1,2]) : void 0);
     const icons = {
       info: "ℹ",
       success: "✓",
       warning: "⚠",
       danger: "✕"
     };
+    const iconHtml = iconName ? `<span class="icon${isFenixIconName(iconName) ? " fx-icon" : ""}" part="icon" aria-hidden="true">${esc(iconName)}</span>` : `<span class="icon">${icons[variant] ?? "ℹ"}</span>`;
     this.setTemplate(`
       <div class="alert" part="alert" role="alert">
-        <span class="icon">${icons[variant] ?? "ℹ"}</span>
+        ${iconHtml}
         <div class="content">
           ${title ? `<div class="title">${esc(title)}</div>` : ""}
           <div class="body"><slot></slot></div>
@@ -55,6 +61,8 @@ _FxAlert.styles = css`
     }
     :host([hidden]) { display: none; }
     .icon { color: var(--_color); font-weight: bold; line-height: 1.4; }
+    ${FENIX_ICON_BASE_CSS}
+    .icon.fx-icon { font-size: 20px; line-height: 1.2; }
     .content { flex: 1; }
     .title { font-weight: 600; }
     .body { margin-top: 2px; }

package/dist/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sources":["../../../src/components/alert/alert.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-alert> — Aviso inline com variantes semânticas.\n *\n * Atributos: variant (info|success|warning|danger, padrão info), title, dismissible.\n * Slot padrão: conteúdo da mensagem. Evento `dismiss`.\n */\nexport class FxAlert extends FxElement {\n  static override styles = css`\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      --_color: var(--fx-color-primary);\n      --_bg: color-mix(in srgb, var(--fx-color-primary) 10%, var(--fx-surface-background));\n    }\n    :host([variant='info']) { --_color: var(--fx-color-info); --_bg: color-mix(in srgb, var(--fx-color-info) 10%, var(--fx-surface-background)); }\n    :host([variant='success']) { --_color: var(--fx-color-success); --_bg: color-mix(in srgb, var(--fx-color-success) 10%, var(--fx-surface-background)); }\n    :host([variant='warning']) { --_color: var(--fx-color-warning); --_bg: color-mix(in srgb, var(--fx-color-warning) 12%, var(--fx-surface-background)); }\n    :host([variant='danger']) { --_color: var(--fx-color-danger); --_bg: color-mix(in srgb, var(--fx-color-danger) 10%, var(--fx-surface-background)); }\n    .alert {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--fx-space-md);\n      background: var(--_bg);\n      border: 1px solid color-mix(in srgb, var(--_color) 30%, transparent);\n      border-radius: var(--fx-radius-md);\n      padding: var(--fx-space-md) var(--fx-space-lg);\n      font-size: var(--fx-font-size);\n      color: var(--fx-text-default);\n    }\n    :host([hidden]) { display: none; }\n    .icon { color: var(--_color); font-weight: bold; line-height: 1.4; }\n    .content { flex: 1; }\n    .title { font-weight: 600; }\n    .body { margin-top: 2px; }\n    .close {\n      border: none; background: transparent; cursor: pointer;\n      color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) + 2px);\n      line-height: 1; padding: 0; border-radius: var(--fx-radius-full);\n    }\n    .close:hover { color: var(--_color); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['variant', 'title', 'dismissible'];\n  }\n\n  protected override render(): void {\n    const variant = this.getAttr('variant', 'info');\n    const title = this.getAttr('title');\n    const icons: Record<string, string> = {\n      info: 'ℹ', success: '✓', warning: '⚠', danger: '✕',\n    };\n\n    this.setTemplate(`\n      <div class=\"alert\" part=\"alert\" role=\"alert\">\n        <span class=\"icon\">${icons[variant] ?? 'ℹ'}</span>\n        <div class=\"content\">\n          ${title ? `<div class=\"title\">${esc(title)}</div>` : ''}\n          <div class=\"body\"><slot></slot></div>\n        </div>\n        ${this.hasAttr('dismissible') ? '<button type=\"button\" class=\"close\" aria-label=\"Fechar\">×</button>' : ''}\n      </div>\n    `);\n\n    this.root.querySelector('.close')?.addEventListener('click', () => {\n      this.hidden = true;\n      this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));\n    });\n  }\n}\n\nexport function defineFxAlert(): typeof FxAlert {\n  return defineElement('fx-alert', FxAlert);\n}\n"],"names":[],"mappings":";;;;AAWO,MAAM,WAAN,MAAM,iBAAgB,UAAU;AAAA,EAoCrC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,SAAS,aAAa;AAAA,EAC3C;AAAA,EAEmB,SAAe;AAChC,UAAM,UAAU,KAAK,QAAQ,WAAW,MAAM;AAC9C,UAAM,QAAQ,KAAK,QAAQ,OAAO;AAClC,UAAM,QAAgC;AAAA,MACpC,MAAM;AAAA,MAAK,SAAS;AAAA,MAAK,SAAS;AAAA,MAAK,QAAQ;AAAA,IAAA;AAGjD,SAAK,YAAY;AAAA;AAAA,6BAEQ,MAAM,OAAO,KAAK,GAAG;AAAA;AAAA,YAEtC,QAAQ,sBAAsB,IAAI,KAAK,CAAC,WAAW,EAAE;AAAA;AAAA;AAAA,UAGvD,KAAK,QAAQ,aAAa,IAAI,uEAAuE,EAAE;AAAA;AAAA,KAE5G;AAED,SAAK,KAAK,cAAc,QAAQ,GAAG,iBAAiB,SAAS,MAAM;AACjE,WAAK,SAAS;AACd,WAAK,cAAc,IAAI,YAAY,WAAW,EAAE,SAAS,MAAM,UAAU,KAAA,CAAM,CAAC;AAAA,IAClF,CAAC;AAAA,EACH;AACF;AA9DE,SAAgB,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;AADpB,IAAM,UAAN;AAiEA,SAAS,gBAAgC;AAC9C,SAAO,cAAc,YAAY,OAAO;AAC1C;"}
+{"version":3,"mappings":";;;;;;;AAaO,MAAM,WAAN,MAAM,iBAAgB,UAAU;AAAA,EAsCrC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,SAAS,eAAe,MAAM;AAAA,EACnD;AAAA,EAEmB,SAAe;AAChC,UAAM,UAAU,KAAK,QAAQ,WAAW,MAAM;AAC9C,UAAM,QAAQ,KAAK,QAAQ,OAAO;AAClC,UAAM,WAAW,KAAK,QAAQ,MAAM;AACpC,QAAI,gBAAgB,QAAQ,EAAG,0BAAK,OAAO,sBAAa;AACxD,UAAM,QAAgC;AAAA,MACpC,MAAM;AAAA,MAAK,SAAS;AAAA,MAAK,SAAS;AAAA,MAAK,QAAQ;AAAA;AAEjD,UAAM,WAAW,WACb,oBAAoB,gBAAgB,QAAQ,IAAI,aAAa,EAAE,oCAAoC,IAAI,QAAQ,CAAC,YAChH,sBAAsB,MAAM,OAAO,KAAK,GAAG;AAE/C,SAAK,YAAY;AAAA;AAAA,UAEX,QAAQ;AAAA;AAAA,YAEN,QAAQ,sBAAsB,IAAI,KAAK,CAAC,WAAW,EAAE;AAAA;AAAA;AAAA,UAGvD,KAAK,QAAQ,aAAa,IAAI,uEAAuE,EAAE;AAAA;AAAA,KAE5G;AAED,SAAK,KAAK,cAAc,QAAQ,GAAG,iBAAiB,SAAS,MAAM;AACjE,WAAK,SAAS;AACd,WAAK,cAAc,IAAI,YAAY,WAAW,EAAE,SAAS,MAAM,UAAU,MAAM,CAAC;AAAA,IAClF,CAAC;AAAA,EACH;AACF;AArEE,SAAgB,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,MAwBrB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAzBlB,IAAM,UAAN;AAwEA,SAAS,gBAAgC;AAC9C,SAAO,cAAc,YAAY,OAAO;AAC1C","names":[],"ignoreList":[],"sources":["../../../src/components/alert/alert.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';\n\n/**\n * <fx-alert> — Aviso inline com variantes semânticas.\n *\n * Atributos: variant (info|success|warning|danger, padrão info), title, dismissible,\n * icon (nome da Fenix Icons, ex.: icon=\"notification\" — substitui o glifo padrão).\n * Slot padrão: conteúdo da mensagem. Evento `dismiss`.\n */\nexport class FxAlert extends FxElement {\n  static override styles = css`\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      --_color: var(--fx-color-primary);\n      --_bg: color-mix(in srgb, var(--fx-color-primary) 10%, var(--fx-surface-background));\n    }\n    :host([variant='info']) { --_color: var(--fx-color-info); --_bg: color-mix(in srgb, var(--fx-color-info) 10%, var(--fx-surface-background)); }\n    :host([variant='success']) { --_color: var(--fx-color-success); --_bg: color-mix(in srgb, var(--fx-color-success) 10%, var(--fx-surface-background)); }\n    :host([variant='warning']) { --_color: var(--fx-color-warning); --_bg: color-mix(in srgb, var(--fx-color-warning) 12%, var(--fx-surface-background)); }\n    :host([variant='danger']) { --_color: var(--fx-color-danger); --_bg: color-mix(in srgb, var(--fx-color-danger) 10%, var(--fx-surface-background)); }\n    .alert {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--fx-space-md);\n      background: var(--_bg);\n      border: 1px solid color-mix(in srgb, var(--_color) 30%, transparent);\n      border-radius: var(--fx-radius-md);\n      padding: var(--fx-space-md) var(--fx-space-lg);\n      font-size: var(--fx-font-size);\n      color: var(--fx-text-default);\n    }\n    :host([hidden]) { display: none; }\n    .icon { color: var(--_color); font-weight: bold; line-height: 1.4; }\n    ${FENIX_ICON_BASE_CSS}\n    .icon.fx-icon { font-size: 20px; line-height: 1.2; }\n    .content { flex: 1; }\n    .title { font-weight: 600; }\n    .body { margin-top: 2px; }\n    .close {\n      border: none; background: transparent; cursor: pointer;\n      color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) + 2px);\n      line-height: 1; padding: 0; border-radius: var(--fx-radius-full);\n    }\n    .close:hover { color: var(--_color); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['variant', 'title', 'dismissible', 'icon'];\n  }\n\n  protected override render(): void {\n    const variant = this.getAttr('variant', 'info');\n    const title = this.getAttr('title');\n    const iconName = this.getAttr('icon');\n    if (isFenixIconName(iconName)) void import('../../icons');\n    const icons: Record<string, string> = {\n      info: 'ℹ', success: '✓', warning: '⚠', danger: '✕',\n    };\n    const iconHtml = iconName\n      ? `<span class=\"icon${isFenixIconName(iconName) ? ' fx-icon' : ''}\" part=\"icon\" aria-hidden=\"true\">${esc(iconName)}</span>`\n      : `<span class=\"icon\">${icons[variant] ?? 'ℹ'}</span>`;\n\n    this.setTemplate(`\n      <div class=\"alert\" part=\"alert\" role=\"alert\">\n        ${iconHtml}\n        <div class=\"content\">\n          ${title ? `<div class=\"title\">${esc(title)}</div>` : ''}\n          <div class=\"body\"><slot></slot></div>\n        </div>\n        ${this.hasAttr('dismissible') ? '<button type=\"button\" class=\"close\" aria-label=\"Fechar\">×</button>' : ''}\n      </div>\n    `);\n\n    this.root.querySelector('.close')?.addEventListener('click', () => {\n      this.hidden = true;\n      this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true }));\n    });\n  }\n}\n\nexport function defineFxAlert(): typeof FxAlert {\n  return defineElement('fx-alert', FxAlert);\n}\n"],"file":"components/alert/alert.js"}

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,21 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-avatar> — Representação visual de usuário/item.
+ *
+ * Atributos: size (number px / sm|md|lg), shape (circle|rounded|square),
+ * variant (image|text|icon), src (imagem), alt (acessibilidade).
+ * Slots: `icon` (glifo/emoji quando variant=icon) e padrão (iniciais).
+ *
+ * Uso em grupo: posicione vários `<fx-avatar>` em um container com a classe
+ * `avatar-group` (empilha com overlap automático).
+ */
+export declare class FxAvatar extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get variant(): string;
+    get src(): string;
+    set src(v: string);
+    protected render(): void;
+}
+export declare function defineFxAvatar(): typeof FxAvatar;
+//# sourceMappingURL=avatar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/avatar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;GASG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,SAmDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,OAAO,IAAI,MAAM,CAA4C;IACjE,IAAI,GAAG,IAAI,MAAM,CAAgC;IACjD,IAAI,GAAG,CAAC,CAAC,EAAE,MAAM,EAAkC;cAEhC,MAAM,IAAI,IAAI;CAiBlC;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}

package/dist/components/avatar/avatar.js

@@ -0,0 +1,91 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+import { esc } from "../../core/sanitize.js";
+const _FxAvatar = class _FxAvatar extends FxElement {
+  static get observedAttributes() {
+    return ["size", "shape", "variant", "src", "alt"];
+  }
+  get variant() {
+    return this.getAttr("variant", "text");
+  }
+  get src() {
+    return this.getAttr("src");
+  }
+  set src(v) {
+    this.setAttribute("src", v);
+  }
+  render() {
+    const variant = this.variant;
+    const src = this.getAttr("src");
+    const alt = this.getAttr("alt", "");
+    const isIcon = variant === "icon";
+    const isImage = variant === "image" && src;
+    this.setTemplate(`
+      <span class="avatar${isImage ? " image" : isIcon ? " icon-slot" : " text"}" part="avatar" aria-label="${esc(alt)}" role="img">
+        ${isImage ? `<img src="${esc(src)}" alt="${esc(alt)}">` : isIcon ? `<slot name="icon" class="slot-icon"></slot>` : `<slot></slot>`}
+      </span>
+    `);
+  }
+};
+_FxAvatar.styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      --_size: var(--fx-size-md, 36px);
+      --_bg: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.08));
+      --_color: var(--fx-text-default, #1e293b);
+    }
+    :host([size='sm']) { --_size: var(--fx-size-sm, 24px); }
+    :host([size='lg']) { --_size: var(--fx-size-lg, 48px); }
+
+    .avatar {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--_size);
+      height: var(--_size);
+      min-width: var(--_size);
+      box-sizing: border-box;
+      background: var(--_bg);
+      color: var(--_color);
+      font-weight: 700;
+      font-size: calc(var(--_size) / 2.2);
+      line-height: 1;
+      overflow: hidden;
+      text-decoration: none;
+      /* border-radius definido por shape abaixo */
+    }
+    :host([shape='square']) .avatar { border-radius: var(--fx-radius-sm); }
+    :host([shape='rounded']) .avatar { border-radius: var(--fx-radius-md); }
+    :host([shape='circle']) .avatar, :host([shape='']) .avatar { border-radius: var(--fx-radius-full); }
+
+    .avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+    .avatar.text { font-size: calc(var(--_size) / 2.6); }
+    .avatar .slot-icon { font-size: calc(var(--_size) / 2.4); }
+
+    /* grupo empilhado */
+    :host(.avatar-group) { display: inline-flex; }
+    :host(.avatar-group) > .avatar {
+      border: 2px solid var(--fx-surface-background);
+      margin-left: calc(var(--_size) / -3);
+      z-index: 1;
+    }
+    :host(.avatar-group) > .avatar:last-child { margin-left: 0; }
+    :host(.avatar-group) > .avatar:hover { z-index: 2; }
+  `;
+let FxAvatar = _FxAvatar;
+function defineFxAvatar() {
+  return defineElement("fx-avatar", FxAvatar);
+}
+export {
+  FxAvatar,
+  defineFxAvatar
+};
+//# sourceMappingURL=avatar.js.map

package/dist/components/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../../src/components/avatar/avatar.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-avatar> — Representação visual de usuário/item.\n *\n * Atributos: size (number px / sm|md|lg), shape (circle|rounded|square),\n * variant (image|text|icon), src (imagem), alt (acessibilidade).\n * Slots: `icon` (glifo/emoji quando variant=icon) e padrão (iniciais).\n *\n * Uso em grupo: posicione vários `<fx-avatar>` em um container com a classe\n * `avatar-group` (empilha com overlap automático).\n */\nexport class FxAvatar extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      --_size: var(--fx-size-md, 36px);\n      --_bg: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.08));\n      --_color: var(--fx-text-default, #1e293b);\n    }\n    :host([size='sm']) { --_size: var(--fx-size-sm, 24px); }\n    :host([size='lg']) { --_size: var(--fx-size-lg, 48px); }\n\n    .avatar {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--_size);\n      height: var(--_size);\n      min-width: var(--_size);\n      box-sizing: border-box;\n      background: var(--_bg);\n      color: var(--_color);\n      font-weight: 700;\n      font-size: calc(var(--_size) / 2.2);\n      line-height: 1;\n      overflow: hidden;\n      text-decoration: none;\n      /* border-radius definido por shape abaixo */\n    }\n    :host([shape='square']) .avatar { border-radius: var(--fx-radius-sm); }\n    :host([shape='rounded']) .avatar { border-radius: var(--fx-radius-md); }\n    :host([shape='circle']) .avatar, :host([shape='']) .avatar { border-radius: var(--fx-radius-full); }\n\n    .avatar img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      display: block;\n    }\n    .avatar.text { font-size: calc(var(--_size) / 2.6); }\n    .avatar .slot-icon { font-size: calc(var(--_size) / 2.4); }\n\n    /* grupo empilhado */\n    :host(.avatar-group) { display: inline-flex; }\n    :host(.avatar-group) > .avatar {\n      border: 2px solid var(--fx-surface-background);\n      margin-left: calc(var(--_size) / -3);\n      z-index: 1;\n    }\n    :host(.avatar-group) > .avatar:last-child { margin-left: 0; }\n    :host(.avatar-group) > .avatar:hover { z-index: 2; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['size', 'shape', 'variant', 'src', 'alt'];\n  }\n\n  get variant(): string { return this.getAttr('variant', 'text'); }\n  get src(): string { return this.getAttr('src'); }\n  set src(v: string) { this.setAttribute('src', v); }\n\n  protected override render(): void {\n    const variant = this.variant;\n    const src = this.getAttr('src');\n    const alt = this.getAttr('alt', '');\n    const isIcon = variant === 'icon';\n    const isImage = variant === 'image' && src;\n\n    this.setTemplate(`\n      <span class=\"avatar${isImage ? ' image' : isIcon ? ' icon-slot' : ' text'}\" part=\"avatar\" aria-label=\"${esc(alt)}\" role=\"img\">\n        ${isImage\n                          ? `<img src=\"${esc(src)}\" alt=\"${esc(alt)}\">`\n          : isIcon\n            ? `<slot name=\"icon\" class=\"slot-icon\"></slot>`\n            : `<slot></slot>`}\n      </span>\n    `);\n  }\n}\n\nexport function defineFxAvatar(): typeof FxAvatar {\n  return defineElement('fx-avatar', FxAvatar);\n}\n"],"names":[],"mappings":";;;;AAeO,MAAM,YAAN,MAAM,kBAAiB,UAAU;AAAA,EAsDtC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,SAAS,WAAW,OAAO,KAAK;AAAA,EAClD;AAAA,EAEA,IAAI,UAAkB;AAAE,WAAO,KAAK,QAAQ,WAAW,MAAM;AAAA,EAAG;AAAA,EAChE,IAAI,MAAc;AAAE,WAAO,KAAK,QAAQ,KAAK;AAAA,EAAG;AAAA,EAChD,IAAI,IAAI,GAAW;AAAE,SAAK,aAAa,OAAO,CAAC;AAAA,EAAG;AAAA,EAE/B,SAAe;AAChC,UAAM,UAAU,KAAK;AACrB,UAAM,MAAM,KAAK,QAAQ,KAAK;AAC9B,UAAM,MAAM,KAAK,QAAQ,OAAO,EAAE;AAClC,UAAM,SAAS,YAAY;AAC3B,UAAM,UAAU,YAAY,WAAW;AAEvC,SAAK,YAAY;AAAA,2BACM,UAAU,WAAW,SAAS,eAAe,OAAO,+BAA+B,IAAI,GAAG,CAAC;AAAA,UAC5G,UACkB,aAAa,IAAI,GAAG,CAAC,UAAU,IAAI,GAAG,CAAC,OACvD,SACE,gDACA,eAAe;AAAA;AAAA,KAExB;AAAA,EACH;AACF;AA9EE,UAAgB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,WAAN;AAiFA,SAAS,iBAAkC;AAChD,SAAO,cAAc,aAAa,QAAQ;AAC5C;"}

package/dist/components/avatar/index.d.ts

@@ -0,0 +1,8 @@
+import { FxAvatar } from './avatar';
+export { FxAvatar };
+declare global {
+    interface HTMLElementTagNameMap {
+        'fx-avatar': FxAvatar;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,CAAC;AAIpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/avatar/index.js

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

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

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

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

@@ -0,0 +1,35 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-breadcrumb> — Trilha de navegação hierárquica.
+ *
+ * Atributos: size (sm|md|lg), separator (glifo entre itens, padrão '/'),
+ * label (acessibilidade, padrão 'Breadcrumb').
+ * Slots: `item` (repetível — cada <fx-breadcrumb-item> ou elemento com
+ * [slot="item"] vira um passo) e `separator` (customiza o separador).
+ *
+ * Marcação declarativa recomendada:
+ *   <fx-breadcrumb>
+ *     <fx-breadcrumb-item href="/">Home</fx-breadcrumb-item>
+ *     <fx-breadcrumb-item href="/produtos">Produtos</fx-breadcrumb-item>
+ *     <fx-breadcrumb-item>Detalhe</fx-breadcrumb-item>
+ *   </fx-breadcrumb>
+ *
+ * Eventos (composed): `select` (detail: { item, index }) ao clicar num item.
+ */
+export declare class FxBreadcrumb extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    protected render(): void;
+    /**
+     * Move os itens do light DOM para o nav e intercala separadores.
+     * Como o playground atribui innerHTML (filhos chegam assincronamente) e
+     * re-renders posteriores já terão os itens no nav, a lógica abaixo é
+     * idempotente: coleta filhos do light DOM apenas na 1ª chamada.
+     */
+    private _decorateItems;
+    private _items;
+    protected connectedCallback(): void;
+    protected disconnectedCallback(): void;
+}
+export declare function defineFxBreadcrumb(): typeof FxBreadcrumb;
+//# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,113 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+import { esc } from "../../core/sanitize.js";
+const _FxBreadcrumb = class _FxBreadcrumb extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._items = [];
+  }
+  static get observedAttributes() {
+    return ["size", "separator", "label"];
+  }
+  render() {
+    const label = this.getAttr("label", "Breadcrumb");
+    this.setTemplate(`
+      <nav part="nav" aria-label="${esc(label)}"></nav>
+    `);
+    this._decorateItems();
+  }
+  /**
+   * Move os itens do light DOM para o nav e intercala separadores.
+   * Como o playground atribui innerHTML (filhos chegam assincronamente) e
+   * re-renders posteriores já terão os itens no nav, a lógica abaixo é
+   * idempotente: coleta filhos do light DOM apenas na 1ª chamada.
+   */
+  _decorateItems() {
+    const nav = this.shadowRoot?.querySelector("nav");
+    if (!nav) return;
+    const sep = this.getAttr("separator", "/");
+    if (this._items.length === 0) {
+      this._items = Array.from(this.children).filter(
+        (el) => el.matches('[slot="item"]')
+      );
+    }
+    nav.innerHTML = "";
+    this._items.forEach((item, i) => {
+      const isLast = i === this._items.length - 1;
+      item.setAttribute("aria-current", isLast ? "page" : "false");
+      nav.appendChild(item);
+      if (isLast) return;
+      const s = document.createElement("span");
+      s.className = "sep";
+      s.setAttribute("part", "separator");
+      s.setAttribute("aria-hidden", "true");
+      s.textContent = sep;
+      nav.appendChild(s);
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const obs = new MutationObserver(() => {
+      if (this.children.length > 0) {
+        obs.disconnect();
+        this._decorateItems();
+      }
+    });
+    obs.observe(this, { childList: true });
+    if (this.children.length > 0) this._decorateItems();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._items = [];
+  }
+};
+_FxBreadcrumb.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    nav {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: var(--fx-space-xs);
+    }
+    :host([size='sm']) nav { font-size: calc(var(--fx-font-size) - 2px); }
+    :host([size='lg']) nav { font-size: calc(var(--fx-font-size) + 2px); }
+
+    /* itens (movidos para o nav no shadow DOM) */
+    nav [slot='item'] {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--fx-space-xs);
+      color: var(--fx-text-muted);
+      text-decoration: none;
+      cursor: pointer;
+      transition: color var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    nav [slot='item']:hover { color: var(--fx-color-primary); }
+    nav [slot='item'][aria-current='page'] {
+      color: var(--fx-text-default);
+      font-weight: 600;
+      cursor: default;
+    }
+    nav [slot='item'][aria-current='page']:hover { color: var(--fx-text-default); }
+
+    .sep {
+      color: var(--fx-text-muted);
+      user-select: none;
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+let FxBreadcrumb = _FxBreadcrumb;
+function defineFxBreadcrumb() {
+  return defineElement("fx-breadcrumb", FxBreadcrumb);
+}
+export {
+  FxBreadcrumb,
+  defineFxBreadcrumb
+};
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,8 @@
+import { FxBreadcrumb } from './breadcrumb';
+export { FxBreadcrumb };
+declare global {
+    interface HTMLElementTagNameMap {
+        'fx-breadcrumb': FxBreadcrumb;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAsB,MAAM,cAAc,CAAC;AAEhE,OAAO,EAAE,YAAY,EAAE,CAAC;AAIxB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/components/breadcrumb/index.js

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

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

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

package/dist/components/card/card.d.ts

@@ -0,0 +1,15 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-card> — Container de conteúdo com cabeçalho, corpo e rodapé.
+ *
+ * Atributos: variant (elevated|flat|outline, padrão elevated), size (sm|md|lg),
+ * padded (exibe padding interno), heading (rótulo opcional no cabeçalho).
+ * Slots: `header`, padrão (conteúdo), `footer`.
+ */
+export declare class FxCard extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    protected render(): void;
+}
+export declare function defineFxCard(): typeof FxCard;
+//# sourceMappingURL=card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;GAMG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,SAmDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;CAUlC;AAED,wBAAgB,YAAY,IAAI,OAAO,MAAM,CAE5C"}