@skdx/web-components 0.26.0

package/dist/table/TableRow.d.ts

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

package/dist/table/TableRow.js

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

package/dist/table/TableRowSelectCheckbox.cjs

@@ -0,0 +1 @@
+"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var u=(o,e)=>{for(var r in e)l(o,r,{get:e[r],enumerable:!0})},x=(o,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of k(e))!h.call(o,t)&&t!==r&&l(o,t,{get:()=>e[t],enumerable:!(d=p(e,t))||d.enumerable});return o};var v=o=>x(l({},"__esModule",{value:!0}),o),s=(o,e,r,d)=>{for(var t=d>1?void 0:d?p(e,r):e,a=o.length-1,i;a>=0;a--)(i=o[a])&&(t=(d?i(e,r,t):i(t))||t);return d&&t&&l(e,r,t),t};var f={};u(f,{SkdxTableRowSelectCheckbox:()=>c});module.exports=v(f);var b=require("lit/decorators.js"),n=require("../internal/define.cjs"),m=require("./selection-checkbox.cjs");var c=class extends m.SkdxTableSelectionCheckbox{constructor(){super(...arguments);this.rowId=""}connectedCallback(){super.connectedCallback(),this.setAttribute("data-skdx-table-row-select","")}resolveChecked(r){return r.isRowSelected(this.rowId)}defaultLabel(){return null}activate(r){this.tableRoot?.toggleRow(this.rowId,r.shiftKey)}};s([(0,b.property)({type:String,attribute:"row-id"})],c.prototype,"rowId",2),c=s([(0,n.customElement)("skdx-table-row-select-checkbox","table","row-select-checkbox")],c);0&&(module.exports={SkdxTableRowSelectCheckbox});

package/dist/table/TableRowSelectCheckbox.d.cts

@@ -0,0 +1,50 @@
+import type { SkdxCheckedState } from '../checkbox/Checkbox.cjs';
+import { SkdxTableSelectionCheckbox } from './selection-checkbox.cjs';
+import type { SkdxTable } from './Table.cjs';
+/**
+ * `<skdx-table-row-select-checkbox>` — one row's selection checkbox, driven by
+ * the table's selection state rather than its own. Put it in an
+ * `<skdx-table-cell>` of the row it belongs to.
+ *
+ * **Shift-click selects a range**: every row between the last row toggled and
+ * this one, resolved in DOM order at click time (so under virtualization it
+ * spans the rendered window). Space activates it, as on any checkbox — hold
+ * Shift for the same range behaviour.
+ *
+ * It renders a real `<button role="checkbox">` in its shadow root, which
+ * `<skdx-table-row>` already excludes from its own click-to-select handling, so
+ * the click counts once.
+ *
+ * Give each one a row-specific accessible name — `aria-label="Select Aster"`,
+ * not `"Select row"` repeated down the column. There is deliberately no
+ * default: only you know what names the row. The label is moved onto the
+ * shadow `<button>`, where the `role="checkbox"` actually is.
+ *
+ * @csspart checkbox - The native `<button role="checkbox">`, inherited from `<skdx-checkbox>`.
+ *
+ * @example
+ * ```html
+ * <skdx-table-row row-id="1">
+ *   <skdx-table-cell>
+ *     <skdx-table-row-select-checkbox row-id="1" aria-label="Select Aster"></skdx-table-row-select-checkbox>
+ *   </skdx-table-cell>
+ * </skdx-table-row>
+ * ```
+ */
+export declare class SkdxTableRowSelectCheckbox extends SkdxTableSelectionCheckbox {
+    /**
+     * The row this checkbox selects. Must match the `row-id` on the enclosing
+     * `<skdx-table-row>`.
+     */
+    rowId: string;
+    connectedCallback(): void;
+    protected resolveChecked(root: SkdxTable): SkdxCheckedState;
+    /** No default: only the consumer knows what names the row. */
+    protected defaultLabel(): null;
+    protected activate(event: MouseEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-row-select-checkbox': SkdxTableRowSelectCheckbox;
+    }
+}

package/dist/table/TableRowSelectCheckbox.d.ts

