@wrrdev/fenix-ui 1.0.17 → 1.1.0

package/dist/components/stepper/stepper.js

@@ -0,0 +1,162 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+import { esc } from "../../core/sanitize.js";
+const _FxStepper = class _FxStepper extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._titles = [];
+    this._panels = [];
+  }
+  static get observedAttributes() {
+    return ["active", "linear", "show-numbers"];
+  }
+  get stepCount() {
+    return this._titles.length;
+  }
+  get active() {
+    const n = Number(this.getAttr("active", "0"));
+    return Math.min(this.stepCount - 1, Math.max(0, Number.isFinite(n) ? n : 0));
+  }
+  set active(v) {
+    this.setAttribute("active", String(Math.min(this.stepCount - 1, Math.max(0, v))));
+  }
+  get isLast() {
+    return this.active >= this.stepCount - 1;
+  }
+  /** Navega al paso (emite change). Con linear, solo permite avanzar de a uno. */
+  goTo(index) {
+    const target = Math.min(this.stepCount - 1, Math.max(0, index));
+    if (this.hasAttr("linear") && target > this.active + 1) return;
+    this.active = target;
+    this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { index: this.active } }));
+    if (this.isLast) {
+      this.dispatchEvent(new CustomEvent("complete", { bubbles: true, composed: true }));
+    }
+  }
+  next() {
+    this.goTo(this.active + 1);
+  }
+  prev() {
+    this.goTo(this.active - 1);
+  }
+  render() {
+    this._panels = Array.from(this.children).filter(
+      (el) => el.matches('[slot^="step-"]')
+    );
+    this._titles = this._panels.map(
+      (p, i) => p.getAttribute("step-title") || `Paso ${i + 1}`
+    );
+    const active = Math.min(this.active, Math.max(0, this._titles.length - 1));
+    const stepsHtml = this._titles.map((title, i) => {
+      const state = i === active ? "active" : i < active ? "done" : "";
+      const marker = i < active && !this.hasAttr("show-numbers") ? "✓" : String(i + 1);
+      return `<span class="step ${state}" part="step" data-i="${i}"><span class="num">${marker}</span>${esc(title)}</span>`;
+    }).join("");
+    const panelsHtml = this._panels.map((p, i) => `<section class="panel" part="panel" ${i === active ? "" : "hidden"}>${p.innerHTML}</section>`).join("");
+    this.setTemplate(`
+      <div class="steps" part="steps">${stepsHtml}</div>
+      <div class="panel-wrap">${panelsHtml}</div>
+      <div class="actions" part="actions">
+        <button type="button" class="nav-btn prev" part="prev" ${active === 0 ? "disabled" : ""}>Anterior</button>
+        <button type="button" class="nav-btn primary next" part="next">${active === this._titles.length - 1 ? "Concluir" : "Próximo"}</button>
+      </div>
+    `);
+    this._bindSteps();
+  }
+  _bindSteps() {
+    const steps = Array.from(this.root.querySelectorAll(".step"));
+    steps.forEach((step) => {
+      const i = Number(step.dataset.i);
+      step.addEventListener("click", () => {
+        if (this.hasAttr("linear") && i > this.active + 1) return;
+        this.goTo(i);
+      });
+      step.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          this.goTo(i);
+        }
+      });
+    });
+    this.root.querySelector(".nav-btn.prev")?.addEventListener("click", () => this.prev());
+    this.root.querySelector(".nav-btn.next")?.addEventListener("click", () => this.next());
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this._titles.length === 0) this.render();
+  }
+};
+_FxStepper.styles = css`
+    :host { display: block; font-family: var(--fx-font-family); font-size: var(--fx-font-size); }
+    :host([linear]) .step-num.activated { cursor: not-allowed; }
+
+    .steps {
+      display: flex;
+      align-items: center;
+      gap: var(--fx-space-md);
+      flex-wrap: wrap;
+      padding: var(--fx-space-md) var(--fx-space-lg);
+    }
+    .step {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--fx-space-sm);
+      padding: var(--fx-space-xs) var(--fx-space-md);
+      border-radius: var(--fx-radius-full);
+      color: var(--fx-text-muted);
+      font-weight: 600;
+      user-select: none;
+      cursor: pointer;
+      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing), color var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .step.active { background: var(--fx-color-primary); color: #fff; }
+    .step.done { color: var(--fx-color-primary); }
+    .step[hidden] { display: none; }
+    .num {
+      display: inline-flex; align-items: center; justify-content: center;
+      width: 24px; height: 24px; min-width: 24px;
+      border: 1.5px solid currentColor;
+      border-radius: var(--fx-radius-full);
+      font-size: calc(var(--fx-font-size) - 2px);
+      line-height: 1;
+    }
+
+    .panel { padding: var(--fx-space-lg) var(--fx-space-xl); min-height: 80px; }
+    .actions {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--fx-space-sm);
+      padding: var(--fx-space-md) var(--fx-space-lg);
+      border-top: 1px solid var(--fx-border-default);
+    }
+    .nav-btn {
+      font-family: var(--fx-font-family);
+      font-size: calc(var(--fx-font-size) - 2px);
+      padding: var(--fx-space-xs) var(--fx-space-lg);
+      min-height: var(--fx-size-sm);
+      border-radius: var(--fx-radius-sm);
+      border: 1px solid var(--fx-border-default);
+      background: var(--fx-surface-background);
+      color: var(--fx-text-default);
+      cursor: pointer;
+      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .nav-btn:hover:not(:disabled) { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.04)); }
+    .nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .nav-btn.primary {
+      background: var(--fx-color-primary);
+      border-color: var(--fx-color-primary);
+      color: #fff;
+    }
+    .nav-btn.primary:hover:not(:disabled) { filter: brightness(0.92); background: var(--fx-color-primary); }
+  `;
+let FxStepper = _FxStepper;
+function defineFxStepper() {
+  return defineElement("fx-stepper", FxStepper);
+}
+export {
+  FxStepper,
+  defineFxStepper
+};
+//# sourceMappingURL=stepper.js.map

