@taprootio/espalier 2.3.1 → 2.5.0

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,217 @@
+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
+ *   light-brand-logo="/assets/logo-light.svg"
+ *   dark-brand-logo="/assets/logo-dark.svg"
+ *   brand-text="Espalier"
+ *   brand-href="/"
+ *   brand-alt="Espalier logo"
+ *   light-brand-color="oklch(0.35 0.12 216)"
+ *   dark-brand-color="oklch(0.9 0.08 216)"
+ *   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;
+    /**
+     * Configured brand logo URL used in light scheme. A non-empty value
+     * overrides `brand-logo`; an empty value falls back to it.
+     */
+    lightBrandLogo: string;
+    /**
+     * Configured brand logo URL used in dark scheme. A non-empty value
+     * overrides `brand-logo`; an empty value falls back to it.
+     */
+    darkBrandLogo: string;
+    /** Optional configured-brand link target. */
+    brandHref: string;
+    /** Accessible text for a configured logo. */
+    brandAlt: string;
+    /**
+     * Optional configured brand color. Scheme-specific colors override it;
+     * when all configured colors are empty, `--esp-footer-heading-color`
+     * remains the fallback.
+     */
+    brandColor: string;
+    /**
+     * Configured brand color used in light scheme. A non-empty value
+     * overrides `brand-color`; an empty value falls back to it and then
+     * `--esp-footer-heading-color`.
+     */
+    lightBrandColor: string;
+    /**
+     * Configured brand color used in dark scheme. A non-empty value
+     * overrides `brand-color`; an empty value falls back to it and then
+     * `--esp-footer-heading-color`.
+     */
+    darkBrandColor: 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;
+    }
+}

package/dist/footer/esp-footer.js

