@iyulab/desktop-patterns 0.10.1 → 0.11.0

package/README.md

@@ -87,6 +87,11 @@ collapsed rail (`dp-sidebar` `collapsed`). Give the toggle `expanded` so assisti
 which state it is in. The consumer owns both states — start the drawer closed, close it when the
 shell asks (backdrop click, Escape) and when a place is picked, or a narrow window stays covered.
 
+The shell holds the window's height, so the document never scrolls — the main content box does.
+Anything that saves and restores where the user was reading reaches that box through
+`shell.mainElement`; with `@iyulab/router`, hand it to the router's scroll restoration:
+`scrollRestoration: { container: () => document.querySelector('dp-shell')?.mainElement }`.
+
 ### A list beside the item picked from it
 
 ```html

package/dist/components/shell/dp-shell.d.ts

@@ -35,6 +35,13 @@ export declare class DpShell extends LitElement {
      * place is picked in the drawer.
      */
     sidebarOpen: boolean;
+    /**
+     * The box that scrolls the main content. The shell holds the window's height, so the document
+     * never scrolls — this box does. Code that saves and restores where the user was reading (a
+     * router's scroll restoration, for one) reads and writes its `scrollTop`. It sits in the shadow
+     * root, so this is the supported way to reach it. `null` until the first render.
+     */
+    get mainElement(): HTMLElement | null;
     private readonly onKeydown;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/shell.js

@@ -103,6 +103,9 @@ var c = class extends Event {
     }
   `;
 	}
+	get mainElement() {
+		return this.shadowRoot?.querySelector("main") ?? null;
+	}
 	connectedCallback() {
 		super.connectedCallback(), document.addEventListener("keydown", this.onKeydown);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "type": "module",
   "license": "MIT",
   "repository": {