package/dist/components/stepper/stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","sources":["../../../src/components/stepper/stepper.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-stepper> — Asistente de pasos (wizard) para flujos multi-etapa.\n *\n * Uso declarativo: cada hijo directo con el atributo `step` define un paso.\n * Uso imperativo: leer/escribir la propiedad `active` para navegar.\n *\n * Atributos: active (índice del paso activo), linear (solo avanzar en orden),\n * show-numbers (muestra el número en el indicador).\n * Slots: `header` (customiza el indicador de pasos), un slot por paso\n * (slot=\"step-0\", slot=\"step-1\", ...).\n *\n * Eventos (composed): `change` (detail: { index }) y `complete` al llegar al último.\n */\nexport class FxStepper extends FxElement {\n  static override styles = css`\n    :host { display: block; font-family: var(--fx-font-family); font-size: var(--fx-font-size); }\n    :host([linear]) .step-num.activated { cursor: not-allowed; }\n\n    .steps {\n      display: flex;\n      align-items: center;\n      gap: var(--fx-space-md);\n      flex-wrap: wrap;\n      padding: var(--fx-space-md) var(--fx-space-lg);\n    }\n    .step {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-sm);\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      border-radius: var(--fx-radius-full);\n      color: var(--fx-text-muted);\n      font-weight: 600;\n      user-select: none;\n      cursor: pointer;\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing), color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .step.active { background: var(--fx-color-primary); color: #fff; }\n    .step.done { color: var(--fx-color-primary); }\n    .step[hidden] { display: none; }\n    .num {\n      display: inline-flex; align-items: center; justify-content: center;\n      width: 24px; height: 24px; min-width: 24px;\n      border: 1.5px solid currentColor;\n      border-radius: var(--fx-radius-full);\n      font-size: calc(var(--fx-font-size) - 2px);\n      line-height: 1;\n    }\n\n    .panel { padding: var(--fx-space-lg) var(--fx-space-xl); min-height: 80px; }\n    .actions {\n      display: flex;\n      justify-content: space-between;\n      gap: var(--fx-space-sm);\n      padding: var(--fx-space-md) var(--fx-space-lg);\n      border-top: 1px solid var(--fx-border-default);\n    }\n    .nav-btn {\n      font-family: var(--fx-font-family);\n      font-size: calc(var(--fx-font-size) - 2px);\n      padding: var(--fx-space-xs) var(--fx-space-lg);\n      min-height: var(--fx-size-sm);\n      border-radius: var(--fx-radius-sm);\n      border: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-background);\n      color: var(--fx-text-default);\n      cursor: pointer;\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .nav-btn:hover:not(:disabled) { background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.04)); }\n    .nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n    .nav-btn.primary {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n      color: #fff;\n    }\n    .nav-btn.primary:hover:not(:disabled) { filter: brightness(0.92); background: var(--fx-color-primary); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['active', 'linear', 'show-numbers'];\n  }\n\n  get stepCount(): number { return this._titles.length; }\n  get active(): number {\n    const n = Number(this.getAttr('active', '0'));\n    return Math.min(this.stepCount - 1, Math.max(0, Number.isFinite(n) ? n : 0));\n  }\n  set active(v: number) {\n    this.setAttribute('active', String(Math.min(this.stepCount - 1, Math.max(0, v))));\n  }\n\n  get isLast(): boolean { return this.active >= this.stepCount - 1; }\n\n  /** Navega al paso (emite change). Con linear, solo permite avanzar de a uno. */\n  goTo(index: number): void {\n    const target = Math.min(this.stepCount - 1, Math.max(0, index));\n    if (this.hasAttr('linear') && target > this.active + 1) return;\n    this.active = target;\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: { index: this.active } }));\n    if (this.isLast) {\n      this.dispatchEvent(new CustomEvent('complete', { bubbles: true, composed: true }));\n    }\n  }\n\n  next(): void { this.goTo(this.active + 1); }\n  prev(): void { this.goTo(this.active - 1); }\n\n  private _titles: string[] = [];\n  private _panels: Element[] = [];\n\n  protected override render(): void {\n    this._panels = Array.from(this.children).filter((el) =>\n      el.matches('[slot^=\"step-\"]'),\n    );\n    this._titles = this._panels.map((p, i) =>\n      p.getAttribute('step-title') || `Paso ${i + 1}`,\n    );\n    const active = Math.min(this.active, Math.max(0, this._titles.length - 1));\n\n    const stepsHtml = this._titles\n      .map((title, i) => {\n        const state = i === active ? 'active' : i < active ? 'done' : '';\n        // sem show-numbers: passos concluídos exibem ✓; com show-numbers: sempre número\n        const marker = i < active && !this.hasAttr('show-numbers') ? '✓' : String(i + 1);\n        return `<span class=\"step ${state}\" part=\"step\" data-i=\"${i}\"><span class=\"num\">${marker}</span>${esc(title)}</span>`;\n      })\n      .join('');\n\n    const panelsHtml = this._panels\n      .map((p, i) => `<section class=\"panel\" part=\"panel\" ${i === active ? '' : 'hidden'}>${p.innerHTML}</section>`)\n      .join('');\n\n    this.setTemplate(`\n      <div class=\"steps\" part=\"steps\">${stepsHtml}</div>\n      <div class=\"panel-wrap\">${panelsHtml}</div>\n      <div class=\"actions\" part=\"actions\">\n        <button type=\"button\" class=\"nav-btn prev\" part=\"prev\" ${active === 0 ? 'disabled' : ''}>Anterior</button>\n        <button type=\"button\" class=\"nav-btn primary next\" part=\"next\">${active === this._titles.length - 1 ? 'Concluir' : 'Próximo'}</button>\n      </div>\n    `);\n\n    this._bindSteps();\n  }\n\n  private _bindSteps(): void {\n    const steps = Array.from(this.root.querySelectorAll<HTMLElement>('.step'));\n    steps.forEach((step) => {\n      const i = Number(step.dataset.i);\n      step.addEventListener('click', () => {\n        if (this.hasAttr('linear') && i > this.active + 1) return;\n        this.goTo(i);\n      });\n      step.addEventListener('keydown', (e) => {\n        if ((e as KeyboardEvent).key === 'Enter') {\n          e.preventDefault();\n          this.goTo(i);\n        }\n      });\n    });\n\n    this.root.querySelector<HTMLElement>('.nav-btn.prev')?.addEventListener('click', () => this.prev());\n    this.root.querySelector<HTMLElement>('.nav-btn.next')?.addEventListener('click', () => this.next());\n  }\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    if (this._titles.length === 0) this.render();\n  }\n}\n\nexport function defineFxStepper(): typeof FxStepper {\n  return defineElement('fx-stepper', FxStepper);\n}"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/timeline/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/timeline/index.ts"],"sourcesContent":["import { FxTimeline, defineFxTimeline } from './timeline';\n\nexport { FxTimeline };\n\ndefineFxTimeline();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-timeline': FxTimeline;\n  }\n}"],"names":[],"mappings":";;AAIA,iBAAA;"}

package/dist/components/timeline/timeline.d.ts

@@ -0,0 +1,30 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-timeline> — Linha do tempo vertical com eventos.
+ *
+ * Atributos: marker (glifo do marcador, padrão '●'), size (sm|md|lg).
+ * Slot `item`: cada elemento com [slot="item"] vira um evento. Use os
+ * atributos `time` (texto do horário/data) e `title` no item.
+ *
+ * Exemplo:
+ *   <fx-timeline>
+ *     <div slot="item" time="09:00" title="Reunião">Detalhes…</div>
+ *     <div slot="item" time="14:00" title="Deploy">Detalhes…</div>
+ *   </fx-timeline>
+ */
+export declare class FxTimeline extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    protected render(): void;
+    /**
+     * Monta os eventos a partir dos itens do light DOM.
+     * Os itens permanecem no light DOM (sem slot correspondente, não são
+     * renderizados) — assim a decoração é idempotente e sobrevive a re-renders.
+     */
+    private _decorate;
+    private _observer?;
+    protected connectedCallback(): void;
+    protected disconnectedCallback(): void;
+}
+export declare function defineFxTimeline(): typeof FxTimeline;
+//# sourceMappingURL=timeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../src/components/timeline/timeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;;;;GAYG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SA2FpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;cAEkB,MAAM,IAAI,IAAI;IAKjC;;;;OAIG;IACH,OAAO,CAAC,SAAS;IAoBjB,OAAO,CAAC,SAAS,CAAC,CAAmB;cAElB,iBAAiB,IAAI,IAAI;cAQzB,oBAAoB,IAAI,IAAI;CAKhD;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD"}

