@jskit-ai/users-web 0.2.16 → 0.2.18

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+- The account settings page and the account-settings pattern's sections sit directly on the page, without bordered sheets, and the section list has no extra border or tint.
+- The account settings page has no in-page title or Back button: it gives the shell's top app bar its title (`useShellPageTitle`) and a Done action (`ShellPageAction`) that returns to `returnTo`, another of the app's origins included, as Back did. Message keys: `jskit.users.accountSettings.back` is removed and `jskit.users.accountSettings.done` ("Done") is new. The pattern's section buttons no longer set a fixed height; they are Material 3's 40dp buttons inside material-web's 48dp touch target.
+- Account settings text uses Vuetify 4's Material 3 type classes (`text-body-medium`, `text-title-large`, ...) instead of Material 2 ones, which Vuetify 4 no longer styles, and the account settings page pattern declares its title and its parent (the home surface's root). Upgrading: see the guide's [Move an app to the Material 3 defaults](https://mobily-enterprises.github.io/jskit-ai/guide/app-setup/material-3-migration).
+
 ## 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/fixtures/account-settings/main.js

@@ -2,10 +2,11 @@ import { createApp, h, reactive, ref, shallowReactive } from "vue";
 import { createRouter, createWebHistory, RouterView } from "vue-router";
 import { QueryClient, VueQueryPlugin } from "@tanstack/vue-query";
 import "vuetify/styles";
+import "@jskit-ai/material-web/client/material.css";
+import { createMaterialVuetifyOptions } from "@jskit-ai/material-web/client";
 import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
-import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
 import { SHELL_WEB_ERROR_RUNTIME_KEY } from "@jskit-ai/shell-web/client/error";
 import { SHELL_WEB_PLACEMENT_RUNTIME_KEY } from "@jskit-ai/shell-web/client/placement";
 import AccountSettingsClientElement from "../../src/client/components/AccountSettingsClientElement.vue";
@@ -135,6 +136,6 @@ app.provide(SHELL_WEB_PLACEMENT_RUNTIME_KEY, placement);
 app.provide(SHELL_WEB_ERROR_RUNTIME_KEY, errorRuntime);
 app.use(router);
 app.use(VueQueryPlugin, { queryClient: new QueryClient({ defaultOptions: { queries: { retry: false } } }) });
-app.use(createVuetify({ components, directives, icons: { defaultSet: "mdi", aliases, sets: { mdi } } }));
+app.use(createVuetify({ components, directives, ...createMaterialVuetifyOptions() }));
 await router.isReady();
 app.mount("#app");

package/fixtures/translated-app/main.js

@@ -4,10 +4,11 @@ import { createI18n } from "vue-i18n";
 import { createRouter, createWebHistory, RouterView } from "vue-router";
 import { QueryClient, VueQueryPlugin, useQuery } from "@tanstack/vue-query";
 import "vuetify/styles";
+import "@jskit-ai/material-web/client/material.css";
+import { createMaterialVuetifyOptions } from "@jskit-ai/material-web/client";
 import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
-import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
 import { registerJskitMessages, setJskitI18n } from "@jskit-ai/kernel/client/i18n";
 import { silentLogger } from "@jskit-ai/kernel/shared/support/silentLogger";
 import { createHttpClient } from "@jskit-ai/http-runtime/client";
@@ -158,7 +159,7 @@ app.use(i18n);
 app.use(pinia);
 app.use(router);
 app.use(VueQueryPlugin, { queryClient });
-app.use(createVuetify({ components, directives, icons: { defaultSet: "mdi", aliases, sets: { mdi } } }));
+app.use(createVuetify({ components, directives, ...createMaterialVuetifyOptions() }));
 
 const { shell } = ShellWebClientProvider.setup({ components: componentRegistry, logger: silentLogger, queryClient, router });
 shell.error.configure({});

package/locales/en.json

