@skdx/web-components 0.32.0 → 0.33.0

package/dist/table/TableColumnReorderTrigger.d.cts

@@ -0,0 +1,49 @@
+import { LitElement, nothing, type TemplateResult } from 'lit';
+import { type ColumnReorderTarget } from './column-reorder.cjs';
+import type { SkdxTable } from './Table.cjs';
+/**
+ * Draggable and keyboard-operable handle that moves its column: **Arrow Left** or **Arrow Right** by one position, **Home** or **End** to either end, or drag it onto another header cell to drop it there. Every move publishes the full column order and is announced through the table's `getMoveLabel`.
+ *
+ * @csspart column-reorder-trigger - The `<button>` inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell column-key="name">
+ *   Name
+ *   <skdx-table-column-reorder-trigger label="Move Name column"></skdx-table-column-reorder-trigger>
+ * </skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableColumnReorderTrigger extends LitElement implements ColumnReorderTarget {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Column this handle moves. Inherited from `SkdxTableHeaderCell`'s `columnKey` or renders nothing.
+     * @default undefined
+     */
+    columnKey?: string;
+    /**
+     * Accessible name for the handle, whose content is a decorative grip.
+     * @default undefined — the cell's `reorderLabel`, then `'Move column'`.
+     */
+    label?: string;
+    private readonly reorder;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Column-scoped defaults, resolved per read so a re-slotted handle picks up its new cell. */
+    private get cell();
+    /** @internal Mirrors `columnKey` for the shared reorder controller. */
+    get reorderColumnKey(): string | undefined;
+    /** @internal Mirrors the enclosing `<skdx-table>` for the shared reorder controller. */
+    get reorderTable(): SkdxTable | null;
+    /** @internal The enclosing header cell, whose siblings are this drag's drop targets. */
+    reorderCell(): HTMLElement | null | undefined;
+    protected updated(): void;
+    render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-column-reorder-trigger': SkdxTableColumnReorderTrigger;
+    }
+}

package/dist/table/TableColumnReorderTrigger.d.ts

@@ -0,0 +1,49 @@
+import { LitElement, nothing, type TemplateResult } from 'lit';
+import { type ColumnReorderTarget } from './column-reorder.js';
+import type { SkdxTable } from './Table.js';
+/**
+ * Draggable and keyboard-operable handle that moves its column: **Arrow Left** or **Arrow Right** by one position, **Home** or **End** to either end, or drag it onto another header cell to drop it there. Every move publishes the full column order and is announced through the table's `getMoveLabel`.
+ *
+ * @csspart column-reorder-trigger - The `<button>` inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell column-key="name">
+ *   Name
+ *   <skdx-table-column-reorder-trigger label="Move Name column"></skdx-table-column-reorder-trigger>
+ * </skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableColumnReorderTrigger extends LitElement implements ColumnReorderTarget {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Column this handle moves. Inherited from `SkdxTableHeaderCell`'s `columnKey` or renders nothing.
+     * @default undefined
+     */
+    columnKey?: string;
+    /**
+     * Accessible name for the handle, whose content is a decorative grip.
+     * @default undefined — the cell's `reorderLabel`, then `'Move column'`.
+     */
+    label?: string;
+    private readonly reorder;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Column-scoped defaults, resolved per read so a re-slotted handle picks up its new cell. */
+    private get cell();
+    /** @internal Mirrors `columnKey` for the shared reorder controller. */
+    get reorderColumnKey(): string | undefined;
+    /** @internal Mirrors the enclosing `<skdx-table>` for the shared reorder controller. */
+    get reorderTable(): SkdxTable | null;
+    /** @internal The enclosing header cell, whose siblings are this drag's drop targets. */
+    reorderCell(): HTMLElement | null | undefined;
+    protected updated(): void;
+    render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-column-reorder-trigger': SkdxTableColumnReorderTrigger;
+    }
+}

package/dist/table/TableColumnReorderTrigger.js

