@taprootio/espalier 2.6.0 → 2.7.0

package/dist/focus-picker/esp-focus-picker.d.ts

@@ -0,0 +1,77 @@
+import { type PropertyValues } from "lit";
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+import { type FocusPoint } from "../image/image-focus.js";
+import "../image/esp-image.js";
+export declare const FOCUS_CHANGED_EVENT = "focus-changed";
+export type FocusChangedDetail = FocusPoint;
+/**
+ * A keyboard- and pointer-operable focal-point authoring control with live
+ * banner-cover previews.
+ *
+ * The HTML value is `focus="x y"`. In JavaScript use `.focusPoint`; the name
+ * avoids replacing the platform's required `HTMLElement.focus()` method.
+ *
+ * ```html
+ * <esp-focus-picker
+ *   src="/assets/focus-picker-unsplash.jpg"
+ *   alt="A woman standing in a sunlit field with her back to the camera"
+ *   focus="0.65 0.55"
+ *   ratio="3/1"
+ *   compact-ratio="3/2"
+ * ></esp-focus-picker>
+ * <p>
+ *   Photo by <a href="https://unsplash.com/@sashafreemind?utm_source=espalier&utm_medium=referral">Sasha Freemind</a>
+ *   on <a href="https://unsplash.com/?utm_source=espalier&utm_medium=referral">Unsplash</a>.
+ * </p>
+ * <script>
+ *   const picker = findByTagName("esp-focus-picker")[0];
+ *   picker.addEventListener("focus-changed", (event) => {
+ *     localStorage.setItem("banner-focus", JSON.stringify(event.detail));
+ *   });
+ * </script>
+ * ```
+ *
+ * @event {CustomEvent<{x: number, y: number}>} focus-changed - Bubbles across
+ * shadow boundaries after every pointer or keyboard adjustment.
+ * @csspart picker - The complete control layout.
+ * @csspart stage - The source-image authoring surface.
+ * @csspart image - The source image.
+ * @csspart marker - The focusable focal-point marker.
+ * @csspart previews - The live preview group.
+ * @csspart preview - A live `esp-image` preview cell.
+ * @cssprop --esp-focus-picker-gap - Gap between the stage and previews.
+ * @cssprop --esp-focus-picker-stage-background - Empty/loading stage color.
+ * @cssprop --esp-focus-picker-marker-size - Focal marker diameter.
+ * @cssprop --esp-focus-picker-marker-color - Focal marker fill.
+ * @cssprop --esp-focus-picker-marker-border - Focal marker border.
+ * @cssprop --esp-focus-picker-marker-shadow - Focal marker shadow.
+ * @cssprop --esp-focus-picker-focus-outline - Marker focus-visible outline.
+ * @docPageTitle Focus Picker
+ * @docUrl /components/focus-picker
+ * @menuGroup Media
+ * @menuLabel Focus Picker
+ * @menuIcon target
+ */
+export declare class EspalierFocusPicker extends EspalierElementBase {
+    /** Image URL shown in the authoring surface and live previews. */
+    src: string;
+    /** Alternative text for the source-image authoring surface. */
+    alt: string;
+    /** Normalized current value. Its HTML attribute is named `focus`. */
+    focusPoint: FocusPoint;
+    /** Aspect ratio for the wide live preview. */
+    ratio: string;
+    /** Aspect ratio for the compact live preview. */
+    compactRatio: string;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-focus-picker": EspalierFocusPicker;
+    }
+    interface HTMLElementEventMap {
+        "focus-changed": CustomEvent<FocusChangedDetail>;
+    }
+}

package/dist/focus-picker/esp-focus-picker.js

