@wrrdev/fenix-ui 1.0.0

package/dist/components/switch/switch.js

@@ -0,0 +1,115 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxSwitch = class _FxSwitch extends FxElement {
+  static get observedAttributes() {
+    return ["checked", "disabled", "size"];
+  }
+  /** Tamanho da trilha. Padrão: `'md'`. */
+  get size() {
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
+  }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
+  get checked() {
+    return this.hasAttr("checked");
+  }
+  set checked(value) {
+    this.toggleAttr("checked", Boolean(value));
+  }
+  get disabled() {
+    return this.hasAttr("disabled");
+  }
+  set disabled(value) {
+    this.toggleAttr("disabled", Boolean(value));
+  }
+  render() {
+    this.setTemplate(`
+      <button class="switch" part="switch" type="button" role="switch"
+        aria-checked="${this.checked}" ${this.hasAttr("disabled") ? "disabled" : ""}>
+        <span class="track" part="track"><span class="thumb" part="thumb"></span></span>
+        <span class="label" part="label"><slot></slot></span>
+      </button>
+    `);
+    const btn = this.root.querySelector(".switch");
+    if (!btn) return;
+    btn.addEventListener("click", () => {
+      if (this.hasAttr("disabled")) return;
+      this.checked = !this.checked;
+      btn.setAttribute("aria-checked", String(this.checked));
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: true,
+          composed: true,
+          detail: { checked: this.checked }
+        })
+      );
+    });
+  }
+};
+_FxSwitch.styles = css`
+    :host {
+      display: inline-flex;
+      vertical-align: middle;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    .switch {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--fx-space-sm);
+      cursor: pointer;
+      user-select: none;
+      background: none;
+      border: none;
+      padding: 0;
+      color: var(--fx-text-default);
+      font: inherit;
+    }
+    .track {
+      position: relative;
+      width: 40px;
+      height: 22px;
+      border-radius: var(--fx-radius-full);
+      background: var(--fx-border-default);
+      flex-shrink: 0;
+      transition: background-color var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    .thumb {
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: 16px;
+      height: 16px;
+      border-radius: var(--fx-radius-full);
+      background: #fff;
+      box-shadow: var(--fx-shadow-sm);
+      transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    :host([checked]) .track { background: var(--fx-color-primary); }
+    :host([checked]) .thumb { transform: translateX(18px); }
+    .switch:focus-visible .track {
+      outline: none;
+      box-shadow: var(--fx-effect-focus-ring, none);
+    }
+    .label { display: inline-flex; align-items: center; }
+    :host([disabled]) .switch { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
+    /* Escala: sm 32×18 · md 40×22 (padrão) · lg 48×26 */
+    :host([size='sm']) .track { width: 32px; height: 18px; }
+    :host([size='sm']) .thumb { top: 2px; left: 2px; width: 14px; height: 14px; }
+    :host([size='sm'][checked]) .thumb { transform: translateX(14px); }
+    :host([size='lg']) .track { width: 48px; height: 26px; }
+    :host([size='lg']) .thumb { top: 4px; left: 4px; width: 18px; height: 18px; }
+    :host([size='lg'][checked]) .thumb { transform: translateX(22px); }
+  `;
+let FxSwitch = _FxSwitch;
+function defineFxSwitch() {
+  return defineElement("fx-switch", FxSwitch);
+}
+export {
+  FxSwitch,
+  defineFxSwitch
+};
+//# sourceMappingURL=switch.js.map

