@thibezer/ui-components-kit 1.0.0

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

@@ -0,0 +1,633 @@
+var j = Object.defineProperty;
+var q = (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) => q(o, typeof l != "symbol" ? l + "" : l, e);
+import { L as E } from "./listener-bag-DQgv7OON.js";
+import { d as k, S as C } from "./ssr-safe-5cWfJP-s.js";
+const H = ':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 B 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>${H}</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");
+  }
+}
+k("ui-icone", B);
+const $ = ':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:0 8px 24px #00000059}: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:0 8px 24px #00000059;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: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 F(o) {
+  const l = document.createElement("template");
+  l.innerHTML = o.trim();
+  const e = l.content.querySelector("svg");
+  return e ? (e.querySelectorAll("script, foreignObject").forEach((t) => t.remove()), [e, ...Array.from(e.querySelectorAll("*"))].forEach((t) => {
+    Array.from(t.attributes).forEach((i) => {
+      (/^on/i.test(i.name) || /^\s*javascript:/i.test(i.value)) && t.removeAttribute(i.name);
+    });
+  }), e) : null;
+}
+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 = F(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 E(), 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 E());
+    /* ---------- 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}${$}</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
+      })
+    );
+  }
+}
+k("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 E());
+    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;
+  }
+}
+k("ui-paleta-ferramentas", G);
+export {
+  B as U,
+  G as a,
+  V as b
+};