@taprootio/espalier 3.9.0 → 4.0.0

package/dist/tabs/esp-tab-group.js

@@ -1,4 +1,4 @@
-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 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 c}from"../shared/esp-element-base.js";import{EspalierTab as p}from"./esp-tab.js";import{disabledControl as k}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("esp-tab-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 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 T}from"../shared/events.js";import{EspalierTab as p}from"./esp-tab.js";import{disabledControl as k}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(T.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`
       <div class="tab-container">
         <div class="tab-list" role="tablist" part="tab-list" @keydown=${this.handleKeyDown}>
           ${this.tabData.map((t,a)=>d`
@@ -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":v}
+                aria-disabled=${t.disabled?"true":f}
                 tabindex=${t.active?"0":"-1"}
                 ?disabled=${t.disabled}
                 @click=${()=>this.handleTabClick(a)}
@@ -22,7 +22,7 @@ var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnP
           <slot
             ${w(this.panelsSlot)}
             @slotchange=${this.handleSlotChange}
-            @esp-tab-updated=${this.handleChildUpdated}
+            @esp-internal-tab-updated=${this.handleChildUpdated}
           ></slot>
         </div>
       </div>
@@ -106,4 +106,4 @@ var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnP
       .panels {
         
       }
-    `],b([g({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),b([m()],n.prototype,"tabData",void 0),n=b([f("esp-tab-group")],n);export{n as EspalierTabGroup};
+    `],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};

package/dist/tabs/esp-tab.d.ts

@@ -48,7 +48,8 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * @customElement esp-tab
  * @slot - The default slot holds the panel content displayed
  * when this tab is active.
- * @event {CustomEvent} esp-tab-updated - Fired when the tab's label, active state, or disabled state changes so the parent tab group can refresh its derived metadata.
+ * Label, active-state, and disabled-state updates are reported through a
+ * private coordination event consumed by the parent tab group.
  *
  * @csspart panel - The panel wrapper element.
  *

package/dist/tabs/esp-tab.js

@@ -1,4 +1,4 @@
-var l=function(i,e,o,r){var p=arguments.length,a=p<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,o):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(i,e,o,r);else for(var d=i.length-1;d>=0;d--)(n=i[d])&&(a=(p<3?n(a):p>3?n(e,o,a):n(e,o))||a);return p>3&&a&&Object.defineProperty(e,o,a),a};import{css as f,html as u}from"lit";import{customElement as c,property as s}from"lit/decorators.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";let t=class extends b{constructor(){super(...arguments),this.label="",this.active=!1,this.disabled=!1,this.panelId="",this.ariaLabelledBy=""}updated(e){super.updated(e),(e.has("label")||e.has("active")||e.has("disabled"))&&this.dispatchEvent(new CustomEvent("esp-tab-updated",{bubbles:!0,composed:!0}))}render(){return u`
+var l=function(s,e,o,r){var p=arguments.length,a=p<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,o):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(s,e,o,r);else for(var d=s.length-1;d>=0;d--)(n=s[d])&&(a=(p<3?n(a):p>3?n(e,o,a):n(e,o))||a);return p>3&&a&&Object.defineProperty(e,o,a),a};import{css as f,html as u}from"lit";import{customElement as c,property as i}from"lit/decorators.js";import{EspalierElementBase as b}from"../shared/esp-element-base.js";let t=class extends b{constructor(){super(...arguments),this.label="",this.active=!1,this.disabled=!1,this.panelId="",this.ariaLabelledBy=""}updated(e){super.updated(e),(e.has("label")||e.has("active")||e.has("disabled"))&&this.dispatchEvent(new CustomEvent("esp-internal-tab-updated",{bubbles:!0,composed:!0}))}render(){return u`
       <div
         part="panel"
         role="tabpanel"
@@ -24,4 +24,4 @@ var l=function(i,e,o,r){var p=arguments.length,a=p<3?e:r===null?r=Object.getOwnP
         color: var(--esp-color-text);
         outline: none;
       }
-    `],l([s({type:String})],t.prototype,"label",void 0),l([s({type:Boolean,reflect:!0})],t.prototype,"active",void 0),l([s({type:Boolean,reflect:!0})],t.prototype,"disabled",void 0),l([s({attribute:!1})],t.prototype,"panelId",void 0),l([s({attribute:!1})],t.prototype,"ariaLabelledBy",void 0),t=l([c("esp-tab")],t);export{t as EspalierTab};
+    `],l([i({type:String})],t.prototype,"label",void 0),l([i({type:Boolean,reflect:!0})],t.prototype,"active",void 0),l([i({type:Boolean,reflect:!0})],t.prototype,"disabled",void 0),l([i({attribute:!1})],t.prototype,"panelId",void 0),l([i({attribute:!1})],t.prototype,"ariaLabelledBy",void 0),t=l([c("esp-tab")],t);export{t as EspalierTab};

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

@@ -14,7 +14,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * <script>
  *   const theTextarea = findByTagName("esp-textarea")[0];
  *   const theP = findByTagName("p")[0];
- *   theTextarea.addEventListener("value-changed", (ev) => {
+ *   theTextarea.addEventListener("esp-value-changed", (ev) => {
  *     theP.innerText = ev.detail.length
  *       ? ev.detail
  *       : "The textarea is empty...";
@@ -54,7 +54,8 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * ```
  *
  * @customElement esp-textarea
- * @event {CustomEvent<string>} value-changed - Emitted when the textarea value changes.
+ * @event {CustomEvent<string>} esp-value-changed - Emitted when the textarea value changes.
+ * @event {CustomEvent<{ valid: boolean; message: string }>} esp-validity-changed - Emitted whenever constraint validation runs.
  *
  * ```html
  * <esp-box>
@@ -64,7 +65,7 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * <script>
  *   const theTextarea = findByTagName("esp-textarea")[0];
  *   const theP = findByTagName("p")[0];
- *   theTextarea.addEventListener("value-changed", (ev) => {
+ *   theTextarea.addEventListener("esp-value-changed", (ev) => {
  *     theP.innerText = ev.detail.length
  *       ? ev.detail
  *       : "The textarea is empty...";
@@ -213,7 +214,7 @@ export declare class EspalierTextarea extends EspalierElementBase implements Esp
      * <script>
      *   const theTextarea = findByTagName("esp-textarea")[0];
      *   const theButton = findByTagName("esp-button")[0];
-     *   theButton.addEventListener("clicked", () => {
+     *   theButton.addEventListener("esp-clicked", () => {
      *     theTextarea.focus();
      *   });
      * </script>
@@ -221,7 +222,7 @@ export declare class EspalierTextarea extends EspalierElementBase implements Esp
      *
      */
     focus(options?: FocusOptions): void;
-    /** Re-run constraint validation and dispatch `validity-changed`. */
+    /** Re-run constraint validation and dispatch `esp-validity-changed`. */
     validate(): void;
     /** Check whether the current state is valid (delegates to ElementInternals). */
     checkValidity(): boolean;

package/dist/textarea/esp-textarea.js

@@ -1,4 +1,4 @@
-var r=function(n,e,i,l){var h=arguments.length,a=h<3?e:l===null?l=Object.getOwnPropertyDescriptor(e,i):l,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(n,e,i,l);else for(var u=n.length-1;u>=0;u--)(d=n[u])&&(a=(h<3?d(a):h>3?d(e,i,a):d(e,i))||a);return h>3&&a&&Object.defineProperty(e,i,a),a};import{css as m,html as p}from"lit";import{customElement as f,property as s}from"lit/decorators.js";import{ifDefined as o}from"lit/directives/if-defined.js";import{createRef as v,ref as g}from"lit/directives/ref.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";import{FormFieldController as y}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as b}from"../shared/form-field-description-controller.js";let t=class extends c{constructor(){super(...arguments),this.internals=this.attachInternals(),this.theTextarea=v(),this.formCtrl=new y({host:this,internals:this.internals,getFormValue:()=>this.value||null,getValidity:()=>this._getValidity(),getValidationAnchor:()=>this.theTextarea.value??this,onReset:()=>{this.value="",this._hasVisibleError=!1},onRestore:e=>{this.value=e},onDisabled:e=>{this.disabled=e}}),this.formItemDescription=new b({host:this,getTarget:()=>this.theTextarea.value}),this._hasVisibleError=!1,this.fieldName="",this.value="",this.name="",this.required=!1,this.requiredMessage="",this.validationMessage="",this.disabled=!1,this._trackVisibleError=e=>{const i=e.detail;this._hasVisibleError=!i.valid}}handleInput(e){const i=e.target;this.value=i.value,this._syncInput()}_syncInput(){this._hasVisibleError?this.formCtrl.syncValue():this.formCtrl.syncValueSilently(),this.emitValueChanged(this.value)}_handleBlur(){this.formCtrl.syncValue()}_getValidity(){const e=this.theTextarea.value;if(e&&!e.validity.valid){const i=e.validity,l={valueMissing:i.valueMissing,tooLong:i.tooLong,tooShort:i.tooShort};return{flags:l,message:this._getFriendlyMessage(l)}}return this.required&&!this.value?{flags:{valueMissing:!0},message:this.requiredMessage||"Please fill out this field."}:null}_getFriendlyMessage(e){return e.valueMissing?this.requiredMessage||"Please fill out this field.":e.tooShort?this.validationMessage||`Must be at least ${this.minlength} characters.`:e.tooLong?this.validationMessage||`Must be no more than ${this.maxlength} characters.`:"Please enter a valid value."}focus(e){this.focusResolvedElementAfterUpdate(()=>this.theTextarea.value,e)}setFormItemDescription(e){this.formItemDescription.setDescription(e)}setFormItemLabel(e){this.formItemDescription.setLabel(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}connectedCallback(){super.connectedCallback(),this.addEventListener("validity-changed",this._trackVisibleError)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("validity-changed",this._trackVisibleError)}render(){return p`
+var r=function(n,e,i,l){var h=arguments.length,a=h<3?e:l===null?l=Object.getOwnPropertyDescriptor(e,i):l,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(n,e,i,l);else for(var u=n.length-1;u>=0;u--)(d=n[u])&&(a=(h<3?d(a):h>3?d(e,i,a):d(e,i))||a);return h>3&&a&&Object.defineProperty(e,i,a),a};import{css as m,html as p}from"lit";import{customElement as f,property as s}from"lit/decorators.js";import{ifDefined as o}from"lit/directives/if-defined.js";import{createRef as v,ref as g}from"lit/directives/ref.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";import{FormFieldController as y}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as b}from"../shared/form-field-description-controller.js";let t=class extends c{constructor(){super(...arguments),this.internals=this.attachInternals(),this.theTextarea=v(),this.formCtrl=new y({host:this,internals:this.internals,getFormValue:()=>this.value||null,getValidity:()=>this._getValidity(),getValidationAnchor:()=>this.theTextarea.value??this,onReset:()=>{this.value="",this._hasVisibleError=!1},onRestore:e=>{this.value=e},onDisabled:e=>{this.disabled=e}}),this.formItemDescription=new b({host:this,getTarget:()=>this.theTextarea.value}),this._hasVisibleError=!1,this.fieldName="",this.value="",this.name="",this.required=!1,this.requiredMessage="",this.validationMessage="",this.disabled=!1,this._trackVisibleError=e=>{const i=e.detail;this._hasVisibleError=!i.valid}}handleInput(e){const i=e.target;this.value=i.value,this._syncInput()}_syncInput(){this._hasVisibleError?this.formCtrl.syncValue():this.formCtrl.syncValueSilently(),this.emitValueChanged(this.value)}_handleBlur(){this.formCtrl.syncValue()}_getValidity(){const e=this.theTextarea.value;if(e&&!e.validity.valid){const i=e.validity,l={valueMissing:i.valueMissing,tooLong:i.tooLong,tooShort:i.tooShort};return{flags:l,message:this._getFriendlyMessage(l)}}return this.required&&!this.value?{flags:{valueMissing:!0},message:this.requiredMessage||"Please fill out this field."}:null}_getFriendlyMessage(e){return e.valueMissing?this.requiredMessage||"Please fill out this field.":e.tooShort?this.validationMessage||`Must be at least ${this.minlength} characters.`:e.tooLong?this.validationMessage||`Must be no more than ${this.maxlength} characters.`:"Please enter a valid value."}focus(e){this.focusResolvedElementAfterUpdate(()=>this.theTextarea.value,e)}setFormItemDescription(e){this.formItemDescription.setDescription(e)}setFormItemLabel(e){this.formItemDescription.setLabel(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}connectedCallback(){super.connectedCallback(),this.addEventListener("esp-validity-changed",this._trackVisibleError)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("esp-validity-changed",this._trackVisibleError)}render(){return p`
       <div class="esp-field">
         <textarea
           id=${this.fieldName}

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

@@ -60,14 +60,14 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  * <script>
  *   const msgInput = findById("toast-msg");
  *   const durInput = findById("toast-dur");
- *   findById("fire-toast").addEventListener("clicked", () => {
+ *   findById("fire-toast").addEventListener("esp-clicked", () => {
  *     showToast({
  *       message: msgInput.value,
  *       duration: Number(durInput.value) || 5,
  *       icon: "bread"
  *     });
  *   });
- *   findById("fire-persistent").addEventListener("clicked", () => {
+ *   findById("fire-persistent").addEventListener("esp-clicked", () => {
  *     showToast({
  *       message: msgInput.value,
  *       duration: 0,
@@ -75,14 +75,14 @@ import { EspalierElementBase } from "../shared/esp-element-base.js";
  *       intent: "warning"
  *     });
  *   });
- *   findById("fire-success").addEventListener("clicked", () => {
+ *   findById("fire-success").addEventListener("esp-clicked", () => {
  *     showToast({
  *       message: "Operation completed successfully!",
  *       intent: "success",
  *       icon: "bread"
  *     });
  *   });
- *   findById("fire-danger").addEventListener("clicked", () => {
+ *   findById("fire-danger").addEventListener("esp-clicked", () => {
  *     showToast({
  *       message: "Something went wrong!",
  *       intent: "danger",

package/dist/toaster/esp-toaster.js

@@ -3,7 +3,7 @@ var u=function(o,e,s,n){var c=arguments.length,r=c<3?e:n===null?n=Object.getOwnP
         ${this.toasts.map(e=>{const s=this.getToastIconHref(e);return l`<esp-info
             .destroyable=${(e.duration??5)===0}
             .intent=${e.intent??"info"}
-            @destroy=${()=>this.removeToast(e)}
+            @esp-info-destroy=${()=>this.removeToast(e)}
           >
             ${s?y(s,{"aria-hidden":null,class:null,slot:"icon-slot"}):l``}
             ${e.message}</esp-info

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

@@ -361,6 +361,7 @@ export declare function buildWebTreePath({ parentPath, segment, rootPath, }: Esp
  * @event {CustomEvent<EspTreeNodeActionDetail>} esp-tree-cut - Fired when a cuttable node's cut action is invoked.
  * @event {CustomEvent<EspTreeNodeActionDetail>} esp-tree-paste-child - Fired when a paste child target node's paste-as-child action is invoked.
  * @event {CustomEvent<EspTreeGraftInputDetail>} esp-tree-graft-input - Fired live as the graft input changes.
+ * @event {CustomEvent<{ valid: boolean; message: string }>} esp-validity-changed - Fired whenever constraint validation runs.
  *
  * @docPageTitle Tree
  * @docUrl /components/tree
@@ -513,7 +514,7 @@ export declare class EspalierTree extends EspalierElementBase {
     formStateRestoreCallback(state: string): void;
     /** Called by the browser when a parent `<fieldset>` is en/disabled. */
     formDisabledCallback(isDisabled: boolean): void;
-    /** Re-run constraint validation and dispatch `validity-changed`. */
+    /** Re-run constraint validation and dispatch `esp-validity-changed`. */
     validate(): void;
     /** Check whether the current state is valid. */
     checkValidity(): boolean;

package/dist/tree/esp-tree.js

@@ -1,4 +1,4 @@
-var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(c,e,t,i);else for(var a=c.length-1;a>=0;a--)(r=c[a])&&(o=(s<3?r(o):s>3?r(e,t,o):r(e,t))||o);return s>3&&o&&Object.defineProperty(e,t,o),o};import{css as T,html as p,nothing as u}from"lit";import{customElement as D,property as h,state as k}from"lit/decorators.js";import{classMap as v}from"lit/directives/class-map.js";import{createRef as $,ref as S}from"lit/directives/ref.js";import{unsafeHTML as R}from"lit/directives/unsafe-html.js";import{EspalierElementBase as z}from"../shared/esp-element-base.js";import{FormFieldController as F}from"../shared/form-field-controller.js";import{getIconHrefForHost as M}from"../shared/intent-values.js";import{caretRight as L}from"../shared/svgs/caret-right.js";import{renderSpriteIcon as E}from"../shared/svgs/render-sprite-icon.js";import"../box/esp-box.js";import"../action-menu/esp-action-menu.js";import"../button/esp-button.js";import"../dialog/esp-dialog.js";import"../form-item/esp-form-item.js";import"../info/esp-info.js";import"../input/esp-input.js";import"./esp-tree-item.js";import{EspalierTreeItem as P}from"./esp-tree-item.js";const B="A branch with that name already exists here.",q="Enter a name for the new branch.",U=500,G={edit:"esp-tree-edit",delete:"esp-tree-delete","move-up":"esp-tree-move-up","move-down":"esp-tree-move-down",cut:"esp-tree-cut","paste-child":"esp-tree-paste-child"},V={edit:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnPropertyDescriptor(e,t):i,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(c,e,t,i);else for(var a=c.length-1;a>=0;a--)(r=c[a])&&(o=(s<3?r(o):s>3?r(e,t,o):r(e,t))||o);return s>3&&o&&Object.defineProperty(e,t,o),o};import{css as D,html as p,nothing as u}from"lit";import{customElement as L,property as h,state as x}from"lit/decorators.js";import{classMap as m}from"lit/directives/class-map.js";import{createRef as $,ref as S}from"lit/directives/ref.js";import{unsafeHTML as C}from"lit/directives/unsafe-html.js";import{EspalierElementBase as z}from"../shared/esp-element-base.js";import{ESP_EVENTS as _}from"../shared/events.js";import{FormFieldController as F}from"../shared/form-field-controller.js";import{getIconHrefForHost as M}from"../shared/intent-values.js";import{caretRight as U}from"../shared/svgs/caret-right.js";import{renderSpriteIcon as G}from"../shared/svgs/render-sprite-icon.js";import"../box/esp-box.js";import"../action-menu/esp-action-menu.js";import"../button/esp-button.js";import"../dialog/esp-dialog.js";import"../form-item/esp-form-item.js";import"../info/esp-info.js";import"../input/esp-input.js";import"./esp-tree-item.js";import{EspalierTreeItem as P}from"./esp-tree-item.js";const B="A branch with that name already exists here.",q="Enter a name for the new branch.",V=500,T={edit:_.TREE_EDIT,delete:_.TREE_DELETE,"move-up":_.TREE_MOVE_UP,"move-down":_.TREE_MOVE_DOWN,cut:_.TREE_CUT,"paste-child":_.TREE_PASTE_CHILD},N={edit:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
     <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
@@ -38,14 +38,14 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
     <path d="M5 10a2 2 0 1 1 0 4a2 2 0 0 1 0 -4z" />
     <path d="M12 10a2 2 0 1 1 0 4a2 2 0 0 1 0 -4z" />
     <path d="M19 10a2 2 0 1 1 0 4a2 2 0 0 1 0 -4z" />
-  </svg>`};function A(c,e){return p`<span
+  </svg>`};function R(c,e){return p`<span
     slot=${e??u}
     class="tree-action-icon"
     aria-hidden="true"
     focusable="false"
   >
-    ${R(V[c])}
-  </span>`}function N(c){return c.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}function H({parentPath:c,segment:e,rootPath:t}){return e?!c||c===t?t.endsWith("/")?`${t}${e}`:`${t}/${e}`:c.endsWith("/")?`${c}${e}`:`${c}/${e}`:c||t}let n=class extends z{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new F({host:this,internals:this.internals,getFormValue:()=>this.value?this.value:null,getValidity:()=>this.required&&!this.value?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null,onReset:()=>{this.value=this._defaultValue},onRestore:e=>{this.value=e},onDisabled:e=>{this.disabled=e}}),this.nodes=[],this.value="",this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1,this.allowGraft=!1,this.rootLabel="/",this.rootPath="/",this.rootSelectable=!0,this.label="",this.graftError=null,this.buildPath=H,this.normalizeGraftSegment=({raw:e})=>N(e),this.keepExpanded=!1,this.expandIcon="",this.collapseIcon="",this._itemsSlot=$(),this._graftInputRef=$(),this._graftDialogRef=$(),this._slottedIds=new WeakMap,this._nextSlottedId=0,this._model=[],this._rowIndex=new Map,this._pathIndex=new Map,this._slottedNodes=[],this._lazyLoaded=new Map,this._grafted=new Map,this._expanded=new Set,this._loading=new Set,this._generation=0,this._defaultValue="",this._pendingFocus=!1,this._pendingScrollId=null,this._pendingGraftFocus=!1,this._nextGraftId=0,this._typeBuffer="",this._typeTimer=null,this._activeId=null,this._selectedId=null,this._graftParentId=null,this._graftValue="",this._graftErrorInternal=null}willUpdate(e){super.willUpdate(e);const t=!this.hasUpdated||e.has("nodes")||e.has("rootLabel")||e.has("rootPath")||e.has("rootSelectable")||e.has("buildPath");t&&(this.hasUpdated&&this._generation++,this._rebuildModel(),this._reconcileState()),e.has("value")?this._reconcileSelectionFromValue():t&&this._reconcileSelectionFromModel(),e.has("value")&&this.hasUpdated&&this.formCtrl.syncValue(),(t||e.has("value"))&&this._revealSelectedValue()}firstUpdated(e){super.firstUpdated(e),this._defaultValue=this.value,this.childElementCount>0&&this._onSlotChange(),this.formCtrl.syncValueSilently()}updated(e){if(super.updated(e),this._pendingFocus&&this._activeId&&(this._pendingFocus=!1,this._rowEl(this._activeId)?.focus({preventScroll:!0})),this._pendingGraftFocus&&(this._pendingGraftFocus=!1,this._graftInputRef.value?.focus()),this._syncGuidePaths(),this._pendingScrollId){const t=this._pendingScrollId;this._pendingScrollId=null,this._scrollRowIntoView(t)}}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}focus(){if(this.disabled)return;const e=this._visibleRows(),t=this._currentActive(e);t&&this._rowEl(t)?.focus()}setGraftError(e){this.graftError=e&&e.length>0?e:null}_rebuildModel(){const e=this.nodes.length?this.nodes:this._slottedNodes,t=this.rootPath||"/",i={id:"__root",segment:"",label:this.rootLabel||t,selectable:this.rootSelectable,hasChildren:!0},s=new Set(e.map(l=>l.segment.toLowerCase())),o=(this._grafted.get(i.id)??[]).filter(l=>!s.has(l.segment.toLowerCase())),r=e===this._slottedNodes,a=[...this._buildChildren(e,t,2,!1,i,r),...this._buildChildren(o,t,2,!0,i,!0)];this._model=[{id:i.id,segment:i.segment,label:i.label??t,icon:"",selectable:this.rootSelectable,editable:!1,deletable:!1,movableUp:!1,movableDown:!1,cuttable:!1,pasteChildTarget:!1,path:t,parentPath:"",parentId:"",level:1,hasChildren:a.length>0,loaded:!0,ephemeral:!1,root:!0,actions:[],children:a}],this._expanded.add(i.id)}_build(e,t,i,s,o,r=!1){if(!this._isUsableNodeId(e.id,r))return null;const a=this._buildPath(t,e.segment,e,o),l=e.children??[],g=e.hasChildren??!1,b=this._lazyLoaded.has(e.id),_=b?this._lazyLoaded.get(e.id)??[]:[],m=new Set([...l,..._].map(f=>f.segment.toLowerCase())),w=(this._grafted.get(e.id)??[]).filter(f=>!m.has(f.segment.toLowerCase())),y=[...this._buildChildren(l,a,i+1,s,e,r),...this._buildChildren(_,a,i+1,s,e,!1),...this._buildChildren(w,a,i+1,!0,e,!0)],I=e.label||e.segment;return{id:e.id,segment:e.segment,data:e.data,label:I,icon:e.icon??"",selectable:e.selectable!==!1,editable:e.editable===!0,deletable:e.deletable===!0,movableUp:e.movableUp===!0,movableDown:e.movableDown===!0,cuttable:e.cuttable===!0,pasteChildTarget:e.pasteChildTarget===!0,path:a,parentPath:t,parentId:o?.id??"",level:i,hasChildren:g||y.length>0,loaded:!g||b,ephemeral:s,root:!1,actions:this._actionsFor(e,I),children:y}}_actionsFor(e,t){const i=[],s=(o,r,a)=>{o&&i.push({kind:r,label:a,accessibleLabel:`${a} ${t}`})};return s(e.editable===!0,"edit","Edit"),s(e.deletable===!0,"delete","Delete"),s(e.movableUp===!0,"move-up","Move up"),s(e.movableDown===!0,"move-down","Move down"),s(e.cuttable===!0,"cut","Cut"),e.pasteChildTarget===!0&&i.push({kind:"paste-child",label:"Paste as child",accessibleLabel:`Paste as child of ${t}`}),i}_buildChildren(e,t,i,s,o,r=!1){return e.flatMap(a=>{const l=this._build(a,t,i,s,o,r);return l?[l]:[]})}_isUsableNodeId(e,t){return e?!t&&this._isGeneratedId(e)?(console.warn(`esp-tree: reserved node id "${e}" ignored.`),!1):!0:(console.warn("esp-tree: node without a stable id ignored."),!1)}_isGeneratedId(e){return e==="__root"||e.startsWith("__slotted:")||e.startsWith("__graft:")}_reconcileState(){this._rowIndex.clear(),this._pathIndex.clear();const e=t=>{for(const i of t){if(this._rowIndex.has(i.id)){console.warn(`esp-tree: duplicate node id "${i.id}" ignored.`);continue}this._pathIndex.has(i.path)?console.warn(`esp-tree: duplicate path "${i.path}" for ids "${this._pathIndex.get(i.path).id}" and "${i.id}".`):this._pathIndex.set(i.path,i),this._rowIndex.set(i.id,i),e(i.children)}};e(this._model);for(const t of[...this._expanded])this._rowIndex.has(t)||this._expanded.delete(t);for(const t of[...this._lazyLoaded.keys()])this._rowIndex.has(t)||this._lazyLoaded.delete(t);for(const t of[...this._grafted.keys()])this._rowIndex.has(t)||this._grafted.delete(t);this._activeId&&!this._rowIndex.has(this._activeId)&&(this._activeId=null)}_revealSelectedValue(){if(!this.value&&!this._selectedId)return;let e=this._selectedId?this._rowIndex.get(this._selectedId):void 0;for(e??=this.value?this._pathIndex.get(this.value):void 0;e&&e.parentId;)this._expanded.add(e.parentId),e=this._rowIndex.get(e.parentId)}_reconcileSelectionFromValue(){if(this._selectedId){const e=this._findRowById(this._selectedId);if(e&&e.path===this.value)return}this._selectedId=this.value?this._findRow(this.value)?.id??null:null}_reconcileSelectionFromModel(){if(this._selectedId){const e=this._findRowById(this._selectedId);if(e){this.value!==e.path&&(this.value=e.path,this.hasUpdated&&this.formCtrl.syncValue(),this._emit("esp-tree-select",{path:e.path,node:this._toPublic(e)}));return}this._selectedId=null}this.value&&(this._selectedId=this._findRow(this.value)?.id??null)}_buildPath(e,t,i,s){return this.buildPath({parentPath:e,segment:t,node:i,parentNode:s,rootPath:this.rootPath||"/"})}_joinPath(e,t){const i=e?this._findRow(e):null;return this._buildPath(e,t,{id:t,segment:t,label:t},i?this._toPublic(i):null)}_findRow(e){return this._pathIndex.get(e)??null}_findRowById(e){return this._rowIndex.get(e)??null}_isIndexedRow(e){return this._rowIndex.get(e.id)===e}_visibleRows(){const e=[],t=i=>{for(const s of i)this._isIndexedRow(s)&&(e.push(s),s.children.length&&this._expanded.has(s.id)&&t(s.children))};return t(this._model),e}_currentActive(e){return this._activeId&&e.some(t=>t.id===this._activeId)?this._activeId:e[0]?.id??null}_rowEl(e){const t=globalThis.CSS?.escape?.(e)??e.replace(/\\/g,"\\\\").replace(/"/g,'\\"');return this.shadowRoot?.querySelector(`[data-id="${t}"]`)??null}_scrollRowIntoView(e){this._rowEl(e)?.scrollIntoView?.({block:"nearest",inline:"nearest"})}_toPublic(e){return{id:e.id,segment:e.segment,data:e.data,label:e.label,icon:e.icon||void 0,selectable:e.selectable,editable:e.editable,deletable:e.deletable,movableUp:e.movableUp,movableDown:e.movableDown,cuttable:e.cuttable,pasteChildTarget:e.pasteChildTarget,hasChildren:e.hasChildren}}_emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}_setExpanded(e,t){t!==this._expanded.has(e.id)&&(t?(this._expanded.add(e.id),e.hasChildren&&!e.loaded&&this._ensureLoaded(e)):this._expanded.delete(e.id),this._emit("esp-tree-toggle",{path:e.path,node:this._toPublic(e),open:t}),this.requestUpdate())}_toggle(e){e.hasChildren&&this._setExpanded(e,!this._expanded.has(e.id))}async _ensureLoaded(e){if(e.loaded||!e.hasChildren||this._loading.has(e.id)||!this.loadChildren)return;const t=this._generation;this._loading.add(e.id),this.requestUpdate();try{const i=await this.loadChildren({id:e.id,segment:e.segment,data:e.data,label:e.label,path:e.path,level:e.level});if(t!==this._generation)return;this._lazyLoaded.set(e.id,i??[]),this._rebuildModel(),this._reconcileState(),this._reconcileSelectionFromModel(),this._pendingScrollId=e.id}catch{}finally{this._loading.delete(e.id),this.requestUpdate()}}_select(e){if(!e.selectable)return;e.hasChildren&&!this._expanded.has(e.id)&&this._setExpanded(e,!0);const t=this._isSelected(e)&&this.value===e.path;this._selectedId=e.id,!t&&(this.value=e.path,this._emit("esp-tree-select",{path:e.path,node:this._toPublic(e)}))}_containsRow(e,t){if(e.id===t.id)return!0;for(;t.parentId;){if(t.parentId===e.id)return!0;const i=this._findRowById(t.parentId);if(!i)break;t=i}return!1}_collapseSelectedBranchOutside(e){if(this.keepExpanded||!this.value&&!this._selectedId||this._isSelected(e))return;const t=this._selectedId?this._findRowById(this._selectedId):this.value?this._findRow(this.value):null;!t?.hasChildren||!this._expanded.has(t.id)||this._containsRow(t,e)||this._setExpanded(t,!1)}_isSelected(e){return this._selectedId===e.id}_setActiveId(e){this._activeId=e,this._pendingFocus=!0,this._pendingScrollId=e}_setActiveRow(e){this._setActiveId(e.id)}_activateAndSelect(e){this._setActiveRow(e),this._collapseSelectedBranchOutside(e),this._select(e),this.requestUpdate()}_onRowClick(e){if(this.disabled)return;if(this._isSelected(e)&&e.selectable&&e.hasChildren){this._setActiveRow(e),this._toggle(e),this.requestUpdate();return}this._activateAndSelect(e)}_onToggleClick(e,t){e.stopPropagation(),!(this.disabled||!t.hasChildren)&&(this._setActiveRow(t),this._toggle(t),this.requestUpdate())}_edit(e){e.editable&&this._emit(G.edit,{path:e.path,node:this._toPublic(e)})}_onActionEvent(e,t,i){e.stopPropagation(),!this.disabled&&(this._activeId=t.id,this._emit(G[i],{path:t.path,node:this._toPublic(t)}),this.requestUpdate())}_onActionMenuSelect(e,t){e.stopPropagation();const i=e.detail.value;t.actions.some(s=>s.kind===i)&&this._onActionEvent(e,t,i)}_stopRowActionEvent(e){e.stopPropagation()}_onRowActionsKeydown(e,t){e.stopPropagation(),!e.defaultPrevented&&(e.key!=="ArrowLeft"&&e.key!=="Escape"||(e.preventDefault(),this._closeRowActionMenus(),this._focusRow(t)))}_onKeydown(e){if(this.disabled)return;const t=e.target;if(t instanceof HTMLElement&&t.closest("button, input, textarea, select, a[href], esp-button, esp-action-menu, esp-action-menu-item, .node-actions"))return;const i=this._visibleRows();if(!i.length)return;const s=this._currentActive(i);let o=i.findIndex(a=>a.id===s);o<0&&(o=0);const r=i[o];if(r){if(e.key==="F10"&&e.shiftKey||e.key==="ContextMenu"){if(r.actions.length===0)return;e.preventDefault(),this._focusRowActions(r);return}switch(e.key){case"ArrowDown":e.preventDefault(),this._moveActive(i[Math.min(o+1,i.length-1)]);break;case"ArrowUp":e.preventDefault(),this._moveActive(i[Math.max(o-1,0)]);break;case"Home":e.preventDefault(),this._moveActive(i[0]);break;case"End":e.preventDefault(),this._moveActive(i[i.length-1]);break;case"ArrowRight":if(e.preventDefault(),r.hasChildren&&!this._expanded.has(r.id)){this._setActiveRow(r),this._setExpanded(r,!0);break}if(r.actions.length>0&&this._focusRowActionTrigger(r))break;if(r.hasChildren&&this._expanded.has(r.id)){const a=i[o+1];if(a&&a.parentId===r.id){this._moveActive(a);break}}break;case"ArrowLeft":if(e.preventDefault(),r.hasChildren&&this._expanded.has(r.id))this._setActiveRow(r),this._setExpanded(r,!1);else if(r.parentId){const a=i.find(l=>l.id===r.parentId);a&&this._moveActive(a)}break;case"Enter":case" ":e.preventDefault(),this._activateAndSelect(r);break;case"F2":if(!r.editable)break;e.preventDefault(),this._setActiveRow(r),this._edit(r),this.requestUpdate();break;case"Insert":if(!this.allowGraft)break;e.preventDefault(),this._openGraftForRow(r);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),this._typeahead(e.key,i,o));break}}}_moveActive(e){e&&(this._closeRowActionMenus(),this._setActiveRow(e),this.requestUpdate())}_focusRow(e){this._closeRowActionMenus(),this._activeId=e.id,this._rowEl(e.id)?.focus({preventScroll:!0}),this.requestUpdate()}_closeRowActionMenus(){this.shadowRoot?.querySelectorAll("esp-action-menu.node-action-menu").forEach(e=>e.closeMenu?.({restoreFocus:!1}))}async _focusRowActions(e){const i=this._rowEl(e.id)?.querySelector(".node-actions");if(!i)return;if(e.actions.length===1){i.querySelector("esp-button")?.focus({preventScroll:!0});return}const s=i.querySelector("esp-action-menu");if(!s)return;s.openMenu(),await s.updateComplete;const o=s;if(typeof o.focusFirstItem=="function"){o.focusFirstItem();return}s.querySelector("esp-action-menu-item:not([disabled])")?.focus()}_focusRowActionTrigger(e){const i=this._rowEl(e.id)?.querySelector(".node-actions esp-button");return i?(i.focus({preventScroll:!0}),!0):!1}_typeahead(e,t,i){this._typeTimer&&clearTimeout(this._typeTimer),this._typeBuffer+=e.toLowerCase(),this._typeTimer=setTimeout(()=>{this._typeBuffer="",this._typeTimer=null},U);const s=t.length;for(let o=1;o<=s;o++){const r=t[(i+o)%s];if(r&&r.label.toLowerCase().startsWith(this._typeBuffer)){this._moveActive(r);return}}}_onSlotChange(){const e=Array.from(this.children).filter(t=>t instanceof P);this._slottedNodes=e.map(t=>this._parseItem(t)),this._generation++,this._rebuildModel(),this._reconcileState(),this.requestUpdate()}_parseItem(e){const t=this._idForSlottedItem(e),i=e.getAttribute("segment")??e.segment??"",s=e.getAttribute("label")??e.label,o=e.getAttribute("icon")??e.icon,r=e.getAttribute("selectable"),a=r===null?e.selectable:r!=="false",l=e.hasAttribute("editable")||e.editable,g=e.hasAttribute("deletable")||e.deletable,b=e.hasAttribute("movable-up")||e.movableUp,_=e.hasAttribute("movable-down")||e.movableDown,m=e.hasAttribute("cuttable")||e.cuttable,w=e.hasAttribute("paste-child-target")||e.pasteChildTarget,y=e.hasAttribute("has-children")||e.hasChildren,I=Array.from(e.children).filter(x=>x instanceof P),f={id:t,segment:i,data:e.data,selectable:a,hasChildren:y};s&&(f.label=s),o&&(f.icon=o),l&&(f.editable=!0),g&&(f.deletable=!0),b&&(f.movableUp=!0),_&&(f.movableDown=!0),m&&(f.cuttable=!0),w&&(f.pasteChildTarget=!0);const C=I.map(x=>this._parseItem(x));return C.length&&(f.children=C),f}_idForSlottedItem(e){const t=this._slottedIds.get(e);if(t)return t;if(e.id&&!this._isGeneratedId(e.id))return this._slottedIds.set(e,e.id),e.id;e.id&&console.warn(`esp-tree: reserved slotted item id "${e.id}" ignored.`);const i=`__slotted:${++this._nextSlottedId}`;return this._slottedIds.set(e,i),i}_onGraftAddClick(e,t){e.stopPropagation(),!this.disabled&&this._openGraftForRow(t)}_openGraftForRow(e){if(this.disabled)return;const t=e??this._model[0]??null,i=this._rowPath(t);this._requestGraft(t,i)&&(t&&(this._setActiveRow(t),this._expanded.add(t.id)),this._openGraft(t?.id??"__root"))}_requestGraft(e,t){return this.dispatchEvent(new CustomEvent("esp-tree-graft-request",{detail:{parentPath:t,parentNode:e?this._toPublic(e):null},bubbles:!0,composed:!0,cancelable:!0}))}_openGraft(e){this._graftParentId=e,this._graftValue="",this._graftErrorInternal=null,this.graftError=null,this._pendingGraftFocus=!0,this.requestUpdate(),this.updateComplete.then(()=>{if(this._graftParentId!==e)return;const t=this._graftDialogRef.value;t&&!t.hasAttribute("is-open")&&t.toggleOpen()})}_cancelGraft(){this._closeGraftDialog(),this._resetGraftState()}_closeGraftDialog(){const e=this._graftDialogRef.value;e?.hasAttribute("is-open")&&e.toggleOpen()}_resetGraftState(){this._graftParentId=null,this._graftValue="",this._graftErrorInternal=null,this.graftError=null}_onGraftDialogClosed(){this._resetGraftState()}_onGraftInput(e){const t=e.detail??e.target.value;this._graftValue=t;const i=this._graftParentPath(),s=this._normalizeGraft(t,i),{valid:o,reason:r}=this._validateSegment(i,s);this._graftErrorInternal=null,this._emit("esp-tree-graft-input",{parentPath:i,raw:t,segment:s,path:this._joinPath(i,s),valid:o,reason:r})}_onGraftKeydown(e){if(e.stopPropagation(),e.key==="Enter")e.preventDefault(),this._commitGraft();else if(e.key==="Escape"){e.preventDefault();const t=this._graftParentId;this._cancelGraft(),t&&this._moveActive(this._findRowById(t)??void 0)}}_commitGraft(){if(this.disabled)return;const e=this._graftParentRow(),t=e?.id??"__root",i=this._rowPath(e),s=this._normalizeGraft(this._graftValue,i),{valid:o,reason:r}=this._validateSegment(i,s);if(!o){this._graftErrorInternal=r==="duplicate"?B:q;return}if(this.graftError)return;const a=this._joinPath(i,s),l={id:`__graft:${++this._nextGraftId}`,segment:s,label:s,selectable:!0},g=this._grafted.get(t)??[];g.push(l),this._grafted.set(t,g),this._rebuildModel(),this._reconcileState(),e&&this._expanded.add(e.id),this._closeGraftDialog(),this._resetGraftState(),this.value=a,this._selectedId=l.id,this._setActiveId(l.id);const b=this._findRowById(l.id),_=b?this._toPublic(b):l;this._emit("esp-tree-graft",{parentPath:i,segment:s,path:a,node:_}),this._emit("esp-tree-select",{path:a,node:_}),this.requestUpdate()}_validateSegment(e,t){return t?this._siblingSegments(e).has(t.toLowerCase())?{valid:!1,reason:"duplicate"}:{valid:!0,reason:""}:{valid:!1,reason:"empty"}}_siblingSegments(e){const t=e?this._findRow(e)?.children??[]:this._model;return new Set(t.map(i=>i.segment.toLowerCase()))}_normalizeGraft(e,t){return this.normalizeGraftSegment({raw:e,parentPath:t})}_graftParentPath(){return this._rowPath(this._graftParentRow())}_graftParentRow(){return this._graftParentId?this._findRowById(this._graftParentId)??this._model[0]??null:this._model[0]??null}_rowPath(e){return e?.path??(this.rootPath||"/")}render(){const e=this._visibleRows(),t=this._currentActive(e);return p`
+    ${C(N[c])}
+  </span>`}function H(c){return c.toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"")}function j({parentPath:c,segment:e,rootPath:t}){return e?!c||c===t?t.endsWith("/")?`${t}${e}`:`${t}/${e}`:c.endsWith("/")?`${c}${e}`:`${c}/${e}`:c||t}let n=class extends z{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new F({host:this,internals:this.internals,getFormValue:()=>this.value?this.value:null,getValidity:()=>this.required&&!this.value?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null,onReset:()=>{this.value=this._defaultValue},onRestore:e=>{this.value=e},onDisabled:e=>{this.disabled=e}}),this.nodes=[],this.value="",this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1,this.allowGraft=!1,this.rootLabel="/",this.rootPath="/",this.rootSelectable=!0,this.label="",this.graftError=null,this.buildPath=j,this.normalizeGraftSegment=({raw:e})=>H(e),this.keepExpanded=!1,this.expandIcon="",this.collapseIcon="",this._itemsSlot=$(),this._graftInputRef=$(),this._graftDialogRef=$(),this._slottedIds=new WeakMap,this._nextSlottedId=0,this._model=[],this._rowIndex=new Map,this._pathIndex=new Map,this._slottedNodes=[],this._lazyLoaded=new Map,this._grafted=new Map,this._expanded=new Set,this._loading=new Set,this._generation=0,this._defaultValue="",this._pendingFocus=!1,this._pendingScrollId=null,this._pendingGraftFocus=!1,this._nextGraftId=0,this._typeBuffer="",this._typeTimer=null,this._activeId=null,this._selectedId=null,this._graftParentId=null,this._graftValue="",this._graftErrorInternal=null}willUpdate(e){super.willUpdate(e);const t=!this.hasUpdated||e.has("nodes")||e.has("rootLabel")||e.has("rootPath")||e.has("rootSelectable")||e.has("buildPath");t&&(this.hasUpdated&&this._generation++,this._rebuildModel(),this._reconcileState()),e.has("value")?this._reconcileSelectionFromValue():t&&this._reconcileSelectionFromModel(),e.has("value")&&this.hasUpdated&&this.formCtrl.syncValue(),(t||e.has("value"))&&this._revealSelectedValue()}firstUpdated(e){super.firstUpdated(e),this._defaultValue=this.value,this.childElementCount>0&&this._onSlotChange(),this.formCtrl.syncValueSilently()}updated(e){if(super.updated(e),this._pendingFocus&&this._activeId&&(this._pendingFocus=!1,this._rowEl(this._activeId)?.focus({preventScroll:!0})),this._pendingGraftFocus&&(this._pendingGraftFocus=!1,this._graftInputRef.value?.focus()),this._syncGuidePaths(),this._pendingScrollId){const t=this._pendingScrollId;this._pendingScrollId=null,this._scrollRowIntoView(t)}}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}focus(){if(this.disabled)return;const e=this._visibleRows(),t=this._currentActive(e);t&&this._rowEl(t)?.focus()}setGraftError(e){this.graftError=e&&e.length>0?e:null}_rebuildModel(){const e=this.nodes.length?this.nodes:this._slottedNodes,t=this.rootPath||"/",i={id:"__root",segment:"",label:this.rootLabel||t,selectable:this.rootSelectable,hasChildren:!0},s=new Set(e.map(l=>l.segment.toLowerCase())),o=(this._grafted.get(i.id)??[]).filter(l=>!s.has(l.segment.toLowerCase())),r=e===this._slottedNodes,a=[...this._buildChildren(e,t,2,!1,i,r),...this._buildChildren(o,t,2,!0,i,!0)];this._model=[{id:i.id,segment:i.segment,label:i.label??t,icon:"",selectable:this.rootSelectable,editable:!1,deletable:!1,movableUp:!1,movableDown:!1,cuttable:!1,pasteChildTarget:!1,path:t,parentPath:"",parentId:"",level:1,hasChildren:a.length>0,loaded:!0,ephemeral:!1,root:!0,actions:[],children:a}],this._expanded.add(i.id)}_build(e,t,i,s,o,r=!1){if(!this._isUsableNodeId(e.id,r))return null;const a=this._buildPath(t,e.segment,e,o),l=e.children??[],g=e.hasChildren??!1,v=this._lazyLoaded.has(e.id),b=v?this._lazyLoaded.get(e.id)??[]:[],w=new Set([...l,...b].map(f=>f.segment.toLowerCase())),y=(this._grafted.get(e.id)??[]).filter(f=>!w.has(f.segment.toLowerCase())),I=[...this._buildChildren(l,a,i+1,s,e,r),...this._buildChildren(b,a,i+1,s,e,!1),...this._buildChildren(y,a,i+1,!0,e,!0)],k=e.label||e.segment;return{id:e.id,segment:e.segment,data:e.data,label:k,icon:e.icon??"",selectable:e.selectable!==!1,editable:e.editable===!0,deletable:e.deletable===!0,movableUp:e.movableUp===!0,movableDown:e.movableDown===!0,cuttable:e.cuttable===!0,pasteChildTarget:e.pasteChildTarget===!0,path:a,parentPath:t,parentId:o?.id??"",level:i,hasChildren:g||I.length>0,loaded:!g||v,ephemeral:s,root:!1,actions:this._actionsFor(e,k),children:I}}_actionsFor(e,t){const i=[],s=(o,r,a)=>{o&&i.push({kind:r,label:a,accessibleLabel:`${a} ${t}`})};return s(e.editable===!0,"edit","Edit"),s(e.deletable===!0,"delete","Delete"),s(e.movableUp===!0,"move-up","Move up"),s(e.movableDown===!0,"move-down","Move down"),s(e.cuttable===!0,"cut","Cut"),e.pasteChildTarget===!0&&i.push({kind:"paste-child",label:"Paste as child",accessibleLabel:`Paste as child of ${t}`}),i}_buildChildren(e,t,i,s,o,r=!1){return e.flatMap(a=>{const l=this._build(a,t,i,s,o,r);return l?[l]:[]})}_isUsableNodeId(e,t){return e?!t&&this._isGeneratedId(e)?(console.warn(`esp-tree: reserved node id "${e}" ignored.`),!1):!0:(console.warn("esp-tree: node without a stable id ignored."),!1)}_isGeneratedId(e){return e==="__root"||e.startsWith("__slotted:")||e.startsWith("__graft:")}_reconcileState(){this._rowIndex.clear(),this._pathIndex.clear();const e=t=>{for(const i of t){if(this._rowIndex.has(i.id)){console.warn(`esp-tree: duplicate node id "${i.id}" ignored.`);continue}this._pathIndex.has(i.path)?console.warn(`esp-tree: duplicate path "${i.path}" for ids "${this._pathIndex.get(i.path).id}" and "${i.id}".`):this._pathIndex.set(i.path,i),this._rowIndex.set(i.id,i),e(i.children)}};e(this._model);for(const t of[...this._expanded])this._rowIndex.has(t)||this._expanded.delete(t);for(const t of[...this._lazyLoaded.keys()])this._rowIndex.has(t)||this._lazyLoaded.delete(t);for(const t of[...this._grafted.keys()])this._rowIndex.has(t)||this._grafted.delete(t);this._activeId&&!this._rowIndex.has(this._activeId)&&(this._activeId=null)}_revealSelectedValue(){if(!this.value&&!this._selectedId)return;let e=this._selectedId?this._rowIndex.get(this._selectedId):void 0;for(e??=this.value?this._pathIndex.get(this.value):void 0;e&&e.parentId;)this._expanded.add(e.parentId),e=this._rowIndex.get(e.parentId)}_reconcileSelectionFromValue(){if(this._selectedId){const e=this._findRowById(this._selectedId);if(e&&e.path===this.value)return}this._selectedId=this.value?this._findRow(this.value)?.id??null:null}_reconcileSelectionFromModel(){if(this._selectedId){const e=this._findRowById(this._selectedId);if(e){this.value!==e.path&&(this.value=e.path,this.hasUpdated&&this.formCtrl.syncValue(),this._emit(_.TREE_SELECT,{path:e.path,node:this._toPublic(e)}));return}this._selectedId=null}this.value&&(this._selectedId=this._findRow(this.value)?.id??null)}_buildPath(e,t,i,s){return this.buildPath({parentPath:e,segment:t,node:i,parentNode:s,rootPath:this.rootPath||"/"})}_joinPath(e,t){const i=e?this._findRow(e):null;return this._buildPath(e,t,{id:t,segment:t,label:t},i?this._toPublic(i):null)}_findRow(e){return this._pathIndex.get(e)??null}_findRowById(e){return this._rowIndex.get(e)??null}_isIndexedRow(e){return this._rowIndex.get(e.id)===e}_visibleRows(){const e=[],t=i=>{for(const s of i)this._isIndexedRow(s)&&(e.push(s),s.children.length&&this._expanded.has(s.id)&&t(s.children))};return t(this._model),e}_currentActive(e){return this._activeId&&e.some(t=>t.id===this._activeId)?this._activeId:e[0]?.id??null}_rowEl(e){const t=globalThis.CSS?.escape?.(e)??e.replace(/\\/g,"\\\\").replace(/"/g,'\\"');return this.shadowRoot?.querySelector(`[data-id="${t}"]`)??null}_scrollRowIntoView(e){this._rowEl(e)?.scrollIntoView?.({block:"nearest",inline:"nearest"})}_toPublic(e){return{id:e.id,segment:e.segment,data:e.data,label:e.label,icon:e.icon||void 0,selectable:e.selectable,editable:e.editable,deletable:e.deletable,movableUp:e.movableUp,movableDown:e.movableDown,cuttable:e.cuttable,pasteChildTarget:e.pasteChildTarget,hasChildren:e.hasChildren}}_emit(e,t){this.dispatchEvent(new CustomEvent(e,{detail:t,bubbles:!0,composed:!0}))}_setExpanded(e,t){t!==this._expanded.has(e.id)&&(t?(this._expanded.add(e.id),e.hasChildren&&!e.loaded&&this._ensureLoaded(e)):this._expanded.delete(e.id),this._emit(_.TREE_TOGGLE,{path:e.path,node:this._toPublic(e),open:t}),this.requestUpdate())}_toggle(e){e.hasChildren&&this._setExpanded(e,!this._expanded.has(e.id))}async _ensureLoaded(e){if(e.loaded||!e.hasChildren||this._loading.has(e.id)||!this.loadChildren)return;const t=this._generation;this._loading.add(e.id),this.requestUpdate();try{const i=await this.loadChildren({id:e.id,segment:e.segment,data:e.data,label:e.label,path:e.path,level:e.level});if(t!==this._generation)return;this._lazyLoaded.set(e.id,i??[]),this._rebuildModel(),this._reconcileState(),this._reconcileSelectionFromModel(),this._pendingScrollId=e.id}catch{}finally{this._loading.delete(e.id),this.requestUpdate()}}_select(e){if(!e.selectable)return;e.hasChildren&&!this._expanded.has(e.id)&&this._setExpanded(e,!0);const t=this._isSelected(e)&&this.value===e.path;this._selectedId=e.id,!t&&(this.value=e.path,this._emit(_.TREE_SELECT,{path:e.path,node:this._toPublic(e)}))}_containsRow(e,t){if(e.id===t.id)return!0;for(;t.parentId;){if(t.parentId===e.id)return!0;const i=this._findRowById(t.parentId);if(!i)break;t=i}return!1}_collapseSelectedBranchOutside(e){if(this.keepExpanded||!this.value&&!this._selectedId||this._isSelected(e))return;const t=this._selectedId?this._findRowById(this._selectedId):this.value?this._findRow(this.value):null;!t?.hasChildren||!this._expanded.has(t.id)||this._containsRow(t,e)||this._setExpanded(t,!1)}_isSelected(e){return this._selectedId===e.id}_setActiveId(e){this._activeId=e,this._pendingFocus=!0,this._pendingScrollId=e}_setActiveRow(e){this._setActiveId(e.id)}_activateAndSelect(e){this._setActiveRow(e),this._collapseSelectedBranchOutside(e),this._select(e),this.requestUpdate()}_onRowClick(e){if(this.disabled)return;if(this._isSelected(e)&&e.selectable&&e.hasChildren){this._setActiveRow(e),this._toggle(e),this.requestUpdate();return}this._activateAndSelect(e)}_onToggleClick(e,t){e.stopPropagation(),!(this.disabled||!t.hasChildren)&&(this._setActiveRow(t),this._toggle(t),this.requestUpdate())}_edit(e){e.editable&&this._emit(T.edit,{path:e.path,node:this._toPublic(e)})}_onActionEvent(e,t,i){e.stopPropagation(),!this.disabled&&(this._activeId=t.id,this._emit(T[i],{path:t.path,node:this._toPublic(t)}),this.requestUpdate())}_onActionMenuSelect(e,t){e.stopPropagation();const i=e.detail.value;t.actions.some(s=>s.kind===i)&&this._onActionEvent(e,t,i)}_stopRowActionEvent(e){e.stopPropagation()}_onRowActionsKeydown(e,t){e.stopPropagation(),!e.defaultPrevented&&(e.key!=="ArrowLeft"&&e.key!=="Escape"||(e.preventDefault(),this._closeRowActionMenus(),this._focusRow(t)))}_onKeydown(e){if(this.disabled)return;const t=e.target;if(t instanceof HTMLElement&&t.closest("button, input, textarea, select, a[href], esp-button, esp-action-menu, esp-action-menu-item, .node-actions"))return;const i=this._visibleRows();if(!i.length)return;const s=this._currentActive(i);let o=i.findIndex(a=>a.id===s);o<0&&(o=0);const r=i[o];if(r){if(e.key==="F10"&&e.shiftKey||e.key==="ContextMenu"){if(r.actions.length===0)return;e.preventDefault(),this._focusRowActions(r);return}switch(e.key){case"ArrowDown":e.preventDefault(),this._moveActive(i[Math.min(o+1,i.length-1)]);break;case"ArrowUp":e.preventDefault(),this._moveActive(i[Math.max(o-1,0)]);break;case"Home":e.preventDefault(),this._moveActive(i[0]);break;case"End":e.preventDefault(),this._moveActive(i[i.length-1]);break;case"ArrowRight":if(e.preventDefault(),r.hasChildren&&!this._expanded.has(r.id)){this._setActiveRow(r),this._setExpanded(r,!0);break}if(r.actions.length>0&&this._focusRowActionTrigger(r))break;if(r.hasChildren&&this._expanded.has(r.id)){const a=i[o+1];if(a&&a.parentId===r.id){this._moveActive(a);break}}break;case"ArrowLeft":if(e.preventDefault(),r.hasChildren&&this._expanded.has(r.id))this._setActiveRow(r),this._setExpanded(r,!1);else if(r.parentId){const a=i.find(l=>l.id===r.parentId);a&&this._moveActive(a)}break;case"Enter":case" ":e.preventDefault(),this._activateAndSelect(r);break;case"F2":if(!r.editable)break;e.preventDefault(),this._setActiveRow(r),this._edit(r),this.requestUpdate();break;case"Insert":if(!this.allowGraft)break;e.preventDefault(),this._openGraftForRow(r);break;default:e.key.length===1&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&(e.preventDefault(),this._typeahead(e.key,i,o));break}}}_moveActive(e){e&&(this._closeRowActionMenus(),this._setActiveRow(e),this.requestUpdate())}_focusRow(e){this._closeRowActionMenus(),this._activeId=e.id,this._rowEl(e.id)?.focus({preventScroll:!0}),this.requestUpdate()}_closeRowActionMenus(){this.shadowRoot?.querySelectorAll("esp-action-menu.node-action-menu").forEach(e=>e.closeMenu?.({restoreFocus:!1}))}async _focusRowActions(e){const i=this._rowEl(e.id)?.querySelector(".node-actions");if(!i)return;if(e.actions.length===1){i.querySelector("esp-button")?.focus({preventScroll:!0});return}const s=i.querySelector("esp-action-menu");if(!s)return;s.openMenu(),await s.updateComplete;const o=s;if(typeof o.focusFirstItem=="function"){o.focusFirstItem();return}s.querySelector("esp-action-menu-item:not([disabled])")?.focus()}_focusRowActionTrigger(e){const i=this._rowEl(e.id)?.querySelector(".node-actions esp-button");return i?(i.focus({preventScroll:!0}),!0):!1}_typeahead(e,t,i){this._typeTimer&&clearTimeout(this._typeTimer),this._typeBuffer+=e.toLowerCase(),this._typeTimer=setTimeout(()=>{this._typeBuffer="",this._typeTimer=null},V);const s=t.length;for(let o=1;o<=s;o++){const r=t[(i+o)%s];if(r&&r.label.toLowerCase().startsWith(this._typeBuffer)){this._moveActive(r);return}}}_onSlotChange(){const e=Array.from(this.children).filter(t=>t instanceof P);this._slottedNodes=e.map(t=>this._parseItem(t)),this._generation++,this._rebuildModel(),this._reconcileState(),this.requestUpdate()}_parseItem(e){const t=this._idForSlottedItem(e),i=e.getAttribute("segment")??e.segment??"",s=e.getAttribute("label")??e.label,o=e.getAttribute("icon")??e.icon,r=e.getAttribute("selectable"),a=r===null?e.selectable:r!=="false",l=e.hasAttribute("editable")||e.editable,g=e.hasAttribute("deletable")||e.deletable,v=e.hasAttribute("movable-up")||e.movableUp,b=e.hasAttribute("movable-down")||e.movableDown,w=e.hasAttribute("cuttable")||e.cuttable,y=e.hasAttribute("paste-child-target")||e.pasteChildTarget,I=e.hasAttribute("has-children")||e.hasChildren,k=Array.from(e.children).filter(E=>E instanceof P),f={id:t,segment:i,data:e.data,selectable:a,hasChildren:I};s&&(f.label=s),o&&(f.icon=o),l&&(f.editable=!0),g&&(f.deletable=!0),v&&(f.movableUp=!0),b&&(f.movableDown=!0),w&&(f.cuttable=!0),y&&(f.pasteChildTarget=!0);const A=k.map(E=>this._parseItem(E));return A.length&&(f.children=A),f}_idForSlottedItem(e){const t=this._slottedIds.get(e);if(t)return t;if(e.id&&!this._isGeneratedId(e.id))return this._slottedIds.set(e,e.id),e.id;e.id&&console.warn(`esp-tree: reserved slotted item id "${e.id}" ignored.`);const i=`__slotted:${++this._nextSlottedId}`;return this._slottedIds.set(e,i),i}_onGraftAddClick(e,t){e.stopPropagation(),!this.disabled&&this._openGraftForRow(t)}_openGraftForRow(e){if(this.disabled)return;const t=e??this._model[0]??null,i=this._rowPath(t);this._requestGraft(t,i)&&(t&&(this._setActiveRow(t),this._expanded.add(t.id)),this._openGraft(t?.id??"__root"))}_requestGraft(e,t){return this.dispatchEvent(new CustomEvent(_.TREE_GRAFT_REQUEST,{detail:{parentPath:t,parentNode:e?this._toPublic(e):null},bubbles:!0,composed:!0,cancelable:!0}))}_openGraft(e){this._graftParentId=e,this._graftValue="",this._graftErrorInternal=null,this.graftError=null,this._pendingGraftFocus=!0,this.requestUpdate(),this.updateComplete.then(()=>{if(this._graftParentId!==e)return;const t=this._graftDialogRef.value;t&&!t.hasAttribute("is-open")&&t.toggleOpen()})}_cancelGraft(){this._closeGraftDialog(),this._resetGraftState()}_closeGraftDialog(){const e=this._graftDialogRef.value;e?.hasAttribute("is-open")&&e.toggleOpen()}_resetGraftState(){this._graftParentId=null,this._graftValue="",this._graftErrorInternal=null,this.graftError=null}_onGraftDialogClosed(){this._resetGraftState()}_onGraftInput(e){const t=e.detail??e.target.value;this._graftValue=t;const i=this._graftParentPath(),s=this._normalizeGraft(t,i),{valid:o,reason:r}=this._validateSegment(i,s);this._graftErrorInternal=null,this._emit(_.TREE_GRAFT_INPUT,{parentPath:i,raw:t,segment:s,path:this._joinPath(i,s),valid:o,reason:r})}_onGraftKeydown(e){if(e.stopPropagation(),e.key==="Enter")e.preventDefault(),this._commitGraft();else if(e.key==="Escape"){e.preventDefault();const t=this._graftParentId;this._cancelGraft(),t&&this._moveActive(this._findRowById(t)??void 0)}}_commitGraft(){if(this.disabled)return;const e=this._graftParentRow(),t=e?.id??"__root",i=this._rowPath(e),s=this._normalizeGraft(this._graftValue,i),{valid:o,reason:r}=this._validateSegment(i,s);if(!o){this._graftErrorInternal=r==="duplicate"?B:q;return}if(this.graftError)return;const a=this._joinPath(i,s),l={id:`__graft:${++this._nextGraftId}`,segment:s,label:s,selectable:!0},g=this._grafted.get(t)??[];g.push(l),this._grafted.set(t,g),this._rebuildModel(),this._reconcileState(),e&&this._expanded.add(e.id),this._closeGraftDialog(),this._resetGraftState(),this.value=a,this._selectedId=l.id,this._setActiveId(l.id);const v=this._findRowById(l.id),b=v?this._toPublic(v):l;this._emit(_.TREE_GRAFT,{parentPath:i,segment:s,path:a,node:b}),this._emit(_.TREE_SELECT,{path:a,node:b}),this.requestUpdate()}_validateSegment(e,t){return t?this._siblingSegments(e).has(t.toLowerCase())?{valid:!1,reason:"duplicate"}:{valid:!0,reason:""}:{valid:!1,reason:"empty"}}_siblingSegments(e){const t=e?this._findRow(e)?.children??[]:this._model;return new Set(t.map(i=>i.segment.toLowerCase()))}_normalizeGraft(e,t){return this.normalizeGraftSegment({raw:e,parentPath:t})}_graftParentPath(){return this._rowPath(this._graftParentRow())}_graftParentRow(){return this._graftParentId?this._findRowById(this._graftParentId)??this._model[0]??null:this._model[0]??null}_rowPath(e){return e?.path??(this.rootPath||"/")}render(){const e=this._visibleRows(),t=this._currentActive(e);return p`
       <div
         class="tree"
         role="tree"
@@ -57,7 +57,7 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
       </div>
       ${this.allowGraft?this._renderGraftDialog():u}
       <slot ${S(this._itemsSlot)} @slotchange=${this._onSlotChange} hidden></slot>
-    `}_renderGeneratedIcon(e,t){const i=M(e,this);return i?E(i,{class:t}):u}_renderToggleIcon(e){return e?R(e):L}_renderBranchGuide(){return p`
+    `}_renderGeneratedIcon(e,t){const i=M(e,this);return i?G(i,{class:t}):u}_renderToggleIcon(e){return e?C(e):U}_renderBranchGuide(){return p`
       <svg
         class="branch-guide"
         viewBox="0 0 24 1"
@@ -67,13 +67,13 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
       >
         <path></path>
       </svg>
-    `}_syncGuidePaths(){const e=this.shadowRoot;if(e)for(const t of e.querySelectorAll(".children"))this._syncGuidePath(t)}_syncGuidePath(e){const t=Array.from(e.children).find(g=>g.classList.contains("branch-guide")),i=t?.querySelector("path");if(!t||!i)return;const s=e.getBoundingClientRect(),o=Number.parseFloat(getComputedStyle(e).paddingInlineStart)||24,r=[];let a=o;for(const g of Array.from(e.children)){if(g.classList.contains("branch-guide"))continue;const b=this._guideTargetFor(g);if(!b)continue;const _=b.getBoundingClientRect(),m=_.left-s.left;Number.isFinite(m)&&m>0&&(a=m);const w=_.top-s.top+_.height/2;Number.isFinite(w)&&r.push(w)}const l=Math.max(s.height,r[r.length-1]??0,1);if(t.setAttribute("viewBox",`0 0 ${this._round(a)} ${this._round(l)}`),!r.length){i.removeAttribute("d");return}i.setAttribute("d",this._guidePath(r,a))}_guideTargetFor(e){return e.classList.contains("treeitem")?Array.from(e.children).find(i=>i.classList.contains("row-shell"))?.querySelector(".row")??null:e.classList.contains("graft-insert")?e.querySelector(".graft-add"):null}_guidePath(e,t){const i=this._round(Math.max(t,1)),s=this._round(e[e.length-1]??0),o=this._round(Math.max(0,Math.min(6,i/2,s))),r=["M 0 0"];for(const a of e.slice(0,-1)){const l=this._round(a);r.push(`V ${l}`,`H ${i}`,"H 0")}return o>0&&s>o?r.push(`V ${this._round(s-o)}`,`Q 0 ${s} ${o} ${s}`,`H ${i}`):r.push(`V ${s}`,`H ${i}`),r.join(" ")}_round(e){return Math.round(e*100)/100}_renderToggleAction(e,t){if(!e.hasChildren)return p`<span
-        class=${v({"icon-action":!0,"toggle-action":!0,placeholder:!0})}
+    `}_syncGuidePaths(){const e=this.shadowRoot;if(e)for(const t of e.querySelectorAll(".children"))this._syncGuidePath(t)}_syncGuidePath(e){const t=Array.from(e.children).find(g=>g.classList.contains("branch-guide")),i=t?.querySelector("path");if(!t||!i)return;const s=e.getBoundingClientRect(),o=Number.parseFloat(getComputedStyle(e).paddingInlineStart)||24,r=[];let a=o;for(const g of Array.from(e.children)){if(g.classList.contains("branch-guide"))continue;const v=this._guideTargetFor(g);if(!v)continue;const b=v.getBoundingClientRect(),w=b.left-s.left;Number.isFinite(w)&&w>0&&(a=w);const y=b.top-s.top+b.height/2;Number.isFinite(y)&&r.push(y)}const l=Math.max(s.height,r[r.length-1]??0,1);if(t.setAttribute("viewBox",`0 0 ${this._round(a)} ${this._round(l)}`),!r.length){i.removeAttribute("d");return}i.setAttribute("d",this._guidePath(r,a))}_guideTargetFor(e){return e.classList.contains("treeitem")?Array.from(e.children).find(i=>i.classList.contains("row-shell"))?.querySelector(".row")??null:e.classList.contains("graft-insert")?e.querySelector(".graft-add"):null}_guidePath(e,t){const i=this._round(Math.max(t,1)),s=this._round(e[e.length-1]??0),o=this._round(Math.max(0,Math.min(6,i/2,s))),r=["M 0 0"];for(const a of e.slice(0,-1)){const l=this._round(a);r.push(`V ${l}`,`H ${i}`,"H 0")}return o>0&&s>o?r.push(`V ${this._round(s-o)}`,`Q 0 ${s} ${o} ${s}`,`H ${i}`):r.push(`V ${s}`,`H ${i}`),r.join(" ")}_round(e){return Math.round(e*100)/100}_renderToggleAction(e,t){if(!e.hasChildren)return p`<span
+        class=${m({"icon-action":!0,"toggle-action":!0,placeholder:!0})}
         aria-hidden="true"
       ></span>`;const i=t?`Collapse ${e.label}`:`Expand ${e.label}`,s=t&&this.collapseIcon?this.collapseIcon:this.expandIcon;return p`
       <button
         type="button"
-        class=${v({"icon-action":!0,"toggle-action":!0,open:t&&!this.collapseIcon})}
+        class=${m({"icon-action":!0,"toggle-action":!0,open:t&&!this.collapseIcon})}
         aria-label=${i}
         title=${i}
         aria-expanded=${String(t)}
@@ -85,24 +85,24 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
       </button>
     `}_renderNodeTools(e){const t=M(e.icon,this),i=t.length>0;return i?p`
       <span
-        class=${v({"node-tools":!0,"has-icon":i})}
+        class=${m({"node-tools":!0,"has-icon":i})}
       >
         <span class="node-icon" aria-hidden="true">
-          ${E(t,{"aria-hidden":null})}
+          ${G(t,{"aria-hidden":null})}
         </span>
       </span>
     `:u}_renderNodeActions(e){const t=e.actions;return t.length===0?u:p`
       <span
         class="node-actions"
         @click=${this._stopRowActionEvent}
-        @clicked=${this._stopRowActionEvent}
+        @esp-clicked=${this._stopRowActionEvent}
         @keydown=${i=>this._onRowActionsKeydown(i,e)}
       >
         ${t.length===1?this._renderSingleNodeAction(e,t[0]):this._renderNodeActionMenu(e,t)}
       </span>
     `}_renderSingleNodeAction(e,t){return p`
       <esp-button
-        class=${v({"node-action-button":!0,[`${t.kind}-action`]:!0})}
+        class=${m({"node-action-button":!0,[`${t.kind}-action`]:!0})}
         icon-only
         collapsed
         label=${t.accessibleLabel}
@@ -111,9 +111,9 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
         tabindex="-1"
         incognito
         ?disabled=${this.disabled}
-        @clicked=${i=>this._onActionEvent(i,e,t.kind)}
+        @esp-clicked=${i=>this._onActionEvent(i,e,t.kind)}
       >
-        ${A(t.kind)}
+        ${R(t.kind)}
       </esp-button>
     `}_renderNodeActionMenu(e,t){const i=`Actions for ${e.label}`;return p`
       <esp-action-menu
@@ -121,7 +121,7 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
         placement="bottom-end"
         icon-position="right"
         ?disabled=${this.disabled}
-        @select=${s=>this._onActionMenuSelect(s,e)}
+        @esp-action-menu-select=${s=>this._onActionMenuSelect(s,e)}
       >
         <esp-button
           slot="trigger"
@@ -135,11 +135,11 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
           tabindex="-1"
           ?disabled=${this.disabled}
         >
-          ${A("menu")}
+          ${R("menu")}
         </esp-button>
         ${t.map(s=>p`
             <esp-action-menu-item value=${s.kind}>
-              ${A(s.kind,"icon")} ${s.label}
+              ${R(s.kind,"icon")} ${s.label}
             </esp-action-menu-item>
           `)}
       </esp-action-menu>
@@ -157,7 +157,7 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
         tabindex=${this.disabled?-1:o?0:-1}
       >
         <div class="row-shell">
-          <div class=${v(a)} @click=${()=>this._onRowClick(e)}>
+          <div class=${m(a)} @click=${()=>this._onRowClick(e)}>
             ${this._renderToggleAction(e,i)} ${this._renderNodeTools(e)}
             <span class="node-label">${e.label}</span>
             ${r?p`<span class="loading" aria-hidden="true"></span>`:u}
@@ -168,7 +168,7 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
       </div>
     `}_renderChildGroup(e,t){const i=this._expanded.has(e.id),s=i&&e.children.length>0,o=this.allowGraft&&(i||!e.hasChildren);return!s&&!o?u:p`
       <div
-        class=${v({children:!0,"add-only":!s})}
+        class=${m({children:!0,"add-only":!s})}
         role=${s?"group":"presentation"}
       >
         ${this._renderBranchGuide()}
@@ -177,12 +177,12 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
       </div>
     `}_renderGraftAdd(e,t,i){return p`
       <div
-        class=${v({"graft-insert":!0,root:i})}
+        class=${m({"graft-insert":!0,root:i})}
         role="presentation"
       >
         <button
           type="button"
-          class=${v({"icon-action":!0,"graft-add":!0,"graft-root":i})}
+          class=${m({"icon-action":!0,"graft-add":!0,"graft-root":i})}
           aria-label=${t}
           title=${t}
           ?disabled=${this.disabled}
@@ -218,7 +218,7 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
                     class="graft-input"
                     .value=${this._graftValue}
                     placeholder="new-branch"
-                    @value-changed=${this._onGraftInput}
+                    @esp-value-changed=${this._onGraftInput}
                     @keydown=${this._onGraftKeydown}
                   ></esp-input>
                 </esp-form-item>
@@ -232,7 +232,7 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
                     label="Cancel"
                     icon="circle-x"
                     ?disabled=${this.disabled}
-                    @clicked=${this._cancelGraft}
+                    @esp-clicked=${this._cancelGraft}
                   ></esp-button>
                   <esp-button
                     collapsed
@@ -240,13 +240,13 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
                     label="Add branch"
                     icon="plus"
                     ?disabled=${this.disabled}
-                    @clicked=${this._commitGraft}
+                    @esp-clicked=${this._commitGraft}
                   ></esp-button>
                 </div>
               </section>
             </esp-box>`:u}
       </esp-dialog>
-    `}};n.formAssociated=!0,n.styles=[...z.styles,T`
+    `}};n.formAssociated=!0,n.styles=[...z.styles,D`
       :host {
         --_esp-tree-indent-step: var(--esp-tree-indent-step, 1.25rem);
         --_esp-tree-action-size: var(--esp-tree-action-size, 1.75rem);
@@ -620,4 +620,4 @@ var d=function(c,e,t,i){var s=arguments.length,o=s<3?e:i===null?i=Object.getOwnP
         gap: var(--esp-size-small);
         justify-content: flex-end;
       }
-    `],d([h({type:Array})],n.prototype,"nodes",void 0),d([h({type:String})],n.prototype,"value",void 0),d([h({type:String,reflect:!0})],n.prototype,"name",void 0),d([h({type:Boolean,reflect:!0})],n.prototype,"required",void 0),d([h({attribute:"required-message"})],n.prototype,"requiredMessage",void 0),d([h({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),d([h({type:Boolean,attribute:"allow-graft"})],n.prototype,"allowGraft",void 0),d([h({type:String,attribute:"root-label"})],n.prototype,"rootLabel",void 0),d([h({type:String,attribute:"root-path"})],n.prototype,"rootPath",void 0),d([h({attribute:"root-selectable",converter:{fromAttribute:c=>c!=="false",toAttribute:c=>String(c)}})],n.prototype,"rootSelectable",void 0),d([h({type:String})],n.prototype,"label",void 0),d([h({type:String,reflect:!0,attribute:"graft-error"})],n.prototype,"graftError",void 0),d([h({attribute:!1})],n.prototype,"loadChildren",void 0),d([h({attribute:!1})],n.prototype,"buildPath",void 0),d([h({attribute:!1})],n.prototype,"normalizeGraftSegment",void 0),d([h({type:Boolean,attribute:"keep-expanded"})],n.prototype,"keepExpanded",void 0),d([h({attribute:!1})],n.prototype,"expandIcon",void 0),d([h({attribute:!1})],n.prototype,"collapseIcon",void 0),d([k()],n.prototype,"_activeId",void 0),d([k()],n.prototype,"_graftParentId",void 0),d([k()],n.prototype,"_graftValue",void 0),d([k()],n.prototype,"_graftErrorInternal",void 0),n=d([D("esp-tree")],n);export{n as EspalierTree,H as buildWebTreePath,N as normalizeSegment};
+    `],d([h({type:Array})],n.prototype,"nodes",void 0),d([h({type:String})],n.prototype,"value",void 0),d([h({type:String,reflect:!0})],n.prototype,"name",void 0),d([h({type:Boolean,reflect:!0})],n.prototype,"required",void 0),d([h({attribute:"required-message"})],n.prototype,"requiredMessage",void 0),d([h({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),d([h({type:Boolean,attribute:"allow-graft"})],n.prototype,"allowGraft",void 0),d([h({type:String,attribute:"root-label"})],n.prototype,"rootLabel",void 0),d([h({type:String,attribute:"root-path"})],n.prototype,"rootPath",void 0),d([h({attribute:"root-selectable",converter:{fromAttribute:c=>c!=="false",toAttribute:c=>String(c)}})],n.prototype,"rootSelectable",void 0),d([h({type:String})],n.prototype,"label",void 0),d([h({type:String,reflect:!0,attribute:"graft-error"})],n.prototype,"graftError",void 0),d([h({attribute:!1})],n.prototype,"loadChildren",void 0),d([h({attribute:!1})],n.prototype,"buildPath",void 0),d([h({attribute:!1})],n.prototype,"normalizeGraftSegment",void 0),d([h({type:Boolean,attribute:"keep-expanded"})],n.prototype,"keepExpanded",void 0),d([h({attribute:!1})],n.prototype,"expandIcon",void 0),d([h({attribute:!1})],n.prototype,"collapseIcon",void 0),d([x()],n.prototype,"_activeId",void 0),d([x()],n.prototype,"_graftParentId",void 0),d([x()],n.prototype,"_graftValue",void 0),d([x()],n.prototype,"_graftErrorInternal",void 0),n=d([L("esp-tree")],n);export{n as EspalierTree,j as buildWebTreePath,H as normalizeSegment};

package/package.json

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