@@ -0,0 +1,21 @@
+var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var n=(i,r,l,o)=>{for(var e=o>1?void 0:o?u(r,l):r,d=i.length-1,a;d>=0;d--)(a=i[d])&&(e=(o?a(r,l,e):a(e))||e);return o&&e&&m(r,l,e),e};import{css as h,html as g,LitElement as b,nothing as s}from"lit";import{property as p}from"lit/decorators.js";import{customElement as v}from"../internal/define.js";import{reflectHostState as y}from"../internal/part.js";import{resetNativeControl as f}from"../internal/styles.js";import{findHeaderCell as E,findTableRoot as k,optionalStringAttribute as C,REORDER_GRIP as R,TABLE_INTERNAL_UPDATE as c}from"./column-context.js";import{ColumnReorderController as $}from"./column-reorder.js";var t=class extends b{constructor(){super(...arguments);this.reorder=new $(this);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=k(this),this.root?.addEventListener(c,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(c,this.onRootUpdate),super.disconnectedCallback()}get cell(){return E(this)}get reorderColumnKey(){return this.columnKey??this.cell?.columnKey}get reorderTable(){return this.root}reorderCell(){return this.cell}updated(){y(this,{"data-dragging":this.reorder.dragging?"":null})}render(){return this.reorderColumnKey===void 0?s:g`
+      <button
+        type="button"
+        part="column-reorder-trigger"
+        data-skdx-table-reorder-trigger
+        aria-label=${this.label??this.cell?.reorderLabel??"Move column"}
+        data-dragging=${this.reorder.dragging?"":s}
+        @click=${this.reorder.handleClick}
+        @keydown=${this.reorder.handleKeyDown}
+        @pointerdown=${this.reorder.handlePointerDown}
+        @pointermove=${this.reorder.handlePointerMove}
+        @pointerup=${this.reorder.handlePointerUp}
+        @pointercancel=${this.reorder.handlePointerUp}
+      >
+        <slot>${R}</slot>
+      </button>
+    `}};t.styles=[f,h`
+      :host {
+        display: inline-block;
+      }
+    `],n([p({type:String,attribute:"column-key",converter:C})],t.prototype,"columnKey",2),n([p({type:String})],t.prototype,"label",2),t=n([v("skdx-table-column-reorder-trigger","table","column-reorder-trigger")],t);export{t as SkdxTableColumnReorderTrigger};

package/dist/table/TableGroupRow.cjs

@@ -0,0 +1,30 @@
+"use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var y=(r,t)=>{for(var e in t)i(r,e,{get:t[e],enumerable:!0})},k=(r,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of b(t))!v.call(r,o)&&o!==e&&i(r,o,{get:()=>t[o],enumerable:!(a=m(t,o))||a.enumerable});return r};var C=r=>k(i({},"__esModule",{value:!0}),r),n=(r,t,e,a)=>{for(var o=a>1?void 0:a?m(t,e):t,c=r.length-1,u;c>=0;c--)(u=r[c])&&(o=(a?u(t,e,o):u(o))||o);return a&&o&&i(t,e,o),o};var f={};y(f,{SkdxTableGroupRow:()=>s});module.exports=C(f);var p=require("lit"),h=require("lit/decorators.js"),d=require("../internal/define.cjs"),g=require("../internal/styles.cjs"),l=require("./column-context.cjs");var s=class extends p.LitElement{constructor(){super(...arguments);this.groupKey="";this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=e=>{e.stopPropagation(),(0,l.liveTableRoot)(this.root)?.toggleGroup(this.groupKey)}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-table"),this.root&&(0,d.whenUpgraded)(this.root,this.onRootUpdate),this.root?.addEventListener(l.TABLE_INTERNAL_UPDATE,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(l.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}render(){let e=(0,l.liveTableRoot)(this.root),a=!(e?.isGroupCollapsed(this.groupKey)??!1);return p.html`<tr
+      part="group-row"
+      data-skdx-table-group-row
+      data-state=${a?"expanded":"collapsed"}
+    >
+      <th
+        part="group-cell"
+        scope="rowgroup"
+        colspan=${this.colSpan??e?.headerCellCount()??1}
+      >
+        <button
+          type="button"
+          part="group-trigger"
+          aria-expanded=${a}
+          data-state=${a?"expanded":"collapsed"}
+          @click=${this.handleClick}
+        >
+          <slot></slot>
+        </button>
+      </th>
+    </tr>`}};s.styles=[g.resetNativeControl,p.css`
+      /* A row, like <skdx-table-row> — see Table.ts. */
+      :host {
+        display: table-row;
+      }
+
+      :host > tr {
+        display: contents;
+      }
+    `],n([(0,h.property)({type:String,attribute:"group-key"})],s.prototype,"groupKey",2),n([(0,h.property)({type:Number,attribute:"col-span"})],s.prototype,"colSpan",2),s=n([(0,d.customElement)("skdx-table-group-row","table","group-row")],s);0&&(module.exports={SkdxTableGroupRow});

package/dist/table/TableGroupRow.d.cts

