@taprootio/espalier 4.6.0 → 4.8.0

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

@@ -1,9 +1,21 @@
 import { type PropertyValues, type TemplateResult } from "lit";
 import { EspalierElementBase } from "../shared/esp-element-base.js";
+import { type ConfiguredBrandOptions } from "../shared/configured-brand.js";
 import "./esp-menu-item.js";
 import "./esp-menu-group.js";
+import "../burger/esp-burger.js";
 export type EspalierMenuMode = "horizontal" | "vertical" | "drawer";
 export type EspalierMenuOverflow = "auto" | "wrap" | "scroll" | "left-drawer" | "right-drawer";
+export type EspalierMenuDrawerPresentation = "panel" | "full-screen";
+export type EspalierMenuFullScreenTransition = "fade" | "slide-down" | "slide-up" | "slide-left" | "slide-right";
+/**
+ * Brand an owning `esp-header` mirrors into a full-screen drawer. The same
+ * shape the header and footer resolve for their configured brand, plus the
+ * scheme-resolved color so the drawer paints it without re-resolving.
+ */
+export interface EspalierMenuDrawerBrand extends ConfiguredBrandOptions {
+    brandColor: string;
+}
 /**
  * Shared navigation primitive for top navigation, sidebar navigation,
  * and drawer navigation.
@@ -37,10 +49,34 @@ export type EspalierMenuOverflow = "auto" | "wrap" | "scroll" | "left-drawer" |
  * </esp-menu>
  * ```
  *
+ * A published site usually wants the other common mobile pattern: a panel
+ * that covers the whole viewport with the site's brand centered above large,
+ * centered items. Set `drawer-presentation="full-screen"` for that; the side
+ * panel stays the default for application menus. The panel is modal: the
+ * content beside it goes inert, scrolling locks, focus moves in, Tab cycles
+ * its controls, and Escape closes it. Any drawer sits on the top layer, so a
+ * dialog or lightbox opened from one of its items cannot stack above it: an
+ * open drawer closes when another overlay opens, and that overlay returns
+ * focus to the drawer's trigger when it closes. An owning `esp-header` mirrors its
+ * configured brand into the panel and keeps its own menu toggle on the top
+ * layer so the burger closes the panel it opened:
+ *
+ * ```html
+ * <esp-header brand-text="Espalier" brand-href="#" menu-display="drawer">
+ *   <esp-menu slot="menu" mode="horizontal" drawer-presentation="full-screen" full-screen-transition="slide-down">
+ *     <esp-menu-item label="Classes" url="#classes"></esp-menu-item>
+ *     <esp-menu-item label="Schedule" url="#schedule"></esp-menu-item>
+ *     <esp-menu-item label="About" url="#about"></esp-menu-item>
+ *   </esp-menu>
+ * </esp-header>
+ * ```
+ *
  * @customElement esp-menu
  * @slot - `esp-menu-item` and `esp-menu-group` children.
+ * @slot drawer-brand - Custom brand markup for the full-screen drawer. When empty, the brand an owning `esp-header` mirrors in renders instead.
  *
  * @event {CustomEvent} esp-menu-drawer-opened - Fired when the drawer opens.
+ * @event {CustomEvent} esp-menu-drawer-presented - Fired once the drawer's popover is on the top layer, so an opener can stack its own control above it.
  * @event {CustomEvent} esp-menu-drawer-closed - Fired when the drawer closes.
  *
  * @cssprop --esp-menu-background - Background color of vertical and drawer menus.
@@ -49,6 +85,10 @@ export type EspalierMenuOverflow = "auto" | "wrap" | "scroll" | "left-drawer" |
  * @cssprop --esp-menu-scrim-color - Scrim color when the drawer is open.
  * @cssprop --esp-menu-drawer-shadow - Box shadow for the drawer overlay.
  * @cssprop --esp-menu-drawer-width - Drawer width. Defaults to `min(22rem, 86vw)`.
+ * @cssprop --esp-menu-drawer-item-font-size - Item label size in the full-screen drawer. Defaults to `var(--esp-type-large)`.
+ * @cssprop --esp-menu-drawer-transition-duration - Duration of the full-screen drawer's transition. Defaults to `0.3s`; reduced motion disables it.
+ * @cssprop --esp-menu-drawer-brand-logo-size - Logo height of the brand centered in the full-screen drawer. Defaults to `calc(3 * var(--esp-size-medium))`.
+ * @cssprop --esp-menu-drawer-brand-color - Text and logo color of the full-screen drawer's brand. Defaults to the mirrored brand color, then `var(--esp-color-headings)`.
  * @cssprop --esp-menu-top-offset - Top offset for drawers below fixed headers.
  * @docPageTitle Menu
  * @docUrl /components/menu
@@ -57,6 +97,8 @@ export type EspalierMenuOverflow = "auto" | "wrap" | "scroll" | "left-drawer" |
  * @menuIcon menu-deep
  */
 export declare class EspalierMenu extends EspalierElementBase {
+    /** Host hook for the swipe controller: a full-screen open is modal-managed here. */
+    ownsDrawerLock(): boolean;
     constructor();
     /**
      * Rendering mode: horizontal top navigation, vertical sidebar
@@ -74,6 +116,38 @@ export declare class EspalierMenu extends EspalierElementBase {
     overflow: EspalierMenuOverflow;
     /** Which side the drawer is attached to. */
     side: "left" | "right";
+    /**
+     * How the drawer presents: `panel` slides a side panel in beside a scrim
+     * (the default, suited to application menus); `full-screen` covers the
+     * viewport from its top edge with the brand centered above large,
+     * centered items and no scrim. Unsupported values read as `panel`.
+     */
+    drawerPresentation: EspalierMenuDrawerPresentation;
+    /**
+     * Motion the full-screen drawer enters and leaves with: `fade` (default),
+     * `slide-down` from above, `slide-up` from below, `slide-left` from the
+     * right edge, or `slide-right` from the left edge. Timed by
+     * `--esp-menu-drawer-transition-duration` and disabled under reduced
+     * motion. The side panel keeps its own slide.
+     */
+    fullScreenTransition: EspalierMenuFullScreenTransition;
+    /**
+     * Brand rendered above the items of a full-screen drawer when the
+     * `drawer-brand` slot is empty. An owning `esp-header` keeps this in step
+     * with its configured brand; set it directly for a standalone menu.
+     */
+    drawerBrand: EspalierMenuDrawerBrand | null;
+    /**
+     * A close control the opener keeps visible above a full-screen panel —
+     * `esp-header` sets its lifted menu toggle here. While set, the panel
+     * renders no close button of its own and includes the control in its
+     * Tab cycle; otherwise the panel renders its own close button, so a
+     * standalone menu, a `drawer-target` header, or a swipe-opened panel is
+     * never left without one.
+     */
+    liftedCloseControl: HTMLElement | null;
+    /** Whether the drawer presents full-screen rather than as a side panel. */
+    get isFullScreenDrawer(): boolean;
     /** Accessible label for the navigation landmark. */
     ariaLabel: string | null;
     /** Automatically expand groups to reveal the current page. */

package/dist/menu/esp-menu.js

@@ -1,44 +1,61 @@
-var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,r):o,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(p,e,r,o);else for(var h=p.length-1;h>=0;h--)(s=p[h])&&(i=(t<3?s(i):t>3?s(e,r,i):s(e,r))||i);return t>3&&i&&Object.defineProperty(e,r,i),i};import{css as D,html as w,nothing as g}from"lit";import{customElement as x,property as l,state as v}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{unsafeHTML as b}from"lit/directives/unsafe-html.js";import{createRef as d,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as y}from"../shared/esp-element-base.js";import{ESP_EVENTS as f}from"../shared/events.js";import{getEspBus as S}from"../shared/bus-events.js";import{normalizePath as O,pathStartsWithSegment as C,pathsMatch as T}from"../shared/path-matching.js";import{SwipeRevealController as A}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import{EspalierMenuItem as E}from"./esp-menu-item.js";import{EspalierMenuGroup as u}from"./esp-menu-group.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as M}from"../shared/responsive.js";let a=class extends y{constructor(){super(),this.itemsSlot=d(),this.railRef=d(),this.scrimRef=d(),this.drawerRef=d(),this.bus=S(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this._sliding=!1,this._mobileCollapsed=!1,this.verticalDrawerQuery=null,this.onVerticalDrawerChange=e=>this.setMobileCollapsed(e.matches),this.mode="horizontal",this.overflow="auto",this.side="left",this.ariaLabel=null,this.autoExpand=!1,this.drawerOpen=!1,this.drawerTransitioning=!1,this.drawerTrigger=null,this.hasExternalDrawerControl=!1,this.previewCollapseRequested=!1,this.getWidth=()=>{const e=this.railRef.value;return e?Math.max(e.scrollWidth,e.clientWidth):-1},this.onDrawerTransitionEnd=()=>{this.closeTransitionTimer&&(clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=null),this.drawerTransitioning=!1,this.drawerOpen||(this.hideDrawerPopover(),this.drawerGroupOpenOverrides.clear())},this.swipeController=new A(this,this.side),this.swipeController.enabled=!1}get sliding(){return this._sliding}set sliding(e){const r=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",r)}get collapsed(){return this.drawerActive}set collapsed(e){e?this.mode="drawer":this.mode==="drawer"&&(this.mode="vertical")}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"||this.mode==="vertical"&&(this._mobileCollapsed||this.previewCollapseRequested)&&this.hasExternalDrawerControl}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),!this.verticalDrawerQuery&&typeof window<"u"&&"matchMedia"in window&&(this.verticalDrawerQuery=window.matchMedia(M),this._mobileCollapsed=this.verticalDrawerQuery.matches,this.verticalDrawerQuery.addEventListener("change",this.onVerticalDrawerChange)),this.syncSwipeEnabled()}disconnectedCallback(){this.verticalDrawerQuery?.removeEventListener("change",this.onVerticalDrawerChange),this.verticalDrawerQuery=null,super.disconnectedCallback()}setMobileCollapsed(e){e!==this._mobileCollapsed&&(this._mobileCollapsed=e,this.mode==="vertical"&&this.applyMobileCollapse())}applyMobileCollapse(){this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)}firstUpdated(e){super.firstUpdated(e),this.propagateToItems()}updated(e){super.updated(e),(e.has("mode")||e.has("overflow")||e.has("side")||e.has("hasExternalDrawerControl")||e.has("previewCollapseRequested"))&&(this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)),this.autoExpand&&(e.has("autoExpand")||e.has("mode")&&this.mode!=="horizontal")?this.expandToCurrentPage():this.mode==="horizontal"&&e.has("mode")&&this.closeHorizontalTopLevelGroups()}openDrawer(e){this.drawerActive&&(e?this.drawerTrigger=e:this.drawerOpen||(this.drawerTrigger=null),this.swipeController.open())}closeDrawer(){this.swipeController.close(!0)}toggleDrawer(e){this.drawerOpen?this.closeDrawer():this.openDrawer(e)}toggleOpened(){this.toggleDrawer()}get isDrawerOpen(){return this.drawerOpen}syncSwipeEnabled(){this.swipeController.direction=this.drawerSide,this.swipeController.enabled=this.drawerActive}getAssignedChildren(){return this.itemsSlot.value?.assignedElements()??[]}propagateToItems(){const e=this.railMode;for(const r of this.getAssignedChildren())r instanceof E?(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch):r instanceof u&&(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch)}handleSlotChange(){this.propagateToItems()}onSwipeRevealChanged(e){e!==this.drawerOpen&&(this.drawerOpen=e,e?(this.drawerGroupOpenOverrides.clear(),this.bus.publish("close-popovers",{}),this.updateComplete.then(()=>this.showDrawerPopover())):(this.drawerTransitioning=!0,this.updateComplete.then(()=>this.startCloseTransition()),requestAnimationFrame(()=>this.restoreDrawerTriggerFocus())),this.dispatchEvent(new CustomEvent(e?f.MENU_DRAWER_OPENED:f.MENU_DRAWER_CLOSED,{bubbles:!0,composed:!0})))}showDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;if(!(!e||!r)){this.swipeController.drawerElement=r;try{e.showPopover(),r.showPopover()}catch{}r.getBoundingClientRect(),requestAnimationFrame(()=>{this.drawerTransitioning=!0,this.requestUpdate()})}}startCloseTransition(){if(!this.drawerRef.value){this.hideDrawerPopover();return}this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=setTimeout(()=>{this.closeTransitionTimer=null,!this.drawerOpen&&this.drawerTransitioning&&this.onDrawerTransitionEnd()},400)}hideDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;this.swipeController.drawerElement=null,r&&(r.style.cssText="");try{r?.hidePopover()}catch{}try{e?.hidePopover()}catch{}}restoreDrawerTriggerFocus(){const e=this.drawerTrigger;this.drawerTrigger=null,e?.isConnected&&e.focus({preventScroll:!0})}getAutoExpandedGroups(e=!0){const r=new Set;let o=null;for(const i of this.querySelectorAll("esp-menu-item")){const s=i.url||i.getAttribute("url");if(s&&T(s)){o=i;break}}if(!o)for(const i of this.querySelectorAll("esp-menu-group")){const s=i.url||i.getAttribute("url");if(s&&T(s)){o=i;break}}if(!o&&e){for(const i of this.querySelectorAll("esp-menu-group"))i.parentElement===this&&r.add(i);return r}if(!o)return r;o instanceof u&&r.add(o);let t=o.parentElement;for(;t&&t!==this;)t instanceof u&&r.add(t),t=t.parentElement;return r}isHorizontalTopLevelGroup(e){return e.mode==="horizontal"&&e.depth===0}groupUrlPrefixMatches(e){return C(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?C(location.pathname,O(r)):!1}expandToCurrentPage(){const e=this.getAutoExpandedGroups(),r=this.querySelectorAll("esp-menu-group");for(const o of r)o.open=e.has(o)&&!this.isHorizontalTopLevelGroup(o)}closeHorizontalTopLevelGroups(){for(const e of this.querySelectorAll("esp-menu-group"))this.isHorizontalTopLevelGroup(e)&&(e.open=!1)}getDrawerAutoExpandedGroups(){return this.getAutoExpandedGroups(!1)}collectDrawerNodes(e,r=this.getDrawerAutoExpandedGroups()){const o=[];for(const t of e)if(t instanceof E){const i=t.querySelector(":scope > svg, :scope > img");o.push({kind:"item",label:t.label,url:t.url,open:!1,icon:t.icon,iconHtml:i?.outerHTML||"",children:[],originalItem:t,originalGroup:null})}else if(t instanceof u){const i=t.querySelector(':scope > [slot="icon"]'),s=r.has(t)||this.groupPathMatches(t),h=this.drawerGroupOpenOverrides.get(t)??(t.open||s);o.push({kind:"group",label:t.label,url:t.url||"",open:h,icon:t.icon,iconHtml:i?.outerHTML||"",children:this.collectDrawerNodes(Array.from(t.children),r),originalItem:null,originalGroup:t})}return o}renderDrawerNode(e){return e.kind==="item"?w`<esp-menu-item
+var l=function(w,e,r,i){var t=arguments.length,o=t<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(w,e,r,i);else for(var a=w.length-1;a>=0;a--)(s=w[a])&&(o=(t<3?s(o):t>3?s(e,r,o):s(e,r))||o);return t>3&&o&&Object.defineProperty(e,r,o),o},f;import{css as k,html as c,nothing as u}from"lit";import{customElement as M,property as d,state as y}from"lit/decorators.js";import{classMap as S}from"lit/directives/class-map.js";import{unsafeHTML as T}from"lit/directives/unsafe-html.js";import{createRef as m,ref as g}from"lit/directives/ref.js";import{styleMap as z}from"lit/directives/style-map.js";import{EspalierElementBase as E}from"../shared/esp-element-base.js";import{ESP_EVENTS as v}from"../shared/events.js";import{getEspBus as _}from"../shared/bus-events.js";import{normalizePath as $,pathStartsWithSegment as D,pathsMatch as x}from"../shared/path-matching.js";import{renderConfiguredBrand as F}from"../shared/configured-brand.js";import{FOCUSABLE_SELECTOR as A,OverlayController as C}from"../shared/overlay-controller.js";import{SwipeRevealController as L}from"./swipe-reveal-controller.js";import"./esp-menu-item.js";import"./esp-menu-group.js";import"../burger/esp-burger.js";import{EspalierMenuItem as O}from"./esp-menu-item.js";import{EspalierMenuGroup as b}from"./esp-menu-group.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as I}from"../shared/responsive.js";const G=new Set(["panel","full-screen"]),N=new Set(["fade","slide-down","slide-up","slide-left","slide-right"]);let n=f=class extends E{ownsDrawerLock(){return this.isFullScreenDrawer}fullScreenInertAnchor(){return f.inertAnchorFor(this)}static inertAnchorFor(e){let r=e,i=e;for(;;){const t=i.parentElement;if(t){if(t.localName==="esp-page"||t.localName==="esp-root")return i;t===document.body&&(r=i),i=t;continue}const o=i.getRootNode();if(o instanceof ShadowRoot&&o.host instanceof HTMLElement){i=o.host;continue}return r}}constructor(){super(),this.itemsSlot=m(),this.railRef=m(),this.scrimRef=m(),this.drawerRef=m(),this.bus=_(),this.closeTransitionTimer=null,this.drawerGroupOpenOverrides=new Map,this.overlay=new C({host:this,getFocusTrapContainer:()=>this.drawerRef.value??null,getFocusScope:()=>this.fullScreenFocusScope(),getInertAnchor:()=>this.fullScreenInertAnchor(),promote:!1,scrollLock:{preserveScrollPosition:!0}}),this.fullScreenSession=!1,this.openedFullScreen=!1,this.drawerKeydownAttached=!1,this.onOverlayOpened=e=>{if(e===this.overlay||!this.drawerOpen)return;const r=this.drawerTrigger;this.drawerTrigger=null,r&&e.redirectFocusRestore(r),this.swipeController.closeForHandoff(),this.onDrawerTransitionEnd()},this._sliding=!1,this._mobileCollapsed=!1,this.verticalDrawerQuery=null,this.onVerticalDrawerChange=e=>this.setMobileCollapsed(e.matches),this.mode="horizontal",this.overflow="auto",this.side="left",this.drawerPresentation="panel",this.fullScreenTransition="fade",this.drawerBrand=null,this.liftedCloseControl=null,this.ariaLabel=null,this.autoExpand=!1,this.drawerOpen=!1,this.drawerShown=!1,this.drawerTransitioning=!1,this.drawerTrigger=null,this.hasExternalDrawerControl=!1,this.previewCollapseRequested=!1,this.getWidth=()=>{const e=this.railRef.value;return e?Math.max(e.scrollWidth,e.clientWidth):-1},this.onDrawerKeydown=e=>{!this.drawerOpen||!this.openedFullScreen||e.key==="Tab"&&this.overlay.trapFocus(e)},this.onDrawerTransitionEnd=e=>{e&&e.target!==this.drawerRef.value||(this.closeTransitionTimer&&(clearTimeout(this.closeTransitionTimer),this.closeTransitionTimer=null),this.drawerTransitioning=!1,this.drawerOpen||(this.hideDrawerPopover(),this.drawerGroupOpenOverrides.clear()))},this.handleDrawerCloseClick=()=>{this.closeDrawer()},this.swipeController=new L(this,this.side),this.swipeController.enabled=!1}get isFullScreenDrawer(){return G.has(this.drawerPresentation)?this.drawerPresentation==="full-screen":!1}get resolvedFullScreenTransition(){return N.has(this.fullScreenTransition)?this.fullScreenTransition:"fade"}get sliding(){return this._sliding}set sliding(e){const r=this._sliding;this._sliding=e,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate("sliding",r)}get collapsed(){return this.drawerActive}set collapsed(e){e?this.mode="drawer":this.mode==="drawer"&&(this.mode="vertical")}get drawerSide(){return this.overflow==="right-drawer"?"right":this.overflow==="left-drawer"?"left":this.side}get drawerActive(){return this.mode==="drawer"||this._sliding||this.overflow==="left-drawer"||this.overflow==="right-drawer"||this.mode==="vertical"&&(this._mobileCollapsed||this.previewCollapseRequested)&&this.hasExternalDrawerControl}get railMode(){return this.mode==="horizontal"?"horizontal":"vertical"}connectedCallback(){super.connectedCallback(),this.getAttribute("slot")==="right"&&(this.side="right"),!this.verticalDrawerQuery&&typeof window<"u"&&"matchMedia"in window&&(this.verticalDrawerQuery=window.matchMedia(I),this._mobileCollapsed=this.verticalDrawerQuery.matches,this.verticalDrawerQuery.addEventListener("change",this.onVerticalDrawerChange)),this.syncSwipeEnabled(),C.addOpenListener(this.onOverlayOpened)}disconnectedCallback(){C.removeOpenListener(this.onOverlayOpened),this.verticalDrawerQuery?.removeEventListener("change",this.onVerticalDrawerChange),this.verticalDrawerQuery=null,this.detachDrawerKeydown(),this.fullScreenSession=!1,super.disconnectedCallback()}setMobileCollapsed(e){e!==this._mobileCollapsed&&(this._mobileCollapsed=e,this.mode==="vertical"&&this.applyMobileCollapse())}applyMobileCollapse(){this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),this.requestUpdate(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)}firstUpdated(e){super.firstUpdated(e),this.propagateToItems()}updated(e){super.updated(e),(e.has("mode")||e.has("overflow")||e.has("side")||e.has("hasExternalDrawerControl")||e.has("previewCollapseRequested"))&&(this.swipeController.direction=this.drawerSide,this.syncSwipeEnabled(),this.propagateToItems(),!this.drawerActive&&this.drawerOpen&&this.swipeController.close(!0)),this.drawerOpen&&this.openedFullScreen!==this.isFullScreenDrawer&&this.swipeController.close(!0),this.autoExpand&&(e.has("autoExpand")||e.has("mode")&&this.mode!=="horizontal")?this.expandToCurrentPage():this.mode==="horizontal"&&e.has("mode")&&this.closeHorizontalTopLevelGroups()}openDrawer(e){this.drawerActive&&(e?this.drawerTrigger=e:this.drawerOpen||(this.drawerTrigger=null),this.swipeController.open())}closeDrawer(){this.swipeController.close(!0)}toggleDrawer(e){this.drawerOpen?this.closeDrawer():this.openDrawer(e)}toggleOpened(){this.toggleDrawer()}get isDrawerOpen(){return this.drawerOpen}syncSwipeEnabled(){this.swipeController.direction=this.drawerSide,this.swipeController.enabled=this.drawerActive}getAssignedChildren(){return this.itemsSlot.value?.assignedElements()??[]}propagateToItems(){const e=this.railMode;for(const r of this.getAssignedChildren())r instanceof O?(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch):r instanceof b&&(r.mode=e,r.depth=0,r.touchDevice=this.swipeController.isTouch)}handleSlotChange(){this.propagateToItems()}onSwipeRevealChanged(e){e!==this.drawerOpen&&(this.drawerOpen=e,e?(this.openedFullScreen=this.isFullScreenDrawer,this.drawerGroupOpenOverrides.clear(),this.bus.publish("close-popovers",{}),this.updateComplete.then(()=>this.showDrawerPopover())):(this.detachDrawerKeydown(),this.fullScreenSession&&(this.fullScreenSession=!1,this.overlay.close()),this.drawerShown=!1,this.drawerTransitioning=!0,this.updateComplete.then(()=>this.startCloseTransition()),requestAnimationFrame(()=>this.restoreDrawerTriggerFocus())),this.dispatchEvent(new CustomEvent(e?v.MENU_DRAWER_OPENED:v.MENU_DRAWER_CLOSED,{bubbles:!0,composed:!0})))}showDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;if(!(!e||!r||!this.isConnected)){this.swipeController.drawerElement=r;try{this.openedFullScreen||e.showPopover(),r.showPopover()}catch{}this.dispatchEvent(new CustomEvent(v.MENU_DRAWER_PRESENTED,{bubbles:!0,composed:!0})),r.getBoundingClientRect(),requestAnimationFrame(()=>{!this.drawerOpen||!this.isConnected||(this.drawerTransitioning=!0,this.drawerShown=!0,this.openedFullScreen&&(this.fullScreenSession=!0,this.overlay.open(),this.attachDrawerKeydown(),this.updateComplete.then(()=>{this.drawerOpen&&this.overlay.moveFocusInto()})))})}}attachDrawerKeydown(){this.drawerKeydownAttached||(document.addEventListener("keydown",this.onDrawerKeydown),this.drawerKeydownAttached=!0)}detachDrawerKeydown(){this.drawerKeydownAttached&&(document.removeEventListener("keydown",this.onDrawerKeydown),this.drawerKeydownAttached=!1)}fullScreenFocusScope(){const e=this.drawerRef.value;if(!e)return[];const r=s=>s instanceof HTMLElement&&s.getClientRects().length>0,i=[],t=s=>{if(s.matches(A)&&r(s)&&i.push(s),s.shadowRoot)for(const a of s.shadowRoot.querySelectorAll(A))r(a)&&i.push(a)};for(const s of e.querySelectorAll("*"))if(t(s),s instanceof HTMLSlotElement)for(const a of s.assignedElements({flatten:!0})){t(a);for(const p of a.querySelectorAll("*"))t(p)}const o=this.liftedCloseControl;if(o?.isConnected){const s=o.shadowRoot?.querySelector("button")??o;r(s)&&i.push(s)}return i}static drawerTransitionMs(e){const r=getComputedStyle(e),i=a=>a.split(",").map(p=>p.trim()).filter(Boolean).map(p=>{const h=Number.parseFloat(p);return Number.isFinite(h)?p.endsWith("ms")?h:h*1e3:0}),t=i(r.transitionDuration),o=i(r.transitionDelay);let s=0;return t.forEach((a,p)=>{s=Math.max(s,a+(o[p%Math.max(o.length,1)]??0))}),s}startCloseTransition(){const e=this.drawerRef.value;if(!e){this.hideDrawerPopover();return}this.closeTransitionTimer&&clearTimeout(this.closeTransitionTimer);const r=f.drawerTransitionMs(e);if(r===0){this.onDrawerTransitionEnd();return}this.closeTransitionTimer=setTimeout(()=>{this.closeTransitionTimer=null,!this.drawerOpen&&this.drawerTransitioning&&this.onDrawerTransitionEnd()},r+50)}hideDrawerPopover(){const e=this.scrimRef.value,r=this.drawerRef.value;this.swipeController.drawerElement=null,r&&(r.style.cssText="");try{r?.hidePopover()}catch{}try{e?.hidePopover()}catch{}}restoreDrawerTriggerFocus(){const e=this.drawerTrigger;this.drawerTrigger=null,e?.isConnected&&e.focus({preventScroll:!0})}getAutoExpandedGroups(e=!0){const r=new Set;let i=null;for(const o of this.querySelectorAll("esp-menu-item")){const s=o.url||o.getAttribute("url");if(s&&x(s)){i=o;break}}if(!i)for(const o of this.querySelectorAll("esp-menu-group")){const s=o.url||o.getAttribute("url");if(s&&x(s)){i=o;break}}if(!i&&e){for(const o of this.querySelectorAll("esp-menu-group"))o.parentElement===this&&r.add(o);return r}if(!i)return r;i instanceof b&&r.add(i);let t=i.parentElement;for(;t&&t!==this;)t instanceof b&&r.add(t),t=t.parentElement;return r}isHorizontalTopLevelGroup(e){return e.mode==="horizontal"&&e.depth===0}groupUrlPrefixMatches(e){return D(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?D(location.pathname,$(r)):!1}expandToCurrentPage(){const e=this.getAutoExpandedGroups(),r=this.querySelectorAll("esp-menu-group");for(const i of r)i.open=e.has(i)&&!this.isHorizontalTopLevelGroup(i)}closeHorizontalTopLevelGroups(){for(const e of this.querySelectorAll("esp-menu-group"))this.isHorizontalTopLevelGroup(e)&&(e.open=!1)}getDrawerAutoExpandedGroups(){return this.getAutoExpandedGroups(!1)}collectDrawerNodes(e,r=this.getDrawerAutoExpandedGroups()){const i=[];for(const t of e)if(t instanceof O){const o=t.querySelector(":scope > svg, :scope > img");i.push({kind:"item",label:t.label,url:t.url,open:!1,icon:t.icon,iconHtml:o?.outerHTML||"",children:[],originalItem:t,originalGroup:null})}else if(t instanceof b){const o=t.querySelector(':scope > [slot="icon"]'),s=r.has(t)||this.groupPathMatches(t),a=this.drawerGroupOpenOverrides.get(t)??(t.open||s);i.push({kind:"group",label:t.label,url:t.url||"",open:a,icon:t.icon,iconHtml:o?.outerHTML||"",children:this.collectDrawerNodes(Array.from(t.children),r),originalItem:null,originalGroup:t})}return i}renderDrawerNode(e){return e.kind==="item"?c`<esp-menu-item
         label=${e.label}
         .url=${e.url}
         .icon=${e.icon}
         .mode=${"drawer"}
         @esp-clicked=${()=>!e.url&&e.originalItem?this.handleDrawerItemClick(e.originalItem):void 0}
