@thibezer/ui-components-kit 2.8.0 → 2.8.2

package/dist/ui-skeleton-DI4_9WOX.js

@@ -0,0 +1,428 @@
+var C = Object.defineProperty;
+var S = (n, l, t) => l in n ? C(n, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[l] = t;
+var s = (n, l, t) => S(n, typeof l != "symbol" ? l + "" : l, t);
+import { L } from "./listener-bag-DQgv7OON.js";
+import { d as h, S as x } from "./ssr-safe-5cWfJP-s.js";
+const N = ':host{display:block;box-sizing:border-box;font-family:var(--ui-fonte-base, "Inter", sans-serif)}.ui-drawer__backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:calc(var(--ui-z-drawer, 700) - 1);opacity:0;pointer-events:none;transition:opacity .25s ease}:host([aberto]) .ui-drawer__backdrop,:host([open]) .ui-drawer__backdrop{opacity:1;pointer-events:auto}.ui-drawer__painel{position:fixed;z-index:var(--ui-z-drawer, 700);background-color:var(--ui-cor-fundo-card, #18181c);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));box-shadow:var(--ui-sombra-lg, 0 16px 40px rgba(0, 0, 0, .7));display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:transform .25s cubic-bezier(.16,1,.3,1),opacity .2s ease,visibility .2s ease;box-sizing:border-box;color:var(--ui-cor-texto, #e1e1e6)}:host(:not([posicao])) .ui-drawer__painel,:host([posicao="direita"]) .ui-drawer__painel,:host([position="right"]) .ui-drawer__painel{top:0;right:0;bottom:0;width:var(--ui-drawer-largura, 480px);max-width:92vw;height:100vh;transform:translate(100%);border-left:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .16))}:host([aberto]:not([posicao])) .ui-drawer__painel,:host([open]:not([posicao])) .ui-drawer__painel,:host([aberto][posicao="direita"]) .ui-drawer__painel,:host([open][posicao="direita"]) .ui-drawer__painel,:host([aberto][position="right"]) .ui-drawer__painel,:host([open][position="right"]) .ui-drawer__painel{transform:translate(0);opacity:1;visibility:visible;pointer-events:auto}:host([posicao="esquerda"]) .ui-drawer__painel,:host([position="left"]) .ui-drawer__painel{top:0;left:0;bottom:0;width:var(--ui-drawer-largura, 480px);max-width:92vw;height:100vh;transform:translate(-100%);border-right:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .16))}:host([aberto][posicao="esquerda"]) .ui-drawer__painel,:host([open][posicao="esquerda"]) .ui-drawer__painel,:host([aberto][position="left"]) .ui-drawer__painel,:host([open][position="left"]) .ui-drawer__painel{transform:translate(0);opacity:1;visibility:visible;pointer-events:auto}:host([posicao="baixo"]) .ui-drawer__painel,:host([position="bottom"]) .ui-drawer__painel{bottom:0;left:0;right:0;width:100vw;max-height:85vh;transform:translateY(100%);border-top:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .16));border-top-left-radius:14px;border-top-right-radius:14px}:host([aberto][posicao="baixo"]) .ui-drawer__painel,:host([open][posicao="baixo"]) .ui-drawer__painel,:host([aberto][position="bottom"]) .ui-drawer__painel,:host([open][position="bottom"]) .ui-drawer__painel{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}:host([posicao="cima"]) .ui-drawer__painel,:host([position="top"]) .ui-drawer__painel{top:0;left:0;right:0;width:100vw;max-height:85vh;transform:translateY(-100%);border-bottom:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .16));border-bottom-left-radius:14px;border-bottom-right-radius:14px}:host([aberto][posicao="cima"]) .ui-drawer__painel,:host([open][posicao="cima"]) .ui-drawer__painel,:host([aberto][position="top"]) .ui-drawer__painel,:host([open][position="top"]) .ui-drawer__painel{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}.ui-drawer__header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .08));flex-shrink:0}.ui-drawer__titulo-container{display:flex;flex-direction:column;gap:2px}.ui-drawer__titulo{margin:0;font-size:16px;font-weight:600;color:var(--ui-cor-texto, #ffffff)}.ui-drawer__descricao{margin:0;font-size:13px;color:var(--ui-cor-texto-secundario, #888899)}.ui-drawer__close{background:transparent;border:none;color:var(--ui-cor-texto-secundario, #888899);font-size:16px;cursor:pointer;padding:6px;border-radius:6px;line-height:1;display:flex;align-items:center;justify-content:center;transition:color .15s ease,background-color .15s ease}.ui-drawer__close svg,.ui-drawer__close ::slotted(svg){shape-rendering:geometricPrecision}.ui-drawer__close:hover{color:var(--ui-cor-texto, #ffffff);background-color:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-drawer__close:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-cor-primaria, #00E08A)}.ui-drawer__body{padding:20px;overflow-y:auto;flex:1;box-sizing:border-box}.ui-drawer__footer{padding:14px 20px;border-top:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .08));display:flex;align-items:center;justify-content:flex-end;gap:10px;background-color:var(--ui-cor-fundo-recuado, rgba(0, 0, 0, .15));flex-shrink:0}@starting-style{:host([aberto]:not([posicao])) .ui-drawer__painel,:host([open]:not([posicao])) .ui-drawer__painel,:host([aberto][posicao="direita"]) .ui-drawer__painel,:host([open][posicao="direita"]) .ui-drawer__painel{transform:translate(100%);opacity:0}:host([aberto][posicao="esquerda"]) .ui-drawer__painel,:host([open][posicao="esquerda"]) .ui-drawer__painel{transform:translate(-100%);opacity:0}:host([aberto][posicao="baixo"]) .ui-drawer__painel,:host([open][posicao="baixo"]) .ui-drawer__painel{transform:translateY(100%);opacity:0}:host([aberto]) .ui-drawer__backdrop,:host([open]) .ui-drawer__backdrop{opacity:0}}', g = 'a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"]), ui-campo-texto, ui-botao, ui-botao-primario, ui-checkbox, ui-switch, ui-lista-flutuante, ui-radio, ui-select, ui-segmented';
+function _(n, l) {
+  let t = Array.from(n.querySelectorAll(g));
+  t = t.filter((i) => {
+    try {
+      return window.getComputedStyle(i).display !== "none";
+    } catch {
+      return !0;
+    }
+  });
+  const e = n.querySelectorAll("slot"), o = [];
+  return e.forEach((i) => {
+    i.assignedElements({ flatten: !0 }).forEach((a) => {
+      a instanceof HTMLElement && (a.matches(g) && o.push(a), o.push(...Array.from(a.querySelectorAll(g))));
+    });
+  }), [...t, ...o].filter((i) => !i.hasAttribute("disabled") && i.getAttribute("aria-hidden") !== "true");
+}
+function q(n) {
+  if (typeof document > "u") return !0;
+  const l = Array.from(
+    document.querySelectorAll("ui-drawer[aberto], ui-drawer[open], ui-sheet[aberto], ui-sheet[open]")
+  );
+  return l[l.length - 1] === n;
+}
+function z(n, l, t, e) {
+  if (l.length === 0) {
+    n.preventDefault();
+    return;
+  }
+  const o = l[0], i = l[l.length - 1], r = t.getRootNode(), a = r == null ? void 0 : r.activeElement;
+  n.shiftKey ? (a === o || !t.contains(a) && !e.contains(a)) && (n.preventDefault(), i.focus()) : (a === i || !t.contains(a) && !e.contains(a)) && (n.preventDefault(), o.focus());
+}
+function M() {
+  if (typeof document > "u") return;
+  document.querySelectorAll(
+    "ui-modal[aberto], ui-modal[open], ui-dialog[aberto], ui-dialog[open], ui-drawer[aberto], ui-drawer[open], ui-sheet[aberto], ui-sheet[open]"
+  ).length > 0 ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
+}
+class b extends x {
+  constructor() {
+    super();
+    s(this, "backdropElement");
+    s(this, "painelElement");
+    s(this, "tituloElement");
+    s(this, "descricaoElement");
+    s(this, "closeElement");
+    s(this, "listeners", new L());
+    s(this, "_elementoGatilho", null);
+    s(this, "_focables", []);
+    s(this, "handleSlotChange", () => {
+      this.syncState();
+    });
+    s(this, "handleBackdropClick", (t) => {
+      t.stopPropagation(), this.hasAttribute("estatico") || this.hasAttribute("static") || this.fechar();
+    });
+    s(this, "handleCloseClick", (t) => {
+      t.stopPropagation(), this.fechar();
+    });
+    s(this, "handleKeyDown", (t) => {
+      this.aberto && q(this) && (t.key === "Escape" ? this.hasAttribute("estatico") || this.hasAttribute("static") || (this.fechar(), t.stopImmediatePropagation()) : t.key === "Tab" && (this._focables = _(this.shadowRoot), z(t, this._focables, this, this.shadowRoot)));
+    });
+    const t = this.attachShadow({ mode: "open" });
+    t.innerHTML = `
+      <style>${N}</style>
+      <div class="ui-drawer__backdrop" part="fundo"></div>
+      <aside class="ui-drawer__painel" part="painel" role="dialog" aria-modal="true" tabindex="-1">
+        <div class="ui-drawer__header" part="cabecalho">
+          <div class="ui-drawer__titulo-container">
+            <h3 class="ui-drawer__titulo" part="titulo"></h3>
+            <p class="ui-drawer__descricao" part="descricao" style="display: none;"></p>
+          </div>
+          <button type="button" class="ui-drawer__close" part="fechar" aria-label="Fechar painel lateral" title="Fechar">✕</button>
+        </div>
+        <div class="ui-drawer__body" part="corpo">
+          <slot></slot>
+        </div>
+        <div class="ui-drawer__footer" part="rodape">
+          <slot name="rodape"></slot>
+          <slot name="footer"></slot>
+        </div>
+      </aside>
+    `, this.backdropElement = t.querySelector(".ui-drawer__backdrop"), this.painelElement = t.querySelector(".ui-drawer__painel"), this.tituloElement = t.querySelector(".ui-drawer__titulo"), this.descricaoElement = t.querySelector(".ui-drawer__descricao"), this.closeElement = t.querySelector(".ui-drawer__close");
+  }
+  static get observedAttributes() {
+    return [
+      "aberto",
+      "open",
+      "posicao",
+      "position",
+      "titulo",
+      "title",
+      "descricao",
+      "description",
+      "largura",
+      "width",
+      "estatico",
+      "static"
+    ];
+  }
+  connectedCallback() {
+    this.listeners.cleanup(), this.listeners.add(this.backdropElement, "click", this.handleBackdropClick), this.listeners.add(this.closeElement, "click", this.handleCloseClick), this.listeners.add(window, "keydown", this.handleKeyDown), this.shadowRoot.querySelectorAll("slot").forEach((e) => {
+      this.listeners.add(e, "slotchange", this.handleSlotChange);
+    }), this.syncState();
+  }
+  disconnectedCallback() {
+    this.listeners.cleanup(), b.atualizarScrollLock();
+  }
+  attributeChangedCallback(t, e, o) {
+    (t === "aberto" || t === "open") && o !== null && (document.activeElement && document.activeElement !== document.body && (this._elementoGatilho = document.activeElement), setTimeout(() => {
+      this._focables = _(this.shadowRoot), this._focables.length > 0 ? this._focables[0].focus() : this.painelElement.focus();
+    }, 0)), this.syncState();
+  }
+  get aberto() {
+    return this.hasAttribute("aberto") || this.hasAttribute("open");
+  }
+  set aberto(t) {
+    t ? this.setAttribute("aberto", "") : (this.removeAttribute("aberto"), this.removeAttribute("open")), this.syncState();
+  }
+  get posicao() {
+    const t = (this.getAttribute("posicao") || this.getAttribute("position") || "direita").toLowerCase();
+    return t === "esquerda" || t === "left" ? "esquerda" : t === "baixo" || t === "bottom" ? "baixo" : t === "cima" || t === "top" ? "cima" : "direita";
+  }
+  set posicao(t) {
+    this.setAttribute("posicao", t);
+  }
+  abrir() {
+    this.aberto || (document.activeElement && document.activeElement !== document.body && (this._elementoGatilho = document.activeElement), this.aberto = !0, this.dispatchEvent(
+      new CustomEvent("ui-abrir", {
+        bubbles: !0,
+        composed: !0
+      })
+    ), setTimeout(() => {
+      this._focables = _(this.shadowRoot), this._focables.length > 0 ? this._focables[0].focus() : this.painelElement.focus();
+    }, 0));
+  }
+  fechar() {
+    this.aberto && (this.aberto = !1, this.dispatchEvent(
+      new CustomEvent("ui-fechar", {
+        bubbles: !0,
+        composed: !0
+      })
+    ), this._elementoGatilho && (this._elementoGatilho.focus(), this._elementoGatilho = null));
+  }
+  alternar() {
+    this.aberto ? this.fechar() : this.abrir();
+  }
+  syncState() {
+    var a, c;
+    const t = this.aberto, e = this.getAttribute("titulo") || this.getAttribute("title") || "", o = this.getAttribute("descricao") || this.getAttribute("description") || "", i = this.getAttribute("largura") || this.getAttribute("width"), r = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".ui-drawer__footer");
+    if (this.painelElement.setAttribute("aria-hidden", String(!t)), e ? (this.tituloElement.textContent = e, this.tituloElement.style.display = "block") : this.tituloElement.style.display = "none", o ? (this.descricaoElement.textContent = o, this.descricaoElement.style.display = "block") : this.descricaoElement.style.display = "none", i ? this.style.setProperty("--ui-drawer-largura", isNaN(Number(i)) ? i : `${i}px`) : this.style.removeProperty("--ui-drawer-largura"), r) {
+      const u = Array.from(((c = this.shadowRoot) == null ? void 0 : c.querySelectorAll('slot[name="rodape"], slot[name="footer"]')) || []).some((p) => p.assignedNodes({ flatten: !0 }).some((f) => f.nodeType === Node.ELEMENT_NODE || f.textContent && f.textContent.trim() !== "")) || this.querySelector('[slot="rodape"], [slot="footer"]') !== null;
+      r.style.display = u ? "flex" : "none";
+    }
+    b.atualizarScrollLock();
+  }
+  static atualizarScrollLock() {
+    M();
+  }
+}
+class T extends b {
+}
+class D extends b {
+}
+class $ extends b {
+}
+h("ui-drawer", b);
+h("ui-sheet", T);
+h("ui-painel-lateral", D);
+h("ui-gaveta", $);
+const O = ":host{display:inline-flex;position:relative;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;--ui-tooltip-texto-distancia: 260px;--ui-tooltip-seta-espaco: 70px}.ui-tooltip__bubble{position:fixed;z-index:var(--ui-z-tooltip, 1200);padding:6px 10px;border-radius:6px;font-size:11px;font-weight:500;background-color:var(--ui-cor-fundo-elevado, #1e1e24);color:var(--ui-cor-texto, #e1e1e6);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .16));box-shadow:var(--ui-sombra-md, 0 4px 16px rgba(0, 0, 0, .5));white-space:normal;max-width:var(--ui-tooltip-texto-distancia, 260px);width:max-content;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,visibility .15s ease;line-height:1.35;box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0}.ui-tooltip__bubble[popover]{margin:0;border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .16));background-color:var(--ui-cor-fundo-elevado, #1e1e24);color:var(--ui-cor-texto, #e1e1e6);padding:6px 10px;overflow:visible;max-width:var(--ui-tooltip-texto-distancia, 260px);width:max-content;white-space:normal}.ui-tooltip__texto{display:inline-block;max-width:100%}.ui-tooltip__arrow{position:absolute;width:0;height:0;border-style:solid}.ui-tooltip--topo .ui-tooltip__arrow{bottom:-5px;left:50%;transform:translate(-50%);border-width:5px 5px 0 5px;border-color:var(--ui-cor-fundo-elevado, #1e1e24) transparent transparent transparent}.ui-tooltip--baixo .ui-tooltip__arrow{top:-5px;left:50%;transform:translate(-50%);border-width:0 5px 5px 5px;border-color:transparent transparent var(--ui-cor-fundo-elevado, #1e1e24) transparent}.ui-tooltip--esquerda .ui-tooltip__arrow{right:-5px;top:50%;transform:translateY(-50%);border-width:5px 0 5px 5px;border-color:transparent transparent transparent var(--ui-cor-fundo-elevado, #1e1e24)}.ui-tooltip--direita .ui-tooltip__arrow{left:-5px;top:50%;transform:translateY(-50%);border-width:5px 5px 5px 0;border-color:transparent var(--ui-cor-fundo-elevado, #1e1e24) transparent transparent}.ui-tooltip--visivel .ui-tooltip__bubble{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1)}@starting-style{.ui-tooltip--visivel .ui-tooltip__bubble,.ui-tooltip__bubble:popover-open{opacity:0;transform:scale(.94)}}", R = 120;
+class E extends x {
+  constructor() {
+    super();
+    s(this, "containerElement");
+    s(this, "bubbleElement");
+    s(this, "_posicionamentoAtivo", !1);
+    s(this, "_timerOcultar", null);
+    /** Gatilho que recebeu `aria-description` deste tooltip (para remover depois). */
+    s(this, "_gatilhoDescrito", null);
+    s(this, "posicionarBubble", () => {
+      if (!this.aberto) return;
+      const t = this.getBoundingClientRect(), e = this.bubbleElement.getBoundingClientRect(), o = this.getAttribute("posicao") || this.getAttribute("position") || "topo";
+      let i = "topo";
+      ["topo", "top"].includes(o) ? i = "topo" : ["baixo", "bottom"].includes(o) ? i = "baixo" : ["esquerda", "left"].includes(o) ? i = "esquerda" : ["direita", "right"].includes(o) && (i = "direita");
+      let r = 0, a = 0;
+      const c = 8;
+      i === "topo" ? (r = t.top - e.height - c, a = t.left + t.width / 2 - e.width / 2) : i === "baixo" ? (r = t.bottom + c, a = t.left + t.width / 2 - e.width / 2) : i === "esquerda" ? (r = t.top + t.height / 2 - e.height / 2, a = t.left - e.width - c) : i === "direita" && (r = t.top + t.height / 2 - e.height / 2, a = t.right + c), a = Math.max(8, Math.min(a, window.innerWidth - e.width - 8)), r = Math.max(8, Math.min(r, window.innerHeight - e.height - 8)), this.bubbleElement.style.top = `${Math.round(r)}px`, this.bubbleElement.style.left = `${Math.round(a)}px`;
+    });
+    s(this, "handleMouseEnter", () => {
+      const t = this.getAttribute("gatilho") || this.getAttribute("trigger") || "hover";
+      (t === "hover" || t === "passar-mouse") && (this.cancelarOcultar(), this.mostrar());
+    });
+    s(this, "handleMouseLeave", () => {
+      const t = this.getAttribute("gatilho") || this.getAttribute("trigger") || "hover";
+      (t === "hover" || t === "passar-mouse") && (this.cancelarOcultar(), this._timerOcultar = setTimeout(() => {
+        this._timerOcultar = null, this.ocultar();
+      }, R));
+    });
+    /**
+     * Escape fecha o tooltip sem mover o foco (WCAG 1.4.13). Ouvido na captura e interrompido,
+     * para que dentro de um modal o primeiro Escape feche só o tooltip.
+     */
+    s(this, "handleEscape", (t) => {
+      t.key !== "Escape" || !this.aberto || (t.stopPropagation(), this.cancelarOcultar(), this.ocultar());
+    });
+    s(this, "handleClick", (t) => {
+      const e = this.getAttribute("gatilho") || this.getAttribute("trigger") || "hover", o = window.matchMedia("(pointer: coarse)").matches;
+      (e === "clique" || e === "click" || o) && (t.stopPropagation(), this.aberto = !this.aberto);
+    });
+    s(this, "handleClickOutside", (t) => {
+      t.composedPath().includes(this) || this.ocultar();
+    });
+    const t = this.attachShadow({ mode: "open" });
+    t.innerHTML = `
+      <style>${O}</style>
+      <div class="ui-tooltip ui-tooltip--topo">
+        <slot></slot>
+        <div class="ui-tooltip__bubble" part="balao" role="tooltip" popover="manual">
+          <span class="ui-tooltip__texto" part="texto"></span>
+          <slot name="conteudo"></slot>
+          <span class="ui-tooltip__arrow" part="seta"></span>
+        </div>
+      </div>
+    `, this.containerElement = t.querySelector(".ui-tooltip"), this.bubbleElement = t.querySelector(".ui-tooltip__bubble"), t.querySelectorAll("slot").forEach((e) => e.addEventListener("slotchange", () => this.sincronizarDescricao()));
+  }
+  static get observedAttributes() {
+    return [
+      "texto",
+      "text",
+      "posicao",
+      "position",
+      "gatilho",
+      "trigger",
+      "aberto",
+      "open",
+      "disabled"
+    ];
+  }
+  connectedCallback() {
+    this.addEventListener("mouseenter", this.handleMouseEnter), this.addEventListener("mouseleave", this.handleMouseLeave), this.addEventListener("focusin", this.handleMouseEnter), this.addEventListener("focusout", this.handleMouseLeave), this.addEventListener("click", this.handleClick), this.syncState();
+  }
+  disconnectedCallback() {
+    this.removeEventListener("mouseenter", this.handleMouseEnter), this.removeEventListener("mouseleave", this.handleMouseLeave), this.removeEventListener("focusin", this.handleMouseEnter), this.removeEventListener("focusout", this.handleMouseLeave), this.removeEventListener("click", this.handleClick), document.removeEventListener("click", this.handleClickOutside), document.removeEventListener("keydown", this.handleEscape, !0), this.cancelarOcultar(), this.removerDescricao(), this._posicionamentoAtivo && (this._posicionamentoAtivo = !1, window.removeEventListener("scroll", this.posicionarBubble, { capture: !0 }), window.removeEventListener("resize", this.posicionarBubble)), this.ocultar();
+  }
+  attributeChangedCallback(t, e, o) {
+    this.syncState();
+  }
+  get aberto() {
+    return this.hasAttribute("aberto") || this.hasAttribute("open");
+  }
+  set aberto(t) {
+    t ? this.setAttribute("aberto", "") : (this.removeAttribute("aberto"), this.removeAttribute("open")), this.syncState();
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled"), this.syncState();
+  }
+  mostrar() {
+    this.disabled || (this.aberto = !0);
+  }
+  ocultar() {
+    this.aberto = !1;
+  }
+  syncState() {
+    var a;
+    const t = this.aberto, e = this.getAttribute("posicao") || this.getAttribute("position") || "topo", o = this.getAttribute("texto") || this.getAttribute("text") || "", i = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".ui-tooltip__texto");
+    let r = "topo";
+    if (["topo", "top"].includes(e) ? r = "topo" : ["baixo", "bottom"].includes(e) ? r = "baixo" : ["esquerda", "left"].includes(e) ? r = "esquerda" : ["direita", "right"].includes(e) && (r = "direita"), this.containerElement.className = `ui-tooltip ui-tooltip--${r}`, i && (o ? (i.textContent = o, i.style.display = "inline") : i.style.display = "none"), this.sincronizarDescricao(), t) {
+      if (document.addEventListener("click", this.handleClickOutside), document.addEventListener("keydown", this.handleEscape, !0), typeof this.bubbleElement.showPopover == "function")
+        try {
+          this.bubbleElement.showPopover();
+        } catch {
+        }
+      this.containerElement.classList.add("ui-tooltip--visivel"), requestAnimationFrame(() => {
+        this.posicionarBubble();
+      }), this._posicionamentoAtivo || (this._posicionamentoAtivo = !0, window.addEventListener("scroll", this.posicionarBubble, { capture: !0, passive: !0 }), window.addEventListener("resize", this.posicionarBubble, { passive: !0 }));
+    } else {
+      if (document.removeEventListener("click", this.handleClickOutside), document.removeEventListener("keydown", this.handleEscape, !0), typeof this.bubbleElement.hidePopover == "function")
+        try {
+          this.bubbleElement.hidePopover();
+        } catch {
+        }
+      this.containerElement.classList.remove("ui-tooltip--visivel"), this._posicionamentoAtivo && (this._posicionamentoAtivo = !1, window.removeEventListener("scroll", this.posicionarBubble, { capture: !0 }), window.removeEventListener("resize", this.posicionarBubble));
+    }
+  }
+  cancelarOcultar() {
+    this._timerOcultar && (clearTimeout(this._timerOcultar), this._timerOcultar = null);
+  }
+  /**
+   * O balão vive no Shadow DOM, fora do alcance de `aria-describedby` do gatilho (light DOM).
+   * O texto é exposto como `aria-description` no gatilho, sem sobrescrever uma descrição do consumidor.
+   */
+  sincronizarDescricao() {
+    var i;
+    if (!this.isConnected) {
+      this.removerDescricao();
+      return;
+    }
+    const t = Array.from(this.children).find((r) => !r.hasAttribute("slot")), e = (this.getAttribute("texto") || this.getAttribute("text") || ((i = this.querySelector('[slot="conteudo"]')) == null ? void 0 : i.textContent) || "").replace(/\s+/g, " ").trim();
+    this._gatilhoDescrito && this._gatilhoDescrito !== t && this.removerDescricao(), !(!t || this._gatilhoDescrito !== t && (t.hasAttribute("aria-describedby") || t.hasAttribute("aria-description"))) && (e && !this.disabled ? (t.setAttribute("aria-description", e), this._gatilhoDescrito = t) : this.removerDescricao());
+  }
+  removerDescricao() {
+    var t;
+    (t = this._gatilhoDescrito) == null || t.removeAttribute("aria-description"), this._gatilhoDescrito = null;
+  }
+}
+class P extends E {
+}
+h("ui-tooltip", E);
+h("ui-popover", P);
+const B = ":host{display:block;box-sizing:border-box}:host([inline]){display:inline-block}.ui-skeleton{background:var(--ui-cor-fundo-elevado, #1e1e24);background-image:linear-gradient(90deg,#fff0,color-mix(in srgb,var(--ui-cor-texto, #e1e1e6) 7%,transparent),#fff0);background-size:200% 100%;background-repeat:no-repeat;border-radius:var(--ui-raio-borda, 6px);position:relative;overflow:hidden;box-sizing:border-box;animation:ui-skeleton-shimmer 1.6s ease-in-out infinite}@keyframes ui-skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.ui-skeleton--pulso{background-image:none;animation:ui-skeleton-pulse 1.8s ease-in-out infinite}@keyframes ui-skeleton-pulse{0%,to{opacity:1}50%{opacity:.45}}.ui-skeleton--estatico{animation:none;background-image:none}.ui-skeleton--texto{height:1.1em;border-radius:var(--ui-raio-sm, 4px)}.ui-skeleton--circular{border-radius:50%!important;aspect-ratio:1;width:var(--ui-skeleton-largura, 40px);height:var(--ui-skeleton-altura, 40px)}.ui-skeleton--retangular{border-radius:var(--ui-raio-borda, 6px);min-height:20px}.ui-skeleton__linhas{display:flex;flex-direction:column;gap:8px;width:100%}.ui-skeleton__linhas .ui-skeleton{width:100%}.ui-skeleton__linhas .ui-skeleton:last-child:not(:first-child){width:65%}.ui-skeleton--card{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--ui-raio-borda, 10px);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .08));background:var(--ui-cor-fundo-card, #18181c);animation:none}.ui-skeleton__card-media{width:100%;height:120px;border-radius:6px}.ui-skeleton__card-header{display:flex;align-items:center;gap:10px}.ui-skeleton__card-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0}.ui-skeleton__card-title{width:50%;height:16px}@media (prefers-reduced-motion: reduce){.ui-skeleton{animation:none!important;background-image:none!important;opacity:.7}}";
+class A extends x {
+  constructor() {
+    super();
+    s(this, "rootElement");
+    const t = this.attachShadow({ mode: "open" });
+    t.innerHTML = `
+      <style>${B}</style>
+      <div class="ui-skeleton-container" role="status" aria-label="Carregando..."></div>
+    `, this.rootElement = t.querySelector(".ui-skeleton-container");
+  }
+  static get observedAttributes() {
+    return [
+      "variante",
+      "variant",
+      "largura",
+      "width",
+      "altura",
+      "height",
+      "raio",
+      "radius",
+      "linhas",
+      "lines",
+      "count",
+      "animado",
+      "animated"
+    ];
+  }
+  connectedCallback() {
+    this.hasAttribute("aria-hidden") || this.setAttribute("aria-hidden", "true"), this.syncState();
+  }
+  attributeChangedCallback(t, e, o) {
+    this.syncState();
+  }
+  get variante() {
+    const t = (this.getAttribute("variante") || this.getAttribute("variant") || "texto").toLowerCase();
+    return t === "circulo" || t === "circular" ? "circular" : t === "retangulo" || t === "retangular" ? "retangular" : t === "card" ? "card" : "texto";
+  }
+  set variante(t) {
+    this.setAttribute("variante", t);
+  }
+  get animado() {
+    const t = (this.getAttribute("animado") || this.getAttribute("animated") || "shimmer").toLowerCase();
+    return t === "pulse" || t === "pulso" ? "pulso" : t === "none" || t === "nenhum" || t === "estatico" ? "nenhum" : "shimmer";
+  }
+  set animado(t) {
+    this.setAttribute("animado", t);
+  }
+  get linhas() {
+    const t = parseInt(this.getAttribute("linhas") || this.getAttribute("lines") || this.getAttribute("count") || "1", 10);
+    return isNaN(t) || t < 1 ? 1 : t;
+  }
+  set linhas(t) {
+    this.setAttribute("linhas", String(t));
+  }
+  syncState() {
+    const t = this.variante, e = this.animado, o = this.getAttribute("largura") || this.getAttribute("width"), i = this.getAttribute("altura") || this.getAttribute("height"), r = this.getAttribute("raio") || this.getAttribute("radius"), a = this.linhas;
+    this.rootElement.innerHTML = "";
+    const c = e === "pulso" ? "ui-skeleton--pulso" : e === "nenhum" ? "ui-skeleton--estatico" : "";
+    if (t === "card") {
+      const u = document.createElement("div");
+      u.className = "ui-skeleton ui-skeleton--card";
+      const p = document.createElement("div");
+      p.className = `ui-skeleton ui-skeleton__card-media ${c}`;
+      const d = document.createElement("div");
+      d.className = "ui-skeleton__card-header";
+      const f = document.createElement("div");
+      f.className = `ui-skeleton ui-skeleton__card-avatar ${c}`;
+      const w = document.createElement("div");
+      w.className = `ui-skeleton ui-skeleton__card-title ${c}`, d.appendChild(f), d.appendChild(w);
+      const v = document.createElement("div");
+      v.className = "ui-skeleton__linhas";
+      for (let y = 0; y < 2; y++) {
+        const k = document.createElement("div");
+        k.className = `ui-skeleton ui-skeleton--texto ${c}`, v.appendChild(k);
+      }
+      u.appendChild(p), u.appendChild(d), u.appendChild(v), this.rootElement.appendChild(u);
+      return;
+    }
+    if (a > 1 && t === "texto") {
+      const u = document.createElement("div");
+      u.className = "ui-skeleton__linhas";
+      for (let p = 0; p < a; p++) {
+        const d = document.createElement("div");
+        d.className = `ui-skeleton ui-skeleton--texto ${c}`, i && (d.style.height = isNaN(Number(i)) ? i : `${i}px`), r && (d.style.borderRadius = isNaN(Number(r)) ? r : `${r}px`), u.appendChild(d);
+      }
+      o && (u.style.width = isNaN(Number(o)) ? o : `${o}px`), this.rootElement.appendChild(u);
+      return;
+    }
+    const m = document.createElement("div");
+    m.className = `ui-skeleton ui-skeleton--${t} ${c}`.trim(), o && (m.style.width = isNaN(Number(o)) ? o : `${o}px`), i && (m.style.height = isNaN(Number(i)) ? i : `${i}px`), r && (m.style.borderRadius = isNaN(Number(r)) ? r : `${r}px`), this.rootElement.appendChild(m);
+  }
+}
+class F extends A {
+}
+h("ui-skeleton", A);
+h("ui-esqueleto", F);
+export {
+  b as U,
+  F as a,
+  $ as b,
+  D as c,
+  P as d,
+  T as e,
+  A as f,
+  E as g,
+  M as h,
+  z as i,
+  q as j,
+  _ as o
+};