@iyulab/desktop-patterns 0.2.0 → 0.3.1

package/README.md

@@ -59,6 +59,32 @@ document.querySelector('dp-toolbar')!.addEventListener('dp-toolbar-toggle', () =
 })
 ```
 
+### Sidebar items: links, groups, icons, actions
+
+```ts
+nav.items = [
+  { id: 'overview', icon: '■', label: 'Overview', href: '/overview' }, // href → rendered as <a>
+  {
+    id: 'work', label: 'Work', collapsed: false,                        // a group: a disclosure over its items
+    items: [{ id: 'runs', icon: '▶', label: 'Runs', href: '/runs' }],
+  },
+]
+nav.bottomItems = [{ id: 'sign-out', icon: '⎋', label: 'Sign out' }]  // actions, not places
+nav.setAttribute('nav-label', 'Main')                                 // names the navigation landmark
+```
+
+- **`href`** renders the item as a link, so a router's link interception (or the browser) does the navigating.
+  `dp-sidebar-select` still fires and is cancelable — `preventDefault()` cancels the navigation and keeps the
+  active item. A modified click (Ctrl/⌘/Shift/Alt, middle button) opens the link elsewhere and selects nothing.
+  Items without `href` stay buttons and the consumer navigates on `dp-sidebar-select`.
+- **Groups** (`{ id, label, items, icon?, collapsed? }`) render as a named `role="group"` under a disclosure
+  button (`aria-expanded`). A group holding the active item is always open. In the collapsed rail every group's
+  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.
+- **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.)
+
 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/shortcut-overlay/dp-shortcut-overlay.d.ts

@@ -25,6 +25,8 @@ export declare class DpShortcutOverlay extends LitElement {
     open: boolean;
     heading: string;
     emptyMessage: string;
+    /** Accessible name of the close button — supply one in the app's language. */
+    closeLabel: string;
     private headingId;
     updated(changed: Map<string, unknown>): void;
     disconnectedCallback(): void;

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

@@ -1,27 +1,65 @@
 import { LitElement } from 'lit';
+/**
+ * One navigation entry. With `href` it renders as a link — a router (or the
+ * browser) does the navigating, exactly as it would for any other anchor on
+ * the page. Without one it renders as a button and the consumer navigates on
+ * `dp-sidebar-select`.
+ */
 export interface SidebarItem {
     id: string;
+    /** Text fallback for the `icon-<id>` slot. */
     icon: string;
     label: string;
+    href?: string;
+}
+/** A named set of items under one disclosure. */
+export interface SidebarGroup {
+    id: string;
+    /** Text fallback for the `icon-<id>` slot. */
+    icon?: string;
+    label: string;
+    items: SidebarItem[];
+    /** Starts closed. A group holding the active item stays open regardless. */
+    collapsed?: boolean;
 }
+export type SidebarEntry = SidebarItem | SidebarGroup;
+/**
+ * Fired when a navigation item is chosen. Cancelable: calling
+ * `preventDefault()` keeps the active item where it was and, for a link,
+ * cancels the navigation too.
+ */
 export declare class DpSidebarSelectEvent 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;
+    constructor(itemId: string);
+}
 /**
- * App-shell navigation rail: an icon+label list with an expanded/collapsed
- * state, an optional pinned bottom group, and a `footer` slot for whatever
- * the consumer wants to anchor at the bottom — a status badge, a version
- * string, anything; this repo doesn't know what.
+ * App-shell navigation rail: an icon+label list (flat, or grouped under
+ * disclosures) with an expanded/collapsed state, an optional pinned group of
+ * bottom actions, and a `footer` slot for whatever the consumer wants to
+ * anchor at the bottom — a status badge, a version string, anything; this
+ * repo doesn't know what.
+ *
+ * Every item's icon is a slot, `icon-<id>`, whose fallback is the item's
+ * `icon` text — so an icon element from any library can stand in for it.
  */
 export declare class DpSidebar extends LitElement {
     #private;
     static styles: import('lit').CSSResult;
-    items: SidebarItem[];
+    items: SidebarEntry[];
+    /** Actions, not places — see `DpSidebarActionEvent`. */
     bottomItems: SidebarItem[];
     activeId: string;
     header: string;
+    /** Accessible name of the navigation landmark. Unset leaves it unnamed. */
+    navLabel: string;
     collapsed: boolean;
+    /** Groups whose open/closed state the user has flipped from their `collapsed` default. */
+    private toggledGroups;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

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

@@ -42,6 +42,8 @@ export declare class DpToolbar extends LitElement {
     heading: string;
     subtitle: string;
     showToggle: boolean;
+    /** Accessible name of the sidebar toggle — supply one in the app's language. */
+    toggleLabel: string;
     dragRegion: boolean;
     connectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;

package/dist/decorate-CafwLXg5.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.151.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);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+//#endregion
+export { e as t };

package/dist/index.js

@@ -1,16 +1,6 @@
-import { DpPage as o } from "./page.js";
-import { DpSidebar as t, DpSidebarSelectEvent as l } from "./sidebar.js";
-import { DpToolbar as a, DpToolbarToggleEvent as S } from "./toolbar.js";
-import { DpShell as v, DpShellSidebarCloseEvent as b } from "./shell.js";
-import { DpShortcutOverlay as i, DpShortcutOverlayDismissEvent as x } from "./shortcut-overlay.js";
-export {
-  o as DpPage,
-  v as DpShell,
-  b as DpShellSidebarCloseEvent,
-  i as DpShortcutOverlay,
-  x as DpShortcutOverlayDismissEvent,
-  t as DpSidebar,
-  l as DpSidebarSelectEvent,
-  a as DpToolbar,
-  S as DpToolbarToggleEvent
-};
+import { DpPage as e } from "./page.js";
+import { DpSidebar as t, DpSidebarActionEvent as n, DpSidebarSelectEvent as r } from "./sidebar.js";
+import { DpToolbar as i, DpToolbarToggleEvent as a } from "./toolbar.js";
+import { DpShell as o, DpShellSidebarCloseEvent as s } from "./shell.js";
+import { DpShortcutOverlay as c, DpShortcutOverlayDismissEvent as l } from "./shortcut-overlay.js";
+export { e as DpPage, o as DpShell, s as DpShellSidebarCloseEvent, c as DpShortcutOverlay, l as DpShortcutOverlayDismissEvent, t as DpSidebar, n as DpSidebarActionEvent, r as DpSidebarSelectEvent, i as DpToolbar, a as DpToolbarToggleEvent };

package/dist/page.js

@@ -1,30 +1,19 @@
-import { css as a, LitElement as m, html as x } from "lit";
-import { property as d, customElement as c } from "lit/decorators.js";
-var h = Object.defineProperty, u = Object.getOwnPropertyDescriptor, n = (l, e, s, r) => {
-  for (var t = r > 1 ? void 0 : r ? u(e, s) : e, p = l.length - 1, i; p >= 0; p--)
-    (i = l[p]) && (t = (r ? i(e, s, t) : i(t)) || t);
-  return r && t && h(e, s, t), t;
-};
-const b = {
-  sm: "672px",
-  md: "768px",
-  lg: "896px",
-  xl: "1152px",
-  full: "none"
-};
-let o = class extends m {
-  constructor() {
-    super(...arguments), this.maxWidth = "md";
-  }
-  render() {
-    return x`
-      <div class="inner" style="max-width: ${b[this.maxWidth]}">
-        <slot></slot>
-      </div>
-    `;
-  }
-};
-o.styles = a`
+import { t as e } from "./decorate-CafwLXg5.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
+var o = {
+	sm: "672px",
+	md: "768px",
+	lg: "896px",
+	xl: "1152px",
+	full: "none"
+}, s = class extends t {
+	constructor(...e) {
+		super(...e), this.maxWidth = "md";
+	}
+	static {
+		this.styles = n`
     :host {
       display: block;
       height: 100%;
@@ -37,12 +26,18 @@ o.styles = a`
       box-sizing: border-box;
     }
   `;
-n([
-  d({ attribute: "max-width", reflect: !0 })
-], o.prototype, "maxWidth", 2);
-o = n([
-  c("dp-page")
-], o);
-export {
-  o as DpPage
+	}
+	render() {
+		return r`
+      <div class="inner" style="max-width: ${o[this.maxWidth]}">
+        <slot></slot>
+      </div>
+    `;
+	}
 };
+e([a({
+	attribute: "max-width",
+	reflect: !0
+})], s.prototype, "maxWidth", void 0), s = e([i("dp-page")], s);
+//#endregion
+export { s as DpPage };

package/dist/shell.js

@@ -1,34 +1,20 @@
-import { css as p, LitElement as c, nothing as b, html as l } from "lit";
-import { property as h, customElement as f } from "lit/decorators.js";
-var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, d = (s, o, t, i) => {
-  for (var e = i > 1 ? void 0 : i ? u(o, t) : o, a = s.length - 1, n; a >= 0; a--)
-    (n = s[a]) && (e = (i ? n(o, t, e) : n(e)) || e);
-  return i && e && m(o, t, e), e;
-};
-class v extends Event {
-  constructor() {
-    super("dp-shell-sidebar-close", { bubbles: !0, composed: !0 });
-  }
-}
-let r = class extends c {
-  constructor() {
-    super(...arguments), this.sidebarOpen = !1;
-  }
-  render() {
-    return l`
-      ${this.sidebarOpen ? l`<div class="backdrop" @click=${() => this.dispatchEvent(new v())}></div>` : b}
-      <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>
-    `;
-  }
-};
-r.styles = p`
+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/shell/dp-shell.ts
+var s = class extends Event {
+	constructor() {
+		super("dp-shell-sidebar-close", {
+			bubbles: !0,
+			composed: !0
+		});
+	}
+}, c = class extends t {
+	constructor(...e) {
+		super(...e), this.sidebarOpen = !1;
+	}
+	static {
+		this.styles = n`
     :host {
       display: flex;
       width: 100vw;
@@ -90,13 +76,25 @@ r.styles = p`
       overflow: auto;
     }
   `;
-d([
-  h({ type: Boolean, reflect: !0, attribute: "sidebar-open" })
-], r.prototype, "sidebarOpen", 2);
-r = d([
-  f("dp-shell")
-], r);
-export {
-  r as DpShell,
-  v as DpShellSidebarCloseEvent
+	}
+	render() {
+		return r`
+      ${this.sidebarOpen ? r`<div class="backdrop" @click=${() => this.dispatchEvent(new s())}></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([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "sidebar-open"
+})], c.prototype, "sidebarOpen", void 0), c = e([a("dp-shell")], c);
+//#endregion
+export { c as DpShell, s as DpShellSidebarCloseEvent };

package/dist/shortcut-overlay.js

@@ -1,68 +1,22 @@
-import { css as x, LitElement as b, nothing as w, html as d } from "lit";
-import { property as l, state as _, customElement as k } from "lit/decorators.js";
-var $ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, g = (e) => {
-  throw TypeError(e);
-}, a = (e, t, r, c) => {
-  for (var s = c > 1 ? void 0 : c ? E(t, r) : t, h = e.length - 1, v; h >= 0; h--)
-    (v = e[h]) && (s = (c ? v(t, r, s) : v(s)) || s);
-  return c && s && $(t, r, s), s;
-}, m = (e, t, r) => t.has(e) || g("Cannot " + r), u = (e, t, r) => (m(e, t, "read from private field"), t.get(e)), y = (e, t, r) => t.has(e) ? g("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), f = (e, t, r) => (m(e, t, "access private method"), r), i, n, p;
-class z extends Event {
-  constructor() {
-    super("dp-shortcut-overlay-dismiss", { bubbles: !0, composed: !0 });
-  }
-}
-let C = 0, o = class extends b {
-  constructor() {
-    super(...arguments), y(this, n), this.shortcuts = [], this.open = !1, this.heading = "Keyboard shortcuts", this.emptyMessage = "No shortcuts registered.", this.headingId = `dp-shortcut-overlay-heading-${++C}`, y(this, i, (e) => {
-      e.key === "Escape" && (e.preventDefault(), f(this, n, p).call(this));
-    });
-  }
-  updated(e) {
-    e.has("open") && (this.open ? window.addEventListener("keydown", u(this, i)) : window.removeEventListener("keydown", u(this, i)));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), window.removeEventListener("keydown", u(this, i));
-  }
-  render() {
-    return this.open ? d`
-      <div class="backdrop" @click=${() => f(this, n, p).call(this)}>
-        <div
-          class="panel"
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby=${this.headingId}
-          @click=${(e) => e.stopPropagation()}
-        >
-          <div class="header">
-            <h2 id=${this.headingId}>${this.heading}</h2>
-            <button class="close" aria-label="Close" @click=${() => f(this, n, p).call(this)}>×</button>
-          </div>
-          <div class="body">
-            ${this.shortcuts.length === 0 ? d`<p class="empty">${this.emptyMessage}</p>` : d`
-                  <ul>
-                    ${this.shortcuts.map(
-      (e) => d`
-                        <li>
-                          <span>${e.description}</span>
-                          <kbd>${e.combo}</kbd>
-                        </li>
-                      `
-    )}
-                  </ul>
-                `}
-          </div>
-        </div>
-      </div>
-    ` : w;
-  }
-};
-i = /* @__PURE__ */ new WeakMap();
-n = /* @__PURE__ */ new WeakSet();
-p = function() {
-  this.dispatchEvent(new z());
-};
-o.styles = x`
+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, state as s } from "lit/decorators.js";
+//#region src/components/shortcut-overlay/dp-shortcut-overlay.ts
+var c = class extends Event {
+	constructor() {
+		super("dp-shortcut-overlay-dismiss", {
+			bubbles: !0,
+			composed: !0
+		});
+	}
+}, 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());
+		};
+	}
+	static {
+		this.styles = n`
     :host {
       display: contents;
       font-family: var(--dc-font-family, system-ui, sans-serif);
@@ -148,25 +102,51 @@ o.styles = x`
       font-size: 10px;
     }
   `;
-a([
-  l({ type: Array })
-], o.prototype, "shortcuts", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "open", 2);
-a([
-  l()
-], o.prototype, "heading", 2);
-a([
-  l({ attribute: "empty-message" })
-], o.prototype, "emptyMessage", 2);
-a([
-  _()
-], o.prototype, "headingId", 2);
-o = a([
-  k("dp-shortcut-overlay")
-], o);
-export {
-  o as DpShortcutOverlay,
-  z as DpShortcutOverlayDismissEvent
+	}
+	#e;
+	updated(e) {
+		e.has("open") && (this.open ? window.addEventListener("keydown", this.#e) : window.removeEventListener("keydown", this.#e));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), window.removeEventListener("keydown", this.#e);
+	}
+	#t() {
+		this.dispatchEvent(new c());
+	}
+	render() {
+		return this.open ? r`
+      <div class="backdrop" @click=${() => this.#t()}>
+        <div
+          class="panel"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby=${this.headingId}
+          @click=${(e) => e.stopPropagation()}
+        >
+          <div class="header">
+            <h2 id=${this.headingId}>${this.heading}</h2>
+            <button class="close" aria-label=${this.closeLabel} @click=${() => this.#t()}>×</button>
+          </div>
+          <div class="body">
+            ${this.shortcuts.length === 0 ? r`<p class="empty">${this.emptyMessage}</p>` : r`
+                  <ul>
+                    ${this.shortcuts.map((e) => r`
+                        <li>
+                          <span>${e.description}</span>
+                          <kbd>${e.combo}</kbd>
+                        </li>
+                      `)}
+                  </ul>
+                `}
+          </div>
+        </div>
+      </div>
+    ` : i;
+	}
 };
+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);
+//#endregion
+export { u as DpShortcutOverlay, c as DpShortcutOverlayDismissEvent };

package/dist/sidebar.js

@@ -1,51 +1,28 @@
-import { css as m, LitElement as x, nothing as c, html as i } from "lit";
-import { property as d, customElement as g } from "lit/decorators.js";
-var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, b = (e) => {
-  throw TypeError(e);
-}, s = (e, t, a, l) => {
-  for (var o = l > 1 ? void 0 : l ? w(t, a) : t, p = e.length - 1, h; p >= 0; p--)
-    (h = e[p]) && (o = (l ? h(t, a, o) : h(o)) || o);
-  return l && o && y(t, a, o), o;
-}, _ = (e, t, a) => t.has(e) || b("Cannot " + a), I = (e, t, a) => t.has(e) ? b("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), v = (e, t, a) => (_(e, t, "access private method"), a), n, f, u;
-class $ extends Event {
-  constructor(t) {
-    super("dp-sidebar-select", { bubbles: !0, composed: !0 }), this.itemId = t;
-  }
-}
-let r = class extends x {
-  constructor() {
-    super(...arguments), I(this, n), this.items = [], this.bottomItems = [], this.activeId = "", this.header = "", this.collapsed = !1;
-  }
-  render() {
-    return i`
-      <div class="header">
-        <slot name="icon"></slot>
-        ${!this.collapsed && this.header ? i`<span class="header-label">${this.header}</span>` : c}
-      </div>
-      <nav>${this.items.map((e) => v(this, n, f).call(this, e))}</nav>
-      ${this.bottomItems.length > 0 ? i`<div class="bottom-group">${this.bottomItems.map((e) => v(this, n, f).call(this, e))}</div>` : c}
-      <div class="footer"><slot name="footer"></slot></div>
-    `;
-  }
-};
-n = /* @__PURE__ */ new WeakSet();
-f = function(e) {
-  const t = e.id === this.activeId;
-  return i`
-      <button
-        title=${this.collapsed ? e.label : c}
-        aria-current=${t ? "page" : c}
-        @click=${() => v(this, n, u).call(this, e.id)}
-      >
-        <span class="icon" aria-hidden="true">${e.icon}</span>
-        ${this.collapsed ? c : i`<span>${e.label}</span>`}
-      </button>
-    `;
-};
-u = function(e) {
-  e !== this.activeId && (this.activeId = e, this.dispatchEvent(new $(e)));
-};
-r.styles = m`
+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, state as s } from "lit/decorators.js";
+//#region src/components/sidebar/dp-sidebar.ts
+var c = (e) => Array.isArray(e.items), l = class extends Event {
+	constructor(e) {
+		super("dp-sidebar-select", {
+			bubbles: !0,
+			composed: !0,
+			cancelable: !0
+		}), this.itemId = e;
+	}
+}, u = class extends Event {
+	constructor(e) {
+		super("dp-sidebar-action", {
+			bubbles: !0,
+			composed: !0
+		}), this.itemId = e;
+	}
+}, d = 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();
+	}
+	static {
+		this.styles = n`
     :host {
       display: flex;
       flex-direction: column;
@@ -89,11 +66,12 @@ r.styles = m`
       border-top: 1px solid var(--dc-color-border, #e2e2e4);
       padding: var(--dc-space-1, 4px) 0;
     }
-    button {
+    .item {
       appearance: none;
       background: none;
       border: none;
       border-left: 2px solid transparent;
+      box-sizing: border-box;
       width: 100%;
       display: flex;
       align-items: center;
@@ -103,12 +81,23 @@ r.styles = m`
       font-size: var(--dc-font-size-sm, 12px);
       color: var(--dc-color-text-secondary, #55555c);
       text-align: left;
+      text-decoration: none;
       cursor: pointer;
     }
-    :host([collapsed]) button {
+    :host([collapsed]) .item {
       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 {
+      padding-left: calc(var(--dc-space-3, 12px) * 2);
+    }
+    /* 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,
+    :host([collapsed]) .group + .item {
+      border-top: 1px solid var(--dc-color-border, #e2e2e4);
+    }
     /* The rail marker keeps the fill accent - it is a 3px bar, judged as a UI
        component (WCAG 1.4.11, 3:1). The label does not: an accent chosen to be
        read as a *fill* is not necessarily readable as 12px text on the hover
@@ -118,15 +107,15 @@ r.styles = m`
        find. --dc-color-accent-text lets a consumer supply the readable
        variant; falling back to the fill accent keeps every existing consumer
        rendering exactly as before. */
-    button[aria-current='page'] {
+    .item[aria-current='page'] {
       border-left-color: var(--dc-color-accent, #2563eb);
       color: var(--dc-color-accent-text, var(--dc-color-accent, #2563eb));
       font-weight: var(--dc-font-weight-medium, 500);
     }
-    button:hover {
+    .item:hover {
       background: var(--dc-color-surface-hover, #ececed);
     }
-    button:focus-visible {
+    .item:focus-visible {
       outline: 2px solid var(--dc-color-accent, #2563eb);
       outline-offset: -2px;
     }
@@ -135,29 +124,105 @@ r.styles = m`
       width: 1.25em;
       text-align: center;
     }
+    .caret {
+      margin-left: auto;
+      transition: transform 0.15s;
+    }
+    .group-toggle[aria-expanded='false'] .caret {
+      transform: rotate(-90deg);
+    }
     .footer {
       border-top: 1px solid var(--dc-color-border, #e2e2e4);
     }
   `;
-s([
-  d({ type: Array })
-], r.prototype, "items", 2);
-s([
-  d({ type: Array, attribute: "bottom-items" })
-], r.prototype, "bottomItems", 2);
-s([
-  d({ attribute: "active-id" })
-], r.prototype, "activeId", 2);
-s([
-  d()
-], r.prototype, "header", 2);
-s([
-  d({ type: Boolean, reflect: !0 })
-], r.prototype, "collapsed", 2);
-r = s([
-  g("dp-sidebar")
-], r);
-export {
-  r as DpSidebar,
-  $ as DpSidebarSelectEvent
+	}
+	render() {
+		return r`
+      <div class="header">
+        <slot name="icon"></slot>
+        ${!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))}
+      </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}`;
+		return r`
+      <div class="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 ?? "")}
+              <span class="label">${e.label}</span>
+              <span class="caret" aria-hidden="true">▾</span>
+            </button>`}
+        <div class="group-items" id=${o} role="group" aria-label=${e.label} ?hidden=${!a}>
+          ${e.items.map((e) => this.#t(e))}
+        </div>
+      </div>
+    `;
+	}
+	#t(e) {
+		let t = e.id === this.activeId, n = r`
+      ${this.#r(e.id, e.icon)} ${this.collapsed ? i : r`<span class="label">${e.label}</span>`}
+    `;
+		return e.href === void 0 ? r`<button
+          class="item"
+          title=${this.collapsed ? e.label : i}
+          aria-current=${t ? "page" : i}
+          @click=${(t) => this.#i(t, e)}
+        >
+          ${n}
+        </button>` : r`<a
+          class="item"
+          href=${e.href}
+          title=${this.collapsed ? e.label : i}
+          aria-current=${t ? "page" : i}
+          @click=${(t) => this.#i(t, e)}
+          >${n}</a
+        >`;
+	}
+	#n(e) {
+		return r`
+      <button
+        class="item"
+        title=${this.collapsed ? e.label : i}
+        @click=${() => this.dispatchEvent(new u(e.id))}
+      >
+        ${this.#r(e.id, e.icon)} ${this.collapsed ? i : r`<span class="label">${e.label}</span>`}
+      </button>
+    `;
+	}
+	#r(e, t) {
+		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;
+			}
+			this.activeId = t.id;
+		}
+	}
+	#a(e) {
+		let t = new Set(this.toggledGroups);
+		t.delete(e) || t.add(e), this.toggledGroups = t;
+	}
 };
+e([o({ type: Array })], d.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({
+	type: Boolean,
+	reflect: !0
+})], d.prototype, "collapsed", void 0), e([s()], d.prototype, "toggledGroups", void 0), d = e([a("dp-sidebar")], d);
+//#endregion
+export { d as DpSidebar, u as DpSidebarActionEvent, l as DpSidebarSelectEvent };

package/dist/toolbar.js

@@ -1,40 +1,20 @@
-import { css as p, LitElement as g, nothing as h, html as d } from "lit";
-import { property as s, customElement as v } from "lit/decorators.js";
-var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (l, r, i, a) => {
-  for (var e = a > 1 ? void 0 : a ? b(r, i) : r, n = l.length - 1, c; n >= 0; n--)
-    (c = l[n]) && (e = (a ? c(r, i, e) : c(e)) || e);
-  return a && e && f(r, i, e), e;
-};
-class u extends Event {
-  constructor() {
-    super("dp-toolbar-toggle", { bubbles: !0, composed: !0 });
-  }
-}
-let t = class extends g {
-  constructor() {
-    super(...arguments), this.heading = "", this.subtitle = "", this.showToggle = !1, this.dragRegion = !1;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "banner");
-  }
-  render() {
-    return d`
-      <div class="start">
-        ${this.showToggle ? d`<button
-              class="toggle"
-              aria-label="Toggle sidebar"
-              @click=${() => this.dispatchEvent(new u())}
-            >
-              ☰
-            </button>` : h}
-        <span class="title">${this.subtitle || this.heading}</span>
-      </div>
-      <div class="drag-handle" part="drag-handle"></div>
-      <div class="actions"><slot name="actions"></slot></div>
-    `;
-  }
-};
-t.styles = p`
+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 s = class extends Event {
+	constructor() {
+		super("dp-toolbar-toggle", {
+			bubbles: !0,
+			composed: !0
+		});
+	}
+}, c = class extends t {
+	constructor(...e) {
+		super(...e), this.heading = "", this.subtitle = "", this.showToggle = !1, this.toggleLabel = "Toggle sidebar", this.dragRegion = !1;
+	}
+	static {
+		this.styles = n`
     :host {
       display: flex;
       align-items: center;
@@ -90,22 +70,34 @@ t.styles = p`
       gap: var(--dc-space-3, 12px);
     }
   `;
-o([
-  s()
-], t.prototype, "heading", 2);
-o([
-  s()
-], t.prototype, "subtitle", 2);
-o([
-  s({ type: Boolean, attribute: "show-toggle" })
-], t.prototype, "showToggle", 2);
-o([
-  s({ type: Boolean, reflect: !0, attribute: "drag-region" })
-], t.prototype, "dragRegion", 2);
-t = o([
-  v("dp-toolbar")
-], t);
-export {
-  t as DpToolbar,
-  u as DpToolbarToggleEvent
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.setAttribute("role", "banner");
+	}
+	render() {
+		return r`
+      <div class="start">
+        ${this.showToggle ? r`<button
+              class="toggle"
+              aria-label=${this.toggleLabel}
+              @click=${() => this.dispatchEvent(new s())}
+            >
+              ☰
+            </button>` : i}
+        <span class="title">${this.subtitle || this.heading}</span>
+      </div>
+      <div class="drag-handle" part="drag-handle"></div>
+      <div class="actions"><slot name="actions"></slot></div>
+    `;
+	}
 };
+e([o()], c.prototype, "heading", void 0), e([o()], c.prototype, "subtitle", void 0), e([o({
+	type: Boolean,
+	attribute: "show-toggle"
+})], c.prototype, "showToggle", void 0), e([o({ attribute: "toggle-label" })], c.prototype, "toggleLabel", void 0), e([o({
+	type: Boolean,
+	reflect: !0,
+	attribute: "drag-region"
+})], c.prototype, "dragRegion", void 0), c = e([a("dp-toolbar")], c);
+//#endregion
+export { c as DpToolbar, s as DpToolbarToggleEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -57,23 +57,23 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "lit": "^3.2.1"
+    "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@iyulab/desktop-compact": "^0.2.0 || ^0.3.0"
+    "@iyulab/desktop-compact": "^0.2.0 || ^0.3.0 || ^0.4.0 || ^0.5.0"
   },
   "devDependencies": {
-    "@iyulab/desktop-compact": "^0.3.0",
-    "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-essentials": "^8.3.0",
-    "@storybook/web-components": "^8.3.0",
-    "@storybook/web-components-vite": "^8.3.0",
+    "@iyulab/desktop-compact": "^0.5.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",
-    "@web/dev-server-esbuild": "^1.0.2",
-    "@web/test-runner": "^0.19.0",
-    "storybook": "^8.3.0",
-    "typescript": "^5.6.3",
-    "vite": "^5.4.10",
-    "vite-plugin-dts": "^4.2.4"
+    "@web/dev-server-esbuild": "^2.0.0",
+    "@web/test-runner": "^1.0.0",
+    "axe-core": "^4.13.0",
+    "storybook": "^10.6.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.1",
+    "vite-plugin-dts": "^5.1.1"
   }
 }