@jskit-ai/payments-web 0.2.9 → 0.2.11

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- Plans show as filled Material 3 cards (`surface-container-highest`) instead of bordered boxes.
+
 ## 0.2.0 - 2026-10-29
 
 - Translation ready: every user-visible text is a message key with its English in `locales/en.json`, so an app translates it by supplying translation files only. With no translations, texts and behaviour are unchanged. See the guide "Translating a JSKIT app".

package/README.md

@@ -144,7 +144,7 @@ loading behavior. A separate browser fixture uses real Vuetify and controlled
 component inputs, without a generated application or provider connection:
 
 ```sh
-JSKIT_PAYMENTS_WEB_BROWSER_INTEGRATION=1 node --test --test-concurrency=1 packages/payments-web/test/paymentAccount.browser.test.js
+JSKIT_PAYMENTS_WEB_BROWSER_INTEGRATION=1 npx jskit test packages/payments-web/test/paymentAccount.browser.test.js
 ```
 
 Run that command from the JSKIT repository root with its prepared browser tools.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/payments-web",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "type": "module",
   "description": "Application-owned billing views for JSKIT Vue applications.",
   "exports": {
@@ -8,7 +8,7 @@
     "./locales/en.json": "./locales/en.json"
   },
   "peerDependencies": {
-    "@jskit-ai/kernel": "0.2.9",
+    "@jskit-ai/kernel": "0.2.11",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0"
   },
@@ -28,6 +28,6 @@
     }
   },
   "scripts": {
-    "test": "node --test --test-concurrency=1"
+    "test": "jskit test"
   }
 }

package/src/client/components/PaymentAccount.vue

@@ -127,13 +127,13 @@ function loadHistory(collection, after = null) {
 <style scoped>
 .payment-account { min-width: 0; overflow-wrap: anywhere; }
 .payment-account__summary { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0 0 1rem; }
-.payment-account__summary dt { font-weight: 600; }
+.payment-account__summary dt { font-weight: 500; }
 .payment-account__summary dd { margin: .25rem 0 0; }
 .payment-account__subscriptions { list-style: none; padding: 0; }
 .payment-account__subscriptions li { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding-block: .5rem; }
 .payment-account__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
 .payment-account__plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; padding: 0; list-style: none; }
-.payment-account__plan { min-width: 0; padding: 1rem; border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); border-radius: 12px; }
+.payment-account__plan { min-width: 0; padding: 1rem; border-radius: 12px; background: rgb(var(--v-theme-surface-container-highest)); }
 .payment-account :deep(.v-list-item-title), .payment-account :deep(.v-list-item-subtitle) { white-space: normal; overflow-wrap: anywhere; }
 .payment-account :deep(.v-btn) { min-height: 48px; max-width: 100%; height: auto; white-space: normal; }
 .payment-account :deep(.v-btn__content) { white-space: normal; }

package/test/paymentAccount.browser.test.js

@@ -1,16 +1,16 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { fileURLToPath } from "node:url";
-import { chromium, expect } from "@playwright/test";
-import { createChromiumLaunchOptions, startViteFixture, stopProcess } from "../../../tooling/testUtils/browserFixture.mjs";
+import { expect } from "@playwright/test";
+import { sharedBrowserFixture } from "../../../tooling/testUtils/browserFixture.mjs";
+
+const openFixture = sharedBrowserFixture({ fixtureRoot: fileURLToPath(new URL("../fixtures/payment-account/", import.meta.url)) });
 
 test("billing component supports responsive layout, keyboard actions and recoverable states", {
   skip: process.env.JSKIT_PAYMENTS_WEB_BROWSER_INTEGRATION !== "1", timeout: 120_000
-}, async () => {
-  const runtime = await startViteFixture({ fixtureRoot: fileURLToPath(new URL("../fixtures/payment-account/", import.meta.url)) });
-  let browser;
+}, async (t) => {
+  const { vite: runtime, browser } = await openFixture(t);
   try {
-    browser = await chromium.launch(createChromiumLaunchOptions());
     const page = await browser.newPage();
     const errors = [];
     page.on("pageerror", (error) => errors.push(error.message));
@@ -62,7 +62,6 @@ test("billing component supports responsive layout, keyboard actions and recover
     await expect(billing.getByRole("button")).toHaveCount(0);
     assert.deepEqual(errors, []);
   } finally {
-    await browser?.close();
-    await stopProcess(runtime);
+    await browser.close();
   }
 });