-        >${b(e.iconHtml)}</esp-menu-item
-      >`:w`<esp-menu-group
+        >${T(e.iconHtml)}</esp-menu-item
+      >`:c`<esp-menu-group
       label=${e.label}
       .url=${e.url}
       .icon=${e.icon}
       .mode=${"drawer"}
+      .fullScreenPresentation=${this.openedFullScreen}
       ?open=${e.open}
       @esp-menu-group-toggle=${r=>{e.originalGroup&&(this.drawerGroupOpenOverrides.set(e.originalGroup,r.detail.open),this.isHorizontalTopLevelGroup(e.originalGroup)||(e.originalGroup.open=r.detail.open))}}
     >
-      ${e.iconHtml?b(e.iconHtml):g}
+      ${e.iconHtml?T(e.iconHtml):u}
       ${e.children.map(r=>this.renderDrawerNode(r))}
-    </esp-menu-group>`}handleDrawerItemClick(e){e.dispatchEvent(new CustomEvent(f.CLICKED,{detail:{},bubbles:!0,composed:!0})),this.swipeController.close(!0)}render(){const e=this.drawerOpen||this.drawerTransitioning,r=this.drawerActive,o={rail:!0,horizontal:this.railMode==="horizontal",vertical:this.railMode==="vertical",wrap:this.overflow==="wrap",scroll:this.overflow==="scroll","drawer-forced":this.drawerActive},t={drawer:!0,"drawer-left":this.drawerSide==="left","drawer-right":this.drawerSide==="right",transitioning:this.drawerTransitioning,open:this.drawerOpen},i=e?this.collectDrawerNodes(this.getAssignedChildren()):[],s=this.ariaLabel??"Navigation";return w`
+    </esp-menu-group>`}handleDrawerItemClick(e){e.dispatchEvent(new CustomEvent(v.CLICKED,{detail:{},bubbles:!0,composed:!0})),this.swipeController.close(!0)}render(){const e=this.drawerOpen||this.drawerTransitioning,r=this.drawerActive,i={rail:!0,horizontal:this.railMode==="horizontal",vertical:this.railMode==="vertical",wrap:this.overflow==="wrap",scroll:this.overflow==="scroll","drawer-forced":this.drawerActive},t=e?this.openedFullScreen:this.isFullScreenDrawer,o={drawer:!0,"drawer-left":this.drawerSide==="left","drawer-right":this.drawerSide==="right","full-screen":t,[`transition-${this.resolvedFullScreenTransition}`]:t,transitioning:this.drawerTransitioning,open:this.drawerShown},s=e?this.collectDrawerNodes(this.getAssignedChildren()):[],a=this.ariaLabel??"Navigation",p={"--_esp-menu-drawer-brand-color":this.drawerBrand?.brandColor||null},h=t&&e?c`<div class="drawer-chrome">
+            <div class="drawer-brand" style=${z(p)}>
+              <slot name="drawer-brand"
+                >${this.drawerBrand?F(this.drawerBrand):u}</slot
+              >
+            </div>
+            ${this.liftedCloseControl?u:c`
+                  <button
+                    type="button"
+                    class="drawer-close"
+                    aria-label="Close menu"
+                    @click=${this.handleDrawerCloseClick}
+                  >
+                    <esp-burger presentation-only menu-open></esp-burger>
+                  </button>`}
+          </div>`:u;return c`
       <nav