@@ -0,0 +1,37 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Full-width row heading one group of rows, whose `<button aria-expanded>` shows or hides the rows beneath it.
+ *
+ * @csspart group-row - The native `<tr>` element inside the shadow root.
+ * @csspart group-cell - The single `<th scope="rowgroup" colspan>` inside that row.
+ * @csspart group-trigger - The `<button aria-expanded>` that toggles the group.
+ *
+ * @example
+ * ```html
+ * <skdx-table-group-row group-key="EMEA" col-span="3">EMEA (12)</skdx-table-group-row>
+ * ```
+ */
+export declare class SkdxTableGroupRow extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Key of the group this row heads, as it appears in `collapsedGroups`.
+     * @default ''
+     */
+    groupKey: string;
+    /**
+     * How many columns the group cell spans.
+     * @default undefined — the table's own header cell count, so a column added later still spans.
+     */
+    colSpan?: number;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-group-row': SkdxTableGroupRow;
+    }
+}

package/dist/table/TableGroupRow.d.ts

@@ -0,0 +1,37 @@
+import { LitElement, type TemplateResult } from 'lit';
+/**
+ * Full-width row heading one group of rows, whose `<button aria-expanded>` shows or hides the rows beneath it.
+ *
+ * @csspart group-row - The native `<tr>` element inside the shadow root.
+ * @csspart group-cell - The single `<th scope="rowgroup" colspan>` inside that row.
+ * @csspart group-trigger - The `<button aria-expanded>` that toggles the group.
+ *
+ * @example
+ * ```html
+ * <skdx-table-group-row group-key="EMEA" col-span="3">EMEA (12)</skdx-table-group-row>
+ * ```
+ */
+export declare class SkdxTableGroupRow extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Key of the group this row heads, as it appears in `collapsedGroups`.
+     * @default ''
+     */
+    groupKey: string;
+    /**
+     * How many columns the group cell spans.
+     * @default undefined — the table's own header cell count, so a column added later still spans.
+     */
+    colSpan?: number;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-group-row': SkdxTableGroupRow;
+    }
+}

package/dist/table/TableGroupRow.js

