@ixfx/components 0.14.1 → 0.14.2

package/bundle/index.d.ts

@@ -10131,6 +10131,7 @@ type MulticolCategoryDefaults = {
   groupBy?: (item: MulticolItem) => string;
   allLabel?: string;
   sort?: SortDirection;
+  menu?: boolean;
 };
 type MulticolCategory = {
   readonly key: string;
@@ -10145,6 +10146,7 @@ type MulticolColumnState = {
   readonly categoryKey: string;
   readonly sort: SortDirection;
   readonly grouped: boolean;
+  readonly menu: boolean;
   readonly width?: number;
 };
 type MulticolColumnsChangeReason = `add` | `remove` | `reorder` | `category` | `sort` | `grouping` | `resize`;

package/bundle/index.js

@@ -6804,6 +6804,8 @@ const je={216:`O`,223:`s`,248:`o`,273:`d`,295:`h`,305:`i`,320:`l`,322:`l`,359:`t
       box-sizing: border-box;
       outline: none;
       --ixfx-list-item-padding: var(--ixfx-list-item-padding, var(--list-item-padding, 4px var(--space-m, 8px)));
+      --_item-padding:
+        var(--ixfx-list-item-padding, var(--list-item-padding, 0 var(--space-xs, 3px)));
     }
 
     :host(:focus-visible) {
@@ -6840,7 +6842,7 @@ const je={216:`O`,223:`s`,248:`o`,273:`d`,295:`h`,305:`i`,320:`l`,322:`l`,359:`t
     ::slotted(li) {
       display: flex;
       align-items: center;
-      padding: var(--ixfx-list-item-padding);
+      padding: var(--_item-padding);
       /* Inset each row from the scroll container's edges (margin, not padding:
          padding is inside the border box, so the tickle/selection outlines
          would still sit flush against the edge and be clipped). */
@@ -6962,6 +6964,7 @@ const je={216:`O`,223:`s`,248:`o`,273:`d`,295:`h`,305:`i`,320:`l`,322:`l`,359:`t
       background: transparent;
       color: inherit;
       outline: 1px solid transparent;
+      padding: var(--space-s);
     }
 
     :host([interaction-mode="checked"]) ::slotted([data-selected][data-tickled]) {
@@ -7759,7 +7762,7 @@ const je={216:`O`,223:`s`,248:`o`,273:`d`,295:`h`,305:`i`,320:`l`,322:`l`,359:`t
         ${r?i`<ixfx-icon class="caret-icon" name="chevron-down" .rotate=${o?a:`-90deg`}></ixfx-icon>`:``}
       </span>
       <span class="tree-label">${e.item.label}</span>
-    `}_handleItemClick(e,n,r){if(!(this.#J?.isDragging||this.#Y?.isDragging||this.#K!==void 0)&&!(r&&r.detail>=2)){switch(this.#j&&this._expandedKeys.has(this.#j.item.key)&&this.#tt(),this.tickled.handlePointerEnter(e.item.key),this._focusedDepth=n,this.dispatchEvent(new CustomEvent(`item-click`,{detail:{node:e,depth:n},bubbles:!0,composed:!0})),this.interactionMode){case`implicit`:this.#Ve(e,n,r);break;case`standard`:this.#He(e,n,r);break;case`vscode`:this.#He(e,n,r);break;case`manual`:this.#We(e,n,r);break;case`checked`:this.#Ue(e,n)}this.requestUpdate()}}#Be(e,n){if(e.item.isLeaf===!0)return!1;let r=n?.target;return r instanceof Element&&r.closest(`.tree-caret`)!==null}#Ve(e,n,r){if(!this.#Be(e,r)&&this.#Pe(e)){let n=new Set(this._selectedNodes);this._selectedNodes.clear(),this._selectedNodes.add(e),this.selectedNode=e,(!n.has(e)||n.size!==1)&&this.#Re(n)}this.#Ke(e,n)}#He(e,n,r){let i=r?r.metaKey||r.ctrlKey:!1,a=r?r.shiftKey:!1;if(i){if(this.#Pe(e)){let n=new Set(this._selectedNodes);this._selectedNodes.has(e)?(this._selectedNodes.delete(e),this.selectedNode===e&&(this.selectedNode=[...this._selectedNodes].at(-1))):(this._selectedNodes.add(e),this.selectedNode=e,this.#P={node:e,flatIndex:this.#Ye(e)}),this.#Re(n)}return}if(a&&this.#P){let n=this.#s(),r=n.rows,i=n.indexByKey.get(this.#P.node.item.key)??-1,a=n.indexByKey.get(e.item.key)??-1;if(i>=0&&a>=0){let n=new Set(this._selectedNodes),o=Math.min(i,a),s=Math.max(i,a),c=r.slice(o,s+1).map(e=>e.node).filter(e=>this.#Pe(e));this._selectedNodes=new Set(c),this.selectedNode=e,this.#Re(n)}return}if(!this.#Be(e,r)&&this.#Pe(e)){let n=new Set(this._selectedNodes);this._selectedNodes.clear(),this._selectedNodes.add(e),this.selectedNode=e,this.#P={node:e,flatIndex:this.#Ye(e)},(!n.has(e)||n.size!==1)&&this.#Re(n)}this.#Ke(e,n)}#Ue(e,n){this.#Ke(e,n)}#We(e,n,r){let i=r?r.metaKey||r.ctrlKey:!1,a=r?r.shiftKey:!1;if(i){if(this.#Pe(e)){let n=new Set(this._selectedNodes);this._selectedNodes.has(e)?(this._selectedNodes.delete(e),this.selectedNode===e&&(this.selectedNode=[...this._selectedNodes].at(-1))):(this._selectedNodes.add(e),this.selectedNode=e,this.#P={node:e,flatIndex:this.#Ye(e)}),this.#Re(n)}return}if(a&&this.#P){let n=this.#s(),r=n.rows,i=n.indexByKey.get(this.#P.node.item.key)??-1,a=n.indexByKey.get(e.item.key)??-1;if(i>=0&&a>=0){let n=new Set(this._selectedNodes),o=Math.min(i,a),s=Math.max(i,a),c=r.slice(o,s+1).map(e=>e.node).filter(e=>this.#Pe(e));this._selectedNodes=new Set(c),this.selectedNode=e,this.#Re(n)}return}this.#Ke(e,n)}#Ge(e,n){if(!this.#Pe(e))return;let r=new Set(this._selectedNodes);this._selectedNodes.has(e)?(this._selectedNodes.delete(e),this.selectedNode===e&&(this.selectedNode=[...this._selectedNodes].at(-1))):(this._selectedNodes.add(e),this.selectedNode=e,this.#P={node:e,flatIndex:this.#Ye(e)}),this.#Re(r)}_handleCheckboxClick(e,n,r){e.stopPropagation();let i=new Set(this._selectedNodes),a=this.#qe(n);this.#Je(n,!a),(this.selectedNode===void 0||!this._selectedNodes.has(this.selectedNode))&&(this.selectedNode=[...this._selectedNodes].at(-1)),this.#Re(i),this.requestUpdate()}#Ke(e,n){let r=this._expandedKeys.has(e.item.key);if(this.#ue=!0,r)this.#e(Eb(this._expandedKeys,e.item.key)),this.dispatchEvent(new CustomEvent(`collapse`,{detail:{node:e,depth:n},bubbles:!0,composed:!0}));else if(e.children===void 0){if(e.item.isLeaf!==!1)return;if(this.model??(this.loadChildren?this:void 0)){this.#j=e;let r=new AbortController;this.#M=r,this.#Ze(e,n,r).catch(()=>{})}}else this.#nt(e.item.key),this.#e(Tb(this._expandedKeys,e.item.key)),this.dispatchEvent(new CustomEvent(`expand`,{detail:{node:e,depth:n},bubbles:!0,composed:!0}))}#qe(e){let n=[],r=e=>{this.#Pe(e)&&n.push(e),e.children?.forEach(r)};return r(e),n.length>0&&n.every(e=>this._selectedNodes.has(e))}#Je(e,n){if(this.#Pe(e)&&(n?this._selectedNodes.add(e):this._selectedNodes.delete(e)),e.children)for(let r of e.children)this.#Je(r,n)}#Ye(e){return this.#s().indexByKey.get(e.item.key)??-1}#Xe(e,n,r){if(!this.#P){let r=e[n]?.node;r&&(this.#P={node:r,flatIndex:n})}if(!this.#P)return;let i=this.#s().indexByKey.get(this.#P.node.item.key)??-1;if(i<0)return;let a=Math.min(i,r),o=Math.max(i,r);if(this.interactionMode===`vscode`){this.#P.selectionSnapshot||(this.#P={...this.#P,selectionSnapshot:new Set(this._selectedNodes)});let n=this.#P.selectionSnapshot,i=e.slice(a,o+1).map(e=>e.node).filter(e=>this.#Pe(e)),s=new Set(n);for(let e of i)n.has(e)?s.delete(e):s.add(e);let c=new Set(this._selectedNodes);this._selectedNodes=s,this.selectedNode=e[r]?.node??this.selectedNode,this.#Re(c)}else{let n=new Set(this._selectedNodes),i=e.slice(a,o+1).map(e=>e.node).filter(e=>this.#Pe(e));this._selectedNodes=new Set(i),this.selectedNode=e[r]?.node??this.selectedNode,this.#Re(n)}}async#Ze(e,n,r){try{let i;if(i=this.model?await this.model.getChildren(e,n,r.signal):[...await dg(this.loadChildren({node:e,depth:n},r.signal),r.signal)],r.signal.aborted)return;e.children=i,this.#i++,this.#nt(e.item.key),this.#e(Tb(this._expandedKeys,e.item.key)),this.#t=void 0,this.#ue=!0,this.#j=void 0,this.#M=void 0,this.dispatchEvent(new CustomEvent(`expand`,{detail:{node:e,depth:n},bubbles:!0,composed:!0})),this.requestUpdate()}catch{if(r.signal.aborted)return;e.children=[],this.#i++,this.#t=void 0,this.#j=void 0,this.#M=void 0,this.requestUpdate()}}_isSelected(e){return this._selectedNodes.has(e)}_isFocused(e){return this.tickled.isTickled(e.item.key)}_isExpanded(e,n=0){return this._expandedKeys.has(e.item.key)?!0:this.#D()?.autoExpanded.has(e.item.key)??!1}get _pendingNode(){return this.#j}#Qe(e,n=`edge`){if(n===`center-if-hidden`){this.updateComplete.then(()=>{this.#y();let r=this.#s().indexByKey.get(e);r!==void 0&&this.#E(r,n)});return}if(this.#_()){this.updateComplete.then(()=>{let n=this.#s().indexByKey.get(e);n!==void 0&&this.#E(n)});return}let r=++this.#$e;requestAnimationFrame(()=>{this.#et(e);let n=this.#be()?.getAnimations?.({subtree:!0})??[];n.length>0&&Promise.allSettled(n.map(e=>e.finished)).then(()=>{r===this.#$e&&this.#et(e)})})}#$e;#et(e){let n=this.#be(),r=this.shadowRoot?.querySelector(`ul.tree-list [data-key="${CSS.escape(e)}"]`);if(!r||!n)return;let i=r.getBoundingClientRect(),a=n.getBoundingClientRect(),o=i.top-a.top,s=o+i.height,c=this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height??0;o<c?n.scrollTop+=o-c:s>n.clientHeight&&(n.scrollTop+=s-n.clientHeight)}#tt(){this.#M&&(this.#M.abort(),this.#M=void 0,this.#j=void 0)}#nt(e){if(this.exclusivity!==`none`){if(this.exclusivity===`depth`)this.#rt(e);else if(this.exclusivity===`global`){let n=this.#it(e);this.#e(Db(this._expandedKeys,r=>!n.has(r)&&r!==e))}}}#rt(e){if(!this.root)return;let n=this.#at(this.root,e);if(!n?.children)return;let r=new Set(n.children.map(e=>e.item.key));this.#e(Db(this._expandedKeys,n=>n!==e&&r.has(n)))}#it(e){let n=new Set,r=i=>{if(i.item.key===e)return!0;if(!i.children)return!1;for(let e of i.children)if(r(e))return n.add(i.item.key),!0;return!1};return this.root&&r(this.root),n}#at(e,n,r=void 0){if(e.children)for(let i of e.children){if(i.item.key===n)return r??e;let a=this.#at(i,n,i);if(a)return a}}#ot(){let e=this.tickled.tickledId;return e?this.#s().indexByKey.get(e)??0:0}#st(e){let n=this.#s().rows;if(e<0||e>=n.length)return;let{node:r,depth:i}=n[e];if(this.tickled.setTickled(r.item.key),this._focusedDepth=i,this.dispatchEvent(new CustomEvent(`tickle`,{detail:{node:r,depth:i},bubbles:!0,composed:!0})),this.requestUpdate(),this.#_()){this.#E(e);return}this.updateComplete.then(()=>this.#ct())}#ct(){let e=this.tickled.tickledId;e!==void 0&&(this.shadowRoot?.querySelector(`ul.tree-list [data-key="${CSS.escape(e)}"]`))?.scrollIntoView({block:`nearest`,behavior:`smooth`})}#lt(){return this.#y(),Pb(this.#v(this.#s().rows.length))}#ut(e,n,r,i){this.interactionMode===`implicit`&&this.select(e[r].node),this.#st(r),i&&(this.interactionMode===`standard`||this.interactionMode===`vscode`)?this.#Xe(e,n,r):this.interactionMode===`vscode`&&(this.#P=void 0),this.requestUpdate()}#dt;renderLoadingIndicator(){return i`<span class="loading-spinner"></span>`}render(){let e=this.#s().rows;return i`
+    `}_handleItemClick(e,n,r){if(!(this.#J?.isDragging||this.#Y?.isDragging||this.#K!==void 0)&&!(r&&r.detail>=2)){if(this.interactionMode===`checked`&&r&&!(r.target instanceof Element&&r.target.closest(`.tree-label`))){this._handleCheckboxClick(r,e,n);return}switch(this.#j&&this._expandedKeys.has(this.#j.item.key)&&this.#tt(),this.tickled.handlePointerEnter(e.item.key),this._focusedDepth=n,this.dispatchEvent(new CustomEvent(`item-click`,{detail:{node:e,depth:n},bubbles:!0,composed:!0})),this.interactionMode){case`implicit`:this.#Ve(e,n,r);break;case`standard`:this.#He(e,n,r);break;case`vscode`:this.#He(e,n,r);break;case`manual`:this.#We(e,n,r);break;case`checked`:this.#Ue(e,n)}this.requestUpdate()}}#Be(e,n){if(e.item.isLeaf===!0)return!1;let r=n?.target;return r instanceof Element&&r.closest(`.tree-caret`)!==null}#Ve(e,n,r){if(!this.#Be(e,r)&&this.#Pe(e)){let n=new Set(this._selectedNodes);this._selectedNodes.clear(),this._selectedNodes.add(e),this.selectedNode=e,(!n.has(e)||n.size!==1)&&this.#Re(n)}this.#Ke(e,n)}#He(e,n,r){let i=r?r.metaKey||r.ctrlKey:!1,a=r?r.shiftKey:!1;if(i){if(this.#Pe(e)){let n=new Set(this._selectedNodes);this._selectedNodes.has(e)?(this._selectedNodes.delete(e),this.selectedNode===e&&(this.selectedNode=[...this._selectedNodes].at(-1))):(this._selectedNodes.add(e),this.selectedNode=e,this.#P={node:e,flatIndex:this.#Ye(e)}),this.#Re(n)}return}if(a&&this.#P){let n=this.#s(),r=n.rows,i=n.indexByKey.get(this.#P.node.item.key)??-1,a=n.indexByKey.get(e.item.key)??-1;if(i>=0&&a>=0){let n=new Set(this._selectedNodes),o=Math.min(i,a),s=Math.max(i,a),c=r.slice(o,s+1).map(e=>e.node).filter(e=>this.#Pe(e));this._selectedNodes=new Set(c),this.selectedNode=e,this.#Re(n)}return}if(!this.#Be(e,r)&&this.#Pe(e)){let n=new Set(this._selectedNodes);this._selectedNodes.clear(),this._selectedNodes.add(e),this.selectedNode=e,this.#P={node:e,flatIndex:this.#Ye(e)},(!n.has(e)||n.size!==1)&&this.#Re(n)}this.#Ke(e,n)}#Ue(e,n){this.#Ke(e,n)}#We(e,n,r){let i=r?r.metaKey||r.ctrlKey:!1,a=r?r.shiftKey:!1;if(i){if(this.#Pe(e)){let n=new Set(this._selectedNodes);this._selectedNodes.has(e)?(this._selectedNodes.delete(e),this.selectedNode===e&&(this.selectedNode=[...this._selectedNodes].at(-1))):(this._selectedNodes.add(e),this.selectedNode=e,this.#P={node:e,flatIndex:this.#Ye(e)}),this.#Re(n)}return}if(a&&this.#P){let n=this.#s(),r=n.rows,i=n.indexByKey.get(this.#P.node.item.key)??-1,a=n.indexByKey.get(e.item.key)??-1;if(i>=0&&a>=0){let n=new Set(this._selectedNodes),o=Math.min(i,a),s=Math.max(i,a),c=r.slice(o,s+1).map(e=>e.node).filter(e=>this.#Pe(e));this._selectedNodes=new Set(c),this.selectedNode=e,this.#Re(n)}return}this.#Ke(e,n)}#Ge(e,n){if(!this.#Pe(e))return;let r=new Set(this._selectedNodes);this._selectedNodes.has(e)?(this._selectedNodes.delete(e),this.selectedNode===e&&(this.selectedNode=[...this._selectedNodes].at(-1))):(this._selectedNodes.add(e),this.selectedNode=e,this.#P={node:e,flatIndex:this.#Ye(e)}),this.#Re(r)}_handleCheckboxClick(e,n,r){e.stopPropagation();let i=new Set(this._selectedNodes),a=this.#qe(n);this.#Je(n,!a),(this.selectedNode===void 0||!this._selectedNodes.has(this.selectedNode))&&(this.selectedNode=[...this._selectedNodes].at(-1)),this.#Re(i),this.requestUpdate()}#Ke(e,n){let r=this._expandedKeys.has(e.item.key);if(this.#ue=!0,r)this.#e(Eb(this._expandedKeys,e.item.key)),this.dispatchEvent(new CustomEvent(`collapse`,{detail:{node:e,depth:n},bubbles:!0,composed:!0}));else if(e.children===void 0){if(e.item.isLeaf!==!1)return;if(this.model??(this.loadChildren?this:void 0)){this.#j=e;let r=new AbortController;this.#M=r,this.#Ze(e,n,r).catch(()=>{})}}else this.#nt(e.item.key),this.#e(Tb(this._expandedKeys,e.item.key)),this.dispatchEvent(new CustomEvent(`expand`,{detail:{node:e,depth:n},bubbles:!0,composed:!0}))}#qe(e){let n=[],r=e=>{this.#Pe(e)&&n.push(e),e.children?.forEach(r)};return r(e),n.length>0&&n.every(e=>this._selectedNodes.has(e))}#Je(e,n){if(this.#Pe(e)&&(n?this._selectedNodes.add(e):this._selectedNodes.delete(e)),e.children)for(let r of e.children)this.#Je(r,n)}#Ye(e){return this.#s().indexByKey.get(e.item.key)??-1}#Xe(e,n,r){if(!this.#P){let r=e[n]?.node;r&&(this.#P={node:r,flatIndex:n})}if(!this.#P)return;let i=this.#s().indexByKey.get(this.#P.node.item.key)??-1;if(i<0)return;let a=Math.min(i,r),o=Math.max(i,r);if(this.interactionMode===`vscode`){this.#P.selectionSnapshot||(this.#P={...this.#P,selectionSnapshot:new Set(this._selectedNodes)});let n=this.#P.selectionSnapshot,i=e.slice(a,o+1).map(e=>e.node).filter(e=>this.#Pe(e)),s=new Set(n);for(let e of i)n.has(e)?s.delete(e):s.add(e);let c=new Set(this._selectedNodes);this._selectedNodes=s,this.selectedNode=e[r]?.node??this.selectedNode,this.#Re(c)}else{let n=new Set(this._selectedNodes),i=e.slice(a,o+1).map(e=>e.node).filter(e=>this.#Pe(e));this._selectedNodes=new Set(i),this.selectedNode=e[r]?.node??this.selectedNode,this.#Re(n)}}async#Ze(e,n,r){try{let i;if(i=this.model?await this.model.getChildren(e,n,r.signal):[...await dg(this.loadChildren({node:e,depth:n},r.signal),r.signal)],r.signal.aborted)return;e.children=i,this.#i++,this.#nt(e.item.key),this.#e(Tb(this._expandedKeys,e.item.key)),this.#t=void 0,this.#ue=!0,this.#j=void 0,this.#M=void 0,this.dispatchEvent(new CustomEvent(`expand`,{detail:{node:e,depth:n},bubbles:!0,composed:!0})),this.requestUpdate()}catch{if(r.signal.aborted)return;e.children=[],this.#i++,this.#t=void 0,this.#j=void 0,this.#M=void 0,this.requestUpdate()}}_isSelected(e){return this._selectedNodes.has(e)}_isFocused(e){return this.tickled.isTickled(e.item.key)}_isExpanded(e,n=0){return this._expandedKeys.has(e.item.key)?!0:this.#D()?.autoExpanded.has(e.item.key)??!1}get _pendingNode(){return this.#j}#Qe(e,n=`edge`){if(n===`center-if-hidden`){this.updateComplete.then(()=>{this.#y();let r=this.#s().indexByKey.get(e);r!==void 0&&this.#E(r,n)});return}if(this.#_()){this.updateComplete.then(()=>{let n=this.#s().indexByKey.get(e);n!==void 0&&this.#E(n)});return}let r=++this.#$e;requestAnimationFrame(()=>{this.#et(e);let n=this.#be()?.getAnimations?.({subtree:!0})??[];n.length>0&&Promise.allSettled(n.map(e=>e.finished)).then(()=>{r===this.#$e&&this.#et(e)})})}#$e;#et(e){let n=this.#be(),r=this.shadowRoot?.querySelector(`ul.tree-list [data-key="${CSS.escape(e)}"]`);if(!r||!n)return;let i=r.getBoundingClientRect(),a=n.getBoundingClientRect(),o=i.top-a.top,s=o+i.height,c=this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height??0;o<c?n.scrollTop+=o-c:s>n.clientHeight&&(n.scrollTop+=s-n.clientHeight)}#tt(){this.#M&&(this.#M.abort(),this.#M=void 0,this.#j=void 0)}#nt(e){if(this.exclusivity!==`none`){if(this.exclusivity===`depth`)this.#rt(e);else if(this.exclusivity===`global`){let n=this.#it(e);this.#e(Db(this._expandedKeys,r=>!n.has(r)&&r!==e))}}}#rt(e){if(!this.root)return;let n=this.#at(this.root,e);if(!n?.children)return;let r=new Set(n.children.map(e=>e.item.key));this.#e(Db(this._expandedKeys,n=>n!==e&&r.has(n)))}#it(e){let n=new Set,r=i=>{if(i.item.key===e)return!0;if(!i.children)return!1;for(let e of i.children)if(r(e))return n.add(i.item.key),!0;return!1};return this.root&&r(this.root),n}#at(e,n,r=void 0){if(e.children)for(let i of e.children){if(i.item.key===n)return r??e;let a=this.#at(i,n,i);if(a)return a}}#ot(){let e=this.tickled.tickledId;return e?this.#s().indexByKey.get(e)??0:0}#st(e){let n=this.#s().rows;if(e<0||e>=n.length)return;let{node:r,depth:i}=n[e];if(this.tickled.setTickled(r.item.key),this._focusedDepth=i,this.dispatchEvent(new CustomEvent(`tickle`,{detail:{node:r,depth:i},bubbles:!0,composed:!0})),this.requestUpdate(),this.#_()){this.#E(e);return}this.updateComplete.then(()=>this.#ct())}#ct(){let e=this.tickled.tickledId;e!==void 0&&(this.shadowRoot?.querySelector(`ul.tree-list [data-key="${CSS.escape(e)}"]`))?.scrollIntoView({block:`nearest`,behavior:`smooth`})}#lt(){return this.#y(),Pb(this.#v(this.#s().rows.length))}#ut(e,n,r,i){this.interactionMode===`implicit`&&this.select(e[r].node),this.#st(r),i&&(this.interactionMode===`standard`||this.interactionMode===`vscode`)?this.#Xe(e,n,r):this.interactionMode===`vscode`&&(this.#P=void 0),this.requestUpdate()}#dt;renderLoadingIndicator(){return i`<span class="loading-spinner"></span>`}render(){let e=this.#s().rows;return i`
       <div
         id="container"
         data-input-mode=${this.tickled.inputMode}
@@ -9947,7 +9950,7 @@ const je={216:`O`,223:`s`,248:`o`,273:`d`,295:`h`,305:`i`,320:`l`,322:`l`,359:`t
       }
 
       
-    `]}};ew=E([T(`ixfx-miller-list`)],ew);var tw=class{#e;#t;#n;#r=new WeakMap;#i=new Map;#a=new Map;#o=new Map;#s=new WeakMap;#c;constructor(e,n,r){this.#e=e,this.#t=n,this.#n=r}connect(){this.disconnect(),this.#c=new AbortController,this.#s=new WeakMap,this.#i.clear(),this.#o.clear(),this.#a.clear();let e={item:this.#f(this.#e)};this.#r.set(e,this.#e),e.children=this.#p(this.#e),this.#t.root=e,this.#t.loadChildren=this.#n.loadChildren??(({node:e})=>{let n=this.#r.get(e);return n?this.#p(n):[]})}disconnect(){this.#c?.abort(),this.#c=void 0,this.#t.loadChildren=void 0}navigateToValue(e,n){let r=this.#_(this.#e,e);return r?this.#l(r,n):!1}navigateToKeyPath(e,n){let r=this.#t.viewRoot??this.#t.root;if(!r||e.length===0)return!1;this.#u(r);let i=r.children??[];for(let n=0;n<e.length-1;n++){let r=i.find(r=>r.item.key===e[n]);if(!r)return!1;this.#u(r),i=r.children??[]}return this.#t.navigateTo(e,n)}navigateToIdentity(e,n){let r=this.#d(e);if(!r)return!1;let i=[],a=this.#e.getIdentity();for(let e=r;e;e=e.getParent())if(i.unshift(e),e.getIdentity()===a)return this.#l(i,n);return!1}lookupByKey(e){return this.#a.get(e)}sync(){let e=this.#t.root;if(!e)return;this.#s=new WeakMap,this.#i.clear(),this.#o.clear(),this.#a.clear(),this.#r.set(e,this.#e),e.item=this.#f(this.#e);let n=new Set([e]);e.children&&this.#g(this.#e,e.children,n);let r=this.#t.viewRoot;r&&!n.has(r)&&(this.#t.viewRoot=void 0),this.#t.invalidateStructure()}#l(e,n){let r=this.#t.viewRoot??this.#t.root;if(!r)return!1;let i=1;if(this.#t.viewRoot){let n=this.#r.get(r);if(!n)return!1;let a=n.getIdentity(),o=e.findIndex(e=>e.getIdentity()===a);if(o<0)return!1;i=o+1}return i>=e.length?!1:this.navigateToKeyPath(e.slice(i).map(e=>this.#f(e).key),n)}#u(e){if(e.children!==void 0)return;let n=this.#r.get(e);n&&(e.children=this.#p(n))}#d(e){return this.#o.get(e)}#f(e){let n=e.getIdentity(),r=this.#s.get(n);return r||(r=this.#n.valueToItem(e.getValue(),e),this.#s.set(n,r)),r}#p(e){return Array.from(e.children(),e=>this.#m(e))}#m(e){let n=[...e.children()];for(let e of n)this.#o.set(e.getIdentity(),e);let r=this.#f(e),i=r.isLeaf??n.length===0,a={item:{...r,isLeaf:i},children:i?[]:void 0};return this.#h(a,e),a}#h(e,n){this.#r.set(e,n),this.#i.set(n.getIdentity(),e),this.#o.set(n.getIdentity(),n),this.#a.set(e.item.key,n)}#g(e,n,r){let i=new Map(n.map(e=>[e.item.key,e])),a=Array.from(e.children(),e=>{let n=this.#m(e),a=i.get(n.item.key);return a?(a.item=n.item,this.#h(a,e),r.add(a),n.item.isLeaf?a.children=[]:a.children===void 0?a.children=void 0:this.#g(e,a.children,r),a):(r.add(n),n)});n.splice(0,n.length,...a)}#_(e,n,r=[]){let i=[...r,e];if(n(e.getValue()))return i;for(let r of e.children()){let e=this.#_(r,n,i);if(e)return e}}};function nw(e){return e.children!==void 0&&e.children.length>0}function rw(e){return e.flatMap(e=>nw(e)?rw(e.children):[e])}function iw(e,n){for(let r of e){if(r.key===n)return r;let e=r.children?iw(r.children,n):void 0;if(e)return e}}function aw(e,n){return rw(e).find(e=>e.key===n)}const ow=`__all__`;function sw(e,n){let r=n===`desc`?-1:1;return[...e].sort((e,n)=>r*e.label.localeCompare(n.label,void 0,{sensitivity:`base`,numeric:!0}))}function cw(e,n,r,i){if(r===0)return{insert:0,caretOffset:0};let a=2**53-1,o=i;for(let s=0;s<r;s++){if(s===i)continue;let r=e[s],c=e[s+1]??e[e.length-1],l=(r+c)/2,u=Math.abs(n-(n<l?r:c));u<a&&(a=u,o=n<l?s:s+1)}let s=o>i?o-1:o;return{insert:Math.max(0,Math.min(r-1,s)),caretOffset:e[o]??e[e.length-1]}}var lw=class{#e;#t;#n;#r;#i;#a;#o=void 0;#s;#c;#l;#u=[];#d=!0;#f=[];#p=!1;#m;constructor(e){this.id=e.id,this.#e=e.category,this.#t=e.categoryDefaults,this.#n=e.selectionMode,this.#r=e.dataProvider,this.#i=e.onSelectionChange,this.#a=e.onRequestData,this.#m={id:e.id,categoryKey:e.category.key,sort:e.categoryDefaults?.sort??`asc`,grouped:e.categoryDefaults?.grouped??!1,width:220}}get state(){return this.getState()}get categoryKey(){return this.#e.key}getState(){return{...this.#m}}updateState(e){let n=e;if(e.width!==void 0&&!Number.isFinite(e.width)){let{width:r,...i}=e;n=i}let r=n.sort!==void 0&&n.sort!==this.#m.sort,i=n.grouped!==void 0&&n.grouped!==this.#m.grouped;this.#m={...this.#m,...n},r&&this.#_(),i&&this.#v()}setWidth(e){Number.isFinite(e)&&(this.#m={...this.#m,width:Math.max(80,Math.min(480,Math.round(e)))})}setSort(e){e!==this.#m.sort&&(this.#m={...this.#m,sort:e},this.#_())}setGrouped(e){e!==this.#m.grouped&&(this.#m={...this.#m,grouped:e},this.#v())}setSelectionMode(e){if(e!==this.#n){this.#n=e;for(let n of this.#y())n.selectionMode=e}}setCategory(e){this.#e=e,this.#t=e.defaults,this.#m={...this.#m,categoryKey:e.key,sort:e.defaults?.sort??`asc`,grouped:e.defaults?.grouped??!1},this.clearSelection(),this.#v()}get listerHost(){return this.#s}get isMounted(){return this.#s!==void 0}setDataProvider(e){this.#r=e}mount(e){if(this.#s)return;this.#s=e;let n=document.createElement(`div`);n.className=`all-row`,n.dataset.key=ow,n.setAttribute(`role`,`button`),n.setAttribute(`tabindex`,`0`);let r=document.createElement(`span`);r.className=`all-label`,n.appendChild(r);let i=()=>{this.#d||this.#x()};n.addEventListener(`click`,i),n.addEventListener(`keydown`,e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),i())}),this.#c=n;let a=document.createElement(`ixfx-grouped-item-lister`);a.crossGroupSelection=!0,a.factory=()=>Vb(uw,{selectionMode:this.#n,interactionMode:`standard`}),a.addEventListener(`select`,this.#b),this.#l=a,this.#v(),this.#C(),e.append(n,a),this.#f.length>0&&(this.#g(),this.#S())}unmount(){this.#w(),this.#c?.remove(),this.#l?.remove(),this.#c=void 0,this.#l=void 0,this.#s=void 0}requestData(e){if(!this.#r)return;this.#w();let n=new AbortController;this.#o=n;let{signal:r}=n;this.#a(this.id,e,r),Promise.resolve().then(async()=>{let n=await dg(this.#r(e,r),r);r.aborted||this.#h(n)}).catch(()=>{})}#h(e){this.#f=e;let n=this.#u.filter(n=>e.some(e=>e.key===n)),r=n.length!==this.#u.length;if(this.#u=n,n.length===0&&(this.#d=!0),!this.#l){r&&this.#i(this.id,n);return}this.#g(),this.#S(),r&&this.#i(this.id,n)}#g(){if(!this.#l)return;let e=sw(this.#f,this.#m.sort);this.#l.provider=()=>e}#_(){!this.#l||this.#f.length===0||(this.#g(),this.#S())}#v(){if(!this.#l)return;let e=this.#t?.groupBy;this.#l.groupBy=e,this.#l.grouped=this.#m.grouped&&e!==void 0,this.#f.length>0&&this.#S()}#y(){return this.#l?this.#l.querySelectorAll(`:scope > .ungrouped-host > *, :scope > ixfx-panel > *`):[]}#b=()=>{if(this.#p)return;let e=[...this.#l?.selectedItems??[]].map(e=>e.key).filter(e=>e!==ow);if(e.length===this.#u.length&&e.every(e=>this.#u.includes(e))){this.#C();return}this.#u=e,this.#d=e.length===0,this.#C(),this.#i(this.id,e)};#x(){let e=this.#u;this.#p=!0;try{this.#u=[],this.#d=!0;for(let e of this.#y())e.clearSelection()}finally{this.#p=!1}this.#C(),e.length>0&&this.#i(this.id,[])}clearSelection(){this.#x()}get selectedValues(){return this.#u}#S(){this.#l&&this.#l.updateComplete.then(()=>{if(!(!this.#l||!this.#s)){this.#p=!0;try{let e=this.#u;for(let n of this.#l.querySelectorAll(`ixfx-vertical-list`))n.selectKeys(e);let n=[...this.#l.selectedItems].map(e=>e.key).filter(e=>e!==ow);this.#u=n,this.#d=n.length===0}finally{this.#p=!1}this.#C()}})}#C(){if(!this.#c)return;let e=this.#t?.allLabel??`All`,n=this.#c.querySelector(`.all-label`);n&&(n.textContent=e),this.#c.toggleAttribute(`data-selected`,this.#d)}#w(){this.#o&&=(this.#o.abort(),void 0)}};function uw(e){let n=document.createElement(`li`);n.dataset.key=e.key;let r=document.createElement(`span`);if(r.className=`item-label`,r.textContent=e.label,n.appendChild(r),e.count!==void 0){let r=document.createElement(`span`);r.className=`count`,r.textContent=String(e.count),n.appendChild(r)}return n}ge(`menu`,`<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 d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></svg>`);let dw=class extends n{constructor(...e){super(...e),this.categories=[],this.selectionMode=`multiple`,this.minColumns=1,this.maxColumns=5,this._columns=[],this._colOffsets=[0],this._resizingColumnId=void 0,this._draggingColumnId=void 0,this._dropCaretX=void 0,this._idCounter=0,this._autoSeeded=!1,this._drag={pointerId:-1,from:-1,startX:0,startY:0,active:!1,ghost:null,insert:-1}}static{this.styles=[w,Yt,r`
+    `]}};ew=E([T(`ixfx-miller-list`)],ew);var tw=class{#e;#t;#n;#r=new WeakMap;#i=new Map;#a=new Map;#o=new Map;#s=new WeakMap;#c;constructor(e,n,r){this.#e=e,this.#t=n,this.#n=r}connect(){this.disconnect(),this.#c=new AbortController,this.#s=new WeakMap,this.#i.clear(),this.#o.clear(),this.#a.clear();let e={item:this.#f(this.#e)};this.#r.set(e,this.#e),e.children=this.#p(this.#e),this.#t.root=e,this.#t.loadChildren=this.#n.loadChildren??(({node:e})=>{let n=this.#r.get(e);return n?this.#p(n):[]})}disconnect(){this.#c?.abort(),this.#c=void 0,this.#t.loadChildren=void 0}navigateToValue(e,n){let r=this.#_(this.#e,e);return r?this.#l(r,n):!1}navigateToKeyPath(e,n){let r=this.#t.viewRoot??this.#t.root;if(!r||e.length===0)return!1;this.#u(r);let i=r.children??[];for(let n=0;n<e.length-1;n++){let r=i.find(r=>r.item.key===e[n]);if(!r)return!1;this.#u(r),i=r.children??[]}return this.#t.navigateTo(e,n)}navigateToIdentity(e,n){let r=this.#d(e);if(!r)return!1;let i=[],a=this.#e.getIdentity();for(let e=r;e;e=e.getParent())if(i.unshift(e),e.getIdentity()===a)return this.#l(i,n);return!1}lookupByKey(e){return this.#a.get(e)}sync(){let e=this.#t.root;if(!e)return;this.#s=new WeakMap,this.#i.clear(),this.#o.clear(),this.#a.clear(),this.#r.set(e,this.#e),e.item=this.#f(this.#e);let n=new Set([e]);e.children&&this.#g(this.#e,e.children,n);let r=this.#t.viewRoot;r&&!n.has(r)&&(this.#t.viewRoot=void 0),this.#t.invalidateStructure()}#l(e,n){let r=this.#t.viewRoot??this.#t.root;if(!r)return!1;let i=1;if(this.#t.viewRoot){let n=this.#r.get(r);if(!n)return!1;let a=n.getIdentity(),o=e.findIndex(e=>e.getIdentity()===a);if(o<0)return!1;i=o+1}return i>=e.length?!1:this.navigateToKeyPath(e.slice(i).map(e=>this.#f(e).key),n)}#u(e){if(e.children!==void 0)return;let n=this.#r.get(e);n&&(e.children=this.#p(n))}#d(e){return this.#o.get(e)}#f(e){let n=e.getIdentity(),r=this.#s.get(n);return r||(r=this.#n.valueToItem(e.getValue(),e),this.#s.set(n,r)),r}#p(e){return Array.from(e.children(),e=>this.#m(e))}#m(e){let n=[...e.children()];for(let e of n)this.#o.set(e.getIdentity(),e);let r=this.#f(e),i=r.isLeaf??n.length===0,a={item:{...r,isLeaf:i},children:i?[]:void 0};return this.#h(a,e),a}#h(e,n){this.#r.set(e,n),this.#i.set(n.getIdentity(),e),this.#o.set(n.getIdentity(),n),this.#a.set(e.item.key,n)}#g(e,n,r){let i=new Map(n.map(e=>[e.item.key,e])),a=Array.from(e.children(),e=>{let n=this.#m(e),a=i.get(n.item.key);return a?(a.item=n.item,this.#h(a,e),r.add(a),n.item.isLeaf?a.children=[]:a.children===void 0?a.children=void 0:this.#g(e,a.children,r),a):(r.add(n),n)});n.splice(0,n.length,...a)}#_(e,n,r=[]){let i=[...r,e];if(n(e.getValue()))return i;for(let r of e.children()){let e=this.#_(r,n,i);if(e)return e}}};function nw(e){return e.children!==void 0&&e.children.length>0}function rw(e){return e.flatMap(e=>nw(e)?rw(e.children):[e])}function iw(e,n){for(let r of e){if(r.key===n)return r;let e=r.children?iw(r.children,n):void 0;if(e)return e}}function aw(e,n){return rw(e).find(e=>e.key===n)}const ow=`__all__`;function sw(e,n){let r=n===`desc`?-1:1;return[...e].sort((e,n)=>r*e.label.localeCompare(n.label,void 0,{sensitivity:`base`,numeric:!0}))}function cw(e,n,r,i){if(r===0)return{insert:0,caretOffset:0};let a=2**53-1,o=i;for(let s=0;s<r;s++){if(s===i)continue;let r=e[s],c=e[s+1]??e[e.length-1],l=(r+c)/2,u=Math.abs(n-(n<l?r:c));u<a&&(a=u,o=n<l?s:s+1)}let s=o>i?o-1:o;return{insert:Math.max(0,Math.min(r-1,s)),caretOffset:e[o]??e[e.length-1]}}var lw=class{#e;#t;#n;#r;#i;#a;#o=void 0;#s;#c;#l;#u=[];#d=!0;#f=[];#p=!1;#m;constructor(e){this.id=e.id,this.#e=e.category,this.#t=e.categoryDefaults,this.#n=e.selectionMode,this.#r=e.dataProvider,this.#i=e.onSelectionChange,this.#a=e.onRequestData,this.#m={id:e.id,categoryKey:e.category.key,sort:e.categoryDefaults?.sort??`asc`,grouped:e.categoryDefaults?.grouped??!1,menu:e.categoryDefaults?.menu??!0,width:220}}get state(){return this.getState()}get categoryKey(){return this.#e.key}get menu(){return this.#m.menu}getState(){return{...this.#m}}updateState(e){let n=e;if(e.width!==void 0&&!Number.isFinite(e.width)){let{width:r,...i}=e;n=i}let r=n.sort!==void 0&&n.sort!==this.#m.sort,i=n.grouped!==void 0&&n.grouped!==this.#m.grouped;this.#m={...this.#m,...n},r&&this.#_(),i&&this.#v()}setWidth(e){Number.isFinite(e)&&(this.#m={...this.#m,width:Math.max(80,Math.min(480,Math.round(e)))})}setSort(e){e!==this.#m.sort&&(this.#m={...this.#m,sort:e},this.#_())}setGrouped(e){e!==this.#m.grouped&&(this.#m={...this.#m,grouped:e},this.#v())}setSelectionMode(e){if(e!==this.#n){this.#n=e;for(let n of this.#y())n.selectionMode=e}}setCategory(e){this.#e=e,this.#t=e.defaults,this.#m={...this.#m,categoryKey:e.key,sort:e.defaults?.sort??`asc`,grouped:e.defaults?.grouped??!1,menu:e.defaults?.menu??!0},this.clearSelection(),this.#v()}get listerHost(){return this.#s}get isMounted(){return this.#s!==void 0}setDataProvider(e){this.#r=e}mount(e){if(this.#s)return;this.#s=e;let n=document.createElement(`div`);n.className=`all-row`,n.dataset.key=ow,n.setAttribute(`role`,`button`),n.setAttribute(`tabindex`,`0`);let r=document.createElement(`span`);r.className=`all-label`,n.appendChild(r);let i=()=>{this.#d||this.#x()};n.addEventListener(`click`,i),n.addEventListener(`keydown`,e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),i())}),this.#c=n;let a=document.createElement(`ixfx-grouped-item-lister`);a.crossGroupSelection=!0,a.factory=()=>Vb(uw,{selectionMode:this.#n,interactionMode:`standard`}),a.addEventListener(`select`,this.#b),this.#l=a,this.#v(),this.#C(),e.append(n,a),this.#f.length>0&&(this.#g(),this.#S())}unmount(){this.#w(),this.#c?.remove(),this.#l?.remove(),this.#c=void 0,this.#l=void 0,this.#s=void 0}requestData(e){if(!this.#r)return;this.#w();let n=new AbortController;this.#o=n;let{signal:r}=n;this.#a(this.id,e,r),Promise.resolve().then(async()=>{let n=await dg(this.#r(e,r),r);r.aborted||this.#h(n)}).catch(()=>{})}#h(e){this.#f=e;let n=this.#u.filter(n=>e.some(e=>e.key===n)),r=n.length!==this.#u.length;if(this.#u=n,n.length===0&&(this.#d=!0),!this.#l){r&&this.#i(this.id,n);return}this.#g(),this.#S(),r&&this.#i(this.id,n)}#g(){if(!this.#l)return;let e=sw(this.#f,this.#m.sort);this.#l.provider=()=>e}#_(){!this.#l||this.#f.length===0||(this.#g(),this.#S())}#v(){if(!this.#l)return;let e=this.#t?.groupBy;this.#l.groupBy=e,this.#l.grouped=this.#m.grouped&&e!==void 0,this.#f.length>0&&this.#S()}#y(){return this.#l?this.#l.querySelectorAll(`:scope > .ungrouped-host > *, :scope > ixfx-panel > *`):[]}#b=()=>{if(this.#p)return;let e=[...this.#l?.selectedItems??[]].map(e=>e.key).filter(e=>e!==ow);if(e.length===this.#u.length&&e.every(e=>this.#u.includes(e))){this.#C();return}this.#u=e,this.#d=e.length===0,this.#C(),this.#i(this.id,e)};#x(){let e=this.#u;this.#p=!0;try{this.#u=[],this.#d=!0;for(let e of this.#y())e.clearSelection()}finally{this.#p=!1}this.#C(),e.length>0&&this.#i(this.id,[])}clearSelection(){this.#x()}get selectedValues(){return this.#u}#S(){this.#l&&this.#l.updateComplete.then(()=>{if(!(!this.#l||!this.#s)){this.#p=!0;try{let e=this.#u;for(let n of this.#l.querySelectorAll(`ixfx-vertical-list`))n.selectKeys(e);let n=[...this.#l.selectedItems].map(e=>e.key).filter(e=>e!==ow);this.#u=n,this.#d=n.length===0}finally{this.#p=!1}this.#C()}})}#C(){if(!this.#c)return;let e=this.#t?.allLabel??`All`,n=this.#c.querySelector(`.all-label`);n&&(n.textContent=e),this.#c.toggleAttribute(`data-selected`,this.#d)}#w(){this.#o&&=(this.#o.abort(),void 0)}};function uw(e){let n=document.createElement(`li`);n.dataset.key=e.key;let r=document.createElement(`span`);if(r.className=`item-label`,r.textContent=e.label,n.appendChild(r),e.count!==void 0){let r=document.createElement(`span`);r.className=`count`,r.textContent=String(e.count),n.appendChild(r)}return n}ge(`menu`,`<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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>`);let dw=class extends n{constructor(...e){super(...e),this.categories=[],this.selectionMode=`multiple`,this.minColumns=1,this.maxColumns=5,this._columns=[],this._colOffsets=[0],this._resizingColumnId=void 0,this._draggingColumnId=void 0,this._dropCaretX=void 0,this._idCounter=0,this._autoSeeded=!1,this._drag={pointerId:-1,from:-1,startX:0,startY:0,active:!1,ghost:null,insert:-1}}static{this.styles=[w,Yt,r`
       :host {
         --multicol-list-bg: var(--surface-3);
         --multicol-list-header-bg: var(--surface-2);
@@ -10016,7 +10019,7 @@ const je={216:`O`,223:`s`,248:`o`,273:`d`,295:`h`,305:`i`,320:`l`,322:`l`,359:`t
       }
       .reorder-handle .ixfx-handle {
         --ixfx-handle-length: 14px;
-        --ixfx-handle-thickness: var(--multicol-list-reorder-handle-width, 10px);
+        --ixfx-handle-thickness: var(--multicol-list-reorder-handle-width, 6px);
         --ixfx-handle-dot-size: 3px;
       }
       .column-label {
@@ -10095,6 +10098,7 @@ const je={216:`O`,223:`s`,248:`o`,273:`d`,295:`h`,305:`i`,320:`l`,322:`l`,359:`t
         position: relative;
         display: flex;
         flex-direction: column;
+        --list-gutter: 0;
       }
       .all-row {
         display: flex;
@@ -10141,11 +10145,11 @@ const je={216:`O`,223:`s`,248:`o`,273:`d`,295:`h`,305:`i`,320:`l`,322:`l`,359:`t
         ${_(this._columns,e=>e.id,(e,n)=>this._renderColumn(e,n))}
         ${this._dropCaretX===void 0?a:i`<div class="drop-caret" style="left: ${this._dropCaretX}px"></div>`}
       </div>
-    `}updated(e){let n=rw(this.categories)[0];if(!this._autoSeeded&&this._columns.length===0&&n&&(this._autoSeeded=!0,this.addColumn(n.key)),e.has(`selectionMode`))for(let e of this._columns)e.setSelectionMode(this.selectionMode);if(e.has(`dataProvider`))for(let e of this._columns)e.setDataProvider(this.dataProvider);for(let e of this._columns)if(!e.isMounted){let n=this.shadowRoot?.querySelector(`[data-col-id="${e.id}"] .lister-host`);n&&e.mount(n)}e.has(`categories`)&&this._syncColumnsWithCategories(),(e.has(`categories`)||e.has(`dataProvider`))&&this._requeryAllColumns(),this._updateColOffsets()}_renderColumn(e,n){let r=e.getState().width??220,a=Number.isFinite(r)?r:220;return i`
+    `}updated(e){let n=rw(this.categories)[0];if(!this._autoSeeded&&this._columns.length===0&&n&&(this._autoSeeded=!0,this.addColumn(n.key)),e.has(`selectionMode`))for(let e of this._columns)e.setSelectionMode(this.selectionMode);if(e.has(`dataProvider`))for(let e of this._columns)e.setDataProvider(this.dataProvider);for(let e of this._columns)if(!e.isMounted){let n=this.shadowRoot?.querySelector(`[data-col-id="${e.id}"] .lister-host`);n&&e.mount(n)}e.has(`categories`)&&this._syncColumnsWithCategories(),(e.has(`categories`)||e.has(`dataProvider`))&&this._requeryAllColumns(),this._updateColOffsets()}_renderColumn(e,n){let r=e.getState().width??220,o=Number.isFinite(r)?r:220;return i`
       <div
         class="column"
         data-col-id="${e.id}"
-        style="width: ${a}px"
+        style="width: ${o}px"
       >
         <div
           class="column-header"
@@ -10162,13 +10166,14 @@ const je={216:`O`,223:`s`,248:`o`,273:`d`,295:`h`,305:`i`,320:`l`,322:`l`,359:`t
             data-tooltip=${this._getCategoryTooltip(e.categoryKey)}
             @click=${n=>{n.stopPropagation(),this._openCategoryPicker(e,n.currentTarget)}}
           >${this._getCategoryLabel(e.categoryKey)}</button>
+          ${e.menu?i`
           <button
             class="burger-btn"
             data-tooltip="Column options"
             @click=${n=>{n.stopPropagation(),this._openBurgerMenu(e,n.currentTarget)}}
           >
             <ixfx-icon name="menu" size="14"></ixfx-icon>
-          </button>
+          </button>`:a}
           <span
             class="resize-handle"
             ?data-active=${this._resizingColumnId===e.id}

package/dist/index.d.ts

@@ -2442,6 +2442,7 @@ type MulticolCategoryDefaults = {
   groupBy?: (item: MulticolItem) => string;
   allLabel?: string;
   sort?: SortDirection;
+  menu?: boolean;
 };
 type MulticolCategory = {
   readonly key: string;
@@ -2456,6 +2457,7 @@ type MulticolColumnState = {
   readonly categoryKey: string;
   readonly sort: SortDirection;
   readonly grouped: boolean;
+  readonly menu: boolean;
   readonly width?: number;
 };
 type MulticolColumnsChangeReason = `add` | `remove` | `reorder` | `category` | `sort` | `grouping` | `resize`;

package/dist/index.js

@@ -27,7 +27,7 @@ import { t as CheckedSelect } from "./checked-select-lDgAQQ7v.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-BCMU7W7R.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-9Hs7VxuX.js";
+import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-BM2CY6uu.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
@@ -9544,6 +9544,7 @@ var MulticolColumnController = class {
 			categoryKey: options.category.key,
 			sort: options.categoryDefaults?.sort ?? `asc`,
 			grouped: options.categoryDefaults?.grouped ?? false,
+			menu: options.categoryDefaults?.menu ?? true,
 			width: 220
 		};
 	}
@@ -9554,6 +9555,9 @@ var MulticolColumnController = class {
 	get categoryKey() {
 		return this.#category.key;
 	}
+	get menu() {
+		return this.#state.menu;
+	}
 	getState() {
 		return { ...this.#state };
 	}
@@ -9607,7 +9611,8 @@ var MulticolColumnController = class {
 			...this.#state,
 			categoryKey: category.key,
 			sort: category.defaults?.sort ?? `asc`,
-			grouped: category.defaults?.grouped ?? false
+			grouped: category.defaults?.grouped ?? false,
+			menu: category.defaults?.menu ?? true
 		};
 		this.clearSelection();
 		this.#syncGrouping();
@@ -9797,7 +9802,7 @@ function renderItem(item) {
 }
 //#endregion
 //#region src/multicol-list/multicol-list.ts
-registerIcon(`menu`, `<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 d="M4 12h16"/><path d="M4 18h16"/><path d="M4 6h16"/></svg>`);
+registerIcon(`menu`, `<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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>`);
 const DEFAULT_COLUMN_WIDTH = 220;
 const MIN_COLUMN_WIDTH = 80;
 const MAX_COLUMN_WIDTH = 480;
@@ -9899,7 +9904,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
       }
       .reorder-handle .ixfx-handle {
         --ixfx-handle-length: 14px;
-        --ixfx-handle-thickness: var(--multicol-list-reorder-handle-width, 10px);
+        --ixfx-handle-thickness: var(--multicol-list-reorder-handle-width, 6px);
         --ixfx-handle-dot-size: 3px;
       }
       .column-label {
@@ -9978,6 +9983,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
         position: relative;
         display: flex;
         flex-direction: column;
+        --list-gutter: 0;
       }
       .all-row {
         display: flex;
@@ -10139,6 +10145,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 			this._openCategoryPicker(col, e.currentTarget);
 		}}
           >${this._getCategoryLabel(col.categoryKey)}</button>
+          ${col.menu ? html`
           <button
             class="burger-btn"
             data-tooltip="Column options"
@@ -10148,7 +10155,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 		}}
           >
             <ixfx-icon name="menu" size="14"></ixfx-icon>
-          </button>
+          </button>` : nothing}
           <span
             class="resize-handle"
             ?data-active=${this._resizingColumnId === col.id}

package/dist/{tree-9Hs7VxuX.js → tree-BM2CY6uu.js}

@@ -2578,6 +2578,10 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	_handleItemClick(node, depth, event) {
 		if (this.#drop?.isDragging || this.#nativeDrag?.isDragging || this.#postDragSuppressTimer !== void 0) return;
 		if (event && event.detail >= 2) return;
+		if (this.interactionMode === `checked` && event && !(event.target instanceof Element && event.target.closest(`.tree-label`))) {
+			this._handleCheckboxClick(event, node, depth);
+			return;
+		}
 		if (this.#pendingNode && this._expandedKeys.has(this.#pendingNode.item.key)) this.#abortPending();
 		this.tickled.handlePointerEnter(node.item.key);
 		this._focusedDepth = depth;

package/dist/tree.js

@@ -1,2 +1,2 @@
-import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-9Hs7VxuX.js";
+import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-BM2CY6uu.js";
 export { TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeListElement };

package/dist/vertical-list.js

@@ -1543,6 +1543,8 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       box-sizing: border-box;
       outline: none;
       --ixfx-list-item-padding: var(--ixfx-list-item-padding, var(--list-item-padding, 4px var(--space-m, 8px)));
+      --_item-padding:
+        var(--ixfx-list-item-padding, var(--list-item-padding, 0 var(--space-xs, 3px)));
     }
 
     :host(:focus-visible) {
@@ -1579,7 +1581,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
     ::slotted(li) {
       display: flex;
       align-items: center;
-      padding: var(--ixfx-list-item-padding);
+      padding: var(--_item-padding);
       /* Inset each row from the scroll container's edges (margin, not padding:
          padding is inside the border box, so the tickle/selection outlines
          would still sit flush against the edge and be clipped). */
@@ -1701,6 +1703,7 @@ let VerticalListElement = class VerticalListElement extends LitElement {
       background: transparent;
       color: inherit;
       outline: 1px solid transparent;
+      padding: var(--space-s);
     }
 
     :host([interaction-mode="checked"]) ::slotted([data-selected][data-tickled]) {

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.14.1",
-  "generated": "2026-10-09T22:40:55.145Z",
+  "version": "0.14.2",
+  "generated": "2026-10-13T12:04:47.321Z",
   "components": [
     {
       "name": "ac-text",

package/docs-user/tree.md

@@ -160,7 +160,7 @@ Controls how pointer and keyboard gestures translate to selection changes.
 | `'implicit'` | Single selection follows every click; click also toggles expand/collapse |
 | `'standard'` | Plain click selects + toggles expand; Ctrl/Cmd+click toggles item; Shift+click range-selects |
 | `'manual'` | Component never auto-selects; use `select()` / `deselect()` / `clearSelection()` to drive state |
-| `'checked'` | Checkboxes on every row; checkbox click recursively selects/deselects loaded descendants; row click only expands/collapses |
+| `'checked'` | Checkboxes on every row; clicking the checkbox — or anywhere left of the label (indent, caret, icon) — recursively selects/deselects loaded descendants; label click only expands/collapses |
 | `'vscode'` | Like `standard` for clicks; Shift+Up/Down uses snapshot-based toggle-range (VS Code file-explorer style) |
 
 Switching `interactionMode` clears the current selection.
@@ -190,6 +190,8 @@ tree.checkboxRenderer = (state) => state === `unchecked`
 
 When `checkboxRenderer` is set, the checkbox becomes a `<span class="tree-checkbox" role="checkbox" part="checkbox">` holding your template, with `aria-checked` set to `"true"`, `"false"`, or `"mixed"` to match the tri-state. The span owns the click (same as the native input), so clicking anywhere in it — including empty space when you render nothing for `unchecked` — toggles the row.
 
+To keep the checkbox easy to aim at, the entire row region left of the label — indent gutter, checkbox, caret and icon — acts as one checkbox hit target in `checked` mode. Only clicks on the label itself expand/collapse.
+
 Both the native input and the custom span expose the `checkbox` CSS part for external styling:
 
 ```css

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",