@taprootio/espalier 3.9.0 → 4.1.0

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

@@ -31,10 +31,10 @@ import { LitElement } from "lit";
  * <script>
  *   const theDialog = findByTagName("esp-dialog")[0];
  *   const buttons = findByTagName("esp-button");
- *   buttons[0].addEventListener("clicked", () => {
+ *   buttons[0].addEventListener("esp-clicked", () => {
  *     theDialog.toggleOpen();
  *   });
- *   buttons[1].addEventListener("clicked", () => {
+ *   buttons[1].addEventListener("esp-clicked", () => {
  *     theDialog.toggleOpen();
  *   });
  * </script>
@@ -72,10 +72,10 @@ import { LitElement } from "lit";
  *   const buttons = findByTagName("esp-button");
  *   const openBtn = buttons[buttons.length - 1];
  *   const cancelBtn = buttons[1];
- *   openBtn.addEventListener("clicked", () => {
+ *   openBtn.addEventListener("esp-clicked", () => {
  *     dialog.toggleOpen();
  *   });
- *   cancelBtn.addEventListener("clicked", () => {
+ *   cancelBtn.addEventListener("esp-clicked", () => {
  *     dialog.toggleOpen();
  *   });
  * </script>
@@ -91,7 +91,7 @@ import { LitElement } from "lit";
  * Call `event.preventDefault()` to cancel the close (e.g. for
  * unsaved-changes confirmation). The `reason` indicates what
  * triggered the close: `"escape"` for the Escape key,
- * `"close-dialog"` for a `closeDialog` event from slotted content
+ * `"close-dialog"` for a `esp-form-dialog-close-requested` event from slotted content
  * (typically `<esp-form method="dialog">`), or `"api"` for a
  * direct `toggleOpen()` call.
  *
@@ -127,10 +127,10 @@ export declare class EspalierDialog extends LitElement {
      * <script>
      *   const theDialog = findByTagName("esp-dialog")[0];
      *   const buttons = findByTagName("esp-button");
-     *   buttons[0].addEventListener("clicked", () => {
+     *   buttons[0].addEventListener("esp-clicked", () => {
      *     theDialog.toggleOpen();
      *   });
-     *   buttons[1].addEventListener("clicked", () => {
+     *   buttons[1].addEventListener("esp-clicked", () => {
      *     theDialog.toggleOpen();
      *   });
      * </script>

package/dist/dialog/esp-dialog.js

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

package/dist/file-upload/esp-file-upload.d.ts

@@ -7,7 +7,7 @@ import "../button/esp-button.js";
  * <esp-file-upload choose-text="Upload Document"></esp-file-upload>
  * <script>
  *   const theFileUpload = findByTagName("esp-file-upload")[0];
- *   theFileUpload.addEventListener("files-selected", () => {
+ *   theFileUpload.addEventListener("esp-file-upload-files-selected", () => {
  *     showToast({
  *       message: `You selected a file!`,
  *       icon: "info-i",
@@ -20,6 +20,9 @@ import "../button/esp-button.js";
  * </script>
  * ```
  *
+ * @event {CustomEvent<FileList>} esp-file-upload-files-selected - Fired after
+ * the user selects one or more files.
+ *
  * @docPageTitle File Upload
  * @docUrl /components/file-upload
  * @menuGroup Form Controls
@@ -43,7 +46,7 @@ export declare class EspalierFileUpload extends EspalierElementBase {
      */
     multiple: boolean;
     /**
-     * The `files-selected` event sets the file upload to a processing state.
+     * The `esp-file-upload-files-selected` event sets the file upload to a processing state.
      * Call this method when you have finished processing the selected files
      * to reset the file upload.
      */

package/dist/file-upload/esp-file-upload.js

@@ -1,4 +1,4 @@
-var s=function(o,e,l,p){var r=arguments.length,t=r<3?e:p===null?p=Object.getOwnPropertyDescriptor(e,l):p,u;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(o,e,l,p);else for(var n=o.length-1;n>=0;n--)(u=o[n])&&(t=(r<3?u(t):r>3?u(e,l,t):u(e,l))||t);return r>3&&t&&Object.defineProperty(e,l,t),t};import{customElement as c,property as a,state as h}from"lit/decorators.js";import{EspalierElementBase as f}from"../shared/esp-element-base.js";import{html as d}from"lit-html";import"../button/esp-button.js";import{uploadSVG as m}from"../shared/svgs/upload.js";import{createRef as v,ref as b}from"lit/directives/ref.js";let i=class extends f{constructor(){super(...arguments),this.uploadInput=v(),this.processingFiles=!1,this.accept="*",this.chooseText="Choose File",this.multiple=!1,this.filesSelected=async e=>{this.uploadInput.value&&(this.processingFiles=!0,this.dispatchEvent(new CustomEvent("files-selected",{detail:e,bubbles:!0,composed:!0})))}}finishedProcessingFiles(){this.processingFiles=!1,this.uploadInput.value&&(this.uploadInput.value.value="")}render(){return d`<esp-button
+var l=function(p,e,o,s){var r=arguments.length,t=r<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,o):s,u;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(p,e,o,s);else for(var n=p.length-1;n>=0;n--)(u=p[n])&&(t=(r<3?u(t):r>3?u(e,o,t):u(e,o))||t);return r>3&&t&&Object.defineProperty(e,o,t),t};import{customElement as c,property as a,state as h}from"lit/decorators.js";import{EspalierElementBase as f}from"../shared/esp-element-base.js";import{html as d}from"lit-html";import"../button/esp-button.js";import{uploadSVG as m}from"../shared/svgs/upload.js";import{createRef as v,ref as E}from"lit/directives/ref.js";import{ESP_EVENTS as b}from"../shared/events.js";let i=class extends f{constructor(){super(...arguments),this.uploadInput=v(),this.processingFiles=!1,this.accept="*",this.chooseText="Choose File",this.multiple=!1,this.filesSelected=async e=>{this.uploadInput.value&&(this.processingFiles=!0,this.dispatchEvent(new CustomEvent(b.FILE_UPLOAD_FILES_SELECTED,{detail:e,bubbles:!0,composed:!0})))}}finishedProcessingFiles(){this.processingFiles=!1,this.uploadInput.value&&(this.uploadInput.value.value="")}render(){return d`<esp-button
         .label="${this.chooseText}"
         .loading=${this.processingFiles}
         @click=${()=>{this.uploadInput.value?.click()}}
@@ -6,10 +6,10 @@ var s=function(o,e,l,p){var r=arguments.length,t=r<3?e:p===null?p=Object.getOwnP
         ${m}
       </esp-button>
       <input
-        ${b(this.uploadInput)}
+        ${E(this.uploadInput)}
         type="file"
         ?multiple=${this.multiple}
         .accept=${this.accept}
         hidden
         @change=${()=>{!this.uploadInput.value||!this.uploadInput.value.files||this.filesSelected(this.uploadInput.value.files)}}
-      />`}};s([h()],i.prototype,"processingFiles",void 0),s([a({attribute:"accept",type:String})],i.prototype,"accept",void 0),s([a({attribute:"choose-text",type:String})],i.prototype,"chooseText",void 0),s([a({attribute:"multiple",type:Boolean})],i.prototype,"multiple",void 0),i=s([c("esp-file-upload")],i);export{i as EspalierFileUpload};
+      />`}};l([h()],i.prototype,"processingFiles",void 0),l([a({attribute:"accept",type:String})],i.prototype,"accept",void 0),l([a({attribute:"choose-text",type:String})],i.prototype,"chooseText",void 0),l([a({attribute:"multiple",type:Boolean})],i.prototype,"multiple",void 0),i=l([c("esp-file-upload")],i);export{i as EspalierFileUpload};

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

@@ -67,7 +67,7 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
  * </esp-page>
  * <script>
  *   const flyout = findById("demo-flyout");
- *   findById("toggle-flyout").addEventListener("clicked", () => flyout.toggle());
+ *   findById("toggle-flyout").addEventListener("esp-clicked", () => flyout.toggle());
  * </script>
  * ```
  *
@@ -100,7 +100,7 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
  * </esp-page>
  * <script>
  *   const matchFlyout = findById("match-flyout");
- *   findById("toggle-match").addEventListener("clicked", () => matchFlyout.toggle());
+ *   findById("toggle-match").addEventListener("esp-clicked", () => matchFlyout.toggle());
  * </script>
  * ```
  *
@@ -132,7 +132,7 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
  * </esp-page>
  * <script>
  *   const dockedFlyout = findById("docked-flyout");
- *   findById("toggle-docked").addEventListener("clicked", () => dockedFlyout.toggle());
+ *   findById("toggle-docked").addEventListener("esp-clicked", () => dockedFlyout.toggle());
  * </script>
  * ```
  *
@@ -164,7 +164,7 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
  * </esp-page>
  * <script>
  *   const overlayFlyout = findById("overlay-flyout");
- *   findById("open-overlay").addEventListener("clicked", () => overlayFlyout.toggle());
+ *   findById("open-overlay").addEventListener("esp-clicked", () => overlayFlyout.toggle());
  * </script>
  * ```
  *
@@ -247,12 +247,12 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
  * </esp-page>
  * <script>
  *   const applesButton = findById("show-apples");
- *   applesButton.addEventListener("clicked", () => {
+ *   applesButton.addEventListener("esp-clicked", () => {
  *     showFlyout({ heading: "Apples", content: "Crisp. Store cold.", anchor: applesButton });
  *   });
  *   const pearsButton = findById("show-pears");
  *   const pearsDescription = findById("pears-description");
- *   pearsButton.addEventListener("clicked", () => {
+ *   pearsButton.addEventListener("esp-clicked", () => {
  *     showFlyout({
  *       heading: "Pears",
  *       content: pearsDescription.content.cloneNode(true),
@@ -264,16 +264,16 @@ import { type FlyoutCloseReason } from "../shared/flyout-events.js";
  *
  * @slot - The flyout's content.
  *
- * @event {CustomEvent<{}>} flyout-opened - Fired by `show()` when the
+ * @event {CustomEvent<{}>} esp-flyout-opened - Fired by `show()` when the
  * flyout opens.
- * @event {CustomEvent<{reason: FlyoutCloseReason}>} flyout-closed -
+ * @event {CustomEvent<{reason: FlyoutCloseReason}>} esp-flyout-closed -
  * Fired by `close()` when the flyout closes. `reason` is `"escape"`,
  * `"vellum"`, `"button"`, or `"programmatic"`.
- * @event {CustomEvent<{}>} flyout-state-changed - Fired on every
+ * @event {CustomEvent<{}>} esp-flyout-state-changed - Fired on every
  * `open`, `mode`, or `anchor` change, including direct property
  * assignment (not just `show()`/`close()`). `esp-page` uses it to keep
  * its layout in sync; most consumers want
- * `flyout-opened`/`flyout-closed` instead.
+ * `esp-flyout-opened`/`esp-flyout-closed` instead.
  *
  * @csspart panel - The panel surface.
  * @csspart header - The heading/close-button row.

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 g,nothing as S}from"lit";import{customElement as _,property as h}from"lit/decorators.js";import{classMap as O}from"lit/directives/class-map.js";import{createRef as F,ref as G}from"lit/directives/ref.js";import{EspalierElementBase as w}from"../shared/esp-element-base.js";import{getEspBus as f}from"../shared/bus-events.js";import{FLYOUT_FULL_HEIGHT_REQUEST_EVENT as k,markFlyoutRequestServiced as L}from"../shared/flyout-events.js";import{OverlayController as M}from"../shared/overlay-controller.js";import{cancelSVG as q}from"../shared/svgs/cancel.js";import{traverseToClosest as y}from"../shared/utilities.js";import{RafThrottle as B}from"../shared/raf-throttle.js";const H="(max-width: 50em)",$="Flyout",A=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 O}from"lit";import{customElement as S,property as h}from"lit/decorators.js";import{classMap as F}from"lit/directives/class-map.js";import{createRef as L,ref as G}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 M}from"../shared/flyout-events.js";import{OverlayController as H}from"../shared/overlay-controller.js";import{cancelSVG as q}from"../shared/svgs/cancel.js";import{traverseToClosest as v}from"../shared/utilities.js";import{RafThrottle as B}from"../shared/raf-throttle.js";const $="(max-width: 50em)",V="Flyout",R=p`
   position: fixed;
   inset: 0;
   margin-block-start: 0;
@@ -7,13 +7,13 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
   height: 100vh;
   height: 100dvh;
   z-index: var(--esp-flyout-z-index, 3000);
-`,R=p`
+`,x=p`
   display: block;
   position: absolute;
   inset: 0;
   background-color: var(--esp-vellum-background, var(--esp-color-layer-3));
   opacity: var(--esp-vellum-opacity, 0.85);
-`,x=p`
+`,E=p`
   position: absolute;
   inset-block: 0;
   inset-inline-end: 0;
@@ -31,16 +31,16 @@ 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 w{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("flyout-state-changed",{detail:{},bubbles:!0,composed:!0}))},this.boundAnchorViewportChange=()=>this.scheduleAnchorGeometrySync(),this.boundFullHeightRequest=e=>{e.stopPropagation(),this.fullHeight=!0},this.anchorGeometryFrame=new B(()=>this.syncAnchorGeometry()),this.trackingAnchorPosition=!1,this.busSubscribed=!1,this.panelRef=F(),this.overlay=new M({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(H)),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||(f().subscribe("show-flyout",this.boundShowRequest),f().subscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!0)}unsubscribeBus(){this.busSubscribed&&(f().unsubscribe("show-flyout",this.boundShowRequest),f().unsubscribe("close-flyout",this.boundCloseRequest),this.busSubscribed=!1)}show(){this.open||(this.open=!0,this.dispatchEvent(new CustomEvent("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("flyout-closed",{detail:{reason:e},bubbles:!0,composed:!0}))}}toggle(){this.open?this.close():this.show()}handleShowRequest(e){this.shouldHandleShowRequest(e)&&(L(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("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 v=o.getBoundingClientRect().height||n,z=Math.max(0,i.top+v-r.bottom),C=Math.max(0,v-c),b=Math.min(z,C);this.setGeometryProperty("--_esp-flyout-viewport-shift",`${b}px`);const E=i.top-b,m=8,P=i.top+c/2,T=Math.min(Math.max(m,v-m),Math.max(m,P-E));this.setGeometryProperty("--_esp-flyout-anchor-marker-offset",`${T}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?$:"");t?(this.setAttribute("aria-label",t),this.lastGeneratedAriaLabel=t):(this.removeAttribute("aria-label"),this.lastGeneratedAriaLabel=null)}render(){return g`
+`;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 B(()=>this.syncAnchorGeometry()),this.trackingAnchorPosition=!1,this.busSubscribed=!1,this.panelRef=L(),this.overlay=new H({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($)),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)&&(M(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,T=Math.max(0,i.top+m-r.bottom),C=Math.max(0,m-c),g=Math.min(T,C);this.setGeometryProperty("--_esp-flyout-viewport-shift",`${g}px`);const z=i.top-g,b=8,_=i.top+c/2,P=Math.min(Math.max(b,m-b),Math.max(b,_-z));this.setGeometryProperty("--_esp-flyout-anchor-marker-offset",`${P}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?V:"");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=${O({panel:!0,anchored:!!this.anchor,"full-height":this.fullHeight})}
+        class=${F({panel:!0,anchored:!!this.anchor,"full-height":this.fullHeight})}
         part="panel"
         ${G(this.panelRef)}
       >
         <span class="anchor-terminus" aria-hidden="true"></span>
         <header part="header">
-          ${this.heading?g`<h2>${this.heading}</h2>`:S}
+          ${this.heading?w`<h2>${this.heading}</h2>`:O}
           
           <button class="close" aria-label="Close" @click=${()=>this.close("button")}>
             ${q}
@@ -50,7 +50,7 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
           <slot @slotchange=${this.boundAnchorViewportChange}></slot>
         </div>
       </div>
-    `}};a.styles=[...w.styles,p`
+    `}};a.styles=[...A.styles,p`
       :host {
         display: none;
       }
@@ -203,17 +203,17 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
       
       :host([open][mode="overlay"]),
       :host([open][data-page-overlay]) {
-        ${A}
+        ${R}
       }
 
       :host([open][mode="overlay"]) .vellum,
       :host([open][data-page-overlay]) .vellum {
-        ${R}
+        ${x}
       }
 
       :host([open][mode="overlay"]) .panel,
       :host([open][data-page-overlay]) .panel {
-        ${x}
+        ${E}
       }
 
       :host([open][mode="overlay"]) .panel.anchored::before,
@@ -228,15 +228,15 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
       
       @media (max-width: 50em) {
         :host([open]) {
-          ${A}
+          ${R}
         }
 
         .vellum {
-          ${R}
+          ${x}
         }
 
         .panel {
-          ${x}
+          ${E}
         }
 
         .panel.anchored::before,
@@ -251,4 +251,4 @@ var l=function(u,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnP
           transition: none;
         }
       }
-    `],l([h({type:Boolean,reflect:!0})],a.prototype,"open",void 0),l([h({type:String})],a.prototype,"heading",void 0),l([h({reflect:!0})],a.prototype,"mode",void 0),l([h({type:Boolean,reflect:!0,attribute:"data-page-overlay"})],a.prototype,"pageOverlayRequested",void 0),l([h({attribute:!1})],a.prototype,"anchor",void 0),l([h({type:Boolean,reflect:!0,attribute:"full-height"})],a.prototype,"fullHeight",void 0),l([h({type:Boolean,reflect:!0,attribute:"match-surface"})],a.prototype,"matchSurface",void 0),l([h({type:Boolean,reflect:!0})],a.prototype,"standalone",void 0),l([h({type:String,reflect:!0})],a.prototype,"scope",void 0),a=l([_("esp-flyout")],a);export{a as EspalierFlyout};
+    `],l([h({type:Boolean,reflect:!0})],a.prototype,"open",void 0),l([h({type:String})],a.prototype,"heading",void 0),l([h({reflect:!0})],a.prototype,"mode",void 0),l([h({type:Boolean,reflect:!0,attribute:"data-page-overlay"})],a.prototype,"pageOverlayRequested",void 0),l([h({attribute:!1})],a.prototype,"anchor",void 0),l([h({type:Boolean,reflect:!0,attribute:"full-height"})],a.prototype,"fullHeight",void 0),l([h({type:Boolean,reflect:!0,attribute:"match-surface"})],a.prototype,"matchSurface",void 0),l([h({type:Boolean,reflect:!0})],a.prototype,"standalone",void 0),l([h({type:String,reflect:!0})],a.prototype,"scope",void 0),a=l([S("esp-flyout")],a);export{a as EspalierFlyout};

package/dist/focus-picker/esp-focus-picker.d.ts

@@ -2,7 +2,7 @@ import { type PropertyValues } from "lit";
 import { EspalierElementBase } from "../shared/esp-element-base.js";
 import { type FocusPoint } from "../image/image-focus.js";
 import "../image/esp-image.js";
-export declare const FOCUS_CHANGED_EVENT = "focus-changed";
+export declare const FOCUS_CHANGED_EVENT: "esp-focus-picker-changed";
 export type FocusChangedDetail = FocusPoint;
 /**
  * A keyboard- and pointer-operable focal-point authoring control with live
@@ -25,13 +25,13 @@ export type FocusChangedDetail = FocusPoint;
  * </p>
  * <script>
  *   const picker = findByTagName("esp-focus-picker")[0];
- *   picker.addEventListener("focus-changed", (event) => {
+ *   picker.addEventListener("esp-focus-picker-changed", (event) => {
  *     localStorage.setItem("banner-focus", JSON.stringify(event.detail));
  *   });
  * </script>
  * ```
  *
- * @event {CustomEvent<{x: number, y: number}>} focus-changed - Bubbles across
+ * @event {CustomEvent<{x: number, y: number}>} esp-focus-picker-changed - Bubbles across
  * shadow boundaries after every pointer or keyboard adjustment.
  * @csspart picker - The complete control layout.
  * @csspart stage - The source-image authoring surface.
@@ -72,6 +72,6 @@ declare global {
         "esp-focus-picker": EspalierFocusPicker;
     }
     interface HTMLElementEventMap {
-        "focus-changed": CustomEvent<FocusChangedDetail>;
+        "esp-focus-picker-changed": CustomEvent<FocusChangedDetail>;
     }
 }

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 d,html as f}from"lit";import{customElement as m,property as a}from"lit/decorators.js";import{styleMap as h}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{clampFocus as g,focusConverter as v,normalizeFocus as b}from"../image/image-focus.js";import"../image/esp-image.js";const $="focus-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=b(r);(i.x!==r?.x||i.y!==r?.y)&&(this.focusPoint=i)}}updateFocus(e){const r=g(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("focus-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 f`
+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`
       <div part="picker" class="picker">
         <div
           part="stage"
@@ -13,7 +13,7 @@ var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnP
           <div
             part="marker"
             class="marker"
-            style=${h(i)}
+            style=${g(i)}
             role="slider"
             tabindex="0"
             aria-label="Image focal point"
@@ -50,7 +50,7 @@ var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnP
           </figure>
         </div>
       </div>
-    `}};t.styles=[...u.styles,d`
+    `}};t.styles=[...u.styles,f`
       :host {
         display: block;
         min-inline-size: 0;
@@ -126,4 +126,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:v,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([m("esp-focus-picker")],t);export{t as EspalierFocusPicker,$ 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,F as FOCUS_CHANGED_EVENT};

package/dist/font-picker/esp-font-picker.d.ts

@@ -67,7 +67,7 @@ export declare const previewFontFamily: (family: string) => string;
  * </esp-form-item>
  * ```
  *
- * @event {CustomEvent<FontPickerValueChangedDetail>} value-changed - Fired
+ * @event {CustomEvent<FontPickerValueChangedDetail>} esp-value-changed - Fired
  * when the user selects a font
  *
  * @customElement esp-font-picker

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

@@ -3,7 +3,7 @@ var u=function(t,e,o,n){var i=arguments.length,s=i<3?e:n===null?n=Object.getOwnP
       .pickerItems=${this.fonts.map(e=>({text:e.family,value:y(e),selected:this.value===y(e),styles:{fontFamily:U(e)}}))}
       .value=${this.value}
       .placeholder=${this.placeholder}
-      @range-changed=${this.handleItemsInViewEvent}
-      @value-changed=${async e=>{e.stopPropagation();const o=this.value;if(!e.detail){this.value="",o&&h(this,o),this.emitValueChanged(void 0);return}const n=this.fonts.find(i=>y(i)===e.detail.value);this.value=e.detail.value,this.fontSource==="google"&&(await g(this.value)&&this.loadedFonts.add(this.value),S(this,this.value),o&&o!==this.value&&h(this,o)),this.emitValueChanged(n)}}
+      @esp-picker-menu-range-changed=${this.handleItemsInViewEvent}
+      @esp-value-changed=${async e=>{e.stopPropagation();const o=this.value;if(!e.detail){this.value="",o&&h(this,o),this.emitValueChanged(void 0);return}const n=this.fonts.find(i=>y(i)===e.detail.value);this.value=e.detail.value,this.fontSource==="google"&&(await g(this.value)&&this.loadedFonts.add(this.value),S(this,this.value),o&&o!==this.value&&h(this,o)),this.emitValueChanged(n)}}
     >
     </esp-pick-one>`}};u([G()],r.prototype,"fonts",void 0),u([m({attribute:"category",type:String})],r.prototype,"category",void 0),u([m({attribute:"font-source",type:String})],r.prototype,"fontSource",void 0),u([m({type:String})],r.prototype,"value",void 0),u([m({type:String})],r.prototype,"placeholder",void 0),r=u([$("esp-font-picker")],r);const q=()=>{f=void 0,p=!1;for(const t of document.head.querySelectorAll("style[data-font]"))t.remove();d.clear();for(const t of document.head.querySelectorAll(`link[${v}]`))t.remove()};export{r as EspalierFontPicker,w as WEB_SAFE_FONTS,N as getGoogleFonts,V as previewFontFamily,q as resetFontCache};

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

@@ -35,7 +35,7 @@ import { LitElement, type PropertyValues } from "lit";
  * ### Dialog integration
  *
  * When `method="dialog"`, submitting the form dispatches a
- * `closeDialog` event that `esp-dialog` listens for, closing
+ * `esp-form-dialog-close-requested` event that `esp-dialog` listens for, closing
  * the dialog without a network request.
  *
  * ### Multi-field form with validation
@@ -110,7 +110,7 @@ import { LitElement, type PropertyValues } from "lit";
  *
  * ### Handling the response
  *
- * Listen for `esp-submit-response` and `esp-submit-error` to
+ * Listen for `esp-form-submit-response` and `esp-form-submit-error` to
  * react to the server's reply when using fetch submission.
  *
  * ```html
@@ -130,14 +130,14 @@ import { LitElement, type PropertyValues } from "lit";
  *   const form = findByTagName("esp-form")[0];
  *   const msg = findById("response-msg");
  *   const text = findById("response-text");
- *   form.addEventListener("esp-submit-response", (ev) => {
+ *   form.addEventListener("esp-form-submit-response", (ev) => {
  *     msg.style.display = "";
  *     msg.setAttribute("intent", ev.detail.ok ? "success" : "warning");
  *     text.textContent = ev.detail.ok
  *       ? "Submitted successfully!"
  *       : "Server returned an error.";
  *   });
- *   form.addEventListener("esp-submit-error", () => {
+ *   form.addEventListener("esp-form-submit-error", () => {
  *     msg.style.display = "";
  *     msg.setAttribute("intent", "danger");
  *     text.textContent = "Network error — please try again.";
@@ -186,10 +186,10 @@ import { LitElement, type PropertyValues } from "lit";
  *
  * @customElement esp-form
  *
- * @event {CustomEvent<{ formData: FormData; form: HTMLFormElement }>} esp-submit - Fired when `use-fetch` is true and the form passes validation. Cancelable; calling `preventDefault()` aborts the fetch.
- * @event {CustomEvent<{ response: Response; ok: boolean }>} esp-submit-response - Fired after a successful `fetch` submission.
- * @event {CustomEvent<{ error: unknown }>} esp-submit-error - Fired when a `fetch` submission fails.
- * @event {CustomEvent} closeDialog - Fired when `method="dialog"` is used and the form requests its containing `<esp-dialog>` to close. The event detail is an empty object.
+ * @event {CustomEvent<{ formData: FormData; form: HTMLFormElement }>} esp-form-submit - Fired when `use-fetch` is true and the form passes validation. Cancelable; calling `preventDefault()` aborts the fetch.
+ * @event {CustomEvent<{ response: Response; ok: boolean }>} esp-form-submit-response - Fired after a successful `fetch` submission.
+ * @event {CustomEvent<{ error: unknown }>} esp-form-submit-error - Fired when a `fetch` submission fails.
+ * @event {CustomEvent} esp-form-dialog-close-requested - Fired when `method="dialog"` is used and the form requests its containing `<esp-dialog>` to close. The event detail is an empty object.
  *
  * @docPageTitle Form
  * @docUrl /components/form
@@ -226,7 +226,7 @@ export declare class EspalierForm extends LitElement {
     novalidate: boolean;
     /**
      * When true, the form uses `fetch()` instead of native
-     * browser navigation for submission. An `esp-submit` event
+     * browser navigation for submission. An `esp-form-submit` event
      * is fired with the `FormData` in the detail, allowing
      * consumers to cancel or modify the request.
      *

package/dist/form/esp-form.js

@@ -1 +1 @@
-var l=function(p,t,e,i){var n=arguments.length,s=n<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(p,t,e,i);else for(var r=p.length-1;r>=0;r--)(o=p[r])&&(s=(n<3?o(s):n>3?o(t,e,s):o(t,e))||s);return n>3&&s&&Object.defineProperty(t,e,s),s};import{LitElement as d,html as m}from"lit";import{customElement as b,property as h}from"lit/decorators.js";import{scrollBehavior as y}from"../shared/viewport.js";let a=class extends d{constructor(){super(),this._formReady=!1,this.action="",this.method="post",this.novalidate=!1,this.useFetch=!1,this.useJson=!1,this.enctype="application/x-www-form-urlencoded",this.label="",this._form=document.createElement("form"),this._form.noValidate=!0,this._form.addEventListener("submit",t=>this.handleSubmit(t)),this._form.addEventListener("keydown",t=>this.handleKeyDown(t))}createRenderRoot(){return this}connectedCallback(){if(!this._formReady){for(this._formReady=!0;this.firstChild;)this._form.appendChild(this.firstChild);this.appendChild(this._form)}super.connectedCallback()}render(){return this.syncFormAttributes(),m``}syncFormAttributes(){const t=this._form;this.action?t.action=this.action:t.removeAttribute("action"),t.method=this.method,t.enctype=this.enctype,this.label?t.setAttribute("aria-label",this.label):t.removeAttribute("aria-label")}firstUpdated(){this._form.parentElement||this.appendChild(this._form)}updated(t){super.updated(t),this._form.parentElement||this.appendChild(this._form)}checkValidity(){return this._form.checkValidity()}reportValidity(){const t=this._form,e=Array.from(t.querySelectorAll("esp-form-item"));let i=null,n=null;for(const o of e){const r=o.querySelector("[name], esp-input, esp-textarea, esp-pick-one, esp-pick-some, esp-checkbox, esp-checkbox-group, esp-radio-button-group, esp-date-picker, esp-color-picker");r&&("validate"in r&&typeof r.validate=="function"&&r.validate(),"checkValidity"in r&&typeof r.checkValidity=="function"&&!r.checkValidity()&&(i||(i=r,n=o)))}for(const o of Array.from(t.elements))"validate"in o&&typeof o.validate=="function"&&o.validate(),!i&&"checkValidity"in o&&typeof o.checkValidity=="function"&&!o.checkValidity()&&(i=o);return i?((n??i).scrollIntoView({behavior:y(),block:"center"}),typeof i.focus=="function"&&i.focus(),!1):!0}reset(){this._form.reset()}submit(){this._form.requestSubmit()}handleSubmit(t){if(this.method==="dialog"){t.preventDefault(),this.dispatchEvent(new CustomEvent("closeDialog",{detail:{},bubbles:!0,composed:!0}));return}let e=this.novalidate;const i=t.submitter;if(i&&(i.formNoValidate&&(e=!0),i.closest?.("esp-button")?.hasAttribute("formnovalidate")&&(e=!0)),!e&&!this.reportValidity()){t.preventDefault();return}if(this.useFetch){t.preventDefault(),this.submitViaFetch(this._form);return}}handleKeyDown(t){if(t.key!=="Enter")return;let e=t.target;for(;e&&e!==this._form;){if(e.hasAttribute("submit-on-enter")){t.preventDefault(),this._form.requestSubmit();return}e=e.parentElement}}async submitViaFetch(t){const e=new FormData(t),i=new CustomEvent("esp-submit",{detail:{formData:e,form:t},bubbles:!0,cancelable:!0});if(!this.dispatchEvent(i))return;const n=this.action||window.location.href,s=(this.method||"POST").toUpperCase();let o;const r={};if(s!=="GET")if(this.useJson){const c={};e.forEach((f,u)=>{c[u]=f}),o=JSON.stringify(c),r["Content-Type"]="application/json"}else o=e;try{const c=await fetch(n,{method:s,body:o,headers:r});this.dispatchEvent(new CustomEvent("esp-submit-response",{detail:{response:c,ok:c.ok},bubbles:!0}))}catch(c){this.dispatchEvent(new CustomEvent("esp-submit-error",{detail:{error:c},bubbles:!0}))}}};l([h({type:String})],a.prototype,"action",void 0),l([h({type:String})],a.prototype,"method",void 0),l([h({type:Boolean})],a.prototype,"novalidate",void 0),l([h({attribute:"use-fetch",type:Boolean})],a.prototype,"useFetch",void 0),l([h({attribute:"use-json",type:Boolean})],a.prototype,"useJson",void 0),l([h({type:String})],a.prototype,"enctype",void 0),l([h({type:String})],a.prototype,"label",void 0),a=l([b("esp-form")],a);export{a as EspalierForm};
+var l=function(f,t,e,i){var n=arguments.length,s=n<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(f,t,e,i);else for(var r=f.length-1;r>=0;r--)(o=f[r])&&(s=(n<3?o(s):n>3?o(t,e,s):o(t,e))||s);return n>3&&s&&Object.defineProperty(t,e,s),s};import{LitElement as m,html as b}from"lit";import{customElement as y,property as h}from"lit/decorators.js";import{scrollBehavior as v}from"../shared/viewport.js";import{ESP_EVENTS as p}from"../shared/events.js";let a=class extends m{constructor(){super(),this._formReady=!1,this.action="",this.method="post",this.novalidate=!1,this.useFetch=!1,this.useJson=!1,this.enctype="application/x-www-form-urlencoded",this.label="",this._form=document.createElement("form"),this._form.noValidate=!0,this._form.addEventListener("submit",t=>this.handleSubmit(t)),this._form.addEventListener("keydown",t=>this.handleKeyDown(t))}createRenderRoot(){return this}connectedCallback(){if(!this._formReady){for(this._formReady=!0;this.firstChild;)this._form.appendChild(this.firstChild);this.appendChild(this._form)}super.connectedCallback()}render(){return this.syncFormAttributes(),b``}syncFormAttributes(){const t=this._form;this.action?t.action=this.action:t.removeAttribute("action"),t.method=this.method,t.enctype=this.enctype,this.label?t.setAttribute("aria-label",this.label):t.removeAttribute("aria-label")}firstUpdated(){this._form.parentElement||this.appendChild(this._form)}updated(t){super.updated(t),this._form.parentElement||this.appendChild(this._form)}checkValidity(){return this._form.checkValidity()}reportValidity(){const t=this._form,e=Array.from(t.querySelectorAll("esp-form-item"));let i=null,n=null;for(const o of e){const r=o.querySelector("[name], esp-input, esp-textarea, esp-pick-one, esp-pick-some, esp-checkbox, esp-checkbox-group, esp-radio-button-group, esp-date-picker, esp-color-picker");r&&("validate"in r&&typeof r.validate=="function"&&r.validate(),"checkValidity"in r&&typeof r.checkValidity=="function"&&!r.checkValidity()&&(i||(i=r,n=o)))}for(const o of Array.from(t.elements))"validate"in o&&typeof o.validate=="function"&&o.validate(),!i&&"checkValidity"in o&&typeof o.checkValidity=="function"&&!o.checkValidity()&&(i=o);return i?((n??i).scrollIntoView({behavior:v(),block:"center"}),typeof i.focus=="function"&&i.focus(),!1):!0}reset(){this._form.reset()}submit(){this._form.requestSubmit()}handleSubmit(t){if(this.method==="dialog"){t.preventDefault(),this.dispatchEvent(new CustomEvent(p.FORM_DIALOG_CLOSE_REQUESTED,{detail:{},bubbles:!0,composed:!0}));return}let e=this.novalidate;const i=t.submitter;if(i&&(i.formNoValidate&&(e=!0),i.closest?.("esp-button")?.hasAttribute("formnovalidate")&&(e=!0)),!e&&!this.reportValidity()){t.preventDefault();return}if(this.useFetch){t.preventDefault(),this.submitViaFetch(this._form);return}}handleKeyDown(t){if(t.key!=="Enter")return;let e=t.target;for(;e&&e!==this._form;){if(e.hasAttribute("submit-on-enter")){t.preventDefault(),this._form.requestSubmit();return}e=e.parentElement}}async submitViaFetch(t){const e=new FormData(t),i=new CustomEvent(p.FORM_SUBMIT,{detail:{formData:e,form:t},bubbles:!0,cancelable:!0});if(!this.dispatchEvent(i))return;const n=this.action||window.location.href,s=(this.method||"POST").toUpperCase();let o;const r={};if(s!=="GET")if(this.useJson){const c={};e.forEach((u,d)=>{c[d]=u}),o=JSON.stringify(c),r["Content-Type"]="application/json"}else o=e;try{const c=await fetch(n,{method:s,body:o,headers:r});this.dispatchEvent(new CustomEvent(p.FORM_SUBMIT_RESPONSE,{detail:{response:c,ok:c.ok},bubbles:!0}))}catch(c){this.dispatchEvent(new CustomEvent(p.FORM_SUBMIT_ERROR,{detail:{error:c},bubbles:!0}))}}};l([h({type:String})],a.prototype,"action",void 0),l([h({type:String})],a.prototype,"method",void 0),l([h({type:Boolean})],a.prototype,"novalidate",void 0),l([h({attribute:"use-fetch",type:Boolean})],a.prototype,"useFetch",void 0),l([h({attribute:"use-json",type:Boolean})],a.prototype,"useJson",void 0),l([h({type:String})],a.prototype,"enctype",void 0),l([h({type:String})],a.prototype,"label",void 0),a=l([y("esp-form")],a);export{a as EspalierForm};

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

@@ -13,10 +13,10 @@ export type GridClickedEvent = {
     event: string;
     data: GridRow;
 };
-export declare const GRID_LOAD_START_EVENT = "esp-grid-load-start";
-export declare const GRID_LOAD_SUCCESS_EVENT = "esp-grid-load-success";
-export declare const GRID_LOAD_ERROR_EVENT = "esp-grid-load-error";
-export declare const GRID_ITEMS_CHANGED_EVENT = "esp-grid-items-changed";
+export declare const GRID_LOAD_START_EVENT: "esp-grid-load-start";
+export declare const GRID_LOAD_SUCCESS_EVENT: "esp-grid-load-success";
+export declare const GRID_LOAD_ERROR_EVENT: "esp-grid-load-error";
+export declare const GRID_ITEMS_CHANGED_EVENT: "esp-grid-items-changed";
 /**
  * Parameters passed to the `fetchPage` callback when the grid
  * is in cursor-based infinite scroll mode.
@@ -99,7 +99,7 @@ export type GridLoadErrorEventDetail<T = GridRow> = GridDataStateEventDetail<T>
  * </esp-grid>
  * <script>
  *   const theGrid = findByTagName("esp-grid")[0];
- *   theGrid.addEventListener("grid-event", (event) => {
+ *   theGrid.addEventListener("esp-grid-event", (event) => {
  *     showToast({
  *       message: `${event.detail.event} for ${event.detail.data.first_name} ${event.detail.data.last_name}.`,
  *       icon: "info-i",
@@ -136,7 +136,7 @@ export type GridLoadErrorEventDetail<T = GridRow> = GridDataStateEventDetail<T>
  * </esp-grid>
  * <script>
  *   const theGrid = findByTagName("esp-grid")[0];
- *   theGrid.addEventListener("grid-event", (event) => {
+ *   theGrid.addEventListener("esp-grid-event", (event) => {
  *     showToast({
  *       message: `You clicked on ${event.detail.data.first_name} ${event.detail.data.last_name}.`,
  *       icon: "info-i",
@@ -228,7 +228,7 @@ export type GridLoadErrorEventDetail<T = GridRow> = GridDataStateEventDetail<T>
  *     items: currentData,
  *     nextCursor: null,
  *   });
- *   btn.addEventListener("clicked", () => {
+ *   btn.addEventListener("esp-clicked", () => {
  *     currentData = currentData === oneItem ? tenItems : oneItem;
  *     btn.label = currentData === oneItem ? "Load more" : "Load less";
  *     theGrid.reload();
@@ -318,7 +318,7 @@ export type GridLoadErrorEventDetail<T = GridRow> = GridDataStateEventDetail<T>
  * </esp-grid>
  * ```
  *
- * @event {CustomEvent<GridClickedEvent>} grid-event - The
+ * @event {CustomEvent<GridClickedEvent>} esp-grid-event - The
  * grid listens for click events, and if a child element has a `grid-event`
  * attribute, grid publishes an event with the grid, clicked element, and
  * associated data.
@@ -462,7 +462,7 @@ export declare class EspalierGrid extends EspalierElementBase {
      * <script>
      *   const thePage = document.getElementsByTagName("esp-page")[0];
      *   const theGrid = findByTagName("esp-grid")[0];
-     *   theGrid.addEventListener("grid-event", (event) => {
+     *   theGrid.addEventListener("esp-grid-event", (event) => {
      *     if(event.detail.event === "trash-button-clicked") {
      *       theGrid.delete(item => item.id === event.detail.data.id);
      *     }
@@ -492,7 +492,7 @@ export declare class EspalierGrid extends EspalierElementBase {
      * <script>
      *   const thePage = document.getElementsByTagName("esp-page")[0];
      *   const theGrid = findByTagName("esp-grid")[0];
-     *   theGrid.addEventListener("grid-event", (event) => {
+     *   theGrid.addEventListener("esp-grid-event", (event) => {
      *     if(event.detail.event === "replace-button-clicked") {
      *       const newObject = { ...event.detail.data, first_name: "Replaced", last_name: "User" };
      *       theGrid.addOrReplace(item => item.id === event.detail.data.id, newObject);