@wrrdev/fenix-ui 1.0.16 → 1.1.0

package/dist/components/card/card.js

@@ -0,0 +1,80 @@
+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 _FxCard = class _FxCard extends FxElement {
+  static get observedAttributes() {
+    return ["variant", "size", "padded", "heading"];
+  }
+  render() {
+    const heading = this.getAttr("heading");
+    this.setTemplate(`
+      <div class="card" part="card">
+        <header part="header" ${heading ? "" : "hidden"}>${esc(heading)}<slot name="header"></slot></header>
+        <div class="body" part="content"><slot></slot></div>
+        <footer part="footer"><slot name="footer"></slot></footer>
+      </div>
+    `);
+  }
+};
+_FxCard.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      box-sizing: border-box;
+    }
+    .card {
+      background: var(--fx-surface-background);
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-lg);
+      box-shadow: var(--fx-shadow-sm);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      transition: box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);
+    }
+    /* Elevado: sombra principal; Flat: sem sombra mas cor plana; Outline: sem sombra e borda sólida */
+    :host([variant='elevated']) .card { box-shadow: var(--fx-shadow-md); }
+    :host([variant='elevated']) .card:hover { box-shadow: var(--fx-shadow-xl); }
+    :host([variant='flat']) .card { box-shadow: none; border-color: transparent; }
+    :host([variant='outline']) .card { box-shadow: none; border-style: solid; border-width: 1px; }
+    :host([variant='ghost']) .card { box-shadow: none; border-color: transparent; background: transparent; }
+
+    /* Tamanhos */
+    :host([size='sm']) .card { border-radius: var(--fx-radius-sm); }
+    :host([size='lg']) .card { border-radius: var(--fx-radius-xl); }
+
+    header {
+      padding: var(--fx-space-md) var(--fx-space-xl);
+      border-bottom: 1px solid var(--fx-border-default);
+      font-weight: 600;
+      color: var(--fx-text-default);
+      font-size: calc(var(--fx-font-size) + 2px);
+    }
+    header[hidden] { display: none; }
+
+    .body {
+      flex: 1 1 auto;
+    }
+    :host([padded]) .body { padding: var(--fx-space-lg) var(--fx-space-xl); }
+    :host([padded]) .body:empty { padding: 0; }
+
+    footer {
+      padding: var(--fx-space-md) var(--fx-space-xl);
+      border-top: 1px solid var(--fx-border-default);
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--fx-space-sm);
+    }
+    footer[hidden] { display: none; }
+  `;
+let FxCard = _FxCard;
+function defineFxCard() {
+  return defineElement("fx-card", FxCard);
+}
+export {
+  FxCard,
+  defineFxCard
+};
+//# sourceMappingURL=card.js.map

package/dist/components/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../../src/components/card/card.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-card> — Container de conteúdo com cabeçalho, corpo e rodapé.\n *\n * Atributos: variant (elevated|flat|outline, padrão elevated), size (sm|md|lg),\n * padded (exibe padding interno), heading (rótulo opcional no cabeçalho).\n * Slots: `header`, padrão (conteúdo), `footer`.\n */\nexport class FxCard 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      box-sizing: border-box;\n    }\n    .card {\n      background: var(--fx-surface-background);\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-lg);\n      box-shadow: var(--fx-shadow-sm);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      transition: box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n    }\n    /* Elevado: sombra principal; Flat: sem sombra mas cor plana; Outline: sem sombra e borda sólida */\n    :host([variant='elevated']) .card { box-shadow: var(--fx-shadow-md); }\n    :host([variant='elevated']) .card:hover { box-shadow: var(--fx-shadow-xl); }\n    :host([variant='flat']) .card { box-shadow: none; border-color: transparent; }\n    :host([variant='outline']) .card { box-shadow: none; border-style: solid; border-width: 1px; }\n    :host([variant='ghost']) .card { box-shadow: none; border-color: transparent; background: transparent; }\n\n    /* Tamanhos */\n    :host([size='sm']) .card { border-radius: var(--fx-radius-sm); }\n    :host([size='lg']) .card { border-radius: var(--fx-radius-xl); }\n\n    header {\n      padding: var(--fx-space-md) var(--fx-space-xl);\n      border-bottom: 1px solid var(--fx-border-default);\n      font-weight: 600;\n      color: var(--fx-text-default);\n      font-size: calc(var(--fx-font-size) + 2px);\n    }\n    header[hidden] { display: none; }\n\n    .body {\n      flex: 1 1 auto;\n    }\n    :host([padded]) .body { padding: var(--fx-space-lg) var(--fx-space-xl); }\n    :host([padded]) .body:empty { padding: 0; }\n\n    footer {\n      padding: var(--fx-space-md) var(--fx-space-xl);\n      border-top: 1px solid var(--fx-border-default);\n      display: flex;\n      justify-content: flex-end;\n      gap: var(--fx-space-sm);\n    }\n    footer[hidden] { display: none; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['variant', 'size', 'padded', 'heading'];\n  }\n\n  protected override render(): void {\n    const heading = this.getAttr('heading');\n    this.setTemplate(`\n      <div class=\"card\" part=\"card\">\n        <header part=\"header\" ${heading ? '' : 'hidden'}>${esc(heading)}<slot name=\"header\"></slot></header>\n        <div class=\"body\" part=\"content\"><slot></slot></div>\n        <footer part=\"footer\"><slot name=\"footer\"></slot></footer>\n      </div>\n    `);\n  }\n}\n\nexport function defineFxCard(): typeof FxCard {\n  return defineElement('fx-card', FxCard);\n}\n"],"names":[],"mappings":";;;;AAYO,MAAM,UAAN,MAAM,gBAAe,UAAU;AAAA,EAsDpC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,QAAQ,UAAU,SAAS;AAAA,EAChD;AAAA,EAEmB,SAAe;AAChC,UAAM,UAAU,KAAK,QAAQ,SAAS;AACtC,SAAK,YAAY;AAAA;AAAA,gCAEW,UAAU,KAAK,QAAQ,IAAI,IAAI,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA,KAIlE;AAAA,EACH;AACF;AAnEE,QAAgB,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;AADpB,IAAM,SAAN;AAsEA,SAAS,eAA8B;AAC5C,SAAO,cAAc,WAAW,MAAM;AACxC;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,CAAC;AAIlB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/card/index.js

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

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

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

