@taprootio/espalier 2.1.3 → 2.2.0

package/dist/page/esp-page.js

@@ -1,5 +1,5 @@
-var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,s):r,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(n,e,s,r);else for(var l=n.length-1;l>=0;l--)(p=n[l])&&(a=(d<3?p(a):d>3?p(e,s,a):p(e,s))||a);return d>3&&a&&Object.defineProperty(e,s,a),a};import{css as g,html as f}from"lit";import{customElement as u,property as i}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{createRef as v,ref as w}from"lit/directives/ref.js";import{EspalierElementBase as h}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as c}from"./bi-directional-sticky-controller.js";import{getEspBus as b}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";let t=class extends h{constructor(){super(),this.dialogZone=v(),this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,new c(this,".esp-page-left > .sticky-wrapper"),new c(this,".esp-page-right > .sticky-wrapper")}AddDialog(e){this.dialogZone.value?.appendChild(e)}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&b().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"})}render(){const e=this.fixedMenus||this.headerPosition==="fixed",s=!e&&this.headerPosition==="sticky";return f`
-      <div part="wrapper" class="esp-page ${m({"fixed-menus":e,"fixed-header":e,"sticky-header":s})}">
+var d=function(h,e,s,o){var n=arguments.length,a=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,s):o,t;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(h,e,s,o);else for(var r=h.length-1;r>=0;r--)(t=h[r])&&(a=(n<3?t(a):n>3?t(e,s,a):t(e,s))||a);return n>3&&a&&Object.defineProperty(e,s,a),a};import{css as f,html as m}from"lit";import{customElement as v,property as l}from"lit/decorators.js";import{classMap as y}from"lit/directives/class-map.js";import{createRef as c,ref as u}from"lit/directives/ref.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as p}from"./bi-directional-sticky-controller.js";import{getEspBus as w}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";let i=class extends g{constructor(){super(),this.dialogZone=c(),this.flyoutSlot=c(),this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,new p(this,".esp-page-left > .sticky-wrapper"),new p(this,".esp-page-right > .sticky-wrapper"),new p(this,".esp-page-flyout > .sticky-wrapper"),this.addEventListener("flyout-state-changed",e=>this.syncFlyoutState(e))}syncFlyoutState(e){if(e&&e.target?.closest?.("esp-page")!==this)return;const s=t=>{const r=t.mode;return(typeof r=="string"?r:t.getAttribute("mode"))==="overlay"},o=t=>{const r=t.open;return typeof r=="boolean"?r:t.hasAttribute("open")},n=t=>t.anchor!=null,a=(this.flyoutSlot.value?.assignedElements()??[]).filter(t=>t.tagName==="ESP-FLYOUT");this.toggleAttribute("flyout-open",a.some(t=>o(t)&&!s(t))),this.toggleAttribute("flyout-overlay-open",a.some(t=>o(t)&&s(t))),this.toggleAttribute("flyout-anchored",a.some(t=>o(t)&&n(t)))}AddDialog(e){this.dialogZone.value?.appendChild(e)}firstUpdated(e){super.firstUpdated(e),this.syncFlyoutState()}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&w().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"})}render(){const e=this.fixedMenus||this.headerPosition==="fixed",s=!e&&this.headerPosition==="sticky";return m`
+      <div part="wrapper" class="esp-page ${y({"fixed-menus":e,"fixed-header":e,"sticky-header":s})}">
         <div part="canvas" class="esp-page-canvas esp-page-canvas--left" aria-hidden="true"></div>
         <div part="canvas" class="esp-page-canvas esp-page-canvas--right" aria-hidden="true"></div>
         <div part="surface" class="esp-page-surface" aria-hidden="true"></div>
@@ -19,20 +19,40 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
             <slot name="right"></slot>
           </div>
         </aside>
+        <div class="esp-page-flyout">
+          <div class="sticky-wrapper">
+            <slot
+              name="flyout"
+              ${u(this.flyoutSlot)}
+              @slotchange=${()=>this.syncFlyoutState()}
+            ></slot>
+          </div>
+        </div>
         <footer>
           <slot name="footer"></slot>
         </footer>
-        <div id="dialog-drop-zone" ${w(this.dialogZone)}></div>
+        <div id="dialog-drop-zone" ${u(this.dialogZone)}></div>
         <esp-toaster></esp-toaster>
       </div>
-    `}};t.styles=[...h.styles,g`
+    `}};i.styles=[...g.styles,f`
       :host {
         --_esp-page-resolved-max-width: var(--esp-page-max-width, 1536px);
         
         --_esp-page-main-track: minmax(0, var(--_esp-page-resolved-max-width));
         
-        --_esp-page-gutter-left: 0;
+        --_esp-page-gutter-left: 0fr;
         --_esp-page-gutter-right: 1fr;
+        
+        --_esp-page-flyout-min: 0px;
+        
+        --_esp-page-surface-edge-shadow: 0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow);
+        
+        --_esp-page-surface-shadow: var(
+          --esp-page-surface-shadow,
+          -0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow),
+          var(--_esp-page-surface-edge-shadow)
+        );
+        --_esp-page-surface-border: var(--esp-page-surface-border, none);
         --_esp-page-fixed-header-offset: var(
           --esp-page-fixed-header-offset,
           var(--esp-header-height, calc(4.5 * var(--esp-size-small)))
@@ -52,15 +72,42 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
 
       :host([align="end"]) {
         --_esp-page-gutter-left: 1fr;
-        --_esp-page-gutter-right: 0;
+        --_esp-page-gutter-right: 0fr;
       }
 
       
       :host([kind="full"]) {
         --_esp-page-resolved-max-width: var(--esp-page-max-width, none);
         --_esp-page-main-track: 1fr;
-        --_esp-page-gutter-left: 0;
-        --_esp-page-gutter-right: 0;
+        --_esp-page-gutter-left: 0fr;
+        --_esp-page-gutter-right: 0fr;
+      }
+
+      
+      :host([flyout-open]) {
+        --_esp-page-flyout-min: var(--esp-page-flyout-width, 20rem);
+      }
+
+      
+      @media (max-width: 50em) {
+        :host([flyout-open]) {
+          --_esp-page-flyout-min: 0px;
+        }
+      }
+
+      
+      :host([flyout-overlay-open]) .esp-page > div.esp-page-flyout {
+        z-index: var(--esp-flyout-z-index, 3000);
+      }
+
+      
+      :host([flyout-anchored]) .esp-page > div.esp-page-flyout > .sticky-wrapper {
+        position: static;
+      }
+
+      
+      slot[name="flyout"]::slotted(esp-flyout[match-surface]) {
+        --esp-flyout-shadow: var(--_esp-page-surface-edge-shadow);
       }
 
       
@@ -116,8 +163,13 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
           [canvas-left-end surface-start left-start] min-content
           [left-end main-start] var(--_esp-page-main-track)
           [main-end right-start] min-content
-          [right-end surface-end canvas-right-start] var(--_esp-page-gutter-right)
-          [canvas-right-end full-end];
+          [right-end surface-end canvas-right-start flyout-start] minmax(
+            var(--_esp-page-flyout-min),
+            var(--_esp-page-gutter-right)
+          )
+          [flyout-end canvas-right-end full-end];
+        
+        transition: grid-template-columns 0.25s ease;
         grid-template-rows:
           [top-start] min-content
           [top-end content-start] 1fr
@@ -173,6 +225,8 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
           position: relative;
           overflow: hidden;
           
+          background: var(--esp-page-main-background, transparent);
+          
           contain: inline-size;
         }
 
