@wrrdev/fenix-ui 1.0.17 → 1.1.1

package/dist/components/confirmpopup/confirmpopup.js

@@ -0,0 +1,233 @@
+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 _FxConfirmPopup = class _FxConfirmPopup extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._previouslyFocused = null;
+    this._onReposition = () => {
+      if (!this.open) return;
+      const popup = this.root.querySelector(".popup");
+      if (popup && !popup.hidden) this._position(popup);
+    };
+  }
+  static get observedAttributes() {
+    return ["open", "target", "message", "icon", "accept-label", "reject-label", "position"];
+  }
+  get open() {
+    return this.hasAttr("open");
+  }
+  set open(value) {
+    this.toggleAttr("open", value);
+  }
+  render() {
+    const message = this.getAttr("message");
+    const icon = this.getAttr("icon");
+    const iconIsFx = isFenixIconName(icon);
+    if (iconIsFx) void __vitePreload(() => import("../../icons/index.js"), true ? __vite__mapDeps([0,1,2]) : void 0, import.meta.url);
+    const acceptLabel = this.getAttr("accept-label", "Sim");
+    const rejectLabel = this.getAttr("reject-label", "Não");
+    this.setTemplate(`
+      <div class="popup" part="popup" role="alertdialog" aria-modal="false" ${this.open ? "" : "hidden"}>
+        <div class="message" part="message">
+          ${icon ? `<span class="icon${iconIsFx ? " fx-icon" : ""}" aria-hidden="true">${esc(icon)}</span>` : ""}
+          <p class="text"><slot>${esc(message)}</slot></p>
+        </div>
+        <footer part="footer">
+          <slot name="reject">
+            <button type="button" class="reject" part="reject-button">${esc(rejectLabel)}</button>
+          </slot>
+          <slot name="accept">
+            <button type="button" class="accept" part="accept-button">${esc(acceptLabel)}</button>
+          </slot>
+        </footer>
+      </div>
+    `);
+    if (!this.open) return;
+    const popup = this.root.querySelector(".popup");
+    if (!popup) return;
+    const close = (event) => {
+      this.open = false;
+      this._cleanup?.();
+      this._cleanup = void 0;
+      this._restoreFocus();
+      this.dispatchEvent(new CustomEvent(event, { bubbles: true, composed: true }));
+    };
+    this.root.querySelector(".reject")?.addEventListener("click", () => close("reject"));
+    this.root.querySelector(".accept")?.addEventListener("click", () => close("accept"));
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        close("reject");
+      }
+    };
+    const onPointerDown = (e) => {
+      const path = e.composedPath();
+      const anchor = this._anchor();
+      const hitAnchor = anchor ? path.includes(anchor) : false;
+      if (!path.includes(popup) && !hitAnchor) close("reject");
+    };
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onPointerDown, true);
+    this._cleanup = () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onPointerDown, true);
+    };
+    this._position(popup);
+    this._previouslyFocused = document.activeElement;
+    requestAnimationFrame(() => {
+      this.root.querySelector("button.accept")?.focus();
+    });
+  }
+  _anchor() {
+    const selector = this.getAttr("target");
+    if (!selector) return null;
+    try {
+      return document.querySelector(selector);
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Posiciona o popup fixo junto ao âncora, acima ou abaixo dinamicamente:
+   * `position="auto"` (padrão) prefere abaixo e faz flip para cima quando
+   * não há espaço; `top`/`bottom` forçam o lado.
+   */
+  _position(popup) {
+    const anchor = this._anchor();
+    if (!anchor) return;
+    popup.hidden = false;
+    const a = anchor.getBoundingClientRect();
+    const p = popup.getBoundingClientRect();
+    const gap = 8;
+    const margin = 8;
+    let side;
+    const pos = this.getAttr("position", "auto");
+    if (pos === "top") side = "top";
+    else if (pos === "bottom") side = "bottom";
+    else side = a.bottom + gap + p.height <= window.innerHeight - margin ? "bottom" : "top";
+    const left = Math.min(
+      Math.max(margin, a.left + a.width / 2 - p.width / 2),
+      window.innerWidth - p.width - margin
+    );
+    const top = side === "bottom" ? a.bottom + gap : a.top - gap - p.height;
+    popup.dataset.side = side;
+    popup.style.left = `${Math.round(left)}px`;
+    popup.style.top = `${Math.round(Math.max(margin, top))}px`;
+    const arrowX = Math.min(Math.max(a.left + a.width / 2 - left, 16), p.width - 16);
+    popup.style.setProperty("--fxcp-arrow-x", `${Math.round(arrowX)}px`);
+  }
+  _restoreFocus() {
+    if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();
+    this._previouslyFocused = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("scroll", this._onReposition, true);
+    window.addEventListener("resize", this._onReposition);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("scroll", this._onReposition, true);
+    window.removeEventListener("resize", this._onReposition);
+    this._cleanup?.();
+    this._cleanup = void 0;
+    this._restoreFocus();
+  }
+};
+_FxConfirmPopup.styles = css`
+    :host { display: contents; }
+    .popup {
+      position: fixed;
+      margin: 0;
+      background: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-md);
+      box-shadow: var(--fx-shadow-lg);
+      padding: var(--fx-space-md) var(--fx-space-lg);
+      min-width: 220px;
+      max-width: min(380px, calc(100vw - 24px));
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      color: var(--fx-text-default);
+      z-index: var(--fx-z-modal, 1100);
+      animation: fxcp-pop var(--fx-motion-duration-fast, 150ms) var(--fx-motion-easing, ease);
+    }
+    .popup[hidden] { display: none; }
+    @keyframes fxcp-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
+    /* seta indicadora */
+    .popup::before {
+      content: '';
+      position: absolute;
+      left: var(--fxcp-arrow-x, 50%);
+      border: 7px solid transparent;
+    }
+    .popup[data-side='bottom']::before {
+      top: -14px;
+      border-bottom-color: var(--fx-border-default);
+    }
+    .popup[data-side='top']::before {
+      bottom: -14px;
+      border-top-color: var(--fx-border-default);
+    }
+    .popup::after {
+      content: '';
+      position: absolute;
+      left: var(--fxcp-arrow-x, 50%);
+      border: 6px solid transparent;
+    }
+    .popup[data-side='bottom']::after {
+      top: -12px;
+      border-bottom-color: var(--fx-surface-background);
+    }
+    .popup[data-side='top']::after {
+      bottom: -12px;
+      border-top-color: var(--fx-surface-background);
+    }
+    .message {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--fx-space-sm);
+    }
+    .icon { font-size: calc(var(--fx-font-size) + 4px); line-height: 1.2; }
+    ${FENIX_ICON_BASE_CSS}
+    .icon.fx-icon { font-size: calc(var(--fx-font-size) + 6px); color: var(--fx-color-primary); }
+    .text { margin: 0; }
+    footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--fx-space-sm);
+      margin-top: var(--fx-space-md);
+    }
+    footer button {
+      font-family: var(--fx-font-family);
+      font-size: calc(var(--fx-font-size) - 2px);
+      padding: var(--fx-space-xs) var(--fx-space-md);
+      border-radius: var(--fx-radius-sm);
+      border: 1px solid var(--fx-border-default);
+      background: var(--fx-surface-background);
+      color: var(--fx-text-default);
+      cursor: pointer;
+      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    footer button:hover { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.04)); }
+    footer button.accept {
+      background: var(--fx-color-primary);
+      border-color: var(--fx-color-primary);
+      color: #fff;
+    }
+    footer button.accept:hover { filter: brightness(0.92); background: var(--fx-color-primary); }
+  `;
+let FxConfirmPopup = _FxConfirmPopup;
+function defineFxConfirmPopup() {
+  return defineElement("fx-confirmpopup", FxConfirmPopup);
+}
+export {
+  FxConfirmPopup,
+  defineFxConfirmPopup
+};
+//# sourceMappingURL=confirmpopup.js.map

package/dist/components/confirmpopup/confirmpopup.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../src/components/confirmpopup/confirmpopup.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-confirmpopup> — Popup de confirmação não-modal ancorado em um elemento,\n * exibido acima ou abaixo dinamicamente (com flip automático quando não há\n * espaço na viewport), no estilo ConfirmPopup do PrimeVue.\n *\n * Atributos:\n *  - target (seletor CSS do elemento âncora — obrigatório para abrir);\n *  - message (texto da mensagem, quando o slot padrão não é usado);\n *  - icon (emoji/glifo exibido antes da mensagem; se for um nome da Fenix Icons,\n *    ex.: icon=\"help\", é renderizado com a fonte de ícones);\n *  - accept-label / reject-label (textos dos botões padrão);\n *  - position (top|bottom|auto — padrão `auto`, que faz flip conforme o espaço);\n *  - open (exibe o popup).\n *\n * Slots:\n *  - padrão: corpo da mensagem (template \"message\");\n *  - `accept`: conteúdo do botão de confirmação (template \"accept\");\n *  - `reject`: conteúdo do botão de rejeição (template \"reject\").\n *\n * Eventos (composed): `accept` e `reject` — ambos fecham o popup.\n */\nexport class FxConfirmPopup extends FxElement {\n  static override styles = css`\n    :host { display: contents; }\n    .popup {\n      position: fixed;\n      margin: 0;\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      box-shadow: var(--fx-shadow-lg);\n      padding: var(--fx-space-md) var(--fx-space-lg);\n      min-width: 220px;\n      max-width: min(380px, calc(100vw - 24px));\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      color: var(--fx-text-default);\n      z-index: var(--fx-z-modal, 1100);\n      animation: fxcp-pop var(--fx-motion-duration-fast, 150ms) var(--fx-motion-easing, ease);\n    }\n    .popup[hidden] { display: none; }\n    @keyframes fxcp-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n    /* seta indicadora */\n    .popup::before {\n      content: '';\n      position: absolute;\n      left: var(--fxcp-arrow-x, 50%);\n      border: 7px solid transparent;\n    }\n    .popup[data-side='bottom']::before {\n      top: -14px;\n      border-bottom-color: var(--fx-border-default);\n    }\n    .popup[data-side='top']::before {\n      bottom: -14px;\n      border-top-color: var(--fx-border-default);\n    }\n    .popup::after {\n      content: '';\n      position: absolute;\n      left: var(--fxcp-arrow-x, 50%);\n      border: 6px solid transparent;\n    }\n    .popup[data-side='bottom']::after {\n      top: -12px;\n      border-bottom-color: var(--fx-surface-background);\n    }\n    .popup[data-side='top']::after {\n      bottom: -12px;\n      border-top-color: var(--fx-surface-background);\n    }\n    .message {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--fx-space-sm);\n    }\n    .icon { font-size: calc(var(--fx-font-size) + 4px); line-height: 1.2; }\n    ${FENIX_ICON_BASE_CSS}\n    .icon.fx-icon { font-size: calc(var(--fx-font-size) + 6px); color: var(--fx-color-primary); }\n    .text { margin: 0; }\n    footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: var(--fx-space-sm);\n      margin-top: var(--fx-space-md);\n    }\n    footer button {\n      font-family: var(--fx-font-family);\n      font-size: calc(var(--fx-font-size) - 2px);\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      border-radius: var(--fx-radius-sm);\n      border: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-background);\n      color: var(--fx-text-default);\n      cursor: pointer;\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    footer button:hover { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.04)); }\n    footer button.accept {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n      color: #fff;\n    }\n    footer button.accept:hover { filter: brightness(0.92); background: var(--fx-color-primary); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['open', 'target', 'message', 'icon', 'accept-label', 'reject-label', 'position'];\n  }\n\n  get open(): boolean { return this.hasAttr('open'); }\n  set open(value: boolean) { this.toggleAttr('open', value); }\n\n  protected override render(): void {\n    const message = this.getAttr('message');\n    const icon = this.getAttr('icon');\n    const iconIsFx = isFenixIconName(icon);\n    if (iconIsFx) void import('../../icons');\n    const acceptLabel = this.getAttr('accept-label', 'Sim');\n    const rejectLabel = this.getAttr('reject-label', 'Não');\n\n    this.setTemplate(`\n      <div class=\"popup\" part=\"popup\" role=\"alertdialog\" aria-modal=\"false\" ${this.open ? '' : 'hidden'}>\n        <div class=\"message\" part=\"message\">\n          ${icon ? `<span class=\"icon${iconIsFx ? ' fx-icon' : ''}\" aria-hidden=\"true\">${esc(icon)}</span>` : ''}\n          <p class=\"text\"><slot>${esc(message)}</slot></p>\n        </div>\n        <footer part=\"footer\">\n          <slot name=\"reject\">\n            <button type=\"button\" class=\"reject\" part=\"reject-button\">${esc(rejectLabel)}</button>\n          </slot>\n          <slot name=\"accept\">\n            <button type=\"button\" class=\"accept\" part=\"accept-button\">${esc(acceptLabel)}</button>\n          </slot>\n        </footer>\n      </div>\n    `);\n\n    if (!this.open) return;\n\n    const popup = this.root.querySelector<HTMLElement>('.popup');\n    if (!popup) return;\n\n    const close = (event: 'accept' | 'reject'): void => {\n      this.open = false;\n      this._cleanup?.();\n      this._cleanup = undefined;\n      this._restoreFocus();\n      this.dispatchEvent(new CustomEvent(event, { bubbles: true, composed: true }));\n    };\n\n    this.root.querySelector('.reject')?.addEventListener('click', () => close('reject'));\n    this.root.querySelector('.accept')?.addEventListener('click', () => close('accept'));\n\n    // ESC fecha (reject) — clique fora fecha (reject)\n    const onKey = (e: KeyboardEvent): void => {\n      if (e.key === 'Escape') { e.stopPropagation(); close('reject'); }\n    };\n    const onPointerDown = (e: MouseEvent): void => {\n      const path = e.composedPath();\n      const anchor = this._anchor();\n      const hitAnchor = anchor ? path.includes(anchor) : false;\n      if (!path.includes(popup) && !hitAnchor) close('reject');\n    };\n    document.addEventListener('keydown', onKey);\n    document.addEventListener('pointerdown', onPointerDown, true);\n    this._cleanup = () => {\n      document.removeEventListener('keydown', onKey);\n      document.removeEventListener('pointerdown', onPointerDown, true);\n    };\n\n    this._position(popup);\n    this._previouslyFocused = document.activeElement as HTMLElement | null;\n    requestAnimationFrame(() => {\n      this.root.querySelector<HTMLElement>('button.accept')?.focus();\n    });\n  }\n\n  private _cleanup?: () => void;\n  private _previouslyFocused: HTMLElement | null = null;\n\n  private _anchor(): HTMLElement | null {\n    const selector = this.getAttr('target');\n    if (!selector) return null;\n    try {\n      return document.querySelector<HTMLElement>(selector);\n    } catch {\n      return null;\n    }\n  }\n\n  /**\n   * Posiciona o popup fixo junto ao âncora, acima ou abaixo dinamicamente:\n   * `position=\"auto\"` (padrão) prefere abaixo e faz flip para cima quando\n   * não há espaço; `top`/`bottom` forçam o lado.\n   */\n  private _position(popup: HTMLElement): void {\n    const anchor = this._anchor();\n    if (!anchor) return;\n    popup.hidden = false;\n\n    const a = anchor.getBoundingClientRect();\n    const p = popup.getBoundingClientRect();\n    const gap = 8;\n    const margin = 8;\n\n    let side: 'top' | 'bottom';\n    const pos = this.getAttr('position', 'auto');\n    if (pos === 'top') side = 'top';\n    else if (pos === 'bottom') side = 'bottom';\n    else side = a.bottom + gap + p.height <= window.innerHeight - margin ? 'bottom' : 'top';\n\n    // clamp horizontal para nunca sair da viewport\n    const left = Math.min(\n      Math.max(margin, a.left + a.width / 2 - p.width / 2),\n      window.innerWidth - p.width - margin,\n    );\n    const top = side === 'bottom' ? a.bottom + gap : a.top - gap - p.height;\n\n    popup.dataset.side = side;\n    popup.style.left = `${Math.round(left)}px`;\n    popup.style.top = `${Math.round(Math.max(margin, top))}px`;\n    // posição da seta relativa ao popup\n    const arrowX = Math.min(Math.max(a.left + a.width / 2 - left, 16), p.width - 16);\n    popup.style.setProperty('--fxcp-arrow-x', `${Math.round(arrowX)}px`);\n  }\n\n  private _restoreFocus(): void {\n    if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n    this._previouslyFocused = null;\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // reposiciona em scroll/resize enquanto aberto\n    window.addEventListener('scroll', this._onReposition, true);\n    window.addEventListener('resize', this._onReposition);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('scroll', this._onReposition, true);\n    window.removeEventListener('resize', this._onReposition);\n    this._cleanup?.();\n    this._cleanup = undefined;\n    this._restoreFocus();\n  }\n\n  private _onReposition = (): void => {\n    if (!this.open) return;\n    const popup = this.root.querySelector<HTMLElement>('.popup');\n    if (popup && !popup.hidden) this._position(popup);\n  };\n}\n\nexport function defineFxConfirmPopup(): typeof FxConfirmPopup {\n  return defineElement('fx-confirmpopup', FxConfirmPopup);\n}\n\n"],"file":"components/confirmpopup/confirmpopup.js"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/confirmpopup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAwB,MAAM,gBAAgB,CAAC;AAEtE,OAAO,EAAE,cAAc,EAAE,CAAC;AAI1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,cAAc,CAAC;KACnC;CACF"}

package/dist/components/confirmpopup/index.js

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

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

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

package/dist/components/empty-state/empty-state.d.ts

@@ -0,0 +1,14 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-empty-state> — Estado vazio/ilustrativo para listas e telas sem dados.
+ *
+ * Atributos: icon (glifo/emoji), heading (título), description (texto de apoio).
+ * Slots: `icon` (customiza o ícone), `action` (botão/chamada para ação).
+ */
+export declare class FxEmptyState extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    protected render(): void;
+}
+export declare function defineFxEmptyState(): typeof FxEmptyState;
+//# sourceMappingURL=empty-state.d.ts.map

