@skdx/vue 0.27.0 → 0.28.0

package/dist/table/TableAnatomy.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{RenderProp as e}from"../utils/renderProp.js";import{TABLE_CONTEXT as l}from"./context.js";import a from"./TableBody.vue.js";import r from"./TableCaption.vue.js";import t from"./TableCell.vue.js";import o from"./TableEmpty.vue.js";import n from"./TableExpandedRow.vue.js";import d from"./TableExpandTrigger.vue.js";import u from"./TableHeader.vue.js";import i from"./TableHeaderCell.vue.js";import s from"./TableRow.vue.js";import p from"./TableRowSelectCheckbox.vue.js";import c from"./TableSelectAllCheckbox.vue.js";import{Fragment as f,computed as m,createBlock as y,createCommentVNode as b,createElementBlock as k,createTextVNode as v,createVNode as w,defineComponent as T,inject as x,openBlock as _,renderList as j,toDisplayString as g,unref as h,withCtx as C}from"vue";var E=/* @__PURE__ */T({__name:"TableAnatomy",props:{columns:{},data:{},rowId:{type:Function,default:void 0},sortable:{type:Boolean,default:!1},selectable:{type:Boolean,default:!1},expandable:{type:Boolean,default:!1},resizable:{type:Boolean,default:!1},empty:{default:void 0},caption:{default:void 0},renderCell:{type:Function,default:void 0},renderExpanded:{type:Function,default:void 0}},setup(T){const E=T,B=x(l);if(!B)throw new Error("TableAnatomy must be used within SkdxTable.");function S(e,l){if(E.rowId)return E.rowId(e,l);const a=e.id;return String(void 0===a?l:a)}function z(e,l){const a=e[l.key];return null==a?"":String(a)}function A(e,l){return"number"==typeof e&&"number"==typeof l?e-l:String(e??"").localeCompare(String(l??""))}const F=m(()=>{const e=B.sortList.value;return 0===e.length?E.data:[...E.data].sort((l,a)=>{for(const{columnKey:r,direction:t}of e){const e=A(l[r],a[r]);if(0!==e)return"asc"===t?e:-e}return 0})}),N=m(()=>E.columns.length+(E.selectable?1:0)+(E.expandable?1:0)),R=m(()=>F.value.map((e,l)=>S(e,l)));return(l,m)=>(_(),k(f,null,[T.caption?(_(),y(r,{key:0},{default:C(()=>[v(g(T.caption),1)]),_:1})):b("",!0),w(u,null,{default:C(()=>[w(s,null,{default:C(()=>[T.selectable?(_(),y(i,{key:0},{default:C(()=>[w(c,{"row-ids":R.value,scope:"page"},null,8,["row-ids"])]),_:1})):b("",!0),T.expandable?(_(),y(i,{key:1,"aria-hidden":"true"})):b("",!0),(_(!0),k(f,null,j(T.columns,l=>(_(),y(i,{key:l.key,"column-key":l.key,sortable:T.sortable&&!1!==l.sortable,resizable:T.resizable&&!1!==l.resizable},{default:C(()=>[void 0!==l.header&&"string"!=typeof l.header?(_(),y(h(e),{key:0,render:()=>l.header},null,8,["render"])):(_(),k(f,{key:1},[v(g(l.header??l.key),1)],64))]),_:2},1032,["column-key","sortable","resizable"]))),128))]),_:1})]),_:1}),w(a,null,{default:C(()=>[0===F.value.length&&T.empty?(_(),y(o,{key:0,"col-span":N.value},{default:C(()=>[v(g(T.empty),1)]),_:1},8,["col-span"])):b("",!0),(_(!0),k(f,null,j(F.value,(l,a)=>(_(),k(f,{key:S(l,a)},[w(s,{"row-id":T.selectable?S(l,a):void 0},{default:C(()=>[T.selectable?(_(),y(t,{key:0},{default:C(()=>[w(p,{"row-id":S(l,a),"aria-label":`Select row ${a+1}`},null,8,["row-id","aria-label"])]),_:2},1024)):b("",!0),T.expandable?(_(),y(t,{key:1},{default:C(()=>[w(d,{"row-id":S(l,a)},{default:C(()=>[...m[0]||(m[0]=[v("▸",-1)])]),_:1},8,["row-id"])]),_:2},1024)):b("",!0),(_(!0),k(f,null,j(T.columns,a=>(_(),y(t,{key:a.key},{default:C(()=>["function"==typeof T.renderCell?(_(),y(h(e),{key:0,render:()=>E.renderCell(l,a)},null,8,["render"])):(_(),k(f,{key:1},[v(g(z(l,a)),1)],64))]),_:2},1024))),128))]),_:2},1032,["row-id"]),T.expandable?(_(),y(n,{key:0,"row-id":S(l,a),"col-span":N.value},{default:C(()=>["function"==typeof T.renderExpanded?(_(),y(h(e),{key:0,render:()=>E.renderExpanded(l)},null,8,["render"])):b("",!0)]),_:2},1032,["row-id","col-span"])):b("",!0)],64))),128))]),_:1})],64))}});export{E as default};

package/dist/table/TableColumnHeaderSortTrigger.vue.d.cts

