@iyulab/desktop-patterns 0.7.2 → 0.9.0

package/README.md

@@ -114,6 +114,7 @@ nav.items = [
     items: [{ id: 'runs', icon: '▶', label: 'Runs', href: '/runs' }],
   },
 ]
+nav.pinnedItems = [{ id: 'settings', icon: '⚙', label: 'Settings' }]   // places kept at the foot of the rail
 nav.bottomItems = [{ id: 'sign-out', icon: '⎋', label: 'Sign out' }]  // actions, not places
 nav.setAttribute('nav-label', 'Main')                                 // names the navigation landmark
 ```
@@ -130,6 +131,9 @@ nav.setAttribute('nav-label', 'Main')                                 // names t
 - **`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.
+- **Pinned places** (`pinnedItems`) sit at the foot of the rail, inside the same navigation landmark and outside
+  the scrolling list. They are places like `items` — `dp-sidebar-select`, `aria-current`, `href` all apply — so a
+  settings or help page shown there is marked as the current page.
 - **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.)
 
@@ -200,6 +204,10 @@ npm run build          # per-component ESM output, type declarations
 npm run storybook      # interactive component browser
 ```
 
+`tsc` is TypeScript 7 (`@typescript/native`), while `typescript` resolves to `@typescript/typescript6`:
+TypeScript 7 has no JavaScript compiler API yet, and the declaration build reads one. The alias goes
+once `vite-plugin-dts` runs on TypeScript 7 alone.
+
 `@iyulab/desktop-compact` is a **peer** dependency: this package reads its `--dc-*` tokens but never
 imports its code, so the consumer installs one copy and both packages share it. A regular dependency
 would give a consumer on a newer `desktop-compact` minor a second, unused copy nested under this

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

@@ -16,6 +16,12 @@ 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;
+    /**
+     * At desktop width, fold the list away and give the item the whole width — for reading a wide item. The
+     * consumer owns it, with a control that brings the list back. Below desktop width it changes nothing:
+     * `detail-open` already picks the one pane shown.
+     */
+    listCollapsed: boolean;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/page-header/dp-page-header.d.ts

@@ -3,7 +3,8 @@ import { LitElement } from 'lit';
  * The top of a page or of a detail pane: a small eyebrow naming where you are, the heading (an
  * `<h2>`), a line describing it, and the page's own actions — ruled off from what follows. It
  * stands on its own rather than being part of `dp-page`, so a pane inside a page can have one.
- * Container-sized: the actions sit beside the heading when there is room and drop under it when not.
+ * The heading keeps a readable width: the actions sit beside it when there is room and wrap under it
+ * when not, however wide they are, so a heading is never squeezed to a column of single letters.
  */
 export declare class DpPageHeader extends LitElement {
     static styles: import('lit').CSSResult;

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

@@ -61,7 +61,13 @@ export declare class DpSidebar extends LitElement {
     #private;
     static styles: import('lit').CSSResult;
     items: SidebarEntry[];
-    /** Actions, not places — see `DpSidebarActionEvent`. */
+    /**
+     * Places pinned to the foot of the rail — a settings or help page an app keeps out of its main
+     * list. They are navigation like `items` (same `dp-sidebar-select`, `aria-current`, links) and
+     * sit inside the same landmark, below the scrolling list.
+     */
+    pinnedItems: SidebarItem[];
+    /** Actions, not places — see `DpSidebarActionEvent`. A place belongs in `pinnedItems`. */
     bottomItems: SidebarItem[];
     activeId: string;
     header: string;

package/dist/{decorate-CafwLXg5.js → decorate-BJVyhdRd.js}

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.152.0/helpers/esm/decorate.js
 function e(e, t, n, r) {
 	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
 	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);

package/dist/list-detail.js

@@ -1,11 +1,11 @@
 import { desktopMedia as e } from "./breakpoints.js";
-import { t } from "./decorate-CafwLXg5.js";
+import { t } from "./decorate-BJVyhdRd.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;
+		super(...e), this.detailOpen = !1, this.listCollapsed = !1;
 	}
 	static {
 		this.styles = r`
