@skdx/web-components 0.26.0

package/dist/table/TableColumnHeaderSortTrigger.cjs

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

package/dist/table/TableColumnHeaderSortTrigger.d.cts

@@ -0,0 +1,67 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-table-column-header-sort-trigger>` — the button inside a sortable
+ * `<skdx-table-header-cell>` that cycles its column through ascending →
+ * descending → unsorted. The APG sortable-table pattern, so the sort control
+ * announces as a button and activates on Enter/Space natively while the `<th>`
+ * itself stays out of the tab order.
+ *
+ * A header cell with a `sort-key` renders one of these for you. Render it
+ * yourself when the header needs more than a label inside the button (a sort
+ * indicator, an icon, a count) — the cell notices a sort trigger among its
+ * slotted children and stops adding its own, so exactly one sort button exists
+ * per column either way.
+ *
+ * Carries `data-sort-direction` (`"asc"`/`"desc"`, absent while unsorted) and,
+ * under the table's `multi-sort`, `data-sort-index` — the column's 0-based
+ * position in the sort, which is what a "1, 2, 3" badge on a multi-sorted
+ * header is drawn from.
+ *
+ * @csspart sort-trigger - The native `<button>` 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 SkdxTableColumnHeaderSortTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Column identifier to sort by, when the trigger 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;
+    /** The column this trigger sorts, from its own attribute or the header cell around it. */
+    private get resolvedSortKey();
+    private readonly activate;
+    /**
+     * The column label the announcement uses. The shadow `<button>` holds only a
+     * `<slot>`, so it has no text of its own to read — take the host's.
+     *
+     * Falls back to the enclosing header cell's text for the trigger a
+     * `<skdx-table-header-cell sort-key>` renders into its own shadow root: that
+     * one wraps the *cell's* slot, so its own `textContent` is the empty
+     * `<slot>` element and the column's label lives one level up.
+     */
+    private columnLabel;
+    /** This column's place in the table's sort list, shared by `render` and `updated`. */
+    private sortState;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-column-header-sort-trigger': SkdxTableColumnHeaderSortTrigger;
+    }
+}

package/dist/table/TableColumnHeaderSortTrigger.d.ts

@@ -0,0 +1,67 @@
+import { LitElement, nothing } from 'lit';
+/**
+ * `<skdx-table-column-header-sort-trigger>` — the button inside a sortable
+ * `<skdx-table-header-cell>` that cycles its column through ascending →
+ * descending → unsorted. The APG sortable-table pattern, so the sort control
+ * announces as a button and activates on Enter/Space natively while the `<th>`
+ * itself stays out of the tab order.
+ *
+ * A header cell with a `sort-key` renders one of these for you. Render it
+ * yourself when the header needs more than a label inside the button (a sort
+ * indicator, an icon, a count) — the cell notices a sort trigger among its
+ * slotted children and stops adding its own, so exactly one sort button exists
+ * per column either way.
+ *
+ * Carries `data-sort-direction` (`"asc"`/`"desc"`, absent while unsorted) and,
+ * under the table's `multi-sort`, `data-sort-index` — the column's 0-based
+ * position in the sort, which is what a "1, 2, 3" badge on a multi-sorted
+ * header is drawn from.
+ *
+ * @csspart sort-trigger - The native `<button>` 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 SkdxTableColumnHeaderSortTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Column identifier to sort by, when the trigger 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;
+    /** The column this trigger sorts, from its own attribute or the header cell around it. */
+    private get resolvedSortKey();
+    private readonly activate;
+    /**
+     * The column label the announcement uses. The shadow `<button>` holds only a
+     * `<slot>`, so it has no text of its own to read — take the host's.
+     *
+     * Falls back to the enclosing header cell's text for the trigger a
+     * `<skdx-table-header-cell sort-key>` renders into its own shadow root: that
+     * one wraps the *cell's* slot, so its own `textContent` is the empty
+     * `<slot>` element and the column's label lives one level up.
+     */
+    private columnLabel;
+    /** This column's place in the table's sort list, shared by `render` and `updated`. */
+    private sortState;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-column-header-sort-trigger': SkdxTableColumnHeaderSortTrigger;
+    }
+}

package/dist/table/TableColumnHeaderSortTrigger.js

@@ -0,0 +1,16 @@
+var u=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var a=(n,s,e,o)=>{for(var t=o>1?void 0:o?h(s,e):s,r=n.length-1,d;r>=0;r--)(d=n[r])&&(t=(o?d(s,e,t):d(t))||t);return o&&t&&u(s,e,t),t};import{css as m,html as v,LitElement as y,nothing as l}from"lit";import{property as f}from"lit/decorators.js";import{customElement as b}from"../internal/define.js";import{reflectHostState as g}from"../internal/part.js";import{controlBoxOnHost as x,delegatesFocusShadowRootOptions as K,resetNativeControl as L}from"../internal/styles.js";import{findHeaderCell as c,findTableRoot as S,TABLE_INTERNAL_UPDATE as p}from"./column-context.js";var i=class extends y{constructor(){super(...arguments);this.root=null;this.onRootUpdate=()=>this.requestUpdate();this.activate=()=>{let e=this.resolvedSortKey;e!==void 0&&this.root?.toggleSort(e,this.columnLabel()||e)}}connectedCallback(){super.connectedCallback(),this.root=S(this),this.root?.addEventListener(p,this.onRootUpdate)}disconnectedCallback(){this.root?.removeEventListener(p,this.onRootUpdate),super.disconnectedCallback()}get resolvedSortKey(){return this.sortKey??c(this)?.sortKey}columnLabel(){return this.textContent?.trim()||c(this)?.textContent?.trim()||""}sortState(){let e=this.resolvedSortKey,o=this.root?.sortList??[],t=e===void 0?-1:o.findIndex(r=>r.columnKey===e);return{direction:o[t]?.direction,index:t,multiSort:this.root?.multiSort??!1}}updated(){let{direction:e,index:o,multiSort:t}=this.sortState();g(this,{"data-sort-direction":e??null,"data-sort-index":t&&o!==-1?String(o):null})}render(){if(this.resolvedSortKey===void 0)return l;let{direction:o,index:t,multiSort:r}=this.sortState();return v`
+      <button
+        type="button"
+        part="sort-trigger"
+        data-skdx-table-sort-trigger
+        data-sort-direction=${o??l}
+        data-sort-index=${r&&t!==-1?t:l}
+        @click=${this.activate}
+      >
+        <slot></slot>
+      </button>
+    `}};i.shadowRootOptions=K,i.styles=[L,m`
+      :host {
+        display: contents;
+      }
+    `,x],a([f({type:String,attribute:"sort-key"})],i.prototype,"sortKey",2),i=a([b("skdx-table-column-header-sort-trigger","table","column-header-sort-trigger")],i);export{i as SkdxTableColumnHeaderSortTrigger};

package/dist/table/TableColumnResizeTrigger.cjs

@@ -0,0 +1,40 @@
+"use strict";var h=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var y=Object.prototype.hasOwnProperty;var f=(n,e)=>{for(var i in e)h(n,i,{get:e[i],enumerable:!0})},w=(n,e,i,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of z(e))!y.call(n,t)&&t!==i&&h(n,t,{get:()=>e[t],enumerable:!(o=m(e,t))||o.enumerable});return n};var k=n=>w(h({},"__esModule",{value:!0}),n),l=(n,e,i,o)=>{for(var t=o>1?void 0:o?m(e,i):e,c=n.length-1,p;c>=0;c--)(p=n[c])&&(t=(o?p(e,i,t):p(t))||t);return o&&t&&h(e,i,t),t};var W={};f(W,{SkdxTableColumnResizeTrigger:()=>r});module.exports=k(W);var s=require("lit"),d=require("lit/decorators.js"),u=require("../internal/aria-label.cjs"),b=require("../internal/define.cjs"),g=require("../internal/part.cjs"),a=require("./column-context.cjs"),v=require("./column-resize.cjs");var x=40,L=1e3,E=8,r=class extends s.LitElement{constructor(){super(...arguments);this.resize=new v.ColumnResizeController(this);this.root=null;this.hostLabel=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=(0,a.findTableRoot)(this),this.root?.addEventListener(a.TABLE_INTERNAL_UPDATE,this.onRootUpdate),this.hostLabel??(this.hostLabel=(0,u.takeHostAriaLabel)(this))}disconnectedCallback(){this.root?.removeEventListener(a.TABLE_INTERNAL_UPDATE,this.onRootUpdate),super.disconnectedCallback()}get cell(){return(0,a.findHeaderCell)(this)}get resizeColumnKey(){let i=this.cell;return this.columnKey??i?.columnKey??i?.sortKey}get resizeMinWidth(){return this.minWidth??this.cell?.minWidth??x}get resizeMaxWidth(){return this.maxWidth??this.cell?.maxWidth??L}get resizeStepPx(){return this.step??this.cell?.resizeStep??E}get resizeTable(){return this.root}resizeMeasureCell(){return this.cell}updated(){(0,g.reflectHostState)(this,{"data-dragging":this.resize.dragging?"":null})}render(){if(this.resizeColumnKey===void 0)return s.nothing;let i=this.resizeMinWidth,o=this.resizeMaxWidth,t=this.resize.storedWidth;return s.html`
+      <span
+        part="resizer"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label=${this.hostLabel??this.cell?.resizeLabel??"Resize column"}
+        aria-valuenow=${Math.round(t??i)}
+        aria-valuemin=${i}
+        aria-valuemax=${o}
+        tabindex="0"
+        data-skdx-table-resizer
+        data-dragging=${this.resize.dragging?"":s.nothing}
+        @pointerdown=${this.resize.handlePointerDown}
+        @pointermove=${this.resize.handlePointerMove}
+        @pointerup=${this.resize.handlePointerUp}
+        @pointercancel=${this.resize.handlePointerUp}
+        @keydown=${this.resize.handleKeyDown}
+      ></span>
+    `}};r.styles=s.css`
+    /**
+     * A box, because the skin positions the host: .skdx-table__column-resize-trigger
+     * is position: absolute; inset-block: 0; inset-inline-end: 0, and none of
+     * that applies to a display: contents element. Its containing block is the
+     * enclosing skdx-table-header-cell host, which the skin makes
+     * position: relative and which is now the cell box.
+     */
+    :host {
+      display: block;
+    }
+
+    /* The handle has no content of its own, so an inline box would be 0×0 and
+       there would be nothing to grab. display: contents is not the answer
+       here that it is for a wrapped <button>: this span has no children to
+       inherit the pointer events, so a collapsed handle could be tabbed to but
+       never dragged. */
+    span {
+      display: block;
+      block-size: 100%;
+    }
+  `,l([(0,d.property)({type:String,attribute:"column-key"})],r.prototype,"columnKey",2),l([(0,d.property)({type:Number,attribute:"min-width"})],r.prototype,"minWidth",2),l([(0,d.property)({type:Number,attribute:"max-width"})],r.prototype,"maxWidth",2),l([(0,d.property)({type:Number})],r.prototype,"step",2),r=l([(0,b.customElement)("skdx-table-column-resize-trigger","table","column-resize-trigger")],r);0&&(module.exports={SkdxTableColumnResizeTrigger});

package/dist/table/TableColumnResizeTrigger.d.cts

@@ -0,0 +1,83 @@
+import { LitElement, nothing } from 'lit';
+import { type ColumnResizeTarget } from './column-resize.cjs';
+import type { SkdxTable } from './Table.cjs';
+/**
+ * `<skdx-table-column-resize-trigger>` — the column edge you drag, or focus and
+ * step with the keyboard, to resize a column. A `role="separator"` with
+ * `aria-orientation="vertical"`, its own accessible name, and
+ * `aria-valuenow`/`valuemin`/`valuemax`, because a focusable separator is a
+ * widget and must expose all four.
+ *
+ * `<skdx-table-header-cell resizable>` renders an equivalent handle into its own
+ * shadow root for you. Slot one of these in instead to place it differently, to
+ * give one column a different `step`, or to style it as a real element rather
+ * than through `::part(resizer)` — the cell notices and skips its own, so a
+ * column never ends up with two handles.
+ *
+ * Keyboard, mirrored under `dir="rtl"` so the arrow that visually widens always
+ * widens: **Arrow Left/Right** step by `step`px, **Home** and **End** snap to
+ * `min-width` and `max-width`. Pointer: drag the handle; **Escape** mid-drag
+ * reverts the column to the width it had when the drag started. Every write is
+ * clamped to the bounds.
+ *
+ * Unset properties fall back to the enclosing `<skdx-table-header-cell>`'s, so a
+ * handle placed inside one inherits that column's key and bounds without
+ * repeating them.
+ *
+ * @csspart resizer - The `role="separator"` handle inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell column-key="name" min-width="120">
+ *   Name
+ *   <skdx-table-column-resize-trigger aria-label="Resize Name column" step="16"></skdx-table-column-resize-trigger>
+ * </skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableColumnResizeTrigger extends LitElement implements ColumnResizeTarget {
+    static styles: import("lit").CSSResult;
+    /**
+     * Column identifier to store the width under, when the handle is not inside a
+     * `<skdx-table-header-cell>` that already carries one.
+     * @default undefined — falls back to the enclosing header cell's `column-key`/`sort-key`.
+     */
+    columnKey?: string;
+    /** Smallest width in pixels the column can be resized to. @default the header cell's `min-width`, else 40 */
+    minWidth?: number;
+    /** Largest width in pixels the column can be resized to. @default the header cell's `max-width`, else 1000 */
+    maxWidth?: number;
+    /** How far one Arrow keypress moves the column edge, in pixels. @default the header cell's `resize-step`, else 8 */
+    step?: number;
+    private readonly resize;
+    private root;
+    private hostLabel;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Column-scoped defaults, resolved per read so a re-slotted handle picks up its new cell. */
+    private get cell();
+    get resizeColumnKey(): string | undefined;
+    get resizeMinWidth(): number;
+    get resizeMaxWidth(): number;
+    get resizeStepPx(): number;
+    get resizeTable(): SkdxTable | null;
+    /**
+     * The enclosing header cell's host, which is the cell box (its shadow `<th>`
+     * is `display: contents` and an element with no box measures 0).
+     *
+     * Measurement plumbing for the drag implementation, not consumer API — the
+     * shared contract declares `toggleAll`, `isAllSelected` and `isSomeSelected`
+     * and nothing else. It stays `public` to the compiler because the trigger
+     * reads it off a `<skdx-table-header-cell>`, a different class.
+     *
+     * @internal
+     */
+    resizeMeasureCell(): HTMLElement | null | undefined;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-column-resize-trigger': SkdxTableColumnResizeTrigger;
+    }
+}

package/dist/table/TableColumnResizeTrigger.d.ts

@@ -0,0 +1,83 @@
+import { LitElement, nothing } from 'lit';
+import { type ColumnResizeTarget } from './column-resize.js';
+import type { SkdxTable } from './Table.js';
+/**
+ * `<skdx-table-column-resize-trigger>` — the column edge you drag, or focus and
+ * step with the keyboard, to resize a column. A `role="separator"` with
+ * `aria-orientation="vertical"`, its own accessible name, and
+ * `aria-valuenow`/`valuemin`/`valuemax`, because a focusable separator is a
+ * widget and must expose all four.
+ *
+ * `<skdx-table-header-cell resizable>` renders an equivalent handle into its own
+ * shadow root for you. Slot one of these in instead to place it differently, to
+ * give one column a different `step`, or to style it as a real element rather
+ * than through `::part(resizer)` — the cell notices and skips its own, so a
+ * column never ends up with two handles.
+ *
+ * Keyboard, mirrored under `dir="rtl"` so the arrow that visually widens always
+ * widens: **Arrow Left/Right** step by `step`px, **Home** and **End** snap to
+ * `min-width` and `max-width`. Pointer: drag the handle; **Escape** mid-drag
+ * reverts the column to the width it had when the drag started. Every write is
+ * clamped to the bounds.
+ *
+ * Unset properties fall back to the enclosing `<skdx-table-header-cell>`'s, so a
+ * handle placed inside one inherits that column's key and bounds without
+ * repeating them.
+ *
+ * @csspart resizer - The `role="separator"` handle inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-table-header-cell column-key="name" min-width="120">
+ *   Name
+ *   <skdx-table-column-resize-trigger aria-label="Resize Name column" step="16"></skdx-table-column-resize-trigger>
+ * </skdx-table-header-cell>
+ * ```
+ */
+export declare class SkdxTableColumnResizeTrigger extends LitElement implements ColumnResizeTarget {
+    static styles: import("lit").CSSResult;
+    /**
+     * Column identifier to store the width under, when the handle is not inside a
+     * `<skdx-table-header-cell>` that already carries one.
+     * @default undefined — falls back to the enclosing header cell's `column-key`/`sort-key`.
+     */
+    columnKey?: string;
+    /** Smallest width in pixels the column can be resized to. @default the header cell's `min-width`, else 40 */
+    minWidth?: number;
+    /** Largest width in pixels the column can be resized to. @default the header cell's `max-width`, else 1000 */
+    maxWidth?: number;
+    /** How far one Arrow keypress moves the column edge, in pixels. @default the header cell's `resize-step`, else 8 */
+    step?: number;
+    private readonly resize;
+    private root;
+    private hostLabel;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Column-scoped defaults, resolved per read so a re-slotted handle picks up its new cell. */
+    private get cell();
+    get resizeColumnKey(): string | undefined;
+    get resizeMinWidth(): number;
+    get resizeMaxWidth(): number;
+    get resizeStepPx(): number;
+    get resizeTable(): SkdxTable | null;
+    /**
+     * The enclosing header cell's host, which is the cell box (its shadow `<th>`
+     * is `display: contents` and an element with no box measures 0).
+     *
+     * Measurement plumbing for the drag implementation, not consumer API — the
+     * shared contract declares `toggleAll`, `isAllSelected` and `isSomeSelected`
+     * and nothing else. It stays `public` to the compiler because the trigger
+     * reads it off a `<skdx-table-header-cell>`, a different class.
+     *
+     * @internal
+     */
+    resizeMeasureCell(): HTMLElement | null | undefined;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-column-resize-trigger': SkdxTableColumnResizeTrigger;
+    }
+}