package/dist/components/carousel/carousel.d.ts

@@ -0,0 +1,28 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-carousel> — Carrossel de slides com navegação e indicadores.
+ *
+ * Atributos: active (índice do slide), autoplay (ms), loop, show-arrows,
+ * show-indicators.
+ * Slot `slide`: cada elemento com [slot="slide"] vira um slide.
+ * Eventos (composed): `change` (detail: { index }).
+ */
+export declare class FxCarousel extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get active(): number;
+    set active(v: number);
+    get slideCount(): number;
+    private _slides;
+    private _timer?;
+    protected render(): void;
+    protected attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private _go;
+    next(): void;
+    prev(): void;
+    private _bind;
+    private _restartAutoplay;
+    disconnectedCallback(): void;
+}
+export declare function defineFxCarousel(): typeof FxCarousel;
+//# sourceMappingURL=carousel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/carousel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;GAOG;AACH,qBAAa,UAAW,SAAQ,SAAS;IACvC,OAAgB,MAAM,SAoEpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,MAAM,IAAI,MAAM,CAGnB;IACD,IAAI,MAAM,CAAC,CAAC,EAAE,MAAM,EAEnB;IAED,IAAI,UAAU,IAAI,MAAM,CAAgC;IAExD,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,MAAM,CAAC,CAAiC;cAE7B,MAAM,IAAI,IAAI;cAsBd,wBAAwB,CACzC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,GAAG,IAAI,EACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,GACtB,IAAI;IAYP,OAAO,CAAC,GAAG;IAyBX,IAAI,IAAI,IAAI;IACZ,IAAI,IAAI,IAAI;IAEZ,OAAO,CAAC,KAAK;IAQb,OAAO,CAAC,gBAAgB;IAQf,oBAAoB,IAAI,IAAI;CAItC;AAED,wBAAgB,gBAAgB,IAAI,OAAO,UAAU,CAEpD"}

package/dist/components/carousel/carousel.js

