@wssto2/vue-core 0.1.0 → 0.2.0

package/dist/testing/index.d.ts

@@ -0,0 +1,14 @@
+export { deferred, settle } from "./async";
+export type { Deferred } from "./async";
+export { createTestApp, stubRoutes, withSetup } from "./app";
+export type { TestApp, TestAppOptions } from "./app";
+export { fakeLoader, listPage } from "./collection";
+export { testFormatting } from "./format";
+export { createTestI18n } from "./i18n";
+export type { TestI18nOptions, TestMessages } from "./i18n";
+export { mockMedia } from "./media";
+export type { MediaState } from "./media";
+export { createTestPlatform, createTestSession, heldAccess } from "./platform";
+export type { TestPlatformOptions, TestSessionOptions } from "./platform";
+export { jsonResponse, routedTransport, scriptedTransport } from "./transport";
+export type { Answer, RecordedCall } from "./transport";

package/dist/testing/index.js

@@ -0,0 +1,178 @@
+import { nextTick as b, createApp as j, defineComponent as m, h as u } from "vue";
+import { createMemoryHistory as P, createRouter as E, RouterView as $ } from "vue-router";
+import { a as A, i as O } from "../platform-jqlKVJ2e.js";
+import { createI18n as k } from "vue-i18n";
+import { coreMessages as M } from "../i18n/index.js";
+import { i as R, c as S } from "../format-B8mJm946.js";
+function K() {
+  let e, t;
+  return { promise: new Promise((s, r) => {
+    e = s, t = r;
+  }), resolve: e, reject: t };
+}
+async function Q(e = 5) {
+  for (let t = 0; t < e; t++)
+    await new Promise((n) => setTimeout(n, 0)), await b();
+}
+const f = (e) => typeof e == "object" && e !== null && !Array.isArray(e);
+function g(e, t) {
+  const n = { ...e };
+  for (const [s, r] of Object.entries(t)) {
+    const a = n[s];
+    n[s] = f(r) && f(a) ? g(a, r) : r;
+  }
+  return n;
+}
+function x(e = {}) {
+  const t = { ...M };
+  for (const [n, s] of Object.entries(e.messages ?? {})) t[n] = g(t[n] ?? {}, s);
+  return k({ legacy: !1, locale: e.locale ?? "en", fallbackLocale: "en", messages: t });
+}
+function L(e) {
+  return { install: (t) => R(t, S({ locale: () => e.global.locale.value })) };
+}
+function C(e, t, n = "all", s) {
+  const r = t === void 0 ? { level: e } : { level: e, id: t };
+  return { scope: r, qualifier: n, clauses: s ?? [{ scope: r, qualifier: n }] };
+}
+function B(e = {}) {
+  const { permissions: t = [] } = e, n = Array.isArray(t) ? Object.fromEntries(t.map((r) => [r, C("organization")])) : { ...t }, s = { root: e.root ?? !1, permissions: n, unavailable: e.unavailable ?? [] };
+  return {
+    user: e.user ?? { id: 1 },
+    expiresAt: e.expiresAt ?? null,
+    access: s,
+    ...e.navigation ? { navigation: e.navigation } : {}
+  };
+}
+const F = async (e, t) => {
+  throw new Error(`createTestPlatform: an unexpected request ${(t.method ?? "GET").toUpperCase()} ${e}. Pass a \`transport\` that answers it (scriptedTransport or routedTransport).`);
+};
+function U(e = {}) {
+  const { user: t, permissions: n, unavailable: s, root: r, navigation: a, expiresAt: o, transport: c, config: i, session: l, ...T } = e, p = t === null ? null : B({ user: t, permissions: n, unavailable: s, root: r, navigation: a, expiresAt: o }), y = l ?? { load: async () => p, signOut: async () => {
+  } }, d = A({
+    ...T,
+    config: { apiBase: "", locale: "en", appName: "Test app", capabilities: [], ...i },
+    transport: c ?? F,
+    session: y
+  });
+  return !l && p && d.session.establish(p), d;
+}
+const z = m({ name: "TestBlankPage", render: () => u("div") }), h = m({ name: "TestRouteStub", render: () => u("div", [u($)]) });
+function G(e) {
+  return e.map((t) => {
+    const { component: n, components: s, children: r, ...a } = t, o = { ...a };
+    return r && (o.children = G(r)), s ? o.components = Object.fromEntries(Object.keys(s).map((c) => [c, h])) : n !== void 0 && (o.component = h), o;
+  });
+}
+function H(e = {}) {
+  const t = e.platform ?? U();
+  let n = e.router;
+  if (!n) {
+    const a = P();
+    a.replace(e.location ?? "/"), n = E({ history: a, routes: [...e.routes ?? [{ path: "/:pathMatch(.*)*", component: z }]] });
+  }
+  const s = x({ locale: e.locale, messages: e.messages });
+  return { plugins: [n, s, L(s), { install: (a) => O(a, t) }, ...e.plugins ?? []], platform: t, router: n, i18n: s };
+}
+function W(e, t = H()) {
+  let n;
+  const s = j(
+    m({
+      setup() {
+        return n = e(), () => u("div");
+      }
+    })
+  );
+  for (const r of t.plugins) s.use(r);
+  return s.mount(document.createElement("div")), { result: n, app: s, unmount: () => s.unmount() };
+}
+function X(e, t = {}) {
+  return {
+    rows: e,
+    total: e.length,
+    page: 1,
+    pageSize: 25,
+    lastPage: e.length === 0 ? 0 : 1,
+    from: e.length === 0 ? 0 : 1,
+    to: e.length,
+    ...t
+  };
+}
+function Y(e) {
+  const t = [];
+  return { load: (s, r) => (t.push({ query: s, signal: r.signal }), Promise.resolve(e(s, r, t.length))), calls: t };
+}
+function Z(e = {}) {
+  const t = { compact: !1, narrow: !1, reducedMotion: !1, standalone: !1, ...e }, n = window.matchMedia, s = /* @__PURE__ */ new Set(), r = (o) => o.includes("prefers-reduced-motion") ? t.reducedMotion : o.includes("display-mode: standalone") ? t.standalone : o.includes("min-width: 48rem") ? !t.compact : o.includes("max-width: 1023px") ? t.narrow || t.compact : o.includes("pointer: coarse") || o.includes("max-width: 47.999rem") ? t.compact : !1, a = (o) => o.split(",").some(r);
+  return window.matchMedia = ((o) => {
+    const c = { query: o, last: a(o), listeners: /* @__PURE__ */ new Set() };
+    return s.add(c), {
+      media: o,
+      get matches() {
+        return a(o);
+      },
+      addEventListener: (i, l) => c.listeners.add(l),
+      removeEventListener: (i, l) => c.listeners.delete(l)
+    };
+  }), {
+    state: t,
+    set(o) {
+      Object.assign(t, o);
+      for (const c of s) {
+        const i = a(c.query);
+        i !== c.last && (c.last = i, c.listeners.forEach((l) => l()));
+      }
+    },
+    restore() {
+      window.matchMedia = n;
+    }
+  };
+}
+const q = (e, t, n = {}) => new Response(t === void 0 ? null : JSON.stringify(t), { status: e, headers: { "Content-Type": "application/json", ...n } }), w = (e, t) => ({
+  url: e,
+  method: (t.method ?? "GET").toUpperCase(),
+  headers: new Headers(t.headers),
+  init: t
+});
+async function v(e, t) {
+  if (e instanceof Error) throw e;
+  return typeof e == "function" ? e(t) : e.clone();
+}
+function ee(...e) {
+  const t = [], n = [...e];
+  return { transport: async (r, a) => {
+    const o = w(r, a);
+    t.push(o);
+    const c = n.length > 1 ? n.shift() : n[0];
+    if (c === void 0) throw new Error("scriptedTransport: no answer left");
+    return v(c, o);
+  }, calls: t };
+}
+function te(e) {
+  const t = [];
+  return { transport: async (s, r) => {
+    const a = w(s, r);
+    t.push(a);
+    const { pathname: o, search: c } = new URL(s, "http://test.invalid"), i = e[`${a.method} ${o}${c}`] ?? e[`${a.method} ${o}`];
+    if (i === void 0) throw new Error(`routedTransport: no route for ${a.method} ${o}${c}; it has ${Object.keys(e).join(", ") || "none"}`);
+    return v(i, a);
+  }, calls: t };
+}
+export {
+  H as createTestApp,
+  x as createTestI18n,
+  U as createTestPlatform,
+  B as createTestSession,
+  K as deferred,
+  Y as fakeLoader,
+  C as heldAccess,
+  q as jsonResponse,
+  X as listPage,
+  Z as mockMedia,
+  te as routedTransport,
+  ee as scriptedTransport,
+  Q as settle,
+  G as stubRoutes,
+  L as testFormatting,
+  W as withSetup
+};

