@skdx/web-components 0.31.0 → 0.33.0

package/dist/table/TableHeaderCell.js

@@ -1,14 +1,42 @@
-var v=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var n=(m,d,e,t)=>{for(var r=t>1?void 0:t?$(d,e):d,l=m.length-1,o;l>=0;l--)(o=m[l])&&(r=(t?o(d,e,r):o(r))||r);return t&&r&&v(d,e,r),r};import{css as w,html as h,LitElement as R,nothing as s}from"lit";import{property as a}from"lit/decorators.js";import{customElement as x}from"../internal/define.js";import{reflectHostState as S}from"../internal/part.js";import{resetNativeControl as k}from"../internal/styles.js";import{findTableRoot as L,optionalStringAttribute as F,TABLE_INTERNAL_UPDATE as f}from"./column-context.js";import{ColumnResizeController as K}from"./column-resize.js";var i=class extends R{constructor(){super(...arguments);this.resizable=!1;this.minWidth=40;this.maxWidth=1e3;this.resizeLabel="Resize column";this.resizeStep=8;this.resize=new K(this);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleSlotChange=()=>this.requestUpdate();this.activate=()=>{let e=this.resizeColumnKey;if(!this.isSortable||e===void 0)return;let t=this.textContent?.trim();this.root?.toggleSort(e,t||e)};this.onFilterInput=e=>{let t=this.resizeColumnKey;t!==void 0&&this.root?.setColumnFilter(t,e.target.value)}}connectedCallback(){super.connectedCallback(),this.root=L(this),this.root?.addEventListener(f,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(f,this.onRootUpdate),super.disconnectedCallback()}get resizeColumnKey(){return this.columnKey}get isSortable(){return(this.sortable??!1)&&this.resizeColumnKey!==void 0}get isFilterable(){return(this.filterable??!1)&&this.resizeColumnKey!==void 0}get filterValue(){let e=this.resizeColumnKey;return e===void 0?"":this.root?.filterMap[e]??""}get resizeMinWidth(){return this.minWidth}get resizeMaxWidth(){return this.maxWidth}get resizeStepPx(){return this.resizeStep}get resizeTable(){return this.root}resizeMeasureCell(){return this}updated(){let e=this.resize.storedWidth;this.style.width=e===void 0?"":`${e}px`,e===void 0?this.style.removeProperty("--skdx-table-column-width"):this.style.setProperty("--skdx-table-column-width",`${e}px`),S(this,{"aria-sort":this.shadowRoot?.querySelector("th")?.getAttribute("aria-sort")??null})}hasSlotted(e){let t=this.querySelector(e);return t!==null&&t.closest("skdx-table-header-cell")===this}ariaSortFor(e,t){return e?t==="asc"?"ascending":t==="desc"?"descending":"none":s}renderFilterInput(e,t){return h`
+var S=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var n=(b,h,e,t)=>{for(var s=t>1?void 0:t?k(h,e):h,a=b.length-1,l;a>=0;a--)(l=b[a])&&(s=(t?l(h,e,s):l(s))||s);return t&&s&&S(h,e,s),s};import{css as x,html as d,LitElement as K,nothing as r}from"lit";import{property as o}from"lit/decorators.js";import{customElement as L}from"../internal/define.js";import{reflectHostState as C}from"../internal/part.js";import{resetNativeControl as T}from"../internal/styles.js";import{findTableRoot as E,optionalStringAttribute as F,pinGlyph as M,REORDER_GRIP as I,TABLE_INTERNAL_UPDATE as $}from"./column-context.js";import{ColumnReorderController as U}from"./column-reorder.js";import{ColumnResizeController as W}from"./column-resize.js";var i=class extends K{constructor(){super(...arguments);this.resizable=!1;this.reorderable=!1;this.pinnable=!1;this.reorderLabel="Move column";this.pinLabel="Pin column";this.minWidth=40;this.maxWidth=1e3;this.resizeLabel="Resize column";this.resizeStep=8;this.resize=new W(this);this.reorder=new U(this);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleSlotChange=()=>this.requestUpdate();this.activate=()=>{let e=this.resizeColumnKey;if(!this.isSortable||e===void 0)return;let t=this.textContent?.trim();this.root?.toggleSort(e,t||e)};this.onFilterInput=e=>{let t=this.resizeColumnKey;t!==void 0&&this.root?.setColumnFilter(t,e.target.value)};this.togglePin=e=>{e.stopPropagation();let t=this.columnKey;t!==void 0&&this.root?.setColumnPin(t,this.pinnedSide==="start"?null:"start")}}connectedCallback(){super.connectedCallback(),this.root=E(this),this.root?.addEventListener($,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener($,this.onRootUpdate),super.disconnectedCallback()}get resizeColumnKey(){return this.columnKey}get isSortable(){return(this.sortable??!1)&&this.resizeColumnKey!==void 0}get isFilterable(){return(this.filterable??!1)&&this.resizeColumnKey!==void 0}get filterValue(){let e=this.resizeColumnKey;return e===void 0?"":this.root?.filterMap[e]??""}get resizeMinWidth(){return this.minWidth}get resizeMaxWidth(){return this.maxWidth}get resizeStepPx(){return this.resizeStep}get resizeTable(){return this.root}resizeMeasureCell(){return this}get reorderColumnKey(){return this.columnKey}get reorderTable(){return this.root}reorderCell(){return this}get pinnedSide(){let e=this.columnKey;return e===void 0?void 0:this.root?.resolvedColumnPins[e]}updated(){let e=this.resize.storedWidth;this.style.width=e===void 0?"":`${e}px`,e===void 0?this.style.removeProperty("--skdx-table-column-width"):this.style.setProperty("--skdx-table-column-width",`${e}px`);let t=this.pinnedSide;t===void 0?this.style.removeProperty("--skdx-table-pin-offset"):this.style.setProperty("--skdx-table-pin-offset",`${this.root?.pinOffsets[this.columnKey]??0}px`),C(this,{"aria-sort":this.shadowRoot?.querySelector("th")?.getAttribute("aria-sort")??null,"data-column-key":this.columnKey??null,"data-pinned":t??null})}hasSlotted(e){let t=this.querySelector(e);return t!==null&&t.closest("skdx-table-header-cell")===this}ariaSortFor(e,t){return e?t==="asc"?"ascending":t==="desc"?"descending":"none":r}renderFilterInput(e,t){return d`
       <input
         type="search"
         part="filter-input"
         data-skdx-table-filter-input
         aria-label=${this.filterLabel??`Filter ${e}`}
-        data-filtered=${t===""?s:""}
+        data-filtered=${t===""?r:""}
         .value=${t}
         @input=${this.onFilterInput}
       />
-    `}renderResizer(e){return h`
+    `}renderReorderTrigger(){return d`
+      <button
+        type="button"
+        part="column-reorder-trigger"
+        data-skdx-table-reorder-trigger
+        aria-label=${this.reorderLabel}
+        data-dragging=${this.reorder.dragging?"":r}
+        @click=${this.reorder.handleClick}
+        @keydown=${this.reorder.handleKeyDown}
+        @pointerdown=${this.reorder.handlePointerDown}
+        @pointermove=${this.reorder.handlePointerMove}
+        @pointerup=${this.reorder.handlePointerUp}
+        @pointercancel=${this.reorder.handlePointerUp}
+      >
+        ${I}
+      </button>
+    `}renderPinTrigger(e){return d`
+      <button
+        type="button"
+        part="column-pin-trigger"
+        data-skdx-table-pin-trigger
+        aria-pressed=${e==="start"}
+        aria-label=${this.pinLabel}
+        data-pinned=${e??r}
+        @click=${this.togglePin}
+      >
+        ${M("start")}
+      </button>
+    `}renderResizer(e){return d`
       <span
         part="resizer"
         role="separator"
@@ -19,7 +47,7 @@ var v=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var n=(m,d,e,t
         aria-valuemax=${this.maxWidth}
         tabindex="0"
         data-skdx-table-resizer
-        data-dragging=${this.resize.dragging?"":s}
+        data-dragging=${this.resize.dragging?"":r}
         @pointerdown=${this.resize.handlePointerDown}
         @pointermove=${this.resize.handlePointerMove}
         @pointerup=${this.resize.handlePointerUp}
@@ -27,31 +55,39 @@ var v=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var n=(m,d,e,t
         @keydown=${this.resize.handleKeyDown}
         @keyup=${this.resize.handleKeyUp}
       ></span>
-    `}renderState(){let e=this.isSortable,t=this.resizeColumnKey,r=e?this.root?.sortList.find(c=>c.columnKey===t)?.direction:void 0,l=this.resizable&&t!==void 0,o=this.resize.storedWidth,u=this.isFilterable,p=this.filterValue;return{columnId:t,sortable:e,direction:r,ariaSort:this.ariaSortFor(e,r),canResize:l,width:o,style:o===void 0?s:`width:${o}px;--skdx-table-column-width:${o}px`,filterable:u,filterValue:p,ownSortButton:e&&!this.hasSlotted("skdx-table-column-header-sort-trigger"),ownResizer:l&&!this.hasSlotted("skdx-table-column-resize-trigger"),ownFilter:u&&!this.hasSlotted("skdx-table-column-header-filter-input")}}render(){let{columnId:e,direction:t,ariaSort:r,canResize:l,width:o,style:u,filterable:p,filterValue:c,ownSortButton:y,ownResizer:g,ownFilter:z}=this.renderState(),b=h`<slot @slotchange=${this.handleSlotChange}></slot>`;return h`
+    `}renderState(){let e=this.isSortable,t=this.resizeColumnKey,s=e?this.root?.sortList.find(m=>m.columnKey===t)?.direction:void 0,a=this.resizable&&t!==void 0,l=this.reorderable&&t!==void 0,p=this.pinnable&&t!==void 0,u=this.resize.storedWidth,c=this.isFilterable,g=this.filterValue;return{columnId:t,sortable:e,direction:s,ariaSort:this.ariaSortFor(e,s),canResize:a,canReorder:l,canPin:p,pinnedSide:this.pinnedSide,width:u,style:u===void 0?r:`width:${u}px;--skdx-table-column-width:${u}px`,filterable:c,filterValue:g,ownSortButton:e&&!this.hasSlotted("skdx-table-column-header-sort-trigger"),ownResizer:a&&!this.hasSlotted("skdx-table-column-resize-trigger"),ownFilter:c&&!this.hasSlotted("skdx-table-column-header-filter-input"),ownReorder:l&&!this.hasSlotted("skdx-table-column-reorder-trigger"),ownPin:p&&!this.hasSlotted("skdx-table-column-pin-trigger")}}renderDerivedControls(e){return d`
+      ${e.ownFilter?this.renderFilterInput(e.columnId,e.filterValue):r}
+      ${e.ownReorder?this.renderReorderTrigger():r}
+      ${e.ownPin?this.renderPinTrigger(e.pinnedSide):r}
+      ${e.ownResizer?this.renderResizer(e.width):r}
+    `}render(){let{columnId:e,direction:t,ariaSort:s,canResize:a,canReorder:l,canPin:p,pinnedSide:u,width:c,style:g,filterable:m,filterValue:f,ownSortButton:v,ownResizer:z,ownFilter:w,ownReorder:R,ownPin:P}=this.renderState(),y=d`<slot @slotchange=${this.handleSlotChange}></slot>`;return d`
       <th
         part="header-cell"
-        aria-sort=${r}
-        data-sort-direction=${t??s}
-        data-filterable=${p?"":s}
-        data-filtered=${p&&c!==""?"":s}
-        data-resizable=${l?"":s}
-        style=${u}
+        aria-sort=${s}
+        data-column-key=${e??r}
+        data-sort-direction=${t??r}
+        data-filterable=${m?"":r}
+        data-filtered=${m&&f!==""?"":r}
+        data-resizable=${a?"":r}
+        data-reorderable=${l?"":r}
+        data-pinnable=${p?"":r}
+        data-pinned=${u??r}
+        style=${g}
       >
-        ${y?h`
+        ${v?d`
                 <button
                   type="button"
                   part="sort-trigger"
                   data-skdx-table-sort-trigger
-                  data-sort-direction=${t??s}
+                  data-sort-direction=${t??r}
                   @click=${this.activate}
                 >
-                  ${b}
+                  ${y}
                 </button>
-              `:b}
-        ${z?this.renderFilterInput(e,c):s}
-        ${g?this.renderResizer(o):s}
+              `:y}
+        ${this.renderDerivedControls({columnId:e,filterValue:f,pinnedSide:u,width:c,ownFilter:w,ownReorder:R,ownPin:P,ownResizer:z})}
       </th>
-    `}};i.styles=[k,w`
+    `}};i.styles=[T,x`
       /* Host takes the display role, native element gives up its box — see Table.ts. */
       :host {
         display: table-cell;
@@ -60,4 +96,4 @@ var v=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var n=(m,d,e,t
       :host > th {
         display: contents;
       }
-    `],n([a({type:String,attribute:"column-key",converter:F})],i.prototype,"columnKey",2),n([a({type:Boolean})],i.prototype,"sortable",2),n([a({type:Boolean})],i.prototype,"filterable",2),n([a({type:String,attribute:"filter-label"})],i.prototype,"filterLabel",2),n([a({type:Boolean})],i.prototype,"resizable",2),n([a({type:Number,attribute:"min-width"})],i.prototype,"minWidth",2),n([a({type:Number,attribute:"max-width"})],i.prototype,"maxWidth",2),n([a({type:String,attribute:"resize-label"})],i.prototype,"resizeLabel",2),n([a({type:Number,attribute:"resize-step"})],i.prototype,"resizeStep",2),i=n([x("skdx-table-header-cell","table","header-cell")],i);export{i as SkdxTableHeaderCell};
+    `],n([o({type:String,attribute:"column-key",converter:F})],i.prototype,"columnKey",2),n([o({type:Boolean})],i.prototype,"sortable",2),n([o({type:Boolean})],i.prototype,"filterable",2),n([o({type:String,attribute:"filter-label"})],i.prototype,"filterLabel",2),n([o({type:Boolean})],i.prototype,"resizable",2),n([o({type:Boolean})],i.prototype,"reorderable",2),n([o({type:Boolean})],i.prototype,"pinnable",2),n([o({type:String,attribute:"reorder-label"})],i.prototype,"reorderLabel",2),n([o({type:String,attribute:"pin-label"})],i.prototype,"pinLabel",2),n([o({type:Number,attribute:"min-width"})],i.prototype,"minWidth",2),n([o({type:Number,attribute:"max-width"})],i.prototype,"maxWidth",2),n([o({type:String,attribute:"resize-label"})],i.prototype,"resizeLabel",2),n([o({type:Number,attribute:"resize-step"})],i.prototype,"resizeStep",2),i=n([L("skdx-table-header-cell","table","header-cell")],i);export{i as SkdxTableHeaderCell};

package/dist/table/TableRow.cjs

@@ -1,4 +1,4 @@
-"use strict";var a=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var w=(r,e)=>{for(var t in e)a(r,t,{get:e[t],enumerable:!0})},f=(r,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!v.call(r,o)&&o!==t&&a(r,o,{get:()=>e[o],enumerable:!(s=b(e,o))||s.enumerable});return r};var y=r=>f(a({},"__esModule",{value:!0}),r),h=(r,e,t,s)=>{for(var o=s>1?void 0:s?b(e,t):e,n=r.length-1,c;n>=0;n--)(c=r[n])&&(o=(s?c(e,t,o):c(o))||o);return s&&o&&a(e,t,o),o};var k={};w(k,{SkdxTableRow:()=>i});module.exports=y(k);var l=require("lit"),u=require("lit/decorators.js"),d=require("../internal/define.cjs"),p=require("./column-context.cjs");var g='button, a, input, [role="button"], [role="checkbox"], skdx-checkbox, skdx-table-row-select-checkbox, skdx-table-expand-trigger',i=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this._syncRow();this.handleClick=t=>{!this._selectable||t.target.closest?.(g)||this.root?.toggleRow(this.rowId,t.shiftKey)}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-table"),this.root?.addEventListener(p.TABLE_INTERNAL_UPDATE,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(p.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}updated(){let t=this.root;t?(0,d.whenUpgraded)(t,()=>this._syncRow()):this._syncRow()}_syncRow(){let t=this.shadowRoot?.querySelector("tr");this.rowId!==void 0&&(this.root?.isRowSelected(this.rowId)??!1)?t?.setAttribute("data-state","selected"):t?.removeAttribute("data-state"),this._selectable?t?.setAttribute("data-row-id",this.rowId):t?.removeAttribute("data-row-id")}get _selectable(){return(this.root?.selectionMode??"none")!=="none"&&this.rowId!==void 0}render(){return l.html`<tr
+"use strict";var a=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var y=(r,t)=>{for(var e in t)a(r,e,{get:t[e],enumerable:!0})},w=(r,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of m(t))!f.call(r,o)&&o!==e&&a(r,o,{get:()=>t[o],enumerable:!(s=v(t,o))||s.enumerable});return r};var g=r=>w(a({},"__esModule",{value:!0}),r),n=(r,t,e,s)=>{for(var o=s>1?void 0:s?v(t,e):t,c=r.length-1,h;c>=0;c--)(h=r[c])&&(o=(s?h(t,e,o):h(o))||o);return s&&o&&a(t,e,o),o};var E={};y(E,{SkdxTableRow:()=>i});module.exports=g(E);var l=require("lit"),p=require("lit/decorators.js"),d=require("../internal/define.cjs"),b=require("../internal/part.cjs"),u=require("./column-context.cjs");var k='button, a, input, [role="button"], [role="checkbox"], skdx-checkbox, skdx-table-row-select-checkbox, skdx-table-expand-trigger',i=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this._syncRow();this.handleClick=e=>{!this._selectable||e.target.closest?.(k)||this.root?.toggleRow(this.rowId,e.shiftKey)}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-table"),this.root?.addEventListener(u.TABLE_INTERNAL_UPDATE,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(u.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}updated(){(0,b.reflectHostState)(this,{"data-level":this.level===void 0?null:String(this.level)}),this.level===void 0?this.style.removeProperty("--skdx-table-row-level"):this.style.setProperty("--skdx-table-row-level",String(this.level));let e=this.root;e?(0,d.whenUpgraded)(e,()=>this._syncRow()):this._syncRow()}_syncRow(){let e=this.shadowRoot?.querySelector("tr");this.rowId!==void 0&&(this.root?.isRowSelected(this.rowId)??!1)?e?.setAttribute("data-state","selected"):e?.removeAttribute("data-state"),this._selectable?e?.setAttribute("data-row-id",this.rowId):e?.removeAttribute("data-row-id")}get _selectable(){return(this.root?.selectionMode??"none")!=="none"&&this.rowId!==void 0}render(){return l.html`<tr
       part="row"
       @click=${this.handleClick}
     >
@@ -12,4 +12,4 @@
     :host > tr {
       display: contents;
     }
-  `,h([(0,u.property)({type:String,attribute:"row-id",reflect:!0})],i.prototype,"rowId",2),i=h([(0,d.customElement)("skdx-table-row","table","row")],i);0&&(module.exports={SkdxTableRow});
+  `,n([(0,p.property)({type:String,attribute:"row-id",reflect:!0})],i.prototype,"rowId",2),n([(0,p.property)({type:Number})],i.prototype,"level",2),i=n([(0,d.customElement)("skdx-table-row","table","row")],i);0&&(module.exports={SkdxTableRow});

package/dist/table/TableRow.d.cts

@@ -11,6 +11,11 @@ export declare class SkdxTableRow extends LitElement {
      * @default undefined
      */
     rowId?: string;
+    /**
+     * This row's tree depth, `0` at the top level, published as `data-level` for the skin's indent.
+     * @default undefined
+     */
+    level?: number;
     private root;
     private readonly onRootUpdate;
     connectedCallback(): void;

package/dist/table/TableRow.d.ts

@@ -11,6 +11,11 @@ export declare class SkdxTableRow extends LitElement {
      * @default undefined
      */
     rowId?: string;
+    /**
+     * This row's tree depth, `0` at the top level, published as `data-level` for the skin's indent.
+     * @default undefined
+     */
+    level?: number;
     private root;
     private readonly onRootUpdate;
     connectedCallback(): void;

package/dist/table/TableRow.js

@@ -1,9 +1,9 @@
-var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(i,s,t,o)=>{for(var e=o>1?void 0:o?h(s,t):s,l=i.length-1,a;l>=0;l--)(a=i[l])&&(e=(o?a(s,t,e):a(e))||e);return o&&e&&c(s,t,e),e};import{css as p,html as b,LitElement as u}from"lit";import{property as m}from"lit/decorators.js";import{customElement as v,whenUpgraded as w}from"../internal/define.js";import{TABLE_INTERNAL_UPDATE as n}from"./column-context.js";var f='button, a, input, [role="button"], [role="checkbox"], skdx-checkbox, skdx-table-row-select-checkbox, skdx-table-expand-trigger',r=class extends u{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this._syncRow();this.handleClick=t=>{!this._selectable||t.target.closest?.(f)||this.root?.toggleRow(this.rowId,t.shiftKey)}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-table"),this.root?.addEventListener(n,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(n,this.onRootUpdate),super.disconnectedCallback()}updated(){let t=this.root;t?w(t,()=>this._syncRow()):this._syncRow()}_syncRow(){let t=this.shadowRoot?.querySelector("tr");this.rowId!==void 0&&(this.root?.isRowSelected(this.rowId)??!1)?t?.setAttribute("data-state","selected"):t?.removeAttribute("data-state"),this._selectable?t?.setAttribute("data-row-id",this.rowId):t?.removeAttribute("data-row-id")}get _selectable(){return(this.root?.selectionMode??"none")!=="none"&&this.rowId!==void 0}render(){return b`<tr
+var h=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(l,s,e,r)=>{for(var t=r>1?void 0:r?p(s,e):s,a=l.length-1,n;a>=0;a--)(n=l[a])&&(t=(r?n(s,e,t):n(t))||t);return r&&t&&h(s,e,t),t};import{css as u,html as v,LitElement as b}from"lit";import{property as d}from"lit/decorators.js";import{customElement as m,whenUpgraded as f}from"../internal/define.js";import{reflectHostState as y}from"../internal/part.js";import{TABLE_INTERNAL_UPDATE as c}from"./column-context.js";var w='button, a, input, [role="button"], [role="checkbox"], skdx-checkbox, skdx-table-row-select-checkbox, skdx-table-expand-trigger',o=class extends b{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this._syncRow();this.handleClick=e=>{!this._selectable||e.target.closest?.(w)||this.root?.toggleRow(this.rowId,e.shiftKey)}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-table"),this.root?.addEventListener(c,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(c,this.onRootUpdate),super.disconnectedCallback()}updated(){y(this,{"data-level":this.level===void 0?null:String(this.level)}),this.level===void 0?this.style.removeProperty("--skdx-table-row-level"):this.style.setProperty("--skdx-table-row-level",String(this.level));let e=this.root;e?f(e,()=>this._syncRow()):this._syncRow()}_syncRow(){let e=this.shadowRoot?.querySelector("tr");this.rowId!==void 0&&(this.root?.isRowSelected(this.rowId)??!1)?e?.setAttribute("data-state","selected"):e?.removeAttribute("data-state"),this._selectable?e?.setAttribute("data-row-id",this.rowId):e?.removeAttribute("data-row-id")}get _selectable(){return(this.root?.selectionMode??"none")!=="none"&&this.rowId!==void 0}render(){return v`<tr
       part="row"
       @click=${this.handleClick}
     >
       <slot></slot>
-    </tr>`}};r.styles=p`
+    </tr>`}};o.styles=u`
     /* Host takes the display role, native element gives up its box — see Table.ts. */
     :host {
       display: table-row;
@@ -12,4 +12,4 @@ var c=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(i,s,t,o
     :host > tr {
       display: contents;
     }
-  `,d([m({type:String,attribute:"row-id",reflect:!0})],r.prototype,"rowId",2),r=d([v("skdx-table-row","table","row")],r);export{r as SkdxTableRow};
+  `,i([d({type:String,attribute:"row-id",reflect:!0})],o.prototype,"rowId",2),i([d({type:Number})],o.prototype,"level",2),o=i([m("skdx-table-row","table","row")],o);export{o as SkdxTableRow};

package/dist/table/TableTreeTrigger.cjs

@@ -0,0 +1,13 @@
+"use strict";var l=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var y=(i,e)=>{for(var t in e)l(i,t,{get:e[t],enumerable:!0})},C=(i,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of E(e))!g.call(i,o)&&o!==t&&l(i,o,{get:()=>e[o],enumerable:!(r=m(e,o))||r.enumerable});return i};var R=i=>C(l({},"__esModule",{value:!0}),i),s=(i,e,t,r)=>{for(var o=r>1?void 0:r?m(e,t):e,h=i.length-1,c;h>=0;h--)(c=i[h])&&(o=(r?c(e,t,o):c(o))||o);return r&&o&&l(e,t,o),o};var x={};y(x,{SkdxTableTreeTrigger:()=>n});module.exports=R(x);var a=require("lit"),u=require("lit/decorators.js"),b=require("../internal/authored.cjs"),p=require("../internal/define.cjs"),v=require("../internal/glyphs.cjs"),f=require("../internal/light-dom-styles.cjs"),d=require("./column-context.cjs");var n=class extends a.LitElement{constructor(){super(...arguments);this.rowId="";this.label="";this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=t=>{t.stopPropagation(),(0,d.liveTableRoot)(this.root)?.toggleNode(this.rowId)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.authoredContent??(this.authoredContent=(0,b.hasAuthoredContent)(this)),this.root=this.closest("skdx-table"),this.root&&(0,p.whenUpgraded)(this.root,this.onRootUpdate),this.root?.addEventListener(d.TABLE_INTERNAL_UPDATE,this.onRootUpdate),(0,f.installLightDomStyles)()}disconnectedCallback(){this.root?.removeEventListener(d.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}focus(t){this.querySelector(":scope > button")?.focus(t)}firstUpdated(){let t=this.querySelector(":scope > button");if(!t)return;let r=this.firstChild;for(;r&&r!==t;){let o=r.nextSibling;r.nodeType!==Node.COMMENT_NODE&&t.append(r),r=o}}render(){let t=(0,d.liveTableRoot)(this.root)?.isNodeExpanded(this.rowId)??!1;return a.html`
+      <button
+        part="tree-trigger"
+        type="button"
+        data-skdx-table-tree-trigger
+        aria-expanded=${t}
+        aria-label=${this.label||a.nothing}
+        data-state=${t?"expanded":"collapsed"}
+        @click=${this.handleClick}
+      >
+        <slot>${this.authoredContent?a.nothing:v.chevronRightGlyph}</slot>
+      </button>
+    `}};s([(0,u.property)({type:String,attribute:"row-id"})],n.prototype,"rowId",2),s([(0,u.property)({type:String})],n.prototype,"label",2),n=s([(0,p.customElement)("skdx-table-tree-trigger","table","tree-trigger")],n);0&&(module.exports={SkdxTableTreeTrigger});

package/dist/table/TableTreeTrigger.d.cts

@@ -0,0 +1,47 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Disclosure button inside a tree parent's first cell, showing or hiding that row's child rows.
+ *
+ * Carries no `aria-controls`: the rows it reveals are siblings of its own row, not one element.
+ *
+ * @csspart tree-trigger - The native `<button>` element. This element renders into the light
+ * DOM and `::part()` only matches inside a shadow root, so the `part` attribute is inert here.
+ * Style it as an ordinary descendant instead: `skdx-table-tree-trigger > button { … }`.
+ *
+ * @example
+ * ```html
+ * <skdx-table-row row-id="1" level="0">
+ *   <skdx-table-cell>
+ *     <skdx-table-tree-trigger row-id="1" label="Children of Aster"></skdx-table-tree-trigger>
+ *     Aster
+ *   </skdx-table-cell>
+ * </skdx-table-row>
+ * ```
+ */
+export declare class SkdxTableTreeTrigger extends LitElement {
+    /** Light DOM, so the trigger sits inline with the cell's own text. */
+    protected createRenderRoot(): HTMLElement;
+    /** Id of the tree parent this trigger expands, as it appears in `expandedNodeIds`. */
+    rowId: string;
+    /**
+     * Accessible name for the button. The role lives on the rendered `<button>`,
+     * not this host, so an `aria-label` written here would name neither.
+     * @default undefined
+     */
+    label: string;
+    private root;
+    private readonly onRootUpdate;
+    private authoredContent?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Focus lands on the inner button, which is where the button role is. */
+    focus(options?: FocusOptions): void;
+    protected firstUpdated(): void;
+    private readonly handleClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-tree-trigger': SkdxTableTreeTrigger;
+    }
+}

package/dist/table/TableTreeTrigger.d.ts

@@ -0,0 +1,47 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Disclosure button inside a tree parent's first cell, showing or hiding that row's child rows.
+ *
+ * Carries no `aria-controls`: the rows it reveals are siblings of its own row, not one element.
+ *
+ * @csspart tree-trigger - The native `<button>` element. This element renders into the light
+ * DOM and `::part()` only matches inside a shadow root, so the `part` attribute is inert here.
+ * Style it as an ordinary descendant instead: `skdx-table-tree-trigger > button { … }`.
+ *
+ * @example
+ * ```html
+ * <skdx-table-row row-id="1" level="0">
+ *   <skdx-table-cell>
+ *     <skdx-table-tree-trigger row-id="1" label="Children of Aster"></skdx-table-tree-trigger>
+ *     Aster
+ *   </skdx-table-cell>
+ * </skdx-table-row>
+ * ```
+ */
+export declare class SkdxTableTreeTrigger extends LitElement {
+    /** Light DOM, so the trigger sits inline with the cell's own text. */
+    protected createRenderRoot(): HTMLElement;
+    /** Id of the tree parent this trigger expands, as it appears in `expandedNodeIds`. */
+    rowId: string;
+    /**
+     * Accessible name for the button. The role lives on the rendered `<button>`,
+     * not this host, so an `aria-label` written here would name neither.
+     * @default undefined
+     */
+    label: string;
+    private root;
+    private readonly onRootUpdate;
+    private authoredContent?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Focus lands on the inner button, which is where the button role is. */
+    focus(options?: FocusOptions): void;
+    protected firstUpdated(): void;
+    private readonly handleClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-tree-trigger': SkdxTableTreeTrigger;
+    }
+}

package/dist/table/TableTreeTrigger.js

@@ -0,0 +1,13 @@
+var u=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var n=(a,i,t,e)=>{for(var o=e>1?void 0:e?m(i,t):i,d=a.length-1,l;d>=0;d--)(l=a[d])&&(o=(e?l(i,t,o):l(o))||o);return e&&o&&u(i,t,o),o};import{html as b,LitElement as v,nothing as s}from"lit";import{property as p}from"lit/decorators.js";import{hasAuthoredContent as f}from"../internal/authored.js";import{customElement as E,whenUpgraded as g}from"../internal/define.js";import{chevronRightGlyph as y}from"../internal/glyphs.js";import{installLightDomStyles as C}from"../internal/light-dom-styles.js";import{liveTableRoot as h,TABLE_INTERNAL_UPDATE as c}from"./column-context.js";var r=class extends v{constructor(){super(...arguments);this.rowId="";this.label="";this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=t=>{t.stopPropagation(),h(this.root)?.toggleNode(this.rowId)}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this.authoredContent??(this.authoredContent=f(this)),this.root=this.closest("skdx-table"),this.root&&g(this.root,this.onRootUpdate),this.root?.addEventListener(c,this.onRootUpdate),C()}disconnectedCallback(){this.root?.removeEventListener(c,this.onRootUpdate),super.disconnectedCallback()}focus(t){this.querySelector(":scope > button")?.focus(t)}firstUpdated(){let t=this.querySelector(":scope > button");if(!t)return;let e=this.firstChild;for(;e&&e!==t;){let o=e.nextSibling;e.nodeType!==Node.COMMENT_NODE&&t.append(e),e=o}}render(){let t=h(this.root)?.isNodeExpanded(this.rowId)??!1;return b`
+      <button
+        part="tree-trigger"
+        type="button"
+        data-skdx-table-tree-trigger
+        aria-expanded=${t}
+        aria-label=${this.label||s}
+        data-state=${t?"expanded":"collapsed"}
+        @click=${this.handleClick}
+      >
+        <slot>${this.authoredContent?s:y}</slot>
+      </button>
+    `}};n([p({type:String,attribute:"row-id"})],r.prototype,"rowId",2),n([p({type:String})],r.prototype,"label",2),r=n([E("skdx-table-tree-trigger","table","tree-trigger")],r);export{r as SkdxTableTreeTrigger};

package/dist/table/column-context.cjs

@@ -1 +1 @@
-"use strict";var r=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(e,l)=>{for(var n in l)r(e,n,{get:l[n],enumerable:!0})},x=(e,l,n,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let t of i(l))!u.call(e,t)&&t!==n&&r(e,t,{get:()=>l[t],enumerable:!(o=a(l,t))||o.enumerable});return e};var T=e=>x(r({},"__esModule",{value:!0}),e);var m={};b(m,{TABLE_INTERNAL_UPDATE:()=>s,findHeaderCell:()=>p,findTableRoot:()=>f,liveTableRoot:()=>k,optionalStringAttribute:()=>S});module.exports=T(m);var d=require("../internal/closest.cjs");function p(e){return(0,d.closestThroughShadow)(e,"skdx-table-header-cell")}function f(e){return(0,d.closestThroughShadow)(e,"skdx-table")}function k(e){return typeof e?.isRowExpanded=="function"?e:null}var s="skdx-table-internal-update",S={fromAttribute:e=>e??void 0};0&&(module.exports={TABLE_INTERNAL_UPDATE,findHeaderCell,findTableRoot,liveTableRoot,optionalStringAttribute});
+"use strict";var r=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var s=(e,t)=>{for(var n in t)r(e,n,{get:t[n],enumerable:!0})},x=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of p(t))!u.call(e,l)&&l!==n&&r(e,l,{get:()=>t[l],enumerable:!(o=i(t,l))||o.enumerable});return e};var T=e=>x(r({},"__esModule",{value:!0}),e);var h={};s(h,{REORDER_GRIP:()=>R,TABLE_INTERNAL_UPDATE:()=>k,findHeaderCell:()=>b,findTableRoot:()=>f,liveTableRoot:()=>m,optionalStringAttribute:()=>S,pinGlyph:()=>c});module.exports=T(h);var a=require("lit"),d=require("../internal/closest.cjs");function b(e){return(0,d.closestThroughShadow)(e,"skdx-table-header-cell")}function f(e){return(0,d.closestThroughShadow)(e,"skdx-table")}function m(e){return typeof e?.isRowExpanded=="function"?e:null}var k="skdx-table-internal-update",R=a.html`<span aria-hidden="true">⠿</span>`;function c(e){return a.html`<span aria-hidden="true">${e==="end"?"\u22A2":"\u22A3"}</span>`}var S={fromAttribute:e=>e??void 0};0&&(module.exports={REORDER_GRIP,TABLE_INTERNAL_UPDATE,findHeaderCell,findTableRoot,liveTableRoot,optionalStringAttribute,pinGlyph});

package/dist/table/column-context.d.cts

@@ -1,3 +1,4 @@
+import { type TemplateResult } from 'lit';
 import type { SkdxTable } from './Table.cjs';
 import type { SkdxTableHeaderCell } from './TableHeaderCell.cjs';
 /** @internal Finds the enclosing header cell across shadow boundaries; null when used outside one. */
@@ -8,6 +9,10 @@ export declare function findTableRoot(el: Element): SkdxTable | null;
 export declare function liveTableRoot(root: SkdxTable | null): SkdxTable | null;
 /** @internal The broadcast every table part subscribes to for re-render. */
 export declare const TABLE_INTERNAL_UPDATE = "skdx-table-internal-update";
+/** @internal The grip a reorder trigger draws when nothing is slotted. */
+export declare const REORDER_GRIP: TemplateResult;
+/** @internal The glyph a pin trigger draws for each edge when nothing is slotted. */
+export declare function pinGlyph(side: 'start' | 'end'): TemplateResult;
 /** @internal Attribute converter mapping null to undefined for optional attributes. */
 export declare const optionalStringAttribute: {
     fromAttribute: (value: string | null) => string | undefined;

package/dist/table/column-context.d.ts

@@ -1,3 +1,4 @@
+import { type TemplateResult } from 'lit';
 import type { SkdxTable } from './Table.js';
 import type { SkdxTableHeaderCell } from './TableHeaderCell.js';
 /** @internal Finds the enclosing header cell across shadow boundaries; null when used outside one. */
@@ -8,6 +9,10 @@ export declare function findTableRoot(el: Element): SkdxTable | null;
 export declare function liveTableRoot(root: SkdxTable | null): SkdxTable | null;
 /** @internal The broadcast every table part subscribes to for re-render. */
 export declare const TABLE_INTERNAL_UPDATE = "skdx-table-internal-update";
+/** @internal The grip a reorder trigger draws when nothing is slotted. */
+export declare const REORDER_GRIP: TemplateResult;
+/** @internal The glyph a pin trigger draws for each edge when nothing is slotted. */
+export declare function pinGlyph(side: 'start' | 'end'): TemplateResult;
 /** @internal Attribute converter mapping null to undefined for optional attributes. */
 export declare const optionalStringAttribute: {
     fromAttribute: (value: string | null) => string | undefined;

package/dist/table/column-context.js

@@ -1 +1 @@
-import{closestThroughShadow as l}from"../internal/closest.js";function n(e){return l(e,"skdx-table-header-cell")}function r(e){return l(e,"skdx-table")}function d(e){return typeof e?.isRowExpanded=="function"?e:null}var o="skdx-table-internal-update",a={fromAttribute:e=>e??void 0};export{o as TABLE_INTERNAL_UPDATE,n as findHeaderCell,r as findTableRoot,d as liveTableRoot,a as optionalStringAttribute};
+import{html as t}from"lit";import{closestThroughShadow as l}from"../internal/closest.js";function a(e){return l(e,"skdx-table-header-cell")}function d(e){return l(e,"skdx-table")}function o(e){return typeof e?.isRowExpanded=="function"?e:null}var i="skdx-table-internal-update",p=t`<span aria-hidden="true">⠿</span>`;function u(e){return t`<span aria-hidden="true">${e==="end"?"\u22A2":"\u22A3"}</span>`}var s={fromAttribute:e=>e??void 0};export{p as REORDER_GRIP,i as TABLE_INTERNAL_UPDATE,a as findHeaderCell,d as findTableRoot,o as liveTableRoot,s as optionalStringAttribute,u as pinGlyph};

package/dist/table/column-reorder.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var c=(i,e)=>{for(var t in e)l(i,t,{get:e[t],enumerable:!0})},p=(i,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of u(e))!h.call(i,o)&&o!==t&&l(i,o,{get:()=>e[o],enumerable:!(r=a(e,o))||r.enumerable});return i};var m=i=>p(l({},"__esModule",{value:!0}),i);var g={};c(g,{ColumnReorderController:()=>d});module.exports=m(g);var s=require("../internal/direction.cjs"),d=class{constructor(e){this.host=e;this.dragging=!1;this.drag=null;this.onDocumentKeyDown=e=>{e.key==="Escape"&&this.endDrag()};this.handleKeyDown=e=>{let t=this.host.reorderTable?.orderedColumnKeys().length??0,r=this.currentIndex();if(r===-1)return;let o=(0,s.directionalKey)(e.key,e.currentTarget),n;if(o==="ArrowLeft")n=r-1;else if(o==="ArrowRight")n=r+1;else if(e.key==="Home")n=0;else if(e.key==="End")n=t-1;else return;e.preventDefault(),e.stopPropagation(),!(n<0||n>=t||n===r)&&this.move(n)};this.handlePointerDown=e=>{e.button===0&&(e.preventDefault(),e.stopPropagation(),this.drag={pointerId:e.pointerId,toIndex:null},this.dragging=!0,this.startEscapeWatch(),e.currentTarget.setPointerCapture?.(e.pointerId),this.host.requestUpdate())};this.handlePointerMove=e=>{let t=this.drag;if(!t)return;let r=this.headerCells().findIndex(o=>{let n=o.getBoundingClientRect();return e.clientX>=n.left&&e.clientX<=n.right});r!==-1&&(t.toIndex=r)};this.handlePointerUp=e=>{let t=this.endDrag();if(!t)return;let r=e.currentTarget;r.hasPointerCapture?.(t.pointerId)&&r.releasePointerCapture(t.pointerId),t.toIndex!==null&&t.toIndex!==this.currentIndex()&&this.move(t.toIndex)};this.handleClick=e=>{e.stopPropagation()};e.addController(this)}hostDisconnected(){this.stopEscapeWatch(),this.drag=null,this.dragging=!1}headerCells(){let e=this.host.reorderCell()?.closest("skdx-table-row");return e==null?[]:[...e.querySelectorAll("skdx-table-header-cell[column-key]")]}columnLabel(){let e=this.host.reorderColumnKey;return this.host.reorderCell()?.textContent?.trim()||e}move(e){let t=this.host.reorderColumnKey;t!==void 0&&this.host.reorderTable?.moveColumn(t,e,this.columnLabel())}currentIndex(){let e=this.host.reorderColumnKey;return e===void 0?-1:this.host.reorderTable?.orderedColumnKeys().indexOf(e)??-1}startEscapeWatch(){document.addEventListener("keydown",this.onDocumentKeyDown)}stopEscapeWatch(){document.removeEventListener("keydown",this.onDocumentKeyDown)}endDrag(){let e=this.drag;return e?(this.drag=null,this.dragging=!1,this.stopEscapeWatch(),this.host.requestUpdate(),e):null}};0&&(module.exports={ColumnReorderController});

package/dist/table/column-reorder.d.cts

@@ -0,0 +1,39 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { SkdxTable } from './Table.cjs';
+/**
+ * @internal Interface for column-reorder hosts. Both `<skdx-table-header-cell
+ * reorderable>` and `<skdx-table-column-reorder-trigger>` implement it, so
+ * drag/keyboard behaviour is written once.
+ */
+export interface ColumnReorderTarget {
+    /** Which column this trigger moves, or `undefined` if it cannot move one. */
+    readonly reorderColumnKey: string | undefined;
+    readonly reorderTable: SkdxTable | null;
+    /** The header cell this trigger belongs to — the drop targets are its siblings. */
+    reorderCell(): HTMLElement | null | undefined;
+}
+type Host = ReactiveControllerHost & ColumnReorderTarget;
+export declare class ColumnReorderController implements ReactiveController {
+    private readonly host;
+    /** True while a pointer drag is in flight — the `data-dragging` styling hook. */
+    dragging: boolean;
+    private drag;
+    constructor(host: Host);
+    hostDisconnected(): void;
+    /** Header cells of this trigger's own row, in DOM order — the drop targets. */
+    private headerCells;
+    private columnLabel;
+    private move;
+    private currentIndex;
+    private readonly onDocumentKeyDown;
+    private startEscapeWatch;
+    private stopEscapeWatch;
+    private endDrag;
+    readonly handleKeyDown: (event: KeyboardEvent) => void;
+    readonly handlePointerDown: (event: PointerEvent) => void;
+    readonly handlePointerMove: (event: PointerEvent) => void;
+    readonly handlePointerUp: (event: PointerEvent) => void;
+    /** A move is never a sort or a selection. */
+    readonly handleClick: (event: MouseEvent) => void;
+}
+export {};

package/dist/table/column-reorder.d.ts

@@ -0,0 +1,39 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { SkdxTable } from './Table.js';
+/**
+ * @internal Interface for column-reorder hosts. Both `<skdx-table-header-cell
+ * reorderable>` and `<skdx-table-column-reorder-trigger>` implement it, so
+ * drag/keyboard behaviour is written once.
+ */
+export interface ColumnReorderTarget {
+    /** Which column this trigger moves, or `undefined` if it cannot move one. */
+    readonly reorderColumnKey: string | undefined;
+    readonly reorderTable: SkdxTable | null;
+    /** The header cell this trigger belongs to — the drop targets are its siblings. */
+    reorderCell(): HTMLElement | null | undefined;
+}
+type Host = ReactiveControllerHost & ColumnReorderTarget;
+export declare class ColumnReorderController implements ReactiveController {
+    private readonly host;
+    /** True while a pointer drag is in flight — the `data-dragging` styling hook. */
+    dragging: boolean;
+    private drag;
+    constructor(host: Host);
+    hostDisconnected(): void;
+    /** Header cells of this trigger's own row, in DOM order — the drop targets. */
+    private headerCells;
+    private columnLabel;
+    private move;
+    private currentIndex;
+    private readonly onDocumentKeyDown;
+    private startEscapeWatch;
+    private stopEscapeWatch;
+    private endDrag;
+    readonly handleKeyDown: (event: KeyboardEvent) => void;
+    readonly handlePointerDown: (event: PointerEvent) => void;
+    readonly handlePointerMove: (event: PointerEvent) => void;
+    readonly handlePointerUp: (event: PointerEvent) => void;
+    /** A move is never a sort or a selection. */
+    readonly handleClick: (event: MouseEvent) => void;
+}
+export {};

package/dist/table/column-reorder.js

@@ -0,0 +1 @@
+import{directionalKey as l}from"../internal/direction.js";var i=class{constructor(e){this.host=e;this.dragging=!1;this.drag=null;this.onDocumentKeyDown=e=>{e.key==="Escape"&&this.endDrag()};this.handleKeyDown=e=>{let t=this.host.reorderTable?.orderedColumnKeys().length??0,n=this.currentIndex();if(n===-1)return;let o=l(e.key,e.currentTarget),r;if(o==="ArrowLeft")r=n-1;else if(o==="ArrowRight")r=n+1;else if(e.key==="Home")r=0;else if(e.key==="End")r=t-1;else return;e.preventDefault(),e.stopPropagation(),!(r<0||r>=t||r===n)&&this.move(r)};this.handlePointerDown=e=>{e.button===0&&(e.preventDefault(),e.stopPropagation(),this.drag={pointerId:e.pointerId,toIndex:null},this.dragging=!0,this.startEscapeWatch(),e.currentTarget.setPointerCapture?.(e.pointerId),this.host.requestUpdate())};this.handlePointerMove=e=>{let t=this.drag;if(!t)return;let n=this.headerCells().findIndex(o=>{let r=o.getBoundingClientRect();return e.clientX>=r.left&&e.clientX<=r.right});n!==-1&&(t.toIndex=n)};this.handlePointerUp=e=>{let t=this.endDrag();if(!t)return;let n=e.currentTarget;n.hasPointerCapture?.(t.pointerId)&&n.releasePointerCapture(t.pointerId),t.toIndex!==null&&t.toIndex!==this.currentIndex()&&this.move(t.toIndex)};this.handleClick=e=>{e.stopPropagation()};e.addController(this)}hostDisconnected(){this.stopEscapeWatch(),this.drag=null,this.dragging=!1}headerCells(){let e=this.host.reorderCell()?.closest("skdx-table-row");return e==null?[]:[...e.querySelectorAll("skdx-table-header-cell[column-key]")]}columnLabel(){let e=this.host.reorderColumnKey;return this.host.reorderCell()?.textContent?.trim()||e}move(e){let t=this.host.reorderColumnKey;t!==void 0&&this.host.reorderTable?.moveColumn(t,e,this.columnLabel())}currentIndex(){let e=this.host.reorderColumnKey;return e===void 0?-1:this.host.reorderTable?.orderedColumnKeys().indexOf(e)??-1}startEscapeWatch(){document.addEventListener("keydown",this.onDocumentKeyDown)}stopEscapeWatch(){document.removeEventListener("keydown",this.onDocumentKeyDown)}endDrag(){let e=this.drag;return e?(this.drag=null,this.dragging=!1,this.stopEscapeWatch(),this.host.requestUpdate(),e):null}};export{i as ColumnReorderController};

package/dist/table/index.cjs

@@ -1 +1 @@
-"use strict";var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(o,e)=>{for(var l in e)r(o,l,{get:e[l],enumerable:!0})},i=(o,e,l,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of d(e))!m.call(o,t)&&t!==l&&r(o,t,{get:()=>e[t],enumerable:!(a=x(e,t))||a.enumerable});return o};var c=o=>i(r({},"__esModule",{value:!0}),o);var k={};f(k,{SkdxTable:()=>S.SkdxTable,SkdxTableCell:()=>T.SkdxTableCell,SkdxTableRow:()=>b.SkdxTableRow,defaultRowId:()=>p.defaultRowId});module.exports=c(k);var S=require("./Table.cjs"),b=require("./TableRow.cjs"),T=require("./TableCell.cjs"),p=require("./TableAnatomy.cjs");0&&(module.exports={SkdxTable,SkdxTableCell,SkdxTableRow,defaultRowId});
+"use strict";var r=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var f=(l,e)=>{for(var t in e)r(l,t,{get:e[t],enumerable:!0})},i=(l,e,t,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of d(e))!m.call(l,o)&&o!==t&&r(l,o,{get:()=>e[o],enumerable:!(a=x(e,o))||a.enumerable});return l};var n=l=>i(r({},"__esModule",{value:!0}),l);var c={};f(c,{SkdxTable:()=>S.SkdxTable,SkdxTableCell:()=>T.SkdxTableCell,SkdxTableRow:()=>b.SkdxTableRow,defaultRowId:()=>p.defaultRowId});module.exports=n(c);var S=require("./Table.cjs"),b=require("./TableRow.cjs"),T=require("./TableCell.cjs"),p=require("./TableAnatomy.cjs");0&&(module.exports={SkdxTable,SkdxTableCell,SkdxTableRow,defaultRowId});

package/dist/table/index.d.cts

@@ -2,4 +2,4 @@ export { SkdxTable } from './Table.cjs';
 export { SkdxTableRow } from './TableRow.cjs';
 export { SkdxTableCell } from './TableCell.cjs';
 export { defaultRowId, type SkdxTableColumn } from './TableAnatomy.cjs';
-export type { SortDirection, TableSort, TableSortState, TableFilterState, TableSelectAllScope, TableSelectionMode, TableColumnWidths, } from './types.cjs';
+export type { SortDirection, TableSort, TableSortState, TableFilterState, TableSelectAllScope, TableSelectionMode, TableColumnWidths, TableColumnPins, } from './types.cjs';

package/dist/table/index.d.ts

@@ -2,4 +2,4 @@ export { SkdxTable } from './Table.js';
 export { SkdxTableRow } from './TableRow.js';
 export { SkdxTableCell } from './TableCell.js';
 export { defaultRowId, type SkdxTableColumn } from './TableAnatomy.js';
-export type { SortDirection, TableSort, TableSortState, TableFilterState, TableSelectAllScope, TableSelectionMode, TableColumnWidths, } from './types.js';
+export type { SortDirection, TableSort, TableSortState, TableFilterState, TableSelectAllScope, TableSelectionMode, TableColumnWidths, TableColumnPins, } from './types.js';

package/dist/table/index.js

@@ -1 +1 @@
-import{SkdxTable as t}from"./Table.js";import{SkdxTableRow as r}from"./TableRow.js";import{SkdxTableCell as S}from"./TableCell.js";import{defaultRowId as T}from"./TableAnatomy.js";export{t as SkdxTable,S as SkdxTableCell,r as SkdxTableRow,T as defaultRowId};
+import{SkdxTable as o}from"./Table.js";import{SkdxTableRow as r}from"./TableRow.js";import{SkdxTableCell as S}from"./TableCell.js";import{defaultRowId as T}from"./TableAnatomy.js";export{o as SkdxTable,S as SkdxTableCell,r as SkdxTableRow,T as defaultRowId};

package/dist/table/primitives.cjs

@@ -1 +1 @@
-"use strict";var t=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var R=(r,e)=>{for(var x in e)t(r,x,{get:e[x],enumerable:!0})},h=(r,e,x,a)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of H(e))!E.call(r,o)&&o!==x&&t(r,o,{get:()=>e[o],enumerable:!(a=u(e,o))||a.enumerable});return r};var w=r=>h(t({},"__esModule",{value:!0}),r);var y={};R(y,{SkdxTableBody:()=>p.SkdxTableBody,SkdxTableCaption:()=>b.SkdxTableCaption,SkdxTableColumnHeaderFilterInput:()=>i.SkdxTableColumnHeaderFilterInput,SkdxTableColumnHeaderSortTrigger:()=>n.SkdxTableColumnHeaderSortTrigger,SkdxTableColumnResizeTrigger:()=>g.SkdxTableColumnResizeTrigger,SkdxTableEmpty:()=>f.SkdxTableEmpty,SkdxTableExpandTrigger:()=>T.SkdxTableExpandTrigger,SkdxTableExpandedRow:()=>k.SkdxTableExpandedRow,SkdxTableFooter:()=>S.SkdxTableFooter,SkdxTableHeader:()=>d.SkdxTableHeader,SkdxTableHeaderCell:()=>m.SkdxTableHeaderCell,SkdxTableRowSelectCheckbox:()=>c.SkdxTableRowSelectCheckbox,SkdxTableSelectAllCheckbox:()=>l.SkdxTableSelectAllCheckbox,SkdxTableSortIndicator:()=>C.SkdxTableSortIndicator,defaultSelectAllLabel:()=>l.defaultSelectAllLabel});module.exports=w(y);var d=require("./TableHeader.cjs"),p=require("./TableBody.cjs"),S=require("./TableFooter.cjs"),m=require("./TableHeaderCell.cjs"),b=require("./TableCaption.cjs"),T=require("./TableExpandTrigger.cjs"),k=require("./TableExpandedRow.cjs"),f=require("./TableEmpty.cjs"),n=require("./TableColumnHeaderSortTrigger.cjs"),i=require("./TableColumnHeaderFilterInput.cjs"),C=require("./TableSortIndicator.cjs"),l=require("./TableSelectAllCheckbox.cjs"),c=require("./TableRowSelectCheckbox.cjs"),g=require("./TableColumnResizeTrigger.cjs");0&&(module.exports={SkdxTableBody,SkdxTableCaption,SkdxTableColumnHeaderFilterInput,SkdxTableColumnHeaderSortTrigger,SkdxTableColumnResizeTrigger,SkdxTableEmpty,SkdxTableExpandTrigger,SkdxTableExpandedRow,SkdxTableFooter,SkdxTableHeader,SkdxTableHeaderCell,SkdxTableRowSelectCheckbox,SkdxTableSelectAllCheckbox,SkdxTableSortIndicator,defaultSelectAllLabel});
+"use strict";var t=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var A=(r,e)=>{for(var x in e)t(r,x,{get:e[x],enumerable:!0})},F=(r,e,x,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of h(e))!y.call(r,o)&&o!==x&&t(r,o,{get:()=>e[o],enumerable:!(d=E(e,o))||d.enumerable});return r};var I=r=>F(t({},"__esModule",{value:!0}),r);var s={};A(s,{SkdxTableBody:()=>T.SkdxTableBody,SkdxTableCaption:()=>S.SkdxTableCaption,SkdxTableColumnHeaderFilterInput:()=>i.SkdxTableColumnHeaderFilterInput,SkdxTableColumnHeaderSortTrigger:()=>g.SkdxTableColumnHeaderSortTrigger,SkdxTableColumnPinTrigger:()=>R.SkdxTableColumnPinTrigger,SkdxTableColumnReorderTrigger:()=>c.SkdxTableColumnReorderTrigger,SkdxTableColumnResizeTrigger:()=>u.SkdxTableColumnResizeTrigger,SkdxTableEmpty:()=>f.SkdxTableEmpty,SkdxTableExpandTrigger:()=>b.SkdxTableExpandTrigger,SkdxTableExpandedRow:()=>k.SkdxTableExpandedRow,SkdxTableFooter:()=>m.SkdxTableFooter,SkdxTableGroupRow:()=>H.SkdxTableGroupRow,SkdxTableHeader:()=>a.SkdxTableHeader,SkdxTableHeaderCell:()=>p.SkdxTableHeaderCell,SkdxTableRowSelectCheckbox:()=>C.SkdxTableRowSelectCheckbox,SkdxTableSelectAllCheckbox:()=>l.SkdxTableSelectAllCheckbox,SkdxTableSortIndicator:()=>n.SkdxTableSortIndicator,SkdxTableTreeTrigger:()=>w.SkdxTableTreeTrigger,defaultSelectAllLabel:()=>l.defaultSelectAllLabel});module.exports=I(s);var a=require("./TableHeader.cjs"),T=require("./TableBody.cjs"),m=require("./TableFooter.cjs"),p=require("./TableHeaderCell.cjs"),S=require("./TableCaption.cjs"),b=require("./TableExpandTrigger.cjs"),k=require("./TableExpandedRow.cjs"),f=require("./TableEmpty.cjs"),g=require("./TableColumnHeaderSortTrigger.cjs"),i=require("./TableColumnHeaderFilterInput.cjs"),n=require("./TableSortIndicator.cjs"),l=require("./TableSelectAllCheckbox.cjs"),C=require("./TableRowSelectCheckbox.cjs"),u=require("./TableColumnResizeTrigger.cjs"),c=require("./TableColumnReorderTrigger.cjs"),R=require("./TableColumnPinTrigger.cjs"),H=require("./TableGroupRow.cjs"),w=require("./TableTreeTrigger.cjs");0&&(module.exports={SkdxTableBody,SkdxTableCaption,SkdxTableColumnHeaderFilterInput,SkdxTableColumnHeaderSortTrigger,SkdxTableColumnPinTrigger,SkdxTableColumnReorderTrigger,SkdxTableColumnResizeTrigger,SkdxTableEmpty,SkdxTableExpandTrigger,SkdxTableExpandedRow,SkdxTableFooter,SkdxTableGroupRow,SkdxTableHeader,SkdxTableHeaderCell,SkdxTableRowSelectCheckbox,SkdxTableSelectAllCheckbox,SkdxTableSortIndicator,SkdxTableTreeTrigger,defaultSelectAllLabel});

package/dist/table/primitives.d.cts

@@ -42,3 +42,7 @@ export { SkdxTableSortIndicator } from './TableSortIndicator.cjs';
 export { SkdxTableSelectAllCheckbox, defaultSelectAllLabel } from './TableSelectAllCheckbox.cjs';
 export { SkdxTableRowSelectCheckbox } from './TableRowSelectCheckbox.cjs';
 export { SkdxTableColumnResizeTrigger } from './TableColumnResizeTrigger.cjs';
+export { SkdxTableColumnReorderTrigger } from './TableColumnReorderTrigger.cjs';
+export { SkdxTableColumnPinTrigger } from './TableColumnPinTrigger.cjs';
+export { SkdxTableGroupRow } from './TableGroupRow.cjs';
+export { SkdxTableTreeTrigger } from './TableTreeTrigger.cjs';

package/dist/table/primitives.d.ts

@@ -42,3 +42,7 @@ export { SkdxTableSortIndicator } from './TableSortIndicator.js';
 export { SkdxTableSelectAllCheckbox, defaultSelectAllLabel } from './TableSelectAllCheckbox.js';
 export { SkdxTableRowSelectCheckbox } from './TableRowSelectCheckbox.js';
 export { SkdxTableColumnResizeTrigger } from './TableColumnResizeTrigger.js';
+export { SkdxTableColumnReorderTrigger } from './TableColumnReorderTrigger.js';
+export { SkdxTableColumnPinTrigger } from './TableColumnPinTrigger.js';
+export { SkdxTableGroupRow } from './TableGroupRow.js';
+export { SkdxTableTreeTrigger } from './TableTreeTrigger.js';

package/dist/table/primitives.js

@@ -1 +1 @@
-import{SkdxTableHeader as o}from"./TableHeader.js";import{SkdxTableBody as l}from"./TableBody.js";import{SkdxTableFooter as a}from"./TableFooter.js";import{SkdxTableHeaderCell as p}from"./TableHeaderCell.js";import{SkdxTableCaption as m}from"./TableCaption.js";import{SkdxTableExpandTrigger as T}from"./TableExpandTrigger.js";import{SkdxTableExpandedRow as f}from"./TableExpandedRow.js";import{SkdxTableEmpty as i}from"./TableEmpty.js";import{SkdxTableColumnHeaderSortTrigger as c}from"./TableColumnHeaderSortTrigger.js";import{SkdxTableColumnHeaderFilterInput as u}from"./TableColumnHeaderFilterInput.js";import{SkdxTableSortIndicator as E}from"./TableSortIndicator.js";import{SkdxTableSelectAllCheckbox as h,defaultSelectAllLabel as w}from"./TableSelectAllCheckbox.js";import{SkdxTableRowSelectCheckbox as A}from"./TableRowSelectCheckbox.js";import{SkdxTableColumnResizeTrigger as I}from"./TableColumnResizeTrigger.js";export{l as SkdxTableBody,m as SkdxTableCaption,u as SkdxTableColumnHeaderFilterInput,c as SkdxTableColumnHeaderSortTrigger,I as SkdxTableColumnResizeTrigger,i as SkdxTableEmpty,T as SkdxTableExpandTrigger,f as SkdxTableExpandedRow,a as SkdxTableFooter,o as SkdxTableHeader,p as SkdxTableHeaderCell,A as SkdxTableRowSelectCheckbox,h as SkdxTableSelectAllCheckbox,E as SkdxTableSortIndicator,w as defaultSelectAllLabel};
+import{SkdxTableHeader as o}from"./TableHeader.js";import{SkdxTableBody as l}from"./TableBody.js";import{SkdxTableFooter as d}from"./TableFooter.js";import{SkdxTableHeaderCell as T}from"./TableHeaderCell.js";import{SkdxTableCaption as p}from"./TableCaption.js";import{SkdxTableExpandTrigger as b}from"./TableExpandTrigger.js";import{SkdxTableExpandedRow as f}from"./TableExpandedRow.js";import{SkdxTableEmpty as i}from"./TableEmpty.js";import{SkdxTableColumnHeaderSortTrigger as C}from"./TableColumnHeaderSortTrigger.js";import{SkdxTableColumnHeaderFilterInput as c}from"./TableColumnHeaderFilterInput.js";import{SkdxTableSortIndicator as H}from"./TableSortIndicator.js";import{SkdxTableSelectAllCheckbox as E,defaultSelectAllLabel as h}from"./TableSelectAllCheckbox.js";import{SkdxTableRowSelectCheckbox as A}from"./TableRowSelectCheckbox.js";import{SkdxTableColumnResizeTrigger as I}from"./TableColumnResizeTrigger.js";import{SkdxTableColumnReorderTrigger as z}from"./TableColumnReorderTrigger.js";import{SkdxTableColumnPinTrigger as G}from"./TableColumnPinTrigger.js";import{SkdxTableGroupRow as P}from"./TableGroupRow.js";import{SkdxTableTreeTrigger as q}from"./TableTreeTrigger.js";export{l as SkdxTableBody,p as SkdxTableCaption,c as SkdxTableColumnHeaderFilterInput,C as SkdxTableColumnHeaderSortTrigger,G as SkdxTableColumnPinTrigger,z as SkdxTableColumnReorderTrigger,I as SkdxTableColumnResizeTrigger,i as SkdxTableEmpty,b as SkdxTableExpandTrigger,f as SkdxTableExpandedRow,d as SkdxTableFooter,P as SkdxTableGroupRow,o as SkdxTableHeader,T as SkdxTableHeaderCell,A as SkdxTableRowSelectCheckbox,E as SkdxTableSelectAllCheckbox,H as SkdxTableSortIndicator,q as SkdxTableTreeTrigger,h as defaultSelectAllLabel};

package/dist/table/types.cjs

@@ -1 +1 @@
-"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var n=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var c=(t,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of n(e))!a.call(t,r)&&r!==i&&l(t,r,{get:()=>e[r],enumerable:!(o=p(e,r))||o.enumerable});return t};var S=t=>c(l({},"__esModule",{value:!0}),t);var b={};module.exports=S(b);
+"use strict";var l=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var a=Object.prototype.hasOwnProperty;var c=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of p(e))!a.call(t,r)&&r!==n&&l(t,r,{get:()=>e[r],enumerable:!(o=i(e,r))||o.enumerable});return t};var s=t=>c(l({},"__esModule",{value:!0}),t);var S={};module.exports=s(S);

package/dist/table/types.d.cts

@@ -15,3 +15,5 @@ export type TableSelectAllScope = 'page' | 'all';
 export type TableSelectionMode = 'single' | 'multiple' | 'none';
 /** Per-column pixel widths, keyed by a header cell's `column-key`. */
 export type TableColumnWidths = Record<string, number>;
+/** Pinned columns, keyed by a header cell's `column-key`; an unpinned column has no entry. */
+export type TableColumnPins = Record<string, 'start' | 'end'>;

package/dist/table/types.d.ts

@@ -15,3 +15,5 @@ export type TableSelectAllScope = 'page' | 'all';
 export type TableSelectionMode = 'single' | 'multiple' | 'none';
 /** Per-column pixel widths, keyed by a header cell's `column-key`. */
 export type TableColumnWidths = Record<string, number>;
+/** Pinned columns, keyed by a header cell's `column-key`; an unpinned column has no entry. */
+export type TableColumnPins = Record<string, 'start' | 'end'>;