@wrrdev/fenix-ui 1.0.0

package/dist/components/multiselect/multiselect.d.ts

@@ -0,0 +1,32 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-multiselect> — Seleção múltipla .
+ *
+ * Dropdown customizado com painel (overlay), checkbox por item, pesquisa
+ * opcional e ação de limpar. Opções via <option> nativos no light DOM.
+ *
+ * Atributos: values (CSV), searchable, clearable, disabled, placeholder,
+ * size (sm|md|lg), no-results.
+ * Evento: `change` (composed, detail: { values: string[] }).
+ */
+export declare class FxMultiselect extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    private observer?;
+    private docListener?;
+    private selected;
+    /** Valores selecionados (CSV no atributo / array na propriedade). */
+    get values(): string[];
+    set values(list: string[]);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private get options();
+    protected connectedCallback(): void;
+    protected disconnectedCallback(): void;
+    /** Aplica a seleção, reflete e emite change. */
+    private commit;
+    private toggleValue;
+    protected render(): void;
+}
+export declare function defineFxMultiselect(): typeof FxMultiselect;
+//# sourceMappingURL=multiselect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/multiselect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,SAAS;IAC1C,OAAgB,MAAM,SAuNpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAqB;IAErC,qEAAqE;IACrE,IAAI,MAAM,IAAI,MAAM,EAAE,CAGrB;IACD,IAAI,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,EAExB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,OAAO,KAAK,OAAO,GAKlB;cAEkB,iBAAiB,IAAI,IAAI;cAezB,oBAAoB,IAAI,IAAI;IAM/C,gDAAgD;IAChD,OAAO,CAAC,MAAM;IAYd,OAAO,CAAC,WAAW;cAMA,MAAM,IAAI,IAAI;CA4HlC;AAED,wBAAgB,mBAAmB,IAAI,OAAO,aAAa,CAE1D"}

package/dist/components/multiselect/multiselect.js

