@wrrdev/fenix-ui 1.1.0 → 1.1.2

package/dist/fenix-ui3.esm.js

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["fenix-ui2.esm.js","assets/base-css-BifSeW2H.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./fenix-ui2.esm.js","./assets/base-css-BifSeW2H.js"])))=>i.map(i=>d[i]);
 var __typeError = (msg) => {
   throw TypeError(msg);
 };
@@ -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;
@@ -4194,26 +4202,34 @@ function defineFxDialog() {
 }
 defineFxDialog();
 const scriptRel = "modulepreload";
-const assetsURL = function(dep) {
-  return "/" + dep;
+const assetsURL = function(dep, importerUrl) {
+  return new URL(dep, importerUrl).href;
 };
 const seen = {};
 const __vitePreload = function preload(baseModule, deps, importerUrl) {
   let promise = Promise.resolve();
   if (deps && deps.length > 0) {
-    document.getElementsByTagName("link");
+    const links = document.getElementsByTagName("link");
     const cspNonceMeta = document.querySelector(
       "meta[property=csp-nonce]"
     );
     const cspNonce = cspNonceMeta?.nonce || cspNonceMeta?.getAttribute("nonce");
     promise = Promise.allSettled(
       deps.map((dep) => {
-        dep = assetsURL(dep);
+        dep = assetsURL(dep, importerUrl);
         if (dep in seen) return;
         seen[dep] = true;
         const isCss = dep.endsWith(".css");
         const cssSelector = isCss ? '[rel="stylesheet"]' : "";
-        if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
+        const isBaseRelative = !!importerUrl;
+        if (isBaseRelative) {
+          for (let i = links.length - 1; i >= 0; i--) {
+            const link2 = links[i];
+            if (link2.href === dep && (!isCss || link2.rel === "stylesheet")) {
+              return;
+            }
+          }
+        } else if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
           return;
         }
         const link = document.createElement("link");
@@ -4280,7 +4296,7 @@ const _FxConfirmPopup = class _FxConfirmPopup extends FxElement {
     const message = this.getAttr("message");
     const icon = this.getAttr("icon");
     const iconIsFx = isFenixIconName(icon);
-    if (iconIsFx) void __vitePreload(() => import("./fenix-ui2.esm.js"), true ? __vite__mapDeps([0,1]) : void 0);
+    if (iconIsFx) void __vitePreload(() => import("./fenix-ui2.esm.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url);
     const acceptLabel = this.getAttr("accept-label", "Sim");
     const rejectLabel = this.getAttr("reject-label", "Não");
     this.setTemplate(`
@@ -4817,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");
   }
@@ -4836,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;
@@ -4848,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;
@@ -6306,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();
@@ -6326,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;
@@ -6362,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;
@@ -6741,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;
@@ -6796,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);
@@ -6830,7 +6897,7 @@ render_fn = function() {
   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("./fenix-ui2.esm.js"), true ? __vite__mapDeps([0,1]) : void 0);
+  if (isFxIcon) void __vitePreload(() => import("./fenix-ui2.esm.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url);
   const iconContent = isFxIcon ? iconName : KIND_ICON[kind] ?? KIND_ICON.info;
   this.shadowRoot.innerHTML = `
       <style>${CARD_CSS}</style>
@@ -6868,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;
@@ -6894,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;
@@ -7592,7 +7657,7 @@ const _FxAlert = class _FxAlert extends FxElement {
     const variant = this.getAttr("variant", "info");
     const title = this.getAttr("title");
     const iconName = this.getAttr("icon");
-    if (isFenixIconName(iconName)) void __vitePreload(() => import("./fenix-ui2.esm.js"), true ? __vite__mapDeps([0,1]) : void 0);
+    if (isFenixIconName(iconName)) void __vitePreload(() => import("./fenix-ui2.esm.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url);
     const icons = {
       info: "ℹ",
       success: "✓",
@@ -10095,6 +10160,7 @@ const _FxAccordionPanel = class _FxAccordionPanel extends FxElement {
   disconnectedCallback() {
     this._mo?.disconnect();
     this._mo = null;
+    super.disconnectedCallback();
   }
   render() {
     this.setTemplate(`