@jskit-ai/shell-web 0.1.151 → 0.1.153

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.1.152 - 2026-08-13
4
+
5
+ - Remove the redundant uppercase surface subheader from the expanded drawer; the top app bar remains the single shell-owned surface label.
6
+ - Align expanded drawer icons to the collapsed rail centreline so toggling navigation reveals or hides labels without shifting the icons horizontally.
7
+ - Preserve the Material 3 80px default rail and the public `railWidth` and `navigationItemSpacing` density controls.
8
+
3
9
  ## 0.1.151 - 2026-08-13
4
10
 
5
11
  - 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.
@@ -52,7 +52,9 @@ function createSurfacePlacement(surface, order, label, suffix) {
52
52
  function createSurfacePlacements(surface) {
53
53
  return [
54
54
  createSurfacePlacement(surface, 10, "Home", "/"),
55
- createSurfacePlacement(surface, 20, "Assistant", "/assistant"),
55
+ surface === "home"
56
+ ? createSurfacePlacement(surface, 20, "Settings", "/settings")
57
+ : createSurfacePlacement(surface, 20, "Assistant", "/assistant"),
56
58
  createSurfacePlacement(surface, 30, "Contacts", "/contacts"),
57
59
  createSurfacePlacement(surface, 40, "Bookings", "/bookings"),
58
60
  createSurfacePlacement(surface, 50, "Rostering", "/rostering")
@@ -117,6 +119,8 @@ placementRuntime.setContext({
117
119
 
118
120
  const routes = [
119
121
  { path: "/", redirect: "/home" },
122
+ { path: "/home/settings", redirect: "/home/settings/general" },
123
+ { path: "/home/settings/general", component: ScreenPage, meta: { title: "General settings" } },
120
124
  { path: "/home/:section?", component: ScreenPage, meta: { title: "Home surface" } },
121
125
  { path: "/w/:workspaceSlug/admin/:section?", component: ScreenPage, meta: { title: "Admin surface" } },
122
126
  { path: "/help", component: ScreenPage, meta: { title: "Help and support" } }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jskit-ai/shell-web",
3
- "version": "0.1.151",
3
+ "version": "0.1.153",
4
4
  "type": "module",
5
5
  "scripts": {
6
6
  "test": "node --test"
@@ -28,12 +28,583 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@mdi/js": "^7.4.47",
31
- "@jskit-ai/kernel": "0.1.148"
31
+ "@jskit-ai/kernel": "0.1.149"
32
32
  },
33
33
  "peerDependencies": {
34
34
  "pinia": "^3.0.4",
35
35
  "vue": "^3.5.13",
36
36
  "vue-router": "^5.0.4",
37
37
  "vuetify": "^4.0.0"
38
+ },
39
+ "description": "Web shell layout runtime with outlet-based placement contributions.",
40
+ "jskit": {
41
+ "kind": "runtime",
42
+ "capabilities": {
43
+ "provides": [
44
+ "runtime.web-placement",
45
+ "runtime.web-error",
46
+ "runtime.web-async-module-recovery",
47
+ "runtime.web-request-recovery"
48
+ ],
49
+ "requires": []
50
+ },
51
+ "runtime": {
52
+ "server": {
53
+ "providers": []
54
+ },
55
+ "client": {
56
+ "providers": [
57
+ {
58
+ "entrypoint": "src/client/providers/ShellWebClientProvider.js",
59
+ "export": "ShellWebClientProvider"
60
+ }
61
+ ]
62
+ }
63
+ },
64
+ "metadata": {
65
+ "client": {
66
+ "optimizeDeps": {
67
+ "include": [
68
+ "@jskit-ai/shell-web/client/placement",
69
+ "@jskit-ai/shell-web/client/error"
70
+ ],
71
+ "exclude": [
72
+ "@jskit-ai/shell-web/client"
73
+ ]
74
+ }
75
+ },
76
+ "apiSummary": {
77
+ "surfaces": [
78
+ {
79
+ "subpath": "./client",
80
+ "summary": "Exports shell layout/outlet/outlet-menu/route-transition/error-host components and ShellWebClientProvider."
81
+ },
82
+ {
83
+ "subpath": "./client/placement",
84
+ "summary": "Exports placement registry, placement context access, runtime token, and surface path helpers."
85
+ },
86
+ {
87
+ "subpath": "./client/error",
88
+ "summary": "Exports default error policy and runtime error reporter hook."
89
+ },
90
+ {
91
+ "subpath": "./client/requestRecovery",
92
+ "summary": "Exports request connectivity recovery classification and runtime access for app-caught request failures."
93
+ },
94
+ {
95
+ "subpath": "./client/bootstrap",
96
+ "summary": "Exports the shared client bootstrap handler registry used to extend /api/bootstrap handling."
97
+ },
98
+ {
99
+ "subpath": "./test/adaptiveShellSmoke",
100
+ "summary": "Exports reusable Playwright smoke coverage for generated adaptive shell layouts."
101
+ }
102
+ ],
103
+ "containerTokens": {
104
+ "server": [],
105
+ "client": [
106
+ "runtime.web-placement.client",
107
+ "runtime.web-bootstrap.client",
108
+ "runtime.web-refresh.client",
109
+ "runtime.web-async-module-recovery.client",
110
+ "runtime.web-request-recovery.client",
111
+ "runtime.web-error.client",
112
+ "runtime.web-error.presentation-store.client"
113
+ ]
114
+ }
115
+ },
116
+ "ui": {
117
+ "placements": {
118
+ "outlets": [
119
+ {
120
+ "target": "shell-layout:top-left",
121
+ "surfaces": [
122
+ "*"
123
+ ],
124
+ "source": "src/client/components/ShellLayout.vue"
125
+ },
126
+ {
127
+ "target": "shell-layout:top-right",
128
+ "surfaces": [
129
+ "*"
130
+ ],
131
+ "source": "src/client/components/ShellLayout.vue"
132
+ },
133
+ {
134
+ "target": "shell-layout:primary-menu",
135
+ "surfaces": [
136
+ "*"
137
+ ],
138
+ "source": "src/client/components/ShellLayout.vue"
139
+ },
140
+ {
141
+ "target": "shell-layout:primary-bottom-nav",
142
+ "surfaces": [
143
+ "*"
144
+ ],
145
+ "source": "src/client/components/ShellLayout.vue"
146
+ },
147
+ {
148
+ "target": "shell-layout:secondary-menu",
149
+ "surfaces": [
150
+ "*"
151
+ ],
152
+ "source": "src/client/components/ShellLayout.vue"
153
+ },
154
+ {
155
+ "target": "shell-layout:supporting-bottom-sheet",
156
+ "surfaces": [
157
+ "*"
158
+ ],
159
+ "source": "src/client/components/ShellLayout.vue"
160
+ },
161
+ {
162
+ "target": "shell-layout:supporting-side-panel",
163
+ "surfaces": [
164
+ "*"
165
+ ],
166
+ "source": "src/client/components/ShellLayout.vue"
167
+ },
168
+ {
169
+ "target": "home-settings:primary-menu",
170
+ "surfaces": [
171
+ "home"
172
+ ],
173
+ "source": "templates/src/pages/home/settings.vue"
174
+ }
175
+ ],
176
+ "topology": {
177
+ "placements": [
178
+ {
179
+ "id": "shell.primary-nav",
180
+ "description": "Primary top-level navigation for the current surface.",
181
+ "surfaces": [
182
+ "*"
183
+ ],
184
+ "default": true,
185
+ "variants": {
186
+ "compact": {
187
+ "outlet": "shell-layout:primary-bottom-nav",
188
+ "renderers": {
189
+ "link": "local.main.ui.tab-link-item"
190
+ }
191
+ },
192
+ "medium": {
193
+ "outlet": "shell-layout:primary-menu",
194
+ "renderers": {
195
+ "link": "local.main.ui.surface-aware-menu-link-item"
196
+ }
197
+ },
198
+ "expanded": {
199
+ "outlet": "shell-layout:primary-menu",
200
+ "renderers": {
201
+ "link": "local.main.ui.surface-aware-menu-link-item"
202
+ }
203
+ }
204
+ }
205
+ },
206
+ {
207
+ "id": "shell.status",
208
+ "description": "Surface status, connection, and utility indicators.",
209
+ "surfaces": [
210
+ "*"
211
+ ],
212
+ "variants": {
213
+ "compact": {
214
+ "outlet": "shell-layout:top-right"
215
+ },
216
+ "medium": {
217
+ "outlet": "shell-layout:top-right"
218
+ },
219
+ "expanded": {
220
+ "outlet": "shell-layout:top-right"
221
+ }
222
+ }
223
+ },
224
+ {
225
+ "id": "shell.secondary-nav",
226
+ "description": "Secondary navigation for lower-priority shell links.",
227
+ "surfaces": [
228
+ "*"
229
+ ],
230
+ "variants": {
231
+ "compact": {
232
+ "outlet": "shell-layout:secondary-menu",
233
+ "renderers": {
234
+ "link": "local.main.ui.surface-aware-menu-link-item"
235
+ }
236
+ },
237
+ "medium": {
238
+ "outlet": "shell-layout:secondary-menu",
239
+ "renderers": {
240
+ "link": "local.main.ui.surface-aware-menu-link-item"
241
+ }
242
+ },
243
+ "expanded": {
244
+ "outlet": "shell-layout:secondary-menu",
245
+ "renderers": {
246
+ "link": "local.main.ui.surface-aware-menu-link-item"
247
+ }
248
+ }
249
+ }
250
+ },
251
+ {
252
+ "id": "shell.identity",
253
+ "description": "Current user, workspace, and surface identity controls.",
254
+ "surfaces": [
255
+ "*"
256
+ ],
257
+ "variants": {
258
+ "compact": {
259
+ "outlet": "shell-layout:top-left"
260
+ },
261
+ "medium": {
262
+ "outlet": "shell-layout:top-left"
263
+ },
264
+ "expanded": {
265
+ "outlet": "shell-layout:top-left"
266
+ }
267
+ }
268
+ },
269
+ {
270
+ "id": "shell.global-actions",
271
+ "description": "Global surface actions that should stay outside primary navigation.",
272
+ "surfaces": [
273
+ "*"
274
+ ],
275
+ "variants": {
276
+ "compact": {
277
+ "outlet": "shell-layout:top-right",
278
+ "renderers": {
279
+ "link": "local.main.ui.surface-aware-menu-link-item"
280
+ }
281
+ },
282
+ "medium": {
283
+ "outlet": "shell-layout:top-right",
284
+ "renderers": {
285
+ "link": "local.main.ui.surface-aware-menu-link-item"
286
+ }
287
+ },
288
+ "expanded": {
289
+ "outlet": "shell-layout:top-right",
290
+ "renderers": {
291
+ "link": "local.main.ui.surface-aware-menu-link-item"
292
+ }
293
+ }
294
+ }
295
+ },
296
+ {
297
+ "id": "page.supporting-content",
298
+ "description": "Supporting page content that opens as a bottom sheet on compact layouts and a side panel on wider layouts.",
299
+ "surfaces": [
300
+ "*"
301
+ ],
302
+ "variants": {
303
+ "compact": {
304
+ "outlet": "shell-layout:supporting-bottom-sheet"
305
+ },
306
+ "medium": {
307
+ "outlet": "shell-layout:supporting-side-panel"
308
+ },
309
+ "expanded": {
310
+ "outlet": "shell-layout:supporting-side-panel"
311
+ }
312
+ }
313
+ },
314
+ {
315
+ "id": "page.section-nav",
316
+ "owner": "home-settings",
317
+ "description": "Navigation between child pages in the home settings section.",
318
+ "surfaces": [
319
+ "home"
320
+ ],
321
+ "variants": {
322
+ "compact": {
323
+ "outlet": "home-settings:primary-menu",
324
+ "renderers": {
325
+ "link": "local.main.ui.surface-aware-menu-link-item"
326
+ }
327
+ },
328
+ "medium": {
329
+ "outlet": "home-settings:primary-menu",
330
+ "renderers": {
331
+ "link": "local.main.ui.surface-aware-menu-link-item"
332
+ }
333
+ },
334
+ "expanded": {
335
+ "outlet": "home-settings:primary-menu",
336
+ "renderers": {
337
+ "link": "local.main.ui.surface-aware-menu-link-item"
338
+ }
339
+ }
340
+ }
341
+ }
342
+ ]
343
+ },
344
+ "contributions": [
345
+ {
346
+ "id": "shell-web.home.menu.home",
347
+ "target": "shell.primary-nav",
348
+ "kind": "link",
349
+ "surfaces": [
350
+ "home"
351
+ ],
352
+ "order": 50,
353
+ "source": "templates/src/placement.js"
354
+ },
355
+ {
356
+ "id": "shell-web.home.menu.settings",
357
+ "target": "shell.primary-nav",
358
+ "kind": "link",
359
+ "surfaces": [
360
+ "home"
361
+ ],
362
+ "order": 100,
363
+ "source": "templates/src/placement.js"
364
+ },
365
+ {
366
+ "id": "shell-web.home.settings.general",
367
+ "target": "page.section-nav",
368
+ "owner": "home-settings",
369
+ "kind": "link",
370
+ "surfaces": [
371
+ "home"
372
+ ],
373
+ "order": 100,
374
+ "source": "templates/src/placement.js"
375
+ }
376
+ ]
377
+ }
378
+ }
379
+ },
380
+ "mutations": {
381
+ "dependencies": {
382
+ "runtime": {
383
+ "@mdi/js": "^7.4.47",
384
+ "@jskit-ai/kernel": "0.1.149"
385
+ },
386
+ "dev": {
387
+ "@playwright/test": "1.61.1"
388
+ }
389
+ },
390
+ "packageJson": {
391
+ "scripts": {
392
+ "dev:all": "vite",
393
+ "dev:home": "VITE_SURFACE=home vite"
394
+ }
395
+ },
396
+ "procfile": {},
397
+ "text": [],
398
+ "source": [
399
+ {
400
+ "op": "ensure-import",
401
+ "file": "packages/main/src/client/providers/MainClientProvider.js",
402
+ "defaultImport": "MenuLinkItem",
403
+ "from": "/src/components/menus/MenuLinkItem.vue",
404
+ "reason": "Bind app-owned shell menu link-item scaffold into local main client provider imports.",
405
+ "category": "shell-web",
406
+ "id": "shell-web-main-client-provider-menu-link-item-import"
407
+ },
408
+ {
409
+ "op": "ensure-import",
410
+ "file": "packages/main/src/client/providers/MainClientProvider.js",
411
+ "defaultImport": "SurfaceAwareMenuLinkItem",
412
+ "from": "/src/components/menus/SurfaceAwareMenuLinkItem.vue",
413
+ "reason": "Bind app-owned shell surface-aware menu link-item scaffold into local main client provider imports.",
414
+ "category": "shell-web",
415
+ "id": "shell-web-main-client-provider-surface-aware-menu-link-item-import"
416
+ },
417
+ {
418
+ "op": "ensure-import",
419
+ "file": "packages/main/src/client/providers/MainClientProvider.js",
420
+ "defaultImport": "TabLinkItem",
421
+ "from": "/src/components/menus/TabLinkItem.vue",
422
+ "reason": "Bind app-owned shell tab link-item scaffold into local main client provider imports.",
423
+ "category": "shell-web",
424
+ "id": "shell-web-main-client-provider-tab-link-item-import"
425
+ },
426
+ {
427
+ "op": "ensure-call",
428
+ "file": "packages/main/src/client/providers/MainClientProvider.js",
429
+ "callee": "registerMainClientComponent",
430
+ "args": [
431
+ "\"local.main.ui.menu-link-item\"",
432
+ "() => MenuLinkItem"
433
+ ],
434
+ "beforeClass": "MainClientProvider",
435
+ "reason": "Bind app-owned shell menu link-item token into local main client provider registry.",
436
+ "category": "shell-web",
437
+ "id": "shell-web-main-client-provider-menu-link-item-register"
438
+ },
439
+ {
440
+ "op": "ensure-call",
441
+ "file": "packages/main/src/client/providers/MainClientProvider.js",
442
+ "callee": "registerMainClientComponent",
443
+ "args": [
444
+ "\"local.main.ui.surface-aware-menu-link-item\"",
445
+ "() => SurfaceAwareMenuLinkItem"
446
+ ],
447
+ "beforeClass": "MainClientProvider",
448
+ "reason": "Bind app-owned shell surface-aware menu link-item token into local main client provider registry.",
449
+ "category": "shell-web",
450
+ "id": "shell-web-main-client-provider-surface-aware-menu-link-item-register"
451
+ },
452
+ {
453
+ "op": "ensure-call",
454
+ "file": "packages/main/src/client/providers/MainClientProvider.js",
455
+ "callee": "registerMainClientComponent",
456
+ "args": [
457
+ "\"local.main.ui.tab-link-item\"",
458
+ "() => TabLinkItem"
459
+ ],
460
+ "beforeClass": "MainClientProvider",
461
+ "reason": "Bind app-owned shell tab link-item token into local main client provider registry.",
462
+ "category": "shell-web",
463
+ "id": "shell-web-main-client-provider-tab-link-item-register"
464
+ }
465
+ ],
466
+ "files": [
467
+ {
468
+ "from": "templates/src/App.vue",
469
+ "to": "src/App.vue",
470
+ "ownership": "app",
471
+ "expectedExistingFrom": "templates/expected-existing/src/App.vue",
472
+ "reason": "Install full-width shell app root with shell-web error host and edge-to-edge layout.",
473
+ "category": "shell-web",
474
+ "id": "shell-web-app-root"
475
+ },
476
+ {
477
+ "from": "templates/src/components/ShellLayout.vue",
478
+ "to": "src/components/ShellLayout.vue",
479
+ "ownership": "app",
480
+ "reason": "Install app-owned shell layout component so apps can customize structure and slots.",
481
+ "category": "shell-web",
482
+ "id": "shell-web-component-shell-layout"
483
+ },
484
+ {
485
+ "from": "templates/src/components/menus/MenuLinkItem.vue",
486
+ "to": "src/components/menus/MenuLinkItem.vue",
487
+ "ownership": "app",
488
+ "reason": "Install app-owned shell menu link-item scaffold for local placement customization.",
489
+ "category": "shell-web",
490
+ "id": "shell-web-component-menu-link-item"
491
+ },
492
+ {
493
+ "from": "templates/src/components/menus/SurfaceAwareMenuLinkItem.vue",
494
+ "to": "src/components/menus/SurfaceAwareMenuLinkItem.vue",
495
+ "ownership": "app",
496
+ "reason": "Install app-owned surface-aware shell menu link-item scaffold for local placement customization.",
497
+ "category": "shell-web",
498
+ "id": "shell-web-component-surface-aware-menu-link-item"
499
+ },
500
+ {
501
+ "from": "templates/src/components/menus/TabLinkItem.vue",
502
+ "to": "src/components/menus/TabLinkItem.vue",
503
+ "ownership": "app",
504
+ "reason": "Install app-owned shell tab link-item scaffold for local placement customization.",
505
+ "category": "shell-web",
506
+ "id": "shell-web-component-tab-link-item"
507
+ },
508
+ {
509
+ "from": "templates/src/error.js",
510
+ "to": "src/error.js",
511
+ "ownership": "app",
512
+ "reason": "Install app-owned error runtime policy and presenter config scaffold.",
513
+ "category": "shell-web",
514
+ "id": "shell-web-error-config"
515
+ },
516
+ {
517
+ "from": "templates/src/placement.js",
518
+ "to": "src/placement.js",
519
+ "ownership": "app",
520
+ "reason": "Install app-owned placement registry scaffold used by shell-web placement runtime.",
521
+ "category": "shell-web",
522
+ "id": "shell-web-placement-registry"
523
+ },
524
+ {
525
+ "from": "templates/src/placementTopology.js",
526
+ "to": "src/placementTopology.js",
527
+ "ownership": "app",
528
+ "reason": "Install app-owned semantic placement topology used by shell-web placement runtime.",
529
+ "category": "shell-web",
530
+ "id": "shell-web-placement-topology"
531
+ },
532
+ {
533
+ "from": "templates/src/pages/home.vue",
534
+ "toSurface": "home",
535
+ "toSurfaceRoot": true,
536
+ "ownership": "app",
537
+ "expectedExistingFrom": "templates/expected-existing/src/pages/home.vue",
538
+ "reason": "Install shell-driven home wrapper page.",
539
+ "category": "shell-web",
540
+ "id": "shell-web-page-home-wrapper",
541
+ "when": {
542
+ "config": "surfaceDefinitions.home.enabled",
543
+ "equals": "true"
544
+ }
545
+ },
546
+ {
547
+ "from": "templates/src/pages/home/index.vue",
548
+ "toSurface": "home",
549
+ "toSurfacePath": "index.vue",
550
+ "ownership": "app",
551
+ "expectedExistingFrom": "templates/expected-existing/src/pages/home/index.vue",
552
+ "reason": "Install shell-driven home surface starter page.",
553
+ "category": "shell-web",
554
+ "id": "shell-web-page-home",
555
+ "when": {
556
+ "config": "surfaceDefinitions.home.enabled",
557
+ "equals": "true"
558
+ }
559
+ },
560
+ {
561
+ "from": "templates/src/pages/home/settings.vue",
562
+ "toSurface": "home",
563
+ "toSurfacePath": "settings.vue",
564
+ "ownership": "app",
565
+ "reason": "Install shell-driven home settings shell route with section navigation.",
566
+ "category": "shell-web",
567
+ "id": "shell-web-page-home-settings-shell",
568
+ "when": {
569
+ "config": "surfaceDefinitions.home.enabled",
570
+ "equals": "true"
571
+ }
572
+ },
573
+ {
574
+ "from": "templates/src/pages/home/settings/index.vue",
575
+ "toSurface": "home",
576
+ "toSurfacePath": "settings/index.vue",
577
+ "ownership": "app",
578
+ "reason": "Install shell-driven home settings redirect so the starter settings shell lands on a real child page.",
579
+ "category": "shell-web",
580
+ "id": "shell-web-page-home-settings",
581
+ "when": {
582
+ "config": "surfaceDefinitions.home.enabled",
583
+ "equals": "true"
584
+ }
585
+ },
586
+ {
587
+ "from": "templates/src/pages/home/settings/general/index.vue",
588
+ "toSurface": "home",
589
+ "toSurfacePath": "settings/general/index.vue",
590
+ "ownership": "app",
591
+ "reason": "Install shell-driven general settings child page with a tiny browser-local shell preference example.",
592
+ "category": "shell-web",
593
+ "id": "shell-web-page-home-settings-general",
594
+ "when": {
595
+ "config": "surfaceDefinitions.home.enabled",
596
+ "equals": "true"
597
+ }
598
+ },
599
+ {
600
+ "from": "templates/tests/e2e/adaptive-shell.spec.ts",
601
+ "to": "tests/e2e/adaptive-shell.spec.ts",
602
+ "ownership": "app",
603
+ "reason": "Install compact/medium/expanded Playwright smoke coverage for the adaptive shell.",
604
+ "category": "shell-web",
605
+ "id": "shell-web-test-adaptive-shell-smoke"
606
+ }
607
+ ]
608
+ }
38
609
  }
39
610
  }
@@ -628,7 +628,10 @@ function touchListIncludesActiveTouch(touchList) {
628
628
  :data-drawer-width="resolvedDrawerWidth"
629
629
  :data-navigation-item-spacing="resolvedNavigationItemSpacing"
630
630
  :data-rail-width="resolvedRailWidth"
631
- :style="{ '--shell-navigation-item-spacing': `${resolvedNavigationItemSpacing}px` }"
631
+ :style="{
632
+ '--shell-navigation-item-spacing': `${resolvedNavigationItemSpacing}px`,
633
+ '--shell-navigation-rail-width': `${resolvedRailWidth}px`
634
+ }"
632
635
  :temporary="isCompactLayout"
633
636
  :permanent="!isCompactLayout"
634
637
  :width="resolvedDrawerWidth"
@@ -643,9 +646,6 @@ function touchListIncludesActiveTouch(touchList) {
643
646
  class="pt-2"
644
647
  :prepend-gap="resolvedNavigationItemSpacing"
645
648
  >
646
- <v-list-subheader v-if="!drawerPresentation.rail" class="text-uppercase text-caption">
647
- {{ resolvedSurfaceLabel }}
648
- </v-list-subheader>
649
649
  <ShellOutlet
650
650
  target="shell-layout:primary-menu"
651
651
  default
@@ -734,9 +734,26 @@ function touchListIncludesActiveTouch(touchList) {
734
734
  white-space: nowrap;
735
735
  }
736
736
 
737
- .shell-layout__drawer[data-presentation="drawer"] :deep(.v-list--nav),
737
+ .shell-layout__drawer {
738
+ --shell-navigation-drawer-inset: 12px;
739
+ --shell-navigation-icon-size: 24px;
740
+ }
741
+
742
+ .shell-layout__drawer[data-presentation="drawer"] :deep(.v-list--nav) {
743
+ padding-inline-end: calc(var(--shell-navigation-item-spacing) / 2);
744
+ padding-inline-start: var(--shell-navigation-drawer-inset);
745
+ }
746
+
738
747
  .shell-layout__drawer[data-presentation="drawer"] :deep(.v-list-item) {
739
748
  padding-inline-end: calc(var(--shell-navigation-item-spacing) / 2);
749
+ padding-inline-start: max(
750
+ 0px,
751
+ calc(
752
+ var(--shell-navigation-rail-width) / 2 -
753
+ var(--shell-navigation-icon-size) / 2 -
754
+ var(--shell-navigation-drawer-inset)
755
+ )
756
+ );
740
757
  }
741
758
 
742
759
  .shell-layout__drawer[data-presentation="rail"] :deep(.v-list-item) {