@adia-ai/web-components 0.7.2 → 0.7.3

package/dist/web-components.min.js

@@ -133,7 +133,7 @@ parent-template-re-read pattern that works across frameworks.`);return}if(this.d
           <div slot="layer" data-layer="base">${t}</div>
           <div slot="layer" data-layer="fill" aria-hidden="true">${t}</div>
         </div>
-      `}this.#t=this.querySelector('[slot="field"]'),this.#e=this.querySelector('[data-layer="base"] [slot="value"]'),this.#t&&this.#t.addEventListener("pointerdown",this.#c),this.addEventListener("keydown",this.#d)}render(){if(!this.#t)return;let t=this.#r(this.value);this.#e&&(this.#e.textContent=t);let e=this.querySelector('[data-layer="fill"] [slot="value"]');e&&(e.textContent=t);let i=this.max-this.min,n=i>0?(this.value-this.min)/i*100:0;this.style.setProperty("--range-fill-pct",`${n}%`),this.setAttribute("aria-valuemin",this.min),this.setAttribute("aria-valuemax",this.max),this.setAttribute("aria-valuenow",this.value),this.setAttribute("aria-valuetext",`${this.value}${this.suffix?" "+this.suffix:""}`),this.setAttribute("aria-label",this.label||""),this.syncValue(String(this.value))}#r(t){let e=(String(this.step).split(".")[1]||"").length;return e>0?t.toFixed(e):String(t)}#a(t){let e=Math.round((t-this.min)/this.step)*this.step+this.min;return Math.max(this.min,Math.min(this.max,parseFloat(e.toFixed(10))))}#o(t){let e=this.#a(t);e!==this.value&&(this.value=e,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{value:this.value}})))}#l(t){let e=this.#t.getBoundingClientRect(),i=Math.max(0,Math.min(1,(t-e.left)/e.width));return this.#a(this.min+i*(this.max-this.min))}#c=t=>{this.disabled||(t.preventDefault(),this.#o(this.#l(t.clientX)),this.#i=!0,this.#s=t.clientX,this.#n=this.value,this.setAttribute("data-dragging",""),this.#t.setPointerCapture(t.pointerId),this.#t.addEventListener("pointermove",this.#h),this.#t.addEventListener("pointerup",this.#u))};#h=t=>{if(!this.#i)return;let e=t.clientX-this.#s,i=this.#t.getBoundingClientRect().width,n=this.max-this.min,r=e/i*n;this.#o(this.#n+r)};#u=t=>{this.#i=!1,this.removeAttribute("data-dragging"),this.#t.releasePointerCapture(t.pointerId),this.#t.removeEventListener("pointermove",this.#h),this.#t.removeEventListener("pointerup",this.#u),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}))};#d=t=>{if(this.disabled)return;let e=this.value;switch(t.key){case"ArrowRight":case"ArrowUp":e+=this.step;break;case"ArrowLeft":case"ArrowDown":e-=this.step;break;case"Home":e=this.min;break;case"End":e=this.max;break;case"PageUp":e+=this.step*10;break;case"PageDown":e-=this.step*10;break;default:return}t.preventDefault(),this.#o(e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}))};disconnected(){super.disconnected(),this.#t?.removeEventListener("pointerdown",this.#c),this.#t?.removeEventListener("pointermove",this.#h),this.#t?.removeEventListener("pointerup",this.#u),this.removeEventListener("keydown",this.#d),this.#t=null,this.#e=null}};x("range-ui",pn);Q();var mn=class extends k{static requiredIcons=["caret-right"];static template=()=>null;connected(){this.setAttribute("role","tree"),this.addEventListener("click",this.#e),this.addEventListener("keydown",this.#i)}get selectedItem(){return this.querySelector("tree-item-ui[selected]")}select(t,e=null){let i=this.selectedItem;i&&i!==t&&i.removeAttribute("selected"),t.setAttribute("selected",""),this.dispatchEvent(new CustomEvent("tree-select",{bubbles:!0,detail:{item:t,text:t.text,value:t.value,ctrlKey:!!e?.ctrlKey,metaKey:!!e?.metaKey,shiftKey:!!e?.shiftKey}}))}#t(t){if(!t)return null;if(t instanceof Element)return t.matches?.("tree-item-ui")?t:null;if(typeof t=="string"){let e=t.replace(/"/g,'\\"');return this.querySelector(`tree-item-ui[value="${e}"]`)||this.querySelector(`tree-item-ui[text="${e}"]`)||null}return null}expand(t){let e=this.#t(t);e&&e.hasChildren&&!e.open&&(e.open=!0)}collapse(t){let e=this.#t(t);e&&e.open&&(e.open=!1)}expandAll(){for(let t of this.querySelectorAll("tree-item-ui"))t.hasChildren&&!t.open&&(t.open=!0)}collapseAll(){for(let t of this.querySelectorAll("tree-item-ui"))t.open&&(t.open=!1)}expandTo(t){let e=this.#t(t);if(!e)return;let i=e.parentElement?.closest("tree-item-ui");for(;i;)i.hasChildren&&!i.open&&(i.open=!0),i=i.parentElement?.closest("tree-item-ui");e.querySelector(':scope > [slot="row"]')?.scrollIntoView?.({block:"nearest",inline:"nearest"})}#e=t=>{let e=t.target.closest("tree-item-ui");if(!e||!this.contains(e)||t.target.closest('[slot="actions"] *'))return;let i=e.querySelector(':scope > [slot="row"]');!i||!(t.target===i||i.contains(t.target))||(this.select(e,t),e.hasChildren&&(e.open=!e.open))};#i=t=>{let e=t.target.closest("tree-item-ui");if(e)switch(t.key){case"ArrowRight":if(t.preventDefault(),e.hasChildren&&!e.open)e.open=!0;else{let i=e.querySelector(":scope > tree-item-ui");i&&i.querySelector('[slot="row"]')?.focus()}break;case"ArrowLeft":if(t.preventDefault(),e.hasChildren&&e.open)e.open=!1;else{let i=e.parentElement?.closest("tree-item-ui");i&&i.querySelector(':scope > [slot="row"]')?.focus()}break;case"ArrowDown":{t.preventDefault();let i=this.#s(e);i&&i.querySelector(':scope > [slot="row"]')?.focus();break}case"ArrowUp":{t.preventDefault();let i=this.#n(e);i&&i.querySelector(':scope > [slot="row"]')?.focus();break}case"Enter":case" ":t.preventDefault(),this.select(e,t);break}};#s(t){if(t.open&&t.hasChildren)return t.querySelector(":scope > tree-item-ui");let e=t;for(;e;){let i=e.nextElementSibling;if(i&&i.matches("tree-item-ui"))return i;e=e.parentElement?.closest("tree-item-ui")}return null}#n(t){let e=t.previousElementSibling;if(e&&e.matches("tree-item-ui")){let n=e;for(;n.open&&n.hasChildren;){let r=n.querySelectorAll(":scope > tree-item-ui");n=r[r.length-1]}return n}return t.parentElement?.closest("tree-item-ui")||null}disconnected(){this.removeEventListener("click",this.#e),this.removeEventListener("keydown",this.#i)}},gn=class extends k{static properties={text:{type:String,default:"",reflect:!0},icon:{type:String,default:"",reflect:!0},value:{type:String,default:"",reflect:!0},open:{type:Boolean,default:!1,reflect:!0},selected:{type:Boolean,default:!1,reflect:!0},badge:{type:String,default:"",reflect:!0}};static template=()=>null;get hasChildren(){return this.querySelector(":scope > tree-item-ui")!==null}get depth(){let t=0,e=this.parentElement;for(;e;)e.matches("tree-item-ui")&&t++,e=e.parentElement;return t}connected(){this.setAttribute("role","group"),this.querySelector(':scope > [slot="row"]')||this.#t();let t=this.querySelector(':scope > [slot="row"]');t&&(t.setAttribute("role","treeitem"),t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"))}#t(){let t=document.createElement("div");t.setAttribute("slot","row"),t.setAttribute("tabindex","0");let e=this.querySelector(':scope > [slot="caret"]');if(e)t.appendChild(e);else{let o=document.createElement("icon-ui");o.setAttribute("slot","caret"),o.setAttribute("name","caret-right"),t.appendChild(o)}if(this.icon){let o=document.createElement("icon-ui");o.setAttribute("name",this.icon),o.setAttribute("slot","icon"),t.appendChild(o)}let i=document.createElement("span");i.setAttribute("slot","text"),i.textContent=this.text,t.appendChild(i);let n=document.createElement("span");n.setAttribute("slot","badge"),this.badge&&(n.textContent=this.badge),t.appendChild(n);let r=this.querySelectorAll(':scope > [slot="actions"]');if(r.length)for(let o of r)t.appendChild(o);else{let o=document.createElement("span");o.setAttribute("slot","actions"),t.appendChild(o)}this.prepend(t)}render(){let t=this.querySelector(':scope > [slot="row"]');if(!t)return;t.style.paddingInlineStart=`${this.depth*16+4}px`,this.hasChildren?t.setAttribute("aria-expanded",String(this.open)):t.removeAttribute("aria-expanded"),this.selected?t.setAttribute("aria-selected","true"):t.removeAttribute("aria-selected");let e=t.querySelector('[slot="text"]');e&&this.text&&(e.textContent=this.text);let i=t.querySelector('[slot="badge"]');i&&(i.textContent=this.badge||"")}};x("tree-ui",mn),x("tree-item-ui",gn);Q();var On=class extends k{static requiredIcons=["caret-right"];static properties={collapsed:{type:Boolean,default:!1,reflect:!0},resizable:{type:Boolean,default:!1,reflect:!0},minWidth:{type:Number,default:200,attribute:"min-width",reflect:!0},maxWidth:{type:Number,default:9999,attribute:"max-width",reflect:!0},side:{type:String,default:"",reflect:!0}};static template=()=>null;#t=null;#e=!1;#i=0;#s=0;#n=null;#r="";#a=!1;connected(){this.#a||(this.#a=!0,this.addEventListener("click",this.#o),this.addEventListener("keydown",this.#l)),this.resizable&&!this.querySelector('[slot="resize"]')&&(this.#t=document.createElement("div"),this.#t.setAttribute("slot","resize"),this.appendChild(this.#t)),(this.#t||this.resizable)&&(this.#t=this.#t||this.querySelector('[slot="resize"]'),this.#t?.addEventListener("pointerdown",this.#c))}render(){let t=this.querySelector(":scope > header");if(t&&(t.setAttribute("role","button"),t.setAttribute("tabindex","0"),t.setAttribute("aria-expanded",String(!this.collapsed)),!t.querySelector('[slot="caret"]'))){let e=document.createElement("icon-ui");e.setAttribute("slot","caret"),e.setAttribute("name","caret-right"),t.append(e)}}toggle(){this.collapsed=!this.collapsed,this.dispatchEvent(new Event("toggle",{bubbles:!0}))}#o=t=>{let e=this.querySelector(":scope > header");e&&(t.target===e||e.contains(t.target))&&this.toggle()};#l=t=>{t.target===this.querySelector(":scope > header")&&(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.toggle())};#c=t=>{if(t.isPrimary){t.preventDefault(),this.#e=!0,this.#i=t.clientX,this.#s=this.getBoundingClientRect().width,this.#n=t.pointerId,this.setAttribute("data-resizing","");try{this.#t.setPointerCapture(t.pointerId)}catch{}this.#t.addEventListener("pointermove",this.#h),this.#t.addEventListener("pointerup",this.#u,{once:!0}),this.#t.addEventListener("pointercancel",this.#u,{once:!0}),this.#r=document.documentElement.style.cursor,document.documentElement.style.cursor="col-resize"}};#h=t=>{if(!this.#e)return;let e=this.side==="trailing"?-1:1,i=(t.clientX-this.#i)*e,n=Math.max(this.minWidth,Math.min(this.maxWidth,this.#s+i));this.style.width=`${n}px`};#u=()=>{if(this.#e){this.#e=!1,this.removeAttribute("data-resizing");try{this.#t?.releasePointerCapture(this.#n)}catch{}this.#n=null,this.#t?.removeEventListener("pointermove",this.#h),document.documentElement.style.cursor=this.#r}};disconnected(){this.removeEventListener("click",this.#o),this.removeEventListener("keydown",this.#l),this.#t?.removeEventListener("pointerdown",this.#c),this.#t?.removeEventListener("pointermove",this.#h),this.#e&&(document.documentElement.style.cursor=this.#r),this.#a=!1}};x("pane-ui",On);Q();var bn=class extends k{static properties={scroll:{type:Boolean,default:!1,reflect:!0},maxWidth:{type:String,default:"",attribute:"max-width",reflect:!0},padding:{type:String,default:"",reflect:!0},stickyHeader:{type:Boolean,default:!1,attribute:"sticky-header",reflect:!0}};static template=()=>null;#t=null;#e=null;connected(){this.stickyHeader&&this.#i()}disconnected(){this.#s()}render(){this.stickyHeader&&!this.#t&&this.#i(),!this.stickyHeader&&this.#t&&this.#s()}#i(){let t=this.querySelector(":scope > :is(header, header-ui)");t&&(this.#t||(this.#t=document.createElement("div"),this.#t.setAttribute("data-page-sentinel",""),this.#t.style.cssText="height: 0; width: 0; pointer-events: none;",t.insertAdjacentElement("beforebegin",this.#t)),this.#e||(this.#e=new IntersectionObserver(e=>{this.toggleAttribute("data-header-stuck",!e[0].isIntersecting)},{threshold:0})),this.#e.observe(this.#t))}#s(){this.#e?.disconnect(),this.#e=null,this.#t?.remove(),this.#t=null,this.removeAttribute("data-header-stuck")}};x("page-ui",bn);Q();var ma=class extends k{static properties={disabled:{type:Boolean,default:!1,reflect:!0},loading:{type:Boolean,default:!1,reflect:!0},placeholder:{type:String,default:"Type a message...",reflect:!0},model:{type:String,default:"",reflect:!0}};static template=()=>null;#t=null;#e=null;#i=null;#s=null;#n=[];#r=[];#a=null;#o=null;#l=null;#c=()=>this.#o?.click();#h=()=>{this.#o?.files?.length&&this.#m(this.#o.files),this.#o&&(this.#o.value="")};get value(){return this.#t?.value?.trim()??""}get attachments(){return[...this.#r]}set models(t){this.#n=t||[],this.#i&&(this.#i.options=this.#n,this.model&&(this.#i.value=this.model))}get models(){return this.#n}connected(){this.querySelector('[slot="toolbar"]')||(this.innerHTML=`
+      `}this.#t=this.querySelector('[slot="field"]'),this.#e=this.querySelector('[data-layer="base"] [slot="value"]'),this.#t&&this.#t.addEventListener("pointerdown",this.#c),this.addEventListener("keydown",this.#d)}render(){if(!this.#t)return;let t=this.#r(this.value);this.#e&&(this.#e.textContent=t);let e=this.querySelector('[data-layer="fill"] [slot="value"]');e&&(e.textContent=t);let i=this.max-this.min,n=i>0?(this.value-this.min)/i*100:0;this.style.setProperty("--range-fill-pct",`${n}%`),this.setAttribute("aria-valuemin",this.min),this.setAttribute("aria-valuemax",this.max),this.setAttribute("aria-valuenow",this.value),this.setAttribute("aria-valuetext",`${this.value}${this.suffix?" "+this.suffix:""}`),this.setAttribute("aria-label",this.label||""),this.syncValue(String(this.value))}#r(t){let e=(String(this.step).split(".")[1]||"").length;return e>0?t.toFixed(e):String(t)}#a(t){let e=Math.round((t-this.min)/this.step)*this.step+this.min;return Math.max(this.min,Math.min(this.max,parseFloat(e.toFixed(10))))}#o(t){let e=this.#a(t);e!==this.value&&(this.value=e,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,detail:{value:this.value}})))}#l(t){let e=this.#t.getBoundingClientRect(),i=Math.max(0,Math.min(1,(t-e.left)/e.width));return this.#a(this.min+i*(this.max-this.min))}#c=t=>{this.disabled||(t.preventDefault(),this.#o(this.#l(t.clientX)),this.#i=!0,this.#s=t.clientX,this.#n=this.value,this.setAttribute("data-dragging",""),this.#t.setPointerCapture(t.pointerId),this.#t.addEventListener("pointermove",this.#h),this.#t.addEventListener("pointerup",this.#u))};#h=t=>{if(!this.#i)return;let e=t.clientX-this.#s,i=this.#t.getBoundingClientRect().width,n=this.max-this.min,r=e/i*n;this.#o(this.#n+r)};#u=t=>{this.#i=!1,this.removeAttribute("data-dragging"),this.#t.releasePointerCapture(t.pointerId),this.#t.removeEventListener("pointermove",this.#h),this.#t.removeEventListener("pointerup",this.#u),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}))};#d=t=>{if(this.disabled)return;let e=this.value;switch(t.key){case"ArrowRight":case"ArrowUp":e+=this.step;break;case"ArrowLeft":case"ArrowDown":e-=this.step;break;case"Home":e=this.min;break;case"End":e=this.max;break;case"PageUp":e+=this.step*10;break;case"PageDown":e-=this.step*10;break;default:return}t.preventDefault(),this.#o(e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}))};disconnected(){super.disconnected(),this.#t?.removeEventListener("pointerdown",this.#c),this.#t?.removeEventListener("pointermove",this.#h),this.#t?.removeEventListener("pointerup",this.#u),this.removeEventListener("keydown",this.#d),this.#t=null,this.#e=null}};x("range-ui",pn);Q();var mn=class extends k{static requiredIcons=["caret-right"];static template=()=>null;connected(){this.setAttribute("role","tree"),this.addEventListener("click",this.#e),this.addEventListener("keydown",this.#i)}get selectedItem(){return this.querySelector("tree-item-ui[selected]")}select(t,e=null){let i=this.selectedItem;i&&i!==t&&i.removeAttribute("selected"),t.setAttribute("selected",""),this.dispatchEvent(new CustomEvent("tree-select",{bubbles:!0,detail:{item:t,text:t.text,value:t.value,ctrlKey:!!e?.ctrlKey,metaKey:!!e?.metaKey,shiftKey:!!e?.shiftKey}}))}#t(t){if(!t)return null;if(t instanceof Element)return t.matches?.("tree-item-ui")?t:null;if(typeof t=="string"){let e=t.replace(/"/g,'\\"');return this.querySelector(`tree-item-ui[value="${e}"]`)||this.querySelector(`tree-item-ui[text="${e}"]`)||null}return null}expand(t){let e=this.#t(t);e&&e.hasChildren&&!e.open&&(e.open=!0)}collapse(t){let e=this.#t(t);e&&e.open&&(e.open=!1)}expandAll(){for(let t of this.querySelectorAll("tree-item-ui"))t.hasChildren&&!t.open&&(t.open=!0)}collapseAll(){for(let t of this.querySelectorAll("tree-item-ui"))t.open&&(t.open=!1)}expandTo(t){let e=this.#t(t);if(!e)return;let i=e.parentElement?.closest("tree-item-ui");for(;i;)i.hasChildren&&!i.open&&(i.open=!0),i=i.parentElement?.closest("tree-item-ui");e.querySelector(':scope > [slot="row"]')?.scrollIntoView?.({block:"nearest",inline:"nearest"})}#e=t=>{let e=t.target.closest("tree-item-ui");if(!e||!this.contains(e)||t.target.closest('[slot="actions"] *'))return;let i=e.querySelector(':scope > [slot="row"]');!i||!(t.target===i||i.contains(t.target))||(this.select(e,t),e.hasChildren&&(e.open=!e.open))};#i=t=>{let e=t.target.closest("tree-item-ui");if(e)switch(t.key){case"ArrowRight":if(t.preventDefault(),e.hasChildren&&!e.open)e.open=!0;else{let i=e.querySelector(":scope > tree-item-ui");i&&i.querySelector('[slot="row"]')?.focus()}break;case"ArrowLeft":if(t.preventDefault(),e.hasChildren&&e.open)e.open=!1;else{let i=e.parentElement?.closest("tree-item-ui");i&&i.querySelector(':scope > [slot="row"]')?.focus()}break;case"ArrowDown":{t.preventDefault();let i=this.#s(e);i&&i.querySelector(':scope > [slot="row"]')?.focus();break}case"ArrowUp":{t.preventDefault();let i=this.#n(e);i&&i.querySelector(':scope > [slot="row"]')?.focus();break}case"Enter":case" ":t.preventDefault(),this.select(e,t);break}};#s(t){if(t.open&&t.hasChildren)return t.querySelector(":scope > tree-item-ui");let e=t;for(;e;){let i=e.nextElementSibling;if(i&&i.matches("tree-item-ui"))return i;e=e.parentElement?.closest("tree-item-ui")}return null}#n(t){let e=t.previousElementSibling;if(e&&e.matches("tree-item-ui")){let n=e;for(;n.open&&n.hasChildren;){let r=n.querySelectorAll(":scope > tree-item-ui");n=r[r.length-1]}return n}return t.parentElement?.closest("tree-item-ui")||null}disconnected(){this.removeEventListener("click",this.#e),this.removeEventListener("keydown",this.#i)}},gn=class extends k{static properties={text:{type:String,default:"",reflect:!0},icon:{type:String,default:"",reflect:!0},value:{type:String,default:"",reflect:!0},open:{type:Boolean,default:!1,reflect:!0},selected:{type:Boolean,default:!1,reflect:!0},badge:{type:String,default:"",reflect:!0}};static template=()=>null;#t=null;#e=!1;get hasChildren(){return this.querySelector(":scope > tree-item-ui")!==null}get depth(){let t=0,e=this.parentElement;for(;e;)e.matches("tree-item-ui")&&t++,e=e.parentElement;return t}connected(){this.setAttribute("role","group"),this.querySelector(':scope > [slot="row"]')||this.#i();let t=this.querySelector(':scope > [slot="row"]');t&&(t.setAttribute("role","treeitem"),t.hasAttribute("tabindex")||t.setAttribute("tabindex","0")),this.#n(),this.#t=new MutationObserver(()=>this.#n()),this.#t.observe(this,{childList:!0,subtree:!0})}#i(){let t=document.createElement("div");t.setAttribute("slot","row"),t.setAttribute("tabindex","0");let e=this.#s("caret")[0];if(e)t.appendChild(e);else{let o=document.createElement("icon-ui");o.setAttribute("slot","caret"),o.setAttribute("name","caret-right"),o.dataset.treeCaretDefault="1",t.appendChild(o)}if(this.icon){let o=document.createElement("icon-ui");o.setAttribute("name",this.icon),o.setAttribute("slot","icon"),t.appendChild(o)}let i=document.createElement("span");i.setAttribute("slot","text"),i.textContent=this.text,t.appendChild(i);let n=document.createElement("span");n.setAttribute("slot","badge"),this.badge&&(n.textContent=this.badge),t.appendChild(n);let r=document.createElement("span");r.setAttribute("slot","actions"),r.dataset.treeActionsPlaceholder="1",t.appendChild(r),this.prepend(t)}render(){let t=this.querySelector(':scope > [slot="row"]');if(!t)return;t.style.paddingInlineStart=`${this.depth*16+4}px`,this.hasChildren?t.setAttribute("aria-expanded",String(this.open)):t.removeAttribute("aria-expanded"),this.selected?t.setAttribute("aria-selected","true"):t.removeAttribute("aria-selected");let e=t.querySelector('[slot="text"]');e&&this.text&&(e.textContent=this.text);let i=t.querySelector('[slot="badge"]');i&&(i.textContent=this.badge||"")}#s(t){let e=[],i=n=>{for(let r of n.children)if(!r.matches("tree-item-ui")){if(r.getAttribute("slot")===t){e.push(r);continue}(r.matches('[role="presentation"]')||r.style?.display==="contents")&&i(r)}};return i(this),e}#n(){if(this.#e)return;let t=this.querySelector(':scope > [slot="row"]');if(t){this.#e=!0;try{let e=this.#s("actions").filter(n=>!n.dataset.treeActionsPlaceholder&&n.parentElement!==t);if(e.length){t.querySelector(':scope > [slot="actions"][data-tree-actions-placeholder]')?.remove();for(let n of e)t.appendChild(n)}let i=this.#s("caret").find(n=>!n.dataset.treeCaretDefault&&n.parentElement!==t);i&&(t.querySelector(':scope > [slot="caret"][data-tree-caret-default]')?.remove(),t.prepend(i))}finally{this.#t?.takeRecords(),this.#e=!1}}}disconnected(){this.#t?.disconnect(),this.#t=null}};x("tree-ui",mn),x("tree-item-ui",gn);Q();var On=class extends k{static requiredIcons=["caret-right"];static properties={collapsed:{type:Boolean,default:!1,reflect:!0},resizable:{type:Boolean,default:!1,reflect:!0},minWidth:{type:Number,default:200,attribute:"min-width",reflect:!0},maxWidth:{type:Number,default:9999,attribute:"max-width",reflect:!0},side:{type:String,default:"",reflect:!0}};static template=()=>null;#t=null;#e=!1;#i=0;#s=0;#n=null;#r="";#a=!1;connected(){this.#a||(this.#a=!0,this.addEventListener("click",this.#o),this.addEventListener("keydown",this.#l)),this.resizable&&!this.querySelector('[slot="resize"]')&&(this.#t=document.createElement("div"),this.#t.setAttribute("slot","resize"),this.appendChild(this.#t)),(this.#t||this.resizable)&&(this.#t=this.#t||this.querySelector('[slot="resize"]'),this.#t?.addEventListener("pointerdown",this.#c))}render(){let t=this.querySelector(":scope > header");if(t&&(t.setAttribute("role","button"),t.setAttribute("tabindex","0"),t.setAttribute("aria-expanded",String(!this.collapsed)),!t.querySelector('[slot="caret"]'))){let e=document.createElement("icon-ui");e.setAttribute("slot","caret"),e.setAttribute("name","caret-right"),t.append(e)}}toggle(){this.collapsed=!this.collapsed,this.dispatchEvent(new Event("toggle",{bubbles:!0}))}#o=t=>{let e=this.querySelector(":scope > header");e&&(t.target===e||e.contains(t.target))&&this.toggle()};#l=t=>{t.target===this.querySelector(":scope > header")&&(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this.toggle())};#c=t=>{if(t.isPrimary){t.preventDefault(),this.#e=!0,this.#i=t.clientX,this.#s=this.getBoundingClientRect().width,this.#n=t.pointerId,this.setAttribute("data-resizing","");try{this.#t.setPointerCapture(t.pointerId)}catch{}this.#t.addEventListener("pointermove",this.#h),this.#t.addEventListener("pointerup",this.#u,{once:!0}),this.#t.addEventListener("pointercancel",this.#u,{once:!0}),this.#r=document.documentElement.style.cursor,document.documentElement.style.cursor="col-resize"}};#h=t=>{if(!this.#e)return;let e=this.side==="trailing"?-1:1,i=(t.clientX-this.#i)*e,n=Math.max(this.minWidth,Math.min(this.maxWidth,this.#s+i));this.style.width=`${n}px`};#u=()=>{if(this.#e){this.#e=!1,this.removeAttribute("data-resizing");try{this.#t?.releasePointerCapture(this.#n)}catch{}this.#n=null,this.#t?.removeEventListener("pointermove",this.#h),document.documentElement.style.cursor=this.#r}};disconnected(){this.removeEventListener("click",this.#o),this.removeEventListener("keydown",this.#l),this.#t?.removeEventListener("pointerdown",this.#c),this.#t?.removeEventListener("pointermove",this.#h),this.#e&&(document.documentElement.style.cursor=this.#r),this.#a=!1}};x("pane-ui",On);Q();var bn=class extends k{static properties={scroll:{type:Boolean,default:!1,reflect:!0},maxWidth:{type:String,default:"",attribute:"max-width",reflect:!0},padding:{type:String,default:"",reflect:!0},stickyHeader:{type:Boolean,default:!1,attribute:"sticky-header",reflect:!0}};static template=()=>null;#t=null;#e=null;connected(){this.stickyHeader&&this.#i()}disconnected(){this.#s()}render(){this.stickyHeader&&!this.#t&&this.#i(),!this.stickyHeader&&this.#t&&this.#s()}#i(){let t=this.querySelector(":scope > :is(header, header-ui)");t&&(this.#t||(this.#t=document.createElement("div"),this.#t.setAttribute("data-page-sentinel",""),this.#t.style.cssText="height: 0; width: 0; pointer-events: none;",t.insertAdjacentElement("beforebegin",this.#t)),this.#e||(this.#e=new IntersectionObserver(e=>{this.toggleAttribute("data-header-stuck",!e[0].isIntersecting)},{threshold:0})),this.#e.observe(this.#t))}#s(){this.#e?.disconnect(),this.#e=null,this.#t?.remove(),this.#t=null,this.removeAttribute("data-header-stuck")}};x("page-ui",bn);Q();var ma=class extends k{static properties={disabled:{type:Boolean,default:!1,reflect:!0},loading:{type:Boolean,default:!1,reflect:!0},placeholder:{type:String,default:"Type a message...",reflect:!0},model:{type:String,default:"",reflect:!0}};static template=()=>null;#t=null;#e=null;#i=null;#s=null;#n=[];#r=[];#a=null;#o=null;#l=null;#c=()=>this.#o?.click();#h=()=>{this.#o?.files?.length&&this.#m(this.#o.files),this.#o&&(this.#o.value="")};get value(){return this.#t?.value?.trim()??""}get attachments(){return[...this.#r]}set models(t){this.#n=t||[],this.#i&&(this.#i.options=this.#n,this.model&&(this.#i.value=this.model))}get models(){return this.#n}connected(){this.querySelector('[slot="toolbar"]')||(this.innerHTML=`
         <textarea-ui placeholder="${this.placeholder}" rows="1"></textarea-ui>
         <div slot="toolbar">
           <select-ui slot="model" placeholder="Model" aria-label="Select model" divider></select-ui>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",