package/dist/components/timeline/timeline.js

@@ -0,0 +1,146 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+import { esc } from "../../core/sanitize.js";
+const _FxTimeline = class _FxTimeline extends FxElement {
+  static get observedAttributes() {
+    return ["marker", "size", "orientation"];
+  }
+  render() {
+    this.setTemplate(`<ol class="tl" part="timeline"></ol>`);
+    this._decorate();
+  }
+  /**
+   * Monta os eventos a partir dos itens do light DOM.
+   * Os itens permanecem no light DOM (sem slot correspondente, não são
+   * renderizados) — assim a decoração é idempotente e sobrevive a re-renders.
+   */
+  _decorate() {
+    const list = this.shadowRoot?.querySelector("ol");
+    if (!list) return;
+    const marker = this.getAttr("marker", "●");
+    const items = Array.from(this.querySelectorAll('[slot="item"]'));
+    if (!items.length) return;
+    list.innerHTML = items.map((item) => {
+      const time = item.getAttribute("time") ?? "";
+      const title = item.getAttribute("title") ?? "";
+      const head = [
+        time ? `<span class="time">${esc(time)}</span>` : "",
+        title ? `<span class="title">${esc(title)}</span>` : ""
+      ].join("");
+      return `<li class="event" part="event"><span class="dot" part="marker" aria-hidden="true">${esc(marker)}</span><div class="head">${head}</div><div class="content">${item.innerHTML}</div></li>`;
+    }).join("");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this._observer = new MutationObserver(() => this._decorate());
+    this._observer.observe(this, { childList: true, subtree: false });
+    this._decorate();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._observer?.disconnect();
+    this._observer = void 0;
+  }
+};
+_FxTimeline.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      --_marker: calc(var(--fx-font-size) - 1px);
+    }
+    :host([size='sm']) { --_marker: calc(var(--fx-font-size) - 3px); }
+    :host([size='lg']) { --_marker: calc(var(--fx-font-size) + 2px); }
+
+    .tl {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      position: relative;
+    }
+    /* linha vertical centralizada no eixo dos marcadores */
+    .tl::before {
+      content: '';
+      position: absolute;
+      left: calc(var(--_marker) / 2 - 1px);
+      top: calc(var(--_marker) / 2);
+      bottom: 6px;
+      width: 2px;
+      background: var(--fx-border-default);
+    }
+    .event {
+      position: relative;
+      padding: 0 0 var(--fx-space-lg) calc(var(--_marker) + var(--fx-space-lg));
+    }
+    .event:last-child { padding-bottom: 0; }
+    /* marcador circular centralizado no eixo da linha */
+    .dot {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: var(--_marker);
+      height: var(--_marker);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-size: calc(var(--_marker) * 0.55);
+      color: var(--fx-color-primary);
+      line-height: 1;
+    }
+    .head {
+      display: flex;
+      align-items: baseline;
+      gap: var(--fx-space-sm);
+      flex-wrap: wrap;
+      min-height: var(--_marker);
+    }
+    .time {
+      font-size: calc(var(--fx-font-size) - 2px);
+      color: var(--fx-text-muted);
+      white-space: nowrap;
+    }
+    .title {
+      font-weight: 600;
+      color: var(--fx-text-default);
+    }
+    .content {
+      margin-top: 2px;
+      color: var(--fx-text-default);
+      line-height: 1.5;
+    }
+    .event[hidden] { display: none; }
+
+    /* ---- modo horizontal ---- */
+    :host([orientation='horizontal']) .tl {
+      display: flex;
+    }
+    :host([orientation='horizontal']) .tl::before {
+      left: calc(var(--_marker) / 2 - 1px);
+      right: calc(var(--_marker) / 2);
+      top: calc(var(--_marker) / 2 - 1px);
+      bottom: auto;
+      width: auto;
+      height: 2px;
+    }
+    :host([orientation='horizontal']) .event {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      padding: 0 var(--fx-space-lg) 0 0;
+    }
+    :host([orientation='horizontal']) .event:last-child { padding-right: 0; }
+    :host([orientation='horizontal']) .event .dot {
+      position: static;
+      margin-bottom: var(--fx-space-sm);
+    }
+  `;
+let FxTimeline = _FxTimeline;
+function defineFxTimeline() {
+  return defineElement("fx-timeline", FxTimeline);
+}
+export {
+  FxTimeline,
+  defineFxTimeline
+};
+//# sourceMappingURL=timeline.js.map

package/dist/components/timeline/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.js","sources":["../../../src/components/timeline/timeline.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-timeline> — Linha do tempo vertical com eventos.\n *\n * Atributos: marker (glifo do marcador, padrão '●'), size (sm|md|lg).\n * Slot `item`: cada elemento com [slot=\"item\"] vira um evento. Use os\n * atributos `time` (texto do horário/data) e `title` no item.\n *\n * Exemplo:\n *   <fx-timeline>\n *     <div slot=\"item\" time=\"09:00\" title=\"Reunião\">Detalhes…</div>\n *     <div slot=\"item\" time=\"14:00\" title=\"Deploy\">Detalhes…</div>\n *   </fx-timeline>\n */\nexport class FxTimeline extends FxElement {\n  static override styles = css`\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      --_marker: calc(var(--fx-font-size) - 1px);\n    }\n    :host([size='sm']) { --_marker: calc(var(--fx-font-size) - 3px); }\n    :host([size='lg']) { --_marker: calc(var(--fx-font-size) + 2px); }\n\n    .tl {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      position: relative;\n    }\n    /* linha vertical centralizada no eixo dos marcadores */\n    .tl::before {\n      content: '';\n      position: absolute;\n      left: calc(var(--_marker) / 2 - 1px);\n      top: calc(var(--_marker) / 2);\n      bottom: 6px;\n      width: 2px;\n      background: var(--fx-border-default);\n    }\n    .event {\n      position: relative;\n      padding: 0 0 var(--fx-space-lg) calc(var(--_marker) + var(--fx-space-lg));\n    }\n    .event:last-child { padding-bottom: 0; }\n    /* marcador circular centralizado no eixo da linha */\n    .dot {\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: var(--_marker);\n      height: var(--_marker);\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      font-size: calc(var(--_marker) * 0.55);\n      color: var(--fx-color-primary);\n      line-height: 1;\n    }\n    .head {\n      display: flex;\n      align-items: baseline;\n      gap: var(--fx-space-sm);\n      flex-wrap: wrap;\n      min-height: var(--_marker);\n    }\n    .time {\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-text-muted);\n      white-space: nowrap;\n    }\n    .title {\n      font-weight: 600;\n      color: var(--fx-text-default);\n    }\n    .content {\n      margin-top: 2px;\n      color: var(--fx-text-default);\n      line-height: 1.5;\n    }\n    .event[hidden] { display: none; }\n\n    /* ---- modo horizontal ---- */\n    :host([orientation='horizontal']) .tl {\n      display: flex;\n    }\n    :host([orientation='horizontal']) .tl::before {\n      left: calc(var(--_marker) / 2 - 1px);\n      right: calc(var(--_marker) / 2);\n      top: calc(var(--_marker) / 2 - 1px);\n      bottom: auto;\n      width: auto;\n      height: 2px;\n    }\n    :host([orientation='horizontal']) .event {\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      padding: 0 var(--fx-space-lg) 0 0;\n    }\n    :host([orientation='horizontal']) .event:last-child { padding-right: 0; }\n    :host([orientation='horizontal']) .event .dot {\n      position: static;\n      margin-bottom: var(--fx-space-sm);\n    }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['marker', 'size', 'orientation'];\n  }\n\n  protected override render(): void {\n    this.setTemplate(`<ol class=\"tl\" part=\"timeline\"></ol>`);\n    this._decorate();\n  }\n\n  /**\n   * Monta os eventos a partir dos itens do light DOM.\n   * Os itens permanecem no light DOM (sem slot correspondente, não são\n   * renderizados) — assim a decoração é idempotente e sobrevive a re-renders.\n   */\n  private _decorate(): void {\n    const list = this.shadowRoot?.querySelector('ol');\n    if (!list) return;\n    const marker = this.getAttr('marker', '●');\n    const items = Array.from(this.querySelectorAll('[slot=\"item\"]'));\n    if (!items.length) return;\n\n    list.innerHTML = items\n      .map((item) => {\n        const time = item.getAttribute('time') ?? '';\n        const title = item.getAttribute('title') ?? '';\n        const head = [\n          time ? `<span class=\"time\">${esc(time)}</span>` : '',\n          title ? `<span class=\"title\">${esc(title)}</span>` : '',\n        ].join('');\n        return `<li class=\"event\" part=\"event\"><span class=\"dot\" part=\"marker\" aria-hidden=\"true\">${esc(marker)}</span><div class=\"head\">${head}</div><div class=\"content\">${item.innerHTML}</div></li>`;\n      })\n      .join('');\n  }\n\n  private _observer?: MutationObserver;\n\n  protected override connectedCallback(): void {\n    super.connectedCallback();\n    // filhos podem chegar depois (innerHTML do playground)\n    this._observer = new MutationObserver(() => this._decorate());\n    this._observer.observe(this, { childList: true, subtree: false });\n    this._decorate();\n  }\n\n  protected override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = undefined;\n  }\n}\n\nexport function defineFxTimeline(): typeof FxTimeline {\n  return defineElement('fx-timeline', FxTimeline);\n}"],"names":[],"mappings":";;;;AAkBO,MAAM,cAAN,MAAM,oBAAmB,UAAU;AAAA,EA8FxC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,UAAU,QAAQ,aAAa;AAAA,EACzC;AAAA,EAEmB,SAAe;AAChC,SAAK,YAAY,sCAAsC;AACvD,SAAK,UAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,YAAkB;AACxB,UAAM,OAAO,KAAK,YAAY,cAAc,IAAI;AAChD,QAAI,CAAC,KAAM;AACX,UAAM,SAAS,KAAK,QAAQ,UAAU,GAAG;AACzC,UAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,eAAe,CAAC;AAC/D,QAAI,CAAC,MAAM,OAAQ;AAEnB,SAAK,YAAY,MACd,IAAI,CAAC,SAAS;AACb,YAAM,OAAO,KAAK,aAAa,MAAM,KAAK;AAC1C,YAAM,QAAQ,KAAK,aAAa,OAAO,KAAK;AAC5C,YAAM,OAAO;AAAA,QACX,OAAO,sBAAsB,IAAI,IAAI,CAAC,YAAY;AAAA,QAClD,QAAQ,uBAAuB,IAAI,KAAK,CAAC,YAAY;AAAA,MAAA,EACrD,KAAK,EAAE;AACT,aAAO,qFAAqF,IAAI,MAAM,CAAC,4BAA4B,IAAI,8BAA8B,KAAK,SAAS;AAAA,IACrL,CAAC,EACA,KAAK,EAAE;AAAA,EACZ;AAAA,EAImB,oBAA0B;AAC3C,UAAM,kBAAA;AAEN,SAAK,YAAY,IAAI,iBAAiB,MAAM,KAAK,WAAW;AAC5D,SAAK,UAAU,QAAQ,MAAM,EAAE,WAAW,MAAM,SAAS,OAAO;AAChE,SAAK,UAAA;AAAA,EACP;AAAA,EAEmB,uBAA6B;AAC9C,UAAM,qBAAA;AACN,SAAK,WAAW,WAAA;AAChB,SAAK,YAAY;AAAA,EACnB;AACF;AA9IE,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;AAiJA,SAAS,mBAAsC;AACpD,SAAO,cAAc,eAAe,UAAU;AAChD;"}

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;;;;;;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"}
+{"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;AAkE1D,qBAAa,OAAQ,SAAQ,WAAW;;IACtC,MAAM,KAAK,kBAAkB,aAE5B;IAED,OAAO,CAAC,KAAK,CAA8C;;IAO3D,iBAAiB;IAWjB,oBAAoB;IAKpB,OAAO;CAqCR;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

@@ -1,3 +1,4 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["icons/index.js","icons/names.js","icons/base-css.js"])))=>i.map(i=>d[i]);
 var __typeError = (msg) => {
   throw TypeError(msg);
 };
