@iyulab/desktop-patterns 0.2.0 → 0.3.0

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/index.js

@@ -1,16 +1,17 @@
 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";
+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,
-  v as DpShell,
-  b as DpShellSidebarCloseEvent,
-  i as DpShortcutOverlay,
+  b as DpShell,
+  m as DpShellSidebarCloseEvent,
+  f as DpShortcutOverlay,
   x as DpShortcutOverlayDismissEvent,
-  t as DpSidebar,
-  l as DpSidebarSelectEvent,
-  a as DpToolbar,
-  S as DpToolbarToggleEvent
+  p as DpSidebar,
+  l as DpSidebarActionEvent,
+  D as DpSidebarSelectEvent,
+  S as DpToolbar,
+  i as DpToolbarToggleEvent
 };

package/dist/shortcut-overlay.js

@@ -1,21 +1,21 @@
-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";
+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, 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;
+}, 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, o = class extends b {
+let C = 0, r = class extends x {
   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));
+    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) {
@@ -25,8 +25,8 @@ let C = 0, o = class extends b {
     super.disconnectedCallback(), window.removeEventListener("keydown", u(this, i));
   }
   render() {
-    return this.open ? d`
-      <div class="backdrop" @click=${() => f(this, n, p).call(this)}>
+    return this.open ? l`
+      <div class="backdrop" @click=${() => f(this, c, p).call(this)}>
         <div
           class="panel"
           role="dialog"
@@ -36,13 +36,13 @@ let C = 0, o = class extends b {
         >
           <div class="header">
             <h2 id=${this.headingId}>${this.heading}</h2>
-            <button class="close" aria-label="Close" @click=${() => f(this, n, p).call(this)}>×</button>
+            <button class="close" aria-label=${this.closeLabel} @click=${() => f(this, c, p).call(this)}>×</button>
           </div>
           <div class="body">
-            ${this.shortcuts.length === 0 ? d`<p class="empty">${this.emptyMessage}</p>` : d`
+            ${this.shortcuts.length === 0 ? l`<p class="empty">${this.emptyMessage}</p>` : l`
                   <ul>
                     ${this.shortcuts.map(
-      (e) => d`
+      (e) => l`
                         <li>
                           <span>${e.description}</span>
                           <kbd>${e.combo}</kbd>
@@ -58,11 +58,11 @@ let C = 0, o = class extends b {
   }
 };
 i = /* @__PURE__ */ new WeakMap();
-n = /* @__PURE__ */ new WeakSet();
+c = /* @__PURE__ */ new WeakSet();
 p = function() {
   this.dispatchEvent(new z());
 };
-o.styles = x`
+r.styles = m`
     :host {
       display: contents;
       font-family: var(--dc-font-family, system-ui, sans-serif);
@@ -149,24 +149,27 @@ o.styles = x`
     }
   `;
 a([
-  l({ type: Array })
-], o.prototype, "shortcuts", 2);
+  n({ type: Array })
+], r.prototype, "shortcuts", 2);
 a([
-  l({ type: Boolean, reflect: !0 })
-], o.prototype, "open", 2);
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "open", 2);
 a([
-  l()
-], o.prototype, "heading", 2);
+  n()
+], r.prototype, "heading", 2);
 a([
-  l({ attribute: "empty-message" })
-], o.prototype, "emptyMessage", 2);
+  n({ attribute: "empty-message" })
+], r.prototype, "emptyMessage", 2);
+a([
+  n({ attribute: "close-label" })
+], r.prototype, "closeLabel", 2);
 a([
   _()
-], o.prototype, "headingId", 2);
-o = a([
+], r.prototype, "headingId", 2);
+r = a([
   k("dp-shortcut-overlay")
-], o);
+], r);
 export {
-  o as DpShortcutOverlay,
+  r as DpShortcutOverlay,
   z as DpShortcutOverlayDismissEvent
 };

package/dist/sidebar.js

