@stsdti/approvable-vue 0.1.7 → 0.1.12

package/dist/approvable-vue.mjs

@@ -1,30 +1,30 @@
-import { inject as X, ref as T, computed as w, watch as oe, openBlock as t, createElementBlock as s, normalizeClass as B, createElementVNode as e, toDisplayString as d, unref as C, createCommentVNode as k, createTextVNode as Q, Fragment as D, renderList as P, createBlock as K, resolveDynamicComponent as Y, useTemplateRef as le, onMounted as ie, onBeforeUnmount as ke, withDirectives as ge, vModelText as Se, nextTick as Ae, markRaw as we, renderSlot as z, mergeProps as Z, withCtx as pe, createVNode as U, normalizeStyle as W, createSlots as $e, Teleport as Ce, withModifiers as Ee, withKeys as Re, useModel as De, mergeModels as ne } from "vue";
-import { mergeMessages as Le, ApprovableAuditRepository as xe, formatMessage as H, isRegisteredIcon as Oe, isUrlIcon as Me, isClassIcon as Ie, get as N, notifyError as re, ApprovableStepRepository as ue, isSuccessResponse as de, notifySuccess as ce, registerActionRenderer as Te, createStepViewModel as Ne, approvableStatusTone as Ve, approvableStepGlyph as je, actionRenderer as Be, performStepAction as Pe, ApprovableStatus as q, createApprovableViewModel as qe, ApprovableStatusRepository as Ke } from "@stsdti/approvable-core";
-import { ApprovableClient as ha, actionRenderer as ya, actionSlotName as _a, axiosAdapter as ka, configureApprovableClient as ga, fetchAdapter as Sa, getApprovableClient as Aa, isClassIcon as wa, isRegisteredIcon as $a, isUrlIcon as Ca, setApprovableClient as Ea, unregisterActionRenderer as Ra } from "@stsdti/approvable-core";
-const ve = Symbol("approvable.messages");
+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 F() {
-  return Le(X(ve, null));
+  return Te(ee(ye, null));
 }
