@thibezer/ui-components-kit 2.8.2 → 2.10.0

package/dist/ui-paleta-ferramentas-CEZYcN4J.js

@@ -1,624 +0,0 @@
-var j = Object.defineProperty;
-var B = (o, l, e) => l in o ? j(o, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[l] = e;
-var c = (o, l, e) => B(o, typeof l != "symbol" ? l + "" : l, e);
-import { L as k } from "./listener-bag-DQgv7OON.js";
-import { d as E, S as C } from "./ssr-safe-5cWfJP-s.js";
-import { h as H } from "./svg-seguro-BsbNQqpd.js";
-const q = ':host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1;color:inherit;flex-shrink:0;width:var(--ui-tamanho-icone, 20px);height:var(--ui-tamanho-icone, 20px);box-sizing:border-box}.ui-icone{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;color:inherit;font-size:var(--ui-tamanho-icone, 20px)}::slotted(svg),.ui-icone svg{width:100%!important;height:100%!important;display:block;shape-rendering:geometricPrecision}:host([cor="primaria"]),:host([color="primaria"]){color:var(--ui-cor-primaria, #00E08A)}:host([cor="secundaria"]),:host([color="secundaria"]){color:var(--ui-cor-texto-secundario, #888899)}:host([cor="erro"]),:host([color="erro"]){color:var(--ui-cor-texto-erro, #ff5555)}:host([cor="sucesso"]),:host([color="sucesso"]){color:var(--ui-cor-texto-sucesso, #00E08A)}:host([cor="alerta"]),:host([color="alerta"]){color:var(--ui-cor-texto-alerta, #ffb86c)}', S = {
-  search: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
-  check: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>',
-  eye: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>',
-  eyeOff: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>',
-  lock: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>',
-  trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>',
-  gear: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>',
-  bell: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>',
-  alert: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>',
-  close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>'
-};
-class $ extends C {
-  constructor() {
-    super();
-    c(this, "iconContainer");
-    c(this, "svgContainer");
-    c(this, "slotElement");
-    c(this, "handleSlotChange", () => {
-      this.syncState();
-    });
-    const e = this.attachShadow({ mode: "open" });
-    e.innerHTML = `
-      <style>${q}</style>
-      <span class="ui-icone" aria-hidden="true">
-        <span class="ui-icone__svg" style="display: none;"></span>
-        <slot></slot>
-      </span>
-    `, this.iconContainer = e.querySelector(".ui-icone"), this.svgContainer = e.querySelector(".ui-icone__svg"), this.slotElement = e.querySelector("slot");
-  }
-  static get observedAttributes() {
-    return ["tamanho", "size", "cor", "color", "nome", "name"];
-  }
-  connectedCallback() {
-    this.slotElement.addEventListener("slotchange", this.handleSlotChange), this.syncState();
-  }
-  disconnectedCallback() {
-    this.slotElement.removeEventListener("slotchange", this.handleSlotChange);
-  }
-  attributeChangedCallback(e, t, i) {
-    this.syncState();
-  }
-  resolveTamanhoPx() {
-    const e = this.getAttribute("tamanho") || this.getAttribute("size") || "md";
-    switch (e.toLowerCase()) {
-      case "sm":
-        return "16px";
-      case "md":
-        return "20px";
-      case "lg":
-        return "24px";
-      case "xl":
-        return "32px";
-      default:
-        return isNaN(Number(e)) ? e : `${e}px`;
-    }
-  }
-  syncState() {
-    const e = this.resolveTamanhoPx();
-    this.style.setProperty("--ui-tamanho-icone", e);
-    const t = this.getAttribute("cor") || this.getAttribute("color");
-    t ? (this.style.setProperty("--ui-cor-icone", t), this.iconContainer.style.color = t) : (this.style.removeProperty("--ui-cor-icone"), this.iconContainer.style.color = ""), this.hasAttribute("aria-label") || this.hasAttribute("label") ? this.iconContainer.removeAttribute("aria-hidden") : this.iconContainer.setAttribute("aria-hidden", "true");
-    const r = this.getAttribute("nome") || this.getAttribute("name"), n = this.slotElement.assignedNodes().length > 0;
-    r && S[r] && !n ? (this.svgContainer.innerHTML = S[r], this.svgContainer.style.display = "inline-flex") : (this.svgContainer.innerHTML = "", this.svgContainer.style.display = "none");
-  }
-}
-E("ui-icone", $);
-const F = ':host{display:block;position:relative;box-sizing:border-box;font-family:var(--ui-fonte-base, "Inter", sans-serif);color:var(--ui-cor-texto, #e1e1e6)}.ui-ribbon{display:flex;flex-direction:column;background:var(--ui-cor-superficie, #141417);border-bottom:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));-webkit-user-select:none;user-select:none}.ui-ribbon__abas{display:flex;align-items:flex-end;gap:2px;height:30px;padding:0 8px;box-sizing:border-box;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ribbon__abas::-webkit-scrollbar{display:none}.ui-ribbon__aba{position:relative;flex-shrink:0;height:28px;padding:0 14px;border:0;border-radius:6px 6px 0 0;background:transparent;color:var(--ui-cor-texto-secundario, #888899);font:inherit;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}.ui-ribbon__aba:hover{color:var(--ui-cor-texto, #e1e1e6)}.ui-ribbon__aba:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ui-cor-primaria, #00E08A)}.ui-ribbon__aba--ativa{color:var(--ui-cor-texto, #e1e1e6);background:var(--ui-cor-fundo-elevado, #1a1a1e)}.ui-ribbon__aba--ativa:after{content:"";position:absolute;left:8px;right:8px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--ui-cor-primaria, #00E08A)}.ui-ribbon__aba--contextual{color:var(--ui-cor-primaria, #00E08A)}.ui-ribbon__painel{background:var(--ui-cor-fundo-elevado, #1a1a1e);overflow-x:auto}.ui-ribbon__grupos{display:flex;align-items:stretch;min-height:84px;padding:4px 8px;box-sizing:border-box}.ui-ribbon__grupo{display:flex;flex-direction:column;flex-shrink:0;padding:0 8px;border-right:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ribbon__grupo:last-child{border-right:0}.ui-ribbon__grupo-itens{display:flex;flex:1;align-items:stretch;gap:2px}.ui-ribbon__grupo-rotulo{padding-top:2px;color:var(--ui-cor-texto-secundario, #888899);font-size:11px;text-align:center;white-space:nowrap}.ui-ribbon__coluna{display:flex;flex-direction:column;justify-content:center;gap:1px}.ui-ribbon__separador{width:1px;margin:4px 3px;background:var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-ferr-btn--grande{flex-direction:column;min-width:52px;padding:4px 6px;gap:3px}.ui-ferr-btn--pequeno{height:22px;padding:0 6px;justify-content:flex-start}.ui-ferr-btn--pequeno.ui-ferr-btn--so-icone{width:24px;padding:0;justify-content:center}:host([recolhido]) .ui-ribbon__painel{display:none;position:absolute;top:100%;left:0;right:0;z-index:var(--ui-z-docked-bar, 600);border-bottom:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));box-shadow:var(--ui-sombra-lg, 0 8px 24px rgba(0, 0, 0, .35))}:host([recolhido]) .ui-ribbon--aberto .ui-ribbon__painel{display:block}:host([recolhido]) .ui-ribbon__aba--ativa:after{display:none}:host([compacto]) .ui-ribbon__grupos{min-height:64px}:host([compacto]) .ui-ferr-btn--grande{min-width:44px}', P = '.ui-ferr-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:4px;box-sizing:border-box;padding:0;border:1px solid transparent;border-radius:var(--ui-raio-borda, 6px);background:transparent;color:var(--ui-cor-texto, #e1e1e6);font-family:var(--ui-fonte-base, "Inter", sans-serif);font-size:12px;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .12s ease,border-color .12s ease,color .12s ease}.ui-ferr-btn:hover:not(:disabled){background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ferr-btn:active:not(:disabled){background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 14%,transparent)}.ui-ferr-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ui-cor-fundo, #0b0b0d),0 0 0 4px var(--ui-cor-primaria, #00E08A)}.ui-ferr-btn:disabled{opacity:.4;cursor:not-allowed}.ui-ferr-btn--ativo{background:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 18%,transparent);border-color:color-mix(in srgb,var(--ui-cor-primaria, #00E08A) 55%,transparent)}.ui-ferr-btn__icone{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.ui-ferr-btn__rotulo{white-space:nowrap}.ui-ferr-btn__caret{width:0;height:0;flex-shrink:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid currentColor;opacity:.7}.ui-ferr-menu{position:fixed;z-index:var(--ui-z-popover, 1050);display:flex;flex-direction:column;gap:1px;min-width:180px;padding:4px;box-sizing:border-box;background:var(--ui-cor-fundo-menu, #18181c);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));border-radius:var(--ui-raio-borda, 6px);box-shadow:var(--ui-sombra-lg, 0 8px 24px rgba(0, 0, 0, .35));font-family:var(--ui-fonte-base, "Inter", sans-serif);color:var(--ui-cor-texto, #e1e1e6)}.ui-ferr-menu__item{display:flex;align-items:center;gap:8px;width:100%;height:28px;padding:0 8px;box-sizing:border-box;border:0;border-radius:var(--ui-raio-sm, 4px);background:transparent;color:inherit;font:inherit;font-size:12px;text-align:left;cursor:pointer}.ui-ferr-menu__item:hover:not(:disabled),.ui-ferr-menu__item:focus-visible{outline:none;background:var(--ui-cor-hover-menu, rgba(255, 255, 255, .08))}.ui-ferr-menu__item:disabled{opacity:.4;cursor:not-allowed}.ui-ferr-menu__item--ativo{color:var(--ui-cor-primaria, #00E08A)}.ui-ferr-menu__icone{display:inline-flex;width:16px;justify-content:center}.ui-ferr-menu__rotulo{flex:1}.ui-ferr-menu__atalho{color:var(--ui-cor-texto-secundario, #888899);font-size:11px}.ui-ferr-menu__sep{height:1px;margin:3px 2px;background:var(--ui-cor-borda, rgba(255, 255, 255, .12))}';
-function L(o, l) {
-  if (!o) return null;
-  const e = document.createElement("ui-icone");
-  if (e.setAttribute("tamanho", String(l)), o.trimStart().startsWith("<")) {
-    const t = H(o);
-    if (!t) return null;
-    e.appendChild(t);
-  } else
-    e.setAttribute("nome", o);
-  return e;
-}
-function R(o) {
-  const l = o.rotulo || o.id;
-  return o.atalho ? `${l} (${o.atalho})` : l;
-}
-function w(o, l) {
-  o.disabled = !!l.disabled;
-  const e = l.tipo, t = e === "toggle" || e === "ferramenta";
-  t ? o.setAttribute("aria-pressed", String(!!l.ativo)) : o.removeAttribute("aria-pressed"), o.classList.toggle("ui-ferr-btn--ativo", t && !!l.ativo);
-}
-function I(o, l, e) {
-  var a;
-  const t = document.createElement("button");
-  t.type = "button", t.className = `ui-ferr-btn ui-ferr-btn--${l}`, t.dataset.id = o.id, t.tabIndex = -1, t.setAttribute("aria-label", o.rotulo || o.id), t.title = R(o);
-  const i = L(o.icone, e);
-  if (i) {
-    const s = document.createElement("span");
-    s.className = "ui-ferr-btn__icone", s.appendChild(i), t.appendChild(s);
-  }
-  const r = !!((a = o.filhos) != null && a.length), n = l !== "paleta" && !o.somenteIcone && !!o.rotulo;
-  if (l !== "paleta" && o.somenteIcone && t.classList.add("ui-ferr-btn--so-icone"), n) {
-    const s = document.createElement("span");
-    s.className = "ui-ferr-btn__rotulo", s.textContent = o.rotulo, t.appendChild(s);
-  }
-  if (r) {
-    if (l === "paleta")
-      t.classList.add("ui-ferr-btn--grupo");
-    else {
-      const s = document.createElement("span");
-      s.className = "ui-ferr-btn__caret", t.appendChild(s);
-    }
-    t.setAttribute("aria-haspopup", "menu"), t.setAttribute("aria-expanded", "false");
-  }
-  return w(t, o), t;
-}
-function f(o, l) {
-  for (const e of o) {
-    if (e.id === l) return e;
-    if (e.filhos) {
-      const t = f(e.filhos, l);
-      if (t) return t;
-    }
-  }
-}
-function D(o) {
-  const l = o.filter((e) => !e.disabled);
-  o.forEach((e) => e.tabIndex = -1), l.length && (l[0].tabIndex = 0);
-}
-function N(o, l, e, t) {
-  const i = l.filter((s) => !s.disabled), r = i.length, n = i.findIndex((s) => s === o.target);
-  if (r === 0 || n < 0) return !1;
-  let a = n;
-  if (e.includes(o.key)) a = (n - 1 + r) % r;
-  else if (t.includes(o.key)) a = (n + 1) % r;
-  else if (o.key === "Home") a = 0;
-  else if (o.key === "End") a = r - 1;
-  else return !1;
-  return o.preventDefault(), l.forEach((s) => s.tabIndex = -1), i[a].tabIndex = 0, i[a].focus(), !0;
-}
-function T(o, l, e, t, i = {}) {
-  var M;
-  const r = i.lado ?? "baixo", n = new k(), a = document.createElement("div");
-  a.className = "ui-ferr-menu", a.setAttribute("role", "menu");
-  const s = [];
-  let h = !1;
-  const b = () => {
-    var u;
-    h || (h = !0, n.cleanup(), a.remove(), (u = i.onFechar) == null || u.call(i));
-  };
-  e.forEach((u) => {
-    if (u.tipo === "separador") {
-      const p = document.createElement("div");
-      p.className = "ui-ferr-menu__sep", p.setAttribute("role", "separator"), a.appendChild(p);
-      return;
-    }
-    const d = document.createElement("button");
-    d.type = "button", d.className = "ui-ferr-menu__item", d.setAttribute("role", "menuitem"), d.dataset.id = u.id, d.disabled = !!u.disabled, u.ativo && d.classList.add("ui-ferr-menu__item--ativo");
-    const y = document.createElement("span");
-    y.className = "ui-ferr-menu__icone";
-    const _ = L(u.icone, 14);
-    _ && y.appendChild(_), d.appendChild(y);
-    const A = document.createElement("span");
-    if (A.className = "ui-ferr-menu__rotulo", A.textContent = u.rotulo || u.id, d.appendChild(A), u.atalho) {
-      const p = document.createElement("span");
-      p.className = "ui-ferr-menu__atalho", p.textContent = u.atalho, d.appendChild(p);
-    }
-    d.addEventListener("click", (p) => {
-      p.stopPropagation(), b(), t(u);
-    }), s.push(d), a.appendChild(d);
-  }), o.appendChild(a);
-  const m = l.getBoundingClientRect();
-  let v = r === "direita" ? m.top : m.bottom + 2, g = r === "direita" ? m.right + 4 : m.left;
-  const x = a.getBoundingClientRect();
-  x.width && g + x.width > window.innerWidth - 4 && (g = Math.max(4, window.innerWidth - x.width - 4)), x.height && v + x.height > window.innerHeight - 4 && (v = Math.max(4, window.innerHeight - x.height - 4)), a.style.top = `${v}px`, a.style.left = `${g}px`;
-  const z = () => s.filter((u) => !u.disabled);
-  return n.add(a, "keydown", (u) => {
-    const d = z(), y = d.findIndex((_) => _ === u.target);
-    if (u.key === "Escape")
-      u.preventDefault(), u.stopPropagation(), b(), l.focus();
-    else if (u.key === "Tab")
-      b();
-    else if (d.length && (u.key === "ArrowDown" || u.key === "ArrowUp")) {
-      u.preventDefault();
-      const _ = u.key === "ArrowDown" ? 1 : -1;
-      d[(y + _ + d.length) % d.length].focus();
-    } else d.length && u.key === "Home" ? (u.preventDefault(), d[0].focus()) : d.length && u.key === "End" && (u.preventDefault(), d[d.length - 1].focus());
-  }), n.add(document, "pointerdown", (u) => {
-    const d = u.composedPath();
-    !d.includes(a) && !d.includes(l) && b();
-  }, !0), n.add(window, "resize", b), n.add(window, "blur", b), i.focar && ((M = z()[0]) == null || M.focus()), { elemento: a, ancora: l, fechar: b };
-}
-class V extends C {
-  constructor() {
-    super();
-    c(this, "rootElement");
-    c(this, "abasElement");
-    c(this, "gruposElement");
-    c(this, "_abas", []);
-    c(this, "_abaAtiva", "");
-    c(this, "menu", null);
-    c(this, "listeners", new k());
-    /* ---------- Interação ---------- */
-    c(this, "handleClickAbas", (e) => {
-      const t = e.target.closest(".ui-ribbon__aba");
-      t != null && t.dataset.id && (this.selecionarAba(t.dataset.id), this.recolhido && this.rootElement.classList.toggle("ui-ribbon--aberto"));
-    });
-    c(this, "handleDblClickAbas", (e) => {
-      e.target.closest(".ui-ribbon__aba") && (this.recolhido = !this.recolhido);
-    });
-    c(this, "handleKeyDownAbas", (e) => {
-      var a, s;
-      const t = Array.from(this.abasElement.querySelectorAll(".ui-ribbon__aba")), i = t.findIndex((h) => h === e.target);
-      if (i < 0) return;
-      let r = i;
-      if (e.key === "ArrowRight") r = (i + 1) % t.length;
-      else if (e.key === "ArrowLeft") r = (i - 1 + t.length) % t.length;
-      else if (e.key === "Home") r = 0;
-      else if (e.key === "End") r = t.length - 1;
-      else if (e.key === "ArrowDown") {
-        e.preventDefault(), (a = this.botoesPainel().find((h) => !h.disabled)) == null || a.focus();
-        return;
-      } else return;
-      e.preventDefault();
-      const n = t[r].dataset.id;
-      n && this.selecionarAba(n), (s = this.abasElement.querySelector(`.ui-ribbon__aba[data-id="${CSS.escape(n ?? "")}"]`)) == null || s.focus();
-    });
-    c(this, "handleClickGrupos", (e) => {
-      const t = e.target.closest(".ui-ferr-btn");
-      t != null && t.dataset.id && this.acionar(t, !1);
-    });
-    c(this, "handleKeyDownGrupos", (e) => {
-      const t = this.botoesPainel();
-      if (N(e, t, ["ArrowLeft"], ["ArrowRight"])) return;
-      const i = e.target instanceof HTMLButtonElement ? e.target : null;
-      (i == null ? void 0 : i.getAttribute("aria-haspopup")) === "menu" && e.key === "ArrowDown" && (e.preventDefault(), this.acionar(i, !0));
-    });
-    c(this, "handleEscape", (e) => {
-      e.key === "Escape" && !this.menu && this.rootElement.classList.remove("ui-ribbon--aberto");
-    });
-    c(this, "handlePointerDownFora", (e) => {
-      !this.recolhido || !this.rootElement.classList.contains("ui-ribbon--aberto") || e.composedPath().includes(this) || this.rootElement.classList.remove("ui-ribbon--aberto");
-    });
-    const e = this.attachShadow({ mode: "open" });
-    e.innerHTML = `
-      <style>${P}${F}</style>
-      <div class="ui-ribbon">
-        <div class="ui-ribbon__abas" role="tablist"></div>
-        <div class="ui-ribbon__painel" role="tabpanel">
-          <div class="ui-ribbon__grupos" role="toolbar" aria-label="Ferramentas"></div>
-        </div>
-      </div>
-    `, this.rootElement = e.querySelector(".ui-ribbon"), this.abasElement = e.querySelector(".ui-ribbon__abas"), this.gruposElement = e.querySelector(".ui-ribbon__grupos");
-  }
-  static get observedAttributes() {
-    return ["aba-ativa", "recolhido"];
-  }
-  connectedCallback() {
-    this.listeners.cleanup(), this.listeners.add(this.abasElement, "click", this.handleClickAbas), this.listeners.add(this.abasElement, "dblclick", this.handleDblClickAbas), this.listeners.add(this.abasElement, "keydown", this.handleKeyDownAbas), this.listeners.add(this.gruposElement, "click", this.handleClickGrupos), this.listeners.add(this.gruposElement, "keydown", this.handleKeyDownGrupos), this.listeners.add(document, "pointerdown", this.handlePointerDownFora, !0), this.listeners.add(this.rootElement, "keydown", this.handleEscape);
-    const e = this.getAttribute("aba-ativa");
-    e && !this._abaAtiva && (this._abaAtiva = e), this.renderizar();
-  }
-  disconnectedCallback() {
-    this.fecharMenu(), this.listeners.cleanup();
-  }
-  attributeChangedCallback(e, t, i) {
-    t !== i && (e === "aba-ativa" && i && i !== this._abaAtiva ? this.selecionarAba(i, !1) : e === "recolhido" && this.rootElement.classList.remove("ui-ribbon--aberto"));
-  }
-  /* ---------- API pública ---------- */
-  get abas() {
-    return this._abas;
-  }
-  set abas(e) {
-    this._abas = Array.isArray(e) ? e : [], this.renderizar();
-  }
-  get abaAtiva() {
-    return this._abaAtiva;
-  }
-  set abaAtiva(e) {
-    this.selecionarAba(e);
-  }
-  get recolhido() {
-    return this.hasAttribute("recolhido");
-  }
-  set recolhido(e) {
-    e ? this.setAttribute("recolhido", "") : this.removeAttribute("recolhido");
-  }
-  selecionarAba(e, t = !0) {
-    const i = this._abas.find((r) => r.id === e && !r.oculta);
-    !i || i.id === this._abaAtiva || (this.fecharMenu(), this._abaAtiva = i.id, this.getAttribute("aba-ativa") !== i.id && this.setAttribute("aba-ativa", i.id), this.renderizar(), t && this.dispatchEvent(
-      new CustomEvent("ui-aba-change", {
-        detail: { id: i.id, aba: i },
-        bubbles: !0,
-        composed: !0
-      })
-    ));
-  }
-  definirAbaVisivel(e, t) {
-    const i = this._abas.find((r) => r.id === e);
-    i && (i.oculta = !t, !t && this._abaAtiva === e && (this._abaAtiva = ""), this.renderizar());
-  }
-  /** Atualiza um item (estado ou aparência) sem precisar recriar as abas. */
-  atualizarItem(e, t) {
-    const i = this._abas.flatMap((s) => s.grupos.flatMap((h) => h.itens)), r = f(i, e);
-    if (!r) return;
-    Object.assign(r, t);
-    const n = Object.keys(t).every((s) => s === "ativo" || s === "disabled"), a = this.gruposElement.querySelector(`.ui-ferr-btn[data-id="${CSS.escape(e)}"]`);
-    n && a ? w(a, r) : this.renderizarPainel();
-  }
-  /* ---------- Renderização ---------- */
-  abasVisiveis() {
-    return this._abas.filter((e) => !e.oculta);
-  }
-  renderizar() {
-    var t;
-    const e = this.abasVisiveis();
-    e.some((i) => i.id === this._abaAtiva) || (this._abaAtiva = ((t = e[0]) == null ? void 0 : t.id) ?? ""), this.renderizarAbas(), this.renderizarPainel();
-  }
-  renderizarAbas() {
-    this.abasElement.innerHTML = "", this.abasVisiveis().forEach((e) => {
-      const t = e.id === this._abaAtiva, i = document.createElement("button");
-      i.type = "button", i.className = "ui-ribbon__aba", i.setAttribute("role", "tab"), i.dataset.id = e.id, i.textContent = e.rotulo, i.tabIndex = t ? 0 : -1, i.setAttribute("aria-selected", String(t)), i.classList.toggle("ui-ribbon__aba--ativa", t), i.classList.toggle("ui-ribbon__aba--contextual", !!e.contextual), this.abasElement.appendChild(i);
-    });
-  }
-  renderizarPainel() {
-    this.fecharMenu(), this.gruposElement.innerHTML = "";
-    const e = this._abas.find((t) => t.id === this._abaAtiva);
-    e && (e.grupos.forEach((t) => this.gruposElement.appendChild(this.criarGrupo(t))), D(this.botoesPainel()));
-  }
-  criarGrupo(e) {
-    const t = document.createElement("div");
-    t.className = "ui-ribbon__grupo", t.setAttribute("role", "group"), t.setAttribute("aria-label", e.rotulo), t.dataset.id = e.id;
-    const i = document.createElement("div");
-    i.className = "ui-ribbon__grupo-itens";
-    let r = null, n = 0;
-    const a = () => {
-      r && i.appendChild(r), r = null, n = 0;
-    };
-    e.itens.forEach((h) => {
-      if (h.tipo === "separador") {
-        a();
-        const b = document.createElement("div");
-        b.className = "ui-ribbon__separador", b.setAttribute("role", "separator"), i.appendChild(b);
-      } else h.tamanho === "grande" ? (a(), i.appendChild(this.criarBotao(h, "grande", 24))) : (r || (r = document.createElement("div"), r.className = "ui-ribbon__coluna"), r.appendChild(this.criarBotao(h, "pequeno", 16)), ++n === 3 && a());
-    }), a();
-    const s = document.createElement("div");
-    return s.className = "ui-ribbon__grupo-rotulo", s.textContent = e.rotulo, t.appendChild(i), t.appendChild(s), t;
-  }
-  criarBotao(e, t, i) {
-    var n;
-    const r = (n = e.filhos) != null && n.length ? { ...e, tipo: "menu" } : e;
-    return I(r, t, i);
-  }
-  botoesPainel() {
-    return Array.from(this.gruposElement.querySelectorAll(".ui-ferr-btn"));
-  }
-  acionar(e, t) {
-    var n;
-    const i = this._abas.find((a) => a.id === this._abaAtiva), r = i && f(i.grupos.flatMap((a) => a.itens), e.dataset.id);
-    if (!(!r || r.disabled)) {
-      if ((n = r.filhos) != null && n.length) {
-        this.alternarMenu(e, r, t);
-        return;
-      }
-      r.tipo === "toggle" && (r.ativo = !r.ativo, w(e, r)), this.emitir(r), this.rootElement.classList.remove("ui-ribbon--aberto");
-    }
-  }
-  alternarMenu(e, t, i) {
-    var n;
-    const r = ((n = this.menu) == null ? void 0 : n.ancora) === e;
-    this.fecharMenu(), !r && (e.setAttribute("aria-expanded", "true"), this.menu = T(
-      this.shadowRoot,
-      e,
-      t.filhos,
-      (a) => {
-        a.tipo === "toggle" && (a.ativo = !a.ativo), this.emitir(a, t), this.rootElement.classList.remove("ui-ribbon--aberto");
-      },
-      {
-        lado: "baixo",
-        focar: i,
-        onFechar: () => {
-          e.setAttribute("aria-expanded", "false"), this.menu = null;
-        }
-      }
-    ));
-  }
-  fecharMenu() {
-    var e;
-    (e = this.menu) == null || e.fechar(), this.menu = null;
-  }
-  emitir(e, t) {
-    this.dispatchEvent(
-      new CustomEvent("ui-ferramenta", {
-        detail: { id: e.id, item: e, pai: t, ativo: e.ativo, origem: "ribbon", aba: this._abaAtiva },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-}
-E("ui-ribbon", V);
-const O = ':host{display:inline-block;box-sizing:border-box;font-family:var(--ui-fonte-base, "Inter", sans-serif);color:var(--ui-cor-texto, #e1e1e6)}.ui-paleta{--ui-paleta-btn: 34px;--ui-paleta-padding: 4px;--ui-paleta-raio: var(--ui-paleta-raio-borda, 10px);--ui-paleta-btn-raio: var(--ui-paleta-raio-botao, max(2px, calc(var(--ui-paleta-raio) - var(--ui-paleta-padding))));display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--ui-paleta-padding);box-sizing:border-box;background:var(--ui-cor-superficie, #141417);border:1px solid var(--ui-cor-borda, rgba(255, 255, 255, .12));border-radius:var(--ui-paleta-raio);-webkit-user-select:none;user-select:none}.ui-paleta--horizontal{flex-direction:row}.ui-paleta--sm{--ui-paleta-btn: 28px;--ui-paleta-raio: var(--ui-paleta-raio-borda, 8px)}.ui-paleta--lg{--ui-paleta-btn: 42px;--ui-paleta-raio: var(--ui-paleta-raio-borda, 12px)}.ui-paleta--cols-2{display:grid;grid-template-columns:repeat(2,var(--ui-paleta-btn));justify-content:center}.ui-paleta--cols-2 .ui-paleta__sep{grid-column:1 / -1}.ui-paleta .ui-ferr-btn{width:var(--ui-paleta-btn);height:var(--ui-paleta-btn);border-radius:var(--ui-paleta-btn-raio)}.ui-paleta .ui-ferr-btn--ativo{background:var(--ui-cor-primaria, #00E08A);border-color:transparent;color:var(--ui-cor-texto-sobre-primaria, #000000)}.ui-ferr-btn--grupo:after{content:"";position:absolute;right:3px;bottom:3px;width:0;height:0;border-left:5px solid transparent;border-bottom:5px solid currentColor;opacity:.7;pointer-events:none}.ui-paleta__sep{width:70%;height:1px;margin:3px 0;background:var(--ui-cor-borda, rgba(255, 255, 255, .12))}.ui-paleta--horizontal .ui-paleta__sep{width:1px;height:70%;margin:0 3px}', K = 380, U = { sm: 16, md: 18, lg: 22 };
-class G extends C {
-  constructor() {
-    super();
-    c(this, "rootElement");
-    c(this, "_ferramentas", []);
-    c(this, "_ativo", "");
-    c(this, "visiveis", /* @__PURE__ */ new Map());
-    // id do grupo → id do filho exibido
-    c(this, "menu", null);
-    c(this, "timerPressao");
-    c(this, "suprimirClique", !1);
-    c(this, "listeners", new k());
-    c(this, "handleClick", (e) => {
-      if (this.suprimirClique) {
-        this.suprimirClique = !1;
-        return;
-      }
-      const t = e.target.closest(".ui-ferr-btn"), i = t != null && t.dataset.id ? f(this._ferramentas, t.dataset.id) : void 0;
-      if (!t || !i) return;
-      const r = t.dataset.grupo ? f(this._ferramentas, t.dataset.grupo) : void 0;
-      this.acionar(i, r);
-    });
-    c(this, "handlePointerDown", (e) => {
-      const t = e;
-      if (t.pointerType === "mouse" && t.button !== 0) return;
-      const i = e.target.closest(".ui-ferr-btn--grupo");
-      !i || i.disabled || (this.cancelarPressao(), this.timerPressao = window.setTimeout(() => {
-        this.suprimirClique = !0, this.abrirFlyout(i, !1);
-      }, K));
-    });
-    c(this, "cancelarPressao", () => {
-      this.timerPressao !== void 0 && (window.clearTimeout(this.timerPressao), this.timerPressao = void 0);
-    });
-    c(this, "handleContextMenu", (e) => {
-      const t = e.target.closest(".ui-ferr-btn--grupo");
-      t && (e.preventDefault(), this.cancelarPressao(), this.abrirFlyout(t, !1));
-    });
-    c(this, "handleKeyDown", (e) => {
-      const t = this.getAttribute("orientacao") === "horizontal", i = t ? ["ArrowLeft"] : ["ArrowUp"], r = t ? ["ArrowRight"] : ["ArrowDown"];
-      if (N(e, this.botoes(), i, r)) return;
-      const n = t ? "ArrowDown" : "ArrowRight", a = e.target instanceof HTMLButtonElement ? e.target : null;
-      a != null && a.dataset.grupo && e.key === n && (e.preventDefault(), this.abrirFlyout(a, !0));
-    });
-    c(this, "handleAtalho", (e) => {
-      if (!this.hasAttribute("atalhos") || e.ctrlKey || e.metaKey || e.altKey || e.defaultPrevented) return;
-      const t = e.composedPath()[0];
-      if (t && (/^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName) || t.isContentEditable)) return;
-      const i = (e.key || "").toUpperCase();
-      if (i.length !== 1) return;
-      const r = this.todasFerramentas().filter((s) => {
-        var h;
-        return !s.disabled && ((h = s.atalho) == null ? void 0 : h.toUpperCase()) === i;
-      });
-      if (!r.length) return;
-      e.preventDefault();
-      let n = r[0];
-      if (r.length > 1) {
-        const s = r.findIndex((h) => h.id === this._ativo);
-        n = r[(s + 1) % r.length];
-      }
-      const a = this._ferramentas.find((s) => {
-        var h;
-        return (h = s.filhos) == null ? void 0 : h.some((b) => b.id === n.id);
-      });
-      this.acionar(n, a);
-    });
-    const e = this.attachShadow({ mode: "open" });
-    e.innerHTML = `
-      <style>${P}${O}</style>
-      <div class="ui-paleta ui-paleta--vertical" role="toolbar" aria-orientation="vertical" aria-label="Ferramentas"></div>
-    `, this.rootElement = e.querySelector(".ui-paleta");
-  }
-  static get observedAttributes() {
-    return ["valor", "value", "orientacao", "colunas", "tamanho", "size"];
-  }
-  connectedCallback() {
-    this.listeners.cleanup(), this.listeners.add(this.rootElement, "click", this.handleClick), this.listeners.add(this.rootElement, "pointerdown", this.handlePointerDown), this.listeners.add(this.rootElement, "pointerup", this.cancelarPressao), this.listeners.add(this.rootElement, "pointerleave", this.cancelarPressao), this.listeners.add(this.rootElement, "pointercancel", this.cancelarPressao), this.listeners.add(this.rootElement, "contextmenu", this.handleContextMenu), this.listeners.add(this.rootElement, "keydown", this.handleKeyDown), this.listeners.add(document, "keydown", this.handleAtalho);
-    const e = this.getAttribute("valor") || this.getAttribute("value");
-    e && !this._ativo && this.definirAtivoInterno(e), this.renderizar();
-  }
-  disconnectedCallback() {
-    this.cancelarPressao(), this.fecharMenu(), this.listeners.cleanup();
-  }
-  attributeChangedCallback(e, t, i) {
-    t !== i && (e === "valor" || e === "value" ? i && i !== this._ativo && this.ativar(i, !1) : this.renderizar());
-  }
-  /* ---------- API pública ---------- */
-  get ferramentas() {
-    return this._ferramentas;
-  }
-  set ferramentas(e) {
-    this._ferramentas = Array.isArray(e) ? e : [], this.visiveis.clear(), this._ativo && this.definirAtivoInterno(this._ativo), this.renderizar();
-  }
-  get valor() {
-    return this._ativo;
-  }
-  set valor(e) {
-    this.ativar(e);
-  }
-  get value() {
-    return this.valor;
-  }
-  set value(e) {
-    this.valor = e;
-  }
-  /** Ativa uma ferramenta (exclusiva). Se estiver dentro de um grupo, ela passa a ser a exibida. */
-  ativar(e, t = !0) {
-    const i = f(this._ferramentas, e);
-    if (!i || i.disabled || (i.tipo ?? "ferramenta") !== "ferramenta") return;
-    const r = this._ativo;
-    if (this.definirAtivoInterno(e), this.getAttribute("valor") !== e && this.setAttribute("valor", e), this.renderizar(), t && r !== e) {
-      const n = { valor: e, item: i, anterior: r };
-      this.dispatchEvent(new CustomEvent("ui-change", { detail: n, bubbles: !0, composed: !0 })), this.dispatchEvent(new CustomEvent("ui-selecionar", { detail: n, bubbles: !0, composed: !0 }));
-    }
-  }
-  atualizarItem(e, t) {
-    const i = f(this._ferramentas, e);
-    i && (Object.assign(i, t), this.renderizar());
-  }
-  /* ---------- Estado interno ---------- */
-  definirAtivoInterno(e) {
-    this._ativo = e;
-    const t = this._ferramentas.find((i) => {
-      var r;
-      return (r = i.filhos) == null ? void 0 : r.some((n) => n.id === e);
-    });
-    t && this.visiveis.set(t.id, e);
-  }
-  itemExibido(e) {
-    var i;
-    if (!((i = e.filhos) != null && i.length)) return e;
-    const t = this.visiveis.get(e.id);
-    return e.filhos.find((r) => r.id === t) ?? e.filhos[0];
-  }
-  todasFerramentas() {
-    return this._ferramentas.flatMap((e) => {
-      var t;
-      return (t = e.filhos) != null && t.length ? e.filhos : [e];
-    }).filter((e) => e.tipo !== "separador");
-  }
-  /* ---------- Renderização ---------- */
-  renderizar() {
-    this.fecharMenu();
-    const e = this.getAttribute("orientacao") === "horizontal" ? "horizontal" : "vertical", t = this.getAttribute("tamanho") || this.getAttribute("size") || "md", i = this.getAttribute("colunas") === "2" ? 2 : 1;
-    this.rootElement.className = `ui-paleta ui-paleta--${e} ui-paleta--${t}`, i === 2 && e === "vertical" && this.rootElement.classList.add("ui-paleta--cols-2"), this.rootElement.setAttribute("aria-orientation", e), this.rootElement.innerHTML = "";
-    const r = U[t] ?? 18;
-    this._ferramentas.forEach((a) => {
-      var v;
-      if (a.tipo === "separador") {
-        const g = document.createElement("div");
-        g.className = "ui-paleta__sep", g.setAttribute("role", "separator"), this.rootElement.appendChild(g);
-        return;
-      }
-      const s = this.itemExibido(a), h = s.tipo ?? "ferramenta", b = {
-        ...s,
-        tipo: h,
-        ativo: h === "ferramenta" ? s.id === this._ativo : s.ativo,
-        filhos: a.filhos
-      }, m = I(b, "paleta", r);
-      m.dataset.id = s.id, (v = a.filhos) != null && v.length && (m.dataset.grupo = a.id), this.rootElement.appendChild(m);
-    }), D(this.botoes());
-    const n = this.botoes().find((a) => a.dataset.id === this._ativo && !a.disabled);
-    n && (this.botoes().forEach((a) => a.tabIndex = -1), n.tabIndex = 0);
-  }
-  botoes() {
-    return Array.from(this.rootElement.querySelectorAll(".ui-ferr-btn"));
-  }
-  /* ---------- Interação ---------- */
-  acionar(e, t) {
-    if (e.disabled) return;
-    const i = e.tipo ?? "ferramenta";
-    i === "ferramenta" ? this.ativar(e.id) : i === "toggle" && (e.ativo = !e.ativo, this.renderizar()), this.dispatchEvent(
-      new CustomEvent("ui-ferramenta", {
-        detail: {
-          id: e.id,
-          item: e,
-          pai: t,
-          ativo: i === "ferramenta" ? !0 : e.ativo,
-          origem: "paleta"
-        },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  abrirFlyout(e, t) {
-    var n;
-    const i = e.dataset.grupo ? f(this._ferramentas, e.dataset.grupo) : void 0;
-    if (!((n = i == null ? void 0 : i.filhos) != null && n.length)) return;
-    this.fecharMenu();
-    const r = i.filhos.map((a) => ({ ...a, ativo: a.id === this._ativo }));
-    e.setAttribute("aria-expanded", "true"), this.menu = T(
-      this.shadowRoot,
-      e,
-      r,
-      (a) => {
-        const s = f(i.filhos, a.id);
-        s && this.acionar(s, i);
-      },
-      {
-        lado: this.getAttribute("orientacao") === "horizontal" ? "baixo" : "direita",
-        focar: t,
-        onFechar: () => {
-          e.setAttribute("aria-expanded", "false"), this.menu = null;
-        }
-      }
-    );
-  }
-  fecharMenu() {
-    var e;
-    (e = this.menu) == null || e.fechar(), this.menu = null;
-  }
-}
-E("ui-paleta-ferramentas", G);
-export {
-  $ as U,
-  G as a,
-  V as b
-};