@@ -0,0 +1,129 @@
+var s=function(n,e,r,i){var c=arguments.length,o=c<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,r):i,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(n,e,r,i);else for(var l=n.length-1;l>=0;l--)(p=n[l])&&(o=(c<3?p(o):c>3?p(e,r,o):p(e,r))||o);return c>3&&o&&Object.defineProperty(e,r,o),o};import{css as d,html as f}from"lit";import{customElement as m,property as a}from"lit/decorators.js";import{styleMap as h}from"lit/directives/style-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{clampFocus as g,focusConverter as v,normalizeFocus as b}from"../image/image-focus.js";import"../image/esp-image.js";const $="focus-changed";let t=class extends u{constructor(){super(...arguments),this.src="",this.alt="",this.focusPoint={x:.5,y:.5},this.ratio="3/1",this.compactRatio="3/2",this.activePointer=null,this.handlePointerDown=e=>{e.button===0&&(e.preventDefault(),this.activePointer=e.pointerId,e.currentTarget.setPointerCapture?.(e.pointerId),this.updateFromPointer(e))},this.handlePointerMove=e=>{e.pointerId===this.activePointer&&this.updateFromPointer(e)},this.handlePointerEnd=e=>{e.pointerId===this.activePointer&&(e.currentTarget.releasePointerCapture?.(e.pointerId),this.activePointer=null)},this.handleKeyDown=e=>{const r=e.shiftKey?.01:.05,i={};if(e.key==="ArrowLeft")i.x=-r;else if(e.key==="ArrowRight")i.x=r;else if(e.key==="ArrowUp")i.y=-r;else if(e.key==="ArrowDown")i.y=r;else return;e.preventDefault(),this.updateFocus({x:this.focusPoint.x+(i.x??0),y:this.focusPoint.y+(i.y??0)})}}willUpdate(e){if(super.willUpdate(e),e.has("focusPoint")){const r=this.focusPoint,i=b(r);(i.x!==r?.x||i.y!==r?.y)&&(this.focusPoint=i)}}updateFocus(e){const r=g(e),i={x:Number(r.x.toFixed(4)),y:Number(r.y.toFixed(4))};i.x===this.focusPoint.x&&i.y===this.focusPoint.y||(this.focusPoint=i,this.dispatchEvent(new CustomEvent("focus-changed",{detail:{...i},bubbles:!0,composed:!0})))}updateFromPointer(e){const i=e.currentTarget.getBoundingClientRect();i.width<=0||i.height<=0||this.updateFocus({x:(e.clientX-i.left)/i.width,y:(e.clientY-i.top)/i.height})}render(){const e=Math.round(this.focusPoint.x*100),r=Math.round(this.focusPoint.y*100),i={"--_esp-focus-picker-x":`${this.focusPoint.x*100}%`,"--_esp-focus-picker-y":`${this.focusPoint.y*100}%`};return f`
+      <div part="picker" class="picker">
+        <div
+          part="stage"
+          class="stage"
+          @pointerdown=${this.handlePointerDown}
+          @pointermove=${this.handlePointerMove}
+          @pointerup=${this.handlePointerEnd}
+          @pointercancel=${this.handlePointerEnd}
+        >
+          <img part="image" src=${this.src} alt=${this.alt} draggable="false" />
+          
+          <div
+            part="marker"
+            class="marker"
+            style=${h(i)}
+            role="slider"
+            tabindex="0"
+            aria-label="Image focal point"
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow=${e}
+            aria-valuetext=${`Horizontal ${e}%, vertical ${r}%`}
+            @keydown=${this.handleKeyDown}
+          ></div>
+        </div>
+
+        <div part="previews" class="previews" aria-label="Banner framing previews">
+          <figure part="preview" class="preview wide">
+            <figcaption>Wide (${this.ratio})</figcaption>
+            <esp-image
+              banner
+              scrim="none"
+              .localImage=${this.src}
+              .caption=${""}
+              .focusPoint=${this.focusPoint}
+              .ratio=${this.ratio}
+            ></esp-image>
+          </figure>
+          <figure part="preview" class="preview compact">
+            <figcaption>Compact (${this.compactRatio})</figcaption>
+            <esp-image
+              banner
+              scrim="none"
+              .localImage=${this.src}
+              .caption=${""}
+              .focusPoint=${this.focusPoint}
+              .ratio=${this.compactRatio}
+            ></esp-image>
+          </figure>
+        </div>
+      </div>
+    `}};t.styles=[...u.styles,d`
+      :host {
+        display: block;
+        min-inline-size: 0;
+      }
+
+      .picker {
+        display: grid;
+        gap: var(--esp-focus-picker-gap, var(--esp-size-big));
+        min-inline-size: 0;
+      }
+
+      .stage {
+        position: relative;
+        overflow: hidden;
+        min-block-size: var(--esp-size-big);
+        border: 1px solid var(--esp-color-border);
+        border-radius: var(--esp-size-border-radius);
+        background: var(--esp-focus-picker-stage-background, var(--esp-color-layer-2));
+        cursor: crosshair;
+        touch-action: none;
+        user-select: none;
+      }
+
+      .stage img {
+        display: block;
+        inline-size: 100%;
+        block-size: auto;
+        pointer-events: none;
+      }
+
+      .marker {
+        position: absolute;
+        inset-inline-start: var(--_esp-focus-picker-x);
+        inset-block-start: var(--_esp-focus-picker-y);
+        inline-size: var(--esp-focus-picker-marker-size, var(--esp-size-medium));
+        block-size: var(--esp-focus-picker-marker-size, var(--esp-size-medium));
+        translate: -50% -50%;
+        box-sizing: border-box;
+        border: var(--esp-focus-picker-marker-border, 2px solid white);
+        border-radius: 50%;
+        background: var(--esp-focus-picker-marker-color, var(--esp-color-action-background));
+        box-shadow: var(--esp-focus-picker-marker-shadow, 0 1px 5px oklch(0 0 0 / 0.65));
+        cursor: grab;
+      }
+
+      .marker:active {
+        cursor: grabbing;
+      }
+      .marker:focus-visible {
+        outline: var(--esp-focus-picker-focus-outline, 3px solid var(--esp-color-link));
+        outline-offset: 3px;
+      }
+
+      .previews {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+        gap: var(--esp-focus-picker-gap, var(--esp-size-big));
+        min-inline-size: 0;
+      }
+
+      figure {
+        min-inline-size: 0;
+        margin: 0;
+      }
+      figcaption {
+        margin-block-end: var(--esp-size-tiny);
+        color: var(--esp-color-text);
+        font-size: var(--esp-type-small);
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .marker {
+          transition: none;
+        }
+      }
+    `],s([a({type:String})],t.prototype,"src",void 0),s([a({type:String})],t.prototype,"alt",void 0),s([a({attribute:"focus",converter:v,reflect:!0})],t.prototype,"focusPoint",void 0),s([a({type:String})],t.prototype,"ratio",void 0),s([a({attribute:"compact-ratio",type:String})],t.prototype,"compactRatio",void 0),t=s([m("esp-focus-picker")],t);export{t as EspalierFocusPicker,$ as FOCUS_CHANGED_EVENT};

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

@@ -8,6 +8,8 @@ export type FooterColumns = "auto" | "1" | "2" | "3" | "4" | "5" | "6";
  * 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/).
+ * The decorative background uses the same internal visual-layer primitive as
+ * `esp-image` banners; the footer's public background tokens are unchanged.
  *
  * Use bare [`<esp-footer-link-group>`](/components/footer/link-group/) children
  * when navigation groups should auto-flow independently through the grid.

package/dist/footer/esp-footer.js

@@ -1,24 +1,24 @@
-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 c}from"../shared/slot-content.js";import"./esp-footer-column.js";import"./esp-footer-link-group.js";const m=new Set(["auto","1","2","3","4","5","6"]),h={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={...h},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=c(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={...h};for(const a of this.shadowRoot?.querySelectorAll("slot")??[]){const s=this.slotRegion(a);s&&(e[s]=c(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`
+var t=function(i,o,a,e){var s=arguments.length,d=s<3?o:e===null?e=Object.getOwnPropertyDescriptor(o,a):e,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")d=Reflect.decorate(i,o,a,e);else for(var p=i.length-1;p>=0;p--)(l=i[p])&&(d=(s<3?l(d):s>3?l(o,a,d):l(o,a))||d);return s>3&&d&&Object.defineProperty(o,a,d),d};import{css as f,html as v,nothing as y}from"lit";import{customElement as x,property as n,state as _}from"lit/decorators.js";import{classMap as C}from"lit/directives/class-map.js";import{styleMap as k}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{renderVisualOverlay as S,visualOverlayStyles as L}from"../shared/visual-overlay.js";import"./esp-footer-column.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},w={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 a=this.slotRegion(o.target);if(!a)return;const e=h(o.target);this.slotContent[a]!==e&&(this.slotContent={...this.slotContent,[a]:e})}}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 a={...c};for(const e of this.shadowRoot?.querySelectorAll("slot")??[]){const s=this.slotRegion(e);s&&(a[s]=h(e))}Object.entries(a).some(([e,s])=>this.slotContent[e]!==s)&&(this.slotContent=a)}render(){const{media:o,brand:a,groups:e,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=a||!!(l.brandLogo||this.brandText),u=p||e||s,b={primary:!0,"has-brand":p,"has-groups":e,"has-aside":s};return v`
       <footer
         part="footer"
         aria-label=${this.landmarkLabel||y}
-        style=${_({"--_esp-footer-brand-color":l.brandColor||null})}
+        style=${k({"--_esp-footer-brand-color":l.brandColor||null})}
       >
-        <div part="background" class="background" aria-hidden="true"></div>
+        ${S({className:"background",rootPart:"background"})}
         <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="primary" class=${C(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}>
+              <div part="groups" class="groups" ?hidden=${!e}>
                 <slot @slotchange=${this.handleSlotChange}></slot>
               </div>
 
@@ -44,28 +44,23 @@ var t=function(i,o,e,a){var s=arguments.length,d=s<3?o:a===null?a=Object.getOwnP
       }
 
       footer {
+        --_esp-overlay-base-color: var(--esp-footer-background, var(--esp-color-layer-2));
+        --_esp-overlay-image: var(--esp-footer-background-image, none);
+        --_esp-overlay-image-opacity: var(--esp-footer-background-image-opacity, 1);
+        --_esp-overlay-image-repeat: var(--esp-footer-background-repeat, repeat);
+        --_esp-overlay-image-position: var(--esp-footer-background-position, 0 0);
+        --_esp-overlay-image-size: var(--esp-footer-background-size, auto);
+        --_esp-overlay-image-blend-mode: var(--esp-footer-background-blend-mode, normal);
+        --_esp-overlay-z-index: -1;
+
         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,
@@ -308,4 +303,4 @@ var t=function(i,o,e,a){var s=arguments.length,d=s<3?o:a===null?a=Object.getOwnP
           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};
+    `,L],t([_()],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:w,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};