@@ -0,0 +1,176 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxCarousel = class _FxCarousel extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._slides = [];
+  }
+  static get observedAttributes() {
+    return ["active", "autoplay", "loop", "show-arrows", "show-indicators"];
+  }
+  get active() {
+    const n = Number(this.getAttr("active", "0"));
+    return Math.min(this.slideCount - 1, Math.max(0, Number.isFinite(n) ? n : 0));
+  }
+  set active(v) {
+    this.setAttribute("active", String(Math.min(this.slideCount - 1, Math.max(0, v))));
+  }
+  get slideCount() {
+    return this._slides.length;
+  }
+  render() {
+    this._slides = Array.from(this.children).filter((el) => el.matches('[slot="slide"]'));
+    const contentsHtml = this._slides.map((s, i) => `<div class="slide" part="slide" data-i="${i}" ${i === this.active ? "" : "hidden"}>${s.innerHTML}</div>`).join("");
+    this.setTemplate(`
+      <div class="viewport" part="viewport">
+        ${contentsHtml}
+        <button type="button" class="arrow prev" part="arrow" aria-label="Anterior" ${this.hasAttr("show-arrows") ? "" : "hidden"}>‹</button>
+        <button type="button" class="arrow next" part="arrow" aria-label="Próximo" ${this.hasAttr("show-arrows") ? "" : "hidden"}>›</button>
+      </div>
+      <div class="indicators" part="indicators" ${this.hasAttr("show-indicators") ? "" : "hidden"}>
+        ${this._slides.map((_, i) => `<button type="button" class="dot ${i === this.active ? "on" : ""}" data-i="${i}" aria-label="Slide ${i + 1}"></button>`).join("")}
+      </div>
+    `);
+    this._bind();
+    this._restartAutoplay();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isConnected || oldValue === newValue) return;
+    if (name === "active" && this._slides.length) {
+      this._go(this.active, false);
+      this._restartAutoplay();
+      return;
+    }
+    this.render();
+  }
+  _go(index, emit = true) {
+    const count = this._slides.length;
+    if (!count) return;
+    let target;
+    if (this.hasAttr("loop")) {
+      target = (index % count + count) % count;
+    } else {
+      target = Math.min(count - 1, Math.max(0, index));
+    }
+    if (String(target) === this.getAttribute("active")) return;
+    this.active = target;
+    this.root.querySelectorAll(".slide").forEach((s) => {
+      s.toggleAttribute("hidden", Number(s.dataset.i) !== target);
+    });
+    this.root.querySelectorAll(".dot").forEach((d) => {
+      d.classList.toggle("on", Number(d.dataset.i) === target);
+    });
+    if (emit) {
+      this.dispatchEvent(new CustomEvent("change", { bubbles: true, composed: true, detail: { index: target } }));
+    }
+  }
+  next() {
+    this._go(this.active + 1);
+  }
+  prev() {
+    this._go(this.active - 1);
+  }
+  _bind() {
+    this.root.querySelector(".arrow.prev")?.addEventListener("click", () => this.prev());
+    this.root.querySelector(".arrow.next")?.addEventListener("click", () => this.next());
+    this.root.querySelectorAll(".dot").forEach((d) => {
+      d.addEventListener("click", () => this._go(Number(d.dataset.i)));
+    });
+  }
+  _restartAutoplay() {
+    if (this._timer) {
+      clearInterval(this._timer);
+      this._timer = void 0;
+    }
+    const ms = Number(this.getAttr("autoplay", "0"));
+    if (ms > 0) {
+      this._timer = setInterval(() => this._go(this.active + 1), ms);
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._timer) {
+      clearInterval(this._timer);
+      this._timer = void 0;
+    }
+  }
+};
+_FxCarousel.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    .viewport {
+      position: relative;
+      overflow: hidden;
+      border-radius: var(--fx-radius-lg);
+      border: 1px solid var(--fx-border-default);
+      background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.04));
+    }
+    .slide {
+      min-height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--fx-space-xl);
+      box-sizing: border-box;
+      color: var(--fx-text-default);
+    }
+    .slide[hidden] { display: none; }
+    .arrow {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 34px;
+      height: 34px;
+      border: 1px solid var(--fx-border-default);
+      border-radius: var(--fx-radius-full);
+      background: color-mix(in srgb, var(--fx-surface-background, #fff) 82%, transparent);
+      color: var(--fx-text-default);
+      font-size: calc(var(--fx-font-size) + 4px);
+      cursor: pointer;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      backdrop-filter: blur(2px);
+      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing), border-color var(--fx-motion-duration-fast) var(--fx-motion-easing), color var(--fx-motion-duration-fast) var(--fx-motion-easing), transform var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .arrow:hover {
+      background: var(--fx-color-primary);
+      border-color: var(--fx-color-primary);
+      color: #fff;
+      transform: translateY(-50%) scale(1.08);
+    }
+    .arrow[hidden] { display: none; }
+    .arrow.prev { left: var(--fx-space-md); }
+    .arrow.next { right: var(--fx-space-md); }
+    .indicators {
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+      padding: var(--fx-space-md) 0 var(--fx-space-xs);
+    }
+    .indicators[hidden] { display: none; }
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: var(--fx-radius-full);
+      border: none;
+      padding: 0;
+      background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.15));
+      cursor: pointer;
+      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing), width var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .dot.on { background: var(--fx-color-primary); width: 20px; }
+  `;
+let FxCarousel = _FxCarousel;
+function defineFxCarousel() {
+  return defineElement("fx-carousel", FxCarousel);
+}
+export {
+  FxCarousel,
+  defineFxCarousel
+};
+//# sourceMappingURL=carousel.js.map

package/dist/components/carousel/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sources":["../../../src/components/carousel/carousel.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-carousel> — Carrossel de slides com navegação e indicadores.\n *\n * Atributos: active (índice do slide), autoplay (ms), loop, show-arrows,\n * show-indicators.\n * Slot `slide`: cada elemento com [slot=\"slide\"] vira um slide.\n * Eventos (composed): `change` (detail: { index }).\n */\nexport class FxCarousel extends FxElement {\n  static override styles = css`\n    :host {\n      display: block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .viewport {\n      position: relative;\n      overflow: hidden;\n      border-radius: var(--fx-radius-lg);\n      border: 1px solid var(--fx-border-default);\n      background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.04));\n    }\n    .slide {\n      min-height: 200px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      padding: var(--fx-space-xl);\n      box-sizing: border-box;\n      color: var(--fx-text-default);\n    }\n    .slide[hidden] { display: none; }\n    .arrow {\n      position: absolute;\n      top: 50%;\n      transform: translateY(-50%);\n      width: 34px;\n      height: 34px;\n      border: 1px solid var(--fx-border-default);\n      border-radius: var(--fx-radius-full);\n      background: color-mix(in srgb, var(--fx-surface-background, #fff) 82%, transparent);\n      color: var(--fx-text-default);\n      font-size: calc(var(--fx-font-size) + 4px);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      backdrop-filter: blur(2px);\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing), border-color var(--fx-motion-duration-fast) var(--fx-motion-easing), color var(--fx-motion-duration-fast) var(--fx-motion-easing), transform var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .arrow:hover {\n      background: var(--fx-color-primary);\n      border-color: var(--fx-color-primary);\n      color: #fff;\n      transform: translateY(-50%) scale(1.08);\n    }\n    .arrow[hidden] { display: none; }\n    .arrow.prev { left: var(--fx-space-md); }\n    .arrow.next { right: var(--fx-space-md); }\n    .indicators {\n      display: flex;\n      justify-content: center;\n      gap: 6px;\n      padding: var(--fx-space-md) 0 var(--fx-space-xs);\n    }\n    .indicators[hidden] { display: none; }\n    .dot {\n      width: 8px;\n      height: 8px;\n      border-radius: var(--fx-radius-full);\n      border: none;\n      padding: 0;\n      background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.15));\n      cursor: pointer;\n      transition: background var(--fx-motion-duration-fast) var(--fx-motion-easing), width var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .dot.on { background: var(--fx-color-primary); width: 20px; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['active', 'autoplay', 'loop', 'show-arrows', 'show-indicators'];\n  }\n\n  get active(): number {\n    const n = Number(this.getAttr('active', '0'));\n    return Math.min(this.slideCount - 1, Math.max(0, Number.isFinite(n) ? n : 0));\n  }\n  set active(v: number) {\n    this.setAttribute('active', String(Math.min(this.slideCount - 1, Math.max(0, v))));\n  }\n\n  get slideCount(): number { return this._slides.length; }\n\n  private _slides: Element[] = [];\n  private _timer?: ReturnType<typeof setInterval>;\n\n  protected override render(): void {\n    this._slides = Array.from(this.children).filter((el) => el.matches('[slot=\"slide\"]'));\n\n    const contentsHtml = this._slides\n      .map((s, i) => `<div class=\"slide\" part=\"slide\" data-i=\"${i}\" ${i === this.active ? '' : 'hidden'}>${s.innerHTML}</div>`)\n      .join('');\n\n    this.setTemplate(`\n      <div class=\"viewport\" part=\"viewport\">\n        ${contentsHtml}\n        <button type=\"button\" class=\"arrow prev\" part=\"arrow\" aria-label=\"Anterior\" ${this.hasAttr('show-arrows') ? '' : 'hidden'}>‹</button>\n        <button type=\"button\" class=\"arrow next\" part=\"arrow\" aria-label=\"Próximo\" ${this.hasAttr('show-arrows') ? '' : 'hidden'}>›</button>\n      </div>\n      <div class=\"indicators\" part=\"indicators\" ${this.hasAttr('show-indicators') ? '' : 'hidden'}>\n        ${this._slides.map((_, i) => `<button type=\"button\" class=\"dot ${i === this.active ? 'on' : ''}\" data-i=\"${i}\" aria-label=\"Slide ${i + 1}\"></button>`).join('')}\n      </div>\n    `);\n\n    this._bind();\n    this._restartAutoplay();\n  }\n\n  protected override attributeChangedCallback(\n    name: string,\n    oldValue: string | null,\n    newValue: string | null,\n  ): void {\n    if (!this.isConnected || oldValue === newValue) return;\n    // só o índice ativo evita re-render total (preserva autoplay)\n    if (name === 'active' && this._slides.length) {\n      this._go(this.active, false);\n      this._restartAutoplay();\n      return;\n    }\n    // show-arrows/show-indicators/loop/autoplay: re-render estrutural\n    this.render();\n  }\n\n  private _go(index: number, emit = true): void {\n    const count = this._slides.length;\n    if (!count) return;\n    let target: number;\n    if (this.hasAttr('loop')) {\n      // wrap nas duas direções (permite voltar do primeiro ao último)\n      target = ((index % count) + count) % count;\n    } else {\n      target = Math.min(count - 1, Math.max(0, index));\n    }\n    // guarda: evita recursão infinita (setAttribute → attributeChangedCallback → _go)\n    if (String(target) === this.getAttribute('active')) return;\n    this.active = target;\n\n    this.root.querySelectorAll<HTMLElement>('.slide').forEach((s) => {\n      s.toggleAttribute('hidden', Number(s.dataset.i) !== target);\n    });\n    this.root.querySelectorAll<HTMLElement>('.dot').forEach((d) => {\n      d.classList.toggle('on', Number(d.dataset.i) === target);\n    });\n    if (emit) {\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: { index: target } }));\n    }\n  }\n\n  next(): void { this._go(this.active + 1); }\n  prev(): void { this._go(this.active - 1); }\n\n  private _bind(): void {\n    this.root.querySelector('.arrow.prev')?.addEventListener('click', () => this.prev());\n    this.root.querySelector('.arrow.next')?.addEventListener('click', () => this.next());\n    this.root.querySelectorAll<HTMLElement>('.dot').forEach((d) => {\n      d.addEventListener('click', () => this._go(Number(d.dataset.i)));\n    });\n  }\n\n  private _restartAutoplay(): void {\n    if (this._timer) { clearInterval(this._timer); this._timer = undefined; }\n    const ms = Number(this.getAttr('autoplay', '0'));\n    if (ms > 0) {\n      this._timer = setInterval(() => this._go(this.active + 1), ms);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._timer) { clearInterval(this._timer); this._timer = undefined; }\n  }\n}\n\nexport function defineFxCarousel(): typeof FxCarousel {\n  return defineElement('fx-carousel', FxCarousel);\n}\n"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/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/carousel/index.js

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

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

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

package/dist/components/chip/chip.d.ts

@@ -0,0 +1,19 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-chip> — Chip/Tag compacto para labels, filtros e seleções.
+ *
+ * Atributos: variant (primary|secondary|success|warning|danger|info),
+ * size (sm|md|lg), removable (mostra o botão ×), selectable (clica alterna
+ * o estado selected), selected, disabled, icon (glifo/emoji).
+ * Slot padrão: texto do chip.
+ * Eventos (composed): `remove` (ao clicar em ×) e `chip-click` (ao clicar).
+ */
+export declare class FxChip extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get selected(): boolean;
+    set selected(v: boolean);
+    protected render(): void;
+}
+export declare function defineFxChip(): typeof FxChip;
+//# sourceMappingURL=chip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/components/chip/chip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;GAQG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,SA+DpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,QAAQ,IAAI,OAAO,CAAqC;IAC5D,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;CA0ClC;AAED,wBAAgB,YAAY,IAAI,OAAO,MAAM,CAE5C"}

package/dist/components/chip/chip.js

@@ -0,0 +1,126 @@
+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 _FxChip = class _FxChip extends FxElement {
+  static get observedAttributes() {
+    return ["variant", "size", "removable", "selectable", "selected", "disabled", "icon"];
+  }
+  get selected() {
+    return this.hasAttr("selected");
+  }
+  set selected(v) {
+    this.toggleAttr("selected", v);
+  }
+  render() {
+    const icon = this.getAttr("icon");
+    const removable = this.hasAttr("removable");
+    const disabled = this.hasAttr("disabled");
+    const clickable = (this.hasAttr("selectable") || this.hasAttr("href")) && !disabled;
+    this.setTemplate(`
+      <span class="chip ${clickable ? "clickable" : ""}" part="chip" role="${clickable ? "button" : "status"}"
+        ${clickable ? `tabindex="0" aria-pressed="${this.selected}"` : ""} ${disabled ? 'aria-disabled="true"' : ""}>
+        ${icon ? `<span class="icon" aria-hidden="true">${esc(icon)}</span>` : ""}
+        <slot></slot>
+        <button type="button" class="remove" part="remove" aria-label="Remover" ${removable ? "" : "hidden"}>×</button>
+      </span>
+    `);
+    const chip = this.root.querySelector(".chip");
+    const remove = this.root.querySelector(".remove");
+    if (!chip || !remove) return;
+    remove.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.dispatchEvent(new CustomEvent("remove", { bubbles: true, composed: true }));
+    });
+    if (clickable) {
+      const toggle = () => {
+        if (this.hasAttr("selectable")) {
+          this.selected = !this.selected;
+          chip.setAttribute("aria-pressed", String(this.selected));
+        }
+        this.dispatchEvent(new CustomEvent("chip-click", { bubbles: true, composed: true }));
+      };
+      chip.addEventListener("click", toggle);
+      chip.addEventListener("keydown", (e) => {
+        const ev = e;
+        if (ev.key === "Enter" || ev.key === " ") {
+          ev.preventDefault();
+          toggle();
+        }
+      });
+    }
+  }
+};
+_FxChip.styles = css`
+    :host {
+      display: inline-block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+    }
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--fx-space-xs);
+      padding: var(--fx-space-xs) var(--fx-space-md);
+      min-height: var(--fx-size-sm);
+      box-sizing: border-box;
+      font-size: calc(var(--fx-font-size) - 2px);
+      font-weight: var(--fx-font-weight);
+      color: var(--fx-text-default);
+      background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.06));
+      border: 1px solid transparent;
+      border-radius: var(--fx-radius-full);
+      user-select: none;
+      transition:
+        background var(--fx-motion-duration-fast) var(--fx-motion-easing),
+        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),
+        filter var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    :host([size='md']) .chip { min-height: var(--fx-size-md); padding: var(--fx-space-xs) var(--fx-space-lg); }
+    :host([size='lg']) .chip { min-height: var(--fx-size-lg); font-size: var(--fx-font-size); padding: var(--fx-space-sm) var(--fx-space-xl); }
+
+    :host([variant='primary']) .chip { background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent); color: var(--fx-color-primary); }
+    :host([variant='secondary']) .chip { background: color-mix(in srgb, var(--fx-color-secondary) 14%, transparent); color: var(--fx-color-secondary); }
+    :host([variant='success']) .chip { background: color-mix(in srgb, var(--fx-color-success) 14%, transparent); color: var(--fx-color-success); }
+    :host([variant='warning']) .chip { background: color-mix(in srgb, var(--fx-color-warning) 14%, transparent); color: var(--fx-color-warning); }
+    :host([variant='danger']) .chip { background: color-mix(in srgb, var(--fx-color-danger) 14%, transparent); color: var(--fx-color-danger); }
+    :host([variant='info']) .chip { background: color-mix(in srgb, var(--fx-color-info) 14%, transparent); color: var(--fx-color-info); }
+
+    .chip.clickable { cursor: pointer; }
+    .chip.clickable:hover { filter: brightness(0.95); }
+    :host([selected]) .chip {
+      background: var(--fx-color-primary);
+      color: #fff;
+    }
+    :host([selected]) .chip:hover { filter: brightness(0.92); }
+    :host([disabled]) .chip { opacity: 0.55; cursor: not-allowed; }
+    .chip.clickable:active { transform: scale(0.97); }
+
+    .icon { line-height: 1; }
+    .remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      border: none;
+      border-radius: var(--fx-radius-full);
+      background: transparent;
+      color: inherit;
+      font-size: calc(var(--fx-font-size) + 2px);
+      line-height: 1;
+      cursor: pointer;
+      padding: 0;
+    }
+    .remove:hover { background: rgba(0, 0, 0, 0.18); }
+    .remove[hidden] { display: none; }
+  `;
+let FxChip = _FxChip;
+function defineFxChip() {
+  return defineElement("fx-chip", FxChip);
+}
+export {
+  FxChip,
+  defineFxChip
+};
+//# sourceMappingURL=chip.js.map

