@taprootio/espalier 4.1.0 → 4.2.0

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

@@ -116,6 +116,12 @@ export type { SchemeEvents } from "../shared/bus-events.js";
  * @cssprop --esp-type-caption-font-weight - Font weight for captions.
  * @cssprop --esp-type-caption-letter-spacing - Letter spacing for captions.
  * @cssprop --esp-type-caption-color - Context-local color alias for captions.
+ * @cssprop --esp-type-display-font-family - Heading font family for opt-in display text.
+ * @cssprop --esp-type-display-font-size - Fluid display size spanning the large mobile floor through the huge desktop ceiling.
+ * @cssprop --esp-type-display-font-weight - Heading font weight for opt-in display text.
+ * @cssprop --esp-type-display-line-height - Line height for opt-in display text.
+ * @cssprop --esp-type-display-letter-spacing - Letter spacing for opt-in display text.
+ * @cssprop --esp-type-display-color - Context-local heading-color alias for opt-in display text.
  *
  * @docPageTitle Root
  * @docUrl /components/root

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

@@ -31,6 +31,28 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * and drop `--esp-section-padding-block` too when the media should
  * meet the band's edges; the band's zone behavior is unaffected.
  *
+ * A section may also tint one raster alpha mask behind its content.
+ * The component owns clipping, no-repeat mask behavior, stacking, and
+ * interaction isolation; consumers supply only the image, semantic tint,
+ * position, size, and opacity:
+ *
+ * ```html
+ * <esp-section
+ *   style="
+ *     --esp-section-decoration-image: url('/assets/brand-mark.png');
+ *     --esp-section-decoration-position: calc(100% + 2rem) -2rem;
+ *     --esp-section-decoration-size: min(34rem, 62%);
+ *     --esp-section-decoration-opacity: 0.09;
+ *   "
+ * >
+ *   <h1>Rooted in warmth</h1>
+ * </esp-section>
+ * ```
+ *
+ * CSS image values are trusted stylesheet input. Products that accept image
+ * references from documents or users must enforce their own asset ownership
+ * and URL policy before mapping a value to this hook.
+ *
  * @customElement esp-section
  * @slot - The section's content, centered in the well.
  * @csspart section - The full-bleed band.
@@ -39,6 +61,11 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * @cssprop --esp-section-max-width - The content well's cap. Defaults to `var(--esp-page-well-max-width, 72rem)`; `none` lets content span the band.
  * @cssprop --esp-section-padding-block - Vertical rhythm above and below the well. Defaults to `var(--esp-size-section)`.
  * @cssprop --esp-section-padding-inline - Horizontal breathing room inside the band at narrow viewports. Defaults to `var(--esp-size-medium)`.
+ * @cssprop --esp-section-decoration-image - Raster alpha mask painted behind the well. Defaults to `none`.
+ * @cssprop --esp-section-decoration-color - Semantic tint applied through the mask. Defaults to the local `--esp-color-headings`.
+ * @cssprop --esp-section-decoration-position - Mask position, including responsive or bleeding values. Defaults to `center`.
+ * @cssprop --esp-section-decoration-size - Mask size. Defaults to `contain`.
+ * @cssprop --esp-section-decoration-opacity - Decoration opacity from `0` through `1`. Defaults to `1`.
  * @docPageTitle Section
  * @docUrl /components/section
  * @menuGroup Structure

package/dist/section/esp-section.js