-const Ue = {
+const Qe = {
   key: 0,
   class: "approvable-timeline-header"
-}, Fe = { class: "approvable-timeline-eyebrow" }, Ge = { class: "approvable-timeline-title" }, He = ["disabled"], ze = {
+}, Ye = { class: "approvable-timeline-eyebrow" }, Je = { class: "approvable-timeline-title" }, Xe = ["disabled"], Ze = {
   key: 1,
   class: "approvable-timeline-state",
   role: "status"
-}, Qe = {
+}, et = {
   key: 2,
   class: "approvable-timeline-error"
-}, We = {
+}, tt = {
   key: 3,
   class: "approvable-timeline-state"
-}, Ye = { class: "approvable-timeline-list" }, Je = ["stroke-width"], Xe = ["d"], Ze = { class: "approvable-timeline-content" }, et = { class: "approvable-timeline-line" }, tt = { class: "approvable-timeline-actor" }, at = { class: "approvable-timeline-operation" }, st = { class: "approvable-timeline-time" }, ot = {
+}, at = { class: "approvable-timeline-list" }, st = ["stroke-width"], ot = ["d"], lt = { class: "approvable-timeline-content" }, nt = { class: "approvable-timeline-line" }, rt = { class: "approvable-timeline-actor" }, it = { class: "approvable-timeline-operation" }, pt = { class: "approvable-timeline-time" }, ut = {
   key: 0,
   class: "approvable-timeline-comment"
-}, lt = {
+}, vt = {
   key: 1,
   class: "approvable-timeline-change"
-}, nt = { class: "approvable-timeline-change-label" }, rt = { class: "approvable-timeline-value approvable-timeline-value--old" }, it = { class: "approvable-timeline-value approvable-timeline-value--new" }, pt = { class: "approvable-timeline-footer" }, me = {
+}, 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 Ue = {
     showHeader: { type: Boolean, default: !0 }
   },
   emits: ["loaded"],
-  setup(o, { expose: b, emit: m }) {
-    const f = o, h = m, g = F(), _ = new xe(), n = T([]), v = T(!1), L = T(""), y = {
+  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"
-    }, x = {
+    }, 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,177 +47,177 @@ const Ue = {
       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 }
-    }, c = /* @__PURE__ */ new Set(["created", "update"]), $ = w(() => {
-      const a = n.value.filter((l) => l.approvable_step_id), r = /* @__PURE__ */ new Map();
-      for (const l of a) {
-        const i = l.request_id || `audit-${l.id}`;
-        r.has(i) || r.set(i, []), r.get(i).push(l);
+    }, 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 [...r.values()].map((l) => {
-        const i = l[0], A = O(i), G = l.flatMap(u);
+      return [...p.values()].map((i) => {
+        const d = i[0], E = A(d), W = i.flatMap(x);
         return {
-          id: i.request_id || `audit-${i.id}`,
-          entries: l,
-          audit: i,
-          kind: A,
+          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--${A}`,
-          icon: x[A],
-          isQuiet: c.has(A),
-          isSingleLine: G.length === 0
+          kindClass: `approvable-timeline-marker--${E}`,
+          icon: b[E],
+          isQuiet: s.has(E),
+          isSingleLine: W.length === 0
         };
-      }).sort((l, i) => new Date(i.audit.created_at) - new Date(l.audit.created_at));
+      }).sort((i, d) => new Date(d.audit.created_at) - new Date(i.audit.created_at));
     });
-    function O(a) {
-      var l, i, A;
-      const r = (l = a.metadata) == null ? void 0 : l.button;
-      return r != null && r.is_undo ? "undo" : (r == null ? void 0 : r.result) === "rejected" ? "reject" : (r == null ? void 0 : r.result) === "approved" ? "approve" : ((i = a.metadata) == null ? void 0 : i.operation) === "comment" ? "comment" : ((A = a.metadata) == null ? void 0 : A.operation) === "signal" ? "signal" : a.event === "created" ? "created" : V(a) ? "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 V(a) {
-      var i, A;
-      const r = (i = a.old_values) == null ? void 0 : i.approvable_status_name, l = (A = a.new_values) == null ? void 0 : A.approvable_status_name;
-      return l !== void 0 && r !== l;
+    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 R(a) {
-      var i, A, G, ee, te, ae;
-      const r = (i = a.metadata) == null ? void 0 : i.button;
-      if (r) {
-        const se = r.text || r.label || r.id || "action";
-        return r.is_undo ? "Reverted the decision" : r.is_revision ? `Changed decision to ${se}` : se;
+    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 (((A = a.metadata) == null ? void 0 : A.operation) === "comment") return "Comment added";
-      if (((G = a.metadata) == null ? void 0 : G.operation) === "signal") return `Signal received: ${((te = (ee = a.metadata) == null ? void 0 : ee.signal) == null ? void 0 : te.name) || ""}`.trim();
-      if (a.event === "created") return "Step started";
-      const l = (ae = a.new_values) == null ? void 0 : ae.approvable_status_name;
-      return V(a) && l ? `Status set to ${l}` : "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 p(a = {}) {
-      return a.type === "system" ? "System" : a.name ? a.name : a.email ? a.email : a.id ? a.type === "fake" ? `Test user ${a.id}` : `User ${a.id}` : a.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 u(a) {
-      const r = a.old_values || {}, l = a.new_values || {};
-      return Object.keys(y).filter((i) => i in r || i in l).map((i) => ({ key: i, label: y[i], oldValue: r[i], newValue: l[i] })).filter((i) => i.oldValue !== i.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 E(a) {
-      return a.oldValue !== void 0 && a.oldValue !== null && a.oldValue !== "";
+    function D(o) {
+      return o.oldValue !== void 0 && o.oldValue !== null && o.oldValue !== "";
     }
-    function j(a) {
-      if (a == null || a === "") return "—";
-      if (typeof a == "boolean") return a ? "Yes" : "No";
-      if (Array.isArray(a)) return a.length ? a.join(", ") : "—";
-      const r = typeof a == "object" ? JSON.stringify(a) : String(a);
-      return r.length > 180 ? `${r.slice(0, 177)}…` : r;
+    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 I(a) {
-      if (!a) return "";
-      const r = new Date(a);
-      return Number.isNaN(r.getTime()) ? a : 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(r);
+      }).format(p);
     }
-    async function M() {
-      var a, r;
+    async function r() {
+      var o, p;
       if (!f.approvableId) {
-        n.value = [], v.value = !1, L.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;
       }
-      v.value = !0, L.value = "";
+      $.value = !0, C.value = "";
       try {
-        const l = await _.fetchTimeline(f.approvableId, f.limit);
-        if (!l || l.status < 200 || l.status >= 300)
-          throw new Error(((a = l == null ? void 0 : l.data) == null ? void 0 : a.message) || "The audit timeline could not be loaded.");
-        const i = Array.isArray(l.data) ? l.data : (r = l.data) == null ? void 0 : r.data;
-        n.value = Array.isArray(i) ? i : [];
-      } catch (l) {
-        L.value = (l == null ? void 0 : l.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 {
-        v.value = !1;
+        $.value = !1;
       }
     }
-    const S = w(() => H(g.eventCount, { count: $.value.length }));
-    return oe($, (a) => h("loaded", a.length)), oe(() => f.approvableId, M, { immediate: !0 }), b({ refresh: M }), (a, r) => (t(), s("section", {
-      class: B(["approvable-timeline", o.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"])
     }, [
-      o.showHeader ? (t(), s("div", Ue, [
-        e("p", Fe, d(C(g).history), 1),
-        e("h3", Ge, d(S.value), 1),
+      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: v.value,
-          onClick: M
-        }, d(v.value ? "Loading…" : "Refresh"), 9, He)
-      ])) : k("", !0),
-      v.value ? (t(), s("div", ze, [...r[0] || (r[0] = [
+          disabled: $.value,
+          onClick: r
+        }, c($.value ? "Loading…" : "Refresh"), 9, Xe)
+      ])) : S("", !0),
+      $.value ? (t(), a("div", Ze, [...p[0] || (p[0] = [
         e("span", {
           class: "approvable-spinner",
           "aria-hidden": "true"
         }, null, -1),
-        Q(" Loading approval history… ", -1)
-      ])])) : L.value ? (t(), s("p", Qe, d(L.value), 1)) : $.value.length ? (t(), s(D, { key: 4 }, [
-        e("ol", Ye, [
-          (t(!0), s(D, null, P($.value, (l) => (t(), s("li", {
-            key: l.id,
-            class: B(["approvable-timeline-item", {
-              "approvable-timeline-item--single-line": l.isSingleLine,
-              "approvable-timeline-item--quiet": l.isQuiet
+        z(" Loading approval history… ", -1)
+      ])])) : 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
             }])
           }, [
             e("span", {
-              class: B(["approvable-timeline-marker", l.kindClass])
+              class: j(["approvable-timeline-marker", i.kindClass])
             }, [
-              (t(), s("svg", {
+              (t(), a("svg", {
                 fill: "none",
                 stroke: "currentColor",
-                "stroke-width": l.icon.width,
+                "stroke-width": i.icon.width,
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
                 viewBox: "0 0 16 16",
                 "aria-hidden": "true"
               }, [
-                (t(!0), s(D, null, P(l.icon.paths, (i, A) => (t(), s("path", {
-                  key: A,
-                  d: i
-                }, null, 8, Xe))), 128))
-              ], 8, Je))
+                (t(!0), a(L, null, T(i.icon.paths, (d, E) => (t(), a("path", {
+                  key: E,
+                  d
+                }, null, 8, ot))), 128))
+              ], 8, st))
             ], 2),
-            e("div", Ze, [
-              e("div", et, [
-                e("p", tt, d(p(l.audit.actor)), 1),
-                e("p", at, d(R(l.audit)), 1),
-                e("time", st, d(I(l.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)
               ]),
-              (t(!0), s(D, null, P(l.entries, (i) => (t(), s(D, {
-                key: i.id
+              (t(!0), a(L, null, T(i.entries, (d) => (t(), a(L, {
+                key: d.id
               }, [
-                (t(!0), s(D, null, P(u(i), (A) => (t(), s(D, {
-                  key: `${i.id}-${A.key}`
+                (t(!0), a(L, null, T(x(d), (E) => (t(), a(L, {
+                  key: `${d.id}-${E.key}`
                 }, [
-                  A.key === "comment" ? (t(), s("p", ot, d(j(A.newValue)), 1)) : (t(), s("p", lt, [
-                    e("span", nt, d(A.label), 1),
-                    E(A) ? (t(), s(D, { key: 0 }, [
-                      e("span", rt, d(j(A.oldValue)), 1),
-                      r[1] || (r[1] = e("span", { class: "approvable-timeline-arrow" }, "→", -1))
-                    ], 64)) : k("", !0),
-                    e("span", it, d(j(A.newValue)), 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),
+                    e("span", mt, c(q(E.newValue)), 1)
                   ]))
                 ], 64))), 128))
               ], 64))), 128))
             ])
           ], 2))), 128))
         ]),
-        e("p", pt, d(C(g).allEventsShown), 1)
-      ], 64)) : (t(), s("p", We, "No approval activity yet."))
+        e("p", bt, c(w(m).allEventsShown), 1)
+      ], 64)) : (t(), a("p", tt, "No approval activity yet."))
     ], 2));
   }
-}, be = Symbol("approvable.iconRegistry");
-function ut() {
-  return X(be, {});
+}, ge = Symbol("approvable.iconRegistry");
+function ft() {
+  return ee(ge, {});
 }
-const dt = ["src"], J = {
+const ht = ["src"], Z = {
   __name: "ApprovableIcon",
   props: {
     icon: {
@@ -225,31 +225,31 @@ const dt = ["src"], J = {
       default: ""
     }
   },
-  setup(o) {
-    const b = ut();
-    return (m, f) => C(Oe)(C(b), o.icon) ? (t(), K(Y(C(b)[o.icon]), {
+  setup(l) {
+    const y = ft();
+    return (u, f) => w(je)(w(y), l.icon) ? (t(), P(J(w(y)[l.icon]), {
       key: 0,
       class: "approvable-btn-icon"
-    })) : C(Me)(o.icon) ? (t(), s("img", {
+    })) : w(Be)(l.icon) ? (t(), a("img", {
       key: 1,
-      src: o.icon,
+      src: l.icon,
       alt: "",
       class: "approvable-btn-icon"
-    }, null, 8, dt)) : C(Ie)(o.icon) ? (t(), s("i", {
+    }, null, 8, ht)) : w(Pe)(l.icon) ? (t(), a("i", {
       key: 2,
-      class: B(o.icon)
-    }, null, 2)) : k("", !0);
+      class: j(l.icon)
+    }, null, 2)) : S("", !0);
   }
-}, ct = ["title"], vt = {
+}, yt = ["title"], kt = {
   key: 0,
   class: "approvable-popover-panel"
-}, mt = {
+}, gt = {
   key: 0,
   class: "approvable-loading"
-}, bt = { class: "approvable-popover-title" }, ft = {
+}, _t = { class: "approvable-popover-title" }, St = {
   key: 1,
   class: "approvable-popover-meta"
-}, ht = { class: "approvable-popover-author" }, yt = { class: "approvable-popover-actions" }, fe = {
+}, $t = { class: "approvable-popover-author" }, At = { class: "approvable-popover-actions" }, _e = {
   __name: "ApprovableStepComment",
   props: {
     approvableStep: {
@@ -261,55 +261,55 @@ const dt = ["src"], J = {
     }
   },
   emits: ["isLoading", "refresh"],
-  setup(o, { emit: b }) {
-    const m = o, f = b, h = le("rootRef"), g = le("textareaRef"), _ = T(!1), n = T(!1), v = T(null), L = w(() => N(m.approvableStep, "commented_by"));
-    function y() {
-      _.value ? c() : x();
+  setup(l, { emit: y }) {
+    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 x() {
-      v.value = N(m.approvableStep, "comment"), _.value = !0, Ae($);
+    function b() {
+      $.value = V(u.approvableStep, "comment"), n.value = !0, xe(k);
     }
-    function c() {
-      _.value = !1;
+    function s() {
+      n.value = !1;
     }
-    function $() {
-      const u = g.value;
-      u && (u.style.height = "auto", u.style.height = `${u.scrollHeight}px`);
+    function k() {
+      const x = m.value;
+      x && (x.style.height = "auto", x.style.height = `${x.scrollHeight}px`);
     }
-    function O(u) {
-      _.value && h.value && !h.value.contains(u.target) && c();
+    function A(x) {
+      n.value && h.value && !h.value.contains(x.target) && s();
     }
-    function V(u) {
-      u.key === "Escape" && c();
+    function N(x) {
+      x.key === "Escape" && s();
     }
-    ie(() => {
-      document.addEventListener("click", O), document.addEventListener("keydown", V);
-    }), ke(() => {
-      document.removeEventListener("click", O), document.removeEventListener("keydown", V);
+    de(() => {
+      document.addEventListener("click", A), document.addEventListener("keydown", N);
+    }), we(() => {
+      document.removeEventListener("click", A), document.removeEventListener("keydown", N);
     });
-    const R = F();
-    async function p() {
-      if (!N(m.approvableStep, "comment") && !v.value) {
-        re(R.commentRequired);
+    const I = F();
+    async function B() {
+      if (!V(u.approvableStep, "comment") && !$.value) {
+        ve(I.commentRequired);
         return;
       }
-      n.value = !0, f("isLoading", !0);
-      const u = {
-        comment: v.value
-      }, E = await new ue().comment(m.approvableStep.id, u);
-      de(E) ? (ce(R.commentSaved), c(), f("refresh")) : re(R.commentFailed), n.value = !1, f("isLoading", !1);
+      g.value = !0, f("isLoading", !0);
+      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 (u, E) => (t(), s("div", {
+    return (x, D) => (t(), a("div", {
       ref_key: "rootRef",
       ref: h,
       class: "approvable-popover"
     }, [
       e("button", {
         class: "approvable-btn",
-        title: C(R).comments,
+        title: w(I).comments,
         type: "button",
-        onClick: y
-      }, [...E[1] || (E[1] = [
+        onClick: v
+      }, [...D[1] || (D[1] = [
         e("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "16",
@@ -326,50 +326,272 @@ const dt = ["src"], J = {
           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, ct),
-      _.value ? (t(), s("div", vt, [
-        n.value ? (t(), s("div", mt, [...E[2] || (E[2] = [
+      ])], 8, yt),
+      n.value ? (t(), a("div", kt, [
+        g.value ? (t(), a("div", gt, [...D[2] || (D[2] = [
           e("span", { class: "approvable-spinner" }, null, -1)
-        ])])) : k("", !0),
-        e("div", bt, d(C(R).comments), 1),
-        L.value ? (t(), s("div", ft, [
-          e("div", null, d(C(R).commentAuthor) + ":", 1),
-          e("div", ht, d(L.value), 1)
-        ])) : k("", !0),
-        o.disabled ? k("", !0) : (t(), s(D, { key: 2 }, [
-          ge(e("textarea", {
+        ])])) : S("", !0),
+        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) : (t(), a(L, { key: 2 }, [
+          Ce(e("textarea", {
             ref_key: "textareaRef",
-            ref: g,
-            "onUpdate:modelValue": E[0] || (E[0] = (j) => v.value = j),
+            ref: m,
+            "onUpdate:modelValue": D[0] || (D[0] = (q) => $.value = q),
             class: "approvable-textarea",
             rows: "1",
-            onInput: $
+            onInput: k
           }, null, 544), [
-            [Se, v.value]
+            [Re, $.value]
           ]),
-          e("div", yt, [
+          e("div", At, [
             e("button", {
               class: "approvable-btn approvable-btn--primary",
               type: "button",
-              onClick: p
-            }, d(C(R).save), 1)
+              onClick: B
+            }, c(w(I).save), 1)
           ])
         ], 64))
-      ])) : k("", !0)
+      ])) : S("", !0)
     ], 512));
   }
 };
-function va(o, b) {
-  return Te(o, we(b));
+function Da(l, y) {
+  return qe(l, Ee(y));
 }
-const he = Symbol("approvable.linkComponent");
-function _t() {
-  return X(he, "a");
+const Se = Symbol("approvable.linkComponent");
+function wt() {
+  return ee(Se, "a");
 }
-function kt(o, b) {
-  return o === "a" ? { href: b } : { to: b };
+function Ct(l, y) {
+  return l === "a" ? { href: y } : { to: y };
 }
-const gt = {
+const Rt = {
+  key: 0,
+  class: "approvable-step-actions"
+}, xt = { class: "approvable-btn-group" }, Et = ["title", "onClick"], Lt = ["title", "onClick"], Dt = {
+  key: 0,
+  class: "approvable-btn-group"
+}, ae = {
+  __name: "ApprovableStepActions",
+  props: {
+    value: {
+      type: Object,
+      required: !0
+    },
+    approvable: {
+      type: Object,
+      required: !0
+    },
+    resource: {
+      type: Object,
+      required: !0
+    }
+  },
+  emits: ["isLoading", "refresh"],
+  setup(l, { emit: y }) {
+    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": !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
+      });
+      u("isLoading", !1), b.skipped || u("refresh");
+    };
+    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
+        }, [
+          $(s) ? (t(), P(J($(s)), {
+            key: 0,
+            "action-ui": s.action_ui,
+            approvable: l.approvable,
+            button: s,
+            buttons: [s],
+            complete: C,
+            resource: l.resource,
+            step: l.value,
+            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), s.link)), {
+            default: X(() => [
+              e("button", {
+                title: s.tooltip,
+                class: j(g(s)),
+                type: "button",
+                onClick: (A) => C(s)
+              }, [
+                U(Z, {
+                  icon: s.icon
+                }, null, 8, ["icon"])
+              ], 10, Et)
+            ]),
+            _: 2
+          }, 1040)) : (t(), a("button", {
+            key: 2,
+            title: s.tooltip,
+            class: j(g(s)),
+            type: "button",
+            onClick: (A) => C(s)
+          }, [
+            U(Z, {
+              icon: s.icon
+            }, null, 8, ["icon"]),
+            z(" " + c(s.text), 1)
+          ], 10, Lt))
+        ], 64))), 128))
+      ]),
+      l.value.can_comment ? (t(), a("div", Dt, [
+        U(_e, {
+          "approvable-step": l.value,
+          disabled: !l.value.can_comment,
+          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);
+  }
+}, se = {
+  __name: "ApproveStatusInfo",
+  props: {
+    value: {
+      required: !0
+    },
+    label: {
+      default: null
+    }
+  },
+  setup(l) {
+    const y = l, u = _(() => {
+      const h = V(y.value, "code", " - ");
+      return {
+        "approvable-badge": !0,
+        "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 : 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,
+  class: "approvable-compact-who"
+}, jt = { class: "approvable-compact-name" }, Bt = { class: "approvable-compact-side" }, Pt = ["aria-label", "title"], $e = {
+  __name: "ApprovableCompact",
+  props: {
+    value: {
+      type: Object,
+      required: !0
+    },
+    showApprovableStatus: { type: Boolean, default: !0 }
+  },
+  emits: ["expand", "isLoading", "refresh"],
+  setup(l, { emit: y }) {
+    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 = (b) => ({
+      "approvable-compact-dot": !0,
+      [`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 (b, s) => (t(), a("div", Ot, [
+      e("div", Mt, [
+        e("div", It, [
+          l.showApprovableStatus ? (t(), P(se, {
+            key: 0,
+            label: m.value.statusName,
+            value: m.value.status
+          }, null, 8, ["label", "value"])) : S("", !0),
+          n.value.dots.length ? (t(), a("span", {
+            key: 1,
+            class: "approvable-compact-dots",
+            role: "img",
+            "aria-label": $.value
+          }, [
+            (t(!0), a(L, null, T(n.value.dots, (k) => (t(), a("span", {
+              key: k.id,
+              class: j(C(k)),
+              title: v(k)
+            }, null, 10, Tt))), 128))
+          ], 8, Nt)) : S("", !0)
+        ]),
+        g.value ? (t(), a("p", Vt, [
+          H(b.$slots, "approvableStepInfo", {
+            step: n.value.focusStep
+          }, () => [
+            e("span", jt, c(g.value.approverName), 1)
+          ]),
+          H(b.$slots, "approvableStepRole", {
+            role: g.value.approverRole,
+            step: n.value.focusStep
+          }, () => [
+            g.value.approverRole ? (t(), a(L, { key: 0 }, [
+              s[3] || (s[3] = e("span", {
+                "aria-hidden": "true",
+                class: "approvable-compact-sep"
+              }, "·", -1)),
+              z(c(g.value.approverRole), 1)
+            ], 64)) : S("", !0)
+          ])
+        ])) : S("", !0)
+      ]),
+      e("div", Bt, [
+        n.value.hasActiveStep && n.value.focusStep ? (t(), P(ae, {
+          key: 0,
+          approvable: m.value.approvable,
+          resource: l.value,
+          value: n.value.focusStep,
+          onIsLoading: s[0] || (s[0] = (k) => f("isLoading", k)),
+          onRefresh: s[1] || (s[1] = (k) => f("refresh"))
+        }, null, 8, ["approvable", "resource", "value"])) : S("", !0),
+        e("button", {
+          type: "button",
+          class: "approvable-compact-toggle",
+          "aria-expanded": !1,
+          "aria-label": w(h).compactExpand,
+          title: w(h).compactExpand,
+          onClick: s[2] || (s[2] = (k) => f("expand"))
+        }, [...s[4] || (s[4] = [
+          e("svg", {
+            "aria-hidden": "true",
+            class: "approvable-icon",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            viewBox: "0 0 16 16"
+          }, [
+            e("path", { d: "M4.5 6.4 8 9.9l3.5-3.5" })
+          ], -1)
+        ])], 8, Pt)
+      ])
+    ]));
+  }
+}, qt = {
   key: 0,
   "aria-hidden": "true",
   fill: "none",
@@ -377,25 +599,19 @@ const gt = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round",
   viewBox: "0 0 16 16"
-}, St = ["d", "stroke-width"], At = { class: "approvable-step-body" }, wt = { class: "approvable-step-line" }, $t = { class: "approvable-step-name" }, Ct = ["title"], Et = {
+}, 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"
-}, Rt = {
+}, Wt = {
   key: 0,
   class: "approvable-step-status"
-}, Dt = { key: 0 }, Lt = {
+}, Qt = { key: 0 }, Yt = {
   key: 1,
   class: "approvable-step-date"
-}, xt = {
-  key: 1,
-  class: "approvable-step-actions"
-}, Ot = { class: "approvable-btn-group" }, Mt = ["title", "onClick"], It = ["title", "onClick"], Tt = {
-  key: 0,
-  class: "approvable-btn-group"
-}, Nt = {
+}, Jt = {
   key: 0,
   class: "approvable-step-comment"
-}, Vt = ["title"], jt = ["aria-expanded"], ye = {
+}, Xt = ["title"], Zt = ["aria-expanded"], Ae = {
   __name: "ApprovableStep",
   props: {
     value: {
@@ -412,323 +628,314 @@ const gt = {
     }
   },
   emits: ["isLoading", "refresh"],
-  setup(o, { emit: b }) {
-    const m = b, f = o, h = _t(), g = F(), _ = T(!1), n = w(() => Ne(f.value)), v = w(() => Ve(n.value.status)), L = w(() => n.value.buttons.length > 0 || !!f.value.can_comment), y = w(() => (!n.value.isActive || !L.value) && !!(n.value.statusName || n.value.performedAt)), x = w(() => ({
+  setup(l, { emit: y }) {
+    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 && !v.value,
-      [`approvable-step--${v.value}`]: !!v.value,
+      "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": !L.value && !n.value.comment.text
-    })), c = {
+      "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 }
-    }, $ = {
+    }, s = {
       check: "success",
       cross: "danger",
       dash: "muted",
       ring: "ring",
       pending: "pending"
-    }, O = w(() => je(v.value, n.value.isActive)), V = w(() => c[O.value] ?? null), R = w(() => ({
+    }, k = _(() => Ge(g.value, n.value.isActive)), A = _(() => b[k.value] ?? null), N = _(() => ({
       "approvable-step-disc": !0,
-      [`approvable-step-disc--${$[O.value]}`]: !0
-    })), p = w(() => _.value ? n.value.comment.text : n.value.comment.preview), u = (I) => ({
-      "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": !I.text,
-      "approvable-btn--primary": I.result === "approved"
-    }), E = (I) => n.value.isActive ? Be(I == null ? void 0 : I.action_ui) : null, j = async (I) => {
-      m("isLoading", !0);
-      const M = await Pe({
-        stepId: n.value.id,
-        button: I,
-        buttons: n.value.buttons
-      });
-      m("isLoading", !1), M.skipped || m("refresh");
-    };
-    return (I, M) => n.value.isVisible ? (t(), 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: B(x.value)
+      class: j(v.value)
     }, [
       e("span", {
-        class: B(R.value)
+        class: j(N.value)
       }, [
-        V.value ? (t(), s("svg", gt, [
+        A.value ? (t(), a("svg", qt, [
           e("path", {
-            d: V.value.d,
-            "stroke-width": V.value.width
-          }, null, 8, St)
-        ])) : k("", !0)
+            d: A.value.d,
+            "stroke-width": A.value.width
+          }, null, 8, Kt)
+        ])) : S("", !0)
       ], 2),
-      e("div", At, [
-        e("div", wt, [
-          z(I.$slots, "approvableStepInfo", { step: o.value }, () => [
-            e("span", $t, 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)
           ]),
-          z(I.$slots, "approvableStepRole", {
-            step: o.value,
+          H(B.$slots, "approvableStepRole", {
+            step: l.value,
             role: n.value.approverRole
           }, () => [
-            n.value.approverRole ? (t(), s("span", {
+            n.value.approverRole ? (t(), a("span", {
               key: 0,
               title: n.value.approverRole,
               class: "approvable-step-role"
-            }, d(n.value.approverRole), 9, Ct)) : (t(), s("span", Et))
+            }, c(n.value.approverRole), 9, Gt)) : (t(), a("span", zt))
           ]),
-          y.value ? (t(), s("span", Rt, [
-            n.value.statusName ? (t(), s("span", Dt, d(n.value.statusName), 1)) : k("", !0),
-            n.value.performedAt ? (t(), s("time", Lt, d(n.value.performedAt), 1)) : k("", !0)
-          ])) : k("", !0),
-          L.value ? (t(), s("div", xt, [
-            e("div", Ot, [
-              (t(!0), s(D, null, P(n.value.buttons, (S, a) => (t(), s(D, {
-                key: S.id ?? a
-              }, [
-                E(S) ? (t(), K(Y(E(S)), {
-                  key: 0,
-                  "action-ui": S.action_ui,
-                  approvable: o.approvable,
-                  button: S,
-                  buttons: [S],
-                  complete: j,
-                  resource: o.resource,
-                  step: o.value,
-                  onIsLoading: M[0] || (M[0] = (r) => m("isLoading", r)),
-                  onRefresh: M[1] || (M[1] = (r) => m("refresh"))
-                }, null, 40, ["action-ui", "approvable", "button", "buttons", "resource", "step"])) : S.link ? (t(), K(Y(C(h)), Z({
-                  key: 1,
-                  ref_for: !0
-                }, C(kt)(C(h), S.link)), {
-                  default: pe(() => [
-                    e("button", {
-                      title: S.tooltip,
-                      class: B(u(S)),
-                      type: "button",
-                      onClick: (r) => j(S)
-                    }, [
-                      U(J, {
-                        icon: S.icon
-                      }, null, 8, ["icon"])
-                    ], 10, Mt)
-                  ]),
-                  _: 2
-                }, 1040)) : (t(), s("button", {
-                  key: 2,
-                  title: S.tooltip,
-                  class: B(u(S)),
-                  type: "button",
-                  onClick: (r) => j(S)
-                }, [
-                  U(J, {
-                    icon: S.icon
-                  }, null, 8, ["icon"]),
-                  Q(" " + d(S.text), 1)
-                ], 10, It))
-              ], 64))), 128))
-            ]),
-            o.value.can_comment ? (t(), s("div", Tt, [
-              U(fe, {
-                "approvable-step": o.value,
-                disabled: !o.value.can_comment,
-                onRefresh: M[2] || (M[2] = (S) => m("refresh")),
-                onIsLoading: M[3] || (M[3] = (S) => m("isLoading", S))
-              }, null, 8, ["approvable-step", "disabled"])
-            ])) : k("", !0)
-          ])) : k("", !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),
+          U(ae, {
+            approvable: l.approvable,
+            resource: l.resource,
+            value: l.value,
+            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 ? (t(), s("p", Nt, [
+        n.value.comment.text ? (t(), a("p", Jt, [
           e("span", {
             title: n.value.comment.title
-          }, d(p.value), 9, Vt),
-          n.value.comment.isTrimmed ? (t(), 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": _.value,
-            onClick: M[4] || (M[4] = (S) => _.value = !_.value)
-          }, d(_.value ? C(g).showLess : C(g).showMore), 9, jt)) : k("", !0)
-        ])) : k("", !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)) : k("", !0);
-  }
-}, _e = {
-  __name: "ApproveStatusInfo",
-  props: {
-    value: {
-      required: !0
-    },
-    label: {
-      default: null
-    }
-  },
-  setup(o) {
-    const b = o, m = w(() => {
-      const h = N(b.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--empty": h === " - "
-      };
-    }), f = w(() => b.label ? b.label : N(b.value, "name", " - "));
-    return (h, g) => (t(), s("span", {
-      class: B(m.value)
-    }, d(f.value), 3));
+    ], 2)) : S("", !0);
   }
-}, Bt = {
-  key: 0,
-  class: "approvable"
-}, Pt = {
+}, ea = {
   key: 0,
   class: "approvable-loading"
-}, qt = { class: "approvable-header" }, Kt = { class: "approvable-sr-only" }, Ut = { class: "approvable-updated-at" }, Ft = ["title", "aria-label"], Gt = {
+}, ta = { class: "approvable-sr-only" }, aa = {
+  key: 0,
+  class: "approvable-compact"
+}, sa = {
   class: "approvable-sr-only",
   "aria-live": "polite"
-}, Ht = {
-  key: 1,
-  class: "approvable-footer"
-}, zt = { class: "approvable-dialog-header" }, Qt = { class: "approvable-dialog-eyebrow" }, Wt = {
+}, 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 = { class: "approvable-dialog-header" }, da = { class: "approvable-dialog-eyebrow" }, ca = {
   id: "approvable-history-title",
   class: "approvable-dialog-title"
-}, Yt = ["aria-label"], Jt = { class: "approvable-dialog-body" }, Xt = {
+}, 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 }
+    isDirectionRow: { default: !1 },
+    /**
+     * How many steps stay on screen above and below the active one, with the
+     * rest folded behind a toggle. `null` shows the whole trail.
+     */
+    visibleStepRange: { type: Number, default: null },
+    /**
+     * Start collapsed: the status, a dot per step, and the active step's controls
+     * on one line. Supports `v-model:compact`, and the panel's own chevron drives
+     * it either way.
+     */
+    compact: { type: Boolean, default: !1 },
+    /**
+     * Whether the chevron that switches between the two forms is offered at all.
+     * `null` means "whenever the panel was asked for compact" — a caller that
+     * wants the control but the full trail first passes `true` explicitly.
+     */
+    collapsible: { type: Boolean, default: null }
   },
-  emits: ["refresh", "isLoading"],
-  setup(o, { emit: b }) {
-    const m = o, f = b, h = T(!1), g = T(null), _ = T(!1), n = T(null), v = F(), L = [
+  emits: ["refresh", "isLoading", "update:compact"],
+  setup(l, { emit: y }) {
+    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 = w(() => qe(m.value)), x = w(() => n.value === null ? v.historyTitle : H(v.eventCount, { count: n.value })), c = w(() => h.value && !y.value.steps.length), $ = w(() => ({
+    ];
+    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": m.isDirectionRow
-    })), O = w(() => {
-      const { activeStepNumber: R, visibleStepCount: p, activeApproverName: u } = y.value;
-      if (!R || !p)
-        return null;
-      const E = H(v.stepProgress, {
-        current: R,
-        total: p
-      });
-      return u ? `${E} — ${H(v.awaitingApprover, { name: u })}` : E;
-    }), V = () => {
-      var R;
-      (R = g.value) == null || R.refresh(), f("refresh");
+      "approvable-steps--row": u.isDirectionRow
+    })), q = () => {
+      var M;
+      (M = m.value) == null || M.refresh(), f("refresh");
     };
-    return (R, p) => y.value.hasApprovable ? (t(), s("div", Bt, [
-      h.value && y.value.steps.length ? (t(), s("div", Pt, [...p[6] || (p[6] = [
+    return (M, r) => A.value.hasApprovable ? (t(), a("div", {
+      key: 0,
+      class: j(x.value)
+    }, [
+      h.value && A.value.steps.length ? (t(), a("div", ea, [...r[10] || (r[10] = [
         e("span", { class: "approvable-spinner" }, null, -1)
-      ])])) : k("", !0),
-      e("div", qt, [
-        e("h2", Kt, d(o.title), 1),
-        c.value ? (t(), s(D, { key: 0 }, [
-          p[7] || (p[7] = e("span", {
+      ])])) : S("", !0),
+      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)),
-          p[8] || (p[8] = e("span", { class: "approvable-skeleton-spacer" }, null, -1)),
-          p[9] || (p[9] = e("span", {
+          r[12] || (r[12] = e("span", {
             "aria-hidden": "true",
             class: "approvable-skeleton-bar approvable-skeleton-bar--soft",
-            style: { width: "104px", "animation-delay": "0.2s" }
+            style: { width: "96px", "animation-delay": "0.15s" }
+          }, null, -1)),
+          r[13] || (r[13] = e("span", {
+            "aria-hidden": "true",
+            class: "approvable-skeleton-spacer"
+          }, null, -1)),
+          r[14] || (r[14] = e("span", {
+            "aria-hidden": "true",
+            class: "approvable-skeleton-disc",
+            style: { "animation-delay": "0.25s" }
           }, null, -1))
-        ], 64)) : (t(), s(D, { key: 1 }, [
-          o.showApprovableStatus ? (t(), K(_e, {
+        ])) : (t(), P($e, {
+          key: 1,
+          "show-approvable-status": l.showApprovableStatus,
+          value: l.value,
+          onExpand: r[0] || (r[0] = (R) => s(!1)),
+          onIsLoading: r[1] || (r[1] = (R) => h.value = R),
+          onRefresh: q
+        }, pe({ _: 2 }, [
+          T(Object.keys(M.$slots), (R) => ({
+            name: R,
+            fn: X((o) => [
+              H(M.$slots, R, Le(De(o ?? {})))
+            ])
+          }))
+        ]), 1032, ["show-approvable-status", "value"]))
+      ], 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] = 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)) : (t(), a(L, { key: 1 }, [
+            l.showApprovableStatus ? (t(), P(se, {
+              key: 0,
+              label: A.value.statusName,
+              value: A.value.status
+            }, null, 8, ["label", "value"])) : S("", !0),
+            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": $.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(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(v).compactCollapse,
+              title: w(v).compactCollapse,
+              onClick: r[4] || (r[4] = (R) => s(!0))
+            }, [...r[18] || (r[18] = [
+              e("svg", {
+                "aria-hidden": "true",
+                class: "approvable-icon",
+                fill: "none",
+                stroke: "currentColor",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                viewBox: "0 0 16 16"
+              }, [
+                e("path", { d: "M4.5 6.4 8 9.9l3.5-3.5" })
+              ], -1)
+            ])], 8, pa)) : S("", !0)
+          ], 64))
+        ]),
+        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"
+          }, [
+            e("span", {
+              class: "approvable-skeleton-disc",
+              style: Q({ animationDelay: R.delay })
+            }, null, 4),
+            e("span", {
+              class: "approvable-skeleton-bar",
+              style: Q({ width: R.name, animationDelay: R.delay })
+            }, null, 4),
+            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: R.meta, animationDelay: R.metaDelay })
+            }, null, 4)
+          ])), 64))
+        ], 64)) : (t(), a(L, { key: 1 }, [
+          N.value.steps.length ? (t(), a("ol", {
             key: 0,
-            label: y.value.statusName,
-            value: y.value.status
-          }, null, 8, ["label", "value"])) : k("", !0),
-          e("span", Ut, d(y.value.updatedAt), 1),
-          y.value.id ? (t(), s("button", {
-            key: 1,
-            type: "button",
-            class: "approvable-history-btn",
-            title: C(v).historyTitle,
-            "aria-label": C(v).historyTitle,
-            onClick: p[0] || (p[0] = (u) => _.value = !0)
-          }, d(C(v).history), 9, Ft)) : k("", !0)
+            class: j(D.value)
+          }, [
+            (t(!0), a(L, null, T(N.value.steps, (R) => (t(), P(Ae, {
+              key: R.id,
+              approvable: A.value.approvable,
+              resource: l.value,
+              value: R,
+              onIsLoading: r[5] || (r[5] = (o) => h.value = o),
+              onRefresh: q
+            }, pe({ _: 2 }, [
+              T(Object.keys(M.$slots), (o) => ({
+                name: o,
+                fn: X((p) => [
+                  H(M.$slots, o, te({ ref_for: !0 }, p ?? {}))
+                ])
+              }))
+            ]), 1032, ["approvable", "resource", "value"]))), 128))
+          ], 2)) : S("", !0)
         ], 64))
-      ]),
-      c.value ? (t(), s(D, { key: 1 }, [
-        e("span", Gt, d(C(v).loadingStatus), 1),
-        (t(), s(D, null, P(L, (u) => e("div", {
-          key: u.delay,
-          "aria-hidden": "true",
-          class: "approvable-skeleton-row"
-        }, [
-          e("span", {
-            class: "approvable-skeleton-disc",
-            style: W({ animationDelay: u.delay })
-          }, null, 4),
-          e("span", {
-            class: "approvable-skeleton-bar",
-            style: W({ width: u.name, animationDelay: u.delay })
-          }, null, 4),
-          p[10] || (p[10] = e("span", { class: "approvable-skeleton-spacer" }, null, -1)),
-          e("span", {
-            class: "approvable-skeleton-bar approvable-skeleton-bar--soft",
-            style: W({ width: u.meta, animationDelay: u.metaDelay })
-          }, null, 4)
-        ])), 64)),
-        p[11] || (p[11] = e("div", {
-          class: "approvable-footer",
-          "aria-hidden": "true"
-        }, [
-          e("span", {
-            class: "approvable-skeleton-bar approvable-skeleton-bar--soft",
-            style: { display: "block", width: "132px" }
-          })
-        ], -1))
-      ], 64)) : (t(), s(D, { key: 2 }, [
-        y.value.steps.length ? (t(), s("ol", {
-          key: 0,
-          class: B($.value)
-        }, [
-          (t(!0), s(D, null, P(y.value.steps, (u) => (t(), K(ye, {
-            key: u.id,
-            approvable: y.value.approvable,
-            resource: o.value,
-            value: u,
-            onIsLoading: p[1] || (p[1] = (E) => h.value = E),
-            onRefresh: V
-          }, $e({ _: 2 }, [
-            P(Object.keys(R.$slots), (E) => ({
-              name: E,
-              fn: pe((j) => [
-                z(R.$slots, E, Z({ ref_for: !0 }, j ?? {}))
-              ])
-            }))
-          ]), 1032, ["approvable", "resource", "value"]))), 128))
-        ], 2)) : k("", !0),
-        O.value ? (t(), s("p", Ht, d(O.value), 1)) : k("", !0)
       ], 64)),
