@skdx/web-components 0.26.0

package/dist/table/TableExpandTrigger.js

@@ -0,0 +1,18 @@
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var i=(s,a,t,r)=>{for(var o=r>1?void 0:r?c(a,t):a,l=s.length-1,d;l>=0;l--)(d=s[l])&&(o=(r?d(a,t,o):d(o))||o);return r&&o&&p(a,t,o),o};import{css as h,html as b,LitElement as m,nothing as v}from"lit";import{property as n}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";import{controlBoxOnHost as k,delegatesFocusShadowRootOptions as w,resetNativeControl as x}from"../internal/styles.js";var e=class extends m{constructor(){super(...arguments);this.rowId="";this.label="";this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=t=>{t.stopPropagation(),this.root?.toggleRowExpanded(this.rowId)}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-table"),this.root?.addEventListener("skdx-table-internal-update",this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-table-internal-update",this.onRootUpdate),super.disconnectedCallback()}render(){let t=this.root?.isRowExpanded(this.rowId)??!1;return b`
+      <button
+        part="expand-trigger"
+        type="button"
+        data-skdx-table-expand-trigger
+        aria-expanded=${t}
+        aria-controls=${this.root?.detailRowId(this.rowId)??""}
+        aria-label=${this.label||v}
+        data-state=${t?"expanded":"collapsed"}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};e.shadowRootOptions=w,e.styles=[x,h`
+      :host {
+        display: inline-block;
+      }
+    `,k],i([n({type:String,attribute:"row-id"})],e.prototype,"rowId",2),i([n({type:String})],e.prototype,"label",2),e=i([u("skdx-table-expand-trigger","table","expand-trigger")],e);export{e as SkdxTableExpandTrigger};

package/dist/table/TableExpandedRow.cjs

@@ -0,0 +1,7 @@
+"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var u=Object.prototype.hasOwnProperty;var b=(r,e)=>{for(var t in e)d(r,t,{get:e[t],enumerable:!0})},y=(r,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!u.call(r,o)&&o!==t&&d(r,o,{get:()=>e[o],enumerable:!(s=h(e,o))||s.enumerable});return r};var w=r=>y(d({},"__esModule",{value:!0}),r),n=(r,e,t,s)=>{for(var o=s>1?void 0:s?h(e,t):e,l=r.length-1,c;l>=0;l--)(c=r[l])&&(o=(s?c(e,t,o):c(o))||o);return s&&o&&d(e,t,o),o};var f={};b(f,{SkdxTableExpandedRow:()=>i});module.exports=w(f);var a=require("lit"),p=require("lit/decorators.js"),v=require("../internal/define.cjs");var i=class extends a.LitElement{constructor(){super(...arguments);this.rowId="";this.colSpan=1;this.root=null;this.onRootUpdate=()=>this._sync()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-table"),this.root?.addEventListener("skdx-table-internal-update",this.onRootUpdate),this._syncId()}disconnectedCallback(){this.root?.removeEventListener("skdx-table-internal-update",this.onRootUpdate),super.disconnectedCallback()}updated(t){t.has("rowId")&&this._syncId(),this._sync()}_syncId(){let t=this.root?.detailRowId(this.rowId);t&&(this.id=t)}_sync(){let t=this.root?.isRowExpanded(this.rowId)??!1,s=this.shadowRoot?.querySelector("tr");s?.setAttribute("data-state",t?"expanded":"collapsed"),s?.toggleAttribute("hidden",!t)}render(){return a.html`<tr part="detail-row" data-skdx-table-detail-row>
+      <td part="detail-cell" colspan=${this.colSpan}><slot></slot></td>
+    </tr>`}};i.styles=a.css`
+    :host {
+      display: contents;
+    }
+  `,n([(0,p.property)({type:String,attribute:"row-id"})],i.prototype,"rowId",2),n([(0,p.property)({type:Number,attribute:"col-span"})],i.prototype,"colSpan",2),i=n([(0,v.customElement)("skdx-table-expanded-row","table","expanded-row")],i);0&&(module.exports={SkdxTableExpandedRow});