package/dist/table/TableColumnResizeTrigger.js

@@ -0,0 +1,40 @@
+var p=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var r=(a,o,e,n)=>{for(var t=n>1?void 0:n?m(o,e):o,l=a.length-1,d;l>=0;l--)(d=a[l])&&(t=(n?d(o,e,t):d(t))||t);return n&&t&&p(o,e,t),t};import{css as u,html as b,LitElement as g,nothing as h}from"lit";import{property as s}from"lit/decorators.js";import{takeHostAriaLabel as v}from"../internal/aria-label.js";import{customElement as z}from"../internal/define.js";import{reflectHostState as y}from"../internal/part.js";import{findHeaderCell as f,findTableRoot as w,TABLE_INTERNAL_UPDATE as c}from"./column-context.js";import{ColumnResizeController as k}from"./column-resize.js";var x=40,L=1e3,E=8,i=class extends g{constructor(){super(...arguments);this.resize=new k(this);this.root=null;this.hostLabel=null;this.onRootUpdate=()=>this.requestUpdate()}connectedCallback(){super.connectedCallback(),this.root=w(this),this.root?.addEventListener(c,this.onRootUpdate),this.hostLabel??(this.hostLabel=v(this))}disconnectedCallback(){this.root?.removeEventListener(c,this.onRootUpdate),super.disconnectedCallback()}get cell(){return f(this)}get resizeColumnKey(){let e=this.cell;return this.columnKey??e?.columnKey??e?.sortKey}get resizeMinWidth(){return this.minWidth??this.cell?.minWidth??x}get resizeMaxWidth(){return this.maxWidth??this.cell?.maxWidth??L}get resizeStepPx(){return this.step??this.cell?.resizeStep??E}get resizeTable(){return this.root}resizeMeasureCell(){return this.cell}updated(){y(this,{"data-dragging":this.resize.dragging?"":null})}render(){if(this.resizeColumnKey===void 0)return h;let e=this.resizeMinWidth,n=this.resizeMaxWidth,t=this.resize.storedWidth;return b`
+      <span
+        part="resizer"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label=${this.hostLabel??this.cell?.resizeLabel??"Resize column"}
+        aria-valuenow=${Math.round(t??e)}
+        aria-valuemin=${e}
+        aria-valuemax=${n}
+        tabindex="0"
+        data-skdx-table-resizer
+        data-dragging=${this.resize.dragging?"":h}
+        @pointerdown=${this.resize.handlePointerDown}
+        @pointermove=${this.resize.handlePointerMove}
+        @pointerup=${this.resize.handlePointerUp}
+        @pointercancel=${this.resize.handlePointerUp}
+        @keydown=${this.resize.handleKeyDown}
+      ></span>
+    `}};i.styles=u`
+    /**
+     * A box, because the skin positions the host: .skdx-table__column-resize-trigger
+     * is position: absolute; inset-block: 0; inset-inline-end: 0, and none of
+     * that applies to a display: contents element. Its containing block is the
+     * enclosing skdx-table-header-cell host, which the skin makes
+     * position: relative and which is now the cell box.
+     */
+    :host {
+      display: block;
+    }
+
+    /* The handle has no content of its own, so an inline box would be 0×0 and
+       there would be nothing to grab. display: contents is not the answer
+       here that it is for a wrapped <button>: this span has no children to
+       inherit the pointer events, so a collapsed handle could be tabbed to but
+       never dragged. */
+    span {
+      display: block;
+      block-size: 100%;
+    }
+  `,r([s({type:String,attribute:"column-key"})],i.prototype,"columnKey",2),r([s({type:Number,attribute:"min-width"})],i.prototype,"minWidth",2),r([s({type:Number,attribute:"max-width"})],i.prototype,"maxWidth",2),r([s({type:Number})],i.prototype,"step",2),i=r([z("skdx-table-column-resize-trigger","table","column-resize-trigger")],i);export{i as SkdxTableColumnResizeTrigger};

