@skdx/web-components 0.30.0 → 0.31.0

package/dist/speed-dial/SpeedDialTrigger.cjs

@@ -1,13 +1,14 @@
-"use strict";var d=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var w=(r,e)=>{for(var t in e)d(r,t,{get:e[t],enumerable:!0})},E=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of b(e))!y.call(r,o)&&o!==t&&d(r,o,{get:()=>e[o],enumerable:!(i=f(e,o))||i.enumerable});return r};var g=r=>E(d({},"__esModule",{value:!0}),r),l=(r,e,t,i)=>{for(var o=i>1?void 0:i?f(e,t):e,c=r.length-1,u;c>=0;c--)(u=r[c])&&(o=(i?u(e,t,o):u(o))||o);return i&&o&&d(e,t,o),o};var R={};w(R,{SkdxSpeedDialTrigger:()=>n});module.exports=g(R);var s=require("lit"),v=require("lit/decorators.js"),h=require("../internal/define.cjs"),m=require("../internal/part.cjs"),a=require("../internal/styles.cjs"),p=require("./family.cjs");var D={up:["ArrowUp","ArrowDown"],down:["ArrowUp","ArrowDown"],left:["ArrowLeft","ArrowRight"],right:["ArrowLeft","ArrowRight"]},n=class extends s.LitElement{constructor(){super(...arguments);this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>this.root?.setOpen(!this.root.open,"pointer");this.handleKeyDown=t=>{this.root&&D[this.root.direction].includes(t.key)&&(t.preventDefault(),this.root.setOpen(!0,"keyboard"))};this.handlePointerEnter=t=>{!this.root?.openOnHover||t.pointerType==="touch"||this.root.hoverOpen()};this.handlePointerLeave=t=>{!this.root?.openOnHover||t.pointerType==="touch"||this.root.scheduleHoverClose()}}connectedCallback(){super.connectedCallback(),this.root=p.SPEED_DIAL_FAMILY.root(this),this.root?.addEventListener(p.SPEED_DIAL_FAMILY.event,this.onRootUpdate),this.root&&(0,h.whenUpgraded)(this.root,()=>{this.root&&!this.id&&(this.id=this.root.triggerId)})}disconnectedCallback(){this.root?.removeEventListener(p.SPEED_DIAL_FAMILY.event,this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){let t=this.shadowRoot?.querySelector("button");this.root&&t&&(this.root.triggerEl=t)}get isDisabled(){return(this.root?.disabled??!1)||this.disabled}updated(){(0,m.reflectHostState)(this,{"data-disabled":this.isDisabled?"":null})}render(){let t=this.root;if(!t)return s.nothing;let i=this.isDisabled;return s.html`
+"use strict";var l=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var w=(r,e)=>{for(var t in e)l(r,t,{get:e[t],enumerable:!0})},E=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of m(e))!y.call(r,o)&&o!==t&&l(r,o,{get:()=>e[o],enumerable:!(i=b(e,o))||i.enumerable});return r};var g=r=>E(l({},"__esModule",{value:!0}),r),d=(r,e,t,i)=>{for(var o=i>1?void 0:i?b(e,t):e,u=r.length-1,v;u>=0;u--)(v=r[u])&&(o=(i?v(e,t,o):v(o))||o);return i&&o&&l(e,t,o),o};var R={};w(R,{SkdxSpeedDialTrigger:()=>n});module.exports=g(R);var a=require("lit"),p=require("lit/decorators.js"),c=require("../internal/define.cjs"),f=require("../internal/part.cjs"),s=require("../internal/styles.cjs"),h=require("./family.cjs");var L={up:["ArrowUp","ArrowDown"],down:["ArrowUp","ArrowDown"],left:["ArrowLeft","ArrowRight"],right:["ArrowLeft","ArrowRight"]},n=class extends a.LitElement{constructor(){super(...arguments);this.disabled=!1;this.ariaLabel=null;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>this.root?.setOpen(!this.root.open,"pointer");this.handleKeyDown=t=>{this.root&&L[this.root.direction].includes(t.key)&&(t.preventDefault(),this.root.setOpen(!0,"keyboard"))};this.handlePointerEnter=t=>{!this.root?.openOnHover||t.pointerType==="touch"||this.root.hoverOpen()};this.handlePointerLeave=t=>{!this.root?.openOnHover||t.pointerType==="touch"||this.root.scheduleHoverClose()}}connectedCallback(){super.connectedCallback(),this.root=h.SPEED_DIAL_FAMILY.root(this),this.root?.addEventListener(h.SPEED_DIAL_FAMILY.event,this.onRootUpdate),this.root&&(0,c.whenUpgraded)(this.root,()=>{this.root&&!this.id&&(this.id=this.root.triggerId)})}disconnectedCallback(){this.root?.removeEventListener(h.SPEED_DIAL_FAMILY.event,this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){let t=this.shadowRoot?.querySelector("button");this.root&&t&&(this.root.triggerEl=t)}get isDisabled(){return(this.root?.disabled??!1)||this.disabled}updated(){(0,f.reflectHostState)(this,{"data-disabled":this.isDisabled?"":null})}render(){let t=this.root;if(!t)return a.nothing;let i=this.isDisabled;return a.html`
       <button
         part="trigger"
         type="button"
+        aria-label=${this.ariaLabel??a.nothing}
         aria-haspopup="menu"
         aria-expanded=${t.open}
         aria-controls=${t.contentId}
         data-state=${t.open?"open":"closed"}
         data-direction=${t.direction}
-        data-disabled=${i?"":s.nothing}
+        data-disabled=${i?"":a.nothing}
         ?disabled=${i}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
@@ -16,8 +17,8 @@
       >
         <slot></slot>
       </button>
-    `}};n.shadowRootOptions=a.delegatesFocusShadowRootOptions,n.styles=[a.resetNativeControl,s.css`
+    `}};n.shadowRootOptions=s.delegatesFocusShadowRootOptions,n.styles=[s.resetNativeControl,a.css`
       :host {
         display: inline-block;
       }
-    `,a.controlBoxOnHost],l([(0,v.property)({type:Boolean,reflect:!0})],n.prototype,"disabled",2),l([(0,v.property)({type:String,reflect:!0,attribute:"data-size"})],n.prototype,"size",2),n=l([(0,h.customElement)("skdx-speed-dial-trigger","speed-dial","trigger")],n);0&&(module.exports={SkdxSpeedDialTrigger});
+    `,s.controlBoxOnHost],d([(0,p.property)({type:Boolean,reflect:!0})],n.prototype,"disabled",2),d([(0,p.property)({type:String,reflect:!0,attribute:"data-size"})],n.prototype,"size",2),d([(0,p.property)({type:String,attribute:"aria-label"})],n.prototype,"ariaLabel",2),n=d([(0,c.customElement)("skdx-speed-dial-trigger","speed-dial","trigger")],n);0&&(module.exports={SkdxSpeedDialTrigger});

package/dist/speed-dial/SpeedDialTrigger.d.cts

@@ -22,6 +22,11 @@ export declare class SkdxSpeedDialTrigger extends LitElement {
      * @default undefined — the skin’s own default.
      */
     size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Accessible name for the trigger, forwarded to the shadow `<button>`.
+     * @default undefined
+     */
+    ariaLabel: string | null;
     private root;
     private readonly onRootUpdate;
     connectedCallback(): void;

package/dist/speed-dial/SpeedDialTrigger.d.ts

@@ -22,6 +22,11 @@ export declare class SkdxSpeedDialTrigger extends LitElement {
      * @default undefined — the skin’s own default.
      */
     size?: 'sm' | 'md' | 'lg' | (string & {}) | undefined;
+    /**
+     * Accessible name for the trigger, forwarded to the shadow `<button>`.
+     * @default undefined
+     */
+    ariaLabel: string | null;
     private root;
     private readonly onRootUpdate;
     connectedCallback(): void;

package/dist/speed-dial/SpeedDialTrigger.js

@@ -1,13 +1,14 @@
-var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var n=(s,i,t,o)=>{for(var r=o>1?void 0:o?u(i,t):i,a=s.length-1,d;a>=0;a--)(d=s[a])&&(r=(o?d(i,t,r):d(r))||r);return o&&r&&c(i,t,r),r};import{css as v,html as f,LitElement as m,nothing as p}from"lit";import{property as h}from"lit/decorators.js";import{customElement as b,whenUpgraded as y}from"../internal/define.js";import{reflectHostState as w}from"../internal/part.js";import{controlBoxOnHost as E,delegatesFocusShadowRootOptions as g,resetNativeControl as D}from"../internal/styles.js";import{SPEED_DIAL_FAMILY as l}from"./family.js";var R={up:["ArrowUp","ArrowDown"],down:["ArrowUp","ArrowDown"],left:["ArrowLeft","ArrowRight"],right:["ArrowLeft","ArrowRight"]},e=class extends m{constructor(){super(...arguments);this.disabled=!1;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>this.root?.setOpen(!this.root.open,"pointer");this.handleKeyDown=t=>{this.root&&R[this.root.direction].includes(t.key)&&(t.preventDefault(),this.root.setOpen(!0,"keyboard"))};this.handlePointerEnter=t=>{!this.root?.openOnHover||t.pointerType==="touch"||this.root.hoverOpen()};this.handlePointerLeave=t=>{!this.root?.openOnHover||t.pointerType==="touch"||this.root.scheduleHoverClose()}}connectedCallback(){super.connectedCallback(),this.root=l.root(this),this.root?.addEventListener(l.event,this.onRootUpdate),this.root&&y(this.root,()=>{this.root&&!this.id&&(this.id=this.root.triggerId)})}disconnectedCallback(){this.root?.removeEventListener(l.event,this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){let t=this.shadowRoot?.querySelector("button");this.root&&t&&(this.root.triggerEl=t)}get isDisabled(){return(this.root?.disabled??!1)||this.disabled}updated(){w(this,{"data-disabled":this.isDisabled?"":null})}render(){let t=this.root;if(!t)return p;let o=this.isDisabled;return f`
+var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var n=(a,i,t,o)=>{for(var r=o>1?void 0:o?u(i,t):i,s=a.length-1,d;s>=0;s--)(d=a[s])&&(r=(o?d(i,t,r):d(r))||r);return o&&r&&c(i,t,r),r};import{css as v,html as b,LitElement as f,nothing as l}from"lit";import{property as p}from"lit/decorators.js";import{customElement as m,whenUpgraded as y}from"../internal/define.js";import{reflectHostState as w}from"../internal/part.js";import{controlBoxOnHost as E,delegatesFocusShadowRootOptions as g,resetNativeControl as L}from"../internal/styles.js";import{SPEED_DIAL_FAMILY as h}from"./family.js";var R={up:["ArrowUp","ArrowDown"],down:["ArrowUp","ArrowDown"],left:["ArrowLeft","ArrowRight"],right:["ArrowLeft","ArrowRight"]},e=class extends f{constructor(){super(...arguments);this.disabled=!1;this.ariaLabel=null;this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.handleClick=()=>this.root?.setOpen(!this.root.open,"pointer");this.handleKeyDown=t=>{this.root&&R[this.root.direction].includes(t.key)&&(t.preventDefault(),this.root.setOpen(!0,"keyboard"))};this.handlePointerEnter=t=>{!this.root?.openOnHover||t.pointerType==="touch"||this.root.hoverOpen()};this.handlePointerLeave=t=>{!this.root?.openOnHover||t.pointerType==="touch"||this.root.scheduleHoverClose()}}connectedCallback(){super.connectedCallback(),this.root=h.root(this),this.root?.addEventListener(h.event,this.onRootUpdate),this.root&&y(this.root,()=>{this.root&&!this.id&&(this.id=this.root.triggerId)})}disconnectedCallback(){this.root?.removeEventListener(h.event,this.onRootUpdate),super.disconnectedCallback()}firstUpdated(){let t=this.shadowRoot?.querySelector("button");this.root&&t&&(this.root.triggerEl=t)}get isDisabled(){return(this.root?.disabled??!1)||this.disabled}updated(){w(this,{"data-disabled":this.isDisabled?"":null})}render(){let t=this.root;if(!t)return l;let o=this.isDisabled;return b`
       <button
         part="trigger"
         type="button"
+        aria-label=${this.ariaLabel??l}
         aria-haspopup="menu"
         aria-expanded=${t.open}
         aria-controls=${t.contentId}
         data-state=${t.open?"open":"closed"}
         data-direction=${t.direction}
-        data-disabled=${o?"":p}
+        data-disabled=${o?"":l}
         ?disabled=${o}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
@@ -16,8 +17,8 @@ var c=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var n=(s,i,t,o
       >
         <slot></slot>
       </button>
-    `}};e.shadowRootOptions=g,e.styles=[D,v`
+    `}};e.shadowRootOptions=g,e.styles=[L,v`
       :host {
         display: inline-block;
       }
-    `,E],n([h({type:Boolean,reflect:!0})],e.prototype,"disabled",2),n([h({type:String,reflect:!0,attribute:"data-size"})],e.prototype,"size",2),e=n([b("skdx-speed-dial-trigger","speed-dial","trigger")],e);export{e as SkdxSpeedDialTrigger};
+    `,E],n([p({type:Boolean,reflect:!0})],e.prototype,"disabled",2),n([p({type:String,reflect:!0,attribute:"data-size"})],e.prototype,"size",2),n([p({type:String,attribute:"aria-label"})],e.prototype,"ariaLabel",2),e=n([m("skdx-speed-dial-trigger","speed-dial","trigger")],e);export{e as SkdxSpeedDialTrigger};

package/dist/stack/Stack.cjs

@@ -0,0 +1 @@
+"use strict";var d=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var x=(s,e)=>{for(var a in e)d(s,a,{get:e[a],enumerable:!0})},i=(s,e,a,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!r.call(s,t)&&t!==a&&d(s,t,{get:()=>e[t],enumerable:!(l=o(e,t))||l.enumerable});return s};var k=s=>i(d({},"__esModule",{value:!0}),s);var f={};x(f,{SkdxStack:()=>c});module.exports=k(f);var n=require("../box/Box.cjs"),c=class extends n.SkdxBox{constructor(){super(),this.display="flex"}};customElements.get("skdx-stack")===void 0&&customElements.define("skdx-stack",c);0&&(module.exports={SkdxStack});

package/dist/stack/Stack.d.cts

@@ -0,0 +1,12 @@
+import { SkdxBox } from '../box/Box.cjs';
+/**
+ * Stack alias of <skdx-box>: the same component with `display='flex'` as defaults. Every attribute, property, event and slot of `<skdx-box>` applies; reach for `<skdx-box>` itself for full control.
+ */
+export declare class SkdxStack extends SkdxBox {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-stack': SkdxStack;
+    }
+}

package/dist/stack/Stack.d.ts

@@ -0,0 +1,12 @@
+import { SkdxBox } from '../box/Box.js';
+/**
+ * Stack alias of <skdx-box>: the same component with `display='flex'` as defaults. Every attribute, property, event and slot of `<skdx-box>` applies; reach for `<skdx-box>` itself for full control.
+ */
+export declare class SkdxStack extends SkdxBox {
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-stack': SkdxStack;
+    }
+}

package/dist/stack/Stack.js

@@ -0,0 +1 @@
+import{SkdxBox as s}from"../box/Box.js";var e=class extends s{constructor(){super(),this.display="flex"}};customElements.get("skdx-stack")===void 0&&customElements.define("skdx-stack",e);export{e as SkdxStack};

package/dist/stack/index.cjs

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

package/dist/stack/index.d.cts

@@ -0,0 +1 @@
+export { SkdxStack } from './Stack.cjs';

package/dist/stack/index.d.ts

@@ -0,0 +1 @@
+export { SkdxStack } from './Stack.js';

package/dist/stack/index.js

@@ -0,0 +1 @@
+import{SkdxStack as r}from"./Stack.js";export{r as SkdxStack};

package/dist/table/Table.cjs

@@ -1,7 +1,7 @@
-"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
+"use strict";var m=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var L=(s,a)=>{for(var t in a)m(s,t,{get:a[t],enumerable:!0})},x=(s,a,t,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let e of I(a))!B.call(s,e)&&e!==t&&m(s,e,{get:()=>a[e],enumerable:!(n=_(a,e))||n.enumerable});return s};var z=s=>x(m({},"__esModule",{value:!0}),s),r=(s,a,t,n)=>{for(var e=n>1?void 0:n?_(a,t):a,l=s.length-1,d;l>=0;l--)(d=s[l])&&(e=(n?d(a,t,e):d(e))||e);return n&&e&&m(a,t,e),e};var $={};L($,{SkdxTable:()=>i,defaultGetSortLabel:()=>M});module.exports=z($);var h=require("lit"),o=require("lit/decorators.js"),y=require("lit/directives/if-defined.js"),v=require("../internal/authored.cjs"),R=require("../internal/define.cjs"),f=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 F=["sort","filter","multiSort","selected","selectionMode","expandedRowIds","columnWidths"],D=["columns","sortable","selectable","expandable","resizable","filterable","caption"],N=["data","columns","renderCell","renderExpanded","rowId","getRowLabel","empty","selectable","expandable","sort","filter"];function w(s,a){return a.some(t=>s.has(t))}function S(s){return s==null?new Set:s instanceof Set?s:new Set(Array.isArray(s)?s:[String(s)])}function O(s,a,t){let n=s.find(l=>l.columnKey===a),e="asc";return n!==void 0&&(e=n.direction==="asc"?"desc":null),t?e===null?s.filter(l=>l.columnKey!==a):n===void 0?[...s,{columnKey:a,direction:e}]:s.map(l=>l.columnKey===a?{columnKey:a,direction:e}:l):e===null?[]:[{columnKey:a,direction:e}]}function M(s,a){return a===null?`${s} not sorted`:`${s} sorted ${a==="asc"?"ascending":"descending"}`}var i=class extends h.LitElement{constructor(){super(...arguments);this.defaultSort=[];this.multiSort=!1;this.defaultFilter={};this.selectionMode="none";this.getSortLabel=M;this.defaultExpandedRowIds=[];this.defaultColumnWidths={};this.sortable=!1;this.selectable=!1;this.expandable=!1;this.resizable=!1;this.filterable=!1;this.stickyHeader=!1;this.tableId=(0,A.nextId)("skdx-table");this._uncontrolledSort=[];this._uncontrolledSelected=new Set;this._uncontrolledExpandedRowIds=new Set;this._uncontrolledColumnWidths={};this._uncontrolledFilter={};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=S(this.defaultSelected),this._uncontrolledExpandedRowIds=S(this.defaultExpandedRowIds),this._uncontrolledColumnWidths={...this.defaultColumnWidths},this._uncontrolledFilter={...this.defaultFilter},this._initialized=!0),queueMicrotask(this._fillAnatomy)}get sortList(){return this.sort!==void 0?this.sort:this._uncontrolledSort}get filterMap(){return this.filter!==void 0?this.filter:this._uncontrolledFilter}setColumnFilter(t,n){let e=this.filterMap;if((e[t]??"")===n)return;let l={...e};n===""?delete l[t]:l[t]=n,this.filter===void 0&&(this._uncontrolledFilter=l),(0,c.emit)(this,"filter-change",l),this._broadcast(),(0,u.renderTableRows)(this)}get currentSelected(){return this.selected!==void 0?S(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 l=e.find(d=>d.columnKey===t)?.direction??null;(0,C.announce)(this.getSortLabel(n,l)),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,l=this._anchorRowId;if(n&&this.selectionMode==="multiple"&&l!==null&&l!==t){let p=this.orderedRowIds(),g=p.indexOf(l),b=p.indexOf(t);if(g!==-1&&b!==-1){let W=p.slice(Math.min(g,b),Math.max(g,b)+1);this._commitSelected(new Set([...e,...W]));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),(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(l=>n.has(l))){e=new Set(n);for(let l of t)e.delete(l)}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 l={...e,[t]:n};this.columnWidths===void 0&&(this._uncontrolledColumnWidths=l),(0,c.emit)(this,"column-widths-change",l),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,F)&&this._broadcast(),w(t,D)?this._rebuildAnatomy():this._fillAnatomy(),w(t,N)&&(0,u.renderTableRows)(this),(0,f.threadAppearance)(this,{size:this.size},[...(0,f.derivedParts)(this,"skdx-table-row-select-checkbox"),...(0,f.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,S.ifDefined)(this.rowCount)}
-      aria-colcount=${(0,S.ifDefined)(this.columnCount)}
+      aria-rowcount=${(0,y.ifDefined)(this.rowCount)}
+      aria-colcount=${(0,y.ifDefined)(this.columnCount)}
     >
       <slot @slotchange=${this._fillAnatomy}></slot>
     </table>`}};i.styles=h.css`
@@ -13,4 +13,4 @@
     :host > table {
       display: contents;
     }
-  `,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});
+  `,r([(0,o.property)({attribute:!1})],i.prototype,"sort",2),r([(0,o.property)({type:Array,attribute:"default-sort"})],i.prototype,"defaultSort",2),r([(0,o.property)({type:Number,attribute:"row-count"})],i.prototype,"rowCount",2),r([(0,o.property)({type:Number,attribute:"column-count"})],i.prototype,"columnCount",2),r([(0,o.property)({type:Boolean,attribute:"multi-sort"})],i.prototype,"multiSort",2),r([(0,o.property)({attribute:!1})],i.prototype,"filter",2),r([(0,o.property)({type:Object,attribute:"default-filter"})],i.prototype,"defaultFilter",2),r([(0,o.property)({attribute:!1})],i.prototype,"selected",2),r([(0,o.property)({type:Array,attribute:"default-selected"})],i.prototype,"defaultSelected",2),r([(0,o.property)({type:String,attribute:"selection-mode"})],i.prototype,"selectionMode",2),r([(0,o.property)({attribute:!1})],i.prototype,"getSortLabel",2),r([(0,o.property)({attribute:!1})],i.prototype,"expandedRowIds",2),r([(0,o.property)({type:Array,attribute:"default-expanded-row-ids"})],i.prototype,"defaultExpandedRowIds",2),r([(0,o.property)({attribute:!1})],i.prototype,"columnWidths",2),r([(0,o.property)({type:Object,attribute:"default-column-widths"})],i.prototype,"defaultColumnWidths",2),r([(0,o.property)({attribute:!1})],i.prototype,"columns",2),r([(0,o.property)({attribute:!1})],i.prototype,"data",2),r([(0,o.property)({type:Boolean})],i.prototype,"sortable",2),r([(0,o.property)({type:Boolean})],i.prototype,"selectable",2),r([(0,o.property)({type:Boolean})],i.prototype,"expandable",2),r([(0,o.property)({type:Boolean})],i.prototype,"resizable",2),r([(0,o.property)({type:Boolean})],i.prototype,"filterable",2),r([(0,o.property)()],i.prototype,"empty",2),r([(0,o.property)()],i.prototype,"caption",2),r([(0,o.property)({attribute:!1})],i.prototype,"renderCell",2),r([(0,o.property)({attribute:!1})],i.prototype,"renderExpanded",2),r([(0,o.property)({attribute:!1})],i.prototype,"rowId",2),r([(0,o.property)({attribute:!1})],i.prototype,"getRowLabel",2),r([(0,o.property)({type:String,reflect:!0,attribute:"data-density"})],i.prototype,"density",2),r([(0,o.property)({type:Boolean,reflect:!0,attribute:"data-sticky-header"})],i.prototype,"stickyHeader",2),r([(0,o.property)({type:String,attribute:"data-size"})],i.prototype,"size",2),r([(0,o.state)()],i.prototype,"_uncontrolledSort",2),r([(0,o.state)()],i.prototype,"_uncontrolledSelected",2),r([(0,o.state)()],i.prototype,"_uncontrolledExpandedRowIds",2),r([(0,o.state)()],i.prototype,"_uncontrolledColumnWidths",2),r([(0,o.state)()],i.prototype,"_uncontrolledFilter",2),i=r([(0,R.customElement)("skdx-table","table","root")],i);0&&(module.exports={SkdxTable,defaultGetSortLabel});

package/dist/table/Table.d.cts

@@ -1,12 +1,13 @@
 import { LitElement, type TemplateResult } from 'lit';
 import { type SkdxTableColumn } from './TableAnatomy.cjs';
-import type { SortDirection, TableColumnWidths, TableSelectionMode, TableSort, TableSortState } from './types.cjs';
+import type { SortDirection, TableColumnWidths, TableFilterState, TableSelectionMode, TableSort, TableSortState } from './types.cjs';
 /** Default `getSortLabel`: `"Amount sorted ascending"` / `"Amount not sorted"`. */
 export declare function defaultGetSortLabel(column: string, direction: SortDirection | null): string;
 /**
  * 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 filter-change - Fired with the new `TableFilterState` whenever a column's filter text changes; a cleared column leaves the map.
  * @fires selected-change - Fired with the selected row ids whenever a row or select-all checkbox is toggled.
  * @fires expanded-row-ids-change - Fired with the expanded row ids whenever a detail row is opened or closed.
  * @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.
@@ -64,6 +65,10 @@ export declare class SkdxTable extends LitElement {
      * @default false
      */
     multiSort: boolean;
+    /** Active column filters keyed by column, for controlled usage; pair with `filter-change`. */
+    filter?: TableFilterState;
+    /** Initial column filters for uncontrolled usage, keyed by column. */
+    defaultFilter: TableFilterState;
     /**
      * Selected row ids for controlled usage.
      * @default undefined
@@ -134,6 +139,11 @@ export declare class SkdxTable extends LitElement {
      * @default false
      */
     resizable: boolean;
+    /**
+     * Makes derived columns filterable unless a column opts out; the derived rows are then the ones matching every active filter.
+     * @default false
+     */
+    filterable: boolean;
     /**
      * Content for the derived empty state, shown when `data` is empty.
      * @default undefined
@@ -185,6 +195,7 @@ export declare class SkdxTable extends LitElement {
     private _uncontrolledSelected;
     private _uncontrolledExpandedRowIds;
     private _uncontrolledColumnWidths;
+    private _uncontrolledFilter;
     private _initialized;
     connectedCallback(): void;
     private _anatomyBuilt;
@@ -193,6 +204,11 @@ export declare class SkdxTable extends LitElement {
     /** @internal Every sorted column, most significant first, controlled or uncontrolled. */
     get sortList(): TableSortState[];
     /** @internal Resolved selected row ids, controlled or uncontrolled. */
+    /** Active column filters keyed by column; a column with no entry is unfiltered. */
+    get filterMap(): TableFilterState;
+    /** @internal Sets one column's filter text and emits `filter-change`; the filter input calls it. */
+    setColumnFilter(columnKey: string, value: string): void;
+    /** @internal */
     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;

package/dist/table/Table.d.ts

@@ -1,12 +1,13 @@
 import { LitElement, type TemplateResult } from 'lit';
 import { type SkdxTableColumn } from './TableAnatomy.js';
-import type { SortDirection, TableColumnWidths, TableSelectionMode, TableSort, TableSortState } from './types.js';
+import type { SortDirection, TableColumnWidths, TableFilterState, TableSelectionMode, TableSort, TableSortState } from './types.js';
 /** Default `getSortLabel`: `"Amount sorted ascending"` / `"Amount not sorted"`. */
 export declare function defaultGetSortLabel(column: string, direction: SortDirection | null): string;
 /**
  * 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 filter-change - Fired with the new `TableFilterState` whenever a column's filter text changes; a cleared column leaves the map.
  * @fires selected-change - Fired with the selected row ids whenever a row or select-all checkbox is toggled.
  * @fires expanded-row-ids-change - Fired with the expanded row ids whenever a detail row is opened or closed.
  * @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.
@@ -64,6 +65,10 @@ export declare class SkdxTable extends LitElement {
      * @default false
      */
     multiSort: boolean;
+    /** Active column filters keyed by column, for controlled usage; pair with `filter-change`. */
+    filter?: TableFilterState;
+    /** Initial column filters for uncontrolled usage, keyed by column. */
+    defaultFilter: TableFilterState;
     /**
      * Selected row ids for controlled usage.
      * @default undefined
@@ -134,6 +139,11 @@ export declare class SkdxTable extends LitElement {
      * @default false
      */
     resizable: boolean;
+    /**
+     * Makes derived columns filterable unless a column opts out; the derived rows are then the ones matching every active filter.
+     * @default false
+     */
+    filterable: boolean;
     /**
      * Content for the derived empty state, shown when `data` is empty.
      * @default undefined
@@ -185,6 +195,7 @@ export declare class SkdxTable extends LitElement {
     private _uncontrolledSelected;
     private _uncontrolledExpandedRowIds;
     private _uncontrolledColumnWidths;
+    private _uncontrolledFilter;
     private _initialized;
     connectedCallback(): void;
     private _anatomyBuilt;
@@ -193,6 +204,11 @@ export declare class SkdxTable extends LitElement {
     /** @internal Every sorted column, most significant first, controlled or uncontrolled. */
     get sortList(): TableSortState[];
     /** @internal Resolved selected row ids, controlled or uncontrolled. */
+    /** Active column filters keyed by column; a column with no entry is unfiltered. */
+    get filterMap(): TableFilterState;
+    /** @internal Sets one column's filter text and emits `filter-change`; the filter input calls it. */
+    setColumnFilter(columnKey: string, value: string): void;
+    /** @internal */
     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;

package/dist/table/Table.js

@@ -1,10 +1,10 @@
-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
+var _=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var r=(l,a,t,n)=>{for(var i=n>1?void 0:n?v(a,t):a,s=l.length-1,d;s>=0;s--)(d=l[s])&&(i=(n?d(a,t,i):d(i))||i);return n&&i&&_(a,t,i),i};import{css as R,html as A,LitElement as C}from"lit";import{property as o,state as c}from"lit/decorators.js";import{ifDefined as w}from"lit/directives/if-defined.js";import{hasAuthoredParts as E}from"../internal/authored.js";import{customElement as M}from"../internal/define.js";import{derivedParts as S,threadAppearance as W}from"../internal/derive.js";import{emit as u}from"../internal/events.js";import{nextId as I}from"../internal/ids.js";import{announce as B}from"../utils/live-announcer.js";import{TABLE_INTERNAL_UPDATE as L}from"./column-context.js";import{fillTableAnatomy as x,renderTableRows as p,TABLE_ANATOMY_GENERATED as z}from"./TableAnatomy.js";var F=["sort","filter","multiSort","selected","selectionMode","expandedRowIds","columnWidths"],D=["columns","sortable","selectable","expandable","resizable","filterable","caption"],N=["data","columns","renderCell","renderExpanded","rowId","getRowLabel","empty","selectable","expandable","sort","filter"];function g(l,a){return a.some(t=>l.has(t))}function b(l){return l==null?new Set:l instanceof Set?l:new Set(Array.isArray(l)?l:[String(l)])}function O(l,a,t){let n=l.find(s=>s.columnKey===a),i="asc";return n!==void 0&&(i=n.direction==="asc"?"desc":null),t?i===null?l.filter(s=>s.columnKey!==a):n===void 0?[...l,{columnKey:a,direction:i}]:l.map(s=>s.columnKey===a?{columnKey:a,direction:i}:s):i===null?[]:[{columnKey:a,direction:i}]}function $(l,a){return a===null?`${l} not sorted`:`${l} sorted ${a==="asc"?"ascending":"descending"}`}var e=class extends C{constructor(){super(...arguments);this.defaultSort=[];this.multiSort=!1;this.defaultFilter={};this.selectionMode="none";this.getSortLabel=$;this.defaultExpandedRowIds=[];this.defaultColumnWidths={};this.sortable=!1;this.selectable=!1;this.expandable=!1;this.resizable=!1;this.filterable=!1;this.stickyHeader=!1;this.tableId=I("skdx-table");this._uncontrolledSort=[];this._uncontrolledSelected=new Set;this._uncontrolledExpandedRowIds=new Set;this._uncontrolledColumnWidths={};this._uncontrolledFilter={};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"),x(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=b(this.defaultExpandedRowIds),this._uncontrolledColumnWidths={...this.defaultColumnWidths},this._uncontrolledFilter={...this.defaultFilter},this._initialized=!0),queueMicrotask(this._fillAnatomy)}get sortList(){return this.sort!==void 0?this.sort:this._uncontrolledSort}get filterMap(){return this.filter!==void 0?this.filter:this._uncontrolledFilter}setColumnFilter(t,n){let i=this.filterMap;if((i[t]??"")===n)return;let s={...i};n===""?delete s[t]:s[t]=n,this.filter===void 0&&(this._uncontrolledFilter=s),u(this,"filter-change",s),this._broadcast(),p(this)}get currentSelected(){return this.selected!==void 0?b(this.selected):this._uncontrolledSelected}toggleSort(t,n=t){let i=O(this.sortList,t,this.multiSort);this.sort===void 0&&(this._uncontrolledSort=i),u(this,"sort-change",i);let s=i.find(d=>d.columnKey===t)?.direction??null;B(this.getSortLabel(n,s)),this._broadcast(),p(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 i=this.currentSelected,s=this._anchorRowId;if(n&&this.selectionMode==="multiple"&&s!==null&&s!==t){let h=this.orderedRowIds(),f=h.indexOf(s),m=h.indexOf(t);if(f!==-1&&m!==-1){let y=h.slice(Math.min(f,m),Math.max(f,m)+1);this._commitSelected(new Set([...i,...y]));return}}this._anchorRowId=t;let d;this.selectionMode==="single"?d=i.has(t)&&i.size===1?new Set:new Set([t]):(d=new Set(i),d.has(t)?d.delete(t):d.add(t)),this._commitSelected(d)}_commitSelected(t){let n=this.currentSelected;n.size===t.size&&[...t].every(i=>n.has(i))||(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 n=this.currentSelected,i;if(t.length>0&&t.every(s=>n.has(s))){i=new Set(n);for(let s of t)i.delete(s)}else i=new Set([...n,...t]);this._commitSelected(i)}isAllSelected(t){let n=this.currentSelected;return t.length>0&&t.every(i=>n.has(i))}isSomeSelected(t){let n=this.currentSelected;return t.some(i=>n.has(i))&&!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),u(this,"expanded-row-ids-change",[...n]),this._broadcast()}setColumnWidth(t,n){let i=this.resolvedColumnWidths;if(i[t]===n)return;let s={...i,[t]:n};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(L))}updated(t){g(t,F)&&this._broadcast(),g(t,D)?this._rebuildAnatomy():this._fillAnatomy(),g(t,N)&&p(this),W(this,{size:this.size},[...S(this,"skdx-table-row-select-checkbox"),...S(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=${b(this.rowCount)}
-      aria-colcount=${b(this.columnCount)}
+      aria-rowcount=${w(this.rowCount)}
+      aria-colcount=${w(this.columnCount)}
     >
       <slot @slotchange=${this._fillAnatomy}></slot>
-    </table>`}};n.styles=R`
+    </table>`}};e.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;
@@ -13,4 +13,4 @@ var _=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var o=(l,d,t,i
     :host > table {
       display: contents;
     }
-  `,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};
+  `,r([o({attribute:!1})],e.prototype,"sort",2),r([o({type:Array,attribute:"default-sort"})],e.prototype,"defaultSort",2),r([o({type:Number,attribute:"row-count"})],e.prototype,"rowCount",2),r([o({type:Number,attribute:"column-count"})],e.prototype,"columnCount",2),r([o({type:Boolean,attribute:"multi-sort"})],e.prototype,"multiSort",2),r([o({attribute:!1})],e.prototype,"filter",2),r([o({type:Object,attribute:"default-filter"})],e.prototype,"defaultFilter",2),r([o({attribute:!1})],e.prototype,"selected",2),r([o({type:Array,attribute:"default-selected"})],e.prototype,"defaultSelected",2),r([o({type:String,attribute:"selection-mode"})],e.prototype,"selectionMode",2),r([o({attribute:!1})],e.prototype,"getSortLabel",2),r([o({attribute:!1})],e.prototype,"expandedRowIds",2),r([o({type:Array,attribute:"default-expanded-row-ids"})],e.prototype,"defaultExpandedRowIds",2),r([o({attribute:!1})],e.prototype,"columnWidths",2),r([o({type:Object,attribute:"default-column-widths"})],e.prototype,"defaultColumnWidths",2),r([o({attribute:!1})],e.prototype,"columns",2),r([o({attribute:!1})],e.prototype,"data",2),r([o({type:Boolean})],e.prototype,"sortable",2),r([o({type:Boolean})],e.prototype,"selectable",2),r([o({type:Boolean})],e.prototype,"expandable",2),r([o({type:Boolean})],e.prototype,"resizable",2),r([o({type:Boolean})],e.prototype,"filterable",2),r([o()],e.prototype,"empty",2),r([o()],e.prototype,"caption",2),r([o({attribute:!1})],e.prototype,"renderCell",2),r([o({attribute:!1})],e.prototype,"renderExpanded",2),r([o({attribute:!1})],e.prototype,"rowId",2),r([o({attribute:!1})],e.prototype,"getRowLabel",2),r([o({type:String,reflect:!0,attribute:"data-density"})],e.prototype,"density",2),r([o({type:Boolean,reflect:!0,attribute:"data-sticky-header"})],e.prototype,"stickyHeader",2),r([o({type:String,attribute:"data-size"})],e.prototype,"size",2),r([c()],e.prototype,"_uncontrolledSort",2),r([c()],e.prototype,"_uncontrolledSelected",2),r([c()],e.prototype,"_uncontrolledExpandedRowIds",2),r([c()],e.prototype,"_uncontrolledColumnWidths",2),r([c()],e.prototype,"_uncontrolledFilter",2),e=r([M("skdx-table","table","root")],e);export{e as SkdxTable,$ as defaultGetSortLabel};

package/dist/table/TableAnatomy.cjs

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

package/dist/table/TableAnatomy.d.cts

@@ -1,6 +1,6 @@
 import { type TemplateResult } from 'lit';
 import type { SkdxTable } from './Table.cjs';
-import type { TableSortState } from './types.cjs';
+import type { TableFilterState, TableSortState } from './types.cjs';
 import './TableCaption.cjs';
 import './TableHeader.cjs';
 import './TableBody.cjs';
@@ -22,6 +22,8 @@ export interface SkdxTableColumn {
     sortable?: boolean;
     /** Column resize toggle; root's `resizable` gates activation. @default false */
     resizable?: boolean;
+    /** Column filter toggle, overriding the root's `filterable`. @default the root's `filterable` */
+    filterable?: boolean;
 }
 /** @internal Marks generated direct children of `<skdx-table>`. */
 export declare const TABLE_ANATOMY_GENERATED = "data-skdx-table-generated";
@@ -33,6 +35,7 @@ export declare function defaultRowId(row: Record<string, unknown>, index: number
  */
 export declare function sortRows(data: readonly Record<string, unknown>[], sortList: readonly TableSortState[]): Record<string, unknown>[];
 /** @internal Builds the optional caption, header row, and empty body; body rows render separately on `data` change. */
+export declare function filterRows(data: readonly Record<string, unknown>[], filterMap: TableFilterState): Record<string, unknown>[];
 export declare function fillTableAnatomy(root: SkdxTable): void;
 /** @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

@@ -1,6 +1,6 @@
 import { type TemplateResult } from 'lit';
 import type { SkdxTable } from './Table.js';
-import type { TableSortState } from './types.js';
+import type { TableFilterState, TableSortState } from './types.js';
 import './TableCaption.js';
 import './TableHeader.js';
 import './TableBody.js';
@@ -22,6 +22,8 @@ export interface SkdxTableColumn {
     sortable?: boolean;
     /** Column resize toggle; root's `resizable` gates activation. @default false */
     resizable?: boolean;
+    /** Column filter toggle, overriding the root's `filterable`. @default the root's `filterable` */
+    filterable?: boolean;
 }
 /** @internal Marks generated direct children of `<skdx-table>`. */
 export declare const TABLE_ANATOMY_GENERATED = "data-skdx-table-generated";
@@ -33,6 +35,7 @@ export declare function defaultRowId(row: Record<string, unknown>, index: number
  */
 export declare function sortRows(data: readonly Record<string, unknown>[], sortList: readonly TableSortState[]): Record<string, unknown>[];
 /** @internal Builds the optional caption, header row, and empty body; body rows render separately on `data` change. */
+export declare function filterRows(data: readonly Record<string, unknown>[], filterMap: TableFilterState): Record<string, unknown>[];
 export declare function fillTableAnatomy(root: SkdxTable): void;
 /** @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.js

@@ -1,22 +1,22 @@
-import{html as b,render as m}from"lit";import{repeat as h}from"lit/directives/repeat.js";import"./TableCaption.js";import"./TableHeader.js";import"./TableBody.js";import"./TableRow.js";import"./TableCell.js";import"./TableHeaderCell.js";import"./TableRowSelectCheckbox.js";import"./TableSelectAllCheckbox.js";import"./TableExpandTrigger.js";import"./TableExpandedRow.js";import"./TableEmpty.js";var p="data-skdx-table-generated";function g(e,l){let r=e[l.key]??"";return String(r)}function y(e,l){return typeof e.id=="string"?e.id:String(l)}function w(e,l){if(typeof e=="number"&&typeof l=="number")return e-l;let r=e??"",a=l??"";return String(r).localeCompare(String(a))}function S(e,l){return l.length===0?[...e]:[...e].sort((r,a)=>{for(let{columnKey:s,direction:c}of l){let t=w(r[s],a[s]);if(t!==0)return c==="asc"?t:-t}return 0})}function O(e){let l=[];if(e.caption){let t=document.createElement("skdx-table-caption");t.setAttribute(p,""),t.textContent=e.caption,l.push(t)}let r=e.columns??[],a=document.createElement("skdx-table-header");a.setAttribute(p,"");let s=document.createElement("skdx-table-row");if(e.selectable){let t=document.createElement("skdx-table-header-cell"),n=document.createElement("skdx-table-select-all-checkbox");n.setAttribute("scope","page"),t.append(n),s.append(t)}if(e.expandable){let t=document.createElement("skdx-table-header-cell");t.setAttribute("aria-hidden","true"),s.append(t)}for(let t of r){let n=document.createElement("skdx-table-header-cell");n.setAttribute("column-key",t.key),e.sortable&&t.sortable&&n.setAttribute("sortable",""),e.resizable&&t.resizable&&n.setAttribute("resizable",""),m(t.header??t.key,n,{host:e}),s.append(n)}a.append(s),l.push(a);let c=document.createElement("skdx-table-body");c.setAttribute(p,""),l.push(c),e.replaceChildren(...l),T(e)}function T(e){let l=e.querySelector(`:scope > skdx-table-body[${p}]`);if(!l)return;let r=e.columns??[],a=S(e.data??[],e.sortList),s=r.length+(e.selectable?1:0)+(e.expandable?1:0),c=e.renderCell??g,t=e.renderExpanded,n=e.rowId??y,u=e.getRowLabel,x=e.querySelector(`:scope > skdx-table-header[${p}] skdx-table-select-all-checkbox`);if(x&&(x.rowIds=a.map((o,d)=>n(o,d))),a.length===0){m(e.empty?b`<skdx-table-empty col-span=${s}>${e.empty}</skdx-table-empty>`:"",l,{host:e});return}m(h(a,(o,d)=>n(o,d),(o,d)=>{let i=n(o,d),k=u?u(o,d):`row ${i}`;return b`
-          <skdx-table-row row-id=${i}>
-            ${e.selectable?b`<skdx-table-cell
+import{html as i,render as u}from"lit";import{repeat as h}from"lit/directives/repeat.js";import"./TableCaption.js";import"./TableHeader.js";import"./TableBody.js";import"./TableRow.js";import"./TableCell.js";import"./TableHeaderCell.js";import"./TableRowSelectCheckbox.js";import"./TableSelectAllCheckbox.js";import"./TableExpandTrigger.js";import"./TableExpandedRow.js";import"./TableEmpty.js";var p="data-skdx-table-generated";function g(e,l){let a=e[l.key]??"";return String(a)}function y(e,l){return typeof e.id=="string"?e.id:String(l)}function w(e,l){if(typeof e=="number"&&typeof l=="number")return e-l;let a=e??"",n=l??"";return String(a).localeCompare(String(n))}function S(e,l){return l.length===0?[...e]:[...e].sort((a,n)=>{for(let{columnKey:s,direction:o}of l){let t=w(a[s],n[s]);if(t!==0)return o==="asc"?t:-t}return 0})}function T(e,l){let a=Object.entries(l).filter(([,n])=>n!=="");return a.length===0?[...e]:e.filter(n=>a.every(([s,o])=>String(n[s]??"").toLowerCase().includes(o.toLowerCase())))}function N(e){let l=[];if(e.caption){let t=document.createElement("skdx-table-caption");t.setAttribute(p,""),t.textContent=e.caption,l.push(t)}let a=e.columns??[],n=document.createElement("skdx-table-header");n.setAttribute(p,"");let s=document.createElement("skdx-table-row");if(e.selectable){let t=document.createElement("skdx-table-header-cell"),r=document.createElement("skdx-table-select-all-checkbox");r.setAttribute("scope","page"),t.append(r),s.append(t)}if(e.expandable){let t=document.createElement("skdx-table-header-cell");t.setAttribute("aria-hidden","true"),s.append(t)}for(let t of a){let r=document.createElement("skdx-table-header-cell");r.setAttribute("column-key",t.key),e.sortable&&t.sortable&&r.setAttribute("sortable",""),e.resizable&&t.resizable&&r.setAttribute("resizable",""),(t.filterable??e.filterable)&&(r.setAttribute("filterable",""),r.setAttribute("filter-label",`Filter ${typeof t.header=="string"?t.header:t.key}`)),u(t.header??t.key,r,{host:e}),s.append(r)}n.append(s),l.push(n);let o=document.createElement("skdx-table-body");o.setAttribute(p,""),l.push(o),e.replaceChildren(...l),A(e)}function A(e){let l=e.querySelector(`:scope > skdx-table-body[${p}]`);if(!l)return;let a=e.columns??[],n=S(T(e.data??[],e.filterMap),e.sortList),s=a.length+(e.selectable?1:0)+(e.expandable?1:0),o=e.renderCell??g,t=e.renderExpanded,r=e.rowId??y,m=e.getRowLabel,x=e.querySelector(`:scope > skdx-table-header[${p}] skdx-table-select-all-checkbox`);if(x&&(x.rowIds=n.map((c,d)=>r(c,d))),n.length===0){u(e.empty?i`<skdx-table-empty col-span=${s}>${e.empty}</skdx-table-empty>`:"",l,{host:e});return}u(h(n,(c,d)=>r(c,d),(c,d)=>{let b=r(c,d),k=m?m(c,d):`row ${b}`;return i`
+          <skdx-table-row row-id=${b}>
+            ${e.selectable?i`<skdx-table-cell
                     ><skdx-table-row-select-checkbox
-                      row-id=${i}
+                      row-id=${b}
                       aria-label="Select ${k}"
                     ></skdx-table-row-select-checkbox
                   ></skdx-table-cell>`:""}
-            ${e.expandable?b`<skdx-table-cell
+            ${e.expandable?i`<skdx-table-cell
                     ><skdx-table-expand-trigger
-                      row-id=${i}
+                      row-id=${b}
                       label="Details for ${k}"
                     ></skdx-table-expand-trigger
                   ></skdx-table-cell>`:""}
-            ${r.map(f=>b`<skdx-table-cell>${c(o,f)}</skdx-table-cell>`)}
+            ${a.map(f=>i`<skdx-table-cell>${o(c,f)}</skdx-table-cell>`)}
           </skdx-table-row>
-          ${e.expandable?b`<skdx-table-expanded-row
-                  row-id=${i}
+          ${e.expandable?i`<skdx-table-expanded-row
+                  row-id=${b}
                   col-span=${s}
-                  >${t?t(o):""}</skdx-table-expanded-row
+                  >${t?t(c):""}</skdx-table-expanded-row
                 >`:""}
-        `}),l,{host:e})}export{p as TABLE_ANATOMY_GENERATED,y as defaultRowId,O as fillTableAnatomy,T as renderTableRows,S as sortRows};
+        `}),l,{host:e})}export{p as TABLE_ANATOMY_GENERATED,y as defaultRowId,N as fillTableAnatomy,T as filterRows,A as renderTableRows,S as sortRows};

package/dist/table/TableColumnHeaderFilterInput.cjs

@@ -0,0 +1,15 @@
+"use strict";var d=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var g=(r,t)=>{for(var e in t)d(r,e,{get:t[e],enumerable:!0})},E=(r,t,e,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of y(t))!b.call(r,o)&&o!==e&&d(r,o,{get:()=>t[o],enumerable:!(i=h(t,o))||i.enumerable});return r};var R=r=>E(d({},"__esModule",{value:!0}),r),c=(r,t,e,i)=>{for(var o=i>1?void 0:i?h(t,e):t,p=r.length-1,u;p>=0;p--)(u=r[p])&&(o=(i?u(t,e,o):u(o))||o);return i&&o&&d(t,e,o),o};var k={};g(k,{SkdxTableColumnHeaderFilterInput:()=>s});module.exports=R(k);var l=require("lit"),v=require("lit/decorators.js"),f=require("../internal/define.cjs"),m=require("../internal/part.cjs"),a=require("../internal/styles.cjs"),n=require("./column-context.cjs");var s=class extends l.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.onInput=e=>{let i=this.resolvedKey;i!==void 0&&this.root?.setColumnFilter(i,e.target.value)}}connectedCallback(){super.connectedCallback(),this.root=(0,n.findTableRoot)(this),this.root?.addEventListener(n.TABLE_INTERNAL_UPDATE,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(n.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}get resolvedKey(){if(this.columnKey!==void 0)return this.columnKey;let e=(0,n.findHeaderCell)(this);return e?.isFilterable?e.resizeColumnKey:void 0}get value(){let e=this.resolvedKey;return e===void 0?"":this.root?.filterMap[e]??""}updated(){(0,m.reflectHostState)(this,{"data-filtered":this.value===""?null:""})}render(){let e=this.resolvedKey;if(e===void 0)return l.nothing;let i=this.value,o=this.getAttribute("aria-label")??(0,n.findHeaderCell)(this)?.filterLabel??`Filter ${e}`;return l.html`
+      <input
+        type="search"
+        part="filter-input"
+        data-skdx-table-filter-input
+        aria-label=${o}
+        data-filtered=${i===""?l.nothing:""}
+        .value=${i}
+        @input=${this.onInput}
+      />
+    `}};s.shadowRootOptions=a.delegatesFocusShadowRootOptions,s.styles=[a.resetNativeControl,l.css`
+      :host {
+        display: contents;
+      }
+    `,a.controlBoxOnHost],c([(0,v.property)({type:String,attribute:"column-key",converter:n.optionalStringAttribute})],s.prototype,"columnKey",2),s=c([(0,f.customElement)("skdx-table-column-header-filter-input","table","column-header-filter-input")],s);0&&(module.exports={SkdxTableColumnHeaderFilterInput});