@wrrdev/fenix-ui 1.0.16 → 1.1.0

package/dist/components/rating/rating.js

@@ -0,0 +1,119 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxRating = class _FxRating extends FxElement {
+  static get observedAttributes() {
+    return ["value", "max", "readonly", "disabled", "allow-half", "size"];
+  }
+  get value() {
+    const n = Number(this.getAttr("value", "0"));
+    return Number.isFinite(n) ? Math.min(this.max, Math.max(0, n)) : 0;
+  }
+  set value(v) {
+    this.setAttribute("value", String(Math.min(this.max, Math.max(0, v))));
+    this._syncVisual();
+  }
+  get max() {
+    const n = Number(this.getAttr("max", "5"));
+    const m = Number.isFinite(n) ? Math.round(n) : 5;
+    return Math.min(10, Math.max(1, m));
+  }
+  set max(v) {
+    this.setAttribute("max", String(v));
+  }
+  render() {
+    const stars = this.max;
+    const starsHtml = Array.from({ length: stars }, (_, i) => i + 1).map((n) => `<span class="star" data-n="${n}" part="star" title="${n} ${this._label(n)}">★</span>`).join("");
+    this.setTemplate(`
+      <span class="stars" part="stars" role="radiogroup">
+        ${starsHtml}
+      </span>
+    `);
+    this._bindStars();
+    this._syncVisual();
+  }
+  _starNodes() {
+    return Array.from(this.root.querySelectorAll(".star"));
+  }
+  _label(n) {
+    return n === 1 ? "estrella" : "estrellas";
+  }
+  _syncVisual() {
+    const v = this.value;
+    this._starNodes().forEach((star) => {
+      const n = Number(star.dataset.n);
+      star.classList.toggle("filled", v >= n);
+    });
+  }
+  _bindStars() {
+    const stars = this._starNodes();
+    stars.forEach((star) => {
+      const n = Number(star.dataset.n);
+      star.addEventListener("click", () => {
+        if (this.hasAttr("readonly") || this.hasAttr("disabled")) return;
+        let next = n;
+        if (this.hasAttr("allow-half")) next += -0.5;
+        this.value = next;
+        this.dispatchEvent(
+          new CustomEvent("change", { bubbles: true, composed: true, detail: { value: this.value } })
+        );
+      });
+      star.addEventListener("mouseenter", () => {
+        if (this.hasAttr("readonly") || this.hasAttr("disabled")) return;
+        this._hover(n);
+      });
+      star.addEventListener("mouseleave", () => this._syncVisual());
+    });
+  }
+  _hover(n) {
+    this._starNodes().forEach((star) => {
+      const nn = Number(star.dataset.n);
+      star.classList.toggle("hovered", nn <= n);
+    });
+  }
+};
+_FxRating.styles = css`
+    :host {
+      display: inline-flex;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      --_star: calc(var(--fx-font-size) + 8px);
+    }
+    :host([size='sm']) { --_star: calc(var(--fx-font-size) + 4px); }
+    :host([size='lg']) { --_star: calc(var(--fx-font-size) + 14px); }
+    :host([disabled]) { opacity: 0.55; }
+    :host([disabled]) .stars { pointer-events: none; }
+    :host([readonly]) .stars { pointer-events: none; }
+
+    .stars {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      cursor: pointer;
+    }
+    .star {
+      position: relative;
+      display: inline-flex;
+      width: var(--_star);
+      height: var(--_star);
+      font-size: var(--_star);
+      line-height: 1;
+      color: var(--fx-text-muted);
+      cursor: pointer;
+      user-select: none;
+      transition: transform var(--fx-motion-duration-fast) var(--fx-motion-easing), color var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .star:hover { transform: scale(1.1); }
+    .star[hidden] { display: none; }
+    .star.filled { color: var(--fx-color-warning); }
+    .star.hovered { color: var(--fx-color-warning); }
+  `;
+let FxRating = _FxRating;
+function defineFxRating() {
+  return defineElement("fx-rating", FxRating);
+}
+export {
+  FxRating,
+  defineFxRating
+};
+//# sourceMappingURL=rating.js.map