@@ -0,0 +1,307 @@
+var t=function(i,o,e,a){var s=arguments.length,d=s<3?o:a===null?a=Object.getOwnPropertyDescriptor(o,e):a,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")d=Reflect.decorate(i,o,e,a);else for(var p=i.length-1;p>=0;p--)(l=i[p])&&(d=(s<3?l(d):s>3?l(o,e,d):l(o,e))||d);return s>3&&d&&Object.defineProperty(o,e,d),d};import{css as f,html as v,nothing as y}from"lit";import{customElement as x,property as n,state as C}from"lit/decorators.js";import{classMap as k}from"lit/directives/class-map.js";import{styleMap as _}from"lit/directives/style-map.js";import{renderConfiguredBrand as z,resolveConfiguredBrand as B}from"../shared/configured-brand.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{slotHasContent as h}from"../shared/slot-content.js";import"./esp-footer-link-group.js";const m=new Set(["auto","1","2","3","4","5","6"]),c={media:!1,brand:!1,groups:!1,aside:!1,bottom:!1},S={fromAttribute(i){return i&&m.has(i)?i:"auto"},toAttribute(i){return m.has(i)?i:"auto"}};let r=class extends g{constructor(){super(...arguments),this.slotContent={...c},this.brandText="",this.brandLogo="",this.lightBrandLogo="",this.darkBrandLogo="",this.brandHref="",this.brandAlt="",this.brandColor="",this.lightBrandColor="",this.darkBrandColor="",this.columns="auto",this.fullBleedContent=!1,this.landmarkLabel="",this.handleSlotChange=o=>{if(!(o.target instanceof HTMLSlotElement))return;const e=this.slotRegion(o.target);if(!e)return;const a=h(o.target);this.slotContent[e]!==a&&(this.slotContent={...this.slotContent,[e]:a})}}willUpdate(o){super.willUpdate(o),o.has("columns")&&!m.has(this.columns)&&(this.columns="auto")}slotRegion(o){return o.name?["media","brand","aside","bottom"].includes(o.name)?o.name:null:"groups"}firstUpdated(o){super.firstUpdated(o);const e={...c};for(const a of this.shadowRoot?.querySelectorAll("slot")??[]){const s=this.slotRegion(a);s&&(e[s]=h(a))}Object.entries(e).some(([a,s])=>this.slotContent[a]!==s)&&(this.slotContent=e)}render(){const{media:o,brand:e,groups:a,aside:s,bottom:d}=this.slotContent,l=B({scheme:this.scheme,brandLogo:this.brandLogo,brandColor:this.brandColor,lightBrandLogo:this.lightBrandLogo,darkBrandLogo:this.darkBrandLogo,lightBrandColor:this.lightBrandColor,darkBrandColor:this.darkBrandColor}),p=e||!!(l.brandLogo||this.brandText),u=p||a||s,b={primary:!0,"has-brand":p,"has-groups":a,"has-aside":s};return v`
+      <footer
+        part="footer"
+        aria-label=${this.landmarkLabel||y}
+        style=${_({"--_esp-footer-brand-color":l.brandColor||null})}
+      >
+        <div part="background" class="background" aria-hidden="true"></div>
+        <div part="content" class="content-frame">
+          <div class="content">
+            <div part="media" class="media" ?hidden=${!o}>
+              <slot name="media" @slotchange=${this.handleSlotChange}></slot>
+            </div>
+
+            <div part="primary" class=${k(b)} ?hidden=${!u}>
+              <div part="brand" class="brand" ?hidden=${!p}>
+                <slot name="brand" @slotchange=${this.handleSlotChange}
+                  >${z({brandLogo:l.brandLogo,brandText:this.brandText,brandHref:this.brandHref,brandAlt:this.brandAlt})}</slot
+                >
+              </div>
+
+              <div part="groups" class="groups" ?hidden=${!a}>
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </div>
+
+              <div part="aside" class="aside" ?hidden=${!s}>
+                <slot name="aside" @slotchange=${this.handleSlotChange}></slot>
+              </div>
+            </div>
+
+            <div part="bottom" class="bottom" ?hidden=${!d}>
+              <slot name="bottom" @slotchange=${this.handleSlotChange}></slot>
+            </div>
+          </div>
+        </div>
+      </footer>
+    `}};r.styles=[...g.styles,f`
+      :host {
+        display: block;
+        min-inline-size: 0;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      footer {
+        position: relative;
+        isolation: isolate;
+        min-inline-size: 0;
+        overflow: hidden;
+        color: var(--esp-footer-color, var(--esp-color-text));
+        background: var(--esp-footer-background, var(--esp-color-layer-2));
+        border-block-start: var(--esp-footer-border, 1px solid var(--esp-color-border));
+      }
+
+      .background {
+        position: absolute;
+        z-index: -1;
+        inset: 0;
+        pointer-events: none;
+        background-image: var(--esp-footer-background-image, none);
+        background-repeat: var(--esp-footer-background-repeat, repeat);
+        background-position: var(--esp-footer-background-position, 0 0);
+        background-size: var(--esp-footer-background-size, auto);
+        opacity: var(--esp-footer-background-image-opacity, 1);
+        mix-blend-mode: var(--esp-footer-background-blend-mode, normal);
+      }
+
+      .content-frame {
+        --_esp-footer-content-surplus: max(
+          0px,
+          calc(100% - var(--esp-footer-content-max-width, 100%))
+        );
+
+        box-sizing: border-box;
+        min-inline-size: 0;
+        padding-inline: calc(var(--_esp-footer-content-surplus) * var(--esp-footer-content-lead, 0))
+          calc(var(--_esp-footer-content-surplus) * (1 - var(--esp-footer-content-lead, 0)));
+      }
+
+      :host([full-bleed-content]) .content-frame {
+        padding-inline: 0;
+      }
+
+      .content {
+        display: grid;
+        container: esp-footer / inline-size;
+        gap: var(--esp-footer-section-gap, var(--esp-size-big));
+        min-inline-size: 0;
+        padding-block: var(--esp-footer-padding-block, var(--esp-size-padding-page))
+          calc(
+            var(--esp-footer-padding-block, var(--esp-size-padding-page)) +
+              env(safe-area-inset-bottom, 0px)
+          );
+        padding-inline: var(--esp-footer-padding-inline, var(--esp-size-padding-page));
+      }
+
+      .media,
+      .primary,
+      .brand,
+      .groups,
+      .aside,
+      .bottom {
+        min-inline-size: 0;
+      }
+
+      .media ::slotted(img),
+      .media ::slotted(picture),
+      .media ::slotted(esp-image) {
+        display: block;
+        inline-size: 100%;
+        max-inline-size: 100%;
+      }
+
+      .primary {
+        display: grid;
+        grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr) minmax(10rem, 1fr);
+        grid-template-areas: "brand groups aside";
+        gap: var(--esp-footer-row-gap, var(--esp-size-big))
+          var(--esp-footer-column-gap, var(--esp-size-padding-page));
+        align-items: start;
+      }
+
+      .primary.has-brand.has-groups:not(.has-aside),
+      .primary.has-groups.has-aside:not(.has-brand) {
+        grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr);
+      }
+
+      .primary.has-brand.has-groups:not(.has-aside) {
+        grid-template-areas: "brand groups";
+      }
+
+      .primary.has-groups.has-aside:not(.has-brand) {
+        grid-template-areas: "groups aside";
+      }
+
+      .primary.has-brand.has-aside:not(.has-groups) {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-areas: "brand aside";
+      }
+
+      .primary.has-brand:not(.has-groups):not(.has-aside) {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas: "brand";
+      }
+
+      .primary.has-groups:not(.has-brand):not(.has-aside) {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas: "groups";
+      }
+
+      .primary.has-aside:not(.has-brand):not(.has-groups) {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-areas: "aside";
+      }
+
+      .brand {
+        grid-area: brand;
+      }
+
+      .groups {
+        --_esp-footer-column-gap: var(--esp-footer-column-gap, var(--esp-size-padding-page));
+        --_esp-footer-column-min: var(--esp-footer-link-group-min-width, 10rem);
+        --_esp-footer-column-basis: var(--_esp-footer-column-min);
+
+        grid-area: groups;
+        display: grid;
+        grid-template-columns: repeat(
+          auto-fit,
+          minmax(min(100%, var(--_esp-footer-column-basis)), 1fr)
+        );
+        gap: var(--esp-footer-row-gap, var(--esp-size-big)) var(--_esp-footer-column-gap);
+      }
+
+      :host([columns="1"]) .groups {
+        --_esp-footer-column-basis: 100%;
+      }
+
+      :host([columns="2"]) .groups {
+        --_esp-footer-column-basis: max(
+          var(--_esp-footer-column-min),
+          calc(50% - var(--_esp-footer-column-gap))
+        );
+      }
+
+      :host([columns="3"]) .groups {
+        --_esp-footer-column-basis: max(
+          var(--_esp-footer-column-min),
+          calc(33.3333% - var(--_esp-footer-column-gap))
+        );
+      }
+
+      :host([columns="4"]) .groups {
+        --_esp-footer-column-basis: max(
+          var(--_esp-footer-column-min),
+          calc(25% - var(--_esp-footer-column-gap))
+        );
+      }
+
+      :host([columns="5"]) .groups {
+        --_esp-footer-column-basis: max(
+          var(--_esp-footer-column-min),
+          calc(20% - var(--_esp-footer-column-gap))
+        );
+      }
+
+      :host([columns="6"]) .groups {
+        --_esp-footer-column-basis: max(
+          var(--_esp-footer-column-min),
+          calc(16.6667% - var(--_esp-footer-column-gap))
+        );
+      }
+
+      .aside {
+        grid-area: aside;
+      }
+
+      .configured-brand {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--esp-size-small);
+        max-inline-size: 100%;
+        color: var(
+          --_esp-footer-brand-color,
+          var(--esp-footer-heading-color, var(--esp-color-headings))
+        );
+        font-family: var(--esp-font-brand, var(--esp-font-headings));
+        font-size: var(--esp-type-medium);
+        font-weight: var(--esp-font-weight-brand, var(--esp-font-weight-headings));
+        line-height: 1.1;
+        overflow-wrap: anywhere;
+        text-decoration: none;
+      }
+
+      a.configured-brand:hover {
+        color: var(--esp-footer-link-hover-color, var(--esp-color-link-hover));
+        text-decoration: underline;
+        text-underline-offset: 0.18em;
+      }
+
+      a.configured-brand:focus-visible {
+        border-radius: var(--esp-size-border-radius);
+        outline: var(--esp-footer-focus-outline, 2px solid var(--esp-color-link));
+        outline-offset: 3px;
+      }
+
+      .brand-logo {
+        display: block;
+        inline-size: auto;
+        max-inline-size: min(var(--esp-footer-brand-logo-max-width, 12rem), 100%);
+        block-size: var(--esp-footer-brand-logo-size, 3rem);
+        object-fit: contain;
+      }
+
+      .brand-text {
+        min-inline-size: 0;
+      }
+
+      @container esp-footer (max-width: 48rem) {
+        .primary,
+        .primary.has-brand.has-groups:not(.has-aside),
+        .primary.has-groups.has-aside:not(.has-brand),
+        .primary.has-brand.has-aside:not(.has-groups),
+        .primary.has-brand:not(.has-groups):not(.has-aside),
+        .primary.has-groups:not(.has-brand):not(.has-aside),
+        .primary.has-aside:not(.has-brand):not(.has-groups) {
+          grid-template-columns: minmax(0, 1fr);
+        }
+
+        .primary.has-brand.has-groups.has-aside {
+          grid-template-areas:
+            "brand"
+            "groups"
+            "aside";
+        }
+
+        .primary.has-brand.has-groups:not(.has-aside) {
+          grid-template-areas:
+            "brand"
+            "groups";
+        }
+
+        .primary.has-groups.has-aside:not(.has-brand) {
+          grid-template-areas:
+            "groups"
+            "aside";
+        }
+
+        .primary.has-brand.has-aside:not(.has-groups) {
+          grid-template-areas:
+            "brand"
+            "aside";
+        }
+
+        .primary.has-brand:not(.has-groups):not(.has-aside) {
+          grid-template-areas: "brand";
+        }
+
+        .primary.has-groups:not(.has-brand):not(.has-aside) {
+          grid-template-areas: "groups";
+        }
+
+        .primary.has-aside:not(.has-brand):not(.has-groups) {
+          grid-template-areas: "aside";
+        }
+      }
+    `],t([C()],r.prototype,"slotContent",void 0),t([n({attribute:"brand-text",type:String})],r.prototype,"brandText",void 0),t([n({attribute:"brand-logo",type:String})],r.prototype,"brandLogo",void 0),t([n({attribute:"light-brand-logo",type:String})],r.prototype,"lightBrandLogo",void 0),t([n({attribute:"dark-brand-logo",type:String})],r.prototype,"darkBrandLogo",void 0),t([n({attribute:"brand-href",type:String})],r.prototype,"brandHref",void 0),t([n({attribute:"brand-alt",type:String})],r.prototype,"brandAlt",void 0),t([n({attribute:"brand-color",type:String})],r.prototype,"brandColor",void 0),t([n({attribute:"light-brand-color",type:String})],r.prototype,"lightBrandColor",void 0),t([n({attribute:"dark-brand-color",type:String})],r.prototype,"darkBrandColor",void 0),t([n({converter:S,reflect:!0})],r.prototype,"columns",void 0),t([n({attribute:"full-bleed-content",type:Boolean,reflect:!0})],r.prototype,"fullBleedContent",void 0),t([n({attribute:"landmark-label",type:String})],r.prototype,"landmarkLabel",void 0),r=t([x("esp-footer")],r);export{r as EspalierFooter};

package/dist/footer/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./esp-footer-link-group.js";
+export * from "./esp-footer.js";

package/dist/footer/index.js

@@ -0,0 +1 @@
+export*from"./esp-footer-link-group.js";export*from"./esp-footer.js";