-        ${c(this.railRef)}
-        class=${m(o)}
-        aria-label=${s}
+        ${g(this.railRef)}
+        class=${S(i)}
+        aria-label=${a}
         ?hidden=${r}
       >
-        <slot ${c(this.itemsSlot)} @slotchange=${this.handleSlotChange}></slot>
+        <slot ${g(this.itemsSlot)} @slotchange=${this.handleSlotChange}></slot>
       </nav>
       <div
-        ${c(this.scrimRef)}
-        class=${m({scrim:!0,open:this.drawerOpen,transitioning:this.drawerTransitioning})}
+        ${g(this.scrimRef)}
+        class=${S({scrim:!0,"full-screen":t,open:this.drawerShown,transitioning:this.drawerTransitioning})}
         popover="manual"
       ></div>
       <nav
-        ${c(this.drawerRef)}
-        class=${m(t)}
-        aria-label=${s}
+        ${g(this.drawerRef)}
+        class=${S(o)}
+        aria-label=${a}
         popover="manual"
+        ?data-no-swipe=${t}
         @transitionend=${this.onDrawerTransitionEnd}
       >
-        ${e?i.map(h=>this.renderDrawerNode(h)):g}
+        ${h} ${e?s.map(R=>this.renderDrawerNode(R)):u}
       </nav>
