@taprootio/espalier 2.3.0 → 2.4.0

package/dist/menu/esp-menu.js

@@ -1,4 +1,4 @@
-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 x,html as w,nothing as f}from"lit";import{customElement as E,property as l,state as g}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{unsafeHTML as v}from"lit/directives/unsafe-html.js";import{createRef as d,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{getEspBus as D}from"../shared/bus-events.js";import{normalizePath as S,pathStartsWithSegment as y,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 C}from"./esp-menu-item.js";import{EspalierMenuGroup as u}from"./esp-menu-group.js";const O="(max-width: 50em)";let a=class extends b{constructor(){super(),this.itemsSlot=d(),this.railRef=d(),this.scrimRef=d(),this.drawerRef=d(),this.bus=D(),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.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.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(O),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"))&&(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 C?(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?"drawer-opened":"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 y(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?y(location.pathname,S(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 C){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 n=function(d,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(d,e,r,o);else for(var h=d.length-1;h>=0;h--)(s=d[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 x,html as w,nothing as f}from"lit";import{customElement as E,property as l,state as g}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{unsafeHTML as v}from"lit/directives/unsafe-html.js";import{createRef as p,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{getEspBus as D}from"../shared/bus-events.js";import{normalizePath as S,pathStartsWithSegment as y,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 C}from"./esp-menu-item.js";import{EspalierMenuGroup as u}from"./esp-menu-group.js";const O="(max-width: 50em)";let a=class extends b{constructor(){super(),this.itemsSlot=p(),this.railRef=p(),this.scrimRef=p(),this.drawerRef=p(),this.bus=D(),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.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.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(O),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"))&&(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 C?(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?"drawer-opened":"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 y(location.pathname,e.urlPrefix)}groupPathMatches(e){if(this.groupUrlPrefixMatches(e))return!0;const r=e.url||e.getAttribute("url");return r?y(location.pathname,S(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 C){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
         label=${e.label}
         .url=${e.url}
         .icon=${e.icon}
@@ -79,9 +79,8 @@ var n=function(p,e,r,o){var t=arguments.length,i=t<3?e:o===null?o=Object.getOwnP
         display: flex;
         flex-direction: column;
         width: min-content;
-        max-height: calc(100dvh - var(--esp-menu-top-offset, 0px));
-        overflow-y: auto;
-        scrollbar-width: thin;
+        
+        overflow-y: visible;
         background-color: var(--esp-menu-background, var(--esp-color-layer-1));
         border-bottom: 1px solid var(--esp-menu-border-color, var(--esp-color-border));
         box-shadow: 2px 0 6px -2px var(--esp-color-shadow);

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

@@ -25,7 +25,7 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  *   </esp-header>
  *   <esp-menu slot="sidebar" mode="drawer"></esp-menu>
  *   <div slot="right" style="background-color: purple;">right</div>
- *   <div slot="footer" style="background-color: blue;">footer</div>
+ *   <esp-footer slot="footer" brand-text="Espalier"></esp-footer>
  *   <div style="background-color: black; overflow: hidden;">
  *     content
  *   </div>
@@ -43,7 +43,9 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  * The persistent `right` aside and the transient flyout are
  * complementary, not alternatives. A flyout opened with an `anchor`
  * aligns to that trigger and stays in the same document scroll flow.
- * @slot footer - Content to place in the footer.
+ * @slot footer - Content to place in the footer. Slot `esp-footer` directly
+ * to receive the page's surface-alignment custom-property contract. A wrapper
+ * can preserve landmark semantics but does not receive that direct contract.
  * @slot - The main page content. The main content region applies
  * `contain: inline-size` so child components cannot push the
  * content well wider than its grid column. In `narrow` mode,
@@ -65,7 +67,7 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  *     </esp-menu>
  *     <esp-header-button slot="buttons" icon="cog" aria-label="Settings"></esp-header-button>
  *   </esp-header>
- *   <div slot="footer" style="background-color: blue;">footer</div>
+ *   <esp-footer slot="footer" brand-text="Espalier"></esp-footer>
  *   <section style="overflow: hidden;">
  *     <h2>Long content</h2>
  *     <p populate-from="longParagraph"></p>
@@ -98,7 +100,7 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  *   <div slot="header" style="background-color: red;">header</div>
  *   <div slot="sidebar" style="background-color: green;">sidebar</div>
  *   <div slot="right" style="background-color: purple;">right</div>
- *   <div slot="footer" style="background-color: blue;">footer</div>
+ *   <esp-footer slot="footer" brand-text="Espalier"></esp-footer>
  *   <div style="background-color: black; overflow: hidden;">
  *     content
  *   </div>
@@ -162,7 +164,7 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  *   <div slot="header" style="background-color: red;">header</div>
  *   <div slot="sidebar" style="background-color: green;">sidebar</div>
  *   <div slot="right" style="background-color: purple;">right</div>
- *   <div slot="footer" style="background-color: blue;">footer</div>
+ *   <esp-footer slot="footer" brand-text="Espalier"></esp-footer>
  *   <div style="overflow: hidden;">
  *     <h2>With background image</h2>
  *   </div>
@@ -185,7 +187,7 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  *   <div slot="header" style="background-color: red;">header</div>
  *   <div slot="sidebar" style="background-color: green;">sidebar</div>
  *   <div slot="right" style="background-color: purple;">right</div>
- *   <div slot="footer" style="background-color: blue;">footer</div>
+ *   <esp-footer slot="footer" brand-text="Espalier"></esp-footer>
  *   <div style="background-color: black; overflow: hidden;">
  *     content
  *   </div>
@@ -202,6 +204,7 @@ type HeaderPosition = "normal" | "sticky" | "fixed";
  */
 export declare class EspalierPage extends EspalierElementBase {
     constructor();
+    connectedCallback(): void;
     /**
      * The layout mode of the page.
      *

package/dist/page/esp-page.js

@@ -1,5 +1,5 @@
-var d=function(h,e,s,o){var n=arguments.length,a=n<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,s):o,t;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(h,e,s,o);else for(var r=h.length-1;r>=0;r--)(t=h[r])&&(a=(n<3?t(a):n>3?t(e,s,a):t(e,s))||a);return n>3&&a&&Object.defineProperty(e,s,a),a};import{css as f,html as m}from"lit";import{customElement as v,property as l}from"lit/decorators.js";import{classMap as y}from"lit/directives/class-map.js";import{createRef as c,ref as u}from"lit/directives/ref.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as p}from"./bi-directional-sticky-controller.js";import{getEspBus as w}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";let i=class extends g{constructor(){super(),this.dialogZone=c(),this.flyoutSlot=c(),this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,new p(this,".esp-page-left > .sticky-wrapper"),new p(this,".esp-page-right > .sticky-wrapper"),new p(this,".esp-page-flyout > .sticky-wrapper"),this.addEventListener("flyout-state-changed",e=>this.syncFlyoutState(e))}syncFlyoutState(e){if(e&&e.target?.closest?.("esp-page")!==this)return;const s=t=>{const r=t.mode;return(typeof r=="string"?r:t.getAttribute("mode"))==="overlay"},o=t=>{const r=t.open;return typeof r=="boolean"?r:t.hasAttribute("open")},n=t=>t.anchor!=null,a=(this.flyoutSlot.value?.assignedElements()??[]).filter(t=>t.tagName==="ESP-FLYOUT");this.toggleAttribute("flyout-open",a.some(t=>o(t)&&!s(t))),this.toggleAttribute("flyout-overlay-open",a.some(t=>o(t)&&s(t))),this.toggleAttribute("flyout-anchored",a.some(t=>o(t)&&n(t)))}AddDialog(e){this.dialogZone.value?.appendChild(e)}firstUpdated(e){super.firstUpdated(e),this.syncFlyoutState()}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&w().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"})}render(){const e=this.fixedMenus||this.headerPosition==="fixed",s=!e&&this.headerPosition==="sticky";return m`
-      <div part="wrapper" class="esp-page ${y({"fixed-menus":e,"fixed-header":e,"sticky-header":s})}">
+var i=function(h,e,a,s){var d=arguments.length,o=d<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,a):s,t;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(h,e,a,s);else for(var n=h.length-1;n>=0;n--)(t=h[n])&&(o=(d<3?t(o):d>3?t(e,a,o):t(e,a))||o);return d>3&&o&&Object.defineProperty(e,a,o),o};import{css as m,html as v,nothing as y}from"lit";import{customElement as w,property as l,state as b}from"lit/decorators.js";import{classMap as k}from"lit/directives/class-map.js";import{createRef as p,ref as c}from"lit/directives/ref.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as u}from"./bi-directional-sticky-controller.js";import{getEspBus as x}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";const f='esp-footer, footer, [role~="contentinfo"]';let r=class extends g{constructor(){super(),this.dialogZone=p(),this.flyoutSlot=p(),this.footerSlot=p(),this.footerWrapperIsLandmark=!0,this.kind="wide",this.align="start",this.contained=!1,this.headerPosition="normal",this.fixedMenus=!1,new u(this,".esp-page-left > .sticky-wrapper"),new u(this,".esp-page-right > .sticky-wrapper"),new u(this,".esp-page-flyout > .sticky-wrapper"),this.addEventListener("flyout-state-changed",e=>this.syncFlyoutState(e))}connectedCallback(){const e=Array.from(this.children).filter(a=>a.getAttribute("slot")==="footer");this.footerWrapperIsLandmark=!e.some(a=>this.footerElementProvidesLandmark(a)),super.connectedCallback()}syncFlyoutState(e){if(e&&e.target?.closest?.("esp-page")!==this)return;const a=t=>{const n=t.mode;return(typeof n=="string"?n:t.getAttribute("mode"))==="overlay"},s=t=>{const n=t.open;return typeof n=="boolean"?n:t.hasAttribute("open")},d=t=>t.anchor!=null,o=(this.flyoutSlot.value?.assignedElements()??[]).filter(t=>t.tagName==="ESP-FLYOUT");this.toggleAttribute("flyout-open",o.some(t=>s(t)&&!a(t))),this.toggleAttribute("flyout-overlay-open",o.some(t=>s(t)&&a(t))),this.toggleAttribute("flyout-anchored",o.some(t=>s(t)&&d(t)))}footerElementProvidesLandmark(e){return e.matches(f)||e.querySelector(f)!==null}syncFooterLandmark(){const a=(this.footerSlot.value?.assignedElements({flatten:!0})??[]).some(s=>this.footerElementProvidesLandmark(s));this.footerWrapperIsLandmark=!a}AddDialog(e){this.dialogZone.value?.appendChild(e)}firstUpdated(e){super.firstUpdated(e),this.syncFlyoutState()}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&x().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"})}render(){const e=this.fixedMenus||this.headerPosition==="fixed",a=!e&&this.headerPosition==="sticky";return v`
+      <div part="wrapper" class="esp-page ${k({"fixed-menus":e,"fixed-header":e,"sticky-header":a})}">
         <div part="canvas" class="esp-page-canvas esp-page-canvas--left" aria-hidden="true"></div>
         <div part="canvas" class="esp-page-canvas esp-page-canvas--right" aria-hidden="true"></div>
         <div part="surface" class="esp-page-surface" aria-hidden="true"></div>
@@ -23,18 +23,18 @@ var d=function(h,e,s,o){var n=arguments.length,a=n<3?e:o===null?o=Object.getOwnP
           <div class="sticky-wrapper">
             <slot
               name="flyout"
-              ${u(this.flyoutSlot)}
+              ${c(this.flyoutSlot)}
               @slotchange=${()=>this.syncFlyoutState()}
             ></slot>
           </div>
         </div>
-        <footer>
-          <slot name="footer"></slot>
-        </footer>
-        <div id="dialog-drop-zone" ${u(this.dialogZone)}></div>
+        <div class="esp-page-footer" role=${this.footerWrapperIsLandmark?"contentinfo":y}>
+          <slot name="footer" ${c(this.footerSlot)} @slotchange=${this.syncFooterLandmark}></slot>
+        </div>
+        <div id="dialog-drop-zone" ${c(this.dialogZone)}></div>
         <esp-toaster></esp-toaster>
       </div>
-    `}};i.styles=[...g.styles,f`
+    `}};r.styles=[...g.styles,m`
       :host {
         --_esp-page-resolved-max-width: var(--esp-page-max-width, 1536px);
         
@@ -130,8 +130,26 @@ var d=function(h,e,s,o){var n=arguments.length,a=n<3?e:o===null?o=Object.getOwnP
       }
 
       
+      slot[name="footer"]::slotted(esp-footer) {
+        --esp-footer-content-max-width: var(--_esp-page-resolved-max-width);
+        --esp-footer-content-lead: 0;
+      }
+
+      :host([align="center"]) slot[name="footer"]::slotted(esp-footer) {
+        --esp-footer-content-lead: 0.5;
+      }
+
+      :host([align="end"]) slot[name="footer"]::slotted(esp-footer) {
+        --esp-footer-content-lead: 1;
+      }
+
+      :host([kind="full"]) slot[name="footer"]::slotted(esp-footer) {
+        --esp-footer-content-max-width: 100%;
+      }
+
+      
       :host([contained]) .esp-page > div.esp-page-top,
-      :host([contained]) .esp-page > footer {
+      :host([contained]) .esp-page > div.esp-page-footer {
         grid-column: surface;
       }
 
@@ -141,6 +159,10 @@ var d=function(h,e,s,o){var n=arguments.length,a=n<3?e:o===null?o=Object.getOwnP
         --esp-header-shadow: none;
       }
 
+      :host([contained]) slot[name="footer"]::slotted(esp-footer) {
+        --esp-footer-content-max-width: 100%;
+      }
+
       :host([kind="narrow"]) .esp-page > div.esp-page-main {
         
         > ::slotted(*) {
@@ -297,7 +319,7 @@ var d=function(h,e,s,o){var n=arguments.length,a=n<3?e:o===null?o=Object.getOwnP
           top: 0;
         }
 
-        > footer {
+        > div.esp-page-footer {
           grid-column: full;
           grid-row: footer;
           z-index: 10;
@@ -372,4 +394,4 @@ var d=function(h,e,s,o){var n=arguments.length,a=n<3?e:o===null?o=Object.getOwnP
           transition: none;
         }
       }
-    `],d([l({reflect:!0})],i.prototype,"kind",void 0),d([l({reflect:!0})],i.prototype,"align",void 0),d([l({type:Boolean,reflect:!0})],i.prototype,"contained",void 0),d([l({attribute:"header-position",reflect:!0})],i.prototype,"headerPosition",void 0),d([l({attribute:"fixed-menus",type:Boolean,reflect:!0})],i.prototype,"fixedMenus",void 0),i=d([v("esp-page")],i);export{i as EspalierPage};
+    `],i([b()],r.prototype,"footerWrapperIsLandmark",void 0),i([l({reflect:!0})],r.prototype,"kind",void 0),i([l({reflect:!0})],r.prototype,"align",void 0),i([l({type:Boolean,reflect:!0})],r.prototype,"contained",void 0),i([l({attribute:"header-position",reflect:!0})],r.prototype,"headerPosition",void 0),i([l({attribute:"fixed-menus",type:Boolean,reflect:!0})],r.prototype,"fixedMenus",void 0),r=i([w("esp-page")],r);export{r as EspalierPage};

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

@@ -172,7 +172,8 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * progress ring in circle mode. Automatically set by the `size`
  * attribute.
  * @cssprop --esp-progress-fill-color - Color of the progress fill.
- * Defaults to `var(--esp-color-action-background)`.
+ * Defaults to the active action hue at the semantic muted lightness so the
+ * filled and unfilled portions remain distinguishable in light and dark themes.
  * @cssprop --esp-progress-font-size - Font size for the value
  * text. Defaults to `var(--esp-type-small)`.
  * @cssprop --esp-progress-height - Height of the progress bar track.

package/dist/progress/esp-progress.js

@@ -1,6 +1,6 @@
-var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,s):t,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,s,t);else for(var h=n.length-1;h>=0;h--)(c=n[h])&&(i=(o<3?c(i):o>3?c(e,s,i):c(e,s))||i);return o>3&&i&&Object.defineProperty(e,s,i),i};import{css as x,html as m,nothing as p,svg as g}from"lit";import{customElement as y,property as l}from"lit/decorators.js";import{classMap as f}from"lit/directives/class-map.js";import{styleMap as b}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";const v=15.9155,d=2*Math.PI*v;let r=class extends u{constructor(){super(...arguments),this.value=null,this.max=100,this.label="",this.showValue=!1,this.size="medium",this.mode="bar"}get isIndeterminate(){return this.value===null||this.value===void 0}get clampedValue(){if(this.isIndeterminate)return 0;const e=Math.max(this.max,0);return Math.min(Math.max(this.value,0),e)}get percentage(){return this.isIndeterminate||this.max<=0?0:this.clampedValue/this.max*100}render(){return this.mode==="circle"?this.renderCircle():this.renderBar()}renderBar(){const e=this.isIndeterminate,s={track:!0,indeterminate:e},t=e?{}:{width:`${this.percentage}%`},o=this.showValue&&!e;return m`
+var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,s):t,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(n,e,s,t);else for(var h=n.length-1;h>=0;h--)(c=n[h])&&(i=(o<3?c(i):o>3?c(e,s,i):c(e,s))||i);return o>3&&i&&Object.defineProperty(e,s,i),i};import{css as x,html as m,nothing as p,svg as f}from"lit";import{customElement as y,property as l}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{styleMap as b}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";const v=15.9155,d=2*Math.PI*v;let r=class extends u{constructor(){super(...arguments),this.value=null,this.max=100,this.label="",this.showValue=!1,this.size="medium",this.mode="bar"}get isIndeterminate(){return this.value===null||this.value===void 0}get clampedValue(){if(this.isIndeterminate)return 0;const e=Math.max(this.max,0);return Math.min(Math.max(this.value,0),e)}get percentage(){return this.isIndeterminate||this.max<=0?0:this.clampedValue/this.max*100}render(){return this.mode==="circle"?this.renderCircle():this.renderBar()}renderBar(){const e=this.isIndeterminate,s={track:!0,indeterminate:e},t=e?{}:{width:`${this.percentage}%`},o=this.showValue&&!e;return m`
       <div
-        class=${f(s)}
+        class=${g(s)}
         role="progressbar"
         aria-label=${this.label}
         aria-valuemin="0"
@@ -11,7 +11,7 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
       </div>
       ${o?m`<div class="value-text">${Math.round(this.percentage)}%</div>`:p}
     `}renderCircle(){const e=this.isIndeterminate,s=e?d*.75:d-this.percentage/100*d,t=this.showValue&&!e;return m`
-      <div class=${f({"circle-container":!0,indeterminate:e})}>
+      <div class=${g({"circle-container":!0,indeterminate:e})}>
         <svg
           viewBox="0 0 36 36"
           class="circle-svg"
@@ -21,7 +21,7 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
           aria-valuemax=${this.max}
           aria-valuenow=${e?p:this.clampedValue}
         >
-          ${g`
+          ${f`
             <circle
               class="circle-track"
               cx="18" cy="18" r="${v}"
@@ -37,7 +37,7 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
               stroke-dashoffset="${s}"
               stroke-linecap="round"
             />
-          `} ${t?g`
+          `} ${t?f`
               <text
                 x="18" y="18"
                 class="circle-text"
@@ -83,7 +83,10 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
 
       .fill {
         height: 100%;
-        background: var(--esp-progress-fill-color, var(--esp-color-action-background));
+        background: var(
+          --esp-progress-fill-color,
+          oklch(from var(--esp-color-action-background) var(--esp-l-muted) c h)
+        );
         transition: width 0.3s ease;
         min-width: 0;
       }
@@ -132,7 +135,10 @@ var a=function(n,e,s,t){var o=arguments.length,i=o<3?e:t===null?t=Object.getOwnP
       }
 
       .circle-fill {
-        stroke: var(--esp-progress-fill-color, var(--esp-color-action-background));
+        stroke: var(
+          --esp-progress-fill-color,
+          oklch(from var(--esp-color-action-background) var(--esp-l-muted) c h)
+        );
         transform: rotate(-90deg);
         transform-origin: 50% 50%;
         transition: stroke-dashoffset 0.3s ease;

package/dist/shared/configured-brand.js

@@ -0,0 +1,4 @@
+import{html as n,nothing as t}from"lit";function e({brandLogo:s,brandText:o,brandHref:l,brandAlt:c}){if(!s&&!o)return t;const r=n`
+    ${s?n`<img class="brand-logo" src=${s} alt=${c||(o?"":"Site logo")} />`:t}
+    ${o?n`<span class="brand-text">${o}</span>`:t}
+  `;return l?n`<a class="configured-brand" href=${l}>${r}</a>`:n`<span class="configured-brand">${r}</span>`}export{e as renderConfiguredBrand};

package/dist/shared/slot-content.js

@@ -0,0 +1 @@
+function o(t){return t?.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE||e.nodeType===Node.TEXT_NODE&&!!e.textContent?.trim())??!1}export{o as slotHasContent};

package/dist/slider/esp-slider.js

@@ -1,4 +1,4 @@
-var o=function(d,t,e,i){var a=arguments.length,r=a<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(d,t,e,i);else for(var h=d.length-1;h>=0;h--)(l=d[h])&&(r=(a<3?l(r):a>3?l(t,e,r):l(t,e))||r);return a>3&&r&&Object.defineProperty(t,e,r),r},p;import{css as v,html as c}from"lit";import{customElement as y,property as n,state as f}from"lit/decorators.js";import{createRef as m,ref as u}from"lit/directives/ref.js";import{classMap as w}from"lit/directives/class-map.js";import{styleMap as _}from"lit/directives/style-map.js";import{ifDefined as g}from"lit/directives/if-defined.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{FormFieldController as S}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as x}from"../shared/form-field-description-controller.js";import{disabledControl as k,focusRing as C}from"../shared/style-fragments.js";let s=p=class extends b{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new S({host:this,internals:this.internals,getFormValue:()=>this.value||null,getValidity:()=>null,onReset:()=>{this.value=String(this._low)},onRestore:t=>{this.value=t},onDisabled:t=>{this.disabled=t}}),this.formItemDescription=new x({host:this,getTarget:()=>this._thumbRef.value}),this.min=0,this.max=100,this.step=1,this.value="0",this.name="",this.disabled=!1,this.label="",this._dragging=!1,this._hasSlotContent=!1,this._trackRef=m(),this._thumbRef=m(),this._slotRef=m(),this._labelId=`esp-slider-label-${p._nextId++}`}get _safeStep(){return Number.isFinite(this.step)&&this.step>0?this.step:1}get _safeMin(){return Number.isFinite(this.min)?this.min:0}get _safeMax(){return Number.isFinite(this.max)?this.max:100}get _stepPrecision(){const t=String(this._safeStep),e=/^(\d+\.?(\d*))e-(\d+)$/.exec(t);if(e){const a=e[2].length,r=Number(e[3]);return a+r}const i=t.indexOf(".");return i===-1?0:t.length-i-1}get _low(){return Math.min(this._safeMin,this._safeMax)}get _high(){return Math.max(this._safeMin,this._safeMax)}_snapToStep(t){const e=this._safeStep,i=this._low,a=this._high,r=Math.round((t-i)/e)*e+i,l=Math.max(i,Math.min(a,r)),h=10**this._stepPrecision;return Math.round(l*h)/h}get numericValue(){const t=Number(this.value);return Number.isNaN(t)?this._snapToStep(this._low):this._snapToStep(t)}get percentage(){const t=this._high-this._low;return t<=0?0:(this.numericValue-this._low)/t*100}_normalizeValue(){const t=String(this.numericValue);t!==this.value&&(this.value=t),this.formCtrl.syncValueSilently()}willUpdate(t){super.willUpdate(t),(t.has("value")||t.has("min")||t.has("max")||t.has("step"))&&this._normalizeValue()}firstUpdated(t){super.firstUpdated(t),this._syncSlotContent()}focus(t){this.focusResolvedElementAfterUpdate(()=>this._thumbRef.value,t)}setFormItemDescription(t){this.formItemDescription.setDescription(t)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}_setValueAndNotify(t){const e=String(this._snapToStep(t));e!==this.value&&(this.value=e,this.formCtrl.syncValue(),this.emitValueChanged(e))}_handleKeyDown(t){if(this.disabled)return;const e=this._safeStep;let i=0;switch(t.key){case"ArrowRight":case"ArrowUp":i=e;break;case"ArrowLeft":case"ArrowDown":i=-e;break;case"Home":this._setValueAndNotify(this._low),t.preventDefault();return;case"End":this._setValueAndNotify(this._high),t.preventDefault();return;case"PageUp":i=e*10;break;case"PageDown":i=-e*10;break;default:return}t.preventDefault(),this._setValueAndNotify(this.numericValue+i)}_handlePointerDown(t){if(this.disabled)return;const e=this._thumbRef.value,i=this._trackRef.value;if(!e||!i)return;const a=t.composedPath().includes(e);t.pointerType==="touch"&&!a||(t.preventDefault(),this._dragging=!0,e.setPointerCapture(t.pointerId),e.focus({preventScroll:!0}),this._updateValueFromPointer(t))}_handlePointerMove(t){this._dragging&&this._updateValueFromPointer(t)}_handlePointerUp(){this._endDrag()}_handleLostPointerCapture(){this._endDrag()}_endDrag(){this._dragging&&(this._dragging=!1)}_updateValueFromPointer(t){const e=this._trackRef.value;if(!e)return;const i=e.getBoundingClientRect();if(i.width<=0)return;const a=Math.max(0,Math.min(1,(t.clientX-i.left)/i.width)),r=this._low+a*(this._high-this._low);this._setValueAndNotify(r)}_handleSlotChange(){this._syncSlotContent()}_syncSlotContent(){const t=this._slotRef.value;if(!t)return;const e=t.assignedNodes({flatten:!0});this._hasSlotContent=e.some(i=>i.nodeType===Node.ELEMENT_NODE||i.textContent?.trim())}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(t){this.formCtrl.handleFormStateRestore(t)}formDisabledCallback(t){this.formCtrl.handleFormDisabled(t)}render(){const t=this.percentage,e=this._hasSlotContent?this._labelId:void 0,i=this._hasSlotContent?void 0:this.label||void 0;return c`
+var o=function(d,t,e,i){var a=arguments.length,r=a<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(d,t,e,i);else for(var h=d.length-1;h>=0;h--)(l=d[h])&&(r=(a<3?l(r):a>3?l(t,e,r):l(t,e))||r);return a>3&&r&&Object.defineProperty(t,e,r),r},p;import{css as v,html as c}from"lit";import{customElement as y,property as n,state as f}from"lit/decorators.js";import{createRef as m,ref as u}from"lit/directives/ref.js";import{classMap as w}from"lit/directives/class-map.js";import{styleMap as _}from"lit/directives/style-map.js";import{ifDefined as g}from"lit/directives/if-defined.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{FormFieldController as S}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as k}from"../shared/form-field-description-controller.js";import{disabledControl as x,focusRing as C}from"../shared/style-fragments.js";import{slotHasContent as $}from"../shared/slot-content.js";let s=p=class extends b{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new S({host:this,internals:this.internals,getFormValue:()=>this.value||null,getValidity:()=>null,onReset:()=>{this.value=String(this._low)},onRestore:t=>{this.value=t},onDisabled:t=>{this.disabled=t}}),this.formItemDescription=new k({host:this,getTarget:()=>this._thumbRef.value}),this.min=0,this.max=100,this.step=1,this.value="0",this.name="",this.disabled=!1,this.label="",this._dragging=!1,this._hasSlotContent=!1,this._trackRef=m(),this._thumbRef=m(),this._slotRef=m(),this._labelId=`esp-slider-label-${p._nextId++}`}get _safeStep(){return Number.isFinite(this.step)&&this.step>0?this.step:1}get _safeMin(){return Number.isFinite(this.min)?this.min:0}get _safeMax(){return Number.isFinite(this.max)?this.max:100}get _stepPrecision(){const t=String(this._safeStep),e=/^(\d+\.?(\d*))e-(\d+)$/.exec(t);if(e){const a=e[2].length,r=Number(e[3]);return a+r}const i=t.indexOf(".");return i===-1?0:t.length-i-1}get _low(){return Math.min(this._safeMin,this._safeMax)}get _high(){return Math.max(this._safeMin,this._safeMax)}_snapToStep(t){const e=this._safeStep,i=this._low,a=this._high,r=Math.round((t-i)/e)*e+i,l=Math.max(i,Math.min(a,r)),h=10**this._stepPrecision;return Math.round(l*h)/h}get numericValue(){const t=Number(this.value);return Number.isNaN(t)?this._snapToStep(this._low):this._snapToStep(t)}get percentage(){const t=this._high-this._low;return t<=0?0:(this.numericValue-this._low)/t*100}_normalizeValue(){const t=String(this.numericValue);t!==this.value&&(this.value=t),this.formCtrl.syncValueSilently()}willUpdate(t){super.willUpdate(t),(t.has("value")||t.has("min")||t.has("max")||t.has("step"))&&this._normalizeValue()}firstUpdated(t){super.firstUpdated(t),this._syncSlotContent()}focus(t){this.focusResolvedElementAfterUpdate(()=>this._thumbRef.value,t)}setFormItemDescription(t){this.formItemDescription.setDescription(t)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}_setValueAndNotify(t){const e=String(this._snapToStep(t));e!==this.value&&(this.value=e,this.formCtrl.syncValue(),this.emitValueChanged(e))}_handleKeyDown(t){if(this.disabled)return;const e=this._safeStep;let i=0;switch(t.key){case"ArrowRight":case"ArrowUp":i=e;break;case"ArrowLeft":case"ArrowDown":i=-e;break;case"Home":this._setValueAndNotify(this._low),t.preventDefault();return;case"End":this._setValueAndNotify(this._high),t.preventDefault();return;case"PageUp":i=e*10;break;case"PageDown":i=-e*10;break;default:return}t.preventDefault(),this._setValueAndNotify(this.numericValue+i)}_handlePointerDown(t){if(this.disabled)return;const e=this._thumbRef.value,i=this._trackRef.value;if(!e||!i)return;const a=t.composedPath().includes(e);t.pointerType==="touch"&&!a||(t.preventDefault(),this._dragging=!0,e.setPointerCapture(t.pointerId),e.focus({preventScroll:!0}),this._updateValueFromPointer(t))}_handlePointerMove(t){this._dragging&&this._updateValueFromPointer(t)}_handlePointerUp(){this._endDrag()}_handleLostPointerCapture(){this._endDrag()}_endDrag(){this._dragging&&(this._dragging=!1)}_updateValueFromPointer(t){const e=this._trackRef.value;if(!e)return;const i=e.getBoundingClientRect();if(i.width<=0)return;const a=Math.max(0,Math.min(1,(t.clientX-i.left)/i.width)),r=this._low+a*(this._high-this._low);this._setValueAndNotify(r)}_handleSlotChange(){this._syncSlotContent()}_syncSlotContent(){const t=this._slotRef.value;t&&(this._hasSlotContent=$(t))}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(t){this.formCtrl.handleFormStateRestore(t)}formDisabledCallback(t){this.formCtrl.handleFormDisabled(t)}render(){const t=this.percentage,e=this._hasSlotContent?this._labelId:void 0,i=this._hasSlotContent?void 0:this.label||void 0;return c`
       <div
         class=${w({"slider-container":!0,dragging:this._dragging})}
         @pointerdown=${this._handlePointerDown}
@@ -29,7 +29,7 @@ var o=function(d,t,e,i){var a=arguments.length,r=a<3?t:i===null?i=Object.getOwnP
       ${this._hasSlotContent?c`<span class="label" id=${this._labelId}>
             <slot ${u(this._slotRef)} @slotchange=${this._handleSlotChange}></slot>
           </span>`:c`<slot ${u(this._slotRef)} @slotchange=${this._handleSlotChange} hidden></slot>`}
-    `}};s.formAssociated=!0,s._nextId=0,s.styles=[...b.styles,C(".thumb:focus-visible","--esp-slider-focus-shadow","0 0 0 3px","var(--esp-slider-thumb-shadow, 0 1px 3px oklch(0 0 0 / 0.2)),"),k(".slider-container"),v`
+    `}};s.formAssociated=!0,s._nextId=0,s.styles=[...b.styles,C(".thumb:focus-visible","--esp-slider-focus-shadow","0 0 0 3px","var(--esp-slider-thumb-shadow, 0 1px 3px oklch(0 0 0 / 0.2)),"),x(".slider-container"),v`
       :host {
         display: block;
       }

package/espalier.token-manifest.json

@@ -123,7 +123,7 @@
       "name": "--esp-breadcrumb-separator-color",
       "category": "component",
       "component": "esp-breadcrumbs",
-      "description": "Set the color of the separator. It defaults to a bright complementary color."
+      "description": "Set the color of the separator. It defaults to the semantic heading color so navigation structure stays visible in light and dark themes."
     },
     {
       "name": "--esp-button-group-divider",
@@ -536,6 +536,150 @@
       "category": "root-theme",
       "description": ""
     },
+    {
+      "name": "--esp-footer-background",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Base footer color. Defaults to `var(--esp-color-layer-2)`."
+    },
+    {
+      "name": "--esp-footer-background-blend-mode",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative layer blend mode. Defaults to `normal`."
+    },
+    {
+      "name": "--esp-footer-background-image",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative image or gradient layer. Defaults to `none`."
+    },
+    {
+      "name": "--esp-footer-background-image-opacity",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative layer opacity. Defaults to `1`."
+    },
+    {
+      "name": "--esp-footer-background-position",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative layer position. Defaults to `0 0`."
+    },
+    {
+      "name": "--esp-footer-background-repeat",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative layer repeat behavior. Defaults to `repeat`."
+    },
+    {
+      "name": "--esp-footer-background-size",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Decorative layer size. Defaults to `auto`."
+    },
+    {
+      "name": "--esp-footer-border",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Block-start footer border. Defaults to `1px solid var(--esp-color-border)`."
+    },
+    {
+      "name": "--esp-footer-brand-logo-max-width",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Configured logo maximum inline size. Defaults to `12rem`."
+    },
+    {
+      "name": "--esp-footer-brand-logo-size",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Configured logo block size. Defaults to `3rem`."
+    },
+    {
+      "name": "--esp-footer-color",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Body text color. Defaults to `var(--esp-color-text)`."
+    },
+    {
+      "name": "--esp-footer-column-gap",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Gap between link-group columns and major primary regions. Defaults to `var(--esp-size-padding-page)`."
+    },
+    {
+      "name": "--esp-footer-content-lead",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Fraction of surplus placed before content (`0`, `0.5`, or `1`). Defaults to `0`."
+    },
+    {
+      "name": "--esp-footer-content-max-width",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Surface-alignment cap published by `esp-page`. Defaults to `100%`."
+    },
+    {
+      "name": "--esp-footer-focus-outline",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Focus-visible outline. Defaults to `2px solid var(--esp-color-link)`."
+    },
+    {
+      "name": "--esp-footer-heading-color",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Heading and configured-brand color. Defaults to `var(--esp-color-headings)`."
+    },
+    {
+      "name": "--esp-footer-link-color",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Link color. Defaults to `var(--esp-color-link)`."
+    },
+    {
+      "name": "--esp-footer-link-group-gap",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Space between a link-group heading and its links. Defaults to `var(--esp-size-small)`."
+    },
+    {
+      "name": "--esp-footer-link-group-min-width",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Intrinsic minimum link-group column width. Defaults to `10rem`."
+    },
+    {
+      "name": "--esp-footer-link-hover-color",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Hovered link color. Defaults to `var(--esp-color-link-hover)`."
+    },
+    {
+      "name": "--esp-footer-padding-block",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Content block padding. Defaults to `var(--esp-size-padding-page)`."
+    },
+    {
+      "name": "--esp-footer-padding-inline",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Content inline padding. Defaults to `var(--esp-size-padding-page)`."
+    },
+    {
+      "name": "--esp-footer-row-gap",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Compact-layout row gap. Defaults to `var(--esp-size-big)`."
+    },
+    {
+      "name": "--esp-footer-section-gap",
+      "category": "component",
+      "component": "esp-footer",
+      "description": "Gap between media, primary, and bottom regions. Defaults to `var(--esp-size-big)`."
+    },
     {
       "name": "--esp-form-item-error-background",
       "category": "component",
@@ -1379,7 +1523,7 @@
       "name": "--esp-progress-fill-color",
       "category": "component",
       "component": "esp-progress",
-      "description": "Color of the progress fill. Defaults to `var(--esp-color-action-background)`."
+      "description": "Color of the progress fill. Defaults to the active action hue at the semantic muted lightness so the filled and unfilled portions remain distinguishable in light and dark themes."
     },
     {
       "name": "--esp-progress-font-size",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "packageManager": "bun@1.3.12",
   "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
   "customElements": "custom-elements.json",
@@ -98,6 +98,14 @@
       "types": "./dist/font-picker/esp-font-picker.d.ts",
       "import": "./dist/font-picker/esp-font-picker.js"
     },
+    "./footer": {
+      "types": "./dist/footer/index.d.ts",
+      "import": "./dist/footer/index.js"
+    },
+    "./footer/link-group": {
+      "types": "./dist/footer/esp-footer-link-group.d.ts",
+      "import": "./dist/footer/esp-footer-link-group.js"
+    },
     "./form": {
       "types": "./dist/form/esp-form.d.ts",
       "import": "./dist/form/esp-form.js"
@@ -272,6 +280,7 @@
   "sideEffects": [
     "dist/index.js",
     "dist/*/esp-*.js",
+    "dist/footer/index.js",
     "dist/header/index.js",
     "dist/menu/index.js",
     "dist/shared/virtualizer/lit-virtualizer.js"