@wssto2/vue-core 0.1.0 → 0.3.0

package/dist/useCommand-BgRwnYlV.js

@@ -0,0 +1,135 @@
+import { nextTick as f, defineComponent as L, useTemplateRef as p, ref as w, watch as S, onBeforeUnmount as x, computed as E, openBlock as v, createBlock as T, unref as c, createSlots as $, withCtx as y, createElementVNode as C, createElementBlock as D, toDisplayString as B, createCommentVNode as N, createVNode as z, renderSlot as g } from "vue";
+import { useI18n as V } from "vue-i18n";
+import { f as q } from "./useDialog-CXR3hN0G.js";
+import { _ as A } from "./Modal.vue_vue_type_script_setup_true_lang-D7SwVPpL.js";
+import { D as F } from "./useWaitStatus-fsacMl4W.js";
+import { _ as O, u as I } from "./FormErrors.vue_vue_type_script_setup_true_lang-DVgNBQ8p.js";
+import { a as R } from "./leaveGuard-Cc8yeLxM.js";
+const d = "input:not([type=hidden]):not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex='-1'])";
+async function U(t = document, n) {
+  const e = [...t.querySelectorAll("[data-field-error]")], s = e.find((a) => a.matches(d) || a.querySelector(d)) ?? e[0];
+  if (!s) return !1;
+  const r = n?.sections.value.find((a) => a.element.contains(s));
+  r && (await n?.scrollTo(r.id, { updateUrl: !1 }), await f());
+  const o = s.matches(d) ? s : s.querySelector(d);
+  return (o ?? s).scrollIntoView?.({ block: "center" }), (o ?? s).focus({ preventScroll: !0 }), !0;
+}
+const Q = (t) => ({ "data-field-key": t }), G = {
+  key: 0,
+  class: "text-body text-content-muted"
+}, X = /* @__PURE__ */ L({
+  __name: "CommandDialog",
+  props: {
+    command: {},
+    title: {},
+    subtitle: { default: void 0 },
+    confirmLabel: {},
+    doneLabel: { default: void 0 },
+    busyLabel: { default: void 0 },
+    message: { default: void 0 },
+    size: { default: "sm" },
+    fieldLabel: { type: Function, default: void 0 }
+  },
+  emits: ["done"],
+  setup(t, { emit: n }) {
+    const e = t, s = n, { t: r } = V(), o = p("modal"), a = p("body"), u = w(!1);
+    let m = null;
+    const { confirmDiscard: _ } = R(() => e.command.open.value && e.command.form.dirty.value);
+    S(() => e.command.open.value, (i) => {
+      i ? (u.value = !1, o.value?.present()) : o.value?.dismiss();
+    });
+    async function b(i = {}) {
+      const l = await e.command.run();
+      if (l.status === "failed") {
+        l.failure.kind === "invalid" && await f().then(() => U(a.value ?? document));
+        return;
+      }
+      if (l.status !== "aborted") {
+        if (s("done"), i.addAnother) {
+          e.command.present(), await f(), q(a.value)[0]?.focus();
+          return;
+        }
+        u.value = !0, m = setTimeout(() => e.command.dismiss(), F);
+      }
+    }
+    x(() => {
+      m && clearTimeout(m);
+    });
+    const k = E(() => e.command.form.submitting.value ? "processing" : u.value ? "done" : "idle");
+    return (i, l) => (v(), T(A, {
+      ref_key: "modal",
+      ref: o,
+      size: e.size,
+      grouped: "",
+      title: e.title,
+      subtitle: e.subtitle,
+      "before-dismiss": c(_),
+      "primary-label": e.confirmLabel,
+      status: k.value,
+      "processing-label": e.busyLabel ?? c(r)("core.actions.saving"),
+      "done-label": e.doneLabel ?? c(r)("core.actions.saved"),
+      onPrimary: l[0] || (l[0] = (h) => b()),
+      onDismissed: l[1] || (l[1] = (h) => e.command.dismiss())
+    }, $({
+      default: y(() => [
+        C("div", {
+          ref_key: "body",
+          ref: a,
+          class: "flex min-w-0 flex-col gap-group-gap",
+          "data-test": "command-dialog"
+        }, [
+          e.message ? (v(), D("p", G, B(e.message), 1)) : N("", !0),
+          z(O, {
+            form: e.command.form,
+            label: e.fieldLabel,
+            scope: a.value
+          }, null, 8, ["form", "label", "scope"]),
+          g(i.$slots, "default")
+        ], 512)
+      ]),
+      _: 2
+    }, [
+      i.$slots.actions ? {
+        name: "actions",
+        fn: y(() => [
+          g(i.$slots, "actions", {
+            run: b,
+            busy: e.command.form.submitting.value
+          })
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["size", "title", "subtitle", "before-dismiss", "primary-label", "status", "processing-label", "done-label"]));
+  }
+});
+function Y(t) {
+  const n = I(t), e = w(!1), s = () => typeof t.defaults == "function" ? t.defaults() : t.defaults;
+  async function r() {
+    return await n.submit(t.run, {
+      // The page updating itself after the call is the refresh: its failure is "saved, but could not be read back".
+      refresh: t.done ? (a) => t.done?.(a) : void 0
+    });
+  }
+  return {
+    form: n,
+    open: e,
+    present(o) {
+      n.hydrate({ ...s(), ...o }), e.value = !0;
+    },
+    dismiss() {
+      e.value = !1;
+    },
+    run: r,
+    async confirm() {
+      const o = await r();
+      if (o.status === "failed") throw new Error(o.failure.message);
+      if (o.status === "aborted") throw new Error("aborted");
+    }
+  };
+}
+export {
+  X as _,
+  Q as a,
+  U as f,
+  Y as u
+};

package/dist/{useDialog-wmyNx2j_.js → useDialog-CXR3hN0G.js}

@@ -1,5 +1,5 @@
 import { ref as A, watch as F, onUnmounted as T, nextTick as y } from "vue";
-import { u as I } from "./dialogStack-DiTG1rZc.js";
+import { a as I } from "./dialogStack-DZZg55w0.js";
 const S = [
   "a[href]",
   "area[href]",

package/dist/useLoad-CYRVx6HW.js

@@ -0,0 +1,39 @@
+import { shallowRef as h, watch as k, getCurrentScope as y, onScopeDispose as C, computed as v } from "vue";
+import { useI18n as D } from "vue-i18n";
+import { u as E } from "./describeError-Ctga6GcS.js";
+function I(f, t = {}) {
+  const { t: m } = D(), g = E(), p = t.errorMessage ?? ((a) => g(a, { fallback: m("core.resource.unavailable") })), e = h({ status: "loading" });
+  let s = 0, u = null;
+  function l() {
+    return u?.abort(), u = null, ++s;
+  }
+  async function o() {
+    const a = l(), i = e.value, r = "value" in i ? i : null;
+    e.value = r ? { status: "refreshing", value: r.value } : { status: "loading" };
+    const c = new AbortController();
+    u = c;
+    try {
+      const n = await f({ signal: c.signal });
+      a === s && (e.value = { status: "loaded", value: n });
+    } catch (n) {
+      if (a !== s) return;
+      const d = p(n);
+      e.value = r ? { status: "stale", value: r.value, error: d } : { status: "failed", error: d };
+    }
+  }
+  function w(a) {
+    l(), e.value = { status: "loaded", value: a };
+  }
+  function b() {
+    e.value = { status: "loading" }, o();
+  }
+  return t.watch !== void 0 ? k(t.watch, b, { immediate: t.immediate ?? !0 }) : (t.immediate ?? !0) && o(), y() && C(l), {
+    state: v(() => e.value),
+    data: v(() => "value" in e.value ? e.value.value : null),
+    reload: o,
+    update: w
+  };
+}
+export {
+  I as u
+};

package/dist/useResourceForm-Bgc9jMcu.js

@@ -0,0 +1,52 @@
+import { shallowRef as v, watch as m, computed as f } from "vue";
+import { u as i, c as h } from "./FormErrors.vue_vue_type_script_setup_true_lang-DVgNBQ8p.js";
+function b(u) {
+  const t = i(u), r = v(null), s = v(!1);
+  let n = null;
+  function c(e) {
+    r.value = e, n = u.source.id.value, s.value = !1, t.hydrate(u.toValues(e));
+  }
+  m(
+    u.source.data,
+    (e) => {
+      !e || e === r.value || (n !== u.source.id.value || !t.dirty.value ? c(e) : (r.value = e, s.value = !0));
+    },
+    { immediate: !0, flush: "sync" }
+  );
+  async function d(e) {
+    return t.submit(
+      async (a, l) => {
+        const o = r.value;
+        if (!o) throw new Error("useResourceForm: the record is not loaded, so there is nothing to save.");
+        return u.save(a, o, l);
+      },
+      {
+        refresh: e?.refresh,
+        // The saved record is the new truth, unless the user has moved on to another record meanwhile.
+        hydrateFrom: (a) => {
+          const l = r.value;
+          return r.value = a, u.source.update(a) ? (s.value = !1, u.toValues(a)) : (r.value = l, null);
+        }
+      }
+    );
+  }
+  return {
+    ...t,
+    record: f(() => r.value),
+    outdated: f(() => s.value),
+    save: d,
+    rebase(e = []) {
+      const a = u.source.data.value;
+      if (!a || u.source.state.value.status !== "loaded") return !1;
+      const l = Object.fromEntries(e.map((o) => [o, h(t.values[o])]));
+      return c(a), Object.assign(t.values, l), !0;
+    },
+    reset() {
+      const e = r.value;
+      e && s.value ? c(e) : t.reset();
+    }
+  };
+}
+export {
+  b as u
+};

package/dist/useSaveChrome-chi6D3HY.js

@@ -0,0 +1,25 @@
+import { computed as u, toValue as r } from "vue";
+import { useI18n as n } from "vue-i18n";
+import { u as s } from "./chrome-BS3xJcad.js";
+import { a as m } from "./leaveGuard-Cc8yeLxM.js";
+function d(e) {
+  const { t: a } = n(), l = u(() => (r(e.ready) ?? !0) && (r(e.allowed) ?? !0)), c = u(() => l.value && e.form.dirty.value);
+  m(() => l.value && e.form.dirty.value), s({
+    actions: () => l.value ? [
+      {
+        id: e.id ?? "save",
+        label: r(e.label) ?? a("core.actions.save"),
+        shortLabel: a("core.actions.save"),
+        icon: "save",
+        placement: "primary",
+        processing: e.form.submitting.value,
+        onClick: e.save
+      }
+    ] : [],
+    leading: () => c.value ? { id: `${e.id ?? "save"}-cancel`, label: a("core.actions.cancel"), prominence: "plain", onClick: e.cancel } : null,
+    status: () => c.value ? a("core.form.unsaved_changes") : null
+  });
+}
+export {
+  d as u
+};

package/dist/useSheetDrag-OsD6Eb6I.js

@@ -0,0 +1,72 @@
+import { ref as p, computed as S } from "vue";
+const D = 120, P = 0.5, C = 40;
+function H({ enabled: l, panel: f, body: T, onDismiss: I }) {
+  const o = p(0), n = p(!1);
+  let u = 0, s = 0, i = 0, c = 0, v = !1, a = !1;
+  function h(t, e) {
+    l.value && (u = s = t, i = performance.now(), c = 0, v = e, a = !0, n.value = !e);
+  }
+  function d(t) {
+    if (!a) return !1;
+    const e = t - u;
+    if (!n.value) {
+      const m = (T.value?.scrollTop ?? 0) <= 0;
+      if (!v || !m || e <= 0)
+        return (e < 0 || !m) && (a = !1), !1;
+      n.value = !0, u = t;
+    }
+    const g = performance.now();
+    return c = (t - s) / Math.max(g - i, 1), s = t, i = g, o.value = Math.max(0, t - u), !0;
+  }
+  async function r() {
+    if (!a || (a = !1, !n.value)) return;
+    n.value = !1;
+    const t = c > P && o.value > C;
+    if (o.value > D || t) {
+      const e = o.value;
+      if (await I()) {
+        o.value = Math.max(e, f.value?.offsetHeight ?? window.innerHeight);
+        return;
+      }
+    }
+    o.value = 0;
+  }
+  function w() {
+    a = !1, n.value = !1, o.value = 0;
+  }
+  const M = {
+    onPointerdown(t) {
+      t.button === 0 && (t.target?.closest('button, a, input, [role="button"]') || (t.currentTarget.setPointerCapture(t.pointerId), h(t.clientY, !1)));
+    },
+    onPointermove(t) {
+      if (t.buttons === 0) {
+        r();
+        return;
+      }
+      d(t.clientY);
+    },
+    onPointerup: () => void r(),
+    onPointercancel: () => void r()
+  }, b = {
+    onTouchstartPassive(t) {
+      const e = t.touches[0];
+      e && t.touches.length === 1 && h(e.clientY, !0);
+    },
+    onTouchmove(t) {
+      const e = t.touches[0];
+      e && d(e.clientY) && t.cancelable && t.preventDefault();
+    },
+    onTouchend: () => void r(),
+    onTouchcancel: () => void r()
+  }, x = S(
+    () => !l.value || o.value === 0 ? void 0 : { transform: `translateY(${o.value}px)` }
+  ), y = S(() => {
+    if (!l.value || o.value === 0) return;
+    const t = f.value?.offsetHeight || window.innerHeight;
+    return { opacity: String(Math.max(0, 1 - o.value / t)) };
+  });
+  return { dragOffset: o, dragging: n, handleEvents: M, bodyEvents: b, panelStyle: x, backdropStyle: y, reset: w };
+}
+export {
+  H as u
+};

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@wssto2/vue-core",
-  "version": "0.1.0",
+  "version": "0.3.0",
+  "goCore": "v1.6.0",
   "description": "Shared Vue 3 library for go-core applications: app shell, list / record / form pages and their controls.",
   "keywords": [
     "vue",
@@ -107,6 +108,18 @@
       "types": "./dist/phone/index.d.ts",
       "import": "./dist/phone/index.js"
     },
+    "./identity": {
+      "types": "./dist/identity/index.d.ts",
+      "import": "./dist/identity/index.js"
+    },
+    "./access": {
+      "types": "./dist/access/index.d.ts",
+      "import": "./dist/access/index.js"
+    },
+    "./testing": {
+      "types": "./dist/testing/index.d.ts",
+      "import": "./dist/testing/index.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./tailwind.css": "./src/styles/tailwind.css",
     "./fonts.css": "./src/styles/fonts.css",
@@ -119,18 +132,22 @@
     "lint": "eslint . && node scripts/check-src-imports.mjs",
     "typecheck": "vue-tsc --noEmit",
     "typecheck:docs": "vue-tsc --noEmit -p docs/examples/tsconfig.json",
+    "typecheck:fixtures": "vue-tsc --noEmit -p test-data/tsconfig.json",
     "test": "vitest run",
     "build": "vite build && vite build -c vite.styles.config.ts && vue-tsc -p tsconfig.build.json",
     "check:consumer": "node scripts/check-consumer.mjs",
-    "check": "npm run lint && npm run typecheck && npm run typecheck:docs && npm run check:docs && npm run test && npm run build && npm run check:consumer",
+    "check": "npm run lint && npm run typecheck && npm run typecheck:docs && npm run typecheck:fixtures && npm run check:modules && npm run check:docs && npm run test && npm run build && npm run check:consumer",
     "check:docs": "node scripts/check-docs.mjs",
-    "prepublishOnly": "npm run check"
+    "prepublishOnly": "npm run check",
+    "modules:sync": "node scripts/modules.mjs sync",
+    "check:modules": "node scripts/modules.mjs check"
   },
   "peerDependencies": {
+    "tailwindcss": "^4.0.0",
     "vue": "^3.5.0",
     "vue-i18n": "^10.0.0-beta.5",
     "vue-router": "^4.4.3",
-    "tailwindcss": "^4.0.0"
+    "zod": "^4.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
@@ -152,7 +169,8 @@
     "vue-eslint-parser": "^10.4.0",
     "vue-i18n": "^10.0.8",
     "vue-router": "^4.5.0",
-    "vue-tsc": "^2.2.8"
+    "vue-tsc": "^2.2.8",
+    "zod": "^4.6.5"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
@@ -163,6 +181,9 @@
   "peerDependenciesMeta": {
     "tailwindcss": {
       "optional": true
+    },
+    "zod": {
+      "optional": true
     }
   }
 }

package/src/styles/theme.css

@@ -226,6 +226,29 @@
   --app-status-neutral-surface: #F1F3F2;
   --app-status-neutral-solid: #5B6763;
 
+  /* Categories: nine hues for telling things apart (a lead's source, a kind), never for a state. Each is a
+     content / surface pair like the status roles and is checked for text contrast (AA, 4.5:1) in
+     src/state/categoryHues.test.ts. Red, green, orange-brown and sky blue belong to the status roles above,
+     so no hue here borrows them. Not for the brand to change. */
+  --app-category-amber-content: #766202;
+  --app-category-amber-surface: #F6F0DA;
+  --app-category-lime-content: #466E00;
+  --app-category-lime-surface: #EAF5E0;
+  --app-category-teal-content: #057168;
+  --app-category-teal-surface: #DBF7F3;
+  --app-category-cyan-content: #036E7F;
+  --app-category-cyan-surface: #DAF6FC;
+  --app-category-blue-content: #3260B9;
+  --app-category-blue-surface: #E9F1FE;
+  --app-category-indigo-content: #5E57B9;
+  --app-category-indigo-surface: #EEEFFF;
+  --app-category-violet-content: #7D4BAA;
+  --app-category-violet-surface: #F4ECFE;
+  --app-category-fuchsia-content: #9B4089;
+  --app-category-fuchsia-surface: #FEE9F8;
+  --app-category-pink-content: #A73967;
+  --app-category-pink-surface: #FFEAF0;
+
   /* Icon tiles: brand = the application's programmes and primary status icons
      (tile-brand above), anchor = integrations and navigation (also person and
      record avatars), neutral = system and export */
@@ -342,6 +365,25 @@
   --app-status-neutral-surface: #293530;
   --app-status-neutral-solid: #5B6763;
 
+  --app-category-amber-content: #D6BD5C;
+  --app-category-amber-surface: #362D0D;
+  --app-category-lime-content: #A4CD79;
+  --app-category-lime-surface: #253317;
+  --app-category-teal-content: #4CD7C8;
+  --app-category-teal-surface: #053631;
+  --app-category-cyan-content: #4AD2EC;
+  --app-category-cyan-surface: #04343D;
+  --app-category-blue-content: #9BBEFF;
+  --app-category-blue-surface: #202E47;
+  --app-category-indigo-content: #B4B5FF;
+  --app-category-indigo-surface: #2A2A46;
+  --app-category-violet-content: #D1A9FB;
+  --app-category-violet-surface: #342742;
+  --app-category-fuchsia-content: #EEA0DB;
+  --app-category-fuchsia-surface: #3D2437;
+  --app-category-pink-content: #FC9CBD;
+  --app-category-pink-surface: #42232E;
+
   --app-tile-neutral: #4F5B57;
 
   --app-shadow-group: 0 0 0 1px rgb(210 235 226 / 0.04);
@@ -456,6 +498,24 @@
   --color-status-neutral-content: var(--app-status-neutral-content);
   --color-status-neutral-surface: var(--app-status-neutral-surface);
   --color-status-neutral-solid: var(--app-status-neutral-solid);
+  --color-category-amber-content: var(--app-category-amber-content);
+  --color-category-amber-surface: var(--app-category-amber-surface);
+  --color-category-lime-content: var(--app-category-lime-content);
+  --color-category-lime-surface: var(--app-category-lime-surface);
+  --color-category-teal-content: var(--app-category-teal-content);
+  --color-category-teal-surface: var(--app-category-teal-surface);
+  --color-category-cyan-content: var(--app-category-cyan-content);
+  --color-category-cyan-surface: var(--app-category-cyan-surface);
+  --color-category-blue-content: var(--app-category-blue-content);
+  --color-category-blue-surface: var(--app-category-blue-surface);
+  --color-category-indigo-content: var(--app-category-indigo-content);
+  --color-category-indigo-surface: var(--app-category-indigo-surface);
+  --color-category-violet-content: var(--app-category-violet-content);
+  --color-category-violet-surface: var(--app-category-violet-surface);
+  --color-category-fuchsia-content: var(--app-category-fuchsia-content);
+  --color-category-fuchsia-surface: var(--app-category-fuchsia-surface);
+  --color-category-pink-content: var(--app-category-pink-content);
+  --color-category-pink-surface: var(--app-category-pink-surface);
 
   --color-tile-brand: var(--app-tile-brand);
   --color-tile-brand-foreground: var(--app-tile-brand-foreground);

package/dist/Badge.vue_vue_type_script_setup_true_lang-DKc6ugmr.js

@@ -1,31 +0,0 @@
-import { defineComponent as c, openBlock as n, createElementBlock as s, normalizeClass as a, createCommentVNode as u, renderSlot as d } from "vue";
-const l = /* @__PURE__ */ c({
-  __name: "Badge",
-  props: {
-    tone: { default: "neutral" },
-    dot: { type: Boolean, default: !1 }
-  },
-  setup(o) {
-    const t = o, e = {
-      neutral: { badge: "bg-status-neutral-surface text-status-neutral-content", dot: "bg-status-neutral-content" },
-      info: { badge: "bg-status-info-surface text-status-info-content", dot: "bg-status-info-content" },
-      positive: { badge: "bg-status-success-surface text-status-success-content", dot: "bg-status-success-content" },
-      warning: { badge: "bg-status-warning-surface text-status-warning-content", dot: "bg-status-warning-content" },
-      critical: { badge: "bg-status-danger-surface text-status-danger-content", dot: "bg-status-danger-content" },
-      context: { badge: "bg-surface-cell text-content", dot: "bg-content-disabled" }
-    };
-    return (r, g) => (n(), s("span", {
-      class: a(["inline-flex items-center gap-x-1.5 whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset ring-current/20", e[t.tone].badge])
-    }, [
-      t.dot ? (n(), s("span", {
-        key: 0,
-        class: a(["size-1.5 shrink-0 rounded-full", e[t.tone].dot]),
-        "aria-hidden": "true"
-      }, null, 2)) : u("", !0),
-      d(r.$slots, "default")
-    ], 2));
-  }
-});
-export {
-  l as _
-};

package/dist/Button.vue_vue_type_script_setup_true_lang-3f0emVNU.js

@@ -1,141 +0,0 @@
-import { watchEffect as E, toValue as z, defineComponent as L, useSlots as S, useTemplateRef as B, computed as m, openBlock as v, createBlock as I, unref as N, withCtx as R, createElementVNode as T, mergeProps as g, createVNode as y, createElementBlock as k, h as x } from "vue";
-import { RouterLink as V } from "vue-router";
-import { _ as h } from "./Icon.vue_vue_type_script_lang-DtC4_mkz.js";
-import { u as D } from "./useWaitStatus-fsacMl4W.js";
-function M(t, o) {
-  return t.key.toLowerCase() === o.key.toLowerCase() && t.ctrlKey === (o.ctrlKey ?? !1) && t.shiftKey === (o.shiftKey ?? !1) && t.altKey === (o.altKey ?? !1) && t.metaKey === (o.metaKey ?? !1);
-}
-function P(t) {
-  return t instanceof HTMLElement && (t.isContentEditable || /^(input|textarea|select)$/i.test(t.tagName));
-}
-function $(t, o) {
-  E((e) => {
-    const i = z(t);
-    if (!i) return;
-    const c = (n) => {
-      n.repeat || !M(n, i) || !(i.ctrlKey || i.altKey || i.metaKey) && P(n.target) || o(n) !== !1 && n.preventDefault();
-    };
-    window.addEventListener("keydown", c), e(() => window.removeEventListener("keydown", c));
-  });
-}
-const j = ["href", "tabindex", "onClick"], H = ["href", "tabindex"], O = ["type", "disabled"], F = /* @__PURE__ */ L({
-  __name: "Button",
-  props: {
-    prominence: { default: "standard" },
-    tone: { default: void 0 },
-    size: { default: "md" },
-    icon: { default: void 0 },
-    trailingIcon: { default: void 0 },
-    to: { default: void 0 },
-    href: { default: void 0 },
-    type: { default: "button" },
-    disabled: { type: Boolean, default: !1 },
-    processing: { type: Boolean, default: !1 },
-    keyboardShortcut: { default: void 0 }
-  },
-  emits: ["click"],
-  setup(t, { emit: o }) {
-    const e = t, i = o, c = S(), n = B("element"), _ = D(() => e.processing), a = m(() => e.disabled || e.processing);
-    function u(s, r) {
-      if (a.value) {
-        s.preventDefault();
-        return;
-      }
-      i("click", s), r?.(s);
-    }
-    $(() => e.keyboardShortcut, (s) => {
-      if (a.value || n.value?.closest("[inert]")) return !1;
-      i("click", s);
-    });
-    const w = {
-      primary: {
-        default: "bg-tint text-content-on-tint hover:bg-tint/90 active:bg-tint/80",
-        critical: "bg-status-danger-solid text-white hover:brightness-110"
-      },
-      secondary: {
-        default: "bg-tint-soft text-content-link hover:brightness-95 dark:hover:brightness-125",
-        critical: "bg-status-danger-surface text-content-destructive hover:brightness-95 dark:hover:brightness-125"
-      },
-      standard: {
-        default: "bg-fill text-content-strong hover:bg-fill-strong",
-        critical: "bg-fill text-content-destructive hover:bg-fill-strong"
-      },
-      plain: {
-        default: "bg-transparent text-content-link hover:bg-tint-soft",
-        critical: "bg-transparent text-content-destructive hover:bg-status-danger-surface"
-      },
-      link: {
-        default: "bg-transparent text-content-link hover:underline",
-        critical: "bg-transparent text-content-destructive hover:underline"
-      }
-    }, d = {
-      xs: { box: "min-h-6 px-2.5 py-0.5 text-xs gap-1", icon: 12 },
-      sm: { box: "min-h-8 px-3 py-1 text-xs gap-1.5", icon: 14 },
-      md: { box: "min-h-9 px-4 py-1.5 text-sm gap-2", icon: 16 },
-      lg: { box: "min-h-11 px-5 py-2 text-base gap-2", icon: 20 },
-      xl: { box: "min-h-12 px-6 py-2.5 text-base gap-2.5", icon: 22 }
-    }, f = m(() => [
-      "hit-target flex cursor-pointer select-none items-center justify-center rounded-button text-center font-semibold",
-      "transition duration-motion-fast ease-motion-standard",
-      "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
-      w[e.prominence][e.tone ?? "default"],
-      d[e.size].box,
-      // aria-disabled covers links, which have no `disabled` attribute.
-      e.processing && !e.disabled ? "cursor-progress" : "disabled:cursor-not-allowed disabled:opacity-45 aria-disabled:cursor-not-allowed aria-disabled:opacity-45"
-    ]), p = m(() => ({
-      "aria-disabled": a.value || void 0,
-      "aria-busy": e.processing || void 0
-    })), b = () => [
-      e.processing && _.visible.value ? x(h, { name: "loader4Line", size: d[e.size].icon, class: "animate-spin", "data-test": "button-spinner" }) : e.icon ? x(h, { name: e.icon, size: d[e.size].icon }) : null,
-      c.default?.(),
-      e.trailingIcon ? x(h, { name: e.trailingIcon, size: d[e.size].icon }) : null
-    ];
-    return (s, r) => e.to !== void 0 ? (v(), I(N(V), {
-      key: 0,
-      to: e.to,
-      custom: ""
-    }, {
-      default: R(({ href: l, navigate: C }) => [
-        T("a", g({
-          ref_key: "element",
-          ref: n,
-          href: a.value ? void 0 : l,
-          class: f.value
-        }, p.value, {
-          tabindex: a.value ? -1 : void 0,
-          onClick: (K) => u(K, C)
-        }), [
-          y(b)
-        ], 16, j)
-      ]),
-      _: 1
-    }, 8, ["to"])) : e.href !== void 0 ? (v(), k("a", g({
-      key: 1,
-      ref_key: "element",
-      ref: n,
-      href: a.value ? void 0 : e.href,
-      class: f.value
-    }, p.value, {
-      tabindex: a.value ? -1 : void 0,
-      onClick: r[0] || (r[0] = (l) => u(l))
-    }), [
-      y(b)
-    ], 16, H)) : (v(), k("button", g({
-      key: 2,
-      ref_key: "element",
-      ref: n,
-      type: e.type,
-      class: f.value,
-      disabled: a.value
-    }, p.value, {
-      onClick: r[1] || (r[1] = (l) => u(l))
-    }), [
-      y(b)
-    ], 16, O));
-  }
-});
-export {
-  F as _,
-  M as m,
-  $ as u
-};