@taprootio/espalier 2.19.0 → 3.0.0

package/dist/pickers/esp-picker-menu.js

@@ -1,4 +1,4 @@
-var n=function(d,t,e,i){var l=arguments.length,s=l<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(d,t,e,i);else for(var o=d.length-1;o>=0;o--)(r=d[o])&&(s=(l<3?r(s):l>3?r(t,e,s):r(t,e))||s);return l>3&&s&&Object.defineProperty(t,e,s),s};import{LitElement as v,css as y,html as p}from"lit";import{customElement as I,property as g,state as m}from"lit/decorators.js";import{createRef as x,ref as b}from"lit/directives/ref.js";import{styleMap as P}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as f,viewportSize as u}from"../shared/viewport.js";const c="highlighted";let h=class extends v{constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=x(),this.maxAvailableHeight=0,this.lastViewportHeight=0,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.handleItemPointerDown=t=>{this.selectItemFromPointerEvent(t)},this.renderPickerItem=(t,e)=>{const i={display:"block",cursor:"pointer",width:"100%",...t.styles};return p`<esp-picker-item
+var a=function(p,t,e,i){var l=arguments.length,s=l<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,e):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(p,t,e,i);else for(var n=p.length-1;n>=0;n--)(r=p[n])&&(s=(l<3?r(s):l>3?r(t,e,s):r(t,e))||s);return l>3&&s&&Object.defineProperty(t,e,s),s};import{LitElement as y,css as I,html as d}from"lit";import{customElement as b,property as u,state as f}from"lit/decorators.js";import{createRef as x,ref as P}from"lit/directives/ref.js";import{styleMap as w}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as v,viewportSize as g}from"../shared/viewport.js";const c="highlighted";let o=class extends y{constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=x(),this.internalPoolClone=null,this.lastPoolFingerprint=null,this.preRenderScrollTop=null,this.openSessionGeneration=0,this.maxAvailableHeight=0,this.lastViewportHeight=0,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.handleItemPointerDown=t=>{this.selectItemFromPointerEvent(t)},this.menuDirty=!1,this.settlerActive=!1,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.renderPickerItem=(t,e)=>{const i={display:"block",cursor:"pointer",width:"100%",...t.styles};return d`<esp-picker-item
       class="picker-item"
       data-picker-index=${e}
       .text=${t.text}
@@ -6,17 +6,17 @@ var n=function(d,t,e,i){var l=arguments.length,s=l<3?t:i===null?i=Object.getOwnP
       .selected=${t.selected}
       .icon=${t.icon??""}
       .highlightRanges=${t.highlightRanges}
-      style=${P(i)}
+      style=${w(i)}
     >
       ${t.slotNodes?.map(l=>l.cloneNode(!0))}
-    </esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}updated(t){super.updated(t),t.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),t.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label")),(t.has("virtualizedItemsPool")||t.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&this.resizeAndHighlight(t.has("virtualizedItemsPool"))}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(t){const e=this.virtualizedItemsPool.filter(s=>s.selected).map(s=>s.value);this.virtualizedItemsPool=t;const i=t.filter(s=>s.selected),l=i.map(s=>s.value);(e.length!==l.length||e.some((s,r)=>s!==l[r]))&&this.dispatchEvent(new CustomEvent("selection-changed",{detail:i,bubbles:!0,composed:!0}))}setHighlight(t){const e=this.virtualizedItemsPool;if(e.length===0)return;(this.highlightIndex<0||this.highlightIndex>e.length-1)&&(this.highlightIndex=t);const i=this.virtualizerRef.value;i&&i.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(t){const e=this.virtualizedItemsPool;if(e.length===0)return;(this.highlightIndex<0||this.highlightIndex>e.length-1)&&(this.highlightIndex=t);const i=this.virtualizerRef.value;if(i)try{const l=i.layoutComplete;l&&await l,i.scrollToIndex(this.highlightIndex,"nearest");const s=i.layoutComplete;s&&await s}catch{return}this.applyHighlightClass()}applyHighlightClass(){this.clearHighlight();const t=this.getHighlightedElement();t&&t.classList.add(c)}clearHighlight(){const t=this.virtualizerRef.value;if(t)for(const e of t.querySelectorAll(`esp-picker-item.${c}`))e.classList.remove(c)}resetHighlight(){this.clearHighlight();const t=this.virtualizedItemsPool.find(e=>e.selected);this.highlightIndex=t?this.virtualizedItemsPool.indexOf(t):-1}applyHighlightWithRetry(t){if(!this.isConnected||!this.matches(":popover-open"))return;this.clearHighlight();const e=this.getHighlightedElement();if(e){e.classList.add(c);return}t>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(t-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const t=this.virtualizerRef.value;if(!t)return null;const e=t.querySelectorAll("esp-picker-item");for(const i of e)if(this.virtualizedItemsPool.findIndex(s=>s.value===i.value&&s.text===i.text)===this.highlightIndex)return i;return null}pickItem(t){for(const i of this.pickerItems)i===t?i.selected=!i.selected:this.multiSelect||(i.selected=!1);const e=this.virtualizedItemsPool.indexOf(t);if(e!==-1){this.highlightIndex=e,this.clearHighlight();const i=this.getHighlightedElement();i&&i.classList.add(c)}this.pickerItems=[...this.pickerItems],this.dispatchEvent(new CustomEvent("selection-changed",{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent("close-menu",{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0}))}selectItemByIndex(t){const e=Number.isInteger(t)?this.virtualizedItemsPool[t]:void 0;return e?(this.pickItem(e),!0):!1}getPickerItemElementAtPoint(t,e){const i=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!i)return null;for(const l of i){const s=l.getBoundingClientRect();if(t>=s.left&&t<=s.right&&e>=s.top&&e<=s.bottom)return l}return null}selectPickerItemElement(t){return t?this.selectItemByIndex(Number(t.dataset.pickerIndex)):!1}selectItemAtPoint(t,e){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(t,e))}selectItemFromPointerEvent(t){const e=t.composedPath().find(l=>l instanceof HTMLElement&&l.matches("esp-picker-item[data-picker-index]"));return this.selectPickerItemElement(e??this.getPickerItemElementAtPoint(t.clientX,t.clientY))?(t.preventDefault(),t.stopPropagation(),!0):!1}positionSelf(t){const e=t.getBoundingClientRect(),{height:i}=u(),{spaceAbove:l,spaceBelow:s}=f(e,i),r=Math.max(Math.max(l,s)-75,0);this.maxAvailableHeight=r,this.lastViewportHeight=i,this.style.setProperty("height",`${r}px`),this.style.setProperty("min-width",`${e.width}px`),this.style.setProperty("left",`${e.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),l>s?this.style.setProperty("bottom",`${i-e.top}px`):this.style.setProperty("top",`${e.bottom}px`),this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const o=this.pickerItems.find(a=>a.selected);this.highlightIndex=o?this.pickerItems.indexOf(o):0,this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{this.shrinkToFit(r),this.widenToFitContent(e),this.classList.add("visible")})})}async resizeAndHighlight(t){try{await this.updateComplete}catch{return}if(!this.isConnected||!this.matches(":popover-open"))return;const e=this.virtualizerRef.value;if(!e){requestAnimationFrame(()=>{if(!this.isConnected)return;const s=this.shadowRoot?.querySelector(".status-message");if(s){const r=Math.min(s.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${r}px`)}});return}try{const s=e.layoutComplete;s&&await s}catch{return}if(!this.isConnected||!this.matches(":popover-open")||(e.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),!t))return;try{const s=e.layoutComplete;s&&await s}catch{return}if(!this.isConnected||!this.matches(":popover-open"))return;const i=this.virtualizedItemsPool;if(i.length===0)return;const l=i.findIndex(s=>s.selected);l>=0?this.highlightIndex=l:this.highlightIndex>=i.length?this.highlightIndex=i.length-1:this.highlightIndex<0&&(this.highlightIndex=0);try{e.scrollToIndex(this.highlightIndex,"nearest")}catch{}try{const s=e.layoutComplete;s&&await s}catch{return}!this.isConnected||!this.matches(":popover-open")||this.applyHighlightWithRetry(3)}sizeToContent(t){const e=this.measureContentHeight();e>0&&this.style.setProperty("height",`${Math.min(e,t)}px`)}shrinkToFit(t){const e=this.measureContentHeight();e>2&&e<t&&this.style.setProperty("height",`${e}px`)}measureContentHeight(){const t=this.virtualizerRef.value;if(!t)return 0;const e=t.querySelectorAll("esp-picker-item");if(e.length===0)return 0;const i=getComputedStyle(this),l=(parseFloat(i.borderTopWidth)||0)+(parseFloat(i.borderBottomWidth)||0),s=this.virtualizedItemsPool.length;if(e.length<s)return t.scrollHeight+l;t.scrollTop=0;const r=t.getBoundingClientRect();return e[e.length-1].getBoundingClientRect().bottom-r.top+l}widenToFitContent(t){const e=this.virtualizerRef.value;if(!e)return;const i=e.querySelectorAll("esp-picker-item");let l=t.width;for(const s of i)l=Math.max(l,s.scrollWidth);if(l+=2,l>t.width){const{width:s}=u(),r=Math.min(l,s-t.left);this.style.setProperty("width",`${r}px`)}}updatePosition(t){const e=t.getBoundingClientRect(),{height:i}=u();if(i!==this.lastViewportHeight){const{spaceAbove:r,spaceBelow:o}=f(e,i),a=Math.max(Math.max(r,o)-75,0);this.maxAvailableHeight=a,this.lastViewportHeight=i,(parseFloat(this.style.getPropertyValue("height"))||0)>a&&this.style.setProperty("height",`${a}px`),this.sizeToContent(a)}this.style.setProperty("left",`${e.left}px`);const l=e.top,s=i-e.bottom;l>s?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${i-e.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${e.bottom}px`))}hideMenu(){this.classList.remove("visible");try{this.hidePopover()}catch{}}doKeyboardNav(t){const e=this.virtualizedItemsPool;if(e.length!==0)switch(t){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(e.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=e.length-1,this.setHighlight(e.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(e[this.highlightIndex]);break}}render(){return this.loading?p`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?p`<div class="status-message">${this.emptyMessage}</div>`:p`<lit-virtualizer
-      ${b(this.virtualizerRef)}
+    </esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}willUpdate(t){if(super.willUpdate(t),t.has("virtualizedItemsPool")&&this.preRenderScrollTop===null&&!this.retargetingSequence&&this.matches(":popover-open")){const e=this.virtualizerRef.value?.scrollTop??0;e>0&&(this.preRenderScrollTop=e)}}updated(t){super.updated(t),t.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),t.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"));const e=t.has("virtualizedItemsPool");let i=!1;if(e){const l=this.virtualizedItemsPool===this.internalPoolClone;this.internalPoolClone=null;const s=this.virtualizedItemsPool.map(r=>`${r.value}\0${r.text}\0${r.selected===!0}`);i=!l&&(this.lastPoolFingerprint===null||this.lastPoolFingerprint.length!==s.length||this.lastPoolFingerprint.some((r,n)=>r!==s[n])),this.lastPoolFingerprint=s}(e||t.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&(this.pendingItemsChanged||=i,this.menuDirty=!0,this.settleMenuAfterUpdate())}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(t){const e=this.virtualizedItemsPool.filter(s=>s.selected).map(s=>s.value);this.virtualizedItemsPool=t;const i=t.filter(s=>s.selected),l=i.map(s=>s.value);(e.length!==l.length||e.some((s,r)=>s!==l[r]))&&this.dispatchEvent(new CustomEvent("selection-changed",{detail:i,bubbles:!0,composed:!0}))}setHighlight(t){const e=this.virtualizedItemsPool;if(e.length===0)return;(this.highlightIndex<0||this.highlightIndex>e.length-1)&&(this.highlightIndex=t);const i=this.virtualizerRef.value;i&&i.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(t){const e=this.openSessionGeneration,i=()=>e!==this.openSessionGeneration||!this.isConnected,l=this.virtualizedItemsPool;if(l.length===0)return;(this.highlightIndex<0||this.highlightIndex>l.length-1)&&(this.highlightIndex=t);const s=this.virtualizerRef.value;if(s){if(await this.stableLayout(s),i())return;const r=s.scrollTop;for(let n=0;n<3;n+=1)try{s.scrollToIndex(this.highlightIndex,"nearest");break}catch{if(await this.stableLayout(s),i()||s.scrollTop!==r)return}if(await this.stableLayout(s),i())return}this.applyHighlightWithRetry(3)}applyHighlightClass(){const t=this.getHighlightedElement();t&&(this.clearHighlight(),t.classList.add(c))}clearHighlight(){const t=this.virtualizerRef.value;if(t)for(const e of t.querySelectorAll(`esp-picker-item.${c}`))e.classList.remove(c)}resetHighlight(){this.clearHighlight();const t=this.virtualizedItemsPool.find(e=>e.selected);this.highlightIndex=t?this.virtualizedItemsPool.indexOf(t):-1}applyHighlightWithRetry(t){if(!this.isConnected||!this.matches(":popover-open"))return;const e=this.getHighlightedElement();if(e){this.clearHighlight(),e.classList.add(c);return}t>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(t-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const t=this.virtualizerRef.value;if(!t)return null;const e=t.querySelectorAll("esp-picker-item");for(const i of e)if(this.virtualizedItemsPool.findIndex(s=>s.value===i.value&&s.text===i.text)===this.highlightIndex)return i;return null}pickItem(t){for(const l of this.pickerItems)l===t?l.selected=!l.selected:this.multiSelect||(l.selected=!1);const e=this.virtualizedItemsPool.indexOf(t);if(e!==-1){this.highlightIndex=e;const l=this.getHighlightedElement();l&&(this.clearHighlight(),l.classList.add(c))}const i=[...this.pickerItems];this.internalPoolClone=i,this.pickerItems=i,this.dispatchEvent(new CustomEvent("selection-changed",{detail:this.pickerItems.filter(l=>l.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent("close-menu",{detail:this.pickerItems.filter(l=>l.selected),bubbles:!0,composed:!0}))}selectItemByIndex(t){const e=Number.isInteger(t)?this.virtualizedItemsPool[t]:void 0;return e?(this.pickItem(e),!0):!1}getPickerItemElementAtPoint(t,e){const i=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!i)return null;for(const l of i){const s=l.getBoundingClientRect();if(t>=s.left&&t<=s.right&&e>=s.top&&e<=s.bottom)return l}return null}selectPickerItemElement(t){return t?this.selectItemByIndex(Number(t.dataset.pickerIndex)):!1}selectItemAtPoint(t,e){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(t,e))}selectItemFromPointerEvent(t){const e=t.composedPath().find(l=>l instanceof HTMLElement&&l.matches("esp-picker-item[data-picker-index]"));return this.selectPickerItemElement(e??this.getPickerItemElementAtPoint(t.clientX,t.clientY))?(t.preventDefault(),t.stopPropagation(),!0):!1}positionSelf(t){const e=t.getBoundingClientRect(),{height:i}=g(),{spaceAbove:l,spaceBelow:s}=v(e,i),r=Math.max(Math.max(l,s)-75,0);this.maxAvailableHeight=r,this.lastViewportHeight=i,this.style.setProperty("height",`${r}px`),this.style.setProperty("min-width",`${e.width}px`),this.style.setProperty("left",`${e.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),l>s?this.style.setProperty("bottom",`${i-e.top}px`):this.style.setProperty("top",`${e.bottom}px`),this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const n=this.pickerItems.find(m=>m.selected);this.highlightIndex=n?this.pickerItems.indexOf(n):0,this.openSessionGeneration+=1;const h=this.openSessionGeneration;this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{h!==this.openSessionGeneration||!this.isConnected||(this.shrinkToFit(r),this.widenToFitContent(e),this.classList.add("visible"))})})}async stableLayout(t){for(let e=0;e<20;e+=1){const i=t.layoutComplete;if(!i)return;const l=await Promise.race([i.then(()=>"settled",()=>"superseded"),new Promise(s=>setTimeout(()=>s("deadline"),250))]);if(l==="settled"||l==="deadline"||t.layoutComplete===i)return}}async settleMenuAfterUpdate(){if(this.settlerActive)return;this.settlerActive=!0;const t=()=>!this.isConnected||!this.matches(":popover-open")?(this.menuDirty=!1,this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,!0):!1;try{for(let e=0;e<10&&this.menuDirty;e+=1){this.menuDirty=!1;try{await this.updateComplete}catch{this.menuDirty=!1;return}if(t())return;const i=this.virtualizerRef.value;if(!i){requestAnimationFrame(()=>{if(!this.isConnected)return;const r=this.shadowRoot?.querySelector(".status-message");if(r){const n=Math.min(r.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${n}px`)}});continue}if(await this.stableLayout(i),t())return;if(this.menuDirty)continue;const l=this.preRenderScrollTop??0;if(i.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),l>0&&!this.pendingItemsChanged&&!this.retargetingSequence&&i.scrollTop<l){if(i.scrollTop=l,await this.stableLayout(i),t())return;if(this.menuDirty)continue}const s=this.virtualizedItemsPool;if(s.length!==0){if(this.pendingItemsChanged){this.pendingItemsChanged=!1,this.retargetingSequence=!0,this.preRenderScrollTop=null;const r=s.findIndex(n=>n.selected);r>=0?this.highlightIndex=r:this.highlightIndex>=s.length?this.highlightIndex=s.length-1:this.highlightIndex<0&&(this.highlightIndex=0)}if(this.retargetingSequence){try{i.scrollToIndex(this.highlightIndex,"nearest")}catch{}if(await this.stableLayout(i),t())return;if(this.menuDirty)continue}this.applyHighlightWithRetry(3),this.preRenderScrollTop=null,this.retargetingSequence=!1}}}finally{this.settlerActive=!1,this.menuDirty&&this.settleMenuAfterUpdate()}}sizeToContent(t){const e=this.measureContentHeight();e>0&&this.style.setProperty("height",`${Math.min(e,t)}px`)}shrinkToFit(t){const e=this.measureContentHeight();e>2&&e<t&&this.style.setProperty("height",`${e}px`)}measureContentHeight(){const t=this.virtualizerRef.value;if(!t)return 0;const e=t.querySelectorAll("esp-picker-item");if(e.length===0)return 0;const i=getComputedStyle(this),l=(parseFloat(i.borderTopWidth)||0)+(parseFloat(i.borderBottomWidth)||0),s=this.virtualizedItemsPool.length;if(e.length<s)return t.scrollHeight+l;const r=t.scrollTop;t.scrollTop=0;const n=t.getBoundingClientRect(),h=e[e.length-1].getBoundingClientRect();return r>0&&(t.scrollTop=r),h.bottom-n.top+l}widenToFitContent(t){const e=this.virtualizerRef.value;if(!e)return;const i=e.querySelectorAll("esp-picker-item");let l=t.width;for(const s of i)l=Math.max(l,s.scrollWidth);if(l+=2,l>t.width){const{width:s}=g(),r=Math.min(l,s-t.left);this.style.setProperty("width",`${r}px`)}}updatePosition(t){const e=t.getBoundingClientRect(),{height:i}=g();if(i!==this.lastViewportHeight){const{spaceAbove:r,spaceBelow:n}=v(e,i),h=Math.max(Math.max(r,n)-75,0);this.maxAvailableHeight=h,this.lastViewportHeight=i,(parseFloat(this.style.getPropertyValue("height"))||0)>h&&this.style.setProperty("height",`${h}px`),this.sizeToContent(h)}this.style.setProperty("left",`${e.left}px`);const l=e.top,s=i-e.bottom;l>s?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${i-e.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${e.bottom}px`))}hideMenu(){this.openSessionGeneration+=1,this.classList.remove("visible"),this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.menuDirty=!1;try{this.hidePopover()}catch{}}doKeyboardNav(t){const e=this.virtualizedItemsPool;if(e.length!==0)switch(t){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(e.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=e.length-1,this.setHighlight(e.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(e[this.highlightIndex]);break}}render(){return this.loading?d`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?d`<div class="status-message">${this.emptyMessage}</div>`:d`<lit-virtualizer
+      ${P(this.virtualizerRef)}
       scroller
       .items=${this.virtualizedItemsPool}
       .renderItem=${this.renderPickerItem}
       @pointerdown=${this.handleItemPointerDown}
       @rangeChanged=${t=>{this.dispatchEvent(new CustomEvent("range-changed",{detail:{first:t.first,last:t.last,items:this.virtualizedItemsPool},bubbles:!0,composed:!0}))}}
-    ></lit-virtualizer>`}};h.styles=y`
+    ></lit-virtualizer>`}};o.styles=I`
     :host {
       position: fixed;
       inset: unset;
@@ -54,4 +54,4 @@ var n=function(d,t,e,i){var l=arguments.length,s=l<3?t:i===null?i=Object.getOwnP
       font-style: italic;
       background: var(--esp-color-layer-2);
     }
-  `,n([g({type:String})],h.prototype,"label",void 0),n([m()],h.prototype,"virtualizedItemsPool",void 0),n([m()],h.prototype,"highlightIndex",void 0),n([g({attribute:"multi-select",type:Boolean})],h.prototype,"multiSelect",void 0),n([g({type:Boolean})],h.prototype,"loading",void 0),n([g({type:String,attribute:"empty-message"})],h.prototype,"emptyMessage",void 0),h=n([I("esp-picker-menu")],h);export{h as EspalierPickerMenu};
+  `,a([u({type:String})],o.prototype,"label",void 0),a([f()],o.prototype,"virtualizedItemsPool",void 0),a([f()],o.prototype,"highlightIndex",void 0),a([u({attribute:"multi-select",type:Boolean})],o.prototype,"multiSelect",void 0),a([u({type:Boolean})],o.prototype,"loading",void 0),a([u({type:String,attribute:"empty-message"})],o.prototype,"emptyMessage",void 0),o=a([b("esp-picker-menu")],o);export{o as EspalierPickerMenu};

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

@@ -28,14 +28,14 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * </div>
  * ```
  *
- * Color variants match the design system:
+ * Intent colors match the design system:
  *
  * ```html
  * <div style="display: grid; gap: var(--esp-size-padding);">
- *   <esp-progress value="80" label="Primary" variant="primary" show-value></esp-progress>
- *   <esp-progress value="60" label="Success" variant="success" show-value></esp-progress>
- *   <esp-progress value="40" label="Warning" variant="warning" show-value></esp-progress>
- *   <esp-progress value="20" label="Danger" variant="danger" show-value></esp-progress>
+ *   <esp-progress value="80" label="Primary" show-value></esp-progress>
+ *   <esp-progress value="60" label="Success" intent="success" show-value></esp-progress>
+ *   <esp-progress value="40" label="Warning" intent="warning" show-value></esp-progress>
+ *   <esp-progress value="20" label="Danger" intent="danger" show-value></esp-progress>
  * </div>
  * ```
  *
@@ -43,10 +43,10 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *
  * ```html
  * <esp-box>
- *   <esp-progress id="demo-progress" value="0" label="Demo progress" variant="success" size="large" show-value></esp-progress>
+ *   <esp-progress id="demo-progress" value="0" label="Demo progress" intent="success" size="large" show-value></esp-progress>
  *   <div style="display: flex; gap: var(--esp-size-small); margin-top: var(--esp-size-small);">
- *     <esp-button id="start-btn" label="Start" variant="primary" collapsed></esp-button>
- *     <esp-button id="reset-btn" label="Reset" variant="complementary" collapsed></esp-button>
+ *     <esp-button id="start-btn" label="Start" collapsed></esp-button>
+ *     <esp-button id="reset-btn" label="Reset" collapsed></esp-button>
  *   </div>
  * </esp-box>
  * <script>
@@ -67,7 +67,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *         requestAnimationFrame(step);
  *       } else {
  *         running = false;
- *         showToast({ message: "Complete!", variant: "success", icon: "bread" });
+ *         showToast({ message: "Complete!", intent: "success", icon: "bread" });
  *       }
  *     }
  *     requestAnimationFrame(step);