package/styles/api/sizing.css

@@ -117,54 +117,90 @@
   --a-code-size: var(--a-code-lg);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   [gap] — the EXPLICIT per-element gap (a spatial Scale attr).
+
+   Sets --a-gap-self, a NON-inheriting token, so an explicit gap on a
+   parent does NOT leak into nested layout primitives. This is the
+   counterpart to --a-gap, the AMBIENT gap set by [size]/[prose]/:root
+   (which DOES inherit — `<div size="sm">` shifts the whole subtree).
+   Gap-reading components resolve `var(--a-gap-self, var(--a-gap))`:
+   explicit-if-present, else fall through to the inherited ambient.
+   Design: docs/specs/attribute-api-system.md §5.2 (ADR-0038 / D2).
+
+   syntax:"*" (NOT "<length>") is load-bearing: a universal-syntax
+   @property may omit initial-value, leaving the token genuinely
+   *unset-able* (guaranteed-invalid when not set) — so the fallback to
+   --a-gap fires for elements without [gap]. A typed @property carries a
+   mandatory initial-value that always-resolves and would mask the
+   ambient. inherits:false stops the leak (audit C3).
+   ═══════════════════════════════════════════════════════════════ */
+@property --a-gap-self {
+  syntax: "*";
+  inherits: false;
+}
+
 [gap="0"] {
-  --a-gap: 0;
+  --a-gap-self: 0;
 }
 [gap="1"] {
-  --a-gap: var(--a-space-1);
+  --a-gap-self: var(--a-space-1);
 }
 [gap="2"] {
-  --a-gap: var(--a-space-2);
+  --a-gap-self: var(--a-space-2);
 }
 [gap="3"] {
-  --a-gap: var(--a-space-3);
+  --a-gap-self: var(--a-space-3);
 }
 [gap="4"] {
-  --a-gap: var(--a-space-4);
+  --a-gap-self: var(--a-space-4);
 }
 [gap="5"] {
-  --a-gap: var(--a-space-5);
+  --a-gap-self: var(--a-space-5);
 }
 [gap="6"] {
-  --a-gap: var(--a-space-6);
+  --a-gap-self: var(--a-space-6);
 }
 [gap="7"] {
-  --a-gap: var(--a-space-7);
+  --a-gap-self: var(--a-space-7);
 }
 [gap="8"] {
-  --a-gap: var(--a-space-8);
+  --a-gap-self: var(--a-space-8);
 }
 [gap="9"] {
-  --a-gap: var(--a-space-9);
+  --a-gap-self: var(--a-space-9);
 }
 [gap="10"] {
-  --a-gap: var(--a-space-10);
+  --a-gap-self: var(--a-space-10);
 }
 [gap="12"] {
-  --a-gap: var(--a-space-12);
+  --a-gap-self: var(--a-space-12);
 }
 [gap="16"] {
-  --a-gap: var(--a-space-16);
+  --a-gap-self: var(--a-space-16);
 }
 