@@ -0,0 +1,50 @@
+import type { SkdxCheckedState } from '../checkbox/Checkbox.js';
+import { SkdxTableSelectionCheckbox } from './selection-checkbox.js';
+import type { SkdxTable } from './Table.js';
+/**
+ * `<skdx-table-row-select-checkbox>` — one row's selection checkbox, driven by
+ * the table's selection state rather than its own. Put it in an
+ * `<skdx-table-cell>` of the row it belongs to.
+ *
+ * **Shift-click selects a range**: every row between the last row toggled and
+ * this one, resolved in DOM order at click time (so under virtualization it
+ * spans the rendered window). Space activates it, as on any checkbox — hold
+ * Shift for the same range behaviour.
+ *
+ * It renders a real `<button role="checkbox">` in its shadow root, which
+ * `<skdx-table-row>` already excludes from its own click-to-select handling, so
+ * the click counts once.
+ *
+ * Give each one a row-specific accessible name — `aria-label="Select Aster"`,
+ * not `"Select row"` repeated down the column. There is deliberately no
+ * default: only you know what names the row. The label is moved onto the
+ * shadow `<button>`, where the `role="checkbox"` actually is.
+ *
+ * @csspart checkbox - The native `<button role="checkbox">`, inherited from `<skdx-checkbox>`.
+ *
+ * @example
+ * ```html
+ * <skdx-table-row row-id="1">
+ *   <skdx-table-cell>
+ *     <skdx-table-row-select-checkbox row-id="1" aria-label="Select Aster"></skdx-table-row-select-checkbox>
+ *   </skdx-table-cell>
+ * </skdx-table-row>
+ * ```
+ */
+export declare class SkdxTableRowSelectCheckbox extends SkdxTableSelectionCheckbox {
+    /**
+     * The row this checkbox selects. Must match the `row-id` on the enclosing
+     * `<skdx-table-row>`.
+     */
+    rowId: string;
+    connectedCallback(): void;
+    protected resolveChecked(root: SkdxTable): SkdxCheckedState;
+    /** No default: only the consumer knows what names the row. */
+    protected defaultLabel(): null;
+    protected activate(event: MouseEvent): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-row-select-checkbox': SkdxTableRowSelectCheckbox;
+    }
+}

package/dist/table/TableRowSelectCheckbox.js

@@ -0,0 +1 @@
+var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var i=(c,r,e,d)=>{for(var t=d>1?void 0:d?p(r,e):r,l=c.length-1,a;l>=0;l--)(a=c[l])&&(t=(d?a(r,e,t):a(t))||t);return d&&t&&s(r,e,t),t};import{property as b}from"lit/decorators.js";import{customElement as n}from"../internal/define.js";import{SkdxTableSelectionCheckbox as m}from"./selection-checkbox.js";var o=class extends m{constructor(){super(...arguments);this.rowId=""}connectedCallback(){super.connectedCallback(),this.setAttribute("data-skdx-table-row-select","")}resolveChecked(e){return e.isRowSelected(this.rowId)}defaultLabel(){return null}activate(e){this.tableRoot?.toggleRow(this.rowId,e.shiftKey)}};i([b({type:String,attribute:"row-id"})],o.prototype,"rowId",2),o=i([n("skdx-table-row-select-checkbox","table","row-select-checkbox")],o);export{o as SkdxTableRowSelectCheckbox};

package/dist/table/TableSelectAllCheckbox.cjs

@@ -0,0 +1 @@
+"use strict";var i=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var S=(r,t)=>{for(var e in t)i(r,e,{get:t[e],enumerable:!0})},g=(r,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of h(t))!f.call(r,o)&&o!==e&&i(r,o,{get:()=>t[o],enumerable:!(s=b(t,o))||s.enumerable});return r};var y=r=>g(i({},"__esModule",{value:!0}),r),a=(r,t,e,s)=>{for(var o=s>1?void 0:s?b(t,e):t,p=r.length-1,d;p>=0;p--)(d=r[p])&&(o=(s?d(t,e,o):d(o))||o);return s&&o&&i(t,e,o),o};var v={};S(v,{SkdxTableSelectAllCheckbox:()=>l,defaultSelectAllLabel:()=>u});module.exports=y(v);var c=require("lit/decorators.js"),n=require("../internal/define.cjs"),m=require("./selection-checkbox.cjs");function u(r,t){let e=`${t} ${t===1?"row":"rows"}`;return r==="page"?`Select all ${e} on this page`:`Select all ${e}`}var l=class extends m.SkdxTableSelectionCheckbox{constructor(){super(...arguments);this.rowIds=[];this.scope="page"}connectedCallback(){super.connectedCallback(),this.setAttribute("data-skdx-table-select-all",""),this.setAttribute("data-scope",this.scope)}updated(e){e.has("scope")&&this.setAttribute("data-scope",this.scope),(e.has("rowIds")||e.has("scope"))&&this.syncFromTable(),super.updated(e)}resolveChecked(e){return e.isAllSelected(this.rowIds)?!0:e.isSomeSelected(this.rowIds)?"indeterminate":!1}defaultLabel(){return(this.getSelectAllLabel??u)(this.scope,this.rowIds.length)}activate(){this.tableRoot?.toggleAll(this.rowIds)}};a([(0,c.property)({type:Array,attribute:"row-ids"})],l.prototype,"rowIds",2),a([(0,c.property)({type:String,reflect:!0})],l.prototype,"scope",2),a([(0,c.property)({attribute:!1})],l.prototype,"getSelectAllLabel",2),l=a([(0,n.customElement)("skdx-table-select-all-checkbox","table","select-all-checkbox")],l);0&&(module.exports={SkdxTableSelectAllCheckbox,defaultSelectAllLabel});

