@taprootio/espalier 4.15.0 → 4.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/custom-elements.json +5473 -5416
- package/dist/breadcrumbs/esp-breadcrumb.d.ts +20 -4
- package/dist/breadcrumbs/esp-breadcrumb.js +20 -6
- package/dist/breadcrumbs/esp-breadcrumbs.d.ts +16 -2
- package/dist/breadcrumbs/esp-breadcrumbs.js +6 -7
- package/dist/button/esp-button.js +29 -10
- package/dist/image/esp-image.d.ts +73 -1
- package/dist/image/esp-image.js +73 -7
- package/dist/lightbox/esp-lightbox.js +1 -0
- package/dist/tabs/esp-tab-group.js +15 -5
- package/espalier.css-data.json +24 -4
- package/espalier.token-manifest.json +35 -5
- package/package.json +1 -1
|
@@ -4,8 +4,21 @@ import { LitElement } from "lit";
|
|
|
4
4
|
* [esp-breadcrumbs](/components/breadcrumbs/) to show breadcrumb
|
|
5
5
|
* navigation.
|
|
6
6
|
*
|
|
7
|
-
* @cssprop --esp-breadcrumb-color - The text color of the breadcrumb link.
|
|
8
|
-
*
|
|
7
|
+
* @cssprop --esp-breadcrumb-color - The text color of the breadcrumb link. Defaults to
|
|
8
|
+
* `var(--esp-color-link)`, so a trail reads as navigation in the same ink as the links in
|
|
9
|
+
* the surrounding content.
|
|
10
|
+
* @cssprop --esp-breadcrumb-hover-color - The text color on hover. Defaults to
|
|
11
|
+
* `var(--esp-color-link-hover)`.
|
|
12
|
+
* @cssprop --esp-breadcrumb-hover-background - The background behind a hovered link.
|
|
13
|
+
* Defaults to `var(--esp-color-link-hover-bg)`.
|
|
14
|
+
* @cssprop --esp-breadcrumb-current-color - The text color of the current-page crumb, which
|
|
15
|
+
* is not a link. Defaults to `--esp-breadcrumb-color` when that is set, then to
|
|
16
|
+
* `var(--esp-color-headings)`, keeping the current page distinct from the links beside it.
|
|
17
|
+
* @cssprop --esp-breadcrumb-separator-color - The color of the separator icons. Defaults to
|
|
18
|
+
* `oklch(from var(--esp-color-link) l c calc(h + 90))`, an accent that takes the link ink's
|
|
19
|
+
* scheme-adapted lightness and chroma at a different hue, so the arrows are their own color
|
|
20
|
+
* rather than the heading color. Set it on `esp-breadcrumbs` to recolor a whole trail, or on
|
|
21
|
+
* one `esp-breadcrumb` to recolor a single arrow.
|
|
9
22
|
* @docPageTitle Breadcrumb
|
|
10
23
|
* @docUrl /components/breadcrumbs/breadcrumb
|
|
11
24
|
* @menuGroup Navigation
|
|
@@ -26,8 +39,11 @@ export declare class EspalierBreadcrumb extends LitElement {
|
|
|
26
39
|
*/
|
|
27
40
|
separator: string;
|
|
28
41
|
/**
|
|
29
|
-
*
|
|
30
|
-
*
|
|
42
|
+
* Marks this crumb as the end of the trail. The parent
|
|
43
|
+
* `esp-breadcrumbs` sets it to pick the down-arrow separator and
|
|
44
|
+
* the current-crumb styling. It does not decide link versus label —
|
|
45
|
+
* a crumb that carries a `url` stays clickable wherever it sits, so
|
|
46
|
+
* a trail can end at its deepest folder.
|
|
31
47
|
* @type {boolean}
|
|
32
48
|
*/
|
|
33
49
|
isLastElement: boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var a=function(l,t,o,s){var i=arguments.length,e=i<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,o):s,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(l,t,o,s);else for(var p=l.length-1;p>=0;p--)(n=l[p])&&(e=(i<3?n(e):i>3?n(t,o,e):n(t,o))||e);return i>3&&e&&Object.defineProperty(t,o,e),e};import{LitElement as d,css as m,html as h}from"lit";import{customElement as u,property as c}from"lit/decorators.js";import{unsafeSVG as b}from"lit/directives/unsafe-svg.js";let r=class extends d{constructor(){super(...arguments),this.label="",this.url="",this.separator="",this.isLastElement=!1}_renderLink(){return this.url?h`<a href=${this.url}>${this.label}</a>`:h`<label>${this.label}</label>`}render(){return h`${this._renderLink()}${this.separator?b(this.separator):""}`}};r.styles=m`
|
|
2
2
|
:host {
|
|
3
3
|
display: grid;
|
|
4
4
|
grid-template-columns: min-content min-content;
|
|
@@ -6,9 +6,8 @@ var i=function(s,r,o,a){var l=arguments.length,e=l<3?r:a===null?a=Object.getOwnP
|
|
|
6
6
|
align-items: center;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
label {
|
|
11
|
-
color: var(--esp-breadcrumb-color, var(--esp-color-headings));
|
|
9
|
+
|
|
10
|
+
:is(a, label) {
|
|
12
11
|
font-weight: bold;
|
|
13
12
|
width: min-content;
|
|
14
13
|
text-decoration: none;
|
|
@@ -16,17 +15,32 @@ var i=function(s,r,o,a){var l=arguments.length,e=l<3?r:a===null?a=Object.getOwnP
|
|
|
16
15
|
white-space: nowrap;
|
|
17
16
|
}
|
|
18
17
|
|
|
18
|
+
a {
|
|
19
|
+
color: var(--esp-breadcrumb-color, var(--esp-color-link));
|
|
20
|
+
}
|
|
21
|
+
|
|
19
22
|
a:hover {
|
|
20
|
-
|
|
23
|
+
background: var(--esp-breadcrumb-hover-background, var(--esp-color-link-hover-bg));
|
|
24
|
+
color: var(--esp-breadcrumb-hover-color, var(--esp-color-link-hover));
|
|
21
25
|
text-decoration: underline;
|
|
22
26
|
}
|
|
23
27
|
|
|
28
|
+
|
|
24
29
|
label {
|
|
30
|
+
color: var(
|
|
31
|
+
--esp-breadcrumb-current-color,
|
|
32
|
+
var(--esp-breadcrumb-color, var(--esp-color-headings))
|
|
33
|
+
);
|
|
25
34
|
font-style: italic;
|
|
26
35
|
}
|
|
27
36
|
|
|
37
|
+
|
|
28
38
|
svg {
|
|
39
|
+
color: var(
|
|
40
|
+
--esp-breadcrumb-separator-color,
|
|
41
|
+
oklch(from var(--esp-color-link) l c calc(h + 90))
|
|
42
|
+
);
|
|
29
43
|
height: var(--esp-size-normal-to-medium);
|
|
30
44
|
width: var(--esp-size-normal-to-medium);
|
|
31
45
|
}
|
|
32
|
-
`,
|
|
46
|
+
`,a([c({type:String})],r.prototype,"label",void 0),a([c({type:String})],r.prototype,"url",void 0),a([c({type:String})],r.prototype,"separator",void 0),a([c({attribute:"is-last-element",type:Boolean})],r.prototype,"isLastElement",void 0),r=a([u("esp-breadcrumb")],r);export{r as EspalierBreadcrumb};
|
|
@@ -16,6 +16,17 @@ export * from "./esp-breadcrumb.js";
|
|
|
16
16
|
* </esp-breadcrumbs>
|
|
17
17
|
* ```
|
|
18
18
|
*
|
|
19
|
+
* Every crumb with a `url` is a link, including the last one — a trail
|
|
20
|
+
* may end at the deepest folder rather than at the current page. Leave
|
|
21
|
+
* `url` off a crumb to render it as the italic current-page label:
|
|
22
|
+
*
|
|
23
|
+
* ```html
|
|
24
|
+
* <esp-breadcrumbs>
|
|
25
|
+
* <esp-breadcrumb label="Code" url="/code"></esp-breadcrumb>
|
|
26
|
+
* <esp-breadcrumb label="This page"></esp-breadcrumb>
|
|
27
|
+
* </esp-breadcrumbs>
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
19
30
|
* Custom separators can be specified in the `<esp-breadcrumb>`:
|
|
20
31
|
*
|
|
21
32
|
* ```html
|
|
@@ -34,8 +45,11 @@ export * from "./esp-breadcrumb.js";
|
|
|
34
45
|
*
|
|
35
46
|
* @customElement esp-breadcrumbs
|
|
36
47
|
* @slot - `<esp-breadcrumb>` items to display.
|
|
37
|
-
* @cssprop --esp-breadcrumb-separator-color -
|
|
38
|
-
*
|
|
48
|
+
* @cssprop --esp-breadcrumb-separator-color - The color of the separator icons. Defaults to
|
|
49
|
+
* `oklch(from var(--esp-color-link) l c calc(h + 90))`, an accent that takes the link ink's
|
|
50
|
+
* scheme-adapted lightness and chroma at a different hue, so the arrows are their own color
|
|
51
|
+
* rather than the heading color. Set it on `esp-breadcrumbs` to recolor a whole trail, or on
|
|
52
|
+
* one `esp-breadcrumb` to recolor a single arrow.
|
|
39
53
|
*
|
|
40
54
|
* ```html
|
|
41
55
|
* <style>
|
|
@@ -1,22 +1,21 @@
|
|
|
1
|
-
var
|
|
1
|
+
var f=function(l,e,t,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(l,e,t,s);else for(var i=l.length-1;i>=0;i--)(a=l[i])&&(r=(o<3?a(r):o>3?a(e,t,r):a(e,t))||r);return o>3&&r&&Object.defineProperty(e,t,r),r};import{css as h,html as u}from"lit";import{customElement as v}from"lit/decorators.js";import{EspalierElementBase as m}from"../shared/esp-element-base.js";import{createRef as d,ref as g}from"lit/directives/ref.js";export*from"./esp-breadcrumb.js";const p=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
2
2
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
3
3
|
<path
|
|
4
4
|
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" />
|
|
5
|
-
</svg>`,
|
|
5
|
+
</svg>`,c=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
|
6
6
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
7
7
|
<path
|
|
8
8
|
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"
|
|
9
9
|
/>
|
|
10
|
-
</svg>`;let
|
|
10
|
+
</svg>`;let n=class extends m{constructor(){super(...arguments),this.itemsSlot=d()}firstUpdated(e){if(super.firstUpdated(e),!this.itemsSlot.value){console.warn("No items slot found for breadcrumbs.");return}this.assignSeparators()}assignSeparators(){const e=this.itemsSlot.value?.assignedElements()??[];for(let t=0;t<e.length;t++){const s=e[t],o=t===e.length-1;s.isLastElement=o;const r=s.separator===p||s.separator===c;s.separator&&!r||(s.separator=o?c:p)}}render(){return u`
|
|
11
11
|
<div class="crumbs">
|
|
12
|
-
<slot ${
|
|
12
|
+
<slot ${g(this.itemsSlot)} @slotchange=${this.assignSeparators}></slot>
|
|
13
13
|
</div>
|
|
14
|
-
`}};
|
|
14
|
+
`}};n.styles=[...m.styles,h`
|
|
15
15
|
div.crumbs {
|
|
16
16
|
display: flex;
|
|
17
17
|
align-items: center;
|
|
18
18
|
gap: var(--esp-size-tiny-to-small);
|
|
19
19
|
font-size: var(--esp-size-small-to-normal);
|
|
20
|
-
color: var(--esp-breadcrumb-separator-color, var(--esp-color-headings));
|
|
21
20
|
}
|
|
22
|
-
`],
|
|
21
|
+
`],n=f([v("esp-breadcrumbs")],n);export{n as EspalierBreadcrumbs};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var n=function(h,t,
|
|
1
|
+
var n=function(h,t,s,i){var a=arguments.length,o=a<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,s):i,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(h,t,s,i);else for(var c=h.length-1;c>=0;c--)(d=h[c])&&(o=(a<3?d(o):a>3?d(t,s,o):d(t,s))||o);return a>3&&o&&Object.defineProperty(t,s,o),o};import{css as g,html as p,nothing as l}from"lit";import{customElement as f,eventOptions as m,property as r,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{ESP_EVENTS as y}from"../shared/events.js";import{ref as w}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 T}from"../shared/svgs/render-sprite-icon.js";import{BUTTON_INTERACTION_LIGHTNESS_FACTOR as S}from"./action-state-lightness.js";const $=p`<svg
|
|
2
2
|
xmlns="http://www.w3.org/2000/svg"
|
|
3
3
|
viewBox="0 0 24 24"
|
|
4
4
|
fill="none"
|
|
@@ -10,40 +10,40 @@ var n=function(h,t,r,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnP
|
|
|
10
10
|
>
|
|
11
11
|
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
|
|
12
12
|
<path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
|
|
13
|
-
</svg>`;let e=class extends b{constructor(){super(...arguments),this.iconSlot=new
|
|
13
|
+
</svg>`;let e=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.iconPosition="right",this.label="",this.loading=!1,this.target="",this.rel="",this.formNoValidate=!1,this.buildIcon=t=>this.loading?p` <span>${$}</span> `:p`
|
|
14
14
|
<span>
|
|
15
15
|
<slot ${w(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
|
|
16
16
|
${!this.iconSlot.hasSlottedIcon(":scope > *")&&t?T(t):l}
|
|
17
17
|
</span>
|
|
18
|
-
`}static get observedAttributes(){return[...super.observedAttributes,"tabindex","aria-pressed"]}attributeChangedCallback(t,
|
|
19
|
-
<div part="wrapper" class=${u(
|
|
18
|
+
`}static get observedAttributes(){return[...super.observedAttributes,"tabindex","aria-pressed"]}attributeChangedCallback(t,s,i){if(super.attributeChangedCallback(t,s,i),t==="aria-pressed"){this.requestUpdate();return}if(t!=="tabindex"||this.neutralizingTabindex)return;const a=i===null?null:Number(i),o=a===null||Number.isNaN(a)?null:a;o!==null&&o>=0?(this.innerTabindex=o,this.writeHostTabindex(null)):o===null&&i!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=o}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(y.CLICKED,{detail:{},bubbles:!0,composed:!0})),this.buttonType==="submit"){const s=this.closest("form");if(s){const i=document.createElement("button");i.type="submit",i.hidden=!0,this.formNoValidate&&(i.formNoValidate=!0),s.appendChild(i),s.requestSubmit(i),i.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=k(this.icon,this),s=this.loading||this.iconSlot.hasSlottedIcon(":scope > *")||t.length>0,{collapsed:i,iconOnly:a}=this,o=a?this.getAttribute("aria-label")||this.label||l:l,d=this.getAttribute("aria-pressed")||l,c={"esp-field":!0,"icon-only":a,incognito:this.incognito,"is-collapsed":i,"has-icon":s,"icon-left":s&&!a&&this.iconPosition==="left"};return this.href.length?p`
|
|
19
|
+
<div part="wrapper" class=${u(c)}>
|
|
20
20
|
<a
|
|
21
21
|
?disabled=${this.disabled}
|
|
22
22
|
href=${this.href}
|
|
23
23
|
target=${this.target}
|
|
24
24
|
rel=${this.rel||l}
|
|
25
25
|
tabindex=${this.innerTabindex??l}
|
|
26
|
-
aria-label=${
|
|
26
|
+
aria-label=${o}
|
|
27
27
|
>
|
|
28
28
|
<span>${this.label??""}</span>
|
|
29
29
|
${this.buildIcon(t)}
|
|
30
30
|
</a>
|
|
31
31
|
</div>
|
|
32
|
-
`:
|
|
33
|
-
<div part="wrapper" class=${u(
|
|
32
|
+
`:p`
|
|
33
|
+
<div part="wrapper" class=${u(c)}>
|
|
34
34
|
<button
|
|
35
35
|
?disabled=${this.disabled||this.loading}
|
|
36
36
|
@click=${this.handleClick}
|
|
37
37
|
type=${this.buttonType}
|
|
38
38
|
tabindex=${this.innerTabindex??l}
|
|
39
|
-
aria-label=${
|
|
39
|
+
aria-label=${o}
|
|
40
40
|
aria-pressed=${d}
|
|
41
41
|
>
|
|
42
42
|
<span>${this.label??""}</span>
|
|
43
43
|
${this.buildIcon(t)}
|
|
44
44
|
</button>
|
|
45
45
|
</div>
|
|
46
|
-
`}};e.styles=[...b.styles,
|
|
46
|
+
`}};e.styles=[...b.styles,g`
|
|
47
47
|
:host {
|
|
48
48
|
--_esp-button-radius: var(--esp-size-border-radius);
|
|
49
49
|
}
|
|
@@ -112,6 +112,25 @@ var n=function(h,t,r,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnP
|
|
|
112
112
|
display: grid;
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
&:where(:not(.icon-left)) {
|
|
118
|
+
button,
|
|
119
|
+
a {
|
|
120
|
+
> span:nth-child(1) {
|
|
121
|
+
padding-inline-end: 0;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&.icon-left {
|
|
127
|
+
button,
|
|
128
|
+
a {
|
|
129
|
+
> span:nth-child(1) {
|
|
130
|
+
padding-inline-start: 0;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
}
|
|
115
134
|
}
|
|
116
135
|
|
|
117
136
|
&.is-collapsed,
|
|
@@ -213,4 +232,4 @@ var n=function(h,t,r,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnP
|
|
|
213
232
|
transform: rotate(360deg);
|
|
214
233
|
}
|
|
215
234
|
}
|
|
216
|
-
`],n([v()],e.prototype,"innerTabindex",void 0),n([
|
|
235
|
+
`],n([v()],e.prototype,"innerTabindex",void 0),n([r({attribute:"button-type",type:String})],e.prototype,"buttonType",void 0),n([r({type:Boolean})],e.prototype,"collapsed",void 0),n([r({type:Boolean,reflect:!0})],e.prototype,"disabled",void 0),n([r({type:String})],e.prototype,"href",void 0),n([r({attribute:"icon-only",type:Boolean})],e.prototype,"iconOnly",void 0),n([r({type:Boolean,reflect:!0})],e.prototype,"incognito",void 0),n([r({type:String})],e.prototype,"icon",void 0),n([r({attribute:"icon-position",type:String})],e.prototype,"iconPosition",void 0),n([r({type:String})],e.prototype,"label",void 0),n([r({type:Boolean,reflect:!0})],e.prototype,"loading",void 0),n([r({type:String})],e.prototype,"target",void 0),n([r({type:String})],e.prototype,"rel",void 0),n([r({attribute:"formnovalidate",type:Boolean})],e.prototype,"formNoValidate",void 0),n([m({capture:!1,passive:!0})],e.prototype,"handleClick",null),e=n([f("esp-button")],e);export{e as EspalierButton};
|
|
@@ -4,6 +4,7 @@ import { type FocusPoint } from "./image-focus.js";
|
|
|
4
4
|
import "./esp-image-option.js";
|
|
5
5
|
export type ImageScrim = "auto" | "none" | "flat" | "top" | "bottom" | "left" | "right" | "radial";
|
|
6
6
|
export type ImageScrimStrength = "soft" | "medium" | "strong";
|
|
7
|
+
export type ImageScrimEdge = "none" | "flush";
|
|
7
8
|
export type ImageTexture = "none" | "dots" | "halftone" | "paper" | "grain" | "grunge" | "scanlines" | "duotone";
|
|
8
9
|
export type ImageTextureScale = "fine" | "medium" | "coarse";
|
|
9
10
|
export type ImageBannerScheme = "auto" | "light" | "dark";
|
|
@@ -116,6 +117,66 @@ export declare function parseImageRatio(value: string): string | null;
|
|
|
116
117
|
* </esp-image>
|
|
117
118
|
* ```
|
|
118
119
|
*
|
|
120
|
+
* ### Meeting an adjoining band
|
|
121
|
+
*
|
|
122
|
+
* A directional scrim is capped by `scrim-strength`, so even `strong` leaves
|
|
123
|
+
* roughly a quarter of the photograph showing at the very edge it is anchored
|
|
124
|
+
* to. `scrim-edge="flush"` paints that edge at full alpha and relaxes to the
|
|
125
|
+
* ordinary strength over `--esp-image-scrim-edge-depth` (12% of the gradient
|
|
126
|
+
* axis by default), so a banner dissolves into a section band directly beneath
|
|
127
|
+
* it with no seam. Above that band the scrim is unchanged — `flush` is an edge
|
|
128
|
+
* treatment, not a heavier veil over the subject.
|
|
129
|
+
*
|
|
130
|
+
* The join is exact because both sides paint the same token: when
|
|
131
|
+
* `banner-scheme` resolves to the page scheme the scrim ink *is*
|
|
132
|
+
* `--esp-color-background`, which is what [esp-section](/components/section)
|
|
133
|
+
* paints its band with. Put the banner in a section with no padding, directly
|
|
134
|
+
* above a section in the same context:
|
|
135
|
+
*
|
|
136
|
+
* ```html
|
|
137
|
+
* <esp-section style="--esp-section-max-width: none; --esp-section-padding-inline: 0; --esp-section-padding-block: 0;">
|
|
138
|
+
* <esp-image banner ratio="3/1" scrim="bottom" scrim-strength="strong" scrim-edge="flush" focus="0.65 0.4">
|
|
139
|
+
* <img src="/assets/focus-picker-unsplash.jpg" alt="A woman standing in a sunlit field with her back to the camera" />
|
|
140
|
+
* <h2 slot="overlay">Grow somewhere wonderful</h2>
|
|
141
|
+
* </esp-image>
|
|
142
|
+
* </esp-section>
|
|
143
|
+
* <esp-section>
|
|
144
|
+
* <p>The banner's bottom edge and this band are the same color, so the photograph fades into the page rather than stopping at a line.</p>
|
|
145
|
+
* </esp-section>
|
|
146
|
+
* ```
|
|
147
|
+
*
|
|
148
|
+
* `flush` is inert unless the *resolved* scrim is directional — an `auto`
|
|
149
|
+
* scrim that resolves to `top` or `bottom` picks it up, while `none`, `flat`,
|
|
150
|
+
* and `radial` ignore it, having no anchored edge for it to close.
|
|
151
|
+
*
|
|
152
|
+
* It is its own attribute rather than a fourth `scrim-strength` because the two
|
|
153
|
+
* are independent: `scrim-strength` is how much veil sits over the subject,
|
|
154
|
+
* `scrim-edge` is whether the anchored edge completes. A light veil with a
|
|
155
|
+
* closed edge is exactly the composition this exists for, and a strength step
|
|
156
|
+
* could not express it.
|
|
157
|
+
*
|
|
158
|
+
* A seamless tile can bleed across the join too — any `background-image` value,
|
|
159
|
+
* a tile the application serves, a data URI, or a gradient. Hand the edge the
|
|
160
|
+
* same background the adjoining section paints and it tiles up over the
|
|
161
|
+
* photograph, fading out over the same band:
|
|
162
|
+
*
|
|
163
|
+
* ```html
|
|
164
|
+
* <esp-image
|
|
165
|
+
* banner
|
|
166
|
+
* ratio="3/1"
|
|
167
|
+
* scrim="bottom"
|
|
168
|
+
* scrim-edge="flush"
|
|
169
|
+
* style="--esp-image-scrim-edge-image: repeating-linear-gradient(45deg, oklch(0.55 0.08 255 / 0.18) 0 6px, transparent 6px 18px); --esp-image-scrim-edge-size: 18px 18px; --esp-image-scrim-edge-depth: 22%;"
|
|
170
|
+
* >
|
|
171
|
+
* <img src="/assets/focus-picker-unsplash.jpg" alt="A woman standing in a sunlit field with her back to the camera" />
|
|
172
|
+
* </esp-image>
|
|
173
|
+
* ```
|
|
174
|
+
*
|
|
175
|
+
* The component anchors its own side of the tile to the scrim's edge, so the
|
|
176
|
+
* banner's last tile row ends exactly at the join. Continuity into the section
|
|
177
|
+
* below is the consumer's half of the contract: the same `background-size`,
|
|
178
|
+
* and a `top`-anchored `background-position` on the adjoining band.
|
|
179
|
+
*
|
|
119
180
|
* Every procedural preset supports `fine`, `medium`, and `coarse` scales.
|
|
120
181
|
*
|
|
121
182
|
* ### Dots
|
|
@@ -232,8 +293,11 @@ export declare function parseImageRatio(value: string): string | null;
|
|
|
232
293
|
* @cssprop --esp-image-border-radius - Corner radius; defaults to `var(--esp-size-border-radius)` or zero in banner mode.
|
|
233
294
|
* @cssprop --esp-image-object-position - Final object-position override.
|
|
234
295
|
* @cssprop --esp-image-compact-width - Component-width threshold; defaults to `40rem`.
|
|
235
|
-
* @cssprop --esp-image-scrim-color - Scrim ink; defaults to the theme background when the banner polarity matches the scheme, else a polarity-pinned derivation.
|
|
296
|
+
* @cssprop --esp-image-scrim-color - Scrim ink; defaults to the theme background when the banner polarity matches the scheme, else a polarity-pinned derivation. A `scrim-edge="flush"` join is seamless only while the ink is the adjoining band's own color, so an explicit cross-scheme `banner-scheme` (or an override to any other color) makes the edge a deliberate color break rather than a dissolve.
|
|
236
297
|
* @cssprop --esp-image-scrim-opacity - Scrim-strength opacity override.
|
|
298
|
+
* @cssprop --esp-image-scrim-edge-depth - How far a `scrim-edge="flush"` edge takes to relax from full alpha to the ordinary scrim strength, along the gradient axis; defaults to `12%`.
|
|
299
|
+
* @cssprop --esp-image-scrim-edge-image - Background image painted over the flush edge and faded out with it — the adjoining band's seamless tile; defaults to `none`. Inert unless `scrim-edge="flush"` resolves onto a directional scrim.
|
|
300
|
+
* @cssprop --esp-image-scrim-edge-size - Background size for `--esp-image-scrim-edge-image`; defaults to `auto`. Match the adjoining band's own `background-size` for a continuous tile.
|
|
237
301
|
* @cssprop --esp-image-texture-color - Procedural texture ink; defaults to a theme-derived color following `banner-scheme`.
|
|
238
302
|
* @cssprop --esp-image-texture-opacity - Procedural texture opacity override.
|
|
239
303
|
* @cssprop --esp-image-texture-scale - CSS-gradient texture pitch override.
|
|
@@ -309,6 +373,14 @@ export declare class EspalierImage extends EspalierElementBase {
|
|
|
309
373
|
scrim: ImageScrim;
|
|
310
374
|
/** Preset opacity for the scrim. */
|
|
311
375
|
scrimStrength: ImageScrimStrength;
|
|
376
|
+
/**
|
|
377
|
+
* Edge treatment for a directional scrim. `flush` paints the scrim ink at
|
|
378
|
+
* full alpha along the edge the scrim is anchored to, relaxing to the
|
|
379
|
+
* ordinary strength over `--esp-image-scrim-edge-depth`, so a banner can
|
|
380
|
+
* dissolve into a section band it adjoins. Inert unless the resolved scrim
|
|
381
|
+
* is `top`, `bottom`, `left`, or `right`.
|
|
382
|
+
*/
|
|
383
|
+
scrimEdge: ImageScrimEdge;
|
|
312
384
|
/**
|
|
313
385
|
* Optional texture: a built-in procedural preset, or the name of a
|
|
314
386
|
* texture registered with `registerImageTexture`. Unknown names render
|
package/dist/image/esp-image.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(d,e,t,r);else for(var l=d.length-1;l>=0;l--)(o=d[l])&&(s=(i<3?o(s):i>3?o(e,t,s):o(e,t))||s);return i>3&&s&&Object.defineProperty(e,t,s),s},p;import{css as
|
|
1
|
+
var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(d,e,t,r);else for(var l=d.length-1;l>=0;l--)(o=d[l])&&(s=(i<3?o(s):i>3?o(e,t,s):o(e,t))||s);return i>3&&s&&Object.defineProperty(e,t,s),s},p;import{css as T,html as h,nothing as C}from"lit";import{customElement as $,property as c,state as u}from"lit/decorators.js";import{EspalierElementBase as v}from"../shared/esp-element-base.js";import{slotHasContent as y}from"../shared/slot-content.js";import{renderVisualOverlay as E,visualOverlayStyles as A}from"../shared/visual-overlay.js";import{focusConverter as N,normalizeFocus as R}from"./image-focus.js";import{ensureImageTextureFilters as W,imageTextureFilterId as M}from"./image-texture-filters.js";import{getImageTexture as b,isBuiltInImageTexture as x,subscribeToImageTextureRegistry as D}from"../shared/image-texture-registry.js";import{validImageDimensions as _}from"./image-dimensions.js";import"./esp-image-option.js";const k=new Set(["auto","none","flat","top","bottom","left","right","radial"]),w=new Set(["soft","medium","strong"]),S=new Set(["none","flush"]),z=new Set(["fine","medium","coarse"]),j=new Set(["auto","light","dark"]),O=new Set(["bottom-start","bottom","bottom-end","center","top-start","top","top-end"]);function m(d,e){return{fromAttribute(t){return t&&d.has(t)?t:e},toAttribute(t){return d.has(t)?t:e}}}function I(d){const e=d.trim();if(!e)return null;const t=e.split("/").map(i=>i.trim());if(t.length>2||t.some(i=>i.length===0))return null;const r=t.map(Number);return r.some(i=>!Number.isFinite(i)||i<=0)?null:r.length===1?String(r[0]):`${r[0]} / ${r[1]}`}let a=p=class extends v{constructor(){super(...arguments),this.originalHeight=0,this.originalWidth=0,this.imageUrl="",this.localImage="",this.caption="",this.sizes="100vw",this.loading="eager",this.deferOffscreen=!1,this.banner=!1,this.bannerScheme="auto",this.scrim="auto",this.scrimStrength="medium",this.scrimEdge="none",this.texture="none",this.textureScale="medium",this.contentPosition="bottom-start",this.focusPoint={x:.5,y:.5},this.ratio="",this.compactRatio="",this.renderedWidth=0,this.measuredWidth=0,this.compact=!1,this.overlayHasContent=!1,this.resizeObserver=null,this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.unsubscribeTextures=null,this.handleSlotChange=e=>{if(e.target instanceof HTMLSlotElement){if(e.target.name==="overlay"){const t=y(e.target);t!==this.overlayHasContent&&(this.overlayHasContent=t);return}this.requestUpdate()}}}get isPortrait(){const e=_(this.originalWidth,this.originalHeight);return e!==null&&e.height>e.width}findProjected(){for(const e of this.children)if(e.tagName==="PICTURE"||e.tagName==="IMG")return e;return null}findProjectedImage(e=this.findProjected()){return e?e.tagName==="IMG"?e:e.querySelector("img"):null}requiresOffscreenDeferral(e=this.findProjectedImage()){return this.deferOffscreen&&e?.getAttribute("loading")?.toLowerCase()==="lazy"}shouldDeferProjectedSizes(){return this.requiresOffscreenDeferral()&&!this.offscreenAdmitted}applyMeasuredWidth(){this.measuredWidth>0&&this.measuredWidth!==this.renderedWidth&&(this.renderedWidth=this.measuredWidth)}syncOffscreenDeferral(){const e=this.findProjectedImage();if(e!==this.deferredProjectedImage&&(this.offscreenAdmitted=!1,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.deferredProjectedImage=e),!this.requiresOffscreenDeferral(e)){this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null,this.applyMeasuredWidth();return}if(!this.offscreenAdmitted){if(typeof IntersectionObserver>"u"){this.offscreenAdmitted=!0,this.applyMeasuredWidth();return}if(!this.offscreenObserver){const t=e,r=new IntersectionObserver(i=>{if(this.offscreenObserver===r){if(this.findProjectedImage()!==t){this.syncOffscreenDeferral();return}i.some(s=>s.isIntersecting)&&(this.offscreenAdmitted=!0,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.applyMeasuredWidth(),this.requestUpdate())}},{rootMargin:"200px"});this.offscreenObserver=r}this.offscreenObserver.observe(this)}}connectedCallback(){super.connectedCallback(),p.ensureProjectionStyles(this.getRootNode()),this.unsubscribeTextures??=D(()=>this.requestUpdate()),this.resizeObserver??=new ResizeObserver(e=>{const t=e[0]?.contentBoxSize?.[0],r=Math.round(t?t.inlineSize:e[0]?.contentRect.width??0);r<=0||(this.measuredWidth=r,this.syncOffscreenDeferral(),this.applyMeasuredWidth())}),this.resizeObserver.observe(this),this.syncOffscreenDeferral()}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeTextures?.(),this.unsubscribeTextures=null,this.resizeObserver?.disconnect(),this.resizeObserver=null,this.offscreenObserver?.disconnect(),this.offscreenObserver=null,this.offscreenAdmitted=!1,this.deferredProjectedImage=null}effectiveSizes(){return this.renderedWidth>0?`${this.renderedWidth}px`:this.sizes}buildSources(){const e=new Map;for(const t of this.querySelectorAll("esp-image-option")){const r=t.getAttribute("url"),i=Number(t.getAttribute("width"));if(!r||!Number.isFinite(i)||i<=0)continue;const s=t.getAttribute("type")??"",o=e.get(s)??[];o.push({url:r,width:i}),e.set(s,o)}return Array.from(e,([t,r])=>({type:t,srcset:r.sort((i,s)=>i.width-s.width).map(i=>`${i.url} ${i.width}w`).join(", ")})).filter(t=>t.srcset.length>0)}resolvedBannerScheme(){return this.bannerScheme!=="auto"?this.bannerScheme:this.scheme==="dark"?"dark":"light"}resolvedTexture(){return x(this.texture)?this.texture:b(this.texture)?this.texture:"none"}resolvedScrim(){return this.scrim!=="auto"?this.scrim:this.overlayHasContent?this.contentPosition.startsWith("top")?"top":this.contentPosition.startsWith("bottom")?"bottom":"radial":"none"}resolvedAspectRatio(){const e=_(this.originalWidth,this.originalHeight);if(!this.banner)return e?`${e.width} / ${e.height}`:null;const t=I(this.ratio);return(this.compact?I(this.compactRatio):null)??t??(e?`${e.width} / ${e.height}`:null)}normalizeEnums(e){e.has("scrim")&&!k.has(this.scrim)&&(this.scrim="auto"),e.has("bannerScheme")&&!j.has(this.bannerScheme)&&(this.bannerScheme="auto"),e.has("scrimStrength")&&!w.has(this.scrimStrength)&&(this.scrimStrength="medium"),e.has("scrimEdge")&&!S.has(this.scrimEdge)&&(this.scrimEdge="none"),e.has("textureScale")&&!z.has(this.textureScale)&&(this.textureScale="medium"),e.has("contentPosition")&&!O.has(this.contentPosition)&&(this.contentPosition="bottom-start")}willUpdate(e){super.willUpdate(e),this.normalizeEnums(e);const t=R(this.focusPoint),r=Number((t.x*100).toFixed(4)),i=Number((t.y*100).toFixed(4));this.style.setProperty("--_esp-image-object-position",`${r}% ${i}%`);const s=this.resolvedAspectRatio();s?this.style.setProperty("--_esp-image-aspect-ratio",s):this.style.removeProperty("--_esp-image-aspect-ratio");const o=this.resolvedTexture();if(["paper","grain","grunge"].includes(o)){const g=o==="grunge"&&this.resolvedBannerScheme()==="light"?"grunge-light":o;this.style.setProperty("--_esp-image-texture-filter",`url(#${M(g,this.textureScale)})`)}else this.style.removeProperty("--_esp-image-texture-filter");const l=x(o)?void 0:b(o),P=[["--_esp-image-registered-image",l?.image],["--_esp-image-registered-size",l?.size],["--_esp-image-registered-repeat",l?.repeat],["--_esp-image-registered-position",l?.position],["--_esp-image-registered-opacity",l?.opacity?.toString()],["--_esp-image-registered-blend-mode",l?.blendMode]];for(const[g,f]of P)f===void 0?this.style.removeProperty(g):this.style.setProperty(g,f)}firstUpdated(e){super.firstUpdated(e);const t=this.shadowRoot?.querySelector('slot[name="overlay"]');t&&(this.overlayHasContent=y(t))}updated(e){if(super.updated(e),this.syncOffscreenDeferral(),["paper","grain","grunge"].includes(this.resolvedTexture())&&this.renderRoot&&W(this.renderRoot),this.renderedWidth>0){const o=this.shadowRoot?.querySelector(".compact-sentinel")?.getBoundingClientRect().width??0,l=o>0&&this.renderedWidth<o;l!==this.compact&&(this.compact=l)}if(this.renderedWidth<=0||this.shouldDeferProjectedSizes())return;const t=this.findProjected();if(!t)return;const r=this.effectiveSizes();if(t.tagName==="PICTURE")for(const s of t.querySelectorAll("source"))s.setAttribute("sizes",r);const i=this.findProjectedImage(t);i?.hasAttribute("srcset")&&i.setAttribute("sizes",r)}renderMedia(){if(this.localImage)return h`<img
|
|
2
2
|
src=${this.localImage}
|
|
3
3
|
alt=${this.caption}
|
|
4
4
|
decoding="async"
|
|
5
5
|
loading=${this.loading}
|
|
6
|
-
/>`;const e=
|
|
6
|
+
/>`;const e=h`<slot @slotchange=${this.handleSlotChange}></slot>`;if(this.findProjected())return e;const t=this.buildSources();return h`
|
|
7
7
|
<picture>
|
|
8
|
-
${t.map(r=>
|
|
8
|
+
${t.map(r=>h`
|
|
9
9
|
<source
|
|
10
10
|
srcset=${r.srcset}
|
|
11
11
|
sizes=${this.effectiveSizes()}
|
|
@@ -15,19 +15,20 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
|
|
|
15
15
|
<img src=${this.imageUrl} alt=${this.caption} decoding="async" loading=${this.loading} />
|
|
16
16
|
</picture>
|
|
17
17
|
${e}
|
|
18
|
-
`}render(){return
|
|
18
|
+
`}render(){return h`
|
|
19
19
|
<div
|
|
20
20
|
part="frame"
|
|
21
21
|
class="frame"
|
|
22
22
|
data-banner-scheme=${this.resolvedBannerScheme()}
|
|
23
23
|
data-scrim=${this.resolvedScrim()}
|
|
24
24
|
data-scrim-strength=${this.scrimStrength}
|
|
25
|
+
data-scrim-edge=${this.scrimEdge}
|
|
25
26
|
data-texture=${this.resolvedTexture()}
|
|
26
27
|
data-texture-scale=${this.textureScale}
|
|
27
28
|
data-content-position=${this.contentPosition}
|
|
28
29
|
>
|
|
29
30
|
<div part="image" class="image">${this.renderMedia()}</div>
|
|
30
|
-
${
|
|
31
|
+
${E({className:"banner-layers",imagePart:"texture",scrimPart:"scrim",texturePart:"texture"})}
|
|
31
32
|
<div part="overlay" class="overlay" ?hidden=${!this.banner||!this.overlayHasContent}>
|
|
32
33
|
<slot name="overlay" @slotchange=${this.handleSlotChange}></slot>
|
|
33
34
|
</div>
|
|
@@ -49,7 +50,7 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
|
|
|
49
50
|
object-fit: var(--_esp-image-object-fit, cover);
|
|
50
51
|
object-position: var(--esp-image-object-position, var(--_esp-image-object-position, center));
|
|
51
52
|
}
|
|
52
|
-
`,a.styles=[...v.styles,
|
|
53
|
+
`,a.styles=[...v.styles,T`
|
|
53
54
|
:host {
|
|
54
55
|
display: block;
|
|
55
56
|
aspect-ratio: var(--_esp-image-aspect-ratio, auto);
|
|
@@ -224,6 +225,71 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
|
|
|
224
225
|
}
|
|
225
226
|
|
|
226
227
|
|
|
228
|
+
:host([banner]) .banner-layers::after {
|
|
229
|
+
content: var(--_esp-image-scrim-edge-content, none);
|
|
230
|
+
position: absolute;
|
|
231
|
+
inset: 0;
|
|
232
|
+
pointer-events: none;
|
|
233
|
+
background-color: var(--_esp-image-scrim-edge-color, transparent);
|
|
234
|
+
background-image: var(--_esp-image-scrim-edge-image, none);
|
|
235
|
+
background-position: var(--_esp-image-scrim-edge-position, 0 0);
|
|
236
|
+
background-repeat: repeat;
|
|
237
|
+
background-size: var(--_esp-image-scrim-edge-size, auto);
|
|
238
|
+
mask-image: var(--_esp-image-scrim-edge-mask, none);
|
|
239
|
+
mask-mode: alpha;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
|
|
243
|
+
.frame[data-scrim-edge="flush"][data-scrim="top"] {
|
|
244
|
+
--_esp-image-scrim-edge-content: "";
|
|
245
|
+
--_esp-image-scrim-edge-color: var(--_esp-image-scrim-resolved);
|
|
246
|
+
--_esp-image-scrim-edge-image: var(--esp-image-scrim-edge-image, none);
|
|
247
|
+
--_esp-image-scrim-edge-size: var(--esp-image-scrim-edge-size, auto);
|
|
248
|
+
--_esp-image-scrim-edge-position: left top;
|
|
249
|
+
--_esp-image-scrim-edge-mask: linear-gradient(
|
|
250
|
+
to bottom,
|
|
251
|
+
black 0%,
|
|
252
|
+
transparent var(--esp-image-scrim-edge-depth, 12%)
|
|
253
|
+
);
|
|
254
|
+
}
|
|
255
|
+
.frame[data-scrim-edge="flush"][data-scrim="bottom"] {
|
|
256
|
+
--_esp-image-scrim-edge-content: "";
|
|
257
|
+
--_esp-image-scrim-edge-color: var(--_esp-image-scrim-resolved);
|
|
258
|
+
--_esp-image-scrim-edge-image: var(--esp-image-scrim-edge-image, none);
|
|
259
|
+
--_esp-image-scrim-edge-size: var(--esp-image-scrim-edge-size, auto);
|
|
260
|
+
--_esp-image-scrim-edge-position: left bottom;
|
|
261
|
+
--_esp-image-scrim-edge-mask: linear-gradient(
|
|
262
|
+
to top,
|
|
263
|
+
black 0%,
|
|
264
|
+
transparent var(--esp-image-scrim-edge-depth, 12%)
|
|
265
|
+
);
|
|
266
|
+
}
|
|
267
|
+
.frame[data-scrim-edge="flush"][data-scrim="left"] {
|
|
268
|
+
--_esp-image-scrim-edge-content: "";
|
|
269
|
+
--_esp-image-scrim-edge-color: var(--_esp-image-scrim-resolved);
|
|
270
|
+
--_esp-image-scrim-edge-image: var(--esp-image-scrim-edge-image, none);
|
|
271
|
+
--_esp-image-scrim-edge-size: var(--esp-image-scrim-edge-size, auto);
|
|
272
|
+
--_esp-image-scrim-edge-position: left top;
|
|
273
|
+
--_esp-image-scrim-edge-mask: linear-gradient(
|
|
274
|
+
to right,
|
|
275
|
+
black 0%,
|
|
276
|
+
transparent var(--esp-image-scrim-edge-depth, 12%)
|
|
277
|
+
);
|
|
278
|
+
}
|
|
279
|
+
.frame[data-scrim-edge="flush"][data-scrim="right"] {
|
|
280
|
+
--_esp-image-scrim-edge-content: "";
|
|
281
|
+
--_esp-image-scrim-edge-color: var(--_esp-image-scrim-resolved);
|
|
282
|
+
--_esp-image-scrim-edge-image: var(--esp-image-scrim-edge-image, none);
|
|
283
|
+
--_esp-image-scrim-edge-size: var(--esp-image-scrim-edge-size, auto);
|
|
284
|
+
--_esp-image-scrim-edge-position: right top;
|
|
285
|
+
--_esp-image-scrim-edge-mask: linear-gradient(
|
|
286
|
+
to left,
|
|
287
|
+
black 0%,
|
|
288
|
+
transparent var(--esp-image-scrim-edge-depth, 12%)
|
|
289
|
+
);
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
|
|
227
293
|
.frame[data-banner-scheme="dark"] {
|
|
228
294
|
--_esp-image-scrim-ink: oklch(from var(--esp-color-background, oklch(0.98 0 0)) 0.13 c h);
|
|
229
295
|
--_esp-image-texture-ink: oklch(from var(--esp-color-background, oklch(0.98 0 0)) 0.12 c h);
|
|
@@ -439,4 +505,4 @@ var n=function(d,e,t,r){var i=arguments.length,s=i<3?e:r===null?r=Object.getOwnP
|
|
|
439
505
|
transition: none !important;
|
|
440
506
|
}
|
|
441
507
|
}
|
|
442
|
-
`,A],n([c({attribute:"original-height",type:Number})],a.prototype,"originalHeight",void 0),n([c({attribute:"original-width",type:Number})],a.prototype,"originalWidth",void 0),n([c({attribute:"low-res",type:String})],a.prototype,"imageUrl",void 0),n([c({attribute:"local-image",type:String})],a.prototype,"localImage",void 0),n([c({type:String})],a.prototype,"caption",void 0),n([c({attribute:"sizes",type:String})],a.prototype,"sizes",void 0),n([c({attribute:"loading",type:String})],a.prototype,"loading",void 0),n([c({attribute:"defer-offscreen",type:Boolean})],a.prototype,"deferOffscreen",void 0),n([c({type:Boolean,reflect:!0})],a.prototype,"banner",void 0),n([c({attribute:"banner-scheme",converter:
|
|
508
|
+
`,A],n([c({attribute:"original-height",type:Number})],a.prototype,"originalHeight",void 0),n([c({attribute:"original-width",type:Number})],a.prototype,"originalWidth",void 0),n([c({attribute:"low-res",type:String})],a.prototype,"imageUrl",void 0),n([c({attribute:"local-image",type:String})],a.prototype,"localImage",void 0),n([c({type:String})],a.prototype,"caption",void 0),n([c({attribute:"sizes",type:String})],a.prototype,"sizes",void 0),n([c({attribute:"loading",type:String})],a.prototype,"loading",void 0),n([c({attribute:"defer-offscreen",type:Boolean})],a.prototype,"deferOffscreen",void 0),n([c({type:Boolean,reflect:!0})],a.prototype,"banner",void 0),n([c({attribute:"banner-scheme",converter:m(j,"auto"),reflect:!0})],a.prototype,"bannerScheme",void 0),n([c({converter:m(k,"auto"),reflect:!0})],a.prototype,"scrim",void 0),n([c({attribute:"scrim-strength",converter:m(w,"medium"),reflect:!0})],a.prototype,"scrimStrength",void 0),n([c({attribute:"scrim-edge",converter:m(S,"none"),reflect:!0})],a.prototype,"scrimEdge",void 0),n([c({type:String,reflect:!0})],a.prototype,"texture",void 0),n([c({attribute:"texture-scale",converter:m(z,"medium"),reflect:!0})],a.prototype,"textureScale",void 0),n([c({attribute:"content-position",converter:m(O,"bottom-start"),reflect:!0})],a.prototype,"contentPosition",void 0),n([c({attribute:"focus",converter:N,reflect:!0})],a.prototype,"focusPoint",void 0),n([c({type:String})],a.prototype,"ratio",void 0),n([c({attribute:"compact-ratio",type:String})],a.prototype,"compactRatio",void 0),n([u()],a.prototype,"renderedWidth",void 0),n([u()],a.prototype,"compact",void 0),n([u()],a.prototype,"overlayHasContent",void 0),a=p=n([$("esp-image")],a);export{a as EspalierImage,I as parseImageRatio};
|
|
@@ -73,6 +73,7 @@ var d=function(c,e,t,i){var s=arguments.length,r=s<3?e:i===null?i=Object.getOwnP
|
|
|
73
73
|
aria-modal="true"
|
|
74
74
|
aria-label="Image lightbox"
|
|
75
75
|
tabindex="-1"
|
|
76
|
+
data-no-swipe
|
|
76
77
|
@keydown=${this._handleKeyDown}
|
|
77
78
|
@click=${this._handleLightboxClick}
|
|
78
79
|
@touchstart=${this._handleTouchStart}
|