@taprootio/espalier 2.3.0 → 2.4.0

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

@@ -35,7 +35,7 @@ export * from "./esp-breadcrumb.js";
  * @customElement esp-breadcrumbs
  * @slot - `<esp-breadcrumb>` items to display.
  * @cssprop --esp-breadcrumb-separator-color - Set the color of the separator. It defaults
- * to a bright complementary color.
+ * to the semantic heading color so navigation structure stays visible in light and dark themes.
  *
  * ```html
  * <style>

package/dist/breadcrumbs/esp-breadcrumbs.js

@@ -1,4 +1,4 @@
-var c=function(o,s,e,t){var r=arguments.length,l=r<3?s:t===null?t=Object.getOwnPropertyDescriptor(s,e):t,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")l=Reflect.decorate(o,s,e,t);else for(var i=o.length-1;i>=0;i--)(a=o[i])&&(l=(r<3?a(l):r>3?a(s,e,l):a(s,e))||l);return r>3&&l&&Object.defineProperty(s,e,l),l};import{css as p,html as f}from"lit";import{customElement as v}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{createRef as h,ref as u}from"lit/directives/ref.js";export*from"./esp-breadcrumb.js";const d=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+var c=function(o,s,e,t){var r=arguments.length,l=r<3?s:t===null?t=Object.getOwnPropertyDescriptor(s,e):t,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")l=Reflect.decorate(o,s,e,t);else for(var i=o.length-1;i>=0;i--)(n=o[i])&&(l=(r<3?n(l):r>3?n(s,e,l):n(s,e))||l);return r>3&&l&&Object.defineProperty(s,e,l),l};import{css as p,html as f}from"lit";import{customElement as u}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{createRef as v,ref as d}from"lit/directives/ref.js";export*from"./esp-breadcrumb.js";const h=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path
     d="M12.089 3.634a2 2 0 0 0 -1.089 1.78l-.001 2.586h-6.999a2 2 0 0 0 -2 2v4l.005 .15a2 2 0 0 0 1.995 1.85l6.999 -.001l.001 2.587a2 2 0 0 0 3.414 1.414l6.586 -6.586a2 2 0 0 0 0 -2.828l-6.586 -6.586a2 2 0 0 0 -2.18 -.434l-.145 .068z" />
@@ -7,19 +7,16 @@ var c=function(o,s,e,t){var r=arguments.length,l=r<3?s:t===null?t=Object.getOwnP
   <path
     d="M10 2l-.15 .005a2 2 0 0 0 -1.85 1.995v6.999l-2.586 .001a2 2 0 0 0 -1.414 3.414l6.586 6.586a2 2 0 0 0 2.828 0l6.586 -6.586a2 2 0 0 0 .434 -2.18l-.068 -.145a2 2 0 0 0 -1.78 -1.089l-2.586 -.001v-6.999a2 2 0 0 0 -2 -2h-4z"
   />
-</svg>`;let n=class extends m{constructor(){super(...arguments),this.itemsSlot=h()}firstUpdated(s){if(super.firstUpdated(s),!this.itemsSlot.value){console.warn("No items slot found for breadcrumbs.");return}const e=this.itemsSlot.value.assignedElements();for(let t=0;t<e.length;t++){const r=e[t];r.separator.length>0||(r.isLastElement=t===e.length-1,r.separator=r.isLastElement?g:d)}}render(){return f`
+</svg>`;let a=class extends m{constructor(){super(...arguments),this.itemsSlot=v()}firstUpdated(s){if(super.firstUpdated(s),!this.itemsSlot.value){console.warn("No items slot found for breadcrumbs.");return}const e=this.itemsSlot.value.assignedElements();for(let t=0;t<e.length;t++){const r=e[t];r.separator.length>0||(r.isLastElement=t===e.length-1,r.separator=r.isLastElement?g:h)}}render(){return f`
       <div class="crumbs">
-        <slot ${u(this.itemsSlot)}></slot>
+        <slot ${d(this.itemsSlot)}></slot>
       </div>
-    `}};n.styles=[...m.styles,p`
+    `}};a.styles=[...m.styles,p`
       div.crumbs {
         display: flex;
         align-items: center;
         gap: var(--esp-size-tiny-to-small);
         font-size: var(--esp-size-small-to-normal);
-        color: var(
-          --esp-breadcrumb-separator-color,
-          oklch(from var(--esp-color-complementary) var(--esp-l-accent) c h)
-        );
+        color: var(--esp-breadcrumb-separator-color, var(--esp-color-headings));
       }
-    `],n=c([v("esp-breadcrumbs")],n);export{n as EspalierBreadcrumbs};
+    `],a=c([u("esp-breadcrumbs")],a);export{a as EspalierBreadcrumbs};

package/dist/button/action-state-lightness.js

@@ -0,0 +1 @@
+const T=.9,N=.88,_=.8;export{_ as BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR,T as BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR,N as BUTTON_INTERACTION_LIGHTNESS_FACTOR};

package/dist/button/esp-button.js

@@ -1,4 +1,4 @@
-var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,r):e,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(p,t,r,e);else for(var h=p.length-1;h>=0;h--)(l=p[h])&&(n=(s<3?l(n):s>3?l(t,r,n):l(t,r))||n);return s>3&&n&&Object.defineProperty(t,r,n),n};import{css as g,html as d,nothing as c}from"lit";import{customElement as f,eventOptions as m,property as a,state as v}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{ref as y}from"lit/directives/ref.js";import{getIconHrefForHost as k}from"../shared/intent-values.js";import{SlottedIconController as x}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as w}from"../shared/svgs/render-sprite-icon.js";const T=d`<svg
+var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,r):e,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(p,t,r,e);else for(var h=p.length-1;h>=0;h--)(l=p[h])&&(n=(s<3?l(n):s>3?l(t,r,n):l(t,r))||n);return s>3&&n&&Object.defineProperty(t,r,n),n};import{css as f,html as d,nothing as c}from"lit";import{customElement as m,eventOptions as v,property as a,state as y}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{ref as k}from"lit/directives/ref.js";import{getIconHrefForHost as x}from"../shared/intent-values.js";import{SlottedIconController as T}from"../shared/slotted-icon-controller.js";import{renderSpriteIcon as w}from"../shared/svgs/render-sprite-icon.js";import{BUTTON_ICON_INTERACTION_LIGHTNESS_FACTOR as S,BUTTON_ICON_SPLIT_LIGHTNESS_FACTOR as g,BUTTON_INTERACTION_LIGHTNESS_FACTOR as $}from"./action-state-lightness.js";const N=d`<svg
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   fill="none"
@@ -10,12 +10,12 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
 >
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
-</svg>`;let o=class extends b{constructor(){super(...arguments),this.iconSlot=new x(this),this.innerTabindex=null,this.neutralizingTabindex=!1,this.buttonType="button",this.collapsed=!1,this.disabled=!1,this.href="",this.iconOnly=!1,this.incognito=!1,this.icon="",this.label="",this.loading=!1,this.target="",this.rel="",this.formNoValidate=!1,this.buildIcon=t=>this.loading?d` <span>${T}</span> `:d`
+</svg>`;let o=class extends b{constructor(){super(...arguments),this.iconSlot=new T(this),this.innerTabindex=null,this.neutralizingTabindex=!1,this.buttonType="button",this.collapsed=!1,this.disabled=!1,this.href="",this.iconOnly=!1,this.incognito=!1,this.icon="",this.label="",this.loading=!1,this.target="",this.rel="",this.formNoValidate=!1,this.buildIcon=t=>this.loading?d` <span>${N}</span> `:d`
       <span>
-        <slot ${y(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
+        <slot ${k(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
         ${!this.iconSlot.hasSlottedIcon(":scope > *")&&t?w(t):c}
       </span>
-    `}static get observedAttributes(){return[...super.observedAttributes,"tabindex"]}attributeChangedCallback(t,r,e){if(super.attributeChangedCallback(t,r,e),t!=="tabindex"||this.neutralizingTabindex)return;const s=e===null?null:Number(e),n=s===null||Number.isNaN(s)?null:s;n!==null&&n>=0?(this.innerTabindex=n,this.writeHostTabindex(null)):n===null&&e!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=n}writeHostTabindex(t){this.getAttribute("tabindex")!==t&&(this.neutralizingTabindex=!0,t===null?this.removeAttribute("tabindex"):this.setAttribute("tabindex",t),this.neutralizingTabindex=!1)}removeAttribute(t){super.removeAttribute(t),t==="tabindex"&&!this.neutralizingTabindex&&(this.innerTabindex=null)}focus(t){this.focusShadowElementAfterUpdate("button, a",t)}handleClick(t){if(this.dispatchEvent(new CustomEvent("clicked",{detail:{},bubbles:!0,composed:!0})),this.buttonType==="submit"){const r=this.closest("form");if(r){const e=document.createElement("button");e.type="submit",e.hidden=!0,this.formNoValidate&&(e.formNoValidate=!0),r.appendChild(e),r.requestSubmit(e),e.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=k(this.icon,this),r=this.loading||this.iconSlot.hasSlottedIcon(":scope > *")||t.length>0,{collapsed:e,iconOnly:s}=this,n=s?this.getAttribute("aria-label")||this.label||c:c,l={"esp-field":!0,"icon-only":s,incognito:this.incognito,"is-collapsed":e,"has-icon":r};return this.href.length?d`
+    `}static get observedAttributes(){return[...super.observedAttributes,"tabindex"]}attributeChangedCallback(t,r,e){if(super.attributeChangedCallback(t,r,e),t!=="tabindex"||this.neutralizingTabindex)return;const s=e===null?null:Number(e),n=s===null||Number.isNaN(s)?null:s;n!==null&&n>=0?(this.innerTabindex=n,this.writeHostTabindex(null)):n===null&&e!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=n}writeHostTabindex(t){this.getAttribute("tabindex")!==t&&(this.neutralizingTabindex=!0,t===null?this.removeAttribute("tabindex"):this.setAttribute("tabindex",t),this.neutralizingTabindex=!1)}removeAttribute(t){super.removeAttribute(t),t==="tabindex"&&!this.neutralizingTabindex&&(this.innerTabindex=null)}focus(t){this.focusShadowElementAfterUpdate("button, a",t)}handleClick(t){if(this.dispatchEvent(new CustomEvent("clicked",{detail:{},bubbles:!0,composed:!0})),this.buttonType==="submit"){const r=this.closest("form");if(r){const e=document.createElement("button");e.type="submit",e.hidden=!0,this.formNoValidate&&(e.formNoValidate=!0),r.appendChild(e),r.requestSubmit(e),e.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=x(this.icon,this),r=this.loading||this.iconSlot.hasSlottedIcon(":scope > *")||t.length>0,{collapsed:e,iconOnly:s}=this,n=s?this.getAttribute("aria-label")||this.label||c:c,l={"esp-field":!0,"icon-only":s,incognito:this.incognito,"is-collapsed":e,"has-icon":r};return this.href.length?d`
           <div part="wrapper" class=${u(l)}>
             <a
               ?disabled=${this.disabled}
@@ -42,7 +42,7 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
               ${this.buildIcon(t)}
             </button>
           </div>
-        `}};o.styles=[...b.styles,g`
+        `}};o.styles=[...b.styles,f`
       :host {
         --_esp-button-radius: var(--esp-size-border-radius);
       }
@@ -80,7 +80,10 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
           }
 
           > span:nth-child(2) {
-            background-color: oklch(from var(--esp-color-action-background) calc(l * 0.9) c h);
+            background-color: oklch(
+              from var(--esp-color-action-background)
+                calc(l * ${g}) c h
+            );
             display: none;
             place-content: center;
             border-left: 1px dotted var(--esp-color-border);
@@ -131,12 +134,18 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
 
         &:hover,
         &:focus-within {
-          background-color: oklch(from var(--esp-color-action-background) calc(l * 0.88) c h);
+          background-color: oklch(
+            from var(--esp-color-action-background) calc(l * ${$})
+              c h
+          );
 
           button,
           a {
             > span:nth-child(2) {
-              background-color: oklch(from var(--esp-color-action-background) calc(l * 0.8) c h);
+              background-color: oklch(
+                from var(--esp-color-action-background)
+                  calc(l * ${S}) c h
+              );
               border-color: oklch(from var(--esp-color-border) calc(l * 1.2) c h);
             }
           }
@@ -187,7 +196,10 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
           button,
           a {
             > span:nth-child(2) {
-              background-color: oklch(from var(--esp-color-action-background) calc(l * 0.9) c h);
+              background-color: oklch(
+                from var(--esp-color-action-background)
+                  calc(l * ${g}) c h
+              );
               border-color: var(--esp-color-border);
             }
           }
@@ -210,4 +222,4 @@ var i=function(p,t,r,e){var s=arguments.length,n=s<3?t:e===null?e=Object.getOwnP
           transform: rotate(360deg);
         }
       }
-    `],i([v()],o.prototype,"innerTabindex",void 0),i([a({attribute:"button-type",type:String})],o.prototype,"buttonType",void 0),i([a({type:Boolean})],o.prototype,"collapsed",void 0),i([a({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),i([a({type:String})],o.prototype,"href",void 0),i([a({attribute:"icon-only",type:Boolean})],o.prototype,"iconOnly",void 0),i([a({type:Boolean,reflect:!0})],o.prototype,"incognito",void 0),i([a({type:String})],o.prototype,"icon",void 0),i([a({type:String})],o.prototype,"label",void 0),i([a({type:Boolean,reflect:!0})],o.prototype,"loading",void 0),i([a({type:String})],o.prototype,"target",void 0),i([a({type:String})],o.prototype,"rel",void 0),i([a({attribute:"formnovalidate",type:Boolean})],o.prototype,"formNoValidate",void 0),i([m({capture:!1,passive:!0})],o.prototype,"handleClick",null),o=i([f("esp-button")],o);export{o as EspalierButton};
+    `],i([y()],o.prototype,"innerTabindex",void 0),i([a({attribute:"button-type",type:String})],o.prototype,"buttonType",void 0),i([a({type:Boolean})],o.prototype,"collapsed",void 0),i([a({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),i([a({type:String})],o.prototype,"href",void 0),i([a({attribute:"icon-only",type:Boolean})],o.prototype,"iconOnly",void 0),i([a({type:Boolean,reflect:!0})],o.prototype,"incognito",void 0),i([a({type:String})],o.prototype,"icon",void 0),i([a({type:String})],o.prototype,"label",void 0),i([a({type:Boolean,reflect:!0})],o.prototype,"loading",void 0),i([a({type:String})],o.prototype,"target",void 0),i([a({type:String})],o.prototype,"rel",void 0),i([a({attribute:"formnovalidate",type:Boolean})],o.prototype,"formNoValidate",void 0),i([v({capture:!1,passive:!0})],o.prototype,"handleClick",null),o=i([m("esp-button")],o);export{o as EspalierButton};

package/dist/data-cell/esp-data-cell.js

@@ -1,4 +1,4 @@
-var c=function(n,e,s,a){var r=arguments.length,t=r<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,s):a,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(n,e,s,a);else for(var i=n.length-1;i>=0;i--)(l=n[i])&&(t=(r<3?l(t):r>3?l(e,s,t):l(e,s))||t);return r>3&&t&&Object.defineProperty(e,s,t),t};import{css as h,html as m}from"lit";import{customElement as y,property as f,state as u}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{createRef as S,ref as p}from"lit/directives/ref.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{SlottedIconController as v}from"../shared/slotted-icon-controller.js";let o=class extends d{constructor(){super(...arguments),this.iconSlot=new v(this),this.secondarySlot=S(),this.hasSecondary=!1,this.truncate=!1,this.handleSecondarySlotChange=()=>{this.hasSecondary=this.secondarySlot.value?.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.TEXT_NODE?(e.textContent??"").trim().length>0:!0)??!1}}firstUpdated(e){super.firstUpdated(e),this.iconSlot.handleSlotChange(),this.handleSecondarySlotChange()}render(){const e={cell:!0,"has-icon":this.iconSlot.hasAssignedSlotContent,"has-secondary":this.hasSecondary,truncate:this.truncate};return m`
+var c=function(a,e,s,n){var r=arguments.length,t=r<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,s):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(a,e,s,n);else for(var i=a.length-1;i>=0;i--)(l=a[i])&&(t=(r<3?l(t):r>3?l(e,s,t):l(e,s))||t);return r>3&&t&&Object.defineProperty(e,s,t),t};import{css as h,html as m}from"lit";import{customElement as y,property as f,state as u}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{createRef as S,ref as p}from"lit/directives/ref.js";import{EspalierElementBase as d}from"../shared/esp-element-base.js";import{SlottedIconController as v}from"../shared/slotted-icon-controller.js";import{slotHasContent as w}from"../shared/slot-content.js";let o=class extends d{constructor(){super(...arguments),this.iconSlot=new v(this),this.secondarySlot=S(),this.hasSecondary=!1,this.truncate=!1,this.handleSecondarySlotChange=()=>{this.hasSecondary=w(this.secondarySlot.value)}}firstUpdated(e){super.firstUpdated(e),this.iconSlot.handleSlotChange(),this.handleSecondarySlotChange()}render(){const e={cell:!0,"has-icon":this.iconSlot.hasAssignedSlotContent,"has-secondary":this.hasSecondary,truncate:this.truncate};return m`
       <span part="cell" class=${g(e)}>
         <span part="icon" class="icon">
           <slot

package/dist/footer/esp-footer-link-group.d.ts

@@ -0,0 +1,40 @@
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+/**
+ * A labelled group of related links inside [`<esp-footer>`](/components/footer/).
+ * Supply ordinary anchors in the default slot; the component provides the
+ * compact vertical rhythm and an accessible navigation landmark.
+ *
+ * ```html
+ * <esp-footer-link-group heading="Explore">
+ *   <a href="/components">Components</a>
+ *   <a href="/guides">Guides</a>
+ *   <a href="/api">API</a>
+ * </esp-footer-link-group>
+ * ```
+ *
+ * @customElement esp-footer-link-group
+ * @slot - Links belonging to the group. Native anchors are preferred because
+ * footer links do not need application-menu disclosure or drawer behavior.
+ * @csspart nav - The group's navigation landmark.
+ * @csspart heading - The visible heading used to label the navigation landmark.
+ * @csspart links - The link-list container.
+ * @docPageTitle Footer Link Group
+ * @docUrl /components/footer/link-group
+ * @menuGroup Navigation
+ * @menuIcon list-details
+ */
+export declare class EspalierFooterLinkGroup extends EspalierElementBase {
+    /**
+     * Visible heading for the link group. It also labels the navigation
+     * landmark. When omitted, the landmark receives the fallback label
+     * “Footer links” without rendering an empty heading.
+     */
+    heading: string;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-footer-link-group": EspalierFooterLinkGroup;
+    }
+}

package/dist/footer/esp-footer-link-group.js

@@ -0,0 +1,57 @@
+var d=function(t,o,r,n){var s=arguments.length,e=s<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,r):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(t,o,r,n);else for(var a=t.length-1;a>=0;a--)(l=t[a])&&(e=(s<3?l(e):s>3?l(o,r,e):l(o,r))||e);return s>3&&e&&Object.defineProperty(o,r,e),e};import{css as v,html as f,nothing as p}from"lit";import{customElement as g,property as u}from"lit/decorators.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";const h="esp-footer-link-group-heading";let i=class extends c{constructor(){super(...arguments),this.heading=""}render(){return f`
+      <nav
+        part="nav"
+        aria-labelledby=${this.heading?h:p}
+        aria-label=${this.heading?p:"Footer links"}
+      >
+        ${this.heading?f`<h2 part="heading" id=${h}>${this.heading}</h2>`:p}
+        <div part="links" class="links"><slot></slot></div>
+      </nav>
+    `}};i.styles=[...c.styles,v`
+      :host {
+        display: block;
+        min-inline-size: 0;
+      }
+
+      nav {
+        display: grid;
+        gap: var(--esp-footer-link-group-gap, var(--esp-size-small));
+        min-inline-size: 0;
+        color: var(--esp-footer-color, var(--esp-color-text));
+      }
+
+      h2 {
+        margin: 0;
+        color: var(--esp-footer-heading-color, var(--esp-color-headings));
+        font-family: var(--esp-font-headings);
+        font-size: var(--esp-type-normal);
+        font-weight: var(--esp-font-weight-headings);
+        line-height: 1.25;
+      }
+
+      .links {
+        display: grid;
+        gap: var(--esp-size-tiny);
+        min-inline-size: 0;
+      }
+
+      ::slotted(a) {
+        inline-size: fit-content;
+        max-inline-size: 100%;
+        color: var(--esp-footer-link-color, var(--esp-color-link));
+        overflow-wrap: anywhere;
+        text-decoration: none;
+        text-underline-offset: 0.18em;
+      }
+
+      ::slotted(a:hover) {
+        color: var(--esp-footer-link-hover-color, var(--esp-color-link-hover));
+        text-decoration: underline;
+      }
+
+      ::slotted(a:focus-visible) {
+        border-radius: var(--esp-size-border-radius);
+        outline: var(--esp-footer-focus-outline, 2px solid var(--esp-color-link));
+        outline-offset: 3px;
+      }
+    `],d([u({type:String})],i.prototype,"heading",void 0),i=d([g("esp-footer-link-group")],i);export{i as EspalierFooterLinkGroup};

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

@@ -0,0 +1,186 @@
+import { type PropertyValues } from "lit";
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+import "./esp-footer-link-group.js";
+export type FooterColumns = "auto" | "1" | "2" | "3" | "4" | "5" | "6";
+/**
+ * A responsive site footer with structured spaces for branding, feature
+ * artwork, link groups, supporting actions, and legal or utility content.
+ * Its background remains full-bleed while its content automatically aligns
+ * to the surface of a containing [`<esp-page>`](/components/page/).
+ *
+ * Use [`<esp-footer-link-group>`](/components/footer/link-group/) children for
+ * ordinary navigation columns. `columns` is a maximum: the grid always drops
+ * columns when they no longer fit.
+ *
+ * ```html
+ * <esp-footer
+ *   brand-logo="/assets/favicon.svg"
+ *   brand-text="Espalier"
+ *   brand-href="/"
+ *   brand-alt="Espalier logo"
+ *   columns="3">
+ *   <esp-footer-link-group heading="Explore">
+ *     <a href="/components">Components</a>
+ *     <a href="/api">API</a>
+ *   </esp-footer-link-group>
+ *   <esp-footer-link-group heading="Learn">
+ *     <a href="/guides/getting-started">Getting started</a>
+ *     <a href="/guides/styling">Styling</a>
+ *   </esp-footer-link-group>
+ *   <p slot="aside">Themeable web components built on web standards.</p>
+ *   <div slot="bottom">Copyright 2026 Example Organization</div>
+ * </esp-footer>
+ * ```
+ *
+ * A slotted brand replaces configured branding, while the media slot accepts
+ * a responsive `picture`, native image, or `esp-image`. Media spans the
+ * surface-aligned content well; use the decorative background layer for
+ * edge-to-edge artwork:
+ *
+ * ```html
+ * <esp-footer columns="4">
+ *   <picture slot="media">
+ *     <source media="(prefers-color-scheme: dark)" srcset="/assets/canvas-bg-dark.jpg" />
+ *     <img
+ *       src="/assets/canvas-bg.jpg"
+ *       alt="A colorful floral pattern"
+ *       style="display: block; width: 100%; height: auto;" />
+ *   </picture>
+ *   <a slot="brand" href="/" aria-label="Espalier home">
+ *     <img src="/assets/espalier-logo.svg" alt="Espalier" />
+ *   </a>
+ *   <esp-footer-link-group heading="Product">
+ *     <a href="/components">Components</a>
+ *   </esp-footer-link-group>
+ * </esp-footer>
+ * ```
+ *
+ * Decorative art uses an image layer independent of the base color. The same
+ * API supports a repeating landscape band or one large cover image:
+ *
+ * ```html
+ * <style>
+ *   esp-footer.mountains {
+ *     --esp-footer-background: oklch(0.48 0.12 145);
+ *     --esp-footer-background-image-opacity: 0.55;
+ *     --esp-footer-background-image:
+ *       linear-gradient(to bottom, transparent 8rem, oklch(0.48 0.12 145)),
+ *       url("/assets/espalier-geometric-texture.png");
+ *     --esp-footer-background-repeat: no-repeat, repeat-x;
+ *     --esp-footer-background-position: 0 0, top;
+ *     --esp-footer-background-size: 100% 100%, auto 10rem;
+ *     --esp-footer-padding-block: 6rem;
+ *   }
+ *
+ *   esp-footer.photo {
+ *     --esp-footer-background: oklch(0.2 0.04 216);
+ *     --esp-footer-heading-color: white;
+ *     --esp-footer-background-image:
+ *       linear-gradient(oklch(0.1 0 0 / 0.55), oklch(0.1 0 0 / 0.55)),
+ *       url("/assets/canvas-bg.jpg");
+ *     --esp-footer-background-repeat: no-repeat;
+ *     --esp-footer-background-position: center;
+ *     --esp-footer-background-size: cover;
+ *   }
+ * </style>
+ * <esp-footer class="mountains" brand-text="Mountain Studio"></esp-footer>
+ * <esp-footer class="photo" brand-text="Photo Studio"></esp-footer>
+ * ```
+ *
+ * Surface alignment is automatic inside `esp-page`; opt out only when the
+ * footer's content should also span the entire bar:
+ *
+ * ```html
+ * <esp-page align="center" style="--esp-page-max-width: 36rem;">
+ *   <main>Surface-aligned page content</main>
+ *   <esp-footer slot="footer" brand-text="Aligned Studio" columns="3">
+ *     <esp-footer-link-group heading="Explore">
+ *       <a href="/work">Work</a>
+ *       <a href="/about">About</a>
+ *     </esp-footer-link-group>
+ *   </esp-footer>
+ * </esp-page>
+ *
+ * <esp-footer full-bleed-content brand-text="Full-width Studio"></esp-footer>
+ * ```
+ *
+ * @customElement esp-footer
+ * @slot media - Meaningful artwork spanning the surface-aligned content well,
+ * preferably responsive `<picture>` markup or an `esp-image` with appropriate
+ * alternative text.
+ * @slot brand - Custom brand identity. Overrides configured brand properties.
+ * @slot - `esp-footer-link-group` navigation columns.
+ * @slot aside - Supporting content such as a newsletter, call to action,
+ * contact details, social links, or locale controls.
+ * @slot bottom - Copyright, legal/utility links, attribution, accessibility
+ * controls, site credit, or a final wordmark.
+ * @csspart footer - The native footer landmark and full-bleed base surface.
+ * @csspart background - The independent decorative image layer.
+ * @csspart content - The surface-aligned content wrapper.
+ * @csspart media - The media region spanning the aligned content well.
+ * @csspart primary - The grid containing brand, link groups, and aside content.
+ * @csspart brand - The brand region.
+ * @csspart groups - The link-group grid.
+ * @csspart aside - The supporting-content region.
+ * @csspart bottom - The final legal/utility region.
+ * @cssprop --esp-footer-background - Base footer color. Defaults to `var(--esp-color-layer-2)`.
+ * @cssprop --esp-footer-color - Body text color. Defaults to `var(--esp-color-text)`.
+ * @cssprop --esp-footer-heading-color - Heading and configured-brand color. Defaults to `var(--esp-color-headings)`.
+ * @cssprop --esp-footer-link-color - Link color. Defaults to `var(--esp-color-link)`.
+ * @cssprop --esp-footer-link-hover-color - Hovered link color. Defaults to `var(--esp-color-link-hover)`.
+ * @cssprop --esp-footer-focus-outline - Focus-visible outline. Defaults to `2px solid var(--esp-color-link)`.
+ * @cssprop --esp-footer-border - Block-start footer border. Defaults to `1px solid var(--esp-color-border)`.
+ * @cssprop --esp-footer-padding-block - Content block padding. Defaults to `var(--esp-size-padding-page)`.
+ * @cssprop --esp-footer-padding-inline - Content inline padding. Defaults to `var(--esp-size-padding-page)`.
+ * @cssprop --esp-footer-section-gap - Gap between media, primary, and bottom regions. Defaults to `var(--esp-size-big)`.
+ * @cssprop --esp-footer-column-gap - Gap between link-group columns and major primary regions. Defaults to `var(--esp-size-padding-page)`.
+ * @cssprop --esp-footer-row-gap - Compact-layout row gap. Defaults to `var(--esp-size-big)`.
+ * @cssprop --esp-footer-link-group-min-width - Intrinsic minimum link-group column width. Defaults to `10rem`.
+ * @cssprop --esp-footer-link-group-gap - Space between a link-group heading and its links. Defaults to `var(--esp-size-small)`.
+ * @cssprop --esp-footer-brand-logo-size - Configured logo block size. Defaults to `3rem`.
+ * @cssprop --esp-footer-brand-logo-max-width - Configured logo maximum inline size. Defaults to `12rem`.
+ * @cssprop --esp-footer-background-image - Decorative image or gradient layer. Defaults to `none`.
+ * @cssprop --esp-footer-background-image-opacity - Decorative layer opacity. Defaults to `1`.
+ * @cssprop --esp-footer-background-repeat - Decorative layer repeat behavior. Defaults to `repeat`.
+ * @cssprop --esp-footer-background-position - Decorative layer position. Defaults to `0 0`.
+ * @cssprop --esp-footer-background-size - Decorative layer size. Defaults to `auto`.
+ * @cssprop --esp-footer-background-blend-mode - Decorative layer blend mode. Defaults to `normal`.
+ * @cssprop --esp-footer-content-max-width - Surface-alignment cap published by `esp-page`. Defaults to `100%`.
+ * @cssprop --esp-footer-content-lead - Fraction of surplus placed before content (`0`, `0.5`, or `1`). Defaults to `0`.
+ * @docPageTitle Footer
+ * @docUrl /components/footer
+ * @menuGroup Structure
+ * @menuLabel Footer
+ * @menuIcon layout
+ */
+export declare class EspalierFooter extends EspalierElementBase {
+    /** Configured brand text used when the `brand` slot is empty. */
+    brandText: string;
+    /** Configured brand logo URL used when the `brand` slot is empty. */
+    brandLogo: string;
+    /** Optional configured-brand link target. */
+    brandHref: string;
+    /** Accessible text for a configured logo. */
+    brandAlt: string;
+    /**
+     * Maximum number of link-group columns. Numeric values cap the wide layout;
+     * the intrinsic grid still renders fewer columns when space is limited.
+     */
+    columns: FooterColumns;
+    /**
+     * Opt out of the `esp-page` surface-alignment contract and allow footer
+     * content to use the full bar width. The background is always full-bleed.
+     */
+    fullBleedContent: boolean;
+    /** Optional accessible label for pages containing multiple footer landmarks. */
+    landmarkLabel: string;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-footer": EspalierFooter;
+    }
+}