Support modal sidebar with os-navstack

Navstack pushes groups of panels without any animation, but dismisses
them with a back-stack-like slide-off-of-screen animation.

- Introduce animation utils
- Remove os-toolbar, move .toolbar to shared styles. We ended up needing
  this flexibility.
- Introduce navpanel as a scrollable content view with a toolbar.

typescript/packages/common-os-ui/src/components/os-chrome.ts

@@ -60,19 +60,12 @@ export class OsChrome extends LitElement {
         height: 100vh;
 
         .chrome-sidebar-inner {
-          display: grid;
-          grid-template-rows: auto 1fr;
+          display: block;
           /* Set fixed width on inner element to prevent text reflow on
           sidebar animation. */
           width: var(--sidebar-width);
-          /* Needed to correctly trigger scrolling in sidebar main */
           height: 100vh;
         }
-
-        .chrome-sidebar-content {
-          overflow-x: hidden;
-          overflow-y: auto;
-        }
       }
 
       /* Sidebar animation */
@@ -89,56 +82,25 @@ export class OsChrome extends LitElement {
           grid-template-columns: 1fr 1fr;
         }
       }
-
-      .toolbar {
-        height: var(--toolbar-height);
-        display: grid;
-        grid-template-columns: auto 1fr auto;
-        grid-template-areas: "start center end";
-        align-items: center;
-        gap: var(--gap-sm);
-        padding-left: var(--pad);
-        padding-right: var(--pad);
-
-        .toolbar-start {
-          grid-area: start;
-          display: flex;
-          gap: var(--button-gap);
-          align-items: center;
-          justify-content: flex-start;
-        }
-
-        .toolbar-end {
-          grid-area: end;
-          display: flex;
-          gap: var(--button-gap);
-          align-items: center;
-          justify-content: flex-end;
-        }
-
-        .toolbar-center {
-          grid-area: center;
-          display: flex;
-          gap: var(--button-gap);
-          align-items: center;
-          justify-content: center;
-        }
-      }
     `,
   ];
 
   @property({ type: String }) locationtitle = "";
   @property({ type: Boolean, reflect: true }) sidebar = true;
 
   override render() {
+    const onSidebarClose = () => {
+      this.sidebar = false;
+    };
+
     const onSidebarButton = () => {
       this.sidebar = !this.sidebar;
     };
 
     return html`
-      <div class="chrome">
+      <div class="chrome" @sidebarclose="${onSidebarClose}">
         <section class="chrome-main">
-          <nav class="chrome-main-toolbar toolbar">
+          <nav class="chrome-main-toolbar toolbar pad-h">
             <div class="toolbar-start"></div>
             <div class="toolbar-center">
               <os-location locationtitle="${this.locationtitle}"></os-location>
