@wrrdev/fenix-ui 1.0.0

package/dist/components/tabs/tabs.js

@@ -0,0 +1,162 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxTabs = class _FxTabs extends FxElement {
+  static get observedAttributes() {
+    return ["value"];
+  }
+  get value() {
+    return this.getAttr("value");
+  }
+  set value(value) {
+    this.setAttribute("value", value);
+  }
+  render() {
+    const tabs = Array.from(this.querySelectorAll("fx-tab"));
+    const active = this.value || tabs[0]?.getAttribute("tab") || "";
+    this.setTemplate(`
+      <div class="list" role="tablist">
+        ${tabs.map((t) => {
+      const tabId = t.getAttribute("tab") ?? "";
+      const disabled = t.hasAttribute("disabled");
+      return `<button type="button" class="tab" role="tab" part="tab"
+            data-tab="${tabId}" aria-selected="${tabId === active}"
+            ${disabled ? 'aria-disabled="true" data-disabled="true"' : ""}>${t.textContent?.trim()}</button>`;
+    }).join("")}
+      </div>
+      <slot></slot>
+    `);
+    this.panels.forEach((p) => {
+      const show = p.getAttribute("tab") === active;
+      if (show) p.removeAttribute("hidden");
+      else p.setAttribute("hidden", "");
+    });
+    this.root.querySelectorAll(".tab").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        if (btn.hasAttribute("data-disabled")) return;
+        this.value = btn.dataset.tab ?? "";
+        this.dispatchEvent(
+          new CustomEvent("change", { bubbles: true, composed: true, detail: { value: this.value } })
+        );
+      });
+    });
+  }
+  /** Painéis associados: descendentes do host ou irmãos seguintes no DOM. */
+  get panels() {
+    const inside = Array.from(this.querySelectorAll("fx-tab-panel"));
+    if (inside.length) return inside;
+    const out = [];
+    let el = this.nextElementSibling;
+    while (el && !el.matches("fx-tabs")) {
+      if (el.matches("fx-tab-panel")) out.push(el);
+      else out.push(...Array.from(el.querySelectorAll(":scope > fx-tab-panel")));
+      el = el.nextElementSibling;
+    }
+    return out;
+  }
+};
+_FxTabs.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+    }
+    .list {
+      display: flex;
+      gap: var(--fx-space-xs);
+      border-bottom: 2px solid var(--fx-border-default);
+    }
+    .tab {
+      border: none;
+      background: transparent;
+      font-family: inherit;
+      font-size: var(--fx-font-size);
+      color: var(--fx-text-muted);
+      padding: var(--fx-space-md) var(--fx-space-lg);
+      cursor: pointer;
+      position: relative;
+      transition: color var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .tab::after {
+      content: '';
+      position: absolute;
+      left: 0; right: 0; bottom: -2px;
+      height: 2px;
+      background: transparent;
+      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .tab:hover { color: var(--fx-text-default); }
+    .tab[data-disabled] {
+      color: var(--fx-border-default);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+    .tab[data-disabled]:hover { color: var(--fx-border-default); }
+    .tab[aria-selected='true'] {
+      color: var(--fx-color-primary);
+      font-weight: 600;
+    }
+    .tab[aria-selected='true']::after { background: var(--fx-color-primary); }
+    .tab:focus-visible {
+      outline: none;
+      box-shadow: var(--fx-effect-focus-ring, none);
+      border-radius: var(--fx-radius-sm);
+    }
+    /* Os <fx-tab> originais são renderizados como botões no shadow DOM.
+       Sem isto, o <slot> os projetaria de novo como texto cru abaixo das abas. */
+    ::slotted(fx-tab) {
+      display: none !important;
+    }
+  `;
+let FxTabs = _FxTabs;
+const _FxTabPanel = class _FxTabPanel extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._initialized = false;
+  }
+  static get observedAttributes() {
+    return ["tab"];
+  }
+  get tab() {
+    return this.getAttr("tab");
+  }
+  get visible() {
+    return !this.hasAttr("hidden");
+  }
+  set visible(value) {
+    this.toggleAttr("hidden", !value);
+  }
+  render() {
+    this.setTemplate("<slot></slot>");
+    if (!this._initialized) {
+      const owner = this.closest("fx-tabs") ?? (() => {
+        let el = this.previousElementSibling;
+        while (el) {
+          if (el.matches("fx-tabs")) return el;
+          el = el.previousElementSibling;
+        }
+        return null;
+      })();
+      const active = owner ? owner.getAttribute("value") || "" : "";
+      if (this.getAttribute("tab") !== active) this.setAttribute("hidden", "");
+      this._initialized = true;
+    }
+  }
+};
+_FxTabPanel.styles = css`
+    :host { display: block; padding: var(--fx-space-lg) 0; font-family: var(--fx-font-family); color: var(--fx-text-default); }
+    :host([hidden]) { display: none; }
+  `;
+let FxTabPanel = _FxTabPanel;
+function defineFxTabs() {
+  return defineElement("fx-tabs", FxTabs);
+}
+function defineFxTabPanel() {
+  return defineElement("fx-tab-panel", FxTabPanel);
+}
+export {
+  FxTabPanel,
+  FxTabs,
+  defineFxTabPanel,
+  defineFxTabs
+};
+//# sourceMappingURL=tabs.js.map

package/dist/components/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../src/components/tabs/tabs.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-tabs> — Navegação por abas.\n *\n * Atributos: value (aba ativa, corresponde ao attr `tab` de cada fx-tab-panel).\n * Uso:\n *   <fx-tabs value=\"a\">\n *     <fx-tab tab=\"a\">Aba A</fx-tab>\n *     <fx-tab tab=\"b\">Aba B</fx-tab>\n *   </fx-tabs>\n *   <fx-tab-panel tab=\"a\">…</fx-tab-panel>\n *   <fx-tab-panel tab=\"b\">…</fx-tab-panel>\n * Evento: `change` (composed, detail: { value }).\n */\nexport class FxTabs extends FxElement {\n  static override styles = css`\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n    }\n    .list {\n      display: flex;\n      gap: var(--fx-space-xs);\n      border-bottom: 2px solid var(--fx-border-default);\n    }\n    .tab {\n      border: none;\n      background: transparent;\n      font-family: inherit;\n      font-size: var(--fx-font-size);\n      color: var(--fx-text-muted);\n      padding: var(--fx-space-md) var(--fx-space-lg);\n      cursor: pointer;\n      position: relative;\n      transition: color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .tab::after {\n      content: '';\n      position: absolute;\n      left: 0; right: 0; bottom: -2px;\n      height: 2px;\n      background: transparent;\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .tab:hover { color: var(--fx-text-default); }\n    .tab[data-disabled] {\n      color: var(--fx-border-default);\n      cursor: not-allowed;\n      opacity: 0.6;\n    }\n    .tab[data-disabled]:hover { color: var(--fx-border-default); }\n    .tab[aria-selected='true'] {\n      color: var(--fx-color-primary);\n      font-weight: 600;\n    }\n    .tab[aria-selected='true']::after { background: var(--fx-color-primary); }\n    .tab:focus-visible {\n      outline: none;\n      box-shadow: var(--fx-effect-focus-ring, none);\n      border-radius: var(--fx-radius-sm);\n    }\n    /* Os <fx-tab> originais são renderizados como botões no shadow DOM.\n       Sem isto, o <slot> os projetaria de novo como texto cru abaixo das abas. */\n    ::slotted(fx-tab) {\n      display: none !important;\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['value'];\n  }\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 tabs = Array.from(this.querySelectorAll<HTMLElement>('fx-tab'));\n    const active = this.value || tabs[0]?.getAttribute('tab') || '';\n\n    this.setTemplate(`\n      <div class=\"list\" role=\"tablist\">\n        ${tabs.map((t) => {\n          const tabId = t.getAttribute('tab') ?? '';\n          const disabled = t.hasAttribute('disabled');\n          return `<button type=\"button\" class=\"tab\" role=\"tab\" part=\"tab\"\n            data-tab=\"${tabId}\" aria-selected=\"${tabId === active}\"\n            ${disabled ? 'aria-disabled=\"true\" data-disabled=\"true\"' : ''}>${t.textContent?.trim()}</button>`;\n        }).join('')}\n      </div>\n      <slot></slot>\n    `);\n\n    // Sincroniza apenas os painéis DESTE conjunto de abas\n    // (dentro do host ou irmãos seguintes — nunca global).\n    // IMPORTANTE: manipula o atributo `hidden` DIRETAMENTE (nunca a\n    // propriedade `.visible`), porque escrever a propriedade em um\n    // elemento ainda não upgradeado cria uma own property que faz\n    // shadowing dos accessors do prototype para sempre.\n    this.panels.forEach((p) => {\n      const show = p.getAttribute('tab') === active;\n      if (show) p.removeAttribute('hidden');\n      else p.setAttribute('hidden', '');\n    });\n\n    this.root.querySelectorAll<HTMLButtonElement>('.tab').forEach((btn) => {\n      btn.addEventListener('click', () => {\n        if (btn.hasAttribute('data-disabled')) return;\n        this.value = btn.dataset.tab ?? '';\n        this.dispatchEvent(\n          new CustomEvent('change', { bubbles: true, composed: true, detail: { value: this.value } }),\n        );\n      });\n    });\n  }\n\n  /** Painéis associados: descendentes do host ou irmãos seguintes no DOM. */\n  private get panels(): FxTabPanel[] {\n    const inside = Array.from(this.querySelectorAll<FxTabPanel>('fx-tab-panel'));\n    if (inside.length) return inside;\n    const out: FxTabPanel[] = [];\n    let el = this.nextElementSibling;\n    while (el && !el.matches('fx-tabs')) {\n      if (el.matches('fx-tab-panel')) out.push(el as FxTabPanel);\n      else out.push(...Array.from(el.querySelectorAll<FxTabPanel>(':scope > fx-tab-panel')));\n      el = el.nextElementSibling;\n    }\n    return out;\n  }\n}\n\n/**\n * <fx-tab-panel> — Painel de conteúdo associado a uma aba.\n */\nexport class FxTabPanel extends FxElement {\n  static override styles = css`\n    :host { display: block; padding: var(--fx-space-lg) 0; font-family: var(--fx-font-family); color: var(--fx-text-default); }\n    :host([hidden]) { display: none; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['tab'];\n  }\n\n  get tab(): string { return this.getAttr('tab'); }\n\n  get visible(): boolean { return !this.hasAttr('hidden'); }\n  set visible(value: boolean) { this.toggleAttr('hidden', !value); }\n\n  protected override render(): void {\n    this.setTemplate('<slot></slot>');\n    if (!this._initialized) {\n      // Estado inicial: visível apenas se for a aba ativa do owner.\n      // (usa atributo direto — ver comentário em FxTabs.render)\n      const owner =\n        (this.closest<FxTabs>('fx-tabs')) ??\n        (() => {\n          let el = this.previousElementSibling;\n          while (el) {\n            if (el.matches('fx-tabs')) return el as FxTabs;\n            el = el.previousElementSibling;\n          }\n          return null;\n        })();\n      const active = owner ? (owner.getAttribute('value') || '') : '';\n      if (this.getAttribute('tab') !== active) this.setAttribute('hidden', '');\n      this._initialized = true;\n    }\n  }\n\n  private _initialized = false;\n}\n\nexport function defineFxTabs(): typeof FxTabs {\n  return defineElement('fx-tabs', FxTabs);\n}\nexport function defineFxTabPanel(): typeof FxTabPanel {\n  return defineElement('fx-tab-panel', FxTabPanel);\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { FxTextarea } from './textarea';
+export { FxTextarea };
+declare global {
+    interface HTMLElementTagNameMap {
+        'fx-textarea': FxTextarea;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAoB,MAAM,YAAY,CAAC;AAG1D,OAAO,EAAE,UAAU,EAAE,CAAC;AAOtB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/textarea/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/textarea/index.ts"],"sourcesContent":["import { FxTextarea, defineFxTextarea } from './textarea';\n\n// Reexporta a classe para uso programático (ex.: instanceof, herança).\nexport { FxTextarea };\n\n\n// Auto-registro: basta importar o subpath `@wrrdev/fenix-ui/textarea`\n// para que o componente seja definido no CustomElementRegistry.\ndefineFxTextarea();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-textarea': FxTextarea;\n  }\n}\n\r\n\r\n"],"names":[],"mappings":";;AAQA,iBAAA;"}

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

@@ -0,0 +1,19 @@
+import { FxElement } from '../../core/base';
+/**
+ * <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 }).
+ */
+export declare class FxTextarea extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get size(): string;
+    set size(value: string);
+    get value(): string;
+    set value(value: string);
+    protected render(): void;
+}
+export declare function defineFxTextarea(): typeof FxTextarea;
+//# sourceMappingURL=textarea.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SA+CpB;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"}

package/dist/components/textarea/textarea.js

@@ -0,0 +1,109 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxTextarea = class _FxTextarea extends FxElement {
+  static get observedAttributes() {
+    return ["size", "placeholder", "disabled", "readonly", "rows", "maxlength"];
+  }
+  get size() {
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
+  }
+  set size(value) {
+    this.setAttribute("size", value);
+  }
+  get value() {
+    return this.getAttr("value");
+  }
+  set value(value) {
+    this.setAttribute("value", value);
+  }
+  render() {
+    const placeholder = this.getAttr("placeholder");
+    const readonly = this.hasAttr("readonly");
+    const disabled = this.hasAttr("disabled");
+    const rows = this.getAttr("rows");
+    const maxlength = this.getAttr("maxlength");
+    this.setTemplate(`<textarea class="field" part="textarea"
+      ${placeholder ? `placeholder="${placeholder}"` : ""}
+      ${rows ? `rows="${rows}"` : ""}
+      ${maxlength ? `maxlength="${maxlength}"` : ""}
+    ></textarea>`);
+    const field = this.root.querySelector(".field");
+    if (!field) return;
+    field.value = this.getAttr("value");
+    if (disabled) field.setAttribute("disabled", "");
+    if (readonly) field.setAttribute("readonly", "");
+    const emit = (event) => {
+      this.value = field.value;
+      this.dispatchEvent(
+        new CustomEvent(event, { bubbles: true, composed: true, detail: { value: field.value } })
+      );
+    };
+    field.addEventListener("input", (e) => {
+      e.stopPropagation();
+      emit("input");
+    });
+    field.addEventListener("change", (e) => {
+      e.stopPropagation();
+      emit("change");
+    });
+  }
+};
+_FxTextarea.styles = css`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    .field {
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: var(--fx-font-weight);
+      color: var(--fx-text-default);
+      background-color: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-md);
+      padding: var(--fx-space-md) var(--fx-space-lg);
+      width: 260px;
+      min-height: calc(var(--fx-size-md) + 40px);
+      resize: vertical;
+      box-sizing: border-box;
+      transition:
+        border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),
+        box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    .field::placeholder { color: var(--fx-text-muted); opacity: 1; }
+    .field:hover { border-color: var(--fx-border-hover); }
+    .field:focus-visible {
+      outline: none;
+      border-color: var(--fx-color-primary);
+      box-shadow: var(--fx-effect-focus-ring, none);
+    }
+    .field:disabled,
+    .field[readonly] {
+      opacity: 0.55;
+      cursor: not-allowed;
+      background-color: var(--fx-surface-surface-hover);
+    }
+    :host([error]) .field, :host([invalid]) .field {
+      border-color: var(--fx-color-danger, #dc2626);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);
+    }
+    :host([success]) .field, :host([valid]) .field {
+      border-color: var(--fx-color-success, #16a34a);
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);
+    }
+    :host([size='sm']) .field { width: 220px; min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }
+    :host([size='lg']) .field { width: 300px; min-height: calc(var(--fx-size-lg) + 80px); }
+  `;
+let FxTextarea = _FxTextarea;
+function defineFxTextarea() {
+  return defineElement("fx-textarea", FxTextarea);
+}
+export {
+  FxTextarea,
+  defineFxTextarea
+};
+//# sourceMappingURL=textarea.js.map

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

@@ -0,0 +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';\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      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      font-weight: var(--fx-font-weight);\n      color: var(--fx-text-default);\n      background-color: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-md);\n      padding: var(--fx-space-md) var(--fx-space-lg);\n      width: 260px;\n      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    :host([error]) .field, :host([invalid]) .field {\n      border-color: var(--fx-color-danger, #dc2626);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent);\n    }\n    :host([success]) .field, :host([valid]) .field {\n      border-color: var(--fx-color-success, #16a34a);\n      box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent);\n    }\n    :host([size='sm']) .field { width: 220px; min-height: var(--fx-size-sm); padding: var(--fx-space-sm) var(--fx-space-md); }\n    :host([size='lg']) .field { width: 300px; min-height: calc(var(--fx-size-lg) + 80px); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['size', 'placeholder', 'disabled', 'readonly', 'rows', 'maxlength'];\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=\"${placeholder}\"` : ''}\n      ${rows ? `rows=\"${rows}\"` : ''}\n      ${maxlength ? `maxlength=\"${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":";;;AAWO,MAAM,cAAN,MAAM,oBAAmB,UAAU;AAAA,EAkDxC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,QAAQ,eAAe,YAAY,YAAY,QAAQ,WAAW;AAAA,EAC5E;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,WAAW,MAAM,EAAE;AAAA,QACjD,OAAO,SAAS,IAAI,MAAM,EAAE;AAAA,QAC5B,YAAY,cAAc,SAAS,MAAM,EAAE;AAAA,iBAClC;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;AA5FE,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;AADpB,IAAM,aAAN;AA+FA,SAAS,mBAAsC;AACpD,SAAO,cAAc,eAAe,UAAU;AAChD;"}

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

@@ -0,0 +1,8 @@
+import { FxToast, FenixToast } from './toast';
+export { FxToast, FenixToast };
+declare global {
+    interface HTMLElementTagNameMap {
+        'fx-toast': FxToast;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAiB,MAAM,SAAS,CAAC;AAE7D,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;AAK/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/toast/index.js

@@ -0,0 +1,8 @@
+import { defineFxToast } from "./toast.js";
+import { FenixToast, FxToast } from "./toast.js";
+defineFxToast();
+export {
+  FenixToast,
+  FxToast
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/toast/index.ts"],"sourcesContent":["import { FxToast, FenixToast, defineFxToast } from './toast';\n\nexport { FxToast, FenixToast };\n\n\ndefineFxToast();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-toast': FxToast;\n  }\n}\n\r\n\r\n"],"names":[],"mappings":";;AAKA,cAAA;"}

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

@@ -0,0 +1,40 @@
+/**
+ * <fx-toast> — notificações imperativas com posição e duração configuráveis.
+ *
+ * Atributos: kind (success|error|info|warning), title, message,
+ * position (top-left|top-center|top-right|bottom-left|bottom-center|bottom-right),
+ * duration (ms; 0 = fixo até fechar).
+ */
+declare const POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+export type ToastPosition = (typeof POSITIONS)[number];
+type ToastKind = 'success' | 'error' | 'info' | 'warning';
+export declare class FxToast extends HTMLElement {
+    #private;
+    static get observedAttributes(): string[];
+    private timer;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    dismiss(): void;
+}
+export interface ToastOptions {
+    /** Texto secundário (também aceito como 2º argumento dos métodos). */
+    message?: string;
+    position?: ToastPosition;
+    /** Tempo em ms até sumir. 0 = fixo até fechar. Padrão: 4000 */
+    duration?: number;
+}
+declare class ToastApi {
+    private seq;
+    private map;
+    push(kind: ToastKind, title: string, messageOrOpts?: string | ToastOptions, opts?: ToastOptions): number;
+    close(id: number): void;
+    success: (t: string, m?: string, o?: ToastOptions) => number;
+    error: (t: string, m?: string, o?: ToastOptions) => number;
+    info: (t: string, m?: string, o?: ToastOptions) => number;
+    warning: (t: string, m?: string, o?: ToastOptions) => number;
+}
+export declare const FenixToast: ToastApi;
+export declare function defineFxToast(): void;
+export {};
+//# sourceMappingURL=toast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../../../src/components/toast/toast.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;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;AAqD1D,qBAAa,OAAQ,SAAQ,WAAW;;IACtC,MAAM,KAAK,kBAAkB,aAE5B;IAED,OAAO,CAAC,KAAK,CAA8C;;IAO3D,iBAAiB;IAWjB,oBAAoB;IAKpB,OAAO;CAiCR;AA+BD,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;CACnB;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;IAkBxG,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

@@ -0,0 +1,176 @@
+var __typeError = (msg) => {
+  throw 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, render_fn;
+const KIND_COLOR = {
+  success: "var(--fx-color-success, #10b981)",
+  error: "var(--fx-color-danger, #f43f5e)",
+  info: "var(--fx-color-info, #0ea5e9)",
+  warning: "var(--fx-color-warning, #f59e0b)"
+};
+const KIND_ICON = {
+  success: "✓",
+  error: "✕",
+  warning: "!",
+  info: "i"
+};
+const CARD_CSS = `
+:host { display: contents; }
+.card {
+  display: flex; align-items: flex-start; gap: 10px;
+  min-width: 260px; max-width: 360px;
+  background: var(--fx-surface-background, #fff);
+  color: var(--fx-text-default, #1e293b);
+  border: 1px solid var(--fx-border-default, #e2e8f0);
+  border-left: 4px solid var(--kind);
+  border-radius: var(--fx-radius-md, 8px);
+  box-shadow: var(--fx-shadow-lg, 0 10px 30px rgba(0,0,0,.14));
+  padding: var(--fx-space-sm, 8px) var(--fx-space-md, 12px);
+  font-family: inherit;
+  animation: fx-toast-in .25s ease;
+}
+@keyframes fx-toast-in { from { opacity: 0; transform: translateY(-6px); } }
+.card.leaving { opacity: 0; transition: opacity .2s ease; }
+.icon {
+  width: 22px; height: 22px; border-radius: 50%;
+  background: var(--kind);
+  color: #fff;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 12px; font-weight: 700;
+  flex: none; margin-top: 2px;
+  user-select: none;
+}
+.body { flex: 1; min-width: 0; }
+.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 {
+  all: unset; cursor: pointer; flex: none; line-height: 1;
+  color: var(--fx-text-muted, #64748b); font-size: 15px; padding: 2px 4px; border-radius: 4px;
+}
+.close:hover { color: var(--fx-color-danger, #f43f5e); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }
+`;
+class FxToast extends HTMLElement {
+  constructor() {
+    super();
+    __privateAdd(this, _FxToast_instances);
+    this.timer = null;
+    this.attachShadow({ mode: "open" });
+  }
+  static get observedAttributes() {
+    return ["kind", "title", "message", "duration"];
+  }
+  connectedCallback() {
+    if (!this.shadowRoot.firstChild) __privateMethod(this, _FxToast_instances, render_fn).call(this);
+    const dur = Number(this.getAttribute("duration") ?? "4000");
+    const safe = dur === 0 ? 0 : Math.max(Number.isNaN(dur) ? 4e3 : dur, 1e3);
+    if (!Number.isNaN(safe) && safe > 0 && !this.timer) {
+      this.timer = setTimeout(() => this.dismiss(), safe);
+    }
+  }
+  disconnectedCallback() {
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = null;
+  }
+  dismiss() {
+    if (this.timer) clearTimeout(this.timer);
+    this.timer = null;
+    const card = this.shadowRoot.querySelector(".card");
+    if (card) {
+      card.classList.add("leaving");
+      setTimeout(() => this.remove(), 200);
+    } else {
+      this.remove();
+    }
+  }
+}
+_FxToast_instances = new WeakSet();
+render_fn = function() {
+  const kind = this.getAttribute("kind") || "info";
+  const title = this.getAttribute("title") ?? "";
+  const msg = this.getAttribute("message") ?? "";
+  const color = KIND_COLOR[kind] ?? KIND_COLOR.info;
+  this.shadowRoot.innerHTML = `
+      <style>${CARD_CSS}</style>
+      <div class="card" style="--kind:${color}" role="status" part="card">
+        <span class="icon">${KIND_ICON[kind] ?? KIND_ICON.info}</span>
+        <div class="body">
+          ${title ? '<div class="title"></div>' : ""}
+          ${msg ? '<div class="msg"></div>' : ""}
+        </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;
+  this.shadowRoot.querySelector(".close").addEventListener("click", () => this.dismiss());
+};
+function regionFor(position) {
+  let region = document.querySelector(`[data-fx-toast-region="${position}"]`);
+  if (!region) {
+    region = document.createElement("div");
+    region.setAttribute("data-fx-toast-region", position);
+    const [vertical, horizontal] = position.split("-");
+    const style = region.style;
+    style.position = "fixed";
+    style[vertical] = "16px";
+    if (horizontal === "center") {
+      style.left = "50%";
+      style.transform = "translateX(-50%)";
+    } else {
+      style[horizontal] = "16px";
+    }
+    style.display = "flex";
+    style.flexDirection = "column";
+    style.gap = "8px";
+    style.zIndex = "1100";
+    style.pointerEvents = "none";
+    new MutationObserver(() => {
+      region.querySelectorAll("*").forEach((c) => c.style.pointerEvents = "auto");
+    }).observe(region, { childList: true });
+    document.body.appendChild(region);
+  }
+  return region;
+}
+class ToastApi {
+  constructor() {
+    this.seq = 0;
+    this.map = /* @__PURE__ */ new Map();
+    this.success = (t, m, o) => this.push("success", t, m, o);
+    this.error = (t, m, o) => this.push("error", t, m, o);
+    this.info = (t, m, o) => this.push("info", t, m, o);
+    this.warning = (t, m, o) => this.push("warning", t, m, o);
+  }
+  push(kind, title, messageOrOpts, opts) {
+    const id = ++this.seq;
+    const message = typeof messageOrOpts === "string" ? messageOrOpts : messageOrOpts?.message;
+    const o = { ...typeof messageOrOpts === "object" && messageOrOpts ? messageOrOpts : void 0, ...opts };
+    const el = document.createElement("fx-toast");
+    el.setAttribute("kind", kind);
+    el.setAttribute("title", title);
+    if (message) el.setAttribute("message", message);
+    el.setAttribute("position", o.position ?? "top-right");
+    el.setAttribute("duration", String(o.duration ?? 4e3));
+    regionFor(o.position ?? "top-right").appendChild(el);
+    this.map.set(id, el);
+    return id;
+  }
+  close(id) {
+    this.map.get(id)?.dismiss();
+    this.map.delete(id);
+  }
+}
+const FenixToast = new ToastApi();
+globalThis.FenixToast = FenixToast;
+function defineFxToast() {
+  if (!customElements.get("fx-toast")) customElements.define("fx-toast", FxToast);
+}
+export {
+  FenixToast,
+  FxToast,
+  defineFxToast
+};
+//# sourceMappingURL=toast.js.map

package/dist/components/toast/toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.js","sources":["../../../src/components/toast/toast.ts"],"sourcesContent":["/**\n * <fx-toast> — notificações imperativas com posição e duração configuráveis.\n *\n * Atributos: kind (success|error|info|warning), title, message,\n * position (top-left|top-center|top-right|bottom-left|bottom-center|bottom-right),\n * duration (ms; 0 = fixo até fechar).\n */\nconst POSITIONS = [\n  'top-left', 'top-center', 'top-right',\n  'bottom-left', 'bottom-center', 'bottom-right',\n] as const;\nexport type ToastPosition = (typeof POSITIONS)[number];\ntype ToastKind = 'success' | 'error' | 'info' | 'warning';\n\nconst KIND_COLOR: Record<ToastKind, string> = {\n  success: 'var(--fx-color-success, #10b981)',\n  error: 'var(--fx-color-danger, #f43f5e)',\n  info: 'var(--fx-color-info, #0ea5e9)',\n  warning: 'var(--fx-color-warning, #f59e0b)',\n};\n\n/** Ícone exibido no lugar da bolinha, conforme a variante. */\nconst KIND_ICON: Record<ToastKind, string> = {\n  success: '✓',\n  error: '✕',\n  warning: '!',\n  info: 'i',\n};\n\nconst CARD_CSS = `\n:host { display: contents; }\n.card {\n  display: flex; align-items: flex-start; gap: 10px;\n  min-width: 260px; max-width: 360px;\n  background: var(--fx-surface-background, #fff);\n  color: var(--fx-text-default, #1e293b);\n  border: 1px solid var(--fx-border-default, #e2e8f0);\n  border-left: 4px solid var(--kind);\n  border-radius: var(--fx-radius-md, 8px);\n  box-shadow: var(--fx-shadow-lg, 0 10px 30px rgba(0,0,0,.14));\n  padding: var(--fx-space-sm, 8px) var(--fx-space-md, 12px);\n  font-family: inherit;\n  animation: fx-toast-in .25s ease;\n}\n@keyframes fx-toast-in { from { opacity: 0; transform: translateY(-6px); } }\n.card.leaving { opacity: 0; transition: opacity .2s ease; }\n.icon {\n  width: 22px; height: 22px; border-radius: 50%;\n  background: var(--kind);\n  color: #fff;\n  display: flex; align-items: center; justify-content: center;\n  font-size: 12px; font-weight: 700;\n  flex: none; margin-top: 2px;\n  user-select: none;\n}\n.body { flex: 1; min-width: 0; }\n.title { font-weight: 600; font-size: 14px; }\n.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; }\n.close {\n  all: unset; cursor: pointer; flex: none; line-height: 1;\n  color: var(--fx-text-muted, #64748b); font-size: 15px; padding: 2px 4px; border-radius: 4px;\n}\n.close:hover { color: var(--fx-color-danger, #f43f5e); background: var(--fx-surface-surface-hover, rgba(0,0,0,.05)); }\n`;\n\nexport class FxToast extends HTMLElement {\n  static get observedAttributes() {\n    return ['kind', 'title', 'message', 'duration'];\n  }\n\n  private timer: ReturnType<typeof setTimeout> | null = null;\n\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n  }\n\n  connectedCallback() {\n    if (!this.shadowRoot!.firstChild) this.#render();\n    const dur = Number(this.getAttribute('duration') ?? '4000');\n    // Durações mínimas: valores muito baixos (ex.: digitação parcial no\n    // playground) são elevados para 1s; 0 permanece fixo até fechar.\n    const safe = dur === 0 ? 0 : Math.max(Number.isNaN(dur) ? 4000 : dur, 1000);\n    if (!Number.isNaN(safe) && safe > 0 && !this.timer) {\n      this.timer = setTimeout(() => this.dismiss(), safe);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.timer) clearTimeout(this.timer);\n    this.timer = null;\n  }\n\n  dismiss() {\n    if (this.timer) clearTimeout(this.timer);\n    this.timer = null;\n    const card = this.shadowRoot!.querySelector('.card');\n    if (card) {\n      card.classList.add('leaving');\n      setTimeout(() => this.remove(), 200);\n    } else {\n      this.remove();\n    }\n  }\n\n  #render() {\n    const kind = (this.getAttribute('kind') || 'info') as ToastKind;\n    const title = this.getAttribute('title') ?? '';\n    const msg = this.getAttribute('message') ?? '';\n    const color = KIND_COLOR[kind] ?? KIND_COLOR.info;\n    this.shadowRoot!.innerHTML = `\n      <style>${CARD_CSS}</style>\n      <div class=\"card\" style=\"--kind:${color}\" role=\"status\" part=\"card\">\n        <span class=\"icon\">${KIND_ICON[kind] ?? KIND_ICON.info}</span>\n        <div class=\"body\">\n          ${title ? '<div class=\"title\"></div>' : ''}\n          ${msg ? '<div class=\"msg\"></div>' : ''}\n        </div>\n        <button class=\"close\" aria-label=\"Fechar\">✕</button>\n      </div>`;\n    const t = this.shadowRoot!.querySelector<HTMLElement>('.title');\n    const m = this.shadowRoot!.querySelector<HTMLElement>('.msg');\n    if (t) t.textContent = title;\n    if (m) m.textContent = msg;\n    this.shadowRoot!.querySelector('.close')!.addEventListener('click', () => this.dismiss());\n  }\n}\n\n/* ---------- Regiões por posição na tela ---------- */\nfunction regionFor(position: ToastPosition): HTMLElement {\n  let region = document.querySelector<HTMLElement>(`[data-fx-toast-region=\"${position}\"]`);\n  if (!region) {\n    region = document.createElement('div');\n    region.setAttribute('data-fx-toast-region', position);\n    const [vertical, horizontal] = position.split('-') as [string, string];\n    const style = region.style as CSSStyleDeclaration & Record<string, string>;\n    style.position = 'fixed';\n    style[vertical] = '16px';\n    if (horizontal === 'center') {\n      style.left = '50%';\n      style.transform = 'translateX(-50%)';\n    } else {\n      style[horizontal] = '16px';\n    }\n    style.display = 'flex';\n    style.flexDirection = 'column';\n    style.gap = '8px';\n    style.zIndex = '1100';\n    style.pointerEvents = 'none';\n    new MutationObserver(() => {\n      region!.querySelectorAll('*').forEach((c) => ((c as HTMLElement).style.pointerEvents = 'auto'));\n    }).observe(region, { childList: true });\n    document.body.appendChild(region);\n  }\n  return region;\n}\n\nexport interface ToastOptions {\n  /** Texto secundário (também aceito como 2º argumento dos métodos). */\n  message?: string;\n  position?: ToastPosition;\n  /** Tempo em ms até sumir. 0 = fixo até fechar. Padrão: 4000 */\n  duration?: number;\n}\n\nclass ToastApi {\n  private seq = 0;\n  private map = new Map<number, FxToast>();\n\n  push(kind: ToastKind, title: string, messageOrOpts?: string | ToastOptions, opts?: ToastOptions): number {\n    const id = ++this.seq;\n    // Assinaturas suportadas:\n    //   push(kind, title, options)\n    //   push(kind, title, message, options)   <- usada pela doc e mais intuitiva\n    const message = typeof messageOrOpts === 'string' ? messageOrOpts : messageOrOpts?.message;\n    const o: ToastOptions = { ...(typeof messageOrOpts === 'object' && messageOrOpts ? messageOrOpts : undefined), ...opts };\n    const el = document.createElement('fx-toast') as FxToast;\n    el.setAttribute('kind', kind);\n    el.setAttribute('title', title);\n    if (message) el.setAttribute('message', message);\n    el.setAttribute('position', o.position ?? 'top-right');\n    el.setAttribute('duration', String(o.duration ?? 4000));\n    regionFor(o.position ?? 'top-right').appendChild(el);\n    this.map.set(id, el);\n    return id;\n  }\n\n  close(id: number) {\n    this.map.get(id)?.dismiss();\n    this.map.delete(id);\n  }\n\n  success = (t: string, m?: string, o?: ToastOptions) => this.push('success', t, m, o);\n  error = (t: string, m?: string, o?: ToastOptions) => this.push('error', t, m, o);\n  info = (t: string, m?: string, o?: ToastOptions) => this.push('info', t, m, o);\n  warning = (t: string, m?: string, o?: ToastOptions) => this.push('warning', t, m, o);\n}\n\nexport const FenixToast = new ToastApi();\n// Exposto globalmente para uso em HTML puro (onclick=\"FenixToast.success(...)\")\n(globalThis as unknown as Record<string, unknown>).FenixToast = FenixToast;\n\nexport function defineFxToast() {\n  if (!customElements.get('fx-toast')) customElements.define('fx-toast', FxToast);\n}\n\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import { FxTooltip } from './tooltip';
+export { FxTooltip };
+declare global {
+    interface HTMLElementTagNameMap {
+        'fx-tooltip': FxTooltip;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,WAAW,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,CAAC;AAKrB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}