@@ -4,7 +4,7 @@
       "accountSettings": {
         "title": "Account settings",
         "subtitle": "Global profile, preferences, notifications, and account controls.",
-        "back": "Back",
+        "done": "Done",
         "loadFailedTitle": "Unable to load account settings",
         "loadFailed": "Unable to load settings.",
         "retry": "Retry",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"
@@ -13,15 +13,15 @@
     "./locales/en.json": "./locales/en.json"
   },
   "dependencies": {
-    "@jskit-ai/uploads-image-web": "0.2.8",
-    "@jskit-ai/users-core": "0.2.10"
+    "@jskit-ai/uploads-image-web": "0.2.10",
+    "@jskit-ai/users-core": "0.2.12"
   },
   "peerDependencies": {
-    "@jskit-ai/auth-web": "0.2.11",
-    "@jskit-ai/http-runtime": "0.2.8",
-    "@jskit-ai/http-web": "0.2.14",
-    "@jskit-ai/kernel": "0.2.8",
-    "@jskit-ai/shell-web": "0.2.9",
+    "@jskit-ai/auth-web": "0.2.13",
+    "@jskit-ai/http-runtime": "0.2.10",
+    "@jskit-ai/http-web": "0.2.16",
+    "@jskit-ai/kernel": "0.2.10",
+    "@jskit-ai/shell-web": "0.2.11",
     "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",
@@ -228,5 +228,8 @@
         "singleton": true
       }
     }
+  },
+  "devDependencies": {
+    "@jskit-ai/material-web": "0.1.0"
   }
 }

package/patterns/account-settings/example/src/components/account/settings/AccountSettingsNotificationsSection.vue

@@ -10,7 +10,7 @@ const notifications = props.runtime.notifications;
 </script>
 
 <template>
-  <v-sheet rounded="lg" border class="account-settings-section">
+  <div class="account-settings-section">
     <div class="account-settings-section__body">
       <v-form @submit.prevent="notifications.submit" novalidate>
         <v-switch
@@ -47,7 +47,7 @@ const notifications = props.runtime.notifications;
         </v-btn>
       </v-form>
     </div>
-  </v-sheet>
+  </div>
 </template>
 
 <style scoped>
@@ -58,10 +58,4 @@ const notifications = props.runtime.notifications;
 .account-settings-section__body {
   padding: 1rem;
 }
-
-@media (max-width: 640px) {
-  .account-settings-section__body :deep(.v-btn) {
-    min-height: 48px;
-  }
-}
 </style>

package/patterns/account-settings/example/src/components/account/settings/AccountSettingsPreferencesSection.vue

@@ -10,7 +10,7 @@ const preferences = props.runtime.preferences;
 </script>
 
 <template>
-  <v-sheet rounded="lg" border class="account-settings-section">
+  <div class="account-settings-section">
     <div class="account-settings-section__body">
       <v-form @submit.prevent="preferences.submit" novalidate>
         <v-row>
@@ -117,7 +117,7 @@ const preferences = props.runtime.preferences;
         </v-btn>
       </v-form>
     </div>
-  </v-sheet>
+  </div>
 </template>
 
 <style scoped>
@@ -128,10 +128,4 @@ const preferences = props.runtime.preferences;
 .account-settings-section__body {
   padding: 1rem;
 }
-
-@media (max-width: 640px) {
-  .account-settings-section__body :deep(.v-btn) {
-    min-height: 48px;
-  }
-}
 </style>

package/patterns/account-settings/example/src/components/account/settings/AccountSettingsProfileSection.vue

@@ -10,16 +10,16 @@ const profile = props.runtime.profile;
 </script>
 
 <template>
-  <v-sheet rounded="lg" border class="account-settings-section">
+  <div class="account-settings-section">
     <div class="account-settings-section__body">
       <v-form @submit.prevent="profile.submit" novalidate>
         <v-row class="mb-2">
           <v-col cols="12" md="4" class="d-flex flex-column align-center justify-center">
             <v-avatar :size="profile.avatar.size" color="surface-variant" rounded="circle" class="mb-3">
               <v-img v-if="profile.avatar.effectiveUrl" :src="profile.avatar.effectiveUrl" cover />
-              <span v-else class="text-h6">{{ profile.initials.value }}</span>
+              <span v-else class="text-title-large">{{ profile.initials.value }}</span>
             </v-avatar>
-            <div class="text-caption text-medium-emphasis">Preview size: {{ profile.avatar.size }} px</div>
+            <div class="text-body-small on-surface-variant">Preview size: {{ profile.avatar.size }} px</div>
           </v-col>
 
           <v-col cols="12" md="8">
@@ -44,7 +44,7 @@ const profile = props.runtime.profile;
               </v-btn>
             </div>
 
-            <div v-if="profile.selectedAvatarFileName.value" class="text-caption text-medium-emphasis mb-2">
+            <div v-if="profile.selectedAvatarFileName.value" class="text-body-small on-surface-variant mb-2">
               Selected file: {{ profile.selectedAvatarFileName.value }}
             </div>
           </v-col>
