@iyulab/desktop-patterns 0.8.0 → 0.10.0

package/README.md

@@ -115,7 +115,10 @@ nav.items = [
   },
 ]
 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.bottomItems = [
+  { id: 'dense', icon: '▤', label: 'Dense mode', pressed: false },    // a toggle: aria-pressed, owned by you
+  { id: 'sign-out', icon: '⎋', label: 'Sign out' },                    // actions, not places
+]
 nav.setAttribute('nav-label', 'Main')                                 // names the navigation landmark
 ```
 
@@ -136,6 +139,11 @@ nav.setAttribute('nav-label', 'Main')                                 // names t
   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.)
+- **Toggle actions**: a bottom action with `pressed` (`{ id, icon, label, pressed: true | false }`) is a setting it
+  turns on and off. The button carries `aria-pressed`, and an on toggle gets a quiet ground and an accent icon
+  (`--dp-sidebar-pressed-bg`, `--dp-sidebar-pressed-icon-color`) that still shows in the collapsed rail. Name it after
+  the setting ("Dense mode"), not the click ("Turn dense mode on"). The sidebar does not flip it — change the value
+  on `dp-sidebar-action` and set `bottomItems` again.
 
 Every component takes its user-facing text as a plain attribute/property or slot — there is no
 built-in i18n layer. See each component's Storybook story (`npm run storybook`) for its full API.

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/sidebar/dp-sidebar.d.ts

@@ -12,6 +12,19 @@ export interface SidebarItem {
     label: string;
     href?: string;
 }
+/**
+ * One bottom action. With `pressed` it is a toggle — a setting the action turns on and off (a dense
+ * or touch mode, a theme): the button carries `aria-pressed` and, when on, a quiet ground and an accent
+ * icon. Its `label` then names the setting, not what a click would do. The sidebar does not flip it;
+ * the consumer owns the state, changes it on `dp-sidebar-action`, and passes the new value back.
+ */
+export interface SidebarAction {
+    id: string;
+    /** Text fallback for the `icon-<id>` slot. */
+    icon: string;
+    label: string;
+    pressed?: boolean;
+}
 /** A named set of items under one disclosure. */
 export interface SidebarGroup {
     id: string;
@@ -68,7 +81,7 @@ export declare class DpSidebar extends LitElement {
      */
     pinnedItems: SidebarItem[];
     /** Actions, not places — see `DpSidebarActionEvent`. A place belongs in `pinnedItems`. */
-    bottomItems: SidebarItem[];
+    bottomItems: SidebarAction[];
     activeId: string;
     header: string;
     /** Accessible name of the navigation landmark. Unset leaves it unnamed. */

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,
@@ -137,6 +146,17 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
     .item[aria-current='page']:hover {
       background: var(--dc-selection-bg, var(--dc-color-surface-hover, #ececed));
     }
+    /* A toggle that is on. Not a place, so not the rail marker or the current-page colour of the label:
+       a quiet ground (--dp-sidebar-pressed-bg) and the accent on the icon, so it still reads in the
+       collapsed rail, where only the icon shows. Declared after :hover so hovering keeps the ground. */
+    .item[aria-pressed='true'],
+    .item[aria-pressed='true']:hover {
+      background: var(--dp-sidebar-pressed-bg, var(--dc-selection-bg, var(--dc-color-surface-hover, #ececed)));
+      color: var(--dc-color-text, #1d1d1f);
+    }
+    .item[aria-pressed='true'] .icon {
+      color: var(--dp-sidebar-pressed-icon-color, var(--dc-color-accent-text, var(--dc-color-accent, #2563eb)));
+    }
     .item:focus-visible {
       outline: 2px solid var(--dc-color-accent, #2563eb);
       outline-offset: -2px;
@@ -175,16 +195,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>`}
@@ -219,6 +239,7 @@ var c = (e) => Array.isArray(e.items), l = class extends Event {
       <button
         class="item"
         title=${this.collapsed ? e.label : i}
+        aria-pressed=${e.pressed === void 0 ? i : e.pressed ? "true" : "false"}
         @click=${() => this.dispatchEvent(new d(e.id))}
       >
         ${this.#r(e.id, e.icon)} ${this.collapsed ? i : r`<span class="label">${e.label}</span>`}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.8.0",
+  "version": "0.10.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;