@wrrdev/fenix-ui 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/dropdown/index.ts"],"sourcesContent":["import { FxDropdown, FxDropdownItem, defineFxDropdown, defineFxDropdownItem } from './dropdown';\n\nexport { FxDropdown, FxDropdownItem };\n\ndefineFxDropdown();\ndefineFxDropdownItem();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-dropdown': FxDropdown;\n    'fx-dropdown-item': FxDropdownItem;\n  }\n}\n"],"names":[],"mappings":";;AAIA,iBAAA;AACA,qBAAA;"}

package/dist/components/floatlabel/floatlabel.d.ts

@@ -0,0 +1,42 @@
+import { FxElement } from "../../core/base";
+/**
+ * Rótulo flutuante .
+ *
+ * Envolve um campo de formulário (fx-input, fx-select, fx-multiselect,
+ * fx-datepicker, ...) + um <label>. A label se comporta como placeholder
+ * quando o campo está vazio e "sobe" quando o campo é focado, contém valor
+ * ou abre dropdown.
+ *
+ *  - variant="on"   (padrão): label sobre a borda superior
+ *  - variant="in"   : label como placeholder interno, sobe ao focar/valor
+ *  - variant="over" : label estática acima do campo
+ *
+ *  - error / invalid: label + borda em vermelho, mensagem menor abaixo.
+ *  - success / valid: label + borda em verde.
+ *
+ * A label do light DOM é MOVIDA para dentro do Shadow DOM (como `.flabel`),
+ * usando classes de shadow (não `::slotted`), o que é confiável mesmo com
+ * componentes aninhados que possuem shadow root próprio.
+ */
+export declare class FxFloatlabel extends FxElement {
+    static get observedAttributes(): string[];
+    static styles: string;
+    private targetControl;
+    private observer;
+    private listenersReady;
+    protected render(): void;
+    protected disconnectedCallback(): void;
+    /** Campo de controle = qualquer filho direto que não seja label. */
+    private findControl;
+    /** Label = filho direto <label>. */
+    private findLabel;
+    private attachEvents;
+    /** Observa mudanças de atributos do controle (value, open, values...). */
+    private syncControlReference;
+    private syncState;
+    private applyError;
+    private isWithin;
+    private isFocusedInside;
+}
+export declare function defineFxFloatlabel(): typeof FxFloatlabel;
+//# sourceMappingURL=floatlabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"floatlabel.d.ts","sourceRoot":"","sources":["../../../src/components/floatlabel/floatlabel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,YAAa,SAAQ,SAAS;IAC1C,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAID,OAAgB,MAAM,SAgHpB;IACF,OAAO,CAAC,aAAa,CAA4B;IACjD,OAAO,CAAC,QAAQ,CAAiC;IACjD,OAAO,CAAC,cAAc,CAAS;IAE/B,SAAS,CAAC,MAAM,IAAI,IAAI;cAgCL,oBAAoB,IAAI,IAAI;IAK/C,oEAAoE;IACpE,OAAO,CAAC,WAAW;IAQnB,oCAAoC;IACpC,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAuBpB,0EAA0E;IAC1E,OAAO,CAAC,oBAAoB;IAiB5B,OAAO,CAAC,SAAS;IAwCjB,OAAO,CAAC,UAAU;IA8BlB,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,eAAe;CAIvB;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}

package/dist/components/floatlabel/floatlabel.js

