@wrrdev/fenix-ui 1.0.0

package/README.md

@@ -0,0 +1,117 @@
+# FenixUI
+
+Design System Web **nativo** — Web Components + Shadow DOM + Design Tokens.
+Independente de framework: funciona em Vue, React, Angular, Svelte, HTML puro, Java/JSP, PHP, .NET.
+
+## Arquitetura (por que tree-shaking de verdade)
+
+```
+src/
+├── core/                  # NÚCLEO compartilhado
+│   ├── tokens.ts          # Design Tokens (claro/escuro) → var(--fx-*)
+│   ├── theme.ts           # API global: FenixUI.configure/theme/setTokens/resetTheme
+│   ├── base.ts            # FxElement: classe-base (Shadow DOM + render)
+│   ├── define.ts          # registro seguro no CustomElementRegistry
+│   └── css.ts             # helpers CSS
+└── components/
+    ├── button/            # cada componente importa APENAS o core
+    ├── badge/
+    └── spinner/
+```
+
+O build usa **Rollup `preserveModules`**: o `dist/` espelha o `src/`, um arquivo por módulo.
+Quando o cliente importa apenas um componente, o bundler dele puxa **somente** esse módulo +
+o core compartilhado — nunca a biblioteca inteira:
+
+```ts
+// O cliente compila apenas Button + core (~9 kB não-minificado).
+import '@wrrdev/fenix-ui/button';
+import { FenixUI } from '@wrrdev/fenix-ui/theme';
+
+FenixUI.theme('dark');
+```
+
+> Verificação real: bundle de consumidor contendo apenas `fx-button` e o core;
+> `fx-badge`/`fx-spinner` ficaram **fora** do output do cliente.
+
+## Consumo
+
+### npm + bundler (recomendado — tree-shaking automático)
+
+```ts
+import '@wrrdev/fenix-ui/button';
+import '@wrrdev/fenix-ui/badge';
+
+const el = document.createElement('fx-button');
+el.setAttribute('variant', 'primary');
+el.textContent = 'Salvar';
+document.body.append(el);
+```
+
+### CDN / HTML puro / JSP / .NET
+
+```html
+<script src="https://cdn.exemplo.com/fenix-ui@0.1.0/dist/fenix-ui.umd.min.js"></script>
+<script>
+  FenixUI.configure({ theme: 'dark' });
+</script>
+
+<fx-button variant="danger" size="sm">Excluir</fx-button>
+<fx-badge variant="success">Aprovado</fx-badge>
+```
+
+### Temas em runtime (sem recompilar)
+
+```ts
+FenixUI.theme('dark');                                  // claro | escuro
+FenixUI.setTokens({ color: { primary: '#0d9488' } });   // override parcial profundo
+FenixUI.resetTheme();
+```
+
+Os tokens viram CSS Custom Properties (`--fx-color-primary`, `--fx-radius-md`, …) no `:root`,
+atravessando o Shadow DOM. Todo componente reage automaticamente.
+
+## Componentes (fase 1)
+
+| Elemento     | Atributos principais                          | Slots        |
+|--------------|-----------------------------------------------|--------------|
+| `fx-button`  | `variant` (primary/secondary/success/warning/danger/ghost/outline), `size`, `disabled`, `loading`, `type`, `full` | default, `icon` |
+| `fx-badge`   | `variant` (default/primary/success/warning/danger/info), `round` | default |
+| `fx-input`   | `type` (text/number/email/password/search/tel/url), `value`, `size`, `placeholder`, `disabled`, `readonly`, `min/max/step` | — |
+| `fx-select`  | `value`, `size` (sm/md/lg), `disabled`, `placeholder` — filhos `<option>` nativos | `(padrão)` |
+| `fx-switch`  | `checked`, `disabled`, `size` (sm/md/lg)      | `(padrão)`   |
+| `fx-spinner` | `size` (sm/md/lg)                             | —            |
+
+Todos os componentes com tamanho usam **`md` como padrão** (valores inválidos caem para `md`).
+Escala alinhada ao mercado (Material/Ant): **sm ≈ 32px · md ≈ 40px (padrão) · lg ≈ 48px**.
+
+Eventos usam o nativo `click` no botão; `input`, `change` e o `change` do select são
+`CustomEvent`s **composed** com `detail: { value }` (atravessam o Shadow DOM).
+
+### Tokens de efeito (configuráveis por preset)
+
+```ts
+FenixUI.setTokens({
+  effect: {
+    ripple: '0',        // desativa o efeito ripple do fx-button
+    'focus-ring': 'none', // campos sem anel de foco/sobra
+  },
+});
+```
+
+Presets sobrescrevem **apenas** os tokens informados — o restante herda do tema
+base (claro/escuro) via deep merge (`deepMerge`).
+
+## Scripts
+
+| Comando              | Ação                                                        |
+|----------------------|-------------------------------------------------------------|
+| `npm run dev`        | Playground local (`index.html`)                             |
+| `npm run test`       | Testes unitários (Vitest + jsdom)                           |
+| `npm run typecheck`  | TypeScript estrito                                          |
+| `npm run build`      | ESM modular + `.d.ts` + bundle CDN UMD                      |
+
+## Convenções
+
+- Elemento: `fx-{component}` · Token: `--fx-{grupo}-{chave}` · Tema: `light | dark`
+- Sem dependência de Tailwind/Vue/React; reset interno mínimo; acessibilidade desde a primeira implementação.

