@wrrdev/fenix-ui 1.1.13 → 1.1.14

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

@@ -1 +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\", \"full\", \"icon\", \"icon-pos\"];\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/* Full width: o host estica até o pai; o controle interno com\n\t\t   atributo full (ou largura herdada) acompanha. */\n\t\t:host([full]) {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\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=\"in\" com ícone dentro do campo (fx-input icon):\n\t\t   enquanto a label funciona como placeholder (sem foco/valor), ela\n\t\t   começa DEPOIS do glifo (mesma métrica de padding do fx-input).\n\t\t   Ao subir (active), volta ao offset padrão da borda. ---- */\n\t\t:host([variant=\"in\"]) .flabel.icon-indent {\n\t\t\tleft: calc(\n\t\t\t\tvar(--fx-space-md, 12px) +\n\t\t\t\tvar(--fx-input-icon-size, calc(var(--fx-font-size, 14px) + 6px)) +\n\t\t\t\tvar(--fx-space-sm, 8px)\n\t\t\t);\n\t\t}\n\t\t:host([variant=\"in\"][active]) .flabel.icon-indent {\n\t\t\tleft: var(--fx-space-md, 12px);\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\tthis.applyFull();\n\t\tthis.applyIcon();\n\t\tthis.syncIconIndent();\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\tthis.applyFull();\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(() => {\n\t\t\t\t\tthis.syncState();\n\t\t\t\t\tthis.syncIconIndent();\n\t\t\t\t});\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\", \"icon\", \"icon-pos\"],\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\t/**\n\t * variant=\"in\" + ícone à esquerda dentro do campo (fx-input icon):\n\t * enquanto a label é placeholder ela precisa começar depois do glifo.\n\t * Detecta via atributos icon/icon-pos (ou slot icon) do controle.\n\t */\n\tprivate syncIconIndent(): void {\n\t\tconst label = this.root.querySelector(\".flabel\");\n\t\tif (!label) return;\n\t\tconst c = this.targetControl;\n\t\tconst hasLeftIcon = Boolean(\n\t\t\tc &&\n\t\t\t(c.hasAttribute(\"icon\") || c.querySelector(':scope > [slot=\"icon\"]')) &&\n\t\t\tc.getAttribute(\"icon-pos\") !== \"right\",\n\t\t);\n\t\tlabel.classList.toggle(\"icon-indent\", hasLeftIcon);\n\t}\n\n\tprivate applyFull(): void {\n\t\t// Espelha o full no controle interno: o CSS :host([full]) do floatlabel\n\t\t// estica apenas o HOST — sem isso o campo interno (ex.: fx-input com\n\t\t// width 260px fixa) não acompanharia o container.\n\t\tif (\n\t\t\tthis.targetControl &&\n\t\t\ttypeof this.targetControl.setAttribute === \"function\"\n\t\t) {\n\t\t\tif (this.hasAttr(\"full\")) {\n\t\t\t\tthis.targetControl.setAttribute(\"full\", \"\");\n\t\t\t} else {\n\t\t\t\tthis.targetControl.removeAttribute(\"full\");\n\t\t\t}\n\t\t\t}\n\t}\n\n\tprivate applyIcon(): void {\n\t\tif (\n\t\t\tthis.targetControl &&\n\t\t\ttypeof this.targetControl.setAttribute === \"function\"\n\t\t) {\n\t\t\t// Só propaga icon/icon-pos se o FLOATLABEL possuir o atributo.\n\t\t\t// Se o ícone foi pondo diretamente no controle (ex.: <fx-input icon=\"lock\">),\n\t\t\t// não remove — deixa o controle manter o seu próprio ícone.\n\t\t\tif (this.hasAttr(\"icon\")) {\n\t\t\t\tconst icon = this.getAttr(\"icon\");\n\t\t\t\tconst iconPos = this.getAttr(\"icon-pos\");\n\t\t\t\tif (icon !== \"\") this.targetControl.setAttribute(\"icon\", icon);\n\t\t\t\telse this.targetControl.setAttribute(\"icon\", \"\");\n\t\t\t\tif (iconPos && iconPos !== \"left\") this.targetControl.setAttribute(\"icon-pos\", iconPos);\n\t\t\t\telse this.targetControl.removeAttribute(\"icon-pos\");\n\t\t\t}\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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"}
+{"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 * na primeira renderização — a partir daí NÃO existe cópia no light DOM.\n * Ocultá-la com `hidden` (solução anterior) era frágil: o consumidor, o\n * framework ou uma folha de estilo podiam remover o atributo e a label\n * original reaparecia embaixo do campo, quebrando o floatlabel. Mover o\n * elemento é estrutural: não há nada removível lá fora.\n */\nexport class FxFloatlabel extends FxElement {\n\tstatic override get observedAttributes(): string[] {\n\t\treturn [\"variant\", \"error\", \"invalid\", \"success\", \"valid\", \"full\", \"icon\", \"icon-pos\"];\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/* Full width: o host estica até o pai; o controle interno com\n\t\t   atributo full (ou largura herdada) acompanha. */\n\t\t:host([full]) {\n\t\t\tdisplay: block;\n\t\t\twidth: 100%;\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=\"in\" com ícone dentro do campo (fx-input icon):\n\t\t   enquanto a label funciona como placeholder (sem foco/valor), ela\n\t\t   começa DEPOIS do glifo (mesma métrica de padding do fx-input).\n\t\t   Ao subir (active), volta ao offset padrão da borda. ---- */\n\t\t:host([variant=\"in\"]) .flabel.icon-indent {\n\t\t\tleft: calc(\n\t\t\t\tvar(--fx-space-md, 12px) +\n\t\t\t\tvar(--fx-input-icon-size, calc(var(--fx-font-size, 14px) + 6px)) +\n\t\t\t\tvar(--fx-space-sm, 8px)\n\t\t\t);\n\t\t}\n\t\t:host([variant=\"in\"][active]) .flabel.icon-indent {\n\t\t\tleft: var(--fx-space-md, 12px);\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\t/** <label> adotada do light DOM — vive no Shadow DOM após o 1º render. */\n\tprivate _label: HTMLElement | null = null;\n\tprivate _labelClickBound = false;\n\n\tprotected render(): void {\n\t\tconst control = this.findControl();\n\t\t// Adota a <label> do light DOM (na 1ª renderização, ou se o consumidor\n\t\t// trocar por outra depois). Uma vez movida, o render seguinte não a\n\t\t// encontra no light DOM — a referência `_label` é reutilizada.\n\t\tconst lightLabel = this.findLabel();\n\t\tif (lightLabel) this._label = lightLabel;\n\t\tconst label = this._label;\n\t\tconst isOver = this.getAttribute(\"variant\") === \"over\";\n\n\t\tthis.setTemplate(`\n      <div class=\"wrapper\" part=\"wrapper\">\n        <div class=\"field-box\" part=\"field\">\n          <slot></slot>\n        </div>\n        <div class=\"error-message\" part=\"error\"></div>\n      </div>\n    `);\n\n\t\t// A label original é INSERIDA no Shadow DOM (move o próprio elemento —\n\t\t// não é uma cópia). `setTemplate` reconstrói o template a cada render e\n\t\t// a label desanexada é reinserida no novo wrapper, com estado intacto.\n\t\tif (label) {\n\t\t\tlabel.classList.add(\"flabel\");\n\t\t\tlabel.setAttribute(\"part\", \"label\");\n\t\t\tconst wrapper = this.root.querySelector(\".wrapper\");\n\t\t\tconst fieldBox = this.root.querySelector(\".field-box\");\n\t\t\tif (wrapper && fieldBox) {\n\t\t\t\tif (isOver) wrapper.insertBefore(label, fieldBox);\n\t\t\t\telse fieldBox.appendChild(label);\n\t\t\t}\n\t\t\t// `for` não cruza a fronteira do shadow (o id do controle vive no\n\t\t\t// light DOM): o clique na label foca o campo manualmente.\n\t\t\tif (!this._labelClickBound) {\n\t\t\t\tthis._labelClickBound = true;\n\t\t\t\tlabel.addEventListener(\"click\", (e) => {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\t(this.targetControl as HTMLElement | null)?.focus?.();\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t\tthis.attachEvents();\n\t\tthis.syncControlReference(control);\n\t\tthis.syncState();\n\t\tthis.applyError();\n\t\tthis.applyFull();\n\t\tthis.applyIcon();\n\t\tthis.syncIconIndent();\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\tthis.applyFull();\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(() => {\n\t\t\t\t\tthis.syncState();\n\t\t\t\t\tthis.syncIconIndent();\n\t\t\t\t});\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\", \"icon\", \"icon-pos\"],\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\t/**\n\t * variant=\"in\" + ícone à esquerda dentro do campo (fx-input icon):\n\t * enquanto a label é placeholder ela precisa começar depois do glifo.\n\t * Detecta via atributos icon/icon-pos (ou slot icon) do controle.\n\t */\n\tprivate syncIconIndent(): void {\n\t\tconst label = this.root.querySelector(\".flabel\");\n\t\tif (!label) return;\n\t\tconst c = this.targetControl;\n\t\tconst hasLeftIcon = Boolean(\n\t\t\tc &&\n\t\t\t(c.hasAttribute(\"icon\") || c.querySelector(':scope > [slot=\"icon\"]')) &&\n\t\t\tc.getAttribute(\"icon-pos\") !== \"right\",\n\t\t);\n\t\tlabel.classList.toggle(\"icon-indent\", hasLeftIcon);\n\t}\n\n\tprivate applyFull(): void {\n\t\t// Espelha o full no controle interno: o CSS :host([full]) do floatlabel\n\t\t// estica apenas o HOST — sem isso o campo interno (ex.: fx-input com\n\t\t// width 260px fixa) não acompanharia o container.\n\t\tif (\n\t\t\tthis.targetControl &&\n\t\t\ttypeof this.targetControl.setAttribute === \"function\"\n\t\t) {\n\t\t\tif (this.hasAttr(\"full\")) {\n\t\t\t\tthis.targetControl.setAttribute(\"full\", \"\");\n\t\t\t} else {\n\t\t\t\tthis.targetControl.removeAttribute(\"full\");\n\t\t\t}\n\t\t\t}\n\t}\n\n\tprivate applyIcon(): void {\n\t\tif (\n\t\t\tthis.targetControl &&\n\t\t\ttypeof this.targetControl.setAttribute === \"function\"\n\t\t) {\n\t\t\t// Só propaga icon/icon-pos se o FLOATLABEL possuir o atributo.\n\t\t\t// Se o ícone foi pondo diretamente no controle (ex.: <fx-input icon=\"lock\">),\n\t\t\t// não remove — deixa o controle manter o seu próprio ícone.\n\t\t\tif (this.hasAttr(\"icon\")) {\n\t\t\t\tconst icon = this.getAttr(\"icon\");\n\t\t\t\tconst iconPos = this.getAttr(\"icon-pos\");\n\t\t\t\tif (icon !== \"\") this.targetControl.setAttribute(\"icon\", icon);\n\t\t\t\telse this.targetControl.setAttribute(\"icon\", \"\");\n\t\t\t\tif (iconPos && iconPos !== \"left\") this.targetControl.setAttribute(\"icon-pos\", iconPos);\n\t\t\t\telse this.targetControl.removeAttribute(\"icon-pos\");\n\t\t\t}\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/input/input.d.ts

@@ -1,18 +1,23 @@
-import { FxElement } from '../../core/base';
+import { FxFormElement } from '../../core/form-element';
 /**
  * <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,
- * full (largura 100% acompanhando o elemento pai), icon (nome do glifo Fenix Icons
- * ou emoji/texto livre) e icon-pos (left|right, padrão left).
+ * Form-Associated Custom Element: dentro de um <form> entra no FormData
+ * (via atributo `name`), recebe reset/disable do form, é alvo de
+ * `<label for>`/`autofocus` e o Enter submete o form.
+ *
+ * Atributos: type (text|number|email|password|search|tel|url), value, name,
+ * size, placeholder, disabled, readonly, min, max, step, autofocus,
+ * clearable, full (largura 100% acompanhando o elemento pai), icon (nome do
+ * glifo Fenix Icons ou emoji/texto livre) e icon-pos (left|right, padrão left).
  * Largura: o default (260px; sm 220px / lg 300px) fica no HOST via tokens
  * --fx-input-width(-sm|-lg) — CSS externo, classes e style inline no elemento
  * vencem o default sem precisar de atributo.
  * Slots: `icon` (ícone customizado no lugar do atributo).
- * Eventos: `input` e `change` (composed, detail: { value }).
+ * Eventos: `input`, `change` e `valueChange` (composed, detail: { value }) —
+ * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.
  */
-export declare class FxInput extends FxElement {
+export declare class FxInput extends FxFormElement {
     static styles: string;
     static get observedAttributes(): string[];
     /** Tamanho do campo. Padrão: `'md'`. */
@@ -23,6 +28,8 @@ export declare class FxInput extends FxElement {
     get disabled(): boolean;
     set disabled(value: boolean);
     protected render(): void;
+    /** Empurra o atributo `value` para o campo interno sem re-renderizar. */
+    protected syncInternalControl(): void;
 }
 export declare function defineFxInput(): typeof FxInput;
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C;;;;;;;;;;;;GAYG;AACH,qBAAa,OAAQ,SAAQ,SAAS;IACpC,OAAgB,MAAM,SAuIpB;IAMF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAMjD;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;CA8DlC;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC,OAAgB,MAAM,SAuIpB;IAMF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAMjD;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,EAMtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;cAEkB,MAAM,IAAI,IAAI;IAiFjC,yEAAyE;cACtD,mBAAmB,IAAI,IAAI;CAK/C;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}

package/dist/components/input/input.js

@@ -1,9 +1,9 @@
-import { FxElement } from "../../core/base.js";
+import { FxFormElement } from "../../core/form-element.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
 import { esc } from "../../core/sanitize.js";
 import { FENIX_ICON_BASE_CSS, fenixIconHtml } from "../../icons/base-css.js";
-const _FxInput = class _FxInput extends FxElement {
+const _FxInput = class _FxInput extends FxFormElement {
   // `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.
   // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:
@@ -39,6 +39,8 @@ const _FxInput = class _FxInput extends FxElement {
   }
   set value(value) {
     this.setAttribute("value", value);
+    this.syncInternalControl();
+    this.updateFormValue();
   }
   get disabled() {
     return this.hasAttr("disabled");
@@ -78,6 +80,7 @@ const _FxInput = class _FxInput extends FxElement {
     if (readonly) field.setAttribute("readonly", "");
     const emit = (event) => {
       this.value = field.value;
+      this.emitValueEvents();
       this.dispatchEvent(
         new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } })
       );
@@ -90,6 +93,12 @@ const _FxInput = class _FxInput extends FxElement {
       e.stopPropagation();
       emit("change");
     });
+    field.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" || e.isComposing) return;
+      if (!this.form) return;
+      e.preventDefault();
+      this.form.requestSubmit();
+    });
     const clearBtn = this.root.querySelector(".clear");
     const syncClear = () => {
       clearBtn?.toggleAttribute("hidden", field.value === "");
@@ -103,6 +112,13 @@ const _FxInput = class _FxInput extends FxElement {
       field.focus();
     });
     field.addEventListener("input", syncClear);
+    this.updateFormValue();
+  }
+  /** Empurra o atributo `value` para o campo interno sem re-renderizar. */
+  syncInternalControl() {
+    const field = this.root.querySelector(".field");
+    const value = this.getAttr("value");
+    if (field && field.value !== value) field.value = value;
   }
 };
 _FxInput.styles = css`

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

@@ -1 +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';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\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 * full (largura 100% acompanhando o elemento pai), icon (nome do glifo Fenix Icons\n * ou emoji/texto livre) e icon-pos (left|right, padrão left).\n * Largura: o default (260px; sm 220px / lg 300px) fica no HOST via tokens\n * --fx-input-width(-sm|-lg) — CSS externo, classes e style inline no elemento\n * vencem o default sem precisar de atributo.\n * Slots: `icon` (ícone customizado no lugar do atributo).\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      /* Largura padrão no HOST (e não no .field interno): assim CSS externo,\n         classes do framework (ex.: w-full) e style inline no elemento vencem\n         este default naturalmente — regras do documento têm precedência sobre\n         :host. Default global trocável via token: --fx-input-width (-sm/-lg). */\n      width: var(--fx-input-width, 260px);\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      /* Altura determinística: com line-height fixo, o padding vertical cabe no\n         token --fx-size-* e a caixa fica EXATAMENTE no tamanho padrão\n         (sm 32 / md 40 / lg 48), igual para todos os campos. */\n      line-height: var(--fx-font-line-height);\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-sm) var(--fx-space-lg);\n      /* Acompanha a largura definida no :host. */\n      width: 100%;\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: borda sempre; o brilho (anel) segue o token do preset\n       --fx-effect-error-ring, que acompanha effect.focus-ring — anel\n       desligado ⇒ erro só com a borda vermelha, ligado ⇒ soma o brilho. */\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: var(--fx-effect-error-ring, 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: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n    }\n    :host([size='sm']) { width: var(--fx-input-width-sm, 220px); }\n    :host([size='sm']) .field { padding: var(--fx-space-xs) var(--fx-space-md); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }\n    :host([size='lg']) { width: var(--fx-input-width-lg, 300px); }\n    :host([size='lg']) .field { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }\n    /* Full width: o host estica até o pai e o campo interno acompanha\n       (usar com um container de largura controlada, ex. w-full no Vue). */\n    :host([full]) { display: block; width: 100%; }\n    :host([full]) .field { width: 100%; }\n    /* Clearable */\n    :host([clearable]) { position: relative; display: inline-flex; }\n    :host([clearable][full]) { display: block; }\n    .wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }\n    :host([full]) .wrap { display: flex; width: 100%; }\n    :host([clearable]) .field { padding-right: var(--fx-space-xl); }\n    :host([clearable][full]) .field { flex: 1 1 auto; }\n    /* Ícones (attr icon + slot icon) — DENTRO do campo, sobre o padding\n       (padrão Material/PrimeVue). Tamanho ajustável via --fx-input-icon-size. */\n    .field-icon {\n      position: relative;\n      display: inline-flex;\n      box-sizing: border-box;\n      width: 100%;\n    }\n    .field-icon .field { flex: 1 1 auto; min-width: 0; }\n    :host([full]) .field-icon { display: flex; width: 100%; }\n    .field-icon .fx-icon,\n    .field-icon ::slotted([slot='icon']) {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px));\n      line-height: 1;\n      color: var(--fx-text-muted);\n      pointer-events: none;\n      z-index: 1;\n    }\n    .field-icon.icon-left .fx-icon,\n    .field-icon.icon-left ::slotted([slot='icon']) { left: var(--fx-space-md); }\n    .field-icon.icon-right .fx-icon,\n    .field-icon.icon-right ::slotted([slot='icon']) { right: var(--fx-space-md); }\n    /* padding = posição do ícone + largura + folga extra para o texto\n       não colar no glifo. */\n    .field-icon.icon-left .field {\n      padding-left: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n    }\n    .field-icon.icon-right .field {\n      padding-right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n    }\n    /* icon-pos right + clearable: desloca o × para não sobrepor o ícone. */\n    .field-icon.icon-right + .clear {\n      right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-lg));\n    }\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    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */\n    ${FENIX_ICON_BASE_CSS}\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  // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n  // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n  static override get observedAttributes(): string[] {\n    return [\n      'type', 'size', 'placeholder',\n      'disabled', 'readonly', 'min', 'max', 'step',\n      'icon', 'icon-pos', 'error', 'invalid', 'success', 'valid',\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    const icon = this.getAttr('icon');\n    const iconPos = this.getAttr('icon-pos', 'left') === 'right' ? 'right' : 'left';\n    // Slot `icon` vence o atributo `icon`; sem nenhum dos dois, sem ícone.\n    const slottedIcon = this.querySelector<HTMLElement>('[slot=\"icon\"]');\n    const iconContent = slottedIcon\n      ? '<slot name=\"icon\" part=\"icon\"></slot>'\n      : (icon ? fenixIconHtml(icon) : '');\n    const useIconBox = Boolean(iconContent);\n\n    this.setTemplate(`\n      ${this.hasAttr('clearable') ? '<div class=\"wrap\" part=\"wrap\">' : ''}\n      ${useIconBox ? `<div class=\"field-icon icon-${iconPos}\">` : ''}\n      ${useIconBox && iconPos === 'left' ? iconContent : ''}\n      <input class=\"field\" part=\"input\" type=\"${esc(type)}\"\n        ${placeholder ? `placeholder=\"${esc(placeholder)}\"` : ''}\n        ${min ? `min=\"${esc(min)}\"` : ''} ${max ? `max=\"${esc(max)}\"` : ''} ${step ? `step=\"${esc(step)}\"` : ''}\n      />\n      ${useIconBox && iconPos === 'right' ? iconContent : ''}\n      ${useIconBox ? '</div>' : ''}\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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"}
+{"version":3,"file":"input.js","sources":["../../../src/components/input/input.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\n\n/**\n * <fx-input> — Campo de texto estilizado com os tokens do tema.\n *\n * Form-Associated Custom Element: dentro de um <form> entra no FormData\n * (via atributo `name`), recebe reset/disable do form, é alvo de\n * `<label for>`/`autofocus` e o Enter submete o form.\n *\n * Atributos: type (text|number|email|password|search|tel|url), value, name,\n * size, placeholder, disabled, readonly, min, max, step, autofocus,\n * clearable, full (largura 100% acompanhando o elemento pai), icon (nome do\n * glifo Fenix Icons ou emoji/texto livre) e icon-pos (left|right, padrão left).\n * Largura: o default (260px; sm 220px / lg 300px) fica no HOST via tokens\n * --fx-input-width(-sm|-lg) — CSS externo, classes e style inline no elemento\n * vencem o default sem precisar de atributo.\n * Slots: `icon` (ícone customizado no lugar do atributo).\n * Eventos: `input`, `change` e `valueChange` (composed, detail: { value }) —\n * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.\n */\nexport class FxInput extends FxFormElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n      /* Largura padrão no HOST (e não no .field interno): assim CSS externo,\n         classes do framework (ex.: w-full) e style inline no elemento vencem\n         este default naturalmente — regras do documento têm precedência sobre\n         :host. Default global trocável via token: --fx-input-width (-sm/-lg). */\n      width: var(--fx-input-width, 260px);\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      /* Altura determinística: com line-height fixo, o padding vertical cabe no\n         token --fx-size-* e a caixa fica EXATAMENTE no tamanho padrão\n         (sm 32 / md 40 / lg 48), igual para todos os campos. */\n      line-height: var(--fx-font-line-height);\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-sm) var(--fx-space-lg);\n      /* Acompanha a largura definida no :host. */\n      width: 100%;\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: borda sempre; o brilho (anel) segue o token do preset\n       --fx-effect-error-ring, que acompanha effect.focus-ring — anel\n       desligado ⇒ erro só com a borda vermelha, ligado ⇒ soma o brilho. */\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: var(--fx-effect-error-ring, 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: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n    }\n    :host([size='sm']) { width: var(--fx-input-width-sm, 220px); }\n    :host([size='sm']) .field { padding: var(--fx-space-xs) var(--fx-space-md); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }\n    :host([size='lg']) { width: var(--fx-input-width-lg, 300px); }\n    :host([size='lg']) .field { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }\n    /* Full width: o host estica até o pai e o campo interno acompanha\n       (usar com um container de largura controlada, ex. w-full no Vue). */\n    :host([full]) { display: block; width: 100%; }\n    :host([full]) .field { width: 100%; }\n    /* Clearable */\n    :host([clearable]) { position: relative; display: inline-flex; }\n    :host([clearable][full]) { display: block; }\n    .wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }\n    :host([full]) .wrap { display: flex; width: 100%; }\n    :host([clearable]) .field { padding-right: var(--fx-space-xl); }\n    :host([clearable][full]) .field { flex: 1 1 auto; }\n    /* Ícones (attr icon + slot icon) — DENTRO do campo, sobre o padding\n       (padrão Material/PrimeVue). Tamanho ajustável via --fx-input-icon-size. */\n    .field-icon {\n      position: relative;\n      display: inline-flex;\n      box-sizing: border-box;\n      width: 100%;\n    }\n    .field-icon .field { flex: 1 1 auto; min-width: 0; }\n    :host([full]) .field-icon { display: flex; width: 100%; }\n    .field-icon .fx-icon,\n    .field-icon ::slotted([slot='icon']) {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px));\n      line-height: 1;\n      color: var(--fx-text-muted);\n      pointer-events: none;\n      z-index: 1;\n    }\n    .field-icon.icon-left .fx-icon,\n    .field-icon.icon-left ::slotted([slot='icon']) { left: var(--fx-space-md); }\n    .field-icon.icon-right .fx-icon,\n    .field-icon.icon-right ::slotted([slot='icon']) { right: var(--fx-space-md); }\n    /* padding = posição do ícone + largura + folga extra para o texto\n       não colar no glifo. */\n    .field-icon.icon-left .field {\n      padding-left: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n    }\n    .field-icon.icon-right .field {\n      padding-right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n    }\n    /* icon-pos right + clearable: desloca o × para não sobrepor o ícone. */\n    .field-icon.icon-right + .clear {\n      right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-lg));\n    }\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    /* Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). */\n    ${FENIX_ICON_BASE_CSS}\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  // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n  // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n  static override get observedAttributes(): string[] {\n    return [\n      'type', 'size', 'placeholder',\n      'disabled', 'readonly', 'min', 'max', 'step',\n      'icon', 'icon-pos', 'error', 'invalid', 'success', 'valid',\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    // `value` NÃO é observado (re-render a cada tecla perderia o foco): o\n    // campo interno é sincronizado aqui, sem re-render, preservando foco/cursor.\n    this.syncInternalControl();\n    this.updateFormValue();\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    const icon = this.getAttr('icon');\n    const iconPos = this.getAttr('icon-pos', 'left') === 'right' ? 'right' : 'left';\n    // Slot `icon` vence o atributo `icon`; sem nenhum dos dois, sem ícone.\n    const slottedIcon = this.querySelector<HTMLElement>('[slot=\"icon\"]');\n    const iconContent = slottedIcon\n      ? '<slot name=\"icon\" part=\"icon\"></slot>'\n      : (icon ? fenixIconHtml(icon) : '');\n    const useIconBox = Boolean(iconContent);\n\n    this.setTemplate(`\n      ${this.hasAttr('clearable') ? '<div class=\"wrap\" part=\"wrap\">' : ''}\n      ${useIconBox ? `<div class=\"field-icon icon-${iconPos}\">` : ''}\n      ${useIconBox && iconPos === 'left' ? iconContent : ''}\n      <input class=\"field\" part=\"input\" type=\"${esc(type)}\"\n        ${placeholder ? `placeholder=\"${esc(placeholder)}\"` : ''}\n        ${min ? `min=\"${esc(min)}\"` : ''} ${max ? `max=\"${esc(max)}\"` : ''} ${step ? `step=\"${esc(step)}\"` : ''}\n      />\n      ${useIconBox && iconPos === 'right' ? iconContent : ''}\n      ${useIconBox ? '</div>' : ''}\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      // input (v-model do Vue) + valueChange ([(value)] do Angular).\n      this.emitValueEvents();\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    // Enter submete o form: o <input> interno vive no Shadow DOM e NÃO se\n    // associa ao <form> do light DOM (a fronteira do shadow corta a associação\n    // por árvore) — por isso a submissão implícita é acionada manualmente.\n    // Ouvintes de submit no form (ex.: submit.prevent de frameworks) seguem\n    // recebendo o evento normalmente.\n    field.addEventListener('keydown', (e) => {\n      if (e.key !== 'Enter' || e.isComposing) return;\n      if (!this.form) return;\n      e.preventDefault();\n      this.form.requestSubmit();\n    });\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    // Publica name/value no form (ElementInternals) a cada render — cobre o\n    // estado inicial e mudanças de atributos observados.\n    this.updateFormValue();\n  }\n\n  /** Empurra o atributo `value` para o campo interno sem re-renderizar. */\n  protected override syncInternalControl(): void {\n    const field = this.root.querySelector<HTMLInputElement>('.field');\n    const value = this.getAttr('value');\n    if (field && field.value !== value) field.value = value;\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/knob/knob.d.ts

@@ -1,16 +1,20 @@
-import { FxElement } from '../../core/base';
+import { FxFormElement } from '../../core/form-element';
 /**
  * <fx-knob> - Controle giratorio circular para ajuste de valor.
  *
+ * Form-Associated Custom Element: dentro de um <form> entra no FormData
+ * (via atributo `name`) e recebe reset/disable do form.
+ *
  * permite ajustar um valor arrastando o mouse
  * ou usando as setas do teclado. Exibe um arco de progresso circular com
  * o valor central configuravel via valueTemplate.
  *
  * Atributos: value, min, max, step, size, strokeWidth, valueColor, rangeColor,
  * readonly, disabled, valueTemplate.
- * Evento: `change` (composed, detail: { value }).
+ * Eventos: `change`, `input` e `valueChange` (composed, detail: { value }) —
+ * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.
  */
-export declare class FxKnob extends FxElement {
+export declare class FxKnob extends FxFormElement {
     static styles: string;
     static get observedAttributes(): string[];
     get value(): number;

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

@@ -1 +1 @@
-{"version":3,"file":"knob.d.ts","sourceRoot":"","sources":["../../../src/components/knob/knob.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;;GAUG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,SAoEpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAcjD;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAclB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,CAAC,EAAE,MAAM,EAEhB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,CAAC,EAAE,MAAM,EAEhB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAEjB;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAEjB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,WAAW,CAAC,CAAC,EAAE,MAAM,EAExB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IACD,IAAI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IACD,IAAI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IACD,IAAI,aAAa,CAAC,CAAC,EAAE,MAAM,EAE1B;IAED,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,WAAW,CAAK;cAEL,MAAM,IAAI,IAAI;IAwCjC,OAAO,CAAC,UAAU;IAOlB,gEAAgE;IAChE,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,UAAU;IAclB,OAAO,CAAC,eAAe;IAsEvB,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,UAAU,CAIhB;cAEiB,oBAAoB,IAAI,IAAI;CAKhD;AAED,wBAAgB,YAAY,IAAI,OAAO,MAAM,CAE5C"}
+{"version":3,"file":"knob.d.ts","sourceRoot":"","sources":["../../../src/components/knob/knob.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD;;;;;;;;;;;;;;GAcG;AACH,qBAAa,MAAO,SAAQ,aAAa;IACvC,OAAgB,MAAM,SAoEpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAcjD;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAclB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,CAAC,EAAE,MAAM,EAEhB;IAED,IAAI,GAAG,IAAI,MAAM,CAEhB;IACD,IAAI,GAAG,CAAC,CAAC,EAAE,MAAM,EAEhB;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAEjB;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAEjB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,WAAW,CAAC,CAAC,EAAE,MAAM,EAExB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IACD,IAAI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IACD,IAAI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IACD,IAAI,aAAa,CAAC,CAAC,EAAE,MAAM,EAE1B;IAED,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,OAAO,CAAK;IACpB,OAAO,CAAC,WAAW,CAAK;cAEL,MAAM,IAAI,IAAI;IA2CjC,OAAO,CAAC,UAAU;IAOlB,gEAAgE;IAChE,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,eAAe;IAsEvB,OAAO,CAAC,YAAY,CAKlB;IAEF,OAAO,CAAC,UAAU,CAIhB;cAEiB,oBAAoB,IAAI,IAAI;CAKhD;AAED,wBAAgB,YAAY,IAAI,OAAO,MAAM,CAE5C"}

package/dist/components/knob/knob.js

@@ -1,8 +1,8 @@
-import { FxElement } from "../../core/base.js";
+import { FxFormElement } from "../../core/form-element.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
 import { esc } from "../../core/sanitize.js";
-const _FxKnob = class _FxKnob extends FxElement {
+const _FxKnob = class _FxKnob extends FxFormElement {
   constructor() {
     super(...arguments);
     this._isDragging = false;
@@ -147,6 +147,7 @@ const _FxKnob = class _FxKnob extends FxElement {
       </div>
     `);
     this.attachListeners();
+    this.updateFormValue();
   }
   getSizeNum() {
     const s = this.size;
@@ -178,6 +179,7 @@ const _FxKnob = class _FxKnob extends FxElement {
     const clamped = this.clampValue(newValue);
     if (clamped !== this.value) {
       this.value = clamped;
+      this.emitValueEvents();
       this.dispatchEvent(
         new CustomEvent("change", {
           bubbles: true,

package/dist/components/knob/knob.js.map

@@ -1 +1 @@
-{"version":3,"file":"knob.js","sources":["../../../src/components/knob/knob.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-knob> - Controle giratorio circular para ajuste de valor.\n *\n * permite ajustar um valor arrastando o mouse\n * ou usando as setas do teclado. Exibe um arco de progresso circular com\n * o valor central configuravel via valueTemplate.\n *\n * Atributos: value, min, max, step, size, strokeWidth, valueColor, rangeColor,\n * readonly, disabled, valueTemplate.\n * Evento: `change` (composed, detail: { value }).\n */\nexport class FxKnob extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      --_size: 100px;\n      --_stroke-width: 8px;\n      --_value-color: var(--fx-color-primary);\n      --_range-color: var(--fx-border-default);\n    }\n    :host([size='sm']) { --_size: 60px; }\n    :host([size='lg']) { --_size: 140px; }\n    .knob {\n      position: relative;\n      width: var(--_size);\n      height: var(--_size);\n      cursor: pointer;\n      user-select: none;\n      touch-action: none;\n    }\n    :host([readonly]) .knob,\n    :host([disabled]) .knob {\n      cursor: default;\n      pointer-events: none;\n    }\n    :host([disabled]) .knob {\n      opacity: 0.55;\n    }\n    svg {\n      width: 100%;\n      height: 100%;\n      transform: rotate(-90deg);\n    }\n    .track {\n      fill: none;\n      stroke: var(--_range-color);\n      stroke-width: var(--_stroke-width);\n    }\n    .value {\n      fill: none;\n      stroke: var(--_value-color);\n      stroke-width: var(--_stroke-width);\n      stroke-linecap: round;\n      transition: stroke-dashoffset var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .label {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-weight: 600;\n      color: var(--fx-text-default);\n      pointer-events: none;\n    }\n    :host([size='sm']) .label { font-size: 11px; }\n    :host([size='md']) .label { font-size: 14px; }\n    :host([size='lg']) .label { font-size: 18px; }\n    .knob:focus-visible {\n      outline: none;\n    }\n    .knob:focus-visible svg {\n      /* Mesmo fallback none dos demais componentes: sem motor de tema (ou com\n         effect.focus-ring desligado) não há anel de foco. */\n      filter: drop-shadow(var(--fx-effect-focus-ring, none));\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return [\n      'value',\n      'min',\n      'max',\n      'step',\n      'size',\n      'stroke-width',\n      'value-color',\n      'range-color',\n      'readonly',\n      'disabled',\n      'value-template',\n    ];\n  }\n\n  get value(): number {\n    return this.clampValue(Number(this.getAttr('value', '0')) || 0);\n  }\n  set value(v: number) {\n    if (this.readonly || this.disabled) return;\n    const clamped = this.clampValue(v);\n    const current = this.clampValue(Number(this.getAttr('value', '0')) || 0);\n    if (clamped !== current) {\n      this.setAttribute('value', String(clamped));\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: { value: clamped },\n        }),\n      );\n    }\n  }\n\n  get min(): number {\n    return Number(this.getAttr('min', '0')) || 0;\n  }\n  set min(v: number) {\n    this.setAttribute('min', String(v));\n  }\n\n  get max(): number {\n    return Number(this.getAttr('max', '100')) || 100;\n  }\n  set max(v: number) {\n    this.setAttribute('max', String(v));\n  }\n\n  get step(): number {\n    return Number(this.getAttr('step', '1')) || 1;\n  }\n  set step(v: number) {\n    this.setAttribute('step', String(v));\n  }\n\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(v: string) {\n    this.setAttribute('size', v);\n  }\n\n  get strokeWidth(): number {\n    return Number(this.getAttr('stroke-width', '8')) || 8;\n  }\n  set strokeWidth(v: number) {\n    this.setAttribute('stroke-width', String(v));\n  }\n\n  get valueColor(): string {\n    return this.getAttr('value-color', '');\n  }\n  set valueColor(v: string) {\n    this.setAttribute('value-color', v);\n  }\n\n  get rangeColor(): string {\n    return this.getAttr('range-color', '');\n  }\n  set rangeColor(v: string) {\n    this.setAttribute('range-color', v);\n  }\n\n  get readonly(): boolean {\n    return this.hasAttr('readonly');\n  }\n  set readonly(v: boolean) {\n    this.toggleAttr('readonly', Boolean(v));\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(v: boolean) {\n    this.toggleAttr('disabled', Boolean(v));\n  }\n\n  get valueTemplate(): string {\n    return this.getAttr('value-template', '{value}');\n  }\n  set valueTemplate(v: string) {\n    this.setAttribute('value-template', v);\n  }\n\n  private _isDragging = false;\n  private _startY = 0;\n  private _startValue = 0;\n\n  protected override render(): void {\n    const min = this.min;\n    const max = this.max;\n    const value = this.clampValue(this.value);\n    const range = max - min;\n    const pct = range > 0 ? (value - min) / range : 0;\n\n    const sizeNum = this.getSizeNum();\n    const strokeW = this.strokeWidth;\n    const radius = (sizeNum - strokeW) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const offset = circumference * (1 - pct);\n\n    const vc = this.valueColor ? this.safeColor(this.valueColor) : '';\n    const rc = this.rangeColor ? this.safeColor(this.rangeColor) : '';\n    const valueColorStyle = vc ? `--_value-color: ${vc};` : '';\n    const rangeColorStyle = rc ? `--_range-color: ${rc};` : '';\n\n    const displayValue = this.valueTemplate.replace('{value}', String(Math.round(value)));\n\n    this.setTemplate(`\n      <div class=\"knob\" part=\"knob\" tabindex=\"${this.disabled ? '-1' : '0'}\"\n        role=\"slider\" aria-valuenow=\"${value}\" aria-valuemin=\"${min}\" aria-valuemax=\"${max}\"\n        aria-readonly=\"${this.readonly}\" aria-disabled=\"${this.disabled}\"\n        style=\"${valueColorStyle}${rangeColorStyle}\">\n        <svg viewBox=\"0 0 ${sizeNum} ${sizeNum}\" part=\"svg\">\n          <circle class=\"track\" part=\"track\"\n            cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\" />\n          <circle class=\"value\" part=\"value\"\n            cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\"\n            stroke-dasharray=\"${circumference}\"\n            stroke-dashoffset=\"${offset}\" />\n        </svg>\n        <div class=\"label\" part=\"label\">${esc(displayValue)}</div>\n      </div>\n    `);\n\n    this.attachListeners();\n  }\n\n  private getSizeNum(): number {\n    const s = this.size;\n    if (s === 'sm') return 60;\n    if (s === 'lg') return 140;\n    return 100;\n  }\n\n  /** Valida um valor de cor CSS, retornando-o seguro ou vazio. */\n  private safeColor(value: string): string {\n    const v = value.trim();\n    if (/^#[0-9a-fA-F]{3,8}$/.test(v)) return v;\n    if (/^(rgb|rgba|hsl|hsla)\\([\\d\\s.,%()]+\\)$/i.test(v)) return v;\n    if (/^var\\(--[\\w-]+(,\\s*[^)]*)?\\)$/.test(v)) return v;\n    if (/^[a-zA-Z]+$/.test(v)) return v;\n    return '';\n  }\n\n  private clampValue(v: number): number {\n    const min = this.min;\n    const max = this.max;\n    const step = this.step;\n    let clamped = Math.min(max, Math.max(min, v));\n    if (step > 0) {\n      clamped = Math.round((clamped - min) / step) * step + min;\n      clamped = Math.min(max, Math.max(min, clamped));\n    }\n    return clamped;\n  }\n\n  private emitChange(newValue: number): void {\n    const clamped = this.clampValue(newValue);\n    if (clamped !== this.value) {\n      this.value = clamped;\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: { value: clamped },\n        }),\n      );\n    }\n  }\n\n  private attachListeners(): void {\n    const knob = this.root.querySelector<HTMLElement>('.knob');\n    if (!knob) return;\n\n    knob.addEventListener('mousedown', (e: MouseEvent) => {\n      if (this.readonly || this.disabled) return;\n      e.preventDefault();\n      this._isDragging = true;\n      this._startY = e.clientY;\n      this._startValue = this.value;\n      knob.focus();\n      document.addEventListener('mousemove', this._onMouseMove);\n      document.addEventListener('mouseup', this._onMouseUp);\n    });\n\n    knob.addEventListener('touchstart', (e: TouchEvent) => {\n      if (this.readonly || this.disabled) return;\n      e.preventDefault();\n      this._isDragging = true;\n      this._startY = e.touches[0].clientY;\n      this._startValue = this.value;\n      knob.focus();\n    }, { passive: false });\n\n    knob.addEventListener('touchmove', (e: TouchEvent) => {\n      if (!this._isDragging || this.readonly || this.disabled) return;\n      e.preventDefault();\n      const deltaY = this._startY - e.touches[0].clientY;\n      const sensitivity = (this.max - this.min) / 100;\n      this.emitChange(this._startValue + deltaY * sensitivity);\n    }, { passive: false });\n\n    knob.addEventListener('touchend', () => {\n      this._isDragging = false;\n    });\n\n    knob.addEventListener('keydown', (e: KeyboardEvent) => {\n      if (this.readonly || this.disabled) return;\n      const step = this.step;\n      switch (e.key) {\n        case 'ArrowUp':\n        case 'ArrowRight':\n          e.preventDefault();\n          this.emitChange(this.value + step);\n          break;\n        case 'ArrowDown':\n        case 'ArrowLeft':\n          e.preventDefault();\n          this.emitChange(this.value - step);\n          break;\n        case 'Home':\n          e.preventDefault();\n          this.emitChange(this.min);\n          break;\n        case 'End':\n          e.preventDefault();\n          this.emitChange(this.max);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          this.emitChange(this.value + step * 10);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          this.emitChange(this.value - step * 10);\n          break;\n      }\n    });\n  }\n\n  private _onMouseMove = (e: MouseEvent): void => {\n    if (!this._isDragging) return;\n    const deltaY = this._startY - e.clientY;\n    const sensitivity = (this.max - this.min) / 100;\n    this.emitChange(this._startValue + deltaY * sensitivity);\n  };\n\n  private _onMouseUp = (): void => {\n    this._isDragging = false;\n    document.removeEventListener('mousemove', this._onMouseMove);\n    document.removeEventListener('mouseup', this._onMouseUp);\n  };\n\n  protected override disconnectedCallback(): void {\n    document.removeEventListener('mousemove', this._onMouseMove);\n    document.removeEventListener('mouseup', this._onMouseUp);\n    super.disconnectedCallback();\n  }\n}\n\nexport function defineFxKnob(): typeof FxKnob {\n  return defineElement('fx-knob', FxKnob);\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"knob.js","sources":["../../../src/components/knob/knob.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-knob> - Controle giratorio circular para ajuste de valor.\n *\n * Form-Associated Custom Element: dentro de um <form> entra no FormData\n * (via atributo `name`) e recebe reset/disable do form.\n *\n * permite ajustar um valor arrastando o mouse\n * ou usando as setas do teclado. Exibe um arco de progresso circular com\n * o valor central configuravel via valueTemplate.\n *\n * Atributos: value, min, max, step, size, strokeWidth, valueColor, rangeColor,\n * readonly, disabled, valueTemplate.\n * Eventos: `change`, `input` e `valueChange` (composed, detail: { value }) —\n * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.\n */\nexport class FxKnob extends FxFormElement {\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      --_size: 100px;\n      --_stroke-width: 8px;\n      --_value-color: var(--fx-color-primary);\n      --_range-color: var(--fx-border-default);\n    }\n    :host([size='sm']) { --_size: 60px; }\n    :host([size='lg']) { --_size: 140px; }\n    .knob {\n      position: relative;\n      width: var(--_size);\n      height: var(--_size);\n      cursor: pointer;\n      user-select: none;\n      touch-action: none;\n    }\n    :host([readonly]) .knob,\n    :host([disabled]) .knob {\n      cursor: default;\n      pointer-events: none;\n    }\n    :host([disabled]) .knob {\n      opacity: 0.55;\n    }\n    svg {\n      width: 100%;\n      height: 100%;\n      transform: rotate(-90deg);\n    }\n    .track {\n      fill: none;\n      stroke: var(--_range-color);\n      stroke-width: var(--_stroke-width);\n    }\n    .value {\n      fill: none;\n      stroke: var(--_value-color);\n      stroke-width: var(--_stroke-width);\n      stroke-linecap: round;\n      transition: stroke-dashoffset var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .label {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-weight: 600;\n      color: var(--fx-text-default);\n      pointer-events: none;\n    }\n    :host([size='sm']) .label { font-size: 11px; }\n    :host([size='md']) .label { font-size: 14px; }\n    :host([size='lg']) .label { font-size: 18px; }\n    .knob:focus-visible {\n      outline: none;\n    }\n    .knob:focus-visible svg {\n      /* Mesmo fallback none dos demais componentes: sem motor de tema (ou com\n         effect.focus-ring desligado) não há anel de foco. */\n      filter: drop-shadow(var(--fx-effect-focus-ring, none));\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return [\n      'value',\n      'min',\n      'max',\n      'step',\n      'size',\n      'stroke-width',\n      'value-color',\n      'range-color',\n      'readonly',\n      'disabled',\n      'value-template',\n    ];\n  }\n\n  get value(): number {\n    return this.clampValue(Number(this.getAttr('value', '0')) || 0);\n  }\n  set value(v: number) {\n    if (this.readonly || this.disabled) return;\n    const clamped = this.clampValue(v);\n    const current = this.clampValue(Number(this.getAttr('value', '0')) || 0);\n    if (clamped !== current) {\n      this.setAttribute('value', String(clamped));\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: { value: clamped },\n        }),\n      );\n    }\n  }\n\n  get min(): number {\n    return Number(this.getAttr('min', '0')) || 0;\n  }\n  set min(v: number) {\n    this.setAttribute('min', String(v));\n  }\n\n  get max(): number {\n    return Number(this.getAttr('max', '100')) || 100;\n  }\n  set max(v: number) {\n    this.setAttribute('max', String(v));\n  }\n\n  get step(): number {\n    return Number(this.getAttr('step', '1')) || 1;\n  }\n  set step(v: number) {\n    this.setAttribute('step', String(v));\n  }\n\n  get size(): string {\n    const s = this.getAttr('size', 'md');\n    return s === 'sm' || s === 'lg' ? s : 'md';\n  }\n  set size(v: string) {\n    this.setAttribute('size', v);\n  }\n\n  get strokeWidth(): number {\n    return Number(this.getAttr('stroke-width', '8')) || 8;\n  }\n  set strokeWidth(v: number) {\n    this.setAttribute('stroke-width', String(v));\n  }\n\n  get valueColor(): string {\n    return this.getAttr('value-color', '');\n  }\n  set valueColor(v: string) {\n    this.setAttribute('value-color', v);\n  }\n\n  get rangeColor(): string {\n    return this.getAttr('range-color', '');\n  }\n  set rangeColor(v: string) {\n    this.setAttribute('range-color', v);\n  }\n\n  get readonly(): boolean {\n    return this.hasAttr('readonly');\n  }\n  set readonly(v: boolean) {\n    this.toggleAttr('readonly', Boolean(v));\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(v: boolean) {\n    this.toggleAttr('disabled', Boolean(v));\n  }\n\n  get valueTemplate(): string {\n    return this.getAttr('value-template', '{value}');\n  }\n  set valueTemplate(v: string) {\n    this.setAttribute('value-template', v);\n  }\n\n  private _isDragging = false;\n  private _startY = 0;\n  private _startValue = 0;\n\n  protected override render(): void {\n    const min = this.min;\n    const max = this.max;\n    const value = this.clampValue(this.value);\n    const range = max - min;\n    const pct = range > 0 ? (value - min) / range : 0;\n\n    const sizeNum = this.getSizeNum();\n    const strokeW = this.strokeWidth;\n    const radius = (sizeNum - strokeW) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const offset = circumference * (1 - pct);\n\n    const vc = this.valueColor ? this.safeColor(this.valueColor) : '';\n    const rc = this.rangeColor ? this.safeColor(this.rangeColor) : '';\n    const valueColorStyle = vc ? `--_value-color: ${vc};` : '';\n    const rangeColorStyle = rc ? `--_range-color: ${rc};` : '';\n\n    const displayValue = this.valueTemplate.replace('{value}', String(Math.round(value)));\n\n    this.setTemplate(`\n      <div class=\"knob\" part=\"knob\" tabindex=\"${this.disabled ? '-1' : '0'}\"\n        role=\"slider\" aria-valuenow=\"${value}\" aria-valuemin=\"${min}\" aria-valuemax=\"${max}\"\n        aria-readonly=\"${this.readonly}\" aria-disabled=\"${this.disabled}\"\n        style=\"${valueColorStyle}${rangeColorStyle}\">\n        <svg viewBox=\"0 0 ${sizeNum} ${sizeNum}\" part=\"svg\">\n          <circle class=\"track\" part=\"track\"\n            cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\" />\n          <circle class=\"value\" part=\"value\"\n            cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\"\n            stroke-dasharray=\"${circumference}\"\n            stroke-dashoffset=\"${offset}\" />\n        </svg>\n        <div class=\"label\" part=\"label\">${esc(displayValue)}</div>\n      </div>\n    `);\n\n    this.attachListeners();\n    // Publica name/value no form (ElementInternals) a cada render — `value`\n    // é observado, então cada mudança passa por aqui.\n    this.updateFormValue();\n  }\n\n  private getSizeNum(): number {\n    const s = this.size;\n    if (s === 'sm') return 60;\n    if (s === 'lg') return 140;\n    return 100;\n  }\n\n  /** Valida um valor de cor CSS, retornando-o seguro ou vazio. */\n  private safeColor(value: string): string {\n    const v = value.trim();\n    if (/^#[0-9a-fA-F]{3,8}$/.test(v)) return v;\n    if (/^(rgb|rgba|hsl|hsla)\\([\\d\\s.,%()]+\\)$/i.test(v)) return v;\n    if (/^var\\(--[\\w-]+(,\\s*[^)]*)?\\)$/.test(v)) return v;\n    if (/^[a-zA-Z]+$/.test(v)) return v;\n    return '';\n  }\n\n  private clampValue(v: number): number {\n    const min = this.min;\n    const max = this.max;\n    const step = this.step;\n    let clamped = Math.min(max, Math.max(min, v));\n    if (step > 0) {\n      clamped = Math.round((clamped - min) / step) * step + min;\n      clamped = Math.min(max, Math.max(min, clamped));\n    }\n    return clamped;\n  }\n\n  private emitChange(newValue: number): void {\n    const clamped = this.clampValue(newValue);\n    if (clamped !== this.value) {\n      this.value = clamped;\n      // input (v-model do Vue) + valueChange ([(value)] do Angular).\n      this.emitValueEvents();\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: { value: clamped },\n        }),\n      );\n    }\n  }\n\n  private attachListeners(): void {\n    const knob = this.root.querySelector<HTMLElement>('.knob');\n    if (!knob) return;\n\n    knob.addEventListener('mousedown', (e: MouseEvent) => {\n      if (this.readonly || this.disabled) return;\n      e.preventDefault();\n      this._isDragging = true;\n      this._startY = e.clientY;\n      this._startValue = this.value;\n      knob.focus();\n      document.addEventListener('mousemove', this._onMouseMove);\n      document.addEventListener('mouseup', this._onMouseUp);\n    });\n\n    knob.addEventListener('touchstart', (e: TouchEvent) => {\n      if (this.readonly || this.disabled) return;\n      e.preventDefault();\n      this._isDragging = true;\n      this._startY = e.touches[0].clientY;\n      this._startValue = this.value;\n      knob.focus();\n    }, { passive: false });\n\n    knob.addEventListener('touchmove', (e: TouchEvent) => {\n      if (!this._isDragging || this.readonly || this.disabled) return;\n      e.preventDefault();\n      const deltaY = this._startY - e.touches[0].clientY;\n      const sensitivity = (this.max - this.min) / 100;\n      this.emitChange(this._startValue + deltaY * sensitivity);\n    }, { passive: false });\n\n    knob.addEventListener('touchend', () => {\n      this._isDragging = false;\n    });\n\n    knob.addEventListener('keydown', (e: KeyboardEvent) => {\n      if (this.readonly || this.disabled) return;\n      const step = this.step;\n      switch (e.key) {\n        case 'ArrowUp':\n        case 'ArrowRight':\n          e.preventDefault();\n          this.emitChange(this.value + step);\n          break;\n        case 'ArrowDown':\n        case 'ArrowLeft':\n          e.preventDefault();\n          this.emitChange(this.value - step);\n          break;\n        case 'Home':\n          e.preventDefault();\n          this.emitChange(this.min);\n          break;\n        case 'End':\n          e.preventDefault();\n          this.emitChange(this.max);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          this.emitChange(this.value + step * 10);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          this.emitChange(this.value - step * 10);\n          break;\n      }\n    });\n  }\n\n  private _onMouseMove = (e: MouseEvent): void => {\n    if (!this._isDragging) return;\n    const deltaY = this._startY - e.clientY;\n    const sensitivity = (this.max - this.min) / 100;\n    this.emitChange(this._startValue + deltaY * sensitivity);\n  };\n\n  private _onMouseUp = (): void => {\n    this._isDragging = false;\n    document.removeEventListener('mousemove', this._onMouseMove);\n    document.removeEventListener('mouseup', this._onMouseUp);\n  };\n\n  protected override disconnectedCallback(): void {\n    document.removeEventListener('mousemove', this._onMouseMove);\n    document.removeEventListener('mouseup', this._onMouseUp);\n    super.disconnectedCallback();\n  }\n}\n\nexport function defineFxKnob(): typeof FxKnob {\n  return defineElement('fx-knob', FxKnob);\n}"],"names":[],"mappings":"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"}

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

@@ -1,23 +1,31 @@
-import { FxElement } from '../../core/base';
+import { FxFormElement } from '../../core/form-element';
 /**
  * <fx-multiselect> — Seleção múltipla .
  *
+ * Form-Associated Custom Element: dentro de um <form> entra no FormData com
+ * UMA entrada por valor selecionado (via atributo `name`).
+ *
  * 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[] }).
+ * Eventos: `change` e `valuesChange` (composed, detail: { values: string[] }) —
+ * `valuesChange` é o two-way binding do Angular [(value)] em seleção múltipla.
  */
-export declare class FxMultiselect extends FxElement {
+export declare class FxMultiselect extends FxFormElement {
     static styles: string;
     static get observedAttributes(): string[];
     private observer?;
     private docListener?;
     private selected;
+    /** Seleção inicial (para form.reset() restaurar o estado). */
+    private _initialValues?;
     /** Valores selecionados (CSV no atributo / array na propriedade). */
     get values(): string[];
     set values(list: string[]);
+    /** No FormData do form: uma entrada `name` por valor selecionado. */
+    protected getFormValue(): string | FormData | null;
     get disabled(): boolean;
     set disabled(value: boolean);
     private get options();
@@ -25,6 +33,8 @@ export declare class FxMultiselect extends FxElement {
     protected disconnectedCallback(): void;
     /** Aplica a seleção, reflete e emite change. */
     private commit;
+    /** form.reset(): restaura a seleção inicial. */
+    formResetCallback(): void;
     private toggleValue;
     /** Navegação por teclado entre as opções do listbox (WCAG 2.1.1). */
     private _navigateOptions;

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

@@ -1 +1 @@
-{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/multiselect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,SAAS;IAC1C,OAAgB,MAAM,SAqOpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAIjD;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;IAMnB,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;cAiBL,MAAM,IAAI,IAAI;CAwIlC;AAED,wBAAgB,mBAAmB,IAAI,OAAO,aAAa,CAE1D"}
+{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/multiselect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD;;;;;;;;;;;;;GAaG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,OAAgB,MAAM,SAqOpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAIjD;IAED,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAqB;IACrC,8DAA8D;IAC9D,OAAO,CAAC,cAAc,CAAC,CAAW;IAElC,qEAAqE;IACrE,IAAI,MAAM,IAAI,MAAM,EAAE,CAGrB;IACD,IAAI,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,EAExB;IAED,qEAAqE;cAClD,YAAY,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI;IAQ3D,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,OAAO,KAAK,OAAO,GAKlB;cAEkB,iBAAiB,IAAI,IAAI;cAgBzB,oBAAoB,IAAI,IAAI;IAM/C,gDAAgD;IAChD,OAAO,CAAC,MAAM;IAqBd,gDAAgD;IACvC,iBAAiB,IAAI,IAAI;IAQlC,OAAO,CAAC,WAAW;IAMnB,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;cAiBL,MAAM,IAAI,IAAI;CAwIlC;AAED,wBAAgB,mBAAmB,IAAI,OAAO,aAAa,CAE1D"}

package/dist/components/multiselect/multiselect.js

@@ -1,8 +1,8 @@
-import { FxElement } from "../../core/base.js";
+import { FxFormElement } from "../../core/form-element.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
 import { esc } from "../../core/sanitize.js";
-const _FxMultiselect = class _FxMultiselect extends FxElement {
+const _FxMultiselect = class _FxMultiselect extends FxFormElement {
   constructor() {
     super(...arguments);
     this.selected = /* @__PURE__ */ new Set();
@@ -18,6 +18,14 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
   set values(list) {
     this.setAttribute("values", list.join(","));
   }
+  /** No FormData do form: uma entrada `name` por valor selecionado. */
+  getFormValue() {
+    const values = this.values;
+    if (!this.name || values.length === 0) return null;
+    const fd = new FormData();
+    values.forEach((v) => fd.append(this.name, v));
+    return fd;
+  }
   get disabled() {
     return this.hasAttr("disabled");
   }
@@ -32,6 +40,7 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
   }
   connectedCallback() {
     this.selected = new Set(this.values);
+    if (!this._initialValues) this._initialValues = [...this.values];
     super.connectedCallback();
     this.observer = new MutationObserver(() => this.render());
     this.observer.observe(this, { childList: true, subtree: true, characterData: true });
@@ -52,6 +61,7 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
   commit() {
     this.values = [...this.selected];
     this.render();
+    this.updateFormValue();
     this.dispatchEvent(
       new CustomEvent("change", {
         bubbles: true,
@@ -59,6 +69,21 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
         detail: { values: [...this.selected] }
       })
     );
+    this.dispatchEvent(
+      new CustomEvent("valuesChange", {
+        bubbles: true,
+        composed: true,
+        detail: { values: [...this.selected] }
+      })
+    );
+  }
+  /** form.reset(): restaura a seleção inicial. */
+  formResetCallback() {
+    const initial = this._initialValues ?? [];
+    this.values = initial;
+    this.selected = new Set(initial);
+    this.render();
+    this.updateFormValue();
   }
   toggleValue(value) {
     if (this.selected.has(value)) this.selected.delete(value);