@@ -162,21 +124,43 @@ export class OsChrome extends LitElement {
         </section>
         <aside class="chrome-sidebar">
           <div class="chrome-sidebar-inner">
-            <nav class="chrome-sidebar-toolbar toolbar">
-              <div class="toolbar-end gap-sm hstack">
-                <slot name="sidebar-toolbar"></slot>
-                <os-icon-button
-                  @click="${onSidebarButton}"
-                  icon="close"
-                ></os-icon-button>
-              </div>
-            </nav>
-            <div class="chrome-sidebar-content">
-              <slot name="sidebar"></slot>
-            </div>
+            <slot name="sidebar"></slot>
           </div>
         </aside>
       </div>
     `;
   }
 }
+
+export class SidebarCloseEvent extends Event {
+  constructor() {
+    super("sidebarclose", {
+      bubbles: true,
+      composed: true,
+    });
+  }
+}
+
+@customElement("os-sidebar-close-button")
+export class OsCloseButton extends LitElement {
+  static override styles = [
+    css`
+      :host {
+        display: block;
+        width: fit-content;
+        height: fit-content;
+      }
+    `,
+  ];
+
+  override render() {
+    const onClick = () => {
+      this.dispatchEvent(new SidebarCloseEvent());
+    };
+
+    return html`<os-icon-button
+      @click="${onClick}"
+      icon="close"
+    ></os-icon-button>`;
+  }
+}

typescript/packages/common-os-ui/src/components/os-navpanel.ts

@@ -0,0 +1,53 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import { base } from "../shared/styles.js";
+
+@customElement("os-navpanel")
+export class OsNavpanel extends LitElement {
+  static override styles = [
+    base,
+    css`
+      :host {
+        --panel-bg: var(--bg-2);
+        --toolbar-height: calc(var(--u) * 24);
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+
+      .navpanel {
+        background-color: var(--panel-bg);
+        display: grid;
+        grid-template-rows: auto 1fr;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .navpanel-content {
+        width: 100%;
+        height: 100%;
+        overflow-x: hidden;
+        overflow-y: scroll;
+      }
+    `,
+  ];
+
+  override render() {
+    return html`
+      <div class="navpanel">
+        <nav class="navpanel-toolbar toolbar pad-h">
+          <div class="toolbar-start gap-sm hstack">
+            <slot name="toolbar-start"></slot>
+          </div>
+          <div class="toolbar-end gap-sm hstack">
+            <slot name="toolbar-end"></slot>
+          </div>
+        </nav>
+        <div class="navpanel-content vstack gap pad-h">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}

typescript/packages/common-os-ui/src/components/os-navstack.ts

@@ -0,0 +1,133 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import {
+  setTransitions,
+  transition,
+  durationMd,
+  cubicBezierCss,
+  easeOutCubic,
+  easeOutExpo,
+} from "../shared/animation.js";
+
+@customElement("os-navstack")
+export class OsNavstack extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .navstack {
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+
+    .navstack-root {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+    }
+
+    .navstack-panels {
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      position: absolute;
+      z-index: 2;
+      pointer-events: none;
+
+      > * {
+        overflow-x: hidden;
+        overflow-y: scroll;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: all;
+      }
+    }
+  `;
+
+  @property({ type: Array<HTMLElement> })
+  panels: Array<HTMLElement> = [];
+
+  override render() {
+    const onNavBack = (_: NavBackEvent) => {
+      this.back();
+    };
+
+    return html`
+      <div @navback=${onNavBack} class="navstack">
+        <div class="navstack-root">
+          <slot></slot>
+        </div>
+        <div class="navstack-panels">${this.panels}</div>
+      </div>
+    `;
+  }
+
+  async back() {
+    const panels = [...this.panels];
+    let lastPanel = panels.at(-1);
+    if (!lastPanel) {
+      return;
+    }
+    await setTransitions(lastPanel, [
+      transition({
+        property: "left",
+        duration: durationMd,
+        easing: cubicBezierCss(easeOutCubic),
+        value: `480px`,
+      }),
+      transition({
+        property: "opacity",
+        duration: durationMd,
+        delay: 100,
+        easing: cubicBezierCss(easeOutExpo),
+        value: `0`,
+      }),
+    ]);
+    panels.pop();
+    this.panels = panels;
+  }
+}
+
+/**
+ * Custom event for back in a navigational context
+ */
+export class NavBackEvent extends Event {
+  constructor() {
+    super("navback", { bubbles: true, composed: true });
+  }
+}
+
+@customElement("os-nav-back-button")
+export class OsNavBackButton extends LitElement {
+  static override styles = [
+    css`
+      :host {
+        display: block;
+        width: fit-content;
+        height: fit-content;
+      }
+    `,
+  ];
+
+  override render() {
+    const onClick = () => {
+      this.dispatchEvent(new NavBackEvent());
+    };
+
+    return html`<os-icon-button
+      @click="${onClick}"
+      icon="arrow_back"
+    ></os-icon-button>`;
+  }
+}

typescript/packages/common-os-ui/src/components/os-sidebar.ts → typescript/packages/common-os-ui/src/components/os-sidebar-group.ts

@@ -2,33 +2,6 @@ import { LitElement, css, html } from "lit-element";
 import { customElement } from "lit/decorators.js";
 import { base } from "../shared/styles.js";
 
-@customElement("os-sidebar")
-export class OsSidebar extends LitElement {
-  static override styles = [
-    base,
-    css`
-      :host {
-        display: block;
-      }
-
-      .sidebar {
-        padding: var(--pad);
-        display: flex;
-        flex-direction: column;
-        gap: var(--gap);
-      }
-    `,
-  ];
-
-  override render() {
-    return html`
-      <aside class="sidebar">
-        <slot></slot>
-      </aside>
-    `;
-  }
-}
-
 @customElement("os-sidebar-group")
 export class OsSidebarGroup extends LitElement {
   static override styles = [