@wrrdev/fenix-ui 1.1.12 → 1.1.14

package/dist/components/switch/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","sources":["../../../src/components/switch/switch.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-switch> — Interruptor ligado/desligado (role=\"switch\").\n *\n * O texto do slot (light DOM) é o rótulo clicável.\n * Atributos: checked, disabled, size (sm|md|lg).\n * Evento: `change` (composed, detail: { checked }).\n */\nexport class FxSwitch 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    .switch {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      cursor: pointer;\n      user-select: none;\n      background: none;\n      border: none;\n      padding: 0;\n      color: var(--fx-text-default);\n      font: inherit;\n    }\n    .track {\n      position: relative;\n      width: 40px;\n      height: 22px;\n      border-radius: var(--fx-radius-full);\n      background: var(--fx-border-default);\n      flex-shrink: 0;\n      transition: background-color var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .thumb {\n      position: absolute;\n      top: 3px;\n      left: 3px;\n      width: 16px;\n      height: 16px;\n      border-radius: var(--fx-radius-full);\n      background: #fff;\n      box-shadow: var(--fx-shadow-sm);\n      transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([checked]) .track { background: var(--fx-color-primary); }\n    :host([checked]) .thumb { transform: translateX(18px); }\n    .switch:focus-visible .track {\n      outline: none;\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .label { display: inline-flex; align-items: center; }\n    :host([disabled]) .switch { opacity: 0.55; cursor: not-allowed; pointer-events: none; }\n    /* Escala: sm 32×18 · md 40×22 (padrão) · lg 48×26 */\n    :host([size='sm']) .track { width: 32px; height: 18px; }\n    :host([size='sm']) .thumb { top: 2px; left: 2px; width: 14px; height: 14px; }\n    :host([size='sm'][checked]) .thumb { transform: translateX(14px); }\n    :host([size='lg']) .track { width: 48px; height: 26px; }\n    :host([size='lg']) .thumb { top: 4px; left: 4px; width: 18px; height: 18px; }\n    :host([size='lg'][checked]) .thumb { transform: translateX(22px); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['checked', 'disabled', 'size'];\n  }\n\n  /** Tamanho da trilha. 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 checked(): boolean {\n    return this.hasAttr('checked');\n  }\n  set checked(value: boolean) {\n    this.toggleAttr('checked', 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  protected override render(): void {\n    this.setTemplate(`\n      <button class=\"switch\" part=\"switch\" type=\"button\" role=\"switch\"\n        aria-checked=\"${this.checked}\" ${this.hasAttr('disabled') ? 'disabled' : ''}>\n        <span class=\"track\" part=\"track\"><span class=\"thumb\" part=\"thumb\"></span></span>\n        <span class=\"label\" part=\"label\"><slot></slot></span>\n      </button>\n    `);\n\n    const btn = this.root.querySelector<HTMLButtonElement>('.switch');\n    if (!btn) return;\n    btn.addEventListener('click', () => {\n      if (this.hasAttr('disabled')) return;\n      this.checked = !this.checked;\n      btn.setAttribute('aria-checked', String(this.checked));\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: { checked: this.checked },\n        }),\n      );\n    });\n  }\n}\n\nexport function defineFxSwitch(): typeof FxSwitch {\n  return defineElement('fx-switch', FxSwitch);\n}\n"],"names":[],"mappings":";;;AAWO,MAAM,YAAN,MAAM,kBAAiB,UAAU;AAAA,EAyDtC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,YAAY,MAAM;AAAA,EACvC;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,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,WAAoB;AACtB,WAAO,KAAK,QAAQ,UAAU;AAAA,EAChC;AAAA,EACA,IAAI,SAAS,OAAgB;AAC3B,SAAK,WAAW,YAAY,QAAQ,KAAK,CAAC;AAAA,EAC5C;AAAA,EAEmB,SAAe;AAChC,SAAK,YAAY;AAAA;AAAA,wBAEG,KAAK,OAAO,KAAK,KAAK,QAAQ,UAAU,IAAI,aAAa,EAAE;AAAA;AAAA;AAAA;AAAA,KAI9E;AAED,UAAM,MAAM,KAAK,KAAK,cAAiC,SAAS;AAChE,QAAI,CAAC,IAAK;AACV,QAAI,iBAAiB,SAAS,MAAM;AAClC,UAAI,KAAK,QAAQ,UAAU,EAAG;AAC9B,WAAK,UAAU,CAAC,KAAK;AACrB,UAAI,aAAa,gBAAgB,OAAO,KAAK,OAAO,CAAC;AACrD,WAAK;AAAA,QACH,IAAI,YAAY,UAAU;AAAA,UACxB,SAAS;AAAA,UACT,UAAU;AAAA,UACV,QAAQ,EAAE,SAAS,KAAK,QAAA;AAAA,QAAQ,CACjC;AAAA,MAAA;AAAA,IAEL,CAAC;AAAA,EACH;AACF;AA3GE,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;AADpB,IAAM,WAAN;AA8GA,SAAS,iBAAkC;AAChD,SAAO,cAAc,aAAa,QAAQ;AAC5C;"}
+{"version":3,"file":"switch.js","sources":["../../../src/components/switch/switch.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-switch> — Interruptor ligado/desligado (role=\"switch\").\n *\n * Form-Associated Custom Element: dentro de um <form> entra no FormData\n * (via atributo `name`) com `value` (ou 'on') quando ligado — desligado\n * não envia nada, igual ao checkbox. Recebe reset/disable do form.\n *\n * O texto do slot (light DOM) é o rótulo clicável.\n * Atributos: checked, 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 FxSwitch 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    .switch {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      cursor: pointer;\n      user-select: none;\n      background: none;\n      border: none;\n      padding: 0;\n      color: var(--fx-text-default);\n      font: inherit;\n    }\n    .track {\n      position: relative;\n      width: 40px;\n      height: 22px;\n      border-radius: var(--fx-radius-full);\n      background: var(--fx-border-default);\n      flex-shrink: 0;\n      transition: background-color var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .thumb {\n      position: absolute;\n      top: 3px;\n      left: 3px;\n      width: 16px;\n      height: 16px;\n      border-radius: var(--fx-radius-full);\n      background: #fff;\n      box-shadow: var(--fx-shadow-sm);\n      transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    :host([checked]) .track { background: var(--fx-color-primary); }\n    :host([checked]) .thumb { transform: translateX(18px); }\n    .switch:focus-visible .track {\n      outline: none;\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .label { display: inline-flex; align-items: center; }\n    :host([disabled]) .switch { opacity: 0.55; cursor: not-allowed; pointer-events: none; }\n    /* Escala: sm 32×18 · md 40×22 (padrão) · lg 48×26 */\n    :host([size='sm']) .track { width: 32px; height: 18px; }\n    :host([size='sm']) .thumb { top: 2px; left: 2px; width: 14px; height: 14px; }\n    :host([size='sm'][checked]) .thumb { transform: translateX(14px); }\n    :host([size='lg']) .track { width: 48px; height: 26px; }\n    :host([size='lg']) .thumb { top: 4px; left: 4px; width: 18px; height: 18px; }\n    :host([size='lg'][checked]) .thumb { transform: translateX(22px); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['checked', 'disabled', 'size'];\n  }\n\n  /** Tamanho da trilha. 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 checked(): boolean {\n    return this.hasAttr('checked');\n  }\n  set checked(value: boolean) {\n    this.toggleAttr('checked', 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  /** 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  /** No FormData: `value` (ou 'on') quando ligado; 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  protected override render(): void {\n    this.setTemplate(`\n      <button class=\"switch\" part=\"switch\" type=\"button\" role=\"switch\"\n        aria-checked=\"${this.checked}\" ${this.hasAttr('disabled') ? 'disabled' : ''}>\n        <span class=\"track\" part=\"track\"><span class=\"thumb\" part=\"thumb\"></span></span>\n        <span class=\"label\" part=\"label\"><slot></slot></span>\n      </button>\n    `);\n\n    const btn = this.root.querySelector<HTMLButtonElement>('.switch');\n    if (!btn) return;\n    btn.addEventListener('click', () => {\n      if (this.hasAttr('disabled')) return;\n      this.checked = !this.checked;\n      btn.setAttribute('aria-checked', String(this.checked));\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: { checked: this.checked },\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    // 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 inicial (desligado por padrão). */\n  override formResetCallback(): void {\n    this.checked = this._initialChecked;\n    const btn = this.root.querySelector<HTMLButtonElement>('.switch');\n    if (btn) btn.setAttribute('aria-checked', String(this.checked));\n    this.updateFormValue();\n  }\n}\n\nexport function defineFxSwitch(): typeof FxSwitch {\n  return defineElement('fx-switch', FxSwitch);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/textarea/textarea.d.ts

@@ -1,12 +1,17 @@
-import { FxElement } from '../../core/base';
+import { FxFormElement } from '../../core/form-element';
 /**
  * <fx-textarea> — Área de texto multilinha estilizada com os tokens do tema.
  *
- * Atributos: value, size (sm|md|lg), placeholder, disabled, readonly,
- * rows, maxlength.
- * Eventos: `input` e `change` (composed, detail: { value }).
+ * Form-Associated Custom Element: dentro de um <form> entra no FormData
+ * (via atributo `name`), recebe reset/disable do form e é alvo de
+ * `<label for>`/`autofocus`. Enter continua sendo quebra de linha.
+ *
+ * Atributos: value, name, size (sm|md|lg), placeholder, disabled, readonly,
+ * rows, maxlength, autofocus.
+ * Eventos: `input`, `change` e `valueChange` (composed, detail: { value }) —
+ * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.
  */
-export declare class FxTextarea extends FxElement {
+export declare class FxTextarea extends FxFormElement {
     static styles: string;
     static get observedAttributes(): string[];
     get size(): string;
@@ -14,6 +19,8 @@ export declare class FxTextarea extends FxElement {
     get value(): string;
     set value(value: string);
     protected render(): void;
+    /** Empurra o atributo `value` para o campo interno sem re-renderizar. */
+    protected syncInternalControl(): void;
 }
 export declare function defineFxTextarea(): typeof FxTextarea;
 //# sourceMappingURL=textarea.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SA6DpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAuC;IAE7D,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAAwC;cAE5C,MAAM,IAAI,IAAI;CA8BlC;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD;;;;;;;;;;;GAWG;AACH,qBAAa,UAAW,SAAQ,aAAa;IAC3C,OAAgB,MAAM,SA6DpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAAuC;IAE7D,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAMtB;cAEkB,MAAM,IAAI,IAAI;IAoCjC,yEAAyE;cACtD,mBAAmB,IAAI,IAAI;CAK/C;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD"}

package/dist/components/textarea/textarea.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 _FxTextarea = class _FxTextarea extends FxElement {
+const _FxTextarea = class _FxTextarea extends FxFormElement {
   static get observedAttributes() {
     return ["size", "placeholder", "disabled", "readonly", "rows", "maxlength", "error", "invalid", "success", "valid"];
   }
@@ -18,6 +18,8 @@ const _FxTextarea = class _FxTextarea extends FxElement {
   }
   set value(value) {
     this.setAttribute("value", value);
+    this.syncInternalControl();
+    this.updateFormValue();
   }
   render() {
     const placeholder = this.getAttr("placeholder");
@@ -37,6 +39,7 @@ const _FxTextarea = class _FxTextarea extends FxElement {
     if (readonly) field.setAttribute("readonly", "");
     const emit = (event) => {
       this.value = field.value;
+      this.emitValueEvents();
       this.dispatchEvent(
         new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } })
       );
@@ -49,6 +52,13 @@ const _FxTextarea = class _FxTextarea extends FxElement {
       e.stopPropagation();
       emit("change");
     });
+    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;
   }
 };
 _FxTextarea.styles = css`

package/dist/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../../../src/components/textarea/textarea.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-textarea> — Área de texto multilinha estilizada com os tokens do tema.\n *\n * Atributos: value, size (sm|md|lg), placeholder, disabled, readonly,\n * rows, maxlength.\n * Eventos: `input` e `change` (composed, detail: { value }).\n */\nexport class FxTextarea extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\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-textarea-width, 260px);\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .field {\n      font-family: inherit;\n      font-size: inherit;\n      /* Altura determinística: 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-md) var(--fx-space-lg);\n      /* Acompanha a largura definida no :host. */\n      width: 100%;\n      min-height: calc(var(--fx-size-md) + 40px);\n      resize: vertical;\n      box-sizing: border-box;\n      transition:\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .field::placeholder { color: var(--fx-text-muted); opacity: 1; }\n    .field:hover { border-color: var(--fx-border-hover); }\n    .field:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .field:disabled,\n    .field[readonly] {\n      opacity: 0.55;\n      cursor: not-allowed;\n      background-color: var(--fx-surface-surface-hover);\n    }\n    /* Validação: borda sempre; brilho (anel) via token que acompanha\n       effect.focus-ring — desligado ⇒ erro só com a borda vermelha. */\n    :host([error]) .field, :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, :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    :host([size='sm']) { width: var(--fx-textarea-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-textarea-width-lg, 300px); }\n    :host([size='lg']) .field { min-height: calc(var(--fx-size-lg) + 80px); }\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  `;\n\n  static override get observedAttributes(): string[] {\n    return ['size', 'placeholder', 'disabled', 'readonly', 'rows', 'maxlength', '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(value: string) { this.setAttribute('size', value); }\n\n  get value(): string { return this.getAttr('value'); }\n  set value(value: string) { this.setAttribute('value', value); }\n\n  protected override render(): void {\n    const placeholder = this.getAttr('placeholder');\n    const readonly = this.hasAttr('readonly');\n    const disabled = this.hasAttr('disabled');\n    const rows = this.getAttr('rows');\n    const maxlength = this.getAttr('maxlength');\n\n    this.setTemplate(`<textarea class=\"field\" part=\"textarea\"\n      ${placeholder ? `placeholder=\"${esc(placeholder)}\"` : ''}\n      ${rows ? `rows=\"${esc(rows)}\"` : ''}\n      ${maxlength ? `maxlength=\"${esc(maxlength)}\"` : ''}\n    ></textarea>`);\n\n    const field = this.root.querySelector<HTMLTextAreaElement>('.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}\n\nexport function defineFxTextarea(): typeof FxTextarea {\n  return defineElement('fx-textarea', FxTextarea);\n}\n"],"names":[],"mappings":";;;;AAYO,MAAM,cAAN,MAAM,oBAAmB,UAAU;AAAA,EAgExC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,eAAe,YAAY,YAAY,QAAQ,aAAa,SAAS,WAAW,WAAW,OAAO;AAAA,EACpH;AAAA,EAEA,IAAI,OAAe;AACjB,UAAM,IAAI,KAAK,QAAQ,QAAQ,IAAI;AACnC,WAAO,MAAM,QAAQ,MAAM,OAAO,IAAI;AAAA,EACxC;AAAA,EACA,IAAI,KAAK,OAAe;AAAE,SAAK,aAAa,QAAQ,KAAK;AAAA,EAAG;AAAA,EAE5D,IAAI,QAAgB;AAAE,WAAO,KAAK,QAAQ,OAAO;AAAA,EAAG;AAAA,EACpD,IAAI,MAAM,OAAe;AAAE,SAAK,aAAa,SAAS,KAAK;AAAA,EAAG;AAAA,EAE3C,SAAe;AAChC,UAAM,cAAc,KAAK,QAAQ,aAAa;AAC9C,UAAM,WAAW,KAAK,QAAQ,UAAU;AACxC,UAAM,WAAW,KAAK,QAAQ,UAAU;AACxC,UAAM,OAAO,KAAK,QAAQ,MAAM;AAChC,UAAM,YAAY,KAAK,QAAQ,WAAW;AAE1C,SAAK,YAAY;AAAA,QACb,cAAc,gBAAgB,IAAI,WAAW,CAAC,MAAM,EAAE;AAAA,QACtD,OAAO,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;AAAA,QACjC,YAAY,cAAc,IAAI,SAAS,CAAC,MAAM,EAAE;AAAA,iBACvC;AAEb,UAAM,QAAQ,KAAK,KAAK,cAAmC,QAAQ;AACnE,QAAI,CAAC,MAAO;AACZ,UAAM,QAAQ,KAAK,QAAQ,OAAO;AAClC,QAAI,SAAU,OAAM,aAAa,YAAY,EAAE;AAC/C,QAAI,SAAU,OAAM,aAAa,YAAY,EAAE;AAE/C,UAAM,OAAO,CAAC,UAAwB;AACpC,WAAK,QAAQ,MAAM;AACnB,WAAK;AAAA,QACH,IAAI,YAAY,OAAO,EAAE,SAAS,MAAM,UAAU,MAAM,QAAQ,EAAE,OAAO,MAAM,MAAA,GAAS;AAAA,MAAA;AAAA,IAE5F;AAGA,UAAM,iBAAiB,SAAS,CAAC,MAAM;AAAE,QAAE,gBAAA;AAAmB,WAAK,OAAO;AAAA,IAAG,CAAC;AAC9E,UAAM,iBAAiB,UAAU,CAAC,MAAM;AAAE,QAAE,gBAAA;AAAmB,WAAK,QAAQ;AAAA,IAAG,CAAC;AAAA,EAClF;AACF;AA1GE,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;AA6GA,SAAS,mBAAsC;AACpD,SAAO,cAAc,eAAe,UAAU;AAChD;"}
+{"version":3,"file":"textarea.js","sources":["../../../src/components/textarea/textarea.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-textarea> — Área de texto multilinha estilizada com os tokens do tema.\n *\n * Form-Associated Custom Element: dentro de um <form> entra no FormData\n * (via atributo `name`), recebe reset/disable do form e é alvo de\n * `<label for>`/`autofocus`. Enter continua sendo quebra de linha.\n *\n * Atributos: value, name, size (sm|md|lg), placeholder, disabled, readonly,\n * rows, maxlength, autofocus.\n * Eventos: `input`, `change` e `valueChange` (composed, detail: { value }) —\n * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.\n */\nexport class FxTextarea extends FxFormElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      vertical-align: middle;\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-textarea-width, 260px);\n      vertical-align: middle;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .field {\n      font-family: inherit;\n      font-size: inherit;\n      /* Altura determinística: 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-md) var(--fx-space-lg);\n      /* Acompanha a largura definida no :host. */\n      width: 100%;\n      min-height: calc(var(--fx-size-md) + 40px);\n      resize: vertical;\n      box-sizing: border-box;\n      transition:\n        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    .field::placeholder { color: var(--fx-text-muted); opacity: 1; }\n    .field:hover { border-color: var(--fx-border-hover); }\n    .field:focus-visible {\n      outline: none;\n      border-color: var(--fx-color-primary);\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .field:disabled,\n    .field[readonly] {\n      opacity: 0.55;\n      cursor: not-allowed;\n      background-color: var(--fx-surface-surface-hover);\n    }\n    /* Validação: borda sempre; brilho (anel) via token que acompanha\n       effect.focus-ring — desligado ⇒ erro só com a borda vermelha. */\n    :host([error]) .field, :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, :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    :host([size='sm']) { width: var(--fx-textarea-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-textarea-width-lg, 300px); }\n    :host([size='lg']) .field { min-height: calc(var(--fx-size-lg) + 80px); }\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  `;\n\n  static override get observedAttributes(): string[] {\n    return ['size', 'placeholder', 'disabled', 'readonly', 'rows', 'maxlength', '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(value: string) { this.setAttribute('size', value); }\n\n  get value(): string { return this.getAttr('value'); }\n  set value(value: string) {\n    this.setAttribute('value', value);\n    // `value` NÃO é observado (re-render perderia o foco): o campo interno é\n    // sincronizado aqui, sem re-render, preservando foco/cursor.\n    this.syncInternalControl();\n    this.updateFormValue();\n  }\n\n  protected override render(): void {\n    const placeholder = this.getAttr('placeholder');\n    const readonly = this.hasAttr('readonly');\n    const disabled = this.hasAttr('disabled');\n    const rows = this.getAttr('rows');\n    const maxlength = this.getAttr('maxlength');\n\n    this.setTemplate(`<textarea class=\"field\" part=\"textarea\"\n      ${placeholder ? `placeholder=\"${esc(placeholder)}\"` : ''}\n      ${rows ? `rows=\"${esc(rows)}\"` : ''}\n      ${maxlength ? `maxlength=\"${esc(maxlength)}\"` : ''}\n    ></textarea>`);\n\n    const field = this.root.querySelector<HTMLTextAreaElement>('.field');\n    if (!field) return;\n    field.value = this.getAttr('value');\n    if (disabled) field.setAttribute('disabled', '');\n    if (readonly) field.setAttribute('readonly', '');\n\n    const emit = (event: string): void => {\n      this.value = field.value;\n      // input (v-model do Vue) + valueChange ([(value)] do Angular).\n      this.emitValueEvents();\n      this.dispatchEvent(\n        new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } }),\n      );\n    };\n    // Bloqueia o evento nativo (composed, sem detail) para que só o\n    // CustomEvent com detail chegue aos consumidores.\n    field.addEventListener('input', (e) => { e.stopPropagation(); emit('input'); });\n    field.addEventListener('change', (e) => { e.stopPropagation(); emit('change'); });\n\n    // 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<HTMLTextAreaElement>('.field');\n    const value = this.getAttr('value');\n    if (field && field.value !== value) field.value = value;\n  }\n}\n\nexport function defineFxTextarea(): typeof FxTextarea {\n  return defineElement('fx-textarea', FxTextarea);\n}\n"],"names":[],"mappings":";;;;AAiBO,MAAM,cAAN,MAAM,oBAAmB,cAAc;AAAA,EAgE5C,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,eAAe,YAAY,YAAY,QAAQ,aAAa,SAAS,WAAW,WAAW,OAAO;AAAA,EACpH;AAAA,EAEA,IAAI,OAAe;AACjB,UAAM,IAAI,KAAK,QAAQ,QAAQ,IAAI;AACnC,WAAO,MAAM,QAAQ,MAAM,OAAO,IAAI;AAAA,EACxC;AAAA,EACA,IAAI,KAAK,OAAe;AAAE,SAAK,aAAa,QAAQ,KAAK;AAAA,EAAG;AAAA,EAE5D,IAAI,QAAgB;AAAE,WAAO,KAAK,QAAQ,OAAO;AAAA,EAAG;AAAA,EACpD,IAAI,MAAM,OAAe;AACvB,SAAK,aAAa,SAAS,KAAK;AAGhC,SAAK,oBAAA;AACL,SAAK,gBAAA;AAAA,EACP;AAAA,EAEmB,SAAe;AAChC,UAAM,cAAc,KAAK,QAAQ,aAAa;AAC9C,UAAM,WAAW,KAAK,QAAQ,UAAU;AACxC,UAAM,WAAW,KAAK,QAAQ,UAAU;AACxC,UAAM,OAAO,KAAK,QAAQ,MAAM;AAChC,UAAM,YAAY,KAAK,QAAQ,WAAW;AAE1C,SAAK,YAAY;AAAA,QACb,cAAc,gBAAgB,IAAI,WAAW,CAAC,MAAM,EAAE;AAAA,QACtD,OAAO,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;AAAA,QACjC,YAAY,cAAc,IAAI,SAAS,CAAC,MAAM,EAAE;AAAA,iBACvC;AAEb,UAAM,QAAQ,KAAK,KAAK,cAAmC,QAAQ;AACnE,QAAI,CAAC,MAAO;AACZ,UAAM,QAAQ,KAAK,QAAQ,OAAO;AAClC,QAAI,SAAU,OAAM,aAAa,YAAY,EAAE;AAC/C,QAAI,SAAU,OAAM,aAAa,YAAY,EAAE;AAE/C,UAAM,OAAO,CAAC,UAAwB;AACpC,WAAK,QAAQ,MAAM;AAEnB,WAAK,gBAAA;AACL,WAAK;AAAA,QACH,IAAI,YAAY,OAAO,EAAE,SAAS,MAAM,UAAU,MAAM,QAAQ,EAAE,OAAO,MAAM,MAAA,GAAS;AAAA,MAAA;AAAA,IAE5F;AAGA,UAAM,iBAAiB,SAAS,CAAC,MAAM;AAAE,QAAE,gBAAA;AAAmB,WAAK,OAAO;AAAA,IAAG,CAAC;AAC9E,UAAM,iBAAiB,UAAU,CAAC,MAAM;AAAE,QAAE,gBAAA;AAAmB,WAAK,QAAQ;AAAA,IAAG,CAAC;AAGhF,SAAK,gBAAA;AAAA,EACP;AAAA;AAAA,EAGmB,sBAA4B;AAC7C,UAAM,QAAQ,KAAK,KAAK,cAAmC,QAAQ;AACnE,UAAM,QAAQ,KAAK,QAAQ,OAAO;AAClC,QAAI,SAAS,MAAM,UAAU,aAAa,QAAQ;AAAA,EACpD;AACF;AA5HE,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;AA+HA,SAAS,mBAAsC;AACpD,SAAO,cAAc,eAAe,UAAU;AAChD;"}

package/dist/components/toast/toast.d.ts

@@ -17,14 +17,14 @@ export declare class FxToast extends HTMLElement {
     /**
      * Exibe a barra de contagem regressiva na base do card.
      *
-     * A barra esvazia da esquerda para a direita durante exatamente `duration`
-     * e usa a cor do `kind`. Com `duration="0"` (toast fixo) a barra é
-     * omitida — não há tempo restante a representar.
+     * A barra esvazia durante exatamente `duration` e usa a cor do `kind`.
+     * Com `duration="0"` (toast fixo) a barra é omitida — não há tempo restante.
      *
      * - `'always'` (ou atributo vazio): barra sempre correndo.
-     * - `'hover'`: a barra só corre enquanto o cursor estiver sobre o toast;
-     *   ao sair, a animação pausa, então dá tempo de ler a mensagem.
      * - `'paused'`: barra visível, porém parada.
+     * - `'hover'`: **compatibilidade** — equivale a `'always'`. O hover agora
+     *   pausa a contagem (timer + barra) em qualquer modo, então a barra "só
+     *   correr sob o cursor" deixou de fazer sentido.
      */
     get progress(): 'always' | 'hover' | 'paused' | undefined;
     set progress(value: 'always' | 'hover' | 'paused' | undefined);
@@ -47,6 +47,18 @@ export declare class FxToast extends HTMLElement {
     get mode(): 'light' | 'dark' | undefined;
     set mode(value: 'light' | 'dark' | undefined);
     private timer;
+    /** Tempo restante (ms) quando a contagem está pausada no hover/foco. */
+    private remaining;
+    /** Instante em que o timer atual começou (para descontar o tempo decorrido). */
+    private startedAt;
+    /** Cursor sobre o toast: não retoma a contagem no focusout. */
+    private hovering;
+    /** Já saiu do DOM — impede retomar a contagem. */
+    private disposed;
+    /** Existe contagem regressiva (duration > 0) — toasts fixos nunca retomam. */
+    private counting;
+    /** Listeners de pausa/retomada registrados uma única vez. */
+    private wired;
     constructor();
     connectedCallback(): void;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,kGAGL,CAAC;AACX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AACvD,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAoI1D,qBAAa,OAAQ,SAAQ,WAAW;;IACtC,MAAM,KAAK,kBAAkB,aAE5B;IAED;;;;;;;;;;;OAWG;IACH,IAAI,QAAQ,IAAI,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAIxD;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,EAG5D;IAED;;;;;;;;;;OAUG;IACH,IAAI,cAAc,IAAI,MAAM,GAAG,OAAO,CAErC;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,EAEzC;IAED,oEAAoE;IACpE,OAAO,KAAK,YAAY,GAIvB;IAED,qFAAqF;IACrF,IAAI,IAAI,IAAI,OAAO,GAAG,MAAM,GAAG,SAAS,CAGvC;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,EAG3C;IAED,OAAO,CAAC,KAAK,CAA8C;;IAO3D,iBAAiB;IAWjB;;;;;;;OAOG;IACH,oBAAoB;IAMpB,wBAAwB,CAAC,IAAI,EAAE,MAAM;IA6CrC,OAAO;CAqCR;AA8BD,MAAM,WAAW,YAAY;IAC3B,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACzC;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED,cAAM,QAAQ;IACZ,OAAO,CAAC,GAAG,CAAK;IAChB,OAAO,CAAC,GAAG,CAA8B;IAEzC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,YAAY,EAAE,IAAI,CAAC,EAAE,YAAY,GAAG,MAAM;IA0BxG,KAAK,CAAC,EAAE,EAAE,MAAM;IAKhB,OAAO,GAAI,GAAG,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,YAAY,YAAmC;IACrF,KAAK,GAAI,GAAG,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,YAAY,YAAiC;IACjF,IAAI,GAAI,GAAG,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,YAAY,YAAgC;IAC/E,OAAO,GAAI,GAAG,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,YAAY,YAAmC;CACtF;AAED,eAAO,MAAM,UAAU,UAAiB,CAAC;AAIzC,wBAAgB,aAAa,SAE5B"}
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,kGAGL,CAAC;AACX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AACvD,KAAK,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AA2K1D,qBAAa,OAAQ,SAAQ,WAAW;;IACtC,MAAM,KAAK,kBAAkB,aAE5B;IAED;;;;;;;;;;;OAWG;IACH,IAAI,QAAQ,IAAI,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAIxD;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,EAG5D;IAED;;;;;;;;;;OAUG;IACH,IAAI,cAAc,IAAI,MAAM,GAAG,OAAO,CAErC;IACD,IAAI,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,EAEzC;IAED,oEAAoE;IACpE,OAAO,KAAK,YAAY,GAIvB;IAED,qFAAqF;IACrF,IAAI,IAAI,IAAI,OAAO,GAAG,MAAM,GAAG,SAAS,CAGvC;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,EAG3C;IAED,OAAO,CAAC,KAAK,CAA8C;IAC3D,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAAK;IACtB,gFAAgF;IAChF,OAAO,CAAC,SAAS,CAAK;IACtB,+DAA+D;IAC/D,OAAO,CAAC,QAAQ,CAAS;IACzB,kDAAkD;IAClD,OAAO,CAAC,QAAQ,CAAS;IACzB,8EAA8E;IAC9E,OAAO,CAAC,QAAQ,CAAS;IACzB,6DAA6D;IAC7D,OAAO,CAAC,KAAK,CAAS;;IAOtB,iBAAiB;IA8DjB;;;;;;;OAOG;IACH,oBAAoB;IAOpB,wBAAwB,CAAC,IAAI,EAAE,MAAM;IAsDrC,OAAO;CAqFR;AA8BD,MAAM,WAAW,YAAY;IAC3B,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACzC;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAClC,0EAA0E;IAC1E,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED,cAAM,QAAQ;IACZ,OAAO,CAAC,GAAG,CAAK;IAChB,OAAO,CAAC,GAAG,CAA8B;IAEzC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,MAAM,GAAG,YAAY,EAAE,IAAI,CAAC,EAAE,YAAY,GAAG,MAAM;IA0BxG,KAAK,CAAC,EAAE,EAAE,MAAM;IAKhB,OAAO,GAAI,GAAG,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,YAAY,YAAmC;IACrF,KAAK,GAAI,GAAG,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,YAAY,YAAiC;IACjF,IAAI,GAAI,GAAG,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,YAAY,YAAgC;IAC/E,OAAO,GAAI,GAAG,MAAM,EAAE,IAAI,MAAM,EAAE,IAAI,YAAY,YAAmC;CACtF;AAED,eAAO,MAAM,UAAU,UAAiB,CAAC;AAIzC,wBAAgB,aAAa,SAE5B"}

package/dist/components/toast/toast.js

@@ -4,7 +4,7 @@ var __typeError = (msg) => {
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _FxToast_instances, syncProgress_fn, render_fn;
+var _FxToast_instances, wirePause_fn, startTimer_fn, pauseTimer_fn, resumeTimer_fn, syncProgress_fn, render_fn, syncMore_fn;
 import { __fenixPreload } from "../../_virtual/preload-helper.js";
 const REMOVED_EVENT = "fx-toast:removed";
 const KIND_COLOR = {
@@ -19,6 +19,7 @@ const KIND_ICON = {
   warning: "!",
   info: "i"
 };
+const COPY_SVG = '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="12" height="12" rx="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
 const CARD_CSS = `
 :host { display: contents; pointer-events: auto; }
 /* Modo explícito: sobrepõe os tokens herdados do tema global SOMENTE neste card. */
@@ -52,8 +53,11 @@ const CARD_CSS = `
   user-select: none;
 }
 .card {
-  display: flex; align-items: flex-start; gap: 10px;
+  display: flex; align-items: center; gap: 10px;
   min-width: 260px; max-width: 360px;
+  /* Altura mínima idêntica à de um toast COM título: sem título o card não
+     fica "achatado" e o conjunto mantém o mesmo ritmo visual. */
+  min-height: 56px;
   background: var(--fx-surface-background, #fff);
   color: var(--fx-text-default, #1e293b);
   border: 1px solid var(--fx-border-default, #e2e8f0);
@@ -72,16 +76,45 @@ const CARD_CSS = `
   color: #fff;
   display: flex; align-items: center; justify-content: center;
   font-size: 12px; font-weight: 700;
-  flex: none; margin-top: 2px;
+  flex: none; align-self: center;
   user-select: none;
 }
-.body { flex: 1; min-width: 0; }
+.body { flex: 1; min-width: 0; align-self: center; }
 .title { font-weight: 600; font-size: 14px; }
-.msg { font-size: calc(var(--fx-font-size, 14px) - 2px); color: var(--fx-text-muted, #64748b); margin-top: 2px; word-break: break-word; white-space: pre-line; }
-.close {
+.msg {
+  font-size: calc(var(--fx-font-size, 14px) - 2px);
+  color: var(--fx-text-muted, #64748b);
+  margin-top: 2px;
+  word-break: break-word; white-space: pre-line;
+  /* Mensagens longas mantêm o card no tamanho padrão e terminam em "…";
+     "Ver mais" expande o toast (sem perder o restante do texto). */
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
+  line-clamp: 2; overflow: hidden;
+}
+.card.expanded .msg {
+  display: block; overflow: visible;
+  -webkit-line-clamp: unset; line-clamp: unset;
+}
+.more {
+  all: unset; cursor: pointer; display: inline-block;
+  margin-top: 4px; padding: 2px 0;
+  font-size: 11px; font-weight: 600; color: var(--kind);
+}
+.more[hidden] { display: none; }
+.more:hover { text-decoration: underline; }
+.actions {
+  display: flex; align-items: center; gap: 2px;
+  flex: none; align-self: flex-start;
+}
+.copy, .close {
   all: unset; cursor: pointer; flex: none; line-height: 1;
   color: var(--fx-text-muted, #64748b); font-size: 15px; padding: 2px 4px; border-radius: 4px;
 }
+.copy[hidden] { display: none; }
+.copy { font-size: 14px; display: inline-flex; align-items: center; }
+.copy svg { display: block; }
+.copy.done { color: var(--fx-color-success, #10b981); }
+.copy:hover { color: var(--fx-color-primary, #6366f1); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }
 .close:hover { color: var(--fx-color-danger, #f43f5e); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }
 
 /* --- Barra de contagem regressiva (atributo progress) ---
@@ -110,9 +143,12 @@ const CARD_CSS = `
   will-change: transform;
 }
 .progress.run { animation: fx-toast-drain var(--toast-duration, 4000ms) linear forwards; }
-/* No modo hover a animação fica parada até o cursor/foco entrar no card. */
+/* Passar o mouse (ou focar) no toast pausa a contagem: a barra e o timer
+   congelam juntos até o cursor sair — tempo de ler a mensagem inteira.
+   progress="hover" é mantido por compatibilidade e se comporta como
+   "always" (o hover já pausa a contagem). */
 .card:hover .progress.run,
-.card:focus-within .progress.run { animation-play-state: running; }
+.card:focus-within .progress.run { animation-play-state: paused; }
 @keyframes fx-toast-drain {
   from { transform: scaleX(1); }
   to   { transform: scaleX(0); }
@@ -131,6 +167,12 @@ class FxToast extends HTMLElement {
     super();
     __privateAdd(this, _FxToast_instances);
     this.timer = null;
+    this.remaining = 0;
+    this.startedAt = 0;
+    this.hovering = false;
+    this.disposed = false;
+    this.counting = false;
+    this.wired = false;
     this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
@@ -139,19 +181,19 @@ class FxToast extends HTMLElement {
   /**
    * Exibe a barra de contagem regressiva na base do card.
    *
-   * A barra esvazia da esquerda para a direita durante exatamente `duration`
-   * e usa a cor do `kind`. Com `duration="0"` (toast fixo) a barra é
-   * omitida — não há tempo restante a representar.
+   * A barra esvazia durante exatamente `duration` e usa a cor do `kind`.
+   * Com `duration="0"` (toast fixo) a barra é omitida — não há tempo restante.
    *
    * - `'always'` (ou atributo vazio): barra sempre correndo.
-   * - `'hover'`: a barra só corre enquanto o cursor estiver sobre o toast;
-   *   ao sair, a animação pausa, então dá tempo de ler a mensagem.
    * - `'paused'`: barra visível, porém parada.
+   * - `'hover'`: **compatibilidade** — equivale a `'always'`. O hover agora
+   *   pausa a contagem (timer + barra) em qualquer modo, então a barra "só
+   *   correr sob o cursor" deixou de fazer sentido.
    */
   get progress() {
     if (!this.hasAttribute("progress")) return void 0;
     const v = this.getAttribute("progress");
-    return v === "hover" || v === "paused" ? v : "always";
+    return v === "paused" ? "paused" : "always";
   }
   set progress(value) {
     if (value) this.setAttribute("progress", value);
@@ -191,11 +233,13 @@ class FxToast extends HTMLElement {
   }
   connectedCallback() {
     if (!this.shadowRoot.firstChild) __privateMethod(this, _FxToast_instances, render_fn).call(this);
+    this.disposed = false;
+    __privateMethod(this, _FxToast_instances, wirePause_fn).call(this);
     const safe = this.safeDuration;
-    if (safe > 0 && !this.timer) {
-      this.timer = setTimeout(() => this.dismiss(), safe);
-    }
+    this.counting = safe > 0;
+    if (safe > 0 && !this.timer) __privateMethod(this, _FxToast_instances, startTimer_fn).call(this, safe);
     __privateMethod(this, _FxToast_instances, syncProgress_fn).call(this);
+    __privateMethod(this, _FxToast_instances, syncMore_fn).call(this);
   }
   /**
    * Limpa recursos ao sair do DOM e avisa a API imperativa (`FenixToast`).
@@ -206,11 +250,21 @@ class FxToast extends HTMLElement {
    * sem limite em uso prolongado.
    */
   disconnectedCallback() {
+    this.disposed = true;
     if (this.timer) clearTimeout(this.timer);
     this.timer = null;
     this.dispatchEvent(new CustomEvent(REMOVED_EVENT, { bubbles: false, composed: false }));
   }
   attributeChangedCallback(name) {
+    if (name === "duration") {
+      if (this.timer) {
+        clearTimeout(this.timer);
+        this.timer = null;
+      }
+      const safe = this.safeDuration;
+      this.counting = safe > 0;
+      if (safe > 0 && this.isConnected && !this.disposed) __privateMethod(this, _FxToast_instances, startTimer_fn).call(this, safe);
+    }
     if (name === "duration" || name === "progress" || name === "progress-origin" || name === "kind") {
       __privateMethod(this, _FxToast_instances, syncProgress_fn).call(this);
     }
@@ -228,6 +282,49 @@ class FxToast extends HTMLElement {
   }
 }
 _FxToast_instances = new WeakSet();
+/**
+ * Pausa a contagem enquanto o cursor (ou o foco) estiver no toast e retoma
+ * de onde parou ao sair — assim uma mensagem longa pode ser lida inteira.
+ * A barra de progresso pausa junto (regra CSS de :hover/:focus-within).
+ */
+wirePause_fn = function() {
+  if (this.wired) return;
+  this.wired = true;
+  this.addEventListener("mouseenter", () => {
+    this.hovering = true;
+    __privateMethod(this, _FxToast_instances, pauseTimer_fn).call(this);
+  });
+  this.addEventListener("mouseleave", () => {
+    this.hovering = false;
+    __privateMethod(this, _FxToast_instances, resumeTimer_fn).call(this);
+  });
+  this.addEventListener("focusin", () => __privateMethod(this, _FxToast_instances, pauseTimer_fn).call(this));
+  this.addEventListener("focusout", () => {
+    if (!this.hovering) __privateMethod(this, _FxToast_instances, resumeTimer_fn).call(this);
+  });
+};
+startTimer_fn = function(ms) {
+  this.remaining = ms;
+  this.startedAt = Date.now();
+  this.timer = setTimeout(() => {
+    this.timer = null;
+    this.dismiss();
+  }, ms);
+};
+pauseTimer_fn = function() {
+  if (!this.timer) return;
+  clearTimeout(this.timer);
+  this.timer = null;
+  this.remaining = Math.max(0, this.remaining - (Date.now() - this.startedAt));
+};
+resumeTimer_fn = function() {
+  if (!this.counting || this.timer || this.disposed) return;
+  if (this.remaining <= 0) {
+    this.dismiss();
+    return;
+  }
+  __privateMethod(this, _FxToast_instances, startTimer_fn).call(this, this.remaining);
+};
 /**
  * Aplica (ou remove) a barra de contagem regressiva.
  *
@@ -272,17 +369,60 @@ render_fn = function() {
       <div class="card" style="--kind:${color}" role="status" part="card">
         <span class="icon${isFxIcon ? " fx-icon" : ""}">${iconContent}</span>
         <div class="body">
-          ${title ? '<div class="title"></div>' : ""}
-          ${msg ? '<div class="msg"></div>' : ""}
+          ${title ? '<div class="title" part="title"></div>' : ""}
+          ${msg ? '<div class="msg" part="message"></div>' : ""}
+          ${msg ? '<button class="more" part="more" hidden>Ver mais</button>' : ""}
+        </div>
+        <div class="actions">
+          ${msg ? `<button class="copy" part="copy" hidden aria-label="Copiar mensagem" title="Copiar mensagem">${COPY_SVG}</button>` : ""}
+          <button class="close" aria-label="Fechar" title="Fechar">✕</button>
         </div>
-        <button class="close" aria-label="Fechar">✕</button>
       </div>`;
   const t = this.shadowRoot.querySelector(".title");
   const m = this.shadowRoot.querySelector(".msg");
   if (t) t.textContent = title;
-  if (m) m.textContent = msg;
+  if (m) {
+    m.textContent = msg;
+    m.title = msg;
+  }
+  const card = this.shadowRoot.querySelector(".card");
+  const more = this.shadowRoot.querySelector(".more");
+  const copy = this.shadowRoot.querySelector(".copy");
+  more?.addEventListener("click", () => {
+    const expanded = card.classList.toggle("expanded");
+    more.textContent = expanded ? "Ver menos" : "Ver mais";
+    if (copy) copy.hidden = !expanded;
+    if (expanded) __privateMethod(this, _FxToast_instances, pauseTimer_fn).call(this);
+  });
+  copy?.addEventListener("click", (e) => {
+    const btn = e.currentTarget;
+    const text = [title, msg].filter(Boolean).join("\n");
+    navigator.clipboard?.writeText(text).catch(() => {
+    });
+    btn.classList.add("done");
+    btn.title = "Copiado!";
+    setTimeout(() => {
+      btn.classList.remove("done");
+      btn.title = "Copiar mensagem";
+    }, 1200);
+  });
   this.shadowRoot.querySelector(".close").addEventListener("click", () => this.dismiss());
 };
+/**
+ * Mostra "Ver mais" somente quando a mensagem passou de 2 linhas.
+ * Sem layout (jsdom) scrollHeight/clientHeight são 0 → fica oculto.
+ */
+syncMore_fn = function() {
+  const card = this.shadowRoot?.querySelector(".card");
+  const more = this.shadowRoot?.querySelector(".more");
+  const msg = this.shadowRoot?.querySelector(".msg");
+  if (!card || !more || !msg) return;
+  if (card.classList.contains("expanded")) {
+    more.hidden = false;
+    return;
+  }
+  more.hidden = !(msg.scrollHeight - msg.clientHeight > 1);
+};
 function regionFor(position) {
   let region = document.querySelector(`[data-fx-toast-region="${position}"]`);
   if (!region) {