@@ -1,34 +1,22 @@
 /**
- * The button inside a sortable `<th>` 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.
- *
- * An `SkdxTableHeaderCell` with a `sortKey` renders one of these around its
- * slot content 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 an `SkdxTableColumnHeaderSortTrigger` among its slot 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 `multiSort`, `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.
+ * Sort button cycling ascending → descending → unsorted. Render it yourself
+ * when the header needs more than a label in the button (sort indicator, icon, count).
+ * `SkdxTableHeaderCell` renders one automatically; both detect it and skip duplicates.
+ * Carries `data-sort-direction` and `data-sort-index` (under `multiSort`) for styling.
  */
 type __VLS_Props = {
     /**
-     * Column this trigger sorts. Inherited from the enclosing
-     * `SkdxTableHeaderCell`'s `sortKey`, so you only pass it when rendering the
-     * trigger outside one. The trigger renders nothing without either.
+     * Column this trigger sorts. Inherited from `SkdxTableHeaderCell`'s `columnKey`.
+     * Pass it when rendering outside a cell or in a non-sortable cell.
      */
-    sortKey?: string;
+    columnKey?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    sortKey: string;
+    columnKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/table/TableColumnHeaderSortTrigger.vue.d.ts

@@ -1,34 +1,22 @@
 /**
- * The button inside a sortable `<th>` 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.
- *
- * An `SkdxTableHeaderCell` with a `sortKey` renders one of these around its
- * slot content 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 an `SkdxTableColumnHeaderSortTrigger` among its slot 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 `multiSort`, `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.
+ * Sort button cycling ascending → descending → unsorted. Render it yourself
+ * when the header needs more than a label in the button (sort indicator, icon, count).
+ * `SkdxTableHeaderCell` renders one automatically; both detect it and skip duplicates.
+ * Carries `data-sort-direction` and `data-sort-index` (under `multiSort`) for styling.
  */
 type __VLS_Props = {
     /**
-     * Column this trigger sorts. Inherited from the enclosing
-     * `SkdxTableHeaderCell`'s `sortKey`, so you only pass it when rendering the
-     * trigger outside one. The trigger renders nothing without either.
+     * Column this trigger sorts. Inherited from `SkdxTableHeaderCell`'s `columnKey`.
+     * Pass it when rendering outside a cell or in a non-sortable cell.
      */
-    sortKey?: string;
+    columnKey?: string;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    sortKey: string;
+    columnKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/table/TableColumnHeaderSortTrigger.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const d=require("./context.cjs");let e=require("vue");var g=["data-sort-direction","data-sort-index"],p=(0,e.defineComponent)({inheritAttrs:!1,__name:"TableColumnHeaderSortTrigger",props:{sortKey:{default:void 0}},setup(u){const i=u,s=(0,e.inject)(d.TABLE_CONTEXT);if(!s)throw new Error("SkdxTableColumnHeaderSortTrigger must be used within SkdxTable");const r=s,l=(0,e.inject)(d.TABLE_HEADER_CELL_CONTEXT,void 0),o=(0,e.computed)(()=>i.sortKey??l?.sortKey),n=(0,e.computed)(()=>o.value===void 0?-1:r.sortList.value.findIndex(t=>t.columnKey===o.value)),c=(0,e.computed)(()=>r.sortList.value[n.value]?.direction),v=(0,e.computed)(()=>r.multiSort&&n.value!==-1?n.value:void 0);function m(t){const a=o.value,_=t.currentTarget?.textContent?.trim();r.toggleSort(a,_||a)}return(t,a)=>o.value!==void 0?((0,e.openBlock)(),(0,e.createElementBlock)("button",(0,e.mergeProps)({key:0,class:"skdx-table__column-header-sort-trigger","data-part":"column-header-sort-trigger",type:"button","data-skdx-table-sort-trigger":"","data-sort-direction":c.value,"data-sort-index":v.value,onClick:m},t.$attrs),[(0,e.renderSlot)(t.$slots,"default")],16,g)):(0,e.createCommentVNode)("",!0)}});exports.default=p;
+const d=require("./context.cjs");let e=require("vue");var g=["data-sort-direction","data-sort-index"],p=(0,e.defineComponent)({inheritAttrs:!1,__name:"TableColumnHeaderSortTrigger",props:{columnKey:{default:void 0}},setup(i){const c=i,l=(0,e.inject)(d.TABLE_CONTEXT);if(!l)throw new Error("SkdxTableColumnHeaderSortTrigger must be used within SkdxTable");const o=l,u=(0,e.inject)(d.TABLE_HEADER_CELL_CONTEXT,void 0),r=(0,e.computed)(()=>c.columnKey??(u?.sortable?u.columnKey:void 0)),n=(0,e.computed)(()=>r.value===void 0?-1:o.sortList.value.findIndex(t=>t.columnKey===r.value)),s=(0,e.computed)(()=>o.sortList.value[n.value]?.direction),m=(0,e.computed)(()=>o.multiSort&&n.value!==-1?n.value:void 0);function v(t){const a=r.value,_=t.currentTarget?.textContent?.trim();o.toggleSort(a,_||a)}return(t,a)=>r.value!==void 0?((0,e.openBlock)(),(0,e.createElementBlock)("button",(0,e.mergeProps)({key:0,class:"skdx-table__column-header-sort-trigger","data-part":"column-header-sort-trigger",type:"button","data-skdx-table-sort-trigger":"","data-sort-direction":s.value,"data-sort-index":m.value,onClick:v},t.$attrs),[(0,e.renderSlot)(t.$slots,"default")],16,g)):(0,e.createCommentVNode)("",!0)}});exports.default=p;

package/dist/table/TableColumnHeaderSortTrigger.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{TABLE_CONTEXT as t,TABLE_HEADER_CELL_CONTEXT as e}from"./context.js";import{computed as r,createCommentVNode as o,createElementBlock as a,defineComponent as s,inject as n,mergeProps as d,openBlock as i,renderSlot as l}from"vue";var u=["data-sort-direction","data-sort-index"],c=/* @__PURE__ */s({inheritAttrs:!1,__name:"TableColumnHeaderSortTrigger",props:{sortKey:{default:void 0}},setup(s){const c=s,m=n(t);if(!m)throw new Error("SkdxTableColumnHeaderSortTrigger must be used within SkdxTable");const v=m,g=n(e,void 0),p=r(()=>c.sortKey??g?.sortKey),T=r(()=>void 0===p.value?-1:v.sortList.value.findIndex(t=>t.columnKey===p.value)),x=r(()=>v.sortList.value[T.value]?.direction),f=r(()=>v.multiSort&&-1!==T.value?T.value:void 0);function C(t){const e=p.value,r=t.currentTarget?.textContent?.trim();v.toggleSort(e,r||e)}return(t,e)=>void 0!==p.value?(i(),a("button",d({key:0,class:"skdx-table__column-header-sort-trigger","data-part":"column-header-sort-trigger",type:"button","data-skdx-table-sort-trigger":"","data-sort-direction":x.value,"data-sort-index":f.value,onClick:C},t.$attrs),[l(t.$slots,"default")],16,u)):o("",!0)}});export{c as default};
+import{TABLE_CONTEXT as e,TABLE_HEADER_CELL_CONTEXT as t}from"./context.js";import{computed as o,createCommentVNode as r,createElementBlock as a,defineComponent as n,inject as s,mergeProps as l,openBlock as d,renderSlot as i}from"vue";var u=["data-sort-direction","data-sort-index"],c=/* @__PURE__ */n({inheritAttrs:!1,__name:"TableColumnHeaderSortTrigger",props:{columnKey:{default:void 0}},setup(n){const c=n,m=s(e);if(!m)throw new Error("SkdxTableColumnHeaderSortTrigger must be used within SkdxTable");const v=m,g=s(t,void 0),p=o(()=>c.columnKey??(g?.sortable?g.columnKey:void 0)),T=o(()=>void 0===p.value?-1:v.sortList.value.findIndex(e=>e.columnKey===p.value)),x=o(()=>v.sortList.value[T.value]?.direction),b=o(()=>v.multiSort&&-1!==T.value?T.value:void 0);function f(e){const t=p.value,o=e.currentTarget?.textContent?.trim();v.toggleSort(t,o||t)}return(e,t)=>void 0!==p.value?(d(),a("button",l({key:0,class:"skdx-table__column-header-sort-trigger","data-part":"column-header-sort-trigger",type:"button","data-skdx-table-sort-trigger":"","data-sort-direction":x.value,"data-sort-index":b.value,onClick:f},e.$attrs),[i(e.$slots,"default")],16,u)):r("",!0)}});export{c as default};

package/dist/table/TableColumnResizeTrigger.vue.d.cts

@@ -1,25 +1,14 @@
 /**
- * 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.
- *
- * `SkdxTableHeaderCell`'s `resizable` renders one of these for you; render it
- * yourself to place it differently or to give one column a different `step`.
- *
- * 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
- * `minWidth` and `maxWidth`. 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, and the resulting width is published on the `<th>` as
- * both an inline `width` and the `--skdx-table-column-width` custom property.
+ * Draggable/keyboard-operable column resize handle. `role="separator"` with
+ * `aria-orientation="vertical"`, `aria-valuenow/min/max`. `SkdxTableHeaderCell`
+ * renders one automatically; render it yourself to place differently or override `step`.
+ * Keyboard (mirrored under `dir="rtl"`): Arrow Left/Right step by `step`px,
+ * Home/End snap to bounds. Pointer: drag; Escape reverts.
  */
 type __VLS_Props = {
     /**
-     * Column whose width this handle writes. Inherited from the enclosing
-     * `SkdxTableHeaderCell`'s `columnKey` (which itself falls back to
-     * `sortKey`); a handle with neither has nowhere to store a width and
-     * renders nothing.
+     * Column whose width this handle writes. Inherited from
+     * `SkdxTableHeaderCell`'s `columnKey` or renders nothing.
      */
     columnKey?: string;
     /**
@@ -40,19 +29,17 @@ type __VLS_Props = {
      */
     step?: number;
     /**
-     * Accessible name for the handle — a focusable `role="separator"` is a
-     * widget and needs its own name. Prefer a column-specific one
-     * (`"Resize Name column"`): the handle sits inside the `<th>`, so its name
-     * joins the header's name-from-content.
+     * Accessible name for the handle. A focusable separator needs its own name.
+     * Prefer a column-specific one like `"Resize Name column"`.
      * @default the enclosing header cell's `resizeLabel`, otherwise `'Resize column'`.
      */
     label?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     label: string;
+    step: number;
     maxWidth: number;
     minWidth: number;
-    step: number;
     columnKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/table/TableColumnResizeTrigger.vue.d.ts

@@ -1,25 +1,14 @@
 /**
- * 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.
- *
- * `SkdxTableHeaderCell`'s `resizable` renders one of these for you; render it
- * yourself to place it differently or to give one column a different `step`.
- *
- * 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
- * `minWidth` and `maxWidth`. 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, and the resulting width is published on the `<th>` as
- * both an inline `width` and the `--skdx-table-column-width` custom property.
+ * Draggable/keyboard-operable column resize handle. `role="separator"` with
+ * `aria-orientation="vertical"`, `aria-valuenow/min/max`. `SkdxTableHeaderCell`
+ * renders one automatically; render it yourself to place differently or override `step`.
+ * Keyboard (mirrored under `dir="rtl"`): Arrow Left/Right step by `step`px,
+ * Home/End snap to bounds. Pointer: drag; Escape reverts.
  */
 type __VLS_Props = {
     /**
-     * Column whose width this handle writes. Inherited from the enclosing
-     * `SkdxTableHeaderCell`'s `columnKey` (which itself falls back to
-     * `sortKey`); a handle with neither has nowhere to store a width and
-     * renders nothing.
+     * Column whose width this handle writes. Inherited from
+     * `SkdxTableHeaderCell`'s `columnKey` or renders nothing.
      */
     columnKey?: string;
     /**
@@ -40,19 +29,17 @@ type __VLS_Props = {
      */
     step?: number;
     /**
-     * Accessible name for the handle — a focusable `role="separator"` is a
-     * widget and needs its own name. Prefer a column-specific one
-     * (`"Resize Name column"`): the handle sits inside the `<th>`, so its name
-     * joins the header's name-from-content.
+     * Accessible name for the handle. A focusable separator needs its own name.
+     * Prefer a column-specific one like `"Resize Name column"`.
      * @default the enclosing header cell's `resizeLabel`, otherwise `'Resize column'`.
      */
     label?: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     label: string;
+    step: number;
     maxWidth: number;
     minWidth: number;
-    step: number;
     columnKey: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/table/TableColumnResizeTrigger.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const f=require("../utils/direction.cjs"),C=require("../utils/clamp.cjs"),y=require("./context.cjs");let t=require("vue");var L=["aria-label","aria-valuenow","aria-valuemin","aria-valuemax","data-dragging"],P=40,z=1e3,A=8,R=(0,t.defineComponent)({inheritAttrs:!1,__name:"TableColumnResizeTrigger",props:{columnKey:{default:void 0},minWidth:{default:void 0},maxWidth:{default:void 0},step:{default:void 0},label:{default:void 0}},setup(E){const a=E,g=(0,t.inject)(y.TABLE_CONTEXT);if(!g)throw new Error("SkdxTableColumnResizeTrigger must be used within SkdxTable");const h=g,o=(0,t.inject)(y.TABLE_HEADER_CELL_CONTEXT,void 0),_=f.useDirection(),d=(0,t.ref)(null),i=(0,t.ref)(null),w=(0,t.computed)(()=>i.value!==null),u=(0,t.computed)(()=>a.columnKey??o?.columnKey),l=(0,t.computed)(()=>a.minWidth??o?.minWidth??P),c=(0,t.computed)(()=>a.maxWidth??o?.maxWidth??z),T=(0,t.computed)(()=>a.step??o?.resizeStep??A),W=(0,t.computed)(()=>a.label??o?.resizeLabel??"Resize column"),s=(0,t.computed)(()=>u.value===void 0?void 0:h.columnWidths.value[u.value]);function n(e){u.value!==void 0&&h.setColumnWidth(u.value,C.clamp(Math.round(e),l.value,c.value))}function v(){return s.value!==void 0?s.value:(d.value?.closest("th")?.getBoundingClientRect().width??0)||l.value}function m(e){if(e.key!=="Escape")return;const r=p();r&&n(r.startWidth)}function p(){const e=i.value;if(!e)return null;i.value=null,document.removeEventListener("keydown",m);const r=d.value;return r?.hasPointerCapture?.(e.pointerId)&&r.releasePointerCapture(e.pointerId),e}(0,t.onBeforeUnmount)(()=>document.removeEventListener("keydown",m));function k(e){e.button===0&&(e.preventDefault(),e.stopPropagation(),i.value={startX:e.clientX,startWidth:v(),pointerId:e.pointerId},document.addEventListener("keydown",m),e.currentTarget.setPointerCapture?.(e.pointerId))}function b(e){const r=i.value;if(!r)return;const x=f.resolveDirection(e.currentTarget,_())==="rtl"?r.startX-e.clientX:e.clientX-r.startX;n(r.startWidth+x)}function D(e){const r=f.directionalKey(e.key,e.currentTarget,_());if(r==="ArrowRight")n(v()+T.value);else if(r==="ArrowLeft")n(v()-T.value);else if(e.key==="Home")n(l.value);else if(e.key==="End")n(c.value);else return;e.preventDefault(),e.stopPropagation()}return(e,r)=>u.value!==void 0?((0,t.openBlock)(),(0,t.createElementBlock)("span",(0,t.mergeProps)({key:0,class:"skdx-table__column-resize-trigger","data-part":"column-resize-trigger",ref_key:"handleRef",ref:d,role:"separator","aria-orientation":"vertical","aria-label":W.value,"aria-valuenow":Math.round(s.value??l.value),"aria-valuemin":l.value,"aria-valuemax":c.value,tabindex:"0","data-skdx-table-resizer":"","data-dragging":w.value?"":void 0,onPointerdown:k,onPointermove:b,onPointerup:p,onPointercancel:p,onKeydown:D},e.$attrs),null,16,L)):(0,t.createCommentVNode)("",!0)}});exports.default=R;
+const g=require("../utils/direction.cjs"),R=require("../utils/clamp.cjs"),W=require("./context.cjs");let n=require("vue");var z=["aria-label","aria-valuenow","aria-valuemin","aria-valuemax","data-dragging"],I=40,X=1e3,q=8,S=(0,n.defineComponent)({inheritAttrs:!1,__name:"TableColumnResizeTrigger",props:{columnKey:{default:void 0},minWidth:{default:void 0},maxWidth:{default:void 0},step:{default:void 0},label:{default:void 0}},setup(k){const b=new Set(["ArrowLeft","ArrowRight","Home","End"]),o=k,_=(0,n.inject)(W.TABLE_CONTEXT);if(!_)throw new Error("SkdxTableColumnResizeTrigger must be used within SkdxTable");const c=_,i=(0,n.inject)(W.TABLE_HEADER_CELL_CONTEXT,void 0),y=g.useDirection(),s=(0,n.ref)(null),a=(0,n.ref)(null),D=(0,n.computed)(()=>a.value!==null),u=(0,n.computed)(()=>o.columnKey??i?.columnKey),l=(0,n.computed)(()=>o.minWidth??i?.minWidth??I),m=(0,n.computed)(()=>o.maxWidth??i?.maxWidth??X),E=(0,n.computed)(()=>o.step??i?.resizeStep??q),C=(0,n.computed)(()=>o.label??i?.resizeLabel??"Resize column"),d=(0,n.computed)(()=>u.value===void 0?void 0:c.columnWidths.value[u.value]);let v=!1;function r(e){if(u.value===void 0)return;const t=R.clamp(Math.round(e),l.value,m.value);t!==d.value&&(v=!0),c.setColumnWidth(u.value,t)}function f(){v&&(v=!1,c.commitColumnWidths())}function p(){return d.value!==void 0?d.value:(s.value?.closest("th")?.getBoundingClientRect().width??0)||l.value}function h(e){if(e.key!=="Escape")return;const t=T();t&&(r(t.startWidth),f())}function T(){const e=a.value;if(!e)return null;a.value=null,document.removeEventListener("keydown",h);const t=s.value;return t?.hasPointerCapture?.(e.pointerId)&&t.releasePointerCapture(e.pointerId),e}(0,n.onBeforeUnmount)(()=>document.removeEventListener("keydown",h));function L(e){e.button===0&&(e.preventDefault(),e.stopPropagation(),a.value={startX:e.clientX,startWidth:p(),pointerId:e.pointerId},document.addEventListener("keydown",h),e.currentTarget.setPointerCapture?.(e.pointerId))}function P(e){const t=a.value;if(!t)return;const K=g.resolveDirection(e.currentTarget,y())==="rtl"?t.startX-e.clientX:e.clientX-t.startX;r(t.startWidth+K)}function x(e){const t=g.directionalKey(e.key,e.currentTarget,y());if(t==="ArrowRight")r(p()+E.value);else if(t==="ArrowLeft")r(p()-E.value);else if(e.key==="Home")r(l.value);else if(e.key==="End")r(m.value);else return;e.preventDefault(),e.stopPropagation()}function A(e){b.has(e.key)&&f()}function w(){T()&&f()}return(e,t)=>u.value!==void 0?((0,n.openBlock)(),(0,n.createElementBlock)("span",(0,n.mergeProps)({key:0,class:"skdx-table__column-resize-trigger","data-part":"column-resize-trigger",ref_key:"handleRef",ref:s,role:"separator","aria-orientation":"vertical","aria-label":C.value,"aria-valuenow":Math.round(d.value??l.value),"aria-valuemin":l.value,"aria-valuemax":m.value,tabindex:"0","data-skdx-table-resizer":"","data-dragging":D.value?"":void 0,onPointerdown:L,onPointermove:P,onPointerup:w,onPointercancel:w,onKeydown:x,onKeyup:A},e.$attrs),null,16,z)):(0,n.createCommentVNode)("",!0)}});exports.default=S;

package/dist/table/TableColumnResizeTrigger.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-import{directionalKey as e,resolveDirection as t,useDirection as a}from"../utils/direction.js";import{clamp as n}from"../utils/clamp.js";import{TABLE_CONTEXT as r,TABLE_HEADER_CELL_CONTEXT as o}from"./context.js";import{computed as i,createCommentVNode as l,createElementBlock as u,defineComponent as s,inject as d,mergeProps as v,onBeforeUnmount as c,openBlock as m,ref as p}from"vue";var f=["aria-label","aria-valuenow","aria-valuemin","aria-valuemax","data-dragging"],g=/* @__PURE__ */s({inheritAttrs:!1,__name:"TableColumnResizeTrigger",props:{columnKey:{default:void 0},minWidth:{default:void 0},maxWidth:{default:void 0},step:{default:void 0},label:{default:void 0}},setup(s){const g=s,h=d(r);if(!h)throw new Error("SkdxTableColumnResizeTrigger must be used within SkdxTable");const k=h,y=d(o,void 0),E=a(),T=p(null),b=p(null),w=i(()=>null!==b.value),x=i(()=>g.columnKey??y?.columnKey),C=i(()=>g.minWidth??y?.minWidth??40),W=i(()=>g.maxWidth??y?.maxWidth??1e3),P=i(()=>g.step??y?.resizeStep??8),L=i(()=>g.label??y?.resizeLabel??"Resize column"),_=i(()=>void 0===x.value?void 0:k.columnWidths.value[x.value]);function z(e){void 0!==x.value&&k.setColumnWidth(x.value,n(Math.round(e),C.value,W.value))}function X(){return void 0!==_.value?_.value:(T.value?.closest("th")?.getBoundingClientRect().width??0)||C.value}function R(e){if("Escape"!==e.key)return;const t=A();t&&z(t.startWidth)}function A(){const e=b.value;if(!e)return null;b.value=null,document.removeEventListener("keydown",R);const t=T.value;return t?.hasPointerCapture?.(e.pointerId)&&t.releasePointerCapture(e.pointerId),e}function B(e){0===e.button&&(e.preventDefault(),e.stopPropagation(),b.value={startX:e.clientX,startWidth:X(),pointerId:e.pointerId},document.addEventListener("keydown",R),e.currentTarget.setPointerCapture?.(e.pointerId))}function D(e){const a=b.value;if(!a)return;const n="rtl"===t(e.currentTarget,E())?a.startX-e.clientX:e.clientX-a.startX;z(a.startWidth+n)}function I(t){const a=e(t.key,t.currentTarget,E());if("ArrowRight"===a)z(X()+P.value);else if("ArrowLeft"===a)z(X()-P.value);else if("Home"===t.key)z(C.value);else{if("End"!==t.key)return;z(W.value)}t.preventDefault(),t.stopPropagation()}return c(()=>document.removeEventListener("keydown",R)),(e,t)=>void 0!==x.value?(m(),u("span",v({key:0,class:"skdx-table__column-resize-trigger","data-part":"column-resize-trigger",ref_key:"handleRef",ref:T,role:"separator","aria-orientation":"vertical","aria-label":L.value,"aria-valuenow":Math.round(_.value??C.value),"aria-valuemin":C.value,"aria-valuemax":W.value,tabindex:"0","data-skdx-table-resizer":"","data-dragging":w.value?"":void 0,onPointerdown:B,onPointermove:D,onPointerup:A,onPointercancel:A,onKeydown:I},e.$attrs),null,16,f)):l("",!0)}});export{g as default};
+import{directionalKey as e,resolveDirection as t,useDirection as a}from"../utils/direction.js";import{clamp as n}from"../utils/clamp.js";import{TABLE_CONTEXT as r,TABLE_HEADER_CELL_CONTEXT as o}from"./context.js";import{computed as i,createCommentVNode as l,createElementBlock as u,defineComponent as s,inject as d,mergeProps as v,onBeforeUnmount as c,openBlock as m,ref as f}from"vue";var p=["aria-label","aria-valuenow","aria-valuemin","aria-valuemax","data-dragging"],g=/* @__PURE__ */s({inheritAttrs:!1,__name:"TableColumnResizeTrigger",props:{columnKey:{default:void 0},minWidth:{default:void 0},maxWidth:{default:void 0},step:{default:void 0},label:{default:void 0}},setup(s){const g=/* @__PURE__ */new Set(["ArrowLeft","ArrowRight","Home","End"]),h=s,k=d(r);if(!k)throw new Error("SkdxTableColumnResizeTrigger must be used within SkdxTable");const w=k,y=d(o,void 0),E=a(),T=f(null),b=f(null),C=i(()=>null!==b.value),x=i(()=>h.columnKey??y?.columnKey),W=i(()=>h.minWidth??y?.minWidth??40),L=i(()=>h.maxWidth??y?.maxWidth??1e3),P=i(()=>h.step??y?.resizeStep??8),_=i(()=>h.label??y?.resizeLabel??"Resize column"),z=i(()=>void 0===x.value?void 0:w.columnWidths.value[x.value]);let A=!1;function R(e){if(void 0===x.value)return;const t=n(Math.round(e),W.value,L.value);t!==z.value&&(A=!0),w.setColumnWidth(x.value,t)}function X(){A&&(A=!1,w.commitColumnWidths())}function B(){return void 0!==z.value?z.value:(T.value?.closest("th")?.getBoundingClientRect().width??0)||W.value}function K(e){if("Escape"!==e.key)return;const t=D();t&&(R(t.startWidth),X())}function D(){const e=b.value;if(!e)return null;b.value=null,document.removeEventListener("keydown",K);const t=T.value;return t?.hasPointerCapture?.(e.pointerId)&&t.releasePointerCapture(e.pointerId),e}function I(e){0===e.button&&(e.preventDefault(),e.stopPropagation(),b.value={startX:e.clientX,startWidth:B(),pointerId:e.pointerId},document.addEventListener("keydown",K),e.currentTarget.setPointerCapture?.(e.pointerId))}function j(e){const a=b.value;if(!a)return;const n="rtl"===t(e.currentTarget,E())?a.startX-e.clientX:e.clientX-a.startX;R(a.startWidth+n)}function S(t){const a=e(t.key,t.currentTarget,E());if("ArrowRight"===a)R(B()+P.value);else if("ArrowLeft"===a)R(B()-P.value);else if("Home"===t.key)R(W.value);else{if("End"!==t.key)return;R(L.value)}t.preventDefault(),t.stopPropagation()}function H(e){g.has(e.key)&&X()}function N(){D()&&X()}return c(()=>document.removeEventListener("keydown",K)),(e,t)=>void 0!==x.value?(m(),u("span",v({key:0,class:"skdx-table__column-resize-trigger","data-part":"column-resize-trigger",ref_key:"handleRef",ref:T,role:"separator","aria-orientation":"vertical","aria-label":_.value,"aria-valuenow":Math.round(z.value??W.value),"aria-valuemin":W.value,"aria-valuemax":L.value,tabindex:"0","data-skdx-table-resizer":"","data-dragging":C.value?"":void 0,onPointerdown:I,onPointermove:j,onPointerup:N,onPointercancel:N,onKeydown:S,onKeyup:H},e.$attrs),null,16,p)):l("",!0)}});export{g as default};

package/dist/table/TableEmpty.vue.d.cts

@@ -1,11 +1,10 @@
 /**
- * The row rendered in place of body rows when there is no data: a `<tr>` with
- * `data-state="empty"` whose single `<td colspan>` holds the empty-state
- * message. Render it inside `SkdxTableBody` when your row array is empty — the
- * table has no data model of its own, so only you know when that is.
+ * Full-width row shown when there is no data: a `<tr>` with `data-state="empty"`
+ * and a single `<td colspan>` for the empty-state message. Render it in `SkdxTableBody`
+ * when your row array is empty.
  */
 type __VLS_Props = {
-    /** How many columns the empty cell spans — set it to the table's column count. */
+    /** How many columns the empty cell spans. */
     colSpan?: number;
 };
 declare var __VLS_1: {};

package/dist/table/TableEmpty.vue.d.ts

@@ -1,11 +1,10 @@
 /**
- * The row rendered in place of body rows when there is no data: a `<tr>` with
- * `data-state="empty"` whose single `<td colspan>` holds the empty-state
- * message. Render it inside `SkdxTableBody` when your row array is empty — the
- * table has no data model of its own, so only you know when that is.
+ * Full-width row shown when there is no data: a `<tr>` with `data-state="empty"`
+ * and a single `<td colspan>` for the empty-state message. Render it in `SkdxTableBody`
+ * when your row array is empty.
  */
 type __VLS_Props = {
-    /** How many columns the empty cell spans — set it to the table's column count. */
+    /** How many columns the empty cell spans. */
     colSpan?: number;
 };
 declare var __VLS_1: {};

package/dist/table/TableExpandTrigger.vue.d.cts

@@ -1,16 +1,10 @@
 /**
- * Disclosure button that opens the `SkdxTableExpandedRow` for `rowId`: a
- * `<button aria-expanded>` with `aria-controls` pointing at that detail row,
- * plus `data-state` of `"expanded"`/`"collapsed"`. Place it inside an
- * `SkdxTableCell` 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 `SkdxTableRow` doesn't also
- * toggle its selection. Must be used inside `SkdxTable`.
+ * Disclosure button that opens the detail row: a `<button aria-expanded>` with
+ * `aria-controls` and `data-state`. Place it in an `SkdxTableCell` of its row.
+ * Click stops propagation so selection doesn't toggle. Must be used inside `SkdxTable`.
  */
 type __VLS_Props = {
-    /** Id of the row this trigger expands. Must match the `rowId` of the paired `SkdxTableExpandedRow`. */
+    /** Id of the row this trigger expands; must match the paired detail row's `rowId`. */
     rowId: string;
 };
 declare var __VLS_1: {};

package/dist/table/TableExpandTrigger.vue.d.ts

@@ -1,16 +1,10 @@
 /**
- * Disclosure button that opens the `SkdxTableExpandedRow` for `rowId`: a
- * `<button aria-expanded>` with `aria-controls` pointing at that detail row,
- * plus `data-state` of `"expanded"`/`"collapsed"`. Place it inside an
- * `SkdxTableCell` 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 `SkdxTableRow` doesn't also
- * toggle its selection. Must be used inside `SkdxTable`.
+ * Disclosure button that opens the detail row: a `<button aria-expanded>` with
+ * `aria-controls` and `data-state`. Place it in an `SkdxTableCell` of its row.
+ * Click stops propagation so selection doesn't toggle. Must be used inside `SkdxTable`.
  */
 type __VLS_Props = {
-    /** Id of the row this trigger expands. Must match the `rowId` of the paired `SkdxTableExpandedRow`. */
+    /** Id of the row this trigger expands; must match the paired detail row's `rowId`. */
     rowId: string;
 };
 declare var __VLS_1: {};

package/dist/table/TableExpandedRow.vue.d.cts

@@ -1,18 +1,12 @@
 /**
- * The full-width detail row an `SkdxTableExpandTrigger` reveals: a `<tr>` whose
- * single `<td colspan>` holds the row's expanded content, with `data-state` of
- * `"expanded"`/`"collapsed"`. Render it as the next sibling of the row it
- * belongs to, inside the same `SkdxTableBody`.
- *
- * It stays mounted while collapsed and is `hidden` instead — the trigger's
- * `aria-controls` has to resolve to a real element for assistive tech to
- * follow it, which an unmounted row could not do. Must be used inside
- * `SkdxTable`.
+ * Full-width detail row with a single `<td colspan>` for expanded content.
+ * Render it as the next sibling of its paired row. Stays mounted when collapsed
+ * and `hidden` so `aria-controls` can reference it. Must be used inside `SkdxTable`.
  */
 type __VLS_Props = {
-    /** Id of the row this detail row belongs to. Must match the paired trigger's `rowId`. */
+    /** Id of the row this detail row belongs to; must match the paired trigger's `rowId`. */
     rowId: string;
-    /** How many columns the detail cell spans — set it to the table's column count. */
+    /** How many columns the detail cell spans. */
     colSpan?: number;
 };
 declare var __VLS_1: {};

package/dist/table/TableExpandedRow.vue.d.ts

@@ -1,18 +1,12 @@
 /**
- * The full-width detail row an `SkdxTableExpandTrigger` reveals: a `<tr>` whose
- * single `<td colspan>` holds the row's expanded content, with `data-state` of
- * `"expanded"`/`"collapsed"`. Render it as the next sibling of the row it
- * belongs to, inside the same `SkdxTableBody`.
- *
- * It stays mounted while collapsed and is `hidden` instead — the trigger's
- * `aria-controls` has to resolve to a real element for assistive tech to
- * follow it, which an unmounted row could not do. Must be used inside
- * `SkdxTable`.
+ * Full-width detail row with a single `<td colspan>` for expanded content.
+ * Render it as the next sibling of its paired row. Stays mounted when collapsed
+ * and `hidden` so `aria-controls` can reference it. Must be used inside `SkdxTable`.
  */
 type __VLS_Props = {
-    /** Id of the row this detail row belongs to. Must match the paired trigger's `rowId`. */
+    /** Id of the row this detail row belongs to; must match the paired trigger's `rowId`. */
     rowId: string;
-    /** How many columns the detail cell spans — set it to the table's column count. */
+    /** How many columns the detail cell spans. */
     colSpan?: number;
 };
 declare var __VLS_1: {};

package/dist/table/TableHeaderCell.vue.d.cts

@@ -1,39 +1,26 @@
 /**
- * A `<th>`. Passing `sortKey` makes it sortable: the cell sets `aria-sort`
- * (`"ascending"`, `"descending"`, or `"none"`) and `data-sort-direction`, and
- * wraps its content in an `SkdxTableColumnHeaderSortTrigger` (the APG
- * sortable-table pattern) that cycles the table's sort for that column through
- * ascending → descending → unsorted on click or Enter/Space. The `<th>` itself
- * is never focusable. Without `sortKey`, it's a plain header cell.
- *
- * Render an `SkdxTableColumnHeaderSortTrigger` among the slot children yourself
- * — to put an `SkdxTableSortIndicator` inside the button, say — and the cell
- * skips its own, so there is always exactly one sort button per column.
- *
- * Passing `resizable` (plus a `columnKey`, defaulting to `sortKey`) appends an
- * `SkdxTableColumnResizeTrigger`: dragging it, or pressing Arrow Left/Right
- * (Home/End for the bounds) while it has focus, writes the column's width into
- * the table's `columnWidths` state, clamped to `minWidth`/`maxWidth`. A stored
- * width is published on the cell as an inline `width` *and* as the
- * `--skdx-table-column-width` custom property, so sticky overlays and shadows
- * can follow the column without re-measuring it.
+ * A `<th>` with optional sorting and resizing. A column's single identifier,
+ * `columnKey`, is the key for both. Sortable cells set `aria-sort` and wrap
+ * content in a button that cycles sort state through ascending → descending
+ * → unsorted. Resizable cells append a handle: drag it or press Arrow Left/Right
+ * (Home/End for bounds) to resize, published as `width` and
+ * `--skdx-table-column-width` for sticky overlays. Render your own
+ * `SkdxTableColumnHeaderSortTrigger` as a child to prevent a second one.
  */
 type __VLS_Props = {
     /**
-     * Column identifier used for sorting. Presence of this prop is what makes
-     * the header cell sortable — omit it for a non-sortable column header.
-     * @default undefined
+     * This column's single identifier for sorting and resizing.
+     * Required when either is enabled.
      */
-    sortKey?: string;
+    columnKey?: string;
     /**
-     * Column identifier used for resizing, when it differs from `sortKey`.
-     * A resizable column needs one of the two.
+     * Whether this column can be sorted. Sortable cells set `aria-sort` and
+     * wrap content in a sort button unless you render one yourself.
      */
-    columnKey?: string;
+    sortable?: boolean;
     /**
-     * Renders a focusable `role="separator"` resize handle at the cell's
-     * inline end, driven by pointer drag or Arrow Left/Right (Home/End for
-     * the bounds).
+     * Renders a focusable resize handle driven by pointer drag or Arrow keys
+     * (Home/End for bounds).
      */
     resizable?: boolean;
     /** Smallest width in pixels the column can be resized to. */
@@ -41,13 +28,11 @@ type __VLS_Props = {
     /** Largest width in pixels the column can be resized to. */
     maxWidth?: number;
     /**
-     * Accessible name for the resize handle — a `role="separator"` widget
-     * needs its own name, distinct from the column header's.
+     * Accessible name for the resize handle, distinct from the column header's.
      */
     resizeLabel?: string;
     /**
-     * Pixels one Arrow keypress moves the column edge by. Also inherited by an
-     * `SkdxTableColumnResizeTrigger` rendered as a child of this cell.
+     * Pixels each Arrow keypress moves the column edge; inherited by child resize triggers.
      */
     resizeStep?: number;
 };
@@ -61,7 +46,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     maxWidth: number;
     minWidth: number;
     columnKey: string;
-    sortKey: string;
+    sortable: boolean;
     resizeLabel: string;
     resizable: boolean;
     resizeStep: number;

package/dist/table/TableHeaderCell.vue.d.ts

@@ -1,39 +1,26 @@
 /**
- * A `<th>`. Passing `sortKey` makes it sortable: the cell sets `aria-sort`
- * (`"ascending"`, `"descending"`, or `"none"`) and `data-sort-direction`, and
- * wraps its content in an `SkdxTableColumnHeaderSortTrigger` (the APG
- * sortable-table pattern) that cycles the table's sort for that column through
- * ascending → descending → unsorted on click or Enter/Space. The `<th>` itself
- * is never focusable. Without `sortKey`, it's a plain header cell.
- *
- * Render an `SkdxTableColumnHeaderSortTrigger` among the slot children yourself
- * — to put an `SkdxTableSortIndicator` inside the button, say — and the cell
- * skips its own, so there is always exactly one sort button per column.
- *
- * Passing `resizable` (plus a `columnKey`, defaulting to `sortKey`) appends an
- * `SkdxTableColumnResizeTrigger`: dragging it, or pressing Arrow Left/Right
- * (Home/End for the bounds) while it has focus, writes the column's width into
- * the table's `columnWidths` state, clamped to `minWidth`/`maxWidth`. A stored
- * width is published on the cell as an inline `width` *and* as the
- * `--skdx-table-column-width` custom property, so sticky overlays and shadows
- * can follow the column without re-measuring it.
+ * A `<th>` with optional sorting and resizing. A column's single identifier,
+ * `columnKey`, is the key for both. Sortable cells set `aria-sort` and wrap
+ * content in a button that cycles sort state through ascending → descending
+ * → unsorted. Resizable cells append a handle: drag it or press Arrow Left/Right
+ * (Home/End for bounds) to resize, published as `width` and
+ * `--skdx-table-column-width` for sticky overlays. Render your own
+ * `SkdxTableColumnHeaderSortTrigger` as a child to prevent a second one.
  */
 type __VLS_Props = {
     /**
-     * Column identifier used for sorting. Presence of this prop is what makes
-     * the header cell sortable — omit it for a non-sortable column header.
-     * @default undefined
+     * This column's single identifier for sorting and resizing.
+     * Required when either is enabled.
      */
-    sortKey?: string;
+    columnKey?: string;
     /**
-     * Column identifier used for resizing, when it differs from `sortKey`.
-     * A resizable column needs one of the two.
+     * Whether this column can be sorted. Sortable cells set `aria-sort` and
+     * wrap content in a sort button unless you render one yourself.
      */
-    columnKey?: string;
+    sortable?: boolean;
     /**
-     * Renders a focusable `role="separator"` resize handle at the cell's
-     * inline end, driven by pointer drag or Arrow Left/Right (Home/End for
-     * the bounds).
+     * Renders a focusable resize handle driven by pointer drag or Arrow keys
+     * (Home/End for bounds).
      */
     resizable?: boolean;
     /** Smallest width in pixels the column can be resized to. */
@@ -41,13 +28,11 @@ type __VLS_Props = {
     /** Largest width in pixels the column can be resized to. */
     maxWidth?: number;
     /**
-     * Accessible name for the resize handle — a `role="separator"` widget
-     * needs its own name, distinct from the column header's.
+     * Accessible name for the resize handle, distinct from the column header's.
      */
     resizeLabel?: string;
     /**
-     * Pixels one Arrow keypress moves the column edge by. Also inherited by an
-     * `SkdxTableColumnResizeTrigger` rendered as a child of this cell.
+     * Pixels each Arrow keypress moves the column edge; inherited by child resize triggers.
      */
     resizeStep?: number;
 };
@@ -61,7 +46,7 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}
     maxWidth: number;
     minWidth: number;
     columnKey: string;
-    sortKey: string;
+    sortable: boolean;
     resizeLabel: string;
     resizable: boolean;
     resizeStep: number;

package/dist/table/TableHeaderCell.vue_vue_type_script_setup_true_lang.cjs

@@ -1 +1 @@
-const v=require("./context.cjs"),m=require("./TableColumnHeaderSortTrigger.vue.cjs"),g=require("./TableColumnResizeTrigger.vue.cjs");let e=require("vue");var b=["aria-sort","data-sort-direction","data-resizable"],T=(0,e.defineComponent)({__name:"TableHeaderCell",props:{sortKey:{default:void 0},columnKey:{default:void 0},resizable:{type:Boolean,default:!1},minWidth:{default:40},maxWidth:{default:1e3},resizeLabel:{default:"Resize column"},resizeStep:{default:8}},setup(p){const t=p,n=(0,e.inject)(v.TABLE_CONTEXT);if(!n)throw new Error("SkdxTableHeaderCell must be used within SkdxTable");const d=n,f=(0,e.useSlots)();function s(r){return(r??[]).some(l=>l.type===m.default?!0:l.type===e.Fragment&&s(l.children))}function _(){return s(f.default?.())}const o=(0,e.computed)(()=>t.sortKey!==void 0),u=(0,e.computed)(()=>o.value?d.sortList.value.find(r=>r.columnKey===t.sortKey)?.direction:void 0),y=(0,e.computed)(()=>{if(o.value)return u.value==="asc"?"ascending":u.value==="desc"?"descending":"none"}),a=(0,e.computed)(()=>t.columnKey??t.sortKey),c=(0,e.computed)(()=>t.resizable&&a.value!==void 0),i=(0,e.computed)(()=>a.value===void 0?void 0:d.columnWidths.value[a.value]),h=(0,e.computed)(()=>i.value===void 0?void 0:{width:`${i.value}px`,"--skdx-table-column-width":`${i.value}px`});return(0,e.provide)(v.TABLE_HEADER_CELL_CONTEXT,{get sortKey(){return t.sortKey},get columnKey(){return a.value},get minWidth(){return t.minWidth},get maxWidth(){return t.maxWidth},get resizeLabel(){return t.resizeLabel},get resizeStep(){return t.resizeStep}}),(r,l)=>((0,e.openBlock)(),(0,e.createElementBlock)("th",{class:"skdx-table__header-cell","data-part":"header-cell","aria-sort":y.value,"data-sort-direction":u.value,"data-resizable":c.value?"":void 0,style:(0,e.normalizeStyle)(h.value)},[o.value&&!_()?((0,e.openBlock)(),(0,e.createBlock)(m.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(r.$slots,"default")]),_:3})):(0,e.renderSlot)(r.$slots,"default",{key:1}),c.value?((0,e.openBlock)(),(0,e.createBlock)(g.default,{key:2})):(0,e.createCommentVNode)("",!0)],12,b))}});exports.default=T;
+const v=require("./context.cjs"),m=require("./TableColumnHeaderSortTrigger.vue.cjs"),g=require("./TableColumnResizeTrigger.vue.cjs");let e=require("vue");var T=["aria-sort","data-sort-direction","data-resizable"],y=(0,e.defineComponent)({__name:"TableHeaderCell",props:{columnKey:{default:void 0},sortable:{type:Boolean,default:void 0},resizable:{type:Boolean,default:!1},minWidth:{default:40},maxWidth:{default:1e3},resizeLabel:{default:"Resize column"},resizeStep:{default:8}},setup(p){const t=p,i=(0,e.inject)(v.TABLE_CONTEXT);if(!i)throw new Error("SkdxTableHeaderCell must be used within SkdxTable");const d=i,f=(0,e.useSlots)();function s(a){return(a??[]).some(o=>o.type===m.default?!0:o.type===e.Fragment&&s(o.children))}function _(){return s(f.default?.())}const r=(0,e.computed)(()=>t.columnKey),l=(0,e.computed)(()=>t.sortable&&r.value!==void 0),u=(0,e.computed)(()=>l.value?d.sortList.value.find(a=>a.columnKey===r.value)?.direction:void 0),b=(0,e.computed)(()=>{if(l.value)return u.value==="asc"?"ascending":u.value==="desc"?"descending":"none"}),c=(0,e.computed)(()=>t.resizable&&r.value!==void 0),n=(0,e.computed)(()=>r.value===void 0?void 0:d.columnWidths.value[r.value]),h=(0,e.computed)(()=>n.value===void 0?void 0:{width:`${n.value}px`,"--skdx-table-column-width":`${n.value}px`});return(0,e.provide)(v.TABLE_HEADER_CELL_CONTEXT,{get columnKey(){return r.value},get sortable(){return l.value},get minWidth(){return t.minWidth},get maxWidth(){return t.maxWidth},get resizeLabel(){return t.resizeLabel},get resizeStep(){return t.resizeStep}}),(a,o)=>((0,e.openBlock)(),(0,e.createElementBlock)("th",{class:"skdx-table__header-cell","data-part":"header-cell","aria-sort":b.value,"data-sort-direction":u.value,"data-resizable":c.value?"":void 0,style:(0,e.normalizeStyle)(h.value)},[l.value&&!_()?((0,e.openBlock)(),(0,e.createBlock)(m.default,{key:0},{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(a.$slots,"default")]),_:3})):(0,e.renderSlot)(a.$slots,"default",{key:1}),c.value?((0,e.openBlock)(),(0,e.createBlock)(g.default,{key:2})):(0,e.createCommentVNode)("",!0)],12,T))}});exports.default=y;