@@ -86,7 +86,7 @@ const profile = props.runtime.profile;
         </v-btn>
       </v-form>
     </div>
-  </v-sheet>
+  </div>
 </template>
 
 <style scoped>
@@ -97,10 +97,4 @@ const profile = props.runtime.profile;
 .account-settings-section__body {
   padding: 1rem;
 }
-
-@media (max-width: 640px) {
-  .account-settings-section__body :deep(.v-btn) {
-    min-height: 48px;
-  }
-}
 </style>

package/patterns/account-settings/example/src/components/account/settings/AccountSettingsSignInMethodsSection.vue

@@ -10,7 +10,7 @@ const signInMethods = props.runtime.signInMethods;
 </script>
 
 <template>
-  <v-sheet rounded="lg" border class="account-settings-section">
+  <div class="account-settings-section">
     <v-list lines="two" class="py-0">
       <v-list-item
         v-for="method in signInMethods.methods.value"
@@ -43,11 +43,11 @@ const signInMethods = props.runtime.signInMethods;
     </v-list>
     <p
       v-if="signInMethods.methods.value.some((method) => method.linked && !method.canUnlink)"
-      class="account-settings-section__hint text-body-2 text-medium-emphasis mb-0"
+      class="account-settings-section__hint text-body-medium on-surface-variant mb-0"
     >
       Your only sign-in method can't be unlinked. Set a password or link another provider first.
     </p>
-  </v-sheet>
+  </div>
 </template>
 
 <style scoped>
@@ -58,10 +58,4 @@ const signInMethods = props.runtime.signInMethods;
 .account-settings-section__hint {
   padding: 0 1rem 1rem;
 }
-
-@media (max-width: 640px) {
-  .account-settings-section :deep(.v-btn) {
-    min-height: 48px;
-  }
-}
 </style>

package/patterns/account-settings/example/src/pages/account/index.vue

@@ -3,6 +3,13 @@
   "meta": {
     "guard": {
       "policy": "authenticated"
+    },
+    "jskit": {
+      "title": "Account settings",
+      "parent": {
+        "surface": "home",
+        "path": "/"
+      }
     }
   }
 }

package/src/client/components/AccountSettingsClientElement.vue