package/dist/components/rating/rating.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.js","sources":["../../../src/components/rating/rating.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-rating> — Evaluación por estrellas.\n *\n * Atributos: value (0 a max), max (número de estrellas, default 5),\n * readonly, disabled, allow-half (permite medias estrellas),\n * size (sm|md|lg).\n * Eventos (composed): `change` (detail: { value }).\n */\nexport class FxRating extends FxElement {\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      font-family: var(--fx-font-family);\n      font-size: var(--fx-font-size);\n      --_star: calc(var(--fx-font-size) + 8px);\n    }\n    :host([size='sm']) { --_star: calc(var(--fx-font-size) + 4px); }\n    :host([size='lg']) { --_star: calc(var(--fx-font-size) + 14px); }\n    :host([disabled]) { opacity: 0.55; }\n    :host([disabled]) .stars { pointer-events: none; }\n    :host([readonly]) .stars { pointer-events: none; }\n\n    .stars {\n      display: inline-flex;\n      align-items: center;\n      gap: 2px;\n      cursor: pointer;\n    }\n    .star {\n      position: relative;\n      display: inline-flex;\n      width: var(--_star);\n      height: var(--_star);\n      font-size: var(--_star);\n      line-height: 1;\n      color: var(--fx-text-muted);\n      cursor: pointer;\n      user-select: none;\n      transition: transform var(--fx-motion-duration-fast) var(--fx-motion-easing), color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .star:hover { transform: scale(1.1); }\n    .star[hidden] { display: none; }\n    .star.filled { color: var(--fx-color-warning); }\n    .star.hovered { color: var(--fx-color-warning); }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['value', 'max', 'readonly', 'disabled', 'allow-half', 'size'];\n  }\n\n  get value(): number {\n    const n = Number(this.getAttr('value', '0'));\n    return Number.isFinite(n) ? Math.min(this.max, Math.max(0, n)) : 0;\n  }\n  set value(v: number) {\n    this.setAttribute('value', String(Math.min(this.max, Math.max(0, v))));\n    this._syncVisual();\n  }\n\n  get max(): number {\n    const n = Number(this.getAttr('max', '5'));\n    const m = Number.isFinite(n) ? Math.round(n) : 5;\n    return Math.min(10, Math.max(1, m));\n  }\n  set max(v: number) { this.setAttribute('max', String(v)); }\n\n  protected override render(): void {\n    const stars = this.max;\n    const starsHtml = Array.from({ length: stars }, (_, i) => i + 1)\n      .map((n) => `<span class=\"star\" data-n=\"${n}\" part=\"star\" title=\"${n} ${this._label(n)}\">★</span>`)\n      .join('');\n\n    this.setTemplate(`\n      <span class=\"stars\" part=\"stars\" role=\"radiogroup\">\n        ${starsHtml}\n      </span>\n    `);\n\n    this._bindStars();\n    this._syncVisual();\n  }\n\n  private _starNodes(): HTMLElement[] {\n    return Array.from(this.root.querySelectorAll<HTMLElement>('.star'));\n  }\n\n  private _label(n: number): string {\n    return n === 1 ? 'estrella' : 'estrellas';\n  }\n\n  private _syncVisual(): void {\n    const v = this.value;\n    this._starNodes().forEach((star) => {\n      const n = Number(star.dataset.n);\n      star.classList.toggle('filled', v >= n);\n    });\n  }\n\n  private _bindStars(): void {\n    const stars = this._starNodes();\n    stars.forEach((star) => {\n      const n = Number(star.dataset.n);\n      star.addEventListener('click', () => {\n        if (this.hasAttr('readonly') || this.hasAttr('disabled')) return;\n        let next = n;\n        if (this.hasAttr('allow-half')) next += -0.5; // para simplificar, valor entero\n        this.value = next;\n        this.dispatchEvent(\n          new CustomEvent('change', { bubbles: true, composed: true, detail: { value: this.value } }),\n        );\n      });\n      star.addEventListener('mouseenter', () => {\n        if (this.hasAttr('readonly') || this.hasAttr('disabled')) return;\n        this._hover(n);\n      });\n      star.addEventListener('mouseleave', () => this._syncVisual());\n    });\n  }\n\n  private _hover(n: number): void {\n    this._starNodes().forEach((star) => {\n      const nn = Number(star.dataset.n);\n      star.classList.toggle('hovered', nn <= n);\n    });\n  }\n}\n\nexport function defineFxRating(): typeof FxRating {\n  return defineElement('fx-rating', FxRating);\n}"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,CAAC;AAIpB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/slider/index.js

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

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

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

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,33 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-slider> — Controle deslizante para seleção de valor numérico em um intervalo.
+ *
+ * Atributos: min, max, step, value, size (sm|md|lg), disabled, show-value,
+ * label (rótulo acima do trilho).
+ * Eventos (composed): `input` (durante o arraste) e `change` (ao soltar) —
+ * ambos com `detail: { value: number }`.
+ */
+export declare class FxSlider extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get min(): number;
+    get max(): number;
+    get step(): number;
+    get value(): number;
+    set value(v: number);
+    private _num;
+    private _clamp;
+    /** Arredonda para o múltiplo de `step` mais próximo dentro do intervalo. */
+    private _snap;
+    /** Percentual (0-100) do valor atual dentro do intervalo. */
+    private _pct;
+    protected render(): void;
+    private _dragging;
+    private _wrap;
+    private _bindPointer;
+    private _bindKeyboard;
+    /** Atualiza fill/thumb/tooltip/aria sem re-renderizar o template (evita perder o drag). */
+    private _syncVisual;
+}
+export declare function defineFxSlider(): typeof FxSlider;
+//# sourceMappingURL=slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;GAOG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACrC,OAAgB,MAAM,SA8EpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,GAAG,IAAI,MAAM,CAAgC;IACjD,IAAI,GAAG,IAAI,MAAM,CAAkC;IACnD,IAAI,IAAI,IAAI,MAAM,CAAiC;IAEnD,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAKlB;IAED,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,MAAM;IAId,4EAA4E;IAC5E,OAAO,CAAC,KAAK;IAMb,6DAA6D;IAC7D,OAAO,CAAC,IAAI;cAKO,MAAM,IAAI,IAAI;IAoBjC,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO,CAAC,KAAK;IAIb,OAAO,CAAC,YAAY;IA8CpB,OAAO,CAAC,aAAa;IA6BrB,2FAA2F;IAC3F,OAAO,CAAC,WAAW;CAiBpB;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}

package/dist/components/slider/slider.js

@@ -0,0 +1,260 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxSlider = class _FxSlider extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._dragging = false;
+  }
+  static get observedAttributes() {
+    return ["min", "max", "step", "size", "disabled", "show-value", "label"];
+  }
+  get min() {
+    return this._num("min", 0);
+  }
+  get max() {
+    return this._num("max", 100);
+  }
+  get step() {
+    return this._num("step", 1);
+  }
+  get value() {
+    return this._clamp(this._num("value", this.min));
+  }
+  set value(v) {
+    const snapped = this._snap(v);
+    this.setAttribute("value", String(snapped));
+    if (this.isConnected) this._syncVisual();
+  }
+  _num(attr, fallback) {
+    const raw = this.getAttribute(attr);
+    if (raw === null || raw === "") return fallback;
+    const n = Number(raw);
+    return Number.isFinite(n) ? n : fallback;
+  }
+  _clamp(v) {
+    return Math.min(this.max, Math.max(this.min, v));
+  }
+  /** Arredonda para o múltiplo de `step` mais próximo dentro do intervalo. */
+  _snap(v) {
+    const step = this.step || 1;
+    const snapped = Math.round((this._clamp(v) - this.min) / step) * step + this.min;
+    return Number(this._clamp(snapped).toFixed(10));
+  }
+  /** Percentual (0-100) do valor atual dentro do intervalo. */
+  _pct() {
+    const span = this.max - this.min;
+    return span <= 0 ? 0 : (this.value - this.min) / span * 100;
+  }
+  render() {
+    const pct = this._pct();
+    const label = this.getAttr("label");
+    const showValue = this.hasAttr("show-value");
+    this.setTemplate(`
+      ${label ? `<div class="label" part="label"><span>${label}</span>${showValue ? `<span>${this.value}</span>` : ""}</div>` : ""}
+      <div class="track-wrap" part="track" tabindex="0" role="slider"
+        aria-valuemin="${this.min}" aria-valuemax="${this.max}" aria-valuenow="${this.value}"
+        aria-label="${label || "Slider"}" ${this.hasAttr("disabled") ? 'aria-disabled="true"' : ""}>
+        <div class="track"><div class="fill" part="fill" style="width: ${pct}%"></div></div>
+        <div class="thumb" part="thumb" style="left: ${pct}%"></div>
+        ${showValue ? `<span class="value" style="left: ${pct}%">${this.value}</span>` : ""}
+      </div>
+    `);
+    this._bindPointer();
+    this._bindKeyboard();
+  }
+  _wrap() {
+    return this.root.querySelector(".track-wrap");
+  }
+  _bindPointer() {
+    const wrap = this._wrap();
+    if (!wrap) return;
+    const valueFromEvent = (e) => {
+      const rect = wrap.getBoundingClientRect();
+      const ratio = rect.width <= 0 ? 0 : (e.clientX - rect.left) / rect.width;
+      return this.min + ratio * (this.max - this.min);
+    };
+    const move = (e) => {
+      if (!this._dragging) return;
+      this.value = valueFromEvent(e);
+      this._syncVisual();
+      this.dispatchEvent(
+        new CustomEvent("input", { bubbles: true, composed: true, detail: { value: this.value } })
+      );
+    };
+    const up = (e) => {
+      if (!this._dragging) return;
+      this._dragging = false;
+      wrap.classList.remove("dragging");
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+      this.value = valueFromEvent(e);
+      this._syncVisual();
+      this.dispatchEvent(
+        new CustomEvent("change", { bubbles: true, composed: true, detail: { value: this.value } })
+      );
+    };
+    wrap.addEventListener("pointerdown", (e) => {
+      if (this.hasAttr("disabled")) return;
+      this._dragging = true;
+      wrap.classList.add("dragging");
+      wrap.focus();
+      this.value = valueFromEvent(e);
+      this._syncVisual();
+      this.dispatchEvent(
+        new CustomEvent("input", { bubbles: true, composed: true, detail: { value: this.value } })
+      );
+      window.addEventListener("pointermove", move);
+      window.addEventListener("pointerup", up);
+    });
+  }
+  _bindKeyboard() {
+    const wrap = this._wrap();
+    if (!wrap) return;
+    wrap.addEventListener("keydown", (e) => {
+      if (this.hasAttr("disabled")) return;
+      const ev = e;
+      const big = (this.max - this.min) / 10;
+      let next = null;
+      switch (ev.key) {
+        case "ArrowRight":
+        case "ArrowUp":
+          next = this.value + this.step;
+          break;
+        case "ArrowLeft":
+        case "ArrowDown":
+          next = this.value - this.step;
+          break;
+        case "PageUp":
+          next = this.value + big;
+          break;
+        case "PageDown":
+          next = this.value - big;
+          break;
+        case "Home":
+          next = this.min;
+          break;
+        case "End":
+          next = this.max;
+          break;
+        default:
+          return;
+      }
+      ev.preventDefault();
+      this.value = next;
+      this._syncVisual();
+      this.dispatchEvent(
+        new CustomEvent("input", { bubbles: true, composed: true, detail: { value: this.value } })
+      );
+      this.dispatchEvent(
+        new CustomEvent("change", { bubbles: true, composed: true, detail: { value: this.value } })
+      );
+    });
+  }
+  /** Atualiza fill/thumb/tooltip/aria sem re-renderizar o template (evita perder o drag). */
+  _syncVisual() {
+    const pct = this._pct();
+    const wrap = this._wrap();
+    if (!wrap) return;
+    const fill = wrap.querySelector(".fill");
+    const thumb = wrap.querySelector(".thumb");
+    const tip = wrap.querySelector(".value");
+    if (fill) fill.style.width = `${pct}%`;
+    if (thumb) thumb.style.left = `${pct}%`;
+    if (tip) {
+      tip.style.left = `${pct}%`;
+      tip.textContent = String(this.value);
+    }
+    wrap.setAttribute("aria-valuenow", String(this.value));
+    const labelPct = this.root.querySelector(".label span:last-child");
+    if (labelPct) labelPct.textContent = String(this.value);
+  }
+};
+_FxSlider.styles = css`
+    :host {
+      display: block;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      --_track-h: 6px;
+      --_thumb: 18px;
+    }
+    :host([size='sm']) { --_track-h: 4px; --_thumb: 14px; }
+    :host([size='lg']) { --_track-h: 8px; --_thumb: 22px; }
+    :host([disabled]) { opacity: 0.55; pointer-events: none; }
+
+    .label {
+      font-size: calc(var(--fx-font-size) - 2px);
+      color: var(--fx-text-muted);
+      margin-bottom: var(--fx-space-xs);
+      display: flex;
+      justify-content: space-between;
+      gap: var(--fx-space-md);
+      align-items: center;
+    }
+    .track-wrap {
+      position: relative;
+      display: flex;
+      align-items: center;
+      height: var(--_thumb);
+      cursor: pointer;
+      touch-action: none;
+    }
+    .track {
+      width: 100%;
+      height: var(--_track-h);
+      border-radius: var(--fx-radius-full);
+      background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.08));
+      overflow: hidden;
+    }
+    .fill {
+      height: 100%;
+      background: var(--fx-color-primary);
+      border-radius: var(--fx-radius-full);
+    }
+    .thumb {
+      position: absolute;
+      top: 50%;
+      width: var(--_thumb);
+      height: var(--_thumb);
+      border-radius: var(--fx-radius-full);
+      background: var(--fx-surface-background);
+      border: 2px solid var(--fx-color-primary);
+      box-shadow: var(--fx-shadow-sm);
+      transform: translate(-50%, -50%);
+      transition: box-shadow var(--fx-motion-duration-fast) var(--fx-motion-easing);
+      box-sizing: border-box;
+    }
+    .track-wrap:hover .thumb,
+    .track-wrap.dragging .thumb { box-shadow: var(--fx-effect-focus-ring, none); }
+    .track-wrap:focus-visible { outline: none; }
+    .track-wrap:focus-visible .thumb {
+      box-shadow: var(--fx-effect-focus-ring, none);
+    }
+    .value {
+      position: absolute;
+      bottom: calc(100% + 6px);
+      transform: translateX(-50%);
+      background: var(--fx-text-default, #1e293b);
+      color: var(--fx-surface-background, #fff);
+      font-size: calc(var(--fx-font-size) - 3px);
+      font-weight: 600;
+      padding: 2px var(--fx-space-xs);
+      border-radius: var(--fx-radius-sm);
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .track-wrap:hover .value,
+    .track-wrap.dragging .value,
+    .track-wrap:focus-visible .value { opacity: 1; }
+  `;
+let FxSlider = _FxSlider;
+function defineFxSlider() {
+  return defineElement("fx-slider", FxSlider);
+}
+export {
+  FxSlider,
+  defineFxSlider
+};
+//# sourceMappingURL=slider.js.map

package/dist/components/slider/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sources":["../../../src/components/slider/slider.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-slider> — Controle deslizante para seleção de valor numérico em um intervalo.\n *\n * Atributos: min, max, step, value, size (sm|md|lg), disabled, show-value,\n * label (rótulo acima do trilho).\n * Eventos (composed): `input` (durante o arraste) e `change` (ao soltar) —\n * ambos com `detail: { value: number }`.\n */\nexport class FxSlider 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      --_track-h: 6px;\n      --_thumb: 18px;\n    }\n    :host([size='sm']) { --_track-h: 4px; --_thumb: 14px; }\n    :host([size='lg']) { --_track-h: 8px; --_thumb: 22px; }\n    :host([disabled]) { opacity: 0.55; pointer-events: none; }\n\n    .label {\n      font-size: calc(var(--fx-font-size) - 2px);\n      color: var(--fx-text-muted);\n      margin-bottom: var(--fx-space-xs);\n      display: flex;\n      justify-content: space-between;\n      gap: var(--fx-space-md);\n      align-items: center;\n    }\n    .track-wrap {\n      position: relative;\n      display: flex;\n      align-items: center;\n      height: var(--_thumb);\n      cursor: pointer;\n      touch-action: none;\n    }\n    .track {\n      width: 100%;\n      height: var(--_track-h);\n      border-radius: var(--fx-radius-full);\n      background: var(--fx-surface-surface-hover, rgba(0, 0, 0, 0.08));\n      overflow: hidden;\n    }\n    .fill {\n      height: 100%;\n      background: var(--fx-color-primary);\n      border-radius: var(--fx-radius-full);\n    }\n    .thumb {\n      position: absolute;\n      top: 50%;\n      width: var(--_thumb);\n      height: var(--_thumb);\n      border-radius: var(--fx-radius-full);\n      background: var(--fx-surface-background);\n      border: 2px solid var(--fx-color-primary);\n      box-shadow: var(--fx-shadow-sm);\n      transform: translate(-50%, -50%);\n      transition: box-shadow var(--fx-motion-duration-fast) var(--fx-motion-easing);\n      box-sizing: border-box;\n    }\n    .track-wrap:hover .thumb,\n    .track-wrap.dragging .thumb { box-shadow: var(--fx-effect-focus-ring, none); }\n    .track-wrap:focus-visible { outline: none; }\n    .track-wrap:focus-visible .thumb {\n      box-shadow: var(--fx-effect-focus-ring, none);\n    }\n    .value {\n      position: absolute;\n      bottom: calc(100% + 6px);\n      transform: translateX(-50%);\n      background: var(--fx-text-default, #1e293b);\n      color: var(--fx-surface-background, #fff);\n      font-size: calc(var(--fx-font-size) - 3px);\n      font-weight: 600;\n      padding: 2px var(--fx-space-xs);\n      border-radius: var(--fx-radius-sm);\n      white-space: nowrap;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity var(--fx-motion-duration-fast) var(--fx-motion-easing);\n    }\n    .track-wrap:hover .value,\n    .track-wrap.dragging .value,\n    .track-wrap:focus-visible .value { opacity: 1; }\n  `;\n\n  static override get observedAttributes(): string[] {\n    return ['min', 'max', 'step', 'size', 'disabled', 'show-value', 'label'];\n  }\n\n  get min(): number { return this._num('min', 0); }\n  get max(): number { return this._num('max', 100); }\n  get step(): number { return this._num('step', 1); }\n\n  get value(): number {\n    return this._clamp(this._num('value', this.min));\n  }\n  set value(v: number) {\n    const snapped = this._snap(v);\n    this.setAttribute('value', String(snapped));\n    // atualiza visual sem re-render (preserva estado de drag/foco)\n    if (this.isConnected) this._syncVisual();\n  }\n\n  private _num(attr: string, fallback: number): number {\n    const raw = this.getAttribute(attr);\n    if (raw === null || raw === '') return fallback;\n    const n = Number(raw);\n    return Number.isFinite(n) ? n : fallback;\n  }\n\n  private _clamp(v: number): number {\n    return Math.min(this.max, Math.max(this.min, v));\n  }\n\n  /** Arredonda para o múltiplo de `step` mais próximo dentro do intervalo. */\n  private _snap(v: number): number {\n    const step = this.step || 1;\n    const snapped = Math.round((this._clamp(v) - this.min) / step) * step + this.min;\n    return Number(this._clamp(snapped).toFixed(10));\n  }\n\n  /** Percentual (0-100) do valor atual dentro do intervalo. */\n  private _pct(): number {\n    const span = this.max - this.min;\n    return span <= 0 ? 0 : ((this.value - this.min) / span) * 100;\n  }\n\n  protected override render(): void {\n    const pct = this._pct();\n    const label = this.getAttr('label');\n    const showValue = this.hasAttr('show-value');\n\n    this.setTemplate(`\n      ${label ? `<div class=\"label\" part=\"label\"><span>${label}</span>${showValue ? `<span>${this.value}</span>` : ''}</div>` : ''}\n      <div class=\"track-wrap\" part=\"track\" tabindex=\"0\" role=\"slider\"\n        aria-valuemin=\"${this.min}\" aria-valuemax=\"${this.max}\" aria-valuenow=\"${this.value}\"\n        aria-label=\"${label || 'Slider'}\" ${this.hasAttr('disabled') ? 'aria-disabled=\"true\"' : ''}>\n        <div class=\"track\"><div class=\"fill\" part=\"fill\" style=\"width: ${pct}%\"></div></div>\n        <div class=\"thumb\" part=\"thumb\" style=\"left: ${pct}%\"></div>\n        ${showValue ? `<span class=\"value\" style=\"left: ${pct}%\">${this.value}</span>` : ''}\n      </div>\n    `);\n\n    this._bindPointer();\n    this._bindKeyboard();\n  }\n\n  private _dragging = false;\n\n  private _wrap(): HTMLElement | null {\n    return this.root.querySelector<HTMLElement>('.track-wrap');\n  }\n\n  private _bindPointer(): void {\n    const wrap = this._wrap();\n    if (!wrap) return;\n\n    const valueFromEvent = (e: PointerEvent): number => {\n      const rect = wrap.getBoundingClientRect();\n      const ratio = rect.width <= 0 ? 0 : (e.clientX - rect.left) / rect.width;\n      return this.min + ratio * (this.max - this.min);\n    };\n\n    const move = (e: PointerEvent): void => {\n      if (!this._dragging) return;\n      this.value = valueFromEvent(e);\n      this._syncVisual();\n      this.dispatchEvent(\n        new CustomEvent('input', { bubbles: true, composed: true, detail: { value: this.value } }),\n      );\n    };\n    const up = (e: PointerEvent): void => {\n      if (!this._dragging) return;\n      this._dragging = false;\n      wrap.classList.remove('dragging');\n      window.removeEventListener('pointermove', move);\n      window.removeEventListener('pointerup', up);\n      this.value = valueFromEvent(e);\n      this._syncVisual();\n      this.dispatchEvent(\n        new CustomEvent('change', { bubbles: true, composed: true, detail: { value: this.value } }),\n      );\n    };\n\n    wrap.addEventListener('pointerdown', (e) => {\n      if (this.hasAttr('disabled')) return;\n      this._dragging = true;\n      wrap.classList.add('dragging');\n      wrap.focus();\n      this.value = valueFromEvent(e);\n      this._syncVisual();\n      this.dispatchEvent(\n        new CustomEvent('input', { bubbles: true, composed: true, detail: { value: this.value } }),\n      );\n      window.addEventListener('pointermove', move);\n      window.addEventListener('pointerup', up);\n    });\n  }\n\n  private _bindKeyboard(): void {\n    const wrap = this._wrap();\n    if (!wrap) return;\n    wrap.addEventListener('keydown', (e) => {\n      if (this.hasAttr('disabled')) return;\n      const ev = e as KeyboardEvent;\n      const big = (this.max - this.min) / 10;\n      let next: number | null = null;\n      switch (ev.key) {\n        case 'ArrowRight': case 'ArrowUp': next = this.value + this.step; break;\n        case 'ArrowLeft': case 'ArrowDown': next = this.value - this.step; break;\n        case 'PageUp': next = this.value + big; break;\n        case 'PageDown': next = this.value - big; break;\n        case 'Home': next = this.min; break;\n        case 'End': next = this.max; break;\n        default: return;\n      }\n      ev.preventDefault();\n      this.value = next;\n      this._syncVisual();\n      this.dispatchEvent(\n        new CustomEvent('input', { bubbles: true, composed: true, detail: { value: this.value } }),\n      );\n      this.dispatchEvent(\n        new CustomEvent('change', { bubbles: true, composed: true, detail: { value: this.value } }),\n      );\n    });\n  }\n\n  /** Atualiza fill/thumb/tooltip/aria sem re-renderizar o template (evita perder o drag). */\n  private _syncVisual(): void {\n    const pct = this._pct();\n    const wrap = this._wrap();\n    if (!wrap) return;\n    const fill = wrap.querySelector<HTMLElement>('.fill');\n    const thumb = wrap.querySelector<HTMLElement>('.thumb');\n    const tip = wrap.querySelector<HTMLElement>('.value');\n    if (fill) fill.style.width = `${pct}%`;\n    if (thumb) thumb.style.left = `${pct}%`;\n    if (tip) {\n      tip.style.left = `${pct}%`;\n      tip.textContent = String(this.value);\n    }\n    wrap.setAttribute('aria-valuenow', String(this.value));\n    const labelPct = this.root.querySelector<HTMLElement>('.label span:last-child');\n    if (labelPct) labelPct.textContent = String(this.value);\n  }\n}\n\nexport function defineFxSlider(): typeof FxSlider {\n  return defineElement('fx-slider', FxSlider);\n}\n\n"],"names":[],"mappings":"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"}

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

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

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

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

package/dist/components/stepper/index.js

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

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

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

package/dist/components/stepper/stepper.d.ts

@@ -0,0 +1,33 @@
+import { FxElement } from '../../core/base';
+/**
+ * <fx-stepper> — Asistente de pasos (wizard) para flujos multi-etapa.
+ *
+ * Uso declarativo: cada hijo directo con el atributo `step` define un paso.
+ * Uso imperativo: leer/escribir la propiedad `active` para navegar.
+ *
+ * Atributos: active (índice del paso activo), linear (solo avanzar en orden),
+ * show-numbers (muestra el número en el indicador).
+ * Slots: `header` (customiza el indicador de pasos), un slot por paso
+ * (slot="step-0", slot="step-1", ...).
+ *
+ * Eventos (composed): `change` (detail: { index }) y `complete` al llegar al último.
+ */
+export declare class FxStepper extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    get stepCount(): number;
+    get active(): number;
+    set active(v: number);
+    get isLast(): boolean;
+    /** Navega al paso (emite change). Con linear, solo permite avanzar de a uno. */
+    goTo(index: number): void;
+    next(): void;
+    prev(): void;
+    private _titles;
+    private _panels;
+    protected render(): void;
+    private _bindSteps;
+    protected connectedCallback(): void;
+}
+export declare function defineFxStepper(): typeof FxStepper;
+//# sourceMappingURL=stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../../../src/components/stepper/stepper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;;;;GAYG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACtC,OAAgB,MAAM,SA+DpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,SAAS,IAAI,MAAM,CAAgC;IACvD,IAAI,MAAM,IAAI,MAAM,CAGnB;IACD,IAAI,MAAM,CAAC,CAAC,EAAE,MAAM,EAEnB;IAED,IAAI,MAAM,IAAI,OAAO,CAA8C;IAEnE,gFAAgF;IAChF,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUzB,IAAI,IAAI,IAAI;IACZ,IAAI,IAAI,IAAI;IAEZ,OAAO,CAAC,OAAO,CAAgB;IAC/B,OAAO,CAAC,OAAO,CAAiB;cAEb,MAAM,IAAI,IAAI;IAkCjC,OAAO,CAAC,UAAU;cAoBC,iBAAiB,IAAI,IAAI;CAI7C;AAED,wBAAgB,eAAe,IAAI,OAAO,SAAS,CAElD"}