package/dist/components/empty-state/empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;GAKG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SAsCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;CAelC;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}

package/dist/components/empty-state/empty-state.js

@@ -0,0 +1,71 @@
+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 _FxEmptyState = class _FxEmptyState extends FxElement {
+  static get observedAttributes() {
+    return ["icon", "heading", "description"];
+  }
+  render() {
+    const icon = this.getAttr("icon", "📭");
+    const heading = this.getAttr("heading");
+    const description = this.getAttr("description");
+    this.setTemplate(`
+      <div class="wrap" part="wrap">
+        <span class="icon" part="icon" aria-hidden="true">${esc(icon)}</span>
+        <h4 part="heading" ${heading ? "" : "hidden"}>${esc(heading)}</h4>
+        <p part="description" ${description ? "" : "hidden"}>${esc(description)}</p>
+        <slot name="icon"></slot>
+        <span class="action"><slot name="action"></slot></span>
+      </div>
+    `);
+  }
+};
+_FxEmptyState.styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    .wrap {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--fx-space-sm);
+      padding: var(--fx-space-2xl, 48px) var(--fx-space-xl);
+      text-align: center;
+      max-width: 420px;
+    }
+    .icon {
+      font-size: calc(var(--fx-font-size) + 28px);
+      line-height: 1;
+      color: var(--fx-text-muted);
+    }
+    .icon[hidden] { display: none; }
+    h4 {
+      margin: 0;
+      font-size: calc(var(--fx-font-size) + 3px);
+      font-weight: 600;
+      color: var(--fx-text-default);
+    }
+    h4[hidden] { display: none; }
+    p {
+      margin: 0;
+      font-size: calc(var(--fx-font-size) - 1px);
+      color: var(--fx-text-muted);
+      line-height: 1.5;
+    }
+    p[hidden] { display: none; }
+    .action { margin-top: var(--fx-space-sm); }
+    .action:empty { display: none; }
+  `;
+let FxEmptyState = _FxEmptyState;
+function defineFxEmptyState() {
+  return defineElement("fx-empty-state", FxEmptyState);
+}
+export {
+  FxEmptyState,
+  defineFxEmptyState
+};
+//# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","sources":["../../../src/components/empty-state/empty-state.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-empty-state> — Estado vazio/ilustrativo para listas e telas sem dados.\n *\n * Atributos: icon (glifo/emoji), heading (título), description (texto de apoio).\n * Slots: `icon` (customiza o ícone), `action` (botão/chamada para ação).\n */\nexport class FxEmptyState extends FxElement {\n  static override styles = css`\n    :host {\n      display: flex;\n      justify-content: center;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .wrap {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      padding: var(--fx-space-2xl, 48px) var(--fx-space-xl);\n      text-align: center;\n      max-width: 420px;\n    }\n    .icon {\n      font-size: calc(var(--fx-font-size) + 28px);\n      line-height: 1;\n      color: var(--fx-text-muted);\n    }\n    .icon[hidden] { display: none; }\n    h4 {\n      margin: 0;\n      font-size: calc(var(--fx-font-size) + 3px);\n      font-weight: 600;\n      color: var(--fx-text-default);\n    }\n    h4[hidden] { display: none; }\n    p {\n      margin: 0;\n      font-size: calc(var(--fx-font-size) - 1px);\n      color: var(--fx-text-muted);\n      line-height: 1.5;\n    }\n    p[hidden] { display: none; }\n    .action { margin-top: var(--fx-space-sm); }\n    .action:empty { display: none; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['icon', 'heading', 'description'];\n  }\n\n  protected override render(): void {\n    const icon = this.getAttr('icon', '📭');\n    const heading = this.getAttr('heading');\n    const description = this.getAttr('description');\n\n    this.setTemplate(`\n      <div class=\"wrap\" part=\"wrap\">\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">${esc(icon)}</span>\n        <h4 part=\"heading\" ${heading ? '' : 'hidden'}>${esc(heading)}</h4>\n        <p part=\"description\" ${description ? '' : 'hidden'}>${esc(description)}</p>\n        <slot name=\"icon\"></slot>\n        <span class=\"action\"><slot name=\"action\"></slot></span>\n      </div>\n    `);\n  }\n}\n\nexport function defineFxEmptyState(): typeof FxEmptyState {\n  return defineElement('fx-empty-state', FxEmptyState);\n}"],"names":[],"mappings":";;;;AAWO,MAAM,gBAAN,MAAM,sBAAqB,UAAU;AAAA,EAyC1C,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,WAAW,aAAa;AAAA,EAC1C;AAAA,EAEmB,SAAe;AAChC,UAAM,OAAO,KAAK,QAAQ,QAAQ,IAAI;AACtC,UAAM,UAAU,KAAK,QAAQ,SAAS;AACtC,UAAM,cAAc,KAAK,QAAQ,aAAa;AAE9C,SAAK,YAAY;AAAA;AAAA,4DAEuC,IAAI,IAAI,CAAC;AAAA,6BACxC,UAAU,KAAK,QAAQ,IAAI,IAAI,OAAO,CAAC;AAAA,gCACpC,cAAc,KAAK,QAAQ,IAAI,IAAI,WAAW,CAAC;AAAA;AAAA;AAAA;AAAA,KAI1E;AAAA,EACH;AACF;AA3DE,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;AADpB,IAAM,eAAN;AA8DA,SAAS,qBAA0C;AACxD,SAAO,cAAc,kBAAkB,YAAY;AACrD;"}

