@jskit-ai/shell-web 0.1.151 → 0.1.152

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.1.152 - 2026-08-13
+
+- Remove the redundant uppercase surface subheader from the expanded drawer; the top app bar remains the single shell-owned surface label.
+- Align expanded drawer icons to the collapsed rail centreline so toggling navigation reveals or hides labels without shifting the icons horizontally.
+- Preserve the Material 3 80px default rail and the public `railWidth` and `navigationItemSpacing` density controls.
+
 ## 0.1.151 - 2026-08-13
 
 - Replace Vuetify's oversized default drawer icon spacer with one public `navigationItemSpacing` value, defaulting to 12px for both icon-to-label and widest-label-to-edge spacing.

package/package.descriptor.mjs

@@ -1,7 +1,7 @@
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/shell-web",
-  version: "0.1.151",
+  version: "0.1.152",
   kind: "runtime",
   description: "Web shell layout runtime with outlet-based placement contributions.",
   dependsOn: [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/shell-web",
-  "version": "0.1.151",
+  "version": "0.1.152",
   "type": "module",
   "scripts": {
     "test": "node --test"

package/src/client/components/ShellLayout.vue

@@ -628,7 +628,10 @@ function touchListIncludesActiveTouch(touchList) {
     :data-drawer-width="resolvedDrawerWidth"
     :data-navigation-item-spacing="resolvedNavigationItemSpacing"
     :data-rail-width="resolvedRailWidth"
-    :style="{ '--shell-navigation-item-spacing': `${resolvedNavigationItemSpacing}px` }"
+    :style="{
+      '--shell-navigation-item-spacing': `${resolvedNavigationItemSpacing}px`,
+      '--shell-navigation-rail-width': `${resolvedRailWidth}px`
+    }"
     :temporary="isCompactLayout"
     :permanent="!isCompactLayout"
     :width="resolvedDrawerWidth"
@@ -643,9 +646,6 @@ function touchListIncludesActiveTouch(touchList) {
         class="pt-2"
         :prepend-gap="resolvedNavigationItemSpacing"
       >
-        <v-list-subheader v-if="!drawerPresentation.rail" class="text-uppercase text-caption">
-          {{ resolvedSurfaceLabel }}
-        </v-list-subheader>
         <ShellOutlet
           target="shell-layout:primary-menu"
           default
@@ -734,9 +734,26 @@ function touchListIncludesActiveTouch(touchList) {
   white-space: nowrap;
 }
 
-.shell-layout__drawer[data-presentation="drawer"] :deep(.v-list--nav),
+.shell-layout__drawer {
+  --shell-navigation-drawer-inset: 12px;
+  --shell-navigation-icon-size: 24px;
+}
+
+.shell-layout__drawer[data-presentation="drawer"] :deep(.v-list--nav) {
+  padding-inline-end: calc(var(--shell-navigation-item-spacing) / 2);
+  padding-inline-start: var(--shell-navigation-drawer-inset);
+}
+
 .shell-layout__drawer[data-presentation="drawer"] :deep(.v-list-item) {
   padding-inline-end: calc(var(--shell-navigation-item-spacing) / 2);
+  padding-inline-start: max(
+    0px,
+    calc(
+      var(--shell-navigation-rail-width) / 2 -
+      var(--shell-navigation-icon-size) / 2 -
+      var(--shell-navigation-drawer-inset)
+    )
+  );
 }
 
 .shell-layout__drawer[data-presentation="rail"] :deep(.v-list-item) {

package/src/test/adaptiveShellSmoke.js

@@ -177,22 +177,42 @@ async function expectContentAwareDrawerFit(drawer, expect) {
   }
 }
 
-async function expectCentredRailNavigation(page, drawer, expect) {
+async function readNavigationIconCenters(drawer) {
+  const icons = drawer.locator("a.shell-menu-link-item[href] .v-icon");
+  await icons.first().waitFor({ state: "visible" });
+  const centers = [];
+  const iconCount = await icons.count();
+  for (let index = 0; index < iconCount; index += 1) {
+    const box = await icons.nth(index).boundingBox();
+    if (!box) {
+      throw new Error("Shell navigation exposed an unmeasurable icon.");
+    }
+    centers.push(box.x + box.width / 2);
+  }
+  return centers;
+}
+
+async function expectCentredRailNavigation(page, drawer, expect, expandedIconCenters) {
   const links = drawer.locator("a.shell-menu-link-item[href]");
   await expect(links.first()).toBeVisible();
   const firstLink = links.first();
-  const firstIcon = firstLink.locator(".v-icon").first();
-  const geometry = await Promise.all([drawer.boundingBox(), firstLink.boundingBox(), firstIcon.boundingBox()]);
-  const [drawerBox, linkBox, iconBox] = geometry;
+  const geometry = await Promise.all([drawer.boundingBox(), firstLink.boundingBox()]);
+  const [drawerBox, linkBox] = geometry;
 
   expect(drawerBox).not.toBeNull();
   expect(linkBox).not.toBeNull();
-  expect(iconBox).not.toBeNull();
   expect(linkBox.width).toBeGreaterThanOrEqual(48);
   expect(linkBox.height).toBeGreaterThanOrEqual(48);
-  expect(Math.abs(
-    iconBox.x + iconBox.width / 2 - (drawerBox.x + drawerBox.width / 2)
-  )).toBeLessThanOrEqual(1);
+  const railIconCenters = await readNavigationIconCenters(drawer);
+  expect(railIconCenters.length).toBe(expandedIconCenters.length);
+  for (let index = 0; index < railIconCenters.length; index += 1) {
+    expect(Math.abs(
+      railIconCenters[index] - (drawerBox.x + drawerBox.width / 2)
+    )).toBeLessThanOrEqual(1);
+    expect(Math.abs(
+      railIconCenters[index] - expandedIconCenters[index]
+    )).toBeLessThanOrEqual(1);
+  }
 
   const currentUrl = new URL(page.url());
   const linkCount = await links.count();
@@ -288,13 +308,14 @@ async function runAdaptiveShellSmokeCase({
     await expect(drawer).toHaveAttribute("data-presentation", "drawer");
     await expectDrawerWidth(drawer, expect, await readConfiguredWidth(drawer, "data-drawer-width"));
     await expectContentAwareDrawerFit(drawer, expect);
+    const expandedIconCenters = await readNavigationIconCenters(drawer);
     await page.keyboard.press("Escape");
     await expect(drawer).toHaveAttribute("data-presentation", "drawer");
 
     await toggle.click();
     await expect(drawer).toHaveAttribute("data-presentation", "rail");
     await expectDrawerWidth(drawer, expect, await readConfiguredWidth(drawer, "data-rail-width"));
-    await expectCentredRailNavigation(page, drawer, expect);
+    await expectCentredRailNavigation(page, drawer, expect, expandedIconCenters);
     await expectNoHorizontalOverflow(page, expect);
   }
 }

package/test/adaptiveShell.browser.test.js

@@ -166,6 +166,11 @@ async function assertTooltipContrast(page, linkName, interaction) {
 async function assertDrawerFit(page) {
   const drawer = page.getByTestId("jskit-shell-drawer");
   await expect(drawer).toHaveAttribute("data-presentation", "drawer");
+  assert.equal(
+    await drawer.locator(".v-list-subheader").count(),
+    0,
+    "The drawer must not repeat the surface label from the top app bar."
+  );
   const configuredSpacing = Number(await drawer.getAttribute("data-navigation-item-spacing"));
   assert.ok(Number.isFinite(configuredSpacing));
   await expect.poll(async () => {

package/test/playwrightContract.test.js

@@ -35,7 +35,7 @@ test("adaptive shell smoke follows rendered layout state and waits for drawer tr
   assert.match(source, /toBeFocused/u);
   assert.match(source, /v-navigation-drawer__scrim/u);
   assert.match(source, /page\.keyboard\.press\("Escape"\)[\s\S]*data-presentation", "drawer"/u);
-  assert.match(source, /iconBox\.x \+ iconBox\.width \/ 2/u);
+  assert.match(source, /centers\.push\(box\.x \+ box\.width \/ 2\)/u);
   assert.match(source, /fit\.endGap - configuredSpacing/u);
   assert.match(source, /fit\.iconLabelGaps/u);
   assert.doesNotMatch(source, /viewport\.name === "compact"/u);

package/test/settingsPlacementContract.test.js

@@ -110,6 +110,10 @@ test("shell-web shell layout registers navigation at the app layout level", asyn
   assert.match(source, /measureDrawerContentWidth/);
   assert.match(source, /DEFAULT_SHELL_NAVIGATION_ITEM_SPACING/);
   assert.match(source, /:prepend-gap="resolvedNavigationItemSpacing"/);
+  assert.match(source, /--shell-navigation-drawer-inset:\s*12px/);
+  assert.match(source, /--shell-navigation-rail-width/);
+  assert.match(source, /padding-inline-start:\s*var\(--shell-navigation-drawer-inset\)/);
+  assert.doesNotMatch(source, /<v-list-subheader/);
   assert.doesNotMatch(source, /:width="248"/);
   assert.doesNotMatch(source, /:rail-width="80"/);
   assert.match(source, /:model-value="drawerPresentation\.visible"/);