@taprootio/espalier 4.15.0 → 4.17.0

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",
@@ -1035,7 +1043,19 @@
     },
     {
       "name": "--esp-image-scrim-color",
-      "description": "Scrim ink; defaults to the theme background when the banner polarity matches the scheme, else a polarity-pinned derivation."
+      "description": "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."
+    },
+    {
+      "name": "--esp-image-scrim-edge-depth",
+      "description": "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%`."
+    },
+    {
+      "name": "--esp-image-scrim-edge-image",
+      "description": "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."
+    },
+    {
+      "name": "--esp-image-scrim-edge-size",
+      "description": "Background size for `--esp-image-scrim-edge-image`; defaults to `auto`. Match the adjoining band's own `background-size` for a continuous tile."
     },
     {
       "name": "--esp-image-scrim-opacity",

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",
@@ -1468,7 +1480,25 @@
       "name": "--esp-image-scrim-color",
       "category": "component",
       "component": "esp-image",
-      "description": "Scrim ink; defaults to the theme background when the banner polarity matches the scheme, else a polarity-pinned derivation."
+      "description": "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."
+    },
+    {
+      "name": "--esp-image-scrim-edge-depth",
+      "category": "component",
+      "component": "esp-image",
+      "description": "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%`."
+    },
+    {
+      "name": "--esp-image-scrim-edge-image",
+      "category": "component",
+      "component": "esp-image",
+      "description": "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."
+    },
+    {
+      "name": "--esp-image-scrim-edge-size",
+      "category": "component",
+      "component": "esp-image",
+      "description": "Background size for `--esp-image-scrim-edge-image`; defaults to `auto`. Match the adjoining band's own `background-size` for a continuous tile."
     },
     {
       "name": "--esp-image-scrim-opacity",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taprootio/espalier",
-  "version": "4.15.0",
+  "version": "4.17.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",