package/dist/table/TableExpandedRow.d.cts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-expanded-row>` — the full-width detail row a
+ * `<skdx-table-expand-trigger>` reveals. Like `<skdx-table-row>`, the host is
+ * `display: contents` and the real `<tr>` (holding a single `<td colspan>`)
+ * lives in this element's shadow root, so the browser still gets genuine table
+ * layout. Render it as the next sibling of the row it belongs to, inside the
+ * same `<skdx-table-body>`.
+ *
+ * It stays in the DOM while collapsed and the `<tr>` is `hidden` instead — the
+ * trigger's `aria-controls` has to resolve to a real element for assistive tech
+ * to follow it, which a removed row could not do. That id is on the *host*, not
+ * the shadow `<tr>`: an id inside a shadow root is scoped to it, so
+ * `aria-controls` (resolved against the document) would never find it.
+ *
+ * @csspart detail-row - The native `<tr>` element inside the shadow root.
+ * @csspart detail-cell - The single `<td colspan>` inside that row.
+ *
+ * @example
+ * ```html
+ * <skdx-table-expanded-row row-id="1" col-span="3">
+ *   <dl>…</dl>
+ * </skdx-table-expanded-row>
+ * ```
+ */
+export declare class SkdxTableExpandedRow extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The row this detail row belongs to, matching its `<skdx-table-expand-trigger>`'s `row-id`. Required. */
+    rowId: string;
+    /** How many columns the single detail `<td>` spans. @default 1 */
+    colSpan: number;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _syncId;
+    private _sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-expanded-row': SkdxTableExpandedRow;
+    }
+}

package/dist/table/TableExpandedRow.d.ts

@@ -0,0 +1,45 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-expanded-row>` — the full-width detail row a
+ * `<skdx-table-expand-trigger>` reveals. Like `<skdx-table-row>`, the host is
+ * `display: contents` and the real `<tr>` (holding a single `<td colspan>`)
+ * lives in this element's shadow root, so the browser still gets genuine table
+ * layout. Render it as the next sibling of the row it belongs to, inside the
+ * same `<skdx-table-body>`.
+ *
+ * It stays in the DOM while collapsed and the `<tr>` is `hidden` instead — the
+ * trigger's `aria-controls` has to resolve to a real element for assistive tech
+ * to follow it, which a removed row could not do. That id is on the *host*, not
+ * the shadow `<tr>`: an id inside a shadow root is scoped to it, so
+ * `aria-controls` (resolved against the document) would never find it.
+ *
+ * @csspart detail-row - The native `<tr>` element inside the shadow root.
+ * @csspart detail-cell - The single `<td colspan>` inside that row.
+ *
+ * @example
+ * ```html
+ * <skdx-table-expanded-row row-id="1" col-span="3">
+ *   <dl>…</dl>
+ * </skdx-table-expanded-row>
+ * ```
+ */
+export declare class SkdxTableExpandedRow extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** The row this detail row belongs to, matching its `<skdx-table-expand-trigger>`'s `row-id`. Required. */
+    rowId: string;
+    /** How many columns the single detail `<td>` spans. @default 1 */
+    colSpan: number;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private _syncId;
+    private _sync;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-expanded-row': SkdxTableExpandedRow;
+    }
+}

package/dist/table/TableExpandedRow.js

@@ -0,0 +1,7 @@
+var c=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(a,s,t,e)=>{for(var o=e>1?void 0:e?p(s,t):s,d=a.length-1,n;d>=0;d--)(n=a[d])&&(o=(e?n(s,t,o):n(o))||o);return e&&o&&c(s,t,o),o};import{css as h,html as v,LitElement as m}from"lit";import{property as l}from"lit/decorators.js";import{customElement as u}from"../internal/define.js";var r=class extends m{constructor(){super(...arguments);this.rowId="";this.colSpan=1;this.root=null;this.onRootUpdate=()=>this._sync()}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-table"),this.root?.addEventListener("skdx-table-internal-update",this.onRootUpdate),this._syncId()}disconnectedCallback(){this.root?.removeEventListener("skdx-table-internal-update",this.onRootUpdate),super.disconnectedCallback()}updated(t){t.has("rowId")&&this._syncId(),this._sync()}_syncId(){let t=this.root?.detailRowId(this.rowId);t&&(this.id=t)}_sync(){let t=this.root?.isRowExpanded(this.rowId)??!1,e=this.shadowRoot?.querySelector("tr");e?.setAttribute("data-state",t?"expanded":"collapsed"),e?.toggleAttribute("hidden",!t)}render(){return v`<tr part="detail-row" data-skdx-table-detail-row>
+      <td part="detail-cell" colspan=${this.colSpan}><slot></slot></td>
+    </tr>`}};r.styles=h`
+    :host {
+      display: contents;
+    }
+  `,i([l({type:String,attribute:"row-id"})],r.prototype,"rowId",2),i([l({type:Number,attribute:"col-span"})],r.prototype,"colSpan",2),r=i([u("skdx-table-expanded-row","table","expanded-row")],r);export{r as SkdxTableExpandedRow};

package/dist/table/TableFooter.cjs

@@ -0,0 +1,12 @@
+"use strict";var i=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(o,t)=>{for(var s in t)i(o,s,{get:t[s],enumerable:!0})},h=(o,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of d(t))!b.call(o,e)&&e!==s&&i(o,e,{get:()=>t[e],enumerable:!(r=n(t,e))||r.enumerable});return o};var u=o=>h(i({},"__esModule",{value:!0}),o),p=(o,t,s,r)=>{for(var e=r>1?void 0:r?n(t,s):t,f=o.length-1,m;f>=0;f--)(m=o[f])&&(e=(r?m(t,s,e):m(e))||e);return r&&e&&i(t,s,e),e};var v={};g(v,{SkdxTableFooter:()=>l});module.exports=u(v);var a=require("lit"),c=require("../internal/define.cjs");var l=class extends a.LitElement{render(){return a.html`<tfoot part="footer">
+      <slot></slot>
+    </tfoot>`}};l.styles=a.css`
+    /* Host takes the display role, native element gives up its box — see Table.ts. */
+    :host {
+      display: table-footer-group;
+    }
+
+    :host > tfoot {
+      display: contents;
+    }
+  `,l=p([(0,c.customElement)("skdx-table-footer","table","footer")],l);0&&(module.exports={SkdxTableFooter});

package/dist/table/TableFooter.d.cts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-footer>` — `<tfoot>` section, e.g. for column totals.
+ *
+ * @csspart footer - The native `<tfoot>` element inside the shadow root.
+ */
+export declare class SkdxTableFooter extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-footer': SkdxTableFooter;
+    }
+}

