@stsdti/approvable-vue 0.1.6 → 0.1.11

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");
-function F() {
-  return Le(X(ve, null));
+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";
+const ye = Symbol("approvable.messages");
+function G() {
+  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" }, bt = { class: "approvable-timeline-value approvable-timeline-value--new" }, mt = { 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: v }) {
+    const f = l, h = v, b = G(), n = new Ve(), g = O([]), A = O(!1), C = O(""), u = {
       approvable_status_name: "Status",
       comment: "Comment",
       responsible: "Assigned to",
       is_active: "Active step"
-    }, x = {
+    }, m = {
       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);
+    }, 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);
       }
-      return [...r.values()].map((l) => {
-        const i = l[0], A = O(i), G = l.flatMap(u);
+      return [...i.values()].map((p) => {
+        const c = p[0], x = $(c), W = p.flatMap(R);
         return {
-          id: i.request_id || `audit-${i.id}`,
-          entries: l,
-          audit: i,
-          kind: A,
+          id: c.request_id || `audit-${c.id}`,
+          entries: p,
+          audit: c,
+          kind: x,
           // 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--${x}`,
+          icon: m[x],
+          isQuiet: o.has(x),
+          isSingleLine: W.length === 0
         };
-      }).sort((l, i) => new Date(i.audit.created_at) - new Date(l.audit.created_at));
+      }).sort((p, c) => new Date(c.audit.created_at) - new Date(p.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 $(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 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 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 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 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;
       }
-      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 (((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";
     }
-    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 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 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 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 E(a) {
-      return a.oldValue !== void 0 && a.oldValue !== null && a.oldValue !== "";
+    function D(e) {
+      return e.oldValue !== void 0 && e.oldValue !== null && e.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 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 I(a) {
-      if (!a) return "";
-      const r = new Date(a);
-      return Number.isNaN(r.getTime()) ? a : new Intl.DateTimeFormat(void 0, {
+    function H(e) {
+      if (!e) return "";
+      const i = new Date(e);
+      return Number.isNaN(i.getTime()) ? e : new Intl.DateTimeFormat(void 0, {
         dateStyle: "medium",
         timeStyle: "short"
-      }).format(r);
+      }).format(i);
     }
-    async function M() {
-      var a, r;
+    async function E() {
+      var e, i;
       if (!f.approvableId) {
-        n.value = [], v.value = !1, L.value = "The approval history is unavailable because the approvable has no id.";
+        g.value = [], A.value = !1, C.value = "The approval history is unavailable because the approvable has no id.";
         return;
       }
-      v.value = !0, L.value = "";
+      A.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 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.";
       } finally {
-        v.value = !1;
+        A.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 = _(() => 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"])
     }, [
-      o.showHeader ? (t(), s("div", Ue, [
-        e("p", Fe, d(C(g).history), 1),
-        e("h3", Ge, d(S.value), 1),
-        e("button", {
+      l.showHeader ? (a(), s("div", Qe, [
+        t("p", Ye, d(w(b).history), 1),
+        t("h3", Je, d(r.value), 1),
+        t("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] = [
-        e("span", {
+          disabled: A.value,
+          onClick: E
+        }, d(A.value ? "Loading…" : "Refresh"), 9, Xe)
+      ])) : S("", !0),
+      A.value ? (a(), s("div", Ze, [...i[0] || (i[0] = [
+        t("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 ? (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
             }])
           }, [
-            e("span", {
-              class: B(["approvable-timeline-marker", l.kindClass])
+            t("span", {
+              class: V(["approvable-timeline-marker", p.kindClass])
             }, [
-              (t(), s("svg", {
+              (a(), s("svg", {
                 fill: "none",
                 stroke: "currentColor",
-                "stroke-width": l.icon.width,
+                "stroke-width": p.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))
+                (a(!0), s(L, null, N(p.icon.paths, (c, x) => (a(), s("path", {
+                  key: x,
+                  d: c
+                }, 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)
+            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)
               ]),
-              (t(!0), s(D, null, P(l.entries, (i) => (t(), s(D, {
-                key: i.id
+              (a(!0), s(L, null, N(p.entries, (c) => (a(), s(L, {
+                key: c.id
               }, [
-                (t(!0), s(D, null, P(u(i), (A) => (t(), s(D, {
-                  key: `${i.id}-${A.key}`
+                (a(!0), s(L, null, N(R(c), (x) => (a(), s(L, {
+                  key: `${c.id}-${x.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)
+                  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))
+                    ], 64)) : S("", !0),
+                    t("span", bt, d(P(x.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."))
+        t("p", mt, d(w(b).allEventsShown), 1)
+      ], 64)) : (a(), s("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 (v, f) => w(je)(w(y), l.icon) ? (a(), B(J(w(y)[l.icon]), {
       key: 0,
       class: "approvable-btn-icon"
-    })) : C(Me)(o.icon) ? (t(), s("img", {
+    })) : w(Be)(l.icon) ? (a(), s("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) ? (a(), s("i", {
       key: 2,
-      class: B(o.icon)
-    }, null, 2)) : k("", !0);
+      class: V(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,56 +261,56 @@ 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 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();
     }
-    function x() {
-      v.value = N(m.approvableStep, "comment"), _.value = !0, Ae($);
+    function m() {
+      A.value = T(v.approvableStep, "comment"), n.value = !0, xe(k);
     }
-    function c() {
-      _.value = !1;
+    function o() {
+      n.value = !1;
     }
-    function $() {
-      const u = g.value;
-      u && (u.style.height = "auto", u.style.height = `${u.scrollHeight}px`);
+    function k() {
+      const R = b.value;
+      R && (R.style.height = "auto", R.style.height = `${R.scrollHeight}px`);
     }
-    function O(u) {
-      _.value && h.value && !h.value.contains(u.target) && c();
+    function $(R) {
+      n.value && h.value && !h.value.contains(R.target) && o();
     }
-    function V(u) {
-      u.key === "Escape" && c();
+    function I(R) {
+      R.key === "Escape" && o();
     }
-    ie(() => {
-      document.addEventListener("click", O), document.addEventListener("keydown", V);
-    }), ke(() => {
-      document.removeEventListener("click", O), document.removeEventListener("keydown", V);
+    de(() => {
+      document.addEventListener("click", $), document.addEventListener("keydown", I);
+    }), we(() => {
+      document.removeEventListener("click", $), document.removeEventListener("keydown", I);
     });
-    const R = F();
-    async function p() {
-      if (!N(m.approvableStep, "comment") && !v.value) {
-        re(R.commentRequired);
+    const M = G();
+    async function j() {
+      if (!T(v.approvableStep, "comment") && !A.value) {
+        ve(M.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 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);
     }
-    return (u, E) => (t(), s("div", {
+    return (R, D) => (a(), s("div", {
       ref_key: "rootRef",
       ref: h,
       class: "approvable-popover"
     }, [
-      e("button", {
+      t("button", {
         class: "approvable-btn",
-        title: C(R).comments,
+        title: w(M).comments,
         type: "button",
-        onClick: y
-      }, [...E[1] || (E[1] = [
-        e("svg", {
+        onClick: u
+      }, [...D[1] || (D[1] = [
+        t("svg", {
           xmlns: "http://www.w3.org/2000/svg",
           width: "16",
           height: "16",
@@ -322,54 +322,276 @@ const dt = ["src"], J = {
           "stroke-linejoin": "round",
           "aria-hidden": "true"
         }, [
-          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" })
+          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" })
         ], -1)
-      ])], 8, ct),
-      _.value ? (t(), s("div", vt, [
-        n.value ? (t(), s("div", mt, [...E[2] || (E[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", {
+      ])], 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)
+        ])])) : 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)
+        ])) : S("", !0),
+        l.disabled ? S("", !0) : (a(), s(L, { key: 2 }, [
+          Ce(t("textarea", {
             ref_key: "textareaRef",
-            ref: g,
-            "onUpdate:modelValue": E[0] || (E[0] = (j) => v.value = j),
+            ref: b,
+            "onUpdate:modelValue": D[0] || (D[0] = (P) => A.value = P),
             class: "approvable-textarea",
             rows: "1",
-            onInput: $
+            onInput: k
           }, null, 544), [
-            [Se, v.value]
+            [Re, A.value]
           ]),
-          e("div", yt, [
-            e("button", {
+          t("div", At, [
+            t("button", {
               class: "approvable-btn approvable-btn--primary",
               type: "button",
-              onClick: p
-            }, d(C(R).save), 1)
+              onClick: j
+            }, d(w(M).save), 1)
           ])
         ], 64))
-      ])) : k("", !0)
+      ])) : S("", !0)
     ], 512));
   }
 };
-function va(o, b) {
-  return Te(o, we(b));
+function Oa(l, y) {
+  return qe(l, Le(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" }, Lt = ["title", "onClick"], Et = ["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 v = y, f = l, h = wt(), b = _(() => fe(f.value)), n = _(() => b.value.buttons.length > 0 || !!f.value.can_comment), g = (u) => ({
+      "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
+      });
+      v("isLoading", !1), m.skipped || v("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
+        }, [
+          A(o) ? (a(), B(J(A(o)), {
+            key: 0,
+            "action-ui": o.action_ui,
+            approvable: l.approvable,
+            button: o,
+            buttons: [o],
+            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({
+            key: 1,
+            ref_for: !0
+          }, w(Ct)(w(h), o.link)), {
+            default: X(() => [
+              t("button", {
+                title: o.tooltip,
+                class: V(g(o)),
+                type: "button",
+                onClick: ($) => C(o)
+              }, [
+                F(Z, {
+                  icon: o.icon
+                }, null, 8, ["icon"])
+              ], 10, Lt)
+            ]),
+            _: 2
+          }, 1040)) : (a(), s("button", {
+            key: 2,
+            title: o.tooltip,
+            class: V(g(o)),
+            type: "button",
+            onClick: ($) => C(o)
+          }, [
+            F(Z, {
+              icon: o.icon
+            }, null, 8, ["icon"]),
+            z(" " + d(o.text), 1)
+          ], 10, Et))
+        ], 64))), 128))
+      ]),
+      l.value.can_comment ? (a(), s("div", Dt, [
+        F(_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))
+        }, null, 8, ["approvable-step", "disabled"])
+      ])) : S("", !0)
+    ])) : S("", !0);
+  }
+}, se = {
+  __name: "ApproveStatusInfo",
+  props: {
+    value: {
+      required: !0
+    },
+    label: {
+      default: null
+    }
+  },
+  setup(l) {
+    const y = l, v = _(() => {
+      const h = T(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--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));
+  }
+}, 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 v = l, f = y, h = G(), b = _(() => he(v.value)), n = _(() => Fe(b.value.steps)), g = _(() => n.value.focus), A = _(() => K(h.stepProgress, {
+      current: n.value.focusStepNumber ?? 0,
+      total: n.value.stepCount
+    })), C = (m) => ({
+      "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
+    ].filter(Boolean).join(" — ");
+    return (m, o) => (a(), s("div", Ot, [
+      t("div", Mt, [
+        t("div", It, [
+          l.showApprovableStatus ? (a(), B(se, {
+            key: 0,
+            label: b.value.statusName,
+            value: b.value.status
+          }, null, 8, ["label", "value"])) : S("", !0),
+          n.value.dots.length ? (a(), s("span", {
+            key: 1,
+            class: "approvable-compact-dots",
+            role: "img",
+            "aria-label": A.value
+          }, [
+            (a(!0), s(L, null, N(n.value.dots, (k) => (a(), s("span", {
+              key: k.id,
+              class: V(C(k)),
+              title: u(k)
+            }, null, 10, Tt))), 128))
+          ], 8, Nt)) : S("", !0)
+        ]),
+        g.value ? (a(), s("p", Vt, [
+          U(m.$slots, "approvableStepInfo", {
+            step: n.value.focusStep
+          }, () => [
+            t("span", jt, d(g.value.approverName), 1)
+          ]),
+          U(m.$slots, "approvableStepRole", {
+            role: g.value.approverRole,
+            step: n.value.focusStep
+          }, () => [
+            g.value.approverRole ? (a(), s(L, { key: 0 }, [
+              o[3] || (o[3] = t("span", {
+                "aria-hidden": "true",
+                class: "approvable-compact-sep"
+              }, "·", -1)),
+              z(d(g.value.approverRole), 1)
+            ], 64)) : S("", !0)
+          ])
+        ])) : S("", !0)
+      ]),
+      t("div", Bt, [
+        n.value.hasActiveStep && n.value.focusStep ? (a(), B(ae, {
+          key: 0,
+          approvable: b.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"))
+        }, null, 8, ["approvable", "resource", "value"])) : S("", !0),
+        t("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", {
+            "aria-hidden": "true",
+            class: "approvable-icon",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            viewBox: "0 0 16 16"
+          }, [
+            t("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"], Ut = { class: "approvable-step-body" }, Ft = { class: "approvable-step-line" }, Gt = { class: "approvable-step-name" }, zt = ["title"], Ht = {
   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,334 @@ 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 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 = _(() => ({
       "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": !A.value && !n.value.comment.text
+    })), m = {
       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 = {
       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 = _(() => ze(g.value, n.value.isActive)), $ = _(() => m[k.value] ?? null), I = _(() => ({
       "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--${o[k.value]}`]: !0
+    })), M = _(() => b.value ? n.value.comment.text : n.value.comment.preview);
+    return (j, R) => n.value.isVisible ? (a(), s("li", {
       key: 0,
-      class: B(x.value)
+      class: V(u.value)
     }, [
-      e("span", {
-        class: B(R.value)
+      t("span", {
+        class: V(I.value)
       }, [
-        V.value ? (t(), s("svg", gt, [
-          e("path", {
-            d: V.value.d,
-            "stroke-width": V.value.width
-          }, null, 8, St)
-        ])) : k("", !0)
+        $.value ? (a(), s("svg", qt, [
+          t("path", {
+            d: $.value.d,
+            "stroke-width": $.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)
+      t("div", Ut, [
+        t("div", Ft, [
+          U(j.$slots, "approvableStepInfo", { step: l.value }, () => [
+            t("span", Gt, d(n.value.approverName), 1)
           ]),
-          z(I.$slots, "approvableStepRole", {
-            step: o.value,
+          U(j.$slots, "approvableStepRole", {
+            step: l.value,
             role: n.value.approverRole
           }, () => [
-            n.value.approverRole ? (t(), s("span", {
+            n.value.approverRole ? (a(), s("span", {
               key: 0,
               title: n.value.approverRole,
               class: "approvable-step-role"
-            }, d(n.value.approverRole), 9, Ct)) : (t(), s("span", Et))
+            }, d(n.value.approverRole), 9, zt)) : (a(), s("span", Ht))
           ]),
-          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 ? (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)
+          ])) : S("", !0),
+          F(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"))
+          }, null, 8, ["approvable", "resource", "value"])
         ]),
-        n.value.comment.text ? (t(), s("p", Nt, [
-          e("span", {
+        n.value.comment.text ? (a(), s("p", Jt, [
+          t("span", {
             title: n.value.comment.title
-          }, d(p.value), 9, Vt),
-          n.value.comment.isTrimmed ? (t(), s("button", {
+          }, d(M.value), 9, Xt),
+          n.value.comment.isTrimmed ? (a(), s("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": 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)
+        ])) : S("", !0)
       ])
-    ], 2)) : k("", !0);
+    ], 2)) : S("", !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));
-  }
-}, 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"
+}, 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"
-}, Ht = {
+}, va = {
   key: 1,
   class: "approvable-footer"
-}, zt = { class: "approvable-dialog-header" }, Qt = { class: "approvable-dialog-eyebrow" }, Wt = {
+}, da = { class: "approvable-dialog-header" }, ca = { class: "approvable-dialog-eyebrow" }, ba = {
   id: "approvable-history-title",
   class: "approvable-dialog-title"
-}, Yt = ["aria-label"], Jt = { class: "approvable-dialog-body" }, Xt = {
+}, ma = ["aria-label"], fa = { class: "approvable-dialog-body" }, ha = {
   __name: "Approvable",
   props: {
     value: {},
     showApprovableStatus: { 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 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 = [
       { 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(() => 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 = _(() => ({
+      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)
+      "approvable-steps--row": v.isDirectionRow
+    })), P = _(() => {
+      const { activeStepNumber: E, visibleStepCount: r, activeApproverName: e } = $.value;
+      if (!E || !r)
         return null;
-      const E = H(v.stepProgress, {
-        current: R,
-        total: p
+      const i = K(u.stepProgress, {
+        current: E,
+        total: r
       });
-      return u ? `${E} — ${H(v.awaitingApprover, { name: u })}` : E;
-    }), V = () => {
-      var R;
-      (R = g.value) == null || R.refresh(), f("refresh");
+      return e ? `${i} — ${K(u.awaitingApprover, { name: e })}` : i;
+    }), H = () => {
+      var E;
+      (E = b.value) == null || E.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] = [
-        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", {
+    return (E, r) => $.value.hasApprovable ? (a(), s("div", {
+      key: 0,
+      class: V(R.value)
+    }, [
+      h.value && $.value.steps.length ? (a(), s("div", ea, [...r[10] || (r[10] = [
+        t("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", {
             "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] = t("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] = t("span", {
+            "aria-hidden": "true",
+            class: "approvable-skeleton-spacer"
+          }, null, -1)),
+          r[14] || (r[14] = t("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, {
+        ])) : (a(), B($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
+        }, pe({ _: 2 }, [
+          N(Object.keys(E.$slots), (e) => ({
+            name: e,
+            fn: X((i) => [
+              U(E.$slots, e, Ee(De(i ?? {})))
+            ])
+          }))
+        ]), 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", {
+              "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", {
+              "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, {
+              key: 0,
+              label: $.value.statusName,
+              value: $.value.status
+            }, null, 8, ["label", "value"])) : S("", !0),
+            t("span", na, d($.value.updatedAt), 1),
+            I.value.isCollapsible ? (a(), s("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", {
+              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", {
+              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))
+            }, [...r[18] || (r[18] = [
+              t("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"
+              }, [
+                t("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,
+            "aria-hidden": "true",
+            class: "approvable-skeleton-row"
+          }, [
+            t("span", {
+              class: "approvable-skeleton-disc",
+              style: Q({ animationDelay: e.delay })
+            }, null, 4),
+            t("span", {
+              class: "approvable-skeleton-bar",
+              style: Q({ width: e.name, animationDelay: e.delay })
+            }, null, 4),
+            r[19] || (r[19] = t("span", { class: "approvable-skeleton-spacer" }, null, -1)),
+            t("span", {
+              class: "approvable-skeleton-bar approvable-skeleton-bar--soft",
+              style: Q({ width: e.meta, animationDelay: e.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", {
             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: V(D.value)
+          }, [
+            (a(!0), s(L, null, N(I.value.steps, (e) => (a(), B(Ae, {
+              key: e.id,
+              approvable: $.value.approvable,
+              resource: l.value,
+              value: e,
+              onIsLoading: r[5] || (r[5] = (i) => h.value = i),
+              onRefresh: H
+            }, pe({ _: 2 }, [
+              N(Object.keys(E.$slots), (i) => ({
+                name: i,
+                fn: X((p) => [
+                  U(E.$slots, i, 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)
         ], 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", {
+      (a(), B(Oe, { to: "body" }, [
+        n.value ? (a(), s("div", {
           key: 0,
           class: "approvable-dialog-backdrop",
-          onClick: p[5] || (p[5] = Ee((u) => _.value = !1, ["self"]))
+          onClick: r[9] || (r[9] = Me((e) => n.value = !1, ["self"]))
         }, [
-          e("section", {
+          t("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((e) => n.value = !1, ["esc"]))
           }, [
-            e("header", zt, [
-              e("p", Qt, [
-                p[12] || (p[12] = e("svg", {
+            t("header", da, [
+              t("p", ca, [
+                r[21] || (r[21] = t("svg", {
                   "aria-hidden": "true",
                   fill: "none",
                   stroke: "currentColor",
@@ -737,18 +964,18 @@ const gt = {
                   "stroke-width": "2",
                   viewBox: "0 0 16 16"
                 }, [
-                  e("path", { d: "M9.6 4.5 6 8l3.6 3.5" })
+                  t("path", { d: "M9.6 4.5 6 8l3.6 3.5" })
                 ], -1)),
-                Q(" " + d(C(v).history), 1)
+                z(" " + d(w(u).history), 1)
               ]),
-              e("h2", Wt, d(x.value), 1),
-              e("button", {
+              t("h2", ba, d(M.value), 1),
+              t("button", {
                 type: "button",
                 class: "approvable-dialog-close",
-                "aria-label": C(v).historyClose,
-                onClick: p[2] || (p[2] = (u) => _.value = !1)
-              }, [...p[13] || (p[13] = [
-                e("svg", {
+                "aria-label": w(u).historyClose,
+                onClick: r[6] || (r[6] = (e) => n.value = !1)
+              }, [...r[22] || (r[22] = [
+                t("svg", {
                   "aria-hidden": "true",
                   class: "approvable-icon",
                   fill: "none",
@@ -757,28 +984,28 @@ const gt = {
                   "stroke-width": "2",
                   viewBox: "0 0 16 16"
                 }, [
-                  e("path", { d: "m5.2 5.2 5.6 5.6M10.8 5.2l-5.6 5.6" })
+                  t("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, {
+            t("div", fa, [
+              F(ke, {
                 ref_key: "auditTimeline",
-                ref: g,
-                "approvable-id": y.value.id,
+                ref: b,
+                "approvable-id": $.value.id,
                 "show-header": !1,
-                onLoaded: p[3] || (p[3] = (u) => n.value = u)
+                onLoaded: r[7] || (r[7] = (e) => g.value = e)
               }, null, 8, ["approvable-id"])
             ])
           ], 32)
-        ])) : k("", !0)
+        ])) : S("", !0)
       ]))
-    ])) : k("", !0);
+    ], 2)) : S("", !0);
   }
-}, Zt = {
+}, ya = {
   key: 0,
   class: "approvable-actions"
-}, ea = { class: "approvable-actions-list" }, ta = ["title", "onClick"], aa = {
+}, ka = { class: "approvable-actions-list" }, ga = ["title", "onClick"], _a = {
   __name: "ApprovableButtons",
   props: {
     value: {
@@ -786,43 +1013,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 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) => {
       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 o = await new ce().updateApproveStatus(u, m);
+      be(o) && me(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 (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,
           class: "approvable-btn",
           type: "button",
-          onClick: ($) => v(c)
+          onClick: (k) => A(o)
         }, [
-          z(y.$slots, "icon", { button: c }, () => [
-            U(J, {
-              icon: c.icon
+          U(u.$slots, "icon", { button: o }, () => [
+            F(Z, {
+              icon: o.icon
             }, null, 8, ["icon"])
           ]),
-          Q(" " + d(c.text), 1)
-        ], 8, ta))), 128))
+          z(" " + d(o.text), 1)
+        ], 8, ga))), 128))
       ])
-    ])) : k("", !0);
+    ])) : S("", !0);
   }
-}, sa = { class: "approvable-select" }, oa = {
+}, Sa = { class: "approvable-select" }, $a = {
   key: 0,
   class: "approvable-select-label"
-}, la = ["value"], na = ["value"], ra = /* @__PURE__ */ Object.assign({
+}, Aa = ["value"], wa = ["value"], Ca = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "ApprovableStatusSelect",
-  props: /* @__PURE__ */ ne({
+  props: /* @__PURE__ */ ue({
     getList: {},
     label: {
       default: "Status"
@@ -831,90 +1058,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 v = y, f = Ne(l, "modelValue"), h = l, b = O([]), n = async (o) => {
+      let k = [{ field: "search", value: o }];
+      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 : [];
     };
-    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 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({
+        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)
+      }, 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)
     ]));
   }
-}), ia = { class: "approvable-select-option" }, pa = {
+}), Ra = { class: "approvable-select-option" }, xa = {
   __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, v = _(() => T(y.value, "name"));
+    return (f, h) => (a(), s("div", Ra, [
+      t("span", null, d(v.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, _);
+}, La = {
+  Approvable: ha,
+  ApprovableCompact: $e,
+  ApprovableStep: Ae,
+  ApprovableStepActions: ae,
+  ApprovableButtons: _a,
+  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);
   }
 };
 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,
-  F as useMessages
+  ge as APPROVABLE_ICON_REGISTRY,
+  Se as APPROVABLE_LINK_COMPONENT,
+  ye as APPROVABLE_MESSAGES,
+  ha as Approvable,
+  ke as ApprovableAuditTimeline,
+  _a as ApprovableButtons,
+  Ta as ApprovableClient,
+  $e as ApprovableCompact,
+  Ca as ApprovableStatusSelect,
+  xa 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,
+  Ct as linkProps,
+  Oa as registerApprovableActionRenderer,
+  za as setApprovableClient,
+  Ha as unregisterApprovableActionRenderer,
+  ft as useIconRegistry,
+  wt as useLinkComponent,
+  G as useMessages
 };
 //# sourceMappingURL=approvable-vue.mjs.map