@taprootio/espalier 4.15.0 → 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/tabs/esp-tab-group.js

@@ -1,7 +1,7 @@
-var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,a):e,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(i,t,a,e);else for(var l=i.length-1;l>=0;l--)(r=i[l])&&(o=(s<3?r(o):s>3?r(t,a,o):r(t,a))||o);return s>3&&o&&Object.defineProperty(t,a,o),o};import{css as u,html as d,nothing as f}from"lit";import{customElement as v,property as m,state as g}from"lit/decorators.js";import{createRef as y,ref as w}from"lit/directives/ref.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";import{ESP_EVENTS as k}from"../shared/events.js";import{EspalierTab as p}from"./esp-tab.js";import{disabledControl as T}from"../shared/style-fragments.js";let n=class extends c{constructor(){super(...arguments),this.panelsSlot=y(),this.disabled=!1,this.tabData=[]}getTabs(){const t=this.panelsSlot.value?Array.from(this.panelsSlot.value.assignedElements()).filter(a=>a instanceof p):[];return t.length>0?t:Array.from(this.children).filter(a=>a instanceof p)}syncTabData(){const t=this.getTabs();if(t.length===0){this.tabData=[];return}const a=t.find(e=>e.active&&!e.disabled);if(a)for(const e of t)e!==a&&(e.active=!1);else{const e=t.find(s=>!s.disabled);e?e.active=!0:t[0].active=!0}this.tabData=t.map((e,s)=>{const o=`esp-tab-btn-${this.correlationId}-${s}`,r=`esp-tab-panel-${this.correlationId}-${s}`;return e.panelId=r,e.ariaLabelledBy=o,{label:e.label,active:e.active,disabled:this.disabled||e.disabled,buttonId:o,panelId:r}})}activateTab(t){const a=this.getTabs(),e=a[t];if(!(!e||e.disabled||this.disabled)){for(const s of a)s.active=s===e;this.syncTabData(),this.dispatchEvent(new CustomEvent(k.TAB_GROUP_CHANGED,{detail:{index:t,label:e.label},bubbles:!0,composed:!0}))}}handleTabClick(t){this.activateTab(t),this.updateComplete.then(()=>{this.shadowRoot?.getElementById(this.tabData[t]?.buttonId)?.focus()})}handleKeyDown(t){if(!["ArrowLeft","ArrowRight","Home","End"].includes(t.key))return;t.preventDefault();const e=this.tabData.map((l,h)=>({td:l,i:h})).filter(({td:l})=>!l.disabled).map(({i:l})=>l);if(e.length===0)return;const s=this.tabData.findIndex(l=>l.active),o=e.indexOf(s);let r;switch(t.key){case"ArrowRight":o===-1?r=e[0]:r=e[(o+1)%e.length];break;case"ArrowLeft":o===-1?r=e[e.length-1]:r=e[(o-1+e.length)%e.length];break;case"Home":r=e[0];break;case"End":r=e[e.length-1];break;default:return}this.activateTab(r),this.updateComplete.then(()=>{this.shadowRoot?.getElementById(this.tabData[r]?.buttonId)?.focus()})}handleChildUpdated(){this.syncTabData()}handleSlotChange(){this.syncTabData()}connectedCallback(){super.connectedCallback(),this.syncTabData()}willUpdate(t){super.willUpdate(t),t.has("disabled")&&this.syncTabData()}render(){return d`
+var d=function(l,t,a,e){var s=arguments.length,r=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,a):e,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(l,t,a,e);else for(var n=l.length-1;n>=0;n--)(o=l[n])&&(r=(s<3?o(r):s>3?o(t,a,r):o(t,a))||r);return s>3&&r&&Object.defineProperty(t,a,r),r};import{css as u,html as c,nothing as v}from"lit";import{customElement as f,property as g,state as m}from"lit/decorators.js";import{createRef as y,ref as w}from"lit/directives/ref.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";import{ESP_EVENTS as x}from"../shared/events.js";import{EspalierTab as p}from"./esp-tab.js";import{disabledControl as T}from"../shared/style-fragments.js";let i=class extends b{constructor(){super(...arguments),this.panelsSlot=y(),this.disabled=!1,this.tabData=[]}getTabs(){const t=this.panelsSlot.value?Array.from(this.panelsSlot.value.assignedElements()).filter(a=>a instanceof p):[];return t.length>0?t:Array.from(this.children).filter(a=>a instanceof p)}syncTabData(){const t=this.getTabs();if(t.length===0){this.tabData=[];return}const a=t.find(e=>e.active&&!e.disabled);if(a)for(const e of t)e!==a&&(e.active=!1);else{const e=t.find(s=>!s.disabled);e?e.active=!0:t[0].active=!0}this.tabData=t.map((e,s)=>{const r=`esp-tab-btn-${this.correlationId}-${s}`,o=`esp-tab-panel-${this.correlationId}-${s}`;return e.panelId=o,e.ariaLabelledBy=r,{label:e.label,active:e.active,disabled:this.disabled||e.disabled,buttonId:r,panelId:o}})}activateTab(t){const a=this.getTabs(),e=a[t];if(!(!e||e.disabled||this.disabled)){for(const s of a)s.active=s===e;this.syncTabData(),this.dispatchEvent(new CustomEvent(x.TAB_GROUP_CHANGED,{detail:{index:t,label:e.label},bubbles:!0,composed:!0}))}}handleTabClick(t){this.activateTab(t),this.updateComplete.then(()=>{this.shadowRoot?.getElementById(this.tabData[t]?.buttonId)?.focus()})}handleKeyDown(t){if(!["ArrowLeft","ArrowRight","Home","End"].includes(t.key))return;t.preventDefault();const e=this.tabData.map((n,h)=>({td:n,i:h})).filter(({td:n})=>!n.disabled).map(({i:n})=>n);if(e.length===0)return;const s=this.tabData.findIndex(n=>n.active),r=e.indexOf(s);let o;switch(t.key){case"ArrowRight":r===-1?o=e[0]:o=e[(r+1)%e.length];break;case"ArrowLeft":r===-1?o=e[e.length-1]:o=e[(r-1+e.length)%e.length];break;case"Home":o=e[0];break;case"End":o=e[e.length-1];break;default:return}this.activateTab(o),this.updateComplete.then(()=>{this.shadowRoot?.getElementById(this.tabData[o]?.buttonId)?.focus()})}handleChildUpdated(){this.syncTabData()}handleSlotChange(){this.syncTabData()}connectedCallback(){super.connectedCallback(),this.syncTabData()}willUpdate(t){super.willUpdate(t),t.has("disabled")&&this.syncTabData()}render(){return c`
       <div class="tab-container">
         <div class="tab-list" role="tablist" part="tab-list" @keydown=${this.handleKeyDown}>
-          ${this.tabData.map((t,a)=>d`
+          ${this.tabData.map((t,a)=>c`
               <button
                 id=${t.buttonId}
                 class="tab-button"
@@ -9,7 +9,7 @@ var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnP
                 part="tab-button"
                 aria-selected=${t.active?"true":"false"}
                 aria-controls=${t.panelId}
-                aria-disabled=${t.disabled?"true":f}
+                aria-disabled=${t.disabled?"true":v}
                 tabindex=${t.active?"0":"-1"}
                 ?disabled=${t.disabled}
                 @click=${()=>this.handleTabClick(a)}
@@ -26,7 +26,7 @@ var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnP
           ></slot>
         </div>
       </div>
-    `}};n.styles=[...c.styles,T(".tab-button[disabled]"),u`
+    `}};i.styles=[...b.styles,T(".tab-button[disabled]"),u`
       :host {
         display: block;
         --_esp-tab-resolved-button-hover: var(
@@ -43,6 +43,8 @@ var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnP
       }
 
       .tab-container {
+        
+        --_esp-tab-inner-radius: max(0px, calc(var(--esp-size-border-radius) - 1px));
         background-color: var(--esp-tab-color-background, var(--esp-color-layer-1));
         border-radius: var(--esp-size-border-radius);
         box-shadow: 1px 1px 4px var(--esp-color-shadow);
@@ -50,11 +52,14 @@ var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnP
         overflow: hidden;
       }
 
+      
       .tab-list {
         display: flex;
         overflow-x: auto;
         background-color: var(--esp-tab-color-strip-background, var(--esp-color-layer-1));
         border-bottom: 1px solid var(--esp-tab-color-border, var(--esp-color-border));
+        border-start-start-radius: var(--_esp-tab-inner-radius);
+        border-start-end-radius: var(--_esp-tab-inner-radius);
       }
 
       .tab-button {
@@ -90,6 +95,11 @@ var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnP
         cursor: default;
       }
 
+      
+      .tab-button:first-child {
+        border-start-start-radius: var(--_esp-tab-inner-radius);
+      }
+
       .tab-button:first-child[aria-selected="true"] {
         border-left: none;
       }
@@ -109,4 +119,4 @@ var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnP
       .panels {
         
       }
-    `],b([m({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),b([g()],n.prototype,"tabData",void 0),n=b([v("esp-tab-group")],n);export{n as EspalierTabGroup};
+    `],d([g({type:Boolean,reflect:!0})],i.prototype,"disabled",void 0),d([m()],i.prototype,"tabData",void 0),i=d([f("esp-tab-group")],i);export{i as EspalierTabGroup};

package/espalier.css-data.json

@@ -79,15 +79,23 @@
     },
     {
       "name": "--esp-breadcrumb-color",
-      "description": "The text color of the breadcrumb link."
+      "description": "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."
+    },
+    {
+      "name": "--esp-breadcrumb-current-color",
+      "description": "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."
+    },
+    {
+      "name": "--esp-breadcrumb-hover-background",
+      "description": "The background behind a hovered link. Defaults to `var(--esp-color-link-hover-bg)`."
     },
     {
       "name": "--esp-breadcrumb-hover-color",
-      "description": "The text color on hover."
+      "description": "The text color on hover. Defaults to `var(--esp-color-link-hover)`."
     },
     {
       "name": "--esp-breadcrumb-separator-color",
-      "description": "Set the color of the separator. It defaults to the semantic heading color so navigation structure stays visible in light and dark themes."
+      "description": "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."
     },
     {
       "name": "--esp-button-group-divider",

package/espalier.token-manifest.json

@@ -117,19 +117,31 @@
       "name": "--esp-breadcrumb-color",
       "category": "component",
       "component": "esp-breadcrumb",
-      "description": "The text color of the breadcrumb link."
+      "description": "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."
+    },
+    {
+      "name": "--esp-breadcrumb-current-color",
+      "category": "component",
+      "component": "esp-breadcrumb",
+      "description": "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."
+    },
+    {
+      "name": "--esp-breadcrumb-hover-background",
+      "category": "component",
+      "component": "esp-breadcrumb",
+      "description": "The background behind a hovered link. Defaults to `var(--esp-color-link-hover-bg)`."
     },
     {
       "name": "--esp-breadcrumb-hover-color",
       "category": "component",
       "component": "esp-breadcrumb",
-      "description": "The text color on hover."
+      "description": "The text color on hover. Defaults to `var(--esp-color-link-hover)`."
     },
     {
       "name": "--esp-breadcrumb-separator-color",
       "category": "component",
-      "component": "esp-breadcrumbs",
-      "description": "Set the color of the separator. It defaults to the semantic heading color so navigation structure stays visible in light and dark themes."
+      "component": "esp-breadcrumb",
+      "description": "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."
     },
     {
       "name": "--esp-button-group-divider",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "packageManager": "bun@1.3.12",
   "description": "Espalier — a themeable, accessible, framework-agnostic, enterprise-grade design system built on web standards and love.",
   "customElements": "custom-elements.json",