@@ -1,51 +1,110 @@
-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) => {
+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);
-}, 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 {
+}, 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 }), this.itemId = t;
+    super("dp-sidebar-select", { bubbles: !0, composed: !0, cancelable: !0 }), this.itemId = t;
   }
 }
-let r = class extends x {
+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), I(this, n), this.items = [], this.bottomItems = [], this.activeId = "", this.header = "", this.collapsed = !1;
+    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 i`
+    return s`
       <div class="header">
         <slot name="icon"></slot>
-        ${!this.collapsed && this.header ? i`<span class="header-label">${this.header}</span>` : c}
+        ${!this.collapsed && this.header ? s`<span class="header-label">${this.header}</span>` : i}
       </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}
+      <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>
     `;
   }
 };
-n = /* @__PURE__ */ new WeakSet();
+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;
-  return i`
+  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
-        title=${this.collapsed ? e.label : c}
-        aria-current=${t ? "page" : c}
-        @click=${() => v(this, n, u).call(this, e.id)}
+        class="item"
+        title=${this.collapsed ? e.label : i}
+        @click=${() => this.dispatchEvent(new z(e.id))}
       >
-        <span class="icon" aria-hidden="true">${e.icon}</span>
-        ${this.collapsed ? c : i`<span>${e.label}</span>`}
+        ${l(this, o, u).call(this, e.id, e.icon)} ${this.collapsed ? i : s`<span class="label">${e.label}</span>`}
       </button>
     `;
 };
-u = function(e) {
-  e !== this.activeId && (this.activeId = e, this.dispatchEvent(new $(e)));
+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;
 };
-r.styles = m`
+n.styles = $`
     :host {
       display: flex;
       flex-direction: column;
@@ -89,11 +148,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 +163,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 +189,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 +206,43 @@ 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);
+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 {
-  r as DpSidebar,
-  $ as DpSidebarSelectEvent
+  n as DpSidebar,
+  z as DpSidebarActionEvent,
+  D as DpSidebarSelectEvent
 };

package/dist/toolbar.js

@@ -1,18 +1,18 @@
 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;
+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 t = class extends g {
+let e = class extends g {
   constructor() {
-    super(...arguments), this.heading = "", this.subtitle = "", this.showToggle = !1, this.dragRegion = !1;
+    super(...arguments), this.heading = "", this.subtitle = "", this.showToggle = !1, this.toggleLabel = "Toggle sidebar", this.dragRegion = !1;
   }
   connectedCallback() {
     super.connectedCallback(), this.setAttribute("role", "banner");
@@ -22,7 +22,7 @@ let t = class extends g {
       <div class="start">
         ${this.showToggle ? d`<button
               class="toggle"
-              aria-label="Toggle sidebar"
+              aria-label=${this.toggleLabel}
               @click=${() => this.dispatchEvent(new u())}
             >
               ☰
@@ -34,7 +34,7 @@ let t = class extends g {
     `;
   }
 };
-t.styles = p`
+e.styles = p`
     :host {
       display: flex;
       align-items: center;
@@ -91,21 +91,24 @@ t.styles = p`
     }
   `;
 o([
-  s()
-], t.prototype, "heading", 2);
+  r()
+], e.prototype, "heading", 2);
 o([
-  s()
-], t.prototype, "subtitle", 2);
+  r()
+], e.prototype, "subtitle", 2);
 o([
-  s({ type: Boolean, attribute: "show-toggle" })
-], t.prototype, "showToggle", 2);
+  r({ type: Boolean, attribute: "show-toggle" })
+], e.prototype, "showToggle", 2);
 o([
-  s({ type: Boolean, reflect: !0, attribute: "drag-region" })
-], t.prototype, "dragRegion", 2);
-t = o([
-  v("dp-toolbar")
-], t);
+  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 {
-  t as DpToolbar,
+  e as DpToolbar,
   u as DpToolbarToggleEvent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "license": "MIT",
   "engines": {