@taprootio/espalier 6.2.0 → 6.4.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.
  *
@@ -125,6 +136,41 @@ export declare class EspalierBox extends EspalierElementBase {
      * </script>
      * ```
      *
+     * A full-screen box fills the viewport. Inside a
+     * [bounded dialog](/components/dialog) it fills exactly the dialog's
+     * rectangle instead: it takes its position and size from the same
+     * `--esp-dialog-inset-*` custom properties, set on the `esp-dialog` or any
+     * ancestor of the box.
+     *
+     * ```html
+     * <style>
+     *   esp-dialog.bounded-box {
+     *     --esp-dialog-inset-block-start: 6rem;
+     *     --esp-dialog-inset-inline-start: 3rem;
+     *     --esp-dialog-inset-inline-end: 3rem;
+     *     --esp-dialog-inset-block-end: 2rem;
+     *   }
+     * </style>
+     * <esp-dialog class="bounded-box" full-screen>
+     *   <esp-box full-screen>
+     *     <h2>Box in a bounded dialog</h2>
+     *     <p>This box fills the rectangle the dialog is bounded to.</p>
+     *     <esp-button intent="danger" label="Close"></esp-button>
+     *   </esp-box>
+     * </esp-dialog>
+     * <esp-button label="Show Dialog"></esp-button>
+     * <script>
+     *   const theDialog = findByTagName("esp-dialog")[0];
+     *   const buttons = findByTagName("esp-button");
+     *   buttons[0].addEventListener("esp-clicked", () => {
+     *     theDialog.toggleOpen();
+     *   });
+     *   buttons[1].addEventListener("esp-clicked", () => {
+     *     theDialog.toggleOpen();
+     *   });
+     * </script>
+     * ```
+     *
      * @type {boolean}
      */
     fullScreen: boolean;

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 p=function(r,e,s,i){var a=arguments.length,o=a<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,s):i,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(r,e,s,i);else for(var n=r.length-1;n>=0;n--)(l=r[n])&&(o=(a<3?l(o):a>3?l(e,s,o):l(e,s))||o);return a>3&&o&&Object.defineProperty(e,s,o),o};import{paintedSurface as c}from"../shared/surface-layer.js";import{css as v,html as b}from"lit";import{customElement as f,property as h}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 t=class extends d{constructor(){super(...arguments),this.fullScreen=!1}render(){const{fullScreen:e}=this;return b`
+      <div class=${u({"esp-box":!0,"full-screen":e})}>
         <div part="box">
           <slot></slot>
         </div>
       </div>
-    `}};s.styles=[...d.styles,c`
+    `}};t.styles=[...d.styles,c(1),v`
       :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;
@@ -42,16 +42,31 @@ var n=function(t,e,r,i){var a=arguments.length,o=a<3?e:i===null?i=Object.getOwnP
         }
 
         &.full-screen {
-          width: 100vw;
-          
-          height: 100vh;
-          height: 100dvh;
+          width: calc(
+            100vw - var(--esp-dialog-inset-inline-start, 0px) - var(
+                --esp-dialog-inset-inline-end,
+                0px
+              )
+          );
+          height: calc(
+            100vh - var(--esp-dialog-inset-block-start, 0px) - var(
+                --esp-dialog-inset-block-end,
+                0px
+              )
+          );
+          height: calc(
+            100dvh - var(--esp-dialog-inset-block-start, 0px) - var(
+                --esp-dialog-inset-block-end,
+                0px
+              )
+          );
           position: fixed;
-          top: 0;
-          left: 0;
+          inset-block-start: var(--esp-dialog-inset-block-start, 0px);
+          inset-inline-start: var(--esp-dialog-inset-inline-start, 0px);
           z-index: 10;
 
           > div {
+            position: relative;
             overflow-y: auto;
             
             padding-bottom: max(
@@ -61,4 +76,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};
+    `],p([h({attribute:"full-screen",type:Boolean})],t.prototype,"fullScreen",void 0),t=p([f("esp-box")],t);export{t 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
@@ -17,6 +20,78 @@ import { LitElement } from "lit";
  * - Restores focus to the element that was focused before the
  *   dialog was opened.
  *
+ * ### Bounded dialog
+ *
+ * A dialog covers the whole viewport by default. Set the four inset custom
+ * properties on the `esp-dialog` host to confine it to a rectangle and leave
+ * the rest of the page visible, for example to keep a header or a live preview
+ * on screen while a full-screen editor is open. The vellum (the dialog's
+ * scrolling surface) and its backdrop paint only inside the rectangle, and a
+ * slotted `esp-box full-screen` fills exactly that rectangle.
+ *
+ * The insets are lengths (`0px`, `4rem`, `var(--header-height)`), not unitless
+ * numbers, and they are measured from the viewport edges. They are logical, so
+ * "inline start" is the left edge in left-to-right text and the right edge in
+ * right-to-left text. Because custom properties inherit, a dialog nested inside
+ * a bounded dialog's markup is bounded the same way unless it sets its own
+ * insets.
+ *
+ * Bounds change only where the dialog paints. What stays reachable is decided
+ * by the same rules as an unbounded dialog:
+ *
+ * - The dialog has no click-outside dismissal, bounded or not. It closes on
+ *   `Escape`, an `esp-form-dialog-close-requested` event, or `toggleOpen()`, so
+ *   a click on the uncovered region never counts as an "outside" click.
+ * - The dialog marks `inert` the siblings of its anchor element, not the
+ *   regions its bounds leave uncovered. The anchor is `esp-page`'s dialog drop
+ *   zone when the dialog sits in the page's markup, so there the page's
+ *   internal tracks (header, menus, preview, help, footer) are inert and not
+ *   clickable even where the dialog does not cover them. A dialog that is a
+ *   direct child of another component's shadow root is anchored on the nearest
+ *   ancestor host that has a light-DOM parent, and only that host's siblings
+ *   go inert; the page around it stays live. A dialog wrapped in an element
+ *   inside that shadow root is anchored on itself, so its siblings in the
+ *   wrapper go inert instead.
+ * - A region that is not inert receives clicks and keyboard focus. The focus
+ *   trap wraps `Tab` and `Shift+Tab` at the dialog's first and last focusable
+ *   elements, and `Escape` is handled on the dialog, both only while focus is
+ *   inside it. A click on an uncovered control moves focus there, and from then
+ *   on `Tab` continues through the page and `Escape` no longer closes the
+ *   dialog. Set `inert` on the uncovered regions that must not be reachable
+ *   while the dialog is open (an inert region is also skipped by screen
+ *   readers).
+ * - Bounds assume a horizontal writing mode: the insets are logical, but the
+ *   dialog's width and height are physical.
+ *
+ * ```html
+ * <style>
+ *   esp-dialog.bounded {
+ *     --esp-dialog-inset-block-start: 6rem;
+ *     --esp-dialog-inset-inline-start: 3rem;
+ *     --esp-dialog-inset-inline-end: 3rem;
+ *     --esp-dialog-inset-block-end: 2rem;
+ *   }
+ * </style>
+ * <esp-dialog class="bounded" full-screen>
+ *   <esp-box full-screen>
+ *     <h2>Bounded dialog</h2>
+ *     <p>The page above and around this box stays visible.</p>
+ *     <esp-button intent="danger" label="Close"></esp-button>
+ *   </esp-box>
+ * </esp-dialog>
+ * <esp-button label="Show Dialog"></esp-button>
+ * <script>
+ *   const theDialog = findByTagName("esp-dialog")[0];
+ *   const buttons = findByTagName("esp-button");
+ *   buttons[0].addEventListener("esp-clicked", () => {
+ *     theDialog.toggleOpen();
+ *   });
+ *   buttons[1].addEventListener("esp-clicked", () => {
+ *     theDialog.toggleOpen();
+ *   });
+ * </script>
+ * ```
+ *
  * @slot - Place content to show modally in the default slot.
  *
  * ```html
@@ -102,6 +177,11 @@ 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.
+ * @cssprop --esp-dialog-inset-block-start - The top edge of the area the dialog covers, as a length from the viewport top. Defaults to `0px`.
+ * @cssprop --esp-dialog-inset-inline-start - The leading edge (left in left-to-right text) of the area the dialog covers, as a length from the viewport edge. Defaults to `0px`.
+ * @cssprop --esp-dialog-inset-inline-end - The trailing edge (right in left-to-right text) of the area the dialog covers, as a length from the viewport edge. Defaults to `0px`.
+ * @cssprop --esp-dialog-inset-block-end - The bottom edge of the area the dialog covers, as a length from the viewport bottom. Defaults to `0px`.
+ * @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 +235,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,6 +1,6 @@
-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 p=function(l,e,t,i){var n=arguments.length,s=n<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(l,e,t,i);else for(var r=l.length-1;r>=0;r--)(a=l[r])&&(s=(n<3?a(s):n>3?a(e,t,s):a(e,t))||s);return n>3&&s&&Object.defineProperty(e,t,s),s};import{paintedSurface as v,surfaceLayerAttributes as f}from"../shared/surface-layer.js";import{LitElement as g,css as b,html as m,nothing as d}from"lit";import{customElement as y,property as k,state as _}from"lit/decorators.js";import{classMap as x}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 c}from"../shared/events.js";let o=class extends g{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(c.DIALOG_CLOSING,{detail:{reason:e},bubbles:!0,composed:!0,cancelable:!0});if(!this.dispatchEvent(t))return;const i=++this._lifecycleToken;this.removeAttribute("is-open"),this.isOpen=!1,this._overlay.close(),this.updateComplete.then(()=>{this.isOpen||this._lifecycleToken!==i||this.dispatchEvent(new CustomEvent(c.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(c.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,i={"is-open":e,"full-screen":t};return m`<div
       ${h(this.vellumRef)}
-      class="vellum ${_(o)}"
+      class="vellum ${x(i)}"
       data-no-swipe
       role=${e?"dialog":d}
       aria-modal=${e?"true":d}
@@ -8,70 +8,82 @@ var c=function(l,e,t,o){var n=arguments.length,i=n<3?e:o===null?o=Object.getOwnP
       @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>`}};o.styles=[v(3),f(":host"),b`
+      :host {
         display: block;
+      }
+      .vellum {
+        display: grid;
+        box-sizing: border-box;
+        justify-content: center;
+        padding: 0;
+        visibility: hidden;
         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: 10000;
+        inset-inline-start: var(--esp-dialog-inset-inline-start, 0px);
+        inset-block-start: var(--esp-dialog-inset-block-start, 0px);
+        
+        width: calc(
+          100vw - var(--esp-dialog-inset-inline-start, 0px) - var(
+              --esp-dialog-inset-inline-end,
+              0px
+            )
         );
-        z-index: 1;
-      }
+        height: calc(
+          100vh - var(--esp-dialog-inset-block-start, 0px) - var(--esp-dialog-inset-block-end, 0px)
+        );
+        height: calc(
+          100dvh - var(--esp-dialog-inset-block-start, 0px) - var(--esp-dialog-inset-block-end, 0px)
+        );
+        overflow-y: auto;
+        outline: none;
 
-      &::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;
-      }
+        ::slotted(*) {
+          z-index: 10;
+          position: relative;
+        }
+
+        &::before,
+        &::after {
+          content: "";
+          display: block;
+          position: fixed;
+          inset-inline: var(--esp-dialog-inset-inline-start, 0px)
+            var(--esp-dialog-inset-inline-end, 0px);
+          inset-block: var(--esp-dialog-inset-block-start, 0px)
+            var(--esp-dialog-inset-block-end, 0px);
+        }
+
+        &::before {
+          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 {
+          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;
+        &.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};
+    `],p([_()],o.prototype,"isOpen",void 0),p([k({attribute:"full-screen",type:Boolean})],o.prototype,"fullScreen",void 0),o=p([y("esp-dialog")],o);export{o 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