@iyulab/desktop-patterns 0.1.0 → 0.1.1

package/dist/shell.js

@@ -1,22 +1,22 @@
-import { css as c, LitElement as p, nothing as b, html as a } from "lit";
-import { property as f, customElement as m } from "lit/decorators.js";
-var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, d = (r, o, t, s) => {
-  for (var e = s > 1 ? void 0 : s ? u(o, t) : o, l = r.length - 1, n; l >= 0; l--)
-    (n = r[l]) && (e = (s ? n(o, t, e) : n(e)) || e);
-  return s && e && v(o, t, e), e;
+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 h extends Event {
+class v extends Event {
   constructor() {
     super("dp-shell-sidebar-close", { bubbles: !0, composed: !0 });
   }
 }
-let i = class extends p {
+let r = class extends c {
   constructor() {
     super(...arguments), this.sidebarOpen = !1;
   }
   render() {
-    return a`
-      ${this.sidebarOpen ? a`<div class="backdrop" @click=${() => this.dispatchEvent(new h())}></div>` : b}
+    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">
@@ -28,7 +28,7 @@ let i = class extends p {
     `;
   }
 };
-i.styles = c`
+r.styles = p`
     :host {
       display: flex;
       width: 100vw;
@@ -57,6 +57,15 @@ i.styles = c`
       z-index: 40;
     }
     @media (min-width: 1024px) {
+      /* Must match (or exceed) \`:host([sidebar-open]) .sidebar-region\`'s
+         specificity above (0,3,0) — a bare \`.sidebar-region\` here is only
+         (0,1,0), so on equal-or-narrower cascades the desktop override would
+         lose to the sidebar-open rule regardless of this media query
+         matching, leaving the sidebar permanently \`position: fixed\` (full-
+         height overlay) at any width once \`sidebar-open\` is set. Repeating
+         the \`:host([sidebar-open])\` prefix here, rather than only the bare
+         selector, is what actually lets desktop width win. */
+      :host([sidebar-open]) .sidebar-region,
       .sidebar-region {
         display: block;
         position: relative;
@@ -82,12 +91,12 @@ i.styles = c`
     }
   `;
 d([
-  f({ type: Boolean, reflect: !0, attribute: "sidebar-open" })
-], i.prototype, "sidebarOpen", 2);
-i = d([
-  m("dp-shell")
-], i);
+  h({ type: Boolean, reflect: !0, attribute: "sidebar-open" })
+], r.prototype, "sidebarOpen", 2);
+r = d([
+  f("dp-shell")
+], r);
 export {
-  i as DpShell,
-  h as DpShellSidebarCloseEvent
+  r as DpShell,
+  v as DpShellSidebarCloseEvent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/desktop-patterns",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -22,6 +22,22 @@
       "types": "./dist/components/page/dp-page.d.ts",
       "import": "./dist/page.js"
     },
+    "./sidebar": {
+      "types": "./dist/components/sidebar/dp-sidebar.d.ts",
+      "import": "./dist/sidebar.js"
+    },
+    "./toolbar": {
+      "types": "./dist/components/toolbar/dp-toolbar.d.ts",
+      "import": "./dist/toolbar.js"
+    },
+    "./shell": {
+      "types": "./dist/components/shell/dp-shell.d.ts",
+      "import": "./dist/shell.js"
+    },
+    "./shortcut-overlay": {
+      "types": "./dist/components/shortcut-overlay/dp-shortcut-overlay.d.ts",
+      "import": "./dist/shortcut-overlay.js"
+    },
     "./tokens.css": "./tokens.css"
   },
   "scripts": {
@@ -35,7 +51,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@iyulab/desktop-compact": "^0.1.0",
+    "@iyulab/desktop-compact": "^0.2.0",
     "lit": "^3.2.1"
   },
   "devDependencies": {