@@ -0,0 +1,270 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxFloatlabel = class _FxFloatlabel extends FxElement {
+  constructor() {
+    super(...arguments);
+    this.targetControl = null;
+    this.observer = null;
+    this.listenersReady = false;
+  }
+  static get observedAttributes() {
+    return ["variant", "error", "invalid", "success", "valid"];
+  }
+  render() {
+    const control = this.findControl();
+    const label = this.findLabel();
+    const originalLabel = label;
+    const labelText = originalLabel ? originalLabel.textContent?.replace(/\s+/g, " ").trim() : "";
+    const labelFor = originalLabel ? originalLabel.getAttribute("for") || "" : "";
+    const isOver = this.getAttribute("variant") === "over";
+    this.setTemplate(`
+      <div class="wrapper" part="wrapper">
+        ${isOver ? `<label class="flabel" part="label" for="${labelFor}">${labelText}</label>` : ""}
+        <div class="field-box" part="field">
+          <slot></slot>
+          ${isOver ? "" : `<label class="flabel" part="label" for="${labelFor}">${labelText}</label>`}
+        </div>
+        <div class="error-message" part="error"></div>
+      </div>
+    `);
+    if (originalLabel) originalLabel.setAttribute("hidden", "");
+    this.attachEvents();
+    this.syncControlReference(control);
+    this.syncState();
+    this.applyError();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.observer?.disconnect();
+  }
+  /** Campo de controle = qualquer filho direto que não seja label. */
+  findControl() {
+    return Array.from(this.children).find(
+      (n) => n.tagName.toLowerCase() !== "label"
+    ) ?? null;
+  }
+  /** Label = filho direto <label>. */
+  findLabel() {
+    return Array.from(this.children).find(
+      (n) => n.tagName.toLowerCase() === "label"
+    ) ?? null;
+  }
+  attachEvents() {
+    const slot = this.root.querySelector("slot");
+    if (slot) {
+      slot.addEventListener("slotchange", () => {
+        const control = this.findControl();
+        this.syncControlReference(control);
+        this.syncState();
+        this.applyError();
+      });
+    }
+    if (this.listenersReady) return;
+    this.listenersReady = true;
+    this.addEventListener("focusin", () => this.syncState());
+    this.addEventListener(
+      "focusout",
+      () => setTimeout(() => this.syncState(), 60)
+    );
+    this.addEventListener("input", () => this.syncState());
+    this.addEventListener("change", () => this.syncState());
+  }
+  /** Observa mudanças de atributos do controle (value, open, values...). */
+  syncControlReference(control = this.targetControl) {
+    if (control !== this.targetControl) {
+      this.observer?.disconnect();
+      this.observer = null;
+      this.targetControl = control;
+      if (control) {
+        this.observer = new MutationObserver(() => this.syncState());
+        this.observer.observe(control, {
+          attributes: true,
+          attributeFilter: ["value", "values", "start", "end", "open"]
+        });
+      }
+    }
+  }
+  syncState() {
+    if (this.targetControl && !this.targetControl.isConnected) {
+      this.targetControl = null;
+      this.observer?.disconnect();
+      this.observer = null;
+    }
+    if (!this.targetControl) {
+      this.removeAttribute("active");
+      this.removeAttribute("focus");
+      return;
+    }
+    const c = this.targetControl;
+    const attrValue = c.getAttribute ? (c.getAttribute("value") ?? "").trim() : "";
+    const attrValues = c.getAttribute ? (c.getAttribute("values") ?? "").trim() : "";
+    const hasValue = Boolean(
+      typeof c.value === "string" && c.value.trim() !== "" || Array.isArray(c.values) && c.values.length > 0 || attrValue !== "" || attrValues !== "" || c.hasAttribute && (c.hasAttribute("open") || c.hasAttribute("start"))
+    );
+    const focused = this.isFocusedInside();
+    if (hasValue || focused) {
+      this.setAttribute("active", "");
+      if (focused) this.setAttribute("focus", "");
+      else this.removeAttribute("focus");
+    } else {
+      this.removeAttribute("active");
+      this.removeAttribute("focus");
+    }
+  }
+  applyError() {
+    const hasError = this.hasAttr("error") || this.hasAttr("invalid");
+    const errMsg = this.root.querySelector(
+      ".error-message"
+    );
+    if (errMsg) {
+      errMsg.textContent = hasError ? this.getAttribute("error-text")?.trim() || "Valor inválido" : "";
+    }
+    if (this.targetControl && typeof this.targetControl.setAttribute === "function") {
+      const t = this.targetControl;
+      if (hasError) {
+        t.setAttribute("error", "");
+        t.removeAttribute("success");
+      } else if (this.hasAttr("success") || this.hasAttr("valid")) {
+        t.setAttribute("success", "");
+        t.removeAttribute("error");
+      } else {
+        t.removeAttribute("error");
+        t.removeAttribute("success");
+      }
+    }
+  }
+  isWithin(activeEl) {
+    let current = activeEl;
+    while (current && current !== this) {
+      current = current.parentElement;
+    }
+    return current === this;
+  }
+  isFocusedInside() {
+    const activeEl = document.activeElement;
+    return Boolean(activeEl && this.isWithin(activeEl));
+  }
+};
+_FxFloatlabel.styles = css`
+		:host {
+			display: inline-block;
+			position: relative;
+			font-family: var(--fx-font-family);
+			font-size: var(--fx-font-size);
+			vertical-align: middle;
+		}
+		.wrapper {
+			position: relative;
+			display: inline-block;
+			width: 100%;
+		}
+		/* Caixa do campo: referência de posicionamento da label flutuante
+       (isolada da mensagem de erro, que cresce o wrapper). */
+		.field-box {
+			position: relative;
+			display: inline-block;
+			width: 100%;
+		}
+		:host([variant="in"]) .field-box {
+			padding-top: var(--fx-space-xs, 6px);
+		}
+
+		/* ---- label base (variant="on", padrão): sobre a borda superior ---- */
+		.flabel {
+			position: absolute;
+			left: var(--fx-space-md, 12px);
+			top: 0;
+			transform: translateY(-50%);
+			font-size: calc(var(--fx-font-size, 14px) - 3px);
+			font-weight: 600;
+			color: var(--fx-text-muted, #94a3b8);
+			background-color: var(--fx-surface-background, #fff);
+			padding: 0 4px;
+			line-height: 1;
+			border-radius: 2px;
+			pointer-events: none;
+			z-index: 2;
+			white-space: nowrap;
+			transition:
+				top var(--fx-motion-duration-normal, 180ms)
+					var(--fx-motion-easing, ease-in-out),
+				transform var(--fx-motion-duration-normal, 180ms)
+					var(--fx-motion-easing, ease-in-out),
+				font-size var(--fx-motion-duration-normal, 180ms)
+					var(--fx-motion-easing, ease-in-out),
+				color var(--fx-motion-duration-normal, 180ms)
+					var(--fx-motion-easing, ease-in-out);
+		}
+		:host([active]) .flabel {
+			color: var(--fx-color-primary, #4f46e5);
+		}
+
+		/* ---- variant="in": label como placeholder dentro, sobe ao focar/valor ---- */
+		:host([variant="in"]) .flabel {
+			top: 50%;
+			transform: translateY(-50%);
+			font-size: var(--fx-font-size, 14px);
+			font-weight: var(--fx-font-weight, 400);
+			background: transparent;
+			padding: 0;
+		}
+		:host([variant="in"][active]) .flabel {
+			top: 0;
+			transform: translateY(-50%);
+			font-size: calc(var(--fx-font-size, 14px) - 3px);
+			font-weight: 600;
+			background-color: var(--fx-surface-background, #fff);
+			padding: 0 5px;
+			color: var(--fx-color-primary, #4f46e5);
+		}
+
+		/* ---- variant="over": label estática ACIMA do campo (fora, em fluxo) ---- */
+		:host([variant="over"]) {
+			display: block;
+		}
+		:host([variant="over"]) .flabel {
+			position: static;
+			display: block;
+			margin-bottom: var(--fx-space-xs, 4px);
+			background: transparent;
+			padding: 0;
+			font-size: calc(var(--fx-font-size, 14px) - 3px);
+			font-weight: 600;
+			white-space: normal;
+		}
+
+		/* ---- estados de erro / sucesso ---- */
+		:host([error]) .flabel,
+		:host([invalid]) .flabel {
+			color: var(--fx-color-danger, #dc2626);
+		}
+		:host([success]) .flabel,
+		:host([valid]) .flabel {
+			color: var(--fx-color-success, #10b981);
+		}
+
+		/* ---- mensagem de erro sob o campo (fonte menor) ---- */
+		.error-message {
+			display: none;
+			margin-top: var(--fx-space-xs, 4px);
+			margin-left: var(--fx-space-md, 12px);
+			font-size: calc(var(--fx-font-size, 14px) - 3px);
+			font-weight: 500;
+			color: var(--fx-color-danger, #dc2626);
+			line-height: 1.2;
+		}
+		:host([error]) .error-message,
+		:host([invalid]) .error-message {
+			display: block;
+		}
+	`;
+let FxFloatlabel = _FxFloatlabel;
+function defineFxFloatlabel() {
+  return defineElement("fx-floatlabel", FxFloatlabel);
+}
+export {
+  FxFloatlabel,
+  defineFxFloatlabel
+};
+//# sourceMappingURL=floatlabel.js.map

