@taprootio/espalier 6.2.0 → 6.3.0

package/dist/action-menu/esp-action-menu-item.js

@@ -84,6 +84,7 @@ var s=function(r,i,t,n){var a=arguments.length,e=a<3?i:n===null?n=Object.getOwnP
 
       :host(:not([disabled]):hover) .item,
       :host(:not([disabled]):focus-visible) .item {
+        --_esp-surface-layer: 2;
         background: var(--esp-action-menu-item-hover-background, var(--esp-color-layer-2));
       }
 

package/dist/action-menu/esp-action-menu.js

@@ -1,4 +1,4 @@
-var l=function(d,e,t,s){var o=arguments.length,i=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(d,e,t,s);else for(var r=d.length-1;r>=0;r--)(a=d[r])&&(i=(o<3?a(i):o>3?a(e,t,i):a(e,t))||i);return o>3&&i&&Object.defineProperty(e,t,i),i};import{css as v,html as p}from"lit";import{customElement as I,property as u,state as g}from"lit/decorators.js";import{createRef as c,ref as h}from"lit/directives/ref.js";import"../button/esp-button.js";import"../popover/esp-popover.js";import{EspalierElementBase as f}from"../shared/esp-element-base.js";import{ESP_EVENTS as w}from"../shared/events.js";import"./esp-action-menu-item.js";const y=p` <svg
+var l=function(c,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(c,e,t,s);else for(var i=c.length-1;i>=0;i--)(a=c[i])&&(r=(o<3?a(r):o>3?a(e,t,r):a(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r};import{css as v,html as p}from"lit";import{customElement as I,property as u,state as g}from"lit/decorators.js";import{createRef as d,ref as h}from"lit/directives/ref.js";import"../button/esp-button.js";import"../popover/esp-popover.js";import{EspalierElementBase as f}from"../shared/esp-element-base.js";import{ESP_EVENTS as y}from"../shared/events.js";import"./esp-action-menu-item.js";const w=p` <svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="currentColor"
@@ -7,7 +7,7 @@ var l=function(d,e,t,s){var o=arguments.length,i=o<3?e:s===null?s=Object.getOwnP
   <circle cx="5" cy="12" r="2" />
   <circle cx="12" cy="12" r="2" />
   <circle cx="19" cy="12" r="2" />
-</svg>`;let n=class extends f{constructor(){super(...arguments),this.popoverRef=c(),this.itemsSlot=c(),this.triggerSlot=c(),this.triggerShell=c(),this.handledTriggerEvents=new WeakSet,this.wiredTriggerControls=new WeakSet,this.open=!1,this.focusedIndex=-1,this.placement="bottom-end",this.disabled=!1,this.iconPosition="left",this.handleTriggerSlotChange=()=>{this.syncTriggerAttributes()},this.syncItems=()=>{const e=this.items,t=this.enabledItems;for(const s of e)s.inheritIconPosition(this.iconPosition),s.setAttribute("role","menuitem"),s.tabIndex=t[0]===s&&this.focusedIndex<0?0:-1,s.setAttribute("aria-disabled",String(s.disabled));if(this.focusedIndex>=0){const s=t[this.focusedIndex];for(const o of t)o.tabIndex=o===s?0:-1}},this.handleTriggerClick=e=>{this.handledTriggerEvents.has(e)||(this.handledTriggerEvents.add(e),this.toggleMenu(e))},this.toggleMenu=e=>{e.preventDefault(),!this.disabled&&(this.open?this.closeMenu({restoreFocus:!0}):this.openMenu())},this.handleTriggerKeydown=async e=>{if(!this.disabled)switch(e.key){case"Enter":case" ":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusFirstItem();break;case"ArrowDown":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusFirstItem();break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusLastItem();break}},this.handleMenuKeydown=e=>{if(this.open)switch(e.key){case"ArrowDown":e.preventDefault(),this.focusNextItem(1);break;case"ArrowUp":e.preventDefault(),this.focusNextItem(-1);break;case"Home":e.preventDefault(),this.focusFirstItem();break;case"End":e.preventDefault(),this.focusLastItem();break;case"Enter":case" ":e.preventDefault(),this.activeItemForEvent(e)?.activate();break;case"Escape":e.preventDefault(),this.closeMenu({restoreFocus:!0});break}},this.handleItemActivate=e=>{const{item:t}=e.detail;this.selectItem(t)},this.handlePopoverOpened=()=>{this.open=!0,this.syncItems()},this.handlePopoverClosed=()=>{this.open=!1,this.focusedIndex=-1,this.syncItems()}}connectedCallback(){super.connectedCallback(),this.addEventListener("esp-internal-action-menu-item-activate",this.handleItemActivate),this.addEventListener("keydown",this.handleMenuKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("esp-internal-action-menu-item-activate",this.handleItemActivate),this.removeEventListener("keydown",this.handleMenuKeydown)}firstUpdated(e){super.firstUpdated(e),this.syncTriggerAttributes(),this.syncItems()}updated(e){super.updated(e),(e.has("open")||e.has("disabled"))&&this.syncTriggerAttributes(),e.has("iconPosition")&&this.syncItems()}openMenu(){this.disabled||this.open||(this.popoverRef.value?.openPopover(),this.open=!0)}closeMenu(e={}){this.open&&(this.popoverRef.value?.closePopover(),this.open=!1,this.focusedIndex=-1,this.syncItems(),e.restoreFocus&&this.focusTrigger())}get placementParts(){const[e,t]=this.placement.split("-"),s=t==="start"||t==="end"?t:"center";switch(e){case"top":return{attach:"above",align:s};case"right":return{attach:"right",align:s};case"left":return{attach:"left",align:s};case"bottom":default:return{attach:"below",align:s}}}get items(){return Array.from(this.querySelectorAll("esp-action-menu-item"))}get enabledItems(){return this.items.filter(e=>!e.disabled)}get defaultTrigger(){return this.shadowRoot?.querySelector(".default-trigger")}get slottedTrigger(){return this.triggerSlot.value?.assignedElements({flatten:!0})[0]}getTriggerControl(e){return e?.shadowRoot?.querySelector("button, a, [tabindex]")??null}wireTriggerControl(e){!e||this.wiredTriggerControls.has(e)||(e.addEventListener("click",this.handleTriggerClick),this.wiredTriggerControls.add(e))}syncTriggerAttributes(){const e={"aria-haspopup":"menu","aria-expanded":String(this.open),"aria-disabled":String(this.disabled)},t=r=>{if(r){for(const[m,b]of Object.entries(e))r.setAttribute(m,b);"disabled"in r&&(r.disabled=this.disabled)}};t(this.triggerShell.value);const s=this.slottedTrigger;t(s);const o=this.getTriggerControl(s);t(o),this.wireTriggerControl(o);const i=this.defaultTrigger;i?.setAttribute("aria-label","Actions"),t(i);const a=this.getTriggerControl(i);t(a),this.wireTriggerControl(a),i&&i.updateComplete.then(()=>{const r=this.getTriggerControl(i);t(r),r?.setAttribute("aria-label","Actions"),this.wireTriggerControl(r)}),s&&"updateComplete"in s&&s.updateComplete.then(()=>{const r=this.getTriggerControl(s);t(r),this.wireTriggerControl(r)})}activeItemForEvent(e){const t=this.enabledItems;return t[this.focusedIndex]??t.find(s=>e.composedPath().includes(s))??t.find(s=>s.matches(":focus"))}selectItem(e){e.disabled||(this.dispatchEvent(new CustomEvent(w.ACTION_MENU_SELECT,{detail:{value:e.value,item:e},bubbles:!0,composed:!0})),this.closeMenu({restoreFocus:!0}))}focusFirstItem(){this.focusItem(0)}focusLastItem(){this.focusItem(this.enabledItems.length-1)}focusNextItem(e){const t=this.enabledItems;if(t.length===0)return;const o=((this.focusedIndex<0?0:this.focusedIndex)+e+t.length)%t.length;this.focusItem(o)}focusItem(e){const t=this.enabledItems;e<0||e>=t.length||(this.focusedIndex=e,this.syncItems(),t[e].focus())}focusTrigger(){const e=this.slottedTrigger;if(e){(this.getTriggerControl(e)??e).focus();return}const t=this.defaultTrigger;(this.getTriggerControl(t)??t??this.triggerShell.value)?.focus()}render(){const{attach:e,align:t}=this.placementParts;return p`
+</svg>`;let n=class extends f{constructor(){super(...arguments),this.popoverRef=d(),this.itemsSlot=d(),this.triggerSlot=d(),this.triggerShell=d(),this.handledTriggerEvents=new WeakSet,this.wiredTriggerControls=new WeakSet,this.open=!1,this.focusedIndex=-1,this.placement="bottom-end",this.disabled=!1,this.iconPosition="left",this.handleTriggerSlotChange=()=>{this.syncTriggerAttributes()},this.syncItems=()=>{const e=this.items,t=this.enabledItems;for(const s of e)s.inheritIconPosition(this.iconPosition),s.setAttribute("role","menuitem"),s.tabIndex=t[0]===s&&this.focusedIndex<0?0:-1,s.setAttribute("aria-disabled",String(s.disabled));if(this.focusedIndex>=0){const s=t[this.focusedIndex];for(const o of t)o.tabIndex=o===s?0:-1}},this.handleTriggerClick=e=>{this.handledTriggerEvents.has(e)||(this.handledTriggerEvents.add(e),this.toggleMenu(e))},this.toggleMenu=e=>{e.preventDefault(),!this.disabled&&(this.open?this.closeMenu({restoreFocus:!0}):this.openMenu())},this.handleTriggerKeydown=async e=>{if(!this.disabled)switch(e.key){case"Enter":case" ":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusFirstItem();break;case"ArrowDown":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusFirstItem();break;case"ArrowUp":e.preventDefault(),e.stopPropagation(),this.openMenu(),await this.updateComplete,this.focusLastItem();break}},this.handleMenuKeydown=e=>{if(this.open)switch(e.key){case"ArrowDown":e.preventDefault(),this.focusNextItem(1);break;case"ArrowUp":e.preventDefault(),this.focusNextItem(-1);break;case"Home":e.preventDefault(),this.focusFirstItem();break;case"End":e.preventDefault(),this.focusLastItem();break;case"Enter":case" ":e.preventDefault(),this.activeItemForEvent(e)?.activate();break;case"Escape":e.preventDefault(),this.closeMenu({restoreFocus:!0});break}},this.handleItemActivate=e=>{const{item:t}=e.detail;this.selectItem(t)},this.handlePopoverOpened=()=>{this.open=!0,this.syncItems()},this.handlePopoverClosed=()=>{this.open=!1,this.focusedIndex=-1,this.syncItems()}}connectedCallback(){super.connectedCallback(),this.addEventListener("esp-internal-action-menu-item-activate",this.handleItemActivate),this.addEventListener("keydown",this.handleMenuKeydown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("esp-internal-action-menu-item-activate",this.handleItemActivate),this.removeEventListener("keydown",this.handleMenuKeydown)}firstUpdated(e){super.firstUpdated(e),this.syncTriggerAttributes(),this.syncItems()}updated(e){super.updated(e),(e.has("open")||e.has("disabled"))&&this.syncTriggerAttributes(),e.has("iconPosition")&&this.syncItems()}openMenu(){this.disabled||this.open||(this.popoverRef.value?.openPopover(),this.open=!0)}closeMenu(e={}){this.open&&(this.popoverRef.value?.closePopover(),this.open=!1,this.focusedIndex=-1,this.syncItems(),e.restoreFocus&&this.focusTrigger())}get placementParts(){const[e,t]=this.placement.split("-"),s=t==="start"||t==="end"?t:"center";switch(e){case"top":return{attach:"above",align:s};case"right":return{attach:"right",align:s};case"left":return{attach:"left",align:s};case"bottom":default:return{attach:"below",align:s}}}get items(){return Array.from(this.querySelectorAll("esp-action-menu-item"))}get enabledItems(){return this.items.filter(e=>!e.disabled)}get defaultTrigger(){return this.shadowRoot?.querySelector(".default-trigger")}get slottedTrigger(){return this.triggerSlot.value?.assignedElements({flatten:!0})[0]}getTriggerControl(e){return e?.shadowRoot?.querySelector("button, a, [tabindex]")??null}wireTriggerControl(e){!e||this.wiredTriggerControls.has(e)||(e.addEventListener("click",this.handleTriggerClick),this.wiredTriggerControls.add(e))}syncTriggerAttributes(){const e={"aria-haspopup":"menu","aria-expanded":String(this.open),"aria-disabled":String(this.disabled)},t=i=>{if(i){for(const[m,b]of Object.entries(e))i.setAttribute(m,b);"disabled"in i&&(i.disabled=this.disabled)}};t(this.triggerShell.value);const s=this.slottedTrigger;t(s);const o=this.getTriggerControl(s);t(o),this.wireTriggerControl(o);const r=this.defaultTrigger;r?.setAttribute("aria-label","Actions"),t(r);const a=this.getTriggerControl(r);t(a),this.wireTriggerControl(a),r&&r.updateComplete.then(()=>{const i=this.getTriggerControl(r);t(i),i?.setAttribute("aria-label","Actions"),this.wireTriggerControl(i)}),s&&"updateComplete"in s&&s.updateComplete.then(()=>{const i=this.getTriggerControl(s);t(i),this.wireTriggerControl(i)})}activeItemForEvent(e){const t=this.enabledItems;return t[this.focusedIndex]??t.find(s=>e.composedPath().includes(s))??t.find(s=>s.matches(":focus"))}selectItem(e){e.disabled||(this.dispatchEvent(new CustomEvent(y.ACTION_MENU_SELECT,{detail:{value:e.value,item:e},bubbles:!0,composed:!0})),this.closeMenu({restoreFocus:!0}))}focusFirstItem(){this.focusItem(0)}focusLastItem(){this.focusItem(this.enabledItems.length-1)}focusNextItem(e){const t=this.enabledItems;if(t.length===0)return;const o=((this.focusedIndex<0?0:this.focusedIndex)+e+t.length)%t.length;this.focusItem(o)}focusItem(e){const t=this.enabledItems;e<0||e>=t.length||(this.focusedIndex=e,this.syncItems(),t[e].focus())}focusTrigger(){const e=this.slottedTrigger;if(e){(this.getTriggerControl(e)??e).focus();return}const t=this.defaultTrigger;(this.getTriggerControl(t)??t??this.triggerShell.value)?.focus()}render(){const{attach:e,align:t}=this.placementParts;return p`
       <esp-popover
         ${h(this.popoverRef)}
         .trigger=${"none"}
@@ -33,7 +33,7 @@ var l=function(d,e,t,s){var o=arguments.length,i=o<3?e:s===null?s=Object.getOwnP
               .disabled=${this.disabled}
               label="Actions"
             >
-              ${y}
+              ${w}
             </esp-button>
           </slot>
         </span>
@@ -58,6 +58,7 @@ var l=function(d,e,t,s){var o=arguments.length,i=o<3?e:s===null?s=Object.getOwnP
       }
 
       .menu {
+        --_esp-surface-layer: 1;
         display: grid;
         min-width: var(--esp-action-menu-min-width, 12rem);
         padding: 0;

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

@@ -1,8 +1,10 @@
 import { EspalierElementBase } from "../shared/esp-element-base.js";
 /**
- * Used as a base to group context visually. `esp-box`
- * has a css part of `box` that can be styled to create cards,
- * forms, and other UI elements.
+ * Groups related content in a themed container. Style its `box` CSS part
+ * to create cards, forms, or other grouped regions.
+ *
+ * A field fills one layer above the surface it sits on.
+ * Use `surface-layer="1|2|3|4"` to select the default painted layer.
  *
  * ```html
  * <esp-box>
@@ -20,6 +22,15 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * panels, and form surfaces — and replace any pre-3.2 "neutralized box"
  * band with a bare section.
  *
+ * Select a raised form surface with `surface-layer`; fields follow it automatically.
+ *
+ * ```html
+ * <esp-box surface-layer="2">
+ *   <esp-input placeholder="Search"></esp-input>
+ *   <esp-input readonly value="A read-only value"></esp-input>
+ * </esp-box>
+ * ```
+ *
  * @customElement esp-box
  * @slot - The default slot holds elements to display in the box.
  *

package/dist/box/esp-box.js

@@ -1,16 +1,16 @@
-var n=function(t,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(t,e,r,i);else for(var p=t.length-1;p>=0;p--)(l=t[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 v}from"lit";import{customElement as b,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 s=class extends d{constructor(){super(...arguments),this.fullScreen=!1}render(){const{fullScreen:e}=this;return v`
-      <div class=${f({"esp-box":!0,"full-screen":e})}>
+var n=function(t,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(t,e,r,i);else for(var p=t.length-1;p>=0;p--)(l=t[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{paintedSurface as c}from"../shared/surface-layer.js";import{css as b,html as v}from"lit";import{customElement as h,property as f}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";let s=class extends d{constructor(){super(...arguments),this.fullScreen=!1}render(){const{fullScreen:e}=this;return v`
+      <div class=${u({"esp-box":!0,"full-screen":e})}>
         <div part="box">
           <slot></slot>
         </div>
       </div>
-    `}};s.styles=[...d.styles,c`
+    `}};s.styles=[...d.styles,c(1),b`
       :host {
         display: block;
       }
 
       .esp-box {
-        background-color: var(--esp-color-box-background, var(--esp-color-layer-1));
+        background-color: var(--esp-color-box-background, var(--_esp-surface-background));
         border-radius: var(--esp-size-border-radius);
         box-shadow: var(--esp-box-shadow, var(--esp-shadow-1, 1px 1px 4px var(--esp-color-shadow)));
         overflow: visible;
@@ -61,4 +61,4 @@ var n=function(t,e,r,i){var a=arguments.length,o=a<3?e:i===null?i=Object.getOwnP
           }
         }
       }
-    `],n([h({attribute:"full-screen",type:Boolean})],s.prototype,"fullScreen",void 0),s=n([b("esp-box")],s);export{s as EspalierBox};
+    `],n([f({attribute:"full-screen",type:Boolean})],s.prototype,"fullScreen",void 0),s=n([h("esp-box")],s);export{s as EspalierBox};

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

@@ -2,7 +2,7 @@ import { type TemplateResult } from "lit";
 import { EspalierElementBase } from "../shared/esp-element-base.js";
 export type ButtonIconPosition = "left" | "right";
 /**
- * Used to initiate a user action or link to another page.
+ * Triggers an action or links to another page.
  *
  * ```html
  * <esp-button label="Hello there!"></esp-button>
@@ -18,7 +18,7 @@ export type ButtonIconPosition = "left" | "right";
  * </script>
  * ```
  *
- * Here is each of the button intents:
+ * Choose an intent to express the action's status:
  *
  * ```html
  * <div style="display: flex; flex-wrap: wrap; gap: var(--esp-size-padding);">
@@ -145,7 +145,7 @@ export declare class EspalierButton extends EspalierElementBase {
      */
     collapsed: boolean;
     /**
-     * Controls whether or not the button is disabled.
+     * Disables the button.
      *
      * ```html
      * <esp-button disabled label="Disabled"></esp-button>
@@ -225,7 +225,7 @@ export declare class EspalierButton extends EspalierElementBase {
      */
     label: string;
     /**
-     * Controls whether or not the button is in a loading state.
+     * Shows the button's loading state.
      * The button will be disabled and show a spinner while loading
      * is true.
      *

package/dist/date-picker/helpers/styles.js

@@ -39,6 +39,7 @@ import{css as e}from"lit";const t=e`
   
 
   .picker-popover {
+    --_esp-surface-layer: 1;
     position: fixed;
     inset: unset;
     margin: 0;

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

@@ -6,6 +6,9 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * [esp-details-group](/components/details/group) to create an
  * accordion where only one item is open at a time.
  *
+ * A field fills one layer above the surface it sits on.
+ * Use `surface-layer="1|2|3|4"` to select the default painted layer.
+ *
  * ```html
  * <esp-details summary="What is Espalier?">
  *   <p>Espalier is a design system and component library

package/dist/details/esp-details.js

@@ -1,4 +1,4 @@
-var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(i,e,o,s);else for(var l=i.length-1;l>=0;l--)(n=i[l])&&(r=(t<3?n(r):t>3?n(e,o,r):n(e,o))||r);return t>3&&r&&Object.defineProperty(e,o,r),r};import{css as h,html as f}from"lit";import{customElement as b,property as p}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as u}from"../shared/events.js";import{disabledControl as v}from"../shared/style-fragments.js";let a=class extends m{constructor(){super(...arguments),this.summary="",this.open=!1,this.disabled=!1,this._toggleFromClick=!1}close(){this.open=!1}getScrollParent(){let e=this.assignedSlot?.parentElement??(this.parentNode instanceof ShadowRoot?this.parentNode.host:this.parentElement);for(;e&&e!==document.documentElement;){const s=getComputedStyle(e).overflowY;if((s==="auto"||s==="scroll")&&e.scrollHeight>e.clientHeight)return e;e=e.assignedSlot?.parentElement??(e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentElement)}return null}handleToggle(e){const o=e.target;if(this.disabled){o.open=this.open;return}if(this._toggleFromClick){this._toggleFromClick=!1;return}this.open=o.open,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}))}handleSummaryClick(e){if(e.preventDefault(),this.disabled)return;const o=e.currentTarget,s=o.getBoundingClientRect().top,t=this.getScrollParent(),r=t?t.scrollTop:window.scrollY;this._toggleFromClick=!0,this.open=!this.open,this.updateComplete.then(()=>{this._toggleFromClick=!1,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}));const l=o.getBoundingClientRect().top-s;if(Math.abs(l)>1)if(t){const c=t.scrollTop;Math.abs(c-r)>1&&(t.scrollTop=r)}else{const c=window.scrollY;Math.abs(c-r)>1&&window.scrollBy(0,l)}})}render(){return f`
+var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(i,e,o,s);else for(var l=i.length-1;l>=0;l--)(n=i[l])&&(r=(t<3?n(r):t>3?n(e,o,r):n(e,o))||r);return t>3&&r&&Object.defineProperty(e,o,r),r};import{paintedSurface as h}from"../shared/surface-layer.js";import{css as f,html as b}from"lit";import{customElement as v,property as p}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{ESP_EVENTS as u}from"../shared/events.js";import{disabledControl as g}from"../shared/style-fragments.js";let a=class extends m{constructor(){super(...arguments),this.summary="",this.open=!1,this.disabled=!1,this._toggleFromClick=!1}close(){this.open=!1}getScrollParent(){let e=this.assignedSlot?.parentElement??(this.parentNode instanceof ShadowRoot?this.parentNode.host:this.parentElement);for(;e&&e!==document.documentElement;){const s=getComputedStyle(e).overflowY;if((s==="auto"||s==="scroll")&&e.scrollHeight>e.clientHeight)return e;e=e.assignedSlot?.parentElement??(e.parentNode instanceof ShadowRoot?e.parentNode.host:e.parentElement)}return null}handleToggle(e){const o=e.target;if(this.disabled){o.open=this.open;return}if(this._toggleFromClick){this._toggleFromClick=!1;return}this.open=o.open,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}))}handleSummaryClick(e){if(e.preventDefault(),this.disabled)return;const o=e.currentTarget,s=o.getBoundingClientRect().top,t=this.getScrollParent(),r=t?t.scrollTop:window.scrollY;this._toggleFromClick=!0,this.open=!this.open,this.updateComplete.then(()=>{this._toggleFromClick=!1,this.dispatchEvent(new CustomEvent(u.DETAILS_TOGGLE,{detail:{open:this.open},bubbles:!0,composed:!0}));const l=o.getBoundingClientRect().top-s;if(Math.abs(l)>1)if(t){const c=t.scrollTop;Math.abs(c-r)>1&&(t.scrollTop=r)}else{const c=window.scrollY;Math.abs(c-r)>1&&window.scrollBy(0,l)}})}render(){return b`
       <details ?open=${this.open} @toggle=${this.handleToggle}>
         <summary @click=${this.handleSummaryClick}>
           <span class="indicator"></span>
@@ -8,7 +8,7 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
           <slot></slot>
         </div>
       </details>
-    `}};a.styles=[...m.styles,v(":host([disabled]) summary"),h`
+    `}};a.styles=[...m.styles,h(1),g(":host([disabled]) summary"),f`
       :host {
         display: block;
         
@@ -28,7 +28,7 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
       }
 
       details {
-        background-color: var(--esp-details-color-background, var(--esp-color-layer-1));
+        background-color: var(--esp-details-color-background, var(--_esp-surface-background));
         border-radius: var(--esp-size-border-radius);
         box-shadow: 1px 1px 4px var(--esp-color-shadow);
         border: 1px solid var(--esp-details-color-border, var(--esp-color-border));
@@ -50,7 +50,10 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
         font-size: var(--esp-size-font);
         font-weight: 600;
         color: var(--esp-color-headings);
-        background-color: var(--esp-details-color-summary-background, var(--esp-color-layer-1));
+        background-color: var(
+          --esp-details-color-summary-background,
+          var(--_esp-surface-background)
+        );
         transition: background-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
       }
 
@@ -67,6 +70,7 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
       }
 
       details[open] > summary {
+        --_esp-surface-layer: 2;
         background-color: var(
           --esp-details-color-summary-background-active,
           var(--esp-color-layer-2)
@@ -108,7 +112,10 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
       }
 
       :host([disabled]) summary:hover {
-        background-color: var(--esp-details-color-summary-background, var(--esp-color-layer-1));
+        background-color: var(
+          --esp-details-color-summary-background,
+          var(--_esp-surface-background)
+        );
       }
 
       
@@ -125,4 +132,4 @@ var d=function(i,e,o,s){var t=arguments.length,r=t<3?e:s===null?s=Object.getOwnP
       :host([in-group]:last-of-type) details {
         border-bottom: none;
       }
-    `],d([p({type:String})],a.prototype,"summary",void 0),d([p({type:Boolean,reflect:!0})],a.prototype,"open",void 0),d([p({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0),a=d([b("esp-details")],a);export{a as EspalierDetails};
+    `],d([p({type:String})],a.prototype,"summary",void 0),d([p({type:Boolean,reflect:!0})],a.prototype,"open",void 0),d([p({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0),a=d([v("esp-details")],a);export{a as EspalierDetails};

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

@@ -1,10 +1,13 @@
 import { LitElement } from "lit";
 /**
- * Used to focus content modally. By default, on large screens the
+ * Shows content in a modal dialog. By default, on large screens the
  * dialog content is centered horizontally near the top of the
  * screen. On small screens, the content always tries to take up
  * the full screen width.
  *
+ * A field fills one layer above the surface it sits on.
+ * Use `surface-layer="1|2|3|4"` to select the default painted layer.
+ *
  * When opened, the dialog:
  * - Moves focus to the first `[autofocus]` element inside the slotted
  *   content, then the first focusable element (or the dialog container
@@ -102,6 +105,7 @@ import { LitElement } from "lit";
  *
  * @cssprop --esp-color-dialog-bg - The background color of the dialog overlay.
  * @cssprop --esp-dialog-bg-opacity - The opacity of the dialog overlay background.
+ * @attr {"1"|"2"|"3"|"4"} surface-layer - Declares the painted surface depth; defaults to layer 3.
  * @customElement esp-dialog
  * @docPageTitle Dialog
  * @docUrl /components/dialog
@@ -155,7 +159,7 @@ export declare class EspalierDialog extends LitElement {
     protected firstUpdated(): void;
     disconnectedCallback(): void;
     protected render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/dialog/esp-dialog.js

@@ -1,77 +1,77 @@
-var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,o);else for(var a=l.length-1;a>=0;a--)(r=l[a])&&(i=(n<3?r(i):n>3?r(e,t,i):r(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i};import{LitElement as f,css as v,html as m,nothing as d}from"lit";import{customElement as b,property as g,state as y}from"lit/decorators.js";import{classMap as _}from"lit/directives/class-map.js";import{createRef as u,ref as h}from"lit/directives/ref.js";import{OverlayController as O}from"../shared/overlay-controller.js";import{ESP_EVENTS as p}from"../shared/events.js";let s=class extends f{constructor(){super(...arguments),this.dialogSlot=u(),this.vellumRef=u(),this.isOpen=!1,this._overlay=new O({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(p.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(p.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(p.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("esp-form-dialog-close-requested",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 m`<div
+var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(l,e,t,o);else for(var a=l.length-1;a>=0;a--)(r=l[a])&&(i=(n<3?r(i):n>3?r(e,t,i):r(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i};import{paintedSurface as f,surfaceLayerAttributes as v}from"../shared/surface-layer.js";import{LitElement as m,css as b,html as g,nothing as u}from"lit";import{customElement as y,property as _,state as O}from"lit/decorators.js";import{classMap as k}from"lit/directives/class-map.js";import{createRef as d,ref as h}from"lit/directives/ref.js";import{OverlayController as E}from"../shared/overlay-controller.js";import{ESP_EVENTS as p}from"../shared/events.js";let s=class extends m{constructor(){super(...arguments),this.dialogSlot=d(),this.vellumRef=d(),this.isOpen=!1,this._overlay=new E({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(p.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(p.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(p.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("esp-form-dialog-close-requested",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 g`<div
       ${h(this.vellumRef)}
-      class="vellum ${_(o)}"
+      class="vellum ${k(o)}"
       data-no-swipe
-      role=${e?"dialog":d}
-      aria-modal=${e?"true":d}
+      role=${e?"dialog":u}
+      aria-modal=${e?"true":u}
       tabindex="-1"
       @keydown=${this._handleKeyDown}
     >
       <slot ${h(this.dialogSlot)}></slot>
-    </div>`}};s.styles=v`
-    :host {
-      display: block;
-    }
-    .vellum {
-      display: grid;
-      box-sizing: border-box;
-      justify-content: center;
-      padding: 0;
-      visibility: hidden;
-      position: fixed;
-      z-index: 10000;
-      left: 0;
-      top: 0;
-      
-      height: 100vh;
-      height: 100dvh;
-      width: 100vw;
-      overflow-y: auto;
-      outline: none;
-
-      ::slotted(*) {
-        z-index: 10;
-        position: relative;
-      }
-
-      &::before {
-        content: "";
+    </div>`}};s.styles=[f(3),v(":host"),b`
+      :host {
         display: block;
-        position: fixed;
-        inset: 0;
-        opacity: var(--esp-dialog-bg-opacity, var(--esp-vellum-opacity, 0.85));
-        background: var(
-          --esp-color-dialog-bg,
-          var(--esp-vellum-background, var(--esp-color-layer-3))
-        );
-        z-index: 1;
       }
-
-      &::after {
-        content: "";
-        display: block;
+      .vellum {
+        display: grid;
+        box-sizing: border-box;
+        justify-content: center;
+        padding: 0;
+        visibility: hidden;
         position: fixed;
-        inset: 0;
-        background-image: var(--esp-vellum-background-image, none);
-        background-repeat: repeat;
-        opacity: var(--esp-vellum-background-image-opacity, 0.3);
-        z-index: 2;
-        pointer-events: none;
-      }
+        z-index: 10000;
+        left: 0;
+        top: 0;
+        
+        height: 100vh;
+        height: 100dvh;
+        width: 100vw;
+        overflow-y: auto;
+        outline: none;
 
-      &.is-open {
-        visibility: visible;
+        ::slotted(*) {
+          z-index: 10;
+          position: relative;
+        }
+
+        &::before {
+          content: "";
+          display: block;
+          position: fixed;
+          inset: 0;
+          opacity: var(--esp-dialog-bg-opacity, var(--esp-vellum-opacity, 0.85));
+          background: var(
+            --esp-color-dialog-bg,
+            var(--esp-vellum-background, var(--_esp-surface-background))
+          );
+          z-index: 1;
+        }
+
+        &::after {
+          content: "";
+          display: block;
+          position: fixed;
+          inset: 0;
+          background-image: var(--esp-vellum-background-image, none);
+          background-repeat: repeat;
+          opacity: var(--esp-vellum-background-image-opacity, 0.3);
+          z-index: 2;
+          pointer-events: none;
+        }
+
+        &.is-open {
+          visibility: visible;
+        }
       }
-    }
 
-    @media screen and (min-width: 400px) {
-      .vellum {
-        grid-template-columns: auto auto;
-        padding: var(--esp-size-big-to-large) 0;
+      @media screen and (min-width: 400px) {
+        .vellum {
+          grid-template-columns: auto auto;
+          padding: var(--esp-size-big-to-large) 0;
 
-        &.full-screen {
-          padding: 0;
+          &.full-screen {
+            padding: 0;
+          }
         }
       }
-    }
-  `,c([y()],s.prototype,"isOpen",void 0),c([g({attribute:"full-screen",type:Boolean})],s.prototype,"fullScreen",void 0),s=c([b("esp-dialog")],s);export{s as EspalierDialog};
+    `],c([O()],s.prototype,"isOpen",void 0),c([_({attribute:"full-screen",type:Boolean})],s.prototype,"fullScreen",void 0),s=c([y("esp-dialog")],s);export{s as EspalierDialog};

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

@@ -2,8 +2,8 @@ import { type PropertyValues } from "lit";
 import { EspalierElementBase } from "../shared/esp-element-base.js";
 import { type FlyoutCloseReason } from "../shared/flyout-events.js";
 /**
- * A transient panel for help and more-info content that claims designed spare
- * width before ever covering the page.
+ * A panel for help and additional information. Uses spare page width when
+ * available and switches to an overlay when the workspace cannot fit it.
  *
  * Place one `esp-flyout` in an `esp-page`'s `flyout` slot. The panel
  * lives on the canvas after any persistent preview, outside the content

package/dist/flyout/esp-flyout.js

@@ -1,4 +1,4 @@
-var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(u,e,t,s);else for(var i=u.length-1;i>=0;i--)(n=u[i])&&(r=(o<3?n(r):o>3?n(e,t,r):n(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r};import{css as p,html as w,nothing as S,unsafeCSS as F}from"lit";import{customElement as L,property as h}from"lit/decorators.js";import{classMap as G}from"lit/directives/class-map.js";import{createRef as M,ref as q}from"lit/directives/ref.js";import{EspalierElementBase as A}from"../shared/esp-element-base.js";import{ESP_EVENTS as f}from"../shared/events.js";import{getEspBus as v}from"../shared/bus-events.js";import{FLYOUT_FULL_HEIGHT_REQUEST_EVENT as k,markFlyoutRequestServiced as H}from"../shared/flyout-events.js";import{OverlayController as B}from"../shared/overlay-controller.js";import{cancelSVG as V}from"../shared/svgs/cancel.js";import{traverseToClosest as y}from"../shared/utilities.js";import{RafThrottle as $}from"../shared/raf-throttle.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as R}from"../shared/responsive.js";import{focusRing as I,quietCloseButton as Y}from"../shared/style-fragments.js";const D=R,U="Flyout",E=p`
+var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(u,e,t,s);else for(var i=u.length-1;i>=0;i--)(n=u[i])&&(r=(o<3?n(r):o>3?n(e,t,r):n(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r};import{css as p,html as w,nothing as S,unsafeCSS as F}from"lit";import{customElement as L,property as h}from"lit/decorators.js";import{classMap as G}from"lit/directives/class-map.js";import{createRef as M,ref as q}from"lit/directives/ref.js";import{EspalierElementBase as A}from"../shared/esp-element-base.js";import{ESP_EVENTS as f}from"../shared/events.js";import{getEspBus as y}from"../shared/bus-events.js";import{FLYOUT_FULL_HEIGHT_REQUEST_EVENT as k,markFlyoutRequestServiced as H}from"../shared/flyout-events.js";import{OverlayController as B}from"../shared/overlay-controller.js";import{cancelSVG as V}from"../shared/svgs/cancel.js";import{traverseToClosest as v}from"../shared/utilities.js";import{RafThrottle as $}from"../shared/raf-throttle.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as R}from"../shared/responsive.js";import{focusRing as I,quietCloseButton as Y}from"../shared/style-fragments.js";const D=R,U="Flyout",E=p`
   position: fixed;
   inset: 0;
   margin-block-start: 0;
@@ -13,7 +13,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
   inset: 0;
   background-color: var(--esp-vellum-background, var(--esp-color-layer-3));
   opacity: var(--esp-vellum-opacity, 0.85);
-`,C=p`
+`,_=p`
   position: absolute;
   inset-block: 0;
   inset-inline-end: 0;
@@ -31,7 +31,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
   @starting-style {
     translate: 100% 0;
   }
-`;let a=class extends A{constructor(){super(...arguments),this.open=!1,this.heading="",this.mode="auto",this.pageOverlayRequested=!1,this.fullHeight=!1,this.matchSurface=!1,this.standalone=!1,this.scope="outermost",this.lastGeneratedAriaLabel=null,this.boundKeydown=e=>this.handleKeydown(e),this.boundShowRequest=e=>this.handleShowRequest(e),this.boundCloseRequest=()=>this.close(),this.boundOverlayMediaChange=()=>{this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry(),this.dispatchEvent(new CustomEvent(f.FLYOUT_STATE_CHANGED,{detail:{},bubbles:!0,composed:!0}))},this.boundAnchorViewportChange=()=>this.scheduleAnchorGeometrySync(),this.boundFullHeightRequest=e=>{e.stopPropagation(),this.fullHeight=!0},this.anchorGeometryFrame=new $(()=>this.syncAnchorGeometry()),this.trackingAnchorPosition=!1,this.busSubscribed=!1,this.panelRef=M(),this.overlay=new B({host:this,getFocusTrapContainer:()=>this.panelRef.value??null,getFocusFallback:()=>this.panelRef.value??null,promote:!1}),this.overlayActive=!1,this.baseRole="complementary"}get effectiveOverlay(){return this.mode==="overlay"||this.pageOverlayRequested||(this.overlayMediaQuery?.matches??!1)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","complementary"),this.baseRole=this.getAttribute("role")??"complementary",!this.overlayMediaQuery&&typeof window<"u"&&"matchMedia"in window&&(this.overlayMediaQuery=window.matchMedia(D)),this.overlayMediaQuery?.addEventListener("change",this.boundOverlayMediaChange),this.syncBusSubscription(),document.addEventListener("keydown",this.boundKeydown),this.addEventListener(k,this.boundFullHeightRequest),this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeBus(),this.overlayMediaQuery?.removeEventListener("change",this.boundOverlayMediaChange),document.removeEventListener("keydown",this.boundKeydown),this.removeEventListener(k,this.boundFullHeightRequest),this.stopAnchorTracking(),this.overlayActive&&(this.overlayActive=!1,this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel()),this.overlayReturnFocusTo=void 0}syncBusSubscription(){if(this.standalone||!this.isConnected){this.unsubscribeBus();return}this.busSubscribed||(v().subscribe("show-flyout",this.boundShowRequest),v().subscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!0)}unsubscribeBus(){this.busSubscribed&&(v().unsubscribe("show-flyout",this.boundShowRequest),v().unsubscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!1)}show(){this.open||(this.open=!0,this.dispatchEvent(new CustomEvent(f.FLYOUT_OPENED,{detail:{},bubbles:!0,composed:!0})))}close(e="programmatic"){if(this.open){if(this.open=!1,this.overlayActive)this.overlayReturnFocusTo=this.returnFocusTo;else{const t=this.focusIsInside();this.overlay.close(),t&&this.returnFocusTo?.focus()}this.returnFocusTo=void 0,this.dispatchEvent(new CustomEvent(f.FLYOUT_CLOSED,{detail:{reason:e},bubbles:!0,composed:!0}))}}toggle(){this.open?this.close():this.show()}handleShowRequest(e){this.shouldHandleShowRequest(e)&&(H(e),e.heading!==void 0&&(this.heading=e.heading),e.content!==void 0&&this.replaceChildren(typeof e.content=="string"?document.createTextNode(e.content):e.content),this.anchor=e.anchor,this.fullHeight=e.fullHeight??!1,this.returnFocusTo=e.returnFocusTo,this.show())}shouldHandleShowRequest(e){const t=y(this,"esp-page"),s=e.anchor??e.returnFocusTo;if(!s){if(!t)return!0;const i=this.getPageChain(t);return this.scope==="outermost"&&i[i.length-1]===t}const o=this.getPageChain(s);if(o.length===0)return t===null;const r=o.find(i=>this.hasNearestScopeFlyout(i)),n=r??o[o.length-1];return t!==n?!1:r?this.scope==="nearest":this.scope==="outermost"}getPageChain(e){const t=[];let s=e;for(;s;){const o=y(s,"esp-page");if(!o||t.includes(o))break;t.push(o),s=this.composedParent(o)}return t}hasNearestScopeFlyout(e){return Array.from(e.querySelectorAll("esp-flyout")).some(t=>!t.standalone&&t.scope==="nearest"&&y(t,"esp-page")===e)}handleKeydown(e){if(this.open){if(this.overlayActive&&e.key==="Tab"){this.overlay.trapFocus(e);return}e.key!=="Escape"||e.defaultPrevented||(e.preventDefault(),this.close("escape"))}}focusIsInside(){const e=document.activeElement;return e&&this.contains(e)?!0:this.shadowRoot?.activeElement!=null}updated(e){super.updated(e),e.has("standalone")&&this.syncBusSubscription(),e.has("heading")&&this.updateGeneratedAriaLabel(),(e.has("anchor")||e.has("fullHeight")||e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&(this.syncAnchorTracking(),this.syncAnchorGeometry()),(e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&this.syncOverlayModal(),(e.has("open")||e.has("mode")||e.has("anchor")||e.has("fullHeight")||e.has("pageOverlayRequested"))&&this.dispatchEvent(new CustomEvent(f.FLYOUT_STATE_CHANGED,{detail:{},bubbles:!0,composed:!0}))}syncAnchorGeometry(){const e=y(this,"esp-page"),t=this.anchor?this.getPageChain(this.anchor):[],s=e?.shadowRoot?.querySelector(".esp-page-main"),o=this.panelRef.value;if(!this.open||this.effectiveOverlay||!o){this.clearAnchorGeometry();return}const r=this.getVisibleBlockBounds(),n=Math.max(0,r.bottom-r.top);if(this.setGeometryProperty("--_esp-flyout-max-block-size",`${n}px`),this.fullHeight){this.clearAnchorPlacementGeometry();return}if(!this.anchor||!e||!t.includes(e)||!s){this.clearAnchorGeometry();return}const i=this.anchor.getBoundingClientRect(),d=Math.max(0,i.top-s.getBoundingClientRect().top),c=Number.isFinite(i.height)?i.height:0;this.setGeometryProperty("--_esp-flyout-anchor-offset",`${d}px`),this.setGeometryProperty("--_esp-flyout-anchor-block-size",`${c}px`);const m=o.getBoundingClientRect().height||n,_=Math.max(0,i.top+m-r.bottom),T=Math.max(0,m-c),g=Math.min(_,T);this.setGeometryProperty("--_esp-flyout-viewport-shift",`${g}px`);const P=i.top-g,b=8,O=i.top+c/2,z=Math.min(Math.max(b,m-b),Math.max(b,O-P));this.setGeometryProperty("--_esp-flyout-anchor-marker-offset",`${z}px`)}getVisibleBlockBounds(){const e=window.visualViewport;let t=e?.offsetTop??0,s=t+(e?.height??window.innerHeight);for(let o=this.composedParent(this);o;o=this.composedParent(o)){const r=getComputedStyle(o).overflowY;if(r!=="auto"&&r!=="scroll")continue;const n=o.getBoundingClientRect(),i=o instanceof HTMLElement?o.clientTop:0,d=o instanceof HTMLElement?o.clientHeight:n.height;if(d<=0)continue;const c=n.top+i;t=Math.max(t,c),s=Math.min(s,c+d)}return{top:t,bottom:Math.max(t,s)}}composedParent(e){if(e.parentElement)return e.parentElement;const t=e.getRootNode();return t instanceof ShadowRoot?t.host:null}setGeometryProperty(e,t){this.style.getPropertyValue(e)!==t&&this.style.setProperty(e,t)}clearAnchorGeometry(){this.clearAnchorPlacementGeometry(),this.style.removeProperty("--_esp-flyout-max-block-size")}clearAnchorPlacementGeometry(){this.style.removeProperty("--_esp-flyout-anchor-offset"),this.style.removeProperty("--_esp-flyout-viewport-shift"),this.style.removeProperty("--_esp-flyout-anchor-block-size"),this.style.removeProperty("--_esp-flyout-anchor-marker-offset")}scheduleAnchorGeometrySync(){this.isConnected&&this.anchorGeometryFrame.schedule()}syncAnchorTracking(){if(!(this.isConnected&&this.open&&(!!this.anchor||this.fullHeight)&&!this.effectiveOverlay)){this.stopAnchorTracking();return}this.trackingAnchorPosition||(this.trackingAnchorPosition=!0,window.addEventListener("scroll",this.boundAnchorViewportChange,{capture:!0,passive:!0}),window.addEventListener("resize",this.boundAnchorViewportChange,{passive:!0}));const t=this.panelRef.value;t&&t!==this.observedAnchorPanel&&typeof ResizeObserver<"u"&&(this.anchorResizeObserver??=new ResizeObserver(this.boundAnchorViewportChange),this.anchorResizeObserver.disconnect(),this.anchorResizeObserver.observe(t),this.observedAnchorPanel=t)}stopAnchorTracking(){this.trackingAnchorPosition&&(window.removeEventListener("scroll",this.boundAnchorViewportChange,{capture:!0}),window.removeEventListener("resize",this.boundAnchorViewportChange),this.trackingAnchorPosition=!1),this.anchorGeometryFrame.cancel(),this.anchorResizeObserver?.disconnect(),this.observedAnchorPanel=void 0}syncOverlayModal(){const e=this.isConnected&&this.open&&this.effectiveOverlay;if(e===this.overlayActive){!e&&!this.open&&this.overlay.close();return}e?(this.overlayActive=!0,this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.updateGeneratedAriaLabel(),this.overlay.open(),this.updateComplete.then(()=>{this.overlayActive&&this.overlay.moveFocusInto()})):(this.overlayActive=!1,this.overlay.close(),this.overlayReturnFocusTo&&(this.overlayReturnFocusTo.focus(),this.overlayReturnFocusTo=void 0),this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel())}updateGeneratedAriaLabel(){const e=this.getAttribute("aria-label");if(e!==null&&e!==this.lastGeneratedAriaLabel)return;const t=this.heading||(this.overlayActive?U:"");t?(this.setAttribute("aria-label",t),this.lastGeneratedAriaLabel=t):(this.removeAttribute("aria-label"),this.lastGeneratedAriaLabel=null)}render(){return w`
+`;let a=class extends A{constructor(){super(...arguments),this.open=!1,this.heading="",this.mode="auto",this.pageOverlayRequested=!1,this.fullHeight=!1,this.matchSurface=!1,this.standalone=!1,this.scope="outermost",this.lastGeneratedAriaLabel=null,this.boundKeydown=e=>this.handleKeydown(e),this.boundShowRequest=e=>this.handleShowRequest(e),this.boundCloseRequest=()=>this.close(),this.boundOverlayMediaChange=()=>{this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry(),this.dispatchEvent(new CustomEvent(f.FLYOUT_STATE_CHANGED,{detail:{},bubbles:!0,composed:!0}))},this.boundAnchorViewportChange=()=>this.scheduleAnchorGeometrySync(),this.boundFullHeightRequest=e=>{e.stopPropagation(),this.fullHeight=!0},this.anchorGeometryFrame=new $(()=>this.syncAnchorGeometry()),this.trackingAnchorPosition=!1,this.busSubscribed=!1,this.panelRef=M(),this.overlay=new B({host:this,getFocusTrapContainer:()=>this.panelRef.value??null,getFocusFallback:()=>this.panelRef.value??null,promote:!1}),this.overlayActive=!1,this.baseRole="complementary"}get effectiveOverlay(){return this.mode==="overlay"||this.pageOverlayRequested||(this.overlayMediaQuery?.matches??!1)}connectedCallback(){super.connectedCallback(),this.hasAttribute("role")||this.setAttribute("role","complementary"),this.baseRole=this.getAttribute("role")??"complementary",!this.overlayMediaQuery&&typeof window<"u"&&"matchMedia"in window&&(this.overlayMediaQuery=window.matchMedia(D)),this.overlayMediaQuery?.addEventListener("change",this.boundOverlayMediaChange),this.syncBusSubscription(),document.addEventListener("keydown",this.boundKeydown),this.addEventListener(k,this.boundFullHeightRequest),this.syncOverlayModal(),this.syncAnchorTracking(),this.syncAnchorGeometry()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeBus(),this.overlayMediaQuery?.removeEventListener("change",this.boundOverlayMediaChange),document.removeEventListener("keydown",this.boundKeydown),this.removeEventListener(k,this.boundFullHeightRequest),this.stopAnchorTracking(),this.overlayActive&&(this.overlayActive=!1,this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel()),this.overlayReturnFocusTo=void 0}syncBusSubscription(){if(this.standalone||!this.isConnected){this.unsubscribeBus();return}this.busSubscribed||(y().subscribe("show-flyout",this.boundShowRequest),y().subscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!0)}unsubscribeBus(){this.busSubscribed&&(y().unsubscribe("show-flyout",this.boundShowRequest),y().unsubscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!1)}show(){this.open||(this.open=!0,this.dispatchEvent(new CustomEvent(f.FLYOUT_OPENED,{detail:{},bubbles:!0,composed:!0})))}close(e="programmatic"){if(this.open){if(this.open=!1,this.overlayActive)this.overlayReturnFocusTo=this.returnFocusTo;else{const t=this.focusIsInside();this.overlay.close(),t&&this.returnFocusTo?.focus()}this.returnFocusTo=void 0,this.dispatchEvent(new CustomEvent(f.FLYOUT_CLOSED,{detail:{reason:e},bubbles:!0,composed:!0}))}}toggle(){this.open?this.close():this.show()}handleShowRequest(e){this.shouldHandleShowRequest(e)&&(H(e),e.heading!==void 0&&(this.heading=e.heading),e.content!==void 0&&this.replaceChildren(typeof e.content=="string"?document.createTextNode(e.content):e.content),this.anchor=e.anchor,this.fullHeight=e.fullHeight??!1,this.returnFocusTo=e.returnFocusTo,this.show())}shouldHandleShowRequest(e){const t=v(this,"esp-page"),s=e.anchor??e.returnFocusTo;if(!s){if(!t)return!0;const i=this.getPageChain(t);return this.scope==="outermost"&&i[i.length-1]===t}const o=this.getPageChain(s);if(o.length===0)return t===null;const r=o.find(i=>this.hasNearestScopeFlyout(i)),n=r??o[o.length-1];return t!==n?!1:r?this.scope==="nearest":this.scope==="outermost"}getPageChain(e){const t=[];let s=e;for(;s;){const o=v(s,"esp-page");if(!o||t.includes(o))break;t.push(o),s=this.composedParent(o)}return t}hasNearestScopeFlyout(e){return Array.from(e.querySelectorAll("esp-flyout")).some(t=>!t.standalone&&t.scope==="nearest"&&v(t,"esp-page")===e)}handleKeydown(e){if(this.open){if(this.overlayActive&&e.key==="Tab"){this.overlay.trapFocus(e);return}e.key!=="Escape"||e.defaultPrevented||(e.preventDefault(),this.close("escape"))}}focusIsInside(){const e=document.activeElement;return e&&this.contains(e)?!0:this.shadowRoot?.activeElement!=null}updated(e){super.updated(e),e.has("standalone")&&this.syncBusSubscription(),e.has("heading")&&this.updateGeneratedAriaLabel(),(e.has("anchor")||e.has("fullHeight")||e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&(this.syncAnchorTracking(),this.syncAnchorGeometry()),(e.has("open")||e.has("mode")||e.has("pageOverlayRequested"))&&this.syncOverlayModal(),(e.has("open")||e.has("mode")||e.has("anchor")||e.has("fullHeight")||e.has("pageOverlayRequested"))&&this.dispatchEvent(new CustomEvent(f.FLYOUT_STATE_CHANGED,{detail:{},bubbles:!0,composed:!0}))}syncAnchorGeometry(){const e=v(this,"esp-page"),t=this.anchor?this.getPageChain(this.anchor):[],s=e?.shadowRoot?.querySelector(".esp-page-main"),o=this.panelRef.value;if(!this.open||this.effectiveOverlay||!o){this.clearAnchorGeometry();return}const r=this.getVisibleBlockBounds(),n=Math.max(0,r.bottom-r.top);if(this.setGeometryProperty("--_esp-flyout-max-block-size",`${n}px`),this.fullHeight){this.clearAnchorPlacementGeometry();return}if(!this.anchor||!e||!t.includes(e)||!s){this.clearAnchorGeometry();return}const i=this.anchor.getBoundingClientRect(),d=Math.max(0,i.top-s.getBoundingClientRect().top),c=Number.isFinite(i.height)?i.height:0;this.setGeometryProperty("--_esp-flyout-anchor-offset",`${d}px`),this.setGeometryProperty("--_esp-flyout-anchor-block-size",`${c}px`);const m=o.getBoundingClientRect().height||n,C=Math.max(0,i.top+m-r.bottom),T=Math.max(0,m-c),g=Math.min(C,T);this.setGeometryProperty("--_esp-flyout-viewport-shift",`${g}px`);const P=i.top-g,b=8,O=i.top+c/2,z=Math.min(Math.max(b,m-b),Math.max(b,O-P));this.setGeometryProperty("--_esp-flyout-anchor-marker-offset",`${z}px`)}getVisibleBlockBounds(){const e=window.visualViewport;let t=e?.offsetTop??0,s=t+(e?.height??window.innerHeight);for(let o=this.composedParent(this);o;o=this.composedParent(o)){const r=getComputedStyle(o).overflowY;if(r!=="auto"&&r!=="scroll")continue;const n=o.getBoundingClientRect(),i=o instanceof HTMLElement?o.clientTop:0,d=o instanceof HTMLElement?o.clientHeight:n.height;if(d<=0)continue;const c=n.top+i;t=Math.max(t,c),s=Math.min(s,c+d)}return{top:t,bottom:Math.max(t,s)}}composedParent(e){if(e.parentElement)return e.parentElement;const t=e.getRootNode();return t instanceof ShadowRoot?t.host:null}setGeometryProperty(e,t){this.style.getPropertyValue(e)!==t&&this.style.setProperty(e,t)}clearAnchorGeometry(){this.clearAnchorPlacementGeometry(),this.style.removeProperty("--_esp-flyout-max-block-size")}clearAnchorPlacementGeometry(){this.style.removeProperty("--_esp-flyout-anchor-offset"),this.style.removeProperty("--_esp-flyout-viewport-shift"),this.style.removeProperty("--_esp-flyout-anchor-block-size"),this.style.removeProperty("--_esp-flyout-anchor-marker-offset")}scheduleAnchorGeometrySync(){this.isConnected&&this.anchorGeometryFrame.schedule()}syncAnchorTracking(){if(!(this.isConnected&&this.open&&(!!this.anchor||this.fullHeight)&&!this.effectiveOverlay)){this.stopAnchorTracking();return}this.trackingAnchorPosition||(this.trackingAnchorPosition=!0,window.addEventListener("scroll",this.boundAnchorViewportChange,{capture:!0,passive:!0}),window.addEventListener("resize",this.boundAnchorViewportChange,{passive:!0}));const t=this.panelRef.value;t&&t!==this.observedAnchorPanel&&typeof ResizeObserver<"u"&&(this.anchorResizeObserver??=new ResizeObserver(this.boundAnchorViewportChange),this.anchorResizeObserver.disconnect(),this.anchorResizeObserver.observe(t),this.observedAnchorPanel=t)}stopAnchorTracking(){this.trackingAnchorPosition&&(window.removeEventListener("scroll",this.boundAnchorViewportChange,{capture:!0}),window.removeEventListener("resize",this.boundAnchorViewportChange),this.trackingAnchorPosition=!1),this.anchorGeometryFrame.cancel(),this.anchorResizeObserver?.disconnect(),this.observedAnchorPanel=void 0}syncOverlayModal(){const e=this.isConnected&&this.open&&this.effectiveOverlay;if(e===this.overlayActive){!e&&!this.open&&this.overlay.close();return}e?(this.overlayActive=!0,this.setAttribute("role","dialog"),this.setAttribute("aria-modal","true"),this.updateGeneratedAriaLabel(),this.overlay.open(),this.updateComplete.then(()=>{this.overlayActive&&this.overlay.moveFocusInto()})):(this.overlayActive=!1,this.overlay.close(),this.overlayReturnFocusTo&&(this.overlayReturnFocusTo.focus(),this.overlayReturnFocusTo=void 0),this.setAttribute("role",this.baseRole),this.removeAttribute("aria-modal"),this.updateGeneratedAriaLabel())}updateGeneratedAriaLabel(){const e=this.getAttribute("aria-label");if(e!==null&&e!==this.lastGeneratedAriaLabel)return;const t=this.heading||(this.overlayActive?U:"");t?(this.setAttribute("aria-label",t),this.lastGeneratedAriaLabel=t):(this.removeAttribute("aria-label"),this.lastGeneratedAriaLabel=null)}render(){return w`
       <div class="vellum" aria-hidden="true" @click=${()=>this.close("vellum")}></div>
       <div
         class=${G({panel:!0,anchored:!!this.anchor,"full-height":this.fullHeight})}
@@ -53,6 +53,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
     `}};a.styles=[...A.styles,...Y(".panel > header > .close","1.25em"),I(".panel > header > .close:focus-visible","--esp-color-link","0 0 0 3px","inset"),p`
       :host {
         display: none;
+        --_esp-surface-layer: initial;
       }
 
       :host([open]) {
@@ -197,7 +198,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
 
       :host([open][mode="overlay"]) .panel,
       :host([open][data-page-overlay]) .panel {
-        ${C}
+        ${_}
       }
 
       :host([open][mode="overlay"]) .panel.anchored::before,
@@ -220,7 +221,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
         }
 
         .panel {
-          ${C}
+          ${_}
         }
 
         .panel.anchored::before,

package/dist/focus-picker/esp-focus-picker.js

@@ -1,4 +1,4 @@
-var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,r,i);else for(var l=n.length-1;l>=0;l--)(p=n[l])&&(o=(c<3?p(o):c>3?p(e,r,o):p(e,r))||o);return c>3&&o&&Object.defineProperty(e,r,o),o};import{css as f,html as m}from"lit";import{customElement as h,property as a}from"lit/decorators.js";import{styleMap as g}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{clampFocus as v,focusConverter as b,normalizeFocus as y}from"../image/image-focus.js";import"../image/esp-image.js";import{ESP_EVENTS as d}from"../shared/events.js";const F=d.FOCUS_PICKER_CHANGED;let t=class extends u{constructor(){super(...arguments),this.src="",this.alt="",this.focusPoint={x:.5,y:.5},this.ratio="3/1",this.compactRatio="3/2",this.activePointer=null,this.handlePointerDown=e=>{e.button===0&&(e.preventDefault(),this.activePointer=e.pointerId,e.currentTarget.setPointerCapture?.(e.pointerId),this.updateFromPointer(e))},this.handlePointerMove=e=>{e.pointerId===this.activePointer&&this.updateFromPointer(e)},this.handlePointerEnd=e=>{e.pointerId===this.activePointer&&(e.currentTarget.releasePointerCapture?.(e.pointerId),this.activePointer=null)},this.handleKeyDown=e=>{const r=e.shiftKey?.01:.05,i={};if(e.key==="ArrowLeft")i.x=-r;else if(e.key==="ArrowRight")i.x=r;else if(e.key==="ArrowUp")i.y=-r;else if(e.key==="ArrowDown")i.y=r;else return;e.preventDefault(),this.updateFocus({x:this.focusPoint.x+(i.x??0),y:this.focusPoint.y+(i.y??0)})}}willUpdate(e){if(super.willUpdate(e),e.has("focusPoint")){const r=this.focusPoint,i=y(r);(i.x!==r?.x||i.y!==r?.y)&&(this.focusPoint=i)}}updateFocus(e){const r=v(e),i={x:Number(r.x.toFixed(4)),y:Number(r.y.toFixed(4))};i.x===this.focusPoint.x&&i.y===this.focusPoint.y||(this.focusPoint=i,this.dispatchEvent(new CustomEvent(d.FOCUS_PICKER_CHANGED,{detail:{...i},bubbles:!0,composed:!0})))}updateFromPointer(e){const i=e.currentTarget.getBoundingClientRect();i.width<=0||i.height<=0||this.updateFocus({x:(e.clientX-i.left)/i.width,y:(e.clientY-i.top)/i.height})}render(){const e=Math.round(this.focusPoint.x*100),r=Math.round(this.focusPoint.y*100),i={"--_esp-focus-picker-x":`${this.focusPoint.x*100}%`,"--_esp-focus-picker-y":`${this.focusPoint.y*100}%`};return m`
+var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,r,i);else for(var l=n.length-1;l>=0;l--)(p=n[l])&&(o=(c<3?p(o):c>3?p(e,r,o):p(e,r))||o);return c>3&&o&&Object.defineProperty(e,r,o),o};import{css as f,html as m}from"lit";import{customElement as h,property as a}from"lit/decorators.js";import{styleMap as g}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{clampFocus as v,focusConverter as b,normalizeFocus as y}from"../image/image-focus.js";import"../image/esp-image.js";import{ESP_EVENTS as d}from"../shared/events.js";const _=d.FOCUS_PICKER_CHANGED;let t=class extends u{constructor(){super(...arguments),this.src="",this.alt="",this.focusPoint={x:.5,y:.5},this.ratio="3/1",this.compactRatio="3/2",this.activePointer=null,this.handlePointerDown=e=>{e.button===0&&(e.preventDefault(),this.activePointer=e.pointerId,e.currentTarget.setPointerCapture?.(e.pointerId),this.updateFromPointer(e))},this.handlePointerMove=e=>{e.pointerId===this.activePointer&&this.updateFromPointer(e)},this.handlePointerEnd=e=>{e.pointerId===this.activePointer&&(e.currentTarget.releasePointerCapture?.(e.pointerId),this.activePointer=null)},this.handleKeyDown=e=>{const r=e.shiftKey?.01:.05,i={};if(e.key==="ArrowLeft")i.x=-r;else if(e.key==="ArrowRight")i.x=r;else if(e.key==="ArrowUp")i.y=-r;else if(e.key==="ArrowDown")i.y=r;else return;e.preventDefault(),this.updateFocus({x:this.focusPoint.x+(i.x??0),y:this.focusPoint.y+(i.y??0)})}}willUpdate(e){if(super.willUpdate(e),e.has("focusPoint")){const r=this.focusPoint,i=y(r);(i.x!==r?.x||i.y!==r?.y)&&(this.focusPoint=i)}}updateFocus(e){const r=v(e),i={x:Number(r.x.toFixed(4)),y:Number(r.y.toFixed(4))};i.x===this.focusPoint.x&&i.y===this.focusPoint.y||(this.focusPoint=i,this.dispatchEvent(new CustomEvent(d.FOCUS_PICKER_CHANGED,{detail:{...i},bubbles:!0,composed:!0})))}updateFromPointer(e){const i=e.currentTarget.getBoundingClientRect();i.width<=0||i.height<=0||this.updateFocus({x:(e.clientX-i.left)/i.width,y:(e.clientY-i.top)/i.height})}render(){const e=Math.round(this.focusPoint.x*100),r=Math.round(this.focusPoint.y*100),i={"--_esp-focus-picker-x":`${this.focusPoint.x*100}%`,"--_esp-focus-picker-y":`${this.focusPoint.y*100}%`};return m`
       <div part="picker" class="picker">
         <div
           part="stage"
@@ -63,6 +63,7 @@ var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnP
       }
 
       .stage {
+        --_esp-surface-layer: 2;
         position: relative;
         overflow: hidden;
         min-block-size: var(--esp-size-big);
@@ -126,4 +127,4 @@ var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnP
           transition: none;
         }
       }
-    `],s([a({type:String})],t.prototype,"src",void 0),s([a({type:String})],t.prototype,"alt",void 0),s([a({attribute:"focus",converter:b,reflect:!0})],t.prototype,"focusPoint",void 0),s([a({type:String})],t.prototype,"ratio",void 0),s([a({attribute:"compact-ratio",type:String})],t.prototype,"compactRatio",void 0),t=s([h("esp-focus-picker")],t);export{t as EspalierFocusPicker,F as FOCUS_CHANGED_EVENT};
+    `],s([a({type:String})],t.prototype,"src",void 0),s([a({type:String})],t.prototype,"alt",void 0),s([a({attribute:"focus",converter:b,reflect:!0})],t.prototype,"focusPoint",void 0),s([a({type:String})],t.prototype,"ratio",void 0),s([a({attribute:"compact-ratio",type:String})],t.prototype,"compactRatio",void 0),t=s([h("esp-focus-picker")],t);export{t as EspalierFocusPicker,_ as FOCUS_CHANGED_EVENT};

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

@@ -8,13 +8,13 @@ export type FooterColumns = "auto" | "1" | "2" | "3" | "4" | "5" | "6";
  * artwork, link groups, supporting actions, and legal or utility content.
  * Its background remains full-bleed while its content automatically aligns
  * to the surface of a containing [`<esp-page>`](/components/page/).
- * The decorative background uses the same internal visual-layer primitive as
- * `esp-image` banners; the footer's public background tokens are unchanged.
- *
  * Use bare [`<esp-footer-link-group>`](/components/footer/link-group/) children
  * when navigation groups should auto-flow independently through the grid.
  * `columns` is a maximum: the grid always drops columns when they no longer fit.
  *
+ * A field fills one layer above the surface it sits on.
+ * Use `surface-layer="1|2|3|4"` to select the default painted layer.
+ *
  * ```html
  * <esp-footer
  *   light-brand-logo="/assets/logo-light.svg"