@@ -5,6 +6,7 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 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;
+import { __vitePreload } from "../../_virtual/preload-helper.js";
 const KIND_COLOR = {
   success: "var(--fx-color-success, #10b981)",
   error: "var(--fx-color-danger, #f43f5e)",
@@ -19,6 +21,19 @@ const KIND_ICON = {
 };
 const CARD_CSS = `
 :host { display: contents; }
+.fx-icon {
+  font-family: var(--fx-icon-font, 'Fenix Icons');
+  font-weight: normal;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  display: inline-block;
+  white-space: nowrap;
+  direction: ltr;
+  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
+  -webkit-font-smoothing: antialiased;
+  user-select: none;
+}
 .card {
   display: flex; align-items: flex-start; gap: 10px;
   min-width: 260px; max-width: 360px;
@@ -60,7 +75,7 @@ class FxToast extends HTMLElement {
     this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["kind", "title", "message", "duration"];
+    return ["kind", "title", "message", "duration", "icon"];
   }
   connectedCallback() {
     if (!this.shadowRoot.firstChild) __privateMethod(this, _FxToast_instances, render_fn).call(this);
@@ -92,10 +107,14 @@ render_fn = function() {
   const title = this.getAttribute("title") ?? "";
   const msg = this.getAttribute("message") ?? "";
   const color = KIND_COLOR[kind] ?? KIND_COLOR.info;
+  const iconName = this.getAttribute("icon");
+  const isFxIcon = !!iconName && /^[a-z][a-z0-9_]*$/.test(iconName);
+  if (isFxIcon) void __vitePreload(() => import("../../icons/index.js"), true ? __vite__mapDeps([0,1,2]) : void 0);
+  const iconContent = isFxIcon ? iconName : KIND_ICON[kind] ?? KIND_ICON.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>
+        <span class="icon${isFxIcon ? " fx-icon" : ""}">${iconContent}</span>
         <div class="body">
           ${title ? '<div class="title"></div>' : ""}
           ${msg ? '<div class="msg"></div>' : ""}

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

@@ -1 +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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"}
+{"version":3,"mappings":"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","names":[],"ignoreList":[],"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.fx-icon {\n  font-family: var(--fx-icon-font, 'Fenix Icons');\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  display: inline-block;\n  white-space: nowrap;\n  direction: ltr;\n  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n  -webkit-font-smoothing: antialiased;\n  user-select: none;\n}\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', 'icon'];\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    const iconName = this.getAttribute('icon');\n    const isFxIcon = !!iconName && /^[a-z][a-z0-9_]*$/.test(iconName);\n    if (isFxIcon) void import('../../icons');\n    const iconContent = isFxIcon ? iconName : KIND_ICON[kind] ?? KIND_ICON.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${isFxIcon ? ' fx-icon' : ''}\">${iconContent}</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"],"file":"components/toast/toast.js"}

package/dist/components/toggle-button-group/index.d.ts

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

package/dist/components/toggle-button-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAA6B,MAAM,uBAAuB,CAAC;AAEvF,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAI/B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,mBAAmB,CAAC;KAC/C;CACF"}

package/dist/components/toggle-button-group/index.js

@@ -0,0 +1,7 @@
+import { defineFxToggleButtonGroup } from "./toggle-button-group.js";
+import { FxToggleButtonGroup } from "./toggle-button-group.js";
+defineFxToggleButtonGroup();
+export {
+  FxToggleButtonGroup
+};
+//# sourceMappingURL=index.js.map

package/dist/components/toggle-button-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/toggle-button-group/index.ts"],"sourcesContent":["import { FxToggleButtonGroup, defineFxToggleButtonGroup } from './toggle-button-group';\n\nexport { FxToggleButtonGroup };\n\ndefineFxToggleButtonGroup();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'fx-toggle-button-group': FxToggleButtonGroup;\n  }\n}"],"names":[],"mappings":";;AAIA,0BAAA;"}

package/dist/components/toggle-button-group/toggle-button-group.d.ts

@@ -0,0 +1,21 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-toggle-button-group> — Grupo de botones de selección múltiple o única.
+ *
+ * Atributos: multiple (permite varios seleccionados), value (lista), size.
+ * Slots `option`: cada botón con [slot="option" value="..."].
+ * Evento (composed): `change` (detail: { value: string[] }).
+ */
+export declare class FxToggleButtonGroup extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get value(): string[];
+    set value(v: string[]);
+    get multiple(): boolean;
+    get options(): HTMLElement[];
+    protected render(): void;
+    private _bindOptions;
+    private _toggle;
+}
+export declare function defineFxToggleButtonGroup(): typeof FxToggleButtonGroup;
+//# sourceMappingURL=toggle-button-group.d.ts.map

package/dist/components/toggle-button-group/toggle-button-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-button-group.d.ts","sourceRoot":"","sources":["../../../src/components/toggle-button-group/toggle-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;GAMG;AACH,qBAAa,mBAAoB,SAAQ,SAAS;IAChD,OAAgB,MAAM,SA2BpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,KAAK,IAAI,MAAM,EAAE,CAGpB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,EAA8C;IAEnE,IAAI,QAAQ,IAAI,OAAO,CAAqC;IAE5D,IAAI,OAAO,IAAI,WAAW,EAAE,CAE3B;cAEkB,MAAM,IAAI,IAAI;IAqBjC,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,OAAO;CAmBhB;AAED,wBAAgB,yBAAyB,IAAI,OAAO,mBAAmB,CAEtE"}