package/dist/components/floatlabel/floatlabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatlabel.js","sources":["../../../src/components/floatlabel/floatlabel.ts"],"sourcesContent":["import { FxElement } from \"../../core/base\";\nimport { css } from \"../../core/css\";\nimport { defineElement } from \"../../core/define\";\n\n/**\n * Rótulo flutuante .\n *\n * Envolve um campo de formulário (fx-input, fx-select, fx-multiselect,\n * fx-datepicker, ...) + um <label>. A label se comporta como placeholder\n * quando o campo está vazio e \"sobe\" quando o campo é focado, contém valor\n * ou abre dropdown.\n *\n *  - variant=\"on\"   (padrão): label sobre a borda superior\n *  - variant=\"in\"   : label como placeholder interno, sobe ao focar/valor\n *  - variant=\"over\" : label estática acima do campo\n *\n *  - error / invalid: label + borda em vermelho, mensagem menor abaixo.\n *  - success / valid: label + borda em verde.\n *\n * A label do light DOM é MOVIDA para dentro do Shadow DOM (como `.flabel`),\n * usando classes de shadow (não `::slotted`), o que é confiável mesmo com\n * componentes aninhados que possuem shadow root próprio.\n */\nexport class FxFloatlabel extends FxElement {\n\tstatic override get observedAttributes(): string[] {\n\t\treturn [\"variant\", \"error\", \"invalid\", \"success\", \"valid\"];\n\t}\n\t// 'active' NÃO entra em observedAttributes: togglá-lo apenas atualiza CSS\n\t// via :host([active]), sem re-render destrutivo (mantém o foco do campo).\n\n\tstatic override styles = css`\n\t\t:host {\n\t\t\tdisplay: inline-block;\n\t\t\tposition: relative;\n\t\t\tfont-family: var(--fx-font-family);\n\t\t\tfont-size: var(--fx-font-size);\n\t\t\tvertical-align: middle;\n\t\t}\n\t\t.wrapper {\n\t\t\tposition: relative;\n\t\t\tdisplay: inline-block;\n\t\t\twidth: 100%;\n\t\t}\n\t\t/* Caixa do campo: referência de posicionamento da label flutuante\n       (isolada da mensagem de erro, que cresce o wrapper). */\n\t\t.field-box {\n\t\t\tposition: relative;\n\t\t\tdisplay: inline-block;\n\t\t\twidth: 100%;\n\t\t}\n\t\t:host([variant=\"in\"]) .field-box {\n\t\t\tpadding-top: var(--fx-space-xs, 6px);\n\t\t}\n\n\t\t/* ---- label base (variant=\"on\", padrão): sobre a borda superior ---- */\n\t\t.flabel {\n\t\t\tposition: absolute;\n\t\t\tleft: var(--fx-space-md, 12px);\n\t\t\ttop: 0;\n\t\t\ttransform: translateY(-50%);\n\t\t\tfont-size: calc(var(--fx-font-size, 14px) - 3px);\n\t\t\tfont-weight: 600;\n\t\t\tcolor: var(--fx-text-muted, #94a3b8);\n\t\t\tbackground-color: var(--fx-surface-background, #fff);\n\t\t\tpadding: 0 4px;\n\t\t\tline-height: 1;\n\t\t\tborder-radius: 2px;\n\t\t\tpointer-events: none;\n\t\t\tz-index: 2;\n\t\t\twhite-space: nowrap;\n\t\t\ttransition:\n\t\t\t\ttop var(--fx-motion-duration-normal, 180ms)\n\t\t\t\t\tvar(--fx-motion-easing, ease-in-out),\n\t\t\t\ttransform var(--fx-motion-duration-normal, 180ms)\n\t\t\t\t\tvar(--fx-motion-easing, ease-in-out),\n\t\t\t\tfont-size var(--fx-motion-duration-normal, 180ms)\n\t\t\t\t\tvar(--fx-motion-easing, ease-in-out),\n\t\t\t\tcolor var(--fx-motion-duration-normal, 180ms)\n\t\t\t\t\tvar(--fx-motion-easing, ease-in-out);\n\t\t}\n\t\t:host([active]) .flabel {\n\t\t\tcolor: var(--fx-color-primary, #4f46e5);\n\t\t}\n\n\t\t/* ---- variant=\"in\": label como placeholder dentro, sobe ao focar/valor ---- */\n\t\t:host([variant=\"in\"]) .flabel {\n\t\t\ttop: 50%;\n\t\t\ttransform: translateY(-50%);\n\t\t\tfont-size: var(--fx-font-size, 14px);\n\t\t\tfont-weight: var(--fx-font-weight, 400);\n\t\t\tbackground: transparent;\n\t\t\tpadding: 0;\n\t\t}\n\t\t:host([variant=\"in\"][active]) .flabel {\n\t\t\ttop: 0;\n\t\t\ttransform: translateY(-50%);\n\t\t\tfont-size: calc(var(--fx-font-size, 14px) - 3px);\n\t\t\tfont-weight: 600;\n\t\t\tbackground-color: var(--fx-surface-background, #fff);\n\t\t\tpadding: 0 5px;\n\t\t\tcolor: var(--fx-color-primary, #4f46e5);\n\t\t}\n\n\t\t/* ---- variant=\"over\": label estática ACIMA do campo (fora, em fluxo) ---- */\n\t\t:host([variant=\"over\"]) {\n\t\t\tdisplay: block;\n\t\t}\n\t\t:host([variant=\"over\"]) .flabel {\n\t\t\tposition: static;\n\t\t\tdisplay: block;\n\t\t\tmargin-bottom: var(--fx-space-xs, 4px);\n\t\t\tbackground: transparent;\n\t\t\tpadding: 0;\n\t\t\tfont-size: calc(var(--fx-font-size, 14px) - 3px);\n\t\t\tfont-weight: 600;\n\t\t\twhite-space: normal;\n\t\t}\n\n\t\t/* ---- estados de erro / sucesso ---- */\n\t\t:host([error]) .flabel,\n\t\t:host([invalid]) .flabel {\n\t\t\tcolor: var(--fx-color-danger, #dc2626);\n\t\t}\n\t\t:host([success]) .flabel,\n\t\t:host([valid]) .flabel {\n\t\t\tcolor: var(--fx-color-success, #10b981);\n\t\t}\n\n\t\t/* ---- mensagem de erro sob o campo (fonte menor) ---- */\n\t\t.error-message {\n\t\t\tdisplay: none;\n\t\t\tmargin-top: var(--fx-space-xs, 4px);\n\t\t\tmargin-left: var(--fx-space-md, 12px);\n\t\t\tfont-size: calc(var(--fx-font-size, 14px) - 3px);\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--fx-color-danger, #dc2626);\n\t\t\tline-height: 1.2;\n\t\t}\n\t\t:host([error]) .error-message,\n\t\t:host([invalid]) .error-message {\n\t\t\tdisplay: block;\n\t\t}\n\t`;\n\tprivate targetControl: HTMLElement | null = null;\n\tprivate observer: MutationObserver | null = null;\n\tprivate listenersReady = false;\n\n\tprotected render(): void {\n\t\tconst control = this.findControl();\n\t\tconst label = this.findLabel();\n\t\tconst originalLabel = label as HTMLElement | null;\n\t\tconst labelText = originalLabel\n\t\t\t? originalLabel.textContent?.replace(/\\s+/g, \" \").trim()\n\t\t\t: \"\";\n\t\tconst labelFor = originalLabel\n\t\t\t? originalLabel.getAttribute(\"for\") || \"\"\n\t\t\t: \"\";\n\t\tconst isOver = this.getAttribute(\"variant\") === \"over\";\n\n\t\tthis.setTemplate(`\n      <div class=\"wrapper\" part=\"wrapper\">\n        ${isOver ? `<label class=\"flabel\" part=\"label\" for=\"${labelFor}\">${labelText}</label>` : \"\"}\n        <div class=\"field-box\" part=\"field\">\n          <slot></slot>\n          ${isOver ? \"\" : `<label class=\"flabel\" part=\"label\" for=\"${labelFor}\">${labelText}</label>`}\n        </div>\n        <div class=\"error-message\" part=\"error\"></div>\n      </div>\n    `);\n\n\t\t// Esconde a label original do light DOM (a renderizada no shadow assume o papel).\n\t\tif (originalLabel) originalLabel.setAttribute(\"hidden\", \"\");\n\n\t\tthis.attachEvents();\n\t\tthis.syncControlReference(control);\n\t\tthis.syncState();\n\t\tthis.applyError();\n\t}\n\n\tprotected override disconnectedCallback(): void {\n\t\tsuper.disconnectedCallback();\n\t\tthis.observer?.disconnect();\n\t}\n\n\t/** Campo de controle = qualquer filho direto que não seja label. */\n\tprivate findControl(): HTMLElement | null {\n\t\treturn (\n\t\t\t(Array.from(this.children).find(\n\t\t\t\t(n) => n.tagName.toLowerCase() !== \"label\",\n\t\t\t) as HTMLElement) ?? null\n\t\t);\n\t}\n\n\t/** Label = filho direto <label>. */\n\tprivate findLabel(): HTMLElement | null {\n\t\treturn (\n\t\t\t(Array.from(this.children).find(\n\t\t\t\t(n) => n.tagName.toLowerCase() === \"label\",\n\t\t\t) as HTMLElement) ?? null\n\t\t);\n\t}\n\n\tprivate attachEvents(): void {\n\t\tconst slot = this.root.querySelector(\"slot\");\n\t\tif (slot) {\n\t\t\tslot.addEventListener(\"slotchange\", () => {\n\t\t\t\t// Se o usuário trocar o controle/label em tempo de execução, re-sincroniza.\n\t\t\t\tconst control = this.findControl();\n\t\t\t\tthis.syncControlReference(control);\n\t\t\t\tthis.syncState();\n\t\t\t\tthis.applyError();\n\t\t\t});\n\t\t}\n\n\t\tif (this.listenersReady) return;\n\t\tthis.listenersReady = true;\n\n\t\tthis.addEventListener(\"focusin\", () => this.syncState());\n\t\tthis.addEventListener(\"focusout\", () =>\n\t\t\tsetTimeout(() => this.syncState(), 60),\n\t\t);\n\t\tthis.addEventListener(\"input\", () => this.syncState());\n\t\tthis.addEventListener(\"change\", () => this.syncState());\n\t}\n\n\t/** Observa mudanças de atributos do controle (value, open, values...). */\n\tprivate syncControlReference(\n\t\tcontrol: HTMLElement | null = this.targetControl,\n\t): void {\n\t\tif (control !== this.targetControl) {\n\t\t\tthis.observer?.disconnect();\n\t\t\tthis.observer = null;\n\t\t\tthis.targetControl = control;\n\t\t\tif (control) {\n\t\t\t\tthis.observer = new MutationObserver(() => this.syncState());\n\t\t\t\tthis.observer.observe(control, {\n\t\t\t\t\tattributes: true,\n\t\t\t\t\tattributeFilter: [\"value\", \"values\", \"start\", \"end\", \"open\"],\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate syncState(): void {\n\t\tif (this.targetControl && !this.targetControl.isConnected) {\n\t\t\tthis.targetControl = null;\n\t\t\tthis.observer?.disconnect();\n\t\t\tthis.observer = null;\n\t\t}\n\n\t\tif (!this.targetControl) {\n\t\t\tthis.removeAttribute(\"active\");\n\t\t\tthis.removeAttribute(\"focus\");\n\t\t\treturn;\n\t\t}\n\n\t\tconst c = this.targetControl as any;\n\t\tconst attrValue = c.getAttribute\n\t\t\t? (c.getAttribute(\"value\") ?? \"\").trim()\n\t\t\t: \"\";\n\t\tconst attrValues = c.getAttribute\n\t\t\t? (c.getAttribute(\"values\") ?? \"\").trim()\n\t\t\t: \"\";\n\t\tconst hasValue = Boolean(\n\t\t\t(typeof c.value === \"string\" && c.value.trim() !== \"\") ||\n\t\t\t(Array.isArray(c.values) && c.values.length > 0) ||\n\t\t\tattrValue !== \"\" ||\n\t\t\tattrValues !== \"\" ||\n\t\t\t(c.hasAttribute &&\n\t\t\t\t(c.hasAttribute(\"open\") || c.hasAttribute(\"start\"))),\n\t\t);\n\n\t\tconst focused = this.isFocusedInside();\n\t\tif (hasValue || focused) {\n\t\t\tthis.setAttribute(\"active\", \"\");\n\t\t\tif (focused) this.setAttribute(\"focus\", \"\");\n\t\t\telse this.removeAttribute(\"focus\");\n\t\t} else {\n\t\t\tthis.removeAttribute(\"active\");\n\t\t\tthis.removeAttribute(\"focus\");\n\t\t}\n\t}\n\n\tprivate applyError(): void {\n\t\tconst hasError = this.hasAttr(\"error\") || this.hasAttr(\"invalid\");\n\t\tconst errMsg = this.root.querySelector(\n\t\t\t\".error-message\",\n\t\t) as HTMLElement | null;\n\t\tif (errMsg) {\n\t\t\terrMsg.textContent = hasError\n\t\t\t\t? this.getAttribute(\"error-text\")?.trim() || \"Valor inválido\"\n\t\t\t\t: \"\";\n\t\t}\n\n\t\t// Espelha o estado no controle interno para que a borda também fique vermelha/verde.\n\t\tif (\n\t\t\tthis.targetControl &&\n\t\t\ttypeof this.targetControl.setAttribute === \"function\"\n\t\t) {\n\t\t\tconst t = this.targetControl;\n\t\t\tif (hasError) {\n\t\t\t\tt.setAttribute(\"error\", \"\");\n\t\t\t\tt.removeAttribute(\"success\");\n\t\t\t} else if (this.hasAttr(\"success\") || this.hasAttr(\"valid\")) {\n\t\t\t\tt.setAttribute(\"success\", \"\");\n\t\t\t\tt.removeAttribute(\"error\");\n\t\t\t} else {\n\t\t\t\tt.removeAttribute(\"error\");\n\t\t\t\tt.removeAttribute(\"success\");\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate isWithin(activeEl: Element): boolean {\n\t\tlet current: Element | null = activeEl;\n\t\twhile (current && current !== this) {\n\t\t\tcurrent = current.parentElement;\n\t\t}\n\t\treturn current === this;\n\t}\n\n\tprivate isFocusedInside(): boolean {\n\t\tconst activeEl = (document as Document).activeElement;\n\t\treturn Boolean(activeEl && this.isWithin(activeEl));\n\t}\n}\n\nexport function defineFxFloatlabel(): typeof FxFloatlabel {\n\treturn defineElement(\"fx-floatlabel\", FxFloatlabel);\n}\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/floatlabel/index.js

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

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

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

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

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

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

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