package/dist/components/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":["../../../src/components/switch/switch.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-switch> — Interruptor ligado/desligado (role=\"switch\").\n *\n * O texto do slot (light DOM) é o rótulo clicável.\n * Atributos: checked, disabled, size (sm|md|lg).\n * Evento: `change` (composed, detail: { checked }).\n */\nexport class FxSwitch extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .switch {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      cursor: pointer;\n      user-select: none;\n      background: none;\n      border: none;\n      padding: 0;\n      color: var(--fx-text-default);\n      font: inherit;\n    }\n    .track {\n      position: relative;\n      width: 40px;\n      height: 22px;\n      border-radius: var(--fx-radius-full);\n      background: var(--fx-border-default);\n      flex-shrink: 0;\n      transition: background-color var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .thumb {\n      position: absolute;\n      top: 3px;\n      left: 3px;\n      width: 16px;\n      height: 16px;\n      border-radius: var(--fx-radius-full);\n      background: #fff;\n      box-shadow: var(--fx-shadow-sm);\n      transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([checked]) .track { background: var(--fx-color-primary); }\n    :host([checked]) .thumb { transform: translateX(18px); }\n    .switch:focus-visible .track {\n      outline: none;\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .label { display: inline-flex; align-items: center; }\n    :host([disabled]) .switch { opacity: 0.55; cursor: not-allowed; pointer-events: none; }\n    /* Escala: sm 32×18 · md 40×22 (padrão) · lg 48×26 */\n    :host([size='sm']) .track { width: 32px; height: 18px; }\n    :host([size='sm']) .thumb { top: 2px; left: 2px; width: 14px; height: 14px; }\n    :host([size='sm'][checked]) .thumb { transform: translateX(14px); }\n    :host([size='lg']) .track { width: 48px; height: 26px; }\n    :host([size='lg']) .thumb { top: 4px; left: 4px; width: 18px; height: 18px; }\n    :host([size='lg'][checked]) .thumb { transform: translateX(22px); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['checked', 'disabled', 'size'];\n  }\n\n  /** Tamanho da trilha. Padrão: `'md'`. */\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(value: string) {\n    this.setAttribute('size', value);\n  }\n\n  get checked(): boolean {\n    return this.hasAttr('checked');\n  }\n  set checked(value: boolean) {\n    this.toggleAttr('checked', Boolean(value));\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  protected override render(): void {\n    this.setTemplate(`\n      <button class=\"switch\" part=\"switch\" type=\"button\" role=\"switch\"\n        aria-checked=\"${this.checked}\" ${this.hasAttr('disabled') ? 'disabled' : ''}>\n        <span class=\"track\" part=\"track\"><span class=\"thumb\" part=\"thumb\"></span></span>\n        <span class=\"label\" part=\"label\"><slot></slot></span>\n      </button>\n    `);\n\n    const btn = this.root.querySelector<HTMLButtonElement>('.switch');\n    if (!btn) return;\n    btn.addEventListener('click', () => {\n      if (this.hasAttr('disabled')) return;\n      this.checked = !this.checked;\n      btn.setAttribute('aria-checked', String(this.checked));\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: { checked: this.checked },\n        }),\n      );\n    });\n  }\n}\n\nexport function defineFxSwitch(): typeof FxSwitch {\n  return defineElement('fx-switch', FxSwitch);\n}\n"],"names":[],"mappings":";;;AAWO,MAAM,YAAN,MAAM,kBAAiB,UAAU;AAAA,EAyDtC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,YAAY,MAAM;AAAA,EACvC;AAAA;AAAA,EAGA,IAAI,OAAe;AACjB,UAAM,IAAI,KAAK,QAAQ,QAAQ,IAAI;AACnC,WAAO,MAAM,QAAQ,MAAM,OAAO,IAAI;AAAA,EACxC;AAAA,EACA,IAAI,KAAK,OAAe;AACtB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEA,IAAI,UAAmB;AACrB,WAAO,KAAK,QAAQ,SAAS;AAAA,EAC/B;AAAA,EACA,IAAI,QAAQ,OAAgB;AAC1B,SAAK,WAAW,WAAW,QAAQ,KAAK,CAAC;AAAA,EAC3C;AAAA,EAEA,IAAI,WAAoB;AACtB,WAAO,KAAK,QAAQ,UAAU;AAAA,EAChC;AAAA,EACA,IAAI,SAAS,OAAgB;AAC3B,SAAK,WAAW,YAAY,QAAQ,KAAK,CAAC;AAAA,EAC5C;AAAA,EAEmB,SAAe;AAChC,SAAK,YAAY;AAAA;AAAA,wBAEG,KAAK,OAAO,KAAK,KAAK,QAAQ,UAAU,IAAI,aAAa,EAAE;AAAA;AAAA;AAAA;AAAA,KAI9E;AAED,UAAM,MAAM,KAAK,KAAK,cAAiC,SAAS;AAChE,QAAI,CAAC,IAAK;AACV,QAAI,iBAAiB,SAAS,MAAM;AAClC,UAAI,KAAK,QAAQ,UAAU,EAAG;AAC9B,WAAK,UAAU,CAAC,KAAK;AACrB,UAAI,aAAa,gBAAgB,OAAO,KAAK,OAAO,CAAC;AACrD,WAAK;AAAA,QACH,IAAI,YAAY,UAAU;AAAA,UACxB,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,SAAS,KAAK,QAAA;AAAA,QAAQ,CACjC;AAAA,MAAA;AAAA,IAEL,CAAC;AAAA,EACH;AACF;AA3GE,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;AAAA;AAAA;AAAA;AADpB,IAAM,WAAN;AA8GA,SAAS,iBAAkC;AAChD,SAAO,cAAc,aAAa,QAAQ;AAC5C;"}

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

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

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

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

package/dist/components/table/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/table/index.ts"],"sourcesContent":["import { defineFxTable } from './table';\n\nexport { FxTable } from './table';\n\ndefineFxTable();\n"],"names":[],"mappings":";;AAIA,cAAA;"}

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