@@ -79,14 +79,14 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * </script>
  * ```
  *
- * Indeterminate mode with different variants:
+ * Indeterminate mode with different intents:
  *
  * ```html
  * <div style="display: grid; gap: var(--esp-size-small);">
- *   <esp-progress label="Primary loading" variant="primary"></esp-progress>
- *   <esp-progress label="Success loading" variant="success"></esp-progress>
- *   <esp-progress label="Warning loading" variant="warning"></esp-progress>
- *   <esp-progress label="Danger loading" variant="danger"></esp-progress>
+ *   <esp-progress label="Primary loading"></esp-progress>
+ *   <esp-progress label="Success loading" intent="success"></esp-progress>
+ *   <esp-progress label="Warning loading" intent="warning"></esp-progress>
+ *   <esp-progress label="Danger loading" intent="danger"></esp-progress>
  * </div>
  * ```
  *
@@ -96,10 +96,10 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *
  * ```html
  * <div style="display: flex; gap: var(--esp-size-padding); align-items: center; flex-wrap: wrap;">
- *   <esp-progress mode="circle" value="80" label="Primary" variant="primary" show-value></esp-progress>
- *   <esp-progress mode="circle" value="60" label="Success" variant="success" show-value></esp-progress>
- *   <esp-progress mode="circle" value="40" label="Warning" variant="warning" show-value></esp-progress>
- *   <esp-progress mode="circle" value="20" label="Danger" variant="danger" show-value></esp-progress>
+ *   <esp-progress mode="circle" value="80" label="Primary" show-value></esp-progress>
+ *   <esp-progress mode="circle" value="60" label="Success" intent="success" show-value></esp-progress>
+ *   <esp-progress mode="circle" value="40" label="Warning" intent="warning" show-value></esp-progress>
+ *   <esp-progress mode="circle" value="20" label="Danger" intent="danger" show-value></esp-progress>
  * </div>
  * ```
  *
@@ -117,8 +117,8 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *
  * ```html
  * <div style="display: flex; gap: var(--esp-size-padding); align-items: center;">