package/dist/testing/media.d.ts

@@ -0,0 +1,23 @@
+/** What the mocked `matchMedia` answers. */
+export interface MediaState {
+    /** Phones and touch-first screens (the `compact:` condition). */
+    compact: boolean;
+    /** Below 1024 px, phones and tablets: where lists turn into phone rows. */
+    narrow: boolean;
+    reducedMotion: boolean;
+    /** Running as an installed app (`display-mode: standalone`). */
+    standalone: boolean;
+}
+/**
+ * Replaces `window.matchMedia` for a test: the library's conditions (compact, narrow, reduced motion, standalone) are answered from
+ * `state`, everything else is false. Change `state` through `set` to fire `change` listeners.
+ * Returns `restore`: call it in `afterEach`.
+ *
+ *   const media = mockMedia({ compact: true });
+ *   afterEach(() => media.restore());
+ */
+export declare function mockMedia(initial?: Partial<MediaState>): {
+    state: MediaState;
+    set(next: Partial<MediaState>): void;
+    restore(): void;
+};

package/dist/testing/platform.d.ts

@@ -0,0 +1,40 @@
+import { type AccessClause, type AccessQualifier, type BootstrapConfig, type HeldAccess, type NavigationNode, type Platform, type PlatformOptions, type SessionAdapter, type SessionSnapshot, type SessionUser } from "../platform";
+import type { Transport } from "../client";
+/**
+ * How a permission is held: at a level of your scope hierarchy (`organization`, `dealer`, ...) with an
+ * optional id, for `all` records, only the user's `own` or those of their `own_location`. For the
+ * `permissions` record of `createTestSession`; a plain permission name there means "everything, at the organization".
+ */
+export declare function heldAccess(level: string, id?: number, qualifier?: AccessQualifier, clauses?: readonly AccessClause[]): HeldAccess;
+export interface TestSessionOptions<U extends SessionUser = SessionUser> {
+    /** Default `{ id: 1 }`. */
+    user?: U;
+    /** Permissions held at the organization for every record (names), or exactly how each is held (`heldAccess`). */
+    permissions?: readonly string[] | Readonly<Record<string, HeldAccess>>;
+    /** Granted by a role but switched off for the tenant: not held. */
+    unavailable?: readonly string[];
+    /** Some binding is at the root scope. */
+    root?: boolean;
+    navigation?: readonly NavigationNode[];
+    expiresAt?: Date | null;
+}
+/** What `/auth/me` would say for a user: for `session.establish(...)` mid-test, or an adapter that answers it. */
+export declare function createTestSession<U extends SessionUser = SessionUser>(options?: TestSessionOptions<U>): SessionSnapshot<U>;
+export interface TestPlatformOptions<U extends SessionUser = SessionUser> extends Omit<TestSessionOptions<U>, "user">, Omit<PlatformOptions<U, BootstrapConfig>, "config" | "transport" | "session"> {
+    /** `null`: nobody is signed in (the session answers "none" when asked). Default: the user of `createTestSession`. */
+    user?: U | null;
+    /** Answers the requests the code under test makes: `scriptedTransport` or `routedTransport`. Default: any request fails the test. */
+    transport?: Transport;
+    /** Fields of the bootstrap config over the test's (`apiBase: ""`, `locale: "en"`, `appName: "Test app"`). */
+    config?: Partial<BootstrapConfig>;
+    /** A session adapter of your own; then `user`, `permissions` and the like are not used and the session starts unasked. */
+    session?: SessionAdapter<U>;
+}
+/**
+ * A platform for a test: an HTTP client over a fake transport, a session that is already signed in
+ * (no request) and the access it grants. Independent of every other platform, as production's.
+ *
+ *   const platform = createTestPlatform({ user: { id: 7 }, permissions: ["tickets:view"], transport });
+ *   platform.access.can("tickets:view"); // true, at once
+ */
+export declare function createTestPlatform<U extends SessionUser = SessionUser>(options?: TestPlatformOptions<U>): Platform<U>;