package/dist/table/TableFooter.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-footer>` — `<tfoot>` section, e.g. for column totals.
+ *
+ * @csspart footer - The native `<tfoot>` element inside the shadow root.
+ */
+export declare class SkdxTableFooter extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-footer': SkdxTableFooter;
+    }
+}

package/dist/table/TableFooter.js

@@ -0,0 +1,12 @@
+var m=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var f=(r,o,l,s)=>{for(var t=s>1?void 0:s?n(o,l):o,a=r.length-1,i;a>=0;a--)(i=r[a])&&(t=(s?i(o,l,t):i(t))||t);return s&&t&&m(o,l,t),t};import{css as p,html as c,LitElement as d}from"lit";import{customElement as b}from"../internal/define.js";var e=class extends d{render(){return c`<tfoot part="footer">
+      <slot></slot>
+    </tfoot>`}};e.styles=p`
+    /* Host takes the display role, native element gives up its box — see Table.ts. */
+    :host {
+      display: table-footer-group;
+    }
+
+    :host > tfoot {
+      display: contents;
+    }
+  `,e=f([b("skdx-table-footer","table","footer")],e);export{e as SkdxTableFooter};

package/dist/table/TableHeader.cjs

@@ -0,0 +1,12 @@
+"use strict";var i=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(s,e)=>{for(var a in e)i(s,a,{get:e[a],enumerable:!0})},u=(s,e,a,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of c(e))!b.call(s,t)&&t!==a&&i(s,t,{get:()=>e[t],enumerable:!(r=m(e,t))||r.enumerable});return s};var v=s=>u(i({},"__esModule",{value:!0}),s),n=(s,e,a,r)=>{for(var t=r>1?void 0:r?m(e,a):e,d=s.length-1,h;d>=0;d--)(h=s[d])&&(t=(r?h(e,a,t):h(t))||t);return r&&t&&i(e,a,t),t};var y={};g(y,{SkdxTableHeader:()=>l});module.exports=v(y);var o=require("lit"),p=require("../internal/define.cjs");var l=class extends o.LitElement{render(){return o.html`<thead part="header">
+      <slot></slot>
+    </thead>`}};l.styles=o.css`
+    /* Host takes the display role, native element gives up its box — see Table.ts. */
+    :host {
+      display: table-header-group;
+    }
+
+    :host > thead {
+      display: contents;
+    }
+  `,l=n([(0,p.customElement)("skdx-table-header","table","header")],l);0&&(module.exports={SkdxTableHeader});

package/dist/table/TableHeader.d.cts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-header>` — `<thead>` section, typically wrapping a header
+ * `<skdx-table-row>` of `<skdx-table-header-cell>`s.
+ *
+ * @csspart header - The native `<thead>` element inside the shadow root.
+ */
+export declare class SkdxTableHeader extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-header': SkdxTableHeader;
+    }
+}

