@wrrdev/fenix-ui 1.1.13 → 1.1.14

package/README.md

@@ -18,7 +18,7 @@ import { FenixUI } from '@wrrdev/fenix-ui';  // API de tema/tokens (índice)
 FenixUI.theme('dark');
 ```
 
-> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.1.13**, acesso público.
+> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.1.14**, acesso público.
 > Subpaths disponíveis: `./theme`, `./tokens`, `./jsx`, `./vue`, `./react`, `./button`, `./badge`, `./spinner`, `./select`, `./input`, `./switch`, `./textarea`, `./checkbox`, `./radio`, `./calendar`, `./datepicker`, `./multiselect`, `./table`, `./floatlabel`, `./dialog`, `./toast`, `./tooltip`, `./tabs`, `./progress`, `./skeleton`, `./alert`, `./drawer`, `./dropdown`, `./icon`, `./icons`, `./pagination`, `./autocomplete`, `./knob`, `./orderlist`, `./picklist`, `./auto-import` e o curinga `./components/*`.
 
 
@@ -65,7 +65,7 @@ Carregue o bundle **UMD** único: ele registra todos os componentes e expõe os
 <fx-toast></fx-toast>
 
 <!--
-  🔗 Links diretos para CDN (versão 1.1.13):
+  🔗 Links diretos para CDN (versão 1.1.14):
   • https://cdn.jsdelivr.net/npm/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
   • https://unpkg.com/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
 -->
@@ -214,7 +214,7 @@ applyPreset('seiya');          // aplica o preset Seiya em modo claro
 applyPreset('shiryu', 'dark'); // preset + modo escuro
 ```
 
-Presets disponíveis: `fenix` (padrão), `seiya`, `shiryu`, `hyoga`, `shun`, `ikki`, `aiolia`.
+Presets disponíveis: `ikki` (padrão), `seiya`, `shiryu`, `hyoga`, `shun`, `aiolia`.
 
 ```ts
 import { listPresets } from '@wrrdev/fenix-ui';

package/dist/components/autocomplete/autocomplete.d.ts

@@ -1,12 +1,16 @@
-import { FxElement } from '../../core/base';
+import { FxFormElement } from '../../core/form-element';
 /**
  * <fx-autocomplete> — Campo de texto com sugestões filtradas.
  *
- * Atributos: value, size, placeholder, source (JSON array de strings),
- * disabled, min-chars (padrão 1).
- * Evento: `select` (composed, detail: { value }).
+ * Form-Associated Custom Element: dentro de um <form> entra no FormData
+ * (via atributo `name`) e é alvo de `<label for>`/`autofocus`.
+ *
+ * Atributos: value, name, size, placeholder, source (JSON array de strings),
+ * disabled, min-chars (padrão 1), autofocus.
+ * Eventos: `select`, `input` e `valueChange` (composed, detail: { value }) —
+ * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.
  */