package/dist/testing/transport.d.ts

@@ -0,0 +1,40 @@
+import type { Transport } from "../client";
+/** One request a fake transport received. */
+export interface RecordedCall {
+    /** The URL as the client sent it, with the API base and the query string. */
+    readonly url: string;
+    /** Upper case; `GET` when the client set none. */
+    readonly method: string;
+    readonly headers: Headers;
+    /** The request as `fetch` received it (body, signal). */
+    readonly init: RequestInit;
+}
+/** What a fake transport answers: a response (served again for every matching call), a failure to throw, or a function of the call. */
+export type Answer = Response | Error | ((call: RecordedCall) => Response | Promise<Response>);
+/** A JSON response, as go-core answers: `jsonResponse(404, { error: "…" })`. A body of `undefined` is an empty one (204). */
+export declare const jsonResponse: (status: number, body?: unknown, headers?: Record<string, string>) => Response;
+/**
+ * A transport answering from a queue, one answer per call in order (the last one repeats), and
+ * recording what it was sent. For a test about a sequence: a retry, a 401 then a renewal, a race.
+ *
+ *   const { transport, calls } = scriptedTransport(jsonResponse(503, {}), jsonResponse(200, { id: 1 }));
+ */
+export declare function scriptedTransport(...answers: Answer[]): {
+    transport: Transport;
+    calls: RecordedCall[];
+};
+/**
+ * A transport answering by route, whatever the order: keys are `"METHOD /path"` (the path with the
+ * API base, the query string optional: `"GET /api/v1/tickets"` matches `/api/v1/tickets?page=2` unless a
+ * key with that exact query exists). A request nothing matches fails the test with the routes it
+ * knows, so a view that asks for something unexpected is never answered by accident.
+ *
+ *   const { transport, calls } = routedTransport({
+ *     "GET /tickets": jsonResponse(200, { data: [] }),
+ *     "POST /tickets": (call) => jsonResponse(201, { id: 7 }),
+ *   });
+ */
+export declare function routedTransport(routes: Readonly<Record<string, Answer>>): {
+    transport: Transport;
+    calls: RecordedCall[];
+};