@@ -2,6 +2,9 @@
 import { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { normalizeOneOf } from "@jskit-ai/kernel/shared/support/normalize";
+import ShellPageAction from "@jskit-ai/shell-web/client/components/ShellPageAction";
+import ShellPageActions from "@jskit-ai/shell-web/client/components/ShellPageActions";
+import { useShellPageTitle } from "@jskit-ai/shell-web/client/composables/useShellPageTitle";
 import { useAccountSettingsRuntime } from "../composables/useAccountSettingsRuntime.js";
 import { useAccountSettingsSections } from "../account-settings/sections.js";
 import { useJskitText } from "../i18n.js";
@@ -11,6 +14,10 @@ const runtime = useAccountSettingsRuntime();
 const route = useRoute();
 const router = useRouter();
 const sections = useAccountSettingsSections();
+// The app bar carries the page's title and its Done action, which returns to where the person came from (returnTo,
+// which may be another of the app's origins).
+useShellPageTitle(() => t("jskit.users.accountSettings.title"));
+const doneTarget = computed(() => runtime.backNavigationTarget.value);
 const sectionValues = computed(() => Object.freeze(sections.value.map((section) => section.value)));
 const defaultSection = computed(() => {
   if (sectionValues.value.includes("profile")) {
@@ -58,23 +65,17 @@ const activeTab = computed({
 
 <template>
   <section class="settings-view py-2 py-md-4">
-    <v-sheet class="settings-panel" rounded="lg" border>
-      <header class="settings-panel__header">
-        <div>
-          <h1 class="settings-panel__title">{{ t("jskit.users.accountSettings.title") }}</h1>
-          <p class="text-body-2 text-medium-emphasis mb-0">
-            {{ t("jskit.users.accountSettings.subtitle") }}
-          </p>
-        </div>
-        <v-btn
-          variant="text"
-          color="secondary"
-          :to="runtime.backNavigationTarget.value.sameOrigin ? runtime.backNavigationTarget.value.href : undefined"
-          :href="runtime.backNavigationTarget.value.sameOrigin ? undefined : runtime.backNavigationTarget.value.href"
-        >
-          {{ t("jskit.users.accountSettings.back") }}
-        </v-btn>
-      </header>
+    <ShellPageActions>
+      <ShellPageAction
+        :label="t('jskit.users.accountSettings.done')"
+        :to="doneTarget.sameOrigin ? doneTarget.href : undefined"
+        :href="doneTarget.sameOrigin ? undefined : doneTarget.href"
+      />
+    </ShellPageActions>
+    <div class="settings-panel">
+      <p class="settings-panel__intro text-body-medium on-surface-variant">
+        {{ t("jskit.users.accountSettings.subtitle") }}
+      </p>
 
       <div class="settings-panel__body">
         <template v-if="runtime.loadingSettings.value">
@@ -82,8 +83,8 @@ const activeTab = computed({
           <v-skeleton-loader type="text@2, paragraph, button" />
         </template>
         <div v-else-if="runtime.settingsLoadError.value" class="settings-panel__state">
-          <h2 class="text-h6 mb-2">{{ t("jskit.users.accountSettings.loadFailedTitle") }}</h2>
-          <p class="text-body-2 text-medium-emphasis mb-4">{{ runtime.settingsLoadError.value }}</p>
+          <h2 class="text-title-large mb-2">{{ t("jskit.users.accountSettings.loadFailedTitle") }}</h2>
+          <p class="text-body-medium on-surface-variant mb-4">{{ runtime.settingsLoadError.value }}</p>
           <v-btn
             color="primary"
             variant="tonal"
@@ -94,19 +95,18 @@ const activeTab = computed({
           </v-btn>
         </div>
         <template v-else-if="sections.length < 1">
-          <p class="text-body-2 text-medium-emphasis mb-0">{{ t("jskit.users.accountSettings.noSections") }}</p>
+          <p class="text-body-medium on-surface-variant mb-0">{{ t("jskit.users.accountSettings.noSections") }}</p>
         </template>
         <template v-else>
           <v-progress-linear v-if="runtime.refreshingSettings.value" indeterminate class="mb-4" />
           <v-row class="settings-layout" no-gutters>
             <v-col cols="12" md="3" lg="2" class="pr-md-4 mb-4 mb-md-0">
-              <v-list nav density="comfortable" class="settings-section-list rounded-lg">
+              <v-list nav class="settings-section-list">
                 <v-list-item
                   v-for="section in sections"
                   :key="section.value"
                   :title="text(section.title)"
                   :active="activeTab === section.value"
-                  rounded="lg"
                   @click="activeTab = section.value"
                 />
               </v-list>
@@ -114,7 +114,13 @@ const activeTab = computed({
 
             <v-col cols="12" md="9" lg="10">
               <v-window v-model="activeTab" :touch="false" class="settings-sections-window">
-                <v-window-item v-for="section in sections" :key="section.value" :value="section.value">
+                <v-window-item
+                  v-for="section in sections"
+                  :key="section.value"
+                  :value="section.value"
+                  :transition="false"
+                  :reverse-transition="false"
+                >
                   <component
                     :is="section.component"
                     v-bind="section.usesSharedRuntime ? { runtime } : undefined"
@@ -125,32 +131,20 @@ const activeTab = computed({
           </v-row>
         </template>
       </div>
-    </v-sheet>
+    </div>
   </section>
 </template>
 
 <style scoped>
 .settings-panel {
-  background-color: rgb(var(--v-theme-surface));
   overflow: hidden;
 }
 
-.settings-panel__header {
-  align-items: flex-start;
-  display: flex;
-  gap: 1rem;
-  justify-content: space-between;
+.settings-panel__intro {
+  margin: 0;
   padding: 1rem 1rem 0;
 }
 
-.settings-panel__title {
-  font-size: clamp(1.35rem, 2vw, 1.85rem);
-  font-weight: 650;
-  letter-spacing: -0.02em;
-  line-height: 1.15;
-  margin: 0 0 0.35rem;
-}
-
 .settings-panel__body {
   padding: 1rem;
 }
@@ -161,29 +155,4 @@ const activeTab = computed({
   padding: 2rem 1rem;
   text-align: center;
 }
-
-.settings-section-list {
-  border: 1px solid rgba(var(--v-theme-outline), 0.35);
-}
-
-:deep(.settings-section-list .v-list-item--active) {
-  background-color: rgba(var(--v-theme-primary), 0.14);
-}
-
-:deep(.settings-sections-window .v-window-x-transition-enter-active),
-:deep(.settings-sections-window .v-window-x-transition-leave-active),
-:deep(.settings-sections-window .v-window-x-reverse-transition-enter-active),
-:deep(.settings-sections-window .v-window-x-reverse-transition-leave-active) {
-  transition: none !important;
-}
-
-@media (max-width: 960px) {
-  .settings-panel__header {
-    flex-direction: column;
-  }
-
-  .settings-panel__header :deep(.v-btn) {
-    min-height: 48px;
-  }
-}
 </style>

package/src/client/components/ProfileClientElement.vue

@@ -9,7 +9,7 @@
       :data-testid="uiTestIds.card"
     >
       <div v-if="resolvedFeatures.header" class="profile-client-panel__header">
-        <h2 class="text-subtitle-1 mb-0">{{ copyText.title }}</h2>
+        <h2 class="text-title-medium mb-0">{{ copyText.title }}</h2>
       </div>
       <v-divider v-if="resolvedFeatures.header" />
       <div class="profile-client-panel__body">
@@ -20,9 +20,9 @@
             <v-col cols="12" md="4" class="d-flex flex-column align-center justify-center">
               <v-avatar :size="state.preferencesForm.avatarSize" color="surface-variant" rounded="circle" class="mb-3">
                 <v-img v-if="state.profileAvatar.effectiveUrl" :src="state.profileAvatar.effectiveUrl" cover />
-                <span v-else class="text-h6">{{ state.profileInitials }}</span>
+                <span v-else class="text-title-large">{{ state.profileInitials }}</span>
               </v-avatar>
-              <div class="text-caption text-medium-emphasis">
+              <div class="text-body-small on-surface-variant">
                 {{ copyText.previewSizePrefix }} {{ state.preferencesForm.avatarSize }} {{ copyText.previewSizeSuffix }}
               </div>
             </v-col>
@@ -43,7 +43,7 @@
                 </v-btn>
                 <slot name="avatar-actions-extra" :state="state" :actions="actions" />
               </div>
-              <div v-if="state.selectedAvatarFileName" class="text-caption text-medium-emphasis mb-2">
+              <div v-if="state.selectedAvatarFileName" class="text-body-small on-surface-variant mb-2">
                 {{ copyText.selectedFilePrefix }} {{ state.selectedAvatarFileName }}
               </div>
             </v-col>

package/test/accountSettings.browser.test.js

@@ -127,7 +127,9 @@ test("the profile section loads, saves, shows a refused field and removes the av
   const name = page.getByLabel("Display name");
   await expect(name).toHaveValue("Ada");
   await expect(page.getByLabel("Email", { exact: true })).toHaveValue("ada@example.com");
-  await expect(page.getByRole("link", { name: "Back" })).toHaveAttribute("href", "/home");
+  // The page's Done action (in the shell's app bar, or in place without one) returns to returnTo; there is no in-page h1.
+  await expect(page.getByRole("link", { name: "Done" })).toHaveAttribute("href", "/home");
+  await expect(page.getByRole("heading", { level: 1 })).toHaveCount(0);
 
   await name.fill("  Ada Lovelace ");
   await page.getByRole("button", { name: "Save profile" }).click();
@@ -147,7 +149,7 @@ test("the profile section loads, saves, shows a refused field and removes the av
   await expect(page.getByRole("button", { name: "Remove avatar" })).toHaveCount(0);
   await expect.poll(() => lastReport(page)).toBe("Avatar removed.");
 
-  await page.getByRole("link", { name: "Back" }).click();
+  await page.getByRole("link", { name: "Done" }).click();
   await expect(page.getByTestId("home")).toBeVisible();
   await finish(api);
 });

package/test/settingsPlacementContract.test.js

@@ -90,7 +90,10 @@ test("package-owned account settings host is placement-backed rather than scaffo
   );
 
   assert.match(source, /useAccountSettingsSections/);
-  assert.match(source, /settings-panel__header/);
+  // The app bar carries the title and the Done action; the page keeps only its intro.
+  assert.match(source, /settings-panel__intro/);
+  assert.match(source, /useShellPageTitle/);
+  assert.doesNotMatch(source, /<h1/u);
   assert.doesNotMatch(source, /AccountSettingsProfileSection|AccountSettingsPreferencesSection|AccountSettingsNotificationsSection/);
 });