@@ -0,0 +1,38 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-table> — Tabela de dados estilo DataTable (dados + colunas configuráveis,
+ * ordenação, filtros por coluna, paginação personalizável).
+ *
+ * Colunas (light DOM):
+ *   <fx-column field="nome" header="Nome" sortable filterable align="left">
+ *     opcional: <template>R$ {{value}}</template> para render customizado
+ *   </fx-column>
+ *
+ * Dados: propriedade `data` (array de objetos) ou atributo `data` (JSON).
+ *
+ * Atributos: pagination, rows, rows-options, pagination-position (left|center|right),
+ * striped, empty-message.
+ * Eventos: page-change, sort-change, row-click (todos composed).
+ */
+export declare class FxTable extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    /** Dados da tabela (array de objetos). */
+    data: Record<string, unknown>[];
+    private page;
+    private sortField;
+    private sortDir;
+    private filters;
+    get rowsPerPage(): number;
+    set rowsPerPage(value: number);
+    /** Colunas declaradas no light DOM (<fx-column>). */
+    private get columns();
+    protected connectedCallback(): void;
+    /** Pipeline: filtra → ordena → pagina. */
+    private computeRows;
+    /** Célula: template customizado ({{value}}, {{campo}}, {{row}}) ou valor direto. */
+    private cellHtml;
+    protected render(): void;
+}
+export declare function defineFxTable(): typeof FxTable;
+//# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;;;;;;GAcG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,SAkFpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,0CAA0C;IAC1C,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAM;IACrC,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,OAAO,CAA8B;IAE7C,IAAI,WAAW,IAAI,MAAM,CAGxB;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,EAE5B;IAED,qDAAqD;IACrD,OAAO,KAAK,OAAO,GAYlB;cAEkB,iBAAiB,IAAI,IAAI;IAa5C,0CAA0C;IAC1C,OAAO,CAAC,WAAW;IAsBnB,oFAAoF;IACpF,OAAO,CAAC,QAAQ;cASG,MAAM,IAAI,IAAI;CA+FlC;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}

package/dist/components/table/table.js

