@iyulab/desktop-patterns 0.1.1 → 0.1.3

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

@@ -43,6 +43,7 @@ export declare class DpToolbar extends LitElement {
     subtitle: string;
     showToggle: boolean;
     dragRegion: boolean;
+    connectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/sidebar.js

@@ -1,20 +1,20 @@
 import { css as m, LitElement as x, nothing as c, html as i } from "lit";
-import { property as n, customElement as g } from "lit/decorators.js";
-var y = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, b = (e) => {
+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, r, p) => {
-  for (var a = p > 1 ? void 0 : p ? _(t, r) : t, l = e.length - 1, h; l >= 0; l--)
-    (h = e[l]) && (a = (p ? h(t, r, a) : h(a)) || a);
-  return p && a && y(t, r, a), a;
-}, w = (e, t, r) => t.has(e) || b("Cannot " + r), I = (e, t, r) => t.has(e) ? b("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), v = (e, t, r) => (w(e, t, "access private method"), r), d, f, u;
+}, 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 o = class extends x {
+let r = class extends x {
   constructor() {
-    super(...arguments), I(this, d), this.items = [], this.bottomItems = [], this.activeId = "", this.header = "", this.collapsed = !1;
+    super(...arguments), I(this, n), this.items = [], this.bottomItems = [], this.activeId = "", this.header = "", this.collapsed = !1;
   }
   render() {
     return i`
@@ -22,20 +22,20 @@ let o = class extends x {
         <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, d, f).call(this, e))}</nav>
-      ${this.bottomItems.length > 0 ? i`<div class="bottom-group">${this.bottomItems.map((e) => v(this, d, f).call(this, e))}</div>` : c}
+      <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>
     `;
   }
 };
-d = /* @__PURE__ */ new WeakSet();
+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, d, u).call(this, e.id)}
+        @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>`}
@@ -45,7 +45,7 @@ f = function(e) {
 u = function(e) {
   e !== this.activeId && (this.activeId = e, this.dispatchEvent(new $(e)));
 };
-o.styles = m`
+r.styles = m`
     :host {
       display: flex;
       flex-direction: column;
@@ -109,9 +109,18 @@ o.styles = m`
       justify-content: center;
       padding: var(--dc-space-3, 12px) 0;
     }
+    /* 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
+       surface the active row sits on. Measured across seven consuming apps,
+       twelve of fourteen app x theme combinations failed AA that way, the worst
+       at 1.65:1 - and the active item is the one label a user most needs to
+       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'] {
       border-left-color: var(--dc-color-accent, #2563eb);
-      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 {
@@ -131,24 +140,24 @@ o.styles = m`
     }
   `;
 s([
-  n({ type: Array })
-], o.prototype, "items", 2);
+  d({ type: Array })
+], r.prototype, "items", 2);
 s([
-  n({ type: Array, attribute: "bottom-items" })
-], o.prototype, "bottomItems", 2);
+  d({ type: Array, attribute: "bottom-items" })
+], r.prototype, "bottomItems", 2);
 s([
-  n({ attribute: "active-id" })
-], o.prototype, "activeId", 2);
+  d({ attribute: "active-id" })
+], r.prototype, "activeId", 2);
 s([
-  n()
-], o.prototype, "header", 2);
+  d()
+], r.prototype, "header", 2);
 s([
-  n({ type: Boolean, reflect: !0 })
-], o.prototype, "collapsed", 2);
-o = s([
+  d({ type: Boolean, reflect: !0 })
+], r.prototype, "collapsed", 2);
+r = s([
   g("dp-sidebar")
-], o);
+], r);
 export {
-  o as DpSidebar,
+  r as DpSidebar,
   $ as DpSidebarSelectEvent
 };

package/dist/toolbar.js

@@ -1,9 +1,9 @@
 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 = (i, r, l, a) => {
-  for (var e = a > 1 ? void 0 : a ? b(r, l) : r, n = i.length - 1, c; n >= 0; n--)
-    (c = i[n]) && (e = (a ? c(r, l, e) : c(e)) || e);
-  return a && e && f(r, l, e), e;
+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() {
@@ -14,6 +14,9 @@ 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">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -16,27 +16,33 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./page": {
       "types": "./dist/components/page/dp-page.d.ts",
-      "import": "./dist/page.js"
+      "import": "./dist/page.js",
+      "default": "./dist/page.js"
     },
     "./sidebar": {
       "types": "./dist/components/sidebar/dp-sidebar.d.ts",
-      "import": "./dist/sidebar.js"
+      "import": "./dist/sidebar.js",
+      "default": "./dist/sidebar.js"
     },
     "./toolbar": {
       "types": "./dist/components/toolbar/dp-toolbar.d.ts",
-      "import": "./dist/toolbar.js"
+      "import": "./dist/toolbar.js",
+      "default": "./dist/toolbar.js"
     },
     "./shell": {
       "types": "./dist/components/shell/dp-shell.d.ts",
-      "import": "./dist/shell.js"
+      "import": "./dist/shell.js",
+      "default": "./dist/shell.js"
     },
     "./shortcut-overlay": {
       "types": "./dist/components/shortcut-overlay/dp-shortcut-overlay.d.ts",
-      "import": "./dist/shortcut-overlay.js"
+      "import": "./dist/shortcut-overlay.js",
+      "default": "./dist/shortcut-overlay.js"
     },
     "./tokens.css": "./tokens.css"
   },