package/dist/cdn.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Entrada para o bundle CDN/UMD (`fenix-ui.umd.min.js`).
+ * Importa e registra todos os componentes de uma vez.
+ */
+import './index';
+//# sourceMappingURL=cdn.d.ts.map

package/dist/cdn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,SAAS,CAAC"}

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

@@ -0,0 +1,14 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-alert> — Aviso inline com variantes semânticas.
+ *
+ * Atributos: variant (info|success|warning|danger, padrão info), title, dismissible.
+ * Slot padrão: conteúdo da mensagem. Evento `dismiss`.
+ */
+export declare class FxAlert extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    protected render(): void;
+}
+export declare function defineFxAlert(): typeof FxAlert;
+//# sourceMappingURL=alert.d.ts.map

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

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

package/dist/components/alert/alert.js

@@ -0,0 +1,74 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxAlert = class _FxAlert extends FxElement {
+  static get observedAttributes() {
+    return ["variant", "title", "dismissible"];
+  }
+  render() {
+    const variant = this.getAttr("variant", "info");
+    const title = this.getAttr("title");
+    const icons = {
+      info: "ℹ",
+      success: "✓",
+      warning: "⚠",
+      danger: "✕"
+    };
+    this.setTemplate(`
+      <div class="alert" part="alert" role="alert">
+        <span class="icon">${icons[variant] ?? "ℹ"}</span>
+        <div class="content">
+          ${title ? `<div class="title">${title}</div>` : ""}
+          <div class="body"><slot></slot></div>
+        </div>
+        ${this.hasAttr("dismissible") ? '<button type="button" class="close" aria-label="Fechar">×</button>' : ""}
+      </div>
+    `);
+    this.root.querySelector(".close")?.addEventListener("click", () => {
+      this.hidden = true;
+      this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
+    });
+  }
+};
+_FxAlert.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      --_color: var(--fx-color-primary);
+      --_bg: color-mix(in srgb, var(--fx-color-primary) 10%, var(--fx-surface-background));
+    }
+    :host([variant='success']) { --_color: var(--fx-color-success); --_bg: color-mix(in srgb, var(--fx-color-success) 10%, var(--fx-surface-background)); }
+    :host([variant='warning']) { --_color: var(--fx-color-warning); --_bg: color-mix(in srgb, var(--fx-color-warning) 12%, var(--fx-surface-background)); }
+    :host([variant='danger']) { --_color: var(--fx-color-danger); --_bg: color-mix(in srgb, var(--fx-color-danger) 10%, var(--fx-surface-background)); }
+    .alert {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--fx-space-md);
+      background: var(--_bg);
+      border: 1px solid color-mix(in srgb, var(--_color) 30%, transparent);
+      border-radius: var(--fx-radius-md);
+      padding: var(--fx-space-md) var(--fx-space-lg);
+      font-size: var(--fx-font-size);
+      color: var(--fx-text-default);
+    }
+    :host([hidden]) { display: none; }
+    .icon { color: var(--_color); font-weight: bold; line-height: 1.4; }
+    .content { flex: 1; }
+    .title { font-weight: 600; }
+    .body { margin-top: 2px; }
+    .close {
+      border: none; background: transparent; cursor: pointer;
+      color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) + 2px);
+      line-height: 1; padding: 0; border-radius: var(--fx-radius-full);
+    }
+    .close:hover { color: var(--_color); }
+  `;
+let FxAlert = _FxAlert;
+function defineFxAlert() {
+  return defineElement("fx-alert", FxAlert);
+}
+export {
+  FxAlert,
+  defineFxAlert
+};
+//# sourceMappingURL=alert.js.map

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

@@ -0,0 +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';\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='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\">${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":";;;AAUO,MAAM,WAAN,MAAM,iBAAgB,UAAU;AAAA,EAmCrC,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,KAAK,WAAW,EAAE;AAAA;AAAA;AAAA,UAGlD,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;AA7DE,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;AADpB,IAAM,UAAN;AAgEA,SAAS,gBAAgC;AAC9C,SAAO,cAAc,YAAY,OAAO;AAC1C;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAiB,MAAM,SAAS,CAAC;AAEjD,OAAO,EAAE,OAAO,EAAE,CAAC;AAKnB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/alert/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/alert/index.ts"],"sourcesContent":["import { FxAlert, defineFxAlert } from './alert';\n\nexport { FxAlert };\n\n\ndefineFxAlert();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-alert': FxAlert;\n  }\n}\n\r\n"],"names":[],"mappings":";;AAKA,cAAA;"}

package/dist/components/autocomplete/autocomplete.d.ts

@@ -0,0 +1,20 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-autocomplete> — Campo de texto com sugestões filtradas.
+ *
+ * Atributos: value, size, placeholder, source (JSON array de strings),
+ * disabled, min-chars (padrão 1).
+ * Evento: `select` (composed, detail: { value }).
+ */
+export declare class FxAutocomplete extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get size(): string;
+    set size(v: string);
+    get value(): string;
+    set value(v: string);
+    private get source();
+    protected render(): void;
+}
+export declare function defineFxAutocomplete(): typeof FxAutocomplete;
+//# sourceMappingURL=autocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,SA8DpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAAmC;IACrD,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAoC;IAEvD,OAAO,KAAK,MAAM,GAOjB;cAEkB,MAAM,IAAI,IAAI;CAgDlC;AAED,wBAAgB,oBAAoB,IAAI,OAAO,cAAc,CAE5D"}

package/dist/components/autocomplete/autocomplete.js

@@ -0,0 +1,144 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxAutocomplete = class _FxAutocomplete extends FxElement {
+  static get observedAttributes() {
+    return ["size", "placeholder", "source", "disabled", "min-chars"];
+  }
+  get size() {
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
+  }
+  set size(v) {
+    this.setAttribute("size", v);
+  }
+  get value() {
+    return this.getAttr("value");
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+  get source() {
+    try {
+      const raw = JSON.parse(this.getAttr("source", "[]"));
+      return Array.isArray(raw) ? raw.map(String) : [];
+    } catch {
+      return [];
+    }
+  }
+  render() {
+    const placeholder = this.getAttr("placeholder");
+    this.setTemplate(`
+      <input class="field" part="input" type="text"
+        ${placeholder ? `placeholder="${placeholder}"` : ""} autocomplete="off"/>
+      <div class="list" part="list" role="listbox"></div>
+    `);
+    const field = this.root.querySelector(".field");
+    if (!field) return;
+    field.value = this.value;
+    if (this.hasAttr("disabled")) field.setAttribute("disabled", "");
+    const list = this.root.querySelector(".list");
+    const minChars = Number(this.getAttr("min-chars", "1")) || 1;
+    const openList = () => {
+      if (!list) return;
+      const q = field.value.toLowerCase();
+      const matches = this.source.filter((s) => s.toLowerCase().includes(q)).slice(0, 8);
+      list.innerHTML = matches.length ? matches.map((m) => `<button type="button" class="opt" role="option" data-v="${m}">${m}</button>`).join("") : '<div class="empty">Nenhum resultado</div>';
+      list.querySelectorAll(".opt").forEach((btn) => {
+        btn.addEventListener("click", () => {
+          field.value = btn.dataset.v ?? "";
+          this.value = field.value;
+          this.toggleAttr("open", false);
+          this.dispatchEvent(new CustomEvent("select", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.value }
+          }));
+        });
+      });
+      this.toggleAttr("open", true);
+    };
+    field.addEventListener("input", () => {
+      this.value = field.value;
+      openList();
+    });
+    field.addEventListener("focus", () => {
+      if (field.value.length >= minChars) openList();
+    });
+    document.addEventListener("click", (e) => {
+      if (!this.contains(e.target)) this.toggleAttr("open", false);
+    });
+  }
+};
+_FxAutocomplete.styles = css`
+    :host {
+      position: relative;
+      display: inline-block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    input {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: var(--fx-font-weight);
+      color: var(--fx-text-default);
+      background-color: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-md);
+      padding: var(--fx-space-md) var(--fx-space-lg);
+      width: 260px;
+      min-height: var(--fx-size-md);
+      box-sizing: border-box;
+      transition:
+        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),
+        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    input::placeholder { color: var(--fx-text-muted); opacity: 1; }
+    input:hover { border-color: var(--fx-border-hover); }
+    input:focus-visible {
+      outline: none;
+      border-color: var(--fx-color-primary);
+      box-shadow: var(--fx-effect-focus-ring, none);
+    }
+    :host([size='sm']) input { width: 220px; min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }
+    :host([size='lg']) input { width: 300px; min-height: var(--fx-size-lg); }
+    .list {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      right: 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);
+      z-index: var(--fx-z-dropdown, 1000);
+      max-height: 220px;
+      overflow-y: auto;
+      display: none;
+    }
+    :host([open]) .list { display: block; }
+    .opt {
+      display: block;
+      width: 100%;
+      text-align: left;
+      border: none;
+      background: transparent;
+      font-family: inherit;
+      font-size: inherit;
+      color: var(--fx-text-default);
+      padding: var(--fx-space-sm) var(--fx-space-md);
+      cursor: pointer;
+      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, var(--fx-surface-background)); color: var(--fx-color-primary); }
+    .empty { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); padding: var(--fx-space-sm) var(--fx-space-md); }
+  `;
+let FxAutocomplete = _FxAutocomplete;
+function defineFxAutocomplete() {
+  return defineElement("fx-autocomplete", FxAutocomplete);
+}
+export {
+  FxAutocomplete,
+  defineFxAutocomplete
+};
+//# sourceMappingURL=autocomplete.js.map

package/dist/components/autocomplete/autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.js","sources":["../../../src/components/autocomplete/autocomplete.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-autocomplete> — Campo de texto com sugestões filtradas.\n *\n * Atributos: value, size, placeholder, source (JSON array de strings),\n * disabled, min-chars (padrão 1).\n * Evento: `select` (composed, detail: { value }).\n */\nexport class FxAutocomplete extends FxElement {\n  static override styles = css`\n    :host {\n      position: relative;\n      display: inline-block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    input {\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: var(--fx-font-weight);\n      color: var(--fx-text-default);\n      background-color: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      padding: var(--fx-space-md) var(--fx-space-lg);\n      width: 260px;\n      min-height: var(--fx-size-md);\n      box-sizing: border-box;\n      transition:\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    input::placeholder { color: var(--fx-text-muted); opacity: 1; }\n    input:hover { border-color: var(--fx-border-hover); }\n    input:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    :host([size='sm']) input { width: 220px; min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }\n    :host([size='lg']) input { width: 300px; min-height: var(--fx-size-lg); }\n    .list {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      right: 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      z-index: var(--fx-z-dropdown, 1000);\n      max-height: 220px;\n      overflow-y: auto;\n      display: none;\n    }\n    :host([open]) .list { display: block; }\n    .opt {\n      display: block;\n      width: 100%;\n      text-align: left;\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      font-size: inherit;\n      color: var(--fx-text-default);\n      padding: var(--fx-space-sm) var(--fx-space-md);\n      cursor: pointer;\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, var(--fx-surface-background)); color: var(--fx-color-primary); }\n    .empty { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); padding: var(--fx-space-sm) var(--fx-space-md); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['size', 'placeholder', 'source', 'disabled', 'min-chars'];\n  }\n\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(v: string) { this.setAttribute('size', v); }\n  get value(): string { return this.getAttr('value'); }\n  set value(v: string) { this.setAttribute('value', v); }\n\n  private get source(): string[] {\n    try {\n      const raw = JSON.parse(this.getAttr('source', '[]'));\n      return Array.isArray(raw) ? raw.map(String) : [];\n    } catch {\n      return [];\n    }\n  }\n\n  protected override render(): void {\n    const placeholder = this.getAttr('placeholder');\n\n    this.setTemplate(`\n      <input class=\"field\" part=\"input\" type=\"text\"\n        ${placeholder ? `placeholder=\"${placeholder}\"` : ''} autocomplete=\"off\"/>\n      <div class=\"list\" part=\"list\" role=\"listbox\"></div>\n    `);\n\n    const field = this.root.querySelector<HTMLInputElement>('.field');\n    if (!field) return;\n    field.value = this.value;\n    if (this.hasAttr('disabled')) field.setAttribute('disabled', '');\n\n    const list = this.root.querySelector<HTMLElement>('.list');\n    const minChars = Number(this.getAttr('min-chars', '1')) || 1;\n\n    const openList = (): void => {\n      if (!list) return;\n      const q = field.value.toLowerCase();\n      const matches = this.source.filter((s) => s.toLowerCase().includes(q)).slice(0, 8);\n      list.innerHTML = matches.length\n        ? matches.map((m) => `<button type=\"button\" class=\"opt\" role=\"option\" data-v=\"${m}\">${m}</button>`).join('')\n        : '<div class=\"empty\">Nenhum resultado</div>';\n      list.querySelectorAll<HTMLButtonElement>('.opt').forEach((btn) => {\n        btn.addEventListener('click', () => {\n          field.value = btn.dataset.v ?? '';\n          this.value = field.value;\n          this.toggleAttr('open', false);\n          this.dispatchEvent(new CustomEvent('select', {\n            bubbles: true, composed: true, detail: { value: this.value },\n          }));\n        });\n      });\n      this.toggleAttr('open', true);\n    };\n\n    // Reabrir com foco sem re-render (evita perder digitação)\n    field.addEventListener('input', () => {\n      this.value = field.value;\n      openList();\n    });\n    field.addEventListener('focus', () => { if (field.value.length >= minChars) openList(); });\n\n    document.addEventListener('click', (e) => {\n      if (!this.contains(e.target as Node)) this.toggleAttr('open', false);\n    });\n  }\n}\n\nexport function defineFxAutocomplete(): typeof FxAutocomplete {\n  return defineElement('fx-autocomplete', FxAutocomplete);\n}\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/autocomplete/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/autocomplete/index.ts"],"sourcesContent":["import { FxAutocomplete, defineFxAutocomplete } from './autocomplete';\n\nexport { FxAutocomplete };\n\n\ndefineFxAutocomplete();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-autocomplete': FxAutocomplete;\n  }\n}\n\r\n"],"names":[],"mappings":";;AAKA,qBAAA;"}

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,14 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-badge> — Rótulo/contador de status.
+ *
+ * Atributos: variant (default|primary|success|warning|danger|info), round.
+ * Slots: default (conteúdo).
+ */
+export declare class FxBadge extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    protected render(): void;
+}
+export declare function defineFxBadge(): typeof FxBadge;
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;GAKG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,SAyBpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;CAGlC;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}