@@ -181,6 +235,21 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
         }
 
         
+        > div.esp-page-flyout {
+          
+          grid-column: flyout;
+          justify-self: start;
+          grid-row: content;
+          z-index: 5;
+          position: relative;
+
+          
+          @media (max-width: 50em) {
+            z-index: var(--esp-flyout-z-index, 3000);
+          }
+        }
+
+        
         > .esp-page-canvas {
           
           grid-row: top-start / footer-end;
@@ -204,6 +273,7 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
         }
 
         > .esp-page-canvas--right {
+          
           grid-column: canvas-right;
         }
 
@@ -214,12 +284,8 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
           grid-row: top-start / footer-end;
           z-index: 2;
           pointer-events: none;
-          box-shadow: var(
-            --esp-page-surface-shadow,
-            -0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow),
-            0.75rem 0 1.5rem -0.75rem var(--esp-color-shadow)
-          );
-          border-inline: var(--esp-page-surface-border, none);
+          box-shadow: var(--_esp-page-surface-shadow);
+          border-inline: var(--_esp-page-surface-border);
         }
 
         
@@ -270,6 +336,7 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
           > div.esp-page-main,
           > aside.esp-page-left,
           > aside.esp-page-right,
+          > div.esp-page-flyout,
           > .esp-page-surface,
           > .esp-page-canvas {
             margin-top: var(--_esp-page-fixed-header-offset);
@@ -299,4 +366,10 @@ var o=function(n,e,s,r){var d=arguments.length,a=d<3?e:r===null?r=Object.getOwnP
       .esp-page:has(esp-dialog[is-open="true"]) {
         overflow: hidden;
       }
-    `],o([i({reflect:!0})],t.prototype,"kind",void 0),o([i({reflect:!0})],t.prototype,"align",void 0),o([i({type:Boolean,reflect:!0})],t.prototype,"contained",void 0),o([i({attribute:"header-position",reflect:!0})],t.prototype,"headerPosition",void 0),o([i({attribute:"fixed-menus",type:Boolean,reflect:!0})],t.prototype,"fixedMenus",void 0),t=o([u("esp-page")],t);export{t as EspalierPage};
+
+      @media (prefers-reduced-motion: reduce) {
+        .esp-page {
+          transition: none;
+        }
+      }
+    `],d([l({reflect:!0})],i.prototype,"kind",void 0),d([l({reflect:!0})],i.prototype,"align",void 0),d([l({type:Boolean,reflect:!0})],i.prototype,"contained",void 0),d([l({attribute:"header-position",reflect:!0})],i.prototype,"headerPosition",void 0),d([l({attribute:"fixed-menus",type:Boolean,reflect:!0})],i.prototype,"fixedMenus",void 0),i=d([v("esp-page")],i);export{i as EspalierPage};

package/dist/shared/bus-events.d.ts

@@ -24,6 +24,7 @@
  */
 import { EspBus } from "./esp-bus.js";
 import type { ToastConfig } from "./toast-events.js";
+import type { FlyoutConfig } from "./flyout-events.js";
 /**
  * Contract for elements that provide a seed color to their subtree.
  * Implemented by `EspalierRoot` (the global provider) and
@@ -91,6 +92,22 @@ export interface SchemeEvents {
 export interface ToastEvents {
     "show-toast": ToastConfig;
 }
+/**
+ * Flyout surface events.
+ *
+ * Published by the `showFlyout()` / `closeFlyout()` helpers and
+ * subscribed to by `<esp-flyout>`. This is how components that
+ * cannot know where the flyout lives (form items, help buttons,
+ * dialog content) request the page's flyout surface.
+ *
+ * @docUrl /api/flyout-events
+ * @menuGroup Bus Events
+ * @menuLabel FlyoutEvents
+ */
+export interface FlyoutEvents {
+    "show-flyout": FlyoutConfig;
+    "close-flyout": Record<string, never>;
+}
 /**
  * Cross-popover coordination events.
  *
@@ -157,7 +174,7 @@ export interface PageEventMap {
  * @menuGroup Bus Events
  * @menuLabel EspBusEventMap
  */
-export type EspBusEventMap = SchemeEvents & ToastEvents & PopoverEvents & SizeEvents & PageEventMap;
+export type EspBusEventMap = SchemeEvents & ToastEvents & FlyoutEvents & PopoverEvents & SizeEvents & PageEventMap;
 /**
  * Typed accessor for the singleton bus.
  *

package/dist/shared/events.d.ts

@@ -26,10 +26,12 @@ export { type GridClickedEvent, type GridDataStateEventDetail, type GridItemsCha
 export { type DestroyEspalierInfo } from "../info/esp-info.js";
 export { type ValidityChangedDetail, type ValidationError, VALIDITY_CHANGED_EVENT, } from "./validation.js";
 export { type ToastConfig } from "./toast-events.js";
+export { type FlyoutConfig, type FlyoutCloseReason } from "./flyout-events.js";
 export { type PickerItem } from "../pickers/esp-picker-item.js";
 export { type EspalierUploadImage } from "../image-upload/image-helpers.js";
 export { type FontPickerValueChangedDetail, type GoogleFont, type WebSafeFont, } from "../font-picker/esp-font-picker.js";
 import type { EspalierDetails } from "../details/esp-details.js";
+import type { FlyoutCloseReason } from "./flyout-events.js";
 import type { ValidityChangedDetail } from "./validation.js";
 import type { GridClickedEvent, GridItemsChangedEventDetail, GridLoadErrorEventDetail, GridLoadStartEventDetail, GridLoadSuccessEventDetail } from "../grid/esp-grid.js";
 import type { DestroyEspalierInfo } from "../info/esp-info.js";
@@ -63,6 +65,9 @@ export declare const ESP_EVENTS: {
     readonly ESP_ACCORDION_CHANGE: "esp-accordion-change";
     readonly DRAWER_OPENED: "drawer-opened";
     readonly DRAWER_CLOSED: "drawer-closed";
+    readonly FLYOUT_OPENED: "flyout-opened";
+    readonly FLYOUT_CLOSED: "flyout-closed";
+    readonly FLYOUT_STATE_CHANGED: "flyout-state-changed";
     readonly POPOVER_OPENED: "popover-opened";
     readonly POPOVER_CLOSED: "popover-closed";
     readonly GRID_EVENT: "grid-event";
@@ -267,6 +272,14 @@ export interface EspalierMenuEventMap {
     [ESP_EVENTS.DRAWER_OPENED]: CustomEvent<void>;
     [ESP_EVENTS.DRAWER_CLOSED]: CustomEvent<void>;
 }
+/** Events fired by `<esp-flyout>`. */
+export interface EspalierFlyoutEventMap {
+    [ESP_EVENTS.FLYOUT_OPENED]: CustomEvent<Record<string, never>>;
+    [ESP_EVENTS.FLYOUT_CLOSED]: CustomEvent<{
+        reason: FlyoutCloseReason;
+    }>;
+    [ESP_EVENTS.FLYOUT_STATE_CHANGED]: CustomEvent<Record<string, never>>;
+}
 /** Events fired by `<esp-header-button>`. */
 export interface EspalierHeaderButtonEventMap {
     [ESP_EVENTS.CLICKED]: CustomEvent<Record<string, never>>;

package/dist/shared/events.js

@@ -1 +1 @@
-import{VALIDITY_CHANGED_EVENT as r}from"./validation.js";const e={VALUE_CHANGED:"value-changed",VALIDITY_CHANGED:"validity-changed",CLICKED:"clicked",ESP_SUBMIT:"esp-submit",ESP_SUBMIT_RESPONSE:"esp-submit-response",ESP_SUBMIT_ERROR:"esp-submit-error",ESP_TAB_CHANGED:"esp-tab-changed",ESP_TAB_UPDATED:"esp-tab-updated",ESP_TOGGLE:"esp-toggle",ESP_ACCORDION_CHANGE:"esp-accordion-change",DRAWER_OPENED:"drawer-opened",DRAWER_CLOSED:"drawer-closed",POPOVER_OPENED:"popover-opened",POPOVER_CLOSED:"popover-closed",GRID_EVENT:"grid-event",GRID_LOAD_START:"esp-grid-load-start",GRID_LOAD_SUCCESS:"esp-grid-load-success",GRID_LOAD_ERROR:"esp-grid-load-error",GRID_ITEMS_CHANGED:"esp-grid-items-changed",DESTROY:"destroy",FILE_SELECTED:"file-selected",FILE_REMOVED:"file-removed",FILES_SELECTED:"files-selected",FILES_REJECTED:"files-rejected",UPLOAD_RETRY:"upload-retry",RETRY_UPLOAD:"retry-upload",IMAGES_REORDERED:"images-reordered",SEARCH_REQUESTED:"search-requested",RESULT_SELECTED:"result-selected",SEARCH_CLOSED:"search-closed",SELECTION_CHANGED:"selection-changed",CLOSE_MENU:"close-menu",REMOVE_IMAGE:"remove-image"};export{e as ESP_EVENTS,r as VALIDITY_CHANGED_EVENT};
+import{VALIDITY_CHANGED_EVENT as D}from"./validation.js";const e={VALUE_CHANGED:"value-changed",VALIDITY_CHANGED:"validity-changed",CLICKED:"clicked",ESP_SUBMIT:"esp-submit",ESP_SUBMIT_RESPONSE:"esp-submit-response",ESP_SUBMIT_ERROR:"esp-submit-error",ESP_TAB_CHANGED:"esp-tab-changed",ESP_TAB_UPDATED:"esp-tab-updated",ESP_TOGGLE:"esp-toggle",ESP_ACCORDION_CHANGE:"esp-accordion-change",DRAWER_OPENED:"drawer-opened",DRAWER_CLOSED:"drawer-closed",FLYOUT_OPENED:"flyout-opened",FLYOUT_CLOSED:"flyout-closed",FLYOUT_STATE_CHANGED:"flyout-state-changed",POPOVER_OPENED:"popover-opened",POPOVER_CLOSED:"popover-closed",GRID_EVENT:"grid-event",GRID_LOAD_START:"esp-grid-load-start",GRID_LOAD_SUCCESS:"esp-grid-load-success",GRID_LOAD_ERROR:"esp-grid-load-error",GRID_ITEMS_CHANGED:"esp-grid-items-changed",DESTROY:"destroy",FILE_SELECTED:"file-selected",FILE_REMOVED:"file-removed",FILES_SELECTED:"files-selected",FILES_REJECTED:"files-rejected",UPLOAD_RETRY:"upload-retry",RETRY_UPLOAD:"retry-upload",IMAGES_REORDERED:"images-reordered",SEARCH_REQUESTED:"search-requested",RESULT_SELECTED:"result-selected",SEARCH_CLOSED:"search-closed",SELECTION_CHANGED:"selection-changed",CLOSE_MENU:"close-menu",REMOVE_IMAGE:"remove-image"};export{e as ESP_EVENTS,D as VALIDITY_CHANGED_EVENT};

package/dist/shared/flyout-events.d.ts

@@ -0,0 +1,87 @@
+/**
+ * The reason a flyout closed, carried on the `flyout-closed`
+ * event detail.
+ *
+ * - `"escape"` — the user pressed the Escape key
+ * - `"vellum"` — the user clicked the overlay-mode backdrop
+ * - `"button"` — the user clicked the flyout's close button
+ * - `"programmatic"` — `close()` was called from code (including
+ *   the `"close-flyout"` bus event)
+ *
+ * @docUrl /api/flyout-close-reason
+ * @menuGroup Event Details
+ * @menuLabel FlyoutCloseReason
+ */
+export type FlyoutCloseReason = "escape" | "vellum" | "button" | "programmatic";
+/**
+ * Configuration for opening a flyout via {@link showFlyout}.
+ *
+ * @docUrl /api/flyout-config
+ * @menuGroup Configuration
+ * @menuLabel FlyoutConfig
+ */
+export type FlyoutConfig = {
+    /**
+     * Heading text shown in the flyout's header. Also becomes the
+     * flyout's accessible name unless an `aria-label` was set by
+     * the author. When omitted, the flyout keeps its current
+     * heading.
+     */
+    heading?: string | undefined;
+    /**
+     * Content to show. A string is rendered as plain text; pass a
+     * `Node` (element or fragment) for rich content. The flyout's
+     * existing light-DOM children are **replaced** — a second
+     * `showFlyout` swaps content in place, it never stacks. When
+     * omitted, the flyout opens with whatever content it already
+     * has (e.g. declaratively slotted markup).
+     */
+    content?: string | Node | undefined;
+    /**
+     * Triggering element whose block-start edge the in-grid flyout
+     * should align with. The flyout stays in the page's normal scroll
+     * flow, shifting upward only while needed to fit the visible
+     * scrollport. Content taller than that scrollport scrolls inside the
+     * panel. Overlay drawers ignore this geometry and remain
+     * viewport-fixed. When omitted, the flyout starts at the top of the
+     * page's content row.
+     */
+    anchor?: HTMLElement | undefined;
+    /**
+     * Element to return focus to when the flyout closes — pass the
+     * triggering control. In the in-grid modes (where opening never
+     * moves focus) it is focused only if focus is inside the panel at
+     * close; in the overlay-drawer mode (a modal, which does move focus
+     * in) it overrides the automatic restore-to-opener.
+     */
+    returnFocusTo?: HTMLElement | undefined;
+};
+/**
+ * Open the page's flyout surface. Publishes a `"show-flyout"`
+ * event on `EspBus` which is picked up by `<esp-flyout>`.
+ *
+ * ```ts
+ * import { showFlyout } from "@taprootio/espalier";
+ *
+ * showFlyout({ heading: "Details", content: detailsFragment });
+ * ```
+ *
+ * If no `<esp-flyout>` is connected, the event goes unserviced —
+ * callers that need a fallback (e.g. opening a URL in a new tab)
+ * should check for a connected flyout themselves.
+ *
+ * @param config - Flyout configuration.
+ * @docUrl /api/show-flyout
+ * @menuGroup Functions
+ * @menuLabel showFlyout
+ */
+export declare function showFlyout(config?: FlyoutConfig): void;
+/**
+ * Close the page's flyout surface. Publishes a `"close-flyout"`
+ * event on `EspBus`.
+ *
+ * @docUrl /api/close-flyout
+ * @menuGroup Functions
+ * @menuLabel closeFlyout
+ */
+export declare function closeFlyout(): void;

package/dist/shared/flyout-events.js

@@ -0,0 +1 @@
+import{getEspBus as o}from"./bus-events.js";function l(t={}){o().publish("show-flyout",t)}function s(){o().publish("close-flyout",{})}export{s as closeFlyout,l as showFlyout};

package/dist/shared/overlay-controller.js

@@ -1 +1 @@
-const l=['a[href]:not([disabled]):not([tabindex="-1"])','button:not([disabled]):not([tabindex="-1"])','input:not([disabled]):not([tabindex="-1"])','select:not([disabled]):not([tabindex="-1"])','textarea:not([disabled]):not([tabindex="-1"])','[tabindex]:not([tabindex="-1"]):not([disabled])'].join(", "),a="[autofocus]:not([disabled])";class o{static lock(){o._count===0&&(o._savedOverflow=document.body.style.overflow,document.body.style.overflow="hidden"),o._count++}static unlock(){o._count<=0||(o._count--,o._count===0&&(document.body.style.overflow=o._savedOverflow??"",o._savedOverflow=null))}static _reset(){o._count=0,o._savedOverflow=null}}o._count=0,o._savedOverflow=null;function f(){o._reset()}class r{static lock(t){const e=r._counts.get(t);return e!==void 0?(r._counts.set(t,e+1),!0):t.inert?!1:(r._counts.set(t,1),t.inert=!0,!0)}static unlock(t){const e=r._counts.get(t)??0;if(e<=0)return;const s=e-1;s===0?(t.inert=!1,r._counts.delete(t)):r._counts.set(t,s)}static _reset(){r._counts.clear()}}r._counts=new Map;function d(){r._reset()}class _{get isPromoting(){return this._promoting}constructor(t){this._isOpen=!1,this._previouslyFocused=null,this._inertElements=[],this._promoted=!1,this._dropZone=null,this._promoting=!1,this._host=t.host,this._opts=t,t.host.addController(this)}get isOpen(){return this._isOpen}open(){this._isOpen||(this._previouslyFocused=document.activeElement??null,this._isOpen=!0,o.lock(),this._promoteToDropZone(),this._setInert(!0))}close(){this._isOpen&&(this._isOpen=!1,o.unlock(),this._setInert(!1),this._previouslyFocused?.focus(),this._previouslyFocused=null)}trapFocus(t){const e=this.getFocusableElements();if(e.length===0)return;const s=e[0],n=e[e.length-1],i=this._getDeepActiveElement();t.shiftKey?(i===s||this._isOrContains(s,i))&&(t.preventDefault(),n.focus()):(i===n||this._isOrContains(n,i))&&(t.preventDefault(),s.focus())}moveFocusInto(){const t=this._getAutofocusElement();if(t&&(t.focus(),this._autofocusLanded(t)))return;const e=this.getFocusableElements();if(e.length>0){e[0].focus();return}const s=this._opts.getFocusFallback?.();if(s){s.focus();return}this._opts.getFocusTrapContainer()?.focus()}_getAutofocusElement(){return this._getMatchingElements(a)[0]??null}getFocusableElements(){return this._getMatchingElements(l)}_getMatchingElements(t){const e=this._opts.getFocusTrapContainer();if(!e)return[];const s=[];for(const n of Array.from(e.querySelectorAll("*")))if(n instanceof HTMLElement){if(n.matches(t)&&s.push(n),n.shadowRoot){const i=n.shadowRoot.querySelectorAll(t);s.push(...Array.from(i))}if(n instanceof HTMLSlotElement)for(const i of n.assignedElements({flatten:!0})){if(!(i instanceof HTMLElement))continue;i.matches(t)&&s.push(i);const u=i.querySelectorAll(t);if(s.push(...Array.from(u)),i.shadowRoot){const c=i.shadowRoot.querySelectorAll(t);s.push(...Array.from(c))}}}for(const n of Array.from(this._host.children)){if(!(n instanceof HTMLElement))continue;n.matches(t)&&(s.includes(n)||s.push(n));const i=n.querySelectorAll(t);for(const u of Array.from(i))s.includes(u)||s.push(u);if(n.shadowRoot){const u=n.shadowRoot.querySelectorAll(t);for(const c of Array.from(u))s.includes(c)||s.push(c)}}return s}hostConnected(){}hostDisconnected(){this._promoting||this._isOpen&&(this._setInert(!1),o.unlock(),this._isOpen=!1)}_setInert(t){if(t){this._inertElements=[];const e=this._resolveInertAnchor(),s=e.parentElement??document.body;for(const n of s.children)n instanceof HTMLElement&&n!==e&&r.lock(n)&&this._inertElements.push(n)}else{for(const e of this._inertElements)r.unlock(e);this._inertElements=[]}}_resolveInertAnchor(){if(this._dropZone)return this._dropZone;let t=this._host;for(;!t.parentElement;){const e=t.getRootNode();if(e instanceof ShadowRoot&&e.host instanceof HTMLElement)t=e.host;else break}return t}_getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}_isOrContains(t,e){return e?t===e?!0:t.contains(e):!1}_autofocusLanded(t){const e=this._getActiveElementChain(),s=e[0];return e.some(n=>this._isOrContains(t,n)?!0:n!==s&&n instanceof HTMLElement&&this._isOrContains(n,t))}_getActiveElementChain(){const t=[];let e=document.activeElement;for(;e;){t.push(e);const s=e.shadowRoot?.activeElement??null;if(!s||s===e)break;e=s}return t}_promoteToDropZone(){if(this._promoted&&this._dropZone){this._promoting=!0;try{this._dropZone.appendChild(this._host)}finally{this._promoting=!1}return}const t=this._host,e=t.closest("esp-page");if(e){if(customElements.get("esp-page")){this._tryPromote(e);return}customElements.whenDefined("esp-page").then(()=>{if(!this._isOpen||!t.isConnected)return;const s=t.closest("esp-page");this._tryPromote(s)&&(this._setInert(!1),this._setInert(!0))})}}_tryPromote(t){if(!t||this._promoted)return!1;const e=t.AddDialog;if(typeof e=="function"){this._promoting=!0;try{e.call(t,this._host)}finally{this._promoting=!1}return this._promoted=!0,this._dropZone=this._host.parentElement,!0}return!1}}export{l as FOCUSABLE_SELECTOR,_ as OverlayController,d as _resetInertLock,f as _resetScrollLock};
+const c=['a[href]:not([disabled]):not([tabindex="-1"])','button:not([disabled]):not([tabindex="-1"])','input:not([disabled]):not([tabindex="-1"])','select:not([disabled]):not([tabindex="-1"])','textarea:not([disabled]):not([tabindex="-1"])','[tabindex]:not([tabindex="-1"]):not([disabled])'].join(", "),l="[autofocus]:not([disabled])";class o{static lock(){o._count===0&&(o._savedOverflow=document.body.style.overflow,document.body.style.overflow="hidden"),o._count++}static unlock(){o._count<=0||(o._count--,o._count===0&&(document.body.style.overflow=o._savedOverflow??"",o._savedOverflow=null))}static _reset(){o._count=0,o._savedOverflow=null}}o._count=0,o._savedOverflow=null;function f(){o._reset()}class r{static lock(t){const e=r._counts.get(t);return e!==void 0?(r._counts.set(t,e+1),!0):t.inert?!1:(r._counts.set(t,1),t.inert=!0,!0)}static unlock(t){const e=r._counts.get(t)??0;if(e<=0)return;const s=e-1;s===0?(t.inert=!1,r._counts.delete(t)):r._counts.set(t,s)}static _reset(){r._counts.clear()}}r._counts=new Map;function d(){r._reset()}class _{get isPromoting(){return this._promoting}constructor(t){this._isOpen=!1,this._previouslyFocused=null,this._inertElements=[],this._promoted=!1,this._pendingReactivation=!1,this._dropZone=null,this._promoting=!1,this._host=t.host,this._opts=t,t.host.addController(this)}get isOpen(){return this._isOpen}open(){this._isOpen||(this._pendingReactivation?this._pendingReactivation=!1:this._previouslyFocused=document.activeElement??null,this._isOpen=!0,o.lock(),this._opts.promote!==!1&&this._promoteToDropZone(),this._setInert(!0))}close(){if(this._pendingReactivation=!1,!this._isOpen){this._previouslyFocused?.focus(),this._previouslyFocused=null;return}this._isOpen=!1,o.unlock(),this._setInert(!1),this._previouslyFocused?.focus(),this._previouslyFocused=null}trapFocus(t){const e=this.getFocusableElements();if(e.length===0)return;const s=e[0],n=e[e.length-1],i=this._getDeepActiveElement();t.shiftKey?(i===s||this._isOrContains(s,i))&&(t.preventDefault(),n.focus()):(i===n||this._isOrContains(n,i))&&(t.preventDefault(),s.focus())}moveFocusInto(){const t=this._getAutofocusElement();if(t&&(t.focus(),this._autofocusLanded(t)))return;const e=this.getFocusableElements();if(e.length>0){e[0].focus();return}const s=this._opts.getFocusFallback?.();if(s){s.focus();return}this._opts.getFocusTrapContainer()?.focus()}_getAutofocusElement(){return this._getMatchingElements(l)[0]??null}getFocusableElements(){return this._getMatchingElements(c)}_getMatchingElements(t){const e=this._opts.getFocusTrapContainer();if(!e)return[];const s=[];for(const n of Array.from(e.querySelectorAll("*")))if(n instanceof HTMLElement){if(n.matches(t)&&s.push(n),n.shadowRoot){const i=n.shadowRoot.querySelectorAll(t);s.push(...Array.from(i))}if(n instanceof HTMLSlotElement)for(const i of n.assignedElements({flatten:!0})){if(!(i instanceof HTMLElement))continue;i.matches(t)&&s.push(i);const u=i.querySelectorAll(t);if(s.push(...Array.from(u)),i.shadowRoot){const a=i.shadowRoot.querySelectorAll(t);s.push(...Array.from(a))}}}for(const n of Array.from(this._host.children)){if(!(n instanceof HTMLElement))continue;n.matches(t)&&(s.includes(n)||s.push(n));const i=n.querySelectorAll(t);for(const u of Array.from(i))s.includes(u)||s.push(u);if(n.shadowRoot){const u=n.shadowRoot.querySelectorAll(t);for(const a of Array.from(u))s.includes(a)||s.push(a)}}return s}hostConnected(){}hostDisconnected(){this._promoting||this._isOpen&&(this._setInert(!1),o.unlock(),this._isOpen=!1,this._pendingReactivation=!0)}_setInert(t){if(t){this._inertElements=[];const e=this._resolveInertAnchor(),s=e.parentElement??document.body;for(const n of s.children)n instanceof HTMLElement&&n!==e&&r.lock(n)&&this._inertElements.push(n)}else{for(const e of this._inertElements)r.unlock(e);this._inertElements=[]}}_resolveInertAnchor(){if(this._dropZone)return this._dropZone;let t=this._host;for(;!t.parentElement;){const e=t.getRootNode();if(e instanceof ShadowRoot&&e.host instanceof HTMLElement)t=e.host;else break}return t}_getDeepActiveElement(){let t=document.activeElement;for(;t?.shadowRoot?.activeElement;)t=t.shadowRoot.activeElement;return t}_isOrContains(t,e){return e?t===e?!0:t.contains(e):!1}_autofocusLanded(t){const e=this._getActiveElementChain(),s=e[0];return e.some(n=>this._isOrContains(t,n)?!0:n!==s&&n instanceof HTMLElement&&this._isOrContains(n,t))}_getActiveElementChain(){const t=[];let e=document.activeElement;for(;e;){t.push(e);const s=e.shadowRoot?.activeElement??null;if(!s||s===e)break;e=s}return t}_promoteToDropZone(){if(this._promoted&&this._dropZone){this._promoting=!0;try{this._dropZone.appendChild(this._host)}finally{this._promoting=!1}return}const t=this._host,e=t.closest("esp-page");if(e){if(customElements.get("esp-page")){this._tryPromote(e);return}customElements.whenDefined("esp-page").then(()=>{if(!this._isOpen||!t.isConnected)return;const s=t.closest("esp-page");this._tryPromote(s)&&(this._setInert(!1),this._setInert(!0))})}}_tryPromote(t){if(!t||this._promoted)return!1;const e=t.AddDialog;if(typeof e=="function"){this._promoting=!0;try{e.call(t,this._host)}finally{this._promoting=!1}return this._promoted=!0,this._dropZone=this._host.parentElement,!0}return!1}}export{c as FOCUSABLE_SELECTOR,_ as OverlayController,d as _resetInertLock,f as _resetScrollLock};

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

@@ -5,6 +5,27 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * components. Place one `<esp-toaster>` in your page layout
  * (it is included automatically inside `<esp-page>`).
  *
+ * If more than one toaster is connected — for example a page that
+ * nests several `<esp-page>`s, each of which injects its own — all
+ * toasts live in one shared stack rendered by a single toaster, so
+ * each `showToast()` renders once, not once per toaster. The renderer
+ * is re-chosen whenever a toast arrives, a toaster connects or
+ * disconnects, or a toaster's size collapses or expands, preferring a
+ * **visible** instance, and the whole live stack migrates with it —
+ * a hidden toaster never swallows toasts, and the stack never
+ * fragments across instances. This needs no configuration.
+ *
+ * The migration timing contract: routing always skips instances
+ * hidden by `display`, `visibility`, `opacity: 0`, or
+ * `content-visibility` at decision time, and a live stack re-routes
+ * **immediately** when its renderer is collapsed via `display` (the
+ * collapse resizes the toaster, which is observed). A pure
+ * `visibility` or `opacity` flip produces no resize, so an
+ * already-rendered stack under one re-routes on the **next** toast,
+ * connect/disconnect, or resize instead. (The related `esp-flyout`
+ * uses an explicit `standalone` opt-out rather than routing, because
+ * its instances are distinct surfaces you target individually.)
+ *
  * Toasts auto-dismiss after their `duration` (default 5 seconds).
  * A duration of `0` creates a persistent toast that the user must
  * dismiss manually.

package/dist/toaster/esp-toaster.js

@@ -1,15 +1,15 @@
-var d=function(a,t,e,o){var i=arguments.length,s=i<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,e):o,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(a,t,e,o);else for(var l=a.length-1;l>=0;l--)(n=a[l])&&(s=(i<3?n(s):i>3?n(t,e,s):n(t,e))||s);return i>3&&s&&Object.defineProperty(t,e,s),s};import{css as m,html as p}from"lit";import{customElement as u,state as f}from"lit/decorators.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";import{getEspBus as h}from"../shared/bus-events.js";import{getIconHrefForHost as v}from"../shared/intent-values.js";import{renderSpriteIcon as b}from"../shared/svgs/render-sprite-icon.js";let r=class extends c{constructor(){super(...arguments),this.toasts=[],this.boundHandler=t=>this.handleToast(t)}connectedCallback(){super.connectedCallback(),h().subscribe("show-toast",this.boundHandler)}disconnectedCallback(){super.disconnectedCallback(),h().unsubscribe("show-toast",this.boundHandler)}handleToast(t){this.toasts=[...this.toasts,t];const e=t.duration??5;e>0&&setTimeout(()=>{this.toasts=this.toasts.filter(o=>o!==t),t.onClosed?.()},e*1e3)}removeToast(t){this.toasts=this.toasts.filter(e=>e!==t),t.onClosed?.()}getToastIconHref(t){return t.svgPath?.trim()||v(t.icon,this)}render(){return p`
+var u=function(o,e,s,n){var c=arguments.length,r=c<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,s):n,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(o,e,s,n);else for(var d=o.length-1;d>=0;d--)(a=o[d])&&(r=(c<3?a(r):c>3?a(e,s,r):a(e,s))||r);return c>3&&r&&Object.defineProperty(e,s,r),r},t;import{css as f,html as l}from"lit";import{customElement as v,state as h}from"lit/decorators.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";import{getEspBus as b}from"../shared/bus-events.js";import{getIconHrefForHost as m}from"../shared/intent-values.js";import{renderSpriteIcon as y}from"../shared/svgs/render-sprite-icon.js";let i=t=class extends p{constructor(){super(...arguments),this.toasts=[]}connectedCallback(){super.connectedCallback(),t.connected.push(this),t.busSubscribed||(b().subscribe("show-toast",t.boundDeliver),t.busSubscribed=!0),typeof ResizeObserver<"u"&&(this.resizeObserver=new ResizeObserver(()=>t.syncRenderer()),this.resizeObserver.observe(this)),t.syncRenderer()}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect(),this.resizeObserver=void 0,t.connected=t.connected.filter(e=>e!==this),t.connected.length===0?(t.busSubscribed&&(b().unsubscribe("show-toast",t.boundDeliver),t.busSubscribed=!1),t.queue=[]):t.syncRenderer()}static deliver(e){t.queue=[...t.queue,e];const s=e.duration??5;s>0&&setTimeout(()=>t.dismiss(e),s*1e3),t.syncRenderer()}static dismiss(e){t.queue.includes(e)&&(t.queue=t.queue.filter(s=>s!==e),e.onClosed?.(),t.syncRenderer())}static syncRenderer(){const e=t.connected.find(s=>s.isVisible())??t.connected[0];for(const s of t.connected){const n=s===e?t.queue:[];s.toasts.length===n.length&&s.toasts.every((c,r)=>c===n[r])||(s.toasts=[...n])}}isVisible(){const e=this;return typeof e.checkVisibility=="function"?e.checkVisibility({visibilityProperty:!0,opacityProperty:!0,checkVisibilityCSS:!0,checkOpacity:!0}):this.offsetParent!==null}removeToast(e){t.dismiss(e)}getToastIconHref(e){return e.svgPath?.trim()||m(e.icon,this)}render(){return l`
       <div id="toaster" role="region" aria-label="Notifications" aria-live="polite">
-        ${this.toasts.map(t=>{const e=this.getToastIconHref(t);return p`<esp-info
-            .destroyable=${(t.duration??5)===0}
-            .variant=${t.variant??"complementary"}
-            @destroy=${()=>this.removeToast(t)}
+        ${this.toasts.map(e=>{const s=this.getToastIconHref(e);return l`<esp-info
+            .destroyable=${(e.duration??5)===0}
+            .variant=${e.variant??"complementary"}
+            @destroy=${()=>this.removeToast(e)}
           >
-            ${e?b(e,{"aria-hidden":null,class:null,slot:"icon-slot"}):p``}
-            ${t.message}</esp-info
+            ${s?y(s,{"aria-hidden":null,class:null,slot:"icon-slot"}):l``}
+            ${e.message}</esp-info
           >`})}
       </div>
-    `}};r.styles=[...c.styles,m`
+    `}};i.connected=[],i.busSubscribed=!1,i.queue=[],i.boundDeliver=o=>t.deliver(o),i.styles=[...p.styles,f`
       #toaster {
         z-index: var(--esp-toaster-z-index, 5000);
         position: fixed;
@@ -25,4 +25,4 @@ var d=function(a,t,e,o){var i=arguments.length,s=i<3?t:o===null?o=Object.getOwnP
         box-shadow: 3px 3px 6px var(--esp-color-shadow);
         pointer-events: all;
       }
-    `],d([f()],r.prototype,"toasts",void 0),r=d([u("esp-toaster")],r);export{r as EspalierToaster};
+    `],u([h()],i.prototype,"toasts",void 0),i=t=u([v("esp-toaster")],i);export{i as EspalierToaster};

package/espalier.token-manifest.json

@@ -460,6 +460,42 @@
       "category": "shared-hook",
       "description": "Text color used inside the shared field shell. Defaults to `var(--esp-color-text)`."
     },
+    {
+      "name": "--esp-flyout-background",
+      "category": "component",
+      "component": "esp-flyout",
+      "description": "The background color of the panel. Defaults to `var(--esp-color-background)`."
+    },
+    {
+      "name": "--esp-flyout-border",
+      "category": "component",
+      "component": "esp-flyout",
+      "description": "The border on the panel's leading edge. Defaults to the tear-off perforation, `1px dotted var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-flyout-padding",
+      "category": "component",
+      "component": "esp-flyout",
+      "description": "Padding inside the panel's header and content regions. Defaults to `var(--esp-size-padding)`."
+    },
+    {
+      "name": "--esp-flyout-radius",
+      "category": "component",
+      "component": "esp-flyout",
+      "description": "The radius of the panel's trailing corners. Defaults to `var(--esp-size-border-radius)`; the overlay drawer squares them."
+    },
+    {
+      "name": "--esp-flyout-shadow",
+      "category": "component",
+      "component": "esp-flyout",
+      "description": "The panel's shadow. Defaults to `none` in the gutter/docked modes (the perforation does the separating) and to a drawer shadow in overlay mode."
+    },
+    {
+      "name": "--esp-flyout-z-index",
+      "category": "component",
+      "component": "esp-flyout",
+      "description": "Stack order of the overlay-drawer mode. Defaults to `3000` — above page chrome, below the dialog drop zone (4000). Set it on the `esp-page` (or an ancestor), not on the flyout itself: the page reads the same token to hoist the drawer's aside above its header."
+    },
     {
       "name": "--esp-font-body",
       "category": "root-theme",
@@ -1267,12 +1303,24 @@
       "component": "esp-page",
       "description": "Offset reserved for fixed headers. Defaults to `var(--esp-header-height)`."
     },
+    {
+      "name": "--esp-page-flyout-width",
+      "category": "component",
+      "component": "esp-page",
+      "description": "The width of the open flyout track (and of the `esp-flyout` overlay drawer). Defaults to `20rem`."
+    },
     {
       "name": "--esp-page-header-z-index",
       "category": "component",
       "component": "esp-page",
       "description": "Z-index for fixed/sticky header regions. Defaults to `20`."
     },
+    {
+      "name": "--esp-page-main-background",
+      "category": "component",
+      "component": "esp-page",
+      "description": "The background of the main content well. Defaults to `transparent` (the well shows the page background). Set it to give the content well its own card color, or pair the transparent default with `--esp-page-surface-shadow: none` for content that floats directly on the page with no frame."
+    },
     {
       "name": "--esp-page-max-width",
       "category": "component",
@@ -1289,7 +1337,7 @@
       "name": "--esp-page-surface-border",
       "category": "component",
       "component": "esp-page",
-      "description": "An optional border on the inline edges of the surface, for themes preferring a hairline over a shadow. Defaults to `none` (e.g. `1px solid var(--esp-color-border)`)."
+      "description": "An optional border on the inline edges of the surface, for themes preferring a hairline over a shadow. Defaults to `none` (e.g. `1px solid var(--esp-color-border)`). Combine with `--esp-page-surface-shadow: none` to switch the content frame from a drop shadow to a hairline, or turn both off for no frame."
     },
     {
       "name": "--esp-page-surface-shadow",

package/package.json

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