@taprootio/espalier 2.1.0 → 2.1.2

package/css/esp-reset.css

@@ -30,7 +30,10 @@ dd {
 
 /* Set core body defaults */
 body {
+  /* dvh tracks the visible viewport on mobile; 100vh fallback declared
+     first for browsers without dvh (dvh === vh on desktop). */
   min-height: 100vh;
+  min-height: 100dvh;
   margin: 0;
 }
 

package/custom-elements.json

@@ -5862,6 +5862,147 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dist/burger/esp-burger.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Animated burger button for showing and hiding navigation\ncomponents.\n\n```html\n<esp-burger></esp-burger>\n```",
+          "name": "EspalierBurger",
+          "cssProperties": [
+            {
+              "description": "The color of the burger lines when closed.",
+              "name": "--esp-color-burger"
+            },
+            {
+              "description": "The hover color of the burger lines when closed.",
+              "name": "--esp-color-burger-hover"
+            },
+            {
+              "description": "The color of the burger lines when open.",
+              "name": "--esp-color-burger-opened"
+            },
+            {
+              "description": "The hover color of the burger lines when open.",
+              "name": "--esp-color-burger-opened-hover"
+            },
+            {
+              "description": "The stroke width of the burger lines.",
+              "name": "--esp-size-burger-stroke"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "menuOpen",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether or not the burger indicates an open state.",
+              "attribute": "menu-open"
+            },
+            {
+              "kind": "field",
+              "name": "presentationOnly",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
+              "attribute": "presentation-only"
+            },
+            {
+              "kind": "method",
+              "name": "toggleMenu"
+            }
+          ],
+          "events": [
+            {
+              "name": "opened",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Emitted when the button is clicked and the image changes from a burger to an X."
+            },
+            {
+              "name": "closed",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Emitted when the button is clicked and the image changes from an X to a burger. ```html <esp-burger></esp-burger> <script> const theBurger = findByTagName(\"esp-burger\")[0]; theBurger.addEventListener(\"opened\", () => { showToast({ message: \"It would be a good time to show the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); theBurger.addEventListener(\"closed\", () => { showToast({ message: \"It would be a good time to hide the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); </script> ```"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "menu-open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether or not the burger indicates an open state.",
+              "fieldName": "menuOpen"
+            },
+            {
+              "name": "presentation-only",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
+              "fieldName": "presentationOnly"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "docPageTitle": {
+            "name": "Burger",
+            "description": ""
+          },
+          "docUrl": {
+            "name": "/components/burger",
+            "description": ""
+          },
+          "menuGroup": {
+            "name": "Interaction",
+            "description": ""
+          },
+          "menuLabel": {
+            "name": "Burger",
+            "description": ""
+          },
+          "menuIcon": {
+            "name": "burger",
+            "description": ""
+          },
+          "tagName": "esp-burger",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EspalierBurger",
+          "declaration": {
+            "name": "EspalierBurger",
+            "module": "dist/burger/esp-burger.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "esp-burger",
+          "declaration": {
+            "name": "EspalierBurger",
+            "module": "dist/burger/esp-burger.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dist/breadcrumbs/esp-breadcrumb.js",
@@ -6643,147 +6784,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "dist/burger/esp-burger.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Animated burger button for showing and hiding navigation\ncomponents.\n\n```html\n<esp-burger></esp-burger>\n```",
-          "name": "EspalierBurger",
-          "cssProperties": [
-            {
-              "description": "The color of the burger lines when closed.",
-              "name": "--esp-color-burger"
-            },
-            {
-              "description": "The hover color of the burger lines when closed.",
-              "name": "--esp-color-burger-hover"
-            },
-            {
-              "description": "The color of the burger lines when open.",
-              "name": "--esp-color-burger-opened"
-            },
-            {
-              "description": "The hover color of the burger lines when open.",
-              "name": "--esp-color-burger-opened-hover"
-            },
-            {
-              "description": "The stroke width of the burger lines.",
-              "name": "--esp-size-burger-stroke"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "menuOpen",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether or not the burger indicates an open state.",
-              "attribute": "menu-open"
-            },
-            {
-              "kind": "field",
-              "name": "presentationOnly",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
-              "attribute": "presentation-only"
-            },
-            {
-              "kind": "method",
-              "name": "toggleMenu"
-            }
-          ],
-          "events": [
-            {
-              "name": "opened",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Emitted when the button is clicked and the image changes from a burger to an X."
-            },
-            {
-              "name": "closed",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "Emitted when the button is clicked and the image changes from an X to a burger. ```html <esp-burger></esp-burger> <script> const theBurger = findByTagName(\"esp-burger\")[0]; theBurger.addEventListener(\"opened\", () => { showToast({ message: \"It would be a good time to show the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); theBurger.addEventListener(\"closed\", () => { showToast({ message: \"It would be a good time to hide the menu. This message will self-destruct in 4 seconds...\", icon: \"info-i\", duration: 4 }); }); </script> ```"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "menu-open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether or not the burger indicates an open state.",
-              "fieldName": "menuOpen"
-            },
-            {
-              "name": "presentation-only",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Render only the animated burger graphic. Use this when an\nouter control owns activation, labeling, and expanded state.",
-              "fieldName": "presentationOnly"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "docPageTitle": {
-            "name": "Burger",
-            "description": ""
-          },
-          "docUrl": {
-            "name": "/components/burger",
-            "description": ""
-          },
-          "menuGroup": {
-            "name": "Interaction",
-            "description": ""
-          },
-          "menuLabel": {
-            "name": "Burger",
-            "description": ""
-          },
-          "menuIcon": {
-            "name": "burger",
-            "description": ""
-          },
-          "tagName": "esp-burger",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "EspalierBurger",
-          "declaration": {
-            "name": "EspalierBurger",
-            "module": "dist/burger/esp-burger.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "esp-burger",
-          "declaration": {
-            "name": "EspalierBurger",
-            "module": "dist/burger/esp-burger.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "dist/button/esp-button-group.js",
@@ -19774,6 +19774,15 @@
               "privacy": "private",
               "default": "new ResizeObserver(() => this.syncMenuLayout())"
             },
+            {
+              "kind": "field",
+              "name": "menuChildObserver",
+              "type": {
+                "text": "MutationObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "method",
               "name": "syncMenuLayout",
@@ -19784,6 +19793,28 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "menuHasContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Whether the header carries a menu with navigable content. Read from\nlight DOM rather than the resolved `this.menu` (which is populated\nonly after the menu slot assigns) so burger visibility does not hang\non slot-resolution timing — otherwise a real menu whose slot has not\nassigned yet would look empty and hide its burger. An empty or\nabsent `<esp-menu>` has nothing to reveal."
+            },
+            {
+              "kind": "method",
+              "name": "hasDrawerableContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Whether the burger has something to open: real menu items, an\nexternal drawer target, or an explicit `show-burger` request. The\ncompact-width media query alone must not force the burger on when\nthere is nothing behind it."
+            },
             {
               "kind": "method",
               "name": "getExternalDrawerTarget",
@@ -19919,6 +19950,16 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "observeMenuChildren",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "syncMobileMenuQuery",
@@ -19959,6 +20000,28 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "burgerVisibleForTarget",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Whether the header is currently rendering a burger for its external\ndrawer target — the same predicate as the `too-wide` class (the target\nalready satisfies `hasDrawerableContent`). A vertical target may only\ncollapse while this holds, so a collapsed rail always has a visible,\naccessible opener. Notably `menu-display=\"drawer\"`/`show-burger` force\nit, and the compact (36rem) query or an overflowing inline menu trip it\n— a width band where the menu's own 50em collapse query matches but no\nburger shows must NOT grant control."
+            },
+            {
+              "kind": "method",
+              "name": "syncExternalDrawerControl",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Grant/revoke a vertical drawer-target menu's permission to collapse,\ntracking whether the burger is actually visible. Re-run whenever the\ntarget, menu-display, compact-width, or fit state changes."
+            },
             {
               "kind": "field",
               "name": "handleMenuToggleClicked",
@@ -28475,6 +28538,30 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_mobileCollapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "True while the viewport is narrow enough to collapse a vertical rail."
+            },
+            {
+              "kind": "field",
+              "name": "verticalDrawerQuery",
+              "type": {
+                "text": "MediaQueryList | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "onVerticalDrawerChange",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "mode",
@@ -28606,6 +28693,36 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "setMobileCollapsed",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "collapsed",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "React to the vertical-rail collapse breakpoint. Only a vertical menu\nchanges presentation, so non-vertical menus just record the state\nwithout a re-render."
+            },
+            {
+              "kind": "method",
+              "name": "applyMobileCollapse",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Re-sync swipe/rendering after a change to the vertical-collapse\ninputs. When the menu un-collapses back to a rail, any open drawer is\nclosed."
+            },
             {
               "kind": "method",
               "name": "openDrawer",
@@ -29615,7 +29732,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A Lit ReactiveController that adds swipe-to-reveal drawer behavior.\n\nOn coarse-pointer (touch) devices, the user can swipe horizontally\nanywhere on the screen to open or close a drawer overlay. On\nfine-pointer (mouse) devices, the controller still listens for\nclicks outside the drawer to close it.\n\nOnce the user swipes past 10vw the gesture commits and the drawer\nanimates to its final state — the drawer is never left partially open.\n\nTouch events that originate inside the drawer element are completely\nignored — no listeners are attached for those touches — so the\nbrowser's native touch scrolling works normally inside the drawer.\nTaps outside the drawer (on the scrim or anywhere else) close it.",
+          "description": "A Lit ReactiveController that adds swipe-to-reveal drawer behavior.\n\nOn coarse-pointer (touch) devices, an edge-originated horizontal\nswipe opens the drawer, and a swipe in the closing direction — from\nthe scrim or the drawer panel itself — closes it. On fine-pointer\n(mouse) devices, the controller still listens for clicks outside the\ndrawer to close it.\n\nOnce the user swipes past `COMMIT_THRESHOLD_VW` the gesture commits\nand the drawer animates to its final state — it is never left\npartially open.\n\nWhile the drawer is open, a touch that starts inside it is tracked\nonly far enough to detect a horizontal close swipe; vertical motion\nis left to the browser so the drawer scrolls normally. Taps outside\nthe drawer (on the scrim or anywhere else) close it.",
           "name": "SwipeRevealController",
           "members": [
             {
@@ -29708,6 +29825,16 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "gestureStartedInDrawer",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the current gesture began inside the open drawer. Such a\ngesture is a candidate close swipe: it is tracked so pushing the\ndrawer panel shut works, but default touch behavior is left alone\nuntil the swipe is confirmed horizontal, so vertical scrolling\ninside the drawer is preserved."
+            },
             {
               "kind": "field",
               "name": "tracking",
@@ -30152,6 +30279,25 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "isWithinOpenEdge",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "clientX",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Whether a touch at `clientX` began close enough to the drawer's\nleading edge to be allowed to *open* it. For a left drawer that is\nthe left edge; for a right drawer, the right edge."
+            },
             {
               "kind": "method",
               "name": "handleTouchMove",

package/dist/box/esp-box.js

@@ -1,10 +1,10 @@
-var n=function(t,e,r,i){var l=arguments.length,o=l<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(t,e,r,i);else for(var a=t.length-1;a>=0;a--)(p=t[a])&&(o=(l<3?p(o):l>3?p(e,r,o):p(e,r))||o);return l>3&&o&&Object.defineProperty(e,r,o),o};import{css as d,html as b}from"lit";import{customElement as f,property as u}from"lit/decorators.js";import{classMap as v}from"lit/directives/class-map.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";let s=class extends c{constructor(){super(...arguments),this.fullScreen=!1}render(){const{fullScreen:e}=this;return b`
-      <div class=${v({"esp-box":!0,"full-screen":e})}>
+var n=function(s,e,r,i){var a=arguments.length,o=a<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(s,e,r,i);else for(var p=s.length-1;p>=0;p--)(l=s[p])&&(o=(a<3?l(o):a>3?l(e,r,o):l(e,r))||o);return a>3&&o&&Object.defineProperty(e,r,o),o};import{css as c,html as b}from"lit";import{customElement as v,property as h}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";let t=class extends d{constructor(){super(...arguments),this.fullScreen=!1}render(){const{fullScreen:e}=this;return b`
+      <div class=${f({"esp-box":!0,"full-screen":e})}>
         <div part="box">
           <slot></slot>
         </div>
       </div>
-    `}};s.styles=[...c.styles,d`
+    `}};t.styles=[...d.styles,c`
       :host {
         display: block;
       }
@@ -43,7 +43,9 @@ var n=function(t,e,r,i){var l=arguments.length,o=l<3?e:i===null?i=Object.getOwnP
 
         &.full-screen {
           width: 100vw;
+          
           height: 100vh;
+          height: 100dvh;
           position: fixed;
           top: 0;
           left: 0;
@@ -51,7 +53,12 @@ var n=function(t,e,r,i){var l=arguments.length,o=l<3?e:i===null?i=Object.getOwnP
 
           > div {
             overflow-y: auto;
+            
+            padding-bottom: max(
+              var(--esp-size-box-padding, var(--esp-size-padding)),
+              env(safe-area-inset-bottom)
+            );
           }
         }
       }
-    `],n([u({attribute:"full-screen",type:Boolean})],s.prototype,"fullScreen",void 0),s=n([f("esp-box")],s);export{s as EspalierBox};
+    `],n([h({attribute:"full-screen",type:Boolean})],t.prototype,"fullScreen",void 0),t=n([v("esp-box")],t);export{t as EspalierBox};

package/dist/dialog/esp-dialog.js

@@ -1,5 +1,5 @@
-var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,o);else for(var r=l.length-1;r>=0;r--)(a=l[r])&&(i=(n<3?a(i):n>3?a(e,t,i):a(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i};import{LitElement as h,css as f,html as v,nothing as p}from"lit";import{customElement as g,property as m,state as b}from"lit/decorators.js";import{classMap as y}from"lit/directives/class-map.js";import{createRef as u,ref as d}from"lit/directives/ref.js";import{OverlayController as _}from"../shared/overlay-controller.js";let s=class extends h{constructor(){super(...arguments),this.dialogSlot=u(),this.vellumRef=u(),this.isOpen=!1,this._overlay=new _({host:this,getFocusTrapContainer:()=>this.vellumRef.value??null,getFocusFallback:()=>this.vellumRef.value??null}),this._closeReason="api",this._lifecycleToken=0,this.fullScreen=!1}toggleOpen(){if(this.isOpen){const e=this._closeReason;this._closeReason="api";const t=new CustomEvent("esp-dialog-closing",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});if(!this.dispatchEvent(t))return;const o=++this._lifecycleToken;this.removeAttribute("is-open"),this.isOpen=!1,this._overlay.close(),this.updateComplete.then(()=>{this.isOpen||this._lifecycleToken!==o||this.dispatchEvent(new CustomEvent("esp-dialog-closed",{detail:{reason:e},bubbles:!0,composed:!0}))})}else{const e=++this._lifecycleToken;this.setAttribute("is-open","true"),this.isOpen=!0,this._overlay.open(),this.updateComplete.then(()=>{!this.isOpen||this._lifecycleToken!==e||(this._moveFocusIntoDialog(),this.dispatchEvent(new CustomEvent("esp-dialog-opened",{detail:{},bubbles:!0,composed:!0})))})}}_handleKeyDown(e){if(this.isOpen){if(e.key==="Escape"){e.preventDefault(),this._closeReason="escape",this.toggleOpen();return}e.key==="Tab"&&this._overlay.trapFocus(e)}}_moveFocusIntoDialog(){this._overlay.moveFocusInto()}firstUpdated(){this.dialogSlot.value&&this.dialogSlot.value.addEventListener("closeDialog",e=>{this._closeReason="close-dialog",this.toggleOpen(),e.preventDefault()})}disconnectedCallback(){super.disconnectedCallback()}render(){const{isOpen:e,fullScreen:t}=this,o={"is-open":e,"full-screen":t};return v`<div
-      ${d(this.vellumRef)}
+var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,o);else for(var r=l.length-1;r>=0;r--)(a=l[r])&&(i=(n<3?a(i):n>3?a(e,t,i):a(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i};import{LitElement as h,css as v,html as f,nothing as p}from"lit";import{customElement as g,property as m,state as b}from"lit/decorators.js";import{classMap as y}from"lit/directives/class-map.js";import{createRef as d,ref as u}from"lit/directives/ref.js";import{OverlayController as _}from"../shared/overlay-controller.js";let s=class extends h{constructor(){super(...arguments),this.dialogSlot=d(),this.vellumRef=d(),this.isOpen=!1,this._overlay=new _({host:this,getFocusTrapContainer:()=>this.vellumRef.value??null,getFocusFallback:()=>this.vellumRef.value??null}),this._closeReason="api",this._lifecycleToken=0,this.fullScreen=!1}toggleOpen(){if(this.isOpen){const e=this._closeReason;this._closeReason="api";const t=new CustomEvent("esp-dialog-closing",{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});if(!this.dispatchEvent(t))return;const o=++this._lifecycleToken;this.removeAttribute("is-open"),this.isOpen=!1,this._overlay.close(),this.updateComplete.then(()=>{this.isOpen||this._lifecycleToken!==o||this.dispatchEvent(new CustomEvent("esp-dialog-closed",{detail:{reason:e},bubbles:!0,composed:!0}))})}else{const e=++this._lifecycleToken;this.setAttribute("is-open","true"),this.isOpen=!0,this._overlay.open(),this.updateComplete.then(()=>{!this.isOpen||this._lifecycleToken!==e||(this._moveFocusIntoDialog(),this.dispatchEvent(new CustomEvent("esp-dialog-opened",{detail:{},bubbles:!0,composed:!0})))})}}_handleKeyDown(e){if(this.isOpen){if(e.key==="Escape"){e.preventDefault(),this._closeReason="escape",this.toggleOpen();return}e.key==="Tab"&&this._overlay.trapFocus(e)}}_moveFocusIntoDialog(){this._overlay.moveFocusInto()}firstUpdated(){this.dialogSlot.value&&this.dialogSlot.value.addEventListener("closeDialog",e=>{this._closeReason="close-dialog",this.toggleOpen(),e.preventDefault()})}disconnectedCallback(){super.disconnectedCallback()}render(){const{isOpen:e,fullScreen:t}=this,o={"is-open":e,"full-screen":t};return f`<div
+      ${u(this.vellumRef)}
       class="vellum ${y(o)}"
       data-no-swipe
       role=${e?"dialog":p}
@@ -7,8 +7,8 @@ var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnP
       tabindex="-1"
       @keydown=${this._handleKeyDown}
     >
-      <slot ${d(this.dialogSlot)}></slot>
-    </div>`}};s.styles=f`
+      <slot ${u(this.dialogSlot)}></slot>
+    </div>`}};s.styles=v`
     :host {
       display: block;
     }
@@ -22,7 +22,9 @@ var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnP
       z-index: 10000;
       left: 0;
       top: 0;
+      
       height: 100vh;
+      height: 100dvh;
       width: 100vw;
       overflow-y: auto;
       outline: none;

package/dist/header/esp-header.js

@@ -1,8 +1,8 @@
-var n=function(p,e,t,a){var s=arguments.length,i=s<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,t):a,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(p,e,t,a);else for(var h=p.length-1;h>=0;h--)(l=p[h])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};import{css as y,html as d,nothing as c}from"lit";import{customElement as x,property as o,state as u}from"lit/decorators.js";import{classMap as M}from"lit/directives/class-map.js";import{styleMap as S}from"lit/directives/style-map.js";import"../burger/esp-burger.js";import{createRef as b,ref as f}from"lit/directives/ref.js";import{EspalierMenu as T}from"./esp-menu.js";import{EspalierElementBase as v}from"../shared/esp-element-base.js";const D="(max-width: 36rem)";let r=class extends v{constructor(){super(...arguments),this.menuOpen=!1,this.menuTooLarge=!1,this.mobileMenu=!1,this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0,this.showBurger=!1,this.layout="standard",this.brandText="",this.brandLogo="",this.brandHref="",this.brandAlt="",this.brandColor="",this.brandAlign="start",this.brandWrap="truncate",this.menuDisplay="auto",this.themeToggle="hidden",this.scrollBehavior="none",this.scrollThreshold=16,this.dockOffset=0,this.drawerTarget="",this.fullBleedContent=!1,this.menuContainer=b(),this.menuButton=b(),this.menu=void 0,this.externalDrawerTarget=null,this.lastScrollY=0,this.lastInlineMenuWidth=0,this.mobileMenuQuery=null,this.menuDrawerListenersAttached=!1,this.observingMenuContainer=!1,this.scrollListenersAttached=!1,this.scrollRafId=null,this.resizeObserver=new ResizeObserver(()=>this.syncMenuLayout()),this.updateScrollState=()=>{this.scrollRafId===null&&(this.scrollRafId=requestAnimationFrame(()=>{this.scrollRafId=null,this.runScrollStateUpdate()}))},this.handleMobileMenuQueryChange=e=>{this.mobileMenu=e.matches,this.syncMenuLayout()},this.toggleTheme=()=>{const e=this.getThemeRoot();e&&(e.scheme=e.scheme==="dark"?"light":"dark")},this.handleMenuToggleClicked=()=>{if(this.menuOpen){this.closeNav();return}this.openNav()},this.onMenuDrawerOpened=()=>{this.menuOpen=!0,document.body.classList.add("menu-open"),this.burger&&(this.burger.menuOpen=!0)},this.onMenuDrawerClosed=()=>{this.menuOpen=!1,document.body.classList.remove("menu-open"),this.burger&&(this.burger.menuOpen=!1)}}syncMenuLayout(){if(!this.menuContainer.value||!this.menu||!this.menu.getWidth)return;const e=this.menuContainer.value.clientWidth,t=this.menu.getWidth();t>0&&(this.lastInlineMenuWidth=t);const a=this.lastInlineMenuWidth||t,s=this.getExternalDrawerTarget(),i=this.menuDisplay!=="inline",l=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal";this.menuTooLarge=i&&this.menuDisplay==="auto"&&a>e,this.menu.sliding=i&&!s&&(this.menuTooLarge||l||this.mobileMenu)}getExternalDrawerTarget(){if(!this.drawerTarget)return null;const e=document.getElementById(this.drawerTarget);return e===this.menu?null:e&&"openDrawer"in e&&typeof e.openDrawer=="function"&&"closeDrawer"in e&&typeof e.closeDrawer=="function"?e:null}getBurgerFocusTarget(){const t=this.shadowRoot?.querySelector("esp-header-button.menu-toggle")?.shadowRoot?.querySelector("button"),a=this.menuButton.value?.shadowRoot?.querySelector("button");return t??a??null}getScrollTokens(){const e=this.scrollBehavior.split(/\s+/).map(t=>t.trim().toLowerCase()).filter(Boolean);return new Set(e.filter(t=>t!=="none"))}getEffectiveScrollThreshold(){return Number.isFinite(this.scrollThreshold)?Math.max(0,this.scrollThreshold):0}clearScrollState(){this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0}runScrollStateUpdate(){const e=this.getScrollTokens();if(!e.size){this.clearScrollState();return}const t=Math.max(0,window.scrollY||document.documentElement.scrollTop||0),a=this.getEffectiveScrollThreshold(),s=Number.isFinite(this.dockOffset)?Math.max(0,this.dockOffset):a,i=t>(e.has("dock")?s:a),l=t>this.lastScrollY,h=e.has("reveal")&&l&&t>a&&!this.menuOpen;if(this.scrolled=i,this.hiddenByScroll=h,e.has("progress")){const m=document.documentElement,g=Math.max(1,m.scrollHeight-window.innerHeight);this.scrollProgress=Math.min(1,t/g)}else this.scrollProgress=0;this.lastScrollY=t}cancelScrollUpdate(){this.scrollRafId!==null&&(cancelAnimationFrame(this.scrollRafId),this.scrollRafId=null)}syncScrollListeners(){const e=this.getScrollTokens().size>0;if(e&&!this.scrollListenersAttached?(window.addEventListener("scroll",this.updateScrollState,{passive:!0}),window.addEventListener("resize",this.updateScrollState,{passive:!0}),this.scrollListenersAttached=!0):!e&&this.scrollListenersAttached&&this.removeScrollListeners(),e){this.updateScrollState();return}this.cancelScrollUpdate(),this.clearScrollState()}removeScrollListeners(){this.scrollListenersAttached&&(window.removeEventListener("scroll",this.updateScrollState),window.removeEventListener("resize",this.updateScrollState),this.scrollListenersAttached=!1)}addMenuDrawerListeners(){!this.menu||this.menuDrawerListenersAttached||(this.menu.addEventListener("drawer-opened",this.onMenuDrawerOpened),this.menu.addEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!0)}removeMenuDrawerListeners(){!this.menu||!this.menuDrawerListenersAttached||(this.menu.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.menu.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!1)}observeMenuContainer(){!this.menuContainer.value||this.observingMenuContainer||(this.resizeObserver.observe(this.menuContainer.value),this.observingMenuContainer=!0)}disconnectResizeObserver(){this.observingMenuContainer&&(this.resizeObserver.disconnect(),this.observingMenuContainer=!1)}syncMobileMenuQuery(){if("matchMedia"in window){if(!this.mobileMenuQuery){this.mobileMenuQuery=window.matchMedia(D),this.mobileMenu=this.mobileMenuQuery.matches,this.mobileMenuQuery.addEventListener("change",this.handleMobileMenuQueryChange);return}this.mobileMenu=this.mobileMenuQuery.matches}}getThemeRoot(){return this.traverseToClosest("esp-root")}syncExternalDrawerTarget(){const e=this.getExternalDrawerTarget(),t=e===this.menu?null:e;t!==this.externalDrawerTarget&&(this.externalDrawerTarget?.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget=t,this.externalDrawerTarget?.addEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.addEventListener("drawer-closed",this.onMenuDrawerClosed))}openNav(){const e=this.getBurgerFocusTarget(),t=this.getExternalDrawerTarget();if(this.burger&&(this.burger.menuOpen=!0),t){this.menuOpen=!0,t.openDrawer(e),document.body.classList.add("menu-open");return}if(this.menu){this.menu.sliding=!0,this.menuOpen=!0,this.menu.openDrawer(e),document.body.classList.add("menu-open");return}this.burger&&(this.burger.menuOpen=!1)}closeNav(){this.menuOpen=!1,this.burger&&(this.burger.menuOpen=!1);const e=this.getExternalDrawerTarget();if(e){e.closeDrawer(),document.body.classList.remove("menu-open");return}this.menu&&(this.menu.closeDrawer(),document.body.classList.remove("menu-open"))}get burger(){return this.menuButton.value??void 0}firstUpdated(e){if(super.firstUpdated(e),!this.menuContainer.value)return;const s=(this.menuContainer.value.firstElementChild?.assignedElements()??[])[0];s instanceof T?(this.menu=s,this.addMenuDrawerListeners()):s&&console.warn("<esp-header>: the menu slot expects an <esp-menu> element, received",s),this.observeMenuContainer(),this.syncExternalDrawerTarget(),this.syncMobileMenuQuery(),this.syncScrollListeners(),this.syncMenuLayout()}updated(e){super.updated(e),(e.has("showBurger")||e.has("drawerTarget")||e.has("menuDisplay")||e.has("layout"))&&(this.syncExternalDrawerTarget(),this.syncMenuLayout()),e.has("scrollBehavior")?this.syncScrollListeners():(e.has("scrollThreshold")||e.has("dockOffset"))&&this.updateScrollState()}connectedCallback(){super.connectedCallback(),this.syncScrollListeners(),this.syncMobileMenuQuery(),this.addMenuDrawerListeners(),this.syncExternalDrawerTarget(),this.observeMenuContainer()}disconnectedCallback(){this.removeMenuDrawerListeners(),this.externalDrawerTarget?.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget=null,this.mobileMenuQuery?.removeEventListener("change",this.handleMobileMenuQueryChange),this.mobileMenuQuery=null,this.removeScrollListeners(),this.cancelScrollUpdate(),this.disconnectResizeObserver(),super.disconnectedCallback()}renderConfiguredBrand(){if(!this.brandLogo&&!this.brandText)return c;const e=this.brandAlt||(this.brandText?"":"Site logo"),t=d`
+var n=function(p,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(p,e,t,o);else for(var h=p.length-1;h>=0;h--)(l=p[h])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};import{css as x,html as d,nothing as c}from"lit";import{customElement as D,property as a,state as u}from"lit/decorators.js";import{classMap as M}from"lit/directives/class-map.js";import{styleMap as T}from"lit/directives/style-map.js";import"../burger/esp-burger.js";import{createRef as f,ref as v}from"lit/directives/ref.js";import{EspalierMenu as m}from"./esp-menu.js";import{EspalierElementBase as w}from"../shared/esp-element-base.js";const S="(max-width: 36rem)";let r=class extends w{constructor(){super(...arguments),this.menuOpen=!1,this.menuTooLarge=!1,this.mobileMenu=!1,this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0,this.showBurger=!1,this.layout="standard",this.brandText="",this.brandLogo="",this.brandHref="",this.brandAlt="",this.brandColor="",this.brandAlign="start",this.brandWrap="truncate",this.menuDisplay="auto",this.themeToggle="hidden",this.scrollBehavior="none",this.scrollThreshold=16,this.dockOffset=0,this.drawerTarget="",this.fullBleedContent=!1,this.menuContainer=f(),this.menuButton=f(),this.menu=void 0,this.externalDrawerTarget=null,this.lastScrollY=0,this.lastInlineMenuWidth=0,this.mobileMenuQuery=null,this.menuDrawerListenersAttached=!1,this.observingMenuContainer=!1,this.scrollListenersAttached=!1,this.scrollRafId=null,this.resizeObserver=new ResizeObserver(()=>this.syncMenuLayout()),this.menuChildObserver=null,this.updateScrollState=()=>{this.scrollRafId===null&&(this.scrollRafId=requestAnimationFrame(()=>{this.scrollRafId=null,this.runScrollStateUpdate()}))},this.handleMobileMenuQueryChange=e=>{this.mobileMenu=e.matches,this.syncMenuLayout(),this.syncExternalDrawerControl()},this.toggleTheme=()=>{const e=this.getThemeRoot();e&&(e.scheme=e.scheme==="dark"?"light":"dark")},this.handleMenuToggleClicked=()=>{if(this.menuOpen){this.closeNav();return}this.openNav()},this.onMenuDrawerOpened=()=>{this.menuOpen=!0,document.body.classList.add("menu-open"),this.burger&&(this.burger.menuOpen=!0)},this.onMenuDrawerClosed=()=>{this.menuOpen=!1,document.body.classList.remove("menu-open"),this.burger&&(this.burger.menuOpen=!1)}}syncMenuLayout(){if(!this.menuContainer.value||!this.menu||!this.menu.getWidth)return;const e=this.menuContainer.value.clientWidth,t=this.menu.getWidth();t>0&&(this.lastInlineMenuWidth=t);const o=this.lastInlineMenuWidth||t,s=this.getExternalDrawerTarget(),i=this.menuDisplay!=="inline",l=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal";this.menuTooLarge=i&&this.menuDisplay==="auto"&&o>e,this.menu.sliding=i&&!s&&this.hasDrawerableContent()&&(this.menuTooLarge||l||this.mobileMenu)}menuHasContent(){return!!(this.menu??this.querySelector(':scope > [slot="menu"]'))?.querySelector("esp-menu-item, esp-menu-group")}hasDrawerableContent(){return this.showBurger||!!this.getExternalDrawerTarget()||this.menuHasContent()}getExternalDrawerTarget(){if(!this.drawerTarget)return null;const e=document.getElementById(this.drawerTarget);return e===this.menu?null:e&&"openDrawer"in e&&typeof e.openDrawer=="function"&&"closeDrawer"in e&&typeof e.closeDrawer=="function"?e:null}getBurgerFocusTarget(){const t=this.shadowRoot?.querySelector("esp-header-button.menu-toggle")?.shadowRoot?.querySelector("button"),o=this.menuButton.value?.shadowRoot?.querySelector("button");return t??o??null}getScrollTokens(){const e=this.scrollBehavior.split(/\s+/).map(t=>t.trim().toLowerCase()).filter(Boolean);return new Set(e.filter(t=>t!=="none"))}getEffectiveScrollThreshold(){return Number.isFinite(this.scrollThreshold)?Math.max(0,this.scrollThreshold):0}clearScrollState(){this.scrolled=!1,this.hiddenByScroll=!1,this.scrollProgress=0}runScrollStateUpdate(){const e=this.getScrollTokens();if(!e.size){this.clearScrollState();return}const t=Math.max(0,window.scrollY||document.documentElement.scrollTop||0),o=this.getEffectiveScrollThreshold(),s=Number.isFinite(this.dockOffset)?Math.max(0,this.dockOffset):o,i=t>(e.has("dock")?s:o),l=t>this.lastScrollY,h=e.has("reveal")&&l&&t>o&&!this.menuOpen;if(this.scrolled=i,this.hiddenByScroll=h,e.has("progress")){const g=document.documentElement,b=Math.max(1,g.scrollHeight-window.innerHeight);this.scrollProgress=Math.min(1,t/b)}else this.scrollProgress=0;this.lastScrollY=t}cancelScrollUpdate(){this.scrollRafId!==null&&(cancelAnimationFrame(this.scrollRafId),this.scrollRafId=null)}syncScrollListeners(){const e=this.getScrollTokens().size>0;if(e&&!this.scrollListenersAttached?(window.addEventListener("scroll",this.updateScrollState,{passive:!0}),window.addEventListener("resize",this.updateScrollState,{passive:!0}),this.scrollListenersAttached=!0):!e&&this.scrollListenersAttached&&this.removeScrollListeners(),e){this.updateScrollState();return}this.cancelScrollUpdate(),this.clearScrollState()}removeScrollListeners(){this.scrollListenersAttached&&(window.removeEventListener("scroll",this.updateScrollState),window.removeEventListener("resize",this.updateScrollState),this.scrollListenersAttached=!1)}addMenuDrawerListeners(){!this.menu||this.menuDrawerListenersAttached||(this.menu.addEventListener("drawer-opened",this.onMenuDrawerOpened),this.menu.addEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!0)}removeMenuDrawerListeners(){!this.menu||!this.menuDrawerListenersAttached||(this.menu.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.menu.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.menuDrawerListenersAttached=!1)}observeMenuContainer(){!this.menuContainer.value||this.observingMenuContainer||(this.resizeObserver.observe(this.menuContainer.value),this.observingMenuContainer=!0)}disconnectResizeObserver(){this.observingMenuContainer&&(this.resizeObserver.disconnect(),this.observingMenuContainer=!1)}observeMenuChildren(){!this.menu||this.menuChildObserver||(this.menuChildObserver=new MutationObserver(()=>{this.syncMenuLayout(),this.requestUpdate()}),this.menuChildObserver.observe(this.menu,{childList:!0,subtree:!0}))}syncMobileMenuQuery(){if("matchMedia"in window){if(!this.mobileMenuQuery){this.mobileMenuQuery=window.matchMedia(S),this.mobileMenu=this.mobileMenuQuery.matches,this.mobileMenuQuery.addEventListener("change",this.handleMobileMenuQueryChange);return}this.mobileMenu=this.mobileMenuQuery.matches}}getThemeRoot(){return this.traverseToClosest("esp-root")}syncExternalDrawerTarget(){const e=this.getExternalDrawerTarget(),t=e===this.menu?null:e;t!==this.externalDrawerTarget&&(this.externalDrawerTarget?.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof m&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=t,this.externalDrawerTarget?.addEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.addEventListener("drawer-closed",this.onMenuDrawerClosed)),this.syncExternalDrawerControl()}burgerVisibleForTarget(){if(this.menuDisplay==="inline")return!1;const e=this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal";return this.menuTooLarge||this.mobileMenu||e}syncExternalDrawerControl(){this.externalDrawerTarget instanceof m&&(this.externalDrawerTarget.hasExternalDrawerControl=this.burgerVisibleForTarget())}openNav(){const e=this.getBurgerFocusTarget(),t=this.getExternalDrawerTarget();if(this.burger&&(this.burger.menuOpen=!0),t){this.menuOpen=!0,t.openDrawer(e),document.body.classList.add("menu-open");return}if(this.menu){this.menu.sliding=!0,this.menuOpen=!0,this.menu.openDrawer(e),document.body.classList.add("menu-open");return}this.burger&&(this.burger.menuOpen=!1)}closeNav(){this.menuOpen=!1,this.burger&&(this.burger.menuOpen=!1);const e=this.getExternalDrawerTarget();if(e){e.closeDrawer(),document.body.classList.remove("menu-open");return}this.menu&&(this.menu.closeDrawer(),document.body.classList.remove("menu-open"))}get burger(){return this.menuButton.value??void 0}firstUpdated(e){if(super.firstUpdated(e),!this.menuContainer.value)return;const s=(this.menuContainer.value.firstElementChild?.assignedElements()??[])[0];s instanceof m?(this.menu=s,this.addMenuDrawerListeners(),this.observeMenuChildren()):s&&console.warn("<esp-header>: the menu slot expects an <esp-menu> element, received",s),this.observeMenuContainer(),this.syncExternalDrawerTarget(),this.syncMobileMenuQuery(),this.syncScrollListeners(),this.syncMenuLayout()}updated(e){super.updated(e),(e.has("showBurger")||e.has("drawerTarget")||e.has("menuDisplay")||e.has("layout"))&&(this.syncExternalDrawerTarget(),this.syncMenuLayout()),(e.has("mobileMenu")||e.has("menuTooLarge"))&&this.syncExternalDrawerControl(),e.has("scrollBehavior")?this.syncScrollListeners():(e.has("scrollThreshold")||e.has("dockOffset"))&&this.updateScrollState()}connectedCallback(){super.connectedCallback(),this.syncScrollListeners(),this.syncMobileMenuQuery(),this.addMenuDrawerListeners(),this.syncExternalDrawerTarget(),this.observeMenuContainer(),this.observeMenuChildren()}disconnectedCallback(){this.removeMenuDrawerListeners(),this.externalDrawerTarget?.removeEventListener("drawer-opened",this.onMenuDrawerOpened),this.externalDrawerTarget?.removeEventListener("drawer-closed",this.onMenuDrawerClosed),this.externalDrawerTarget instanceof m&&(this.externalDrawerTarget.hasExternalDrawerControl=!1),this.externalDrawerTarget=null,this.mobileMenuQuery?.removeEventListener("change",this.handleMobileMenuQueryChange),this.mobileMenuQuery=null,this.removeScrollListeners(),this.cancelScrollUpdate(),this.disconnectResizeObserver(),this.menuChildObserver?.disconnect(),this.menuChildObserver=null,super.disconnectedCallback()}renderConfiguredBrand(){if(!this.brandLogo&&!this.brandText)return c;const e=this.brandAlt||(this.brandText?"":"Site logo"),t=d`
       ${this.brandLogo?d`<img class="brand-logo" src=${this.brandLogo} alt=${e} />`:c}
       ${this.brandText?d`<span class="brand-text">${this.brandText}</span>`:c}
-    `;return this.brandHref?d`<a class="configured-brand" href=${this.brandHref}>${t}</a>`:d`<span class="configured-brand">${t}</span>`}render(){const{menuOpen:e,menuTooLarge:t,mobileMenu:a}=this,s=this.menuDisplay!=="inline",i=s&&(this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"),l=this.getScrollTokens(),h=l.has("progress"),m={"--_esp-header-brand-color":this.brandColor||null,"--_esp-header-scroll-progress":String(this.scrollProgress)},g={"menu-open":e,"too-wide":s&&(t||a||i),[`layout-${this.layout}`]:!0,"is-scrolled":this.scrolled,"hide-on-scroll":this.hiddenByScroll,"scroll-compact":l.has("compact"),"scroll-elevate":l.has("elevate"),"scroll-transparent":l.has("transparent")||l.has("transparent-to-solid"),"scroll-collapse-topbar":l.has("collapse-topbar")},w=this.scheme==="dark"?"light":"dark";return d`
-      <header class=${M(g)} style=${S(m)}>
+    `;return this.brandHref?d`<a class="configured-brand" href=${this.brandHref}>${t}</a>`:d`<span class="configured-brand">${t}</span>`}render(){const{menuOpen:e,menuTooLarge:t,mobileMenu:o}=this,s=this.menuDisplay!=="inline",i=s&&(this.showBurger||this.menuDisplay==="drawer"||this.layout==="minimal"),l=this.getScrollTokens(),h=l.has("progress"),g={"--_esp-header-brand-color":this.brandColor||null,"--_esp-header-scroll-progress":String(this.scrollProgress)},b={"menu-open":e,"too-wide":s&&this.hasDrawerableContent()&&(t||o||i),[`layout-${this.layout}`]:!0,"is-scrolled":this.scrolled,"hide-on-scroll":this.hiddenByScroll,"scroll-compact":l.has("compact"),"scroll-elevate":l.has("elevate"),"scroll-transparent":l.has("transparent")||l.has("transparent-to-solid"),"scroll-collapse-topbar":l.has("collapse-topbar")},y=this.scheme==="dark"?"light":"dark";return d`
+      <header class=${M(b)} style=${T(g)}>
         <section class="topbar">
           <slot name="topbar"></slot>
         </section>
@@ -11,7 +11,7 @@ var n=function(p,e,t,a){var s=arguments.length,i=s<3?e:a===null?a=Object.getOwnP
           <slot name="brand">${this.renderConfiguredBrand()}</slot>
         </section>
 
-        <section ${f(this.menuContainer)} class="menu-container">
+        <section ${v(this.menuContainer)} class="menu-container">
           <slot name="menu"></slot>
         </section>
 
@@ -20,7 +20,7 @@ var n=function(p,e,t,a){var s=arguments.length,i=s<3?e:a===null?a=Object.getOwnP
           ${this.themeToggle==="visible"?d`<esp-header-button
                 class="theme-toggle"
                 icon=${this.scheme==="dark"?"sun":"moon"}
-                aria-label=${`Switch to ${w} mode`}
+                aria-label=${`Switch to ${y} mode`}
                 @clicked=${this.toggleTheme}
               ></esp-header-button>`:c}
           <esp-header-button
@@ -31,12 +31,12 @@ var n=function(p,e,t,a){var s=arguments.length,i=s<3?e:a===null?a=Object.getOwnP
             aria-expanded=${e?"true":"false"}
             @clicked=${this.handleMenuToggleClicked}
           >
-            <esp-burger ${f(this.menuButton)} presentation-only></esp-burger>
+            <esp-burger ${v(this.menuButton)} presentation-only></esp-burger>
           </esp-header-button>
         </section>
         ${h?d`<div class="scroll-progress" aria-hidden="true"></div>`:c}
       </header>
-    `}};r.styles=[...v.styles,y`
+    `}};r.styles=[...w.styles,x`
       :host {
         --_esp-header-current-height: var(--esp-header-height, calc(4.5 * var(--esp-size-small)));
 
@@ -431,4 +431,4 @@ var n=function(p,e,t,a){var s=arguments.length,i=s<3?e:a===null?a=Object.getOwnP
           transition: none;
         }
       }
-    `],n([u()],r.prototype,"menuOpen",void 0),n([u()],r.prototype,"menuTooLarge",void 0),n([u()],r.prototype,"mobileMenu",void 0),n([u()],r.prototype,"scrolled",void 0),n([u()],r.prototype,"hiddenByScroll",void 0),n([u()],r.prototype,"scrollProgress",void 0),n([o({attribute:"show-burger",type:Boolean})],r.prototype,"showBurger",void 0),n([o({type:String,reflect:!0})],r.prototype,"layout",void 0),n([o({attribute:"brand-text",type:String})],r.prototype,"brandText",void 0),n([o({attribute:"brand-logo",type:String})],r.prototype,"brandLogo",void 0),n([o({attribute:"brand-href",type:String})],r.prototype,"brandHref",void 0),n([o({attribute:"brand-alt",type:String})],r.prototype,"brandAlt",void 0),n([o({attribute:"brand-color",type:String})],r.prototype,"brandColor",void 0),n([o({attribute:"brand-align",type:String,reflect:!0})],r.prototype,"brandAlign",void 0),n([o({attribute:"brand-wrap",type:String,reflect:!0})],r.prototype,"brandWrap",void 0),n([o({attribute:"menu-display",type:String,reflect:!0})],r.prototype,"menuDisplay",void 0),n([o({attribute:"theme-toggle",type:String,reflect:!0})],r.prototype,"themeToggle",void 0),n([o({attribute:"scroll-behavior",type:String})],r.prototype,"scrollBehavior",void 0),n([o({attribute:"scroll-threshold",type:Number})],r.prototype,"scrollThreshold",void 0),n([o({attribute:"dock-offset",type:Number})],r.prototype,"dockOffset",void 0),n([o({attribute:"drawer-target",type:String})],r.prototype,"drawerTarget",void 0),n([o({attribute:"full-bleed-content",type:Boolean,reflect:!0})],r.prototype,"fullBleedContent",void 0),r=n([x("esp-header")],r);export{r as EspalierHeader};
+    `],n([u()],r.prototype,"menuOpen",void 0),n([u()],r.prototype,"menuTooLarge",void 0),n([u()],r.prototype,"mobileMenu",void 0),n([u()],r.prototype,"scrolled",void 0),n([u()],r.prototype,"hiddenByScroll",void 0),n([u()],r.prototype,"scrollProgress",void 0),n([a({attribute:"show-burger",type:Boolean})],r.prototype,"showBurger",void 0),n([a({type:String,reflect:!0})],r.prototype,"layout",void 0),n([a({attribute:"brand-text",type:String})],r.prototype,"brandText",void 0),n([a({attribute:"brand-logo",type:String})],r.prototype,"brandLogo",void 0),n([a({attribute:"brand-href",type:String})],r.prototype,"brandHref",void 0),n([a({attribute:"brand-alt",type:String})],r.prototype,"brandAlt",void 0),n([a({attribute:"brand-color",type:String})],r.prototype,"brandColor",void 0),n([a({attribute:"brand-align",type:String,reflect:!0})],r.prototype,"brandAlign",void 0),n([a({attribute:"brand-wrap",type:String,reflect:!0})],r.prototype,"brandWrap",void 0),n([a({attribute:"menu-display",type:String,reflect:!0})],r.prototype,"menuDisplay",void 0),n([a({attribute:"theme-toggle",type:String,reflect:!0})],r.prototype,"themeToggle",void 0),n([a({attribute:"scroll-behavior",type:String})],r.prototype,"scrollBehavior",void 0),n([a({attribute:"scroll-threshold",type:Number})],r.prototype,"scrollThreshold",void 0),n([a({attribute:"dock-offset",type:Number})],r.prototype,"dockOffset",void 0),n([a({attribute:"drawer-target",type:String})],r.prototype,"drawerTarget",void 0),n([a({attribute:"full-bleed-content",type:Boolean,reflect:!0})],r.prototype,"fullBleedContent",void 0),r=n([D("esp-header")],r);export{r as EspalierHeader};

package/dist/menu/esp-menu.d.ts

@@ -75,6 +75,7 @@ export declare class EspalierMenu extends EspalierElementBase {
     get collapsed(): boolean;
     set collapsed(value: boolean);
     connectedCallback(): void;
+    disconnectedCallback(): void;
     protected firstUpdated(props: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
     /**

package/dist/menu/esp-menu.js

@@ -1,4 +1,4 @@
-var a=function(h,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(h,e,r,o);else for(var l=h.length-1;l>=0;l--)(s=h[l])&&(i=(t<3?s(i):t>3?s(e,r,i):s(e,r))||i);return t>3&&i&&Object.defineProperty(e,r,i),i};import{css as E,html as w,nothing as m}from"lit";import{customElement as C,property as p,state as g}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{unsafeHTML as v}from"lit/directives/unsafe-html.js";import{createRef as d,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{getEspBus as D}from"../shared/bus-events.js";import{normalizePath as S,pathStartsWithSegment as T,pathsMatch as y}from"../shared/path-matching.js";import{SwipeRevealController as O}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import{EspalierMenuItem as x}from"./esp-menu-item.js";import{EspalierMenuGroup as u}from"./esp-menu-group.js";let n=class extends b{constructor(){super(),this.itemsSlot=d(),this.railRef=d(),this.scrimRef=d(),this.drawerRef=d(),this.bus=D(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this._sliding=!1,this.mode="horizontal",this.overflow="auto",this.side="left",this.ariaLabel=null,this.autoExpand=!1,this.drawerOpen=!1,this.drawerTransitioning=!1,this.drawerTrigger=null,this.getWidth=()=>{const e=this.railRef.value;return e?Math.max(e.scrollWidth,e.clientWidth):-1},this.onDrawerTransitionEnd=()=>{this.closeTransitionTimer&&(clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=null),this.drawerTransitioning=!1,this.drawerOpen||(this.hideDrawerPopover(),this.drawerGroupOpenOverrides.clear())},this.swipeController=new O(this,this.side),this.swipeController.enabled=!1}get sliding(){return this._sliding}set sliding(e){const r=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",r)}get collapsed(){return this.drawerActive}set collapsed(e){e?this.mode="drawer":this.mode==="drawer"&&(this.mode="vertical")}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),this.syncSwipeEnabled()}firstUpdated(e){super.firstUpdated(e),this.propagateToItems()}updated(e){super.updated(e),(e.has("mode")||e.has("overflow")||e.has("side"))&&(this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)),this.autoExpand&&(e.has("autoExpand")||e.has("mode")&&this.mode!=="horizontal")?this.expandToCurrentPage():this.mode==="horizontal"&&e.has("mode")&&this.closeHorizontalTopLevelGroups()}openDrawer(e){this.drawerActive&&(e?this.drawerTrigger=e:this.drawerOpen||(this.drawerTrigger=null),this.swipeController.open())}closeDrawer(){this.swipeController.close(!0)}toggleDrawer(e){this.drawerOpen?this.closeDrawer():this.openDrawer(e)}toggleOpened(){this.toggleDrawer()}get isDrawerOpen(){return this.drawerOpen}syncSwipeEnabled(){this.swipeController.direction=this.drawerSide,this.swipeController.enabled=this.drawerActive}getAssignedChildren(){return this.itemsSlot.value?.assignedElements()??[]}propagateToItems(){const e=this.railMode;for(const r of this.getAssignedChildren())r instanceof x?(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch):r instanceof u&&(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch)}handleSlotChange(){this.propagateToItems()}onSwipeRevealChanged(e){e!==this.drawerOpen&&(this.drawerOpen=e,e?(this.drawerGroupOpenOverrides.clear(),this.bus.publish("close-popovers",{}),this.updateComplete.then(()=>this.showDrawerPopover())):(this.drawerTransitioning=!0,this.updateComplete.then(()=>this.startCloseTransition()),requestAnimationFrame(()=>this.restoreDrawerTriggerFocus())),this.dispatchEvent(new CustomEvent(e?"drawer-opened":"drawer-closed",{bubbles:!0,composed:!0})))}showDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;if(!(!e||!r)){this.swipeController.drawerElement=r;try{e.showPopover(),r.showPopover()}catch{}r.getBoundingClientRect(),requestAnimationFrame(()=>{this.drawerTransitioning=!0,this.requestUpdate()})}}startCloseTransition(){if(!this.drawerRef.value){this.hideDrawerPopover();return}this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout(()=>{this.closeTransitionTimer=null,!this.drawerOpen&&this.drawerTransitioning&&this.onDrawerTransitionEnd()},400)}hideDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;this.swipeController.drawerElement=null,r&&(r.style.cssText="");try{r?.hidePopover()}catch{}try{e?.hidePopover()}catch{}}restoreDrawerTriggerFocus(){const e=this.drawerTrigger;this.drawerTrigger=null,e?.isConnected&&e.focus({preventScroll:!0})}getAutoExpandedGroups(e=!0){const r=new Set;let o=null;for(const i of this.querySelectorAll("esp-menu-item")){const s=i.url||i.getAttribute("url");if(s&&y(s)){o=i;break}}if(!o)for(const i of this.querySelectorAll("esp-menu-group")){const s=i.url||i.getAttribute("url");if(s&&y(s)){o=i;break}}if(!o&&e){for(const i of this.querySelectorAll("esp-menu-group"))i.parentElement===this&&r.add(i);return r}if(!o)return r;o instanceof u&&r.add(o);let t=o.parentElement;for(;t&&t!==this;)t instanceof u&&r.add(t),t=t.parentElement;return r}isHorizontalTopLevelGroup(e){return e.mode==="horizontal"&&e.depth===0}groupUrlPrefixMatches(e){return T(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?T(location.pathname,S(r)):!1}expandToCurrentPage(){const e=this.getAutoExpandedGroups(),r=this.querySelectorAll("esp-menu-group");for(const o of r)o.open=e.has(o)&&!this.isHorizontalTopLevelGroup(o)}closeHorizontalTopLevelGroups(){for(const e of this.querySelectorAll("esp-menu-group"))this.isHorizontalTopLevelGroup(e)&&(e.open=!1)}getDrawerAutoExpandedGroups(){return this.getAutoExpandedGroups(!1)}collectDrawerNodes(e,r=this.getDrawerAutoExpandedGroups()){const o=[];for(const t of e)if(t instanceof x){const i=t.querySelector(":scope > svg, :scope > img");o.push({kind:"item",label:t.label,url:t.url,open:!1,icon:t.icon,iconHtml:i?.outerHTML||"",children:[],originalItem:t,originalGroup:null})}else if(t instanceof u){const i=t.querySelector(':scope > [slot="icon"]'),s=r.has(t)||this.groupPathMatches(t),l=this.drawerGroupOpenOverrides.get(t)??(t.open||s);o.push({kind:"group",label:t.label,url:t.url||"",open:l,icon:t.icon,iconHtml:i?.outerHTML||"",children:this.collectDrawerNodes(Array.from(t.children),r),originalItem:null,originalGroup:t})}return o}renderDrawerNode(e){return e.kind==="item"?w`<esp-menu-item
+var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(p,e,r,o);else for(var h=p.length-1;h>=0;h--)(s=p[h])&&(i=(t<3?s(i):t>3?s(e,r,i):s(e,r))||i);return t>3&&i&&Object.defineProperty(e,r,i),i};import{css as x,html as w,nothing as f}from"lit";import{customElement as E,property as l,state as g}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{unsafeHTML as v}from"lit/directives/unsafe-html.js";import{createRef as d,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{getEspBus as D}from"../shared/bus-events.js";import{normalizePath as S,pathStartsWithSegment as y,pathsMatch as T}from"../shared/path-matching.js";import{SwipeRevealController as A}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import{EspalierMenuItem as C}from"./esp-menu-item.js";import{EspalierMenuGroup as u}from"./esp-menu-group.js";const O="(max-width: 50em)";let a=class extends b{constructor(){super(),this.itemsSlot=d(),this.railRef=d(),this.scrimRef=d(),this.drawerRef=d(),this.bus=D(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this._sliding=!1,this._mobileCollapsed=!1,this.verticalDrawerQuery=null,this.onVerticalDrawerChange=e=>this.setMobileCollapsed(e.matches),this.mode="horizontal",this.overflow="auto",this.side="left",this.ariaLabel=null,this.autoExpand=!1,this.drawerOpen=!1,this.drawerTransitioning=!1,this.drawerTrigger=null,this.hasExternalDrawerControl=!1,this.getWidth=()=>{const e=this.railRef.value;return e?Math.max(e.scrollWidth,e.clientWidth):-1},this.onDrawerTransitionEnd=()=>{this.closeTransitionTimer&&(clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=null),this.drawerTransitioning=!1,this.drawerOpen||(this.hideDrawerPopover(),this.drawerGroupOpenOverrides.clear())},this.swipeController=new A(this,this.side),this.swipeController.enabled=!1}get sliding(){return this._sliding}set sliding(e){const r=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",r)}get collapsed(){return this.drawerActive}set collapsed(e){e?this.mode="drawer":this.mode==="drawer"&&(this.mode="vertical")}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"||this.mode==="vertical"&&this._mobileCollapsed&&this.hasExternalDrawerControl}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),!this.verticalDrawerQuery&&typeof window<"u"&&"matchMedia"in window&&(this.verticalDrawerQuery=window.matchMedia(O),this._mobileCollapsed=this.verticalDrawerQuery.matches,this.verticalDrawerQuery.addEventListener("change",this.onVerticalDrawerChange)),this.syncSwipeEnabled()}disconnectedCallback(){this.verticalDrawerQuery?.removeEventListener("change",this.onVerticalDrawerChange),this.verticalDrawerQuery=null,super.disconnectedCallback()}setMobileCollapsed(e){e!==this._mobileCollapsed&&(this._mobileCollapsed=e,this.mode==="vertical"&&this.applyMobileCollapse())}applyMobileCollapse(){this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)}firstUpdated(e){super.firstUpdated(e),this.propagateToItems()}updated(e){super.updated(e),(e.has("mode")||e.has("overflow")||e.has("side")||e.has("hasExternalDrawerControl"))&&(this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)),this.autoExpand&&(e.has("autoExpand")||e.has("mode")&&this.mode!=="horizontal")?this.expandToCurrentPage():this.mode==="horizontal"&&e.has("mode")&&this.closeHorizontalTopLevelGroups()}openDrawer(e){this.drawerActive&&(e?this.drawerTrigger=e:this.drawerOpen||(this.drawerTrigger=null),this.swipeController.open())}closeDrawer(){this.swipeController.close(!0)}toggleDrawer(e){this.drawerOpen?this.closeDrawer():this.openDrawer(e)}toggleOpened(){this.toggleDrawer()}get isDrawerOpen(){return this.drawerOpen}syncSwipeEnabled(){this.swipeController.direction=this.drawerSide,this.swipeController.enabled=this.drawerActive}getAssignedChildren(){return this.itemsSlot.value?.assignedElements()??[]}propagateToItems(){const e=this.railMode;for(const r of this.getAssignedChildren())r instanceof C?(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch):r instanceof u&&(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch)}handleSlotChange(){this.propagateToItems()}onSwipeRevealChanged(e){e!==this.drawerOpen&&(this.drawerOpen=e,e?(this.drawerGroupOpenOverrides.clear(),this.bus.publish("close-popovers",{}),this.updateComplete.then(()=>this.showDrawerPopover())):(this.drawerTransitioning=!0,this.updateComplete.then(()=>this.startCloseTransition()),requestAnimationFrame(()=>this.restoreDrawerTriggerFocus())),this.dispatchEvent(new CustomEvent(e?"drawer-opened":"drawer-closed",{bubbles:!0,composed:!0})))}showDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;if(!(!e||!r)){this.swipeController.drawerElement=r;try{e.showPopover(),r.showPopover()}catch{}r.getBoundingClientRect(),requestAnimationFrame(()=>{this.drawerTransitioning=!0,this.requestUpdate()})}}startCloseTransition(){if(!this.drawerRef.value){this.hideDrawerPopover();return}this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout(()=>{this.closeTransitionTimer=null,!this.drawerOpen&&this.drawerTransitioning&&this.onDrawerTransitionEnd()},400)}hideDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;this.swipeController.drawerElement=null,r&&(r.style.cssText="");try{r?.hidePopover()}catch{}try{e?.hidePopover()}catch{}}restoreDrawerTriggerFocus(){const e=this.drawerTrigger;this.drawerTrigger=null,e?.isConnected&&e.focus({preventScroll:!0})}getAutoExpandedGroups(e=!0){const r=new Set;let o=null;for(const i of this.querySelectorAll("esp-menu-item")){const s=i.url||i.getAttribute("url");if(s&&T(s)){o=i;break}}if(!o)for(const i of this.querySelectorAll("esp-menu-group")){const s=i.url||i.getAttribute("url");if(s&&T(s)){o=i;break}}if(!o&&e){for(const i of this.querySelectorAll("esp-menu-group"))i.parentElement===this&&r.add(i);return r}if(!o)return r;o instanceof u&&r.add(o);let t=o.parentElement;for(;t&&t!==this;)t instanceof u&&r.add(t),t=t.parentElement;return r}isHorizontalTopLevelGroup(e){return e.mode==="horizontal"&&e.depth===0}groupUrlPrefixMatches(e){return y(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?y(location.pathname,S(r)):!1}expandToCurrentPage(){const e=this.getAutoExpandedGroups(),r=this.querySelectorAll("esp-menu-group");for(const o of r)o.open=e.has(o)&&!this.isHorizontalTopLevelGroup(o)}closeHorizontalTopLevelGroups(){for(const e of this.querySelectorAll("esp-menu-group"))this.isHorizontalTopLevelGroup(e)&&(e.open=!1)}getDrawerAutoExpandedGroups(){return this.getAutoExpandedGroups(!1)}collectDrawerNodes(e,r=this.getDrawerAutoExpandedGroups()){const o=[];for(const t of e)if(t instanceof C){const i=t.querySelector(":scope > svg, :scope > img");o.push({kind:"item",label:t.label,url:t.url,open:!1,icon:t.icon,iconHtml:i?.outerHTML||"",children:[],originalItem:t,originalGroup:null})}else if(t instanceof u){const i=t.querySelector(':scope > [slot="icon"]'),s=r.has(t)||this.groupPathMatches(t),h=this.drawerGroupOpenOverrides.get(t)??(t.open||s);o.push({kind:"group",label:t.label,url:t.url||"",open:h,icon:t.icon,iconHtml:i?.outerHTML||"",children:this.collectDrawerNodes(Array.from(t.children),r),originalItem:null,originalGroup:t})}return o}renderDrawerNode(e){return e.kind==="item"?w`<esp-menu-item
         label=${e.label}
         .url=${e.url}
         .icon=${e.icon}
@@ -13,12 +13,12 @@ var a=function(h,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnP
       ?open=${e.open}
       @esp-group-toggle=${r=>{e.originalGroup&&(this.drawerGroupOpenOverrides.set(e.originalGroup,r.detail.open),this.isHorizontalTopLevelGroup(e.originalGroup)||(e.originalGroup.open=r.detail.open))}}
     >
-      ${e.iconHtml?v(e.iconHtml):m}
+      ${e.iconHtml?v(e.iconHtml):f}
       ${e.children.map(r=>this.renderDrawerNode(r))}
-    </esp-menu-group>`}handleDrawerItemClick(e){e.dispatchEvent(new CustomEvent("clicked",{detail:{},bubbles:!0,composed:!0})),this.swipeController.close(!0)}render(){const e=this.drawerOpen||this.drawerTransitioning,r=this.drawerActive&&(this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"),o={rail:!0,horizontal:this.railMode==="horizontal",vertical:this.railMode==="vertical",wrap:this.overflow==="wrap",scroll:this.overflow==="scroll","drawer-forced":this.drawerActive},t={drawer:!0,"drawer-left":this.drawerSide==="left","drawer-right":this.drawerSide==="right",transitioning:this.drawerTransitioning,open:this.drawerOpen},i=e?this.collectDrawerNodes(this.getAssignedChildren()):[],s=this.ariaLabel??"Navigation";return w`
+    </esp-menu-group>`}handleDrawerItemClick(e){e.dispatchEvent(new CustomEvent("clicked",{detail:{},bubbles:!0,composed:!0})),this.swipeController.close(!0)}render(){const e=this.drawerOpen||this.drawerTransitioning,r=this.drawerActive,o={rail:!0,horizontal:this.railMode==="horizontal",vertical:this.railMode==="vertical",wrap:this.overflow==="wrap",scroll:this.overflow==="scroll","drawer-forced":this.drawerActive},t={drawer:!0,"drawer-left":this.drawerSide==="left","drawer-right":this.drawerSide==="right",transitioning:this.drawerTransitioning,open:this.drawerOpen},i=e?this.collectDrawerNodes(this.getAssignedChildren()):[],s=this.ariaLabel??"Navigation";return w`
       <nav
         ${c(this.railRef)}
-        class=${f(o)}
+        class=${m(o)}
         aria-label=${s}
         ?hidden=${r}
       >
@@ -26,19 +26,19 @@ var a=function(h,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnP
       </nav>
       <div
         ${c(this.scrimRef)}
-        class=${f({scrim:!0,open:this.drawerOpen,transitioning:this.drawerTransitioning})}
+        class=${m({scrim:!0,open:this.drawerOpen,transitioning:this.drawerTransitioning})}
         popover="manual"
       ></div>
       <nav
         ${c(this.drawerRef)}
-        class=${f(t)}
+        class=${m(t)}
         aria-label=${s}
         popover="manual"
         @transitionend=${this.onDrawerTransitionEnd}
       >
-        ${e?i.map(l=>this.renderDrawerNode(l)):m}
+        ${e?i.map(h=>this.renderDrawerNode(h)):f}
       </nav>
-    `}};n.styles=[...b.styles,E`
+    `}};a.styles=[...b.styles,x`
       :host {
         display: block;
         min-width: 0;
@@ -168,4 +168,4 @@ var a=function(h,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnP
           transition: none;
         }
       }
-    `],a([p({type:String,reflect:!0})],n.prototype,"mode",void 0),a([p({type:String,reflect:!0})],n.prototype,"overflow",void 0),a([p({type:String,reflect:!0})],n.prototype,"side",void 0),a([p({attribute:"aria-label",type:String})],n.prototype,"ariaLabel",void 0),a([p({type:Boolean,attribute:"auto-expand"})],n.prototype,"autoExpand",void 0),a([p({type:Boolean})],n.prototype,"sliding",null),a([p({type:Boolean})],n.prototype,"collapsed",null),a([g()],n.prototype,"drawerOpen",void 0),a([g()],n.prototype,"drawerTransitioning",void 0),n=a([C("esp-menu")],n);export{n as EspalierMenu};
+    `],n([l({type:String,reflect:!0})],a.prototype,"mode",void 0),n([l({type:String,reflect:!0})],a.prototype,"overflow",void 0),n([l({type:String,reflect:!0})],a.prototype,"side",void 0),n([l({attribute:"aria-label",type:String})],a.prototype,"ariaLabel",void 0),n([l({type:Boolean,attribute:"auto-expand"})],a.prototype,"autoExpand",void 0),n([l({type:Boolean})],a.prototype,"sliding",null),n([l({type:Boolean})],a.prototype,"collapsed",null),n([g()],a.prototype,"drawerOpen",void 0),n([g()],a.prototype,"drawerTransitioning",void 0),n([l({attribute:!1})],a.prototype,"hasExternalDrawerControl",void 0),a=n([E("esp-menu")],a);export{a as EspalierMenu};

package/dist/menu/swipe-reveal-controller.js

@@ -1 +1 @@
-const h=10,a=.1,c=10,l=24,u=400,d=800;let o=null;class f{constructor(t,e="left"){this._isOpen=!1,this._isTouch=!1,this._enabled=!0,this._drawerElement=null,this.startX=0,this.startY=0,this.gestureStarted=!1,this.committed=!1,this.tracking=!1,this.pointerMediaQuery=null,this.horizontalScrollTarget=null,this.lastViewportWidth=0,this.lastViewportHeight=0,this.lastTouchEndTime=0,this.openedAt=0,this.closedViaTap=!1,this.onTouchStart=i=>this.handleTouchStart(i),this.onTouchMove=i=>this.handleTouchMove(i),this.onTouchEnd=i=>this.handleTouchEnd(i),this.onKeyDown=i=>this.handleKeyDown(i),this.onResize=()=>this.handleResize(),this.onDocumentClick=i=>this.handleDocumentClick(i),this.onMediaChange=i=>this.handleMediaChange(i),this.savedScrollY=0,this.isScrollLocked=!1,this.inertElements=[],(this.host=t).addController(this),this._direction=e}get isOpen(){return this._isOpen}get isTouch(){return this._isTouch}get direction(){return this._direction}set direction(t){this._direction=t}set drawerElement(t){this._drawerElement=t}get enabled(){return this._enabled}set enabled(t){this._enabled=t,!t&&this._isOpen&&this.close(!0)}open(){this._isOpen||this._enabled&&(o&&o!==this||(this._isOpen=!0,o=this,this.openedAt=Date.now(),this.lockScroll(!0),this.host.onSwipeRevealChanged(!0)))}close(t=!1){this._isOpen&&(!t&&Date.now()-this.openedAt<400||(this._isOpen=!1,o===this&&(o=null),this.lockScroll(!1),this.host.onSwipeRevealChanged(!1)))}toggle(){this._isOpen?this.close(!0):this.open()}hostConnected(){this.pointerMediaQuery=window.matchMedia("(pointer: coarse)"),this._isTouch=this.pointerMediaQuery.matches,this.lastViewportWidth=window.innerWidth,this.lastViewportHeight=window.innerHeight,this.pointerMediaQuery.addEventListener("change",this.onMediaChange),this._isTouch&&this.attachTouchListeners(),this.attachClickListener(),this.attachDismissListeners()}hostDisconnected(){this.detachTouchListeners(),this.stopTracking(),this.detachClickListener(),this.detachDismissListeners(),this.pointerMediaQuery?.removeEventListener("change",this.onMediaChange),this.pointerMediaQuery=null,this.lockScroll(!1),o===this&&(o=null)}attachTouchListeners(){document.addEventListener("touchstart",this.onTouchStart,{passive:!0}),document.addEventListener("touchend",this.onTouchEnd,{passive:!0}),document.addEventListener("touchcancel",this.onTouchEnd,{passive:!0})}detachTouchListeners(){document.removeEventListener("touchstart",this.onTouchStart),document.removeEventListener("touchend",this.onTouchEnd),document.removeEventListener("touchcancel",this.onTouchEnd)}startTracking(){this.tracking||(this.tracking=!0,document.addEventListener("touchmove",this.onTouchMove,{passive:!1}))}stopTracking(){this.tracking&&(this.tracking=!1,document.removeEventListener("touchmove",this.onTouchMove))}attachClickListener(){document.addEventListener("click",this.onDocumentClick,!0)}detachClickListener(){document.removeEventListener("click",this.onDocumentClick,!0)}attachDismissListeners(){document.addEventListener("keydown",this.onKeyDown),window.addEventListener("resize",this.onResize)}detachDismissListeners(){document.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("resize",this.onResize)}handleMediaChange(t){this._isTouch=t.matches,t.matches?this.attachTouchListeners():(this._isOpen&&this.close(!0),this.detachTouchListeners(),this.stopTracking()),this.host.requestUpdate()}isHorizontalDragControl(t){for(const e of t.composedPath())if(e instanceof HTMLElement){if(e===document.body||e===document.documentElement)break;if(e instanceof HTMLInputElement&&e.type==="range")return!0}return!1}isInsideDatePickerCalendar(t){for(const e of t.composedPath())if(e instanceof HTMLElement){if(e===document.body||e===document.documentElement)break;if(e.classList.contains("picker-popover")){const i=e.getRootNode();if(i instanceof ShadowRoot&&i.host?.tagName==="ESP-DATE-PICKER")return!0}}return!1}hasNoSwipeAncestor(t){for(const e of t.composedPath())if(e instanceof HTMLElement){if(e===document.body||e===document.documentElement)break;if(e.hasAttribute("data-no-swipe"))return!0}return!1}findHorizontallyScrollable(t){const e=t.composedPath();for(const i of e){if(!(i instanceof HTMLElement))continue;if(i===document.body||i===document.documentElement)break;if(i.scrollWidth<=i.clientWidth)continue;const n=getComputedStyle(i).overflowX;if(n==="auto"||n==="scroll"||n==="-webkit-marquee")return i}return null}canScrollInDirection(t,e){return e>0?t.scrollLeft>0:t.scrollLeft+t.clientWidth<t.scrollWidth-1}isPointInDrawer(t,e){if(!this._drawerElement)return!1;const i=this._drawerElement.getBoundingClientRect();return t>=i.left&&t<=i.right&&e>=i.top&&e<=i.bottom}handleTouchStart(t){if(!this._enabled||t.touches.length!==1)return;(this.committed||this.gestureStarted||this.tracking)&&this.resetGesture();const e=t.touches[0];this.isPointInDrawer(e.clientX,e.clientY)||this.isHorizontalDragControl(t)||this.isInsideDatePickerCalendar(t)||this.hasNoSwipeAncestor(t)||(this.horizontalScrollTarget=this._isOpen?null:this.findHorizontallyScrollable(t),this.startX=e.clientX,this.startY=e.clientY,this.gestureStarted=!1,this.committed=!1,this.startTracking())}handleTouchMove(t){if(t.touches.length!==1||this.committed||this.startX===0&&this.startY===0)return;this._isOpen&&t.cancelable&&t.preventDefault();const e=t.touches[0],i=e.clientX-this.startX,s=e.clientY-this.startY;if(!this.gestureStarted){if(Math.abs(i)<10&&Math.abs(s)<10)return;if(Math.abs(s)>Math.abs(i)){this.resetGesture();return}if(this._direction==="left"){if(!this._isOpen&&i<0){this.resetGesture();return}if(this._isOpen&&i>0){this.resetGesture();return}}else{if(!this._isOpen&&i>0){this.resetGesture();return}if(this._isOpen&&i<0){this.resetGesture();return}}if(this.horizontalScrollTarget&&this.canScrollInDirection(this.horizontalScrollTarget,i)){this.resetGesture();return}this.gestureStarted=!0}t.cancelable&&t.preventDefault();const n=window.innerWidth*.1;Math.abs(i)>=n&&(this.committed=!0,this._isOpen?this.close():this.open())}handleTouchEnd(t){if(this.lastTouchEndTime=Date.now(),this._isOpen&&this.tracking&&!this.committed&&t.changedTouches.length===1){const e=t.changedTouches[0],i=e.clientX-this.startX,s=e.clientY-this.startY;Math.abs(i)<10&&Math.abs(s)<10&&(this.closedViaTap=!0,setTimeout(()=>{this.closedViaTap=!1},400),this.close())}this.resetGesture()}handleDocumentClick(t){if(this.closedViaTap){this.closedViaTap=!1,t.stopImmediatePropagation(),t.preventDefault();return}this._isOpen&&(Date.now()-this.openedAt<800||Date.now()-this.lastTouchEndTime<400||this.isPointInDrawer(t.clientX,t.clientY)||(t.stopImmediatePropagation(),this.close()))}resetGesture(){this.startX=0,this.startY=0,this.gestureStarted=!1,this.committed=!1,this.horizontalScrollTarget=null,this.stopTracking()}handleKeyDown(t){t.key==="Escape"&&this._isOpen&&this.close(!0)}handleResize(){const t=Math.abs(window.innerWidth-this.lastViewportWidth),e=Math.abs(window.innerHeight-this.lastViewportHeight);this.lastViewportWidth=window.innerWidth,this.lastViewportHeight=window.innerHeight,!(this._isOpen&&Date.now()-this.openedAt<800)&&(t<24&&e<24||this._isOpen&&this.close(!0))}lockScroll(t){if(t&&this.isScrollLocked||!t&&!this.isScrollLocked)return;this.isScrollLocked=t;const{style:e}=document.body;t?(this.savedScrollY=window.scrollY,e.position="fixed",e.top=`-${this.savedScrollY}px`,e.left="0",e.right="0",this.setPageContentInert(!0)):(e.position="",e.top="",e.left="",e.right="",window.scrollTo(0,this.savedScrollY),requestAnimationFrame(()=>{this.setPageContentInert(!1),window.dispatchEvent(new Event("resize"))}))}getPageRegionFromSlot(t){return t.closest(".esp-page-top, .esp-page-main, .esp-page-left, .esp-page-right, footer")}getContainingPageRegionFromLightDom(){const t=this.host.closest("esp-page");if(!t?.shadowRoot)return null;let e=this.host;for(;e?.parentElement&&e.parentElement!==t;)e=e.parentElement;if(!e||e.parentElement!==t)return null;const i=e.getAttribute("slot")??"",s=Array.from(t.shadowRoot.querySelectorAll("slot")).find(n=>n.name===i);return s?this.getPageRegionFromSlot(s):null}getContainingPageRegion(){const t=this.getContainingPageRegionFromLightDom();if(t)return t;let e=this.host;for(;e;){if(e instanceof HTMLElement&&e.assignedSlot){const s=this.getPageRegionFromSlot(e.assignedSlot);if(s)return s;const n=e.assignedSlot.getRootNode();if(n instanceof ShadowRoot){e=n.host;continue}}if(e.parentElement){e=e.parentElement;continue}const i=e.getRootNode();e=i instanceof ShadowRoot?i.host:null}return null}setPageContentInert(t){if(t){this.inertElements=[];const e=this.getContainingPageRegion();if(!e)return;const i=e.parentElement;if(!i)return;for(const s of i.children)s instanceof HTMLElement&&s!==e&&(s.inert||(s.inert=!0,this.inertElements.push(s)))}else{for(const e of this.inertElements)e.inert=!1;this.inertElements=[]}}}export{f as SwipeRevealController};
+const h=10,a=.25,l=.25,c=10,d=24,u=400,f=800;let o=null;class g{constructor(e,t="left"){this._isOpen=!1,this._isTouch=!1,this._enabled=!0,this._drawerElement=null,this.startX=0,this.startY=0,this.gestureStarted=!1,this.committed=!1,this.gestureStartedInDrawer=!1,this.tracking=!1,this.pointerMediaQuery=null,this.horizontalScrollTarget=null,this.lastViewportWidth=0,this.lastViewportHeight=0,this.lastTouchEndTime=0,this.openedAt=0,this.closedViaTap=!1,this.onTouchStart=i=>this.handleTouchStart(i),this.onTouchMove=i=>this.handleTouchMove(i),this.onTouchEnd=i=>this.handleTouchEnd(i),this.onKeyDown=i=>this.handleKeyDown(i),this.onResize=()=>this.handleResize(),this.onDocumentClick=i=>this.handleDocumentClick(i),this.onMediaChange=i=>this.handleMediaChange(i),this.savedScrollY=0,this.isScrollLocked=!1,this.inertElements=[],(this.host=e).addController(this),this._direction=t}get isOpen(){return this._isOpen}get isTouch(){return this._isTouch}get direction(){return this._direction}set direction(e){this._direction=e}set drawerElement(e){this._drawerElement=e}get enabled(){return this._enabled}set enabled(e){this._enabled=e,!e&&this._isOpen&&this.close(!0)}open(){this._isOpen||this._enabled&&(o&&o!==this||(this._isOpen=!0,o=this,this.openedAt=Date.now(),this.lockScroll(!0),this.host.onSwipeRevealChanged(!0)))}close(e=!1){this._isOpen&&(!e&&Date.now()-this.openedAt<400||(this._isOpen=!1,o===this&&(o=null),this.lockScroll(!1),this.host.onSwipeRevealChanged(!1)))}toggle(){this._isOpen?this.close(!0):this.open()}hostConnected(){this.pointerMediaQuery=window.matchMedia("(pointer: coarse)"),this._isTouch=this.pointerMediaQuery.matches,this.lastViewportWidth=window.innerWidth,this.lastViewportHeight=window.innerHeight,this.pointerMediaQuery.addEventListener("change",this.onMediaChange),this._isTouch&&this.attachTouchListeners(),this.attachClickListener(),this.attachDismissListeners()}hostDisconnected(){this.detachTouchListeners(),this.stopTracking(),this.detachClickListener(),this.detachDismissListeners(),this.pointerMediaQuery?.removeEventListener("change",this.onMediaChange),this.pointerMediaQuery=null,this.lockScroll(!1),o===this&&(o=null)}attachTouchListeners(){document.addEventListener("touchstart",this.onTouchStart,{passive:!0}),document.addEventListener("touchend",this.onTouchEnd,{passive:!0}),document.addEventListener("touchcancel",this.onTouchEnd,{passive:!0})}detachTouchListeners(){document.removeEventListener("touchstart",this.onTouchStart),document.removeEventListener("touchend",this.onTouchEnd),document.removeEventListener("touchcancel",this.onTouchEnd)}startTracking(){this.tracking||(this.tracking=!0,document.addEventListener("touchmove",this.onTouchMove,{passive:!1}))}stopTracking(){this.tracking&&(this.tracking=!1,document.removeEventListener("touchmove",this.onTouchMove))}attachClickListener(){document.addEventListener("click",this.onDocumentClick,!0)}detachClickListener(){document.removeEventListener("click",this.onDocumentClick,!0)}attachDismissListeners(){document.addEventListener("keydown",this.onKeyDown),window.addEventListener("resize",this.onResize)}detachDismissListeners(){document.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("resize",this.onResize)}handleMediaChange(e){this._isTouch=e.matches,e.matches?this.attachTouchListeners():(this._isOpen&&this.close(!0),this.detachTouchListeners(),this.stopTracking()),this.host.requestUpdate()}isHorizontalDragControl(e){for(const t of e.composedPath())if(t instanceof HTMLElement){if(t===document.body||t===document.documentElement)break;if(t instanceof HTMLInputElement&&t.type==="range")return!0}return!1}isInsideDatePickerCalendar(e){for(const t of e.composedPath())if(t instanceof HTMLElement){if(t===document.body||t===document.documentElement)break;if(t.classList.contains("picker-popover")){const i=t.getRootNode();if(i instanceof ShadowRoot&&i.host?.tagName==="ESP-DATE-PICKER")return!0}}return!1}hasNoSwipeAncestor(e){for(const t of e.composedPath())if(t instanceof HTMLElement){if(t===document.body||t===document.documentElement)break;if(t.hasAttribute("data-no-swipe"))return!0}return!1}findHorizontallyScrollable(e){const t=e.composedPath();for(const i of t){if(!(i instanceof HTMLElement))continue;if(i===document.body||i===document.documentElement)break;if(i.scrollWidth<=i.clientWidth)continue;const n=getComputedStyle(i).overflowX;if(n==="auto"||n==="scroll"||n==="-webkit-marquee")return i}return null}canScrollInDirection(e,t){return t>0?e.scrollLeft>0:e.scrollLeft+e.clientWidth<e.scrollWidth-1}isPointInDrawer(e,t){if(!this._drawerElement)return!1;const i=this._drawerElement.getBoundingClientRect();return e>=i.left&&e<=i.right&&t>=i.top&&t<=i.bottom}handleTouchStart(e){if(!this._enabled||e.touches.length!==1)return;(this.committed||this.gestureStarted||this.tracking)&&this.resetGesture();const t=e.touches[0];if(this.isPointInDrawer(t.clientX,t.clientY)){if(!this._isOpen)return;this.gestureStartedInDrawer=!0,this.horizontalScrollTarget=null,this.startX=t.clientX,this.startY=t.clientY,this.gestureStarted=!1,this.committed=!1,this.startTracking();return}this.isHorizontalDragControl(e)||this.isInsideDatePickerCalendar(e)||this.hasNoSwipeAncestor(e)||!this._isOpen&&!this.isWithinOpenEdge(t.clientX)||(this.horizontalScrollTarget=this._isOpen?null:this.findHorizontallyScrollable(e),this.gestureStartedInDrawer=!1,this.startX=t.clientX,this.startY=t.clientY,this.gestureStarted=!1,this.committed=!1,this.startTracking())}isWithinOpenEdge(e){const t=window.innerWidth*.25;return this._direction==="left"?e<=t:e>=window.innerWidth-t}handleTouchMove(e){if(e.touches.length!==1||this.committed||this.startX===0&&this.startY===0)return;this._isOpen&&!this.gestureStartedInDrawer&&e.cancelable&&e.preventDefault();const t=e.touches[0],i=t.clientX-this.startX,s=t.clientY-this.startY;if(!this.gestureStarted){if(Math.abs(i)<10&&Math.abs(s)<10)return;if(Math.abs(s)>Math.abs(i)){this.resetGesture();return}if(this._direction==="left"){if(!this._isOpen&&i<0){this.resetGesture();return}if(this._isOpen&&i>0){this.resetGesture();return}}else{if(!this._isOpen&&i>0){this.resetGesture();return}if(this._isOpen&&i<0){this.resetGesture();return}}if(this.horizontalScrollTarget&&this.canScrollInDirection(this.horizontalScrollTarget,i)){this.resetGesture();return}this.gestureStarted=!0}e.cancelable&&e.preventDefault();const n=window.innerWidth*.25;Math.abs(i)>=n&&(this.committed=!0,this._isOpen?this.close():this.open())}handleTouchEnd(e){if(this.lastTouchEndTime=Date.now(),this._isOpen&&this.tracking&&!this.committed&&!this.gestureStartedInDrawer&&e.changedTouches.length===1){const t=e.changedTouches[0],i=t.clientX-this.startX,s=t.clientY-this.startY;Math.abs(i)<10&&Math.abs(s)<10&&(this.closedViaTap=!0,setTimeout(()=>{this.closedViaTap=!1},400),this.close())}this.resetGesture()}handleDocumentClick(e){if(this.closedViaTap){this.closedViaTap=!1,e.stopImmediatePropagation(),e.preventDefault();return}this._isOpen&&(Date.now()-this.openedAt<800||Date.now()-this.lastTouchEndTime<400||this.isPointInDrawer(e.clientX,e.clientY)||(e.stopImmediatePropagation(),this.close()))}resetGesture(){this.startX=0,this.startY=0,this.gestureStarted=!1,this.committed=!1,this.gestureStartedInDrawer=!1,this.horizontalScrollTarget=null,this.stopTracking()}handleKeyDown(e){e.key==="Escape"&&this._isOpen&&this.close(!0)}handleResize(){const e=Math.abs(window.innerWidth-this.lastViewportWidth),t=Math.abs(window.innerHeight-this.lastViewportHeight);this.lastViewportWidth=window.innerWidth,this.lastViewportHeight=window.innerHeight,!(this._isOpen&&Date.now()-this.openedAt<800)&&(e<24&&t<24||this._isOpen&&this.close(!0))}lockScroll(e){if(e&&this.isScrollLocked||!e&&!this.isScrollLocked)return;this.isScrollLocked=e;const{style:t}=document.body;e?(this.savedScrollY=window.scrollY,t.position="fixed",t.top=`-${this.savedScrollY}px`,t.left="0",t.right="0",this.setPageContentInert(!0)):(t.position="",t.top="",t.left="",t.right="",window.scrollTo(0,this.savedScrollY),requestAnimationFrame(()=>{this.setPageContentInert(!1),window.dispatchEvent(new Event("resize"))}))}getPageRegionFromSlot(e){return e.closest(".esp-page-top, .esp-page-main, .esp-page-left, .esp-page-right, footer")}getContainingPageRegionFromLightDom(){const e=this.host.closest("esp-page");if(!e?.shadowRoot)return null;let t=this.host;for(;t?.parentElement&&t.parentElement!==e;)t=t.parentElement;if(!t||t.parentElement!==e)return null;const i=t.getAttribute("slot")??"",s=Array.from(e.shadowRoot.querySelectorAll("slot")).find(n=>n.name===i);return s?this.getPageRegionFromSlot(s):null}getContainingPageRegion(){const e=this.getContainingPageRegionFromLightDom();if(e)return e;let t=this.host;for(;t;){if(t instanceof HTMLElement&&t.assignedSlot){const s=this.getPageRegionFromSlot(t.assignedSlot);if(s)return s;const n=t.assignedSlot.getRootNode();if(n instanceof ShadowRoot){t=n.host;continue}}if(t.parentElement){t=t.parentElement;continue}const i=t.getRootNode();t=i instanceof ShadowRoot?i.host:null}return null}setPageContentInert(e){if(e){this.inertElements=[];const t=this.getContainingPageRegion();if(!t)return;const i=t.parentElement;if(!i)return;for(const s of i.children)s instanceof HTMLElement&&s!==t&&(s.inert||(s.inert=!0,this.inertElements.push(s)))}else{for(const t of this.inertElements)t.inert=!1;this.inertElements=[]}}}export{g as SwipeRevealController};

package/dist/page/esp-page.js

@@ -107,7 +107,9 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
       }
 
       .esp-page {
+        
         min-height: 100vh;
+        min-height: 100dvh;
         display: grid;
         grid-template-columns:
           [full-start canvas-left-start] var(--_esp-page-gutter-left)
@@ -147,6 +149,8 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
           grid-column: full;
           grid-row: top;
           position: relative;
+          
+          contain: inline-size;
         }
 
         
@@ -232,6 +236,8 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
           grid-row: footer;
           z-index: 10;
           background: var(--esp-page-background, var(--esp-color-background));
+          
+          contain: inline-size;
         }
 
         &.sticky-header {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
   "customElements": "custom-elements.json",
   "type": "module",