@wrrdev/fenix-ui 1.1.1 → 1.1.2

package/dist/fenix-ui3.esm.js

@@ -4139,7 +4139,8 @@ _FxDialog.styles = css`
       border: 1px solid var(--fx-border-default);
       border-radius: var(--fx-radius-lg);
       box-shadow: var(--fx-shadow-xl);
-      width: min(560px, calc(100vw - 32px));
+      /* Largura customizável por instância: defina --fx-dialog-width no elemento. */
+      width: min(var(--fx-dialog-width, 560px), calc(100vw - 32px));
       max-height: calc(100vh - 64px);
       display: flex;
       flex-direction: column;
@@ -4147,8 +4148,15 @@ _FxDialog.styles = css`
       animation: pop var(--fx-motion-duration-normal) var(--fx-motion-easing);
     }
     @keyframes pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
-    :host([size='sm']) .dialog { width: min(400px, calc(100vw - 32px)); }
-    :host([size='lg']) .dialog { width: min(800px, calc(100vw - 32px)); }
+    :host([size='sm']) .dialog { width: min(var(--fx-dialog-width, 400px), calc(100vw - 32px)); }
+    :host([size='lg']) .dialog { width: min(var(--fx-dialog-width, 800px), calc(100vw - 32px)); }
+    /* Mobile: dialog ocupa praticamente toda a largura da tela. */
+    @media (max-width: 640px) {
+      .dialog, :host([size='sm']) .dialog, :host([size='lg']) .dialog {
+        width: calc(100vw - 16px);
+        max-width: calc(100vw - 16px);
+      }
+    }
     header {
       display: flex;
       align-items: center;
@@ -4825,6 +4833,14 @@ const _FxSlider = class _FxSlider extends FxElement {
     this._bindPointer();
     this._bindKeyboard();
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._dragging) {
+      this._dragging = false;
+      if (this._onMove) window.removeEventListener("pointermove", this._onMove);
+      if (this._onUp) window.removeEventListener("pointerup", this._onUp);
+    }
+  }
   _wrap() {
     return this.root.querySelector(".track-wrap");
   }
@@ -4844,6 +4860,7 @@ const _FxSlider = class _FxSlider extends FxElement {
         new CustomEvent("input", { bubbles: true, composed: true, detail: { value: this.value } })
       );
     };
+    this._onMove = move;
     const up = (e) => {
       if (!this._dragging) return;
       this._dragging = false;
@@ -4856,6 +4873,7 @@ const _FxSlider = class _FxSlider extends FxElement {
         new CustomEvent("change", { bubbles: true, composed: true, detail: { value: this.value } })
       );
     };