package/dist/table/TableEmpty.cjs

@@ -0,0 +1,14 @@
+"use strict";var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var h=Object.prototype.hasOwnProperty;var u=(a,t)=>{for(var s in t)i(a,s,{get:t[s],enumerable:!0})},w=(a,t,s,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of b(t))!h.call(a,e)&&e!==s&&i(a,e,{get:()=>t[e],enumerable:!(r=c(t,e))||r.enumerable});return a};var f=a=>w(i({},"__esModule",{value:!0}),a),d=(a,t,s,r)=>{for(var e=r>1?void 0:r?c(t,s):t,p=a.length-1,n;p>=0;p--)(n=a[p])&&(e=(r?n(t,s,e):n(e))||e);return r&&e&&i(t,s,e),e};var g={};u(g,{SkdxTableEmpty:()=>o});module.exports=f(g);var l=require("lit"),m=require("lit/decorators.js"),y=require("../internal/define.cjs");var o=class extends l.LitElement{constructor(){super(...arguments);this.colSpan=1}render(){return l.html`<tr part="empty" data-state="empty" data-skdx-table-empty>
+      <td part="empty-cell" colspan=${this.colSpan}><slot></slot></td>
+    </tr>`}};o.styles=l.css`
+    /* A row, like <skdx-table-row> and like the <tr> React puts this class on —
+       see Table.ts. padding-block in the skin stays inert either way: padding
+       does not apply to a table-row box, in this build or in React's. */
+    :host {
+      display: table-row;
+    }
+
+    :host > tr {
+      display: contents;
+    }
+  `,d([(0,m.property)({type:Number,attribute:"col-span"})],o.prototype,"colSpan",2),o=d([(0,y.customElement)("skdx-table-empty","table","empty")],o);0&&(module.exports={SkdxTableEmpty});

