@iyulab/desktop-patterns 0.5.0 → 0.6.1

package/README.md

@@ -51,7 +51,7 @@ document.querySelector<HTMLElementTagNameMap['dp-sidebar']>('#nav')!.items = [
   { id: 'overview', icon: '■', label: 'Overview' },
 ]
 
-import { desktopMinWidth } from '@iyulab/desktop-patterns'
+import { desktopMinWidth } from '@iyulab/desktop-patterns/breakpoints' // no elements registered
 
 const shell = document.querySelector('dp-shell')!
 const sidebar = document.querySelector('dp-sidebar')!
@@ -66,7 +66,9 @@ function sync() {
 wide.addEventListener('change', sync)
 sidebar.addEventListener('dp-sidebar-select', () => {
   // consumer owns activeId / routing
-  shell.sidebarOpen = false // a drawer gives way to what was picked
+})
+sidebar.addEventListener('dp-sidebar-activate', () => {
+  shell.sidebarOpen = false // a drawer gives way to what was picked — the place already shown included
   sync()
 })
 toolbar.addEventListener('dp-toolbar-toggle', () => {
@@ -85,6 +87,23 @@ 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.
 
+### A list beside the item picked from it
+
+```html
+<dp-page fill max-width="full">
+  <dp-list-detail>
+    <nav slot="list" aria-label="People">…</nav>
+    <article>…the person picked…</article>
+  </dp-list-detail>
+</dp-page>
+```
+
+`dp-list-detail` puts the `list` slot beside the default slot, each scrolling on its own, the list
+`--dp-list-detail-list-width` wide (by default the sidebar's width — navigation, list and item read as
+1:1:rest). Below the desktop breakpoint there is room for one pane: the item while `detail-open` is
+set, the list otherwise. The consumer owns `detail-open` — set it when an item is picked, and give
+the item a way back that clears it, shown only below `desktopMinWidth`.
+
 ### Sidebar items: links, groups, icons, actions
 
 ```ts
@@ -108,6 +127,9 @@ nav.setAttribute('nav-label', 'Main')                                 // names t
   items show, separated by a rule.
 - **Icons**: each item's icon is a slot named `icon-<id>` whose fallback is the item's `icon` text — slot any icon
   element (`<svg slot="icon-overview">`) to replace it.
+- **`dp-sidebar-activate`** fires on every pick of a navigation item, the active one included (after
+  `dp-sidebar-select` when the place changes; not when that was cancelled). Close a drawer on it: picking the
+  place already shown still means "take me there", and `dp-sidebar-select` does not fire for it.
 - **Bottom items are actions**: each click fires `dp-sidebar-action` (`itemId`) — every time, so a failed action can
   be retried — and never moves `aria-current`. (In 0.2.x they fired `dp-sidebar-select` and took the active mark.)
 
@@ -125,7 +147,7 @@ import '@iyulab/desktop-patterns/tokens.css'
 
 Color/spacing/radius/typography all come from `desktop-compact`'s `--dc-*` tokens — this package adds
 only the structural dimensions `desktop-compact` has no concept of (`--dp-sidebar-width`,
-`--dp-sidebar-width-collapsed`, `--dp-header-height`). Every component ships with sane fallback
+`--dp-sidebar-width-collapsed`, `--dp-header-height`, `--dp-list-detail-list-width`). Every component ships with sane fallback
 values, so it still renders correctly even without either stylesheet.
 
 ## Platform boundary — drag regions
@@ -147,11 +169,12 @@ dp-toolbar[drag-region]::part(drag-handle) {
 `toolbar`, so ownership of the drag handle stays entirely with whatever renders there (typically
 `dp-toolbar`).
 
-## Components (v1 — complete, 5/5)
+## Components
 
 | Component | Description |
 |---|---|
 | `dp-page` | Scrollable content region with a centered, max-width column — the page-body every view renders into. With `fill` it does not scroll and its column is as tall as the region, for a view that scrolls its own parts (a list beside the item open) |
+| `dp-list-detail` | A list beside the item picked from it (master-detail) — each pane scrolls on its own; one pane at a time below 1024px, the item while `detail-open` is set |
 | `dp-sidebar` | App-shell navigation rail — expanded/collapsed states, an optional pinned bottom group, a `footer` slot for whatever a consumer wants to anchor there |
 | `dp-toolbar` | App-shell header bar — `heading`/`subtitle`, an optional sidebar toggle (drawer in a narrow window, collapse in a wide one), a right-side `actions` slot |
 | `dp-shell` | Top-level layout composing `sidebar`/`toolbar`/`banner`/main-content regions, with a responsive drawer (backdrop + overlay sidebar) below a 1024px breakpoint |

package/dist/breakpoints.js

@@ -0,0 +1,5 @@
+import { unsafeCSS as e } from "lit";
+//#region src/breakpoints.ts
+var t = 1024, n = e(`(min-width: ${t}px)`);
+//#endregion
+export { n as desktopMedia, t as desktopMinWidth };

package/dist/components/list-detail/dp-list-detail.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * A list beside the item picked from it — the master-detail view of mail, files or records. The
+ * `list` slot holds what to pick from, the default slot what was picked. Each pane scrolls on its
+ * own, so the list stays where it was while the item is read.
+ *
+ * At desktop width the list sits at the start, `--dp-list-detail-list-width` wide (by default the
+ * sidebar's width, so navigation and list line up as equal columns), and the item takes the rest.
+ * Below it there is room for one pane: the item while `detail-open` is set, the list otherwise. The
+ * consumer owns `detail-open` — set it when an item is picked and clear it to go back to the list
+ * (a back control in the item, which it shows only while narrow).
+ *
+ * Give the view a definite height — inside `dp-page fill`, or any box with one.
+ */
+export declare class DpListDetail extends LitElement {
+    static styles: import('lit').CSSResult;
+    /** Below desktop width, show the picked item instead of the list. Above it both are always shown. */
+    detailOpen: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dp-list-detail': DpListDetail;
+    }
+}

package/dist/components/shortcut-overlay/dp-shortcut-overlay.d.ts

@@ -13,7 +13,9 @@ export declare class DpShortcutOverlayDismissEvent extends Event {
  * `shift+/` shortcut and read from a module-level, framework-hook-specific
  * registry; both are the consumer's responsibility here (see
  * docs/superpowers/specs/2026-09-02-desktop-patterns-design.md, the
- * dp-shortcut-overlay row). This component only dismisses itself (outside
+ * dp-shortcut-overlay row). While open it is a modal dialog: focus moves to
+ * its close button, Tab stays inside it, and focus goes back where it was once
+ * it closes. This component only dismisses itself (outside
  * click / Escape) by asking — it dispatches `dp-shortcut-overlay-dismiss`
  * rather than setting its own `open` to false, since `open` is the
  * consumer's state to own, not this component's.

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

@@ -32,6 +32,16 @@ export declare class DpSidebarSelectEvent extends Event {
     readonly itemId: string;
     constructor(itemId: string);
 }
+/**
+ * Fired whenever a navigation item is picked, the active one included — after `dp-sidebar-select`
+ * when the place changes, alone when the item picked is the one already active. Not cancelable.
+ * It is the moment a drawer holding the sidebar gives way: picking the place already shown still
+ * means "take me there".
+ */
+export declare class DpSidebarActivateEvent extends Event {
+    readonly itemId: string;
+    constructor(itemId: string);
+}
 /** Fired on every click of a bottom item — those are actions, not places. */
 export declare class DpSidebarActionEvent extends Event {
     readonly itemId: string;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './breakpoints.js';
 export * from './components/page/dp-page.js';
+export * from './components/list-detail/dp-list-detail.js';
 export * from './components/sidebar/dp-sidebar.js';
 export * from './components/toolbar/dp-toolbar.js';
 export * from './components/shell/dp-shell.js';

package/dist/index.js

@@ -1,6 +1,8 @@
-import { i as e, n as t, r as n, t as r } from "./dp-shell-CvV92B8B.js";
-import { DpPage as i } from "./page.js";
-import { DpSidebar as a, DpSidebarActionEvent as o, DpSidebarSelectEvent as s } from "./sidebar.js";
+import { desktopMedia as e, desktopMinWidth as t } from "./breakpoints.js";
+import { DpPage as n } from "./page.js";
+import { DpListDetail as r } from "./list-detail.js";
+import { DpSidebar as i, DpSidebarActionEvent as a, DpSidebarActivateEvent as o, DpSidebarSelectEvent as s } from "./sidebar.js";
 import { DpToolbar as c, DpToolbarToggleEvent as l } from "./toolbar.js";
-import { DpShortcutOverlay as u, DpShortcutOverlayDismissEvent as d } from "./shortcut-overlay.js";
-export { i as DpPage, r as DpShell, t as DpShellSidebarCloseEvent, u as DpShortcutOverlay, d as DpShortcutOverlayDismissEvent, a as DpSidebar, o as DpSidebarActionEvent, s as DpSidebarSelectEvent, c as DpToolbar, l as DpToolbarToggleEvent, n as desktopMedia, e as desktopMinWidth };
+import { DpShell as u, DpShellSidebarCloseEvent as d } from "./shell.js";
+import { DpShortcutOverlay as f, DpShortcutOverlayDismissEvent as p } from "./shortcut-overlay.js";
+export { r as DpListDetail, n as DpPage, u as DpShell, d as DpShellSidebarCloseEvent, f as DpShortcutOverlay, p as DpShortcutOverlayDismissEvent, i as DpSidebar, a as DpSidebarActionEvent, o as DpSidebarActivateEvent, s as DpSidebarSelectEvent, c as DpToolbar, l as DpToolbarToggleEvent, e as desktopMedia, t as desktopMinWidth };

package/dist/list-detail.js

@@ -0,0 +1,65 @@
+import { desktopMedia as e } from "./breakpoints.js";
+import { t } from "./decorate-CafwLXg5.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/components/list-detail/dp-list-detail.ts
+var s = class extends n {
+	constructor(...e) {
+		super(...e), this.detailOpen = !1;
+	}
+	static {
+		this.styles = r`
+    :host {
+      display: flex;
+      flex: 1;
+      min-height: 0;
+      height: 100%;
+      box-sizing: border-box;
+    }
+    .list,
+    .detail {
+      min-width: 0;
+      min-height: 0;
+      overflow: auto;
+      box-sizing: border-box;
+    }
+    .list {
+      flex: 1;
+    }
+    .detail {
+      flex: 1;
+      display: none;
+    }
+    :host([detail-open]) .list {
+      display: none;
+    }
+    :host([detail-open]) .detail {
+      display: block;
+    }
+    @media ${e} {
+      :host([detail-open]) .list,
+      .list {
+        display: block;
+        flex: 0 0 var(--dp-list-detail-list-width, var(--dp-sidebar-width, 220px));
+        border-inline-end: 1px solid var(--dc-color-border, #e2e2e4);
+      }
+      .detail {
+        display: block;
+      }
+    }
+  `;
+	}
+	render() {
+		return i`
+      <div class="list" part="list"><slot name="list"></slot></div>
+      <div class="detail" part="detail"><slot></slot></div>
+    `;
+	}
+};
+t([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "detail-open"
+})], s.prototype, "detailOpen", void 0), s = t([a("dp-list-detail")], s);
+//#endregion
+export { s as DpListDetail };

package/dist/shell.js

@@ -1,2 +1,109 @@
-import { n as e, t } from "./dp-shell-CvV92B8B.js";
-export { t as DpShell, e as DpShellSidebarCloseEvent };
+import { desktopMedia as e } from "./breakpoints.js";
+import { t } from "./decorate-CafwLXg5.js";
+import { LitElement as n, css as r, html as i, nothing as a } from "lit";
+import { customElement as o, property as s } from "lit/decorators.js";
+//#region src/components/shell/dp-shell.ts
+var c = class extends Event {
+	constructor() {
+		super("dp-shell-sidebar-close", {
+			bubbles: !0,
+			composed: !0
+		});
+	}
+}, l = class extends n {
+	constructor(...e) {
+		super(...e), this.sidebarOpen = !1, this.onKeydown = (e) => {
+			e.key === "Escape" && !e.defaultPrevented && this.sidebarOpen && this.dispatchEvent(new c());
+		};
+	}
+	static {
+		this.styles = r`
+    :host {
+      display: flex;
+      width: 100vw;
+      height: 100vh;
+      overflow: hidden;
+      box-sizing: border-box;
+      background: var(--dc-color-bg, #ffffff);
+      color: var(--dc-color-text, #1a1a1e);
+      font-family: var(--dc-font-family, system-ui, sans-serif);
+    }
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 30;
+      background: var(--dc-color-backdrop, rgba(0, 0, 0, 0.4));
+    }
+    .sidebar-region {
+      flex-shrink: 0;
+      display: none;
+    }
+    :host([sidebar-open]) .sidebar-region {
+      display: block;
+      position: fixed;
+      inset-block: 0;
+      inset-inline-start: 0;
+      z-index: 40;
+    }
+    @media ${e} {
+      /* Must match (or exceed) \`:host([sidebar-open]) .sidebar-region\`'s
+         specificity above (0,3,0) — a bare \`.sidebar-region\` here is only
+         (0,1,0), so on equal-or-narrower cascades the desktop override would
+         lose to the sidebar-open rule regardless of this media query
+         matching, leaving the sidebar permanently \`position: fixed\` (full-
+         height overlay) at any width once \`sidebar-open\` is set. Repeating
+         the \`:host([sidebar-open])\` prefix here, rather than only the bare
+         selector, is what actually lets desktop width win. */
+      :host([sidebar-open]) .sidebar-region,
+      .sidebar-region {
+        display: block;
+        position: relative;
+        inset: auto;
+        z-index: auto;
+      }
+      .backdrop {
+        display: none;
+      }
+    }
+    .main-column {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-width: 0;
+    }
+    .toolbar-row {
+      flex-shrink: 0;
+    }
+    main {
+      flex: 1;
+      overflow: auto;
+    }
+  `;
+	}
+	connectedCallback() {
+		super.connectedCallback(), document.addEventListener("keydown", this.onKeydown);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("keydown", this.onKeydown), super.disconnectedCallback();
+	}
+	render() {
+		return i`
+      ${this.sidebarOpen ? i`<div class="backdrop" @click=${() => this.dispatchEvent(new c())}></div>` : a}
+      <div class="sidebar-region"><slot name="sidebar"></slot></div>
+      <div class="main-column">
+        <div class="toolbar-row">
+          <slot name="toolbar"></slot>
+        </div>
+        <slot name="banner"></slot>
+        <main><slot></slot></main>
+      </div>
+    `;
+	}
+};
+t([s({
+	type: Boolean,
+	reflect: !0,
+	attribute: "sidebar-open"
+})], l.prototype, "sidebarOpen", void 0), l = t([o("dp-shell")], l);
+//#endregion
+export { l as DpShell, c as DpShellSidebarCloseEvent };

package/dist/shortcut-overlay.js

@@ -11,8 +11,8 @@ var c = class extends Event {
 	}
 }, l = 0, u = class extends t {
 	constructor(...e) {
-		super(...e), this.shortcuts = [], this.open = !1, this.heading = "Keyboard shortcuts", this.emptyMessage = "No shortcuts registered.", this.closeLabel = "Close", this.headingId = `dp-shortcut-overlay-heading-${++l}`, this.#e = (e) => {
-			e.key === "Escape" && (e.preventDefault(), this.#t());
+		super(...e), this.shortcuts = [], this.open = !1, this.heading = "Keyboard shortcuts", this.emptyMessage = "No shortcuts registered.", this.closeLabel = "Close", this.headingId = `dp-shortcut-overlay-heading-${++l}`, this.#t = (e) => {
+			e.key === "Escape" ? (e.preventDefault(), this.#r()) : e.key === "Tab" && (e.preventDefault(), this.#n()?.focus());
 		};
 	}
 	static {
@@ -104,18 +104,22 @@ var c = class extends Event {
   `;
 	}
 	#e;
+	#t;
+	#n() {
+		return this.renderRoot.querySelector(".close");
+	}
 	updated(e) {
-		e.has("open") && (this.open ? window.addEventListener("keydown", this.#e) : window.removeEventListener("keydown", this.#e));
+		e.has("open") && (this.open ? (window.addEventListener("keydown", this.#t), this.#e = d(), this.#n()?.focus()) : (window.removeEventListener("keydown", this.#t), e.get("open") === !0 && this.#e?.focus(), this.#e = void 0));
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), window.removeEventListener("keydown", this.#e);
+		super.disconnectedCallback(), window.removeEventListener("keydown", this.#t);
 	}
-	#t() {
+	#r() {
 		this.dispatchEvent(new c());
 	}
 	render() {
 		return this.open ? r`
-      <div class="backdrop" @click=${() => this.#t()}>
+      <div class="backdrop" @click=${() => this.#r()}>
         <div
           class="panel"
           role="dialog"
@@ -125,7 +129,7 @@ var c = class extends Event {
         >
           <div class="header">
             <h2 id=${this.headingId}>${this.heading}</h2>
-            <button class="close" aria-label=${this.closeLabel} @click=${() => this.#t()}>×</button>
+            <button class="close" aria-label=${this.closeLabel} @click=${() => this.#r()}>×</button>
           </div>
           <div class="body">
             ${this.shortcuts.length === 0 ? r`<p class="empty">${this.emptyMessage}</p>` : r`
@@ -148,5 +152,10 @@ e([o({ type: Array })], u.prototype, "shortcuts", void 0), e([o({
 	type: Boolean,
 	reflect: !0
 })], u.prototype, "open", void 0), e([o()], u.prototype, "heading", void 0), e([o({ attribute: "empty-message" })], u.prototype, "emptyMessage", void 0), e([o({ attribute: "close-label" })], u.prototype, "closeLabel", void 0), e([s()], u.prototype, "headingId", void 0), u = e([a("dp-shortcut-overlay")], u);
+function d() {
+	let e = document.activeElement;
+	for (; e?.shadowRoot?.activeElement;) e = e.shadowRoot.activeElement;
+	return e instanceof HTMLElement && e !== document.body ? e : void 0;
+}
 //#endregion
 export { u as DpShortcutOverlay, c as DpShortcutOverlayDismissEvent };

package/dist/sidebar.js

@@ -11,13 +11,20 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
 		}), this.itemId = e;
 	}
 }, u = class extends Event {
+	constructor(e) {
+		super("dp-sidebar-activate", {
+			bubbles: !0,
+			composed: !0
+		}), this.itemId = e;
+	}
+}, d = class extends Event {
 	constructor(e) {
 		super("dp-sidebar-action", {
 			bubbles: !0,
 			composed: !0
 		}), this.itemId = e;
 	}
-}, d = class extends t {
+}, f = class extends t {
 	constructor(...e) {
 		super(...e), this.items = [], this.bottomItems = [], this.activeId = "", this.header = "", this.navLabel = "", this.collapsed = !1, this.toggledGroups = /* @__PURE__ */ new Set();
 	}
@@ -194,7 +201,7 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
       <button
         class="item"
         title=${this.collapsed ? e.label : i}
-        @click=${() => this.dispatchEvent(new u(e.id))}
+        @click=${() => this.dispatchEvent(new d(e.id))}
       >
         ${this.#r(e.id, e.icon)} ${this.collapsed ? i : r`<span class="label">${e.label}</span>`}
       </button>
@@ -204,12 +211,15 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
 		return r`<span class="icon" aria-hidden="true"><slot name=${`icon-${e}`}>${t}</slot></span>`;
 	}
 	#i(e, t) {
-		if (!(t.href !== void 0 && (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)) && t.id !== this.activeId) {
-			if (!this.dispatchEvent(new l(t.id))) {
-				e.preventDefault();
-				return;
+		if (!(t.href !== void 0 && (e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey))) {
+			if (t.id !== this.activeId) {
+				if (!this.dispatchEvent(new l(t.id))) {
+					e.preventDefault();
+					return;
+				}
+				this.activeId = t.id;
 			}
-			this.activeId = t.id;
+			this.dispatchEvent(new u(t.id));
 		}
 	}
 	#a(e) {
@@ -217,12 +227,12 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
 		t.delete(e) || t.add(e), this.toggledGroups = t;
 	}
 };
-e([o({ type: Array })], d.prototype, "items", void 0), e([o({
+e([o({ type: Array })], f.prototype, "items", void 0), e([o({
 	type: Array,
 	attribute: "bottom-items"
-})], d.prototype, "bottomItems", void 0), e([o({ attribute: "active-id" })], d.prototype, "activeId", void 0), e([o()], d.prototype, "header", void 0), e([o({ attribute: "nav-label" })], d.prototype, "navLabel", void 0), e([o({
+})], f.prototype, "bottomItems", void 0), e([o({ attribute: "active-id" })], f.prototype, "activeId", void 0), e([o()], f.prototype, "header", void 0), e([o({ attribute: "nav-label" })], f.prototype, "navLabel", void 0), e([o({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "collapsed", void 0), e([s()], d.prototype, "toggledGroups", void 0), d = e([a("dp-sidebar")], d);
+})], f.prototype, "collapsed", void 0), e([s()], f.prototype, "toggledGroups", void 0), f = e([a("dp-sidebar")], f);
 //#endregion
-export { d as DpSidebar, u as DpSidebarActionEvent, l as DpSidebarSelectEvent };
+export { f as DpSidebar, d as DpSidebarActionEvent, u as DpSidebarActivateEvent, l as DpSidebarSelectEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -25,11 +25,21 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./breakpoints": {
+      "types": "./dist/breakpoints.d.ts",
+      "import": "./dist/breakpoints.js",
+      "default": "./dist/breakpoints.js"
+    },
     "./page": {
       "types": "./dist/components/page/dp-page.d.ts",
       "import": "./dist/page.js",
       "default": "./dist/page.js"
     },
+    "./list-detail": {
+      "types": "./dist/components/list-detail/dp-list-detail.d.ts",
+      "import": "./dist/list-detail.js",
+      "default": "./dist/list-detail.js"
+    },
     "./sidebar": {
       "types": "./dist/components/sidebar/dp-sidebar.d.ts",
       "import": "./dist/sidebar.js",
@@ -67,16 +77,17 @@
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/desktop-compact": "^0.2.0 || ^0.3.0 || ^0.4.0 || ^0.5.0 || ^0.6.0 || ^0.7.0 || ^0.8.0"
+    "@iyulab/desktop-compact": "^0.2.0 || ^0.3.0 || ^0.4.0 || ^0.5.0 || ^0.6.0 || ^0.7.0 || ^0.8.0 || ^0.9.0"
   },
   "devDependencies": {
-    "@iyulab/desktop-compact": "^0.8.2",
+    "@iyulab/desktop-compact": "^0.9.0",
     "@open-wc/testing": "^5.0.0",
     "@storybook/web-components": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^2.0.0",
     "@web/test-runner": "^1.0.0",
+    "@web/test-runner-commands": "^1.0.1",
     "axe-core": "^4.13.0",
     "storybook": "^10.6.0",
     "typescript": "^6.0.3",

package/tokens.css

@@ -11,4 +11,6 @@
   --dp-sidebar-width: 220px;
   --dp-sidebar-width-collapsed: 52px;
   --dp-header-height: 52px;
+  /* dp-list-detail's list pane: as wide as the sidebar, so navigation and list are equal columns. */
+  --dp-list-detail-list-width: var(--dp-sidebar-width);
 }

package/dist/dp-shell-CvV92B8B.js

@@ -1,108 +0,0 @@
-import { t as e } from "./decorate-CafwLXg5.js";
-import { LitElement as t, css as n, html as r, nothing as i, unsafeCSS as a } from "lit";
-import { customElement as o, property as s } from "lit/decorators.js";
-//#region src/breakpoints.ts
-var c = 1024, l = a(`(min-width: ${c}px)`), u = class extends Event {
-	constructor() {
-		super("dp-shell-sidebar-close", {
-			bubbles: !0,
-			composed: !0
-		});
-	}
-}, d = class extends t {
-	constructor(...e) {
-		super(...e), this.sidebarOpen = !1, this.onKeydown = (e) => {
-			e.key === "Escape" && !e.defaultPrevented && this.sidebarOpen && this.dispatchEvent(new u());
-		};
-	}
-	static {
-		this.styles = n`
-    :host {
-      display: flex;
-      width: 100vw;
-      height: 100vh;
-      overflow: hidden;
-      box-sizing: border-box;
-      background: var(--dc-color-bg, #ffffff);
-      color: var(--dc-color-text, #1a1a1e);
-      font-family: var(--dc-font-family, system-ui, sans-serif);
-    }
-    .backdrop {
-      position: fixed;
-      inset: 0;
-      z-index: 30;
-      background: var(--dc-color-backdrop, rgba(0, 0, 0, 0.4));
-    }
-    .sidebar-region {
-      flex-shrink: 0;
-      display: none;
-    }
-    :host([sidebar-open]) .sidebar-region {
-      display: block;
-      position: fixed;
-      inset-block: 0;
-      inset-inline-start: 0;
-      z-index: 40;
-    }
-    @media ${l} {
-      /* Must match (or exceed) \`:host([sidebar-open]) .sidebar-region\`'s
-         specificity above (0,3,0) — a bare \`.sidebar-region\` here is only
-         (0,1,0), so on equal-or-narrower cascades the desktop override would
-         lose to the sidebar-open rule regardless of this media query
-         matching, leaving the sidebar permanently \`position: fixed\` (full-
-         height overlay) at any width once \`sidebar-open\` is set. Repeating
-         the \`:host([sidebar-open])\` prefix here, rather than only the bare
-         selector, is what actually lets desktop width win. */
-      :host([sidebar-open]) .sidebar-region,
-      .sidebar-region {
-        display: block;
-        position: relative;
-        inset: auto;
-        z-index: auto;
-      }
-      .backdrop {
-        display: none;
-      }
-    }
-    .main-column {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-width: 0;
-    }
-    .toolbar-row {
-      flex-shrink: 0;
-    }
-    main {
-      flex: 1;
-      overflow: auto;
-    }
-  `;
-	}
-	connectedCallback() {
-		super.connectedCallback(), document.addEventListener("keydown", this.onKeydown);
-	}
-	disconnectedCallback() {
-		document.removeEventListener("keydown", this.onKeydown), super.disconnectedCallback();
-	}
-	render() {
-		return r`
-      ${this.sidebarOpen ? r`<div class="backdrop" @click=${() => this.dispatchEvent(new u())}></div>` : i}
-      <div class="sidebar-region"><slot name="sidebar"></slot></div>
-      <div class="main-column">
-        <div class="toolbar-row">
-          <slot name="toolbar"></slot>
-        </div>
-        <slot name="banner"></slot>
-        <main><slot></slot></main>
-      </div>
-    `;
-	}
-};
-e([s({
-	type: Boolean,
-	reflect: !0,
-	attribute: "sidebar-open"
-})], d.prototype, "sidebarOpen", void 0), d = e([o("dp-shell")], d);
-//#endregion
-export { c as i, u as n, l as r, d as t };