@@ -1,5 +1,6 @@
-var a=function(t,i,s,n){var o=arguments.length,e=o<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,s):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(t,i,s,n);else for(var c=t.length-1;c>=0;c--)(l=t[c])&&(e=(o<3?l(e):o>3?l(i,s,e):l(i,s))||e);return o>3&&e&&Object.defineProperty(i,s,e),e};import{css as d,html as m}from"lit";import{customElement as v}from"lit/decorators.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";let r=class extends p{render(){return m`
+var c=function(i,o,t,n){var a=arguments.length,e=a<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,t):n,s;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(i,o,t,n);else for(var l=i.length-1;l>=0;l--)(s=i[l])&&(e=(a<3?s(e):a>3?s(o,t,e):s(o,t))||e);return a>3&&e&&Object.defineProperty(o,t,e),e};import{css as d,html as v}from"lit";import{customElement as m}from"lit/decorators.js";import{EspalierElementBase as p}from"../shared/esp-element-base.js";import{renderVisualOverlay as u,visualOverlayStyles as y}from"../shared/visual-overlay.js";let r=class extends p{render(){return v`
       <div class="esp-section" part="section">
+        ${u({className:"decoration"})}
         <div class="esp-section-well" part="well">
           <slot></slot>
         </div>
@@ -11,12 +12,32 @@ var a=function(t,i,s,n){var o=arguments.length,e=o<3?i:n===null?n=Object.getOwnP
 
       .esp-section {
         background: var(--esp-section-background, var(--esp-color-background));
+        isolation: isolate;
         padding-block: var(--esp-section-padding-block, var(--esp-size-section));
         padding-inline: var(--esp-section-padding-inline, var(--esp-size-medium));
+        position: relative;
+      }
+
+      .decoration {
+        --_esp-overlay-z-index: 0;
+        --_esp-overlay-texture: none;
+        --_esp-overlay-texture-color: var(
+          --esp-section-decoration-color,
+          var(--esp-color-headings)
+        );
+        
+        --_esp-overlay-texture-mask:
+          var(--esp-section-decoration-image, none), linear-gradient(transparent, transparent);
+        --_esp-overlay-texture-mask-position: var(--esp-section-decoration-position, center);
+        --_esp-overlay-texture-mask-repeat: no-repeat;
+        --_esp-overlay-texture-mask-size: var(--esp-section-decoration-size, contain);
+        --_esp-overlay-texture-opacity: var(--esp-section-decoration-opacity, 1);
       }
 
       .esp-section-well {
         max-inline-size: var(--esp-section-max-width, var(--esp-page-well-max-width, 72rem));
         margin-inline: auto;
+        position: relative;
+        z-index: 1;
       }
-    `],r=a([v("esp-section")],r);export{r as EspalierSection};
+    `,y],r=c([m("esp-section")],r);export{r as EspalierSection};

package/dist/shared/scale-engine.js

@@ -1 +1 @@
-const l=["tiny","small","normal","medium","big","large","huge"],O=2,b=1.125,g=1.3333333333333333,f=[["tiny","small"],["small","normal"],["normal","medium"],["medium","big"],["big","large"],["large","huge"]],E=.375,z={rootFontSize:16,typeRatio:1.25,spaceRatio:1.618,borderRadius:.2,viewportMin:320,viewportMax:1200};function c(o,e=4){const t=10**e;return Math.round(o*t)/t}function d(o,e,t,s,p){if(Math.abs(e-o)<1e-4)return`${c(o)}rem`;const m=(e-o)*t*100/(p-s),n=o-m*s/(100*t);return`clamp(${c(o)}rem, ${c(n)}rem + ${c(m)}vw, ${c(e)}rem)`}function h(o){const e={};for(let t=0;t<l.length;t++){const s=t-2,p=1.125*o.typeRatio**s;e[l[t]]={min:p,max:p*g}}return e}function x(o){const e={};for(let t=0;t<l.length;t++){const s=E*o.spaceRatio**t;e[l[t]]={min:s,max:s*g}}return e}const S={"--esp-shadow-1":"1px 1px 4px var(--esp-color-shadow)","--esp-shadow-2":"0 2px 8px var(--esp-color-shadow)","--esp-shadow-3":"0 6px 20px var(--esp-color-shadow)"},_={"--esp-type-overline-color":"var(--esp-color-type-overline, var(--esp-color-text))","--esp-type-label-color":"var(--esp-color-type-label, var(--esp-color-text))","--esp-type-lead-color":"var(--esp-color-type-lead, var(--esp-color-text))","--esp-type-caption-color":"var(--esp-color-type-caption, var(--esp-color-text))"},w={"--esp-type-overline-font-size":"var(--esp-type-tiny)","--esp-type-overline-font-weight":"var(--esp-font-weight-headings)","--esp-type-overline-letter-spacing":"0.08em","--esp-type-overline-text-transform":"uppercase","--esp-type-label-font-size":"var(--esp-type-normal)","--esp-type-label-font-weight":"var(--esp-font-weight-headings)","--esp-type-label-letter-spacing":"0.01em","--esp-type-lead-font-size":"var(--esp-type-medium)","--esp-type-lead-font-weight":"var(--esp-font-weight-body)","--esp-type-lead-letter-spacing":"normal","--esp-type-caption-font-size":"var(--esp-type-small)","--esp-type-caption-font-weight":"var(--esp-font-weight-body)","--esp-type-caption-letter-spacing":"normal",..._};function P(o){const e={},{rootFontSize:t,viewportMin:s,viewportMax:p,borderRadius:m}=o,n=16,a=t/n,u=h(o);for(const r of l){const{min:i,max:v}=u[r];e[`--esp-type-${r}`]=d(i*a,v*a,n,s,p)}Object.assign(e,w);const y=x(o);for(const r of l){const{min:i,max:v}=y[r];e[`--esp-size-${r}`]=d(i*a,v*a,n,s,p)}for(const[r,i]of f)e[`--esp-size-${r}-to-${i}`]=d(y[r].min*a,y[i].max*a,n,s,p);return e["--esp-size-font"]="var(--esp-type-normal)",e["--esp-size-padding"]="var(--esp-size-tiny-to-small)",e["--esp-size-padding-page"]="var(--esp-size-small-to-normal)",e["--esp-size-border-radius"]=`${c(m*a)}rem`,e["--esp-measure"]="66ch",e["--esp-measure-wide"]="90ch",e["--esp-size-section"]="clamp(var(--esp-size-big), 7vw, var(--esp-size-huge))",Object.assign(e,S),e["--esp-card-min"]="16rem",e}export{z as DEFAULT_SCALE_CONFIG,S as ELEVATION_PROPERTIES,l as STEP_NAMES,_ as TYPE_ROLE_COLOR_PROPERTIES,w as TYPE_ROLE_PROPERTIES,P as generateScaleProperties};
+const l=["tiny","small","normal","medium","big","large","huge"],O=2,b=1.125,f=1.3333333333333333,h=[["tiny","small"],["small","normal"],["normal","medium"],["medium","big"],["big","large"],["large","huge"]],u=.375,z={rootFontSize:16,typeRatio:1.25,spaceRatio:1.618,borderRadius:.2,viewportMin:320,viewportMax:1200};function c(s,e=4){const t=10**e;return Math.round(s*t)/t}function m(s,e,t,p,o){if(Math.abs(e-s)<1e-4)return`${c(s)}rem`;const y=(e-s)*t*100/(o-p),n=s-y*p/(100*t);return`clamp(${c(s)}rem, ${c(n)}rem + ${c(y)}vw, ${c(e)}rem)`}function E(s){const e={};for(let t=0;t<l.length;t++){const p=t-2,o=1.125*s.typeRatio**p;e[l[t]]={min:o,max:o*f}}return e}function x(s){const e={};for(let t=0;t<l.length;t++){const p=u*s.spaceRatio**t;e[l[t]]={min:p,max:p*f}}return e}const w={"--esp-shadow-1":"1px 1px 4px var(--esp-color-shadow)","--esp-shadow-2":"0 2px 8px var(--esp-color-shadow)","--esp-shadow-3":"0 6px 20px var(--esp-color-shadow)"},S={"--esp-type-overline-color":"var(--esp-color-type-overline, var(--esp-color-text))","--esp-type-label-color":"var(--esp-color-type-label, var(--esp-color-text))","--esp-type-lead-color":"var(--esp-color-type-lead, var(--esp-color-text))","--esp-type-caption-color":"var(--esp-color-type-caption, var(--esp-color-text))","--esp-type-display-color":"var(--esp-color-headings, var(--esp-color-text))"},_={"--esp-type-overline-font-size":"var(--esp-type-tiny)","--esp-type-overline-font-weight":"var(--esp-font-weight-headings)","--esp-type-overline-letter-spacing":"0.08em","--esp-type-overline-text-transform":"uppercase","--esp-type-label-font-size":"var(--esp-type-normal)","--esp-type-label-font-weight":"var(--esp-font-weight-headings)","--esp-type-label-letter-spacing":"0.01em","--esp-type-lead-font-size":"var(--esp-type-medium)","--esp-type-lead-font-weight":"var(--esp-font-weight-body)","--esp-type-lead-letter-spacing":"normal","--esp-type-caption-font-size":"var(--esp-type-small)","--esp-type-caption-font-weight":"var(--esp-font-weight-body)","--esp-type-caption-letter-spacing":"normal","--esp-type-display-font-family":"var(--esp-font-headings)","--esp-type-display-font-weight":"var(--esp-font-weight-headings)","--esp-type-display-line-height":"1.1","--esp-type-display-letter-spacing":"normal",...S};function P(s){const e={},{rootFontSize:t,viewportMin:p,viewportMax:o,borderRadius:y}=s,n=16,r=t/n,d=E(s);for(const a of l){const{min:i,max:v}=d[a];e[`--esp-type-${a}`]=m(i*r,v*r,n,p,o)}e["--esp-type-display-font-size"]=m(d.large.min*r,d.huge.max*r,n,p,o),Object.assign(e,_);const g=x(s);for(const a of l){const{min:i,max:v}=g[a];e[`--esp-size-${a}`]=m(i*r,v*r,n,p,o)}for(const[a,i]of h)e[`--esp-size-${a}-to-${i}`]=m(g[a].min*r,g[i].max*r,n,p,o);return e["--esp-size-font"]="var(--esp-type-normal)",e["--esp-size-padding"]="var(--esp-size-tiny-to-small)",e["--esp-size-padding-page"]="var(--esp-size-small-to-normal)",e["--esp-size-border-radius"]=`${c(y*r)}rem`,e["--esp-measure"]="66ch",e["--esp-measure-wide"]="90ch",e["--esp-size-section"]="clamp(var(--esp-size-big), 7vw, var(--esp-size-huge))",Object.assign(e,w),e["--esp-card-min"]="16rem",e}export{z as DEFAULT_SCALE_CONFIG,w as ELEVATION_PROPERTIES,l as STEP_NAMES,S as TYPE_ROLE_COLOR_PROPERTIES,_ as TYPE_ROLE_PROPERTIES,P as generateScaleProperties};

package/dist/shared/visual-overlay.js

@@ -1,4 +1,4 @@
-import{css as r,html as o,nothing as a}from"lit";function i(e={}){return o`
+import{css as r,html as o,nothing as a}from"lit";function t(e={}){return o`
     <div
       class="esp-visual-overlay ${e.className??""}"
       part=${e.rootPart||a}
@@ -8,7 +8,7 @@ import{css as r,html as o,nothing as a}from"lit";function i(e={}){return o`
       <div class="esp-visual-overlay__scrim" part=${e.scrimPart||a}></div>
       <div class="esp-visual-overlay__texture" part=${e.texturePart||a}></div>
     </div>
-  `}const v=r`
+  `}const i=r`
   .esp-visual-overlay {
     position: absolute;
     z-index: var(--_esp-overlay-z-index, auto);
@@ -41,11 +41,18 @@ import{css as r,html as o,nothing as a}from"lit";function i(e={}){return o`
   }
 
   .esp-visual-overlay__texture {
-    background: var(--_esp-overlay-texture, none);
+    background-color: var(--_esp-overlay-texture-color, transparent);
+    background-image: var(--_esp-overlay-texture, none);
+    background-position: var(--_esp-overlay-texture-position, 0 0);
+    background-repeat: var(--_esp-overlay-texture-repeat, repeat);
     background-size: var(--_esp-overlay-texture-size, auto);
     opacity: var(--_esp-overlay-texture-opacity, 1);
     mix-blend-mode: var(--_esp-overlay-texture-blend-mode, normal);
     filter: var(--_esp-overlay-texture-filter, none);
-    mask: var(--_esp-overlay-texture-mask, none);
+    mask-image: var(--_esp-overlay-texture-mask, none);
+    mask-mode: alpha;
+    mask-position: var(--_esp-overlay-texture-mask-position, 0 0);
+    mask-repeat: var(--_esp-overlay-texture-mask-repeat, repeat);
+    mask-size: var(--_esp-overlay-texture-mask-size, auto);
   }
-`;export{i as renderVisualOverlay,v as visualOverlayStyles};
+`;export{t as renderVisualOverlay,i as visualOverlayStyles};