@skdx/web-components 0.28.0 → 0.30.0

package/dist/switch/SwitchThumb.d.ts

@@ -1,18 +1,6 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
- * `<skdx-switch-thumb>` — the knob that slides inside a `<skdx-switch>`.
- *
- * Always mounted: the thumb *is* the moving part, so unmounting it unchecked
- * would leave an empty track. Differs from `<skdx-checkbox-indicator>`, a mark
- * with a genuine absent state; that's why this takes no `force-mount`.
- *
- * `aria-hidden` since the switch's inner control announces state via `aria-checked`.
- * Carries `data-state` and `data-disabled` so the skin can move and dim it.
- *
- * Contributes nothing to the switch's accessible name — not even slotted ticks.
- * `role="switch"` is name-from-content, so a thumb-only switch announces as a
- * bare "switch, off". Slot a visible label beside it or set `aria-label` on the
- * `<skdx-switch>`.
+ * The knob that slides inside a `<skdx-switch>`, always mounted and `aria-hidden`, carrying `data-state`/`data-disabled` so the skin can move and dim it.
  *
  * @example
  * ```html
@@ -32,7 +20,7 @@ export declare class SkdxSwitchThumb extends LitElement {
     disconnectedCallback(): void;
     protected updated(): void;
     private sync;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/switch/SwitchThumb.js

@@ -1,5 +1,5 @@
-var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=(d,t,o,i)=>{for(var e=i>1?void 0:i?h(t,o):t,r=d.length-1,c;r>=0;r--)(c=d[r])&&(e=(i?c(t,o,e):c(e))||e);return i&&e&&n(t,o,e),e};import{css as l,html as v,LitElement as k}from"lit";import{customElement as m}from"../internal/define.js";var s=class extends k{constructor(){super(...arguments);this.root=null;this.onCheckedChange=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.root=this.closest("skdx-switch"),this.root?.addEventListener("checked-change",this.onCheckedChange),this.sync()}disconnectedCallback(){this.root?.removeEventListener("checked-change",this.onCheckedChange),super.disconnectedCallback()}updated(){this.sync()}sync(){this.setAttribute("data-state",this.root?.checked?"checked":"unchecked"),this.root?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return v`<slot></slot>`}};s.styles=l`
+var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=(d,t,o,i)=>{for(var e=i>1?void 0:i?h(t,o):t,r=d.length-1,c;r>=0;r--)(c=d[r])&&(e=(i?c(t,o,e):c(e))||e);return i&&e&&n(t,o,e),e};import{css as l,html as p,LitElement as m}from"lit";import{customElement as v}from"../internal/define.js";var s=class extends m{constructor(){super(...arguments);this.root=null;this.onCheckedChange=()=>this.sync()}connectedCallback(){super.connectedCallback(),this.setAttribute("aria-hidden","true"),this.root=this.closest("skdx-switch"),this.root?.addEventListener("checked-change",this.onCheckedChange),this.sync()}disconnectedCallback(){this.root?.removeEventListener("checked-change",this.onCheckedChange),super.disconnectedCallback()}updated(){this.sync()}sync(){this.setAttribute("data-state",this.root?.checked?"checked":"unchecked"),this.root?.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled")}render(){return p`<slot></slot>`}};s.styles=l`
     :host {
       display: block;
     }
-  `,s=a([m("skdx-switch-thumb","switch","thumb")],s);export{s as SkdxSwitchThumb};
+  `,s=a([v("skdx-switch-thumb","switch","thumb")],s);export{s as SkdxSwitchThumb};

package/dist/table/Table.cjs

@@ -1,16 +1,11 @@
-"use strict";var h=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var W=Object.prototype.hasOwnProperty;var A=(l,r)=>{for(var t in r)h(l,t,{get:r[t],enumerable:!0})},I=(l,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of R(r))!W.call(l,e)&&e!==t&&h(l,e,{get:()=>r[e],enumerable:!(n=w(r,e))||n.enumerable});return l};var M=l=>I(h({},"__esModule",{value:!0}),l),i=(l,r,t,n)=>{for(var e=n>1?void 0:n?w(r,t):r,a=l.length-1,d;a>=0;a--)(d=l[a])&&(e=(n?d(r,t,e):d(e))||e);return n&&e&&h(r,t,e),e};var B={};A(B,{SkdxTable:()=>s,defaultGetSortLabel:()=>C});module.exports=M(B);var c=require("lit"),o=require("lit/decorators.js"),b=require("lit/directives/if-defined.js"),S=require("../internal/authored.cjs"),v=require("../internal/define.cjs"),_=require("../internal/ids.cjs"),y=require("../utils/live-announcer.cjs"),u=require("./TableAnatomy.cjs");function g(l){return l===void 0?new Set:l instanceof Set?l:new Set(l)}function x(l,r,t){let n=l.find(a=>a.columnKey===r),e=n===void 0?"asc":n.direction==="asc"?"desc":null;return t?e===null?l.filter(a=>a.columnKey!==r):n===void 0?[...l,{columnKey:r,direction:e}]:l.map(a=>a.columnKey===r?{columnKey:r,direction:e}:a):e===null?[]:[{columnKey:r,direction:e}]}function C(l,r){return r===null?`${l} not sorted`:`${l} sorted ${r==="asc"?"ascending":"descending"}`}var s=class extends c.LitElement{constructor(){super(...arguments);this.defaultSort=[];this.multiSort=!1;this.selectionMode="none";this.getSortLabel=C;this.defaultExpandedRowIds=[];this.defaultColumnWidths={};this.sortable=!1;this.selectable=!1;this.expandable=!1;this.resizable=!1;this.tableId=(0,_.nextId)("skdx-table");this._uncontrolledSort=[];this._uncontrolledSelected=new Set;this._uncontrolledExpandedRowIds=new Set;this._uncontrolledColumnWidths={};this._initialized=!1;this._anatomyBuilt=!1;this._fillAnatomy=()=>{if((0,S.hasAuthoredParts)(this,u.TABLE_ANATOMY_GENERATED)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,this.selectable&&this.selectionMode==="none"&&(this.selectionMode="multiple"),(0,u.fillTableAnatomy)(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()};this._anchorRowId=null}connectedCallback(){super.connectedCallback(),this._initialized||(this._uncontrolledSort=this.defaultSort??[],this._uncontrolledSelected=g(this.defaultSelected),this._uncontrolledExpandedRowIds=new Set(this.defaultExpandedRowIds),this._uncontrolledColumnWidths={...this.defaultColumnWidths},this._initialized=!0),queueMicrotask(this._fillAnatomy)}get sortList(){return this.sort!==void 0?this.sort:this._uncontrolledSort}get currentSelected(){return this.selected!==void 0?g(this.selected):this._uncontrolledSelected}toggleSort(t,n=t){let e=x(this.sortList,t,this.multiSort);this.sort===void 0&&(this._uncontrolledSort=e),this.dispatchEvent(new CustomEvent("sort-change",{detail:e,bubbles:!0,composed:!0}));let a=e.find(d=>d.columnKey===t)?.direction??null;(0,y.announce)(this.getSortLabel(n,a)),this._broadcast(),(0,u.renderTableRows)(this)}orderedRowIds(){return[...this.querySelectorAll("skdx-table-body skdx-table-row[row-id]")].filter(n=>n.closest("skdx-table")===this).map(n=>n.getAttribute("row-id"))}toggleRow(t,n=!1){if(this.selectionMode==="none")return;let e=this.currentSelected,a=this._anchorRowId;if(n&&this.selectionMode==="multiple"&&a!==null&&a!==t){let m=this.orderedRowIds(),f=m.indexOf(a),p=m.indexOf(t);if(f!==-1&&p!==-1){let E=m.slice(Math.min(f,p),Math.max(f,p)+1);this._commitSelected(new Set([...e,...E]));return}}this._anchorRowId=t;let d;this.selectionMode==="single"?d=e.has(t)&&e.size===1?new Set:new Set([t]):(d=new Set(e),d.has(t)?d.delete(t):d.add(t)),this._commitSelected(d)}_commitSelected(t){let n=this.currentSelected;n.size===t.size&&[...t].every(e=>n.has(e))||(this.selected===void 0&&(this._uncontrolledSelected=t),this.dispatchEvent(new CustomEvent("selected-change",{detail:[...t],bubbles:!0,composed:!0})),this._broadcast())}isRowSelected(t){return this.currentSelected.has(t)}toggleAll(t){if(this.selectionMode==="none")return;let n=this.currentSelected,e;if(t.length>0&&t.every(a=>n.has(a))){e=new Set(n);for(let a of t)e.delete(a)}else e=new Set([...n,...t]);this._commitSelected(e)}isAllSelected(t){let n=this.currentSelected;return t.length>0&&t.every(e=>n.has(e))}isSomeSelected(t){let n=this.currentSelected;return t.some(e=>n.has(e))&&!this.isAllSelected(t)}get expandedRowIdSet(){return this.expandedRowIds!==void 0?new Set(this.expandedRowIds):this._uncontrolledExpandedRowIds}get resolvedColumnWidths(){return this.columnWidths!==void 0?this.columnWidths:this._uncontrolledColumnWidths}isRowExpanded(t){return this.expandedRowIdSet.has(t)}toggleRowExpanded(t){let n=new Set(this.expandedRowIdSet);n.has(t)?n.delete(t):n.add(t),this.expandedRowIds===void 0&&(this._uncontrolledExpandedRowIds=n),this.dispatchEvent(new CustomEvent("expanded-row-ids-change",{detail:[...n],bubbles:!0,composed:!0})),this._broadcast()}setColumnWidth(t,n){let e=this.resolvedColumnWidths;if(e[t]===n)return;let a={...e,[t]:n};this.columnWidths===void 0&&(this._uncontrolledColumnWidths=a),this.dispatchEvent(new CustomEvent("column-widths-change",{detail:a,bubbles:!0,composed:!0})),this._broadcast()}commitColumnWidths(){this.dispatchEvent(new CustomEvent("column-widths-commit",{detail:this.resolvedColumnWidths,bubbles:!0,composed:!0}))}detailRowId(t){return`${this.tableId}-detail-${t}`}_broadcast(){this.dispatchEvent(new CustomEvent("skdx-table-internal-update"))}updated(t){(t.has("sort")||t.has("multiSort")||t.has("selected")||t.has("selectionMode")||t.has("expandedRowIds")||t.has("columnWidths"))&&this._broadcast(),t.has("columns")||t.has("sortable")||t.has("selectable")||t.has("expandable")||t.has("resizable")||t.has("caption")?this._rebuildAnatomy():this._fillAnatomy(),(t.has("data")||t.has("columns")||t.has("renderCell")||t.has("renderExpanded")||t.has("rowId")||t.has("empty")||t.has("selectable")||t.has("expandable")||t.has("sort"))&&(0,u.renderTableRows)(this)}render(){return c.html`<table
+"use strict";var f=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var B=(s,l)=>{for(var t in l)f(s,t,{get:l[t],enumerable:!0})},L=(s,l,t,n)=>{if(l&&typeof l=="object"||typeof l=="function")for(let e of M(l))!x.call(s,e)&&e!==t&&f(s,e,{get:()=>l[e],enumerable:!(n=_(l,e))||n.enumerable});return s};var z=s=>L(f({},"__esModule",{value:!0}),s),o=(s,l,t,n)=>{for(var e=n>1?void 0:n?_(l,t):l,d=s.length-1,a;d>=0;d--)(a=s[d])&&(e=(n?a(l,t,e):a(e))||e);return n&&e&&f(l,t,e),e};var Y={};B(Y,{SkdxTable:()=>i,defaultGetSortLabel:()=>W});module.exports=z(Y);var h=require("lit"),r=require("lit/decorators.js"),S=require("lit/directives/if-defined.js"),v=require("../internal/authored.cjs"),R=require("../internal/define.cjs"),m=require("../internal/derive.cjs"),c=require("../internal/events.cjs"),A=require("../internal/ids.cjs"),C=require("../utils/live-announcer.cjs"),E=require("./column-context.cjs"),u=require("./TableAnatomy.cjs");var D=["sort","multiSort","selected","selectionMode","expandedRowIds","columnWidths"],N=["columns","sortable","selectable","expandable","resizable","caption"],$=["data","columns","renderCell","renderExpanded","rowId","getRowLabel","empty","selectable","expandable","sort"];function w(s,l){return l.some(t=>s.has(t))}function y(s){return s==null?new Set:s instanceof Set?s:new Set(Array.isArray(s)?s:[String(s)])}function O(s,l,t){let n=s.find(d=>d.columnKey===l),e="asc";return n!==void 0&&(e=n.direction==="asc"?"desc":null),t?e===null?s.filter(d=>d.columnKey!==l):n===void 0?[...s,{columnKey:l,direction:e}]:s.map(d=>d.columnKey===l?{columnKey:l,direction:e}:d):e===null?[]:[{columnKey:l,direction:e}]}function W(s,l){return l===null?`${s} not sorted`:`${s} sorted ${l==="asc"?"ascending":"descending"}`}var i=class extends h.LitElement{constructor(){super(...arguments);this.defaultSort=[];this.multiSort=!1;this.selectionMode="none";this.getSortLabel=W;this.defaultExpandedRowIds=[];this.defaultColumnWidths={};this.sortable=!1;this.selectable=!1;this.expandable=!1;this.resizable=!1;this.stickyHeader=!1;this.tableId=(0,A.nextId)("skdx-table");this._uncontrolledSort=[];this._uncontrolledSelected=new Set;this._uncontrolledExpandedRowIds=new Set;this._uncontrolledColumnWidths={};this._initialized=!1;this._anatomyBuilt=!1;this._fillAnatomy=()=>{if((0,v.hasAuthoredParts)(this,u.TABLE_ANATOMY_GENERATED)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,this.selectable&&this.selectionMode==="none"&&(this.selectionMode="multiple"),(0,u.fillTableAnatomy)(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()};this._anchorRowId=null}connectedCallback(){super.connectedCallback(),this._initialized||(this._uncontrolledSort=this.defaultSort??[],this._uncontrolledSelected=y(this.defaultSelected),this._uncontrolledExpandedRowIds=y(this.defaultExpandedRowIds),this._uncontrolledColumnWidths={...this.defaultColumnWidths},this._initialized=!0),queueMicrotask(this._fillAnatomy)}get sortList(){return this.sort!==void 0?this.sort:this._uncontrolledSort}get currentSelected(){return this.selected!==void 0?y(this.selected):this._uncontrolledSelected}toggleSort(t,n=t){let e=O(this.sortList,t,this.multiSort);this.sort===void 0&&(this._uncontrolledSort=e),(0,c.emit)(this,"sort-change",e);let d=e.find(a=>a.columnKey===t)?.direction??null;(0,C.announce)(this.getSortLabel(n,d)),this._broadcast(),(0,u.renderTableRows)(this)}orderedRowIds(){return[...this.querySelectorAll("skdx-table-body skdx-table-row[row-id]")].filter(n=>n.closest("skdx-table")===this).map(n=>n.getAttribute("row-id"))}toggleRow(t,n=!1){if(this.selectionMode==="none")return;let e=this.currentSelected,d=this._anchorRowId;if(n&&this.selectionMode==="multiple"&&d!==null&&d!==t){let p=this.orderedRowIds(),g=p.indexOf(d),b=p.indexOf(t);if(g!==-1&&b!==-1){let I=p.slice(Math.min(g,b),Math.max(g,b)+1);this._commitSelected(new Set([...e,...I]));return}}this._anchorRowId=t;let a;this.selectionMode==="single"?a=e.has(t)&&e.size===1?new Set:new Set([t]):(a=new Set(e),a.has(t)?a.delete(t):a.add(t)),this._commitSelected(a)}_commitSelected(t){let n=this.currentSelected;n.size===t.size&&[...t].every(e=>n.has(e))||(this.selected===void 0&&(this._uncontrolledSelected=t),(0,c.emit)(this,"selected-change",[...t]),this._broadcast())}isRowSelected(t){return this.currentSelected.has(t)}toggleAll(t){if(this.selectionMode==="none")return;let n=this.currentSelected,e;if(t.length>0&&t.every(d=>n.has(d))){e=new Set(n);for(let d of t)e.delete(d)}else e=new Set([...n,...t]);this._commitSelected(e)}isAllSelected(t){let n=this.currentSelected;return t.length>0&&t.every(e=>n.has(e))}isSomeSelected(t){let n=this.currentSelected;return t.some(e=>n.has(e))&&!this.isAllSelected(t)}get expandedRowIdSet(){return this.expandedRowIds!==void 0?new Set(this.expandedRowIds):this._uncontrolledExpandedRowIds}get resolvedColumnWidths(){return this.columnWidths!==void 0?this.columnWidths:this._uncontrolledColumnWidths}isRowExpanded(t){return this.expandedRowIdSet.has(t)}toggleRowExpanded(t){let n=new Set(this.expandedRowIdSet);n.has(t)?n.delete(t):n.add(t),this.expandedRowIds===void 0&&(this._uncontrolledExpandedRowIds=n),(0,c.emit)(this,"expanded-row-ids-change",[...n]),this._broadcast()}setColumnWidth(t,n){let e=this.resolvedColumnWidths;if(e[t]===n)return;let d={...e,[t]:n};this.columnWidths===void 0&&(this._uncontrolledColumnWidths=d),(0,c.emit)(this,"column-widths-change",d),this._broadcast()}commitColumnWidths(){(0,c.emit)(this,"column-widths-commit",this.resolvedColumnWidths)}detailRowId(t){return`${this.tableId}-detail-${t}`}_broadcast(){this.dispatchEvent(new CustomEvent(E.TABLE_INTERNAL_UPDATE))}updated(t){w(t,D)&&this._broadcast(),w(t,N)?this._rebuildAnatomy():this._fillAnatomy(),w(t,$)&&(0,u.renderTableRows)(this),(0,m.threadAppearance)(this,{size:this.size},[...(0,m.derivedParts)(this,"skdx-table-row-select-checkbox"),...(0,m.derivedParts)(this,"skdx-table-select-all-checkbox")])}headerCellCount(){let t=this.querySelectorAll("skdx-table-header-cell").length;return t>0?t:this.columnCount??1}render(){return h.html`<table
       part="table"
-      aria-rowcount=${(0,b.ifDefined)(this.rowCount)}
-      aria-colcount=${(0,b.ifDefined)(this.columnCount)}
+      aria-rowcount=${(0,S.ifDefined)(this.rowCount)}
+      aria-colcount=${(0,S.ifDefined)(this.columnCount)}
     >
       <slot @slotchange=${this._fillAnatomy}></slot>
-    </table>`}};s.styles=c.css`
-    /**
-     * The host takes the table's display role; the shadow <table> gives its
-     * box up. @skdx/skins paints the host, and a display: contents host
-     * generates no box for either to land on. The native element stays in
-     * the DOM to keep its implicit role.
-     */
+    </table>`}};i.styles=h.css`
+    /* The host takes the table's display role; the shadow <table> stays display: contents so the skin's box lands on the host. */
     :host {
       display: table;
     }
@@ -18,4 +13,4 @@
     :host > table {
       display: contents;
     }
-  `,i([(0,o.property)({attribute:!1})],s.prototype,"sort",2),i([(0,o.property)({type:Array,attribute:"default-sort"})],s.prototype,"defaultSort",2),i([(0,o.property)({type:Number,attribute:"row-count"})],s.prototype,"rowCount",2),i([(0,o.property)({type:Number,attribute:"column-count"})],s.prototype,"columnCount",2),i([(0,o.property)({type:Boolean,attribute:"multi-sort"})],s.prototype,"multiSort",2),i([(0,o.property)({attribute:!1})],s.prototype,"selected",2),i([(0,o.property)({type:Array,attribute:"default-selected"})],s.prototype,"defaultSelected",2),i([(0,o.property)({type:String,attribute:"selection-mode"})],s.prototype,"selectionMode",2),i([(0,o.property)({attribute:!1})],s.prototype,"getSortLabel",2),i([(0,o.property)({attribute:!1})],s.prototype,"expandedRowIds",2),i([(0,o.property)({type:Array,attribute:"default-expanded-row-ids"})],s.prototype,"defaultExpandedRowIds",2),i([(0,o.property)({attribute:!1})],s.prototype,"columnWidths",2),i([(0,o.property)({type:Object,attribute:"default-column-widths"})],s.prototype,"defaultColumnWidths",2),i([(0,o.property)({attribute:!1})],s.prototype,"columns",2),i([(0,o.property)({attribute:!1})],s.prototype,"data",2),i([(0,o.property)({type:Boolean})],s.prototype,"sortable",2),i([(0,o.property)({type:Boolean})],s.prototype,"selectable",2),i([(0,o.property)({type:Boolean})],s.prototype,"expandable",2),i([(0,o.property)({type:Boolean})],s.prototype,"resizable",2),i([(0,o.property)()],s.prototype,"empty",2),i([(0,o.property)()],s.prototype,"caption",2),i([(0,o.property)({attribute:!1})],s.prototype,"renderCell",2),i([(0,o.property)({attribute:!1})],s.prototype,"renderExpanded",2),i([(0,o.property)({attribute:!1})],s.prototype,"rowId",2),i([(0,o.state)()],s.prototype,"_uncontrolledSort",2),i([(0,o.state)()],s.prototype,"_uncontrolledSelected",2),i([(0,o.state)()],s.prototype,"_uncontrolledExpandedRowIds",2),i([(0,o.state)()],s.prototype,"_uncontrolledColumnWidths",2),s=i([(0,v.customElement)("skdx-table","table","root")],s);0&&(module.exports={SkdxTable,defaultGetSortLabel});
+  `,o([(0,r.property)({attribute:!1})],i.prototype,"sort",2),o([(0,r.property)({type:Array,attribute:"default-sort"})],i.prototype,"defaultSort",2),o([(0,r.property)({type:Number,attribute:"row-count"})],i.prototype,"rowCount",2),o([(0,r.property)({type:Number,attribute:"column-count"})],i.prototype,"columnCount",2),o([(0,r.property)({type:Boolean,attribute:"multi-sort"})],i.prototype,"multiSort",2),o([(0,r.property)({attribute:!1})],i.prototype,"selected",2),o([(0,r.property)({type:Array,attribute:"default-selected"})],i.prototype,"defaultSelected",2),o([(0,r.property)({type:String,attribute:"selection-mode"})],i.prototype,"selectionMode",2),o([(0,r.property)({attribute:!1})],i.prototype,"getSortLabel",2),o([(0,r.property)({attribute:!1})],i.prototype,"expandedRowIds",2),o([(0,r.property)({type:Array,attribute:"default-expanded-row-ids"})],i.prototype,"defaultExpandedRowIds",2),o([(0,r.property)({attribute:!1})],i.prototype,"columnWidths",2),o([(0,r.property)({type:Object,attribute:"default-column-widths"})],i.prototype,"defaultColumnWidths",2),o([(0,r.property)({attribute:!1})],i.prototype,"columns",2),o([(0,r.property)({attribute:!1})],i.prototype,"data",2),o([(0,r.property)({type:Boolean})],i.prototype,"sortable",2),o([(0,r.property)({type:Boolean})],i.prototype,"selectable",2),o([(0,r.property)({type:Boolean})],i.prototype,"expandable",2),o([(0,r.property)({type:Boolean})],i.prototype,"resizable",2),o([(0,r.property)()],i.prototype,"empty",2),o([(0,r.property)()],i.prototype,"caption",2),o([(0,r.property)({attribute:!1})],i.prototype,"renderCell",2),o([(0,r.property)({attribute:!1})],i.prototype,"renderExpanded",2),o([(0,r.property)({attribute:!1})],i.prototype,"rowId",2),o([(0,r.property)({attribute:!1})],i.prototype,"getRowLabel",2),o([(0,r.property)({type:String,reflect:!0,attribute:"data-density"})],i.prototype,"density",2),o([(0,r.property)({type:Boolean,reflect:!0,attribute:"data-sticky-header"})],i.prototype,"stickyHeader",2),o([(0,r.property)({type:String,attribute:"data-size"})],i.prototype,"size",2),o([(0,r.state)()],i.prototype,"_uncontrolledSort",2),o([(0,r.state)()],i.prototype,"_uncontrolledSelected",2),o([(0,r.state)()],i.prototype,"_uncontrolledExpandedRowIds",2),o([(0,r.state)()],i.prototype,"_uncontrolledColumnWidths",2),i=o([(0,R.customElement)("skdx-table","table","root")],i);0&&(module.exports={SkdxTable,defaultGetSortLabel});

package/dist/table/Table.d.cts

@@ -1,29 +1,10 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type SkdxTableColumn } from './TableAnatomy.cjs';
 import type { SortDirection, TableColumnWidths, TableSelectionMode, TableSort, TableSortState } from './types.cjs';
 /** Default `getSortLabel`: `"Amount sorted ascending"` / `"Amount not sorted"`. */
 export declare function defaultGetSortLabel(column: string, direction: SortDirection | null): string;
 /**
- * `<skdx-table>` — the Web Components implementation of the shared Table
- * contract (`@skdx/shared`'s `tableContract`). Owns only sort and
- * row-selection state — no pagination, filtering, or data model — and hands
- * it to `<skdx-table-header-cell>`/`<skdx-table-row>` via
- * `this.closest('skdx-table')`, re-syncing them via an internal broadcast
- * event.
- *
- * Renders a real `<table>` inside shadow DOM, as does every descendant part,
- * so the accessibility tree comes from the elements themselves rather than
- * ARIA roles. Each host takes its native element's CSS table display role;
- * the native element inside is `display: contents`, since `@skdx/skins`
- * paints the host.
- *
- * Sort and selection each work controlled (`sort`/`selected` +
- * `sort-change`/`selected-change`) or uncontrolled (`defaultSort`/
- * `defaultSelected`), as do expanded rows and column widths.
- *
- * `sort` is always a `TableSortState[]`, most significant first — `[]` means
- * nothing sorted. **The table never reorders your rows** — it publishes sort
- * state and you sort the data.
+ * Web Components implementation of the shared Table contract, owning only sort and row-selection state (no pagination, filtering, or data model) and rendering a real `<table>` in shadow DOM. Sort and selection work controlled or uncontrolled; **the table never reorders your rows**, it only publishes sort state.
  *
  * @fires sort-change - Fired with the new `TableSortState[]` whenever a column header's sort trigger cycles it.
  * @fires selected-change - Fired with the selected row ids whenever a row or select-all checkbox is toggled.
@@ -31,10 +12,7 @@ export declare function defaultGetSortLabel(column: string, direction: SortDirec
  * @fires column-widths-change - Fired with the full `{ columnKey: px }` map on every drag frame and arrow-key nudge. Persist from `column-widths-commit` instead.
  * @fires column-widths-commit - Fired once with the settled width map when a resize gesture ends.
  *
- * **A `selection-mode` other than `"none"` requires a
- * `<skdx-table-row-select-checkbox>` in every selectable row** — the `<tr>`
- * is deliberately not focusable, so the checkbox is the keyboard path, and
- * `assertTableSelectionContract` fails a table that omits it.
+ * **A `selection-mode` other than `"none"` requires a `<skdx-table-row-select-checkbox>` in every selectable row** — the `<tr>` is deliberately not focusable, so the checkbox is the keyboard path.
  *
  * @example
  * ```html
@@ -181,6 +159,26 @@ export declare class SkdxTable extends LitElement {
      * @default (row, index) => String(row.id ?? index)
      */
     rowId?: (row: Record<string, unknown>, index: number) => string;
+    /**
+     * Names each row in its derived select checkbox and expand trigger.
+     * @default undefined
+     */
+    getRowLabel?: (row: Record<string, unknown>, index: number) => string;
+    /**
+     * Row spacing the skin applies, reflected as `data-density`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Pins the header row while the body scrolls, reflected as `data-sticky-header`.
+     * @default false
+     */
+    stickyHeader: boolean;
+    /**
+     * Control scale for the derived row-select and select-all checkboxes the skin sizes.
+     * @default undefined — the part keeps its own value.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
     /** @internal Unique per instance, so two tables on one page don't collide detail-row ids. */
     readonly tableId: string;
     private _uncontrolledSort;
@@ -190,12 +188,7 @@ export declare class SkdxTable extends LitElement {
     private _initialized;
     connectedCallback(): void;
     private _anatomyBuilt;
-    /**
-     * Draws the canonical anatomy into the light DOM when this element has no
-     * consumer-authored part, and hands back once one appears.
-     */
     private readonly _fillAnatomy;
-    /** Forces a rebuild — for a change that alters the derived column structure itself. */
     private readonly _rebuildAnatomy;
     /** @internal Every sorted column, most significant first, controlled or uncontrolled. */
     get sortList(): TableSortState[];
@@ -203,28 +196,15 @@ export declare class SkdxTable extends LitElement {
     get currentSelected(): Set<string>;
     /** @internal Cycles a column through asc → desc → unsorted. `columnLabel` is used only for the announcement. */
     toggleSort(columnKey: string, columnLabel?: string): void;
-    /**
-     * @internal Row ids in DOM order, read per event rather than registered on
-     * mount. Reads the light-DOM `<skdx-table-row>` hosts, not their shadow
-     * `<tr>`s, since each row's `<tr>` lives in its own shadow root.
-     */
     private orderedRowIds;
     /** Row last toggled without Shift — the fixed end of a Shift-click range. */
     private _anchorRowId;
-    /**
-     * @internal Toggles a row's selection, respecting `selectionMode`. Pass
-     * `extend` (Shift-click) to select the range from the anchor instead.
-     */
+    /** @internal Toggles a row's selection, respecting `selectionMode`; `extend` selects the range from the anchor instead. */
     toggleRow(id: string, extend?: boolean): void;
     private _commitSelected;
     /** @internal */
     isRowSelected(id: string): boolean;
-    /**
-     * Selects every id in `allIds`, or deselects them all when already
-     * selected — what a select-all checkbox calls. A no-op while
-     * `selection-mode` is `'none'`. Under pagination/virtualization, pass the
-     * full id list, not the rendered page.
-     */
+    /** Selects every id in `allIds`, or deselects them all when already selected (a no-op while `selection-mode` is `'none'`); pass the full id list under pagination, not just the rendered page. */
     toggleAll(allIds: string[]): void;
     /** Whether every id in `allIds` is selected. False over an empty list, so a select-all checkbox above no rows reads unchecked. */
     isAllSelected(allIds: string[]): boolean;
@@ -240,17 +220,15 @@ export declare class SkdxTable extends LitElement {
     toggleRowExpanded(rowId: string): void;
     /** @internal Stores a column's pixel width. Callers clamp before calling. */
     setColumnWidth(columnKey: string, width: number): void;
-    /**
-     * @internal Ends a resize gesture with one `column-widths-commit` of the
-     * settled width map. `column-widths-change` fires every drag frame and
-     * arrow step; this is the one to persist from.
-     */
+    /** @internal Ends a resize gesture with one `column-widths-commit` of the settled width map, unlike `column-widths-change`'s per-frame firing. */
     commitColumnWidths(): void;
     /** @internal DOM id for `rowId`'s `<skdx-table-expanded-row>`, referenced by its trigger's `aria-controls`. */
     detailRowId(rowId: string): string;
     private _broadcast;
     protected updated(changed: Map<string, unknown>): void;
-    render(): import("lit").TemplateResult<1>;
+    /** @internal Header cells currently rendered, for a full-row cell's `colspan`; falls back to `columnCount` before the header upgrades. */
+    headerCellCount(): number;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/table/Table.d.ts

@@ -1,29 +1,10 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 import { type SkdxTableColumn } from './TableAnatomy.js';
 import type { SortDirection, TableColumnWidths, TableSelectionMode, TableSort, TableSortState } from './types.js';
 /** Default `getSortLabel`: `"Amount sorted ascending"` / `"Amount not sorted"`. */
 export declare function defaultGetSortLabel(column: string, direction: SortDirection | null): string;
 /**
- * `<skdx-table>` — the Web Components implementation of the shared Table
- * contract (`@skdx/shared`'s `tableContract`). Owns only sort and
- * row-selection state — no pagination, filtering, or data model — and hands
- * it to `<skdx-table-header-cell>`/`<skdx-table-row>` via
- * `this.closest('skdx-table')`, re-syncing them via an internal broadcast
- * event.
- *
- * Renders a real `<table>` inside shadow DOM, as does every descendant part,
- * so the accessibility tree comes from the elements themselves rather than
- * ARIA roles. Each host takes its native element's CSS table display role;
- * the native element inside is `display: contents`, since `@skdx/skins`
- * paints the host.
- *
- * Sort and selection each work controlled (`sort`/`selected` +
- * `sort-change`/`selected-change`) or uncontrolled (`defaultSort`/
- * `defaultSelected`), as do expanded rows and column widths.
- *
- * `sort` is always a `TableSortState[]`, most significant first — `[]` means
- * nothing sorted. **The table never reorders your rows** — it publishes sort
- * state and you sort the data.
+ * Web Components implementation of the shared Table contract, owning only sort and row-selection state (no pagination, filtering, or data model) and rendering a real `<table>` in shadow DOM. Sort and selection work controlled or uncontrolled; **the table never reorders your rows**, it only publishes sort state.
  *
  * @fires sort-change - Fired with the new `TableSortState[]` whenever a column header's sort trigger cycles it.
  * @fires selected-change - Fired with the selected row ids whenever a row or select-all checkbox is toggled.
@@ -31,10 +12,7 @@ export declare function defaultGetSortLabel(column: string, direction: SortDirec
  * @fires column-widths-change - Fired with the full `{ columnKey: px }` map on every drag frame and arrow-key nudge. Persist from `column-widths-commit` instead.
  * @fires column-widths-commit - Fired once with the settled width map when a resize gesture ends.
  *
- * **A `selection-mode` other than `"none"` requires a
- * `<skdx-table-row-select-checkbox>` in every selectable row** — the `<tr>`
- * is deliberately not focusable, so the checkbox is the keyboard path, and
- * `assertTableSelectionContract` fails a table that omits it.
+ * **A `selection-mode` other than `"none"` requires a `<skdx-table-row-select-checkbox>` in every selectable row** — the `<tr>` is deliberately not focusable, so the checkbox is the keyboard path.
  *
  * @example
  * ```html
@@ -181,6 +159,26 @@ export declare class SkdxTable extends LitElement {
      * @default (row, index) => String(row.id ?? index)
      */
     rowId?: (row: Record<string, unknown>, index: number) => string;
+    /**
+     * Names each row in its derived select checkbox and expand trigger.
+     * @default undefined
+     */
+    getRowLabel?: (row: Record<string, unknown>, index: number) => string;
+    /**
+     * Row spacing the skin applies, reflected as `data-density`; may be written as that attribute directly.
+     * @default undefined — the skin’s own default.
+     */
+    density?: 'compact' | (string & {}) | undefined;
+    /**
+     * Pins the header row while the body scrolls, reflected as `data-sticky-header`.
+     * @default false
+     */
+    stickyHeader: boolean;
+    /**
+     * Control scale for the derived row-select and select-all checkboxes the skin sizes.
+     * @default undefined — the part keeps its own value.
+     */
+    size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
     /** @internal Unique per instance, so two tables on one page don't collide detail-row ids. */
     readonly tableId: string;
     private _uncontrolledSort;
@@ -190,12 +188,7 @@ export declare class SkdxTable extends LitElement {
     private _initialized;
     connectedCallback(): void;
     private _anatomyBuilt;
-    /**
-     * Draws the canonical anatomy into the light DOM when this element has no
-     * consumer-authored part, and hands back once one appears.
-     */
     private readonly _fillAnatomy;
-    /** Forces a rebuild — for a change that alters the derived column structure itself. */
     private readonly _rebuildAnatomy;
     /** @internal Every sorted column, most significant first, controlled or uncontrolled. */
     get sortList(): TableSortState[];
@@ -203,28 +196,15 @@ export declare class SkdxTable extends LitElement {
     get currentSelected(): Set<string>;
     /** @internal Cycles a column through asc → desc → unsorted. `columnLabel` is used only for the announcement. */
     toggleSort(columnKey: string, columnLabel?: string): void;
-    /**
-     * @internal Row ids in DOM order, read per event rather than registered on
-     * mount. Reads the light-DOM `<skdx-table-row>` hosts, not their shadow
-     * `<tr>`s, since each row's `<tr>` lives in its own shadow root.
-     */
     private orderedRowIds;
     /** Row last toggled without Shift — the fixed end of a Shift-click range. */
     private _anchorRowId;
-    /**
-     * @internal Toggles a row's selection, respecting `selectionMode`. Pass
-     * `extend` (Shift-click) to select the range from the anchor instead.
-     */
+    /** @internal Toggles a row's selection, respecting `selectionMode`; `extend` selects the range from the anchor instead. */
     toggleRow(id: string, extend?: boolean): void;
     private _commitSelected;
     /** @internal */
     isRowSelected(id: string): boolean;
-    /**
-     * Selects every id in `allIds`, or deselects them all when already
-     * selected — what a select-all checkbox calls. A no-op while
-     * `selection-mode` is `'none'`. Under pagination/virtualization, pass the
-     * full id list, not the rendered page.
-     */
+    /** Selects every id in `allIds`, or deselects them all when already selected (a no-op while `selection-mode` is `'none'`); pass the full id list under pagination, not just the rendered page. */
     toggleAll(allIds: string[]): void;
     /** Whether every id in `allIds` is selected. False over an empty list, so a select-all checkbox above no rows reads unchecked. */
     isAllSelected(allIds: string[]): boolean;
@@ -240,17 +220,15 @@ export declare class SkdxTable extends LitElement {
     toggleRowExpanded(rowId: string): void;
     /** @internal Stores a column's pixel width. Callers clamp before calling. */
     setColumnWidth(columnKey: string, width: number): void;
-    /**
-     * @internal Ends a resize gesture with one `column-widths-commit` of the
-     * settled width map. `column-widths-change` fires every drag frame and
-     * arrow step; this is the one to persist from.
-     */
+    /** @internal Ends a resize gesture with one `column-widths-commit` of the settled width map, unlike `column-widths-change`'s per-frame firing. */
     commitColumnWidths(): void;
     /** @internal DOM id for `rowId`'s `<skdx-table-expanded-row>`, referenced by its trigger's `aria-controls`. */
     detailRowId(rowId: string): string;
     private _broadcast;
     protected updated(changed: Map<string, unknown>): void;
-    render(): import("lit").TemplateResult<1>;
+    /** @internal Header cells currently rendered, for a full-row cell's `colspan`; falls back to `columnCount` before the header upgrades. */
+    headerCellCount(): number;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/table/Table.js

@@ -1,16 +1,11 @@
-var g=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var i=(l,a,t,e)=>{for(var n=e>1?void 0:e?S(a,t):a,r=l.length-1,d;r>=0;r--)(d=l[r])&&(n=(e?d(a,t,n):d(n))||n);return e&&n&&g(a,t,n),n};import{css as v,html as _,LitElement as y}from"lit";import{property as o,state as u}from"lit/decorators.js";import{ifDefined as f}from"lit/directives/if-defined.js";import{hasAuthoredParts as C}from"../internal/authored.js";import{customElement as E}from"../internal/define.js";import{nextId as R}from"../internal/ids.js";import{announce as W}from"../utils/live-announcer.js";import{fillTableAnatomy as A,renderTableRows as p,TABLE_ANATOMY_GENERATED as I}from"./TableAnatomy.js";function b(l){return l===void 0?new Set:l instanceof Set?l:new Set(l)}function M(l,a,t){let e=l.find(r=>r.columnKey===a),n=e===void 0?"asc":e.direction==="asc"?"desc":null;return t?n===null?l.filter(r=>r.columnKey!==a):e===void 0?[...l,{columnKey:a,direction:n}]:l.map(r=>r.columnKey===a?{columnKey:a,direction:n}:r):n===null?[]:[{columnKey:a,direction:n}]}function x(l,a){return a===null?`${l} not sorted`:`${l} sorted ${a==="asc"?"ascending":"descending"}`}var s=class extends y{constructor(){super(...arguments);this.defaultSort=[];this.multiSort=!1;this.selectionMode="none";this.getSortLabel=x;this.defaultExpandedRowIds=[];this.defaultColumnWidths={};this.sortable=!1;this.selectable=!1;this.expandable=!1;this.resizable=!1;this.tableId=R("skdx-table");this._uncontrolledSort=[];this._uncontrolledSelected=new Set;this._uncontrolledExpandedRowIds=new Set;this._uncontrolledColumnWidths={};this._initialized=!1;this._anatomyBuilt=!1;this._fillAnatomy=()=>{if(C(this,I)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,this.selectable&&this.selectionMode==="none"&&(this.selectionMode="multiple"),A(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()};this._anchorRowId=null}connectedCallback(){super.connectedCallback(),this._initialized||(this._uncontrolledSort=this.defaultSort??[],this._uncontrolledSelected=b(this.defaultSelected),this._uncontrolledExpandedRowIds=new Set(this.defaultExpandedRowIds),this._uncontrolledColumnWidths={...this.defaultColumnWidths},this._initialized=!0),queueMicrotask(this._fillAnatomy)}get sortList(){return this.sort!==void 0?this.sort:this._uncontrolledSort}get currentSelected(){return this.selected!==void 0?b(this.selected):this._uncontrolledSelected}toggleSort(t,e=t){let n=M(this.sortList,t,this.multiSort);this.sort===void 0&&(this._uncontrolledSort=n),this.dispatchEvent(new CustomEvent("sort-change",{detail:n,bubbles:!0,composed:!0}));let r=n.find(d=>d.columnKey===t)?.direction??null;W(this.getSortLabel(e,r)),this._broadcast(),p(this)}orderedRowIds(){return[...this.querySelectorAll("skdx-table-body skdx-table-row[row-id]")].filter(e=>e.closest("skdx-table")===this).map(e=>e.getAttribute("row-id"))}toggleRow(t,e=!1){if(this.selectionMode==="none")return;let n=this.currentSelected,r=this._anchorRowId;if(e&&this.selectionMode==="multiple"&&r!==null&&r!==t){let c=this.orderedRowIds(),h=c.indexOf(r),m=c.indexOf(t);if(h!==-1&&m!==-1){let w=c.slice(Math.min(h,m),Math.max(h,m)+1);this._commitSelected(new Set([...n,...w]));return}}this._anchorRowId=t;let d;this.selectionMode==="single"?d=n.has(t)&&n.size===1?new Set:new Set([t]):(d=new Set(n),d.has(t)?d.delete(t):d.add(t)),this._commitSelected(d)}_commitSelected(t){let e=this.currentSelected;e.size===t.size&&[...t].every(n=>e.has(n))||(this.selected===void 0&&(this._uncontrolledSelected=t),this.dispatchEvent(new CustomEvent("selected-change",{detail:[...t],bubbles:!0,composed:!0})),this._broadcast())}isRowSelected(t){return this.currentSelected.has(t)}toggleAll(t){if(this.selectionMode==="none")return;let e=this.currentSelected,n;if(t.length>0&&t.every(r=>e.has(r))){n=new Set(e);for(let r of t)n.delete(r)}else n=new Set([...e,...t]);this._commitSelected(n)}isAllSelected(t){let e=this.currentSelected;return t.length>0&&t.every(n=>e.has(n))}isSomeSelected(t){let e=this.currentSelected;return t.some(n=>e.has(n))&&!this.isAllSelected(t)}get expandedRowIdSet(){return this.expandedRowIds!==void 0?new Set(this.expandedRowIds):this._uncontrolledExpandedRowIds}get resolvedColumnWidths(){return this.columnWidths!==void 0?this.columnWidths:this._uncontrolledColumnWidths}isRowExpanded(t){return this.expandedRowIdSet.has(t)}toggleRowExpanded(t){let e=new Set(this.expandedRowIdSet);e.has(t)?e.delete(t):e.add(t),this.expandedRowIds===void 0&&(this._uncontrolledExpandedRowIds=e),this.dispatchEvent(new CustomEvent("expanded-row-ids-change",{detail:[...e],bubbles:!0,composed:!0})),this._broadcast()}setColumnWidth(t,e){let n=this.resolvedColumnWidths;if(n[t]===e)return;let r={...n,[t]:e};this.columnWidths===void 0&&(this._uncontrolledColumnWidths=r),this.dispatchEvent(new CustomEvent("column-widths-change",{detail:r,bubbles:!0,composed:!0})),this._broadcast()}commitColumnWidths(){this.dispatchEvent(new CustomEvent("column-widths-commit",{detail:this.resolvedColumnWidths,bubbles:!0,composed:!0}))}detailRowId(t){return`${this.tableId}-detail-${t}`}_broadcast(){this.dispatchEvent(new CustomEvent("skdx-table-internal-update"))}updated(t){(t.has("sort")||t.has("multiSort")||t.has("selected")||t.has("selectionMode")||t.has("expandedRowIds")||t.has("columnWidths"))&&this._broadcast(),t.has("columns")||t.has("sortable")||t.has("selectable")||t.has("expandable")||t.has("resizable")||t.has("caption")?this._rebuildAnatomy():this._fillAnatomy(),(t.has("data")||t.has("columns")||t.has("renderCell")||t.has("renderExpanded")||t.has("rowId")||t.has("empty")||t.has("selectable")||t.has("expandable")||t.has("sort"))&&p(this)}render(){return _`<table
+var _=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var o=(l,d,t,i)=>{for(var e=i>1?void 0:i?v(d,t):d,s=l.length-1,a;s>=0;s--)(a=l[s])&&(e=(i?a(d,t,e):a(e))||e);return i&&e&&_(d,t,e),e};import{css as R,html as A,LitElement as C}from"lit";import{property as r,state as c}from"lit/decorators.js";import{ifDefined as b}from"lit/directives/if-defined.js";import{hasAuthoredParts as E}from"../internal/authored.js";import{customElement as W}from"../internal/define.js";import{derivedParts as w,threadAppearance as I}from"../internal/derive.js";import{emit as u}from"../internal/events.js";import{nextId as M}from"../internal/ids.js";import{announce as x}from"../utils/live-announcer.js";import{TABLE_INTERNAL_UPDATE as B}from"./column-context.js";import{fillTableAnatomy as L,renderTableRows as y,TABLE_ANATOMY_GENERATED as z}from"./TableAnatomy.js";var D=["sort","multiSort","selected","selectionMode","expandedRowIds","columnWidths"],N=["columns","sortable","selectable","expandable","resizable","caption"],$=["data","columns","renderCell","renderExpanded","rowId","getRowLabel","empty","selectable","expandable","sort"];function p(l,d){return d.some(t=>l.has(t))}function g(l){return l==null?new Set:l instanceof Set?l:new Set(Array.isArray(l)?l:[String(l)])}function O(l,d,t){let i=l.find(s=>s.columnKey===d),e="asc";return i!==void 0&&(e=i.direction==="asc"?"desc":null),t?e===null?l.filter(s=>s.columnKey!==d):i===void 0?[...l,{columnKey:d,direction:e}]:l.map(s=>s.columnKey===d?{columnKey:d,direction:e}:s):e===null?[]:[{columnKey:d,direction:e}]}function Y(l,d){return d===null?`${l} not sorted`:`${l} sorted ${d==="asc"?"ascending":"descending"}`}var n=class extends C{constructor(){super(...arguments);this.defaultSort=[];this.multiSort=!1;this.selectionMode="none";this.getSortLabel=Y;this.defaultExpandedRowIds=[];this.defaultColumnWidths={};this.sortable=!1;this.selectable=!1;this.expandable=!1;this.resizable=!1;this.stickyHeader=!1;this.tableId=M("skdx-table");this._uncontrolledSort=[];this._uncontrolledSelected=new Set;this._uncontrolledExpandedRowIds=new Set;this._uncontrolledColumnWidths={};this._initialized=!1;this._anatomyBuilt=!1;this._fillAnatomy=()=>{if(E(this,z)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,this.selectable&&this.selectionMode==="none"&&(this.selectionMode="multiple"),L(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()};this._anchorRowId=null}connectedCallback(){super.connectedCallback(),this._initialized||(this._uncontrolledSort=this.defaultSort??[],this._uncontrolledSelected=g(this.defaultSelected),this._uncontrolledExpandedRowIds=g(this.defaultExpandedRowIds),this._uncontrolledColumnWidths={...this.defaultColumnWidths},this._initialized=!0),queueMicrotask(this._fillAnatomy)}get sortList(){return this.sort!==void 0?this.sort:this._uncontrolledSort}get currentSelected(){return this.selected!==void 0?g(this.selected):this._uncontrolledSelected}toggleSort(t,i=t){let e=O(this.sortList,t,this.multiSort);this.sort===void 0&&(this._uncontrolledSort=e),u(this,"sort-change",e);let s=e.find(a=>a.columnKey===t)?.direction??null;x(this.getSortLabel(i,s)),this._broadcast(),y(this)}orderedRowIds(){return[...this.querySelectorAll("skdx-table-body skdx-table-row[row-id]")].filter(i=>i.closest("skdx-table")===this).map(i=>i.getAttribute("row-id"))}toggleRow(t,i=!1){if(this.selectionMode==="none")return;let e=this.currentSelected,s=this._anchorRowId;if(i&&this.selectionMode==="multiple"&&s!==null&&s!==t){let h=this.orderedRowIds(),m=h.indexOf(s),f=h.indexOf(t);if(m!==-1&&f!==-1){let S=h.slice(Math.min(m,f),Math.max(m,f)+1);this._commitSelected(new Set([...e,...S]));return}}this._anchorRowId=t;let a;this.selectionMode==="single"?a=e.has(t)&&e.size===1?new Set:new Set([t]):(a=new Set(e),a.has(t)?a.delete(t):a.add(t)),this._commitSelected(a)}_commitSelected(t){let i=this.currentSelected;i.size===t.size&&[...t].every(e=>i.has(e))||(this.selected===void 0&&(this._uncontrolledSelected=t),u(this,"selected-change",[...t]),this._broadcast())}isRowSelected(t){return this.currentSelected.has(t)}toggleAll(t){if(this.selectionMode==="none")return;let i=this.currentSelected,e;if(t.length>0&&t.every(s=>i.has(s))){e=new Set(i);for(let s of t)e.delete(s)}else e=new Set([...i,...t]);this._commitSelected(e)}isAllSelected(t){let i=this.currentSelected;return t.length>0&&t.every(e=>i.has(e))}isSomeSelected(t){let i=this.currentSelected;return t.some(e=>i.has(e))&&!this.isAllSelected(t)}get expandedRowIdSet(){return this.expandedRowIds!==void 0?new Set(this.expandedRowIds):this._uncontrolledExpandedRowIds}get resolvedColumnWidths(){return this.columnWidths!==void 0?this.columnWidths:this._uncontrolledColumnWidths}isRowExpanded(t){return this.expandedRowIdSet.has(t)}toggleRowExpanded(t){let i=new Set(this.expandedRowIdSet);i.has(t)?i.delete(t):i.add(t),this.expandedRowIds===void 0&&(this._uncontrolledExpandedRowIds=i),u(this,"expanded-row-ids-change",[...i]),this._broadcast()}setColumnWidth(t,i){let e=this.resolvedColumnWidths;if(e[t]===i)return;let s={...e,[t]:i};this.columnWidths===void 0&&(this._uncontrolledColumnWidths=s),u(this,"column-widths-change",s),this._broadcast()}commitColumnWidths(){u(this,"column-widths-commit",this.resolvedColumnWidths)}detailRowId(t){return`${this.tableId}-detail-${t}`}_broadcast(){this.dispatchEvent(new CustomEvent(B))}updated(t){p(t,D)&&this._broadcast(),p(t,N)?this._rebuildAnatomy():this._fillAnatomy(),p(t,$)&&y(this),I(this,{size:this.size},[...w(this,"skdx-table-row-select-checkbox"),...w(this,"skdx-table-select-all-checkbox")])}headerCellCount(){let t=this.querySelectorAll("skdx-table-header-cell").length;return t>0?t:this.columnCount??1}render(){return A`<table
       part="table"
-      aria-rowcount=${f(this.rowCount)}
-      aria-colcount=${f(this.columnCount)}
+      aria-rowcount=${b(this.rowCount)}
+      aria-colcount=${b(this.columnCount)}
     >
       <slot @slotchange=${this._fillAnatomy}></slot>
-    </table>`}};s.styles=v`
-    /**
-     * The host takes the table's display role; the shadow <table> gives its
-     * box up. @skdx/skins paints the host, and a display: contents host
-     * generates no box for either to land on. The native element stays in
-     * the DOM to keep its implicit role.
-     */
+    </table>`}};n.styles=R`
+    /* The host takes the table's display role; the shadow <table> stays display: contents so the skin's box lands on the host. */
     :host {
       display: table;
     }
@@ -18,4 +13,4 @@ var g=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var i=(l,a,t,e
     :host > table {
       display: contents;
     }
-  `,i([o({attribute:!1})],s.prototype,"sort",2),i([o({type:Array,attribute:"default-sort"})],s.prototype,"defaultSort",2),i([o({type:Number,attribute:"row-count"})],s.prototype,"rowCount",2),i([o({type:Number,attribute:"column-count"})],s.prototype,"columnCount",2),i([o({type:Boolean,attribute:"multi-sort"})],s.prototype,"multiSort",2),i([o({attribute:!1})],s.prototype,"selected",2),i([o({type:Array,attribute:"default-selected"})],s.prototype,"defaultSelected",2),i([o({type:String,attribute:"selection-mode"})],s.prototype,"selectionMode",2),i([o({attribute:!1})],s.prototype,"getSortLabel",2),i([o({attribute:!1})],s.prototype,"expandedRowIds",2),i([o({type:Array,attribute:"default-expanded-row-ids"})],s.prototype,"defaultExpandedRowIds",2),i([o({attribute:!1})],s.prototype,"columnWidths",2),i([o({type:Object,attribute:"default-column-widths"})],s.prototype,"defaultColumnWidths",2),i([o({attribute:!1})],s.prototype,"columns",2),i([o({attribute:!1})],s.prototype,"data",2),i([o({type:Boolean})],s.prototype,"sortable",2),i([o({type:Boolean})],s.prototype,"selectable",2),i([o({type:Boolean})],s.prototype,"expandable",2),i([o({type:Boolean})],s.prototype,"resizable",2),i([o()],s.prototype,"empty",2),i([o()],s.prototype,"caption",2),i([o({attribute:!1})],s.prototype,"renderCell",2),i([o({attribute:!1})],s.prototype,"renderExpanded",2),i([o({attribute:!1})],s.prototype,"rowId",2),i([u()],s.prototype,"_uncontrolledSort",2),i([u()],s.prototype,"_uncontrolledSelected",2),i([u()],s.prototype,"_uncontrolledExpandedRowIds",2),i([u()],s.prototype,"_uncontrolledColumnWidths",2),s=i([E("skdx-table","table","root")],s);export{s as SkdxTable,x as defaultGetSortLabel};
+  `,o([r({attribute:!1})],n.prototype,"sort",2),o([r({type:Array,attribute:"default-sort"})],n.prototype,"defaultSort",2),o([r({type:Number,attribute:"row-count"})],n.prototype,"rowCount",2),o([r({type:Number,attribute:"column-count"})],n.prototype,"columnCount",2),o([r({type:Boolean,attribute:"multi-sort"})],n.prototype,"multiSort",2),o([r({attribute:!1})],n.prototype,"selected",2),o([r({type:Array,attribute:"default-selected"})],n.prototype,"defaultSelected",2),o([r({type:String,attribute:"selection-mode"})],n.prototype,"selectionMode",2),o([r({attribute:!1})],n.prototype,"getSortLabel",2),o([r({attribute:!1})],n.prototype,"expandedRowIds",2),o([r({type:Array,attribute:"default-expanded-row-ids"})],n.prototype,"defaultExpandedRowIds",2),o([r({attribute:!1})],n.prototype,"columnWidths",2),o([r({type:Object,attribute:"default-column-widths"})],n.prototype,"defaultColumnWidths",2),o([r({attribute:!1})],n.prototype,"columns",2),o([r({attribute:!1})],n.prototype,"data",2),o([r({type:Boolean})],n.prototype,"sortable",2),o([r({type:Boolean})],n.prototype,"selectable",2),o([r({type:Boolean})],n.prototype,"expandable",2),o([r({type:Boolean})],n.prototype,"resizable",2),o([r()],n.prototype,"empty",2),o([r()],n.prototype,"caption",2),o([r({attribute:!1})],n.prototype,"renderCell",2),o([r({attribute:!1})],n.prototype,"renderExpanded",2),o([r({attribute:!1})],n.prototype,"rowId",2),o([r({attribute:!1})],n.prototype,"getRowLabel",2),o([r({type:String,reflect:!0,attribute:"data-density"})],n.prototype,"density",2),o([r({type:Boolean,reflect:!0,attribute:"data-sticky-header"})],n.prototype,"stickyHeader",2),o([r({type:String,attribute:"data-size"})],n.prototype,"size",2),o([c()],n.prototype,"_uncontrolledSort",2),o([c()],n.prototype,"_uncontrolledSelected",2),o([c()],n.prototype,"_uncontrolledExpandedRowIds",2),o([c()],n.prototype,"_uncontrolledColumnWidths",2),n=o([W("skdx-table","table","root")],n);export{n as SkdxTable,Y as defaultGetSortLabel};

package/dist/table/TableAnatomy.cjs

@@ -1,20 +1,22 @@
-"use strict";var u=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var E=(e,t)=>{for(var r in t)u(e,r,{get:t[r],enumerable:!0})},S=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of w(t))!g.call(e,l)&&l!==r&&u(e,l,{get:()=>t[l],enumerable:!(a=y(t,l))||a.enumerable});return e};var T=e=>S(u({},"__esModule",{value:!0}),e);var C={};E(C,{TABLE_ANATOMY_GENERATED:()=>b,defaultRowId:()=>x,fillTableAnatomy:()=>R,renderTableRows:()=>f,sortRows:()=>k});module.exports=T(C);var s=require("lit"),m=require("lit/directives/repeat.js"),I=require("./TableCaption.cjs"),v=require("./TableHeader.cjs"),D=require("./TableBody.cjs"),L=require("./TableRow.cjs"),M=require("./TableCell.cjs"),N=require("./TableHeaderCell.cjs"),O=require("./TableRowSelectCheckbox.cjs"),_=require("./TableSelectAllCheckbox.cjs"),q=require("./TableExpandTrigger.cjs"),B=require("./TableExpandedRow.cjs"),G=require("./TableEmpty.cjs"),b="data-skdx-table-generated";function $(e,t){return String(e[t.key]??"")}function x(e,t){return typeof e.id=="string"?e.id:String(t)}function A(e,t){return typeof e=="number"&&typeof t=="number"?e-t:String(e??"").localeCompare(String(t??""))}function k(e,t){return t.length===0?[...e]:[...e].sort((r,a)=>{for(let{columnKey:l,direction:o}of t){let n=A(r[l],a[l]);if(n!==0)return o==="asc"?n:-n}return 0})}function R(e){let t=[];if(e.caption){let n=document.createElement("skdx-table-caption");n.setAttribute(b,""),n.textContent=e.caption,t.push(n)}let r=e.columns??[],a=document.createElement("skdx-table-header");a.setAttribute(b,"");let l=document.createElement("skdx-table-row");if(e.selectable){let n=document.createElement("skdx-table-header-cell"),d=document.createElement("skdx-table-select-all-checkbox");d.setAttribute("scope","page"),n.append(d),l.append(n)}if(e.expandable){let n=document.createElement("skdx-table-header-cell");n.setAttribute("aria-hidden","true"),l.append(n)}for(let n of r){let d=document.createElement("skdx-table-header-cell");d.setAttribute("column-key",n.key),e.sortable&&n.sortable&&d.setAttribute("sortable",""),e.resizable&&n.resizable&&d.setAttribute("resizable",""),(0,s.render)(n.header??n.key,d,{host:e}),l.append(d)}a.append(l),t.push(a);let o=document.createElement("skdx-table-body");o.setAttribute(b,""),t.push(o),e.replaceChildren(...t),f(e)}function f(e){let t=e.querySelector(`:scope > skdx-table-body[${b}]`);if(!t)return;let r=e.columns??[],a=k(e.data??[],e.sortList),l=r.length+(e.selectable?1:0)+(e.expandable?1:0),o=e.renderCell??$,n=e.renderExpanded,d=e.rowId??x;if(a.length===0){(0,s.render)(e.empty?s.html`<skdx-table-empty col-span=${l}>${e.empty}</skdx-table-empty>`:"",t,{host:e});return}(0,s.render)((0,m.repeat)(a,(i,p)=>d(i,p),(i,p)=>{let c=d(i,p);return s.html`
-          <skdx-table-row row-id=${c}>
-            ${e.selectable?s.html`<skdx-table-cell
+"use strict";var m=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var $=Object.prototype.hasOwnProperty;var A=(e,t)=>{for(var a in t)m(e,a,{get:t[a],enumerable:!0})},E=(e,t,a,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of T(t))!$.call(e,n)&&n!==a&&m(e,n,{get:()=>t[n],enumerable:!(r=S(t,n))||r.enumerable});return e};var R=e=>E(m({},"__esModule",{value:!0}),e);var L={};A(L,{TABLE_ANATOMY_GENERATED:()=>i,defaultRowId:()=>h,fillTableAnatomy:()=>z,renderTableRows:()=>y,sortRows:()=>g});module.exports=R(L);var o=require("lit"),f=require("lit/directives/repeat.js"),q=require("./TableCaption.cjs"),D=require("./TableHeader.cjs"),M=require("./TableBody.cjs"),N=require("./TableRow.cjs"),O=require("./TableCell.cjs"),_=require("./TableHeaderCell.cjs"),B=require("./TableRowSelectCheckbox.cjs"),G=require("./TableSelectAllCheckbox.cjs"),H=require("./TableExpandTrigger.cjs"),K=require("./TableExpandedRow.cjs"),V=require("./TableEmpty.cjs"),i="data-skdx-table-generated";function C(e,t){let a=e[t.key]??"";return String(a)}function h(e,t){return typeof e.id=="string"?e.id:String(t)}function I(e,t){if(typeof e=="number"&&typeof t=="number")return e-t;let a=e??"",r=t??"";return String(a).localeCompare(String(r))}function g(e,t){return t.length===0?[...e]:[...e].sort((a,r)=>{for(let{columnKey:n,direction:d}of t){let l=I(a[n],r[n]);if(l!==0)return d==="asc"?l:-l}return 0})}function z(e){let t=[];if(e.caption){let l=document.createElement("skdx-table-caption");l.setAttribute(i,""),l.textContent=e.caption,t.push(l)}let a=e.columns??[],r=document.createElement("skdx-table-header");r.setAttribute(i,"");let n=document.createElement("skdx-table-row");if(e.selectable){let l=document.createElement("skdx-table-header-cell"),s=document.createElement("skdx-table-select-all-checkbox");s.setAttribute("scope","page"),l.append(s),n.append(l)}if(e.expandable){let l=document.createElement("skdx-table-header-cell");l.setAttribute("aria-hidden","true"),n.append(l)}for(let l of a){let s=document.createElement("skdx-table-header-cell");s.setAttribute("column-key",l.key),e.sortable&&l.sortable&&s.setAttribute("sortable",""),e.resizable&&l.resizable&&s.setAttribute("resizable",""),(0,o.render)(l.header??l.key,s,{host:e}),n.append(s)}r.append(n),t.push(r);let d=document.createElement("skdx-table-body");d.setAttribute(i,""),t.push(d),e.replaceChildren(...t),y(e)}function y(e){let t=e.querySelector(`:scope > skdx-table-body[${i}]`);if(!t)return;let a=e.columns??[],r=g(e.data??[],e.sortList),n=a.length+(e.selectable?1:0)+(e.expandable?1:0),d=e.renderCell??C,l=e.renderExpanded,s=e.rowId??h,u=e.getRowLabel,x=e.querySelector(`:scope > skdx-table-header[${i}] skdx-table-select-all-checkbox`);if(x&&(x.rowIds=r.map((c,b)=>s(c,b))),r.length===0){(0,o.render)(e.empty?o.html`<skdx-table-empty col-span=${n}>${e.empty}</skdx-table-empty>`:"",t,{host:e});return}(0,o.render)((0,f.repeat)(r,(c,b)=>s(c,b),(c,b)=>{let p=s(c,b),k=u?u(c,b):`row ${p}`;return o.html`
+          <skdx-table-row row-id=${p}>
+            ${e.selectable?o.html`<skdx-table-cell
                     ><skdx-table-row-select-checkbox
-                      row-id=${c}
-                      aria-label="Select row ${c}"
+                      row-id=${p}
+                      aria-label="Select ${k}"
                     ></skdx-table-row-select-checkbox
                   ></skdx-table-cell>`:""}
-            ${e.expandable?s.html`<skdx-table-cell
+            ${e.expandable?o.html`<skdx-table-cell
                     ><skdx-table-expand-trigger
-                      row-id=${c}
-                      label="Details for row ${c}"
+                      row-id=${p}
+                      label="Details for ${k}"
                     ></skdx-table-expand-trigger
                   ></skdx-table-cell>`:""}
-            ${r.map(h=>s.html`<skdx-table-cell>${o(i,h)}</skdx-table-cell>`)}
+            ${a.map(w=>o.html`<skdx-table-cell>${d(c,w)}</skdx-table-cell>`)}
           </skdx-table-row>
-          ${e.expandable?s.html`<skdx-table-expanded-row row-id=${c} col-span=${l}
-                  >${n?n(i):""}</skdx-table-expanded-row
+          ${e.expandable?o.html`<skdx-table-expanded-row
+                  row-id=${p}
+                  col-span=${n}
+                  >${l?l(c):""}</skdx-table-expanded-row
                 >`:""}
         `}),t,{host:e})}0&&(module.exports={TABLE_ANATOMY_GENERATED,defaultRowId,fillTableAnatomy,renderTableRows,sortRows});

package/dist/table/TableAnatomy.d.cts

@@ -32,16 +32,7 @@ export declare function defaultRowId(row: Record<string, unknown>, index: number
  * @internal
  */
 export declare function sortRows(data: readonly Record<string, unknown>[], sortList: readonly TableSortState[]): Record<string, unknown>[];
-/**
- * Builds anatomy: optional Caption, Header row, empty Body. Row/Cell stay here (not primitives)
- * so composed tables get exact structure. Body rows render separately on `data` change.
- * @internal
- */
+/** @internal Builds the optional caption, header row, and empty body; body rows render separately on `data` change. */
 export declare function fillTableAnatomy(root: SkdxTable): void;
-/**
- * (Re)renders generated Body Rows from `root.data`, using `renderCell` for content.
- * This is the anatomy piece that changes on data update (Caption/Header skeleton stays).
- * `empty` row replaces body when `data` is empty.
- * @internal
- */
+/** @internal Re-renders generated body rows from `root.data`, using `renderCell`; shows `empty` in place of rows when `data` is empty. */
 export declare function renderTableRows(root: SkdxTable): void;

package/dist/table/TableAnatomy.d.ts

@@ -32,16 +32,7 @@ export declare function defaultRowId(row: Record<string, unknown>, index: number
  * @internal
  */
 export declare function sortRows(data: readonly Record<string, unknown>[], sortList: readonly TableSortState[]): Record<string, unknown>[];
-/**
- * Builds anatomy: optional Caption, Header row, empty Body. Row/Cell stay here (not primitives)
- * so composed tables get exact structure. Body rows render separately on `data` change.
- * @internal
- */
+/** @internal Builds the optional caption, header row, and empty body; body rows render separately on `data` change. */
 export declare function fillTableAnatomy(root: SkdxTable): void;
-/**
- * (Re)renders generated Body Rows from `root.data`, using `renderCell` for content.
- * This is the anatomy piece that changes on data update (Caption/Header skeleton stays).
- * `empty` row replaces body when `data` is empty.
- * @internal
- */
+/** @internal Re-renders generated body rows from `root.data`, using `renderCell`; shows `empty` in place of rows when `data` is empty. */
 export declare function renderTableRows(root: SkdxTable): void;