package/dist/table/TableEmpty.d.cts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-empty>` — the row rendered in place of body rows when there is
+ * no data: like `<skdx-table-row>`, the host is the row box and the real
+ * `<tr data-state="empty">` (holding a single `<td colspan>`) lives in this
+ * element's shadow root. Put it inside `<skdx-table-body>` when your row list is
+ * empty — the table has no data model of its own, so only you know when that
+ * is.
+ *
+ * @csspart empty - The native `<tr>` element inside the shadow root.
+ * @csspart empty-cell - The single `<td colspan>` inside that row.
+ *
+ * @example
+ * ```html
+ * <skdx-table-body>
+ *   <skdx-table-empty col-span="3">No invoices yet.</skdx-table-empty>
+ * </skdx-table-body>
+ * ```
+ */
+export declare class SkdxTableEmpty extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** How many columns the single empty-state `<td>` spans. @default 1 */
+    colSpan: number;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-empty': SkdxTableEmpty;
+    }
+}

package/dist/table/TableEmpty.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-empty>` — the row rendered in place of body rows when there is
+ * no data: like `<skdx-table-row>`, the host is the row box and the real
+ * `<tr data-state="empty">` (holding a single `<td colspan>`) lives in this
+ * element's shadow root. Put it inside `<skdx-table-body>` when your row list is
+ * empty — the table has no data model of its own, so only you know when that
+ * is.
+ *
+ * @csspart empty - The native `<tr>` element inside the shadow root.
+ * @csspart empty-cell - The single `<td colspan>` inside that row.
+ *
+ * @example
+ * ```html
+ * <skdx-table-body>
+ *   <skdx-table-empty col-span="3">No invoices yet.</skdx-table-empty>
+ * </skdx-table-body>
+ * ```
+ */
+export declare class SkdxTableEmpty extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** How many columns the single empty-state `<td>` spans. @default 1 */
+    colSpan: number;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-empty': SkdxTableEmpty;
+    }
+}

