@iyulab/desktop-patterns 0.4.0 → 0.6.0

package/README.md

@@ -51,22 +51,58 @@ document.querySelector<HTMLElementTagNameMap['dp-sidebar']>('#nav')!.items = [
   { id: 'overview', icon: '■', label: 'Overview' },
 ]
 
+import { desktopMinWidth } from '@iyulab/desktop-patterns/breakpoints' // no elements registered
+
 const shell = document.querySelector('dp-shell')!
-document.querySelector('dp-sidebar')!.addEventListener('dp-sidebar-select', (e) => {
+const sidebar = document.querySelector('dp-sidebar')!
+const toolbar = document.querySelector('dp-toolbar')!
+const wide = matchMedia(`(min-width: ${desktopMinWidth}px)`)
+let collapsed = false // the consumer's own state: a wide window's sidebar folded to its rail
+
+function sync() {
+  sidebar.collapsed = collapsed && wide.matches // a drawer always shows the whole sidebar
+  toolbar.expanded = wide.matches ? !collapsed : shell.sidebarOpen
+}
+wide.addEventListener('change', sync)
+sidebar.addEventListener('dp-sidebar-select', () => {
   // consumer owns activeId / routing
-  shell.sidebarOpen = false // a drawer gives way to what was picked
 })
-document.querySelector('dp-toolbar')!.addEventListener('dp-toolbar-toggle', () => {
-  shell.sidebarOpen = !shell.sidebarOpen
+sidebar.addEventListener('dp-sidebar-activate', () => {
+  shell.sidebarOpen = false // a drawer gives way to what was picked — the place already shown included
+  sync()
 })
-shell.addEventListener('dp-shell-sidebar-close', () => (shell.sidebarOpen = false)) // backdrop, Escape
+toolbar.addEventListener('dp-toolbar-toggle', () => {
+  if (wide.matches) collapsed = !collapsed
+  else shell.sidebarOpen = !shell.sidebarOpen
+  sync()
+})
+shell.addEventListener('dp-shell-sidebar-close', () => { shell.sidebarOpen = false; sync() }) // backdrop, Escape
+```
+
+Below the desktop breakpoint (`desktopMinWidth`, 1024px — `desktopMedia` for a component's styles)
+the sidebar is a drawer over the content, open while `sidebar-open` is set; at and above it the
+sidebar sits beside the content and `sidebar-open` changes nothing. The same toolbar toggle serves
+both widths: in a narrow window it opens the drawer, in a wide one it folds the sidebar to its
+collapsed rail (`dp-sidebar` `collapsed`). Give the toggle `expanded` so assistive technology hears
+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>
 ```
 
-Below the desktop breakpoint (1024px) the sidebar is a drawer over the content, open while
-`sidebar-open` is set; at and above it the sidebar always sits beside the content and `sidebar-open`
-changes nothing, and `dp-toolbar` hides its toggle there. The breakpoint is exported as
-`desktopMinWidth` (and `desktopMedia` for a component's styles). The consumer owns that state — start it closed, and close it when the shell asks
-(backdrop click, Escape) and when a place is picked, or a narrow window stays covered.
+`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
 
@@ -91,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.)
 
@@ -108,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
@@ -130,13 +169,14 @@ 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 drawer toggle (below the desktop breakpoint only), a right-side `actions` slot |
+| `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 |
 | `dp-shortcut-overlay` | Display-only keyboard-shortcuts help panel — a `shortcuts` list + `open` flag; no registration/binding infrastructure (that stays the consumer's) |
 

package/dist/breakpoints.d.ts

@@ -1,7 +1,7 @@
 /**
  * The desktop breakpoint, in CSS pixels. Below it `dp-shell`'s sidebar is a drawer over the
- * content; at and above it the sidebar always sits beside the content, so `dp-toolbar` hides the
- * toggle that opens the drawer.
+ * content; at and above it the sidebar sits beside the content, where a consumer may fold
+ * `dp-sidebar` to its collapsed rail instead.
  */
 export declare const desktopMinWidth = 1024;
 /** The media query for {@link desktopMinWidth}, for a component's styles. */

package/dist/{breakpoints-BjS_v3PV.js → breakpoints.js}

@@ -2,4 +2,4 @@ import { unsafeCSS as e } from "lit";
 //#region src/breakpoints.ts
 var t = 1024, n = e(`(min-width: ${t}px)`);
 //#endregion
-export { t as n, n as t };
+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/components/toolbar/dp-toolbar.d.ts

@@ -4,9 +4,9 @@ export declare class DpToolbarToggleEvent extends Event {
 }
 /**
  * App-shell header bar: a `heading` (optionally overridden per-view by
- * `subtitle`), an optional toggle for `dp-shell`'s sidebar drawer — shown
- * only below the desktop breakpoint, where the sidebar is a drawer — and a
- * right-side `actions` slot. Pure layout — this repo does not call any platform API.
+ * `subtitle`), an optional sidebar toggle — the consumer decides what it does
+ * (open `dp-shell`'s drawer in a narrow window, fold `dp-sidebar` to its rail
+ * in a wide one) — and a right-side `actions` slot. Pure layout — this repo does not call any platform API.
  *
  * Named `heading`, not `title` — matches dc-section-heading's own
  * established convention for this kind of headline text, and avoids
@@ -42,8 +42,9 @@ export declare class DpToolbar extends LitElement {
     static styles: import('lit').CSSResult;
     heading: string;
     subtitle: string;
-    /** Shows the sidebar drawer toggle. It is hidden at and above the desktop breakpoint. */
     showToggle: boolean;
+    /** Whether the sidebar the toggle controls is shown in full — announced as the toggle's `aria-expanded`. */
+    expanded: boolean;
     /** Accessible name of the sidebar toggle — supply one in the app's language. */
     toggleLabel: string;
     dragRegion: boolean;

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,7 +1,8 @@
-import { n as e, t } from "./breakpoints-BjS_v3PV.js";
+import { desktopMedia as e, desktopMinWidth as t } from "./breakpoints.js";
 import { DpPage as n } from "./page.js";
-import { DpSidebar as r, DpSidebarActionEvent as i, DpSidebarSelectEvent as a } from "./sidebar.js";
-import { DpToolbar as o, DpToolbarToggleEvent as s } from "./toolbar.js";
-import { DpShell as c, DpShellSidebarCloseEvent as l } from "./shell.js";
-import { DpShortcutOverlay as u, DpShortcutOverlayDismissEvent as d } from "./shortcut-overlay.js";
-export { n as DpPage, c as DpShell, l as DpShellSidebarCloseEvent, u as DpShortcutOverlay, d as DpShortcutOverlayDismissEvent, r as DpSidebar, i as DpSidebarActionEvent, a as DpSidebarSelectEvent, o as DpToolbar, s as DpToolbarToggleEvent, t as desktopMedia, e as desktopMinWidth };
+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 { 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,4 +1,4 @@
-import { t as e } from "./breakpoints-BjS_v3PV.js";
+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";

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/dist/toolbar.js

@@ -1,21 +1,20 @@
-import { t as e } from "./breakpoints-BjS_v3PV.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";
+import { t as e } from "./decorate-CafwLXg5.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
 //#region src/components/toolbar/dp-toolbar.ts
-var c = class extends Event {
+var s = class extends Event {
 	constructor() {
 		super("dp-toolbar-toggle", {
 			bubbles: !0,
 			composed: !0
 		});
 	}
-}, l = class extends n {
+}, c = class extends t {
 	constructor(...e) {
-		super(...e), this.heading = "", this.subtitle = "", this.showToggle = !1, this.toggleLabel = "Toggle sidebar", this.dragRegion = !1;
+		super(...e), this.heading = "", this.subtitle = "", this.showToggle = !1, this.expanded = !1, this.toggleLabel = "Toggle sidebar", this.dragRegion = !1;
 	}
 	static {
-		this.styles = r`
+		this.styles = n`
     :host {
       display: flex;
       align-items: center;
@@ -60,13 +59,6 @@ var c = class extends Event {
       outline: 2px solid var(--dc-color-accent, #2563eb);
       outline-offset: 2px;
     }
-    /* At desktop width dp-shell's sidebar is always beside the content: a drawer toggle there
-       would do nothing. */
-    @media ${e} {
-      .toggle {
-        display: none;
-      }
-    }
     .drag-handle {
       flex: 1;
       align-self: stretch;
@@ -83,15 +75,16 @@ var c = class extends Event {
 		super.connectedCallback(), this.setAttribute("role", "banner");
 	}
 	render() {
-		return i`
+		return r`
       <div class="start">
-        ${this.showToggle ? i`<button
+        ${this.showToggle ? r`<button
               class="toggle"
               aria-label=${this.toggleLabel}
-              @click=${() => this.dispatchEvent(new c())}
+              aria-expanded=${this.expanded ? "true" : "false"}
+              @click=${() => this.dispatchEvent(new s())}
             >
               ☰
-            </button>` : a}
+            </button>` : i}
         <span class="title">${this.subtitle || this.heading}</span>
       </div>
       <div class="drag-handle" part="drag-handle"></div>
@@ -99,13 +92,13 @@ var c = class extends Event {
     `;
 	}
 };
-t([s()], l.prototype, "heading", void 0), t([s()], l.prototype, "subtitle", void 0), t([s({
+e([o()], c.prototype, "heading", void 0), e([o()], c.prototype, "subtitle", void 0), e([o({
 	type: Boolean,
 	attribute: "show-toggle"
-})], l.prototype, "showToggle", void 0), t([s({ attribute: "toggle-label" })], l.prototype, "toggleLabel", void 0), t([s({
+})], c.prototype, "showToggle", void 0), e([o({ type: Boolean })], c.prototype, "expanded", void 0), e([o({ attribute: "toggle-label" })], c.prototype, "toggleLabel", void 0), e([o({
 	type: Boolean,
 	reflect: !0,
 	attribute: "drag-region"
-})], l.prototype, "dragRegion", void 0), l = t([o("dp-toolbar")], l);
+})], c.prototype, "dragRegion", void 0), c = e([a("dp-toolbar")], c);
 //#endregion
-export { l as DpToolbar, c as DpToolbarToggleEvent };
+export { c as DpToolbar, s as DpToolbarToggleEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "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",
@@ -77,6 +87,7 @@
     "@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);
 }