@taprootio/espalier 4.14.2 → 4.16.0

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

@@ -4,8 +4,21 @@ import { LitElement } from "lit";
  * [esp-breadcrumbs](/components/breadcrumbs/) to show breadcrumb
  * navigation.
  *
- * @cssprop --esp-breadcrumb-color - The text color of the breadcrumb link.
- * @cssprop --esp-breadcrumb-hover-color - The text color on hover.
+ * @cssprop --esp-breadcrumb-color - The text color of the breadcrumb link. Defaults to
+ * `var(--esp-color-link)`, so a trail reads as navigation in the same ink as the links in
+ * the surrounding content.
+ * @cssprop --esp-breadcrumb-hover-color - The text color on hover. Defaults to
+ * `var(--esp-color-link-hover)`.
+ * @cssprop --esp-breadcrumb-hover-background - The background behind a hovered link.
+ * Defaults to `var(--esp-color-link-hover-bg)`.
+ * @cssprop --esp-breadcrumb-current-color - The text color of the current-page crumb, which
+ * is not a link. Defaults to `--esp-breadcrumb-color` when that is set, then to
+ * `var(--esp-color-headings)`, keeping the current page distinct from the links beside it.
+ * @cssprop --esp-breadcrumb-separator-color - The color of the separator icons. Defaults to
+ * `oklch(from var(--esp-color-link) l c calc(h + 90))`, an accent that takes the link ink's
+ * scheme-adapted lightness and chroma at a different hue, so the arrows are their own color
+ * rather than the heading color. Set it on `esp-breadcrumbs` to recolor a whole trail, or on
+ * one `esp-breadcrumb` to recolor a single arrow.
  * @docPageTitle Breadcrumb
  * @docUrl /components/breadcrumbs/breadcrumb
  * @menuGroup Navigation