package/dist/{toast-BTeX0r66.js → toast-DvrHQ6Ag.js}

@@ -1,77 +1,79 @@
-import { defineComponent as A, useId as D, ref as c, watch as W, nextTick as P, onUnmounted as F, computed as U, openBlock as m, createElementBlock as w, normalizeClass as f, createElementVNode as j, renderSlot as $, createVNode as G, Transition as H, withCtx as K, normalizeStyle as B, unref as n, createCommentVNode as C } from "vue";
-import { f as I } from "./useDialog-wmyNx2j_.js";
-import { u as M, a as p } from "./anchored-Cj4--8dT.js";
-import { toast as i } from "vue-sonner";
-const q = ["aria-label"], L = 12, J = 640, ee = /* @__PURE__ */ A({
+import { defineComponent as D, useId as F, ref as c, watch as B, nextTick as C, onUnmounted as M, computed as U, openBlock as m, createElementBlock as w, normalizeClass as f, createElementVNode as j, renderSlot as $, createVNode as G, Transition as H, withCtx as K, normalizeStyle as P, unref as n, createCommentVNode as I } from "vue";
+import { f as L } from "./useDialog-CXR3hN0G.js";
+import { u as q, a as p } from "./anchored-Cj4--8dT.js";
+import { toast as l } from "vue-sonner";
+const J = ["aria-label"], N = 12, Q = 640, te = /* @__PURE__ */ D({
   __name: "Popover",
   props: {
     label: {},
     placement: { default: "bottom" },
     width: { default: "lg" },
     arrow: { type: Boolean, default: !0 },
+    matchTriggerWidth: { type: Boolean, default: !1 },
     block: { type: Boolean, default: !1 },
     autofocus: { type: Boolean, default: !0 }
   },
   emits: ["presented", "dismissed"],
-  setup(t, { expose: o, emit: N }) {
-    const s = t, v = N, O = { sm: "w-56", md: "w-72", lg: "w-80", auto: "w-max" }, h = `popover-${D()}`, a = c(!1), l = c(null), d = c(null), y = c(null), { style: S, arrowStyle: z, resolvedPlacement: u } = M(d, {
-      reference: () => l.value?.firstElementChild ?? l.value,
+  setup(t, { expose: o, emit: O }) {
+    const s = t, v = O, R = { sm: "w-56", md: "w-72", lg: "w-80", auto: "w-max" }, h = `popover-${F()}`, a = c(!1), i = c(null), d = c(null), g = c(null), { style: S, arrowStyle: z, resolvedPlacement: u } = q(d, {
+      reference: () => i.value?.firstElementChild ?? i.value,
       placement: () => s.placement,
       offset: 10,
-      padding: L,
-      arrow: y,
-      fit: (e, T) => {
-        Object.assign(e.style, window.innerWidth < J ? { width: `${window.innerWidth - L * 2}px`, maxWidth: "" } : { width: "", maxWidth: `${Math.max(0, T.width)}px` });
+      padding: N,
+      arrow: g,
+      fit: (e, _) => {
+        const T = i.value?.firstElementChild ?? i.value;
+        Object.assign(e.style, window.innerWidth < Q ? { width: `${window.innerWidth - N * 2}px`, maxWidth: "", minWidth: "" } : { width: "", maxWidth: `${Math.max(0, _.width)}px`, minWidth: s.matchTriggerWidth && T ? `${Math.round(T.getBoundingClientRect().width)}px` : "" });
       }
     });
-    function g() {
+    function y() {
       a.value || (a.value = !0, v("presented"));
     }
     function r(e = !1) {
-      a.value && (a.value = !1, v("dismissed"), e && P(() => I(l.value)[0]?.focus()));
+      a.value && (a.value = !1, v("dismissed"), e && C(() => L(i.value)[0]?.focus()));
     }
     function x() {
-      a.value ? r() : g();
+      a.value ? r() : y();
     }
     function b(e) {
       e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), r(!0));
     }
     function k(e) {
-      return e instanceof Node && (!!d.value?.contains(e) || !!l.value?.contains(e));
+      return e instanceof Node && (!!d.value?.contains(e) || !!i.value?.contains(e));
     }
     function E(e) {
       k(e.target) || r();
     }
-    function R(e) {
+    function V(e) {
       e.relatedTarget && !k(e.relatedTarget) && r();
     }
-    W(d, (e) => {
-      e && s.autofocus && P(() => (I(e)[0] ?? e).focus({ preventScroll: !0 }));
+    B(d, (e) => {
+      e && s.autofocus && C(() => (L(e)[0] ?? e).focus({ preventScroll: !0 }));
     });
-    function _() {
+    function W() {
       window.removeEventListener("keydown", b, !0), document.removeEventListener("pointerdown", E, !0);
     }
-    W(a, (e) => {
-      e ? (window.addEventListener("keydown", b, !0), document.addEventListener("pointerdown", E, !0)) : _();
-    }), F(_);
-    const V = U(() => ({
+    B(a, (e) => {
+      e ? (window.addEventListener("keydown", b, !0), document.addEventListener("pointerdown", E, !0)) : W();
+    }), M(W);
+    const A = U(() => ({
       "aria-expanded": a.value,
       "aria-haspopup": "dialog",
       "aria-controls": h
     }));
-    return o({ present: g, dismiss: () => r(), toggle: x }), (e, T) => (m(), w("span", {
+    return o({ present: y, dismiss: () => r(), toggle: x }), (e, _) => (m(), w("span", {
       class: f(s.block ? "flex w-full" : "inline-flex"),
-      onFocusout: R
+      onFocusout: V
     }, [
       j("span", {
         ref_key: "anchor",
-        ref: l,
+        ref: i,
         class: f(s.block ? "flex w-full" : "inline-flex")
       }, [
         $(e.$slots, "trigger", {
           presented: a.value,
           toggle: x,
-          attrs: V.value
+          attrs: A.value
         })
       ], 2),
       G(H, {
@@ -89,8 +91,8 @@ const q = ["aria-label"], L = 12, J = 640, ee = /* @__PURE__ */ A({
             role: "dialog",
             "aria-label": s.label,
             tabindex: "-1",
-            class: f(["z-1000 rounded-menu bg-surface-overlay p-3 text-content-strong shadow-float outline-none", O[s.width]]),
-            style: B(n(S))
+            class: f(["z-1000 rounded-menu bg-surface-overlay p-3 text-content-strong shadow-float outline-none", R[s.width]]),
+            style: P(n(S))
           }, [
             $(e.$slots, "default", {
               dismiss: () => r(!0)
@@ -98,7 +100,7 @@ const q = ["aria-label"], L = 12, J = 640, ee = /* @__PURE__ */ A({
             s.arrow ? (m(), w("span", {
               key: 0,
               ref_key: "arrowEl",
-              ref: y,
+              ref: g,
               "aria-hidden": "true",
               class: f(["absolute size-2.5 rotate-45 bg-surface-overlay", {
                 "-bottom-[5px]": n(p)(n(u)) === "bottom",
@@ -106,24 +108,24 @@ const q = ["aria-label"], L = 12, J = 640, ee = /* @__PURE__ */ A({
                 "-left-[5px]": n(p)(n(u)) === "left",
                 "-right-[5px]": n(p)(n(u)) === "right"
               }]),
-              style: B(n(z))
-            }, null, 6)) : C("", !0)
-          ], 14, q)) : C("", !0)
+              style: P(n(z))
+            }, null, 6)) : I("", !0)
+          ], 14, J)) : I("", !0)
         ]),
         _: 3
       })
     ], 34));
   }
-}), te = {
-  success: (t, o) => i.success(t, o),
-  info: (t, o) => i.info(t, o),
-  warning: (t, o) => i.warning(t, o),
-  error: (t, o) => i.error(t, o),
-  loading: (t, o) => i.loading(t, o),
+}), oe = {
+  success: (t, o) => l.success(t, o),
+  info: (t, o) => l.info(t, o),
+  warning: (t, o) => l.warning(t, o),
+  error: (t, o) => l.error(t, o),
+  loading: (t, o) => l.loading(t, o),
   /** Dismisses one toast, or all of them without an id. */
-  dismiss: (t) => void i.dismiss(t)
+  dismiss: (t) => void l.dismiss(t)
 };
 export {
-  ee as _,
-  te as t
+  te as _,
+  oe as t
 };

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wssto2/vue-core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Shared Vue 3 library for go-core applications: app shell, list / record / form pages and their controls.",
   "keywords": [
     "vue",
@@ -107,6 +107,10 @@
       "types": "./dist/phone/index.d.ts",
       "import": "./dist/phone/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",

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 _
-};