-export declare class FxAutocomplete extends FxElement {
+export declare class FxAutocomplete extends FxFormElement {
     static styles: string;
     static get observedAttributes(): string[];
     get size(): string;
@@ -21,6 +25,8 @@ export declare class FxAutocomplete extends FxElement {
     protected connectedCallback(): void;
     protected disconnectedCallback(): void;
     protected render(): void;
+    /** Empurra o atributo `value` para o campo interno sem re-renderizar. */
+    protected syncInternalControl(): void;
 }
 export declare function defineFxAutocomplete(): typeof FxAutocomplete;
 //# sourceMappingURL=autocomplete.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;GAMG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,SAqFpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAIjD;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAAmC;IACrD,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAoC;IAEvD,IAAI,MAAM,IAAI,MAAM,EAAE,CAOrB;IACD;2DACuD;IACvD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAElC;IAED,OAAO,CAAC,WAAW,CAAC,CAAqB;cAEtB,iBAAiB,IAAI,IAAI;cAQzB,oBAAoB,IAAI,IAAI;cAM5B,MAAM,IAAI,IAAI;CA6DlC;AAED,wBAAgB,oBAAoB,IAAI,OAAO,cAAc,CAE5D"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../src/components/autocomplete/autocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD;;;;;;;;;;GAUG;AACH,qBAAa,cAAe,SAAQ,aAAa;IAC/C,OAAgB,MAAM,SAqFpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAIjD;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAAmC;IACrD,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAMlB;IAED,IAAI,MAAM,IAAI,MAAM,EAAE,CAOrB;IACD;2DACuD;IACvD,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,EAElC;IAED,OAAO,CAAC,WAAW,CAAC,CAAqB;cAEtB,iBAAiB,IAAI,IAAI;cAQzB,oBAAoB,IAAI,IAAI;cAM5B,MAAM,IAAI,IAAI;IA0EjC,yEAAyE;cACtD,mBAAmB,IAAI,IAAI;CAK/C;AAED,wBAAgB,oBAAoB,IAAI,OAAO,cAAc,CAE5D"}

package/dist/components/autocomplete/autocomplete.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 _FxAutocomplete = class _FxAutocomplete extends FxElement {
+const _FxAutocomplete = class _FxAutocomplete extends FxFormElement {
   static get observedAttributes() {
     return ["size", "placeholder", "source", "disabled", "min-chars", "error", "invalid", "success", "valid"];
   }
@@ -18,6 +18,8 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
   }
   set value(v) {
     this.setAttribute("value", v);
+    this.syncInternalControl();
+    this.updateFormValue();
   }
   get source() {
     try {
@@ -67,6 +69,7 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
           field.value = btn.dataset.v ?? "";
           this.value = field.value;
           this.toggleAttr("open", false);
+          this.emitValueEvents();
           this.dispatchEvent(new CustomEvent("select", {
             bubbles: true,
             composed: true,
@@ -78,6 +81,7 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
     };
     field.addEventListener("input", () => {
       this.value = field.value;
+      this.emitValueEvents();
       openList();
     });
     field.addEventListener("focus", () => {
@@ -88,6 +92,11 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
         this.toggleAttr("open", false);
         return;
       }
+      if (e.key === "Enter" && !e.isComposing && !this.hasAttr("open") && this.form) {
+        e.preventDefault();
+        this.form.requestSubmit();
+        return;
+      }
       if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
       e.preventDefault();
       if (!this.hasAttr("open")) openList();
@@ -97,6 +106,13 @@ const _FxAutocomplete = class _FxAutocomplete extends FxElement {
       const next = e.key === "ArrowDown" ? current === -1 ? 0 : Math.min(current + 1, opts.length - 1) : current === -1 ? opts.length - 1 : Math.max(current - 1, 0);
       opts[next]?.focus();
     });
+    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;
   }
 };
 _FxAutocomplete.styles = css`

package/dist/components/autocomplete/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","sources":["../../../src/components/autocomplete/autocomplete.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-autocomplete> — Campo de texto com sugestões filtradas.\n *\n * Atributos: value, size, placeholder, source (JSON array de strings),\n * disabled, min-chars (padrão 1).\n * Evento: `select` (composed, detail: { value }).\n */\nexport class FxAutocomplete extends FxElement {\n  static override styles = css`\n    :host {\n      position: relative;\n      display: inline-block;\n      /* Largura padrão no HOST: CSS externo, classes e style inline no elemento\n         vencem este default naturalmente (regras do documento > :host). */\n      width: var(--fx-autocomplete-width, 260px);\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: a caixa fica EXATAMENTE no token --fx-size-*. */\n      line-height: var(--fx-font-line-height);\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      min-height: var(--fx-size-md);\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    :host([size='sm']) { width: var(--fx-autocomplete-width-sm, 220px); }\n    :host([size='sm']) .field { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-md); }\n    :host([size='lg']) { width: var(--fx-autocomplete-width-lg, 300px); }\n    :host([size='lg']) .field { min-height: var(--fx-size-lg); padding: var(--fx-space-sm) var(--fx-space-lg); }\n    /* Full width: o host estica até o pai e o campo interno acompanha. */\n    :host([full]) { display: block; width: 100%; }\n    :host([full]) .field { width: 100%; }\n    /* Validação: borda sempre; brilho (anel) via token que acompanha\n       effect.focus-ring — desligado ⇒ erro só com a borda vermelha. */\n    :host([error]) .field,\n    :host([invalid]) .field {\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      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    .list {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      right: 0;\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      z-index: var(--fx-z-dropdown, 1000);\n      max-height: 220px;\n      overflow-y: auto;\n      display: none;\n    }\n    :host([open]) .list { display: block; }\n    .opt {\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      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, var(--fx-surface-background)); color: var(--fx-color-primary); }\n    .empty { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); padding: var(--fx-space-sm) var(--fx-space-md); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n    // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n    return ['size', 'placeholder', 'source', 'disabled', 'min-chars', 'error', 'invalid', 'success', 'valid'];\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) { this.setAttribute('size', v); }\n  get value(): string { return this.getAttr('value'); }\n  set value(v: string) { this.setAttribute('value', v); }\n\n  get source(): string[] {\n    try {\n      const raw = JSON.parse(this.getAttr('source', '[]'));\n      return Array.isArray(raw) ? raw.map(String) : [];\n    } catch {\n      return [];\n    }\n  }\n  /** Setter necessário para o Vue (patchDOMProp seta `source` como\n   *  propriedade, pois o getter existe no prototype). */\n  set source(value: string | string[]) {\n    this.setAttribute('source', typeof value === 'string' ? value : JSON.stringify(value));\n  }\n\n  private docListener?: (e: Event) => void;\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    this.docListener = (e: Event) => {\n      if (!this.contains(e.target as Node)) this.toggleAttr('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  protected override render(): void {\n    const placeholder = this.getAttr('placeholder');\n\n    this.setTemplate(`\n      <input class=\"field\" part=\"input\" type=\"text\"\n        ${placeholder ? `placeholder=\"${esc(placeholder)}\"` : ''} autocomplete=\"off\"/>\n      <div class=\"list\" part=\"list\" role=\"listbox\"></div>\n    `);\n\n    const field = this.root.querySelector<HTMLInputElement>('.field');\n    if (!field) return;\n    field.value = this.value;\n    if (this.hasAttr('disabled')) field.setAttribute('disabled', '');\n\n    const list = this.root.querySelector<HTMLElement>('.list');\n    const minChars = Number(this.getAttr('min-chars', '1')) || 1;\n\n    const openList = (): void => {\n      if (!list) return;\n      const q = field.value.toLowerCase();\n      const matches = this.source.filter((s) => s.toLowerCase().includes(q)).slice(0, 8);\n      list.innerHTML = matches.length\n        ? matches.map((m) => `<button type=\"button\" class=\"opt\" role=\"option\" data-v=\"${esc(m)}\">${esc(m)}</button>`).join('')\n        : '<div class=\"empty\">Nenhum resultado</div>';\n      list.querySelectorAll<HTMLButtonElement>('.opt').forEach((btn) => {\n        btn.addEventListener('click', () => {\n          field.value = btn.dataset.v ?? '';\n          this.value = field.value;\n          this.toggleAttr('open', false);\n          this.dispatchEvent(new CustomEvent('select', {\n            bubbles: true, composed: true, detail: { value: this.value },\n          }));\n        });\n      });\n      this.toggleAttr('open', true);\n    };\n\n    // Reabrir com foco sem re-render (evita perder digitação)\n    field.addEventListener('input', () => {\n      this.value = field.value;\n      openList();\n    });\n    field.addEventListener('focus', () => { if (field.value.length >= minChars) openList(); });\n    // Navegação por teclado: setas movem o foco entre as sugestões; ESC fecha.\n    field.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape') {\n        this.toggleAttr('open', false);\n        return;\n      }\n      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;\n      e.preventDefault();\n      if (!this.hasAttr('open')) openList();\n      const opts = Array.from(this.root.querySelectorAll<HTMLButtonElement>('.opt'));\n      if (!opts.length) return;\n      const current = opts.indexOf(this.root.activeElement as HTMLButtonElement);\n      const next = e.key === 'ArrowDown'\n        ? (current === -1 ? 0 : Math.min(current + 1, opts.length - 1))\n        : (current === -1 ? opts.length - 1 : Math.max(current - 1, 0));\n      opts[next]?.focus();\n    });\n  }\n}\n\nexport function defineFxAutocomplete(): typeof FxAutocomplete {\n  return defineElement('fx-autocomplete', FxAutocomplete);\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"autocomplete.js","sources":["../../../src/components/autocomplete/autocomplete.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-autocomplete> — Campo de texto com sugestões filtradas.\n *\n * Form-Associated Custom Element: dentro de um <form> entra no FormData\n * (via atributo `name`) e é alvo de `<label for>`/`autofocus`.\n *\n * Atributos: value, name, size, placeholder, source (JSON array de strings),\n * disabled, min-chars (padrão 1), autofocus.\n * Eventos: `select`, `input` e `valueChange` (composed, detail: { value }) —\n * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.\n */\nexport class FxAutocomplete extends FxFormElement {\n  static override styles = css`\n    :host {\n      position: relative;\n      display: inline-block;\n      /* Largura padrão no HOST: CSS externo, classes e style inline no elemento\n         vencem este default naturalmente (regras do documento > :host). */\n      width: var(--fx-autocomplete-width, 260px);\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: a caixa fica EXATAMENTE no token --fx-size-*. */\n      line-height: var(--fx-font-line-height);\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      min-height: var(--fx-size-md);\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    :host([size='sm']) { width: var(--fx-autocomplete-width-sm, 220px); }\n    :host([size='sm']) .field { min-height: var(--fx-size-sm); padding: var(--fx-space-xs) var(--fx-space-md); }\n    :host([size='lg']) { width: var(--fx-autocomplete-width-lg, 300px); }\n    :host([size='lg']) .field { min-height: var(--fx-size-lg); padding: var(--fx-space-sm) var(--fx-space-lg); }\n    /* Full width: o host estica até o pai e o campo interno acompanha. */\n    :host([full]) { display: block; width: 100%; }\n    :host([full]) .field { width: 100%; }\n    /* Validação: borda sempre; brilho (anel) via token que acompanha\n       effect.focus-ring — desligado ⇒ erro só com a borda vermelha. */\n    :host([error]) .field,\n    :host([invalid]) .field {\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      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    .list {\n      position: absolute;\n      top: calc(100% + 4px);\n      left: 0;\n      right: 0;\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      z-index: var(--fx-z-dropdown, 1000);\n      max-height: 220px;\n      overflow-y: auto;\n      display: none;\n    }\n    :host([open]) .list { display: block; }\n    .opt {\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      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, var(--fx-surface-background)); color: var(--fx-color-primary); }\n    .empty { color: var(--fx-text-muted); font-size: calc(var(--fx-font-size) - 2px); padding: var(--fx-space-sm) var(--fx-space-md); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n    // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n    return ['size', 'placeholder', 'source', 'disabled', 'min-chars', 'error', 'invalid', 'success', 'valid'];\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) { this.setAttribute('size', v); }\n  get value(): string { return this.getAttr('value'); }\n  set value(v: string) {\n    this.setAttribute('value', v);\n    // `value` não é observado (não pode re-renderizar por tecla): sincroniza\n    // o campo interno direto, sem perder foco/cursor, e publica no form.\n    this.syncInternalControl();\n    this.updateFormValue();\n  }\n\n  get source(): string[] {\n    try {\n      const raw = JSON.parse(this.getAttr('source', '[]'));\n      return Array.isArray(raw) ? raw.map(String) : [];\n    } catch {\n      return [];\n    }\n  }\n  /** Setter necessário para o Vue (patchDOMProp seta `source` como\n   *  propriedade, pois o getter existe no prototype). */\n  set source(value: string | string[]) {\n    this.setAttribute('source', typeof value === 'string' ? value : JSON.stringify(value));\n  }\n\n  private docListener?: (e: Event) => void;\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    this.docListener = (e: Event) => {\n      if (!this.contains(e.target as Node)) this.toggleAttr('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  protected override render(): void {\n    const placeholder = this.getAttr('placeholder');\n\n    this.setTemplate(`\n      <input class=\"field\" part=\"input\" type=\"text\"\n        ${placeholder ? `placeholder=\"${esc(placeholder)}\"` : ''} autocomplete=\"off\"/>\n      <div class=\"list\" part=\"list\" role=\"listbox\"></div>\n    `);\n\n    const field = this.root.querySelector<HTMLInputElement>('.field');\n    if (!field) return;\n    field.value = this.value;\n    if (this.hasAttr('disabled')) field.setAttribute('disabled', '');\n\n    const list = this.root.querySelector<HTMLElement>('.list');\n    const minChars = Number(this.getAttr('min-chars', '1')) || 1;\n\n    const openList = (): void => {\n      if (!list) return;\n      const q = field.value.toLowerCase();\n      const matches = this.source.filter((s) => s.toLowerCase().includes(q)).slice(0, 8);\n      list.innerHTML = matches.length\n        ? matches.map((m) => `<button type=\"button\" class=\"opt\" role=\"option\" data-v=\"${esc(m)}\">${esc(m)}</button>`).join('')\n        : '<div class=\"empty\">Nenhum resultado</div>';\n      list.querySelectorAll<HTMLButtonElement>('.opt').forEach((btn) => {\n        btn.addEventListener('click', () => {\n          field.value = btn.dataset.v ?? '';\n          this.value = field.value;\n          this.toggleAttr('open', false);\n          this.emitValueEvents();\n          this.dispatchEvent(new CustomEvent('select', {\n            bubbles: true, composed: true, detail: { value: this.value },\n          }));\n        });\n      });\n      this.toggleAttr('open', true);\n    };\n\n    // Reabrir com foco sem re-render (evita perder digitação)\n    field.addEventListener('input', () => {\n      this.value = field.value;\n      this.emitValueEvents();\n      openList();\n    });\n    field.addEventListener('focus', () => { if (field.value.length >= minChars) openList(); });\n    // Navegação por teclado: setas movem o foco entre as sugestões; ESC fecha.\n    // Enter com a lista FECHADA submete o form (o input interno não se associa\n    // ao <form> do light DOM — submissão implícita acionada manualmente).\n    field.addEventListener('keydown', (e) => {\n      if (e.key === 'Escape') {\n        this.toggleAttr('open', false);\n        return;\n      }\n      if (e.key === 'Enter' && !e.isComposing && !this.hasAttr('open') && this.form) {\n        e.preventDefault();\n        this.form.requestSubmit();\n        return;\n      }\n      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;\n      e.preventDefault();\n      if (!this.hasAttr('open')) openList();\n      const opts = Array.from(this.root.querySelectorAll<HTMLButtonElement>('.opt'));\n      if (!opts.length) return;\n      const current = opts.indexOf(this.root.activeElement as HTMLButtonElement);\n      const next = e.key === 'ArrowDown'\n        ? (current === -1 ? 0 : Math.min(current + 1, opts.length - 1))\n        : (current === -1 ? opts.length - 1 : Math.max(current - 1, 0));\n      opts[next]?.focus();\n    });\n\n    // Publica name/value no form (ElementInternals) a cada render.\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 defineFxAutocomplete(): typeof FxAutocomplete {\n  return defineElement('fx-autocomplete', FxAutocomplete);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/button/button.d.ts

@@ -2,6 +2,11 @@ import { FxElement } from '../../core/base';
 /**
  * <fx-button> — Componente de ação (piloto).
  *
+ * Form-Associated Custom Element: `type="submit"` submete o <form> em que
+ * vive e `type="reset"` o limpa (o <button> interno está no Shadow DOM e não
+ * se associa ao form sozinho — a ação é acionada via ElementInternals).
+ * `<form disabled>`/`<fieldset disabled>` desabilitam o botão.
+ *
  * Atributos: variant, size, disabled, loading, type, 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).
@@ -9,8 +14,18 @@ import { FxElement } from '../../core/base';
  * Evento: `click` nativo atravessa o Shadow DOM (composed) — ouça no host.
  */
 export declare class FxButton extends FxElement {
+    /** Participa de <form> como botão (submit/reset via ElementInternals). */
+    static formAssociated: boolean;
+    /** focus() e clique em <label for> atingem o botão interno do Shadow DOM. */
+    static shadowOptions: ShadowRootInit;
     static styles: string;
     static get observedAttributes(): string[];
+    protected readonly internals: ElementInternals | null;
+    constructor();
+    /** Form ao qual o botão está associado (null se fora de um form). */
+    get form(): HTMLFormElement | null;
+    /** <form disabled>/<fieldset disabled>: espelha no atributo observado. */
+    formDisabledCallback(disabled: boolean): void;
     /** Tamanho. Padrão: `'md'`. */
     get size(): string;
     set size(value: string);

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

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;GAQG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,SAmHpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,+BAA+B;IAC/B,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;cAEkB,MAAM,IAAI,IAAI;cAkDd,iBAAiB,IAAI,IAAI;cAKzB,oBAAoB,IAAI,IAAI;IAK/C;;;;OAIG;IACH,OAAO,CAAC,WAAW,CAmBjB;CACH;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;;;;;GAaG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,0EAA0E;IAC1E,MAAM,CAAC,cAAc,UAAQ;IAC7B,6EAA6E;IAC7E,OAAgB,aAAa,EAAE,cAAc,CAA0C;IACvF,OAAgB,MAAM,SAmHpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,SAAS,CAAC,QAAQ,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAC;;IAUtD,qEAAqE;IACrE,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAIjC;IAED,0EAA0E;IAC1E,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAK7C,+BAA+B;IAC/B,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;cAEkB,MAAM,IAAI,IAAI;cA8Dd,iBAAiB,IAAI,IAAI;cAKzB,oBAAoB,IAAI,IAAI;IAK/C;;;;OAIG;IACH,OAAO,CAAC,WAAW,CAmBjB;CACH;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}

package/dist/components/button/button.js

@@ -4,7 +4,7 @@ import { defineElement } from "../../core/define.js";
 import { FENIX_ICON_BASE_CSS, fenixIconHtml } from "../../icons/base-css.js";
 const _FxButton = class _FxButton extends FxElement {
   constructor() {
-    super(...arguments);
+    super();
     this.spawnRipple = (event) => {
       if (this.hasAttr("disabled") || this.hasAttr("loading")) return;
       const enabled = getComputedStyle(this).getPropertyValue("--fx-effect-ripple").trim();
@@ -21,10 +21,20 @@ const _FxButton = class _FxButton extends FxElement {
       btn.appendChild(ripple);
       ripple.addEventListener("animationend", () => ripple.remove());
     };
+    this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
   }
   static get observedAttributes() {
     return ["variant", "size", "disabled", "loading", "type", "full", "icon", "icon-pos"];
   }
+  /** Form ao qual o botão está associado (null se fora de um form). */
+  get form() {
+    return this.internals?.form ?? this.closest("form");
+  }
+  /** <form disabled>/<fieldset disabled>: espelha no atributo observado. */
+  formDisabledCallback(disabled) {
+    if (disabled) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
   /** Tamanho. Padrão: `'md'`. */
   get size() {
     const s = this.getAttr("size", "md");
@@ -80,6 +90,13 @@ const _FxButton = class _FxButton extends FxElement {
     }
     if (loading) btn.setAttribute("aria-busy", "true");
     else btn.removeAttribute("aria-busy");
+    if (btnType === "submit" || btnType === "reset") {
+      btn.addEventListener("click", () => {
+        if (this.hasAttr("disabled") || this.hasAttr("loading")) return;
+        if (btnType === "submit" && this.form) this.form.requestSubmit();
+        else if (btnType === "reset" && this.form) this.form.reset();
+      });
+    }
   }
   connectedCallback() {
     super.connectedCallback();
@@ -90,6 +107,8 @@ const _FxButton = class _FxButton extends FxElement {
     this.removeEventListener("pointerdown", this.spawnRipple);
   }
 };
+_FxButton.formAssociated = true;
+_FxButton.shadowOptions = { mode: "open", delegatesFocus: true };
 _FxButton.styles = css`
     ${FENIX_ICON_BASE_CSS}
     :host {

package/dist/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/button/button.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\n\n/**\n * <fx-button> — Componente de ação (piloto).\n *\n * Atributos: variant, size, disabled, loading, type, full (largura 100%\n * acompanhando o elemento pai), icon (nome do glifo Fenix Icons ou\n * emoji/texto livre) e icon-pos (left|right, padrão left).\n * Slots: default (rótulo), `icon` (ícone customizado — vence o atributo).\n * Evento: `click` nativo atravessa o Shadow DOM (composed) — ouça no host.\n */\nexport class FxButton extends FxElement {\n  static override styles = css`\n    ${FENIX_ICON_BASE_CSS}\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n    }\n    /* Full width: o host inline-block é shrink-to-fit, então precisa virar\n       block para o 100% do .btn interno ter contra o que esticar. */\n    :host([full]) {\n      display: block;\n      width: 100%;\n      max-width: 100%;\n    }\n    .btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      gap: var(--fx-space-sm);\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      font-weight: var(--fx-font-weight);\n      line-height: var(--fx-font-line-height);\n      /* Padding vertical limitado ao orçamento do token --fx-size-*: a altura\n         fica EXATAMENTE em sm 32 / md 40 / lg 48 (mesma medida dos campos). */\n      padding: var(--fx-space-sm) var(--fx-space-xl);\n      border-radius: var(--fx-radius-md);\n      border: 1px solid transparent;\n      color: #fff;\n      background: var(--fx-color-primary);\n      cursor: pointer;\n      user-select: none;\n      text-decoration: none;\n      transition:\n        background-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        transform var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .btn:focus-visible {\n      outline: none;\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .btn:hover { filter: brightness(0.88); }\n    .btn:active { transform: translateY(1px); }\n\n    /* Tamanhos — alturas vindas dos tokens (personalizáveis por preset) */\n    .btn { min-height: var(--fx-size-md); }\n    :host([size='sm']) .btn { padding: var(--fx-space-xs) var(--fx-space-lg); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }\n    :host([size='lg']) .btn { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }\n\n    /* Full width */\n    :host([full]) .btn { width: 100%; }\n\n    /* Variantes */\n    :host([variant='secondary']) .btn { background: var(--fx-color-secondary); }\n    :host([variant='success']) .btn { background: var(--fx-color-success); }\n    :host([variant='warning']) .btn { background: var(--fx-color-warning); }\n    :host([variant='danger']) .btn { background: var(--fx-color-danger); }\n    :host([variant='info']) .btn { background: var(--fx-color-info); }\n    :host([variant='ghost']) .btn { background: transparent; color: var(--fx-text-default); }\n    :host([variant='ghost']) .btn:hover { background: var(--fx-surface-surface-hover); filter: none; }\n    :host([variant='outline']) .btn { background: transparent; color: var(--fx-color-primary); border-color: var(--fx-color-primary); }\n    :host([variant='outline']) .btn:hover { background: var(--fx-surface-surface-hover); filter: none; }\n\n    /* Ícone e spinner */\n    .btn__icon { display: inline-flex; align-items: center; font-size: var(--fx-button-icon-size, calc(var(--fx-font-size) + 6px)); line-height: 1; }\n    .btn__icon[hidden] { display: none; }\n    .btn__label { display: inline-flex; align-items: center; justify-content: center; }\n    /* Icon-only: a label some (o gap do flex some junto) e o botão vira\n       quadrado com padding simétrico — ícone perfeitamente centralizado. */\n    .btn--icon-only { padding-left: var(--fx-space-md); padding-right: var(--fx-space-md); }\n    .btn--icon-only .btn__label { display: none; }\n    .btn[hidden] { display: none; }\n    .btn__spinner {\n      width: 1em;\n      height: 1em;\n      border: 2px solid currentColor;\n      border-top-color: transparent;\n      border-radius: var(--fx-radius-full);\n      animation: fx-spin var(--fx-motion-duration-normal) linear infinite;\n    }\n    @keyframes fx-spin { to { transform: rotate(360deg); } }\n\n    /* Estados */\n    :host([disabled]) .btn,\n    :host([loading]) .btn {\n      opacity: 0.55;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    /* Efeito ripple (). Desative com effect.ripple: '0' no preset. */\n    .btn {\n      position: relative;\n      overflow: hidden;\n    }\n    .btn__ripple {\n      position: absolute;\n      border-radius: var(--fx-radius-full);\n      background: currentColor;\n      opacity: 0.28;\n      transform: scale(0);\n      animation: fx-ripple 600ms var(--fx-motion-easing) forwards;\n      pointer-events: none;\n    }\n    @keyframes fx-ripple {\n      to {\n        transform: scale(2.6);\n        opacity: 0;\n      }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .btn__ripple { display: none; }\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['variant', 'size', 'disabled', 'loading', 'type', 'full', 'icon', 'icon-pos'];\n  }\n\n  /** Tamanho. 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 disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  get loading(): boolean {\n    return this.hasAttr('loading');\n  }\n  set loading(value: boolean) {\n    this.toggleAttr('loading', Boolean(value));\n  }\n\n  protected override render(): void {\n    const loading = this.hasAttr('loading');\n    const disabled = this.hasAttr('disabled') || loading;\n    const btnType = this.getAttr('type', 'button');\n    const icon = this.getAttr('icon');\n    const iconRight = this.getAttr('icon-pos', 'left') === 'right';\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\"></slot>'\n      : (icon ? fenixIconHtml(icon) : '');\n\n    this.setTemplate(`\n      <button class=\"btn\" part=\"button\" type=\"${btnType}\">\n        ${!iconRight ? `<span class=\"btn__icon\" part=\"icon\">${iconContent}</span>` : ''}\n        <span class=\"btn__label\" part=\"label\"><slot></slot></span>\n        ${iconRight ? `<span class=\"btn__icon\" part=\"icon\">${iconContent}</span>` : ''}\n        ${loading ? '<span class=\"btn__spinner\" aria-hidden=\"true\"></span>' : ''}\n      </button>\n    `);\n\n    const btn = this.root.querySelector<HTMLButtonElement>('.btn');\n    if (!btn) return;\n\n    // Esconde o container do ícone quando vazio, evitando espaço fantasma\n    // do `gap` que descentraliza o rótulo.\n    const hasIcon = iconContent.trim() !== '';\n    for (const wrap of this.root.querySelectorAll<HTMLElement>('.btn__icon')) {\n      wrap.toggleAttribute('hidden', !hasIcon);\n    }\n\n    // Icon-only: sem texto no slot default, o botão vira quadrado\n    // (padding simétrico) em vez de retangular largo.\n    const hasLabel = [...(this.childNodes ?? [])].some((n) =>\n      n.nodeType === Node.ELEMENT_NODE\n        ? (n as Element).getAttribute?.('slot') !== 'icon'\n        : (n.textContent ?? '').trim() !== '',\n    );\n    btn.classList.toggle('btn--icon-only', !hasLabel && hasIcon);\n    if (disabled) {\n      btn.setAttribute('disabled', '');\n      btn.setAttribute('aria-disabled', 'true');\n    } else {\n      btn.removeAttribute('disabled');\n      btn.removeAttribute('aria-disabled');\n    }\n    if (loading) btn.setAttribute('aria-busy', 'true');\n    else btn.removeAttribute('aria-busy');\n  }\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('pointerdown', this.spawnRipple);\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('pointerdown', this.spawnRipple);\n  }\n\n  /**\n   * Efeito ripple : cria um círculo que expande do ponto\n   * de clique e desaparece. Respeita o token `effect.ripple` ('0' desativa)\n   * e `prefers-reduced-motion` (via CSS).\n   */\n  private spawnRipple = (event: PointerEvent): void => {\n    if (this.hasAttr('disabled') || this.hasAttr('loading')) return;\n    const enabled = getComputedStyle(this)\n      .getPropertyValue('--fx-effect-ripple')\n      .trim();\n    if (enabled === '0' || enabled === 'false') return;\n\n    const btn = this.root.querySelector<HTMLElement>('.btn');\n    if (!btn) return;\n\n    const rect = btn.getBoundingClientRect();\n    const size = Math.max(rect.width, rect.height);\n    const ripple = document.createElement('span');\n    ripple.className = 'btn__ripple';\n    ripple.style.width = ripple.style.height = `${size}px`;\n    ripple.style.left = `${event.clientX - rect.left - size / 2}px`;\n    ripple.style.top = `${event.clientY - rect.top - size / 2}px`;\n    btn.appendChild(ripple);\n    ripple.addEventListener('animationend', () => ripple.remove());\n  };\n}\n\nexport function defineFxButton(): typeof FxButton {\n  return defineElement('fx-button', FxButton);\n}"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../src/components/button/button.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\n\n/**\n * <fx-button> — Componente de ação (piloto).\n *\n * Form-Associated Custom Element: `type=\"submit\"` submete o <form> em que\n * vive e `type=\"reset\"` o limpa (o <button> interno está no Shadow DOM e não\n * se associa ao form sozinho — a ação é acionada via ElementInternals).\n * `<form disabled>`/`<fieldset disabled>` desabilitam o botão.\n *\n * Atributos: variant, size, disabled, loading, type, full (largura 100%\n * acompanhando o elemento pai), icon (nome do glifo Fenix Icons ou\n * emoji/texto livre) e icon-pos (left|right, padrão left).\n * Slots: default (rótulo), `icon` (ícone customizado — vence o atributo).\n * Evento: `click` nativo atravessa o Shadow DOM (composed) — ouça no host.\n */\nexport class FxButton extends FxElement {\n  /** Participa de <form> como botão (submit/reset via ElementInternals). */\n  static formAssociated = true;\n  /** focus() e clique em <label for> atingem o botão interno do Shadow DOM. */\n  static override shadowOptions: ShadowRootInit = { mode: 'open', delegatesFocus: true };\n  static override styles = css`\n    ${FENIX_ICON_BASE_CSS}\n    :host {\n      display: inline-block;\n      vertical-align: middle;\n    }\n    /* Full width: o host inline-block é shrink-to-fit, então precisa virar\n       block para o 100% do .btn interno ter contra o que esticar. */\n    :host([full]) {\n      display: block;\n      width: 100%;\n      max-width: 100%;\n    }\n    .btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      text-align: center;\n      gap: var(--fx-space-sm);\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      font-weight: var(--fx-font-weight);\n      line-height: var(--fx-font-line-height);\n      /* Padding vertical limitado ao orçamento do token --fx-size-*: a altura\n         fica EXATAMENTE em sm 32 / md 40 / lg 48 (mesma medida dos campos). */\n      padding: var(--fx-space-sm) var(--fx-space-xl);\n      border-radius: var(--fx-radius-md);\n      border: 1px solid transparent;\n      color: #fff;\n      background: var(--fx-color-primary);\n      cursor: pointer;\n      user-select: none;\n      text-decoration: none;\n      transition:\n        background-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        transform var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .btn:focus-visible {\n      outline: none;\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .btn:hover { filter: brightness(0.88); }\n    .btn:active { transform: translateY(1px); }\n\n    /* Tamanhos — alturas vindas dos tokens (personalizáveis por preset) */\n    .btn { min-height: var(--fx-size-md); }\n    :host([size='sm']) .btn { padding: var(--fx-space-xs) var(--fx-space-lg); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }\n    :host([size='lg']) .btn { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }\n\n    /* Full width */\n    :host([full]) .btn { width: 100%; }\n\n    /* Variantes */\n    :host([variant='secondary']) .btn { background: var(--fx-color-secondary); }\n    :host([variant='success']) .btn { background: var(--fx-color-success); }\n    :host([variant='warning']) .btn { background: var(--fx-color-warning); }\n    :host([variant='danger']) .btn { background: var(--fx-color-danger); }\n    :host([variant='info']) .btn { background: var(--fx-color-info); }\n    :host([variant='ghost']) .btn { background: transparent; color: var(--fx-text-default); }\n    :host([variant='ghost']) .btn:hover { background: var(--fx-surface-surface-hover); filter: none; }\n    :host([variant='outline']) .btn { background: transparent; color: var(--fx-color-primary); border-color: var(--fx-color-primary); }\n    :host([variant='outline']) .btn:hover { background: var(--fx-surface-surface-hover); filter: none; }\n\n    /* Ícone e spinner */\n    .btn__icon { display: inline-flex; align-items: center; font-size: var(--fx-button-icon-size, calc(var(--fx-font-size) + 6px)); line-height: 1; }\n    .btn__icon[hidden] { display: none; }\n    .btn__label { display: inline-flex; align-items: center; justify-content: center; }\n    /* Icon-only: a label some (o gap do flex some junto) e o botão vira\n       quadrado com padding simétrico — ícone perfeitamente centralizado. */\n    .btn--icon-only { padding-left: var(--fx-space-md); padding-right: var(--fx-space-md); }\n    .btn--icon-only .btn__label { display: none; }\n    .btn[hidden] { display: none; }\n    .btn__spinner {\n      width: 1em;\n      height: 1em;\n      border: 2px solid currentColor;\n      border-top-color: transparent;\n      border-radius: var(--fx-radius-full);\n      animation: fx-spin var(--fx-motion-duration-normal) linear infinite;\n    }\n    @keyframes fx-spin { to { transform: rotate(360deg); } }\n\n    /* Estados */\n    :host([disabled]) .btn,\n    :host([loading]) .btn {\n      opacity: 0.55;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n\n    /* Efeito ripple (). Desative com effect.ripple: '0' no preset. */\n    .btn {\n      position: relative;\n      overflow: hidden;\n    }\n    .btn__ripple {\n      position: absolute;\n      border-radius: var(--fx-radius-full);\n      background: currentColor;\n      opacity: 0.28;\n      transform: scale(0);\n      animation: fx-ripple 600ms var(--fx-motion-easing) forwards;\n      pointer-events: none;\n    }\n    @keyframes fx-ripple {\n      to {\n        transform: scale(2.6);\n        opacity: 0;\n      }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .btn__ripple { display: none; }\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['variant', 'size', 'disabled', 'loading', 'type', 'full', 'icon', 'icon-pos'];\n  }\n\n  protected readonly internals: ElementInternals | null;\n\n  constructor() {\n    super();\n    // Ambientes sem ElementInternals (ex.: jsdom nos testes) funcionam sem\n    // a integração nativa de form — o getter `form` cai no closest('form').\n    this.internals =\n      typeof this.attachInternals === 'function' ? this.attachInternals() : null;\n  }\n\n  /** Form ao qual o botão está associado (null se fora de um form). */\n  get form(): HTMLFormElement | null {\n    return (\n      this.internals?.form ?? (this.closest('form') as HTMLFormElement | null)\n    );\n  }\n\n  /** <form disabled>/<fieldset disabled>: espelha no atributo observado. */\n  formDisabledCallback(disabled: boolean): void {\n    if (disabled) this.setAttribute('disabled', '');\n    else this.removeAttribute('disabled');\n  }\n\n  /** Tamanho. 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 disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  get loading(): boolean {\n    return this.hasAttr('loading');\n  }\n  set loading(value: boolean) {\n    this.toggleAttr('loading', Boolean(value));\n  }\n\n  protected override render(): void {\n    const loading = this.hasAttr('loading');\n    const disabled = this.hasAttr('disabled') || loading;\n    const btnType = this.getAttr('type', 'button');\n    const icon = this.getAttr('icon');\n    const iconRight = this.getAttr('icon-pos', 'left') === 'right';\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\"></slot>'\n      : (icon ? fenixIconHtml(icon) : '');\n\n    this.setTemplate(`\n      <button class=\"btn\" part=\"button\" type=\"${btnType}\">\n        ${!iconRight ? `<span class=\"btn__icon\" part=\"icon\">${iconContent}</span>` : ''}\n        <span class=\"btn__label\" part=\"label\"><slot></slot></span>\n        ${iconRight ? `<span class=\"btn__icon\" part=\"icon\">${iconContent}</span>` : ''}\n        ${loading ? '<span class=\"btn__spinner\" aria-hidden=\"true\"></span>' : ''}\n      </button>\n    `);\n\n    const btn = this.root.querySelector<HTMLButtonElement>('.btn');\n    if (!btn) return;\n\n    // Esconde o container do ícone quando vazio, evitando espaço fantasma\n    // do `gap` que descentraliza o rótulo.\n    const hasIcon = iconContent.trim() !== '';\n    for (const wrap of this.root.querySelectorAll<HTMLElement>('.btn__icon')) {\n      wrap.toggleAttribute('hidden', !hasIcon);\n    }\n\n    // Icon-only: sem texto no slot default, o botão vira quadrado\n    // (padding simétrico) em vez de retangular largo.\n    const hasLabel = [...(this.childNodes ?? [])].some((n) =>\n      n.nodeType === Node.ELEMENT_NODE\n        ? (n as Element).getAttribute?.('slot') !== 'icon'\n        : (n.textContent ?? '').trim() !== '',\n    );\n    btn.classList.toggle('btn--icon-only', !hasLabel && hasIcon);\n    if (disabled) {\n      btn.setAttribute('disabled', '');\n      btn.setAttribute('aria-disabled', 'true');\n    } else {\n      btn.removeAttribute('disabled');\n      btn.removeAttribute('aria-disabled');\n    }\n    if (loading) btn.setAttribute('aria-busy', 'true');\n    else btn.removeAttribute('aria-busy');\n\n    // type=\"submit\"/\"reset\": o <button> 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) — a ação do botão é acionada manualmente via requestSubmit/\n    // reset do form associado. Ouvintes de submit seguem recebendo o evento.\n    if (btnType === 'submit' || btnType === 'reset') {\n      btn.addEventListener('click', () => {\n        if (this.hasAttr('disabled') || this.hasAttr('loading')) return;\n        if (btnType === 'submit' && this.form) this.form.requestSubmit();\n        else if (btnType === 'reset' && this.form) this.form.reset();\n      });\n    }\n  }\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('pointerdown', this.spawnRipple);\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('pointerdown', this.spawnRipple);\n  }\n\n  /**\n   * Efeito ripple : cria um círculo que expande do ponto\n   * de clique e desaparece. Respeita o token `effect.ripple` ('0' desativa)\n   * e `prefers-reduced-motion` (via CSS).\n   */\n  private spawnRipple = (event: PointerEvent): void => {\n    if (this.hasAttr('disabled') || this.hasAttr('loading')) return;\n    const enabled = getComputedStyle(this)\n      .getPropertyValue('--fx-effect-ripple')\n      .trim();\n    if (enabled === '0' || enabled === 'false') return;\n\n    const btn = this.root.querySelector<HTMLElement>('.btn');\n    if (!btn) return;\n\n    const rect = btn.getBoundingClientRect();\n    const size = Math.max(rect.width, rect.height);\n    const ripple = document.createElement('span');\n    ripple.className = 'btn__ripple';\n    ripple.style.width = ripple.style.height = `${size}px`;\n    ripple.style.left = `${event.clientX - rect.left - size / 2}px`;\n    ripple.style.top = `${event.clientY - rect.top - size / 2}px`;\n    btn.appendChild(ripple);\n    ripple.addEventListener('animationend', () => ripple.remove());\n  };\n}\n\nexport function defineFxButton(): typeof FxButton {\n  return defineElement('fx-button', FxButton);\n}"],"names":[],"mappings":";;;;AAmBO,MAAM,YAAN,MAAM,kBAAiB,UAAU;AAAA,EAgItC,cAAc;AACZ,UAAA;AAwHF,SAAQ,cAAc,CAAC,UAA8B;AACnD,UAAI,KAAK,QAAQ,UAAU,KAAK,KAAK,QAAQ,SAAS,EAAG;AACzD,YAAM,UAAU,iBAAiB,IAAI,EAClC,iBAAiB,oBAAoB,EACrC,KAAA;AACH,UAAI,YAAY,OAAO,YAAY,QAAS;AAE5C,YAAM,MAAM,KAAK,KAAK,cAA2B,MAAM;AACvD,UAAI,CAAC,IAAK;AAEV,YAAM,OAAO,IAAI,sBAAA;AACjB,YAAM,OAAO,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM;AAC7C,YAAM,SAAS,SAAS,cAAc,MAAM;AAC5C,aAAO,YAAY;AACnB,aAAO,MAAM,QAAQ,OAAO,MAAM,SAAS,GAAG,IAAI;AAClD,aAAO,MAAM,OAAO,GAAG,MAAM,UAAU,KAAK,OAAO,OAAO,CAAC;AAC3D,aAAO,MAAM,MAAM,GAAG,MAAM,UAAU,KAAK,MAAM,OAAO,CAAC;AACzD,UAAI,YAAY,MAAM;AACtB,aAAO,iBAAiB,gBAAgB,MAAM,OAAO,QAAQ;AAAA,IAC/D;AAxIE,SAAK,YACH,OAAO,KAAK,oBAAoB,aAAa,KAAK,oBAAoB;AAAA,EAC1E;AAAA,EAZA,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,QAAQ,YAAY,WAAW,QAAQ,QAAQ,QAAQ,UAAU;AAAA,EACtF;AAAA;AAAA,EAaA,IAAI,OAA+B;AACjC,WACE,KAAK,WAAW,QAAS,KAAK,QAAQ,MAAM;AAAA,EAEhD;AAAA;AAAA,EAGA,qBAAqB,UAAyB;AAC5C,QAAI,SAAU,MAAK,aAAa,YAAY,EAAE;AAAA,QACzC,MAAK,gBAAgB,UAAU;AAAA,EACtC;AAAA;AAAA,EAGA,IAAI,OAAe;AACjB,UAAM,IAAI,KAAK,QAAQ,QAAQ,IAAI;AACnC,WAAO,MAAM,QAAQ,MAAM,OAAO,IAAI;AAAA,EACxC;AAAA,EACA,IAAI,KAAK,OAAe;AACtB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEA,IAAI,WAAoB;AACtB,WAAO,KAAK,QAAQ,UAAU;AAAA,EAChC;AAAA,EACA,IAAI,SAAS,OAAgB;AAC3B,SAAK,WAAW,YAAY,QAAQ,KAAK,CAAC;AAAA,EAC5C;AAAA,EAEA,IAAI,UAAmB;AACrB,WAAO,KAAK,QAAQ,SAAS;AAAA,EAC/B;AAAA,EACA,IAAI,QAAQ,OAAgB;AAC1B,SAAK,WAAW,WAAW,QAAQ,KAAK,CAAC;AAAA,EAC3C;AAAA,EAEmB,SAAe;AAChC,UAAM,UAAU,KAAK,QAAQ,SAAS;AACtC,UAAM,WAAW,KAAK,QAAQ,UAAU,KAAK;AAC7C,UAAM,UAAU,KAAK,QAAQ,QAAQ,QAAQ;AAC7C,UAAM,OAAO,KAAK,QAAQ,MAAM;AAChC,UAAM,YAAY,KAAK,QAAQ,YAAY,MAAM,MAAM;AAEvD,UAAM,cAAc,KAAK,cAA2B,eAAe;AACnE,UAAM,cAAc,cAChB,8BACC,OAAO,cAAc,IAAI,IAAI;AAElC,SAAK,YAAY;AAAA,gDAC2B,OAAO;AAAA,UAC7C,CAAC,YAAY,uCAAuC,WAAW,YAAY,EAAE;AAAA;AAAA,UAE7E,YAAY,uCAAuC,WAAW,YAAY,EAAE;AAAA,UAC5E,UAAU,0DAA0D,EAAE;AAAA;AAAA,KAE3E;AAED,UAAM,MAAM,KAAK,KAAK,cAAiC,MAAM;AAC7D,QAAI,CAAC,IAAK;AAIV,UAAM,UAAU,YAAY,KAAA,MAAW;AACvC,eAAW,QAAQ,KAAK,KAAK,iBAA8B,YAAY,GAAG;AACxE,WAAK,gBAAgB,UAAU,CAAC,OAAO;AAAA,IACzC;AAIA,UAAM,WAAW,CAAC,GAAI,KAAK,cAAc,CAAA,CAAG,EAAE;AAAA,MAAK,CAAC,MAClD,EAAE,aAAa,KAAK,eACf,EAAc,eAAe,MAAM,MAAM,UACzC,EAAE,eAAe,IAAI,WAAW;AAAA,IAAA;AAEvC,QAAI,UAAU,OAAO,kBAAkB,CAAC,YAAY,OAAO;AAC3D,QAAI,UAAU;AACZ,UAAI,aAAa,YAAY,EAAE;AAC/B,UAAI,aAAa,iBAAiB,MAAM;AAAA,IAC1C,OAAO;AACL,UAAI,gBAAgB,UAAU;AAC9B,UAAI,gBAAgB,eAAe;AAAA,IACrC;AACA,QAAI,QAAS,KAAI,aAAa,aAAa,MAAM;AAAA,QAC5C,KAAI,gBAAgB,WAAW;AAMpC,QAAI,YAAY,YAAY,YAAY,SAAS;AAC/C,UAAI,iBAAiB,SAAS,MAAM;AAClC,YAAI,KAAK,QAAQ,UAAU,KAAK,KAAK,QAAQ,SAAS,EAAG;AACzD,YAAI,YAAY,YAAY,KAAK,KAAM,MAAK,KAAK,cAAA;AAAA,iBACxC,YAAY,WAAW,KAAK,KAAM,MAAK,KAAK,MAAA;AAAA,MACvD,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEmB,oBAA0B;AAC3C,UAAM,kBAAA;AACN,SAAK,iBAAiB,eAAe,KAAK,WAAW;AAAA,EACvD;AAAA,EAEmB,uBAA6B;AAC9C,UAAM,qBAAA;AACN,SAAK,oBAAoB,eAAe,KAAK,WAAW;AAAA,EAC1D;AA2BF;AA3QE,UAAO,iBAAiB;AAExB,UAAgB,gBAAgC,EAAE,MAAM,QAAQ,gBAAgB,KAAA;AAChF,UAAgB,SAAS;AAAA,MACrB,mBAAmB;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;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;AANlB,IAAM,WAAN;AA+QA,SAAS,iBAAkC;AAChD,SAAO,cAAc,aAAa,QAAQ;AAC5C;"}

package/dist/components/checkbox/checkbox.d.ts

@@ -1,11 +1,16 @@
-import { FxElement } from '../../core/base';
+import { FxFormElement } from '../../core/form-element';
 /**
  * <fx-checkbox> — Caixa de seleção com suporte a estado indeterminado.
  *
- * Atributos: checked, indeterminate, disabled, value, size (sm|md|lg).
- * Evento: `change` (composed, detail: { checked, value }).
+ * Form-Associated Custom Element: dentro de um <form> entra no FormData
+ * (via atributo `name`) com `value` (ou 'on') quando marcado — desmarcado
+ * não envia nada, igual ao checkbox nativo. Recebe reset/disable do form.
+ *
+ * Atributos: checked, indeterminate, disabled, value, name, size (sm|md|lg).
+ * Eventos: `change` e `checkedChange` (composed, detail: { checked, value }) —
+ * `checkedChange` é o two-way binding do Angular [(checked)].
  */
-export declare class FxCheckbox extends FxElement {
+export declare class FxCheckbox extends FxFormElement {
     static styles: string;
     static get observedAttributes(): string[];
     get checked(): boolean;
@@ -14,10 +19,21 @@ export declare class FxCheckbox extends FxElement {
     set indeterminate(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
+    /** No FormData: `value` (ou 'on') quando marcado; null (não envia) quando não. */
+    protected getFormValue(): string | FormData | null;
+    /** getter/setter `value` → espelho do atributo `value` (compat com v-model / [(value)]). */
+    get value(): string;
+    set value(v: string);
     /** Tamanho do controle. Padrão: `'md'`. */
     get size(): string;
     set size(value: string);
     protected render(): void;
+    /** Estado marcado inicial (para form.reset() restaurar). */
+    private _initialChecked;
+    private _initialCheckedCaptured;
+    protected connectedCallback(): void;
+    /** form.reset(): restaura o estado marcado inicial (checked/indeterminate não enviam nada). */
+    formResetCallback(): void;
     private toggle;
 }
 export declare function defineFxCheckbox(): typeof FxCheckbox;

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;GAKG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SA6DpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,aAAa,IAAI,OAAO,CAE3B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,OAAO,EAE/B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,2CAA2C;IAC3C,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;IA6BjC,OAAO,CAAC,MAAM;CAYf;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAIxD;;;;;;;;;;GAUG;AACH,qBAAa,UAAW,SAAQ,aAAa;IAC3C,OAAgB,MAAM,SA6DpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,aAAa,IAAI,OAAO,CAE3B;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,OAAO,EAE/B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,kFAAkF;cAC/D,YAAY,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI;IAI3D,4FAA4F;IAC5F,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAoC;IAEvD,2CAA2C;IAC3C,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;IAgCjC,4DAA4D;IAC5D,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,uBAAuB,CAAS;cAErB,iBAAiB,IAAI,IAAI;IAQ5C,+FAA+F;IACtF,iBAAiB,IAAI,IAAI;IAMlC,OAAO,CAAC,MAAM;CAoBf;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD"}

package/dist/components/checkbox/checkbox.js

@@ -1,7 +1,12 @@
-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";
-const _FxCheckbox = class _FxCheckbox extends FxElement {
+const _FxCheckbox = class _FxCheckbox extends FxFormElement {
+  constructor() {
+    super(...arguments);
+    this._initialChecked = false;
+    this._initialCheckedCaptured = false;
+  }
   static get observedAttributes() {
     return ["checked", "disabled", "indeterminate"];
   }
@@ -23,6 +28,17 @@ const _FxCheckbox = class _FxCheckbox extends FxElement {
   set disabled(value) {
     this.toggleAttr("disabled", Boolean(value));
   }
+  /** No FormData: `value` (ou 'on') quando marcado; null (não envia) quando não. */
+  getFormValue() {
+    return this.checked ? this.getAttr("value") || "on" : null;
+  }
+  /** getter/setter `value` → espelho do atributo `value` (compat com v-model / [(value)]). */
+  get value() {
+    return this.getAttr("value");
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
   /** Tamanho do controle. Padrão: `'md'`. */
   get size() {
     const s = this.getAttr("size", "md");
@@ -55,6 +71,20 @@ const _FxCheckbox = class _FxCheckbox extends FxElement {
         this.toggle();
       }
     });
+    this.updateFormValue();
+  }
+  connectedCallback() {
+    if (!this._initialCheckedCaptured) {
+      this._initialCheckedCaptured = true;
+      this._initialChecked = this.checked;
+    }
+    super.connectedCallback();
+  }
+  /** form.reset(): restaura o estado marcado inicial (checked/indeterminate não enviam nada). */
+  formResetCallback() {
+    this.checked = this._initialChecked;
+    this.indeterminate = false;
+    this.updateFormValue();
   }
   toggle() {
     if (this.disabled) return;
@@ -67,6 +97,13 @@ const _FxCheckbox = class _FxCheckbox extends FxElement {
         detail: { checked: this.checked, value: this.getAttr("value") }
       })
     );
+    this.dispatchEvent(
+      new CustomEvent("checkedChange", {
+        bubbles: true,
+        composed: true,
+        detail: { checked: this.checked, value: this.getAttr("value") }
+      })
+    );
   }
 };
 _FxCheckbox.styles = css`

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-checkbox> — Caixa de seleção com suporte a estado indeterminado.\n *\n * Atributos: checked, indeterminate, disabled, value, size (sm|md|lg).\n * Evento: `change` (composed, detail: { checked, value }).\n */\nexport class FxCheckbox extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .box {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      cursor: pointer;\n      user-select: none;\n      color: var(--fx-text-default);\n      -webkit-tap-highlight-color: transparent;\n    }\n    .control {\n      width: var(--fx-size-checkbox, 18px);\n      height: var(--fx-size-checkbox, 18px);\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--fx-border-hover);\n      border-radius: calc(var(--fx-radius-sm) + 2px);\n      background: var(--fx-surface-background);\n      color: #fff;\n      font-size: calc(var(--fx-size-checkbox, 18px) - 6px);\n      line-height: 1;\n      transition:\n        background-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .box:hover .control { border-color: var(--fx-color-primary); }\n    .box:focus-visible .control {\n      outline: none;\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    :host([checked]) .control {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n    }\n        :host([indeterminate]) .control {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n    }\n    /* Validação */\n    :host([error]) .control,\n    :host([invalid]) .control { border-color: var(--fx-color-danger, #dc2626); }\n    :host([success]) .control,\n    :host([valid]) .control { border-color: var(--fx-color-success, #16a34a); }\n    .mark { visibility: hidden; }\n    :host([checked]) .mark,\n    :host([indeterminate]) .mark { visibility: visible; }\n    .label { display: inline-flex; align-items: center; }\n    :host([disabled]) .box {\n      opacity: 0.55;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['checked', 'disabled', 'indeterminate'];\n  }\n\n  get checked(): boolean {\n    return this.hasAttr('checked');\n  }\n  set checked(value: boolean) {\n    this.toggleAttr('checked', Boolean(value));\n  }\n\n  get indeterminate(): boolean {\n    return this.hasAttr('indeterminate');\n  }\n  set indeterminate(value: boolean) {\n    this.toggleAttr('indeterminate', Boolean(value));\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  /** Tamanho do controle. 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  protected override render(): void {\n    // Escala por tamanho via token local.\n    const px = this.size === 'sm' ? '14px' : this.size === 'lg' ? '22px' : '18px';\n    if (!this.style.getPropertyValue('--fx-size-checkbox')) {\n      this.style.setProperty('--fx-size-checkbox', px);\n    }\n\n    this.setTemplate(`\n      <span class=\"box\" part=\"box\" role=\"checkbox\" tabindex=\"0\"\n        aria-checked=\"${this.indeterminate ? 'mixed' : this.checked}\"\n        aria-disabled=\"${this.disabled}\">\n        <span class=\"control\" part=\"control\">\n          <span class=\"mark\">${this.indeterminate ? '–' : '✓'}</span>\n        </span>\n        <span class=\"label\" part=\"label\"><slot></slot></span>\n      </span>\n    `);\n\n    const box = this.root.querySelector<HTMLElement>('.box');\n    if (!box) return;\n    box.addEventListener('click', () => this.toggle());\n    box.addEventListener('keydown', (e) => {\n      if ((e as KeyboardEvent).key === ' ' || (e as KeyboardEvent).key === 'Enter') {\n        e.preventDefault();\n        this.toggle();\n      }\n    });\n  }\n\n  private toggle(): void {\n    if (this.disabled) return;\n    this.indeterminate = false; // interagir resolve o estado misto\n    this.checked = !this.checked;\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.getAttr('value') },\n      }),\n    );\n  }\n}\n\nexport function defineFxCheckbox(): typeof FxCheckbox {\n  return defineElement('fx-checkbox', FxCheckbox);\n}\n"],"names":[],"mappings":";;;AAUO,MAAM,cAAN,MAAM,oBAAmB,UAAU;AAAA,EAgExC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,YAAY,eAAe;AAAA,EAChD;AAAA,EAEA,IAAI,UAAmB;AACrB,WAAO,KAAK,QAAQ,SAAS;AAAA,EAC/B;AAAA,EACA,IAAI,QAAQ,OAAgB;AAC1B,SAAK,WAAW,WAAW,QAAQ,KAAK,CAAC;AAAA,EAC3C;AAAA,EAEA,IAAI,gBAAyB;AAC3B,WAAO,KAAK,QAAQ,eAAe;AAAA,EACrC;AAAA,EACA,IAAI,cAAc,OAAgB;AAChC,SAAK,WAAW,iBAAiB,QAAQ,KAAK,CAAC;AAAA,EACjD;AAAA,EAEA,IAAI,WAAoB;AACtB,WAAO,KAAK,QAAQ,UAAU;AAAA,EAChC;AAAA,EACA,IAAI,SAAS,OAAgB;AAC3B,SAAK,WAAW,YAAY,QAAQ,KAAK,CAAC;AAAA,EAC5C;AAAA;AAAA,EAGA,IAAI,OAAe;AACjB,UAAM,IAAI,KAAK,QAAQ,QAAQ,IAAI;AACnC,WAAO,MAAM,QAAQ,MAAM,OAAO,IAAI;AAAA,EACxC;AAAA,EACA,IAAI,KAAK,OAAe;AACtB,SAAK,aAAa,QAAQ,KAAK;AAAA,EACjC;AAAA,EAEmB,SAAe;AAEhC,UAAM,KAAK,KAAK,SAAS,OAAO,SAAS,KAAK,SAAS,OAAO,SAAS;AACvE,QAAI,CAAC,KAAK,MAAM,iBAAiB,oBAAoB,GAAG;AACtD,WAAK,MAAM,YAAY,sBAAsB,EAAE;AAAA,IACjD;AAEA,SAAK,YAAY;AAAA;AAAA,wBAEG,KAAK,gBAAgB,UAAU,KAAK,OAAO;AAAA,yBAC1C,KAAK,QAAQ;AAAA;AAAA,+BAEP,KAAK,gBAAgB,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA,KAIxD;AAED,UAAM,MAAM,KAAK,KAAK,cAA2B,MAAM;AACvD,QAAI,CAAC,IAAK;AACV,QAAI,iBAAiB,SAAS,MAAM,KAAK,QAAQ;AACjD,QAAI,iBAAiB,WAAW,CAAC,MAAM;AACrC,UAAK,EAAoB,QAAQ,OAAQ,EAAoB,QAAQ,SAAS;AAC5E,UAAE,eAAA;AACF,aAAK,OAAA;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,SAAe;AACrB,QAAI,KAAK,SAAU;AACnB,SAAK,gBAAgB;AACrB,SAAK,UAAU,CAAC,KAAK;AACrB,SAAK;AAAA,MACH,IAAI,YAAY,UAAU;AAAA,QACxB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,SAAS,KAAK,SAAS,OAAO,KAAK,QAAQ,OAAO,EAAA;AAAA,MAAE,CAC/D;AAAA,IAAA;AAAA,EAEL;AACF;AA1IE,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;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;AA6IA,SAAS,mBAAsC;AACpD,SAAO,cAAc,eAAe,UAAU;AAChD;"}
+{"version":3,"file":"checkbox.js","sources":["../../../src/components/checkbox/checkbox.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-checkbox> — Caixa de seleção com suporte a estado indeterminado.\n *\n * Form-Associated Custom Element: dentro de um <form> entra no FormData\n * (via atributo `name`) com `value` (ou 'on') quando marcado — desmarcado\n * não envia nada, igual ao checkbox nativo. Recebe reset/disable do form.\n *\n * Atributos: checked, indeterminate, disabled, value, name, size (sm|md|lg).\n * Eventos: `change` e `checkedChange` (composed, detail: { checked, value }) —\n * `checkedChange` é o two-way binding do Angular [(checked)].\n */\nexport class FxCheckbox extends FxFormElement {\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .box {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      cursor: pointer;\n      user-select: none;\n      color: var(--fx-text-default);\n      -webkit-tap-highlight-color: transparent;\n    }\n    .control {\n      width: var(--fx-size-checkbox, 18px);\n      height: var(--fx-size-checkbox, 18px);\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      border: 2px solid var(--fx-border-hover);\n      border-radius: calc(var(--fx-radius-sm) + 2px);\n      background: var(--fx-surface-background);\n      color: #fff;\n      font-size: calc(var(--fx-size-checkbox, 18px) - 6px);\n      line-height: 1;\n      transition:\n        background-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .box:hover .control { border-color: var(--fx-color-primary); }\n    .box:focus-visible .control {\n      outline: none;\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    :host([checked]) .control {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n    }\n        :host([indeterminate]) .control {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n    }\n    /* Validação */\n    :host([error]) .control,\n    :host([invalid]) .control { border-color: var(--fx-color-danger, #dc2626); }\n    :host([success]) .control,\n    :host([valid]) .control { border-color: var(--fx-color-success, #16a34a); }\n    .mark { visibility: hidden; }\n    :host([checked]) .mark,\n    :host([indeterminate]) .mark { visibility: visible; }\n    .label { display: inline-flex; align-items: center; }\n    :host([disabled]) .box {\n      opacity: 0.55;\n      cursor: not-allowed;\n      pointer-events: none;\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['checked', 'disabled', 'indeterminate'];\n  }\n\n  get checked(): boolean {\n    return this.hasAttr('checked');\n  }\n  set checked(value: boolean) {\n    this.toggleAttr('checked', Boolean(value));\n  }\n\n  get indeterminate(): boolean {\n    return this.hasAttr('indeterminate');\n  }\n  set indeterminate(value: boolean) {\n    this.toggleAttr('indeterminate', Boolean(value));\n  }\n\n  get disabled(): boolean {\n    return this.hasAttr('disabled');\n  }\n  set disabled(value: boolean) {\n    this.toggleAttr('disabled', Boolean(value));\n  }\n\n  /** No FormData: `value` (ou 'on') quando marcado; null (não envia) quando não. */\n  protected override getFormValue(): string | FormData | null {\n    return this.checked ? (this.getAttr('value') || 'on') : null;\n  }\n\n  /** getter/setter `value` → espelho do atributo `value` (compat com v-model / [(value)]). */\n  get value(): string { return this.getAttr('value'); }\n  set value(v: string) { this.setAttribute('value', v); }\n\n  /** Tamanho do controle. 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  protected override render(): void {\n    // Escala por tamanho via token local.\n    const px = this.size === 'sm' ? '14px' : this.size === 'lg' ? '22px' : '18px';\n    if (!this.style.getPropertyValue('--fx-size-checkbox')) {\n      this.style.setProperty('--fx-size-checkbox', px);\n    }\n\n    this.setTemplate(`\n      <span class=\"box\" part=\"box\" role=\"checkbox\" tabindex=\"0\"\n        aria-checked=\"${this.indeterminate ? 'mixed' : this.checked}\"\n        aria-disabled=\"${this.disabled}\">\n        <span class=\"control\" part=\"control\">\n          <span class=\"mark\">${this.indeterminate ? '–' : '✓'}</span>\n        </span>\n        <span class=\"label\" part=\"label\"><slot></slot></span>\n      </span>\n    `);\n\n    const box = this.root.querySelector<HTMLElement>('.box');\n    if (!box) return;\n    box.addEventListener('click', () => this.toggle());\n    box.addEventListener('keydown', (e) => {\n      if ((e as KeyboardEvent).key === ' ' || (e as KeyboardEvent).key === 'Enter') {\n        e.preventDefault();\n        this.toggle();\n      }\n    });\n\n    // Publica name/value no form (ElementInternals) a cada render.\n    this.updateFormValue();\n  }\n\n  /** Estado marcado inicial (para form.reset() restaurar). */\n  private _initialChecked = false;\n  private _initialCheckedCaptured = false;\n\n  protected override connectedCallback(): void {\n    if (!this._initialCheckedCaptured) {\n      this._initialCheckedCaptured = true;\n      this._initialChecked = this.checked;\n    }\n    super.connectedCallback();\n  }\n\n  /** form.reset(): restaura o estado marcado inicial (checked/indeterminate não enviam nada). */\n  override formResetCallback(): void {\n    this.checked = this._initialChecked;\n    this.indeterminate = false;\n    this.updateFormValue();\n  }\n\n  private toggle(): void {\n    if (this.disabled) return;\n    this.indeterminate = false; // interagir resolve o estado misto\n    this.checked = !this.checked;\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.getAttr('value') },\n      }),\n    );\n    // Two-way binding do Angular: [(checked)] = [checked] + (checkedChange).\n    this.dispatchEvent(\n      new CustomEvent('checkedChange', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.getAttr('value') },\n      }),\n    );\n  }\n}\n\nexport function defineFxCheckbox(): typeof FxCheckbox {\n  return defineElement('fx-checkbox', FxCheckbox);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/datepicker/datepicker.d.ts

@@ -1,7 +1,11 @@
-import { FxElement } from '../../core/base';
+import { FxFormElement } from '../../core/form-element';
 /**
  * <fx-datepicker> — Campo de data com calendário suspenso.
  *
+ * Form-Associated Custom Element: dentro de um <form> entra no FormData
+ * (via atributo `name`): single → `name`; range → `name-start`/`name-end`;
+ * multiple → uma entrada `name` por data.
+ *
  * Um input com ícone de calendário no final; ao clicar, abre o
  * <fx-calendar> em um popover. As datas selecionadas aparecem no input.
  *
@@ -19,13 +23,21 @@ import { FxElement } from '../../core/base';
  * - single:   { value }
  * - range:    { value, start, end }
  * - multiple: { values: string[] }
+ *
+ * Além do `change`, emite `input`/`valueChange` com o MESMO payload
+ * (v-model do Vue e [(value)] do Angular).
  */
-export declare class FxDatepicker extends FxElement {
+export declare class FxDatepicker extends FxFormElement {
     static styles: string;
     static get observedAttributes(): string[];
+    protected attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /** No FormData do form, conforme o modo (single/range/multiple). */
+    protected getFormValue(): string | FormData | null;
     private docListener?;
     /** Hora/minuto/segundo do modo show-time. */
     private time;
+    /** Estado inicial (value/start/end/values) para form.reset(). */
+    private _initialState?;
     get mode(): string;
     set mode(value: string);
     get value(): string;
@@ -37,6 +49,8 @@ export declare class FxDatepicker extends FxElement {
     set disabled(value: boolean);
     protected connectedCallback(): void;
     protected disconnectedCallback(): void;
+    /** form.reset(): restaura value/start/end/values iniciais (re-render via atributos observados). */
+    formResetCallback(): void;
     /** Formata uma data ISO ("YYYY-MM-DD" ou com "THH:mm:ss") segundo o atributo format. */
     private formatDate;
     /** Texto exibido no input conforme o modo. */

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

@@ -1 +1 @@
-{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SAwJpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,6CAA6C;IAC7C,OAAO,CAAC,IAAI,CAAwB;IAEpC,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAElB;IAED,gDAAgD;IAChD,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;cAEkB,iBAAiB,IAAI,IAAI;cAWzB,oBAAoB,IAAI,IAAI;IAK/C,wFAAwF;IACxF,OAAO,CAAC,UAAU;IAyBlB,8CAA8C;IAC9C,OAAO,CAAC,WAAW;IAoBnB,iDAAiD;IACjD,OAAO,CAAC,QAAQ;IAKhB,sDAAsD;IACtD,OAAO,CAAC,iBAAiB;IAQzB,+DAA+D;IAC/D,OAAO,CAAC,QAAQ;cAOG,MAAM,IAAI,IAAI;IAqJjC,OAAO,CAAC,UAAU;IAMlB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAgClB,8DAA8D;IAC9D,OAAO,CAAC,WAAW;CAkCpB;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../../src/components/datepicker/datepicker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,YAAa,SAAQ,aAAa;IAC7C,OAAgB,MAAM,SAwJpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQjH,oEAAoE;cACjD,YAAY,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI;IAoB3D,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,6CAA6C;IAC7C,OAAO,CAAC,IAAI,CAAwB;IACpC,iEAAiE;IACjE,OAAO,CAAC,aAAa,CAAC,CAAgE;IAEtF,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAElB;IAED,gDAAgD;IAChD,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;cAEkB,iBAAiB,IAAI,IAAI;cAmBzB,oBAAoB,IAAI,IAAI;IAK/C,mGAAmG;IAC1F,iBAAiB,IAAI,IAAI;IASlC,wFAAwF;IACxF,OAAO,CAAC,UAAU;IAyBlB,8CAA8C;IAC9C,OAAO,CAAC,WAAW;IAoBnB,iDAAiD;IACjD,OAAO,CAAC,QAAQ;IAKhB,sDAAsD;IACtD,OAAO,CAAC,iBAAiB;IAQzB,+DAA+D;IAC/D,OAAO,CAAC,QAAQ;cAOG,MAAM,IAAI,IAAI;IAqJjC,OAAO,CAAC,UAAU;IASlB;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAgClB,8DAA8D;IAC9D,OAAO,CAAC,WAAW;CAkCpB;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}