package/dist/table/TableHeader.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-header>` — `<thead>` section, typically wrapping a header
+ * `<skdx-table-row>` of `<skdx-table-header-cell>`s.
+ *
+ * @csspart header - The native `<thead>` element inside the shadow root.
+ */
+export declare class SkdxTableHeader extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-header': SkdxTableHeader;
+    }
+}

package/dist/table/TableHeader.js

@@ -0,0 +1,12 @@
+var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(r,s,l,a)=>{for(var e=a>1?void 0:a?m(s,l):s,o=r.length-1,i;o>=0;o--)(i=r[o])&&(e=(a?i(s,l,e):i(e))||e);return a&&e&&h(s,l,e),e};import{css as n,html as p,LitElement as c}from"lit";import{customElement as b}from"../internal/define.js";var t=class extends c{render(){return p`<thead part="header">
+      <slot></slot>
+    </thead>`}};t.styles=n`
+    /* Host takes the display role, native element gives up its box — see Table.ts. */
+    :host {
+      display: table-header-group;
+    }
+
+    :host > thead {
+      display: contents;
+    }
+  `,t=d([b("skdx-table-header","table","header")],t);export{t as SkdxTableHeader};

package/dist/table/TableHeaderCell.cjs

@@ -0,0 +1,49 @@
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var k=(n,i)=>{for(var t in i)c(n,t,{get:i[t],enumerable:!0})},R=(n,i,t,r)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of w(i))!K.call(n,s)&&s!==t&&c(n,s,{get:()=>i[s],enumerable:!(r=m(i,s))||r.enumerable});return n};var S=n=>R(c({},"__esModule",{value:!0}),n),a=(n,i,t,r)=>{for(var s=r>1?void 0:r?m(i,t):i,u=n.length-1,l;u>=0;u--)(l=n[u])&&(s=(r?l(i,t,s):l(s))||s);return r&&s&&c(i,t,s),s};var W={};k(W,{SkdxTableHeaderCell:()=>o});module.exports=S(W);var e=require("lit"),d=require("lit/decorators.js"),y=require("../internal/define.cjs"),b=require("../internal/part.cjs"),g=require("../internal/styles.cjs"),h=require("./column-context.cjs"),z=require("./column-resize.cjs");var o=class extends e.LitElement{constructor(){super(...arguments);this.resizable=!1;this.minWidth=40;this.maxWidth=1e3;this.resizeLabel="Resize column";this.resizeStep=8;this.resize=new z.ColumnResizeController(this);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleSlotChange=()=>this.requestUpdate();this.activate=()=>{if(this.sortKey===void 0)return;let t=this.textContent?.trim();this.root?.toggleSort(this.sortKey,t||this.sortKey)}}connectedCallback(){super.connectedCallback(),this.root=(0,h.findTableRoot)(this),this.root?.addEventListener(h.TABLE_INTERNAL_UPDATE,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(h.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}get resizeColumnKey(){return this.columnKey??this.sortKey}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 t=this.resize.storedWidth;this.style.width=t===void 0?"":`${t}px`,t===void 0?this.style.removeProperty("--skdx-table-column-width"):this.style.setProperty("--skdx-table-column-width",`${t}px`),(0,b.reflectHostState)(this,{"aria-sort":this.shadowRoot?.querySelector("th")?.getAttribute("aria-sort")??null})}hasSlotted(t){let r=this.querySelector(t);return r!==null&&r.closest("skdx-table-header-cell")===this}render(){let t=this.sortKey!==void 0,r=t?this.root?.sortList.find(x=>x.columnKey===this.sortKey)?.direction:void 0,s=t?r==="asc"?"ascending":r==="desc"?"descending":"none":e.nothing,u=this.resizable&&this.resizeColumnKey!==void 0,l=this.resize.storedWidth,v=l===void 0?e.nothing:`width:${l}px;--skdx-table-column-width:${l}px`,p=e.html`<slot @slotchange=${this.handleSlotChange}></slot>`,f=t&&!this.hasSlotted("skdx-table-column-header-sort-trigger"),$=u&&!this.hasSlotted("skdx-table-column-resize-trigger");return e.html`
+      <th
+        part="header-cell"
+        aria-sort=${s}
+        data-sort-direction=${r??e.nothing}
+        data-resizable=${u?"":e.nothing}
+        style=${v}
+      >
+        ${f?e.html`
+                <button
+                  type="button"
+                  part="sort-trigger"
+                  data-skdx-table-sort-trigger
+                  data-sort-direction=${r??e.nothing}
+                  @click=${this.activate}
+                >
+                  ${p}
+                </button>
+              `:p}
+        ${$?e.html`
+                <span
+                  part="resizer"
+                  role="separator"
+                  aria-orientation="vertical"
+                  aria-label=${this.resizeLabel}
+                  aria-valuenow=${Math.round(l??this.minWidth)}
+                  aria-valuemin=${this.minWidth}
+                  aria-valuemax=${this.maxWidth}
+                  tabindex="0"
+                  data-skdx-table-resizer
+                  data-dragging=${this.resize.dragging?"":e.nothing}
+                  @pointerdown=${this.resize.handlePointerDown}
+                  @pointermove=${this.resize.handlePointerMove}
+                  @pointerup=${this.resize.handlePointerUp}
+                  @pointercancel=${this.resize.handlePointerUp}
+                  @keydown=${this.resize.handleKeyDown}
+                ></span>
+              `:e.nothing}
+      </th>
+    `}};o.styles=[g.resetNativeControl,e.css`
+      /* Host takes the display role, native element gives up its box — see Table.ts. */
+      :host {
+        display: table-cell;
+      }
+
+      :host > th {
+        display: contents;
+      }
+    `],a([(0,d.property)({type:String,attribute:"sort-key",converter:h.optionalStringAttribute})],o.prototype,"sortKey",2),a([(0,d.property)({type:String,attribute:"column-key",converter:h.optionalStringAttribute})],o.prototype,"columnKey",2),a([(0,d.property)({type:Boolean})],o.prototype,"resizable",2),a([(0,d.property)({type:Number,attribute:"min-width"})],o.prototype,"minWidth",2),a([(0,d.property)({type:Number,attribute:"max-width"})],o.prototype,"maxWidth",2),a([(0,d.property)({type:String,attribute:"resize-label"})],o.prototype,"resizeLabel",2),a([(0,d.property)({type:Number,attribute:"resize-step"})],o.prototype,"resizeStep",2),o=a([(0,y.customElement)("skdx-table-header-cell","table","header-cell")],o);0&&(module.exports={SkdxTableHeaderCell});

package/dist/table/TableHeaderCell.d.cts

@@ -0,0 +1,106 @@
+import { LitElement } from 'lit';
+import { type ColumnResizeTarget } from './column-resize.cjs';
+import type { SkdxTable } from './Table.cjs';
+/**
+ * `<skdx-table-header-cell>` — a `<th>`. Passing `sort-key` makes it
+ * sortable: the cell sets `aria-sort` (`"ascending"`, `"descending"`, or
+ * `"none"`) and `data-sort-direction`, and wraps its slotted content in a
+ * `<button data-skdx-table-sort-trigger>` (the APG sortable-table pattern)
+ * that cycles the table's sort for that column through
+ * ascending → descending → unsorted on click or Enter/Space. The `<th>` itself
+ * is never focusable. Without `sort-key`, it's a plain header cell.
+ *
+ * Passing `resizable` (plus a `column-key`, defaulting to `sort-key`) appends a
+ * focusable `role="separator"` handle: dragging it, or pressing Arrow
+ * Left/Right (Home/End for the bounds) while it has focus, writes the column's
+ * width into the table's column-width state, clamped to `min-width`/`max-width`.
+ * Escape mid-drag reverts the column to the width it started at. A stored width
+ * is published on the `<th>` as an inline `width` *and* as the
+ * `--skdx-table-column-width` custom property, so sticky overlays and shadows can
+ * follow the column without re-measuring it.
+ *
+ * Both defaults step aside for a part you slot in yourself: a
+ * `<skdx-table-column-header-sort-trigger>` among the children (to put a
+ * `<skdx-table-sort-indicator>` inside the button, say) suppresses the built-in
+ * button, and a `<skdx-table-column-resize-trigger>` suppresses the built-in
+ * handle. Either way a column ends up with exactly one of each.
+ *
+ * @csspart header-cell - The native `<th>` element inside the shadow root.
+ * @csspart sort-trigger - The sort `<button>` rendered inside a sortable `<th>`.
+ * @csspart resizer - The `role="separator"` resize handle inside a resizable `<th>`.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell sort-key="amount" resizable min-width="80">Amount</skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableHeaderCell extends LitElement implements ColumnResizeTarget {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Column identifier used for sorting. Presence of this attribute is what makes the header cell sortable.
+     * @default undefined
+     */
+    sortKey?: string;
+    /**
+     * Column identifier used for resizing, when it differs from `sort-key`.
+     * @default undefined — falls back to `sort-key`.
+     */
+    columnKey?: string;
+    /** Appends a resize handle. Needs a `column-key` or `sort-key` to store the width under. @default false */
+    resizable: boolean;
+    /** Smallest width in pixels the column can be resized to. @default 40 */
+    minWidth: number;
+    /** Largest width in pixels the column can be resized to. @default 1000 */
+    maxWidth: number;
+    /** Accessible name for the resize handle, which needs one of its own. @default 'Resize column' */
+    resizeLabel: string;
+    /** How far one Arrow keypress moves this column's edge, in pixels. @default 8 */
+    resizeStep: number;
+    private readonly resize;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The key this column's width is stored under, if it can be resized at all. */
+    get resizeColumnKey(): string | undefined;
+    get resizeMinWidth(): number;
+    get resizeMaxWidth(): number;
+    get resizeStepPx(): number;
+    get resizeTable(): SkdxTable | null;
+    /**
+     * The cell box a resize drag measures from — the host, not the inner `<th>`:
+     * the `<th>` is `display: contents` and an element with no box measures 0.
+     *
+     * Measurement plumbing for the drag implementation, not consumer API — the
+     * shared contract declares `toggleAll`, `isAllSelected` and `isSomeSelected`
+     * and nothing else. It stays `public` to the compiler because
+     * `<skdx-table-column-resize-trigger>`, a different class, reads it off this
+     * cell.
+     *
+     * @internal
+     */
+    resizeMeasureCell(): HTMLElement | null | undefined;
+    /**
+     * Mirrors a stored column width onto the host, which is the cell box and the
+     * element `.skdx-table__header-cell` is on. The `<th>`'s copy (see `render`)
+     * is kept for `::part(header-cell)`, but it sizes nothing: no box, no width.
+     * The custom property comes along so overlays and shadows that follow a
+     * column inherit it from the element the skin actually paints.
+     */
+    protected updated(): void;
+    /**
+     * Whether the consumer already slotted their own copy of a part, in which
+     * case the cell must not render a second one. Scoped to this cell, so a part
+     * belonging to a nested table never counts.
+     */
+    private hasSlotted;
+    /** Light-DOM children arriving or leaving change which defaults the cell owes. */
+    private readonly handleSlotChange;
+    private readonly activate;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-header-cell': SkdxTableHeaderCell;
+    }
+}

package/dist/table/TableHeaderCell.d.ts

@@ -0,0 +1,106 @@
+import { LitElement } from 'lit';
+import { type ColumnResizeTarget } from './column-resize.js';
+import type { SkdxTable } from './Table.js';
+/**
+ * `<skdx-table-header-cell>` — a `<th>`. Passing `sort-key` makes it
+ * sortable: the cell sets `aria-sort` (`"ascending"`, `"descending"`, or
+ * `"none"`) and `data-sort-direction`, and wraps its slotted content in a
+ * `<button data-skdx-table-sort-trigger>` (the APG sortable-table pattern)
+ * that cycles the table's sort for that column through
+ * ascending → descending → unsorted on click or Enter/Space. The `<th>` itself
+ * is never focusable. Without `sort-key`, it's a plain header cell.
+ *
+ * Passing `resizable` (plus a `column-key`, defaulting to `sort-key`) appends a
+ * focusable `role="separator"` handle: dragging it, or pressing Arrow
+ * Left/Right (Home/End for the bounds) while it has focus, writes the column's
+ * width into the table's column-width state, clamped to `min-width`/`max-width`.
+ * Escape mid-drag reverts the column to the width it started at. A stored width
+ * is published on the `<th>` as an inline `width` *and* as the
+ * `--skdx-table-column-width` custom property, so sticky overlays and shadows can
+ * follow the column without re-measuring it.
+ *
+ * Both defaults step aside for a part you slot in yourself: a
+ * `<skdx-table-column-header-sort-trigger>` among the children (to put a
+ * `<skdx-table-sort-indicator>` inside the button, say) suppresses the built-in
+ * button, and a `<skdx-table-column-resize-trigger>` suppresses the built-in
+ * handle. Either way a column ends up with exactly one of each.
+ *
+ * @csspart header-cell - The native `<th>` element inside the shadow root.
+ * @csspart sort-trigger - The sort `<button>` rendered inside a sortable `<th>`.
+ * @csspart resizer - The `role="separator"` resize handle inside a resizable `<th>`.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell sort-key="amount" resizable min-width="80">Amount</skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableHeaderCell extends LitElement implements ColumnResizeTarget {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Column identifier used for sorting. Presence of this attribute is what makes the header cell sortable.
+     * @default undefined
+     */
+    sortKey?: string;
+    /**
+     * Column identifier used for resizing, when it differs from `sort-key`.
+     * @default undefined — falls back to `sort-key`.
+     */
+    columnKey?: string;
+    /** Appends a resize handle. Needs a `column-key` or `sort-key` to store the width under. @default false */
+    resizable: boolean;
+    /** Smallest width in pixels the column can be resized to. @default 40 */
+    minWidth: number;
+    /** Largest width in pixels the column can be resized to. @default 1000 */
+    maxWidth: number;
+    /** Accessible name for the resize handle, which needs one of its own. @default 'Resize column' */
+    resizeLabel: string;
+    /** How far one Arrow keypress moves this column's edge, in pixels. @default 8 */
+    resizeStep: number;
+    private readonly resize;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** The key this column's width is stored under, if it can be resized at all. */
+    get resizeColumnKey(): string | undefined;
+    get resizeMinWidth(): number;
+    get resizeMaxWidth(): number;
+    get resizeStepPx(): number;
+    get resizeTable(): SkdxTable | null;
+    /**
+     * The cell box a resize drag measures from — the host, not the inner `<th>`:
+     * the `<th>` is `display: contents` and an element with no box measures 0.
+     *
+     * Measurement plumbing for the drag implementation, not consumer API — the
+     * shared contract declares `toggleAll`, `isAllSelected` and `isSomeSelected`
+     * and nothing else. It stays `public` to the compiler because
+     * `<skdx-table-column-resize-trigger>`, a different class, reads it off this
+     * cell.
+     *
+     * @internal
+     */
+    resizeMeasureCell(): HTMLElement | null | undefined;
+    /**
+     * Mirrors a stored column width onto the host, which is the cell box and the
+     * element `.skdx-table__header-cell` is on. The `<th>`'s copy (see `render`)
+     * is kept for `::part(header-cell)`, but it sizes nothing: no box, no width.
+     * The custom property comes along so overlays and shadows that follow a
+     * column inherit it from the element the skin actually paints.
+     */
+    protected updated(): void;
+    /**
+     * Whether the consumer already slotted their own copy of a part, in which
+     * case the cell must not render a second one. Scoped to this cell, so a part
+     * belonging to a nested table never counts.
+     */
+    private hasSlotted;
+    /** Light-DOM children arriving or leaving change which defaults the cell owes. */
+    private readonly handleSlotChange;
+    private readonly activate;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-header-cell': SkdxTableHeaderCell;
+    }
+}

package/dist/table/TableHeaderCell.js

@@ -0,0 +1,49 @@
+var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var s=(u,d,t,e)=>{for(var r=e>1?void 0:e?f(d,t):d,l=u.length-1,o;l>=0;l--)(o=u[l])&&(r=(e?o(d,t,r):o(r))||r);return e&&r&&v(d,t,r),r};import{css as $,html as h,LitElement as x,nothing as n}from"lit";import{property as a}from"lit/decorators.js";import{customElement as w}from"../internal/define.js";import{reflectHostState as K}from"../internal/part.js";import{resetNativeControl as k}from"../internal/styles.js";import{findTableRoot as R,optionalStringAttribute as p,TABLE_INTERNAL_UPDATE as m}from"./column-context.js";import{ColumnResizeController as S}from"./column-resize.js";var i=class extends x{constructor(){super(...arguments);this.resizable=!1;this.minWidth=40;this.maxWidth=1e3;this.resizeLabel="Resize column";this.resizeStep=8;this.resize=new S(this);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleSlotChange=()=>this.requestUpdate();this.activate=()=>{if(this.sortKey===void 0)return;let t=this.textContent?.trim();this.root?.toggleSort(this.sortKey,t||this.sortKey)}}connectedCallback(){super.connectedCallback(),this.root=R(this),this.root?.addEventListener(m,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(m,this.onRootUpdate),super.disconnectedCallback()}get resizeColumnKey(){return this.columnKey??this.sortKey}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 t=this.resize.storedWidth;this.style.width=t===void 0?"":`${t}px`,t===void 0?this.style.removeProperty("--skdx-table-column-width"):this.style.setProperty("--skdx-table-column-width",`${t}px`),K(this,{"aria-sort":this.shadowRoot?.querySelector("th")?.getAttribute("aria-sort")??null})}hasSlotted(t){let e=this.querySelector(t);return e!==null&&e.closest("skdx-table-header-cell")===this}render(){let t=this.sortKey!==void 0,e=t?this.root?.sortList.find(z=>z.columnKey===this.sortKey)?.direction:void 0,r=t?e==="asc"?"ascending":e==="desc"?"descending":"none":n,l=this.resizable&&this.resizeColumnKey!==void 0,o=this.resize.storedWidth,y=o===void 0?n:`width:${o}px;--skdx-table-column-width:${o}px`,c=h`<slot @slotchange=${this.handleSlotChange}></slot>`,b=t&&!this.hasSlotted("skdx-table-column-header-sort-trigger"),g=l&&!this.hasSlotted("skdx-table-column-resize-trigger");return h`
+      <th
+        part="header-cell"
+        aria-sort=${r}
+        data-sort-direction=${e??n}
+        data-resizable=${l?"":n}
+        style=${y}
+      >
+        ${b?h`
+                <button
+                  type="button"
+                  part="sort-trigger"
+                  data-skdx-table-sort-trigger
+                  data-sort-direction=${e??n}
+                  @click=${this.activate}
+                >
+                  ${c}
+                </button>
+              `:c}
+        ${g?h`
+                <span
+                  part="resizer"
+                  role="separator"
+                  aria-orientation="vertical"
+                  aria-label=${this.resizeLabel}
+                  aria-valuenow=${Math.round(o??this.minWidth)}
+                  aria-valuemin=${this.minWidth}
+                  aria-valuemax=${this.maxWidth}
+                  tabindex="0"
+                  data-skdx-table-resizer
+                  data-dragging=${this.resize.dragging?"":n}
+                  @pointerdown=${this.resize.handlePointerDown}
+                  @pointermove=${this.resize.handlePointerMove}
+                  @pointerup=${this.resize.handlePointerUp}
+                  @pointercancel=${this.resize.handlePointerUp}
+                  @keydown=${this.resize.handleKeyDown}
+                ></span>
+              `:n}
+      </th>
+    `}};i.styles=[k,$`
+      /* Host takes the display role, native element gives up its box — see Table.ts. */
+      :host {
+        display: table-cell;
+      }
+
+      :host > th {
+        display: contents;
+      }
+    `],s([a({type:String,attribute:"sort-key",converter:p})],i.prototype,"sortKey",2),s([a({type:String,attribute:"column-key",converter:p})],i.prototype,"columnKey",2),s([a({type:Boolean})],i.prototype,"resizable",2),s([a({type:Number,attribute:"min-width"})],i.prototype,"minWidth",2),s([a({type:Number,attribute:"max-width"})],i.prototype,"maxWidth",2),s([a({type:String,attribute:"resize-label"})],i.prototype,"resizeLabel",2),s([a({type:Number,attribute:"resize-step"})],i.prototype,"resizeStep",2),i=s([w("skdx-table-header-cell","table","header-cell")],i);export{i as SkdxTableHeaderCell};

package/dist/table/TableRow.cjs

@@ -0,0 +1,12 @@
+"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var m=(r,e)=>{for(var o in e)a(r,o,{get:e[o],enumerable:!0})},k=(r,e,o,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of u(e))!v.call(r,t)&&t!==o&&a(r,t,{get:()=>e[t],enumerable:!(s=p(e,t))||s.enumerable});return r};var f=r=>k(a({},"__esModule",{value:!0}),r),c=(r,e,o,s)=>{for(var t=s>1?void 0:s?p(e,o):e,d=r.length-1,n;d>=0;d--)(n=r[d])&&(t=(s?n(e,o,t):n(t))||t);return s&&t&&a(e,o,t),t};var y={};m(y,{SkdxTableRow:()=>i});module.exports=f(y);var l=require("lit"),h=require("lit/decorators.js"),b=require("../internal/define.cjs");var x='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._syncSelected();this.handleClick=o=>{!((this.root?.selectionMode??"none")!=="none"&&this.rowId!==void 0)||o.target.closest?.(x)||this.root?.toggleRow(this.rowId)}}connectedCallback(){super.connectedCallback(),this.root=this.closest("skdx-table"),this.root?.addEventListener("skdx-table-internal-update",this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener("skdx-table-internal-update",this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){this._syncSelected()}_syncSelected(){let o=this.rowId!==void 0&&(this.root?.isRowSelected(this.rowId)??!1),s=this.shadowRoot?.querySelector("tr");o?s?.setAttribute("data-state","selected"):s?.removeAttribute("data-state")}render(){return l.html`<tr part="row" @click=${this.handleClick}>
+      <slot></slot>
+    </tr>`}};i.styles=l.css`
+    /* Host takes the display role, native element gives up its box — see Table.ts. */
+    :host {
+      display: table-row;
+    }
+
+    :host > tr {
+      display: contents;
+    }
+  `,c([(0,h.property)({type:String,attribute:"row-id",reflect:!0})],i.prototype,"rowId",2),i=c([(0,b.customElement)("skdx-table-row","table","row")],i);0&&(module.exports={SkdxTableRow});

package/dist/table/TableRow.d.cts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-row>` — a `<tr>`. When given `row-id` and the ancestor
+ * `<skdx-table>`'s `selection-mode` isn't `"none"`, sets `data-state="selected"`
+ * on the real `<tr>` while selected, and clicking anywhere in the row
+ * (outside interactive descendants matching `button, a, input,
+ * [role="button"]`) toggles its selection.
+ *
+ * @csspart row - The native `<tr>` element inside the shadow root.
+ */
+export declare class SkdxTableRow extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * This row's identifier within the table's selection state. Required for the
+     * row to be selectable.
+     *
+     * Reflected, because the table resolves a Shift-click's range by querying
+     * `skdx-table-row[row-id]` in DOM order — a row whose id was only ever set as
+     * a property would be invisible to that range otherwise.
+     * @default undefined
+     */
+    rowId?: string;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    private _syncSelected;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-row': SkdxTableRow;
+    }
+}