@@ -46,6 +46,11 @@ var s = class extends n {
       .detail {
         display: block;
       }
+      /* Folded away: the item takes the whole width until the list is wanted again. */
+      :host([list-collapsed]) .list,
+      :host([list-collapsed][detail-open]) .list {
+        display: none;
+      }
     }
     /* On paper only the item picked is printed, at its full length. */
     @media print {
@@ -75,6 +80,10 @@ t([o({
 	type: Boolean,
 	reflect: !0,
 	attribute: "detail-open"
-})], s.prototype, "detailOpen", void 0), s = t([a("dp-list-detail")], s);
+})], s.prototype, "detailOpen", void 0), t([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "list-collapsed"
+})], s.prototype, "listCollapsed", void 0), s = t([a("dp-list-detail")], s);
 //#endregion
 export { s as DpListDetail };

package/dist/page-header.js

@@ -1,4 +1,4 @@
-import { t as e } from "./decorate-CafwLXg5.js";
+import { t as e } from "./decorate-BJVyhdRd.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/page-header/dp-page-header.ts
@@ -15,22 +15,29 @@ var s = class extends t {
       border-bottom: 1px solid var(--dc-page-rule, var(--dc-color-border, #e2e2e4));
       font-family: var(--dc-font-family, system-ui, sans-serif);
     }
-    .grid {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-      column-gap: var(--dc-space-4, 16px);
-      row-gap: var(--dc-space-1, 4px);
+    /* The heading claims a readable width first; actions that do not fit beside it wrap under it. */
+    .row {
+      display: flex;
+      flex-wrap: wrap;
       align-items: center;
+      gap: var(--dc-space-1, 4px) var(--dc-space-4, 16px);
+    }
+    .main {
+      flex: 1 1 20em;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--dc-space-1, 4px);
     }
     .eyebrow {
-      grid-column: 1 / -1;
+      display: block;
+      margin-bottom: var(--dc-space-1, 4px);
       font-size: var(--dc-page-eyebrow-size, var(--dc-font-size-xs, 11px));
       font-weight: var(--dc-font-weight-semibold, 600);
       letter-spacing: 0.04em;
       color: var(--dc-page-eyebrow-color, var(--dc-color-accent-text, #1d4ed8));
     }
     .title {
-      grid-column: 1;
       display: flex;
       flex-wrap: wrap;
       align-items: center;
@@ -46,29 +53,22 @@ var s = class extends t {
       overflow-wrap: anywhere;
     }
     .description {
-      grid-column: 1;
       margin: 0;
       color: var(--dc-page-description-color, var(--dc-color-text-secondary, #55555c));
     }
     .actions {
-      grid-column: 2;
-      grid-row: 2 / span 2;
+      flex: 0 1 auto;
+      margin-inline-start: auto;
       display: flex;
       flex-wrap: wrap;
       gap: var(--dc-space-2, 8px);
       align-items: center;
       justify-content: flex-end;
     }
-    :host(:not([eyebrow])) .actions,
-    :host([eyebrow='']) .actions {
-      grid-row: 1 / span 2;
-    }
     @container (max-width: 480px) {
-      .actions,
-      :host(:not([eyebrow])) .actions,
-      :host([eyebrow='']) .actions {
-        grid-column: 1;
-        grid-row: auto;
+      .actions {
+        flex-basis: 100%;
+        margin-inline-start: 0;
         justify-content: flex-start;
         margin-top: var(--dc-space-2, 8px);
       }
@@ -76,12 +76,14 @@ var s = class extends t {
   `;
 	}
 	render() {
-		return r`<div class="grid">
-      ${this.eyebrow ? r`<span class="eyebrow">${this.eyebrow}</span>` : i}
-      <div class="title"><h2 part="heading">${this.heading}</h2><slot name="heading-extra"></slot></div>
-      ${this.description ? r`<p class="description">${this.description}</p>` : i}
-      <div class="actions"><slot name="actions"></slot></div>
-    </div>`;
+		return r`${this.eyebrow ? r`<span class="eyebrow">${this.eyebrow}</span>` : i}
+      <div class="row">
+        <div class="main">
+          <div class="title"><h2 part="heading">${this.heading}</h2><slot name="heading-extra"></slot></div>
+          ${this.description ? r`<p class="description">${this.description}</p>` : i}
+        </div>
+        <div class="actions"><slot name="actions"></slot></div>
+      </div>`;
 	}
 };
 e([o({ reflect: !0 })], s.prototype, "eyebrow", void 0), e([o()], s.prototype, "heading", void 0), e([o()], s.prototype, "description", void 0), s = e([a("dp-page-header")], s);

package/dist/page.js

@@ -1,4 +1,4 @@
-import { t as e } from "./decorate-CafwLXg5.js";
+import { t as e } from "./decorate-BJVyhdRd.js";
 import { LitElement as t, css as n, html as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
 //#region src/components/page/dp-page.ts

package/dist/shell.js

@@ -1,5 +1,5 @@
 import { desktopMedia as e } from "./breakpoints.js";
-import { t } from "./decorate-CafwLXg5.js";
+import { t } from "./decorate-BJVyhdRd.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

package/dist/shortcut-overlay.js

@@ -1,4 +1,4 @@
-import { t as e } from "./decorate-CafwLXg5.js";
+import { t as e } from "./decorate-BJVyhdRd.js";
 import { LitElement as t, css as n, html as r, nothing as i } from "lit";
 import { customElement as a, property as o, state as s } from "lit/decorators.js";
 //#region src/components/shortcut-overlay/dp-shortcut-overlay.ts

package/dist/sidebar.js

@@ -1,4 +1,4 @@
-import { t as e } from "./decorate-CafwLXg5.js";
+import { t as e } from "./decorate-BJVyhdRd.js";
 import { LitElement as t, css as n, html as r, nothing as i } from "lit";
 import { customElement as a, property as o, state as s } from "lit/decorators.js";
 //#region src/components/sidebar/dp-sidebar.ts
@@ -26,7 +26,7 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
 	}
 }, 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();
+		super(...e), this.items = [], this.pinnedItems = [], this.bottomItems = [], this.activeId = "", this.header = "", this.navLabel = "", this.collapsed = !1, this.toggledGroups = /* @__PURE__ */ new Set();
 	}
 	static {
 		this.styles = n`
@@ -63,10 +63,22 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
       color: var(--dc-color-text-secondary, #55555c);
     }
     nav {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+    }
+    .nav-items {
       flex: 1;
       overflow-y: auto;
       padding: var(--dc-space-1, 4px) 0;
     }
+    /* Places pinned to the foot of the rail stay in view however long the list above scrolls. */
+    .pinned {
+      flex-shrink: 0;
+      border-top: 1px solid var(--dc-color-border, #e2e2e4);
+      padding: var(--dc-space-1, 4px) 0;
+    }
     .bottom-group {
       border-top: 1px solid var(--dc-color-border, #e2e2e4);
       padding: var(--dc-space-1, 4px) 0;
@@ -93,10 +105,19 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
       justify-content: center;
       padding: var(--dc-space-3, 12px) 0;
     }
-    /* Items inside an open group sit one step in, so the group reads as a set. */
-    :host(:not([collapsed])) .group-items .item {
+    /* A group with an icon is a parent item: its items sit one step in, so it reads as a set. */
+    :host(:not([collapsed])) .group:not(.heading) .group-items .item {
       padding-left: calc(var(--dc-space-3, 12px) * 2);
     }
+    /* A group without one is a heading over its items: smaller and quieter than they are, its label flush
+       with their icons, and the items at the rail's own indent - the heading, not an indent, makes the set. */
+    .group.heading > .group-toggle {
+      padding-top: var(--dc-space-3, 12px);
+      padding-bottom: var(--dc-space-1, 4px);
+      font-size: var(--dp-sidebar-group-size, var(--dc-font-size-xs, 11px));
+      font-weight: var(--dc-font-weight-semibold, 600);
+      color: var(--dc-color-text-muted, #6b6b73);
+    }
     /* In the collapsed rail a group has no label to show; a rule marks where it starts. */
     :host([collapsed]) .group + .group,
     :host([collapsed]) .item + .group,
@@ -153,23 +174,26 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
         ${!this.collapsed && this.header ? r`<span class="header-label">${this.header}</span>` : i}
       </div>
       <nav aria-label=${this.navLabel || i}>
-        ${this.items.map((e) => c(e) ? this.#e(e) : this.#t(e))}
+        <div class="nav-items">
+          ${this.items.map((e) => c(e) ? this.#e(e) : this.#t(e))}
+        </div>
+        ${this.pinnedItems.length > 0 ? r`<div class="pinned">${this.pinnedItems.map((e) => this.#t(e))}</div>` : i}
       </nav>
       ${this.bottomItems.length > 0 ? r`<div class="bottom-group">${this.bottomItems.map((e) => this.#n(e))}</div>` : i}
       <div class="footer"><slot name="footer"></slot></div>
     `;
 	}
 	#e(e) {
-		let t = e.items.some((e) => e.id === this.activeId), n = e.collapsed === !0, a = this.collapsed || t || n === this.toggledGroups.has(e.id), o = `group-${e.id}`;
+		let t = e.items.some((e) => e.id === this.activeId), n = e.collapsed === !0, a = this.collapsed || t || n === this.toggledGroups.has(e.id), o = `group-${e.id}`, s = !e.icon;
 		return r`
-      <div class="group">
+      <div class=${s ? "group heading" : "group"}>
         ${this.collapsed ? i : r`<button
               class="item group-toggle"
               aria-expanded=${a ? "true" : "false"}
               aria-controls=${o}
               @click=${() => this.#a(e.id)}
             >
-              ${this.#r(e.id, e.icon ?? "")}
+              ${s ? i : this.#r(e.id, e.icon ?? "")}
               <span class="label">${e.label}</span>
               <span class="caret" aria-hidden="true">▾</span>
             </button>`}
@@ -231,6 +255,9 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
 	}
 };
 e([o({ type: Array })], f.prototype, "items", void 0), e([o({
+	type: Array,
+	attribute: "pinned-items"
+})], f.prototype, "pinnedItems", void 0), e([o({
 	type: Array,
 	attribute: "bottom-items"
 })], 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({

package/dist/toolbar.js

@@ -1,4 +1,4 @@
-import { t as e } from "./decorate-CafwLXg5.js";
+import { t as e } from "./decorate-BJVyhdRd.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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -82,21 +82,22 @@
     "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 || ^0.9.0 || ^0.10.0 || ^0.11.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 || ^0.10.0 || ^0.11.0 || ^0.12.0"
   },
   "devDependencies": {
-    "@iyulab/desktop-compact": "^0.11.0",
+    "@iyulab/desktop-compact": "^0.12.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",
+    "@typescript/native": "npm:typescript@^7.0.2",
     "@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",
+    "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.3.1",
-    "vite-plugin-dts": "^5.1.1"
+    "vite-plugin-dts": "^5.1.2"
   }
 }

package/tokens.css

@@ -22,6 +22,11 @@
   syntax: '*';
   inherits: true;
 }
+/* dp-sidebar's heading size for a group without an icon. Unset, the sidebar uses var(--dc-font-size-xs, 11px). */
+@property --dp-sidebar-group-size {
+  syntax: '*';
+  inherits: true;
+}
 :root {
   --dp-sidebar-width: 220px;
   --dp-sidebar-width-collapsed: 52px;