-      (t(), K(Ce, { to: "body" }, [
-        _.value ? (t(), s("div", {
+      (t(), P(Oe, { to: "body" }, [
+        n.value ? (t(), a("div", {
           key: 0,
           class: "approvable-dialog-backdrop",
-          onClick: p[5] || (p[5] = Ee((u) => _.value = !1, ["self"]))
+          onClick: r[9] || (r[9] = Me((R) => n.value = !1, ["self"]))
         }, [
           e("section", {
             role: "dialog",
             "aria-modal": "true",
             "aria-labelledby": "approvable-history-title",
             class: "approvable-dialog",
-            onKeydown: p[4] || (p[4] = Re((u) => _.value = !1, ["esc"]))
+            onKeydown: r[8] || (r[8] = Ie((R) => n.value = !1, ["esc"]))
           }, [
-            e("header", zt, [
-              e("p", Qt, [
-                p[12] || (p[12] = e("svg", {
+            e("header", va, [
+              e("p", da, [
+                r[20] || (r[20] = e("svg", {
                   "aria-hidden": "true",
                   fill: "none",
                   stroke: "currentColor",
@@ -739,15 +946,15 @@ const gt = {
                 }, [
                   e("path", { d: "M9.6 4.5 6 8l3.6 3.5" })
                 ], -1)),
-                Q(" " + d(C(v).history), 1)
+                z(" " + c(w(v).history), 1)
               ]),
-              e("h2", Wt, d(x.value), 1),
+              e("h2", ca, c(I.value), 1),
               e("button", {
                 type: "button",
                 class: "approvable-dialog-close",
-                "aria-label": C(v).historyClose,
-                onClick: p[2] || (p[2] = (u) => _.value = !1)
-              }, [...p[13] || (p[13] = [
+                "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",
@@ -759,26 +966,26 @@ const gt = {
                 }, [
                   e("path", { d: "m5.2 5.2 5.6 5.6M10.8 5.2l-5.6 5.6" })
                 ], -1)
-              ])], 8, Yt)
+              ])], 8, ma)
             ]),
-            e("div", Jt, [
-              U(me, {
+            e("div", ba, [
+              U(ke, {
                 ref_key: "auditTimeline",
-                ref: g,
-                "approvable-id": y.value.id,
+                ref: m,
+                "approvable-id": A.value.id,
                 "show-header": !1,
-                onLoaded: p[3] || (p[3] = (u) => n.value = u)
+                onLoaded: r[7] || (r[7] = (R) => g.value = R)
               }, null, 8, ["approvable-id"])
             ])
           ], 32)
-        ])) : k("", !0)
+        ])) : S("", !0)
       ]))
-    ])) : k("", !0);
+    ], 2)) : S("", !0);
   }
-}, Zt = {
+}, ha = {
   key: 0,
   class: "approvable-actions"
-}, ea = { class: "approvable-actions-list" }, ta = ["title", "onClick"], aa = {
+}, ya = { class: "approvable-actions-list" }, ka = ["title", "onClick"], ga = {
   __name: "ApprovableButtons",
   props: {
     value: {
@@ -786,43 +993,43 @@ const gt = {
     }
   },
   emits: ["isLoading", "refresh"],
-  setup(o, { emit: b }) {
-    const m = o, f = b, h = T(!1), g = w(() => N(m.value, "buttons", [])), _ = w(() => g.value ? g.value.length > 0 : !1), n = F(), v = (y) => {
-      let x = N(m.value, "id");
-      x && L(x, y);
-    }, L = async (y, x) => {
+  setup(l, { emit: y }) {
+    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 c = await new ue().updateApproveStatus(y, x);
-      de(c) && ce(n.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 (y, x) => _.value ? (t(), s("div", Zt, [
-      x[0] || (x[0] = e("hr", { class: "approvable-divider" }, null, -1)),
-      e("div", ea, [
-        (t(!0), s(D, null, P(g.value, (c) => (t(), s("button", {
-          key: c.code,
-          title: c.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: ($) => v(c)
+          onClick: (k) => $(s)
         }, [
-          z(y.$slots, "icon", { button: c }, () => [
-            U(J, {
-              icon: c.icon
+          H(v.$slots, "icon", { button: s }, () => [
+            U(Z, {
+              icon: s.icon
             }, null, 8, ["icon"])
           ]),
-          Q(" " + d(c.text), 1)
-        ], 8, ta))), 128))
+          z(" " + c(s.text), 1)
+        ], 8, ka))), 128))
       ])
-    ])) : k("", !0);
+    ])) : S("", !0);
   }
-}, sa = { class: "approvable-select" }, oa = {
+}, _a = { class: "approvable-select" }, Sa = {
   key: 0,
   class: "approvable-select-label"
-}, la = ["value"], na = ["value"], ra = /* @__PURE__ */ Object.assign({
+}, $a = ["value"], Aa = ["value"], wa = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "ApprovableStatusSelect",
-  props: /* @__PURE__ */ ne({
+  props: /* @__PURE__ */ ue({
     getList: {},
     label: {
       default: "Status"
@@ -831,90 +1038,94 @@ const gt = {
     modelValue: {},
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ ne(["mounted"], ["update:modelValue"]),
-  setup(o, { emit: b }) {
-    const m = b, f = De(o, "modelValue"), h = o, g = T([]), _ = async (c) => {
-      let $ = [{ field: "search", value: c }];
-      return await new Ke().fetchAll({ filters: $ });
-    }, n = (c) => String(N(c, "id") ?? N(c, "code", "")), v = (c) => N(c, "name") ?? N(c, "text", ""), L = w(() => f.value ? n(f.value) : ""), y = (c) => {
-      const $ = c.target.value;
-      f.value = g.value.find((O) => n(O) === $) ?? null;
-    }, x = async (c = null) => {
-      const $ = await (h.getList ?? _)(c);
-      g.value = Array.isArray($) ? $ : [];
+  emits: /* @__PURE__ */ ue(["mounted"], ["update:modelValue"]),
+  setup(l, { emit: y }) {
+    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 = (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 ie(async () => {
-      await x(), m("mounted", { refresh: x, options: g });
-    }), (c, $) => (t(), s("label", sa, [
-      o.label ? (t(), s("span", oa, d(o.label), 1)) : k("", !0),
-      e("select", Z({
-        value: L.value,
+    return de(async () => {
+      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"
-      }, c.$attrs, { onChange: y }), [
-        $[0] || ($[0] = e("option", { value: "" }, "-", -1)),
-        (t(!0), s(D, null, P(g.value, (O) => (t(), s("option", {
-          key: n(O),
-          value: n(O)
-        }, d(v(O)), 9, na))), 128))
-      ], 16, la)
+      }, 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)
     ]));
   }
-}), ia = { class: "approvable-select-option" }, pa = {
+}), Ca = { class: "approvable-select-option" }, Ra = {
   __name: "ApprovableStatusSelectOption",
   props: {
     value: {}
   },
-  setup(o) {
-    const b = o, m = w(() => N(b.value, "name"));
-    return (f, h) => (t(), s("div", ia, [
-      e("span", null, d(m.value), 1)
+  setup(l) {
+    const y = l, u = _(() => V(y.value, "name"));
+    return (f, h) => (t(), a("div", Ca, [
+      e("span", null, c(u.value), 1)
     ]));
   }
-}, ua = {
-  Approvable: Xt,
-  ApprovableStep: ye,
-  ApprovableButtons: aa,
-  ApprovableStepComment: fe,
-  ApprovableAuditTimeline: me,
-  ApproveStatusInfo: _e,
-  ApprovableStatusSelect: ra,
-  ApprovableStatusSelectOption: pa
-}, ma = {
-  install(o, { linkComponent: b = null, icons: m = null, messages: f = null, register: h = !0 } = {}) {
-    if (b && o.provide(he, b), m && o.provide(be, m), f && o.provide(ve, f), h)
-      for (const [g, _] of Object.entries(ua))
-        o.component(g, _);
+}, xa = {
+  Approvable: fa,
+  ApprovableCompact: $e,
+  ApprovableStep: Ae,
+  ApprovableStepActions: ae,
+  ApprovableButtons: ga,
+  ApprovableStepComment: _e,
+  ApprovableAuditTimeline: ke,
+  ApproveStatusInfo: se,
+  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 {
-  be as APPROVABLE_ICON_REGISTRY,
-  he as APPROVABLE_LINK_COMPONENT,
-  ve as APPROVABLE_MESSAGES,
-  Xt as Approvable,
-  me as ApprovableAuditTimeline,
-  aa as ApprovableButtons,
-  ha as ApprovableClient,
-  ra as ApprovableStatusSelect,
-  pa as ApprovableStatusSelectOption,
-  ye as ApprovableStep,
-  fe as ApprovableStepComment,
-  _e as ApproveStatusInfo,
-  ya as approvableActionRenderer,
-  _a as approvableActionSlotName,
-  ka as axiosAdapter,
-  ga as configureApprovableClient,
-  ma as default,
-  Sa as fetchAdapter,
-  Aa as getApprovableClient,
-  wa as isClassIcon,
-  $a as isRegisteredIcon,
-  Ca as isUrlIcon,
-  kt as linkProps,
-  va as registerApprovableActionRenderer,
-  Ea as setApprovableClient,
-  Ra as unregisterApprovableActionRenderer,
-  ut as useIconRegistry,
-  _t as useLinkComponent,
+  ge as APPROVABLE_ICON_REGISTRY,
+  Se as APPROVABLE_LINK_COMPONENT,
+  ye as APPROVABLE_MESSAGES,
+  fa as Approvable,
+  ke as ApprovableAuditTimeline,
+  ga as ApprovableButtons,
+  Na as ApprovableClient,
+  $e as ApprovableCompact,
+  wa as ApprovableStatusSelect,
+  Ra as ApprovableStatusSelectOption,
+  Ae as ApprovableStep,
+  ae as ApprovableStepActions,
+  _e as ApprovableStepComment,
+  se as ApproveStatusInfo,
+  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,
+  Da as registerApprovableActionRenderer,
+  Fa as setApprovableClient,
+  Ga as unregisterApprovableActionRenderer,
+  ft as useIconRegistry,
+  wt as useLinkComponent,
   F as useMessages
 };
 //# sourceMappingURL=approvable-vue.mjs.map