package/dist/table/TableEmpty.js

@@ -0,0 +1,14 @@
+var n=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=(r,a,o,s)=>{for(var t=s>1?void 0:s?d(a,o):a,l=r.length-1,i;l>=0;l--)(i=r[l])&&(t=(s?i(a,o,t):i(t))||t);return s&&t&&n(a,o,t),t};import{css as c,html as m,LitElement as y}from"lit";import{property as b}from"lit/decorators.js";import{customElement as h}from"../internal/define.js";var e=class extends y{constructor(){super(...arguments);this.colSpan=1}render(){return m`<tr part="empty" data-state="empty" data-skdx-table-empty>
+      <td part="empty-cell" colspan=${this.colSpan}><slot></slot></td>
+    </tr>`}};e.styles=c`
+    /* A row, like <skdx-table-row> and like the <tr> React puts this class on —
+       see Table.ts. padding-block in the skin stays inert either way: padding
+       does not apply to a table-row box, in this build or in React's. */
+    :host {
+      display: table-row;
+    }
+
+    :host > tr {
+      display: contents;
+    }
+  `,p([b({type:Number,attribute:"col-span"})],e.prototype,"colSpan",2),e=p([h("skdx-table-empty","table","empty")],e);export{e as SkdxTableEmpty};

package/dist/table/TableExpandTrigger.cjs

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