package/dist/components/input/index.js

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

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

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

package/dist/components/input/input.d.ts

@@ -0,0 +1,22 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-input> — Campo de texto estilizado com os tokens do tema.
+ *
+ * Atributos: type (text|number|email|password|search|tel|url), value, size,
+ * placeholder, disabled, readonly, min, max, step, clearable.
+ * Eventos: `input` e `change` (composed, detail: { value }).
+ */
+export declare class FxInput extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    /** Tamanho do campo. Padrão: `'md'`. */
+    get size(): string;
+    set size(value: string);
+    get value(): string;
+    set value(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected render(): void;
+}
+export declare function defineFxInput(): typeof FxInput;
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,SAuEpB;IAIF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAKjD;IAED,wCAAwC;IACxC,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;cAEkB,MAAM,IAAI,IAAI;CAkDlC;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}

package/dist/components/input/input.js

@@ -0,0 +1,169 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxInput = class _FxInput extends FxElement {
+  // `value` fica FORA da observação: refleti-lo a cada tecla não pode
+  // re-renderizar o template, senão o campo perde o foco ao digitar.
+  static get observedAttributes() {
+    return [
+      "type",
+      "size",
+      "placeholder",
+      "disabled",
+      "readonly",
+      "min",
+      "max",
+      "step"
+    ];
+  }
+  /** Tamanho do campo. 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 value() {
+    return this.getAttr("value");
+  }
+  set value(value) {
+    this.setAttribute("value", value);
+  }
+  get disabled() {
+    return this.hasAttr("disabled");
+  }
+  set disabled(value) {
+    this.toggleAttr("disabled", Boolean(value));
+  }
+  render() {
+    const type = this.getAttr("type", "text");
+    const placeholder = this.getAttr("placeholder");
+    const readonly = this.hasAttr("readonly");
+    const disabled = this.hasAttr("disabled");
+    const min = this.getAttr("min");
+    const max = this.getAttr("max");
+    const step = this.getAttr("step");
+    this.setTemplate(`
+      ${this.hasAttr("clearable") ? '<div class="wrap">' : ""}
+      <input class="field" part="input" type="${type}"
+        ${placeholder ? `placeholder="${placeholder}"` : ""}
+        ${min ? `min="${min}"` : ""} ${max ? `max="${max}"` : ""} ${step ? `step="${step}"` : ""}
+      />
+      ${this.hasAttr("clearable") ? '<button type="button" class="clear" part="clear" aria-label="Limpar" tabindex="-1">×</button></div>' : ""}
+    `);
+    const field = this.root.querySelector(".field");
+    if (!field) return;
+    field.value = this.getAttr("value");
+    if (disabled) field.setAttribute("disabled", "");
+    if (readonly) field.setAttribute("readonly", "");
+    const emit = (event) => {
+      this.value = field.value;
+      this.dispatchEvent(
+        new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } })
+      );
+    };
+    field.addEventListener("input", (e) => {
+      e.stopPropagation();
+      emit("input");
+    });
+    field.addEventListener("change", (e) => {
+      e.stopPropagation();
+      emit("change");
+    });
+    const clearBtn = this.root.querySelector(".clear");
+    const syncClear = () => {
+      clearBtn?.toggleAttribute("hidden", field.value === "");
+    };
+    syncClear();
+    clearBtn?.addEventListener("click", () => {
+      field.value = "";
+      syncClear();
+      emit("input");
+      emit("change");
+      field.focus();
+    });
+    field.addEventListener("input", syncClear);
+  }
+};
+_FxInput.styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    .field {
+      font-family: inherit;
+      font-size: inherit;
+      min-height: var(--fx-size-md);
+      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;
+      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);
+    }
+    .field::placeholder { color: var(--fx-text-muted); opacity: 1; }
+    .field:hover { border-color: var(--fx-border-hover); }
+        .field:focus-visible {
+      outline: none;
+      border-color: var(--fx-color-primary);
+      box-shadow: var(--fx-effect-focus-ring, none);
+    }
+    .field:disabled,
+    .field[readonly] {
+      opacity: 0.55;
+      cursor: not-allowed;
+      background-color: var(--fx-surface-surface-hover);
+    }
+    /* Validação: sobrescrevem a borda/foco via token do preset. */
+    :host([error]) .field,
+    :host([invalid]) .field,
+    :host([error]) .field:focus-visible,
+    :host([invalid]) .field:focus-visible {
+      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]) .field,
+    :host([valid]) .field,
+    :host([success]) .field:focus-visible,
+    :host([valid]) .field:focus-visible {
+      border-color: var(--fx-color-success, #16a34a);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+    }
+    :host([size='sm']) .field { padding: var(--fx-space-sm) var(--fx-space-md); font-size: var(--fx-font-size); width: 220px; min-height: var(--fx-size-sm); }
+    :host([size='lg']) .field { padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); width: 300px; min-height: var(--fx-size-lg); }
+    /* Clearable */
+    :host([clearable]) { position: relative; display: inline-flex; }
+    .wrap { position: relative; display: inline-flex; align-items: center; }
+    :host([clearable]) .field { padding-right: var(--fx-space-xl); }
+    .clear {
+      position: absolute;
+      right: var(--fx-space-xs);
+      border: none;
+      background: transparent;
+      color: var(--fx-text-muted);
+      font-size: calc(var(--fx-font-size) + 4px);
+      line-height: 1;
+      cursor: pointer;
+      padding: 0 var(--fx-space-xs);
+      border-radius: var(--fx-radius-full);
+    }
+    .clear:hover { color: var(--fx-color-danger); }
+    .clear[hidden] { display: none; }
+  `;
+let FxInput = _FxInput;
+function defineFxInput() {
+  return defineElement("fx-input", FxInput);
+}
+export {
+  FxInput,
+  defineFxInput
+};
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":["../../../src/components/input/input.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-input> — Campo de texto estilizado com os tokens do tema.\n *\n * Atributos: type (text|number|email|password|search|tel|url), value, size,\n * placeholder, disabled, readonly, min, max, step, clearable.\n * Eventos: `input` e `change` (composed, detail: { value }).\n */\nexport class FxInput 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    }\n    .field {\n      font-family: inherit;\n      font-size: inherit;\n      min-height: var(--fx-size-md);\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      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    .field::placeholder { color: var(--fx-text-muted); opacity: 1; }\n    .field:hover { border-color: var(--fx-border-hover); }\n        .field:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .field:disabled,\n    .field[readonly] {\n      opacity: 0.55;\n      cursor: not-allowed;\n      background-color: var(--fx-surface-surface-hover);\n    }\n    /* Validação: sobrescrevem a borda/foco via token do preset. */\n    :host([error]) .field,\n    :host([invalid]) .field,\n    :host([error]) .field:focus-visible,\n    :host([invalid]) .field:focus-visible {\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]) .field,\n    :host([valid]) .field,\n    :host([success]) .field:focus-visible,\n    :host([valid]) .field:focus-visible {\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    :host([size='sm']) .field { padding: var(--fx-space-sm) var(--fx-space-md); font-size: var(--fx-font-size); width: 220px; min-height: var(--fx-size-sm); }\n    :host([size='lg']) .field { padding: var(--fx-space-lg) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); width: 300px; min-height: var(--fx-size-lg); }\n    /* Clearable */\n    :host([clearable]) { position: relative; display: inline-flex; }\n    .wrap { position: relative; display: inline-flex; align-items: center; }\n    :host([clearable]) .field { padding-right: var(--fx-space-xl); }\n    .clear {\n      position: absolute;\n      right: var(--fx-space-xs);\n      border: none;\n      background: transparent;\n      color: var(--fx-text-muted);\n      font-size: calc(var(--fx-font-size) + 4px);\n      line-height: 1;\n      cursor: pointer;\n      padding: 0 var(--fx-space-xs);\n      border-radius: var(--fx-radius-full);\n    }\n    .clear:hover { color: var(--fx-color-danger); }\n    .clear[hidden] { display: none; }\n  `;\n\n  // `value` fica FORA da observação: refleti-lo a cada tecla não pode\n  // re-renderizar o template, senão o campo perde o foco ao digitar.\n  static override get observedAttributes(): string[] {\n    return [\n      'type', 'size', 'placeholder',\n      'disabled', 'readonly', 'min', 'max', 'step',\n    ];\n  }\n\n  /** Tamanho do campo. 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 value(): string {\n    return this.getAttr('value');\n  }\n  set value(value: string) {\n    this.setAttribute('value', 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    const type = this.getAttr('type', 'text');\n    const placeholder = this.getAttr('placeholder');\n    const readonly = this.hasAttr('readonly');\n    const disabled = this.hasAttr('disabled');\n    const min = this.getAttr('min');\n    const max = this.getAttr('max');\n    const step = this.getAttr('step');\n\n    this.setTemplate(`\n      ${this.hasAttr('clearable') ? '<div class=\"wrap\">' : ''}\n      <input class=\"field\" part=\"input\" type=\"${type}\"\n        ${placeholder ? `placeholder=\"${placeholder}\"` : ''}\n        ${min ? `min=\"${min}\"` : ''} ${max ? `max=\"${max}\"` : ''} ${step ? `step=\"${step}\"` : ''}\n      />\n      ${this.hasAttr('clearable') ? '<button type=\"button\" class=\"clear\" part=\"clear\" aria-label=\"Limpar\" tabindex=\"-1\">×</button></div>' : ''}\n    `);\n\n    const field = this.root.querySelector<HTMLInputElement>('.field');\n    if (!field) return;\n    field.value = this.getAttr('value');\n    if (disabled) field.setAttribute('disabled', '');\n    if (readonly) field.setAttribute('readonly', '');\n\n    const emit = (event: string): void => {\n      this.value = field.value;\n      this.dispatchEvent(\n        new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } }),\n      );\n    };\n    // Bloqueia o evento nativo (composed, sem detail) para que só o\n    // CustomEvent com detail chegue aos consumidores.\n    field.addEventListener('input', (e) => { e.stopPropagation(); emit('input'); });\n    field.addEventListener('change', (e) => { e.stopPropagation(); emit('change'); });\n\n    // Clearable: botão × que limpa o campo e emite input/change vazios.\n    const clearBtn = this.root.querySelector<HTMLButtonElement>('.clear');\n    const syncClear = (): void => {\n      clearBtn?.toggleAttribute('hidden', field.value === '');\n    };\n    syncClear();\n    clearBtn?.addEventListener('click', () => {\n      field.value = '';\n      syncClear();\n      emit('input');\n      emit('change');\n      field.focus();\n    });\n    field.addEventListener('input', syncClear);\n  }\n}\n\nexport function defineFxInput(): typeof FxInput {\n  return defineElement('fx-input', FxInput);\n}\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/multiselect/index.js

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

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

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