package/dist/components/badge/badge.js

@@ -0,0 +1,46 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxBadge = class _FxBadge extends FxElement {
+  static get observedAttributes() {
+    return ["variant", "round"];
+  }
+  render() {
+    this.setTemplate(`<span class="badge" part="badge"><slot></slot></span>`);
+  }
+};
+_FxBadge.styles = css`
+    :host {
+      display: inline-flex;
+      vertical-align: middle;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      font-family: var(--fx-font-family);
+      font-size: calc(var(--fx-font-size) - 2px);
+      font-weight: var(--fx-font-weight);
+      line-height: 1;
+      padding: var(--fx-space-xs) var(--fx-space-sm);
+      border-radius: var(--fx-radius-full);
+      border: 1px solid var(--fx-border-default);
+      background: var(--fx-surface-background);
+      color: var(--fx-text-muted);
+      white-space: nowrap;
+    }
+    :host([variant='primary']) .badge { background: var(--fx-color-primary); color: #fff; border-color: transparent; }
+    :host([variant='success']) .badge { background: var(--fx-color-success); color: #fff; border-color: transparent; }
+    :host([variant='warning']) .badge { background: var(--fx-color-warning); color: #fff; border-color: transparent; }
+    :host([variant='danger']) .badge { background: var(--fx-color-danger); color: #fff; border-color: transparent; }
+    :host([variant='info']) .badge { background: var(--fx-color-info); color: #fff; border-color: transparent; }
+    :host(:not([round])) .badge { border-radius: var(--fx-radius-sm); }
+  `;
+let FxBadge = _FxBadge;
+function defineFxBadge() {
+  return defineElement("fx-badge", FxBadge);
+}
+export {
+  FxBadge,
+  defineFxBadge
+};
+//# sourceMappingURL=badge.js.map