package/dist/table/TableSelectAllCheckbox.d.cts

@@ -0,0 +1,78 @@
+import type { PropertyValues } from 'lit';
+import type { SkdxCheckedState } from '../checkbox/Checkbox.cjs';
+import { SkdxTableSelectionCheckbox } from './selection-checkbox.cjs';
+import type { SkdxTable } from './Table.cjs';
+import type { TableSelectAllScope } from './types.cjs';
+/**
+ * Default accessible name — the count and the scope, never a bare "Select all".
+ * "Select all 40 rows on this page" and "Select all 1,204 rows" are different
+ * promises, and the whole point of `scope` is that the user hears which one.
+ */
+export declare function defaultSelectAllLabel(scope: TableSelectAllScope, count: number): string;
+/**
+ * `<skdx-table-select-all-checkbox>` — the header checkbox that selects or
+ * clears a set of rows at once. Tri-state: checked when every id in `row-ids`
+ * is selected, indeterminate when only some are, unchecked otherwise
+ * (including over an empty list — a select-all above no rows reads unchecked,
+ * not vacuously checked).
+ *
+ * `row-ids` and `scope` are both required, and that is the point. The table
+ * holds no row registry, so "select all" means exactly the ids you hand it:
+ * pass the rendered page's ids with `scope="page"`, or the whole dataset's with
+ * `scope="all"`. The two are indistinguishable until the table paginates or
+ * virtualizes, at which point a "select all" that silently covered only the
+ * visible window is a bug found in production — so the API makes you say which
+ * you meant, and says it in the accessible name too.
+ *
+ * `row-ids` is a JSON array attribute (Lit's `Array` converter), matching
+ * `<skdx-table>`'s own `default-expanded-row-ids`; set it as a property to skip
+ * the serialization.
+ *
+ * Meaningful only with `selection-mode="multiple"`.
+ *
+ * @csspart checkbox - The native `<button role="checkbox">`, inherited from `<skdx-checkbox>`.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell>
+ *   <skdx-table-select-all-checkbox scope="page" row-ids='["1","2"]'></skdx-table-select-all-checkbox>
+ * </skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableSelectAllCheckbox extends SkdxTableSelectionCheckbox {
+    /**
+     * The rows this checkbox covers. A JSON array attribute, e.g.
+     * `row-ids='["1","2"]'`.
+     */
+    rowIds: string[];
+    /**
+     * Whether `row-ids` is the current page/window (`'page'`) or the entire
+     * dataset (`'all'`). Says which it is in the default accessible name, so the
+     * user hears the difference a paginated table makes.
+     * @default 'page'
+     */
+    scope: TableSelectAllScope;
+    /**
+     * Words the checkbox's accessible name. `count` is `rowIds.length`, so the
+     * name can keep saying how many rows and which scope — which is the reason a
+     * plain `aria-label` is not enough here: it would freeze a count that moves
+     * with every page. Property only, being a function; a host `aria-label` still
+     * wins over both, as it does on the sibling row checkbox.
+     * Written as `` `defaultSelectAllLabel` ``, not `{@link}`: a `{@link}` to a
+     * module-level *function* in an `@default` tag makes `cem analyze` serialize
+     * the resolved declaration node, and it dies on the circular `parent` back-
+     * reference before writing `custom-elements.json`.
+     * @default undefined — `defaultSelectAllLabel`, e.g. `"Select all 40 rows on this page"`.
+     */
+    getSelectAllLabel?: (scope: TableSelectAllScope, count: number) => string;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    protected resolveChecked(root: SkdxTable): SkdxCheckedState;
+    protected defaultLabel(): string;
+    protected activate(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-select-all-checkbox': SkdxTableSelectAllCheckbox;
+    }
+}

package/dist/table/TableSelectAllCheckbox.d.ts