package/dist/components/empty-state/index.d.ts

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

package/dist/components/empty-state/index.d.ts.map

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

package/dist/components/empty-state/index.js

@@ -0,0 +1,7 @@
+import { defineFxEmptyState } from "./empty-state.js";
+import { FxEmptyState } from "./empty-state.js";
+defineFxEmptyState();
+export {
+  FxEmptyState
+};
+//# sourceMappingURL=index.js.map

package/dist/components/empty-state/index.js.map

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

package/dist/components/fileupload/fileupload.d.ts

@@ -0,0 +1,42 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-fileupload> — Seletor de arquivos com upload e progresso (estilo FileUpload do PrimeVue).
+ *
+ * Atributos:
+ *  - mode (basic|advanced — `basic`: botão; `advanced`: dropzone com drag & drop);
+ *  - size (sm|md|lg, padrão md);
+ *  - severity (primary|secondary|success|warning|danger|info — cor do botão no modo basic);
+ *  - label (texto do botão/área, padrão 'Escolher arquivo');
+ *  - icon (glifo/emoji exibido antes do texto — sem o atributo, sem ícone);
+ *  - accept, multiple, disabled (como no <input type="file">);
+ *  - show-progress (exibe barra + % de upload);
+ *  - progress (0-100 — o consumidor atualiza durante o upload real);
+ *  - value (nome(s) do(s) arquivo(s) carregado(s), somente leitura/espelho).
+ *
+ * Eventos (composed): `select` (detail: { files: File[] }), `remove`, `complete`.
+ */
+export declare class FxFileUpload extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get size(): string;
+    set size(value: string);
+    /** Nomes dos arquivos selecionados (espelho em `value`). */
+    get value(): string;
+    set value(v: string);
+    get progress(): number;
+    set progress(v: number);
+    /** Arquivos selecionados (não serializável em atributo). */
+    get files(): File[];
+    set files(files: File[]);
+    protected render(): void;
+    private _files;
+    private _done;
+    private _picker;
+    private _bindPicker;
+    private _acceptFiles;
+    private _fmtSize;
+    /** Renderiza a lista de arquivos sem re-renderizar o template (mantém estado). */
+    private _syncFilesArea;
+}
+export declare function defineFxFileUpload(): typeof FxFileUpload;
+//# sourceMappingURL=fileupload.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fileupload.d.ts","sourceRoot":"","sources":["../../../src/components/fileupload/fileupload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SA+HpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAuC;IAE7D,4DAA4D;IAC5D,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAoC;IAEvD,IAAI,QAAQ,IAAI,MAAM,CAAmF;IACzG,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAA+C;IAErE,4DAA4D;IAC5D,IAAI,KAAK,IAAI,IAAI,EAAE,CAAwB;IAC3C,IAAI,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,EAItB;cAEkB,MAAM,IAAI,IAAI;IA6CjC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,KAAK,CAAS;IAEtB,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,QAAQ;IAMhB,kFAAkF;IAClF,OAAO,CAAC,cAAc;CAyBvB;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}