package/dist/components/badge/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../../../src/components/badge/badge.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-badge> — Rótulo/contador de status.\n *\n * Atributos: variant (default|primary|success|warning|danger|info), round.\n * Slots: default (conteúdo).\n */\nexport class FxBadge extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      vertical-align: middle;\n    }\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      font-family: var(--fx-font-family);\n      font-size: calc(var(--fx-font-size) - 2px);\n      font-weight: var(--fx-font-weight);\n      line-height: 1;\n      padding: var(--fx-space-xs) var(--fx-space-sm);\n      border-radius: var(--fx-radius-full);\n      border: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-background);\n      color: var(--fx-text-muted);\n      white-space: nowrap;\n    }\n    :host([variant='primary']) .badge { background: var(--fx-color-primary); color: #fff; border-color: transparent; }\n    :host([variant='success']) .badge { background: var(--fx-color-success); color: #fff; border-color: transparent; }\n    :host([variant='warning']) .badge { background: var(--fx-color-warning); color: #fff; border-color: transparent; }\n    :host([variant='danger']) .badge { background: var(--fx-color-danger); color: #fff; border-color: transparent; }\n    :host([variant='info']) .badge { background: var(--fx-color-info); color: #fff; border-color: transparent; }\n    :host(:not([round])) .badge { border-radius: var(--fx-radius-sm); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['variant', 'round'];\n  }\n\n  protected override render(): void {\n    this.setTemplate(`<span class=\"badge\" part=\"badge\"><slot></slot></span>`);\n  }\n}\n\nexport function defineFxBadge(): typeof FxBadge {\n  return defineElement('fx-badge', FxBadge);\n}"],"names":[],"mappings":";;;AAUO,MAAM,WAAN,MAAM,iBAAgB,UAAU;AAAA,EA4BrC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,OAAO;AAAA,EAC5B;AAAA,EAEmB,SAAe;AAChC,SAAK,YAAY,uDAAuD;AAAA,EAC1E;AACF;AAlCE,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;AADpB,IAAM,UAAN;AAqCA,SAAS,gBAAgC;AAC9C,SAAO,cAAc,YAAY,OAAO;AAC1C;"}

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

@@ -0,0 +1,2 @@
+export { FxBadge } from './badge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/badge/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/badge/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/badge/index.ts"],"sourcesContent":["import { defineFxBadge } from './badge';\n\n// Reexporta a classe para uso programático (instanceof, herança).\nexport { FxBadge } from './badge';\n\n// Auto-registro ao importar o subpath `@wrrdev/fenix-ui/badge`.\ndefineFxBadge();"],"names":[],"mappings":";;AAMA,cAAA;"}

package/dist/components/button/button.d.ts

@@ -0,0 +1,30 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-button> — Componente de ação (piloto).
+ *
+ * Atributos: variant, size, disabled, loading, type, full.
+ * Slots: default (rótulo), `icon` (ícone opcional).
+ * Evento: `click` nativo atravessa o Shadow DOM (composed) — ouça no host.
+ */
+export declare class FxButton extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    /** Tamanho. Padrão: `'md'`. */
+    get size(): string;
+    set size(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get loading(): boolean;
+    set loading(value: boolean);
+    protected render(): void;
+    protected connectedCallback(): void;
+    protected disconnectedCallback(): void;
+    /**
+     * Efeito ripple : cria um círculo que expande do ponto
+     * de clique e desaparece. Respeita o token `effect.ripple` ('0' desativa)
+     * e `prefers-reduced-motion` (via CSS).
+     */
+    private spawnRipple;
+}
+export declare function defineFxButton(): typeof FxButton;
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,SAoGpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,+BAA+B;IAC/B,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;cAEkB,MAAM,IAAI,IAAI;cAmCd,iBAAiB,IAAI,IAAI;cAKzB,oBAAoB,IAAI,IAAI;IAK/C;;;;OAIG;IACH,OAAO,CAAC,WAAW,CAmBjB;CACH;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}