@linkurious/ogma-annotations 2.1.3 → 2.1.4

package/dist/ui.mjs

@@ -1,13 +1,13 @@
 var _ = Object.defineProperty;
-var R = (i, t, e) => t in i ? _(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var r = (i, t, e) => R(i, typeof t != "symbol" ? t + "" : t, e);
+var R = (s, t, e) => t in s ? _(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var c = (s, t, e) => R(s, typeof t != "symbol" ? t + "" : t, e);
 import { RgbaBase as z } from "vanilla-colorful/lib/entrypoints/rgba";
-import { j as w, s as g, t as $, i as B, v as E, h as S, K as m, aN as F, D as x, an as M, ai as P, F as W, u as V, L as q, al as L, aM as U } from "./Polygon-C9ZkyU-t.js";
-const k = "rgba-color-picker";
+import { j as w, s as k, t as T, i as B, v as E, h as S, L as y, aO as F, F as x, ao as P, aj as M, G as q, u as W, M as V, am as $, aN as U } from "./Polygon-BmJ_q7qz.js";
+const A = "rgba-color-picker";
 class Y extends z {
 }
 function N() {
-  return customElements.get(k) || customElements.define(k, Y), document.createElement(k);
+  return customElements.get(A) || customElements.define(A, Y), document.createElement(A);
 }
 const j = [
   { value: "#f5f5f5", style: "--circle-color: #f5f5f5;" },
@@ -30,16 +30,16 @@ const j = [
   { value: "plain", icon: "circle" },
   { value: "dashed", icon: "circle-dashed" }
 ], J = ["#0099FF", "#FF7523", "#44AA99"];
-function D(i) {
-  return `rgba(${i.r}, ${i.g}, ${i.b}, ${i.a})`;
+function O(s) {
+  return `rgba(${s.r}, ${s.g}, ${s.b}, ${s.a})`;
 }
 const K = 3;
 function Z() {
   return { colors: [...J], activeIndex: 0 };
 }
-function Q(i, t) {
-  const e = i.colors.indexOf(t);
-  return e === -1 ? { colors: [t, ...i.colors].slice(0, K), activeIndex: 0 } : { colors: i.colors, activeIndex: e };
+function Q(s, t) {
+  const e = s.colors.indexOf(t);
+  return e === -1 ? { colors: [t, ...s.colors].slice(0, K), activeIndex: 0 } : { colors: s.colors, activeIndex: e };
 }
 const tt = {
   "chevron-down": '<path d="m6 9 6 6 6-6"/>',
@@ -70,95 +70,104 @@ const tt = {
   "rotate-ccw": '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>',
   minimize: '<path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/><path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>'
 };
-function b(i, t = 18) {
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${tt[i]}</svg>`;
+function v(s, t = 18) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${t}" height="${t}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${tt[s]}</svg>`;
 }
 const et = 150;
-function O(i, { onShow: t, onHide: e, hideWhenNotEditable: o = !0 }) {
-  const n = (p) => !o || i.isAnnotationEditable(p);
-  let s = null, a = null, d = null, h = null;
-  const c = () => {
+function D(s, { onShow: t, onHide: e, hideWhenNotEditable: o = !0 }) {
+  const i = (p) => !o || s.isAnnotationEditable(p);
+  let n = null, r = null, d = null, h = null;
+  const a = () => {
     h !== null && (clearTimeout(h), h = null);
   }, l = () => {
-    if (c(), s) {
-      const p = s;
-      s = null, n(p.id) ? (a = p, t(p)) : u();
+    if (a(), n) {
+      const p = n;
+      n = null, i(p.id) ? (r = p, t(p)) : u();
       return;
     }
-    if (!a && d != null) {
-      const p = i.getAnnotation(d);
-      p && n(p.id) && (a = p, t(p));
+    if (!r && d != null) {
+      const p = s.getAnnotation(d);
+      p && i(p.id) && (r = p, t(p));
     }
   }, u = () => {
-    c(), s = null, a = null, e();
-  }, y = (p) => {
-    if (c(), p.ids.length === 1) {
-      const f = i.getAnnotation(p.ids[0]);
-      if (!f) return;
-      if (d = p.ids[0], s = f, i.isDrawing()) {
-        i.once("cancelDrawing", l), i.once("completeDrawing", l);
+    a(), n = null, r = null, e();
+  }, m = (p) => {
+    if (a(), p.ids.length === 1) {
+      const g = s.getAnnotation(p.ids[0]);
+      if (!g) return;
+      if (d = p.ids[0], n = g, s.isDrawing()) {
+        s.once("cancelDrawing", l), s.once("completeDrawing", l);
         return;
       }
       h = setTimeout(l, et);
     } else
       d = null, u();
-  }, v = () => u(), A = (p) => {
-    const f = s ?? a;
-    f && !p.ids.includes(f.id) || (d = null, u());
+  }, b = () => u(), f = (p) => {
+    const g = n ?? r;
+    g && !p.ids.includes(g.id) || (d = null, u());
   };
-  return i.on("select", y), i.on("click", l), i.on("dragend", l), i.on("dragstart", v), i.on("unselect", A), () => {
-    c(), i.off("select", y), i.off("click", l), i.off("dragend", l), i.off("dragstart", v), i.off("unselect", A), i.off("cancelDrawing", l), i.off("completeDrawing", l);
+  return s.on("select", m), s.on("click", l), s.on("dragend", l), s.on("dragstart", b), s.on("unselect", f), () => {
+    a(), s.off("select", m), s.off("click", l), s.off("dragend", l), s.off("dragstart", b), s.off("unselect", f), s.off("cancelDrawing", l), s.off("completeDrawing", l);
   };
 }
-const ot = "right", nt = "vertical", st = [
+const ot = "right", it = "vertical", nt = [
   "arrow",
   "text",
   "box",
   "comment",
   "polygon"
 ];
-function it(i) {
-  return w(i) ? "arrow" : g(i) ? "text" : $(i) ? "box" : B(i) ? "comment" : E(i) ? "polygon" : null;
+function rt(s) {
+  return w(s) ? "arrow" : k(s) ? "text" : T(s) ? "box" : B(s) ? "comment" : E(s) ? "polygon" : null;
 }
 class kt {
   constructor(t) {
-    r(this, "control");
-    r(this, "panel");
-    r(this, "panelBody");
-    r(this, "mode", null);
-    r(this, "currentAnnotation", null);
-    r(this, "currentColor", "#0099FF");
-    r(this, "recent", Z());
-    r(this, "colorCircles", []);
-    r(this, "colorPickerOverlay", null);
-    r(this, "colorPicker", null);
-    r(this, "detachVisibility");
-    r(this, "documentClickHandler");
-    r(this, "enabledTypes");
-    r(this, "hide", () => {
+    c(this, "control");
+    c(this, "panel");
+    c(this, "panelBody");
+    c(this, "mode", null);
+    c(this, "currentAnnotation", null);
+    c(this, "currentColor", "#0099FF");
+    c(this, "recent", Z());
+    c(this, "colorCircles", []);
+    c(this, "colorPickerOverlay", null);
+    c(this, "colorPicker", null);
+    c(this, "detachVisibility");
+    c(this, "documentClickHandler");
+    c(this, "enabledTypes");
+    c(this, "hide", () => {
       this.panel.style.display = "none", this.closeColorPicker(), this.currentAnnotation = null, this.mode = null;
     });
-    this.control = t.control, this.enabledTypes = t.enabledTypes ?? st;
-    const e = t.container ?? document.body;
-    this.panel = document.createElement("div"), this.panel.className = "annotation-panel", this.panel.style.display = "none", this.panel.dataset.placement = t.placement ?? ot, this.panel.dataset.orientation = t.orientation ?? nt, this.panelBody = document.createElement("div"), this.panelBody.className = "panel-body", this.panel.appendChild(this.panelBody), e.appendChild(this.panel), this.detachVisibility = O(this.control, {
-      onShow: (o) => {
-        const n = it(o);
-        if (!n || !this.enabledTypes.includes(n)) {
+    var i, n, r, d;
+    this.control = t.control, this.enabledTypes = t.enabledTypes ?? nt;
+    const e = t.container ?? document.body, o = (d = (r = (n = (i = this.control).getOgma) == null ? void 0 : n.call(i)) == null ? void 0 : r.getContainer) == null ? void 0 : d.call(r);
+    !t.container && o && o !== document.body && console.error(
+      "[ogma-annotations-control] AnnotationPanel: no `container` option given, defaulting to document.body. If this panel should dock to the Ogma graph area (e.g. it is embedded in a smaller/offset div), pass `container: control.getOgma().getContainer()` and give that container `position: relative`."
+    ), this.panel = document.createElement("div"), this.panel.className = "annotation-panel", this.panel.setAttribute("role", "region"), this.panel.setAttribute("aria-label", "Annotation style panel"), this.panel.style.display = "none", this.panel.dataset.placement = t.placement ?? ot, this.panel.dataset.orientation = t.orientation ?? it, this.panelBody = document.createElement("div"), this.panelBody.className = "panel-body", this.panel.appendChild(this.panelBody), e.appendChild(this.panel), this.detachVisibility = D(this.control, {
+      onShow: (h) => {
+        const a = rt(h);
+        if (!a || !this.enabledTypes.includes(a)) {
           this.hide();
           return;
         }
-        this.setAnnotation(o), this.show();
+        this.setAnnotation(h), this.show();
       },
       onHide: this.hide,
       hideWhenNotEditable: t.hideWhenNotEditable
     }), ["click", "mousedown", "mousemove"].forEach(
-      (o) => this.panel.addEventListener(o, (n) => n.stopPropagation())
-    ), this.documentClickHandler = (o) => {
-      this.colorPickerOverlay && !this.colorPickerOverlay.contains(o.target) && !this.colorCircles.some((n) => n.contains(o.target)) && this.closeColorPicker(), this.panelBody.querySelectorAll(".custom-select").forEach((n) => n.classList.remove("open"));
+      (h) => this.panel.addEventListener(h, (a) => a.stopPropagation())
+    ), this.documentClickHandler = (h) => {
+      this.colorPickerOverlay && !this.colorPickerOverlay.contains(h.target) && !this.colorCircles.some((a) => a.contains(h.target)) && this.closeColorPicker(), this.panelBody.querySelectorAll(".custom-select").forEach((a) => {
+        var l;
+        a.classList.remove("open"), (l = a.querySelector(".custom-select-trigger")) == null || l.setAttribute(
+          "aria-expanded",
+          "false"
+        );
+      });
     }, document.addEventListener("click", this.documentClickHandler);
   }
   setAnnotation(t) {
-    this.currentAnnotation = t, w(t) ? (this.mode = "arrow", this.renderArrow(t)) : g(t) || $(t) || B(t) ? (this.mode = "text", this.renderText(t)) : E(t) && (this.mode = "polygon", this.renderPolygon(t));
+    this.currentAnnotation = t, w(t) ? (this.mode = "arrow", this.renderArrow(t)) : k(t) || T(t) || B(t) ? (this.mode = "text", this.renderText(t)) : E(t) && (this.mode = "polygon", this.renderPolygon(t));
   }
   renderArrow(t) {
     const e = t.properties.style || {};
@@ -179,14 +188,14 @@ class kt {
   }
   renderText(t) {
     const e = t.properties.style || {};
-    this.updateColorFromAnnotation(e.color || m.color);
-    const o = typeof e.fontSize == "number" ? e.fontSize : typeof m.fontSize == "number" ? m.fontSize : 18;
+    this.updateColorFromAnnotation(e.color || y.color);
+    const o = typeof e.fontSize == "number" ? e.fontSize : typeof y.fontSize == "number" ? y.fontSize : 18;
     this.panelBody.innerHTML = `
       ${this.section("Color", this.colorSelector())}
-      ${this.section("Background", this.backgroundSelector(e.background || m.background))}
-      ${this.section("Font", `<div class="custom-select-section">${this.fontSelector(e.font || m.font)}</div>`)}
+      ${this.section("Background", this.backgroundSelector(e.background || y.background))}
+      ${this.section("Font", `<div class="custom-select-section">${this.fontSelector(e.font || y.font)}</div>`)}
       ${this.slider("Font size", "font-size", o, 8, 72)}
-      ${this.slider("Stroke width", "line-width", e.strokeWidth || m.strokeWidth, 1, 20)}
+      ${this.slider("Stroke width", "line-width", e.strokeWidth || y.strokeWidth, 1, 20)}
       ${this.lineTypeButtons(e.strokeType || "plain")}
     `, this.bind();
   }
@@ -194,7 +203,7 @@ class kt {
     const e = t.properties.style || {};
     this.updateColorFromAnnotation(e.strokeColor || "#000000"), this.panelBody.innerHTML = `
       ${this.section("Color", this.colorSelector())}
-      ${this.section("Fill", this.backgroundSelector(e.background || "transparent"))}
+      ${this.section("Fill", this.backgroundSelector(e.background || "transparent", "Fill"))}
       ${this.slider("Stroke width", "line-width", e.strokeWidth || 2, 1, 20)}
       ${this.lineTypeButtons(e.strokeType || "plain")}
     `, this.bind();
@@ -204,22 +213,22 @@ class kt {
     return `<div class="section-header"><h3>${t}</h3></div>${e}`;
   }
   icon(t, e = !1) {
-    return e ? `<span style="display:inline-flex;transform:rotate(180deg)">${b(t)}</span>` : b(t);
+    return e ? `<span style="display:inline-flex;transform:rotate(180deg)">${v(t)}</span>` : v(t);
   }
   colorSelector() {
-    return `<div class="color-selector">${this.recent.colors.map(
+    return `<div class="color-selector" role="group" aria-label="Color">${this.recent.colors.map(
       (t, e) => `
-      <button class="color-circle ${e === 0 ? "color-circle-primary" : ""}" data-index="${e}" data-color="${t}">
+      <button type="button" class="color-circle ${e === 0 ? "color-circle-primary" : ""}" data-index="${e}" data-color="${t}" aria-label="Set color to ${t}" aria-pressed="${e === 0}">
         <div class="color-inner"></div>
       </button>
     `
     ).join("")}</div>`;
   }
-  backgroundSelector(t) {
-    return `<div class="color-selector">${j.map(
-      ({ value: e, style: o }) => `
-      <button class="color-circle ${e === t ? "color-circle-primary" : ""}" data-background-color="${e}">
-        <div class="color-inner" style="${o}"></div>
+  backgroundSelector(t, e = "Background") {
+    return `<div class="color-selector" role="group" aria-label="${e}">${j.map(
+      ({ value: o, style: i }) => `
+      <button type="button" class="color-circle ${o === t ? "color-circle-primary" : ""}" data-background-color="${o}" aria-label="${o === "transparent" ? "No background" : `Background ${o}`}" aria-pressed="${o === t}">
+        <div class="color-inner" style="${i}"></div>
       </button>
     `
     ).join("")}</div>`;
@@ -233,37 +242,38 @@ class kt {
     );
   }
   extremitySelector(t, e) {
-    var a;
-    const o = ((a = e.properties.style) == null ? void 0 : a[t]) || "none", n = G.map((d) => ({
+    var r;
+    const o = ((r = e.properties.style) == null ? void 0 : r[t]) || "none", i = G.map((d) => ({
       ...d,
       icon: d.value === "arrow" && t === "tail" ? "arrow-left" : d.value === "arrow" ? "arrow-right" : d.icon,
       selected: d.value === o,
       rotate: d.value === "arrow-plain" && t === "tail"
-    })), s = n.find((d) => d.selected) || n[0];
-    return `<div class="extremity-wrapper"><label>${t}</label>${this.dropdown(t, s, n, `data-end="${t}"`)}</div>`;
+    })), n = i.find((d) => d.selected) || i[0];
+    return `<div class="extremity-wrapper"><label>${t}</label>${this.dropdown(t, n, i, `data-end="${t}"`)}</div>`;
   }
-  dropdown(t, e, o, n = "") {
-    return `<div class="custom-select" data-type="${t}" ${n}>
-      <div class="custom-select-trigger">
+  dropdown(t, e, o, i = "") {
+    const n = t === "font" ? "Font" : t;
+    return `<div class="custom-select" data-type="${t}" ${i}>
+      <button type="button" class="custom-select-trigger" aria-haspopup="listbox" aria-expanded="false" aria-label="${n}: ${e.label}">
         ${this.icon(e.icon, e.rotate)}
         <span>${e.label}</span>
         ${this.icon("chevron-down")}
-      </div>
-      <div class="custom-select-options">${o.map(
-      (s) => `
-        <div class="custom-select-option ${s.selected ? "selected" : ""}" data-value="${s.value}" data-icon="${s.icon}" data-rotate="${s.rotate ? "1" : ""}" title="${s.label}">
-          ${this.icon(s.icon, s.rotate)}
-          <span>${s.label}</span>
-        </div>
+      </button>
+      <div class="custom-select-options" role="listbox" aria-label="${n} options">${o.map(
+      (r) => `
+        <button type="button" role="option" aria-selected="${r.selected ? "true" : "false"}" class="custom-select-option ${r.selected ? "selected" : ""}" data-value="${r.value}" data-icon="${r.icon}" data-rotate="${r.rotate ? "1" : ""}" title="${r.label}">
+          ${this.icon(r.icon, r.rotate)}
+          <span>${r.label}</span>
+        </button>
       `
     ).join("")}</div>
     </div>`;
   }
-  slider(t, e, o, n, s) {
+  slider(t, e, o, i, n) {
     return `${this.section(
       t,
       `<div class="slider-section">
-      <input type="range" id="${e}-slider" class="slider" min="${n}" max="${s}" value="${o}">
+      <input type="range" id="${e}-slider" class="slider" aria-label="${t}" min="${i}" max="${n}" value="${o}">
       <div class="slider-value"><span id="${e}-value">${o}</span></div>
     </div>`
     )}`;
@@ -271,9 +281,9 @@ class kt {
   lineTypeButtons(t) {
     return `${this.section(
       "Line type",
-      `<div class="linetype-section">${X.map(
+      `<div class="linetype-section" role="group" aria-label="Line type">${X.map(
         ({ value: e, icon: o }) => `
-      <button class="linetype-button ${t === e ? "active" : ""}" data-linetype="${e}" title="${e}">
+      <button type="button" class="linetype-button ${t === e ? "active" : ""}" data-linetype="${e}" title="${e}" aria-label="${e} line" aria-pressed="${t === e}">
         ${this.icon(o)}
       </button>
     `
@@ -287,8 +297,8 @@ class kt {
     ), this.colorCircles.forEach((t, e) => {
       t.addEventListener("click", (o) => {
         o.stopPropagation();
-        const n = this.recent.activeIndex === e && t.classList.contains("color-circle-primary");
-        this.recent = { ...this.recent, activeIndex: e }, this.currentColor = this.recent.colors[e], this.updateColorCircles(), n ? this.toggleColorPicker(t) : this.mode === "arrow" ? this.updateStyle({ strokeColor: this.currentColor }) : this.mode === "text" && this.updateStyle({ strokeColor: this.currentColor });
+        const i = this.recent.activeIndex === e && t.classList.contains("color-circle-primary");
+        this.recent = { ...this.recent, activeIndex: e }, this.currentColor = this.recent.colors[e], this.updateColorCircles(), i ? this.toggleColorPicker(t) : this.mode === "arrow" ? this.updateStyle({ strokeColor: this.currentColor }) : this.mode === "text" && this.updateStyle({ strokeColor: this.currentColor });
       });
     }), this.updateColorCircles(), this.panelBody.querySelectorAll("[data-background-color]").forEach((t) => {
       t.addEventListener(
@@ -300,20 +310,28 @@ class kt {
         ".custom-select-trigger"
       ), o = t.querySelectorAll(
         ".custom-select-option"
-      );
+      ), i = t.dataset.type === "font" ? "Font" : t.dataset.type;
       e.addEventListener("click", (n) => {
-        n.stopPropagation(), this.panelBody.querySelectorAll(".custom-select").forEach((s) => {
-          s !== t && s.classList.remove("open");
-        }), t.classList.toggle("open");
+        n.stopPropagation(), this.panelBody.querySelectorAll(".custom-select").forEach((d) => {
+          var h;
+          d !== t && (d.classList.remove("open"), (h = d.querySelector(".custom-select-trigger")) == null || h.setAttribute(
+            "aria-expanded",
+            "false"
+          ));
+        });
+        const r = !t.classList.contains("open");
+        t.classList.toggle("open", r), e.setAttribute("aria-expanded", String(r));
       }), o.forEach((n) => {
-        n.addEventListener("click", (s) => {
-          s.stopPropagation();
-          const a = n.dataset.value;
-          o.forEach((v) => v.classList.remove("selected")), n.classList.add("selected");
-          const d = n.dataset.icon, h = n.dataset.rotate === "1", c = n.querySelector("span").textContent || "", l = e.querySelector("svg, span[style]");
-          l && (l.outerHTML = this.icon(d, h)), e.querySelector("span").textContent = c, t.classList.remove("open");
-          const u = t.dataset.type, y = t.dataset.end;
-          u === "font" ? this.updateStyle({ font: a }) : y === "head" ? this.updateStyle({ head: a }) : y === "tail" && this.updateStyle({ tail: a });
+        n.addEventListener("click", (r) => {
+          r.stopPropagation();
+          const d = n.dataset.value;
+          o.forEach((f) => {
+            f.classList.remove("selected"), f.setAttribute("aria-selected", "false");
+          }), n.classList.add("selected"), n.setAttribute("aria-selected", "true");
+          const h = n.dataset.icon, a = n.dataset.rotate === "1", l = n.querySelector("span").textContent || "", u = e.querySelector("svg, span[style]");
+          u && (u.outerHTML = this.icon(h, a)), e.querySelector("span").textContent = l, e.setAttribute("aria-label", `${i}: ${l}`), t.classList.remove("open"), e.setAttribute("aria-expanded", "false");
+          const m = t.dataset.type, b = t.dataset.end;
+          m === "font" ? this.updateStyle({ font: d }) : b === "head" ? this.updateStyle({ head: d }) : b === "tail" && this.updateStyle({ tail: d });
         });
       });
     }), ["line-width", "font-size"].forEach((t) => {
@@ -321,15 +339,17 @@ class kt {
         `#${t}-slider`
       ), o = this.panelBody.querySelector(`#${t}-value`);
       e && o && e.addEventListener("input", () => {
-        const n = parseInt(e.value, 10);
-        o.textContent = n.toString(), t === "line-width" ? this.updateStyle(
-          this.mode === "text" ? { strokeWidth: n, strokeColor: this.currentColor } : { strokeWidth: n }
-        ) : t === "font-size" && this.updateStyle({ fontSize: n });
+        const i = parseInt(e.value, 10);
+        o.textContent = i.toString(), t === "line-width" ? this.updateStyle(
+          this.mode === "text" ? { strokeWidth: i, strokeColor: this.currentColor } : { strokeWidth: i }
+        ) : t === "font-size" && this.updateStyle({ fontSize: i });
       });
     }), this.panelBody.querySelectorAll(".linetype-button").forEach((t) => {
       t.addEventListener("click", () => {
         const e = t.dataset.linetype;
-        this.panelBody.querySelectorAll(".linetype-button").forEach((o) => o.classList.remove("active")), t.classList.add("active"), this.updateStyle({ strokeType: e });
+        this.panelBody.querySelectorAll(".linetype-button").forEach((o) => {
+          o.classList.remove("active"), o.setAttribute("aria-pressed", "false");
+        }), t.classList.add("active"), t.setAttribute("aria-pressed", "true"), this.updateStyle({ strokeType: e });
       });
     });
   }
@@ -339,10 +359,9 @@ class kt {
   }
   updateColorCircles() {
     this.colorCircles.forEach((t, e) => {
-      t.setAttribute("data-color", this.recent.colors[e]), t.style.setProperty("--circle-color", this.recent.colors[e]), t.classList.toggle(
-        "color-circle-primary",
-        e === this.recent.activeIndex
-      );
+      t.setAttribute("data-color", this.recent.colors[e]), t.setAttribute("aria-label", `Set color to ${this.recent.colors[e]}`), t.style.setProperty("--circle-color", this.recent.colors[e]);
+      const o = e === this.recent.activeIndex;
+      t.classList.toggle("color-circle-primary", o), t.setAttribute("aria-pressed", String(o));
     });
   }
   toggleColorPicker(t) {
@@ -350,10 +369,10 @@ class kt {
       this.closeColorPicker();
       return;
     }
-    this.colorPickerOverlay = document.createElement("div"), this.colorPickerOverlay.className = "color-picker-overlay", document.body.appendChild(this.colorPickerOverlay), this.colorPicker = N(), this.colorPicker.color = F(this.currentColor), this.colorPickerOverlay.appendChild(this.colorPicker);
+    this.colorPickerOverlay = document.createElement("div"), this.colorPickerOverlay.className = "color-picker-overlay", this.colorPickerOverlay.setAttribute("role", "dialog"), this.colorPickerOverlay.setAttribute("aria-label", "Custom color picker"), document.body.appendChild(this.colorPickerOverlay), this.colorPicker = N(), this.colorPicker.color = F(this.currentColor), this.colorPickerOverlay.appendChild(this.colorPicker);
     const e = t.getBoundingClientRect();
     this.colorPickerOverlay.style.right = `${window.innerWidth - e.right}px`, this.colorPickerOverlay.style.top = `${e.bottom + 10}px`, this.colorPicker.addEventListener("color-changed", (o) => {
-      this.currentColor = D(o.detail.value), this.recent.colors[this.recent.activeIndex] = this.currentColor, this.updateColorCircles(), this.mode === "arrow" ? this.updateStyle({ strokeColor: this.currentColor }) : this.mode === "text" ? this.updateStyle({ color: this.currentColor }) : this.mode === "polygon" && this.updateStyle({ strokeColor: this.currentColor });
+      this.currentColor = O(o.detail.value), this.recent.colors[this.recent.activeIndex] = this.currentColor, this.updateColorCircles(), this.mode === "arrow" ? this.updateStyle({ strokeColor: this.currentColor }) : this.mode === "text" ? this.updateStyle({ color: this.currentColor }) : this.mode === "polygon" && this.updateStyle({ strokeColor: this.currentColor });
     });
   }
   closeColorPicker() {
@@ -378,7 +397,7 @@ class kt {
     this.closeColorPicker(), this.detachVisibility(), document.removeEventListener("click", this.documentClickHandler), this.panel.remove();
   }
 }
-const rt = "bottom", lt = "horizontal", T = [
+const st = "bottom", at = "horizontal", L = [
   "arrow",
   "comment",
   "sticky-note",
@@ -386,26 +405,29 @@ const rt = "bottom", lt = "horizontal", T = [
   "text",
   "polygon"
 ];
-class Ct {
+class At {
   constructor(t) {
-    r(this, "control");
-    r(this, "root");
-    r(this, "activeButton", null);
-    r(this, "undoButton");
-    r(this, "redoButton");
-    r(this, "handleDrawingEnd", () => this.setActiveMode(null));
-    r(this, "handleHistory", () => this.updateUndoRedo());
+    c(this, "control");
+    c(this, "root");
+    c(this, "activeButton", null);
+    c(this, "undoButton");
+    c(this, "redoButton");
+    c(this, "handleDrawingEnd", () => this.setActiveMode(null));
+    c(this, "handleHistory", () => this.updateUndoRedo());
+    var d, h, a, l;
     this.control = t.control;
-    const e = t.container ?? document.body;
-    this.root = document.createElement("div"), this.root.className = "annotation-toolbar oa-toolbar oa-toolbar-bar", this.root.dataset.placement = t.placement ?? rt, this.root.dataset.orientation = t.orientation ?? lt, e.appendChild(this.root), ["click", "mousedown", "mousemove"].forEach(
-      (a) => this.root.addEventListener(a, (d) => d.stopPropagation())
+    const e = t.container ?? document.body, o = (l = (a = (h = (d = this.control).getOgma) == null ? void 0 : h.call(d)) == null ? void 0 : a.getContainer) == null ? void 0 : l.call(a);
+    !t.container && o && o !== document.body && console.error(
+      "[ogma-annotations-control] AnnotationToolbar: no `container` option given, defaulting to document.body. If this toolbar should dock to the Ogma graph area (e.g. it is embedded in a smaller/offset div), pass `container: control.getOgma().getContainer()` and give that container `position: relative`."
+    ), this.root = document.createElement("div"), this.root.className = "annotation-toolbar oa-toolbar oa-toolbar-bar", this.root.setAttribute("role", "group"), this.root.setAttribute("aria-label", "Annotation tools"), this.root.dataset.placement = t.placement ?? st, this.root.dataset.orientation = t.orientation ?? at, e.appendChild(this.root), ["click", "mousedown", "mousemove"].forEach(
+      (u) => this.root.addEventListener(u, (m) => m.stopPropagation())
     );
-    const o = t.enabledTypes ?? T, n = t.styles ?? {};
-    T.filter((a) => o.includes(a)).forEach(
-      (a) => this.root.appendChild(this.drawingButton(a, n))
-    ), o.length > 0 && this.root.appendChild(this.separator()), this.undoButton = this.button(null, "undo", "Undo", () => this.control.undo()), this.redoButton = this.button(null, "redo", "Redo", () => this.control.redo()), this.root.appendChild(this.undoButton), this.root.appendChild(this.redoButton);
-    const s = t.deleteMode ?? "erase";
-    (s === "erase" || s === "both") && (this.root.appendChild(this.separator()), this.root.appendChild(
+    const i = t.enabledTypes ?? L, n = t.styles ?? {};
+    L.filter((u) => i.includes(u)).forEach(
+      (u) => this.root.appendChild(this.drawingButton(u, n))
+    ), i.length > 0 && this.root.appendChild(this.separator()), this.undoButton = this.button(null, "undo", "Undo", () => this.control.undo()), this.redoButton = this.button(null, "redo", "Redo", () => this.control.redo()), this.root.appendChild(this.undoButton), this.root.appendChild(this.redoButton);
+    const r = t.deleteMode ?? "erase";
+    (r === "erase" || r === "both") && (this.root.appendChild(this.separator()), this.root.appendChild(
       this.button(
         "erase",
         "eraser",
@@ -414,18 +436,18 @@ class Ct {
           this.control.isEraseModeActive() ? (this.control.disableEraseMode(), this.setActiveMode(null)) : (this.control.enableEraseMode(), this.setActiveMode("erase"));
         }
       )
-    )), (s === "select" || s === "both") && (s === "select" && this.root.appendChild(this.separator()), this.root.appendChild(
+    )), (r === "select" || r === "both") && (r === "select" && this.root.appendChild(this.separator()), this.root.appendChild(
       this.button(null, "trash", "Delete selected", () => {
-        const d = this.control.getSelectedAnnotations().features.filter(
-          (h) => this.control.isAnnotationEditable(h.id)
+        const m = this.control.getSelectedAnnotations().features.filter(
+          (b) => this.control.isAnnotationEditable(b.id)
         );
-        d.length > 0 && this.control.remove({ type: "FeatureCollection", features: d });
+        m.length > 0 && this.control.remove({ type: "FeatureCollection", features: m });
       })
     )), (t.onJsonExport || t.onSvgExport) && (this.root.appendChild(this.separator()), t.onJsonExport && this.root.appendChild(
       this.button(null, "download", "Export annotations", t.onJsonExport)
     ), t.onSvgExport && this.root.appendChild(
       this.button(null, "camera", "Export SVG", t.onSvgExport)
-    )), this.control.on(x, this.handleDrawingEnd), this.control.on(M, this.handleDrawingEnd), this.control.on(P, this.handleHistory), this.updateUndoRedo();
+    )), this.control.on(x, this.handleDrawingEnd), this.control.on(P, this.handleDrawingEnd), this.control.on(M, this.handleHistory), this.updateUndoRedo();
   }
   drawingButton(t, e) {
     switch (t) {
@@ -441,8 +463,8 @@ class Ct {
         });
       case "comment":
         return this.button("comment", "message-square", "Add comment", () => {
-          var s, a, d, h;
-          const o = (s = e.comment) == null ? void 0 : s.commentStyle, n = (a = e.comment) == null ? void 0 : a.arrowStyle;
+          var n, r, d, h;
+          const o = (n = e.comment) == null ? void 0 : n.commentStyle, i = (r = e.comment) == null ? void 0 : r.arrowStyle;
           this.control.enableCommentDrawing({
             offsetX: ((d = e.comment) == null ? void 0 : d.offsetX) ?? 200,
             offsetY: ((h = e.comment) == null ? void 0 : h.offsetY) ?? -150,
@@ -458,13 +480,13 @@ class Ct {
               }
             },
             arrowStyle: {
-              ...n,
+              ...i,
               style: {
                 strokeType: "plain",
                 strokeColor: "#3A03CF",
                 strokeWidth: 2,
                 head: "halo-dot",
-                ...n == null ? void 0 : n.style
+                ...i == null ? void 0 : i.style
               }
             }
           }), this.setActiveMode("comment");
@@ -517,16 +539,16 @@ class Ct {
         );
     }
   }
-  button(t, e, o, n) {
-    const s = document.createElement("button");
-    return s.className = "oa-toolbar-button", s.dataset.tooltip = o, s.innerHTML = b(e, 16), s.addEventListener("click", n), t && (s.dataset.mode = t), s;
+  button(t, e, o, i) {
+    const n = document.createElement("button");
+    return n.type = "button", n.className = "oa-toolbar-button", n.dataset.tooltip = o, n.setAttribute("aria-label", o), t && n.setAttribute("aria-pressed", "false"), n.innerHTML = v(e, 16), n.addEventListener("click", i), t && (n.dataset.mode = t), n;
   }
   separator() {
     const t = document.createElement("span");
     return t.className = "oa-toolbar-separator", t;
   }
   setActiveMode(t) {
-    this.activeButton && this.activeButton.classList.remove("active"), this.activeButton = t ? this.root.querySelector(`[data-mode="${t}"]`) : null, this.activeButton && this.activeButton.classList.add("active");
+    this.activeButton && (this.activeButton.classList.remove("active"), this.activeButton.setAttribute("aria-pressed", "false")), this.activeButton = t ? this.root.querySelector(`[data-mode="${t}"]`) : null, this.activeButton && (this.activeButton.classList.add("active"), this.activeButton.setAttribute("aria-pressed", "true"));
   }
   updateUndoRedo() {
     this.undoButton.disabled = !this.control.canUndo(), this.redoButton.disabled = !this.control.canRedo();
@@ -539,16 +561,16 @@ class Ct {
     this.root.dataset.orientation = t;
   }
   destroy() {
-    this.control.off(x, this.handleDrawingEnd), this.control.off(M, this.handleDrawingEnd), this.control.off(P, this.handleHistory), this.root.remove();
+    this.control.off(x, this.handleDrawingEnd), this.control.off(P, this.handleDrawingEnd), this.control.off(M, this.handleHistory), this.root.remove();
   }
 }
-class at {
+class lt {
   constructor(t, e) {
-    r(this, "element");
-    r(this, "onClick", () => {
+    c(this, "element");
+    c(this, "onClick", () => {
       this.item.action(this.ctx);
     });
-    this.ctx = t, this.item = e, this.element = document.createElement("button"), this.element.type = "button", this.element.className = e.danger ? "oa-toolbar-button oa-toolbar-button-danger" : "oa-toolbar-button", this.element.dataset.tooltip = e.title, this.element.innerHTML = b(e.icon, 16), this.element.addEventListener("click", this.onClick);
+    this.ctx = t, this.item = e, this.element = document.createElement("button"), this.element.type = "button", this.element.className = e.danger ? "oa-toolbar-button oa-toolbar-button-danger" : "oa-toolbar-button", this.element.dataset.tooltip = e.title, this.element.setAttribute("aria-label", e.title), this.element.innerHTML = v(e.icon, 16), this.element.addEventListener("click", this.onClick);
   }
   update(t) {
     if (!this.item.isActive) return;
@@ -559,48 +581,57 @@ class at {
     this.element.removeEventListener("click", this.onClick);
   }
 }
-function I(i, t) {
+function I(s, t) {
   const e = document.createElement("div");
   e.className = "oa-toolbar-dropdown";
   const o = document.createElement("button");
-  o.type = "button", o.className = "oa-toolbar-button oa-toolbar-dropdown-trigger", o.dataset.tooltip = i;
+  o.type = "button", o.className = "oa-toolbar-button oa-toolbar-dropdown-trigger", o.dataset.tooltip = s, o.setAttribute("aria-haspopup", "listbox"), o.setAttribute("aria-expanded", "false"), o.setAttribute("aria-label", s);
+  const i = document.createElement("span");
+  i.className = "oa-toolbar-dropdown-label", i.textContent = t;
   const n = document.createElement("span");
-  n.className = "oa-toolbar-dropdown-label", n.textContent = t;
-  const s = document.createElement("span");
-  s.className = "oa-toolbar-dropdown-chevron", s.innerHTML = b("chevron-down", 14), o.appendChild(n), o.appendChild(s);
-  const a = document.createElement("div");
-  a.className = "oa-toolbar-dropdown-panel";
-  const d = () => e.classList.remove("open");
-  return o.addEventListener("click", (h) => {
-    var l;
-    h.stopPropagation();
-    const c = !e.classList.contains("open");
-    (l = e.closest(".annotation-style-toolbar")) == null || l.querySelectorAll(".oa-toolbar-dropdown.open").forEach((u) => {
-      u !== e && u.classList.remove("open");
-    }), e.classList.toggle("open", c);
-  }), e.appendChild(o), e.appendChild(a), {
+  n.className = "oa-toolbar-dropdown-chevron", n.innerHTML = v("chevron-down", 14), o.appendChild(i), o.appendChild(n);
+  const r = document.createElement("div");
+  r.className = "oa-toolbar-dropdown-panel", r.setAttribute("role", "listbox"), r.setAttribute("aria-label", `${s} options`);
+  const d = (a) => o.setAttribute("aria-expanded", String(a)), h = () => {
+    e.classList.remove("open"), d(!1);
+  };
+  return o.addEventListener("click", (a) => {
+    var u;
+    a.stopPropagation();
+    const l = !e.classList.contains("open");
+    (u = e.closest(".annotation-style-toolbar")) == null || u.querySelectorAll(".oa-toolbar-dropdown.open").forEach((m) => {
+      var b;
+      m !== e && (m.classList.remove("open"), (b = m.querySelector(".oa-toolbar-dropdown-trigger")) == null || b.setAttribute("aria-expanded", "false"));
+    }), e.classList.toggle("open", l), d(l);
+  }), e.appendChild(o), e.appendChild(r), {
     element: e,
-    panel: a,
-    close: d,
-    setLabel: (h) => {
-      n.textContent = h;
+    panel: r,
+    close: h,
+    setLabel: (a) => {
+      i.textContent = a, o.setAttribute("aria-label", `${s}: ${a || t}`);
     }
   };
 }
 class ct {
   constructor(t, e) {
-    r(this, "element");
-    r(this, "dropdown");
+    c(this, "element");
+    c(this, "dropdown");
+    c(this, "optionElements", []);
     this.ctx = t, this.item = e, this.dropdown = I(e.title, ""), this.element = this.dropdown.element, e.options.forEach((o) => {
-      const n = document.createElement("button");
-      n.type = "button", n.className = "oa-toolbar-dropdown-option", n.textContent = o.label, o.style && Object.assign(n.style, o.style), n.addEventListener("click", (s) => {
-        s.stopPropagation(), e.onSelect(o.value, this.ctx), this.dropdown.close();
-      }), this.dropdown.panel.appendChild(n);
+      const i = document.createElement("button");
+      i.type = "button", i.className = "oa-toolbar-dropdown-option", i.setAttribute("role", "option"), i.setAttribute("aria-selected", "false"), i.textContent = o.label, o.style && Object.assign(i.style, o.style), i.addEventListener("click", (n) => {
+        n.stopPropagation(), e.onSelect(o.value, this.ctx), this.dropdown.close();
+      }), this.dropdown.panel.appendChild(i), this.optionElements.push(i);
     });
   }
   update(t) {
-    const e = this.item.getValue(t), o = this.item.options.find((s) => s.value === e), n = this.item.getLabel ? this.item.getLabel(e, t) : (o == null ? void 0 : o.label) ?? `${e}`;
-    this.dropdown.setLabel(n), this.element.title = (o == null ? void 0 : o.label) ?? `${e}`;
+    const e = this.item.getValue(t), o = this.item.options.find((n) => n.value === e), i = this.item.getLabel ? this.item.getLabel(e, t) : (o == null ? void 0 : o.label) ?? `${e}`;
+    this.dropdown.setLabel(i), this.element.title = (o == null ? void 0 : o.label) ?? `${e}`, this.optionElements.forEach((n, r) => {
+      n.setAttribute(
+        "aria-selected",
+        String(this.item.options[r].value === e)
+      );
+    });
   }
   destroy() {
   }
@@ -608,11 +639,11 @@ class ct {
 const dt = 12;
 class ht {
   constructor(t, e) {
-    r(this, "control");
-    r(this, "ogma");
-    r(this, "options");
-    r(this, "annotationId");
-    r(this, "overlay");
+    c(this, "control");
+    c(this, "ogma");
+    c(this, "options");
+    c(this, "annotationId");
+    c(this, "overlay");
     /** The element handed to `addOverlay` - Ogma writes its own
      * `style.transform` (translate/rotate/scale, recomputed on every
      * viewChanged/zoom/rotate/move) directly onto this node to place it at
@@ -620,28 +651,28 @@ class ht {
      * assignment clobbers it (inline style, last writer wins - there's no way
      * to compose two separate `transform` writers on one element). Zero-size
      * and otherwise unstyled; it exists purely as the anchor point. */
-    r(this, "anchor");
+    c(this, "anchor");
     /** The actual visible pill - a child of `anchor`, `position: absolute`
      * with its own `transform: translate(-50%, -100%)` (see `styles.css`) to
      * center horizontally and sit fully above the anchor point. This is where
      * our own positioning lives, kept off `anchor` for exactly that reason. */
-    r(this, "root");
-    r(this, "cells", []);
-    r(this, "documentClickHandler", (t) => {
+    c(this, "root");
+    c(this, "cells", []);
+    c(this, "documentClickHandler", (t) => {
       this.root.contains(t.target) || this.root.querySelectorAll(".oa-toolbar-dropdown.open").forEach((e) => e.classList.remove("open"));
     });
-    this.control = t.control, this.options = t, this.ogma = this.control.getOgma(), this.annotationId = e.id, this.anchor = document.createElement("div"), this.anchor.className = "annotation-style-toolbar-anchor", this.root = document.createElement("div"), this.root.className = "annotation-style-toolbar oa-toolbar oa-toolbar-bar", this.anchor.appendChild(this.root), ["click", "mousedown", "mousemove"].forEach(
-      (n) => this.root.addEventListener(n, (s) => s.stopPropagation())
+    this.control = t.control, this.options = t, this.ogma = this.control.getOgma(), this.annotationId = e.id, this.anchor = document.createElement("div"), this.anchor.className = "annotation-style-toolbar-anchor", this.root = document.createElement("div"), this.root.className = "annotation-style-toolbar oa-toolbar oa-toolbar-bar", this.root.setAttribute("role", "group"), this.root.setAttribute("aria-label", "Text style toolbar"), this.anchor.appendChild(this.root), ["click", "mousedown", "mousemove"].forEach(
+      (i) => this.root.addEventListener(i, (n) => n.stopPropagation())
     );
     const o = {
       getAnnotation: () => this.control.getAnnotation(this.annotationId),
-      updateStyle: (n) => this.control.updateStyle(this.annotationId, n),
+      updateStyle: (i) => this.control.updateStyle(this.annotationId, i),
       deleteAnnotation: () => {
-        const n = this.control.getAnnotation(this.annotationId);
-        n && this.control.remove(n);
+        const i = this.control.getAnnotation(this.annotationId);
+        i && this.control.remove(i);
       }
     };
-    this.setItems(this.getItems(o), o), this.cells.forEach((n) => n.update(e)), this.overlay = this.ogma.layers.addOverlay({
+    this.setItems(this.getItems(o), o), this.cells.forEach((i) => i.update(e)), this.overlay = this.ogma.layers.addOverlay({
       element: this.anchor,
       position: this.getAnchor(e),
       scaled: !1
@@ -658,7 +689,7 @@ class ht {
       case "custom":
         return t.build(e);
       case "button":
-        return new at(e, t);
+        return new lt(e, t);
       case "dropdown":
         return new ct(e, t);
     }
@@ -666,12 +697,12 @@ class ht {
   setItems(t, e) {
     this.cells = [], t.forEach((o) => {
       if (o.kind === "separator") {
-        const s = document.createElement("span");
-        s.className = "oa-toolbar-separator", this.root.appendChild(s);
+        const n = document.createElement("span");
+        n.className = "oa-toolbar-separator", this.root.appendChild(n);
         return;
       }
-      const n = this.buildCell(o, e);
-      this.cells.push(n), this.root.appendChild(n.element);
+      const i = this.buildCell(o, e);
+      this.cells.push(i), this.root.appendChild(i.element);
     });
   }
   /**
@@ -683,13 +714,13 @@ class ht {
    */
   getAnchor(t) {
     var l;
-    const e = this.control.getZoom(), o = this.control.getRotation(), n = ((l = t.properties.style) == null ? void 0 : l.fixedSize) === !0;
-    let { height: s } = W(t);
-    n && (s /= e);
-    const a = V(t), d = -(s / 2 + dt / e), h = Math.sin(o), c = Math.cos(o);
+    const e = this.control.getZoom(), o = this.control.getRotation(), i = ((l = t.properties.style) == null ? void 0 : l.fixedSize) === !0;
+    let { height: n } = q(t);
+    i && (n /= e);
+    const r = W(t), d = -(n / 2 + dt / e), h = Math.sin(o), a = Math.cos(o);
     return {
-      x: a.x - d * h,
-      y: a.y + d * c
+      x: r.x - d * h,
+      y: r.y + d * a
     };
   }
   /** Refreshes every cell and repositions the pill for `annotation` -
@@ -703,25 +734,28 @@ class ht {
     document.removeEventListener("click", this.documentClickHandler), this.cells.forEach((t) => t.destroy()), this.overlay.destroy();
   }
 }
-class pt {
+class ut {
   constructor(t, e) {
-    r(this, "element");
-    r(this, "dropdown");
-    r(this, "swatch");
-    r(this, "more");
-    r(this, "morePicker", null);
-    r(this, "morePickerHost", null);
+    c(this, "element");
+    c(this, "dropdown");
+    c(this, "swatch");
+    c(this, "more");
+    c(this, "morePicker", null);
+    c(this, "morePickerHost", null);
     this.ctx = t, this.options = e;
     const { swatches: o } = e;
     this.dropdown = I("Color", ""), this.element = this.dropdown.element, this.element.classList.add("oa-toolbar-color-cell"), this.swatch = document.createElement("span"), this.swatch.className = "oa-toolbar-swatch", this.dropdown.element.querySelector(".oa-toolbar-dropdown-trigger").insertBefore(this.swatch, this.dropdown.element.querySelector(".oa-toolbar-dropdown-label"));
-    const n = document.createElement("div");
-    n.className = "oa-toolbar-swatch-grid", o.forEach((s) => {
-      const a = document.createElement("button");
-      a.type = "button", a.className = "oa-toolbar-swatch-cell", a.classList.toggle("oa-toolbar-swatch-cell-transparent", s.fill === "transparent"), a.title = s.fill, a.style.setProperty("--oa-swatch-fill", s.fill), a.style.setProperty("--oa-swatch-stroke", s.stroke), a.addEventListener("click", (d) => {
-        d.stopPropagation(), this.pick(s.fill), this.dropdown.close();
-      }), n.appendChild(a);
-    }), this.dropdown.panel.appendChild(n), this.more = document.createElement("button"), this.more.type = "button", this.more.className = "oa-toolbar-more-colors", this.more.textContent = "More colors…", this.more.addEventListener("click", (s) => {
-      s.stopPropagation(), this.openMorePicker();
+    const i = document.createElement("div");
+    i.className = "oa-toolbar-swatch-grid", o.forEach((n) => {
+      const r = document.createElement("button");
+      r.type = "button", r.className = "oa-toolbar-swatch-cell", r.classList.toggle("oa-toolbar-swatch-cell-transparent", n.fill === "transparent"), r.title = n.fill, r.setAttribute(
+        "aria-label",
+        n.fill === "transparent" ? "No background" : `Background ${n.fill}`
+      ), r.style.setProperty("--oa-swatch-fill", n.fill), r.style.setProperty("--oa-swatch-stroke", n.stroke), r.addEventListener("click", (d) => {
+        d.stopPropagation(), this.pick(n.fill), this.dropdown.close();
+      }), i.appendChild(r);
+    }), this.dropdown.panel.appendChild(i), this.more = document.createElement("button"), this.more.type = "button", this.more.className = "oa-toolbar-more-colors", this.more.textContent = "More colors…", this.more.addEventListener("click", (n) => {
+      n.stopPropagation(), this.openMorePicker();
     }), this.dropdown.panel.appendChild(this.more);
   }
   pick(t) {
@@ -738,9 +772,9 @@ class pt {
       return;
     }
     this.morePickerHost = document.createElement("div"), this.morePickerHost.className = "oa-toolbar-more-colors-host", this.morePicker = N();
-    const t = ((e = this.ctx.getAnnotation().properties.style) == null ? void 0 : e.background) || m.background;
+    const t = ((e = this.ctx.getAnnotation().properties.style) == null ? void 0 : e.background) || y.background;
     this.morePicker.color = F(t), this.morePicker.addEventListener("color-changed", (o) => {
-      this.pick(D(o.detail.value));
+      this.pick(O(o.detail.value));
     }), this.morePickerHost.appendChild(this.morePicker), this.dropdown.panel.appendChild(this.morePickerHost);
   }
   closeMorePicker() {
@@ -749,14 +783,14 @@ class pt {
   }
   update(t) {
     var o;
-    const e = ((o = t.properties.style) == null ? void 0 : o.background) || m.background;
+    const e = ((o = t.properties.style) == null ? void 0 : o.background) || y.background;
     this.swatch.style.setProperty("--oa-swatch-fill", e), this.swatch.classList.toggle("oa-toolbar-swatch-transparent", e === "transparent");
   }
   destroy() {
     this.closeMorePicker();
   }
 }
-const ut = [
+const pt = [
   { fill: "#FFE49B", stroke: "#D9A926" },
   { fill: "#FFC8A7", stroke: "#CC8C66" },
   { fill: "#FFA7B5", stroke: "#C2707D" },
@@ -780,15 +814,15 @@ const ut = [
     label: "IBM Plex Mono",
     style: { fontFamily: "IBM Plex Mono" }
   }
-], yt = [12, 14, 16, 18, 24, 32, 48, 64];
+], bt = [12, 14, 16, 18, 24, 32, 48, 64];
 class H extends ht {
   getItems(t) {
     var d, h;
-    const e = this.options.fonts ?? mt, o = this.options.fontSizes ?? yt, n = this.options.swatches ?? ut, s = this.options.onMoreColors, a = [
+    const e = this.options.fonts ?? mt, o = this.options.fontSizes ?? bt, i = this.options.swatches ?? pt, n = this.options.onMoreColors, r = [
       {
         kind: "custom",
         id: "color",
-        build: (c) => new pt(c, { swatches: n, onMoreColors: s })
+        build: (a) => new ut(a, { swatches: i, onMoreColors: n })
       },
       { kind: "separator" },
       {
@@ -796,33 +830,33 @@ class H extends ht {
         id: "font",
         title: "Font",
         options: e,
-        getValue: (c) => {
+        getValue: (a) => {
           var l;
-          return ((l = c.properties.style) == null ? void 0 : l.font) || m.font;
+          return ((l = a.properties.style) == null ? void 0 : l.font) || y.font;
         },
         getLabel: () => "Aa",
         // `fonts` entries are always string values (font-family names) -
         // ToolbarDropdownValue is string | number only because the size
         // cell also uses this same item shape with numbers.
-        onSelect: (c, l) => l.updateStyle({ font: `${c}` })
+        onSelect: (a, l) => l.updateStyle({ font: `${a}` })
       },
       {
         kind: "dropdown",
         id: "fontSize",
         title: "Font size",
-        options: o.map((c) => ({ value: c, label: `${c}` })),
-        getValue: (c) => {
-          const l = c.properties.style;
+        options: o.map((a) => ({ value: a, label: `${a}` })),
+        getValue: (a) => {
+          const l = a.properties.style;
           return Math.round(
-            q(
-              (l == null ? void 0 : l.fontSize) ?? m.fontSize,
+            V(
+              (l == null ? void 0 : l.fontSize) ?? y.fontSize,
               l == null ? void 0 : l.fontScale
             )
           );
         },
         // Setting fontSize directly (not fontScale) resets any accumulated
         // resize-driven scale, matching what picking an explicit size means.
-        onSelect: (c, l) => l.updateStyle({ fontSize: c, fontScale: 1 })
+        onSelect: (a, l) => l.updateStyle({ fontSize: a, fontScale: 1 })
       },
       { kind: "separator" },
       {
@@ -830,14 +864,14 @@ class H extends ht {
         id: "bold",
         title: "Bold",
         icon: "bold",
-        isActive: (c) => {
+        isActive: (a) => {
           var l;
-          return ((l = c.properties.style) == null ? void 0 : l.fontWeight) === "bold";
+          return ((l = a.properties.style) == null ? void 0 : l.fontWeight) === "bold";
         },
-        action: (c) => {
+        action: (a) => {
           var u;
-          const l = ((u = c.getAnnotation().properties.style) == null ? void 0 : u.fontWeight) === "bold";
-          c.updateStyle({ fontWeight: l ? "normal" : "bold" });
+          const l = ((u = a.getAnnotation().properties.style) == null ? void 0 : u.fontWeight) === "bold";
+          a.updateStyle({ fontWeight: l ? "normal" : "bold" });
         }
       },
       { kind: "separator" },
@@ -846,14 +880,14 @@ class H extends ht {
         id: "showAuthor",
         title: "Show author",
         icon: "user",
-        isActive: (c) => {
+        isActive: (a) => {
           var l;
-          return ((l = c.properties.style) == null ? void 0 : l.showAuthor) === !0;
+          return ((l = a.properties.style) == null ? void 0 : l.showAuthor) === !0;
         },
-        action: (c) => {
+        action: (a) => {
           var u;
-          const l = ((u = c.getAnnotation().properties.style) == null ? void 0 : u.showAuthor) === !0;
-          c.updateStyle({ showAuthor: !l });
+          const l = ((u = a.getAnnotation().properties.style) == null ? void 0 : u.showAuthor) === !0;
+          a.updateStyle({ showAuthor: !l });
         }
       },
       { kind: "separator" },
@@ -863,35 +897,35 @@ class H extends ht {
         title: "Delete",
         icon: "trash",
         danger: !0,
-        action: (c) => c.deleteAnnotation()
+        action: (a) => a.deleteAnnotation()
       }
     ];
-    return ((h = (d = this.options).items) == null ? void 0 : h.call(d, a, t)) ?? a;
+    return ((h = (d = this.options).items) == null ? void 0 : h.call(d, r, t)) ?? r;
   }
 }
-class ft extends H {
+class yt extends H {
 }
-class wt {
+class Ct {
   constructor(t) {
-    r(this, "control");
-    r(this, "options");
-    r(this, "current", null);
-    r(this, "detachVisibility");
-    r(this, "handleUpdate", (t) => {
-      this.current && t.id === this.current.annotationId && g(t) && this.current.update(t);
+    c(this, "control");
+    c(this, "options");
+    c(this, "current", null);
+    c(this, "detachVisibility");
+    c(this, "handleUpdate", (t) => {
+      this.current && t.id === this.current.annotationId && k(t) && this.current.update(t);
     });
-    this.control = t.control, this.options = t, this.detachVisibility = O(this.control, {
+    this.control = t.control, this.options = t, this.detachVisibility = D(this.control, {
       onShow: (e) => this.show(e),
       onHide: () => this.hide(),
       hideWhenNotEditable: t.hideWhenNotEditable
-    }), this.control.on(L, this.handleUpdate);
+    }), this.control.on($, this.handleUpdate);
   }
   show(t) {
-    if (!g(t)) {
+    if (!k(t)) {
       this.hide();
       return;
     }
-    const e = U(t) ? ft : H;
+    const e = U(t) ? yt : H;
     if (this.current && this.current.annotationId === t.id && this.current instanceof e) {
       this.current.update(t);
       return;
@@ -903,37 +937,37 @@ class wt {
     (t = this.current) == null || t.destroy(), this.current = null;
   }
   destroy() {
-    this.detachVisibility(), this.control.off(L, this.handleUpdate), this.hide();
+    this.detachVisibility(), this.control.off($, this.handleUpdate), this.hide();
   }
 }
 export {
-  st as ALL_PANEL_ANNOTATION_TYPES,
+  nt as ALL_PANEL_ANNOTATION_TYPES,
   kt as AnnotationPanel,
   ht as AnnotationStyleToolbar,
-  Ct as AnnotationToolbar,
+  At as AnnotationToolbar,
   j as BACKGROUNDS,
-  at as ButtonItemCell,
-  pt as ColorCell,
-  nt as DEFAULT_PANEL_ORIENTATION,
+  lt as ButtonItemCell,
+  ut as ColorCell,
+  it as DEFAULT_PANEL_ORIENTATION,
   ot as DEFAULT_PANEL_PLACEMENT,
   J as DEFAULT_RECENT_COLORS,
   mt as DEFAULT_TOOLBAR_FONTS,
-  yt as DEFAULT_TOOLBAR_FONT_SIZES,
+  bt as DEFAULT_TOOLBAR_FONT_SIZES,
   ct as DropdownItemCell,
   G as EXTREMITY_OPTIONS,
   C as FONTS,
   tt as ICON_PATHS,
   X as LINE_TYPES,
   K as MAX_RECENT_COLORS,
-  ut as STICKY_SWATCHES,
-  ft as StickyNoteStyleToolbar,
-  wt as TextAnnotationToolbar,
+  pt as STICKY_SWATCHES,
+  yt as StickyNoteStyleToolbar,
+  Ct as TextAnnotationToolbar,
   H as TextStyleToolbar,
-  O as attachPanelVisibility,
-  it as classifyPanelAnnotationType,
+  D as attachPanelVisibility,
+  rt as classifyPanelAnnotationType,
   N as createRgbaColorPicker,
   Z as initialRecentColors,
-  D as rgbaToString,
-  b as svgIcon,
+  O as rgbaToString,
+  v as svgIcon,
   Q as withColorFromAnnotation
 };