@@ -0,0 +1,258 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxTable = class _FxTable extends FxElement {
+  constructor() {
+    super(...arguments);
+    this.data = [];
+    this.page = 0;
+    this.sortField = "";
+    this.sortDir = 1;
+    this.filters = {};
+  }
+  static get observedAttributes() {
+    return ["pagination", "rows", "rows-options", "striped", "empty-message", "pagination-position"];
+  }
+  get rowsPerPage() {
+    const r = Number(this.getAttr("rows", "10"));
+    return r > 0 ? r : 10;
+  }
+  set rowsPerPage(value) {
+    this.setAttribute("rows", String(value));
+  }
+  /** Colunas declaradas no light DOM (<fx-column>). */
+  get columns() {
+    return [...this.querySelectorAll("fx-column")].map((c) => ({
+      field: c.getAttribute("field") ?? "",
+      header: c.getAttribute("header") ?? c.getAttribute("field") ?? "",
+      sortable: c.hasAttribute("sortable"),
+      filterable: c.hasAttribute("filterable"),
+      align: c.getAttribute("align") ?? "left",
+      template: c.querySelector("template") ?? void 0
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.data.length) {
+      try {
+        const json = this.getAttr("data");
+        if (json) this.data = JSON.parse(json);
+      } catch {
+      }
+    }
+    new MutationObserver(() => this.render()).observe(this, { childList: true, subtree: true });
+  }
+  /** Pipeline: filtra → ordena → pagina. */
+  computeRows() {
+    let out = [...this.data];
+    for (const [field, term] of Object.entries(this.filters)) {
+      if (!term) continue;
+      const t = term.toLowerCase();
+      out = out.filter((r) => String(r[field] ?? "").toLowerCase().includes(t));
+    }
+    const total = out.length;
+    if (this.sortField) {
+      out.sort((a, b) => {
+        const av = a[this.sortField], bv = b[this.sortField];
+        if (typeof av === "number" && typeof bv === "number") return (av - bv) * this.sortDir;
+        return String(av ?? "").localeCompare(String(bv ?? ""), "pt-BR") * this.sortDir;
+      });
+    }
+    if (this.hasAttr("pagination")) {
+      const start = this.page * this.rowsPerPage;
+      out = out.slice(start, start + this.rowsPerPage);
+    }
+    return { rows: out, total };
+  }
+  /** Célula: template customizado ({{value}}, {{campo}}, {{row}}) ou valor direto. */
+  cellHtml(col, row) {
+    const value = row[col.field];
+    if (col.template) {
+      return col.template.innerHTML.replace(/\{\{(\w+)\}\}/g, (_, k) => k === "value" ? String(value ?? "") : k === "row" ? "" : String(row[k] ?? ""));
+    }
+    return String(value ?? "");
+  }
+  render() {
+    const cols = this.columns.filter((c) => c.field);
+    const { rows, total } = this.computeRows();
+    const paginated = this.hasAttr("pagination");
+    const pages = Math.max(1, Math.ceil(total / this.rowsPerPage));
+    if (this.page >= pages) this.page = pages - 1;
+    const headHtml = cols.map((c) => {
+      const ind = this.sortField === c.field ? this.sortDir === 1 ? "▲" : "▼" : "";
+      return `<th part="header" class="${c.sortable ? "sortable" : ""}" style="text-align:${c.align}" data-field="${c.field}">${c.header}${ind ? `<span class="sort-ind">${ind}</span>` : ""}</th>`;
+    }).join("");
+    const filterRow = cols.some((c) => c.filterable) ? `<tr class="filter-row">${cols.map((c) => `<th style="text-align:${c.align}">${c.filterable ? `<input class="filter" data-field="${c.field}" placeholder="Filtrar…" value="${this.filters[c.field] ?? ""}">` : ""}</th>`).join("")}</tr>` : "";
+    const bodyHtml = rows.length ? rows.map((row, i) => `<tr part="row" data-index="${i}">${cols.map((c) => `<td part="cell" style="text-align:${c.align}">${this.cellHtml(c, row)}</td>`).join("")}</tr>`).join("") : `<tr><td class="empty" colspan="${cols.length || 1}">${this.getAttr("empty-message", "Nenhum registro encontrado")}</td></tr>`;
+    const pagerHtml = !paginated ? "" : `
+      <div class="pager" part="pager">
+        <span class="info">Página ${this.page + 1} de ${pages} · ${total} registros</span>
+        <button type="button" class="pg-btn" data-pg="first" ${this.page === 0 ? "disabled" : ""}>«</button>
+        <button type="button" class="pg-btn" data-pg="prev" ${this.page === 0 ? "disabled" : ""}>‹</button>
+        ${Array.from({ length: pages }, (_, p) => `<button type="button" class="pg-btn" data-pg="${p}" aria-current="${p === this.page}">${p + 1}</button>`).join("")}
+        <button type="button" class="pg-btn" data-pg="next" ${this.page >= pages - 1 ? "disabled" : ""}>›</button>
+        <button type="button" class="pg-btn" data-pg="last" ${this.page >= pages - 1 ? "disabled" : ""}>»</button>
+        <label class="info">Por página:
+          <select class="rows-sel">${this.getAttr("rows-options", "5,10,20,50").split(",").map((n) => n.trim()).map((n) => `<option value="${n}" ${Number(n) === this.rowsPerPage ? "selected" : ""}>${n}</option>`).join("")}</select>
+        </label>
+      </div>`;
+    this.setTemplate(`
+      <div class="scroll">
+        <table part="table">
+          <thead><tr>${headHtml}</tr>${filterRow}</thead>
+          <tbody>${bodyHtml}</tbody>
+        </table>
+      </div>
+      ${pagerHtml}
+    `);
+    this.root.querySelectorAll("th.sortable").forEach((th) => {
+      th.addEventListener("click", () => {
+        const f = th.dataset.field;
+        if (this.sortField === f) this.sortDir = this.sortDir === 1 ? -1 : 1;
+        else {
+          this.sortField = f;
+          this.sortDir = 1;
+        }
+        this.render();
+        this.dispatchEvent(new CustomEvent("sort-change", {
+          bubbles: true,
+          composed: true,
+          detail: { field: this.sortField, direction: this.sortDir === 1 ? "asc" : "desc" }
+        }));
+      });
+    });
+    this.root.querySelectorAll(".filter").forEach((inp) => {
+      inp.addEventListener("input", () => {
+        this.filters[inp.dataset.field] = inp.value;
+        this.page = 0;
+        const field = inp.dataset.field;
+        const pos = inp.selectionStart;
+        this.render();
+        const again = this.root.querySelector(`.filter[data-field="${field}"]`);
+        if (again) {
+          again.focus();
+          again.setSelectionRange(pos, pos);
+        }
+      });
+      inp.addEventListener("click", (e) => e.stopPropagation());
+    });
+    this.root.querySelectorAll(".pg-btn").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const pg = btn.dataset.pg;
+        this.page = pg === "first" ? 0 : pg === "prev" ? Math.max(0, this.page - 1) : pg === "next" ? Math.min(pages - 1, this.page + 1) : pg === "last" ? pages - 1 : Number(pg);
+        this.render();
+        this.dispatchEvent(new CustomEvent("page-change", {
+          bubbles: true,
+          composed: true,
+          detail: { page: this.page + 1, pages, rowsPerPage: this.rowsPerPage, total }
+        }));
+      });
+    });
+    this.root.querySelector(".rows-sel")?.addEventListener("change", (e) => {
+      this.rowsPerPage = Number(e.target.value);
+      this.page = 0;
+      this.render();
+    });
+    this.root.querySelectorAll("tbody tr[data-index]").forEach((tr) => {
+      tr.addEventListener("click", () => {
+        this.dispatchEvent(new CustomEvent("row-click", {
+          bubbles: true,
+          composed: true,
+          detail: { row: rows[Number(tr.dataset.index)], index: Number(tr.dataset.index) }
+        }));
+      });
+    });
+  }
+};
+_FxTable.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      color: var(--fx-text-default);
+    }
+    .scroll { overflow-x: auto; border: 1px solid var(--fx-border-default); border-radius: var(--fx-radius-md); }
+    table { width: 100%; border-collapse: collapse; }
+    th {
+      text-align: left;
+      padding: var(--fx-space-sm) var(--fx-space-md);
+      background: var(--fx-surface-background);
+      border-bottom: 2px solid var(--fx-border-default);
+      white-space: nowrap;
+      user-select: none;
+    }
+    th.sortable { cursor: pointer; }
+    th.sortable:hover { color: var(--fx-color-primary); }
+    .sort-ind { font-size: calc(var(--fx-font-size) - 4px); margin-left: var(--fx-space-3xs, 2px); }
+    .filter-row th { padding: var(--fx-space-3xs, 4px) var(--fx-space-md) var(--fx-space-sm); border-bottom-width: 1px; }
+    .filter {
+      width: 100%;
+      box-sizing: border-box;
+      font: inherit;
+      font-size: calc(var(--fx-font-size) - 2px);
+      color: var(--fx-text-default);
+      background: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-sm);
+      padding: var(--fx-space-3xs, 4px) var(--fx-space-xs);
+      outline: none;
+    }
+    .filter:focus { border-color: var(--fx-color-primary); box-shadow: var(--fx-effect-focus-ring, none); }
+    td {
+      padding: var(--fx-space-sm) var(--fx-space-md);
+      border-bottom: 1px solid var(--fx-border-default);
+    }
+    tbody tr { cursor: pointer; transition: background-color var(--fx-motion-duration-fast) var(--fx-motion-easing); }
+    tbody tr:hover { background: color-mix(in srgb, var(--fx-color-primary) 8%, transparent); }
+    :host([striped]) tbody tr:nth-child(even) { background: var(--fx-surface-background); }
+    :host([striped]) tbody tr:hover { background: color-mix(in srgb, var(--fx-color-primary) 8%, transparent); }
+    .empty { text-align: center; padding: var(--fx-space-xl); color: var(--fx-text-muted); }
+    .pager {
+      display: flex;
+      align-items: center;
+      gap: var(--fx-space-sm);
+      flex-wrap: wrap;
+      padding: var(--fx-space-sm) 0;
+    }
+    :host([pagination-position='center']) .pager { justify-content: center; }
+    :host([pagination-position='right']) .pager { justify-content: flex-end; }
+    .pager .info { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); }
+    .pg-btn {
+      font: inherit;
+      font-size: calc(var(--fx-font-size) - 2px);
+      color: var(--fx-text-default);
+      background: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-sm);
+      padding: var(--fx-space-3xs, 4px) var(--fx-space-sm);
+      cursor: pointer;
+      transition: border-color var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .pg-btn:hover:not(:disabled) { border-color: var(--fx-color-primary); color: var(--fx-color-primary); }
+    .pg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .pg-btn[aria-current='true'] {
+      background: var(--fx-color-primary);
+      border-color: var(--fx-color-primary);
+      color: #fff;
+      font-weight: var(--fx-font-weight);
+    }
+    .rows-sel {
+      font: inherit;
+      font-size: calc(var(--fx-font-size) - 2px);
+      color: var(--fx-text-default);
+      background: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-sm);
+      padding: 2px var(--fx-space-xs);
+      outline: none;
+    }
+  `;
+let FxTable = _FxTable;
+function defineFxTable() {
+  return defineElement("fx-table", FxTable);
+}
+export {
+  FxTable,
+  defineFxTable
+};
+//# sourceMappingURL=table.js.map

package/dist/components/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sources":["../../../src/components/table/table.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\r\nimport { css } from '../../core/css';\r\nimport { defineElement } from '../../core/define';\r\n\r\n/**\r\n * <fx-table> — Tabela de dados estilo DataTable (dados + colunas configuráveis,\r\n * ordenação, filtros por coluna, paginação personalizável).\r\n *\r\n * Colunas (light DOM):\r\n *   <fx-column field=\"nome\" header=\"Nome\" sortable filterable align=\"left\">\r\n *     opcional: <template>R$ {{value}}</template> para render customizado\r\n *   </fx-column>\r\n *\r\n * Dados: propriedade `data` (array de objetos) ou atributo `data` (JSON).\r\n *\r\n * Atributos: pagination, rows, rows-options, pagination-position (left|center|right),\r\n * striped, empty-message.\r\n * Eventos: page-change, sort-change, row-click (todos composed).\r\n */\r\nexport class FxTable extends FxElement {\r\n  static override styles = css`\r\n    :host {\r\n      display: block;\r\n      font-family: var(--fx-font-family);\r\n      font-size: var(--fx-font-size);\r\n      color: var(--fx-text-default);\r\n    }\r\n    .scroll { overflow-x: auto; border: 1px solid var(--fx-border-default); border-radius: var(--fx-radius-md); }\r\n    table { width: 100%; border-collapse: collapse; }\r\n    th {\r\n      text-align: left;\r\n      padding: var(--fx-space-sm) var(--fx-space-md);\r\n      background: var(--fx-surface-background);\r\n      border-bottom: 2px solid var(--fx-border-default);\r\n      white-space: nowrap;\r\n      user-select: none;\r\n    }\r\n    th.sortable { cursor: pointer; }\r\n    th.sortable:hover { color: var(--fx-color-primary); }\r\n    .sort-ind { font-size: calc(var(--fx-font-size) - 4px); margin-left: var(--fx-space-3xs, 2px); }\r\n    .filter-row th { padding: var(--fx-space-3xs, 4px) var(--fx-space-md) var(--fx-space-sm); border-bottom-width: 1px; }\r\n    .filter {\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n      font: inherit;\r\n      font-size: calc(var(--fx-font-size) - 2px);\r\n      color: var(--fx-text-default);\r\n      background: var(--fx-surface-background);\r\n      border: 1px solid var(--fx-border-default);\r\n      border-radius: var(--fx-radius-sm);\r\n      padding: var(--fx-space-3xs, 4px) var(--fx-space-xs);\r\n      outline: none;\r\n    }\r\n    .filter:focus { border-color: var(--fx-color-primary); box-shadow: var(--fx-effect-focus-ring, none); }\r\n    td {\r\n      padding: var(--fx-space-sm) var(--fx-space-md);\r\n      border-bottom: 1px solid var(--fx-border-default);\r\n    }\r\n    tbody tr { cursor: pointer; transition: background-color var(--fx-motion-duration-fast) var(--fx-motion-easing); }\r\n    tbody tr:hover { background: color-mix(in srgb, var(--fx-color-primary) 8%, transparent); }\r\n    :host([striped]) tbody tr:nth-child(even) { background: var(--fx-surface-background); }\r\n    :host([striped]) tbody tr:hover { background: color-mix(in srgb, var(--fx-color-primary) 8%, transparent); }\r\n    .empty { text-align: center; padding: var(--fx-space-xl); color: var(--fx-text-muted); }\r\n    .pager {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: var(--fx-space-sm);\r\n      flex-wrap: wrap;\r\n      padding: var(--fx-space-sm) 0;\r\n    }\r\n    :host([pagination-position='center']) .pager { justify-content: center; }\r\n    :host([pagination-position='right']) .pager { justify-content: flex-end; }\r\n    .pager .info { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); }\r\n    .pg-btn {\r\n      font: inherit;\r\n      font-size: calc(var(--fx-font-size) - 2px);\r\n      color: var(--fx-text-default);\r\n      background: var(--fx-surface-background);\r\n      border: 1px solid var(--fx-border-default);\r\n      border-radius: var(--fx-radius-sm);\r\n      padding: var(--fx-space-3xs, 4px) var(--fx-space-sm);\r\n      cursor: pointer;\r\n      transition: border-color var(--fx-motion-duration-fast) var(--fx-motion-easing);\r\n    }\r\n    .pg-btn:hover:not(:disabled) { border-color: var(--fx-color-primary); color: var(--fx-color-primary); }\r\n    .pg-btn:disabled { opacity: 0.5; cursor: not-allowed; }\r\n    .pg-btn[aria-current='true'] {\r\n      background: var(--fx-color-primary);\r\n      border-color: var(--fx-color-primary);\r\n      color: #fff;\r\n      font-weight: var(--fx-font-weight);\r\n    }\r\n    .rows-sel {\r\n      font: inherit;\r\n      font-size: calc(var(--fx-font-size) - 2px);\r\n      color: var(--fx-text-default);\r\n      background: var(--fx-surface-background);\r\n      border: 1px solid var(--fx-border-default);\r\n      border-radius: var(--fx-radius-sm);\r\n      padding: 2px var(--fx-space-xs);\r\n      outline: none;\r\n    }\r\n  `;\r\n\r\n  static override get observedAttributes(): string[] {\r\n    return ['pagination', 'rows', 'rows-options', 'striped', 'empty-message', 'pagination-position'];\r\n  }\r\n\r\n  /** Dados da tabela (array de objetos). */\r\n  data: Record<string, unknown>[] = [];\r\n  private page = 0;\r\n  private sortField = '';\r\n  private sortDir: 1 | -1 = 1;\r\n  private filters: Record<string, string> = {};\r\n\r\n  get rowsPerPage(): number {\r\n    const r = Number(this.getAttr('rows', '10'));\r\n    return r > 0 ? r : 10;\r\n  }\r\n  set rowsPerPage(value: number) {\r\n    this.setAttribute('rows', String(value));\r\n  }\r\n\r\n  /** Colunas declaradas no light DOM (<fx-column>). */\r\n  private get columns(): {\r\n    field: string; header: string; sortable: boolean; filterable: boolean;\r\n    align: string; template?: HTMLTemplateElement;\r\n  }[] {\r\n    return [...this.querySelectorAll('fx-column')].map((c) => ({\r\n      field: c.getAttribute('field') ?? '',\r\n      header: c.getAttribute('header') ?? c.getAttribute('field') ?? '',\r\n      sortable: c.hasAttribute('sortable'),\r\n      filterable: c.hasAttribute('filterable'),\r\n      align: c.getAttribute('align') ?? 'left',\r\n      template: c.querySelector('template') ?? undefined,\r\n    }));\r\n  }\r\n\r\n  protected override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    // Tenta carregar JSON do atributo data se `data` não foi setado via JS.\r\n    if (!this.data.length) {\r\n      try {\r\n        const json = this.getAttr('data');\r\n        if (json) this.data = JSON.parse(json);\r\n      } catch { /* atributo inválido — ignora */ }\r\n    }\r\n    // Observa mudanças nas colunas (light DOM).\r\n    new MutationObserver(() => this.render()).observe(this, { childList: true, subtree: true });\r\n  }\r\n\r\n  /** Pipeline: filtra → ordena → pagina. */\r\n  private computeRows(): { rows: Record<string, unknown>[]; total: number } {\r\n    let out = [...this.data];\r\n    for (const [field, term] of Object.entries(this.filters)) {\r\n      if (!term) continue;\r\n      const t = term.toLowerCase();\r\n      out = out.filter((r) => String(r[field] ?? '').toLowerCase().includes(t));\r\n    }\r\n    const total = out.length;\r\n    if (this.sortField) {\r\n      out.sort((a, b) => {\r\n        const av = a[this.sortField], bv = b[this.sortField];\r\n        if (typeof av === 'number' && typeof bv === 'number') return (av - bv) * this.sortDir;\r\n        return String(av ?? '').localeCompare(String(bv ?? ''), 'pt-BR') * this.sortDir;\r\n      });\r\n    }\r\n    if (this.hasAttr('pagination')) {\r\n      const start = this.page * this.rowsPerPage;\r\n      out = out.slice(start, start + this.rowsPerPage);\r\n    }\r\n    return { rows: out, total };\r\n  }\r\n\r\n  /** Célula: template customizado ({{value}}, {{campo}}, {{row}}) ou valor direto. */\r\n  private cellHtml(col: { field: string; template?: HTMLTemplateElement }, row: Record<string, unknown>): string {\r\n    const value = row[col.field];\r\n    if (col.template) {\r\n      return col.template.innerHTML.replace(/\\{\\{(\\w+)\\}\\}/g, (_, k: string) =>\r\n        k === 'value' ? String(value ?? '') : k === 'row' ? '' : String(row[k] ?? ''));\r\n    }\r\n    return String(value ?? '');\r\n  }\r\n\r\n  protected override render(): void {\r\n    const cols = this.columns.filter((c) => c.field);\r\n    const { rows, total } = this.computeRows();\r\n    const paginated = this.hasAttr('pagination');\r\n    const pages = Math.max(1, Math.ceil(total / this.rowsPerPage));\r\n    if (this.page >= pages) this.page = pages - 1;\r\n\r\n    const headHtml = cols.map((c) => {\r\n      const ind = this.sortField === c.field ? (this.sortDir === 1 ? '▲' : '▼') : '';\r\n      return `<th part=\"header\" class=\"${c.sortable ? 'sortable' : ''}\" style=\"text-align:${c.align}\" data-field=\"${c.field}\">${c.header}${ind ? `<span class=\"sort-ind\">${ind}</span>` : ''}</th>`;\r\n    }).join('');\r\n\r\n    const filterRow = cols.some((c) => c.filterable)\r\n      ? `<tr class=\"filter-row\">${cols.map((c) => `<th style=\"text-align:${c.align}\">${c.filterable ? `<input class=\"filter\" data-field=\"${c.field}\" placeholder=\"Filtrar…\" value=\"${this.filters[c.field] ?? ''}\">` : ''}</th>`).join('')}</tr>`\r\n      : '';\r\n\r\n    const bodyHtml = rows.length\r\n      ? rows.map((row, i) => `<tr part=\"row\" data-index=\"${i}\">${cols.map((c) => `<td part=\"cell\" style=\"text-align:${c.align}\">${this.cellHtml(c, row)}</td>`).join('')}</tr>`).join('')\r\n      : `<tr><td class=\"empty\" colspan=\"${cols.length || 1}\">${this.getAttr('empty-message', 'Nenhum registro encontrado')}</td></tr>`;\r\n\r\n    const pagerHtml = !paginated ? '' : `\r\n      <div class=\"pager\" part=\"pager\">\r\n        <span class=\"info\">Página ${this.page + 1} de ${pages} · ${total} registros</span>\r\n        <button type=\"button\" class=\"pg-btn\" data-pg=\"first\" ${this.page === 0 ? 'disabled' : ''}>«</button>\r\n        <button type=\"button\" class=\"pg-btn\" data-pg=\"prev\" ${this.page === 0 ? 'disabled' : ''}>‹</button>\r\n        ${Array.from({ length: pages }, (_, p) => `<button type=\"button\" class=\"pg-btn\" data-pg=\"${p}\" aria-current=\"${p === this.page}\">${p + 1}</button>`).join('')}\r\n        <button type=\"button\" class=\"pg-btn\" data-pg=\"next\" ${this.page >= pages - 1 ? 'disabled' : ''}>›</button>\r\n        <button type=\"button\" class=\"pg-btn\" data-pg=\"last\" ${this.page >= pages - 1 ? 'disabled' : ''}>»</button>\r\n        <label class=\"info\">Por página:\r\n          <select class=\"rows-sel\">${(this.getAttr('rows-options', '5,10,20,50')).split(',').map((n) => n.trim()).map((n) => `<option value=\"${n}\" ${Number(n) === this.rowsPerPage ? 'selected' : ''}>${n}</option>`).join('')}</select>\r\n        </label>\r\n      </div>`;\r\n\r\n    this.setTemplate(`\r\n      <div class=\"scroll\">\r\n        <table part=\"table\">\r\n          <thead><tr>${headHtml}</tr>${filterRow}</thead>\r\n          <tbody>${bodyHtml}</tbody>\r\n        </table>\r\n      </div>\r\n      ${pagerHtml}\r\n    `);\r\n\r\n    // Ordenação.\r\n    this.root.querySelectorAll<HTMLTableCellElement>('th.sortable').forEach((th) => {\r\n      th.addEventListener('click', () => {\r\n        const f = th.dataset.field!;\r\n        if (this.sortField === f) this.sortDir = this.sortDir === 1 ? -1 : 1;\r\n        else { this.sortField = f; this.sortDir = 1; }\r\n        this.render();\r\n        this.dispatchEvent(new CustomEvent('sort-change', { bubbles: true, composed: true,\r\n          detail: { field: this.sortField, direction: this.sortDir === 1 ? 'asc' : 'desc' } }));\r\n      });\r\n    });\r\n\r\n    // Filtros (preserva foco/caret ao digitar).\r\n    this.root.querySelectorAll<HTMLInputElement>('.filter').forEach((inp) => {\r\n      inp.addEventListener('input', () => {\r\n        this.filters[inp.dataset.field!] = inp.value;\r\n        this.page = 0;\r\n        const field = inp.dataset.field!;\r\n        const pos = inp.selectionStart;\r\n        this.render();\r\n        const again = this.root.querySelector<HTMLInputElement>(`.filter[data-field=\"${field}\"]`);\r\n        if (again) { again.focus(); again.setSelectionRange(pos, pos); }\r\n      });\r\n      inp.addEventListener('click', (e) => e.stopPropagation());\r\n    });\r\n\r\n    // Paginação.\r\n    this.root.querySelectorAll<HTMLButtonElement>('.pg-btn').forEach((btn) => {\r\n      btn.addEventListener('click', () => {\r\n        const pg = btn.dataset.pg!;\r\n        this.page = pg === 'first' ? 0 : pg === 'prev' ? Math.max(0, this.page - 1)\r\n          : pg === 'next' ? Math.min(pages - 1, this.page + 1)\r\n          : pg === 'last' ? pages - 1 : Number(pg);\r\n        this.render();\r\n        this.dispatchEvent(new CustomEvent('page-change', { bubbles: true, composed: true,\r\n          detail: { page: this.page + 1, pages, rowsPerPage: this.rowsPerPage, total } }));\r\n      });\r\n    });\r\n    this.root.querySelector<HTMLSelectElement>('.rows-sel')?.addEventListener('change', (e) => {\r\n      this.rowsPerPage = Number((e.target as HTMLSelectElement).value);\r\n      this.page = 0;\r\n      this.render();\r\n    });\r\n\r\n    // Clique na linha.\r\n    this.root.querySelectorAll<HTMLTableRowElement>('tbody tr[data-index]').forEach((tr) => {\r\n      tr.addEventListener('click', () => {\r\n        this.dispatchEvent(new CustomEvent('row-click', { bubbles: true, composed: true,\r\n          detail: { row: rows[Number(tr.dataset.index)], index: Number(tr.dataset.index) } }));\r\n      });\r\n    });\r\n  }\r\n}\r\n\r\nexport function defineFxTable(): typeof FxTable {\r\n  return defineElement('fx-table', FxTable);\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import { FxTabs, FxTabPanel } from './tabs';
+export { FxTabs, FxTabPanel };
+declare global {
+    interface HTMLElementTagNameMap {
+        'fx-tabs': FxTabs;
+        'fx-tab-panel': FxTabPanel;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAkC,MAAM,QAAQ,CAAC;AAE5E,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;AAK9B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/components/tabs/index.js

@@ -0,0 +1,9 @@
+import { defineFxTabs, defineFxTabPanel } from "./tabs.js";
+import { FxTabPanel, FxTabs } from "./tabs.js";
+defineFxTabs();
+defineFxTabPanel();
+export {
+  FxTabPanel,
+  FxTabs
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/tabs/index.ts"],"sourcesContent":["import { FxTabs, FxTabPanel, defineFxTabs, defineFxTabPanel } from './tabs';\n\nexport { FxTabs, FxTabPanel };\n\ndefineFxTabs();\ndefineFxTabPanel();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-tabs': FxTabs;\n    'fx-tab-panel': FxTabPanel;\n  }\n}\n"],"names":[],"mappings":";;AAIA,aAAA;AACA,iBAAA;"}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,38 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-tabs> — Navegação por abas.
+ *
+ * Atributos: value (aba ativa, corresponde ao attr `tab` de cada fx-tab-panel).
+ * Uso:
+ *   <fx-tabs value="a">
+ *     <fx-tab tab="a">Aba A</fx-tab>
+ *     <fx-tab tab="b">Aba B</fx-tab>
+ *   </fx-tabs>
+ *   <fx-tab-panel tab="a">…</fx-tab-panel>
+ *   <fx-tab-panel tab="b">…</fx-tab-panel>
+ * Evento: `change` (composed, detail: { value }).
+ */
+export declare class FxTabs extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get value(): string;
+    set value(value: string);
+    protected render(): void;
+    /** Painéis associados: descendentes do host ou irmãos seguintes no DOM. */
+    private get panels();
+}
+/**
+ * <fx-tab-panel> — Painel de conteúdo associado a uma aba.
+ */
+export declare class FxTabPanel extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get tab(): string;
+    get visible(): boolean;
+    set visible(value: boolean);
+    protected render(): void;
+    private _initialized;
+}
+export declare function defineFxTabs(): typeof FxTabs;
+export declare function defineFxTabPanel(): typeof FxTabPanel;
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,SAmDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAwC;cAE5C,MAAM,IAAI,IAAI;IAwCjC,2EAA2E;IAC3E,OAAO,KAAK,MAAM,GAWjB;CACF;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SAGpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,GAAG,IAAI,MAAM,CAAgC;IAEjD,IAAI,OAAO,IAAI,OAAO,CAAoC;IAC1D,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAAwC;cAE/C,MAAM,IAAI,IAAI;IAqBjC,OAAO,CAAC,YAAY,CAAS;CAC9B;AAED,wBAAgB,YAAY,IAAI,OAAO,MAAM,CAE5C;AACD,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD"}