@iyulab/desktop-patterns 0.4.0 → 0.5.0

package/README.md

@@ -51,22 +51,39 @@ document.querySelector<HTMLElementTagNameMap['dp-sidebar']>('#nav')!.items = [
   { id: 'overview', icon: '■', label: 'Overview' },
 ]
 
+import { desktopMinWidth } from '@iyulab/desktop-patterns'
+
 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
+  sync()
 })
-document.querySelector('dp-toolbar')!.addEventListener('dp-toolbar-toggle', () => {
-  shell.sidebarOpen = !shell.sidebarOpen
+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)) // backdrop, Escape
+shell.addEventListener('dp-shell-sidebar-close', () => { shell.sidebarOpen = false; sync() }) // backdrop, Escape
 ```
 
-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.
+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.
 
 ### Sidebar items: links, groups, icons, actions
 
@@ -136,7 +153,7 @@ dp-toolbar[drag-region]::part(drag-handle) {
 |---|---|
 | `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-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/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/dp-shell-CvV92B8B.js

@@ -0,0 +1,108 @@
+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 };

package/dist/index.js

@@ -1,7 +1,6 @@
-import { n as e, t } from "./breakpoints-BjS_v3PV.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 { 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 { DpToolbar as c, DpToolbarToggleEvent as l } from "./toolbar.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 };
+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 };

package/dist/shell.js

@@ -1,109 +1,2 @@
-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";
-//#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 };
+import { n as e, t } from "./dp-shell-CvV92B8B.js";
+export { t as DpShell, e as DpShellSidebarCloseEvent };

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.5.0",
   "type": "module",
   "license": "MIT",
   "repository": {

package/dist/breakpoints-BjS_v3PV.js

@@ -1,5 +0,0 @@
-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 };