@@ -0,0 +1,78 @@
+import type { PropertyValues } from 'lit';
+import type { SkdxCheckedState } from '../checkbox/Checkbox.js';
+import { SkdxTableSelectionCheckbox } from './selection-checkbox.js';
+import type { SkdxTable } from './Table.js';
+import type { TableSelectAllScope } from './types.js';
+/**
+ * Default accessible name — the count and the scope, never a bare "Select all".
+ * "Select all 40 rows on this page" and "Select all 1,204 rows" are different
+ * promises, and the whole point of `scope` is that the user hears which one.
+ */
+export declare function defaultSelectAllLabel(scope: TableSelectAllScope, count: number): string;
+/**
+ * `<skdx-table-select-all-checkbox>` — the header checkbox that selects or
+ * clears a set of rows at once. Tri-state: checked when every id in `row-ids`
+ * is selected, indeterminate when only some are, unchecked otherwise
+ * (including over an empty list — a select-all above no rows reads unchecked,
+ * not vacuously checked).
+ *
+ * `row-ids` and `scope` are both required, and that is the point. The table
+ * holds no row registry, so "select all" means exactly the ids you hand it:
+ * pass the rendered page's ids with `scope="page"`, or the whole dataset's with
+ * `scope="all"`. The two are indistinguishable until the table paginates or
+ * virtualizes, at which point a "select all" that silently covered only the
+ * visible window is a bug found in production — so the API makes you say which
+ * you meant, and says it in the accessible name too.
+ *
+ * `row-ids` is a JSON array attribute (Lit's `Array` converter), matching
+ * `<skdx-table>`'s own `default-expanded-row-ids`; set it as a property to skip
+ * the serialization.
+ *
+ * Meaningful only with `selection-mode="multiple"`.
+ *
+ * @csspart checkbox - The native `<button role="checkbox">`, inherited from `<skdx-checkbox>`.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell>
+ *   <skdx-table-select-all-checkbox scope="page" row-ids='["1","2"]'></skdx-table-select-all-checkbox>
+ * </skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableSelectAllCheckbox extends SkdxTableSelectionCheckbox {
+    /**
+     * The rows this checkbox covers. A JSON array attribute, e.g.
+     * `row-ids='["1","2"]'`.
+     */
+    rowIds: string[];
+    /**
+     * Whether `row-ids` is the current page/window (`'page'`) or the entire
+     * dataset (`'all'`). Says which it is in the default accessible name, so the
+     * user hears the difference a paginated table makes.
+     * @default 'page'
+     */
+    scope: TableSelectAllScope;
+    /**
+     * Words the checkbox's accessible name. `count` is `rowIds.length`, so the
+     * name can keep saying how many rows and which scope — which is the reason a
+     * plain `aria-label` is not enough here: it would freeze a count that moves
+     * with every page. Property only, being a function; a host `aria-label` still
+     * wins over both, as it does on the sibling row checkbox.
+     * Written as `` `defaultSelectAllLabel` ``, not `{@link}`: a `{@link}` to a
+     * module-level *function* in an `@default` tag makes `cem analyze` serialize
+     * the resolved declaration node, and it dies on the circular `parent` back-
+     * reference before writing `custom-elements.json`.
+     * @default undefined — `defaultSelectAllLabel`, e.g. `"Select all 40 rows on this page"`.
+     */
+    getSelectAllLabel?: (scope: TableSelectAllScope, count: number) => string;
+    connectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    protected resolveChecked(root: SkdxTable): SkdxCheckedState;
+    protected defaultLabel(): string;
+    protected activate(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-select-all-checkbox': SkdxTableSelectAllCheckbox;
+    }
+}

package/dist/table/TableSelectAllCheckbox.js

@@ -0,0 +1 @@
+var d=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var s=(l,t,e,a)=>{for(var r=a>1?void 0:a?b(t,e):t,i=l.length-1,c;i>=0;i--)(c=l[i])&&(r=(a?c(t,e,r):c(r))||r);return a&&r&&d(t,e,r),r};import{property as p}from"lit/decorators.js";import{customElement as n}from"../internal/define.js";import{SkdxTableSelectionCheckbox as m}from"./selection-checkbox.js";function u(l,t){let e=`${t} ${t===1?"row":"rows"}`;return l==="page"?`Select all ${e} on this page`:`Select all ${e}`}var o=class extends m{constructor(){super(...arguments);this.rowIds=[];this.scope="page"}connectedCallback(){super.connectedCallback(),this.setAttribute("data-skdx-table-select-all",""),this.setAttribute("data-scope",this.scope)}updated(e){e.has("scope")&&this.setAttribute("data-scope",this.scope),(e.has("rowIds")||e.has("scope"))&&this.syncFromTable(),super.updated(e)}resolveChecked(e){return e.isAllSelected(this.rowIds)?!0:e.isSomeSelected(this.rowIds)?"indeterminate":!1}defaultLabel(){return(this.getSelectAllLabel??u)(this.scope,this.rowIds.length)}activate(){this.tableRoot?.toggleAll(this.rowIds)}};s([p({type:Array,attribute:"row-ids"})],o.prototype,"rowIds",2),s([p({type:String,reflect:!0})],o.prototype,"scope",2),s([p({attribute:!1})],o.prototype,"getSelectAllLabel",2),o=s([n("skdx-table-select-all-checkbox","table","select-all-checkbox")],o);export{o as SkdxTableSelectAllCheckbox,u as defaultSelectAllLabel};

