@iyulab/desktop-patterns 0.8.0 → 0.9.0

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/list-detail.js

@@ -5,7 +5,7 @@ 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/sidebar.js

@@ -105,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,
@@ -175,16 +184,16 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
     `;
 	}
 	#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>`}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -82,10 +82,10 @@
     "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",

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;