package/dist/components/chip/chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.js","sources":["../../../src/components/chip/chip.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-chip> — Chip/Tag compacto para labels, filtros e seleções.\n *\n * Atributos: variant (primary|secondary|success|warning|danger|info),\n * size (sm|md|lg), removable (mostra o botão ×), selectable (clica alterna\n * o estado selected), selected, disabled, icon (glifo/emoji).\n * Slot padrão: texto do chip.\n * Eventos (composed): `remove` (ao clicar em ×) e `chip-click` (ao clicar).\n */\nexport class FxChip extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-block;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n    }\n    .chip {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--fx-space-xs);\n      padding: var(--fx-space-xs) var(--fx-space-md);\n      min-height: var(--fx-size-sm);\n      box-sizing: border-box;\n      font-size: calc(var(--fx-font-size) - 2px);\n      font-weight: var(--fx-font-weight);\n      color: var(--fx-text-default);\n      background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.06));\n      border: 1px solid transparent;\n      border-radius: var(--fx-radius-full);\n      user-select: none;\n      transition:\n        background var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n        filter var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    :host([size='md']) .chip { min-height: var(--fx-size-md); padding: var(--fx-space-xs) var(--fx-space-lg); }\n    :host([size='lg']) .chip { min-height: var(--fx-size-lg); font-size: var(--fx-font-size); padding: var(--fx-space-sm) var(--fx-space-xl); }\n\n    :host([variant='primary']) .chip { background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent); color: var(--fx-color-primary); }\n    :host([variant='secondary']) .chip { background: color-mix(in srgb, var(--fx-color-secondary) 14%, transparent); color: var(--fx-color-secondary); }\n    :host([variant='success']) .chip { background: color-mix(in srgb, var(--fx-color-success) 14%, transparent); color: var(--fx-color-success); }\n    :host([variant='warning']) .chip { background: color-mix(in srgb, var(--fx-color-warning) 14%, transparent); color: var(--fx-color-warning); }\n    :host([variant='danger']) .chip { background: color-mix(in srgb, var(--fx-color-danger) 14%, transparent); color: var(--fx-color-danger); }\n    :host([variant='info']) .chip { background: color-mix(in srgb, var(--fx-color-info) 14%, transparent); color: var(--fx-color-info); }\n\n    .chip.clickable { cursor: pointer; }\n    .chip.clickable:hover { filter: brightness(0.95); }\n    :host([selected]) .chip {\n      background: var(--fx-color-primary);\n      color: #fff;\n    }\n    :host([selected]) .chip:hover { filter: brightness(0.92); }\n    :host([disabled]) .chip { opacity: 0.55; cursor: not-allowed; }\n    .chip.clickable:active { transform: scale(0.97); }\n\n    .icon { line-height: 1; }\n    .remove {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 16px;\n      height: 16px;\n      border: none;\n      border-radius: var(--fx-radius-full);\n      background: transparent;\n      color: inherit;\n      font-size: calc(var(--fx-font-size) + 2px);\n      line-height: 1;\n      cursor: pointer;\n      padding: 0;\n    }\n    .remove:hover { background: rgba(0, 0, 0, 0.18); }\n    .remove[hidden] { display: none; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['variant', 'size', 'removable', 'selectable', 'selected', 'disabled', 'icon'];\n  }\n\n  get selected(): boolean { return this.hasAttr('selected'); }\n  set selected(v: boolean) { this.toggleAttr('selected', v); }\n\n  protected override render(): void {\n    const icon = this.getAttr('icon');\n    const removable = this.hasAttr('removable');\n    const disabled = this.hasAttr('disabled');\n    const clickable = (this.hasAttr('selectable') || this.hasAttr('href')) && !disabled;\n\n    this.setTemplate(`\n      <span class=\"chip ${clickable ? 'clickable' : ''}\" part=\"chip\" role=\"${clickable ? 'button' : 'status'}\"\n        ${clickable ? `tabindex=\"0\" aria-pressed=\"${this.selected}\"` : ''} ${disabled ? 'aria-disabled=\"true\"' : ''}>\n        ${icon ? `<span class=\"icon\" aria-hidden=\"true\">${esc(icon)}</span>` : ''}\n        <slot></slot>\n        <button type=\"button\" class=\"remove\" part=\"remove\" aria-label=\"Remover\" ${removable ? '' : 'hidden'}>×</button>\n      </span>\n    `);\n\n    const chip = this.root.querySelector<HTMLElement>('.chip');\n    const remove = this.root.querySelector<HTMLButtonElement>('.remove');\n    if (!chip || !remove) return;\n\n    remove.addEventListener('click', (e) => {\n      e.stopPropagation();\n      this.dispatchEvent(new CustomEvent('remove', { bubbles: true, composed: true }));\n    });\n\n    if (clickable) {\n      const toggle = (): void => {\n        if (this.hasAttr('selectable')) {\n          this.selected = !this.selected;\n          chip.setAttribute('aria-pressed', String(this.selected));\n        }\n        this.dispatchEvent(new CustomEvent('chip-click', { bubbles: true, composed: true }));\n      };\n      chip.addEventListener('click', toggle);\n      chip.addEventListener('keydown', (e) => {\n        const ev = e as KeyboardEvent;\n        if (ev.key === 'Enter' || ev.key === ' ') {\n          ev.preventDefault();\n          toggle();\n        }\n      });\n    }\n  }\n}\n\nexport function defineFxChip(): typeof FxChip {\n  return defineElement('fx-chip', FxChip);\n}\n"],"names":[],"mappings":";;;;AAcO,MAAM,UAAN,MAAM,gBAAe,UAAU;AAAA,EAkEpC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,WAAW,QAAQ,aAAa,cAAc,YAAY,YAAY,MAAM;AAAA,EACtF;AAAA,EAEA,IAAI,WAAoB;AAAE,WAAO,KAAK,QAAQ,UAAU;AAAA,EAAG;AAAA,EAC3D,IAAI,SAAS,GAAY;AAAE,SAAK,WAAW,YAAY,CAAC;AAAA,EAAG;AAAA,EAExC,SAAe;AAChC,UAAM,OAAO,KAAK,QAAQ,MAAM;AAChC,UAAM,YAAY,KAAK,QAAQ,WAAW;AAC1C,UAAM,WAAW,KAAK,QAAQ,UAAU;AACxC,UAAM,aAAa,KAAK,QAAQ,YAAY,KAAK,KAAK,QAAQ,MAAM,MAAM,CAAC;AAE3E,SAAK,YAAY;AAAA,0BACK,YAAY,cAAc,EAAE,uBAAuB,YAAY,WAAW,QAAQ;AAAA,UAClG,YAAY,8BAA8B,KAAK,QAAQ,MAAM,EAAE,IAAI,WAAW,yBAAyB,EAAE;AAAA,UACzG,OAAO,yCAAyC,IAAI,IAAI,CAAC,YAAY,EAAE;AAAA;AAAA,kFAEC,YAAY,KAAK,QAAQ;AAAA;AAAA,KAEtG;AAED,UAAM,OAAO,KAAK,KAAK,cAA2B,OAAO;AACzD,UAAM,SAAS,KAAK,KAAK,cAAiC,SAAS;AACnE,QAAI,CAAC,QAAQ,CAAC,OAAQ;AAEtB,WAAO,iBAAiB,SAAS,CAAC,MAAM;AACtC,QAAE,gBAAA;AACF,WAAK,cAAc,IAAI,YAAY,UAAU,EAAE,SAAS,MAAM,UAAU,KAAA,CAAM,CAAC;AAAA,IACjF,CAAC;AAED,QAAI,WAAW;AACb,YAAM,SAAS,MAAY;AACzB,YAAI,KAAK,QAAQ,YAAY,GAAG;AAC9B,eAAK,WAAW,CAAC,KAAK;AACtB,eAAK,aAAa,gBAAgB,OAAO,KAAK,QAAQ,CAAC;AAAA,QACzD;AACA,aAAK,cAAc,IAAI,YAAY,cAAc,EAAE,SAAS,MAAM,UAAU,KAAA,CAAM,CAAC;AAAA,MACrF;AACA,WAAK,iBAAiB,SAAS,MAAM;AACrC,WAAK,iBAAiB,WAAW,CAAC,MAAM;AACtC,cAAM,KAAK;AACX,YAAI,GAAG,QAAQ,WAAW,GAAG,QAAQ,KAAK;AACxC,aAAG,eAAA;AACH,iBAAA;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAlHE,QAAgB,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;AADpB,IAAM,SAAN;AAqHA,SAAS,eAA8B;AAC5C,SAAO,cAAc,WAAW,MAAM;AACxC;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAE9C,OAAO,EAAE,MAAM,EAAE,CAAC;AAIlB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/chip/index.js

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

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

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

package/dist/components/confirmpopup/confirmpopup.d.ts

@@ -0,0 +1,44 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-confirmpopup> — Popup de confirmação não-modal ancorado em um elemento,
+ * exibido acima ou abaixo dinamicamente (com flip automático quando não há
+ * espaço na viewport), no estilo ConfirmPopup do PrimeVue.
+ *
+ * Atributos:
+ *  - target (seletor CSS do elemento âncora — obrigatório para abrir);
+ *  - message (texto da mensagem, quando o slot padrão não é usado);
+ *  - icon (emoji/glifo exibido antes da mensagem; se for um nome da Fenix Icons,
+ *    ex.: icon="help", é renderizado com a fonte de ícones);
+ *  - accept-label / reject-label (textos dos botões padrão);
+ *  - position (top|bottom|auto — padrão `auto`, que faz flip conforme o espaço);
+ *  - open (exibe o popup).
+ *
+ * Slots:
+ *  - padrão: corpo da mensagem (template "message");
+ *  - `accept`: conteúdo do botão de confirmação (template "accept");
+ *  - `reject`: conteúdo do botão de rejeição (template "reject").
+ *
+ * Eventos (composed): `accept` e `reject` — ambos fecham o popup.
+ */
+export declare class FxConfirmPopup extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get open(): boolean;
+    set open(value: boolean);
+    protected render(): void;
+    private _cleanup?;
+    private _previouslyFocused;
+    private _anchor;
+    /**
+     * Posiciona o popup fixo junto ao âncora, acima ou abaixo dinamicamente:
+     * `position="auto"` (padrão) prefere abaixo e faz flip para cima quando
+     * não há espaço; `top`/`bottom` forçam o lado.
+     */
+    private _position;
+    private _restoreFocus;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onReposition;
+}
+export declare function defineFxConfirmPopup(): typeof FxConfirmPopup;
+//# sourceMappingURL=confirmpopup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"confirmpopup.d.ts","sourceRoot":"","sources":["../../../src/components/confirmpopup/confirmpopup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAM5C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,cAAe,SAAQ,SAAS;IAC3C,OAAgB,MAAM,SAkFpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,OAAO,CAAiC;IACpD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAAqC;cAEzC,MAAM,IAAI,IAAI;IAiEjC,OAAO,CAAC,QAAQ,CAAC,CAAa;IAC9B,OAAO,CAAC,kBAAkB,CAA4B;IAEtD,OAAO,CAAC,OAAO;IAUf;;;;OAIG;IACH,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,aAAa;IAKZ,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IASrC,OAAO,CAAC,aAAa,CAInB;CACH;AAED,wBAAgB,oBAAoB,IAAI,OAAO,cAAc,CAE5D"}