@wrrdev/fenix-ui 1.0.14 → 1.0.16

package/dist/components/dialog/dialog.js

@@ -1,7 +1,12 @@
 import { FxElement } from "../../core/base.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
+import { esc } from "../../core/sanitize.js";
 const _FxDialog = class _FxDialog extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._previouslyFocused = null;
+  }
   static get observedAttributes() {
     return ["open", "size", "heading"];
   }
@@ -16,9 +21,9 @@ const _FxDialog = class _FxDialog extends FxElement {
     const heading = this.getAttr("heading");
     this.setTemplate(`
       <div class="overlay" part="overlay" ${isOpen ? "" : "hidden"}>
-        <div class="dialog" role="dialog" aria-modal="true" aria-label="${heading}">
+        <div class="dialog" role="dialog" aria-modal="true" aria-label="${esc(heading)}" tabindex="-1">
           <header>
-            <h2>${heading}</h2>
+            <h2>${esc(heading)}</h2>
             <button type="button" class="close" part="close" aria-label="Fechar">×</button>
           </header>
           <div class="body"><slot></slot></div>
@@ -31,6 +36,9 @@ const _FxDialog = class _FxDialog extends FxElement {
     const closeBtn = this.root.querySelector(".close");
     const close = () => {
       this.open = false;
+      this._cleanup?.();
+      this._cleanup = void 0;
+      this._restoreFocus();
       this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true }));
     };
     overlay?.addEventListener("click", (e) => {
@@ -41,16 +49,46 @@ const _FxDialog = class _FxDialog extends FxElement {
       if (e.key === "Escape") {
         e.stopPropagation();
         close();
+        return;
       }
+      if (e.key === "Tab") this._trapFocus(e);
     };
-    document.addEventListener("keydown", onKey, { once: true });
+    document.addEventListener("keydown", onKey);
     this._cleanup = () => document.removeEventListener("keydown", onKey);
-    requestAnimationFrame(() => this.root.querySelector(".dialog")?.focus());
+    requestAnimationFrame(() => {
+      this._previouslyFocused = document.activeElement;
+      this.root.querySelector(".dialog")?.focus();
+    });
     this.dispatchEvent(new CustomEvent("open", { bubbles: true, composed: true }));
   }
+  /** Mantém o foco dentro do modal (WCAG 2.4.3 / 2.1.2). */
+  _trapFocus(e) {
+    const dialog = this.root.querySelector(".dialog");
+    if (!dialog) return;
+    const focusables = dialog.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (!focusables.length) return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = this.root.activeElement;
+    if (e.shiftKey && (active === first || active === dialog)) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+  _restoreFocus() {
+    if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();
+    this._previouslyFocused = null;
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this._cleanup?.();
+    this._cleanup = void 0;
+    this._restoreFocus();
   }
 };
 _FxDialog.styles = css`

package/dist/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-dialog> — Janela modal com overlay, ESC para fechar e foco preso.\n *\n * Atributos: open, size (sm|md|lg), heading (título).\n * Slots: padrão (conteúdo), footer (botões de ação).\n * Eventos: `open`, `close` (composed).\n */\nexport class FxDialog extends FxElement {\n  static override styles = css`\n    :host { display: contents; }\n    .overlay {\n      position: fixed;\n      inset: 0;\n      background: color-mix(in srgb, var(--fx-text-default, #000) 45%, transparent);\n      backdrop-filter: blur(3px);\n      -webkit-backdrop-filter: blur(3px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: var(--fx-z-modal, 1100);\n      animation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .overlay[hidden] { display: none; }\n    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n    .dialog {\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-lg);\n      box-shadow: var(--fx-shadow-xl);\n      width: min(560px, calc(100vw - 32px));\n      max-height: calc(100vh - 64px);\n      display: flex;\n      flex-direction: column;\n      font-family: var(--fx-font-family);\n      animation: pop var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    @keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n    :host([size='sm']) .dialog { width: min(400px, calc(100vw - 32px)); }\n    :host([size='lg']) .dialog { width: min(800px, calc(100vw - 32px)); }\n    header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--fx-space-lg) var(--fx-space-xl);\n      border-bottom: 1px solid var(--fx-border-default);\n    }\n    h2 {\n      margin: 0;\n      font-size: calc(var(--fx-font-size) + 2px);\n      font-weight: 600;\n      color: var(--fx-text-default);\n    }\n    .close {\n      border: none;\n      background: transparent;\n      color: var(--fx-text-muted);\n      font-size: calc(var(--fx-font-size) + 6px);\n      cursor: pointer;\n      line-height: 1;\n      padding: 0 var(--fx-space-xs);\n      border-radius: var(--fx-radius-full);\n    }\n    .close:hover { color: var(--fx-color-danger); }\n    .body {\n      padding: var(--fx-space-lg) var(--fx-space-xl);\n      overflow-y: auto;\n      color: var(--fx-text-default);\n      font-size: var(--fx-font-size);\n    }\n    footer {\n      padding: var(--fx-space-md) var(--fx-space-xl);\n      border-top: 1px solid var(--fx-border-default);\n      display: flex;\n      justify-content: flex-end;\n      gap: var(--fx-space-sm);\n    }\n    footer[hidden] { display: none; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['open', 'size', 'heading'];\n  }\n\n  get open(): boolean { return this.hasAttr('open'); }\n  set open(value: boolean) { this.toggleAttr('open', value); }\n\n  protected override render(): void {\n    const isOpen = this.open;\n    const heading = this.getAttr('heading');\n\n    this.setTemplate(`\n      <div class=\"overlay\" part=\"overlay\" ${isOpen ? '' : 'hidden'}>\n        <div class=\"dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${heading}\">\n          <header>\n            <h2>${heading}</h2>\n            <button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">×</button>\n          </header>\n          <div class=\"body\"><slot></slot></div>\n          <footer part=\"footer\"><slot name=\"footer\"></slot></footer>\n        </div>\n      </div>\n    `);\n\n    if (!isOpen) return;\n\n    const overlay = this.root.querySelector<HTMLElement>('.overlay');\n    const closeBtn = this.root.querySelector<HTMLButtonElement>('.close');\n    const close = (): void => {\n      this.open = false;\n      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n    };\n    overlay?.addEventListener('click', (e) => { if (e.target === overlay) close(); });\n    closeBtn?.addEventListener('click', close);\n\n    // ESC fecha + foco no diálogo\n    const onKey = (e: KeyboardEvent): void => {\n      if (e.key === 'Escape') { e.stopPropagation(); close(); }\n    };\n    document.addEventListener('keydown', onKey, { once: true });\n    this._cleanup = () => document.removeEventListener('keydown', onKey);\n\n    requestAnimationFrame(() => this.root.querySelector<HTMLElement>('.dialog')?.focus());\n    this.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));\n  }\n\n  private _cleanup?: () => void;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cleanup?.();\n  }\n}\n\nexport function defineFxDialog(): typeof FxDialog {\n  return defineElement('fx-dialog', FxDialog);\n}\n"],"names":[],"mappings":";;;AAWO,MAAM,YAAN,MAAM,kBAAiB,UAAU;AAAA,EAwEtC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,QAAQ,SAAS;AAAA,EACnC;AAAA,EAEA,IAAI,OAAgB;AAAE,WAAO,KAAK,QAAQ,MAAM;AAAA,EAAG;AAAA,EACnD,IAAI,KAAK,OAAgB;AAAE,SAAK,WAAW,QAAQ,KAAK;AAAA,EAAG;AAAA,EAExC,SAAe;AAChC,UAAM,SAAS,KAAK;AACpB,UAAM,UAAU,KAAK,QAAQ,SAAS;AAEtC,SAAK,YAAY;AAAA,4CACuB,SAAS,KAAK,QAAQ;AAAA,0EACQ,OAAO;AAAA;AAAA,kBAE/D,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOpB;AAED,QAAI,CAAC,OAAQ;AAEb,UAAM,UAAU,KAAK,KAAK,cAA2B,UAAU;AAC/D,UAAM,WAAW,KAAK,KAAK,cAAiC,QAAQ;AACpE,UAAM,QAAQ,MAAY;AACxB,WAAK,OAAO;AACZ,WAAK,cAAc,IAAI,YAAY,SAAS,EAAE,SAAS,MAAM,UAAU,KAAA,CAAM,CAAC;AAAA,IAChF;AACA,aAAS,iBAAiB,SAAS,CAAC,MAAM;AAAE,UAAI,EAAE,WAAW,QAAS,OAAA;AAAA,IAAS,CAAC;AAChF,cAAU,iBAAiB,SAAS,KAAK;AAGzC,UAAM,QAAQ,CAAC,MAA2B;AACxC,UAAI,EAAE,QAAQ,UAAU;AAAE,UAAE,gBAAA;AAAmB,cAAA;AAAA,MAAS;AAAA,IAC1D;AACA,aAAS,iBAAiB,WAAW,OAAO,EAAE,MAAM,MAAM;AAC1D,SAAK,WAAW,MAAM,SAAS,oBAAoB,WAAW,KAAK;AAEnE,0BAAsB,MAAM,KAAK,KAAK,cAA2B,SAAS,GAAG,OAAO;AACpF,SAAK,cAAc,IAAI,YAAY,QAAQ,EAAE,SAAS,MAAM,UAAU,KAAA,CAAM,CAAC;AAAA,EAC/E;AAAA,EAIS,uBAA6B;AACpC,UAAM,qBAAA;AACN,SAAK,WAAA;AAAA,EACP;AACF;AA3HE,UAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,WAAN;AA8HA,SAAS,iBAAkC;AAChD,SAAO,cAAc,aAAa,QAAQ;AAC5C;"}
+{"version":3,"file":"dialog.js","sources":["../../../src/components/dialog/dialog.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-dialog> — Janela modal com overlay, ESC para fechar e foco preso.\n *\n * Atributos: open, size (sm|md|lg), heading (título).\n * Slots: padrão (conteúdo), footer (botões de ação).\n * Eventos: `open`, `close` (composed).\n */\nexport class FxDialog extends FxElement {\n  static override styles = css`\n    :host { display: contents; }\n    .overlay {\n      position: fixed;\n      inset: 0;\n      background: color-mix(in srgb, var(--fx-text-default, #000) 45%, transparent);\n      backdrop-filter: blur(3px);\n      -webkit-backdrop-filter: blur(3px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: var(--fx-z-modal, 1100);\n      animation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .overlay[hidden] { display: none; }\n    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }\n    .dialog {\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-lg);\n      box-shadow: var(--fx-shadow-xl);\n      width: min(560px, calc(100vw - 32px));\n      max-height: calc(100vh - 64px);\n      display: flex;\n      flex-direction: column;\n      font-family: var(--fx-font-family);\n      animation: pop var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    @keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }\n    :host([size='sm']) .dialog { width: min(400px, calc(100vw - 32px)); }\n    :host([size='lg']) .dialog { width: min(800px, calc(100vw - 32px)); }\n    header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--fx-space-lg) var(--fx-space-xl);\n      border-bottom: 1px solid var(--fx-border-default);\n    }\n    h2 {\n      margin: 0;\n      font-size: calc(var(--fx-font-size) + 2px);\n      font-weight: 600;\n      color: var(--fx-text-default);\n    }\n    .close {\n      border: none;\n      background: transparent;\n      color: var(--fx-text-muted);\n      font-size: calc(var(--fx-font-size) + 6px);\n      cursor: pointer;\n      line-height: 1;\n      padding: 0 var(--fx-space-xs);\n      border-radius: var(--fx-radius-full);\n    }\n    .close:hover { color: var(--fx-color-danger); }\n    .body {\n      padding: var(--fx-space-lg) var(--fx-space-xl);\n      overflow-y: auto;\n      color: var(--fx-text-default);\n      font-size: var(--fx-font-size);\n    }\n    footer {\n      padding: var(--fx-space-md) var(--fx-space-xl);\n      border-top: 1px solid var(--fx-border-default);\n      display: flex;\n      justify-content: flex-end;\n      gap: var(--fx-space-sm);\n    }\n    footer[hidden] { display: none; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['open', 'size', 'heading'];\n  }\n\n  get open(): boolean { return this.hasAttr('open'); }\n  set open(value: boolean) { this.toggleAttr('open', value); }\n\n  protected override render(): void {\n    const isOpen = this.open;\n    const heading = this.getAttr('heading');\n\n    this.setTemplate(`\n      <div class=\"overlay\" part=\"overlay\" ${isOpen ? '' : 'hidden'}>\n        <div class=\"dialog\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${esc(heading)}\" tabindex=\"-1\">\n          <header>\n            <h2>${esc(heading)}</h2>\n            <button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">×</button>\n          </header>\n          <div class=\"body\"><slot></slot></div>\n          <footer part=\"footer\"><slot name=\"footer\"></slot></footer>\n        </div>\n      </div>\n    `);\n\n    if (!isOpen) return;\n\n    const overlay = this.root.querySelector<HTMLElement>('.overlay');\n    const closeBtn = this.root.querySelector<HTMLButtonElement>('.close');\n    const close = (): void => {\n      this.open = false;\n      this._cleanup?.();\n      this._cleanup = undefined;\n      this._restoreFocus();\n      this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));\n    };\n    overlay?.addEventListener('click', (e) => { if (e.target === overlay) close(); });\n    closeBtn?.addEventListener('click', close);\n\n    // ESC fecha + foco preso no diálogo\n    const onKey = (e: KeyboardEvent): void => {\n      if (e.key === 'Escape') { e.stopPropagation(); close(); return; }\n      if (e.key === 'Tab') this._trapFocus(e);\n    };\n    document.addEventListener('keydown', onKey);\n    this._cleanup = () => document.removeEventListener('keydown', onKey);\n\n    requestAnimationFrame(() => {\n      this._previouslyFocused = document.activeElement as HTMLElement | null;\n      this.root.querySelector<HTMLElement>('.dialog')?.focus();\n    });\n    this.dispatchEvent(new CustomEvent('open', { bubbles: true, composed: true }));\n  }\n\n  private _cleanup?: () => void;\n  private _previouslyFocused: HTMLElement | null = null;\n\n  /** Mantém o foco dentro do modal (WCAG 2.4.3 / 2.1.2). */\n  private _trapFocus(e: KeyboardEvent): void {\n    const dialog = this.root.querySelector<HTMLElement>('.dialog');\n    if (!dialog) return;\n    const focusables = dialog.querySelectorAll<HTMLElement>(\n      'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n    );\n    if (!focusables.length) return;\n    const first = focusables[0];\n    const last = focusables[focusables.length - 1];\n    const active = this.root.activeElement;\n    if (e.shiftKey && (active === first || active === dialog)) {\n      e.preventDefault();\n      last.focus();\n    } else if (!e.shiftKey && active === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  }\n\n  private _restoreFocus(): void {\n    if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n    this._previouslyFocused = null;\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._cleanup?.();\n    this._cleanup = undefined;\n    this._restoreFocus();\n  }\n}\n\nexport function defineFxDialog(): typeof FxDialog {\n  return defineElement('fx-dialog', FxDialog);\n}\n"],"names":[],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/dialog/index.ts"],"sourcesContent":["import { FxDialog, defineFxDialog } from './dialog';\n\nexport { FxDialog };\n\n\ndefineFxDialog();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-dialog': FxDialog;\n  }\n}\n\r\n\r\n"],"names":[],"mappings":";;AAKA,eAAA;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/dialog/index.ts"],"sourcesContent":["import { FxDialog, defineFxDialog } from './dialog';\n\nexport { FxDialog };\n\n\ndefineFxDialog();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-dialog': FxDialog;\n  }\n}\n\n\n"],"names":[],"mappings":";;AAKA,eAAA;"}

