@stsdti/approvable-vue 0.1.11 → 0.1.12

package/dist/approvable-vue.mjs

@@ -1,8 +1,8 @@
-import { inject as ee, ref as O, computed as _, watch as Y, openBlock as a, createElementBlock as s, normalizeClass as V, createElementVNode as t, toDisplayString as d, unref as w, createCommentVNode as S, createTextVNode as z, Fragment as L, renderList as N, createBlock as B, resolveDynamicComponent as J, useTemplateRef as ie, onMounted as de, onBeforeUnmount as we, withDirectives as Ce, vModelText as Re, nextTick as xe, markRaw as Le, mergeProps as te, withCtx as X, createVNode as F, renderSlot as U, createSlots as pe, normalizeProps as Ee, guardReactiveProps as De, normalizeStyle as Q, Teleport as Oe, withModifiers as Me, withKeys as Ie, useModel as Ne, mergeModels as ue } from "vue";
-import { mergeMessages as Te, ApprovableAuditRepository as Ve, formatMessage as K, isRegisteredIcon as je, isUrlIcon as Be, isClassIcon as Pe, get as T, notifyError as ve, ApprovableStepRepository as ce, isSuccessResponse as be, notifySuccess as me, registerActionRenderer as qe, createStepViewModel as fe, actionRenderer as Ke, performStepAction as Ue, ApprovableStatus as q, createApprovableViewModel as he, createCompactViewModel as Fe, approvableStatusTone as Ge, approvableStepGlyph as ze, createStepWindow as He, ApprovableStatusRepository as We } from "@stsdti/approvable-core";
-import { ApprovableClient as Ta, actionRenderer as Va, actionSlotName as ja, axiosAdapter as Ba, configureApprovableClient as Pa, fetchAdapter as qa, getApprovableClient as Ka, isClassIcon as Ua, isRegisteredIcon as Fa, isUrlIcon as Ga, setApprovableClient as za, unregisterActionRenderer as Ha } from "@stsdti/approvable-core";
+import { inject as ee, ref as O, computed as _, watch as Y, openBlock as t, createElementBlock as a, normalizeClass as j, createElementVNode as e, toDisplayString as c, unref as w, createCommentVNode as S, createTextVNode as z, Fragment as L, renderList as T, createBlock as P, resolveDynamicComponent as J, useTemplateRef as ie, onMounted as de, onBeforeUnmount as we, withDirectives as Ce, vModelText as Re, nextTick as xe, markRaw as Ee, mergeProps as te, withCtx as X, createVNode as U, renderSlot as H, createSlots as pe, normalizeProps as Le, guardReactiveProps as De, normalizeStyle as Q, Teleport as Oe, withModifiers as Me, withKeys as Ie, useModel as Ne, mergeModels as ue } from "vue";
+import { mergeMessages as Te, ApprovableAuditRepository as Ve, formatMessage as G, isRegisteredIcon as je, isUrlIcon as Be, isClassIcon as Pe, get as V, notifyError as ve, ApprovableStepRepository as ce, isSuccessResponse as me, notifySuccess as be, registerActionRenderer as qe, createStepViewModel as fe, actionRenderer as Ke, performStepAction as He, ApprovableStatus as K, createApprovableViewModel as he, createCompactViewModel as Ue, approvableStatusTone as Fe, approvableStepGlyph as Ge, createStepWindow as ze, ApprovableStatusRepository as We } from "@stsdti/approvable-core";
+import { ApprovableClient as Na, actionRenderer as Ta, actionSlotName as Va, axiosAdapter as ja, configureApprovableClient as Ba, fetchAdapter as Pa, getApprovableClient as qa, isClassIcon as Ka, isRegisteredIcon as Ha, isUrlIcon as Ua, setApprovableClient as Fa, unregisterActionRenderer as Ga } from "@stsdti/approvable-core";
 const ye = Symbol("approvable.messages");
