use shadow dom for settings

Author: dbushell

components/pw-nav.html

@@ -1,22 +1,28 @@
 <patchwork-nav>
+  <template shadowrootmode="open">
+    <slot></slot>
+  </template>
   <nav class="Grid | Nav" id="nav" popover>
     <pw-button icon label="Close Menu" classes="{{['Hamburger']}}" popovertarget="nav" popovertargetaction="hide">
       <ssr-fragment slot="icon"><icon-close /></ssr-fragment>
     </pw-button>
     <pw-menu id="nav-menu" menu="{{menu}}" />
-    <pw-button icon id="settings-button" label="Settings" popovertarget="settings" popovertargetaction="toggle">
+    <pw-button disabled icon id="settings-button" label="Settings" popovertarget="settings" popovertargetaction="toggle">
       <ssr-fragment slot="icon"><icon-config /></ssr-fragment>
     </pw-button>
-    <div id="settings" class="Nav__settings" popover>
-      <div class="Button-group jc-end">
-        <p class="small space-xs mi-end">Theme</p>
-        <pw-button disabled id="settings-light" label="Light" />
-        <pw-button disabled id="settings-dark" label="Dark" />
-      </div>
-    </div>
   </nav>
 </patchwork-nav>
 
+<template id="settings-template">
+  <div id="settings" popover>
+    <div class="Button-group jc-end">
+      <p class="small space-xs mi-end">Theme</p>
+      <pw-button disabled id="settings-light" label="Light" />
+      <pw-button disabled id="settings-dark" label="Dark" />
+    </div>
+  </div>
+</template>
+
 <ssr-fragment portal="head">
   <script type="module" src="/scripts/patchwork-nav.js?v={{deployHash}}"></script>
 </ssr-fragment>

deno.jsonc

@@ -6,11 +6,11 @@
   },
   "imports": {
     "@dbushell/carriageway": "jsr:@dbushell/carriageway@^1.1.0",
-    "@dbushell/hyperserve": "jsr:@dbushell/hyperserve@^0.19.0",
-    "@std/async": "jsr:@std/async@^1.0.7",
+    "@dbushell/hyperserve": "jsr:@dbushell/hyperserve@^0.20.0",
+    "@std/async": "jsr:@std/async@^1.0.8",
     "@std/fs": "jsr:@std/fs@^1.0.5",
     "@std/http": "jsr:@std/http@^1.0.9",
-    "@std/path": "jsr:@std/path@^1.0.7",
-    "lightningcss": "npm:lightningcss@^1.27.0"
+    "@std/path": "jsr:@std/path@^1.0.8",
+    "lightningcss": "npm:lightningcss@^1.28.1"
   }
 }

routes/props.js

@@ -7,7 +7,7 @@ export const GET = () => {
 const props = {
   "header": {
     "heading": "Patchwork",
-    "tag": "2.2",
+    "tag": "2.3",
     "menu": [
       {
         "name": "Home",

static/app.min.css

@@ -23,25 +23,30 @@
   }
 }
 
-.Nav__settings {
+#settings-button {
+  anchor-name: --settings;
+}
+
+#settings {
+  position-anchor: --settings;
   background: var(--color-bg-2);
   border-radius: var(--radius-2);
   border: var(--border-size-1) solid var(--color-bg-4);
   inset: 0;
   margin: auto;
   padding: var(--size-2) var(--size-3);
 
-  &[style*='--inset'] {
-    inset: calc(var(--size-3) + (1px * var(--inset-top)))
-      calc(1px * var(--inset-right)) auto auto;
+  @supports (inset: anchor(end)) {
+    margin: 0;
+    inset: auto;
+    inset-block-start: calc(anchor(end) + var(--size-3));
+    inset-inline-end: anchor(end);
   }
-}
 
-@supports not selector(:popover-open) {
-  .Nav__settings {
-    &[style*='--inset'] {
-      inset-block-start: calc(var(--size-3) + var(--button-height));
-      inset-inline-end: 0;
+  @supports not (inset: anchor(end)) {
+    &::backdrop {
+      background-color: oklch(0% 0 0 / 0.4);
+      backdrop-filter: blur(2px);
     }
   }
 }
@@ -57,7 +62,7 @@
     }
   }
 
-  .Nav__settings {
+  #settings {
     display: contents;
   }
 }
@@ -87,7 +92,7 @@
   }
 
   @supports not selector(:popover-open) {
-    .Nav__settings {
+    #settings {
       &:not(.\:popover-open) {
         display: none;
       }

static/css/components/nav.css

@@ -4,7 +4,7 @@
   border: var(--border-size-1) solid var(--color-secondary);
   padding: var(--size-3);
 
-  @supports (inset: anchor(end)) {
+  @supports (position-area: end) {
     margin-inline: 0;
     margin-block: var(--size-2);
     max-inline-size: calc(100% - var(--size-5));
@@ -21,6 +21,7 @@
 #tooltip-anchor-1 {
   anchor-name: --tooltip1;
 }
+
 #tooltip-1 {
   position-anchor: --tooltip1;
 }

static/css/components/tooltip.css

@@ -3,8 +3,6 @@ export class Component extends HTMLElement {
   #theme = "";
   #themes = new Set(["light", "dark"]);
   #navOpen = false;
-  #settingsTop = 0;
-  #settingsRight = 0;
 
   get theme() {
     return this.#theme;
@@ -47,6 +45,10 @@ export class Component extends HTMLElement {
   }
 
   connectedCallback() {
+    const settings = document.querySelector("#settings-template").content
+      .cloneNode(true);
+    this.nav.append(settings);
+    this.settingsButton.disabled = false;
     this.nav.addEventListener("beforetoggle", (ev) => {
       this.#navOpen = ev.newState === "open";
     });
@@ -61,9 +63,6 @@ export class Component extends HTMLElement {
     globalThis.addEventListener("resize", () => {
       this.#onResize();
     }, { passive: true });
-    globalThis.addEventListener("scroll", () => {
-      this.#updateSettings();
-    }, { passive: true });
     this.#onResize();
     this.theme = document.documentElement.getAttribute("data-theme") ??
       globalThis.localStorage.getItem("theme") ?? "";
@@ -77,7 +76,6 @@ export class Component extends HTMLElement {
   }
 
   #onResize() {
-    this.#updateSettings();
     if (this.#navOpen) {
       const display = globalThis.getComputedStyle(this.nav).display;
       if (display !== "grid") {
@@ -86,14 +84,6 @@ export class Component extends HTMLElement {
     }
   }
 
-  #updateSettings() {
-    const bounds = this.settingsButton.getBoundingClientRect();
-    this.#settingsTop = bounds.bottom;
-    this.#settingsRight = globalThis.innerWidth - bounds.right;
-    this.settings.style.setProperty("--inset-top", this.#settingsTop);
-    this.settings.style.setProperty("--inset-right", this.#settingsRight);
-  }
-
   #updateTheme() {
     this.settingsLight.disabled = this.theme === "light";
     this.settingsDark.disabled = this.theme === "dark";