package/dist/components/drawer/drawer.d.ts

@@ -22,6 +22,11 @@ export declare class FxDrawer extends FxElement {
     protected connectedCallback(): void;
     protected disconnectedCallback(): void;
     private _onKeydown;
+    private _previouslyFocused;
+    private _close;
+    /** Mantém o foco dentro do drawer (WCAG 2.4.3 / 2.1.2). */
+    private _trapFocus;
+    private _restoreFocus;
 }
 export declare function defineFxDrawer(): typeof FxDrawer;
 //# sourceMappingURL=drawer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;GASG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACtC,OAAgB,MAAM,SAsHpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAa,KAAK,IAAI,MAAM,CAE3B;IACD,IAAa,KAAK,CAAC,CAAC,EAAE,MAAM,EAE3B;IAED,IAAI,QAAQ,IAAI,MAAM,CAGrB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;cAsBd,iBAAiB,IAAI,IAAI;cAazB,oBAAoB,IAAI,IAAI;IAK/C,OAAO,CAAC,UAAU,CAAwC;CAC1D;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;GASG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACtC,OAAgB,MAAM,SAsHpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,IAAa,KAAK,IAAI,MAAM,CAE3B;IACD,IAAa,KAAK,CAAC,CAAC,EAAE,MAAM,EAE3B;IAED,IAAI,QAAQ,IAAI,MAAM,CAGrB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;cAwBd,iBAAiB,IAAI,IAAI;cAYzB,oBAAoB,IAAI,IAAI;IAM/C,OAAO,CAAC,UAAU,CAAwC;IAC1D,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,OAAO,CAAC,MAAM,CAOZ;IAEF,2DAA2D;IAC3D,OAAO,CAAC,UAAU;IAmBlB,OAAO,CAAC,aAAa;CAIrB;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}