-    `}};a.styles=[...y.styles,D`
+    `}};n.styles=[...E.styles,k`
       :host {
         display: block;
         min-width: 0;
@@ -161,10 +178,154 @@ var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnP
         transform: translateX(0);
       }
 
+      
+      .scrim.full-screen {
+        display: none;
+      }
+
+      .drawer.full-screen {
+        top: 0;
+        left: 0;
+        right: 0;
+        width: 100vw;
+        max-width: none;
+        height: 100%;
+        padding-block: var(--esp-size-normal-to-medium);
+        box-shadow: none;
+        opacity: 0;
+        transform: none;
+      }
+
+      .drawer.full-screen.transitioning {
+        transition:
+          opacity var(--esp-menu-drawer-transition-duration, 0.3s) ease,
+          transform var(--esp-menu-drawer-transition-duration, 0.3s) cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .drawer.full-screen.transition-slide-down {
+        opacity: 1;
+        transform: translateY(-100%);
+      }
+
+      .drawer.full-screen.transition-slide-up {
+        opacity: 1;
+        transform: translateY(100%);
+      }
+
+      .drawer.full-screen.transition-slide-left {
+        opacity: 1;
+        transform: translateX(100%);
+      }
+
+      .drawer.full-screen.transition-slide-right {
+        opacity: 1;
+        transform: translateX(-100%);
+      }
+
+      .drawer.full-screen.open {
+        opacity: 1;
+        transform: none;
+      }
+
+      .drawer-chrome {
+        position: relative;
+        display: grid;
+        padding-inline: var(--esp-size-normal);
+      }
+
+      .drawer-brand {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: var(--esp-menu-drawer-brand-logo-size, calc(3 * var(--esp-size-medium)));
+        padding-block: var(--esp-size-normal);
+        color: var(
+          --_esp-menu-drawer-brand-color,
+          var(--esp-menu-drawer-brand-color, var(--esp-color-headings))
+        );
+      }
+
+      .drawer-brand .configured-brand {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--esp-size-tiny-to-small);
+        max-width: 80vw;
+        color: inherit;
+        font-family: var(
+          --_esp-font-brand-effective,
+          var(
+            --esp-font-brand,
+            var(
+              --_esp-font-headings-effective,
+              var(
+                --esp-font-headings,
+                var(
+                  --_esp-font-body-effective,
+                  var(--esp-font-body, var(--_esp-font-body-fallback))
+                )
+              )
+            )
+          )
+        );
+        font-size: var(--esp-type-medium);
+        font-weight: var(--esp-font-weight-brand, var(--esp-font-weight-headings));
+        text-decoration: none;
+      }
+
+      .drawer-brand .brand-logo {
+        width: auto;
+        height: var(--esp-menu-drawer-brand-logo-size, calc(3 * var(--esp-size-medium)));
+        max-width: 60vw;
+        object-fit: contain;
+      }
+
+      .drawer-close {
+        position: absolute;
+        top: 0;
+        inset-inline-end: 0;
+        display: grid;
+        place-content: center;
+        width: max(44px, calc(3.5 * var(--esp-size-small)));
+        height: max(44px, calc(3.5 * var(--esp-size-small)));
+        border: none;
+        padding: 0;
+        background: none;
+        color: inherit;
+        cursor: pointer;
+      }
+
+      .drawer-close:focus-visible {
+        outline: 2px solid var(--esp-color-link);
+        outline-offset: -2px;
+      }
+
+      
+      .drawer.full-screen esp-menu-item,
+      .drawer.full-screen esp-menu-group {
+        --esp-menu-item-border-color: transparent;
+        --esp-menu-item-background: transparent;
+        --esp-menu-item-hover-background: transparent;
+        --esp-menu-item-active-background: transparent;
+        --esp-menu-item-font-size: var(--esp-menu-drawer-item-font-size, var(--esp-type-large));
+        --esp-menu-item-padding: var(--esp-size-small) var(--esp-size-normal);
+        --esp-menu-group-border-color: transparent;
+        --esp-menu-group-background: transparent;
+        --esp-menu-group-hover-background: transparent;
+      }
+
+      .drawer.full-screen esp-menu-item::part(menu-text),
+      .drawer.full-screen esp-menu-group::part(menu-text) {
+        display: flex;
+        flex: 1 1 auto;
+        justify-content: center;
+        text-align: center;
+      }
+
       @media (prefers-reduced-motion: reduce) {
         .scrim.transitioning,
-        .drawer.transitioning {
+        .drawer.transitioning,
+        .drawer.full-screen.transitioning {
           transition: none;
         }
       }
-    `],n([l({type:String,reflect:!0})],a.prototype,"mode",void 0),n([l({type:String,reflect:!0})],a.prototype,"overflow",void 0),n([l({type:String,reflect:!0})],a.prototype,"side",void 0),n([l({attribute:"aria-label",type:String})],a.prototype,"ariaLabel",void 0),n([l({type:Boolean,attribute:"auto-expand"})],a.prototype,"autoExpand",void 0),n([l({type:Boolean})],a.prototype,"sliding",null),n([l({type:Boolean})],a.prototype,"collapsed",null),n([v()],a.prototype,"drawerOpen",void 0),n([v()],a.prototype,"drawerTransitioning",void 0),n([l({attribute:!1})],a.prototype,"hasExternalDrawerControl",void 0),n([l({attribute:!1})],a.prototype,"previewCollapseRequested",void 0),a=n([x("esp-menu")],a);export{a as EspalierMenu};
+    `],l([d({type:String,reflect:!0})],n.prototype,"mode",void 0),l([d({type:String,reflect:!0})],n.prototype,"overflow",void 0),l([d({type:String,reflect:!0})],n.prototype,"side",void 0),l([d({attribute:"drawer-presentation",type:String,reflect:!0})],n.prototype,"drawerPresentation",void 0),l([d({attribute:"full-screen-transition",type:String,reflect:!0})],n.prototype,"fullScreenTransition",void 0),l([d({attribute:!1})],n.prototype,"drawerBrand",void 0),l([d({attribute:!1})],n.prototype,"liftedCloseControl",void 0),l([d({attribute:"aria-label",type:String})],n.prototype,"ariaLabel",void 0),l([d({type:Boolean,attribute:"auto-expand"})],n.prototype,"autoExpand",void 0),l([d({type:Boolean})],n.prototype,"sliding",null),l([d({type:Boolean})],n.prototype,"collapsed",null),l([y()],n.prototype,"drawerOpen",void 0),l([y()],n.prototype,"drawerShown",void 0),l([y()],n.prototype,"drawerTransitioning",void 0),l([d({attribute:!1})],n.prototype,"hasExternalDrawerControl",void 0),l([d({attribute:!1})],n.prototype,"previewCollapseRequested",void 0),n=f=l([M("esp-menu")],n);export{n as EspalierMenu};

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

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

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

@@ -66,6 +66,8 @@ export type { SchemeEvents } from "../shared/bus-events.js";
  * @cssprop --esp-font-body - Always-emitted family for body and UI text. Defaults to `system-ui, sans-serif` when `fontBody` is omitted or empty.
  * @cssprop --esp-font-headings - Consumer-authored heading family. Emitted only when configured; heading recipes otherwise fall back to `--esp-font-body`.
  * @cssprop --esp-font-brand - Consumer-authored brand family. Emitted only when configured; brand recipes otherwise fall back through headings to `--esp-font-body`.
+ * @cssprop --esp-font-menu - Consumer-authored navigation family. Emitted only when configured; menu items otherwise fall back to `--esp-font-body`, never to headings.
+ * @cssprop --esp-font-weight-menu - Font weight for horizontal navigation menu items. Defaults to `bold`.
  * @cssprop --esp-font-monospace - Family for code and monospace text. Defaults to `monospace`.
  * @cssprop --esp-color-series-1 - First categorical data-series color.
  * @cssprop --esp-color-series-2 - Second categorical data-series color.

package/dist/root/esp-root.js