package/dist/table/TableExpandTrigger.d.cts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-expand-trigger>` — the disclosure button that opens the
+ * `<skdx-table-expanded-row>` for `row-id`: a native `<button aria-expanded>`
+ * in shadow DOM (the same technique `<skdx-table-header-cell>` uses for its
+ * sort button) with `aria-controls` pointing at that detail row, plus
+ * `data-state` of `"expanded"`/`"collapsed"`. Place it inside the
+ * `<skdx-table-cell>` of the row it belongs to — the trigger *cell* stays a
+ * plain `<td>`, so the button (not the cell) is what screen readers announce
+ * as expandable.
+ *
+ * Clicking it stops propagation, so a selectable `<skdx-table-row>` doesn't
+ * also toggle its selection.
+ *
+ * @csspart expand-trigger - The native `<button>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-table-row row-id="1">
+ *   <skdx-table-cell>
+ *     <skdx-table-expand-trigger row-id="1" label="Details for Aster"></skdx-table-expand-trigger>
+ *   </skdx-table-cell>
+ *   <skdx-table-cell>Aster</skdx-table-cell>
+ * </skdx-table-row>
+ * <skdx-table-expanded-row row-id="1" col-span="2">…</skdx-table-expanded-row>
+ * ```
+ */
+export declare class SkdxTableExpandTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** The row whose detail row this trigger opens. Required. */
+    rowId: string;
+    /**
+     * Accessible name for the button. The button lives in this element's shadow
+     * root, so an `aria-label` on the host would not name it — same reason
+     * `<skdx-toast-close>` takes a `label`.
+     */
+    label: string;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-expand-trigger': SkdxTableExpandTrigger;
+    }
+}

package/dist/table/TableExpandTrigger.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+/**
+ * `<skdx-table-expand-trigger>` — the disclosure button that opens the
+ * `<skdx-table-expanded-row>` for `row-id`: a native `<button aria-expanded>`
+ * in shadow DOM (the same technique `<skdx-table-header-cell>` uses for its
+ * sort button) with `aria-controls` pointing at that detail row, plus
+ * `data-state` of `"expanded"`/`"collapsed"`. Place it inside the
+ * `<skdx-table-cell>` of the row it belongs to — the trigger *cell* stays a
+ * plain `<td>`, so the button (not the cell) is what screen readers announce
+ * as expandable.
+ *
+ * Clicking it stops propagation, so a selectable `<skdx-table-row>` doesn't
+ * also toggle its selection.
+ *
+ * @csspart expand-trigger - The native `<button>` element inside the shadow root.
+ *
+ * @example
+ * ```html
+ * <skdx-table-row row-id="1">
+ *   <skdx-table-cell>
+ *     <skdx-table-expand-trigger row-id="1" label="Details for Aster"></skdx-table-expand-trigger>
+ *   </skdx-table-cell>
+ *   <skdx-table-cell>Aster</skdx-table-cell>
+ * </skdx-table-row>
+ * <skdx-table-expanded-row row-id="1" col-span="2">…</skdx-table-expanded-row>
+ * ```
+ */
+export declare class SkdxTableExpandTrigger extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /** The row whose detail row this trigger opens. Required. */
+    rowId: string;
+    /**
+     * Accessible name for the button. The button lives in this element's shadow
+     * root, so an `aria-label` on the host would not name it — same reason
+     * `<skdx-toast-close>` takes a `label`.
+     */
+    label: string;
+    private root;
+    private readonly onRootUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-table-expand-trigger': SkdxTableExpandTrigger;
+    }
+}