package/dist/components/drawer/drawer.js

@@ -1,11 +1,21 @@
 import { FxElement } from "../../core/base.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
+import { esc } from "../../core/sanitize.js";
 const _FxDrawer = class _FxDrawer extends FxElement {
   constructor() {
     super(...arguments);
     this._onKeydown = () => {
     };
+    this._previouslyFocused = null;
+    this._close = () => {
+      if (!this.open) return;
+      this.open = false;
+      this._restoreFocus();
+      this.dispatchEvent(
+        new CustomEvent("close", { bubbles: true, composed: true })
+      );
+    };
   }
   static get observedAttributes() {
     return ["open", "title", "position"];
@@ -33,37 +43,61 @@ const _FxDrawer = class _FxDrawer extends FxElement {
     const title = this.getAttr("title");
     this.setTemplate(`
       <div class="overlay" part="overlay"></div>
-      <div class="panel" part="panel" role="dialog" aria-modal="true" aria-label="${title || "Drawer"}">
-        ${title !== "" ? `<div class="header" part="header"><span class="title">${title}</span><button type="button" class="close" part="close" aria-label="Fechar">✕</button></div>` : ""}
+      <div class="panel" part="panel" role="dialog" aria-modal="true" aria-label="${esc(title || "Drawer")}" tabindex="-1">
+        ${title !== "" ? `<div class="header" part="header"><span class="title">${esc(title)}</span><button type="button" class="close" part="close" aria-label="Fechar">✕</button></div>` : ""}
         <div class="body" part="body"><slot></slot></div>
       </div>
     `);
-    const close = () => {
-      if (!this.open) return;
-      this.open = false;
-      this.dispatchEvent(
-        new CustomEvent("close", { bubbles: true, composed: true })
-      );
-    };
-    this.root.querySelector(".overlay")?.addEventListener("click", close);
-    this.root.querySelector(".close")?.addEventListener("click", close);
+    this.root.querySelector(".overlay")?.addEventListener("click", this._close);
+    this.root.querySelector(".close")?.addEventListener("click", this._close);
+    if (this.open) {
+      requestAnimationFrame(() => {
+        if (this._previouslyFocused === null) {
+          this._previouslyFocused = document.activeElement;
+        }
+        this.root.querySelector(".panel")?.focus();
+      });
+    }
   }
   connectedCallback() {
     super.connectedCallback?.();
     this._onKeydown = (e) => {
       if (e.key === "Escape" && this.open) {
-        this.open = false;
-        this.dispatchEvent(
-          new CustomEvent("close", { bubbles: true, composed: true })
-        );
+        this._close();
+      } else if (e.key === "Tab" && this.open) {
+        this._trapFocus(e);
       }
     };
     document.addEventListener("keydown", this._onKeydown);
   }
   disconnectedCallback() {
     document.removeEventListener("keydown", this._onKeydown);
+    this._restoreFocus();
     super.disconnectedCallback?.();
   }
+  /** Mantém o foco dentro do drawer (WCAG 2.4.3 / 2.1.2). */
+  _trapFocus(e) {
+    const panel = this.root.querySelector(".panel");
+    if (!panel) return;
+    const focusables = panel.querySelectorAll(
+      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    );
+    if (!focusables.length) return;
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = this.root.activeElement;
+    if (e.shiftKey && (active === first || active === panel)) {
+      e.preventDefault();
+      last.focus();
+    } else if (!e.shiftKey && active === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+  _restoreFocus() {
+    if (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();
+    this._previouslyFocused = null;
+  }
 };
 _FxDrawer.styles = css`
 		:host {

package/dist/components/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../../src/components/drawer/drawer.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-drawer> — Painel deslizante (drawer) com overlay.\n *\n * Atributos:\n *  - position: 'left' | 'right' | 'top' | 'bottom' (padrão: right);\n *  - title: texto do cabeçalho;\n *  - open: exibe o drawer.\n * Conteúdo: livre, via slot.\n * Eventos: `open` e `close` (composed). Fecha por ESC ou clique no overlay.\n */\nexport class FxDrawer extends FxElement {\n\tstatic override styles = css`\n\t\t:host {\n\t\t\tdisplay: contents;\n\t\t\tfont-family: var(--fx-font-family);\n\t\t\tfont-size: var(--fx-font-size);\n\t\t\tcolor: var(--fx-text-default);\n\t\t}\n\t\t.overlay {\n\t\t\tdisplay: none;\n\t\t\tposition: fixed;\n\t\t\tinset: 0;\n\t\t\tbackground: color-mix(\n\t\t\t\tin srgb,\n\t\t\t\tvar(--fx-text-default, #000) 45%,\n\t\t\t\ttransparent\n\t\t\t);\n\t\t\tbackdrop-filter: blur(3px);\n\t\t\t-webkit-backdrop-filter: blur(3px);\n\t\t\tz-index: var(--fx-z-overlay, 1090);\n\t\t\tanimation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n\t\t}\n\t\t:host([open]) .overlay {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.panel {\n\t\t\tposition: fixed;\n\t\t\tbackground: var(--fx-surface-background);\n\t\t\tbox-shadow: var(--fx-shadow-xl);\n\t\t\tz-index: var(--fx-z-modal, 1000);\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: auto;\n\t\t}\n\t\t:host(:not([open])) .panel {\n\t\t\tdisplay: none;\n\t\t}\n\t\t:host([open]) .panel {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t/* left / right — altura total, largura mínima fixa e expansível */\n\t\t:host([position=\"left\"]) .panel,\n\t\t:host(:not([position])) .panel,\n\t\t:host([position=\"right\"]) .panel {\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: var(--fx-drawer-width, 360px);\n\t\t\tmin-width: 300px;\n\t\t\tmax-width: 90vw;\n\t\t}\n\t\t:host([position=\"left\"]) .panel {\n\t\t\tleft: 0;\n\t\t}\n\t\t:host([position=\"right\"]) .panel,\n\t\t:host(:not([position])) .panel {\n\t\t\tright: 0;\n\t\t}\n\n\t\t/* top / bottom — largura total, altura mínima fixa e expansível */\n\t\t:host([position=\"top\"]) .panel,\n\t\t:host([position=\"bottom\"]) .panel {\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: var(--fx-drawer-height, 280px);\n\t\t\tmin-height: 180px;\n\t\t\tmax-height: 85vh;\n\t\t}\n\t\t:host([position=\"top\"]) .panel {\n\t\t\ttop: 0;\n\t\t}\n\t\t:host([position=\"bottom\"]) .panel {\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t.header {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--fx-space-sm);\n\t\t\tmin-height: var(--fx-size-lg);\n\t\t\tpadding: var(--fx-space-sm) var(--fx-space-md);\n\t\t\tborder-bottom: 1px solid var(--fx-border-default);\n\t\t\tflex: none;\n\t\t\tposition: sticky;\n\t\t\ttop: 0;\n\t\t\tbackground: var(--fx-surface-background);\n\t\t}\n\t\t.title {\n\t\t\tfont-weight: 700;\n\t\t\tflex: 1;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t\t.close {\n\t\t\tborder: none;\n\t\t\tbackground: transparent;\n\t\t\tcursor: pointer;\n\t\t\tcolor: var(--fx-text-muted);\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tline-height: 1;\n\t\t\tborder-radius: var(--fx-radius-sm);\n\t\t\tfont-size: 16px;\n\t\t\ttransition: background var(--fx-motion-duration-fast)\n\t\t\t\tvar(--fx-motion-easing);\n\t\t}\n\t\t.close:hover {\n\t\t\tbackground: color-mix(\n\t\t\t\tin srgb,\n\t\t\t\tvar(--fx-color-danger) 14%,\n\t\t\t\tvar(--fx-surface-background)\n\t\t\t);\n\t\t\tcolor: var(--fx-color-danger);\n\t\t}\n\t\t.body {\n\t\t\tpadding: var(--fx-space-md);\n\t\t\tflex: 1;\n\t\t}\n\t`;\n\n\tstatic override get observedAttributes(): string[] {\n\t\treturn [\"open\", \"title\", \"position\"];\n\t}\n\n\tget open(): boolean {\n\t\treturn this.hasAttr(\"open\");\n\t}\n\tset open(value: boolean) {\n\t\tthis.toggleAttr(\"open\", value);\n\t}\n\n\toverride get title(): string {\n\t\treturn this.getAttr(\"title\");\n\t}\n\toverride set title(v: string) {\n\t\tthis.setAttribute(\"title\", v);\n\t}\n\n\tget position(): string {\n\t\tconst p = this.getAttr(\"position\");\n\t\treturn [\"left\", \"right\", \"top\", \"bottom\"].includes(p) ? p : \"right\";\n\t}\n\tset position(v: string) {\n\t\tthis.setAttribute(\"position\", v);\n\t}\n\n\tprotected override render(): void {\n\t\tconst title = this.getAttr(\"title\");\n\n\t\tthis.setTemplate(`\n      <div class=\"overlay\" part=\"overlay\"></div>\n      <div class=\"panel\" part=\"panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${title || \"Drawer\"}\">\n        ${title !== \"\" ? `<div class=\"header\" part=\"header\"><span class=\"title\">${title}</span><button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">✕</button></div>` : \"\"}\n        <div class=\"body\" part=\"body\"><slot></slot></div>\n      </div>\n    `);\n\n\t\tconst close = () => {\n\t\t\tif (!this.open) return;\n\t\t\tthis.open = false;\n\t\t\tthis.dispatchEvent(\n\t\t\t\tnew CustomEvent(\"close\", { bubbles: true, composed: true }),\n\t\t\t);\n\t\t};\n\t\tthis.root.querySelector(\".overlay\")?.addEventListener(\"click\", close);\n\t\tthis.root.querySelector(\".close\")?.addEventListener(\"click\", close);\n\t}\n\n\tprotected override connectedCallback(): void {\n\t\tsuper.connectedCallback?.();\n\t\tthis._onKeydown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === \"Escape\" && this.open) {\n\t\t\t\tthis.open = false;\n\t\t\t\tthis.dispatchEvent(\n\t\t\t\t\tnew CustomEvent(\"close\", { bubbles: true, composed: true }),\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"keydown\", this._onKeydown);\n\t}\n\n\tprotected override disconnectedCallback(): void {\n\t\tdocument.removeEventListener(\"keydown\", this._onKeydown);\n\t\tsuper.disconnectedCallback?.();\n\t}\n\n\tprivate _onKeydown: (e: KeyboardEvent) => void = () => {};\n}\n\nexport function defineFxDrawer(): typeof FxDrawer {\n  return defineElement('fx-drawer', FxDrawer);\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"drawer.js","sources":["../../../src/components/drawer/drawer.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-drawer> — Painel deslizante (drawer) com overlay.\n *\n * Atributos:\n *  - position: 'left' | 'right' | 'top' | 'bottom' (padrão: right);\n *  - title: texto do cabeçalho;\n *  - open: exibe o drawer.\n * Conteúdo: livre, via slot.\n * Eventos: `open` e `close` (composed). Fecha por ESC ou clique no overlay.\n */\nexport class FxDrawer extends FxElement {\n\tstatic override styles = css`\n\t\t:host {\n\t\t\tdisplay: contents;\n\t\t\tfont-family: var(--fx-font-family);\n\t\t\tfont-size: var(--fx-font-size);\n\t\t\tcolor: var(--fx-text-default);\n\t\t}\n\t\t.overlay {\n\t\t\tdisplay: none;\n\t\t\tposition: fixed;\n\t\t\tinset: 0;\n\t\t\tbackground: color-mix(\n\t\t\t\tin srgb,\n\t\t\t\tvar(--fx-text-default, #000) 45%,\n\t\t\t\ttransparent\n\t\t\t);\n\t\t\tbackdrop-filter: blur(3px);\n\t\t\t-webkit-backdrop-filter: blur(3px);\n\t\t\tz-index: var(--fx-z-overlay, 1090);\n\t\t\tanimation: fade var(--fx-motion-duration-fast) var(--fx-motion-easing);\n\t\t}\n\t\t:host([open]) .overlay {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.panel {\n\t\t\tposition: fixed;\n\t\t\tbackground: var(--fx-surface-background);\n\t\t\tbox-shadow: var(--fx-shadow-xl);\n\t\t\tz-index: var(--fx-z-modal, 1000);\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: auto;\n\t\t}\n\t\t:host(:not([open])) .panel {\n\t\t\tdisplay: none;\n\t\t}\n\t\t:host([open]) .panel {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t/* left / right — altura total, largura mínima fixa e expansível */\n\t\t:host([position=\"left\"]) .panel,\n\t\t:host(:not([position])) .panel,\n\t\t:host([position=\"right\"]) .panel {\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t\twidth: var(--fx-drawer-width, 360px);\n\t\t\tmin-width: 300px;\n\t\t\tmax-width: 90vw;\n\t\t}\n\t\t:host([position=\"left\"]) .panel {\n\t\t\tleft: 0;\n\t\t}\n\t\t:host([position=\"right\"]) .panel,\n\t\t:host(:not([position])) .panel {\n\t\t\tright: 0;\n\t\t}\n\n\t\t/* top / bottom — largura total, altura mínima fixa e expansível */\n\t\t:host([position=\"top\"]) .panel,\n\t\t:host([position=\"bottom\"]) .panel {\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: var(--fx-drawer-height, 280px);\n\t\t\tmin-height: 180px;\n\t\t\tmax-height: 85vh;\n\t\t}\n\t\t:host([position=\"top\"]) .panel {\n\t\t\ttop: 0;\n\t\t}\n\t\t:host([position=\"bottom\"]) .panel {\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t.header {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--fx-space-sm);\n\t\t\tmin-height: var(--fx-size-lg);\n\t\t\tpadding: var(--fx-space-sm) var(--fx-space-md);\n\t\t\tborder-bottom: 1px solid var(--fx-border-default);\n\t\t\tflex: none;\n\t\t\tposition: sticky;\n\t\t\ttop: 0;\n\t\t\tbackground: var(--fx-surface-background);\n\t\t}\n\t\t.title {\n\t\t\tfont-weight: 700;\n\t\t\tflex: 1;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t\t.close {\n\t\t\tborder: none;\n\t\t\tbackground: transparent;\n\t\t\tcursor: pointer;\n\t\t\tcolor: var(--fx-text-muted);\n\t\t\twidth: 28px;\n\t\t\theight: 28px;\n\t\t\tline-height: 1;\n\t\t\tborder-radius: var(--fx-radius-sm);\n\t\t\tfont-size: 16px;\n\t\t\ttransition: background var(--fx-motion-duration-fast)\n\t\t\t\tvar(--fx-motion-easing);\n\t\t}\n\t\t.close:hover {\n\t\t\tbackground: color-mix(\n\t\t\t\tin srgb,\n\t\t\t\tvar(--fx-color-danger) 14%,\n\t\t\t\tvar(--fx-surface-background)\n\t\t\t);\n\t\t\tcolor: var(--fx-color-danger);\n\t\t}\n\t\t.body {\n\t\t\tpadding: var(--fx-space-md);\n\t\t\tflex: 1;\n\t\t}\n\t`;\n\n\tstatic override get observedAttributes(): string[] {\n\t\treturn [\"open\", \"title\", \"position\"];\n\t}\n\n\tget open(): boolean {\n\t\treturn this.hasAttr(\"open\");\n\t}\n\tset open(value: boolean) {\n\t\tthis.toggleAttr(\"open\", value);\n\t}\n\n\toverride get title(): string {\n\t\treturn this.getAttr(\"title\");\n\t}\n\toverride set title(v: string) {\n\t\tthis.setAttribute(\"title\", v);\n\t}\n\n\tget position(): string {\n\t\tconst p = this.getAttr(\"position\");\n\t\treturn [\"left\", \"right\", \"top\", \"bottom\"].includes(p) ? p : \"right\";\n\t}\n\tset position(v: string) {\n\t\tthis.setAttribute(\"position\", v);\n\t}\n\n\tprotected override render(): void {\n\t\tconst title = this.getAttr(\"title\");\n\n\t\tthis.setTemplate(`\n      <div class=\"overlay\" part=\"overlay\"></div>\n      <div class=\"panel\" part=\"panel\" role=\"dialog\" aria-modal=\"true\" aria-label=\"${esc(title || \"Drawer\")}\" tabindex=\"-1\">\n        ${title !== \"\" ? `<div class=\"header\" part=\"header\"><span class=\"title\">${esc(title)}</span><button type=\"button\" class=\"close\" part=\"close\" aria-label=\"Fechar\">✕</button></div>` : \"\"}\n        <div class=\"body\" part=\"body\"><slot></slot></div>\n      </div>\n    `);\n\n\t\tthis.root.querySelector(\".overlay\")?.addEventListener(\"click\", this._close);\n\t\tthis.root.querySelector(\".close\")?.addEventListener(\"click\", this._close);\n\n\t\tif (this.open) {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tif (this._previouslyFocused === null) {\n\t\t\t\t\tthis._previouslyFocused = document.activeElement as HTMLElement | null;\n\t\t\t\t}\n\t\t\t\tthis.root.querySelector<HTMLElement>(\".panel\")?.focus();\n\t\t\t});\n\t\t}\n\t}\n\n\tprotected override connectedCallback(): void {\n\t\tsuper.connectedCallback?.();\n\t\tthis._onKeydown = (e: KeyboardEvent) => {\n\t\t\tif (e.key === \"Escape\" && this.open) {\n\t\t\t\tthis._close();\n\t\t\t} else if (e.key === \"Tab\" && this.open) {\n\t\t\t\tthis._trapFocus(e);\n\t\t\t}\n\t\t};\n\t\tdocument.addEventListener(\"keydown\", this._onKeydown);\n\t}\n\n\tprotected override disconnectedCallback(): void {\n\t\tdocument.removeEventListener(\"keydown\", this._onKeydown);\n\t\tthis._restoreFocus();\n\t\tsuper.disconnectedCallback?.();\n\t}\n\n\tprivate _onKeydown: (e: KeyboardEvent) => void = () => {};\n\tprivate _previouslyFocused: HTMLElement | null = null;\n\n\tprivate _close = (): void => {\n\t\tif (!this.open) return;\n\t\tthis.open = false;\n\t\tthis._restoreFocus();\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent(\"close\", { bubbles: true, composed: true }),\n\t\t);\n\t};\n\n\t/** Mantém o foco dentro do drawer (WCAG 2.4.3 / 2.1.2). */\n\tprivate _trapFocus(e: KeyboardEvent): void {\n\t\tconst panel = this.root.querySelector<HTMLElement>(\".panel\");\n\t\tif (!panel) return;\n\t\tconst focusables = panel.querySelectorAll<HTMLElement>(\n\t\t\t'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n\t\t);\n\t\tif (!focusables.length) return;\n\t\tconst first = focusables[0];\n\t\tconst last = focusables[focusables.length - 1];\n\t\tconst active = this.root.activeElement;\n\t\tif (e.shiftKey && (active === first || active === panel)) {\n\t\t\te.preventDefault();\n\t\t\tlast.focus();\n\t\t} else if (!e.shiftKey && active === last) {\n\t\t\te.preventDefault();\n\t\t\tfirst.focus();\n\t\t}\n\t}\n\n\tprivate _restoreFocus(): void {\n\t\tif (this._previouslyFocused?.isConnected) this._previouslyFocused.focus();\n\t\tthis._previouslyFocused = null;\n\t}\n}\n\nexport function defineFxDrawer(): typeof FxDrawer {\n  return defineElement('fx-drawer', FxDrawer);\n}"],"names":[],"mappings":"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"}

package/dist/components/dropdown/dropdown.d.ts

@@ -12,6 +12,11 @@ export declare class FxDropdown extends FxElement {
     get open(): boolean;
     set open(value: boolean);
     protected render(): void;
+    private docListener?;
+    private _listenersAttached;
+    /** Delegação de cliques nos itens + fechamento ao clicar fora (registrado uma vez). */
+    private _attachDelegatedListeners;
+    protected disconnectedCallback(): void;
 }
 /**
  * <fx-dropdown-item> — Item de menu.

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SAiCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;CAsClC;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,SAqBpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAAsB;IAExE,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAoC;cAEpC,MAAM,IAAI,IAAI;CAGlC;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD;AACD,wBAAgB,oBAAoB,IAAI,OAAO,cAAc,CAE5D"}
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SAiCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;IAoCjC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,kBAAkB,CAAS;IAEnC,uFAAuF;IACvF,OAAO,CAAC,yBAAyB;cAsBd,oBAAoB,IAAI,IAAI;CAKhD;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,SAqBpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAAsB;IAExE,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAoC;cAEpC,MAAM,IAAI,IAAI;CAGlC;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD;AACD,wBAAgB,oBAAoB,IAAI,OAAO,cAAc,CAE5D"}

package/dist/components/dropdown/dropdown.js

@@ -1,7 +1,12 @@
 import { FxElement } from "../../core/base.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
+import { esc } from "../../core/sanitize.js";
 const _FxDropdown = class _FxDropdown extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._listenersAttached = false;
+  }
   static get observedAttributes() {
     return ["label", "position", "open"];
   }
@@ -17,7 +22,7 @@ const _FxDropdown = class _FxDropdown extends FxElement {
     this.setTemplate(`
       <span class="trigger" role="button" tabindex="0" part="trigger"
         aria-haspopup="menu" aria-expanded="${this.open}">
-        ${label} ▾
+        ${esc(label)} ▾
       </span>
       <div class="panel" role="menu" part="panel">
         ${items.length ? "" : '<div class="empty">Nenhuma ação</div>'}
@@ -36,18 +41,37 @@ const _FxDropdown = class _FxDropdown extends FxElement {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
         this.open = !this.open;
+      } else if (e.key === "Escape") {
+        this.open = false;
       }
     });
-    items.forEach((item) => {
-      item.addEventListener("click", () => {
-        this.open = false;
-        this.dispatchEvent(new CustomEvent("select", {
-          bubbles: true,
-          composed: true,
-          detail: { value: item.getAttribute("value") ?? "" }
-        }));
-      });
+    this._attachDelegatedListeners();
+  }
+  /** Delegação de cliques nos itens + fechamento ao clicar fora (registrado uma vez). */
+  _attachDelegatedListeners() {
+    if (this._listenersAttached) return;
+    this._listenersAttached = true;
+    this.addEventListener("click", (e) => {
+      const item = e.composedPath().find(
+        (n) => n.tagName?.toLowerCase() === "fx-dropdown-item"
+      );
+      if (!item) return;
+      this.open = false;
+      this.dispatchEvent(new CustomEvent("select", {
+        bubbles: true,
+        composed: true,
+        detail: { value: item.getAttribute("value") ?? "" }
+      }));
     });
+    this.docListener = (e) => {
+      if (!this.contains(e.target)) this.open = false;
+    };
+    document.addEventListener("click", this.docListener);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.docListener) document.removeEventListener("click", this.docListener);
+    this.docListener = void 0;
   }
 };
 _FxDropdown.styles = css`

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","sources":["../../../src/components/dropdown/dropdown.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-dropdown> — Menu de ações em popover.\n *\n * Atributos: label (texto do trigger), position (bottom-left padrão | bottom-right).\n * Itens: <fx-dropdown-item value=\"x\">Texto</fx-dropdown-item>\n * Evento: `select` (composed, detail: { value }).\n */\nexport class FxDropdown extends FxElement {\n  static override styles = css`\n    :host {\n      position: relative;\n      display: inline-block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .trigger { min-height: var(--fx-size-md); }\n    .panel {\n      position: absolute;\n      top: calc(100% + 4px);\n      min-width: 180px;\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      box-shadow: var(--fx-shadow-lg);\n      padding: var(--fx-space-xs);\n      z-index: var(--fx-z-dropdown, 1000);\n      display: none;\n    }\n    :host([open]) .panel { display: block; }\n    /* left = alinhado à esquerda do trigger; right = à direita; center = centrado */\n    :host([position='left']) .panel,\n    :host([position='bottom-left']) .panel { left: 0; right: auto; }\n    :host([position='center']) .panel {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n    :host([position='right']) .panel,\n    :host([position='bottom-right']) .panel { right: 0; left: auto; }\n    :host(:not([position])) .panel { left: 0; right: auto; }\n    ::slotted(fx-dropdown-item) { display: block; }\n    .empty { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); padding: var(--fx-space-sm); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['label', 'position', 'open'];\n  }\n\n  get open(): boolean { return this.hasAttr('open'); }\n  set open(value: boolean) { this.toggleAttr('open', value); }\n\n  protected override render(): void {\n    const label = this.getAttr('label', 'Ações');\n    const items = Array.from(this.querySelectorAll<HTMLElement>('fx-dropdown-item'));\n\n    this.setTemplate(`\n      <span class=\"trigger\" role=\"button\" tabindex=\"0\" part=\"trigger\"\n        aria-haspopup=\"menu\" aria-expanded=\"${this.open}\">\n        ${label} ▾\n      </span>\n      <div class=\"panel\" role=\"menu\" part=\"panel\">\n        ${items.length ? '' : '<div class=\"empty\">Nenhuma ação</div>'}\n        <slot></slot>\n      </div>\n    `);\n\n    const trigger = this.root.querySelector<HTMLElement>('.trigger');\n    trigger?.addEventListener('click', (e) => {\n      e.stopPropagation();\n      // Fecha outros dropdowns abertos\n      document.querySelectorAll('fx-dropdown[open]').forEach((d) => {\n        if (d !== this) (d as FxDropdown).open = false;\n      });\n      this.open = !this.open;\n    });\n    trigger?.addEventListener('keydown', (e) => {\n      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.open = !this.open; }\n    });\n\n    items.forEach((item) => {\n      item.addEventListener('click', () => {\n        this.open = false;\n        this.dispatchEvent(new CustomEvent('select', {\n          bubbles: true, composed: true,\n          detail: { value: item.getAttribute('value') ?? '' },\n        }));\n      });\n    });\n  }\n}\n\n/**\n * <fx-dropdown-item> — Item de menu.\n */\nexport class FxDropdownItem extends FxElement {\n  static override styles = css`\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .item {\n      display: block;\n      width: 100%;\n      text-align: left;\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      font-size: inherit;\n      color: var(--fx-text-default);\n      padding: var(--fx-space-sm) var(--fx-space-md);\n      cursor: pointer;\n      border-radius: var(--fx-radius-sm);\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .item:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, var(--fx-surface-background)); color: var(--fx-color-primary); }\n  `;\n\n  static override get observedAttributes(): string[] { return ['value']; }\n\n  get value(): string { return this.getAttr('value'); }\n  set value(v: string) { this.setAttribute('value', v); }\n\n  protected override render(): void {\n    this.setTemplate('<button type=\"button\" class=\"item\" part=\"item\" role=\"menuitem\"><slot></slot></button>');\n  }\n}\n\nexport function defineFxDropdown(): typeof FxDropdown {\n  return defineElement('fx-dropdown', FxDropdown);\n}\nexport function defineFxDropdownItem(): typeof FxDropdownItem {\n  return defineElement('fx-dropdown-item', FxDropdownItem);\n}\n"],"names":[],"mappings":";;;AAWO,MAAM,cAAN,MAAM,oBAAmB,UAAU;AAAA,EAoCxC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,SAAS,YAAY,MAAM;AAAA,EACrC;AAAA,EAEA,IAAI,OAAgB;AAAE,WAAO,KAAK,QAAQ,MAAM;AAAA,EAAG;AAAA,EACnD,IAAI,KAAK,OAAgB;AAAE,SAAK,WAAW,QAAQ,KAAK;AAAA,EAAG;AAAA,EAExC,SAAe;AAChC,UAAM,QAAQ,KAAK,QAAQ,SAAS,OAAO;AAC3C,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAA8B,kBAAkB,CAAC;AAE/E,SAAK,YAAY;AAAA;AAAA,8CAEyB,KAAK,IAAI;AAAA,UAC7C,KAAK;AAAA;AAAA;AAAA,UAGL,MAAM,SAAS,KAAK,uCAAuC;AAAA;AAAA;AAAA,KAGhE;AAED,UAAM,UAAU,KAAK,KAAK,cAA2B,UAAU;AAC/D,aAAS,iBAAiB,SAAS,CAAC,MAAM;AACxC,QAAE,gBAAA;AAEF,eAAS,iBAAiB,mBAAmB,EAAE,QAAQ,CAAC,MAAM;AAC5D,YAAI,MAAM,KAAO,GAAiB,OAAO;AAAA,MAC3C,CAAC;AACD,WAAK,OAAO,CAAC,KAAK;AAAA,IACpB,CAAC;AACD,aAAS,iBAAiB,WAAW,CAAC,MAAM;AAC1C,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AAAE,UAAE,eAAA;AAAkB,aAAK,OAAO,CAAC,KAAK;AAAA,MAAM;AAAA,IACxF,CAAC;AAED,UAAM,QAAQ,CAAC,SAAS;AACtB,WAAK,iBAAiB,SAAS,MAAM;AACnC,aAAK,OAAO;AACZ,aAAK,cAAc,IAAI,YAAY,UAAU;AAAA,UAC3C,SAAS;AAAA,UAAM,UAAU;AAAA,UACzB,QAAQ,EAAE,OAAO,KAAK,aAAa,OAAO,KAAK,GAAA;AAAA,QAAG,CACnD,CAAC;AAAA,MACJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAhFE,YAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,aAAN;AAsFA,MAAM,kBAAN,MAAM,wBAAuB,UAAU;AAAA,EAwB5C,WAAoB,qBAA+B;AAAE,WAAO,CAAC,OAAO;AAAA,EAAG;AAAA,EAEvE,IAAI,QAAgB;AAAE,WAAO,KAAK,QAAQ,OAAO;AAAA,EAAG;AAAA,EACpD,IAAI,MAAM,GAAW;AAAE,SAAK,aAAa,SAAS,CAAC;AAAA,EAAG;AAAA,EAEnC,SAAe;AAChC,SAAK,YAAY,uFAAuF;AAAA,EAC1G;AACF;AA/BE,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,iBAAN;AAkCA,SAAS,mBAAsC;AACpD,SAAO,cAAc,eAAe,UAAU;AAChD;AACO,SAAS,uBAA8C;AAC5D,SAAO,cAAc,oBAAoB,cAAc;AACzD;"}
+{"version":3,"file":"dropdown.js","sources":["../../../src/components/dropdown/dropdown.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-dropdown> — Menu de ações em popover.\n *\n * Atributos: label (texto do trigger), position (bottom-left padrão | bottom-right).\n * Itens: <fx-dropdown-item value=\"x\">Texto</fx-dropdown-item>\n * Evento: `select` (composed, detail: { value }).\n */\nexport class FxDropdown extends FxElement {\n  static override styles = css`\n    :host {\n      position: relative;\n      display: inline-block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .trigger { min-height: var(--fx-size-md); }\n    .panel {\n      position: absolute;\n      top: calc(100% + 4px);\n      min-width: 180px;\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      box-shadow: var(--fx-shadow-lg);\n      padding: var(--fx-space-xs);\n      z-index: var(--fx-z-dropdown, 1000);\n      display: none;\n    }\n    :host([open]) .panel { display: block; }\n    /* left = alinhado à esquerda do trigger; right = à direita; center = centrado */\n    :host([position='left']) .panel,\n    :host([position='bottom-left']) .panel { left: 0; right: auto; }\n    :host([position='center']) .panel {\n      left: 50%;\n      transform: translateX(-50%);\n    }\n    :host([position='right']) .panel,\n    :host([position='bottom-right']) .panel { right: 0; left: auto; }\n    :host(:not([position])) .panel { left: 0; right: auto; }\n    ::slotted(fx-dropdown-item) { display: block; }\n    .empty { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); padding: var(--fx-space-sm); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['label', 'position', 'open'];\n  }\n\n  get open(): boolean { return this.hasAttr('open'); }\n  set open(value: boolean) { this.toggleAttr('open', value); }\n\n  protected override render(): void {\n    const label = this.getAttr('label', 'Ações');\n    const items = Array.from(this.querySelectorAll<HTMLElement>('fx-dropdown-item'));\n\n    this.setTemplate(`\n      <span class=\"trigger\" role=\"button\" tabindex=\"0\" part=\"trigger\"\n        aria-haspopup=\"menu\" aria-expanded=\"${this.open}\">\n        ${esc(label)} ▾\n      </span>\n      <div class=\"panel\" role=\"menu\" part=\"panel\">\n        ${items.length ? '' : '<div class=\"empty\">Nenhuma ação</div>'}\n        <slot></slot>\n      </div>\n    `);\n\n    const trigger = this.root.querySelector<HTMLElement>('.trigger');\n    trigger?.addEventListener('click', (e) => {\n      e.stopPropagation();\n      // Fecha outros dropdowns abertos\n      document.querySelectorAll('fx-dropdown[open]').forEach((d) => {\n        if (d !== this) (d as FxDropdown).open = false;\n      });\n      this.open = !this.open;\n    });\n    trigger?.addEventListener('keydown', (e) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        this.open = !this.open;\n      } else if (e.key === 'Escape') {\n        this.open = false;\n      }\n    });\n\n    this._attachDelegatedListeners();\n  }\n\n  private docListener?: (e: Event) => void;\n  private _listenersAttached = false;\n\n  /** Delegação de cliques nos itens + fechamento ao clicar fora (registrado uma vez). */\n  private _attachDelegatedListeners(): void {\n    if (this._listenersAttached) return;\n    this._listenersAttached = true;\n\n    this.addEventListener('click', (e) => {\n      const item = (e.composedPath() as HTMLElement[]).find(\n        (n) => n.tagName?.toLowerCase() === 'fx-dropdown-item',\n      );\n      if (!item) return;\n      this.open = false;\n      this.dispatchEvent(new CustomEvent('select', {\n        bubbles: true, composed: true,\n        detail: { value: item.getAttribute('value') ?? '' },\n      }));\n    });\n\n    this.docListener = (e: Event) => {\n      if (!this.contains(e.target as Node)) this.open = false;\n    };\n    document.addEventListener('click', this.docListener);\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this.docListener) document.removeEventListener('click', this.docListener);\n    this.docListener = undefined;\n  }\n}\n\n/**\n * <fx-dropdown-item> — Item de menu.\n */\nexport class FxDropdownItem extends FxElement {\n  static override styles = css`\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .item {\n      display: block;\n      width: 100%;\n      text-align: left;\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      font-size: inherit;\n      color: var(--fx-text-default);\n      padding: var(--fx-space-sm) var(--fx-space-md);\n      cursor: pointer;\n      border-radius: var(--fx-radius-sm);\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .item:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, var(--fx-surface-background)); color: var(--fx-color-primary); }\n  `;\n\n  static override get observedAttributes(): string[] { return ['value']; }\n\n  get value(): string { return this.getAttr('value'); }\n  set value(v: string) { this.setAttribute('value', v); }\n\n  protected override render(): void {\n    this.setTemplate('<button type=\"button\" class=\"item\" part=\"item\" role=\"menuitem\"><slot></slot></button>');\n  }\n}\n\nexport function defineFxDropdown(): typeof FxDropdown {\n  return defineElement('fx-dropdown', FxDropdown);\n}\nexport function defineFxDropdownItem(): typeof FxDropdownItem {\n  return defineElement('fx-dropdown-item', FxDropdownItem);\n}\n"],"names":[],"mappings":"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"}

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

package/dist/components/input/input.js

@@ -1,6 +1,7 @@
 import { FxElement } from "../../core/base.js";
 import { css } from "../../core/css.js";
 import { defineElement } from "../../core/define.js";
+import { esc } from "../../core/sanitize.js";
 const _FxInput = class _FxInput extends FxElement {
   // `value` fica FORA da observação: refleti-lo a cada tecla não pode
   // re-renderizar o template, senão o campo perde o foco ao digitar.
@@ -46,9 +47,9 @@ const _FxInput = class _FxInput extends FxElement {
     const step = this.getAttr("step");
     this.setTemplate(`
       ${this.hasAttr("clearable") ? '<div class="wrap">' : ""}
-      <input class="field" part="input" type="${type}"
-        ${placeholder ? `placeholder="${placeholder}"` : ""}
-        ${min ? `min="${min}"` : ""} ${max ? `max="${max}"` : ""} ${step ? `step="${step}"` : ""}
+      <input class="field" part="input" type="${esc(type)}"
+        ${placeholder ? `placeholder="${esc(placeholder)}"` : ""}
+        ${min ? `min="${esc(min)}"` : ""} ${max ? `max="${esc(max)}"` : ""} ${step ? `step="${esc(step)}"` : ""}
       />
       ${this.hasAttr("clearable") ? '<button type="button" class="clear" part="clear" aria-label="Limpar" tabindex="-1">×</button></div>' : ""}
     `);

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/knob/index.ts"],"sourcesContent":["import { FxKnob, defineFxKnob } from './knob';\r\n\r\nexport { FxKnob };\r\n\r\ndefineFxKnob();\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'fx-knob': FxKnob;\r\n  }\r\n}"],"names":[],"mappings":";;AAIA,aAAA;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/knob/index.ts"],"sourcesContent":["import { FxKnob, defineFxKnob } from './knob';\n\nexport { FxKnob };\n\ndefineFxKnob();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-knob': FxKnob;\n  }\n}"],"names":[],"mappings":";;AAIA,aAAA;"}

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

@@ -40,6 +40,8 @@ export declare class FxKnob extends FxElement {
     private _startValue;
     protected render(): void;
     private getSizeNum;
+    /** Valida um valor de cor CSS, retornando-o seguro ou vazio. */
+    private safeColor;
     private clampValue;
     private emitChange;
     private attachListeners;

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;AAI5C;;;;;;;;;;GAUG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,SAkEpB;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;IAsCjC,OAAO,CAAC,UAAU;IAOlB,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,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;;GAUG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,SAkEpB;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"}

package/dist/components/knob/knob.js

@@ -1,6 +1,7 @@
 import { FxElement } from "../../core/base.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 {
   constructor() {
     super(...arguments);
@@ -124,8 +125,10 @@ const _FxKnob = class _FxKnob extends FxElement {
     const radius = (sizeNum - strokeW) / 2;
     const circumference = 2 * Math.PI * radius;
     const offset = circumference * (1 - pct);
-    const valueColorStyle = this.valueColor ? `--_value-color: ${this.valueColor};` : "";
-    const rangeColorStyle = this.rangeColor ? `--_range-color: ${this.rangeColor};` : "";
+    const vc = this.valueColor ? this.safeColor(this.valueColor) : "";
+    const rc = this.rangeColor ? this.safeColor(this.rangeColor) : "";
+    const valueColorStyle = vc ? `--_value-color: ${vc};` : "";
+    const rangeColorStyle = rc ? `--_range-color: ${rc};` : "";
     const displayValue = this.valueTemplate.replace("{value}", String(Math.round(value)));
     this.setTemplate(`
       <div class="knob" part="knob" tabindex="${this.disabled ? "-1" : "0"}"
@@ -140,7 +143,7 @@ const _FxKnob = class _FxKnob extends FxElement {
             stroke-dasharray="${circumference}"
             stroke-dashoffset="${offset}" />
         </svg>
-        <div class="label" part="label">${displayValue}</div>
+        <div class="label" part="label">${esc(displayValue)}</div>
       </div>
     `);
     this.attachListeners();
@@ -151,6 +154,15 @@ const _FxKnob = class _FxKnob extends FxElement {
     if (s === "lg") return 140;
     return 100;
   }
+  /** Valida um valor de cor CSS, retornando-o seguro ou vazio. */
+  safeColor(value) {
+    const v = value.trim();
+    if (/^#[0-9a-fA-F]{3,8}$/.test(v)) return v;
+    if (/^(rgb|rgba|hsl|hsla)\([\d\s.,%()]+\)$/i.test(v)) return v;
+    if (/^var\(--[\w-]+(,\s*[^)]*)?\)$/.test(v)) return v;
+    if (/^[a-zA-Z]+$/.test(v)) return v;
+    return "";
+  }
   clampValue(v) {
     const min = this.min;
     const max = this.max;