@@ -1,4 +1,4 @@
-var r=function(c,e,t,s){var n=arguments.length,i=n<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,m;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(c,e,t,s);else for(var h=c.length-1;h>=0;h--)(m=c[h])&&(i=(n<3?m(i):n>3?m(e,t,i):m(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i},l;import{css as b,html as w,LitElement as E}from"lit";import{customElement as R,property as a,state as C}from"lit/decorators.js";import{getEspBus as d}from"../shared/bus-events.js";import{subscribeToRootEvent as x}from"../shared/root-event-subscription.js";import{DEFAULT_LIGHT_THEME as f,DEFAULT_DARK_THEME as g,encodeTheme as y,parseTheme as p,mergeTheme as v}from"../shared/theme.js";import{extractFamily as u,isLocalFontFamily as D,removeRuntimeGoogleFontLinks as S,syncRuntimeGoogleFontLink as L}from"../shared/font-helpers.js";import{computeThemeProperties as A}from"./helpers/compute-theme-properties.js";import{registerImageTexture as I,registeredImageTextures as F}from"../shared/image-texture-registry.js";import{registerImageTexture as $,registeredImageTextures as Q,BUILT_IN_IMAGE_TEXTURES as q}from"../shared/image-texture-registry.js";const T=1e3;let o=l=class extends E{constructor(){super(...arguments),this.schemeBacker="",this.schemeExplicitlySet=!1,this.resolvingDefaultScheme=!1,this.themeEventsReady=!1,this.systemSchemeQuery=null,this.lastSeedColor="",this.resolvedLightTheme={...f},this.resolvedDarkTheme={...g},this.appliedDataRampProperties=new Set,this.documentClickRegistrationActive=!1,this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.lightThemeAttr="",this.darkThemeAttr="",this.fontCSSRoot="/css/fonts/",this.fontDefinitionsUrl="",this.googleFontLoading="auto",this.iconSpriteUrl="/assets/icons.svg",this.themePending=!1,this.themeReadyState=!1,this.themeSettleWaiters=[],this.warnedThemeSettleTimeout=!1,this.defaultScheme="light",this.resizeObserver=new ResizeObserver(()=>{d().publish("window-resized",{emWidth:window.innerWidth/parseFloat(getComputedStyle(document.documentElement).fontSize),emHeight:window.innerHeight/parseFloat(getComputedStyle(document.documentElement).fontSize),pxWidth:window.innerWidth,pxHeight:window.innerHeight})}),this.handleSystemSchemeChange=e=>{this.schemeExplicitlySet||this.defaultScheme!=="system"||(this.resolvingDefaultScheme=!0,this.scheme=e.matches?"dark":"light",this.resolvingDefaultScheme=!1)}}static registerTexture(e,t){I(e,t)}static registeredTextures(){return F()}subscribeScoped(e,t){return x(this,e,t)}get lightTheme(){return this.lightThemeAttr?p(this.lightThemeAttr):null}set lightTheme(e){this.lightThemeAttr=e?y(e):""}get darkTheme(){return this.darkThemeAttr?p(this.darkThemeAttr):null}set darkTheme(e){this.darkThemeAttr=e?y(e):""}get themeSettled(){return this.themeReadyState}whenThemeSettled(){return this.themeReadyState?Promise.resolve():new Promise(e=>{this.themeSettleWaiters.push(e)})}get hasAuthorTheme(){return!!(this.scheme==="dark"?this.darkThemeAttr:this.lightThemeAttr)}settleTheme(){if(this.themeSettleTimer!==void 0&&(clearTimeout(this.themeSettleTimer),this.themeSettleTimer=void 0),this.themeReadyState)return;this.themeReadyState=!0;const e=this.themeSettleWaiters;this.themeSettleWaiters=[];for(const t of e)t()}get scheme(){return this.schemeBacker}set scheme(e){const t=e==="dark"?"dark":e==="light"?"light":"",s=this.schemeBacker,n=this.schemeExplicitlySet;this.resolvingDefaultScheme||(this.schemeExplicitlySet=t.length>0);const i=t||this.resolveDefaultScheme();n!==this.schemeExplicitlySet&&this.isConnected&&this.syncSystemSchemeListener(),i!==s&&(this.schemeBacker=i,this.requestUpdate("scheme",s),this.themeEventsReady&&d().publish("scheme-changed",{scheme:i,correlationId:this.correlationId}))}get seedColor(){return this.activeTheme.seedColor}injectGoogleFontLink(e,t,s){const n=`${this.correlationId}-${e}`,i=D(t)?"":t;L({owner:`root:${n}`,family:i,weight:s,enabled:this.googleFontLoading!=="none",attributes:{"data-esp-font":n}})}syncGoogleFontLinks(){this.googleFontLoading==="none"&&this.removeRuntimeGoogleFontLinks();const e=this.activeTheme;this.injectGoogleFontLink("body",u(e.fontBody),e.fontWeightBody),this.injectGoogleFontLink("headings",u(e.fontHeadings),e.fontWeightHeadings),this.injectGoogleFontLink("brand",u(e.fontBrand),e.fontWeightBrand),this.injectGoogleFontLink("monospace",u(e.fontMonospace),e.fontWeightMonospace)}removeRuntimeGoogleFontLinks(){S(`root:${this.correlationId}-`),S(`picker:${this.correlationId}:`);for(const e of document.head.querySelectorAll(`link[data-esp-font^="${this.correlationId}-"]`))e.remove();for(const e of document.head.querySelectorAll(`link[data-esp-font-picker-root="${CSS.escape(this.correlationId)}"]`))e.remove()}get activeTheme(){return this.scheme==="dark"?this.resolvedDarkTheme:this.resolvedLightTheme}resolveThemes(){const e=this.lightThemeAttr?p(this.lightThemeAttr):null;this.resolvedLightTheme=e?v(f,e):{...f};const t=this.darkThemeAttr?p(this.darkThemeAttr):null;this.resolvedDarkTheme=t?v(g,t):{...g}}connectedCallback(){super.connectedCallback(),this.registerDocumentClickBridge(),this.resizeObserver.observe(this),this.hasUpdated&&(this.applyDefaultScheme(),this.syncGoogleFontLinks(),this.hasAuthorTheme||this.startThemeSettleTimer())}willUpdate(e){const t=["lightThemeAttr","darkThemeAttr"];(!this.lastSeedColor||t.some(h=>e.has(h)))&&(this.resolveThemes(),this.themeEventsReady&&d().publish("theme-changed",{correlationId:this.correlationId})),this.hasAuthorTheme&&this.settleTheme();const n=A(this.activeTheme,this.scheme==="dark"?"dark":"light"),i=new Set(Object.keys(n).filter(h=>h.startsWith("--esp-color-ramp-")));for(const h of this.appliedDataRampProperties)i.has(h)||this.style.removeProperty(h);for(const[h,k]of Object.entries(n))this.style.setProperty(h,k);this.appliedDataRampProperties=i;const m=this.activeTheme.seedColor;this.themeEventsReady&&this.lastSeedColor&&this.lastSeedColor!==m&&d().publish("seed-color-changed",{seedColor:m,correlationId:this.correlationId}),this.lastSeedColor=m,this.themeEventsReady&&e.has("iconSpriteUrl")&&d().publish("icon-sprite-url-changed",{iconSpriteUrl:this.iconSpriteUrl,correlationId:this.correlationId}),this.syncGoogleFontLinks()}firstUpdated(){const e=this.activeTheme.stylesheets;if(e.length)for(const t of e){const s=document.createElement("link");s.rel="stylesheet",s.href=t,document.head.appendChild(s)}if(!document.getElementById("esp-root-base-styles")){const t=document.createElement("style");t.id="esp-root-base-styles",t.textContent=l.lightDomStyles,document.head.appendChild(t)}this.applyDefaultScheme(),this.lastSeedColor=this.activeTheme.seedColor,this.themeEventsReady=!0,this.startThemeSettleTimer()}startThemeSettleTimer(){if(this.themeReadyState||this.themeSettleTimer!==void 0)return;this.themeSettleDeadline??=performance.now()+T;const e=Math.max(0,this.themeSettleDeadline-performance.now());if(e===0){this.closeThemeWindow();return}this.themeSettleTimer=setTimeout(()=>this.closeThemeWindow(),e)}closeThemeWindow(){this.themeSettleTimer=void 0,this.themePending&&!this.warnedThemeSettleTimeout&&(this.warnedThemeSettleTimeout=!0,console.warn(`Espalier root: theme-pending was declared but no ${this.scheme} theme arrived within ${T}ms, so the default palette is rendering. Assign ${this.scheme==="dark"?"darkTheme":"lightTheme"} (or remove theme-pending).`)),this.settleTheme()}updated(e){this.toggleAttribute("data-theme-ready",this.themeReadyState),(e.has("defaultScheme")||e.has("scheme"))&&!this.schemeExplicitlySet&&this.applyDefaultScheme()}disconnectedCallback(){this.themeSettleTimer!==void 0&&(clearTimeout(this.themeSettleTimer),this.themeSettleTimer=void 0),this.unregisterDocumentClickBridge(),this.systemSchemeQuery?.removeEventListener("change",this.handleSystemSchemeChange),this.systemSchemeQuery=null,this.resizeObserver.disconnect(),this.removeRuntimeGoogleFontLinks(),super.disconnectedCallback()}registerDocumentClickBridge(){this.documentClickRegistrationActive||(this.documentClickRegistrationActive=!0,l.connectedRootCount+=1,l.connectedRootCount===1&&document.addEventListener("click",l.handleDocumentClick))}unregisterDocumentClickBridge(){this.documentClickRegistrationActive&&(this.documentClickRegistrationActive=!1,l.connectedRootCount=Math.max(0,l.connectedRootCount-1),l.connectedRootCount===0&&document.removeEventListener("click",l.handleDocumentClick))}applyDefaultScheme(){this.schemeExplicitlySet||(this.resolvingDefaultScheme=!0,this.scheme=this.resolveDefaultScheme(),this.resolvingDefaultScheme=!1,this.syncSystemSchemeListener())}resolveDefaultScheme(){return this.defaultScheme==="dark"||this.defaultScheme==="system"&&window.matchMedia?.("(prefers-color-scheme: dark)").matches?"dark":"light"}syncSystemSchemeListener(){if(this.schemeExplicitlySet||this.defaultScheme!=="system"||!window.matchMedia){this.systemSchemeQuery?.removeEventListener("change",this.handleSystemSchemeChange),this.systemSchemeQuery=null;return}this.systemSchemeQuery||(this.systemSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.systemSchemeQuery.addEventListener("change",this.handleSystemSchemeChange))}render(){return w`<slot></slot>`}};o.connectedRootCount=0,o.handleDocumentClick=c=>{const e=c.composedPath().filter(t=>t instanceof HTMLElement&&t.tagName==="ESP-POPOVER");d().publish("close-popovers",{source:c.target??void 0,skipPopovers:e})},o.lightDomStyles=`
+var r=function(c,e,t,s){var n=arguments.length,i=n<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,m;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(c,e,t,s);else for(var l=c.length-1;l>=0;l--)(m=c[l])&&(i=(n<3?m(i):n>3?m(e,t,i):m(e,t))||i);return n>3&&i&&Object.defineProperty(e,t,i),i},a;import{css as b,html as w,LitElement as E}from"lit";import{customElement as C,property as h,state as R}from"lit/decorators.js";import{getEspBus as d}from"../shared/bus-events.js";import{subscribeToRootEvent as x}from"../shared/root-event-subscription.js";import{DEFAULT_LIGHT_THEME as f,DEFAULT_DARK_THEME as g,encodeTheme as y,parseTheme as u,mergeTheme as v}from"../shared/theme.js";import{extractFamily as p,isLocalFontFamily as L,removeRuntimeGoogleFontLinks as S,syncRuntimeGoogleFontLink as A}from"../shared/font-helpers.js";import{computeThemeProperties as D}from"./helpers/compute-theme-properties.js";import{registerImageTexture as I,registeredImageTextures as F}from"../shared/image-texture-registry.js";import{registerImageTexture as $,registeredImageTextures as Q,BUILT_IN_IMAGE_TEXTURES as q}from"../shared/image-texture-registry.js";const T=1e3;let o=a=class extends E{constructor(){super(...arguments),this.schemeBacker="",this.schemeExplicitlySet=!1,this.resolvingDefaultScheme=!1,this.themeEventsReady=!1,this.systemSchemeQuery=null,this.lastSeedColor="",this.resolvedLightTheme={...f},this.resolvedDarkTheme={...g},this.appliedThemeProperties=new Set,this.documentClickRegistrationActive=!1,this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.lightThemeAttr="",this.darkThemeAttr="",this.fontCSSRoot="/css/fonts/",this.fontDefinitionsUrl="",this.googleFontLoading="auto",this.iconSpriteUrl="/assets/icons.svg",this.themePending=!1,this.themeReadyState=!1,this.themeSettleWaiters=[],this.warnedThemeSettleTimeout=!1,this.defaultScheme="light",this.resizeObserver=new ResizeObserver(()=>{d().publish("window-resized",{emWidth:window.innerWidth/parseFloat(getComputedStyle(document.documentElement).fontSize),emHeight:window.innerHeight/parseFloat(getComputedStyle(document.documentElement).fontSize),pxWidth:window.innerWidth,pxHeight:window.innerHeight})}),this.handleSystemSchemeChange=e=>{this.schemeExplicitlySet||this.defaultScheme!=="system"||(this.resolvingDefaultScheme=!0,this.scheme=e.matches?"dark":"light",this.resolvingDefaultScheme=!1)}}static registerTexture(e,t){I(e,t)}static registeredTextures(){return F()}subscribeScoped(e,t){return x(this,e,t)}get lightTheme(){return this.lightThemeAttr?u(this.lightThemeAttr):null}set lightTheme(e){this.lightThemeAttr=e?y(e):""}get darkTheme(){return this.darkThemeAttr?u(this.darkThemeAttr):null}set darkTheme(e){this.darkThemeAttr=e?y(e):""}get themeSettled(){return this.themeReadyState}whenThemeSettled(){return this.themeReadyState?Promise.resolve():new Promise(e=>{this.themeSettleWaiters.push(e)})}get hasAuthorTheme(){return!!(this.scheme==="dark"?this.darkThemeAttr:this.lightThemeAttr)}settleTheme(){if(this.themeSettleTimer!==void 0&&(clearTimeout(this.themeSettleTimer),this.themeSettleTimer=void 0),this.themeReadyState)return;this.themeReadyState=!0;const e=this.themeSettleWaiters;this.themeSettleWaiters=[];for(const t of e)t()}get scheme(){return this.schemeBacker}set scheme(e){const t=e==="dark"?"dark":e==="light"?"light":"",s=this.schemeBacker,n=this.schemeExplicitlySet;this.resolvingDefaultScheme||(this.schemeExplicitlySet=t.length>0);const i=t||this.resolveDefaultScheme();n!==this.schemeExplicitlySet&&this.isConnected&&this.syncSystemSchemeListener(),i!==s&&(this.schemeBacker=i,this.requestUpdate("scheme",s),this.themeEventsReady&&d().publish("scheme-changed",{scheme:i,correlationId:this.correlationId}))}get seedColor(){return this.activeTheme.seedColor}injectGoogleFontLink(e,t,s){const n=`${this.correlationId}-${e}`,i=L(t)?"":t;A({owner:`root:${n}`,family:i,weight:s,enabled:this.googleFontLoading!=="none",attributes:{"data-esp-font":n}})}syncGoogleFontLinks(){this.googleFontLoading==="none"&&this.removeRuntimeGoogleFontLinks();const e=this.activeTheme;this.injectGoogleFontLink("body",p(e.fontBody),e.fontWeightBody),this.injectGoogleFontLink("headings",p(e.fontHeadings),e.fontWeightHeadings),this.injectGoogleFontLink("brand",p(e.fontBrand),e.fontWeightBrand),this.injectGoogleFontLink("menu",p(e.fontMenu),e.fontWeightMenu),this.injectGoogleFontLink("monospace",p(e.fontMonospace),e.fontWeightMonospace)}removeRuntimeGoogleFontLinks(){S(`root:${this.correlationId}-`),S(`picker:${this.correlationId}:`);for(const e of document.head.querySelectorAll(`link[data-esp-font^="${this.correlationId}-"]`))e.remove();for(const e of document.head.querySelectorAll(`link[data-esp-font-picker-root="${CSS.escape(this.correlationId)}"]`))e.remove()}get activeTheme(){return this.scheme==="dark"?this.resolvedDarkTheme:this.resolvedLightTheme}resolveThemes(){const e=this.lightThemeAttr?u(this.lightThemeAttr):null;this.resolvedLightTheme=e?v(f,e):{...f};const t=this.darkThemeAttr?u(this.darkThemeAttr):null;this.resolvedDarkTheme=t?v(g,t):{...g}}connectedCallback(){super.connectedCallback(),this.registerDocumentClickBridge(),this.resizeObserver.observe(this),this.hasUpdated&&(this.applyDefaultScheme(),this.syncGoogleFontLinks(),this.hasAuthorTheme||this.startThemeSettleTimer())}willUpdate(e){const t=["lightThemeAttr","darkThemeAttr"];(!this.lastSeedColor||t.some(l=>e.has(l)))&&(this.resolveThemes(),this.themeEventsReady&&d().publish("theme-changed",{correlationId:this.correlationId})),this.hasAuthorTheme&&this.settleTheme();const n=D(this.activeTheme,this.scheme==="dark"?"dark":"light"),i=new Set(Object.keys(n));for(const l of this.appliedThemeProperties)i.has(l)||this.style.removeProperty(l);for(const[l,k]of Object.entries(n))this.style.setProperty(l,k);this.appliedThemeProperties=i;const m=this.activeTheme.seedColor;this.themeEventsReady&&this.lastSeedColor&&this.lastSeedColor!==m&&d().publish("seed-color-changed",{seedColor:m,correlationId:this.correlationId}),this.lastSeedColor=m,this.themeEventsReady&&e.has("iconSpriteUrl")&&d().publish("icon-sprite-url-changed",{iconSpriteUrl:this.iconSpriteUrl,correlationId:this.correlationId}),this.syncGoogleFontLinks()}firstUpdated(){const e=this.activeTheme.stylesheets;if(e.length)for(const t of e){const s=document.createElement("link");s.rel="stylesheet",s.href=t,document.head.appendChild(s)}if(!document.getElementById("esp-root-base-styles")){const t=document.createElement("style");t.id="esp-root-base-styles",t.textContent=a.lightDomStyles,document.head.appendChild(t)}this.applyDefaultScheme(),this.lastSeedColor=this.activeTheme.seedColor,this.themeEventsReady=!0,this.startThemeSettleTimer()}startThemeSettleTimer(){if(this.themeReadyState||this.themeSettleTimer!==void 0)return;this.themeSettleDeadline??=performance.now()+T;const e=Math.max(0,this.themeSettleDeadline-performance.now());if(e===0){this.closeThemeWindow();return}this.themeSettleTimer=setTimeout(()=>this.closeThemeWindow(),e)}closeThemeWindow(){this.themeSettleTimer=void 0,this.themePending&&!this.warnedThemeSettleTimeout&&(this.warnedThemeSettleTimeout=!0,console.warn(`Espalier root: theme-pending was declared but no ${this.scheme} theme arrived within ${T}ms, so the default palette is rendering. Assign ${this.scheme==="dark"?"darkTheme":"lightTheme"} (or remove theme-pending).`)),this.settleTheme()}updated(e){this.toggleAttribute("data-theme-ready",this.themeReadyState),(e.has("defaultScheme")||e.has("scheme"))&&!this.schemeExplicitlySet&&this.applyDefaultScheme()}disconnectedCallback(){this.themeSettleTimer!==void 0&&(clearTimeout(this.themeSettleTimer),this.themeSettleTimer=void 0),this.unregisterDocumentClickBridge(),this.systemSchemeQuery?.removeEventListener("change",this.handleSystemSchemeChange),this.systemSchemeQuery=null,this.resizeObserver.disconnect(),this.removeRuntimeGoogleFontLinks(),super.disconnectedCallback()}registerDocumentClickBridge(){this.documentClickRegistrationActive||(this.documentClickRegistrationActive=!0,a.connectedRootCount+=1,a.connectedRootCount===1&&document.addEventListener("click",a.handleDocumentClick))}unregisterDocumentClickBridge(){this.documentClickRegistrationActive&&(this.documentClickRegistrationActive=!1,a.connectedRootCount=Math.max(0,a.connectedRootCount-1),a.connectedRootCount===0&&document.removeEventListener("click",a.handleDocumentClick))}applyDefaultScheme(){this.schemeExplicitlySet||(this.resolvingDefaultScheme=!0,this.scheme=this.resolveDefaultScheme(),this.resolvingDefaultScheme=!1,this.syncSystemSchemeListener())}resolveDefaultScheme(){return this.defaultScheme==="dark"||this.defaultScheme==="system"&&window.matchMedia?.("(prefers-color-scheme: dark)").matches?"dark":"light"}syncSystemSchemeListener(){if(this.schemeExplicitlySet||this.defaultScheme!=="system"||!window.matchMedia){this.systemSchemeQuery?.removeEventListener("change",this.handleSystemSchemeChange),this.systemSchemeQuery=null;return}this.systemSchemeQuery||(this.systemSchemeQuery=window.matchMedia("(prefers-color-scheme: dark)"),this.systemSchemeQuery.addEventListener("change",this.handleSystemSchemeChange))}render(){return w`<slot></slot>`}};o.connectedRootCount=0,o.handleDocumentClick=c=>{const e=c.composedPath().filter(t=>t instanceof HTMLElement&&t.tagName==="ESP-POPOVER");d().publish("close-popovers",{source:c.target??void 0,skipPopovers:e})},o.lightDomStyles=`
     
     esp-root {
       font-family: var(--_esp-font-body-effective, var(--esp-font-body, system-ui, sans-serif));
@@ -136,4 +136,4 @@ var r=function(c,e,t,s){var n=arguments.length,i=n<3?e:s===null?s=Object.getOwnP
     :host([theme-pending]:not([data-theme-ready])) {
       visibility: hidden;
     }
-  `,r([a({attribute:!1})],o.prototype,"correlationId",void 0),r([a({attribute:"light-theme"})],o.prototype,"lightThemeAttr",void 0),r([a({attribute:"dark-theme"})],o.prototype,"darkThemeAttr",void 0),r([a({attribute:!1})],o.prototype,"lightTheme",null),r([a({attribute:!1})],o.prototype,"darkTheme",null),r([a({attribute:"font-css-root",type:String})],o.prototype,"fontCSSRoot",void 0),r([a({attribute:"font-definitions-url",type:String})],o.prototype,"fontDefinitionsUrl",void 0),r([a({attribute:"google-font-loading",type:String})],o.prototype,"googleFontLoading",void 0),r([a({attribute:"icon-sprite-url",type:String})],o.prototype,"iconSpriteUrl",void 0),r([a({attribute:"theme-pending",reflect:!0,type:Boolean})],o.prototype,"themePending",void 0),r([C()],o.prototype,"themeReadyState",void 0),r([a({attribute:"default-scheme",type:String,reflect:!0})],o.prototype,"defaultScheme",void 0),r([a({attribute:"scheme",type:String,reflect:!0})],o.prototype,"scheme",null),o=l=r([R("esp-root")],o);export{q as BUILT_IN_IMAGE_TEXTURES,o as EspalierRoot,$ as registerImageTexture,Q as registeredImageTextures};
+  `,r([h({attribute:!1})],o.prototype,"correlationId",void 0),r([h({attribute:"light-theme"})],o.prototype,"lightThemeAttr",void 0),r([h({attribute:"dark-theme"})],o.prototype,"darkThemeAttr",void 0),r([h({attribute:!1})],o.prototype,"lightTheme",null),r([h({attribute:!1})],o.prototype,"darkTheme",null),r([h({attribute:"font-css-root",type:String})],o.prototype,"fontCSSRoot",void 0),r([h({attribute:"font-definitions-url",type:String})],o.prototype,"fontDefinitionsUrl",void 0),r([h({attribute:"google-font-loading",type:String})],o.prototype,"googleFontLoading",void 0),r([h({attribute:"icon-sprite-url",type:String})],o.prototype,"iconSpriteUrl",void 0),r([h({attribute:"theme-pending",reflect:!0,type:Boolean})],o.prototype,"themePending",void 0),r([R()],o.prototype,"themeReadyState",void 0),r([h({attribute:"default-scheme",type:String,reflect:!0})],o.prototype,"defaultScheme",void 0),r([h({attribute:"scheme",type:String,reflect:!0})],o.prototype,"scheme",null),o=a=r([C("esp-root")],o);export{q as BUILT_IN_IMAGE_TEXTURES,o as EspalierRoot,$ as registerImageTexture,Q as registeredImageTextures};

package/dist/root/helpers/compute-theme-properties.js

@@ -1 +1 @@
-import{parseCssColor as f,serializeOklch as u,gamutMapToSRGB as m}from"../../shared/color-engine.js";import{generateScaleProperties as y}from"../../shared/scale-engine.js";import{DATA_SERIES_KEYS as b,DEFAULT_DATA_PALETTE as k,generateDivergingRamp as v,generateSequentialRamp as O}from"../../shared/data-colors.js";import{DEFAULT_BODY_FONT_FAMILY as B,DEFAULT_MONOSPACE_FONT_FAMILY as R,resolveDataColorSource as E}from"../../shared/theme.js";import{dataCompanionProperties as w}from"./data-companion-properties.js";import{lightnessRampProperties as I}from"./lightness-ramp-properties.js";import{computeVariants as $}from"./compute-variants.js";import{computeSemanticProperties as T}from"./compute-semantic-properties.js";function x(o){return{rootFontSize:o.rootFontSize,typeRatio:o.typeRatio,spaceRatio:o.spaceRatio,borderRadius:o.borderRadius,viewportMin:o.viewportMin,viewportMax:o.viewportMax}}function A(o,d,g){const i={},a=o.dataPalette??k;for(let r=0;r<b.length;r+=1){const c=b[r],t=f(g(a[c],`dataPalette.${c}`))??d;i[`--esp-color-series-${r+1}`]=u(m(t))}return i}function U(o,d,g){const i=f(o.seedColor);if(!i)return{};const a={};a["--esp-scheme"]=d,a["--esp-seed-color"]=o.seedColor;const r=$(i,o);for(const[e,n]of Object.entries(r))a[`--esp-color-${e}`]=u(m(n));const c=new Set,t=(e,n)=>{const s=typeof e=="string"?E(e,o.anchors):null;if(s)return s;const p=typeof e=="string"?e:String(e);return c.has(p)||(c.add(p),console.warn(`Espalier theme: ${n} color source "${p}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared data colors.`)),o.seedColor};Object.assign(a,A(o,i,t));for(const[e,n]of Object.entries(o.dataRamps??{}))try{(n.type==="sequential"?O(t(n.source,`dataRamps.${e}.source`),{steps:n.steps,lightnessStart:n.lightnessStart,lightnessEnd:n.lightnessEnd}):v(t(n.start,`dataRamps.${e}.start`),t(n.end,`dataRamps.${e}.end`),{steps:n.steps,neutral:n.neutral===void 0?void 0:t(n.neutral,`dataRamps.${e}.neutral`)})).forEach((p,S)=>{a[`--esp-color-ramp-${e}-${S+1}`]=p})}catch(s){console.warn(`Espalier theme: dataRamps.${e} cannot be generated \u2014 ${s instanceof Error?s.message:String(s)}`)}Object.assign(a,I(o));const l=new Set;return Object.assign(a,T(o,r,{trace:g,onUnresolvedSource:e=>{l.has(e)||(l.add(e),console.warn(`Espalier theme: color source "${e}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared anchors.`))}})),Object.assign(a,w(a)),Object.assign(a,y(x(o))),a["--esp-font-body"]=o.fontBody||B,o.fontHeadings&&(a["--esp-font-headings"]=o.fontHeadings),o.fontBrand&&(a["--esp-font-brand"]=o.fontBrand),a["--esp-font-monospace"]=o.fontMonospace||R,a["--esp-font-weight-body"]=o.fontWeightBody,a["--esp-font-weight-headings"]=o.fontWeightHeadings,a["--esp-font-weight-brand"]=o.fontWeightBrand,a["--esp-font-weight-monospace"]=o.fontWeightMonospace,o.pageBackgroundImage&&(a["--esp-page-background-image"]=o.pageBackgroundImage),o.pageBackgroundImageOpacity!==void 0&&(a["--esp-page-background-image-opacity"]=o.pageBackgroundImageOpacity.toString()),o.boxBackgroundImage&&(a["--esp-box-background-image"]=o.boxBackgroundImage),o.boxBackgroundImageOpacity!==void 0&&(a["--esp-box-background-image-opacity"]=o.boxBackgroundImageOpacity.toString()),o.vellumOpacity!==void 0&&(a["--esp-vellum-opacity"]=o.vellumOpacity.toString()),o.vellumBackgroundImage&&(a["--esp-vellum-background-image"]=o.vellumBackgroundImage),o.vellumBackgroundImageOpacity!==void 0&&(a["--esp-vellum-background-image-opacity"]=o.vellumBackgroundImageOpacity.toString()),a}export{U as computeThemeProperties,A as dataSeriesProperties};
+import{parseCssColor as f,serializeOklch as u,gamutMapToSRGB as m}from"../../shared/color-engine.js";import{generateScaleProperties as y}from"../../shared/scale-engine.js";import{DATA_SERIES_KEYS as b,DEFAULT_DATA_PALETTE as k,generateDivergingRamp as v,generateSequentialRamp as O}from"../../shared/data-colors.js";import{DEFAULT_BODY_FONT_FAMILY as B,DEFAULT_MONOSPACE_FONT_FAMILY as R,resolveDataColorSource as w}from"../../shared/theme.js";import{dataCompanionProperties as E}from"./data-companion-properties.js";import{lightnessRampProperties as I}from"./lightness-ramp-properties.js";import{computeVariants as $}from"./compute-variants.js";import{computeSemanticProperties as M}from"./compute-semantic-properties.js";function T(o){return{rootFontSize:o.rootFontSize,typeRatio:o.typeRatio,spaceRatio:o.spaceRatio,borderRadius:o.borderRadius,viewportMin:o.viewportMin,viewportMax:o.viewportMax}}function x(o,d,g){const i={},a=o.dataPalette??k;for(let t=0;t<b.length;t+=1){const p=b[t],r=f(g(a[p],`dataPalette.${p}`))??d;i[`--esp-color-series-${t+1}`]=u(m(r))}return i}function W(o,d,g){const i=f(o.seedColor);if(!i)return{};const a={};a["--esp-scheme"]=d,a["--esp-seed-color"]=o.seedColor;const t=$(i,o);for(const[e,n]of Object.entries(t))a[`--esp-color-${e}`]=u(m(n));const p=new Set,r=(e,n)=>{const s=typeof e=="string"?w(e,o.anchors):null;if(s)return s;const c=typeof e=="string"?e:String(e);return p.has(c)||(p.add(c),console.warn(`Espalier theme: ${n} color source "${c}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared data colors.`)),o.seedColor};Object.assign(a,x(o,i,r));for(const[e,n]of Object.entries(o.dataRamps??{}))try{(n.type==="sequential"?O(r(n.source,`dataRamps.${e}.source`),{steps:n.steps,lightnessStart:n.lightnessStart,lightnessEnd:n.lightnessEnd}):v(r(n.start,`dataRamps.${e}.start`),r(n.end,`dataRamps.${e}.end`),{steps:n.steps,neutral:n.neutral===void 0?void 0:r(n.neutral,`dataRamps.${e}.neutral`)})).forEach((c,S)=>{a[`--esp-color-ramp-${e}-${S+1}`]=c})}catch(s){console.warn(`Espalier theme: dataRamps.${e} cannot be generated \u2014 ${s instanceof Error?s.message:String(s)}`)}Object.assign(a,I(o));const l=new Set;return Object.assign(a,M(o,t,{trace:g,onUnresolvedSource:e=>{l.has(e)||(l.add(e),console.warn(`Espalier theme: color source "${e}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared anchors.`))}})),Object.assign(a,E(a)),Object.assign(a,y(T(o))),a["--esp-font-body"]=o.fontBody||B,o.fontHeadings&&(a["--esp-font-headings"]=o.fontHeadings),o.fontBrand&&(a["--esp-font-brand"]=o.fontBrand),o.fontMenu&&(a["--esp-font-menu"]=o.fontMenu),a["--esp-font-monospace"]=o.fontMonospace||R,a["--esp-font-weight-body"]=o.fontWeightBody,a["--esp-font-weight-headings"]=o.fontWeightHeadings,a["--esp-font-weight-brand"]=o.fontWeightBrand,a["--esp-font-weight-menu"]=o.fontWeightMenu,a["--esp-font-weight-monospace"]=o.fontWeightMonospace,o.pageBackgroundImage&&(a["--esp-page-background-image"]=o.pageBackgroundImage),o.pageBackgroundImageOpacity!==void 0&&(a["--esp-page-background-image-opacity"]=o.pageBackgroundImageOpacity.toString()),o.boxBackgroundImage&&(a["--esp-box-background-image"]=o.boxBackgroundImage),o.boxBackgroundImageOpacity!==void 0&&(a["--esp-box-background-image-opacity"]=o.boxBackgroundImageOpacity.toString()),o.vellumOpacity!==void 0&&(a["--esp-vellum-opacity"]=o.vellumOpacity.toString()),o.vellumBackgroundImage&&(a["--esp-vellum-background-image"]=o.vellumBackgroundImage),o.vellumBackgroundImageOpacity!==void 0&&(a["--esp-vellum-background-image-opacity"]=o.vellumBackgroundImageOpacity.toString()),a}export{W as computeThemeProperties,x as dataSeriesProperties};

package/dist/shared/configured-brand.d.ts

@@ -0,0 +1,33 @@
+import { nothing } from "lit";
+export interface ConfiguredBrandOptions {
+    brandLogo: string;
+    brandText: string;
+    brandHref: string;
+    brandAlt: string;
+}
+export interface ConfiguredBrandConfiguration {
+    scheme: "light" | "dark" | "";
+    brandLogo: string;
+    brandColor: string;
+    lightBrandLogo: string;
+    darkBrandLogo: string;
+    lightBrandColor: string;
+    darkBrandColor: string;
+}
+export interface ResolvedConfiguredBrand {
+    brandLogo: string;
+    brandColor: string;
+}
+/**
+ * Resolve the configured-brand logo and color for the active scheme.
+ * Non-empty scheme values take precedence over generic values. Empty
+ * scheme values are treated as absent so generic configuration and the
+ * consuming component's CSS-token defaults remain available.
+ */
+export declare function resolveConfiguredBrand({ scheme, brandLogo, brandColor, lightBrandLogo, darkBrandLogo, lightBrandColor, darkBrandColor, }: ConfiguredBrandConfiguration): ResolvedConfiguredBrand;
+/**
+ * Render the shared configured-brand fallback used by header and footer.
+ * Plain anchors and images are intentional: a brand identity should not gain
+ * the interaction chrome of Espalier's application-navigation controls.
+ */
+export declare function renderConfiguredBrand({ brandLogo, brandText, brandHref, brandAlt, }: ConfiguredBrandOptions): typeof nothing | import("lit-html").TemplateResult<1>;

package/dist/shared/events.d.ts

@@ -98,6 +98,7 @@ export declare const ESP_EVENTS: {
     readonly MENU_GROUP_TOGGLE: "esp-menu-group-toggle";
     readonly MENU_DRAWER_OPENED: "esp-menu-drawer-opened";
     readonly MENU_DRAWER_CLOSED: "esp-menu-drawer-closed";
+    readonly MENU_DRAWER_PRESENTED: "esp-menu-drawer-presented";
     readonly PAGE_WORKSPACE_RESIZE: "esp-page-workspace-resize";
     readonly PICKER_MENU_SELECTION_CHANGED: "esp-picker-menu-selection-changed";
     readonly PICKER_MENU_CLOSE_REQUESTED: "esp-picker-menu-close-requested";
@@ -315,6 +316,7 @@ export interface EspalierDialogEventMap {
 export interface EspalierMenuEventMap {
     [ESP_EVENTS.MENU_DRAWER_OPENED]: CustomEvent<void>;
     [ESP_EVENTS.MENU_DRAWER_CLOSED]: CustomEvent<void>;
+    [ESP_EVENTS.MENU_DRAWER_PRESENTED]: CustomEvent<void>;
 }
 /** Events fired by `<esp-menu-group>`. */
 export interface EspalierMenuGroupEventMap {

package/dist/shared/events.js

@@ -1 +1 @@
-import{VALIDITY_CHANGED_EVENT as r}from"./validation.js";import{VALIDITY_CHANGED_EVENT as e}from"./validation.js";const s={VALUE_CHANGED:"esp-value-changed",VALIDITY_CHANGED:e,CLICKED:"esp-clicked",ACTION_MENU_SELECT:"esp-action-menu-select",BURGER_OPENED:"esp-burger-opened",BURGER_CLOSED:"esp-burger-closed",DETAILS_TOGGLE:"esp-details-toggle",DETAILS_GROUP_CHANGE:"esp-details-group-change",DIALOG_OPENED:"esp-dialog-opened",DIALOG_CLOSING:"esp-dialog-closing",DIALOG_CLOSED:"esp-dialog-closed",FILE_UPLOAD_FILES_SELECTED:"esp-file-upload-files-selected",FLYOUT_OPENED:"esp-flyout-opened",FLYOUT_CLOSED:"esp-flyout-closed",FLYOUT_STATE_CHANGED:"esp-flyout-state-changed",FOCUS_PICKER_CHANGED:"esp-focus-picker-changed",FORM_DIALOG_CLOSE_REQUESTED:"esp-form-dialog-close-requested",FORM_SUBMIT:"esp-form-submit",FORM_SUBMIT_RESPONSE:"esp-form-submit-response",FORM_SUBMIT_ERROR:"esp-form-submit-error",GRID_EVENT:"esp-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",HEADER_THEME_TOGGLE:"esp-header-theme-toggle",IMAGE_UPLOAD_FILE_SELECTED:"esp-image-upload-file-selected",IMAGE_UPLOAD_FILE_REMOVED:"esp-image-upload-file-removed",IMAGE_UPLOAD_FILES_REJECTED:"esp-image-upload-files-rejected",IMAGE_UPLOAD_RETRY:"esp-image-upload-retry",IMAGE_UPLOAD_IMAGES_REORDERED:"esp-image-upload-images-reordered",INFO_DESTROY:"esp-info-destroy",INPUT_ICON_CLICKED:"esp-input-icon-clicked",LIGHTBOX_CHANGED:"esp-lightbox-changed",MENU_GROUP_TOGGLE:"esp-menu-group-toggle",MENU_DRAWER_OPENED:"esp-menu-drawer-opened",MENU_DRAWER_CLOSED:"esp-menu-drawer-closed",PAGE_WORKSPACE_RESIZE:"esp-page-workspace-resize",PICKER_MENU_SELECTION_CHANGED:"esp-picker-menu-selection-changed",PICKER_MENU_CLOSE_REQUESTED:"esp-picker-menu-close-requested",PICKER_MENU_DISMISS_REQUESTED:"esp-picker-menu-dismiss-requested",PICKER_MENU_RANGE_CHANGED:"esp-picker-menu-range-changed",POPOVER_OPENED:"esp-popover-opened",POPOVER_CLOSED:"esp-popover-closed",SEARCH_REQUESTED:"esp-search-requested",SEARCH_RESULT_SELECTED:"esp-search-result-selected",SEARCH_CLOSED:"esp-search-closed",TAB_GROUP_CHANGED:"esp-tab-group-changed",TREE_SELECT:"esp-tree-select",TREE_TOGGLE:"esp-tree-toggle",TREE_GRAFT_REQUEST:"esp-tree-graft-request",TREE_GRAFT:"esp-tree-graft",TREE_EDIT:"esp-tree-edit",TREE_DELETE:"esp-tree-delete",TREE_MOVE_UP:"esp-tree-move-up",TREE_MOVE_DOWN:"esp-tree-move-down",TREE_CUT:"esp-tree-cut",TREE_PASTE_CHILD:"esp-tree-paste-child",TREE_GRAFT_INPUT:"esp-tree-graft-input"};export{s as ESP_EVENTS,r as VALIDITY_CHANGED_EVENT};
+import{VALIDITY_CHANGED_EVENT as r}from"./validation.js";import{VALIDITY_CHANGED_EVENT as e}from"./validation.js";const s={VALUE_CHANGED:"esp-value-changed",VALIDITY_CHANGED:e,CLICKED:"esp-clicked",ACTION_MENU_SELECT:"esp-action-menu-select",BURGER_OPENED:"esp-burger-opened",BURGER_CLOSED:"esp-burger-closed",DETAILS_TOGGLE:"esp-details-toggle",DETAILS_GROUP_CHANGE:"esp-details-group-change",DIALOG_OPENED:"esp-dialog-opened",DIALOG_CLOSING:"esp-dialog-closing",DIALOG_CLOSED:"esp-dialog-closed",FILE_UPLOAD_FILES_SELECTED:"esp-file-upload-files-selected",FLYOUT_OPENED:"esp-flyout-opened",FLYOUT_CLOSED:"esp-flyout-closed",FLYOUT_STATE_CHANGED:"esp-flyout-state-changed",FOCUS_PICKER_CHANGED:"esp-focus-picker-changed",FORM_DIALOG_CLOSE_REQUESTED:"esp-form-dialog-close-requested",FORM_SUBMIT:"esp-form-submit",FORM_SUBMIT_RESPONSE:"esp-form-submit-response",FORM_SUBMIT_ERROR:"esp-form-submit-error",GRID_EVENT:"esp-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",HEADER_THEME_TOGGLE:"esp-header-theme-toggle",IMAGE_UPLOAD_FILE_SELECTED:"esp-image-upload-file-selected",IMAGE_UPLOAD_FILE_REMOVED:"esp-image-upload-file-removed",IMAGE_UPLOAD_FILES_REJECTED:"esp-image-upload-files-rejected",IMAGE_UPLOAD_RETRY:"esp-image-upload-retry",IMAGE_UPLOAD_IMAGES_REORDERED:"esp-image-upload-images-reordered",INFO_DESTROY:"esp-info-destroy",INPUT_ICON_CLICKED:"esp-input-icon-clicked",LIGHTBOX_CHANGED:"esp-lightbox-changed",MENU_GROUP_TOGGLE:"esp-menu-group-toggle",MENU_DRAWER_OPENED:"esp-menu-drawer-opened",MENU_DRAWER_CLOSED:"esp-menu-drawer-closed",MENU_DRAWER_PRESENTED:"esp-menu-drawer-presented",PAGE_WORKSPACE_RESIZE:"esp-page-workspace-resize",PICKER_MENU_SELECTION_CHANGED:"esp-picker-menu-selection-changed",PICKER_MENU_CLOSE_REQUESTED:"esp-picker-menu-close-requested",PICKER_MENU_DISMISS_REQUESTED:"esp-picker-menu-dismiss-requested",PICKER_MENU_RANGE_CHANGED:"esp-picker-menu-range-changed",POPOVER_OPENED:"esp-popover-opened",POPOVER_CLOSED:"esp-popover-closed",SEARCH_REQUESTED:"esp-search-requested",SEARCH_RESULT_SELECTED:"esp-search-result-selected",SEARCH_CLOSED:"esp-search-closed",TAB_GROUP_CHANGED:"esp-tab-group-changed",TREE_SELECT:"esp-tree-select",TREE_TOGGLE:"esp-tree-toggle",TREE_GRAFT_REQUEST:"esp-tree-graft-request",TREE_GRAFT:"esp-tree-graft",TREE_EDIT:"esp-tree-edit",TREE_DELETE:"esp-tree-delete",TREE_MOVE_UP:"esp-tree-move-up",TREE_MOVE_DOWN:"esp-tree-move-down",TREE_CUT:"esp-tree-cut",TREE_PASTE_CHILD:"esp-tree-paste-child",TREE_GRAFT_INPUT:"esp-tree-graft-input"};export{s as ESP_EVENTS,r as VALIDITY_CHANGED_EVENT};