+/* Named scale — the semantic, parametric gap vocabulary (xs/sm/md/lg/xl).
+   References the --a-gap-* tokens (foundation/space.css) so explicit
+   [gap="md"] AGREES with the ambient ([size]) and responsive (JS _gapToCss)
+   paths — all resolve to --a-gap-md — and tracks the --a-gap-k knob. This is
+   distinct from the integer rules above, which are LITERAL space-rungs
+   (k-independent). At k=1 the two grammars coincide: xs=1, sm=2, md=3,
+   lg=4, xl=5. (C1/C2 resolution — two coherent grammars, not one deprecated.) */
+[gap="xs"] {
+  --a-gap-self: var(--a-gap-xs);
+}
 [gap="sm"] {
-  --a-gap: var(--a-space-4);
+  --a-gap-self: var(--a-gap-sm);
 }
 [gap="md"] {
-  --a-gap: var(--a-space-6);
+  --a-gap-self: var(--a-gap-md);
 }
 [gap="lg"] {
-  --a-gap: var(--a-space-8);
+  --a-gap-self: var(--a-gap-lg);
+}
+[gap="xl"] {
+  --a-gap-self: var(--a-gap-xl);
 }
 
 /* ── Universal [padding] / [margin] — same scale as [gap]. Layout

package/styles/foundation/space.css

@@ -11,6 +11,16 @@
   initial-value: 1;
 }
 
+/* Gap-scale knob — scales the k-driven half of every named gap
+   (--a-gap-{xs,sm,md,lg,xl}). k=1 (default) = baseline scale; <1 tightens
+   toward the floor, >1 loosens. Inherits, so set it at a provider boundary
+   (e.g. style="--a-gap-k:1.5") to retune all named gaps in a subtree. */
+@property --a-gap-k {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 1;
+}
+
 :root {
   /* ── Spacing ── */
   --a-space-0: 0;
@@ -39,9 +49,15 @@
   --a-inset-lg: var(--a-space-6);
   --a-inset: var(--a-inset-md);
 
-  /* ── Gaps ── */
-  --a-gap-sm: var(--a-space-2);
-  --a-gap-md: var(--a-space-3);
-  --a-gap-lg: var(--a-space-4);
+  /* ── Gaps — parametric named scale (half + half·k). Each token is a
+     fixed floor (half its k=1 value) plus a k-scaled half, so --a-gap-k
+     loosens/tightens the whole named scale while never collapsing below the
+     floor. At k=1: 4 / 8 / 12 / 16 / 20px. Composes on top of --a-density
+     (baked into --a-space-*). See styles/api/sizing.css + spec §5.2. ── */
+  --a-gap-xs: calc(var(--a-space-0-5) + var(--a-space-0-5) * var(--a-gap-k)); /*  4px @k=1 */
+  --a-gap-sm: calc(var(--a-space-1)   + var(--a-space-1)   * var(--a-gap-k)); /*  8px @k=1 */
+  --a-gap-md: calc(var(--a-space-1-5) + var(--a-space-1-5) * var(--a-gap-k)); /* 12px @k=1 */
+  --a-gap-lg: calc(var(--a-space-2)   + var(--a-space-2)   * var(--a-gap-k)); /* 16px @k=1 */
+  --a-gap-xl: calc(var(--a-space-2-5) + var(--a-space-2-5) * var(--a-gap-k)); /* 20px @k=1 */
   --a-gap: var(--a-gap-md);
 }