@@ -0,0 +1,30 @@
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var s=(l,a,t,e)=>{for(var o=e>1?void 0:e?h(a,t):a,p=l.length-1,i;p>=0;p--)(i=l[p])&&(o=(e?i(a,t,o):i(o))||o);return e&&o&&u(a,t,o),o};import{css as m,html as g,LitElement as b}from"lit";import{property as n}from"lit/decorators.js";import{customElement as v,whenUpgraded as y}from"../internal/define.js";import{resetNativeControl as k}from"../internal/styles.js";import{liveTableRoot as d,TABLE_INTERNAL_UPDATE as c}from"./column-context.js";var r=class extends b{constructor(){super(...arguments);this.groupKey="";this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=t=>{t.stopPropagation(),d(this.root)?.toggleGroup(this.groupKey)}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-table"),this.root&&y(this.root,this.onRootUpdate),this.root?.addEventListener(c,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(c,this.onRootUpdate),super.disconnectedCallback()}render(){let t=d(this.root),e=!(t?.isGroupCollapsed(this.groupKey)??!1);return g`<tr
+      part="group-row"
+      data-skdx-table-group-row
+      data-state=${e?"expanded":"collapsed"}
+    >
+      <th
+        part="group-cell"
+        scope="rowgroup"
+        colspan=${this.colSpan??t?.headerCellCount()??1}
+      >
+        <button
+          type="button"
+          part="group-trigger"
+          aria-expanded=${e}
+          data-state=${e?"expanded":"collapsed"}
+          @click=${this.handleClick}
+        >
+          <slot></slot>
+        </button>
+      </th>
+    </tr>`}};r.styles=[k,m`
+      /* A row, like <skdx-table-row> — see Table.ts. */
+      :host {
+        display: table-row;
+      }
+
+      :host > tr {
+        display: contents;
+      }
+    `],s([n({type:String,attribute:"group-key"})],r.prototype,"groupKey",2),s([n({type:Number,attribute:"col-span"})],r.prototype,"colSpan",2),r=s([v("skdx-table-group-row","table","group-row")],r);export{r as SkdxTableGroupRow};

package/dist/table/TableHeaderCell.cjs

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

package/dist/table/TableHeaderCell.d.cts

@@ -1,11 +1,14 @@
 import { LitElement, type TemplateResult } from 'lit';
+import { type ColumnReorderTarget } from './column-reorder.cjs';
 import { type ColumnResizeTarget } from './column-resize.cjs';
 import type { SkdxTable } from './Table.cjs';
 /**
- * A `<th>` keyed by `column-key`: `sortable` wraps content in a sort `<button>` cycling ascending → descending → unsorted, and `resizable` appends a `role="separator"` drag/Arrow-key handle that writes the column's width, clamped to `min-width`/`max-width` — slot your own `<skdx-table-column-header-sort-trigger>` or `<skdx-table-column-resize-trigger>` to suppress the built-in one.
+ * A `<th>` keyed by `column-key`: `sortable` wraps content in a sort `<button>` cycling ascending → descending → unsorted, and `resizable` appends a `role="separator"` drag/Arrow-key handle that writes the column's width, clamped to `min-width`/`max-width`; `reorderable` and `pinnable` append a move handle and a pin toggle — slot your own `<skdx-table-column-header-sort-trigger>`, `<skdx-table-column-reorder-trigger>`, `<skdx-table-column-pin-trigger>` or `<skdx-table-column-resize-trigger>` to suppress the built-in one.
  *
  * @csspart header-cell - The native `<th>` element inside the shadow root.
  * @csspart sort-trigger - The sort `<button>` rendered inside a sortable `<th>`.
+ * @csspart column-reorder-trigger - The move `<button>` rendered inside a reorderable `<th>`.
+ * @csspart column-pin-trigger - The pin `<button aria-pressed>` rendered inside a pinnable `<th>`.
  * @csspart resizer - The `role="separator"` resize handle inside a resizable `<th>`.
  *
  * @example
@@ -13,7 +16,7 @@ import type { SkdxTable } from './Table.cjs';
  * <skdx-table-header-cell column-key="amount" sortable resizable min-width="80">Amount</skdx-table-header-cell>
  * ```
  */
-export declare class SkdxTableHeaderCell extends LitElement implements ColumnResizeTarget {
+export declare class SkdxTableHeaderCell extends LitElement implements ColumnResizeTarget, ColumnReorderTarget {
     static styles: import("lit").CSSResult[];
     /**
      * This column's single identifier for sorting and resizing.
@@ -40,6 +43,26 @@ export declare class SkdxTableHeaderCell extends LitElement implements ColumnRes
      * @default false
      */
     resizable: boolean;
+    /**
+     * Renders a reorder trigger after the label unless one is slotted; needs a `columnKey`.
+     * @default false
+     */
+    reorderable: boolean;
+    /**
+     * Renders a pin trigger after the label unless one is slotted; needs a `columnKey`.
+     * @default false
+     */
+    pinnable: boolean;
+    /**
+     * Accessible name for the derived reorder trigger, distinct from the column header's.
+     * @default 'Move column'
+     */
+    reorderLabel: string;
+    /**
+     * Accessible name for the derived pin trigger, distinct from the column header's.
+     * @default 'Pin column'
+     */
+    pinLabel: string;
     /**
      * Smallest width in pixels the column can be resized to.
      * @default 40
@@ -61,6 +84,7 @@ export declare class SkdxTableHeaderCell extends LitElement implements ColumnRes
      */
     resizeStep: number;
     private readonly resize;
+    private readonly reorder;
     private root;
     private readonly onRootUpdate;
     connectedCallback(): void;
@@ -83,6 +107,14 @@ export declare class SkdxTableHeaderCell extends LitElement implements ColumnRes
     get resizeTable(): SkdxTable | null;
     /** @internal The cell box a resize drag measures from — the host, since `display: contents` gives the `<th>` no box. */
     resizeMeasureCell(): HTMLElement | null | undefined;
+    /** @internal Mirrors `columnKey` for the shared reorder controller. */
+    get reorderColumnKey(): string | undefined;
+    /** @internal Mirrors the enclosing `<skdx-table>` for the shared reorder controller. */
+    get reorderTable(): SkdxTable | null;
+    /** @internal This cell is itself the drag's source, and its siblings the drop targets. */
+    reorderCell(): HTMLElement | null | undefined;
+    /** @internal Which edge this column is pinned to, if any. */
+    get pinnedSide(): 'start' | 'end' | undefined;
     protected updated(): void;
     /** Whether the consumer already slotted their own copy of a part; scoped to this cell, so a nested table's part never counts. */
     private hasSlotted;
@@ -92,8 +124,12 @@ export declare class SkdxTableHeaderCell extends LitElement implements ColumnRes
     private readonly onFilterInput;
     private ariaSortFor;
     private renderFilterInput;
+    private renderReorderTrigger;
+    private readonly togglePin;
+    private renderPinTrigger;
     private renderResizer;
     private renderState;
+    private renderDerivedControls;
     render(): TemplateResult;
 }
 declare global {

package/dist/table/TableHeaderCell.d.ts

@@ -1,11 +1,14 @@
 import { LitElement, type TemplateResult } from 'lit';
+import { type ColumnReorderTarget } from './column-reorder.js';
 import { type ColumnResizeTarget } from './column-resize.js';
 import type { SkdxTable } from './Table.js';
 /**
- * A `<th>` keyed by `column-key`: `sortable` wraps content in a sort `<button>` cycling ascending → descending → unsorted, and `resizable` appends a `role="separator"` drag/Arrow-key handle that writes the column's width, clamped to `min-width`/`max-width` — slot your own `<skdx-table-column-header-sort-trigger>` or `<skdx-table-column-resize-trigger>` to suppress the built-in one.
+ * A `<th>` keyed by `column-key`: `sortable` wraps content in a sort `<button>` cycling ascending → descending → unsorted, and `resizable` appends a `role="separator"` drag/Arrow-key handle that writes the column's width, clamped to `min-width`/`max-width`; `reorderable` and `pinnable` append a move handle and a pin toggle — slot your own `<skdx-table-column-header-sort-trigger>`, `<skdx-table-column-reorder-trigger>`, `<skdx-table-column-pin-trigger>` or `<skdx-table-column-resize-trigger>` to suppress the built-in one.
  *
  * @csspart header-cell - The native `<th>` element inside the shadow root.
  * @csspart sort-trigger - The sort `<button>` rendered inside a sortable `<th>`.
+ * @csspart column-reorder-trigger - The move `<button>` rendered inside a reorderable `<th>`.
+ * @csspart column-pin-trigger - The pin `<button aria-pressed>` rendered inside a pinnable `<th>`.
  * @csspart resizer - The `role="separator"` resize handle inside a resizable `<th>`.
  *
  * @example
@@ -13,7 +16,7 @@ import type { SkdxTable } from './Table.js';
  * <skdx-table-header-cell column-key="amount" sortable resizable min-width="80">Amount</skdx-table-header-cell>
  * ```
  */
-export declare class SkdxTableHeaderCell extends LitElement implements ColumnResizeTarget {
+export declare class SkdxTableHeaderCell extends LitElement implements ColumnResizeTarget, ColumnReorderTarget {
     static styles: import("lit").CSSResult[];
     /**
      * This column's single identifier for sorting and resizing.
@@ -40,6 +43,26 @@ export declare class SkdxTableHeaderCell extends LitElement implements ColumnRes
      * @default false
      */
     resizable: boolean;
+    /**
+     * Renders a reorder trigger after the label unless one is slotted; needs a `columnKey`.
+     * @default false
+     */
+    reorderable: boolean;
+    /**
+     * Renders a pin trigger after the label unless one is slotted; needs a `columnKey`.
+     * @default false
+     */
+    pinnable: boolean;
+    /**
+     * Accessible name for the derived reorder trigger, distinct from the column header's.
+     * @default 'Move column'
+     */
+    reorderLabel: string;
+    /**
+     * Accessible name for the derived pin trigger, distinct from the column header's.
+     * @default 'Pin column'
+     */
+    pinLabel: string;
     /**
      * Smallest width in pixels the column can be resized to.
      * @default 40
@@ -61,6 +84,7 @@ export declare class SkdxTableHeaderCell extends LitElement implements ColumnRes
      */
     resizeStep: number;
     private readonly resize;
+    private readonly reorder;
     private root;
     private readonly onRootUpdate;
     connectedCallback(): void;
@@ -83,6 +107,14 @@ export declare class SkdxTableHeaderCell extends LitElement implements ColumnRes
     get resizeTable(): SkdxTable | null;
     /** @internal The cell box a resize drag measures from — the host, since `display: contents` gives the `<th>` no box. */
     resizeMeasureCell(): HTMLElement | null | undefined;
+    /** @internal Mirrors `columnKey` for the shared reorder controller. */
+    get reorderColumnKey(): string | undefined;
+    /** @internal Mirrors the enclosing `<skdx-table>` for the shared reorder controller. */
+    get reorderTable(): SkdxTable | null;
+    /** @internal This cell is itself the drag's source, and its siblings the drop targets. */
+    reorderCell(): HTMLElement | null | undefined;
+    /** @internal Which edge this column is pinned to, if any. */
+    get pinnedSide(): 'start' | 'end' | undefined;
     protected updated(): void;
     /** Whether the consumer already slotted their own copy of a part; scoped to this cell, so a nested table's part never counts. */
     private hasSlotted;
@@ -92,8 +124,12 @@ export declare class SkdxTableHeaderCell extends LitElement implements ColumnRes
     private readonly onFilterInput;
     private ariaSortFor;
     private renderFilterInput;
+    private renderReorderTrigger;
+    private readonly togglePin;
+    private renderPinTrigger;
     private renderResizer;
     private renderState;
+    private renderDerivedControls;
     render(): TemplateResult;
 }
 declare global {