+    this._onUp = up;
     wrap.addEventListener("pointerdown", (e) => {
       if (this.hasAttr("disabled")) return;
       this._dragging = true;
@@ -6314,8 +6332,11 @@ const _FxTimeline = class _FxTimeline extends FxElement {
         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>`;
+      const icon = item.getAttribute("icon");
+      const dot = icon ? `<span class="dot fx-icon" part="marker" aria-hidden="true">${esc(icon)}</span>` : `<span class="dot" part="marker" aria-hidden="true">${esc(marker)}</span>`;
+      return `<li class="event" part="event">${dot}<div class="head">${head}</div><div class="content">${item.innerHTML}</div></li>`;
     }).join("");
+    if (items.some((item) => item.hasAttribute("icon"))) void __vitePreload(() => import("./fenix-ui2.esm.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -6334,10 +6355,10 @@ _FxTimeline.styles = css`
       display: block;
       font-family: var(--fx-font-family);
       font-size: var(--fx-font-size);
-      --_marker: calc(var(--fx-font-size) - 1px);
+      --_marker: calc(var(--fx-font-size) + 6px);
     }
-    :host([size='sm']) { --_marker: calc(var(--fx-font-size) - 3px); }
-    :host([size='lg']) { --_marker: calc(var(--fx-font-size) + 2px); }
+    :host([size='sm']) { --_marker: calc(var(--fx-font-size) - 2px); }
+    :host([size='lg']) { --_marker: calc(var(--fx-font-size) + 14px); }
 
     .tl {
       list-style: none;
@@ -6370,10 +6391,22 @@ _FxTimeline.styles = css`
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      font-size: calc(var(--_marker) * 0.55);
+      font-size: calc(var(--_marker) * 0.5);
       color: var(--fx-color-primary);
       line-height: 1;
     }
+    /* marcador com ícone da fonte Fenix Icons (atributo icon no item) */
+    .dot.fx-icon {
+      font-family: var(--fx-icon-font, 'Fenix Icons');
+      font-weight: normal;
+      font-style: normal;
+      font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
+      -webkit-font-smoothing: antialiased;
+      user-select: none;
+      background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);
+      border-radius: 50%;
+      font-size: calc(var(--_marker) * 0.55);
+    }
     .head {
       display: flex;
       align-items: baseline;
@@ -6749,7 +6782,24 @@ const KIND_ICON = {
   info: "i"
 };
 const CARD_CSS = `
-:host { display: contents; }
+:host { display: contents; pointer-events: auto; }
+/* Modo explícito: sobrepõe os tokens herdados do tema global SOMENTE neste card. */
+:host([mode='dark']) {
+  --fx-surface-background: #1e293b;
+  --fx-text-default: #f1f5f9;
+  --fx-text-muted: #94a3b8;
+  --fx-border-default: #334155;
+  --fx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);
+  --fx-surface-surface-hover: rgba(255, 255, 255, .08);
+}
+:host([mode='light']) {
+  --fx-surface-background: #ffffff;
+  --fx-text-default: #1e293b;
+  --fx-text-muted: #64748b;
+  --fx-border-default: #e2e8f0;
+  --fx-shadow-lg: 0 10px 30px rgba(0, 0, 0, .14);
+  --fx-surface-surface-hover: rgba(0, 0, 0, .05);
+}
 .fx-icon {
   font-family: var(--fx-icon-font, 'Fenix Icons');
   font-weight: normal;
@@ -6804,7 +6854,16 @@ class FxToast extends HTMLElement {
     this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["kind", "title", "message", "duration", "icon"];
+    return ["kind", "title", "message", "duration", "icon", "mode"];
+  }
+  /** Esquema de cores forçado do card: 'light' | 'dark' | undefined (segue o tema). */
+  get mode() {
+    const m = this.getAttribute("mode");
+    return m === "light" || m === "dark" ? m : void 0;
+  }
+  set mode(value) {
+    if (value) this.setAttribute("mode", value);
+    else this.removeAttribute("mode");
   }
   connectedCallback() {
     if (!this.shadowRoot.firstChild) __privateMethod(this, _FxToast_instances, render_fn).call(this);
@@ -6876,9 +6935,6 @@ function regionFor(position) {
     style.gap = "8px";
     style.zIndex = "1100";
     style.pointerEvents = "none";
-    new MutationObserver(() => {
-      region.querySelectorAll("*").forEach((c) => c.style.pointerEvents = "auto");
-    }).observe(region, { childList: true });
     document.body.appendChild(region);
   }
   return region;
@@ -6902,6 +6958,7 @@ class ToastApi {
     if (message) el.setAttribute("message", message);
     el.setAttribute("position", o.position ?? "top-right");
     el.setAttribute("duration", String(o.duration ?? 4e3));
+    if (o.mode) el.setAttribute("mode", o.mode);
     regionFor(o.position ?? "top-right").appendChild(el);
     this.map.set(id, el);
     return id;
@@ -10103,6 +10160,7 @@ const _FxAccordionPanel = class _FxAccordionPanel extends FxElement {
   disconnectedCallback() {
     this._mo?.disconnect();
     this._mo = null;
+    super.disconnectedCallback();
   }
   render() {
     this.setTemplate(`