- *   <esp-progress mode="circle" label="Primary loading" variant="primary"></esp-progress>
- *   <esp-progress mode="circle" label="Success loading" variant="success"></esp-progress>
+ *   <esp-progress mode="circle" label="Primary loading"></esp-progress>
+ *   <esp-progress mode="circle" label="Success loading" intent="success"></esp-progress>
  * </div>
  * ```
  *
@@ -127,10 +127,10 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * ```html
  * <esp-box>
  *   <div style="display: flex; align-items: center; gap: var(--esp-size-padding);">
- *     <esp-progress id="demo-circle" mode="circle" value="0" label="Circle demo" variant="success" size="large" show-value></esp-progress>
+ *     <esp-progress id="demo-circle" mode="circle" value="0" label="Circle demo" intent="success" size="large" show-value></esp-progress>
  *     <div style="display: flex; gap: var(--esp-size-small);">
- *       <esp-button id="start-circle-btn" label="Start" variant="primary" collapsed></esp-button>
- *       <esp-button id="reset-circle-btn" label="Reset" variant="complementary" collapsed></esp-button>
+ *       <esp-button id="start-circle-btn" label="Start" collapsed></esp-button>
+ *       <esp-button id="reset-circle-btn" label="Reset" collapsed></esp-button>
  *     </div>
  *   </div>
  * </esp-box>
