@iyulab/desktop-patterns 0.3.0 → 0.3.2

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,17 +1,6 @@
-import { DpPage as o } from "./page.js";
-import { DpSidebar as p, DpSidebarActionEvent as l, DpSidebarSelectEvent as D } from "./sidebar.js";
-import { DpToolbar as S, DpToolbarToggleEvent as i } from "./toolbar.js";
-import { DpShell as b, DpShellSidebarCloseEvent as m } from "./shell.js";
-import { DpShortcutOverlay as f, DpShortcutOverlayDismissEvent as x } from "./shortcut-overlay.js";
-export {
-  o as DpPage,
-  b as DpShell,
-  m as DpShellSidebarCloseEvent,
-  f as DpShortcutOverlay,
-  x as DpShortcutOverlayDismissEvent,
-  p as DpSidebar,
-  l as DpSidebarActionEvent,
-  D as DpSidebarSelectEvent,
-  S as DpToolbar,
-  i 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 m, LitElement as x, nothing as w, html as l } from "lit";
-import { property as n, state as _, customElement as k } from "lit/decorators.js";
-var $ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, g = (e) => {
-  throw TypeError(e);
-}, a = (e, t, o, d) => {
-  for (var s = d > 1 ? void 0 : d ? E(t, o) : t, h = e.length - 1, v; h >= 0; h--)
-    (v = e[h]) && (s = (d ? v(t, o, s) : v(s)) || s);
-  return d && s && $(t, o, s), s;
-}, b = (e, t, o) => t.has(e) || g("Cannot " + o), u = (e, t, o) => (b(e, t, "read from private field"), t.get(e)), y = (e, t, o) => t.has(e) ? g("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, o), f = (e, t, o) => (b(e, t, "access private method"), o), i, c, p;
-class z extends Event {
-  constructor() {
-    super("dp-shortcut-overlay-dismiss", { bubbles: !0, composed: !0 });
-  }
-}
-let C = 0, r = class extends x {
-  constructor() {
-    super(...arguments), y(this, c), this.shortcuts = [], this.open = !1, this.heading = "Keyboard shortcuts", this.emptyMessage = "No shortcuts registered.", this.closeLabel = "Close", this.headingId = `dp-shortcut-overlay-heading-${++C}`, y(this, i, (e) => {
-      e.key === "Escape" && (e.preventDefault(), f(this, c, 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 ? l`
-      <div class="backdrop" @click=${() => f(this, c, 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=${this.closeLabel} @click=${() => f(this, c, p).call(this)}>×</button>
-          </div>
-          <div class="body">
-            ${this.shortcuts.length === 0 ? l`<p class="empty">${this.emptyMessage}</p>` : l`
-                  <ul>
-                    ${this.shortcuts.map(
-      (e) => l`
-                        <li>
-                          <span>${e.description}</span>
-                          <kbd>${e.combo}</kbd>
-                        </li>
-                      `
-    )}
-                  </ul>
-                `}
-          </div>
-        </div>
-      </div>
-    ` : w;
-  }
-};
-i = /* @__PURE__ */ new WeakMap();
-c = /* @__PURE__ */ new WeakSet();
-p = function() {
-  this.dispatchEvent(new z());
-};
-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/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,28 +102,51 @@ r.styles = m`
       font-size: 10px;
     }
   `;
-a([
-  n({ type: Array })
-], r.prototype, "shortcuts", 2);
-a([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "open", 2);
-a([
-  n()
-], r.prototype, "heading", 2);
-a([
-  n({ attribute: "empty-message" })
-], r.prototype, "emptyMessage", 2);
-a([
-  n({ attribute: "close-label" })
-], r.prototype, "closeLabel", 2);
-a([
-  _()
-], r.prototype, "headingId", 2);
-r = a([
-  k("dp-shortcut-overlay")
-], r);
-export {
-  r 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,110 +1,28 @@
-import { css as $, LitElement as w, nothing as i, html as s } from "lit";
-import { property as h, state as _, customElement as I } from "lit/decorators.js";
-var k = Object.defineProperty, A = Object.getOwnPropertyDescriptor, m = (e) => {
-  throw TypeError(e);
-}, d = (e, t, a, r) => {
-  for (var c = r > 1 ? void 0 : r ? A(t, a) : t, p = e.length - 1, v; p >= 0; p--)
-    (v = e[p]) && (c = (r ? v(t, a, c) : v(c)) || c);
-  return r && c && k(t, a, c), c;
-}, E = (e, t, a) => t.has(e) || m("Cannot " + a), G = (e, t, a) => t.has(e) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, a), l = (e, t, a) => (E(e, t, "access private method"), a), o, g, f, x, u, b, y;
-const S = (e) => Array.isArray(e.items);
-class D extends Event {
-  constructor(t) {
-    super("dp-sidebar-select", { bubbles: !0, composed: !0, cancelable: !0 }), this.itemId = t;
-  }
-}
-class z extends Event {
-  constructor(t) {
-    super("dp-sidebar-action", { bubbles: !0, composed: !0 }), this.itemId = t;
-  }
-}
-let n = class extends w {
-  constructor() {
-    super(...arguments), G(this, o), this.items = [], this.bottomItems = [], this.activeId = "", this.header = "", this.navLabel = "", this.collapsed = !1, this.toggledGroups = /* @__PURE__ */ new Set();
-  }
-  render() {
-    return s`
-      <div class="header">
-        <slot name="icon"></slot>
-        ${!this.collapsed && this.header ? s`<span class="header-label">${this.header}</span>` : i}
-      </div>
-      <nav aria-label=${this.navLabel || i}>
-        ${this.items.map((e) => S(e) ? l(this, o, g).call(this, e) : l(this, o, f).call(this, e))}
-      </nav>
-      ${this.bottomItems.length > 0 ? s`<div class="bottom-group">${this.bottomItems.map((e) => l(this, o, x).call(this, e))}</div>` : i}
-      <div class="footer"><slot name="footer"></slot></div>
-    `;
-  }
-};
-o = /* @__PURE__ */ new WeakSet();
-g = function(e) {
-  const t = e.items.some((p) => p.id === this.activeId), a = e.collapsed === !0, r = this.collapsed || t || a === this.toggledGroups.has(e.id), c = `group-${e.id}`;
-  return s`
-      <div class="group">
-        ${this.collapsed ? i : s`<button
-              class="item group-toggle"
-              aria-expanded=${r ? "true" : "false"}
-              aria-controls=${c}
-              @click=${() => l(this, o, y).call(this, e.id)}
-            >
-              ${l(this, o, u).call(this, e.id, e.icon ?? "")}
-              <span class="label">${e.label}</span>
-              <span class="caret" aria-hidden="true">▾</span>
-            </button>`}
-        <div class="group-items" id=${c} role="group" aria-label=${e.label} ?hidden=${!r}>
-          ${e.items.map((p) => l(this, o, f).call(this, p))}
-        </div>
-      </div>
-    `;
-};
-f = function(e) {
-  const t = e.id === this.activeId, a = s`
-      ${l(this, o, u).call(this, e.id, e.icon)} ${this.collapsed ? i : s`<span class="label">${e.label}</span>`}
-    `;
-  return e.href !== void 0 ? s`<a
-          class="item"
-          href=${e.href}
-          title=${this.collapsed ? e.label : i}
-          aria-current=${t ? "page" : i}
-          @click=${(r) => l(this, o, b).call(this, r, e)}
-          >${a}</a
-        >` : s`<button
-          class="item"
-          title=${this.collapsed ? e.label : i}
-          aria-current=${t ? "page" : i}
-          @click=${(r) => l(this, o, b).call(this, r, e)}
-        >
-          ${a}
-        </button>`;
-};
-x = function(e) {
-  return s`
-      <button
-        class="item"
-        title=${this.collapsed ? e.label : i}
-        @click=${() => this.dispatchEvent(new z(e.id))}
-      >
-        ${l(this, o, u).call(this, e.id, e.icon)} ${this.collapsed ? i : s`<span class="label">${e.label}</span>`}
-      </button>
-    `;
-};
-u = function(e, t) {
-  return s`<span class="icon" aria-hidden="true"><slot name=${`icon-${e}`}>${t}</slot></span>`;
-};
-b = function(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 D(t.id))) {
-      e.preventDefault();
-      return;
-    }
-    this.activeId = t.id;
-  }
-};
-y = function(e) {
-  const t = new Set(this.toggledGroups);
-  t.delete(e) || t.add(e), this.toggledGroups = t;
-};
-n.styles = $`
+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;
@@ -217,32 +135,94 @@ n.styles = $`
       border-top: 1px solid var(--dc-color-border, #e2e2e4);
     }
   `;
-d([
-  h({ type: Array })
-], n.prototype, "items", 2);
-d([
-  h({ type: Array, attribute: "bottom-items" })
-], n.prototype, "bottomItems", 2);
-d([
-  h({ attribute: "active-id" })
-], n.prototype, "activeId", 2);
-d([
-  h()
-], n.prototype, "header", 2);
-d([
-  h({ attribute: "nav-label" })
-], n.prototype, "navLabel", 2);
-d([
-  h({ type: Boolean, reflect: !0 })
-], n.prototype, "collapsed", 2);
-d([
-  _()
-], n.prototype, "toggledGroups", 2);
-n = d([
-  I("dp-sidebar")
-], n);
-export {
-  n as DpSidebar,
-  z as DpSidebarActionEvent,
-  D 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 r, customElement as b } from "lit/decorators.js";
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (l, a, i, s) => {
-  for (var t = s > 1 ? void 0 : s ? f(a, i) : a, n = l.length - 1, c; n >= 0; n--)
-    (c = l[n]) && (t = (s ? c(a, i, t) : c(t)) || t);
-  return s && t && v(a, i, t), t;
-};
-class u extends Event {
-  constructor() {
-    super("dp-toolbar-toggle", { bubbles: !0, composed: !0 });
-  }
-}
-let e = class extends g {
-  constructor() {
-    super(...arguments), this.heading = "", this.subtitle = "", this.showToggle = !1, this.toggleLabel = "Toggle sidebar", this.dragRegion = !1;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.setAttribute("role", "banner");
-  }
-  render() {
-    return d`
-      <div class="start">
-        ${this.showToggle ? d`<button
-              class="toggle"
-              aria-label=${this.toggleLabel}
-              @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>
-    `;
-  }
-};
-e.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,25 +70,34 @@ e.styles = p`
       gap: var(--dc-space-3, 12px);
     }
   `;
-o([
-  r()
-], e.prototype, "heading", 2);
-o([
-  r()
-], e.prototype, "subtitle", 2);
-o([
-  r({ type: Boolean, attribute: "show-toggle" })
-], e.prototype, "showToggle", 2);
-o([
-  r({ attribute: "toggle-label" })
-], e.prototype, "toggleLabel", 2);
-o([
-  r({ type: Boolean, reflect: !0, attribute: "drag-region" })
-], e.prototype, "dragRegion", 2);
-e = o([
-  b("dp-toolbar")
-], e);
-export {
-  e 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.3.0",
+  "version": "0.3.2",
   "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 || ^0.6.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.6.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"
   }
 }