package/dist/table/TableSortIndicator.cjs

@@ -0,0 +1,15 @@
+"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var r in e)c(o,r,{get:e[r],enumerable:!0})},E=(o,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!v.call(o,t)&&t!==r&&c(o,t,{get:()=>e[t],enumerable:!(i=m(e,t))||i.enumerable});return o};var L=o=>E(c({},"__esModule",{value:!0}),o),p=(o,e,r,i)=>{for(var t=i>1?void 0:i?m(e,r):e,d=o.length-1,l;d>=0;d--)(l=o[d])&&(t=(i?l(e,r,t):l(t))||t);return i&&t&&c(e,r,t),t};var k={};b(k,{SkdxTableSortIndicator:()=>n});module.exports=L(k);var s=require("lit"),h=require("lit/decorators.js"),u=require("../internal/define.cjs"),a=require("./column-context.cjs");var n=class extends s.LitElement{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=(0,a.findTableRoot)(this),this.root?.addEventListener(a.TABLE_INTERNAL_UPDATE,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(a.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}render(){let r=this.sortKey??(0,a.findHeaderCell)(this)?.sortKey,i=this.root?.sortList??[],t=r===void 0?-1:i.findIndex(y=>y.columnKey===r),d=i[t]?.direction??"none",l=this.root?.multiSort??!1;return s.html`
+      <span
+        part="indicator"
+        aria-hidden="true"
+        data-skdx-table-sort-indicator
+        data-sort-direction=${d}
+        data-sort-index=${l&&t!==-1?t:s.nothing}
+      >
+        <slot></slot>
+      </span>
+    `}};n.styles=s.css`
+    :host {
+      display: contents;
+    }
+  `,p([(0,h.property)({type:String,attribute:"sort-key"})],n.prototype,"sortKey",2),n=p([(0,u.customElement)("skdx-table-sort-indicator","table","sort-indicator")],n);0&&(module.exports={SkdxTableSortIndicator});

package/dist/table/TableSortIndicator.d.cts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-sort-indicator>` — the arrow (or caret, or badge) showing which
+ * way a column is sorted. An `aria-hidden` `<span>` carrying
+ * `data-sort-direction` (`"asc"`/`"desc"`/`"none"`) and, under the table's
+ * `multi-sort`, `data-sort-index` — the column's 0-based position in the sort
+ * order.
+ *
+ * `aria-hidden` is deliberate and not configurable: the header cell already
+ * publishes `aria-sort`, and the sort button announces the new order through
+ * the live announcer. An indicator that also spoke would say it a third time.
+ *
+ * It renders whatever you slot into it and stays mounted in all three states,
+ * so a CSS-driven arrow can rotate rather than swap.
+ *
+ * @csspart indicator - The `<span>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell sort-key="amount">
+ *   <skdx-table-column-header-sort-trigger>
+ *     Amount
+ *     <skdx-table-sort-indicator>▲</skdx-table-sort-indicator>
+ *   </skdx-table-column-header-sort-trigger>
+ * </skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableSortIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Column identifier to read the direction of, when the indicator is not
+     * inside a `<skdx-table-header-cell>` that already carries one.
+     * @default undefined — falls back to the enclosing header cell's `sort-key`.
+     */
+    sortKey?: string;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-sort-indicator': SkdxTableSortIndicator;
+    }
+}

package/dist/table/TableSortIndicator.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-sort-indicator>` — the arrow (or caret, or badge) showing which
+ * way a column is sorted. An `aria-hidden` `<span>` carrying
+ * `data-sort-direction` (`"asc"`/`"desc"`/`"none"`) and, under the table's
+ * `multi-sort`, `data-sort-index` — the column's 0-based position in the sort
+ * order.
+ *
+ * `aria-hidden` is deliberate and not configurable: the header cell already
+ * publishes `aria-sort`, and the sort button announces the new order through
+ * the live announcer. An indicator that also spoke would say it a third time.
+ *
+ * It renders whatever you slot into it and stays mounted in all three states,
+ * so a CSS-driven arrow can rotate rather than swap.
+ *
+ * @csspart indicator - The `<span>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell sort-key="amount">
+ *   <skdx-table-column-header-sort-trigger>
+ *     Amount
+ *     <skdx-table-sort-indicator>▲</skdx-table-sort-indicator>
+ *   </skdx-table-column-header-sort-trigger>
+ * </skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableSortIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    /**
+     * Column identifier to read the direction of, when the indicator is not
+     * inside a `<skdx-table-header-cell>` that already carries one.
+     * @default undefined — falls back to the enclosing header cell's `sort-key`.
+     */
+    sortKey?: string;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-sort-indicator': SkdxTableSortIndicator;
+    }
+}

package/dist/table/TableSortIndicator.js

@@ -0,0 +1,15 @@
+var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=(a,i,o,e)=>{for(var t=e>1?void 0:e?m(i,o):i,s=a.length-1,n;s>=0;s--)(n=a[s])&&(t=(e?n(i,o,t):n(t))||t);return e&&t&&p(i,o,t),t};import{css as h,html as u,LitElement as y,nothing as f}from"lit";import{property as v}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{findHeaderCell as E,findTableRoot as L,TABLE_INTERNAL_UPDATE as l}from"./column-context.js";var r=class extends y{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=L(this),this.root?.addEventListener(l,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(l,this.onRootUpdate),super.disconnectedCallback()}render(){let o=this.sortKey??E(this)?.sortKey,e=this.root?.sortList??[],t=o===void 0?-1:e.findIndex(c=>c.columnKey===o),s=e[t]?.direction??"none",n=this.root?.multiSort??!1;return u`
+      <span
+        part="indicator"
+        aria-hidden="true"
+        data-skdx-table-sort-indicator
+        data-sort-direction=${s}
+        data-sort-index=${n&&t!==-1?t:f}
+      >
+        <slot></slot>
+      </span>
+    `}};r.styles=h`
+    :host {
+      display: contents;
+    }
+  `,d([v({type:String,attribute:"sort-key"})],r.prototype,"sortKey",2),r=d([b("skdx-table-sort-indicator","table","sort-indicator")],r);export{r as SkdxTableSortIndicator};

package/dist/table/column-context.cjs

@@ -0,0 +1 @@
+"use strict";var n=Object.defineProperty;var o=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var u=(e,l)=>{for(var r in l)n(e,r,{get:l[r],enumerable:!0})},x=(e,l,r,a)=>{if(l&&typeof l=="object"||typeof l=="function")for(let t of i(l))!b.call(e,t)&&t!==r&&n(e,t,{get:()=>l[t],enumerable:!(a=o(l,t))||a.enumerable});return e};var T=e=>x(n({},"__esModule",{value:!0}),e);var s={};u(s,{TABLE_INTERNAL_UPDATE:()=>k,findHeaderCell:()=>p,findTableRoot:()=>f,optionalStringAttribute:()=>m});module.exports=T(s);var d=require("../internal/closest.cjs");function p(e){return(0,d.closestThroughShadow)(e,"skdx-table-header-cell")}function f(e){return(0,d.closestThroughShadow)(e,"skdx-table")}var k="skdx-table-internal-update",m={fromAttribute:e=>e??void 0};0&&(module.exports={TABLE_INTERNAL_UPDATE,findHeaderCell,findTableRoot,optionalStringAttribute});

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

@@ -0,0 +1,36 @@
+import type { SkdxTable } from './Table.cjs';
+import type { SkdxTableHeaderCell } from './TableHeaderCell.cjs';
+/**
+ * @internal Column-scoped defaults a `<skdx-table-header-cell>` publishes to the
+ * sort and resize parts nested inside it.
+ *
+ * React reads these off a context provider; Web Components have no
+ * cross-shadow-root context, so the parts walk up with `closest()` instead.
+ * Resolving to `null` is not an error — those parts are also legal outside a
+ * header cell, they just need their own `sort-key`/`column-key` there.
+ *
+ * Crosses shadow boundaries because these parts are rendered in two positions:
+ * as light-DOM children the consumer wrote, and as the shadow-rendered defaults
+ * a header cell's `sort-key`/`resizable` shorthand stands for.
+ */
+export declare function findHeaderCell(el: Element): SkdxTableHeaderCell | null;
+/** @internal The `<skdx-table>` a part belongs to. Crosses shadow boundaries for the same reason. */
+export declare function findTableRoot(el: Element): SkdxTable | null;
+/** @internal The broadcast every table part subscribes to for re-render. */
+export declare const TABLE_INTERNAL_UPDATE = "skdx-table-internal-update";
+/**
+ * @internal Converter for an optional string attribute whose *absence* is
+ * meaningful — `sort-key` and `column-key`, where "no key" means "this column
+ * cannot be sorted / resized".
+ *
+ * Lit's built-in String converter hands a removed attribute straight through
+ * as `null`, so a column made non-sortable at runtime
+ * (`cell.removeAttribute('sort-key')`) left `sortKey` at `null` rather than
+ * `undefined` — past every `=== undefined` guard downstream. The cell kept
+ * rendering `aria-sort` and its sort button, and the next press emitted
+ * `sort-change` with `{ columnKey: null }`. This maps the removal back onto
+ * the `undefined` the property's own type already promises.
+ */
+export declare const optionalStringAttribute: {
+    fromAttribute: (value: string | null) => string | undefined;
+};

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

@@ -0,0 +1,36 @@
+import type { SkdxTable } from './Table.js';
+import type { SkdxTableHeaderCell } from './TableHeaderCell.js';
+/**
+ * @internal Column-scoped defaults a `<skdx-table-header-cell>` publishes to the
+ * sort and resize parts nested inside it.
+ *
+ * React reads these off a context provider; Web Components have no
+ * cross-shadow-root context, so the parts walk up with `closest()` instead.
+ * Resolving to `null` is not an error — those parts are also legal outside a
+ * header cell, they just need their own `sort-key`/`column-key` there.
+ *
+ * Crosses shadow boundaries because these parts are rendered in two positions:
+ * as light-DOM children the consumer wrote, and as the shadow-rendered defaults
+ * a header cell's `sort-key`/`resizable` shorthand stands for.
+ */
+export declare function findHeaderCell(el: Element): SkdxTableHeaderCell | null;
+/** @internal The `<skdx-table>` a part belongs to. Crosses shadow boundaries for the same reason. */
+export declare function findTableRoot(el: Element): SkdxTable | null;
+/** @internal The broadcast every table part subscribes to for re-render. */
+export declare const TABLE_INTERNAL_UPDATE = "skdx-table-internal-update";
+/**
+ * @internal Converter for an optional string attribute whose *absence* is
+ * meaningful — `sort-key` and `column-key`, where "no key" means "this column
+ * cannot be sorted / resized".
+ *
+ * Lit's built-in String converter hands a removed attribute straight through
+ * as `null`, so a column made non-sortable at runtime
+ * (`cell.removeAttribute('sort-key')`) left `sortKey` at `null` rather than
+ * `undefined` — past every `=== undefined` guard downstream. The cell kept
+ * rendering `aria-sort` and its sort button, and the next press emitted
+ * `sort-change` with `{ columnKey: null }`. This maps the removal back onto
+ * the `undefined` the property's own type already promises.
+ */
+export declare const optionalStringAttribute: {
+    fromAttribute: (value: string | null) => string | undefined;
+};

package/dist/table/column-context.js

@@ -0,0 +1 @@
+import{closestThroughShadow as l}from"../internal/closest.js";function r(e){return l(e,"skdx-table-header-cell")}function n(e){return l(e,"skdx-table")}var d="skdx-table-internal-update",a={fromAttribute:e=>e??void 0};export{d as TABLE_INTERNAL_UPDATE,r as findHeaderCell,n as findTableRoot,a as optionalStringAttribute};

package/dist/table/column-resize.cjs

@@ -0,0 +1 @@
+"use strict";var o=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var l=Object.prototype.hasOwnProperty;var u=(r,e)=>{for(var t in e)o(r,t,{get:e[t],enumerable:!0})},p=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of h(e))!l.call(r,n)&&n!==t&&o(r,n,{get:()=>e[n],enumerable:!(i=d(e,n))||i.enumerable});return r};var c=r=>p(o({},"__esModule",{value:!0}),r);var m={};u(m,{ColumnResizeController:()=>a});module.exports=c(m);var s=require("../internal/direction.cjs"),a=class{constructor(e){this.host=e;this.dragging=!1;this.drag=null;this.onDocumentKeyDown=e=>{if(e.key!=="Escape")return;let t=this.endDrag();t&&this.applyWidth(t.startWidth)};this.handlePointerDown=e=>{e.button===0&&(e.preventDefault(),e.stopPropagation(),this.drag={startX:e.clientX,startWidth:this.currentWidth(),pointerId:e.pointerId},this.dragging=!0,this.startEscapeWatch(),e.currentTarget.setPointerCapture?.(e.pointerId),this.host.requestUpdate())};this.handlePointerMove=e=>{let t=this.drag;if(!t)return;let n=(0,s.resolveDirection)(e.currentTarget)==="rtl"?t.startX-e.clientX:e.clientX-t.startX;this.applyWidth(t.startWidth+n)};this.handlePointerUp=e=>{let t=this.endDrag();if(!t)return;let i=e.currentTarget;i.hasPointerCapture?.(t.pointerId)&&i.releasePointerCapture(t.pointerId)};this.handleKeyDown=e=>{let t=(0,s.directionalKey)(e.key,e.currentTarget);if(t==="ArrowRight")this.applyWidth(this.currentWidth()+this.host.resizeStepPx);else if(t==="ArrowLeft")this.applyWidth(this.currentWidth()-this.host.resizeStepPx);else if(e.key==="Home")this.applyWidth(this.host.resizeMinWidth);else if(e.key==="End")this.applyWidth(this.host.resizeMaxWidth);else return;e.preventDefault(),e.stopPropagation()};e.addController(this)}hostDisconnected(){this.stopEscapeWatch(),this.drag=null,this.dragging=!1}get storedWidth(){let e=this.host.resizeColumnKey;return e===void 0?void 0:this.host.resizeTable?.resolvedColumnWidths[e]}applyWidth(e){let t=this.host.resizeColumnKey;if(t===void 0)return;let i=Math.min(Math.max(Math.round(e),this.host.resizeMinWidth),this.host.resizeMaxWidth);this.host.resizeTable?.setColumnWidth(t,i)}currentWidth(){let e=this.storedWidth;return e!==void 0?e:(this.host.resizeMeasureCell()?.getBoundingClientRect().width??0)||this.host.resizeMinWidth}startEscapeWatch(){document.addEventListener("keydown",this.onDocumentKeyDown)}stopEscapeWatch(){document.removeEventListener("keydown",this.onDocumentKeyDown)}endDrag(){let e=this.drag;return e?(this.drag=null,this.dragging=!1,this.stopEscapeWatch(),this.host.requestUpdate(),e):null}};0&&(module.exports={ColumnResizeController});

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

@@ -0,0 +1,57 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { SkdxTable } from './Table.cjs';
+/**
+ * @internal What a column-resize host has to be able to answer. Both
+ * `<skdx-table-header-cell>` (for the inline handle its `resizable` shorthand
+ * renders) and `<skdx-table-column-resize-trigger>` (for the standalone one)
+ * implement this, so the drag/keyboard behaviour is written once.
+ */
+export interface ColumnResizeTarget {
+    /** Where this column's width is stored, or `undefined` if it cannot resize. */
+    readonly resizeColumnKey: string | undefined;
+    readonly resizeMinWidth: number;
+    readonly resizeMaxWidth: number;
+    /** How far one Arrow keypress moves the edge, in pixels. */
+    readonly resizeStepPx: number;
+    readonly resizeTable: SkdxTable | null;
+    /**
+     * The `<th>` this column is laid out as — the fallback starting width for a
+     * first drag on a column that has never been resized.
+     */
+    resizeMeasureCell(): HTMLElement | null | undefined;
+}
+type Host = ReactiveControllerHost & ColumnResizeTarget;
+/**
+ * @internal The pointer and keyboard behaviour of a column-resize handle.
+ *
+ * Kept out of both hosts because the two are the same widget in two positions:
+ * the handle `<skdx-table-header-cell resizable>` renders into its own shadow
+ * root, and the standalone `<skdx-table-column-resize-trigger>` a consumer slots
+ * in to place it differently. Only the markup around them differs.
+ */
+export declare class ColumnResizeController implements ReactiveController {
+    private readonly host;
+    /** True while a pointer drag is in flight — the `data-dragging` styling hook. */
+    dragging: boolean;
+    private drag;
+    constructor(host: Host);
+    hostDisconnected(): void;
+    /** This column's stored width, or `undefined` while it has never been resized. */
+    get storedWidth(): number | undefined;
+    private applyWidth;
+    /**
+     * The stored width, else whatever the browser laid the column out at, else
+     * `minWidth` — a measurement of 0 means nothing was laid out (jsdom, or a
+     * hidden table), and resizing from 0 would be a jump, not a drag.
+     */
+    private currentWidth;
+    private readonly onDocumentKeyDown;
+    private startEscapeWatch;
+    private stopEscapeWatch;
+    private endDrag;
+    readonly handlePointerDown: (event: PointerEvent) => void;
+    readonly handlePointerMove: (event: PointerEvent) => void;
+    readonly handlePointerUp: (event: PointerEvent) => void;
+    readonly handleKeyDown: (event: KeyboardEvent) => void;
+}
+export {};