@@ -26,8 +39,11 @@ export declare class EspalierBreadcrumb extends LitElement {
      */
     separator: string;
     /**
-     * Used internally to render the item using a label
-     * instead of a link.
+     * Marks this crumb as the end of the trail. The parent
+     * `esp-breadcrumbs` sets it to pick the down-arrow separator and
+     * the current-crumb styling. It does not decide link versus label —
+     * a crumb that carries a `url` stays clickable wherever it sits, so
+     * a trail can end at its deepest folder.
      * @type {boolean}
      */
     isLastElement: boolean;

package/dist/breadcrumbs/esp-breadcrumb.js

@@ -1,4 +1,4 @@
-var i=function(s,r,o,a){var l=arguments.length,e=l<3?r:a===null?a=Object.getOwnPropertyDescriptor(r,o):a,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")e=Reflect.decorate(s,r,o,a);else for(var c=s.length-1;c>=0;c--)(n=s[c])&&(e=(l<3?n(e):l>3?n(r,o,e):n(r,o))||e);return l>3&&e&&Object.defineProperty(r,o,e),e};import{LitElement as h,css as d,html as m}from"lit";import{customElement as u,property as p}from"lit/decorators.js";import{unsafeSVG as b}from"lit/directives/unsafe-svg.js";let t=class extends h{constructor(){super(...arguments),this.label="",this.url="",this.separator="",this.isLastElement=!1}_renderLink(){return this.isLastElement?m`<label>${this.label}</label>`:m`<a href=${this.url}>${this.label}</a>`}render(){return m`${this._renderLink()}${this.separator?b(this.separator):""}`}};t.styles=d`
+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`
     :host {
       display: grid;
       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
       align-items: center;
     }
 
-    a,
-    label {
-      color: var(--esp-breadcrumb-color, var(--esp-color-headings));
+    
+    :is(a, label) {
       font-weight: bold;
       width: min-content;
       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
       white-space: nowrap;
     }
 
+    a {
+      color: var(--esp-breadcrumb-color, var(--esp-color-link));
+    }
+
     a:hover {
-      color: var(--esp-breadcrumb-hover-color, var(--esp-color-headings-hover));
+      background: var(--esp-breadcrumb-hover-background, var(--esp-color-link-hover-bg));
+      color: var(--esp-breadcrumb-hover-color, var(--esp-color-link-hover));
       text-decoration: underline;
     }
 
+    
     label {
+      color: var(
+        --esp-breadcrumb-current-color,
+        var(--esp-breadcrumb-color, var(--esp-color-headings))
+      );
       font-style: italic;
     }
 
+    
     svg {
+      color: var(
+        --esp-breadcrumb-separator-color,
+        oklch(from var(--esp-color-link) l c calc(h + 90))
+      );
       height: var(--esp-size-normal-to-medium);
       width: var(--esp-size-normal-to-medium);
     }
-  `,i([p({type:String})],t.prototype,"label",void 0),i([p({type:String})],t.prototype,"url",void 0),i([p({type:String})],t.prototype,"separator",void 0),i([p({attribute:"is-last-element",type:Boolean})],t.prototype,"isLastElement",void 0),t=i([u("esp-breadcrumb")],t);export{t as EspalierBreadcrumb};
+  `,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};

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

@@ -16,6 +16,17 @@ export * from "./esp-breadcrumb.js";
  * </esp-breadcrumbs>
  * ```
  *
+ * Every crumb with a `url` is a link, including the last one — a trail
+ * may end at the deepest folder rather than at the current page. Leave
+ * `url` off a crumb to render it as the italic current-page label:
+ *
+ * ```html
+ * <esp-breadcrumbs>
+ *   <esp-breadcrumb label="Code" url="/code"></esp-breadcrumb>
+ *   <esp-breadcrumb label="This page"></esp-breadcrumb>
+ * </esp-breadcrumbs>
+ * ```
+ *
  * Custom separators can be specified in the `<esp-breadcrumb>`:
  *
  * ```html
@@ -34,8 +45,11 @@ export * from "./esp-breadcrumb.js";
  *
  * @customElement esp-breadcrumbs
  * @slot - `<esp-breadcrumb>` items to display.
- * @cssprop --esp-breadcrumb-separator-color - Set the color of the separator. It defaults
- * to the semantic heading color so navigation structure stays visible in light and dark themes.
+ * @cssprop --esp-breadcrumb-separator-color - The color of the separator icons. Defaults to
+ * `oklch(from var(--esp-color-link) l c calc(h + 90))`, an accent that takes the link ink's
+ * scheme-adapted lightness and chroma at a different hue, so the arrows are their own color
+ * rather than the heading color. Set it on `esp-breadcrumbs` to recolor a whole trail, or on
+ * one `esp-breadcrumb` to recolor a single arrow.
  *
  * ```html
  * <style>

package/dist/breadcrumbs/esp-breadcrumbs.js

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

package/dist/button/esp-button.js

@@ -1,4 +1,4 @@
-var n=function(h,t,r,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnPropertyDescriptor(t,r):o,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(h,t,r,o);else for(var p=h.length-1;p>=0;p--)(d=h[p])&&(i=(a<3?d(i):a>3?d(t,r,i):d(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i};import{css as f,html as c,nothing as l}from"lit";import{customElement as g,eventOptions as m,property as s,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 x}from"../shared/intent-values.js";import{SlottedIconController as k}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 $=c`<svg
+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
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 24 24"
   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
 >
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
-</svg>`;let e=class extends b{constructor(){super(...arguments),this.iconSlot=new k(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?c` <span>${$}</span> `:c`
+</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`
       <span>
         <slot ${w(this.iconSlot.slotRef)} @slotchange=${this.iconSlot.handleSlotChange}></slot>
         ${!this.iconSlot.hasSlottedIcon(":scope > *")&&t?T(t):l}
       </span>
-    `}static get observedAttributes(){return[...super.observedAttributes,"tabindex","aria-pressed"]}attributeChangedCallback(t,r,o){if(super.attributeChangedCallback(t,r,o),t==="aria-pressed"){this.requestUpdate();return}if(t!=="tabindex"||this.neutralizingTabindex)return;const a=o===null?null:Number(o),i=a===null||Number.isNaN(a)?null:a;i!==null&&i>=0?(this.innerTabindex=i,this.writeHostTabindex(null)):i===null&&o!==null?(this.innerTabindex=null,this.writeHostTabindex(null)):this.innerTabindex=i}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 r=this.closest("form");if(r){const o=document.createElement("button");o.type="submit",o.hidden=!0,this.formNoValidate&&(o.formNoValidate=!0),r.appendChild(o),r.requestSubmit(o),o.remove()}}else this.buttonType==="reset"&&this.closest("form")?.reset()}render(){const t=x(this.icon,this),r=this.loading||this.iconSlot.hasSlottedIcon(":scope > *")||t.length>0,{collapsed:o,iconOnly:a}=this,i=a?this.getAttribute("aria-label")||this.label||l:l,d=this.getAttribute("aria-pressed")||l,p={"esp-field":!0,"icon-only":a,incognito:this.incognito,"is-collapsed":o,"has-icon":r,"icon-left":r&&!a&&this.iconPosition==="left"};return this.href.length?c`
-          <div part="wrapper" class=${u(p)}>
+    `}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`
+          <div part="wrapper" class=${u(c)}>
             <a
               ?disabled=${this.disabled}
               href=${this.href}
               target=${this.target}
               rel=${this.rel||l}
               tabindex=${this.innerTabindex??l}
-              aria-label=${i}
+              aria-label=${o}
             >
               <span>${this.label??""}</span>
               ${this.buildIcon(t)}
             </a>
           </div>
-        `:c`
-          <div part="wrapper" class=${u(p)}>
+        `:p`
+          <div part="wrapper" class=${u(c)}>
             <button
               ?disabled=${this.disabled||this.loading}
               @click=${this.handleClick}
               type=${this.buttonType}
               tabindex=${this.innerTabindex??l}
-              aria-label=${i}
+              aria-label=${o}
               aria-pressed=${d}
             >
               <span>${this.label??""}</span>
               ${this.buildIcon(t)}
             </button>
           </div>
-        `}};e.styles=[...b.styles,f`
+        `}};e.styles=[...b.styles,g`
       :host {
         --_esp-button-radius: var(--esp-size-border-radius);
       }
@@ -112,6 +112,25 @@ var n=function(h,t,r,o){var a=arguments.length,i=a<3?t:o===null?o=Object.getOwnP
               display: grid;
             }
           }
+
+          
+          &:where(:not(.icon-left)) {
+            button,
+            a {
+              > span:nth-child(1) {
+                padding-inline-end: 0;
+              }
+            }
+          }
+
+          &.icon-left {
+            button,
+            a {
+              > span:nth-child(1) {
+                padding-inline-start: 0;
+              }
+            }
+          }
         }
 
         &.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
           transform: rotate(360deg);
         }
       }
-    `],n([v()],e.prototype,"innerTabindex",void 0),n([s({attribute:"button-type",type:String})],e.prototype,"buttonType",void 0),n([s({type:Boolean})],e.prototype,"collapsed",void 0),n([s({type:Boolean,reflect:!0})],e.prototype,"disabled",void 0),n([s({type:String})],e.prototype,"href",void 0),n([s({attribute:"icon-only",type:Boolean})],e.prototype,"iconOnly",void 0),n([s({type:Boolean,reflect:!0})],e.prototype,"incognito",void 0),n([s({type:String})],e.prototype,"icon",void 0),n([s({attribute:"icon-position",type:String})],e.prototype,"iconPosition",void 0),n([s({type:String})],e.prototype,"label",void 0),n([s({type:Boolean,reflect:!0})],e.prototype,"loading",void 0),n([s({type:String})],e.prototype,"target",void 0),n([s({type:String})],e.prototype,"rel",void 0),n([s({attribute:"formnovalidate",type:Boolean})],e.prototype,"formNoValidate",void 0),n([m({capture:!1,passive:!0})],e.prototype,"handleClick",null),e=n([g("esp-button")],e);export{e as EspalierButton};
+    `],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};

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

@@ -15,6 +15,18 @@ import "../button/esp-button.js";
  * A subtle caret at the bottom of the screen reveals a drawer
  * overlay containing the image caption and a `comments` slot.
  *
+ * Both halves of that panel are optional. `hide-comments` drops the
+ * comment count and the `comments` slot; `hide-caption` drops the
+ * image caption. With only the caption left, the bar shows it on one
+ * line and slides up only when the line is actually clipped — a
+ * caption that already fits has no caret and no tab stop. With both
+ * hidden there is no bar, though navigation dots remain for a
+ * multi-image gallery.
+ *
+ * ```html
+ * <esp-lightbox for=".gallery" hide-comments></esp-lightbox>
+ * ```
+ *
  * ```html
  * <div class="gallery">
  *   <esp-image caption="A mountain lake" original-width="1200" original-height="800" low-res="https://picsum.photos/id/29/300/200">
@@ -65,6 +77,18 @@ export declare class EspalierLightbox extends EspalierElementBase {
      * @type {number}
      */
     commentCount: number;
+    /**
+     * Remove the comment affordance: no comment count, no caret driven by it,
+     * and no `comments` slot. The caption can still open a drawer when it is too
+     * long for one line.
+     * @type {boolean}
+     */
+    hideComments: boolean;
+    /**
+     * Remove the image caption from the bar and the drawer.
+     * @type {boolean}
+     */
+    hideCaption: boolean;
     /** Open the lightbox at the given image index. */
     open(index: number): void;
     /** Close the lightbox. */