-function G() {
+function F() {
   return Te(ee(ye, null));
 }
 const Qe = {
@@ -24,7 +24,7 @@ const Qe = {
 }, vt = {
   key: 1,
   class: "approvable-timeline-change"
-}, dt = { class: "approvable-timeline-change-label" }, ct = { class: "approvable-timeline-value approvable-timeline-value--old" }, bt = { class: "approvable-timeline-value approvable-timeline-value--new" }, mt = { class: "approvable-timeline-footer" }, ke = {
+}, dt = { class: "approvable-timeline-change-label" }, ct = { class: "approvable-timeline-value approvable-timeline-value--old" }, mt = { class: "approvable-timeline-value approvable-timeline-value--new" }, bt = { class: "approvable-timeline-footer" }, ke = {
   __name: "ApprovableAuditTimeline",
   props: {
     approvableId: { type: [Number, String], required: !0 },
@@ -32,13 +32,13 @@ const Qe = {
     showHeader: { type: Boolean, default: !0 }
   },
   emits: ["loaded"],
-  setup(l, { expose: y, emit: v }) {
-    const f = l, h = v, b = G(), n = new Ve(), g = O([]), A = O(!1), C = O(""), u = {
+  setup(l, { expose: y, emit: u }) {
+    const f = l, h = u, m = F(), n = new Ve(), g = O([]), $ = O(!1), C = O(""), v = {
       approvable_status_name: "Status",
       comment: "Comment",
       responsible: "Assigned to",
       is_active: "Active step"
-    }, m = {
+    }, b = {
       approve: { paths: ["M4 8.4l2.8 2.8 5.4-6"], width: 2.8 },
       reject: { paths: ["M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6"], width: 2.4 },
       comment: { paths: ["M8 4.6v3.6l2.6 1.6"], width: 2.2 },
@@ -47,170 +47,170 @@ const Qe = {
       signal: { paths: ["M8 3.4v3.2M5.2 5.2l2.2 2.2M8 11.6a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8"], width: 1.8 },
       created: { paths: ["M4.4 8h7.2"], width: 2.2 },
       update: { paths: ["M4.4 8h7.2"], width: 2.2 }
-    }, o = /* @__PURE__ */ new Set(["created", "update"]), k = _(() => {
-      const e = g.value.filter((p) => p.approvable_step_id), i = /* @__PURE__ */ new Map();
-      for (const p of e) {
-        const c = p.request_id || `audit-${p.id}`;
-        i.has(c) || i.set(c, []), i.get(c).push(p);
+    }, s = /* @__PURE__ */ new Set(["created", "update"]), k = _(() => {
+      const o = g.value.filter((i) => i.approvable_step_id), p = /* @__PURE__ */ new Map();
+      for (const i of o) {
+        const d = i.request_id || `audit-${i.id}`;
+        p.has(d) || p.set(d, []), p.get(d).push(i);
       }
-      return [...i.values()].map((p) => {
-        const c = p[0], x = $(c), W = p.flatMap(R);
+      return [...p.values()].map((i) => {
+        const d = i[0], E = A(d), W = i.flatMap(x);
         return {
-          id: c.request_id || `audit-${c.id}`,
-          entries: p,
-          audit: c,
-          kind: x,
+          id: d.request_id || `audit-${d.id}`,
+          entries: i,
+          audit: d,
+          kind: E,
           // A modifier class rather than utilities: the accent for each kind of
           // event is a theme decision, so it belongs in the stylesheets alongside
           // every other colour, not baked into the component.
-          kindClass: `approvable-timeline-marker--${x}`,
-          icon: m[x],
-          isQuiet: o.has(x),
+          kindClass: `approvable-timeline-marker--${E}`,
+          icon: b[E],
+          isQuiet: s.has(E),
           isSingleLine: W.length === 0
         };
-      }).sort((p, c) => new Date(c.audit.created_at) - new Date(p.audit.created_at));
+      }).sort((i, d) => new Date(d.audit.created_at) - new Date(i.audit.created_at));
     });
-    function $(e) {
-      var p, c, x;
-      const i = (p = e.metadata) == null ? void 0 : p.button;
-      return i != null && i.is_undo ? "undo" : (i == null ? void 0 : i.result) === "rejected" ? "reject" : (i == null ? void 0 : i.result) === "approved" ? "approve" : ((c = e.metadata) == null ? void 0 : c.operation) === "comment" ? "comment" : ((x = e.metadata) == null ? void 0 : x.operation) === "signal" ? "signal" : e.event === "created" ? "created" : I(e) ? "status" : "update";
+    function A(o) {
+      var i, d, E;
+      const p = (i = o.metadata) == null ? void 0 : i.button;
+      return p != null && p.is_undo ? "undo" : (p == null ? void 0 : p.result) === "rejected" ? "reject" : (p == null ? void 0 : p.result) === "approved" ? "approve" : ((d = o.metadata) == null ? void 0 : d.operation) === "comment" ? "comment" : ((E = o.metadata) == null ? void 0 : E.operation) === "signal" ? "signal" : o.event === "created" ? "created" : N(o) ? "status" : "update";
     }
-    function I(e) {
-      var c, x;
-      const i = (c = e.old_values) == null ? void 0 : c.approvable_status_name, p = (x = e.new_values) == null ? void 0 : x.approvable_status_name;
-      return p !== void 0 && i !== p;
+    function N(o) {
+      var d, E;
+      const p = (d = o.old_values) == null ? void 0 : d.approvable_status_name, i = (E = o.new_values) == null ? void 0 : E.approvable_status_name;
+      return i !== void 0 && p !== i;
     }
-    function M(e) {
-      var c, x, W, oe, le, ne;
-      const i = (c = e.metadata) == null ? void 0 : c.button;
-      if (i) {
-        const re = i.text || i.label || i.id || "action";
-        return i.is_undo ? "Reverted the decision" : i.is_revision ? `Changed decision to ${re}` : re;
+    function I(o) {
+      var d, E, W, oe, le, ne;
+      const p = (d = o.metadata) == null ? void 0 : d.button;
+      if (p) {
+        const re = p.text || p.label || p.id || "action";
+        return p.is_undo ? "Reverted the decision" : p.is_revision ? `Changed decision to ${re}` : re;
       }
-      if (((x = e.metadata) == null ? void 0 : x.operation) === "comment") return "Comment added";
-      if (((W = e.metadata) == null ? void 0 : W.operation) === "signal") return `Signal received: ${((le = (oe = e.metadata) == null ? void 0 : oe.signal) == null ? void 0 : le.name) || ""}`.trim();
-      if (e.event === "created") return "Step started";
-      const p = (ne = e.new_values) == null ? void 0 : ne.approvable_status_name;
-      return I(e) && p ? `Status set to ${p}` : "Step updated";
+      if (((E = o.metadata) == null ? void 0 : E.operation) === "comment") return "Comment added";
+      if (((W = o.metadata) == null ? void 0 : W.operation) === "signal") return `Signal received: ${((le = (oe = o.metadata) == null ? void 0 : oe.signal) == null ? void 0 : le.name) || ""}`.trim();
+      if (o.event === "created") return "Step started";
+      const i = (ne = o.new_values) == null ? void 0 : ne.approvable_status_name;
+      return N(o) && i ? `Status set to ${i}` : "Step updated";
     }
-    function j(e = {}) {
-      return e.type === "system" ? "System" : e.name ? e.name : e.email ? e.email : e.id ? e.type === "fake" ? `Test user ${e.id}` : `User ${e.id}` : e.type === "fake" ? "Test identity" : "Automated";
+    function B(o = {}) {
+      return o.type === "system" ? "System" : o.name ? o.name : o.email ? o.email : o.id ? o.type === "fake" ? `Test user ${o.id}` : `User ${o.id}` : o.type === "fake" ? "Test identity" : "Automated";
     }
-    function R(e) {
-      const i = e.old_values || {}, p = e.new_values || {};
-      return Object.keys(u).filter((c) => c in i || c in p).map((c) => ({ key: c, label: u[c], oldValue: i[c], newValue: p[c] })).filter((c) => c.oldValue !== c.newValue);
+    function x(o) {
+      const p = o.old_values || {}, i = o.new_values || {};
+      return Object.keys(v).filter((d) => d in p || d in i).map((d) => ({ key: d, label: v[d], oldValue: p[d], newValue: i[d] })).filter((d) => d.oldValue !== d.newValue);
     }
-    function D(e) {
-      return e.oldValue !== void 0 && e.oldValue !== null && e.oldValue !== "";
+    function D(o) {
+      return o.oldValue !== void 0 && o.oldValue !== null && o.oldValue !== "";
     }
-    function P(e) {
-      if (e == null || e === "") return "—";
-      if (typeof e == "boolean") return e ? "Yes" : "No";
-      if (Array.isArray(e)) return e.length ? e.join(", ") : "—";
-      const i = typeof e == "object" ? JSON.stringify(e) : String(e);
-      return i.length > 180 ? `${i.slice(0, 177)}…` : i;
+    function q(o) {
+      if (o == null || o === "") return "—";
+      if (typeof o == "boolean") return o ? "Yes" : "No";
+      if (Array.isArray(o)) return o.length ? o.join(", ") : "—";
+      const p = typeof o == "object" ? JSON.stringify(o) : String(o);
+      return p.length > 180 ? `${p.slice(0, 177)}…` : p;
     }
-    function H(e) {
-      if (!e) return "";
-      const i = new Date(e);
-      return Number.isNaN(i.getTime()) ? e : new Intl.DateTimeFormat(void 0, {
+    function M(o) {
+      if (!o) return "";
+      const p = new Date(o);
+      return Number.isNaN(p.getTime()) ? o : new Intl.DateTimeFormat(void 0, {
         dateStyle: "medium",
         timeStyle: "short"
-      }).format(i);
+      }).format(p);
     }
-    async function E() {
-      var e, i;
+    async function r() {
+      var o, p;
       if (!f.approvableId) {
-        g.value = [], A.value = !1, C.value = "The approval history is unavailable because the approvable has no id.";
+        g.value = [], $.value = !1, C.value = "The approval history is unavailable because the approvable has no id.";
         return;
       }
-      A.value = !0, C.value = "";
+      $.value = !0, C.value = "";
       try {
-        const p = await n.fetchTimeline(f.approvableId, f.limit);
-        if (!p || p.status < 200 || p.status >= 300)
-          throw new Error(((e = p == null ? void 0 : p.data) == null ? void 0 : e.message) || "The audit timeline could not be loaded.");
-        const c = Array.isArray(p.data) ? p.data : (i = p.data) == null ? void 0 : i.data;
-        g.value = Array.isArray(c) ? c : [];
-      } catch (p) {
-        C.value = (p == null ? void 0 : p.message) || "The audit timeline could not be loaded.";
+        const i = await n.fetchTimeline(f.approvableId, f.limit);
+        if (!i || i.status < 200 || i.status >= 300)
+          throw new Error(((o = i == null ? void 0 : i.data) == null ? void 0 : o.message) || "The audit timeline could not be loaded.");
+        const d = Array.isArray(i.data) ? i.data : (p = i.data) == null ? void 0 : p.data;
+        g.value = Array.isArray(d) ? d : [];
+      } catch (i) {
+        C.value = (i == null ? void 0 : i.message) || "The audit timeline could not be loaded.";
       } finally {
-        A.value = !1;
+        $.value = !1;
       }
     }
-    const r = _(() => K(b.eventCount, { count: k.value.length }));
-    return Y(k, (e) => h("loaded", e.length)), Y(() => f.approvableId, E, { immediate: !0 }), y({ refresh: E }), (e, i) => (a(), s("section", {
-      class: V(["approvable-timeline", l.showHeader && "approvable-timeline--panel"])
+    const R = _(() => G(m.eventCount, { count: k.value.length }));
+    return Y(k, (o) => h("loaded", o.length)), Y(() => f.approvableId, r, { immediate: !0 }), y({ refresh: r }), (o, p) => (t(), a("section", {
+      class: j(["approvable-timeline", l.showHeader && "approvable-timeline--panel"])
     }, [
-      l.showHeader ? (a(), s("div", Qe, [
-        t("p", Ye, d(w(b).history), 1),
-        t("h3", Je, d(r.value), 1),
-        t("button", {
+      l.showHeader ? (t(), a("div", Qe, [
+        e("p", Ye, c(w(m).history), 1),
+        e("h3", Je, c(R.value), 1),
+        e("button", {
           type: "button",
           class: "approvable-timeline-refresh",
-          disabled: A.value,
-          onClick: E
-        }, d(A.value ? "Loading…" : "Refresh"), 9, Xe)
+          disabled: $.value,
+          onClick: r
+        }, c($.value ? "Loading…" : "Refresh"), 9, Xe)
       ])) : S("", !0),
-      A.value ? (a(), s("div", Ze, [...i[0] || (i[0] = [
-        t("span", {
+      $.value ? (t(), a("div", Ze, [...p[0] || (p[0] = [
+        e("span", {
           class: "approvable-spinner",
           "aria-hidden": "true"
         }, null, -1),
         z(" Loading approval history… ", -1)
-      ])])) : C.value ? (a(), s("p", et, d(C.value), 1)) : k.value.length ? (a(), s(L, { key: 4 }, [
-        t("ol", at, [
-          (a(!0), s(L, null, N(k.value, (p) => (a(), s("li", {
-            key: p.id,
-            class: V(["approvable-timeline-item", {
-              "approvable-timeline-item--single-line": p.isSingleLine,
-              "approvable-timeline-item--quiet": p.isQuiet
+      ])])) : C.value ? (t(), a("p", et, c(C.value), 1)) : k.value.length ? (t(), a(L, { key: 4 }, [
+        e("ol", at, [
+          (t(!0), a(L, null, T(k.value, (i) => (t(), a("li", {
+            key: i.id,
+            class: j(["approvable-timeline-item", {
+              "approvable-timeline-item--single-line": i.isSingleLine,
+              "approvable-timeline-item--quiet": i.isQuiet
             }])
           }, [
-            t("span", {
-              class: V(["approvable-timeline-marker", p.kindClass])
+            e("span", {
+              class: j(["approvable-timeline-marker", i.kindClass])
             }, [
-              (a(), s("svg", {
+              (t(), a("svg", {
                 fill: "none",
                 stroke: "currentColor",
-                "stroke-width": p.icon.width,
+                "stroke-width": i.icon.width,
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 viewBox: "0 0 16 16",
                 "aria-hidden": "true"
               }, [
-                (a(!0), s(L, null, N(p.icon.paths, (c, x) => (a(), s("path", {
-                  key: x,
-                  d: c
+                (t(!0), a(L, null, T(i.icon.paths, (d, E) => (t(), a("path", {
+                  key: E,
+                  d
                 }, null, 8, ot))), 128))
               ], 8, st))
             ], 2),
-            t("div", lt, [
-              t("div", nt, [
-                t("p", rt, d(j(p.audit.actor)), 1),
-                t("p", it, d(M(p.audit)), 1),
-                t("time", pt, d(H(p.audit.created_at)), 1)
+            e("div", lt, [
+              e("div", nt, [
+                e("p", rt, c(B(i.audit.actor)), 1),
+                e("p", it, c(I(i.audit)), 1),
+                e("time", pt, c(M(i.audit.created_at)), 1)
               ]),
-              (a(!0), s(L, null, N(p.entries, (c) => (a(), s(L, {
-                key: c.id
+              (t(!0), a(L, null, T(i.entries, (d) => (t(), a(L, {
+                key: d.id
               }, [
-                (a(!0), s(L, null, N(R(c), (x) => (a(), s(L, {
-                  key: `${c.id}-${x.key}`
+                (t(!0), a(L, null, T(x(d), (E) => (t(), a(L, {
+                  key: `${d.id}-${E.key}`
                 }, [
-                  x.key === "comment" ? (a(), s("p", ut, d(P(x.newValue)), 1)) : (a(), s("p", vt, [
-                    t("span", dt, d(x.label), 1),
-                    D(x) ? (a(), s(L, { key: 0 }, [
-                      t("span", ct, d(P(x.oldValue)), 1),
-                      i[1] || (i[1] = t("span", { class: "approvable-timeline-arrow" }, "→", -1))
+                  E.key === "comment" ? (t(), a("p", ut, c(q(E.newValue)), 1)) : (t(), a("p", vt, [
+                    e("span", dt, c(E.label), 1),
+                    D(E) ? (t(), a(L, { key: 0 }, [
+                      e("span", ct, c(q(E.oldValue)), 1),
+                      p[1] || (p[1] = e("span", { class: "approvable-timeline-arrow" }, "→", -1))
                     ], 64)) : S("", !0),
-                    t("span", bt, d(P(x.newValue)), 1)
+                    e("span", mt, c(q(E.newValue)), 1)
                   ]))
                 ], 64))), 128))
               ], 64))), 128))
             ])
           ], 2))), 128))
         ]),
-        t("p", mt, d(w(b).allEventsShown), 1)
-      ], 64)) : (a(), s("p", tt, "No approval activity yet."))
+        e("p", bt, c(w(m).allEventsShown), 1)
+      ], 64)) : (t(), a("p", tt, "No approval activity yet."))
     ], 2));
   }
 }, ge = Symbol("approvable.iconRegistry");
@@ -227,17 +227,17 @@ const ht = ["src"], Z = {
   },
   setup(l) {
     const y = ft();
-    return (v, f) => w(je)(w(y), l.icon) ? (a(), B(J(w(y)[l.icon]), {
+    return (u, f) => w(je)(w(y), l.icon) ? (t(), P(J(w(y)[l.icon]), {
       key: 0,
       class: "approvable-btn-icon"
-    })) : w(Be)(l.icon) ? (a(), s("img", {
+    })) : w(Be)(l.icon) ? (t(), a("img", {
       key: 1,
       src: l.icon,
       alt: "",
       class: "approvable-btn-icon"
-    }, null, 8, ht)) : w(Pe)(l.icon) ? (a(), s("i", {
+    }, null, 8, ht)) : w(Pe)(l.icon) ? (t(), a("i", {
       key: 2,
-      class: V(l.icon)
+      class: j(l.icon)
     }, null, 2)) : S("", !0);
   }
 }, yt = ["title"], kt = {
@@ -262,55 +262,55 @@ const ht = ["src"], Z = {
   },
   emits: ["isLoading", "refresh"],
   setup(l, { emit: y }) {
-    const v = l, f = y, h = ie("rootRef"), b = ie("textareaRef"), n = O(!1), g = O(!1), A = O(null), C = _(() => T(v.approvableStep, "commented_by"));
-    function u() {
-      n.value ? o() : m();
+    const u = l, f = y, h = ie("rootRef"), m = ie("textareaRef"), n = O(!1), g = O(!1), $ = O(null), C = _(() => V(u.approvableStep, "commented_by"));
+    function v() {
+      n.value ? s() : b();
     }
-    function m() {
-      A.value = T(v.approvableStep, "comment"), n.value = !0, xe(k);
+    function b() {
+      $.value = V(u.approvableStep, "comment"), n.value = !0, xe(k);
     }
-    function o() {
+    function s() {
       n.value = !1;
     }
     function k() {
-      const R = b.value;
-      R && (R.style.height = "auto", R.style.height = `${R.scrollHeight}px`);
+      const x = m.value;
+      x && (x.style.height = "auto", x.style.height = `${x.scrollHeight}px`);
     }
-    function $(R) {
-      n.value && h.value && !h.value.contains(R.target) && o();
+    function A(x) {
+      n.value && h.value && !h.value.contains(x.target) && s();
     }
-    function I(R) {
-      R.key === "Escape" && o();
+    function N(x) {
+      x.key === "Escape" && s();
     }
     de(() => {
-      document.addEventListener("click", $), document.addEventListener("keydown", I);
+      document.addEventListener("click", A), document.addEventListener("keydown", N);
     }), we(() => {
-      document.removeEventListener("click", $), document.removeEventListener("keydown", I);
+      document.removeEventListener("click", A), document.removeEventListener("keydown", N);
     });
-    const M = G();
-    async function j() {
-      if (!T(v.approvableStep, "comment") && !A.value) {
-        ve(M.commentRequired);
+    const I = F();
+    async function B() {
+      if (!V(u.approvableStep, "comment") && !$.value) {
+        ve(I.commentRequired);
         return;
       }
       g.value = !0, f("isLoading", !0);
-      const R = {
-        comment: A.value
-      }, D = await new ce().comment(v.approvableStep.id, R);
-      be(D) ? (me(M.commentSaved), o(), f("refresh")) : ve(M.commentFailed), g.value = !1, f("isLoading", !1);
+      const x = {
+        comment: $.value
+      }, D = await new ce().comment(u.approvableStep.id, x);
+      me(D) ? (be(I.commentSaved), s(), f("refresh")) : ve(I.commentFailed), g.value = !1, f("isLoading", !1);
     }
-    return (R, D) => (a(), s("div", {
+    return (x, D) => (t(), a("div", {
       ref_key: "rootRef",
       ref: h,
       class: "approvable-popover"
     }, [
-      t("button", {
+      e("button", {
         class: "approvable-btn",
-        title: w(M).comments,
+        title: w(I).comments,
         type: "button",
-        onClick: u
+        onClick: v
       }, [...D[1] || (D[1] = [
-        t("svg", {
+        e("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "16",
           height: "16",
@@ -322,45 +322,45 @@ const ht = ["src"], Z = {
           "stroke-linejoin": "round",
           "aria-hidden": "true"
         }, [
-          t("path", { d: "M8 9h8" }),
-          t("path", { d: "M8 13h6" }),
-          t("path", { d: "M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z" })
+          e("path", { d: "M8 9h8" }),
+          e("path", { d: "M8 13h6" }),
+          e("path", { d: "M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z" })
         ], -1)
       ])], 8, yt),
-      n.value ? (a(), s("div", kt, [
-        g.value ? (a(), s("div", gt, [...D[2] || (D[2] = [
-          t("span", { class: "approvable-spinner" }, null, -1)
+      n.value ? (t(), a("div", kt, [
+        g.value ? (t(), a("div", gt, [...D[2] || (D[2] = [
+          e("span", { class: "approvable-spinner" }, null, -1)
         ])])) : S("", !0),
-        t("div", _t, d(w(M).comments), 1),
-        C.value ? (a(), s("div", St, [
-          t("div", null, d(w(M).commentAuthor) + ":", 1),
-          t("div", $t, d(C.value), 1)
+        e("div", _t, c(w(I).comments), 1),
+        C.value ? (t(), a("div", St, [
+          e("div", null, c(w(I).commentAuthor) + ":", 1),
+          e("div", $t, c(C.value), 1)
         ])) : S("", !0),
-        l.disabled ? S("", !0) : (a(), s(L, { key: 2 }, [
-          Ce(t("textarea", {
+        l.disabled ? S("", !0) : (t(), a(L, { key: 2 }, [
+          Ce(e("textarea", {
             ref_key: "textareaRef",
-            ref: b,
-            "onUpdate:modelValue": D[0] || (D[0] = (P) => A.value = P),
+            ref: m,
+            "onUpdate:modelValue": D[0] || (D[0] = (q) => $.value = q),
             class: "approvable-textarea",
             rows: "1",
             onInput: k
           }, null, 544), [
-            [Re, A.value]
+            [Re, $.value]
           ]),
-          t("div", At, [
-            t("button", {
+          e("div", At, [
+            e("button", {
               class: "approvable-btn approvable-btn--primary",
               type: "button",
-              onClick: j
-            }, d(w(M).save), 1)
+              onClick: B
+            }, c(w(I).save), 1)
           ])
         ], 64))
       ])) : S("", !0)
     ], 512));
   }
 };
-function Oa(l, y) {
-  return qe(l, Le(y));
+function Da(l, y) {
+  return qe(l, Ee(y));
 }
 const Se = Symbol("approvable.linkComponent");
 function wt() {
@@ -372,7 +372,7 @@ function Ct(l, y) {
 const Rt = {
   key: 0,
   class: "approvable-step-actions"
-}, xt = { class: "approvable-btn-group" }, Lt = ["title", "onClick"], Et = ["title", "onClick"], Dt = {
+}, xt = { class: "approvable-btn-group" }, Et = ["title", "onClick"], Lt = ["title", "onClick"], Dt = {
   key: 0,
   class: "approvable-btn-group"
 }, ae = {
@@ -393,74 +393,74 @@ const Rt = {
   },
   emits: ["isLoading", "refresh"],
   setup(l, { emit: y }) {
-    const v = y, f = l, h = wt(), b = _(() => fe(f.value)), n = _(() => b.value.buttons.length > 0 || !!f.value.can_comment), g = (u) => ({
+    const u = y, f = l, h = wt(), m = _(() => fe(f.value)), n = _(() => m.value.buttons.length > 0 || !!f.value.can_comment), g = (v) => ({
       "approvable-btn": !0,
       // A button carrying only an icon collapses to a circle, so the row keeps its
       // rhythm instead of stretching around an empty label.
-      "approvable-btn--icon": !u.text,
-      "approvable-btn--primary": u.result === "approved"
-    }), A = (u) => b.value.isActive ? Ke(u == null ? void 0 : u.action_ui) : null, C = async (u) => {
-      v("isLoading", !0);
-      const m = await Ue({
-        stepId: b.value.id,
-        button: u,
-        buttons: b.value.buttons
+      "approvable-btn--icon": !v.text,
+      "approvable-btn--primary": v.result === "approved"
+    }), $ = (v) => m.value.isActive ? Ke(v == null ? void 0 : v.action_ui) : null, C = async (v) => {
+      u("isLoading", !0);
+      const b = await He({
+        stepId: m.value.id,
+        button: v,
+        buttons: m.value.buttons
       });
-      v("isLoading", !1), m.skipped || v("refresh");
+      u("isLoading", !1), b.skipped || u("refresh");
     };
-    return (u, m) => n.value ? (a(), s("div", Rt, [
-      t("div", xt, [
-        (a(!0), s(L, null, N(b.value.buttons, (o, k) => (a(), s(L, {
-          key: o.id ?? k
+    return (v, b) => n.value ? (t(), a("div", Rt, [
+      e("div", xt, [
+        (t(!0), a(L, null, T(m.value.buttons, (s, k) => (t(), a(L, {
+          key: s.id ?? k
         }, [
-          A(o) ? (a(), B(J(A(o)), {
+          $(s) ? (t(), P(J($(s)), {
             key: 0,
-            "action-ui": o.action_ui,
+            "action-ui": s.action_ui,
             approvable: l.approvable,
-            button: o,
-            buttons: [o],
+            button: s,
+            buttons: [s],
             complete: C,
             resource: l.resource,
             step: l.value,
-            onIsLoading: m[0] || (m[0] = ($) => v("isLoading", $)),
-            onRefresh: m[1] || (m[1] = ($) => v("refresh"))
-          }, null, 40, ["action-ui", "approvable", "button", "buttons", "resource", "step"])) : o.link ? (a(), B(J(w(h)), te({
+            onIsLoading: b[0] || (b[0] = (A) => u("isLoading", A)),
+            onRefresh: b[1] || (b[1] = (A) => u("refresh"))
+          }, null, 40, ["action-ui", "approvable", "button", "buttons", "resource", "step"])) : s.link ? (t(), P(J(w(h)), te({
             key: 1,
             ref_for: !0
-          }, w(Ct)(w(h), o.link)), {
+          }, w(Ct)(w(h), s.link)), {
             default: X(() => [
-              t("button", {
-                title: o.tooltip,
-                class: V(g(o)),
+              e("button", {
+                title: s.tooltip,
+                class: j(g(s)),
                 type: "button",
-                onClick: ($) => C(o)
+                onClick: (A) => C(s)
               }, [
-                F(Z, {
-                  icon: o.icon
+                U(Z, {
+                  icon: s.icon
                 }, null, 8, ["icon"])
-              ], 10, Lt)
+              ], 10, Et)
             ]),
             _: 2
-          }, 1040)) : (a(), s("button", {
+          }, 1040)) : (t(), a("button", {
             key: 2,
-            title: o.tooltip,
-            class: V(g(o)),
+            title: s.tooltip,
+            class: j(g(s)),
             type: "button",
-            onClick: ($) => C(o)
+            onClick: (A) => C(s)
           }, [
-            F(Z, {
-              icon: o.icon
+            U(Z, {
+              icon: s.icon
             }, null, 8, ["icon"]),
-            z(" " + d(o.text), 1)
-          ], 10, Et))
+            z(" " + c(s.text), 1)
+          ], 10, Lt))
         ], 64))), 128))
       ]),
-      l.value.can_comment ? (a(), s("div", Dt, [
-        F(_e, {
+      l.value.can_comment ? (t(), a("div", Dt, [
+        U(_e, {
           "approvable-step": l.value,
           disabled: !l.value.can_comment,
-          onRefresh: m[2] || (m[2] = (o) => v("refresh")),
-          onIsLoading: m[3] || (m[3] = (o) => v("isLoading", o))
+          onRefresh: b[2] || (b[2] = (s) => u("refresh")),
+          onIsLoading: b[3] || (b[3] = (s) => u("isLoading", s))
         }, null, 8, ["approvable-step", "disabled"])
       ])) : S("", !0)
     ])) : S("", !0);
@@ -476,21 +476,21 @@ const Rt = {
     }
   },
   setup(l) {
-    const y = l, v = _(() => {
-      const h = T(y.value, "code", " - ");
+    const y = l, u = _(() => {
+      const h = V(y.value, "code", " - ");
       return {
         "approvable-badge": !0,
-        "approvable-badge--draft": [q.CODES.CODE_DRAFT].includes(h),
-        "approvable-badge--waiting": [q.CODES.CODE_WAITING].includes(h),
-        "approvable-badge--success": [q.CODES.CODE_APPROVED, q.CODES.CODE_VIEWED, q.CODES.CODE_NOTICED].includes(h),
-        "approvable-badge--danger": [q.CODES.CODE_REJECTED].includes(h),
-        "approvable-badge--muted": [q.CODES.CODE_EXPIRED, q.CODES.CODE_SOLVED].includes(h),
+        "approvable-badge--draft": [K.CODES.CODE_DRAFT].includes(h),
+        "approvable-badge--waiting": [K.CODES.CODE_WAITING].includes(h),
+        "approvable-badge--success": [K.CODES.CODE_APPROVED, K.CODES.CODE_VIEWED, K.CODES.CODE_NOTICED].includes(h),
+        "approvable-badge--danger": [K.CODES.CODE_REJECTED].includes(h),
+        "approvable-badge--muted": [K.CODES.CODE_EXPIRED, K.CODES.CODE_SOLVED].includes(h),
         "approvable-badge--empty": h === " - "
       };
-    }), f = _(() => y.label ? y.label : T(y.value, "name", " - "));
-    return (h, b) => (a(), s("span", {
-      class: V(v.value)
-    }, d(f.value), 3));
+    }), f = _(() => y.label ? y.label : V(y.value, "name", " - "));
+    return (h, m) => (t(), a("span", {
+      class: j(u.value)
+    }, c(f.value), 3));
   }
 }, Ot = { class: "approvable-compact" }, Mt = { class: "approvable-compact-main" }, It = { class: "approvable-compact-line" }, Nt = ["aria-label"], Tt = ["title"], Vt = {
   key: 0,
@@ -506,76 +506,76 @@ const Rt = {
   },
   emits: ["expand", "isLoading", "refresh"],
   setup(l, { emit: y }) {
-    const v = l, f = y, h = G(), b = _(() => he(v.value)), n = _(() => Fe(b.value.steps)), g = _(() => n.value.focus), A = _(() => K(h.stepProgress, {
+    const u = l, f = y, h = F(), m = _(() => he(u.value)), n = _(() => Ue(m.value.steps)), g = _(() => n.value.focus), $ = _(() => G(h.stepProgress, {
       current: n.value.focusStepNumber ?? 0,
       total: n.value.stepCount
-    })), C = (m) => ({
+    })), C = (b) => ({
       "approvable-compact-dot": !0,
-      [`approvable-compact-dot--${m.tone}`]: !0
-    }), u = (m) => [
-      K(h.stepProgress, { current: m.number, total: n.value.stepCount }),
-      m.approverName,
-      m.statusName
+      [`approvable-compact-dot--${b.tone}`]: !0
+    }), v = (b) => [
+      G(h.stepProgress, { current: b.number, total: n.value.stepCount }),
+      b.approverName,
+      b.statusName
     ].filter(Boolean).join(" — ");
-    return (m, o) => (a(), s("div", Ot, [
-      t("div", Mt, [
-        t("div", It, [
-          l.showApprovableStatus ? (a(), B(se, {
+    return (b, s) => (t(), a("div", Ot, [
+      e("div", Mt, [
+        e("div", It, [
+          l.showApprovableStatus ? (t(), P(se, {
             key: 0,
-            label: b.value.statusName,
-            value: b.value.status
+            label: m.value.statusName,
+            value: m.value.status
           }, null, 8, ["label", "value"])) : S("", !0),
-          n.value.dots.length ? (a(), s("span", {
+          n.value.dots.length ? (t(), a("span", {
             key: 1,
             class: "approvable-compact-dots",
             role: "img",
-            "aria-label": A.value
+            "aria-label": $.value
           }, [
-            (a(!0), s(L, null, N(n.value.dots, (k) => (a(), s("span", {
+            (t(!0), a(L, null, T(n.value.dots, (k) => (t(), a("span", {
               key: k.id,
-              class: V(C(k)),
-              title: u(k)
+              class: j(C(k)),
+              title: v(k)
             }, null, 10, Tt))), 128))
           ], 8, Nt)) : S("", !0)
         ]),
-        g.value ? (a(), s("p", Vt, [
-          U(m.$slots, "approvableStepInfo", {
+        g.value ? (t(), a("p", Vt, [
+          H(b.$slots, "approvableStepInfo", {
             step: n.value.focusStep
           }, () => [
-            t("span", jt, d(g.value.approverName), 1)
+            e("span", jt, c(g.value.approverName), 1)
           ]),
-          U(m.$slots, "approvableStepRole", {
+          H(b.$slots, "approvableStepRole", {
             role: g.value.approverRole,
             step: n.value.focusStep
           }, () => [
-            g.value.approverRole ? (a(), s(L, { key: 0 }, [
-              o[3] || (o[3] = t("span", {
+            g.value.approverRole ? (t(), a(L, { key: 0 }, [
+              s[3] || (s[3] = e("span", {
                 "aria-hidden": "true",
                 class: "approvable-compact-sep"
               }, "·", -1)),
-              z(d(g.value.approverRole), 1)
+              z(c(g.value.approverRole), 1)
             ], 64)) : S("", !0)
           ])
         ])) : S("", !0)
       ]),
-      t("div", Bt, [
-        n.value.hasActiveStep && n.value.focusStep ? (a(), B(ae, {
+      e("div", Bt, [
+        n.value.hasActiveStep && n.value.focusStep ? (t(), P(ae, {
           key: 0,
-          approvable: b.value.approvable,
+          approvable: m.value.approvable,
           resource: l.value,
           value: n.value.focusStep,
-          onIsLoading: o[0] || (o[0] = (k) => f("isLoading", k)),
-          onRefresh: o[1] || (o[1] = (k) => f("refresh"))
+          onIsLoading: s[0] || (s[0] = (k) => f("isLoading", k)),
+          onRefresh: s[1] || (s[1] = (k) => f("refresh"))
         }, null, 8, ["approvable", "resource", "value"])) : S("", !0),
-        t("button", {
+        e("button", {
           type: "button",
           class: "approvable-compact-toggle",
           "aria-expanded": !1,
           "aria-label": w(h).compactExpand,
           title: w(h).compactExpand,
-          onClick: o[2] || (o[2] = (k) => f("expand"))
-        }, [...o[4] || (o[4] = [
-          t("svg", {
+          onClick: s[2] || (s[2] = (k) => f("expand"))
+        }, [...s[4] || (s[4] = [
+          e("svg", {
             "aria-hidden": "true",
             class: "approvable-icon",
             fill: "none",
@@ -585,7 +585,7 @@ const Rt = {
             "stroke-width": "2",
             viewBox: "0 0 16 16"
           }, [
-            t("path", { d: "M4.5 6.4 8 9.9l3.5-3.5" })
+            e("path", { d: "M4.5 6.4 8 9.9l3.5-3.5" })
           ], -1)
         ])], 8, Pt)
       ])
@@ -599,7 +599,7 @@ const Rt = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   viewBox: "0 0 16 16"
-}, Kt = ["d", "stroke-width"], Ut = { class: "approvable-step-body" }, Ft = { class: "approvable-step-line" }, Gt = { class: "approvable-step-name" }, zt = ["title"], Ht = {
+}, Kt = ["d", "stroke-width"], Ht = { class: "approvable-step-body" }, Ut = { class: "approvable-step-line" }, Ft = { class: "approvable-step-name" }, Gt = ["title"], zt = {
   key: 1,
   class: "approvable-step-spacer"
 }, Wt = {
@@ -629,80 +629,80 @@ const Rt = {
   },
   emits: ["isLoading", "refresh"],
   setup(l, { emit: y }) {
-    const v = y, f = l, h = G(), b = O(!1), n = _(() => fe(f.value)), g = _(() => Ge(n.value.status)), A = _(() => n.value.buttons.length > 0 || !!f.value.can_comment), C = _(() => (!n.value.isActive || !A.value) && !!(n.value.statusName || n.value.performedAt)), u = _(() => ({
+    const u = y, f = l, h = F(), m = O(!1), n = _(() => fe(f.value)), g = _(() => Fe(n.value.status)), $ = _(() => n.value.buttons.length > 0 || !!f.value.can_comment), C = _(() => (!n.value.isActive || !$.value) && !!(n.value.statusName || n.value.performedAt)), v = _(() => ({
       "approvable-step": !0,
       "approvable-step--active": n.value.isActive,
       // A step nobody has reached yet is dimmed; one with an outcome is not.
       "approvable-step--pending": !n.value.isActive && !g.value,
       [`approvable-step--${g.value}`]: !!g.value,
       // Nothing wraps below the name, so the row can hold to a single line.
-      "approvable-step--single-line": !A.value && !n.value.comment.text
-    })), m = {
+      "approvable-step--single-line": !$.value && !n.value.comment.text
+    })), b = {
       check: { d: "M4 8.4l2.8 2.8 5.4-6", width: 2.8 },
       cross: { d: "M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6", width: 2.4 },
       dash: { d: "M4.4 8h7.2", width: 2.2 }
-    }, o = {
+    }, s = {
       check: "success",
       cross: "danger",
       dash: "muted",
       ring: "ring",
       pending: "pending"
-    }, k = _(() => ze(g.value, n.value.isActive)), $ = _(() => m[k.value] ?? null), I = _(() => ({
+    }, k = _(() => Ge(g.value, n.value.isActive)), A = _(() => b[k.value] ?? null), N = _(() => ({
       "approvable-step-disc": !0,
-      [`approvable-step-disc--${o[k.value]}`]: !0
-    })), M = _(() => b.value ? n.value.comment.text : n.value.comment.preview);
-    return (j, R) => n.value.isVisible ? (a(), s("li", {
+      [`approvable-step-disc--${s[k.value]}`]: !0
+    })), I = _(() => m.value ? n.value.comment.text : n.value.comment.preview);
+    return (B, x) => n.value.isVisible ? (t(), a("li", {
       key: 0,
-      class: V(u.value)
+      class: j(v.value)
     }, [
-      t("span", {
-        class: V(I.value)
+      e("span", {
+        class: j(N.value)
       }, [
-        $.value ? (a(), s("svg", qt, [
-          t("path", {
-            d: $.value.d,
-            "stroke-width": $.value.width
+        A.value ? (t(), a("svg", qt, [
+          e("path", {
+            d: A.value.d,
+            "stroke-width": A.value.width
           }, null, 8, Kt)
         ])) : S("", !0)
       ], 2),
-      t("div", Ut, [
-        t("div", Ft, [
-          U(j.$slots, "approvableStepInfo", { step: l.value }, () => [
-            t("span", Gt, d(n.value.approverName), 1)
+      e("div", Ht, [
+        e("div", Ut, [
+          H(B.$slots, "approvableStepInfo", { step: l.value }, () => [
+            e("span", Ft, c(n.value.approverName), 1)
           ]),
-          U(j.$slots, "approvableStepRole", {
+          H(B.$slots, "approvableStepRole", {
             step: l.value,
             role: n.value.approverRole
           }, () => [
-            n.value.approverRole ? (a(), s("span", {
+            n.value.approverRole ? (t(), a("span", {
               key: 0,
               title: n.value.approverRole,
               class: "approvable-step-role"
-            }, d(n.value.approverRole), 9, zt)) : (a(), s("span", Ht))
+            }, c(n.value.approverRole), 9, Gt)) : (t(), a("span", zt))
           ]),
-          C.value ? (a(), s("span", Wt, [
-            n.value.statusName ? (a(), s("span", Qt, d(n.value.statusName), 1)) : S("", !0),
-            n.value.performedAt ? (a(), s("time", Yt, d(n.value.performedAt), 1)) : S("", !0)
+          C.value ? (t(), a("span", Wt, [
+            n.value.statusName ? (t(), a("span", Qt, c(n.value.statusName), 1)) : S("", !0),
+            n.value.performedAt ? (t(), a("time", Yt, c(n.value.performedAt), 1)) : S("", !0)
           ])) : S("", !0),
-          F(ae, {
+          U(ae, {
             approvable: l.approvable,
             resource: l.resource,
             value: l.value,
-            onIsLoading: R[0] || (R[0] = (D) => v("isLoading", D)),
-            onRefresh: R[1] || (R[1] = (D) => v("refresh"))
+            onIsLoading: x[0] || (x[0] = (D) => u("isLoading", D)),
+            onRefresh: x[1] || (x[1] = (D) => u("refresh"))
           }, null, 8, ["approvable", "resource", "value"])
         ]),
-        n.value.comment.text ? (a(), s("p", Jt, [
-          t("span", {
+        n.value.comment.text ? (t(), a("p", Jt, [
+          e("span", {
             title: n.value.comment.title
-          }, d(M.value), 9, Xt),
-          n.value.comment.isTrimmed ? (a(), s("button", {
+          }, c(I.value), 9, Xt),
+          n.value.comment.isTrimmed ? (t(), a("button", {
             key: 0,
             type: "button",
             class: "approvable-step-comment-more",
-            "aria-expanded": b.value,
-            onClick: R[2] || (R[2] = (D) => b.value = !b.value)
-          }, d(b.value ? w(h).showLess : w(h).showMore), 9, Zt)) : S("", !0)
+            "aria-expanded": m.value,
+            onClick: x[2] || (x[2] = (D) => m.value = !m.value)
+          }, c(m.value ? w(h).showLess : w(h).showMore), 9, Zt)) : S("", !0)
         ])) : S("", !0)
       ])
     ], 2)) : S("", !0);
@@ -719,17 +719,16 @@ const Rt = {
 }, oa = { class: "approvable-header" }, la = { class: "approvable-sr-only" }, na = { class: "approvable-updated-at" }, ra = ["aria-expanded"], ia = ["title", "aria-label"], pa = ["aria-label", "title"], ua = {
   class: "approvable-sr-only",
   "aria-live": "polite"
-}, va = {
-  key: 1,
-  class: "approvable-footer"
-}, da = { class: "approvable-dialog-header" }, ca = { class: "approvable-dialog-eyebrow" }, ba = {
+}, va = { class: "approvable-dialog-header" }, da = { class: "approvable-dialog-eyebrow" }, ca = {
   id: "approvable-history-title",
   class: "approvable-dialog-title"
-}, ma = ["aria-label"], fa = { class: "approvable-dialog-body" }, ha = {
+}, ma = ["aria-label"], ba = { class: "approvable-dialog-body" }, fa = {
   __name: "Approvable",
   props: {
     value: {},
     showApprovableStatus: { type: Boolean, default: !0 },
+    /** Whether the History button — and so the audit dialog — is offered. */
+    isHistoryVisible: { type: Boolean, default: !0 },
     title: { default: "Approval" },
     isDirectionRow: { default: !1 },
     /**
@@ -752,126 +751,117 @@ const Rt = {
   },
   emits: ["refresh", "isLoading", "update:compact"],
   setup(l, { emit: y }) {
-    const v = l, f = y, h = O(!1), b = O(null), n = O(!1), g = O(null), A = O(!1), C = O(v.compact), u = G(), m = [
+    const u = l, f = y, h = O(!1), m = O(null), n = O(!1), g = O(null), $ = O(!1), C = O(u.compact), v = F(), b = [
       { name: "118px", meta: "56px", delay: "0s", metaDelay: "0.15s" },
       { name: "96px", meta: "72px", delay: "0.1s", metaDelay: "0.25s" },
       { name: "78px", meta: "48px", delay: "0.2s", metaDelay: "0.35s" }
     ];
-    Y(() => v.compact, (E) => C.value = E);
-    const o = (E) => {
-      C.value = E, f("update:compact", E);
-    }, k = _(() => v.collapsible ?? v.compact), $ = _(() => he(v.value)), I = _(() => He($.value.steps, {
-      range: v.visibleStepRange,
-      isExpanded: A.value
-    })), M = _(() => g.value === null ? u.historyTitle : K(u.eventCount, { count: g.value })), j = _(() => h.value && !$.value.steps.length), R = _(() => ({
+    Y(() => u.compact, (M) => C.value = M);
+    const s = (M) => {
+      C.value = M, f("update:compact", M);
+    }, k = _(() => u.collapsible ?? u.compact), A = _(() => he(u.value)), N = _(() => ze(A.value.steps, {
+      range: u.visibleStepRange,
+      isExpanded: $.value
+    })), I = _(() => g.value === null ? v.historyTitle : G(v.eventCount, { count: g.value })), B = _(() => h.value && !A.value.steps.length), x = _(() => ({
       approvable: !0,
       "approvable--compact": C.value
     })), D = _(() => ({
       "approvable-steps": !0,
-      "approvable-steps--row": v.isDirectionRow
-    })), P = _(() => {
-      const { activeStepNumber: E, visibleStepCount: r, activeApproverName: e } = $.value;
-      if (!E || !r)
-        return null;
-      const i = K(u.stepProgress, {
-        current: E,
-        total: r
-      });
-      return e ? `${i} — ${K(u.awaitingApprover, { name: e })}` : i;
-    }), H = () => {
-      var E;
-      (E = b.value) == null || E.refresh(), f("refresh");
+      "approvable-steps--row": u.isDirectionRow
+    })), q = () => {
+      var M;
+      (M = m.value) == null || M.refresh(), f("refresh");
     };
-    return (E, r) => $.value.hasApprovable ? (a(), s("div", {
+    return (M, r) => A.value.hasApprovable ? (t(), a("div", {
       key: 0,
-      class: V(R.value)
+      class: j(x.value)
     }, [
-      h.value && $.value.steps.length ? (a(), s("div", ea, [...r[10] || (r[10] = [
-        t("span", { class: "approvable-spinner" }, null, -1)
+      h.value && A.value.steps.length ? (t(), a("div", ea, [...r[10] || (r[10] = [
+        e("span", { class: "approvable-spinner" }, null, -1)
       ])])) : S("", !0),
-      C.value ? (a(), s(L, { key: 1 }, [
-        t("h2", ta, d(l.title), 1),
-        j.value ? (a(), s("div", aa, [
-          t("span", sa, d(w(u).loadingStatus), 1),
-          r[11] || (r[11] = t("span", {
+      C.value ? (t(), a(L, { key: 1 }, [
+        e("h2", ta, c(l.title), 1),
+        B.value ? (t(), a("div", aa, [
+          e("span", sa, c(w(v).loadingStatus), 1),
+          r[11] || (r[11] = e("span", {
             "aria-hidden": "true",
             class: "approvable-skeleton-bar approvable-skeleton-bar--pill"
           }, null, -1)),
-          r[12] || (r[12] = t("span", {
+          r[12] || (r[12] = e("span", {
             "aria-hidden": "true",
             class: "approvable-skeleton-bar approvable-skeleton-bar--soft",
             style: { width: "96px", "animation-delay": "0.15s" }
           }, null, -1)),
-          r[13] || (r[13] = t("span", {
+          r[13] || (r[13] = e("span", {
             "aria-hidden": "true",
             class: "approvable-skeleton-spacer"
           }, null, -1)),
-          r[14] || (r[14] = t("span", {
+          r[14] || (r[14] = e("span", {
             "aria-hidden": "true",
             class: "approvable-skeleton-disc",
             style: { "animation-delay": "0.25s" }
           }, null, -1))
-        ])) : (a(), B($e, {
+        ])) : (t(), P($e, {
           key: 1,
           "show-approvable-status": l.showApprovableStatus,
           value: l.value,
-          onExpand: r[0] || (r[0] = (e) => o(!1)),
-          onIsLoading: r[1] || (r[1] = (e) => h.value = e),
-          onRefresh: H
+          onExpand: r[0] || (r[0] = (R) => s(!1)),
+          onIsLoading: r[1] || (r[1] = (R) => h.value = R),
+          onRefresh: q
         }, pe({ _: 2 }, [
-          N(Object.keys(E.$slots), (e) => ({
-            name: e,
-            fn: X((i) => [
-              U(E.$slots, e, Ee(De(i ?? {})))
+          T(Object.keys(M.$slots), (R) => ({
+            name: R,
+            fn: X((o) => [
+              H(M.$slots, R, Le(De(o ?? {})))
             ])
           }))
         ]), 1032, ["show-approvable-status", "value"]))
-      ], 64)) : (a(), s(L, { key: 2 }, [
-        t("div", oa, [
-          t("h2", la, d(l.title), 1),
-          j.value ? (a(), s(L, { key: 0 }, [
-            r[15] || (r[15] = t("span", {
+      ], 64)) : (t(), a(L, { key: 2 }, [
+        e("div", oa, [
+          e("h2", la, c(l.title), 1),
+          B.value ? (t(), a(L, { key: 0 }, [
+            r[15] || (r[15] = e("span", {
               "aria-hidden": "true",
               class: "approvable-skeleton-bar approvable-skeleton-bar--pill"
             }, null, -1)),
-            r[16] || (r[16] = t("span", { class: "approvable-skeleton-spacer" }, null, -1)),
-            r[17] || (r[17] = t("span", {
+            r[16] || (r[16] = e("span", { class: "approvable-skeleton-spacer" }, null, -1)),
+            r[17] || (r[17] = e("span", {
               "aria-hidden": "true",
               class: "approvable-skeleton-bar approvable-skeleton-bar--soft",
               style: { width: "104px", "animation-delay": "0.2s" }
             }, null, -1))
-          ], 64)) : (a(), s(L, { key: 1 }, [
-            l.showApprovableStatus ? (a(), B(se, {
+          ], 64)) : (t(), a(L, { key: 1 }, [
+            l.showApprovableStatus ? (t(), P(se, {
               key: 0,
-              label: $.value.statusName,
-              value: $.value.status
+              label: A.value.statusName,
+              value: A.value.status
             }, null, 8, ["label", "value"])) : S("", !0),
-            t("span", na, d($.value.updatedAt), 1),
-            I.value.isCollapsible ? (a(), s("button", {
+            e("span", na, c(A.value.updatedAt), 1),
+            N.value.isCollapsible ? (t(), a("button", {
               key: 1,
               type: "button",
               class: "approvable-steps-toggle-btn",
-              "aria-expanded": A.value,
-              onClick: r[2] || (r[2] = (e) => A.value = !A.value)
-            }, d(A.value ? w(u).stepsShowLess : w(K)(w(u).stepsShowMore, { count: I.value.totalCount })), 9, ra)) : S("", !0),
-            $.value.id ? (a(), s("button", {
+              "aria-expanded": $.value,
+              onClick: r[2] || (r[2] = (R) => $.value = !$.value)
+            }, c($.value ? w(v).stepsShowLess : w(G)(w(v).stepsShowMore, { count: N.value.totalCount })), 9, ra)) : S("", !0),
+            l.isHistoryVisible && A.value.id ? (t(), a("button", {
               key: 2,
               type: "button",
               class: "approvable-history-btn",
-              title: w(u).historyTitle,
-              "aria-label": w(u).historyTitle,
-              onClick: r[3] || (r[3] = (e) => n.value = !0)
-            }, d(w(u).history), 9, ia)) : S("", !0),
-            k.value ? (a(), s("button", {
+              title: w(v).historyTitle,
+              "aria-label": w(v).historyTitle,
+              onClick: r[3] || (r[3] = (R) => n.value = !0)
+            }, c(w(v).history), 9, ia)) : S("", !0),
+            k.value ? (t(), a("button", {
               key: 3,
               type: "button",
               class: "approvable-compact-toggle approvable-compact-toggle--expanded",
               "aria-expanded": !0,
-              "aria-label": w(u).compactCollapse,
-              title: w(u).compactCollapse,
-              onClick: r[4] || (r[4] = (e) => o(!0))
+              "aria-label": w(v).compactCollapse,
+              title: w(v).compactCollapse,
+              onClick: r[4] || (r[4] = (R) => s(!0))
             }, [...r[18] || (r[18] = [
-              t("svg", {
+              e("svg", {
                 "aria-hidden": "true",
                 class: "approvable-icon",
                 fill: "none",
@@ -881,81 +871,71 @@ const Rt = {
                 "stroke-width": "2",
                 viewBox: "0 0 16 16"
               }, [
-                t("path", { d: "M4.5 6.4 8 9.9l3.5-3.5" })
+                e("path", { d: "M4.5 6.4 8 9.9l3.5-3.5" })
               ], -1)
             ])], 8, pa)) : S("", !0)
           ], 64))
         ]),
-        j.value ? (a(), s(L, { key: 0 }, [
-          t("span", ua, d(w(u).loadingStatus), 1),
-          (a(), s(L, null, N(m, (e) => t("div", {
-            key: e.delay,
+        B.value ? (t(), a(L, { key: 0 }, [
+          e("span", ua, c(w(v).loadingStatus), 1),
+          (t(), a(L, null, T(b, (R) => e("div", {
+            key: R.delay,
             "aria-hidden": "true",
             class: "approvable-skeleton-row"
           }, [
-            t("span", {
+            e("span", {
               class: "approvable-skeleton-disc",
-              style: Q({ animationDelay: e.delay })
+              style: Q({ animationDelay: R.delay })
             }, null, 4),
-            t("span", {
+            e("span", {
               class: "approvable-skeleton-bar",
-              style: Q({ width: e.name, animationDelay: e.delay })
+              style: Q({ width: R.name, animationDelay: R.delay })
             }, null, 4),
-            r[19] || (r[19] = t("span", { class: "approvable-skeleton-spacer" }, null, -1)),
-            t("span", {
+            r[19] || (r[19] = e("span", { class: "approvable-skeleton-spacer" }, null, -1)),
+            e("span", {
               class: "approvable-skeleton-bar approvable-skeleton-bar--soft",
-              style: Q({ width: e.meta, animationDelay: e.metaDelay })
+              style: Q({ width: R.meta, animationDelay: R.metaDelay })
             }, null, 4)
-          ])), 64)),
-          r[20] || (r[20] = t("div", {
-            class: "approvable-footer",
-            "aria-hidden": "true"
-          }, [
-            t("span", {
-              class: "approvable-skeleton-bar approvable-skeleton-bar--soft",
-              style: { display: "block", width: "132px" }
-            })
-          ], -1))
-        ], 64)) : (a(), s(L, { key: 1 }, [
-          I.value.steps.length ? (a(), s("ol", {
+          ])), 64))
+        ], 64)) : (t(), a(L, { key: 1 }, [
+          N.value.steps.length ? (t(), a("ol", {
             key: 0,
-            class: V(D.value)
+            class: j(D.value)
           }, [
-            (a(!0), s(L, null, N(I.value.steps, (e) => (a(), B(Ae, {
-              key: e.id,
-              approvable: $.value.approvable,
+            (t(!0), a(L, null, T(N.value.steps, (R) => (t(), P(Ae, {
+              key: R.id,
+              approvable: A.value.approvable,
               resource: l.value,
-              value: e,
-              onIsLoading: r[5] || (r[5] = (i) => h.value = i),
-              onRefresh: H
+              value: R,
+              onIsLoading: r[5] || (r[5] = (o) => h.value = o),
+              onRefresh: q
             }, pe({ _: 2 }, [
-              N(Object.keys(E.$slots), (i) => ({
-                name: i,
+              T(Object.keys(M.$slots), (o) => ({
+                name: o,
                 fn: X((p) => [
-                  U(E.$slots, i, te({ ref_for: !0 }, p ?? {}))
+                  H(M.$slots, o, te({ ref_for: !0 }, p ?? {}))
                 ])
               }))
             ]), 1032, ["approvable", "resource", "value"]))), 128))
-          ], 2)) : S("", !0),
-          P.value ? (a(), s("p", va, d(P.value), 1)) : S("", !0)
+          ], 2)) : S("", !0)
         ], 64))
       ], 64)),
-      (a(), B(Oe, { to: "body" }, [
-        n.value ? (a(), s("div", {
+      (t(), P(Oe, { to: "body" }, [
+        n.value ? (t(), a("div", {
           key: 0,
           class: "approvable-dialog-backdrop",
-          onClick: r[9] || (r[9] = Me((e) => n.value = !1, ["self"]))
+          onClick: r[9] || (r[9] = Me((R) => n.value = !1, ["self"]))
         }, [
-          t("section", {
+          e("section", {
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": "approvable-history-title",
             class: "approvable-dialog",
-            onKeydown: r[8] || (r[8] = Ie((e) => n.value = !1, ["esc"]))
+            onKeydown: r[8] || (r[8] = Ie((R) => n.value = !1, ["esc"]))
           }, [
-            t("header", da, [
-              t("p", ca, [
-                r[21] || (r[21] = t("svg", {
+            e("header", va, [
+              e("p", da, [
+                r[20] || (r[20] = e("svg", {
                   "aria-hidden": "true",
                   fill: "none",
                   stroke: "currentColor",
@@ -964,18 +944,18 @@ const Rt = {
                   "stroke-width": "2",
                   viewBox: "0 0 16 16"
                 }, [
-                  t("path", { d: "M9.6 4.5 6 8l3.6 3.5" })
+                  e("path", { d: "M9.6 4.5 6 8l3.6 3.5" })
                 ], -1)),
-                z(" " + d(w(u).history), 1)
+                z(" " + c(w(v).history), 1)
               ]),
-              t("h2", ba, d(M.value), 1),
-              t("button", {
+              e("h2", ca, c(I.value), 1),
+              e("button", {
                 type: "button",
                 class: "approvable-dialog-close",
-                "aria-label": w(u).historyClose,
-                onClick: r[6] || (r[6] = (e) => n.value = !1)
-              }, [...r[22] || (r[22] = [
-                t("svg", {
+                "aria-label": w(v).historyClose,
+                onClick: r[6] || (r[6] = (R) => n.value = !1)
+              }, [...r[21] || (r[21] = [
+                e("svg", {
                   "aria-hidden": "true",
                   class: "approvable-icon",
                   fill: "none",
@@ -984,17 +964,17 @@ const Rt = {
                   "stroke-width": "2",
                   viewBox: "0 0 16 16"
                 }, [
-                  t("path", { d: "m5.2 5.2 5.6 5.6M10.8 5.2l-5.6 5.6" })
+                  e("path", { d: "m5.2 5.2 5.6 5.6M10.8 5.2l-5.6 5.6" })
                 ], -1)
               ])], 8, ma)
             ]),
-            t("div", fa, [
-              F(ke, {
+            e("div", ba, [
+              U(ke, {
                 ref_key: "auditTimeline",
-                ref: b,
-                "approvable-id": $.value.id,
+                ref: m,
+                "approvable-id": A.value.id,
                 "show-header": !1,
-                onLoaded: r[7] || (r[7] = (e) => g.value = e)
+                onLoaded: r[7] || (r[7] = (R) => g.value = R)
               }, null, 8, ["approvable-id"])
             ])
           ], 32)
@@ -1002,10 +982,10 @@ const Rt = {
       ]))
     ], 2)) : S("", !0);
   }
-}, ya = {
+}, ha = {
   key: 0,
   class: "approvable-actions"
-}, ka = { class: "approvable-actions-list" }, ga = ["title", "onClick"], _a = {
+}, ya = { class: "approvable-actions-list" }, ka = ["title", "onClick"], ga = {
   __name: "ApprovableButtons",
   props: {
     value: {
@@ -1014,38 +994,38 @@ const Rt = {
   },
   emits: ["isLoading", "refresh"],
   setup(l, { emit: y }) {
-    const v = l, f = y, h = O(!1), b = _(() => T(v.value, "buttons", [])), n = _(() => b.value ? b.value.length > 0 : !1), g = G(), A = (u) => {
-      let m = T(v.value, "id");
-      m && C(m, u);
-    }, C = async (u, m) => {
+    const u = l, f = y, h = O(!1), m = _(() => V(u.value, "buttons", [])), n = _(() => m.value ? m.value.length > 0 : !1), g = F(), $ = (v) => {
+      let b = V(u.value, "id");
+      b && C(b, v);
+    }, C = async (v, b) => {
       f("isLoading", !0), h.value = !0;
-      const o = await new ce().updateApproveStatus(u, m);
-      be(o) && me(g.actionSucceeded), f("isLoading", !1), f("refresh");
+      const s = await new ce().updateApproveStatus(v, b);
+      me(s) && be(g.actionSucceeded), f("isLoading", !1), f("refresh");
     };
-    return (u, m) => n.value ? (a(), s("div", ya, [
-      m[0] || (m[0] = t("hr", { class: "approvable-divider" }, null, -1)),
-      t("div", ka, [
-        (a(!0), s(L, null, N(b.value, (o) => (a(), s("button", {
-          key: o.code,
-          title: o.tooltip,
+    return (v, b) => n.value ? (t(), a("div", ha, [
+      b[0] || (b[0] = e("hr", { class: "approvable-divider" }, null, -1)),
+      e("div", ya, [
+        (t(!0), a(L, null, T(m.value, (s) => (t(), a("button", {
+          key: s.code,
+          title: s.tooltip,
           class: "approvable-btn",
           type: "button",
-          onClick: (k) => A(o)
+          onClick: (k) => $(s)
         }, [
-          U(u.$slots, "icon", { button: o }, () => [
-            F(Z, {
-              icon: o.icon
+          H(v.$slots, "icon", { button: s }, () => [
+            U(Z, {
+              icon: s.icon
             }, null, 8, ["icon"])
           ]),
-          z(" " + d(o.text), 1)
-        ], 8, ga))), 128))
+          z(" " + c(s.text), 1)
+        ], 8, ka))), 128))
       ])
     ])) : S("", !0);
   }
-}, Sa = { class: "approvable-select" }, $a = {
+}, _a = { class: "approvable-select" }, Sa = {
   key: 0,
   class: "approvable-select-label"
-}, Aa = ["value"], wa = ["value"], Ca = /* @__PURE__ */ Object.assign({
+}, $a = ["value"], Aa = ["value"], wa = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "ApprovableStatusSelect",
@@ -1060,92 +1040,92 @@ const Rt = {
   }),
   emits: /* @__PURE__ */ ue(["mounted"], ["update:modelValue"]),
   setup(l, { emit: y }) {
-    const v = y, f = Ne(l, "modelValue"), h = l, b = O([]), n = async (o) => {
-      let k = [{ field: "search", value: o }];
+    const u = y, f = Ne(l, "modelValue"), h = l, m = O([]), n = async (s) => {
+      let k = [{ field: "search", value: s }];
       return await new We().fetchAll({ filters: k });
-    }, g = (o) => String(T(o, "id") ?? T(o, "code", "")), A = (o) => T(o, "name") ?? T(o, "text", ""), C = _(() => f.value ? g(f.value) : ""), u = (o) => {
-      const k = o.target.value;
-      f.value = b.value.find(($) => g($) === k) ?? null;
-    }, m = async (o = null) => {
-      const k = await (h.getList ?? n)(o);
-      b.value = Array.isArray(k) ? k : [];
+    }, g = (s) => String(V(s, "id") ?? V(s, "code", "")), $ = (s) => V(s, "name") ?? V(s, "text", ""), C = _(() => f.value ? g(f.value) : ""), v = (s) => {
+      const k = s.target.value;
+      f.value = m.value.find((A) => g(A) === k) ?? null;
+    }, b = async (s = null) => {
+      const k = await (h.getList ?? n)(s);
+      m.value = Array.isArray(k) ? k : [];
     };
     return de(async () => {
-      await m(), v("mounted", { refresh: m, options: b });
-    }), (o, k) => (a(), s("label", Sa, [
-      l.label ? (a(), s("span", $a, d(l.label), 1)) : S("", !0),
-      t("select", te({
+      await b(), u("mounted", { refresh: b, options: m });
+    }), (s, k) => (t(), a("label", _a, [
+      l.label ? (t(), a("span", Sa, c(l.label), 1)) : S("", !0),
+      e("select", te({
         value: C.value,
         class: "approvable-select-input"
-      }, o.$attrs, { onChange: u }), [
-        k[0] || (k[0] = t("option", { value: "" }, "-", -1)),
-        (a(!0), s(L, null, N(b.value, ($) => (a(), s("option", {
-          key: g($),
-          value: g($)
-        }, d(A($)), 9, wa))), 128))
-      ], 16, Aa)
+      }, s.$attrs, { onChange: v }), [
+        k[0] || (k[0] = e("option", { value: "" }, "-", -1)),
+        (t(!0), a(L, null, T(m.value, (A) => (t(), a("option", {
+          key: g(A),
+          value: g(A)
+        }, c($(A)), 9, Aa))), 128))
+      ], 16, $a)
     ]));
   }
-}), Ra = { class: "approvable-select-option" }, xa = {
+}), Ca = { class: "approvable-select-option" }, Ra = {
   __name: "ApprovableStatusSelectOption",
   props: {
     value: {}
   },
   setup(l) {
-    const y = l, v = _(() => T(y.value, "name"));
-    return (f, h) => (a(), s("div", Ra, [
-      t("span", null, d(v.value), 1)
+    const y = l, u = _(() => V(y.value, "name"));
+    return (f, h) => (t(), a("div", Ca, [
+      e("span", null, c(u.value), 1)
     ]));
   }
-}, La = {
-  Approvable: ha,
+}, xa = {
+  Approvable: fa,
   ApprovableCompact: $e,
   ApprovableStep: Ae,
   ApprovableStepActions: ae,
-  ApprovableButtons: _a,
+  ApprovableButtons: ga,
   ApprovableStepComment: _e,
   ApprovableAuditTimeline: ke,
   ApproveStatusInfo: se,
-  ApprovableStatusSelect: Ca,
-  ApprovableStatusSelectOption: xa
-}, Ma = {
-  install(l, { linkComponent: y = null, icons: v = null, messages: f = null, register: h = !0 } = {}) {
-    if (y && l.provide(Se, y), v && l.provide(ge, v), f && l.provide(ye, f), h)
-      for (const [b, n] of Object.entries(La))
-        l.component(b, n);
+  ApprovableStatusSelect: wa,
+  ApprovableStatusSelectOption: Ra
+}, Oa = {
+  install(l, { linkComponent: y = null, icons: u = null, messages: f = null, register: h = !0 } = {}) {
+    if (y && l.provide(Se, y), u && l.provide(ge, u), f && l.provide(ye, f), h)
+      for (const [m, n] of Object.entries(xa))
+        l.component(m, n);
   }
 };
 export {
   ge as APPROVABLE_ICON_REGISTRY,
   Se as APPROVABLE_LINK_COMPONENT,
   ye as APPROVABLE_MESSAGES,
-  ha as Approvable,
+  fa as Approvable,
   ke as ApprovableAuditTimeline,
-  _a as ApprovableButtons,
-  Ta as ApprovableClient,
+  ga as ApprovableButtons,
+  Na as ApprovableClient,
   $e as ApprovableCompact,
-  Ca as ApprovableStatusSelect,
-  xa as ApprovableStatusSelectOption,
+  wa as ApprovableStatusSelect,
+  Ra as ApprovableStatusSelectOption,
   Ae as ApprovableStep,
   ae as ApprovableStepActions,
   _e as ApprovableStepComment,
   se as ApproveStatusInfo,
-  Va as approvableActionRenderer,
-  ja as approvableActionSlotName,
-  Ba as axiosAdapter,
-  Pa as configureApprovableClient,
-  Ma as default,
-  qa as fetchAdapter,
-  Ka as getApprovableClient,
-  Ua as isClassIcon,
-  Fa as isRegisteredIcon,
-  Ga as isUrlIcon,
+  Ta as approvableActionRenderer,
+  Va as approvableActionSlotName,
+  ja as axiosAdapter,
+  Ba as configureApprovableClient,
+  Oa as default,
+  Pa as fetchAdapter,
+  qa as getApprovableClient,
+  Ka as isClassIcon,
+  Ha as isRegisteredIcon,
+  Ua as isUrlIcon,
   Ct as linkProps,
-  Oa as registerApprovableActionRenderer,
-  za as setApprovableClient,
-  Ha as unregisterApprovableActionRenderer,
+  Da as registerApprovableActionRenderer,
+  Fa as setApprovableClient,
+  Ga as unregisterApprovableActionRenderer,
   ft as useIconRegistry,
   wt as useLinkComponent,
-  G as useMessages
+  F as useMessages
 };
 //# sourceMappingURL=approvable-vue.mjs.map