package/styles/prose.css

@@ -29,10 +29,13 @@
   --a-inset-lg:    var(--a-space-10);
   --a-inset:       var(--a-inset-md);
 
-  /* ── Gaps — shifted up the space scale ── */
-  --a-gap-sm:      var(--a-space-3);
-  --a-gap-md:      var(--a-space-4);
-  --a-gap-lg:      var(--a-space-5);
+  /* ── Gaps — prose register, one rung up; same parametric (half + half·k)
+     form as foundation, tracking --a-gap-k. At k=1: 8/12/16/20/24px. ── */
+  --a-gap-xs:      calc(var(--a-space-1)   + var(--a-space-1)   * var(--a-gap-k)); /*  8px @k=1 */
+  --a-gap-sm:      calc(var(--a-space-1-5) + var(--a-space-1-5) * var(--a-gap-k)); /* 12px @k=1 */
+  --a-gap-md:      calc(var(--a-space-2)   + var(--a-space-2)   * var(--a-gap-k)); /* 16px @k=1 */
+  --a-gap-lg:      calc(var(--a-space-2-5) + var(--a-space-2-5) * var(--a-gap-k)); /* 20px @k=1 */
+  --a-gap-xl:      calc(var(--a-space-3)   + var(--a-space-3)   * var(--a-gap-k)); /* 24px @k=1 */
   --a-gap:         var(--a-gap-md);
 
   /* ── Sizing — larger controls ── */