@@ -0,0 +1,389 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxMultiselect = class _FxMultiselect extends FxElement {
+  constructor() {
+    super(...arguments);
+    this.selected = /* @__PURE__ */ new Set();
+  }
+  static get observedAttributes() {
+    return ["disabled", "placeholder"];
+  }
+  /** Valores selecionados (CSV no atributo / array na propriedade). */
+  get values() {
+    const csv = this.getAttr("values");
+    return csv ? csv.split(",").map((v) => v.trim()).filter(Boolean) : [];
+  }
+  set values(list) {
+    this.setAttribute("values", list.join(","));
+  }
+  get disabled() {
+    return this.hasAttr("disabled");
+  }
+  set disabled(value) {
+    this.toggleAttr("disabled", Boolean(value));
+  }
+  get options() {
+    return [...this.querySelectorAll("option")].map((o) => ({
+      value: o.getAttribute("value") ?? o.textContent?.trim() ?? "",
+      label: o.textContent?.trim() ?? ""
+    }));
+  }
+  connectedCallback() {
+    this.selected = new Set(this.values);
+    super.connectedCallback();
+    this.observer = new MutationObserver(() => this.render());
+    this.observer.observe(this, { childList: true, subtree: true, characterData: true });
+    this.docListener = (e) => {
+      if (!this.hasAttr("open")) return;
+      if (e.composedPath().includes(this)) return;
+      this.removeAttribute("open");
+      this.render();
+    };
+    document.addEventListener("click", this.docListener);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+    if (this.docListener) document.removeEventListener("click", this.docListener);
+  }
+  /** Aplica a seleção, reflete e emite change. */
+  commit() {
+    this.values = [...this.selected];
+    this.render();
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        bubbles: true,
+        composed: true,
+        detail: { values: [...this.selected] }
+      })
+    );
+  }
+  toggleValue(value) {
+    if (this.selected.has(value)) this.selected.delete(value);
+    else this.selected.add(value);
+    this.commit();
+  }
+  render() {
+    const wasOpen = this.hasAttr("open");
+    const search = this.root.querySelector(".search")?.value ?? "";
+    const opts = this.options;
+    for (const v of [...this.selected]) {
+      if (!opts.some((o) => o.value === v)) this.selected.delete(v);
+    }
+    const chips = opts.filter((o) => this.selected.has(o.value));
+    const placeholder = this.getAttr("placeholder", "Selecione…");
+    const filtered = search ? opts.filter((o) => o.label.toLowerCase().includes(search.toLowerCase())) : opts;
+    this.setTemplate(`
+      <span class="trigger" part="trigger" role="button" tabindex="${this.disabled ? -1 : 0}" aria-haspopup="listbox" aria-expanded="${wasOpen}" aria-disabled="${this.disabled}">
+        <span class="lead">
+        ${chips.length ? chips.map((c) => `
+              <span class="chip" data-value="${c.value}">
+                ${c.label}
+                <span class="chip__x" role="button" aria-label="Remover ${c.label}">×</span>
+              </span>`).join("") : `<span class="placeholder">${placeholder}</span>`}
+        </span>
+        <span class="trigger-right">
+          ${this.hasAttr("clearable") && chips.length ? '<button type="button" class="icon-btn clear" part="clear" aria-label="Limpar seleção">×</button>' : ""}
+          <span class="caret">▼</span>
+        </span>
+      </span>
+      <div class="panel" part="panel" role="listbox" aria-multiselectable="true">
+        <div class="panel-header">
+          <span class="count">${chips.length} selecionado${chips.length === 1 ? "" : "s"}</span>
+          ${this.hasAttr("clearable") && chips.length ? '<button type="button" class="clear-all">Limpar tudo</button>' : ""}
+        </div>
+        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" placeholder="${this.getAttr("search-placeholder", "Pesquisar…")}">` : ""}
+        <ul class="list">
+          ${filtered.map((o) => `
+            <li><button type="button" class="opt" role="option" data-value="${o.value}"
+              aria-selected="${this.selected.has(o.value)}">
+              <span class="box" aria-hidden="true"></span>${o.label}
+            </button></li>`).join("")}
+          ${filtered.length === 0 ? `<li class="empty">${this.getAttr("no-results", "Nenhum resultado")}</li>` : ""}
+        </ul>
+      </div>
+    `);
+    if (wasOpen) this.setAttribute("open", "");
+    const searchInput = this.root.querySelector(".search");
+    if (searchInput) {
+      searchInput.value = search;
+      searchInput.addEventListener("input", () => {
+        const pos = searchInput.selectionStart ?? searchInput.value.length;
+        this.render();
+        const si = this.root.querySelector(".search");
+        if (si) {
+          si.focus();
+          si.setSelectionRange(pos, pos);
+        }
+      });
+      searchInput.addEventListener("click", (e) => e.stopPropagation());
+    }
+    const trigger = this.root.querySelector(".trigger");
+    if (!trigger) return;
+    trigger.addEventListener("click", (e) => {
+      if (this.disabled) return;
+      if (e.target.closest(".clear")) return;
+      if (e.target.closest(".chip__x")) return;
+      this.toggleAttribute("open");
+      if (this.hasAttr("open")) {
+        const r = this.getBoundingClientRect();
+        this.toggleAttribute("up", r.bottom + 300 > window.innerHeight && r.top > 300);
+      } else {
+        this.removeAttribute("up");
+      }
+      this.render();
+    });
+    trigger.addEventListener("keydown", (e) => {
+      if (this.disabled) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      }
+    });
+    this.root.querySelector(".clear")?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.selected.clear();
+      this.commit();
+    });
+    this.root.querySelector(".clear-all")?.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.selected.clear();
+      this.commit();
+    });
+    this.root.querySelectorAll(".chip").forEach((chip) => {
+      chip.querySelector(".chip__x")?.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.toggleValue(chip.dataset.value);
+      });
+    });
+    this.root.querySelectorAll(".opt").forEach((opt) => {
+      opt.addEventListener("click", () => this.toggleValue(opt.dataset.value));
+    });
+  }
+};
+_FxMultiselect.styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      position: relative;
+    }
+    .trigger {
+      display: inline-flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      gap: var(--fx-space-xs);
+      width: 240px;
+      box-sizing: border-box;
+      min-height: var(--fx-size-md);
+      padding: var(--fx-space-xs) var(--fx-space-md);
+      font: inherit;
+      color: var(--fx-text-default);
+      background-color: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-md);
+      cursor: pointer;
+      text-align: left;
+      transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    /* Área dos chips: encolhe e quebra linha internamente,
+       mantendo os ícones sempre dentro do componente. */
+    .lead {
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: var(--fx-space-xs);
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+    }
+    :host([size='sm']) .trigger { min-height: var(--fx-size-sm); width: 200px; }
+    :host([size='lg']) .trigger { min-height: var(--fx-size-lg); width: 280px; font-size: calc(var(--fx-font-size) + 4px); }
+    /* Validação */
+    :host([error]) .trigger,
+    :host([invalid]) .trigger {
+      border-color: var(--fx-color-danger, #dc2626);
+    }
+    :host([error]) .trigger:focus-visible,
+    :host([invalid]) .trigger:focus-visible,
+    :host([error][open]) .trigger,
+    :host([invalid][open]) .trigger {
+      border-color: var(--fx-color-danger, #dc2626);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+    }
+    :host([success]) .trigger,
+    :host([valid]) .trigger {
+      border-color: var(--fx-color-success, #16a34a);
+    }
+    :host([success]) .trigger:focus-visible,
+    :host([valid]) .trigger:focus-visible,
+    :host([success][open]) .trigger,
+    :host([valid][open]) .trigger {
+      border-color: var(--fx-color-success, #16a34a);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+    }
+    .trigger:hover { border-color: var(--fx-border-hover); }
+    .trigger:focus-visible {
+      outline: none;
+      border-color: var(--fx-color-primary);
+      box-shadow: var(--fx-effect-focus-ring, none);
+    }
+    .trigger[aria-expanded='true'] { border-color: var(--fx-color-primary); }
+    .placeholder { color: var(--fx-text-muted); }
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);
+      color: var(--fx-color-primary);
+      border-radius: var(--fx-radius-sm);
+      padding: 2px 6px;
+      font-size: calc(var(--fx-font-size) - 2px);
+    }
+    .chip__x {
+      border: none;
+      background: none;
+      color: inherit;
+      cursor: pointer;
+      font-size: calc(var(--fx-font-size) - 1px);
+      line-height: 1;
+      padding: 0;
+    }
+    .trigger-right {
+      margin-left: auto;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      color: var(--fx-text-muted);
+    }
+    .icon-btn {
+      border: none;
+      background: none;
+      color: inherit;
+      cursor: pointer;
+      font-size: calc(var(--fx-font-size) + 2px);
+      line-height: 1;
+      padding: 0 2px;
+      border-radius: var(--fx-radius-full);
+    }
+    .icon-btn:hover { color: var(--fx-color-danger); }
+    .caret {
+      font-size: calc(var(--fx-font-size) - 3px);
+      transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    :host([open]) .caret { transform: rotate(180deg); }
+
+    /* Painel (overlay ) */
+    .panel {
+      position: absolute;
+      top: calc(100% + 4px);
+      left: 0;
+      z-index: var(--fx-z-dropdown, 1000);
+      width: max(100%, 240px);
+      background: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-md);
+      box-shadow: var(--fx-shadow-lg);
+      display: none;
+      overflow: hidden;
+    }
+    :host([up]) .panel {
+      top: auto;
+      bottom: calc(100% + 4px);
+    }
+    :host([open]) .panel { display: block; }
+    .panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--fx-space-sm);
+      padding: var(--fx-space-xs) var(--fx-space-md);
+      border-bottom: 1px solid var(--fx-border-default);
+      background: var(--fx-surface-surface-hover);
+    }
+    .count { font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }
+    .clear-all {
+      border: none;
+      background: none;
+      font: inherit;
+      font-size: calc(var(--fx-font-size) - 2px);
+      color: var(--fx-color-primary);
+      cursor: pointer;
+      padding: 0;
+    }
+    .clear-all:hover { text-decoration: underline; }
+    .search {
+      width: 100%;
+      box-sizing: border-box;
+      font: inherit;
+      color: var(--fx-text-default);
+      background: var(--fx-surface-background);
+      border: none;
+      border-bottom: 1px solid var(--fx-border-default);
+      padding: var(--fx-space-sm) var(--fx-space-md);
+      outline: none;
+    }
+    .list {
+      max-height: 240px;
+      overflow-y: auto;
+      list-style: none;
+      margin: 0;
+      padding: var(--fx-space-3xs, 4px);
+    }
+    .opt {
+      display: flex;
+      align-items: center;
+      gap: var(--fx-space-sm);
+      width: 100%;
+      padding: var(--fx-space-xs) var(--fx-space-md);
+      border: none;
+      background: none;
+      font: inherit;
+      color: var(--fx-text-default);
+      cursor: pointer;
+      border-radius: var(--fx-radius-sm);
+      text-align: left;
+    }
+    .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }
+    .opt[aria-selected='true'] {
+      background: color-mix(in srgb, var(--fx-color-primary) 16%, transparent);
+      color: var(--fx-color-primary);
+      font-weight: var(--fx-font-weight);
+    }
+    /* Checkbox visual */
+    .box {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid var(--fx-border-default);
+      border-radius: calc(var(--fx-radius-sm) / 2);
+      font-size: 11px;
+      line-height: 1;
+      color: transparent;
+      transition:
+        background-color var(--fx-motion-duration-fast) var(--fx-motion-easing),
+        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),
+        color var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .opt[aria-selected='true'] .box {
+      background: var(--fx-color-primary);
+      border-color: var(--fx-color-primary);
+      color: #fff;
+    }
+    .opt[aria-selected='true'] .box::after { content: '✓'; }
+    .empty { padding: var(--fx-space-md); color: var(--fx-text-muted); text-align: center; }
+    :host([disabled]) .trigger { opacity: 0.55; cursor: not-allowed; background: var(--fx-surface-surface-hover); }
+  `;
+let FxMultiselect = _FxMultiselect;
+function defineFxMultiselect() {
+  return defineElement("fx-multiselect", FxMultiselect);
+}
+export {
+  FxMultiselect,
+  defineFxMultiselect
+};
+//# sourceMappingURL=multiselect.js.map

package/dist/components/multiselect/multiselect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiselect.js","sources":["../../../src/components/multiselect/multiselect.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-multiselect> — Seleção múltipla .\n *\n * Dropdown customizado com painel (overlay), checkbox por item, pesquisa\n * opcional e ação de limpar. Opções via <option> nativos no light DOM.\n *\n * Atributos: values (CSV), searchable, clearable, disabled, placeholder,\n * size (sm|md|lg), no-results.\n * Evento: `change` (composed, detail: { values: string[] }).\n */\nexport class FxMultiselect extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      position: relative;\n    }\n    .trigger {\n      display: inline-flex;\n      align-items: center;\n      flex-wrap: nowrap;\n      gap: var(--fx-space-xs);\n      width: 240px;\n      box-sizing: border-box;\n      min-height: var(--fx-size-md);\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      font: inherit;\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      cursor: pointer;\n      text-align: left;\n      transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    /* Área dos chips: encolhe e quebra linha internamente,\n       mantendo os ícones sempre dentro do componente. */\n    .lead {\n      display: inline-flex;\n      flex-wrap: wrap;\n      gap: var(--fx-space-xs);\n      flex: 1;\n      min-width: 0;\n      overflow: hidden;\n    }\n    :host([size='sm']) .trigger { min-height: var(--fx-size-sm); width: 200px; }\n    :host([size='lg']) .trigger { min-height: var(--fx-size-lg); width: 280px; font-size: calc(var(--fx-font-size) + 4px); }\n    /* Validação */\n    :host([error]) .trigger,\n    :host([invalid]) .trigger {\n      border-color: var(--fx-color-danger, #dc2626);\n    }\n    :host([error]) .trigger:focus-visible,\n    :host([invalid]) .trigger:focus-visible,\n    :host([error][open]) .trigger,\n    :host([invalid][open]) .trigger {\n      border-color: var(--fx-color-danger, #dc2626);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);\n    }\n    :host([success]) .trigger,\n    :host([valid]) .trigger {\n      border-color: var(--fx-color-success, #16a34a);\n    }\n    :host([success]) .trigger:focus-visible,\n    :host([valid]) .trigger:focus-visible,\n    :host([success][open]) .trigger,\n    :host([valid][open]) .trigger {\n      border-color: var(--fx-color-success, #16a34a);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);\n    }\n    .trigger:hover { border-color: var(--fx-border-hover); }\n    .trigger:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .trigger[aria-expanded='true'] { border-color: var(--fx-color-primary); }\n    .placeholder { color: var(--fx-text-muted); }\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);\n      color: var(--fx-color-primary);\n      border-radius: var(--fx-radius-sm);\n      padding: 2px 6px;\n      font-size: calc(var(--fx-font-size) - 2px);\n    }\n    .chip__x {\n      border: none;\n      background: none;\n      color: inherit;\n      cursor: pointer;\n      font-size: calc(var(--fx-font-size) - 1px);\n      line-height: 1;\n      padding: 0;\n    }\n    .trigger-right {\n      margin-left: auto;\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--fx-text-muted);\n    }\n    .icon-btn {\n      border: none;\n      background: none;\n      color: inherit;\n      cursor: pointer;\n      font-size: calc(var(--fx-font-size) + 2px);\n      line-height: 1;\n      padding: 0 2px;\n      border-radius: var(--fx-radius-full);\n    }\n    .icon-btn:hover { color: var(--fx-color-danger); }\n    .caret {\n      font-size: calc(var(--fx-font-size) - 3px);\n      transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([open]) .caret { transform: rotate(180deg); }\n\n    /* Painel (overlay ) */\n    .panel {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      z-index: var(--fx-z-dropdown, 1000);\n      width: max(100%, 240px);\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      display: none;\n      overflow: hidden;\n    }\n    :host([up]) .panel {\n      top: auto;\n      bottom: calc(100% + 4px);\n    }\n    :host([open]) .panel { display: block; }\n    .panel-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--fx-space-sm);\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      border-bottom: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-surface-hover);\n    }\n    .count { font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }\n    .clear-all {\n      border: none;\n      background: none;\n      font: inherit;\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-color-primary);\n      cursor: pointer;\n      padding: 0;\n    }\n    .clear-all:hover { text-decoration: underline; }\n    .search {\n      width: 100%;\n      box-sizing: border-box;\n      font: inherit;\n      color: var(--fx-text-default);\n      background: var(--fx-surface-background);\n      border: none;\n      border-bottom: 1px solid var(--fx-border-default);\n      padding: var(--fx-space-sm) var(--fx-space-md);\n      outline: none;\n    }\n    .list {\n      max-height: 240px;\n      overflow-y: auto;\n      list-style: none;\n      margin: 0;\n      padding: var(--fx-space-3xs, 4px);\n    }\n    .opt {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      width: 100%;\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      border: none;\n      background: none;\n      font: inherit;\n      color: var(--fx-text-default);\n      cursor: pointer;\n      border-radius: var(--fx-radius-sm);\n      text-align: left;\n    }\n    .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }\n    .opt[aria-selected='true'] {\n      background: color-mix(in srgb, var(--fx-color-primary) 16%, transparent);\n      color: var(--fx-color-primary);\n      font-weight: var(--fx-font-weight);\n    }\n    /* Checkbox visual */\n    .box {\n      width: 16px;\n      height: 16px;\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--fx-border-default);\n      border-radius: calc(var(--fx-radius-sm) / 2);\n      font-size: 11px;\n      line-height: 1;\n      color: transparent;\n      transition:\n        background-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .opt[aria-selected='true'] .box {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n      color: #fff;\n    }\n    .opt[aria-selected='true'] .box::after { content: '✓'; }\n    .empty { padding: var(--fx-space-md); color: var(--fx-text-muted); text-align: center; }\n    :host([disabled]) .trigger { opacity: 0.55; cursor: not-allowed; background: var(--fx-surface-surface-hover); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['disabled', 'placeholder'];\n  }\n\n  private observer?: MutationObserver;\n  private docListener?: (e: Event) => void;\n  private selected = new Set<string>();\n\n  /** Valores selecionados (CSV no atributo / array na propriedade). */\n  get values(): string[] {\n    const csv = this.getAttr('values');\n    return csv ? csv.split(',').map((v) => v.trim()).filter(Boolean) : [];\n  }\n  set values(list: string[]) {\n    this.setAttribute('values', list.join(','));\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  private get options(): { value: string; label: string }[] {\n    return [...this.querySelectorAll('option')].map((o) => ({\n      value: o.getAttribute('value') ?? o.textContent?.trim() ?? '',\n      label: o.textContent?.trim() ?? '',\n    }));\n  }\n\n  protected override connectedCallback(): void {\n    // Popula a seleção ANTES do primeiro render (super chama render).\n    this.selected = new Set(this.values);\n    super.connectedCallback();\n    this.observer = new MutationObserver(() => this.render());\n    this.observer.observe(this, { childList: true, subtree: true, characterData: true });\n    this.docListener = (e: Event) => {\n      if (!this.hasAttr('open')) return;\n      if (e.composedPath().includes(this)) return;\n      this.removeAttribute('open');\n      this.render();\n    };\n    document.addEventListener('click', this.docListener);\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.observer?.disconnect();\n    if (this.docListener) document.removeEventListener('click', this.docListener);\n  }\n\n  /** Aplica a seleção, reflete e emite change. */\n  private commit(): void {\n    this.values = [...this.selected];\n    this.render();\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { values: [...this.selected] },\n      }),\n    );\n  }\n\n  private toggleValue(value: string): void {\n    if (this.selected.has(value)) this.selected.delete(value);\n    else this.selected.add(value);\n    this.commit();\n  }\n\n  protected override render(): void {\n    const wasOpen = this.hasAttr('open');\n    // Preserva o estado do campo de pesquisa entre re-renders.\n    const search = this.root.querySelector<HTMLInputElement>('.search')?.value ?? '';\n\n    const opts = this.options;\n    for (const v of [...this.selected]) {\n      if (!opts.some((o) => o.value === v)) this.selected.delete(v);\n    }\n\n    const chips = opts.filter((o) => this.selected.has(o.value));\n    const placeholder = this.getAttr('placeholder', 'Selecione…');\n    const filtered = search\n      ? opts.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))\n      : opts;\n\n    this.setTemplate(`\n      <span class=\"trigger\" part=\"trigger\" role=\"button\" tabindex=\"${this.disabled ? -1 : 0}\" aria-haspopup=\"listbox\" aria-expanded=\"${wasOpen}\" aria-disabled=\"${this.disabled}\">\n        <span class=\"lead\">\n        ${\n          chips.length\n            ? chips.map((c) => `\n              <span class=\"chip\" data-value=\"${c.value}\">\n                ${c.label}\n                <span class=\"chip__x\" role=\"button\" aria-label=\"Remover ${c.label}\">×</span>\n              </span>`).join('')\n            : `<span class=\"placeholder\">${placeholder}</span>`\n        }\n        </span>\n        <span class=\"trigger-right\">\n          ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"icon-btn clear\" part=\"clear\" aria-label=\"Limpar seleção\">×</button>' : ''}\n          <span class=\"caret\">▼</span>\n        </span>\n      </span>\n      <div class=\"panel\" part=\"panel\" role=\"listbox\" aria-multiselectable=\"true\">\n        <div class=\"panel-header\">\n          <span class=\"count\">${chips.length} selecionado${chips.length === 1 ? '' : 's'}</span>\n          ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"clear-all\">Limpar tudo</button>' : ''}\n        </div>\n        ${this.hasAttr('searchable') ? `<input class=\"search\" part=\"search\" type=\"text\" placeholder=\"${this.getAttr('search-placeholder', 'Pesquisar…')}\">` : ''}\n        <ul class=\"list\">\n          ${filtered.map((o) => `\n            <li><button type=\"button\" class=\"opt\" role=\"option\" data-value=\"${o.value}\"\n              aria-selected=\"${this.selected.has(o.value)}\">\n              <span class=\"box\" aria-hidden=\"true\"></span>${o.label}\n            </button></li>`).join('')}\n          ${filtered.length === 0 ? `<li class=\"empty\">${this.getAttr('no-results', 'Nenhum resultado')}</li>` : ''}\n        </ul>\n      </div>\n    `);\n\n    // Reabre o painel se estava aberto antes do re-render.\n    if (wasOpen) this.setAttribute('open', '');\n\n    const searchInput = this.root.querySelector<HTMLInputElement>('.search');\n    if (searchInput) {\n      searchInput.value = search;\n      // Preserva foco e posição do cursor entre os re-renders da digitação.\n      searchInput.addEventListener('input', () => {\n        const pos = searchInput.selectionStart ?? searchInput.value.length;\n        this.render();\n        const si = this.root.querySelector<HTMLInputElement>('.search');\n        if (si) {\n          si.focus();\n          si.setSelectionRange(pos, pos);\n        }\n      });\n      searchInput.addEventListener('click', (e) => e.stopPropagation());\n    }\n\n    const trigger = this.root.querySelector<HTMLElement>('.trigger');\n    if (!trigger) return;\n\n    trigger.addEventListener('click', (e) => {\n      if (this.disabled) return;\n      if ((e.target as HTMLElement).closest('.clear')) return;\n      if ((e.target as HTMLElement).closest('.chip__x')) return;\n      this.toggleAttribute('open');\n      // Flip vertical: se não cabe abaixo, abre para cima.\n      if (this.hasAttr('open')) {\n        const r = this.getBoundingClientRect();\n        this.toggleAttribute('up', r.bottom + 300 > window.innerHeight && r.top > 300);\n      } else {\n        this.removeAttribute('up');\n      }\n      this.render();\n    });\n\n    // Acessibilidade: Enter/Espaço abrem o painel (span role=button).\n    trigger.addEventListener('keydown', (e) => {\n      if (this.disabled) return;\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n      }\n    });\n\n    // × de limpar tudo no trigger.\n    this.root.querySelector('.clear')?.addEventListener('click', (e) => {\n      e.stopPropagation();\n      this.selected.clear();\n      this.commit();\n    });\n\n    // \"Limpar tudo\" no cabeçalho do painel.\n    this.root.querySelector('.clear-all')?.addEventListener('click', (e) => {\n      e.stopPropagation();\n      this.selected.clear();\n      this.commit();\n    });\n\n    // Remover chip individual.\n    this.root.querySelectorAll<HTMLElement>('.chip').forEach((chip) => {\n      chip.querySelector('.chip__x')?.addEventListener('click', (e) => {\n        e.stopPropagation();\n        this.toggleValue(chip.dataset.value!);\n      });\n    });\n\n    // Alternar opções.\n    this.root.querySelectorAll<HTMLElement>('.opt').forEach((opt) => {\n      opt.addEventListener('click', () => this.toggleValue(opt.dataset.value!));\n    });\n  }\n}\n\nexport function defineFxMultiselect(): typeof FxMultiselect {\n  return defineElement('fx-multiselect', FxMultiselect);\n}\n\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/pagination/index.js

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

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

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

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,23 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-pagination> — Paginação standalone.
+ *
+ * Atributos: page (atual), total (itens), rows (por página), rows-options,
+ * position (left|center|right).
+ * Evento: `page-change` (composed, detail: { page, rows }).
+ */
+export declare class FxPagination extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get page(): number;
+    set page(v: number);
+    get total(): number;
+    set total(v: number);
+    get rows(): number;
+    set rows(v: number);
+    private get pages();
+    protected render(): void;
+    private emit;
+}
+export declare function defineFxPagination(): typeof FxPagination;
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SAoCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAAmD;IACrE,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAA2C;IAC7D,IAAI,KAAK,IAAI,MAAM,CAAoD;IACvE,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAA4C;IAC/D,IAAI,IAAI,IAAI,MAAM,CAAqD;IACvE,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAA2C;IAE7D,OAAO,KAAK,KAAK,GAEhB;cAEkB,MAAM,IAAI,IAAI;IA8CjC,OAAO,CAAC,IAAI;CAMb;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}

package/dist/components/pagination/pagination.js

@@ -0,0 +1,121 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxPagination = class _FxPagination extends FxElement {
+  static get observedAttributes() {
+    return ["page", "total", "rows", "rows-options", "position"];
+  }
+  get page() {
+    return Number(this.getAttr("page", "1")) || 1;
+  }
+  set page(v) {
+    this.setAttribute("page", String(v));
+  }
+  get total() {
+    return Number(this.getAttr("total", "0")) || 0;
+  }
+  set total(v) {
+    this.setAttribute("total", String(v));
+  }
+  get rows() {
+    return Number(this.getAttr("rows", "10")) || 10;
+  }
+  set rows(v) {
+    this.setAttribute("rows", String(v));
+  }
+  get pages() {
+    return Math.max(1, Math.ceil(this.total / this.rows));
+  }
+  render() {
+    const pages = this.pages;
+    const current = Math.min(Math.max(1, this.page), pages);
+    const opts = (this.getAttr("rows-options", "5,10,20,50") || "").split(",").map((s) => s.trim()).filter(Boolean);
+    const window_ = [];
+    for (let p = Math.max(1, current - 2); p <= Math.min(pages, current + 2); p++) window_.push(p);
+    const from = total0(current, this.rows);
+    const to = Math.min(current * this.rows, this.total);
+    this.setTemplate(`
+      <span class="info">${this.total ? `${from}-${to} de ${this.total}` : "0 itens"}</span>
+      <button type="button" class="nav" part="prev" data-go="${current - 1}" ${current <= 1 ? "disabled" : ""}>‹</button>
+      ${window_[0] !== 1 && pages > 5 ? `<button type="button" class="nav" data-go="1">1</button>` : ""}
+      ${window_.map((p) => `<button type="button" class="nav ${p === current ? "active" : ""}" data-go="${p}">${p}</button>`).join("")}
+      ${window_[window_.length - 1] !== pages && pages > 5 ? `<button type="button" class="nav" data-go="${pages}">${pages}</button>` : ""}
+      <button type="button" class="nav" part="next" data-go="${current + 1}" ${current >= pages ? "disabled" : ""}>›</button>
+      ${opts.length ? `
+        <select class="nav" part="rows" aria-label="Itens por página">
+          ${opts.map((o) => `<option value="${o}" ${Number(o) === this.rows ? "selected" : ""}>${o}</option>`).join("")}
+        </select>` : ""}
+    `);
+    function total0(page, rows) {
+      return (page - 1) * rows + 1;
+    }
+    this.root.querySelectorAll(".nav[data-go]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const target = Number(btn.dataset.go);
+        if (target >= 1 && target <= pages && target !== current) {
+          this.page = target;
+          this.emit();
+        }
+      });
+    });
+    const sel = this.root.querySelector("select.nav");
+    sel?.addEventListener("change", () => {
+      this.rows = Number(sel.value);
+      this.page = 1;
+      this.emit();
+    });
+  }
+  emit() {
+    this.dispatchEvent(new CustomEvent("page-change", {
+      bubbles: true,
+      composed: true,
+      detail: { page: this.page, rows: this.rows }
+    }));
+  }
+};
+_FxPagination.styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+      gap: var(--fx-space-sm);
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      color: var(--fx-text-default);
+    }
+    :host([position='center']) { justify-content: center; }
+    :host([position='right']) { justify-content: flex-end; }
+    .nav {
+      min-width: var(--fx-size-sm);
+      height: var(--fx-size-sm);
+      border: 1px solid var(--fx-border-default);
+      background: var(--fx-surface-background);
+      color: var(--fx-text-default);
+      font-family: inherit;
+      font-size: calc(var(--fx-font-size) - 2px);
+      border-radius: var(--fx-radius-sm);
+      cursor: pointer;
+      padding: 0 var(--fx-space-sm);
+      transition:
+        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),
+        background var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .nav:hover:not([disabled]) { border-color: var(--fx-color-primary); color: var(--fx-color-primary); }
+    .nav[disabled] { opacity: 0.5; cursor: not-allowed; }
+    .nav.active {
+      background: var(--fx-color-primary);
+      border-color: var(--fx-color-primary);
+      color: #fff;
+      font-weight: 600;
+    }
+    .info { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); }
+    select.nav { cursor: pointer; }
+  `;
+let FxPagination = _FxPagination;
+function defineFxPagination() {
+  return defineElement("fx-pagination", FxPagination);
+}
+export {
+  FxPagination,
+  defineFxPagination
+};
+//# sourceMappingURL=pagination.js.map