@@ -152,7 +152,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *         requestAnimationFrame(step);
  *       } else {
  *         circleRunning = false;
- *         showToast({ message: "Complete!", variant: "success", icon: "bread" });
+ *         showToast({ message: "Complete!", intent: "success", icon: "bread" });
  *       }
  *     }
  *     requestAnimationFrame(step);

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

@@ -88,7 +88,6 @@ export type RepeaterRenderItem<T = unknown> = (item: T, index: number) => Repeat
  *
  *   repeater.renderItem = (image) => {
  *     const card = document.createElement("esp-box");
- *     card.variant = "analogous-right";
  *     card.innerHTML = `
  *       <div style="display:grid; gap:var(--esp-size-small); grid-template-columns:7rem 1fr; align-items:start;">
  *         <img src="${image.thumbnail}" alt="" style="width:7rem; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--esp-size-border-radius);" />
@@ -185,7 +184,6 @@ export type RepeaterRenderItem<T = unknown> = (item: T, index: number) => Repeat
  *
  *   repeater.renderItem = (image) => {
  *     const card = document.createElement("esp-box");
- *     card.variant = "analogous-right";
  *     card.innerHTML = `
  *       <article style="display:grid; gap:var(--esp-size-small);">
  *         <img src="${image.thumbnail}" alt="" style="width:100%; aspect-ratio:16 / 10; object-fit:cover; border-radius:var(--esp-size-border-radius);" />
@@ -256,7 +254,6 @@ export type RepeaterRenderItem<T = unknown> = (item: T, index: number) => Repeat
  *
  *   repeater.renderItem = (image) => {
  *     const card = document.createElement("esp-box");
- *     card.variant = "analogous-right";
  *     card.innerHTML = `
  *       <article style="display:grid; gap:var(--esp-size-small);">
  *         <img src="${image.thumbnail}" alt="" style="width:100%; aspect-ratio:3 / 2; object-fit:cover; border-radius:var(--esp-size-border-radius);" />

package/dist/root/helpers/compute-semantic-properties.js

@@ -0,0 +1 @@
+import{deriveSemantic as C,deriveSemanticWithContrast as M,serializeOklch as d}from"../../shared/color-engine.js";import{SEMANTIC_COLOR_NAMES as v,TOKEN_PAIRINGS as S,semanticToCSS as R}from"../../shared/theme.js";import{resolveMappingSource as k}from"./compute-variants.js";function x(r,m,t={}){const i={},u={},p=(o,e)=>{const c=t.effectiveSource?.(o,e)??e,s=k(c,m,r.anchors);return s||t.onUnresolvedSource?.(c),{color:s??m.primary,resolved:s!==null,source:c}};for(const o of v){if(S[o])continue;const e=r.semanticMappings[o],c=r.chroma[o],s=p(o,e.source),n=r.lightness[e.lightness],l=C(s.color,n,c.min,c.max),a=R(o);u[o]=l,i[a]=d(l),t.trace&&t.trace.push({token:o,property:a,resolved:i[a],source:s.source,lightness:e.lightness,sourceResolved:s.resolved,base:s.color})}for(const o of v){const e=S[o];if(!e)continue;const c=r.semanticMappings[o],s=r.chroma[o],n=p(o,c.source),l=r.lightness[c.lightness],a=u[e.bg];let f;const h=M(n.color,l,s.min,s.max,a,e.targetLc,t.trace&&(b=>{f=b})),g=R(o);u[o]=h,i[g]=d(h),t.trace&&t.trace.push({token:o,property:g,resolved:i[g],source:n.source,lightness:c.lightness,sourceResolved:n.resolved,base:n.color,requested:f,contrast:{against:e.bg,background:a,targetLc:e.targetLc}})}return i}export{x as computeSemanticProperties};

package/dist/root/helpers/compute-theme-properties.js

@@ -1 +1 @@
-import{parseCssColor as C,serializeOklch as u,gamutMapToSRGB as E,deriveSemantic as M,deriveSemanticWithContrast as T}from"../../shared/color-engine.js";import{generateScaleProperties as x}from"../../shared/scale-engine.js";import{DATA_SERIES_KEYS as I,DEFAULT_DATA_PALETTE as h,generateDivergingRamp as A,generateSequentialRamp as L}from"../../shared/data-colors.js";import{SEMANTIC_COLOR_NAMES as w,LIGHTNESS_KEYS as _,TOKEN_PAIRINGS as P,resolveDataColorSource as D,semanticToCSS as f}from"../../shared/theme.js";import{lightnessKeyToCSS as N}from"./lightness-key-to-css.js";import{computeVariants as W,resolveMappingSource as H}from"./compute-variants.js";function K(o){return{rootFontSize:o.rootFontSize,typeRatio:o.typeRatio,spaceRatio:o.spaceRatio,borderRadius:o.borderRadius,viewportMin:o.viewportMin,viewportMax:o.viewportMax}}function U(o,O,i){const m=C(o.seedColor);if(!m)return{};const e={};e["--esp-scheme"]=O,e["--esp-seed-color"]=o.seedColor;const S=W(m,o);for(const[n,a]of Object.entries(S))e[`--esp-color-${n}`]=u(E(a));const v=new Set,c=(n,a)=>{const s=typeof n=="string"?D(n,o.anchors):null;if(s)return s;const t=typeof n=="string"?n:String(n);return v.has(t)||(v.add(t),console.warn(`Espalier theme: ${a} color source "${t}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared data colors.`)),o.seedColor},$=o.dataPalette??h;for(let n=0;n<I.length;n+=1){const a=I[n],s=C(c($[a],`dataPalette.${a}`))??m;e[`--esp-color-series-${n+1}`]=u(E(s))}for(const[n,a]of Object.entries(o.dataRamps??{}))try{(a.type==="sequential"?L(c(a.source,`dataRamps.${n}.source`),{steps:a.steps,lightnessStart:a.lightnessStart,lightnessEnd:a.lightnessEnd}):A(c(a.start,`dataRamps.${n}.start`),c(a.end,`dataRamps.${n}.end`),{steps:a.steps,neutral:a.neutral===void 0?void 0:c(a.neutral,`dataRamps.${n}.neutral`)})).forEach((t,r)=>{e[`--esp-color-ramp-${n}-${r+1}`]=t})}catch(s){console.warn(`Espalier theme: dataRamps.${n} cannot be generated \u2014 ${s instanceof Error?s.message:String(s)}`)}for(const n of _)e[N(n)]=`${Math.round(o.lightness[n]*100)}%`;const y=P,p=new Set,k=n=>{const a=H(n,S,o.anchors);return a||(p.has(n)||(p.add(n),console.warn(`Espalier theme: color source "${n}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared anchors.`)),S.primary)},b={};for(const n of w){if(y[n])continue;const a=o.semanticMappings[n],s=o.chroma[n],t=k(a.source),r=o.lightness[a.lightness],d=M(t,r,s.min,s.max);if(b[n]=d,e[f(n)]=u(d),i){const g=f(n);i.push({token:n,property:g,resolved:e[g],source:a.source,lightness:a.lightness,sourceResolved:!p.has(a.source),base:t})}}for(const n of w){const a=y[n];if(!a)continue;const s=o.semanticMappings[n],t=o.chroma[n],r=k(s.source),d=o.lightness[s.lightness],g=b[a.bg];let R;const B=T(r,d,t.min,t.max,g,a.targetLc,i&&(l=>{R=l}));if(b[n]=B,e[f(n)]=u(B),i){const l=f(n);i.push({token:n,property:l,resolved:e[l],source:s.source,lightness:s.lightness,sourceResolved:!p.has(s.source),base:r,requested:R,contrast:{against:a.bg,background:g,targetLc:a.targetLc}})}}return Object.assign(e,x(K(o))),o.fontBody&&(e["--esp-font-body"]=o.fontBody),o.fontHeadings&&(e["--esp-font-headings"]=o.fontHeadings),o.fontBrand&&(e["--esp-font-brand"]=o.fontBrand),o.fontMonospace&&(e["--esp-font-monospace"]=o.fontMonospace),e["--esp-font-weight-body"]=o.fontWeightBody,e["--esp-font-weight-headings"]=o.fontWeightHeadings,e["--esp-font-weight-brand"]=o.fontWeightBrand,e["--esp-font-weight-monospace"]=o.fontWeightMonospace,o.pageBackgroundImage&&(e["--esp-page-background-image"]=o.pageBackgroundImage),o.pageBackgroundImageOpacity!==void 0&&(e["--esp-page-background-image-opacity"]=o.pageBackgroundImageOpacity.toString()),o.boxBackgroundImage&&(e["--esp-box-background-image"]=o.boxBackgroundImage),o.boxBackgroundImageOpacity!==void 0&&(e["--esp-box-background-image-opacity"]=o.boxBackgroundImageOpacity.toString()),o.vellumOpacity!==void 0&&(e["--esp-vellum-opacity"]=o.vellumOpacity.toString()),o.vellumBackgroundImage&&(e["--esp-vellum-background-image"]=o.vellumBackgroundImage),o.vellumBackgroundImageOpacity!==void 0&&(e["--esp-vellum-background-image-opacity"]=o.vellumBackgroundImageOpacity.toString()),e}export{U as computeThemeProperties};
+import{parseCssColor as g,serializeOklch as l,gamutMapToSRGB as f}from"../../shared/color-engine.js";import{generateScaleProperties as k}from"../../shared/scale-engine.js";import{DATA_SERIES_KEYS as u,DEFAULT_DATA_PALETTE as v,generateDivergingRamp as B,generateSequentialRamp as R}from"../../shared/data-colors.js";import{resolveDataColorSource as w}from"../../shared/theme.js";import{lightnessRampProperties as O}from"./lightness-ramp-properties.js";import{computeVariants as $}from"./compute-variants.js";import{computeSemanticProperties as E}from"./compute-semantic-properties.js";function I(o){return{rootFontSize:o.rootFontSize,typeRatio:o.typeRatio,spaceRatio:o.spaceRatio,borderRadius:o.borderRadius,viewportMin:o.viewportMin,viewportMax:o.viewportMax}}function j(o,b,m){const i=g(o.seedColor);if(!i)return{};const a={};a["--esp-scheme"]=b,a["--esp-seed-color"]=o.seedColor;const c=$(i,o);for(const[e,n]of Object.entries(c))a[`--esp-color-${e}`]=l(f(n));const p=new Set,t=(e,n)=>{const r=typeof e=="string"?w(e,o.anchors):null;if(r)return r;const s=typeof e=="string"?e:String(e);return p.has(s)||(p.add(s),console.warn(`Espalier theme: ${n} color source "${s}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared data colors.`)),o.seedColor},y=o.dataPalette??v;for(let e=0;e<u.length;e+=1){const n=u[e],r=g(t(y[n],`dataPalette.${n}`))??i;a[`--esp-color-series-${e+1}`]=l(f(r))}for(const[e,n]of Object.entries(o.dataRamps??{}))try{(n.type==="sequential"?R(t(n.source,`dataRamps.${e}.source`),{steps:n.steps,lightnessStart:n.lightnessStart,lightnessEnd:n.lightnessEnd}):B(t(n.start,`dataRamps.${e}.start`),t(n.end,`dataRamps.${e}.end`),{steps:n.steps,neutral:n.neutral===void 0?void 0:t(n.neutral,`dataRamps.${e}.neutral`)})).forEach((s,S)=>{a[`--esp-color-ramp-${e}-${S+1}`]=s})}catch(r){console.warn(`Espalier theme: dataRamps.${e} cannot be generated \u2014 ${r instanceof Error?r.message:String(r)}`)}Object.assign(a,O(o));const d=new Set;return Object.assign(a,E(o,c,{trace:m,onUnresolvedSource:e=>{d.has(e)||(d.add(e),console.warn(`Espalier theme: color source "${e}" cannot be resolved \u2014 falling back to the seed. Run validateTheme for the declared anchors.`))}})),Object.assign(a,k(I(o))),o.fontBody&&(a["--esp-font-body"]=o.fontBody),o.fontHeadings&&(a["--esp-font-headings"]=o.fontHeadings),o.fontBrand&&(a["--esp-font-brand"]=o.fontBrand),o.fontMonospace&&(a["--esp-font-monospace"]=o.fontMonospace),a["--esp-font-weight-body"]=o.fontWeightBody,a["--esp-font-weight-headings"]=o.fontWeightHeadings,a["--esp-font-weight-brand"]=o.fontWeightBrand,a["--esp-font-weight-monospace"]=o.fontWeightMonospace,o.pageBackgroundImage&&(a["--esp-page-background-image"]=o.pageBackgroundImage),o.pageBackgroundImageOpacity!==void 0&&(a["--esp-page-background-image-opacity"]=o.pageBackgroundImageOpacity.toString()),o.boxBackgroundImage&&(a["--esp-box-background-image"]=o.boxBackgroundImage),o.boxBackgroundImageOpacity!==void 0&&(a["--esp-box-background-image-opacity"]=o.boxBackgroundImageOpacity.toString()),o.vellumOpacity!==void 0&&(a["--esp-vellum-opacity"]=o.vellumOpacity.toString()),o.vellumBackgroundImage&&(a["--esp-vellum-background-image"]=o.vellumBackgroundImage),o.vellumBackgroundImageOpacity!==void 0&&(a["--esp-vellum-background-image-opacity"]=o.vellumBackgroundImageOpacity.toString()),a}export{j as computeThemeProperties};

package/dist/root/helpers/lightness-ramp-properties.js

@@ -0,0 +1 @@
+import{LIGHTNESS_KEYS as s}from"../../shared/theme.js";import{lightnessKeyToCSS as e}from"./lightness-key-to-css.js";function p(t){const o={};for(const r of s)o[e(r)]=`${Math.round(t.lightness[r]*100)}%`;return o}export{p as lightnessRampProperties};

package/dist/shared/bus-events.d.ts

@@ -33,7 +33,7 @@ import type { HelpRequest, HelpState } from "./help-events.js";
 /**
  * Contract for elements that provide a seed color to their subtree.
  * Implemented by `EspalierRoot` (the global provider) and
- * `EspalierElementBase` (per-component variant overrides).
+ * `EspalierElementBase` (scoped context and intent derivation).
  *
  * @docUrl /api/seed-color-root
  * @menuGroup Bus Events
@@ -48,7 +48,7 @@ export interface SeedColorRoot {
  *
  * Published by `<esp-root>` after initial mount and subscribed to by every
  * `EspalierElementBase` descendant so that scheme, seed, and full-theme changes
- * propagate to variant-aware children. All roots share one global bus, so
+ * propagate to scoped-token-aware descendants. All roots share one global bus, so
  * consumers should use `EspalierRoot.subscribeScoped()` instead of subscribing
  * to these events directly. Read initial values from the root; these events are
  * change-only and are not replayed for late subscribers.

package/dist/shared/esp-element-base.d.ts

@@ -1,7 +1,6 @@
 import { LitElement, type PropertyValues } from "lit";
 import { type SeedColorRoot } from "./bus-events.js";
-import { type ColorSource } from "./theme.js";
-export type EspalierVariant = "analogous-left" | "analogous-right" | "complementary" | "danger" | "info" | "neutral" | "primary" | "split-complementary-left" | "split-complementary-right" | "success" | "triadic-left" | "triadic-right" | "warning" | "";
+import { type EspalierIntentVariant } from "./intent-values.js";
 /**
  * Shared base class for Espalier elements.
  *
@@ -18,7 +17,16 @@ export type EspalierVariant = "analogous-left" | "analogous-right" | "complement
  * @cssprop --esp-field-focus-shadow - Shadow color used for shared field focus treatment. Defaults to `var(--esp-color-shadow)`.
  */
 export declare class EspalierElementBase extends LitElement implements SeedColorRoot {
-    protected variantBacker: EspalierVariant;
+    protected intentBacker: EspalierIntentVariant;
+    /**
+     * Whether a non-neutral intent emits its inline tokens
+     * (`--esp-color-primary` and the filled-action pair). Interactive
+     * controls need them; chrome whose intent treatment is class-based
+     * (badges, callouts, status pills — see `intentSurfaceTokens`) opts
+     * out so a decorative intent never rewrites inherited tokens for
+     * slotted content.
+     */
+    protected intentEmitsTokens: boolean;
     get seedColor(): string;
     set seedColor(val: string);
     correlationId: `${string}-${string}-${string}-${string}-${string}`;
@@ -34,11 +42,27 @@ export declare class EspalierElementBase extends LitElement implements SeedColor
      */
     scheme: "dark" | "light" | "";
     /**
-     * The [color variant](/espalier-guides/) of the element.
-     * @type {EspalierVariant}
+     * The element's [intent](/espalier-guides/) — its meaning: `neutral`
+     * (no pin), `success`, `warning`, or `danger` (each pinned to its
+     * fixed status family), or `info` (pinned to the complementary
+     * family). On token-emitting controls a non-neutral intent pins the
+     * filled-action pair to that family, derived over the governing
+     * zone's theme; class-styled chrome (badges, callouts, status pills)
+     * opts out of inline emission and renders its treatment from CSS
+     * classes instead. An intent never repaints the surrounding zone,
+     * which is what contexts are for. Removing the attribute restores
+     * the element's own default intent.
+     * @type {EspalierIntentVariant}
      */
-    get variant(): EspalierVariant;
-    set variant(val: EspalierVariant);
+    get intent(): EspalierIntentVariant;
+    set intent(value: EspalierIntentVariant | string | null);
+    /**
+     * A theme-defined color zone. The selected context rebinds designer-facing
+     * roles and emits a complete, contrast-enforced semantic token table on this
+     * host for descendants to inherit.
+     */
+    get context(): string;
+    set context(value: string);
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
@@ -51,16 +75,16 @@ export declare class EspalierElementBase extends LitElement implements SeedColor
      */
     traverseToClosest(selector: string): Element | null;
     /**
-     * Compute and apply variant-specific semantic color tokens.
-     *
-     * For the **primary** variant (or none), all semantic tokens
-     * cascade from `<esp-root>` — any previous overrides are cleared.
+     * Compute and apply context- and intent-specific semantic color tokens.
      *
-     * For non-primary variants, semantic tokens whose source is
-     * `primary` are recomputed using the variant color and applied
-     * as inline styles on the host element.
+     * With no context and a `neutral` intent, all semantic tokens cascade
+     * from `<esp-root>` and previous overrides are cleared. A context
+     * emits the zone's complete nineteen-token table; a non-neutral intent
+     * then overlays the filled-action pair, derived over the governing
+     * zone's theme — this host's own context, or the nearest ancestor
+     * zone's — so its APCA enforcement runs against the zone's actual
+     * action surface.
      */
-    protected applyVariantTokens(): void;
-    protected getVariantColorSource(): ColorSource | "";
+    protected applyScopedColorTokens(): void;
     static styles: import("lit").CSSResult[];
 }

package/dist/shared/esp-element-base.js

@@ -1,4 +1,4 @@
-var p=function(v,e,t,o){var r=arguments.length,s=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(v,e,t,o);else for(var c=v.length-1;c>=0;c--)(a=v[c])&&(s=(r<3?a(s):r>3?a(e,t,s):a(e,t))||s);return r>3&&s&&Object.defineProperty(e,t,s),s};import{css as x,LitElement as A}from"lit";import{property as y,state as U}from"lit/decorators.js";import{subscribeToRootEvent as f}from"./root-event-subscription.js";import{traverseToClosest as T}from"./utilities.js";import{parseCssColor as O,serializeOklch as k,gamutMapToSRGB as F,deriveSemantic as _,deriveSemanticWithContrast as z}from"./color-engine.js";import{computeVariants as S,resolveMappingSource as D}from"../root/helpers/compute-variants.js";import{SEMANTIC_COLOR_NAMES as P,TOKEN_PAIRINGS as I,semanticToCSS as w}from"./theme.js";import{alignAttributeTextInheritance as M,focusRing as B}from"./style-fragments.js";class n extends A{constructor(){super(...arguments),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.variantTokenOriginalValues=new Map,this.rootEventSubscriptionsActive=!1,this.subscribedRoot=null,this.rootEventUnsubscribers=[],this.variantBacker="primary",this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{this.syncRootFromDom(!1)&&(this.seedColor=e.seedColor,this.applyVariantTokens())},this.handleSchemeChanged=e=>{!this.syncRootFromDom(!1)||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyVariantTokens())},this.handleThemeChanged=()=>{this.syncRootFromDom(!1)&&this.applyVariantTokens()},this.handleIconSpriteUrlChanged=()=>{this.syncRootFromDom(!1)&&this.requestUpdate()}}get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const o=()=>{const r=e();return r?(r.focus(t),!0):!1};o()||this.updateComplete.then(()=>{o()})}focusShadowElementAfterUpdate(e,t){this.focusResolvedElementAfterUpdate(()=>this.shadowRoot?.querySelector(e),t)}emitValueChanged(e){this.dispatchEvent(new CustomEvent("value-changed",{detail:e,bubbles:!0,composed:!0}))}get variant(){return this.variantBacker}set variant(e){this.variantBacker=e,this.applyVariantTokens()}connectedCallback(){super.connectedCallback();const e=this.syncRootFromDom(!1);e&&this.subscribeToRootEvents(e)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents()}firstUpdated(e){this.syncRootFromDom(!0)}syncRootFromDom(e){const t=T(this,"esp-root");if(!t){if(this.espRoot&&this.clearVariantTokens(),this.unsubscribeFromRootEvents(),this.espRoot=null,!e)return null;throw new Error("No esp-root ancestor found. Espalier components must be placed inside an <esp-root> element.")}const o=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,c=this.seedColor!==t.seedColor;return this.espRoot=t,o&&this.isConnected&&this.subscribeToRootEvents(t),(o||a||c)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyVariantTokens()),o&&this.requestUpdate(),t}subscribeToRootEvents(e){this.rootEventSubscriptionsActive&&this.subscribedRoot===e||(this.unsubscribeFromRootEvents(),this.subscribedRoot=e,this.rootEventUnsubscribers=[f(e,"seed-color-changed",this.handleSeedColorChanged),f(e,"scheme-changed",this.handleSchemeChanged),f(e,"theme-changed",this.handleThemeChanged),f(e,"icon-sprite-url-changed",this.handleIconSpriteUrlChanged)],this.rootEventSubscriptionsActive=!0)}unsubscribeFromRootEvents(){if(this.rootEventSubscriptionsActive){for(const e of this.rootEventUnsubscribers)e();this.rootEventUnsubscribers=[],this.subscribedRoot=null,this.rootEventSubscriptionsActive=!1}}traverseToClosest(e){return T(this,e)}applyVariantTokens(){if(!this.espRoot)return;const e=this.getVariantColorSource();if(!e){this.clearVariantTokens();return}const t=this.espRoot.activeTheme,o=O(t.seedColor);if(!o)return;const s=S(o,t)[e];if(!s){this.clearVariantTokens();return}this.setVariantTokenProperty("--esp-color-primary",k(F(s)));const a=S(s,t),c=n.statusVariantSources.has(e),{textContrast:C}=n,g={},R=i=>D(i,a,t.anchors)??a.primary;for(const i of P){if(C[i])continue;const l=t.semanticMappings[i],h=t.chroma[i],d=this.effectiveVariantTokenSource(i,l.source,c),b=R(d),m=t.lightness[l.lightness],u=_(b,m,h.min,h.max);g[i]=u,this.setVariantTokenProperty(w(i),k(u))}for(const i of P){const l=C[i];if(!l)continue;const h=t.semanticMappings[i],d=t.chroma[i],b=this.effectiveVariantTokenSource(i,h.source,c),m=R(b),u=t.lightness[h.lightness],E=g[l.bg],V=z(m,u,d.min,d.max,E,l.targetLc);g[i]=V,this.setVariantTokenProperty(w(i),k(V))}}effectiveVariantTokenSource(e,t,o){return o&&n.semanticActionTokens.has(e)?"primary":t}getVariantColorSource(){switch(this.variant){case"":case"primary":case"neutral":return"";case"info":return"complementary";default:return this.variant}}setVariantTokenProperty(e,t){const o=this.variantTokenOriginalValues.get(e);if(o){const r=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(r!==o.generatedValue||s!==o.generatedPriority)&&(o.originalValue=r.length?r:null,o.originalPriority=s),o.generatedValue=t,o.generatedPriority=""}else{const r=this.style.getPropertyValue(e);this.variantTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:r.length?r:null})}this.style.setProperty(e,t)}clearVariantTokens(){for(const[e,t]of this.variantTokenOriginalValues){const o=this.style.getPropertyValue(e),r=this.style.getPropertyPriority(e);(o!==t.generatedValue||r!==t.generatedPriority)&&(t.originalValue=o.length?o:null,t.originalPriority=r),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority)}this.variantTokenOriginalValues.clear()}}n.textContrast=I,n.statusVariantSources=new Set(["danger","success","warning"]),n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[B(".esp-field:focus-within","--esp-field-focus-shadow"),M,x`
+var h=function(f,e,t,r){var o=arguments.length,s=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(f,e,t,r);else for(var i=f.length-1;i>=0;i--)(a=f[i])&&(s=(o<3?a(s):o>3?a(e,t,s):a(e,t))||s);return o>3&&s&&Object.defineProperty(e,t,s),s};import{css as R,LitElement as C}from"lit";import{property as p,state as S}from"lit/decorators.js";import{subscribeToRootEvent as u}from"./root-event-subscription.js";import{traverseToClosest as b}from"./utilities.js";import{parseCssColor as w,serializeOklch as x,gamutMapToSRGB as P}from"./color-engine.js";import{computeVariants as v}from"../root/helpers/compute-variants.js";import{computeSemanticProperties as m}from"../root/helpers/compute-semantic-properties.js";import{lightnessRampProperties as E}from"../root/helpers/lightness-ramp-properties.js";import{ROLE_NAMES as V,mergeTheme as U,semanticToCSS as A}from"./theme.js";import{alignAttributeTextInheritance as I,focusRing as O}from"./style-fragments.js";import{syncNormalizedAttribute as D}from"./attribute-helpers.js";import{INTENT_VARIANTS as y,normalizeIntentVariant as z}from"./intent-values.js";const k=new WeakMap;class n extends C{constructor(){super(...arguments),this.seedColorBacker="oklch(0.7 0.125 216)",this.espRoot=null,this.contextBacker="",this.scopedTokenOriginalValues=new Map,this.warnedUnknownContexts=new Set,this.pendingInitialThemeRoot=null,this.rootEventSubscriptionsActive=!1,this.subscribedRoot=null,this.rootEventUnsubscribers=[],this.intentBacker="neutral",this.intentEmitsTokens=!0,this.warnedUnknownIntents=new Set,this.correlationId=globalThis.crypto?.randomUUID?.()??Math.random().toString(36),this.scheme="light",this.handleSeedColorChanged=e=>{this.syncRootFromDom(!1)&&(this.seedColor=e.seedColor,this.applyScopedColorTokens())},this.handleSchemeChanged=e=>{!this.syncRootFromDom(!1)||this.scheme===e.scheme||(this.scheme=e.scheme,this.applyScopedColorTokens())},this.handleThemeChanged=()=>{this.syncRootFromDom(!1)&&this.applyScopedColorTokens()},this.handleIconSpriteUrlChanged=()=>{this.syncRootFromDom(!1)&&this.requestUpdate()}}get seedColor(){return this.seedColorBacker}set seedColor(e){this.seedColorBacker=e}focusResolvedElementAfterUpdate(e,t){const r=()=>{const o=e();return o?(o.focus(t),!0):!1};r()||this.updateComplete.then(()=>{r()})}focusShadowElementAfterUpdate(e,t){this.focusResolvedElementAfterUpdate(()=>this.shadowRoot?.querySelector(e),t)}emitValueChanged(e){this.dispatchEvent(new CustomEvent("value-changed",{detail:e,bubbles:!0,composed:!0}))}get intent(){return this.intentBacker}set intent(e){const t=typeof e=="string"?e.trim():"";t!==""&&!y.includes(t)&&!this.warnedUnknownIntents.has(t)&&(this.warnedUnknownIntents.add(t),console.warn(`Espalier intent: "${t}" is not an intent; expected one of ${y.join(", ")}. Treating it as "neutral".`));const r=this.intentBacker,o=z(e);D(this,"intent",o),o!==r&&(this.intentBacker=o,this.requestUpdate("intent",r),this.applyTokensWhenRootReady())}get context(){return this.contextBacker}set context(e){const t=e??"";t!==this.contextBacker&&(this.contextBacker=t,this.applyTokensWhenRootReady(),this.refreshDescendantIntentDerivations())}refreshDescendantIntentDerivations(){const e=new Set,t=o=>{for(const s of Array.from(o.children))r(s)},r=o=>{if(!e.has(o)){if(e.add(o),o instanceof n&&o.applyTokensWhenRootReady(),o.shadowRoot&&t(o.shadowRoot),o instanceof HTMLSlotElement)for(const s of o.assignedElements({flatten:!0}))r(s);t(o)}};t(this),this.shadowRoot&&t(this.shadowRoot)}static flattenedParent(e){return e instanceof Element&&e.assignedSlot?e.assignedSlot:e instanceof ShadowRoot?e.host:e.parentNode}resolveAncestorZoneTheme(e){let t=n.flattenedParent(this);for(;t;){if(t instanceof Element&&t.localName==="esp-root")return null;if(t instanceof n){const r=t.contextBacker.trim();if(r){const o=this.resolveNamedContextTheme(e,r);if(o)return o}}t=n.flattenedParent(t)}return null}connectedCallback(){super.connectedCallback();const e=this.syncRootFromDom(!1);e&&this.subscribeToRootEvents(e)}disconnectedCallback(){super.disconnectedCallback(),this.unsubscribeFromRootEvents(),this.clearScopedTokens(),this.espRoot=null}firstUpdated(e){this.syncRootFromDom(!0),this.applyTokensWhenRootReady()}syncRootFromDom(e){const t=b(this,"esp-root");if(!t){if(this.espRoot&&this.clearScopedTokens(),this.unsubscribeFromRootEvents(),this.espRoot=null,!e)return null;throw new Error("No esp-root ancestor found. Espalier components must be placed inside an <esp-root> element.")}const r=t!==this.espRoot,s=t.scheme==="dark"?"dark":"light",a=this.scheme!==s,i=this.seedColor!==t.seedColor;return this.espRoot=t,r&&this.isConnected&&this.subscribeToRootEvents(t),(r||a||i)&&(this.scheme=s,this.seedColor=t.seedColor,this.applyTokensWhenRootReady()),r&&this.requestUpdate(),t}applyTokensWhenRootReady(){const e=this.espRoot;if(e&&(!e.hasUpdated||e.isUpdatePending)){this.applyTokensAfterInitialRootUpdate(e);return}this.applyScopedColorTokens()}applyTokensAfterInitialRootUpdate(e){if(this.pendingInitialThemeRoot===e)return;this.pendingInitialThemeRoot=e;const t=e.updateComplete;if(!t){this.pendingInitialThemeRoot=null,this.applyScopedColorTokens();return}t.then(()=>{this.pendingInitialThemeRoot===e&&(this.pendingInitialThemeRoot=null),!(!this.isConnected||this.espRoot!==e)&&(this.scheme=e.scheme==="dark"?"dark":"light",this.seedColor=e.seedColor,this.applyScopedColorTokens())})}subscribeToRootEvents(e){this.rootEventSubscriptionsActive&&this.subscribedRoot===e||(this.unsubscribeFromRootEvents(),this.subscribedRoot=e,this.rootEventUnsubscribers=[u(e,"seed-color-changed",this.handleSeedColorChanged),u(e,"scheme-changed",this.handleSchemeChanged),u(e,"theme-changed",this.handleThemeChanged),u(e,"icon-sprite-url-changed",this.handleIconSpriteUrlChanged)],this.rootEventSubscriptionsActive=!0)}unsubscribeFromRootEvents(){if(this.rootEventSubscriptionsActive){for(const e of this.rootEventUnsubscribers)e();this.rootEventUnsubscribers=[],this.subscribedRoot=null,this.rootEventSubscriptionsActive=!1}}traverseToClosest(e){return b(this,e)}applyScopedColorTokens(){if(!this.espRoot)return;const e=this.intentEmitsTokens?n.intentColorSources[this.intentBacker]:"";if(!e&&!this.context.trim()){this.clearScopedTokens();return}const t=this.espRoot.activeTheme;if(!t){this.clearScopedTokens();return}const r=this.resolveContextTheme(t),o=r.theme,s=w(o.seedColor);if(!s)return;const a=v(s,o),i={};if(r.applied&&(Object.assign(i,m(o,a)),Object.assign(i,E(o))),e){let c=o;r.applied||(c=this.resolveAncestorZoneTheme(t)??o);const l=c===o?a:v(s,c),T=m(c,l,{effectiveSource:(g,d)=>n.semanticActionTokens.has(g)?e:d});i["--esp-color-primary"]=x(P(l[e]));for(const g of n.semanticActionTokens){const d=A(g);i[d]=T[d]}}this.applyScopedTokenProperties(i)}resolveContextTheme(e){const t=this.context.trim();if(!t)return{applied:!1,theme:e};const r=this.resolveNamedContextTheme(e,t);return r?{applied:!0,theme:r}:(this.warnedUnknownContexts.has(t)||(this.warnedUnknownContexts.add(t),console.warn(`Espalier context: "${t}" is not defined by the active theme; inheriting root tokens.`)),{applied:!1,theme:e})}resolveNamedContextTheme(e,t){const r=e.contexts&&Object.prototype.hasOwnProperty.call(e.contexts,t)?e.contexts[t]:void 0;if(!r)return null;let o=k.get(e);const s=o?.get(t);if(s)return s;const a={};for(const c of V){const l=r[c];l!==void 0&&(a[c]=l)}const i=U(e,{lightness:r.lightness,roles:a});return o||(o=new Map,k.set(e,o)),o.set(t,i),i}applyScopedTokenProperties(e){for(const t of this.scopedTokenOriginalValues.keys())t in e||this.restoreScopedTokenProperty(t);for(const[t,r]of Object.entries(e))this.setScopedTokenProperty(t,r)}setScopedTokenProperty(e,t){const r=this.scopedTokenOriginalValues.get(e);if(r){const o=this.style.getPropertyValue(e),s=this.style.getPropertyPriority(e);(o!==r.generatedValue||s!==r.generatedPriority)&&(r.originalValue=o.length?o:null,r.originalPriority=s),r.generatedValue=t,r.generatedPriority=""}else{const o=this.style.getPropertyValue(e);this.scopedTokenOriginalValues.set(e,{generatedPriority:"",generatedValue:t,originalPriority:this.style.getPropertyPriority(e),originalValue:o.length?o:null})}this.style.setProperty(e,t)}restoreScopedTokenProperty(e){const t=this.scopedTokenOriginalValues.get(e);if(!t)return;const r=this.style.getPropertyValue(e),o=this.style.getPropertyPriority(e);(r!==t.generatedValue||o!==t.generatedPriority)&&(t.originalValue=r.length?r:null,t.originalPriority=o),t.originalValue===null?this.style.removeProperty(e):this.style.setProperty(e,t.originalValue,t.originalPriority),this.scopedTokenOriginalValues.delete(e)}clearScopedTokens(){for(const e of[...this.scopedTokenOriginalValues.keys()])this.restoreScopedTokenProperty(e)}}n.intentColorSources={danger:"danger",info:"complementary",neutral:"",success:"success",warning:"warning"},n.semanticActionTokens=new Set(["actionBackground","actionText"]),n.styles=[O(".esp-field:focus-within","--esp-field-focus-shadow"),I,R`
       :host {
         
         --_esp-field-resolved-hover-bg: var(
@@ -122,4 +122,4 @@ var p=function(v,e,t,o){var r=arguments.length,s=r<3?e:o===null?o=Object.getOwnP
       .esp-field:has(textarea:disabled):hover {
         background-color: var(--esp-field-background, var(--esp-color-layer-2));
       }
-    `],p([U()],n.prototype,"seedColor",null),p([y({attribute:!1})],n.prototype,"correlationId",void 0),p([y({type:String,reflect:!0})],n.prototype,"scheme",void 0),p([y({type:String,attribute:"variant",reflect:!0})],n.prototype,"variant",null);export{n as EspalierElementBase};
+    `],h([S()],n.prototype,"seedColor",null),h([p({attribute:!1})],n.prototype,"correlationId",void 0),h([p({type:String,reflect:!0})],n.prototype,"scheme",void 0),h([p({type:String,attribute:"intent",reflect:!0,useDefault:!0})],n.prototype,"intent",null),h([p({type:String,attribute:"context",reflect:!0})],n.prototype,"context",null);export{n as EspalierElementBase};

package/dist/shared/style-fragments.js

@@ -1,8 +1,8 @@
-import{css as n,unsafeCSS as t}from"lit";const a=n`
+import{css as o,unsafeCSS as e}from"lit";const l=o`
   :host([align]) {
     text-align: inherit;
   }
-`,d=n`
+`,a=o`
   .sr-only {
     position: absolute;
     width: 1px;
@@ -14,14 +14,44 @@ import{css as n,unsafeCSS as t}from"lit";const a=n`
     white-space: nowrap;
     border: 0;
   }
-`;function l(o){const i=o.includes(":host")||o.includes("[disabled]")?o:`:host([disabled]) ${o}`;return n`
-    ${t(i)} {
+`;function i(r){const n=r.includes(":host")||r.includes("[disabled]")?r:`:host([disabled]) ${r}`;return o`
+    ${e(n)} {
       opacity: 0.5;
       cursor: not-allowed;
     }
-  `}function p(o,i,e="0 0 3px",r=""){return n`
-    ${t(o)} {
-      box-shadow: ${t(r)} ${t(e)}
-        var(${t(i)}, var(--esp-color-shadow));
+  `}function p(r,n,t="0 0 3px",s=""){return o`
+    ${e(r)} {
+      box-shadow: ${e(s)} ${e(t)}
+        var(${e(n)}, var(--esp-color-shadow));
     }
-  `}export{a as alignAttributeTextInheritance,l as disabledControl,p as focusRing,d as srOnly};
+  `}const d=o`
+  .intent-neutral {
+    --_esp-intent-background: var(--esp-color-layer-2);
+    --_esp-intent-border-color: var(--esp-color-border);
+    --_esp-intent-color: var(--esp-color-text);
+  }
+
+  .intent-success {
+    --_esp-intent-background: oklch(from var(--esp-color-success) var(--esp-l-raised-2) c h);
+    --_esp-intent-border-color: oklch(from var(--esp-color-success) var(--esp-l-border) c h);
+    --_esp-intent-color: oklch(from var(--esp-color-success) var(--esp-l-text) c h);
+  }
+
+  .intent-warning {
+    --_esp-intent-background: oklch(from var(--esp-color-warning) var(--esp-l-raised-2) c h);
+    --_esp-intent-border-color: oklch(from var(--esp-color-warning) var(--esp-l-border) c h);
+    --_esp-intent-color: oklch(from var(--esp-color-warning) var(--esp-l-text) c h);
+  }
+
+  .intent-danger {
+    --_esp-intent-background: oklch(from var(--esp-color-danger) var(--esp-l-raised-2) c h);
+    --_esp-intent-border-color: oklch(from var(--esp-color-danger) var(--esp-l-border) c h);
+    --_esp-intent-color: var(--esp-color-danger-text);
+  }
+
+  .intent-info {
+    --_esp-intent-background: var(--esp-color-link-hover-bg);
+    --_esp-intent-border-color: oklch(from var(--esp-color-link) var(--esp-l-border) c h);
+    --_esp-intent-color: var(--esp-color-link);
+  }
+`;export{l as alignAttributeTextInheritance,i as disabledControl,p as focusRing,d as intentSurfaceTokens,a as srOnly};

package/dist/shared/theme.d.ts

@@ -97,9 +97,10 @@ export type ThemeAnchors = Record<string, ThemeAnchor>;
  *
  * An anchor source contributes its own hue **and chroma**; lightness
  * always comes from the mapping's ramp stop, and APCA enforcement
- * applies unchanged. Under an element variant, anchor sources stay
- * absolute — a brand color is a color, not a relationship to the seed,
- * so variant re-seeding does not rotate it.
+ * applies unchanged. Anchors are absolute sources rather than seed
+ * rotations — a brand color is a color, not a relationship to the
+ * seed — so they hold steady while contexts rebind roles around them
+ * and intents replace the filled-action source.
  */
 export type MappingSource = ColorSource | `anchor:${string}`;
 /** Anchor names and slot names share one slug grammar. */
@@ -205,6 +206,20 @@ export type RoleBinding<R extends RoleName = RoleName> = MappingSource | ({
 export type ThemeRoles = {
     [R in RoleName]?: RoleBinding<R>;
 };
+/**
+ * One named zone-level rebinding of the designer-facing color roles.
+ *
+ * A context may also carry a partial lightness ramp. Color sources alone
+ * cannot make a dark zone inside a light scheme because semantic derivation
+ * deliberately takes lightness from the ramp rather than from an anchor.
+ */
+export type ThemeContext = ThemeRoles & {
+    lightness?: Partial<LightnessMap>;
+};
+/** Named role-rebinding zones available to `context` attributes. */
+export type ThemeContexts = Record<string, ThemeContext>;
+/** Context declarations while partial themes are being layered. */
+export type PartialThemeContexts = Record<string, ThemeContext | undefined>;
 /** Ordered role names, for validation and iteration. */
 export declare const ROLE_NAMES: readonly RoleName[];
 /**
@@ -394,6 +409,12 @@ export interface EspalierTheme {
      * See {@link ThemeRoles} and ADR-016.
      */
     roles: ThemeRoles;
+    /**
+     * Named zone-level role rebindings. A base-derived element selects one with
+     * its `context` attribute; the selected context is resolved against this
+     * scheme's complete theme and re-enforces every semantic ink pairing.
+     */
+    contexts: ThemeContexts;
     /**
      * Eight stable categorical data-series colors. Each value is a CSS color or
      * an `anchor:<name>[.<slot>]` reference. Emitted as
@@ -427,8 +448,9 @@ export interface EspalierTheme {
  * carry slot-only anchor overrides, which the resolved
  * {@link ThemeAnchor} deliberately does not permit.
  */
-export type PartialTheme = Omit<DeepPartial<EspalierTheme>, "anchors" | "dataRamps"> & {
+export type PartialTheme = Omit<DeepPartial<EspalierTheme>, "anchors" | "contexts" | "dataRamps"> & {
     anchors?: PartialThemeAnchors;
+    contexts?: PartialThemeContexts;
     dataRamps?: PartialDataRamps;
 };
 /** Validation result returned by {@link validateTheme}. */
@@ -556,7 +578,7 @@ export declare function encodeTheme(partial: PartialTheme): string;
  * Deep-merge a {@link PartialTheme} over a set of defaults.
  *
  * Primitive fields are replaced; nested objects (`angles`,
- * `semanticHues`, `lightness`, `chroma`, `semanticMappings`)
+ * `semanticHues`, `lightness`, `chroma`, `semanticMappings`, `contexts`)
  * are merged key-by-key.  Arrays (`stylesheets`) are replaced
  * wholesale.
  *
@@ -565,25 +587,21 @@ export declare function encodeTheme(partial: PartialTheme): string;
  * @returns A new fully-resolved {@link EspalierTheme}.
  */
 export declare function mergeTheme(defaults: EspalierTheme, overrides: PartialTheme): EspalierTheme;
+export declare function validateTheme(base64: string): ThemeValidationResult;
 /**
- * Validate a Base64-encoded theme string.
+ * Validate the light and dark partials that form one scheme-paired theme.
  *
- * Checks structure, types, and value ranges.  The function is
- * intentionally lenient on unknown keys (future-proofing) but
- * strict on the keys it recognises.
- *
- * @param base64 A Base64-encoded JSON string representing a
- *   partial or full theme.
- * @returns A {@link ThemeValidationResult} with `valid`, `errors`,
- *   and `warnings`.
+ * Each partial first passes through {@link validateTheme}. Once both are
+ * structurally valid, their context-name sets must match exactly so a stable
+ * `context` attribute cannot silently change meaning when the scheme changes.
  */
-export declare function validateTheme(base64: string): ThemeValidationResult;
+export declare function validateThemePair(lightBase64: string, darkBase64: string): ThemeValidationResult;
 /**
  * Keys of {@link EspalierTheme} whose values are nested objects
  * and therefore need key-by-key merging instead of wholesale
  * replacement when combining two {@link PartialTheme} objects.
  */
-export declare const NESTED_THEME_KEYS: readonly ["anchors", "angles", "dataPalette", "dataRamps", "roles", "chroma", "lightness", "semanticHues", "semanticMappings", "variantChroma"];
+export declare const NESTED_THEME_KEYS: readonly ["anchors", "angles", "contexts", "dataPalette", "dataRamps", "roles", "chroma", "lightness", "semanticHues", "semanticMappings", "variantChroma"];
 /**
  * Deep-merge two {@link PartialTheme} objects.
  *