@iyulab/desktop-patterns 0.1.2 → 0.2.0

package/README.md

@@ -125,9 +125,10 @@ npm run build          # per-component ESM output, type declarations
 npm run storybook      # interactive component browser
 ```
 
-Until `@iyulab/desktop-compact` publishes its first npm release, this package resolves it via
-`file:../desktop-compact` for local development (a sibling checkout at that relative path) — this
-switches to a registry semver range once `desktop-compact` publishes.
+`@iyulab/desktop-compact` is a **peer** dependency: this package reads its `--dc-*` tokens but never
+imports its code, so the consumer installs one copy and both packages share it. A regular dependency
+would give a consumer on a newer `desktop-compact` minor a second, unused copy nested under this
+package.
 
 ## License
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -57,10 +57,13 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@iyulab/desktop-compact": "^0.2.0",
     "lit": "^3.2.1"
   },
+  "peerDependencies": {
+    "@iyulab/desktop-compact": "^0.2.0 || ^0.3.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",