@skdx/vue 0.26.0

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

@@ -0,0 +1,75 @@
+/**
+ * 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.
+ */
+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
+     */
+    sortKey?: string;
+    /**
+     * Column identifier used for resizing, when it differs from `sortKey`.
+     * A resizable column needs one of the two.
+     */
+    columnKey?: string;
+    /**
+     * 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).
+     */
+    resizable?: boolean;
+    /** Smallest width in pixels the column can be resized to. */
+    minWidth?: number;
+    /** 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.
+     */
+    resizeLabel?: string;
+    /**
+     * Pixels one Arrow keypress moves the column edge by. Also inherited by an
+     * `SkdxTableColumnResizeTrigger` rendered as a child of this cell.
+     */
+    resizeStep?: number;
+};
+declare var __VLS_4: {}, __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_4) => any;
+} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    maxWidth: number;
+    minWidth: number;
+    columnKey: string;
+    sortKey: string;
+    resizeLabel: string;
+    resizable: boolean;
+    resizeStep: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/table/TableHeaderCell.vue.js

@@ -0,0 +1 @@
+import e from"./TableHeaderCell.vue_vue_type_script_setup_true_lang.js";var r=e;export{r as default};

package/dist/table/TableHeaderCell.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +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;

package/dist/table/TableHeaderCell.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{TABLE_CONTEXT as e,TABLE_HEADER_CELL_CONTEXT as t}from"./context.js";import a from"./TableColumnHeaderSortTrigger.vue.js";import r from"./TableColumnResizeTrigger.vue.js";import{Fragment as l,computed as o,createBlock as s,createCommentVNode as i,createElementBlock as d,defineComponent as u,inject as n,normalizeStyle as v,openBlock as m,provide as c,renderSlot as f,useSlots as p,withCtx as y}from"vue";var h=["aria-sort","data-sort-direction","data-resizable"],b=/* @__PURE__ */u({__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(u){const b=u,g=n(e);if(!g)throw new Error("SkdxTableHeaderCell must be used within SkdxTable");const z=g,T=p();function x(e){return(e??[]).some(e=>e.type===a||e.type===l&&x(e.children))}function k(){return x(T.default?.())}const C=o(()=>void 0!==b.sortKey),K=o(()=>C.value?z.sortList.value.find(e=>e.columnKey===b.sortKey)?.direction:void 0),E=o(()=>{if(C.value)return"asc"===K.value?"ascending":"desc"===K.value?"descending":"none"}),S=o(()=>b.columnKey??b.sortKey),_=o(()=>b.resizable&&void 0!==S.value),L=o(()=>void 0===S.value?void 0:z.columnWidths.value[S.value]),W=o(()=>void 0===L.value?void 0:{width:`${L.value}px`,"--skdx-table-column-width":`${L.value}px`});return c(t,{get sortKey(){return b.sortKey},get columnKey(){return S.value},get minWidth(){return b.minWidth},get maxWidth(){return b.maxWidth},get resizeLabel(){return b.resizeLabel},get resizeStep(){return b.resizeStep}}),(e,t)=>(m(),d("th",{class:"skdx-table__header-cell","data-part":"header-cell","aria-sort":E.value,"data-sort-direction":K.value,"data-resizable":_.value?"":void 0,style:v(W.value)},[C.value&&!k()?(m(),s(a,{key:0},{default:y(()=>[f(e.$slots,"default")]),_:3})):f(e.$slots,"default",{key:1}),_.value?(m(),s(r,{key:2})):i("",!0)],12,h))}});export{b as default};

package/dist/table/TableRow.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TableRow.vue_vue_type_script_setup_true_lang.cjs");var u=e.default;exports.default=u;

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

@@ -0,0 +1,29 @@
+/**
+ * A `<tr>`. When given `rowId` and the table's `selectionMode` isn't
+ * `'none'`, sets `aria-selected` and `data-state="selected"` while selected,
+ * and clicking anywhere in the row (outside interactive descendants matching
+ * `button, a, input, [role="button"]`) toggles its selection.
+ * Shift-clicking selects every row between the last row toggled and this one,
+ * in `'multiple'` mode.
+ */
+type __VLS_Props = {
+    /**
+     * This row's identifier within the table's selection state. Required for
+     * the row to be selectable (via click or its own checkbox); rows without
+     * it are never selected or clickable-to-select.
+     * @default undefined
+     */
+    rowId?: 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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,29 @@
+/**
+ * A `<tr>`. When given `rowId` and the table's `selectionMode` isn't
+ * `'none'`, sets `aria-selected` and `data-state="selected"` while selected,
+ * and clicking anywhere in the row (outside interactive descendants matching
+ * `button, a, input, [role="button"]`) toggles its selection.
+ * Shift-clicking selects every row between the last row toggled and this one,
+ * in `'multiple'` mode.
+ */
+type __VLS_Props = {
+    /**
+     * This row's identifier within the table's selection state. Required for
+     * the row to be selectable (via click or its own checkbox); rows without
+     * it are never selected or clickable-to-select.
+     * @default undefined
+     */
+    rowId?: 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<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/table/TableRow.vue.js

@@ -0,0 +1 @@
+import e from"./TableRow.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/table/TableRow.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const s=require("./context.cjs");let e=require("vue");var i=["aria-selected","data-state","data-row-id"],u='button, a, input, [role="button"]',w=(0,e.defineComponent)({__name:"TableRow",props:{rowId:{}},setup(d){const t=d,l=(0,e.inject)(s.TABLE_CONTEXT);if(!l)throw new Error("SkdxTableRow must be used within SkdxTable");const r=l,a=(0,e.computed)(()=>r.selectionMode!=="none"&&t.rowId!==void 0),n=(0,e.computed)(()=>t.rowId!==void 0&&r.isRowSelected(t.rowId));function c(o){!a.value||!t.rowId||o.target.closest(u)||r.toggleRow(t.rowId,o.shiftKey)}return(o,_)=>((0,e.openBlock)(),(0,e.createElementBlock)("tr",{class:"skdx-table__row","data-part":"row","aria-selected":a.value?n.value:void 0,"data-state":n.value?"selected":void 0,"data-row-id":a.value?d.rowId:void 0,onClick:c},[(0,e.renderSlot)(o.$slots,"default")],8,i))}});exports.default=w;

package/dist/table/TableRow.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{TABLE_CONTEXT as e}from"./context.js";import{computed as o,createElementBlock as t,defineComponent as a,inject as d,openBlock as r,renderSlot as s}from"vue";var l=["aria-selected","data-state","data-row-id"],n=/* @__PURE__ */a({__name:"TableRow",props:{rowId:{}},setup(a){const n=a,i=d(e);if(!i)throw new Error("SkdxTableRow must be used within SkdxTable");const w=i,c=o(()=>"none"!==w.selectionMode&&void 0!==n.rowId),u=o(()=>void 0!==n.rowId&&w.isRowSelected(n.rowId));function v(e){!c.value||!n.rowId||e.target.closest('button, a, input, [role="button"]')||w.toggleRow(n.rowId,e.shiftKey)}return(e,o)=>(r(),t("tr",{class:"skdx-table__row","data-part":"row","aria-selected":c.value?u.value:void 0,"data-state":u.value?"selected":void 0,"data-row-id":c.value?a.rowId:void 0,onClick:v},[s(e.$slots,"default")],8,l))}});export{n as default};

package/dist/table/TableRowSelectCheckbox.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TableRowSelectCheckbox.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

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

@@ -0,0 +1,32 @@
+/**
+ * One row's selection checkbox, driven by the table's selection state rather
+ * than its own. Put it in an `SkdxTableCell` 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">`, which `SkdxTableRow` already
+ * excludes from its own click-to-select handling, so the click counts once.
+ *
+ * Give each one a row-specific accessible name — `"Select Aster"`, not
+ * `"Select row"` repeated down the column. There is deliberately no default:
+ * only you know what names the row.
+ */
+type __VLS_Props = {
+    /** Id of the row this checkbox selects. Must match the enclosing `SkdxTableRow`'s `rowId`. */
+    rowId: string;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,32 @@
+/**
+ * One row's selection checkbox, driven by the table's selection state rather
+ * than its own. Put it in an `SkdxTableCell` 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">`, which `SkdxTableRow` already
+ * excludes from its own click-to-select handling, so the click counts once.
+ *
+ * Give each one a row-specific accessible name — `"Select Aster"`, not
+ * `"Select row"` repeated down the column. There is deliberately no default:
+ * only you know what names the row.
+ */
+type __VLS_Props = {
+    /** Id of the row this checkbox selects. Must match the enclosing `SkdxTableRow`'s `rowId`. */
+    rowId: string;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/table/TableRowSelectCheckbox.vue.js

@@ -0,0 +1 @@
+import e from"./TableRowSelectCheckbox.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/table/TableRowSelectCheckbox.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const n=require("../checkbox/Checkbox.vue.cjs"),d=require("./context.cjs");let e=require("vue");var u=(0,e.defineComponent)({inheritAttrs:!1,__name:"TableRowSelectCheckbox",props:{rowId:{}},setup(l){const o=l,c=(0,e.inject)(d.TABLE_CONTEXT);if(!c)throw new Error("SkdxTableRowSelectCheckbox must be used within SkdxTable");const r=c,s=(0,e.computed)(()=>r.isRowSelected(o.rowId));function a(t){r.toggleRow(o.rowId,t.shiftKey)}return(t,i)=>((0,e.openBlock)(),(0,e.createBlock)(n.default,(0,e.mergeProps)({class:"skdx-table__row-select-checkbox","data-part":"row-select-checkbox"},t.$attrs,{checked:s.value,"data-skdx-table-row-select":"",onClick:a}),{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(t.$slots,"default")]),_:3},16,["checked"]))}});exports.default=u;

package/dist/table/TableRowSelectCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import e from"../checkbox/Checkbox.vue.js";import{TABLE_CONTEXT as t}from"./context.js";import{computed as o,createBlock as s,defineComponent as c,inject as r,mergeProps as a,openBlock as l,renderSlot as d,withCtx as n}from"vue";var i=/* @__PURE__ */c({inheritAttrs:!1,__name:"TableRowSelectCheckbox",props:{rowId:{}},setup(c){const i=c,k=r(t);if(!k)throw new Error("SkdxTableRowSelectCheckbox must be used within SkdxTable");const w=k,h=o(()=>w.isRowSelected(i.rowId));function x(e){w.toggleRow(i.rowId,e.shiftKey)}return(t,o)=>(l(),s(e,a({class:"skdx-table__row-select-checkbox","data-part":"row-select-checkbox"},t.$attrs,{checked:h.value,"data-skdx-table-row-select":"",onClick:x}),{default:n(()=>[d(t.$slots,"default")]),_:3},16,["checked"]))}});export{i as default};

package/dist/table/TableSelectAllCheckbox.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TableSelectAllCheckbox.vue_vue_type_script_setup_true_lang.cjs");var l=e.default;exports.default=l;

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

@@ -0,0 +1,54 @@
+import { type TableSelectAllScope } from './context.cjs';
+/**
+ * The header checkbox that selects or clears a set of rows at once. Tri-state:
+ * checked when every id in `rowIds` 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).
+ *
+ * `rowIds` 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.
+ *
+ * Meaningful only with `selection-mode="multiple"`.
+ */
+type __VLS_Props = {
+    /**
+     * The ids this checkbox selects and reports on. Must be the *whole
+     * dataset's* ids when `scope` is `'all'`, and only the rendered page's when
+     * it is `'page'` — the table stores no row registry, so this list is the
+     * only thing that decides which.
+     */
+    rowIds: string[];
+    /**
+     * Whether `rowIds` is the current page/window or the entire dataset. Required
+     * and unset by default: the two are indistinguishable until the table
+     * paginates or virtualizes, and guessing produces a "select all" that quietly
+     * selects only what is on screen.
+     */
+    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.
+     * @default defaultSelectAllLabel — e.g. `"Select all 40 rows on this page"`
+     */
+    getSelectAllLabel?: (scope: TableSelectAllScope, count: number) => string;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    getSelectAllLabel: (scope: TableSelectAllScope, count: number) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,54 @@
+import { type TableSelectAllScope } from './context.js';
+/**
+ * The header checkbox that selects or clears a set of rows at once. Tri-state:
+ * checked when every id in `rowIds` 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).
+ *
+ * `rowIds` 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.
+ *
+ * Meaningful only with `selection-mode="multiple"`.
+ */
+type __VLS_Props = {
+    /**
+     * The ids this checkbox selects and reports on. Must be the *whole
+     * dataset's* ids when `scope` is `'all'`, and only the rendered page's when
+     * it is `'page'` — the table stores no row registry, so this list is the
+     * only thing that decides which.
+     */
+    rowIds: string[];
+    /**
+     * Whether `rowIds` is the current page/window or the entire dataset. Required
+     * and unset by default: the two are indistinguishable until the table
+     * paginates or virtualizes, and guessing produces a "select all" that quietly
+     * selects only what is on screen.
+     */
+    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.
+     * @default defaultSelectAllLabel — e.g. `"Select all 40 rows on this page"`
+     */
+    getSelectAllLabel?: (scope: TableSelectAllScope, count: number) => string;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    getSelectAllLabel: (scope: TableSelectAllScope, count: number) => string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/table/TableSelectAllCheckbox.vue.js

@@ -0,0 +1 @@
+import e from"./TableSelectAllCheckbox.vue_vue_type_script_setup_true_lang.js";var t=e;export{t as default};

package/dist/table/TableSelectAllCheckbox.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const n=require("../checkbox/Checkbox.vue.cjs"),r=require("./context.cjs");let e=require("vue");var u=(0,e.defineComponent)({inheritAttrs:!1,__name:"TableSelectAllCheckbox",props:{rowIds:{},scope:{},getSelectAllLabel:{type:Function,default:r.defaultSelectAllLabel}},setup(t){const l=t,a=(0,e.inject)(r.TABLE_CONTEXT);if(!a)throw new Error("SkdxTableSelectAllCheckbox must be used within SkdxTable");const c=a,s=(0,e.computed)(()=>c.isAllSelected(l.rowIds)?!0:c.isSomeSelected(l.rowIds)?"indeterminate":!1);function d(){c.toggleAll(l.rowIds)}return(o,i)=>((0,e.openBlock)(),(0,e.createBlock)(n.default,(0,e.mergeProps)({class:"skdx-table__select-all-checkbox","data-part":"select-all-checkbox","aria-label":t.getSelectAllLabel(t.scope,t.rowIds.length),checked:s.value,"data-skdx-table-select-all":"","data-scope":t.scope,onClick:d},o.$attrs),{default:(0,e.withCtx)(()=>[(0,e.renderSlot)(o.$slots,"default")]),_:3},16,["aria-label","checked","data-scope"]))}});exports.default=u;

package/dist/table/TableSelectAllCheckbox.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import e from"../checkbox/Checkbox.vue.js";import{TABLE_CONTEXT as t,defaultSelectAllLabel as l}from"./context.js";import{computed as a,createBlock as o,defineComponent as s,inject as c,mergeProps as r,openBlock as d,renderSlot as n,withCtx as i}from"vue";var p=/* @__PURE__ */s({inheritAttrs:!1,__name:"TableSelectAllCheckbox",props:{rowIds:{},scope:{},getSelectAllLabel:{type:Function,default:l}},setup(l){const s=l,p=c(t);if(!p)throw new Error("SkdxTableSelectAllCheckbox must be used within SkdxTable");const b=p,k=a(()=>!!b.isAllSelected(s.rowIds)||!!b.isSomeSelected(s.rowIds)&&"indeterminate");function u(){b.toggleAll(s.rowIds)}return(t,a)=>(d(),o(e,r({class:"skdx-table__select-all-checkbox","data-part":"select-all-checkbox","aria-label":l.getSelectAllLabel(l.scope,l.rowIds.length),checked:k.value,"data-skdx-table-select-all":"","data-scope":l.scope,onClick:u},t.$attrs),{default:i(()=>[n(t.$slots,"default")]),_:3},16,["aria-label","checked","data-scope"]))}});export{p as default};

package/dist/table/TableSortIndicator.vue.cjs

@@ -0,0 +1 @@
+const e=require("./TableSortIndicator.vue_vue_type_script_setup_true_lang.cjs");var t=e.default;exports.default=t;

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

@@ -0,0 +1,34 @@
+/**
+ * The arrow (or caret, or badge) showing which way a column is sorted. A
+ * `<span aria-hidden="true">` carrying `data-sort-direction`
+ * (`"asc"`/`"desc"`/`"none"`) and, under `multiSort`, `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 slot content you give it and stays mounted in all three
+ * states, so a CSS-driven arrow can rotate rather than swap.
+ */
+type __VLS_Props = {
+    /**
+     * Column whose direction this indicator reflects. Inherited from the
+     * enclosing `SkdxTableHeaderCell`'s `sortKey`.
+     */
+    sortKey?: 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;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,34 @@
+/**
+ * The arrow (or caret, or badge) showing which way a column is sorted. A
+ * `<span aria-hidden="true">` carrying `data-sort-direction`
+ * (`"asc"`/`"desc"`/`"none"`) and, under `multiSort`, `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 slot content you give it and stays mounted in all three
+ * states, so a CSS-driven arrow can rotate rather than swap.
+ */
+type __VLS_Props = {
+    /**
+     * Column whose direction this indicator reflects. Inherited from the
+     * enclosing `SkdxTableHeaderCell`'s `sortKey`.
+     */
+    sortKey?: 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;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/table/TableSortIndicator.vue.js

@@ -0,0 +1 @@
+import t from"./TableSortIndicator.vue_vue_type_script_setup_true_lang.js";var e=t;export{e as default};

package/dist/table/TableSortIndicator.vue_vue_type_script_setup_true_lang.cjs

@@ -0,0 +1 @@
+const d=require("./context.cjs");let t=require("vue");var _=["data-sort-direction","data-sort-index"],v=(0,t.defineComponent)({__name:"TableSortIndicator",props:{sortKey:{default:void 0}},setup(i){const s=i,a=(0,t.inject)(d.TABLE_CONTEXT);if(!a)throw new Error("SkdxTableSortIndicator must be used within SkdxTable");const e=a,c=(0,t.inject)(d.TABLE_HEADER_CELL_CONTEXT,void 0),n=(0,t.computed)(()=>s.sortKey??c?.sortKey),o=(0,t.computed)(()=>n.value===void 0?-1:e.sortList.value.findIndex(r=>r.columnKey===n.value)),u=(0,t.computed)(()=>e.sortList.value[o.value]?.direction??"none"),l=(0,t.computed)(()=>e.multiSort&&o.value!==-1?o.value:void 0);return(r,p)=>((0,t.openBlock)(),(0,t.createElementBlock)("span",{class:"skdx-table__sort-indicator","data-part":"sort-indicator","aria-hidden":"true","data-skdx-table-sort-indicator":"","data-sort-direction":u.value,"data-sort-index":l.value},[(0,t.renderSlot)(r.$slots,"default")],8,_))}});exports.default=v;

package/dist/table/TableSortIndicator.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1 @@
+import{TABLE_CONTEXT as t,TABLE_HEADER_CELL_CONTEXT as a}from"./context.js";import{computed as e,createElementBlock as o,defineComponent as r,inject as s,openBlock as d,renderSlot as i}from"vue";var n=["data-sort-direction","data-sort-index"],l=/* @__PURE__ */r({__name:"TableSortIndicator",props:{sortKey:{default:void 0}},setup(r){const l=r,u=s(t);if(!u)throw new Error("SkdxTableSortIndicator must be used within SkdxTable");const c=u,v=s(a,void 0),m=e(()=>l.sortKey??v?.sortKey),p=e(()=>void 0===m.value?-1:c.sortList.value.findIndex(t=>t.columnKey===m.value)),x=e(()=>c.sortList.value[p.value]?.direction??"none"),E=e(()=>c.multiSort&&-1!==p.value?p.value:void 0);return(t,a)=>(d(),o("span",{class:"skdx-table__sort-indicator","data-part":"sort-indicator","aria-hidden":"true","data-skdx-table-sort-indicator":"","data-sort-direction":x.value,"data-sort-index":E.value},[i(t.$slots,"default")],8,n))}});export{l as default};

package/dist/table/context.cjs

@@ -0,0 +1 @@
+var a=Symbol("skdx-table-context"),n=Symbol("skdx-table-header-cell-context");function r(t,e){return`${t}-detail-${e}`}function o(t,e){return e===null?`${t} not sorted`:`${t} sorted ${e==="asc"?"ascending":"descending"}`}function d(t,e){const l=`${e} ${e===1?"row":"rows"}`;return t==="page"?`Select all ${l} on this page`:`Select all ${l}`}exports.TABLE_CONTEXT=a;exports.TABLE_HEADER_CELL_CONTEXT=n;exports.defaultGetSortLabel=o;exports.defaultSelectAllLabel=d;exports.tableDetailRowId=r;

package/dist/table/context.d.cts

@@ -0,0 +1,159 @@
+import type { InjectionKey, Ref } from 'vue';
+/**
+ * Which way a column is sorted. Mirrors React's `SortDirection`
+ * (`packages/react/src/table/types.ts:5`), Svelte's
+ * (`packages/svelte/src/lib/table/context.ts:8`) and Angular's
+ * (`packages/angular/src/table/table-state.ts:4`), so a `getSortLabel` written
+ * once ports across all four.
+ */
+export type SortDirection = 'asc' | 'desc';
+/**
+ * One column's contribution to a table's sort: which column, and
+ * which way. There is no third direction and no `null` — a column that is no
+ * longer sorted drops out of `sortList` entirely, which is what lets
+ * `toggleSort` cycle asc → desc → unsorted without the list ever carrying a
+ * dead entry.
+ *
+ * `columnKey` holds the header cell's `sortKey`, not its `columnKey` prop —
+ * that second key exists only for resizing, where it falls back to `sortKey`.
+ * Sorting and resizing therefore agree on a column's identity only while a
+ * header cell leaves `columnKey` unset.
+ */
+export interface TableSortState {
+    columnKey: string;
+    direction: SortDirection;
+}
+/**
+ * A whole table's sort state: one column (single sort, the default), an ordered
+ * list of columns (`multiSort`, most significant first), or nothing sorted.
+ *
+ * Single-sort tables are given and handed back the bare object — the array form
+ * only appears once `multiSort` is on, so existing single-sort code is unaffected.
+ */
+export type TableSort = TableSortState | TableSortState[] | null;
+/**
+ * How many rows a Table lets the user select at once, and therefore
+ * what its selection parts do. `'single'` keeps `selected` at no more than one
+ * id — picking a new row replaces the current one rather than adding to it, and
+ * Shift-clicking extends nothing. `'multiple'` allows any number and enables
+ * range extension plus `SkdxTableSelectAllCheckbox`. `'none'` is the default and
+ * makes `toggleRow`/`toggleAll` no-ops, so a table can render selection parts
+ * that stay inert instead of conditionally omitting them.
+ *
+ * Public, not `@internal`: React exports the same type from its own entry point
+ * (`react/src/index.ts:563`), so a consumer typing a `selectionMode` variable
+ * can do it in either framework — and this package exports it too. The tag was
+ * the half that was wrong.
+ */
+export type TableSelectionMode = 'single' | 'multiple' | 'none';
+/**
+ * Which rows an `SkdxTableSelectAllCheckbox` covers: only the ids it was handed
+ * (`'page'`) or the entire dataset (`'all'`). There is no default — the two
+ * behave identically until the table is paginated or virtualized, at which
+ * point picking the wrong one is a bug found in production.
+ */
+export type TableSelectAllScope = 'page' | 'all';
+/** Per-column pixel widths, keyed by a header cell's `columnKey` (falling back to its `sortKey`). */
+export type TableColumnWidths = Record<string, number>;
+/**
+ * Injection key a Table provides so its parts can read/drive shared sort/selection state.
+ *
+ * @internal
+ */
+export interface TableContext {
+    /** Unique per-table id, used to derive stable `id`/`aria-controls` pairs for detail rows. */
+    tableId: string;
+    /** The most significant sorted column, or `null`. Equivalent to `sortList[0] ?? null`. */
+    sort: Readonly<Ref<TableSortState | null>>;
+    /** Every sorted column, most significant first. At most one entry unless `multiSort` is on. */
+    sortList: Readonly<Ref<TableSortState[]>>;
+    /** Whether activating a second column adds to the sort rather than replacing it. */
+    multiSort: boolean;
+    selected: Readonly<Ref<Set<string>>>;
+    selectionMode: TableSelectionMode;
+    /**
+     * Cycles the given column through asc → desc → unsorted. `columnLabel` is
+     * the header cell's own text, used only for the live-region announcement.
+     */
+    toggleSort(columnKey: string, columnLabel?: string): void;
+    /**
+     * Toggles a row's selection. In `'single'` mode, selecting a new row replaces
+     * the current selection. Passing `extend` (a Shift-click) selects every row
+     * between the last row toggled and this one, in `'multiple'` mode only.
+     */
+    toggleRow(id: string, extend?: boolean): void;
+    isRowSelected(id: string): boolean;
+    /**
+     * Toggles all given row ids: selects every id unless all are already
+     * selected, in which case it deselects them. Table keeps no row registry, so
+     * the caller supplies the list — under pagination or virtualization that must
+     * be the full list, not the rendered page.
+     */
+    toggleAll(allIds: string[]): void;
+    /** Whether every given id is selected. False over an empty list. */
+    isAllSelected(allIds: string[]): boolean;
+    /** Whether some but not all of the given ids are selected — a tri-state checkbox's indeterminate. */
+    isSomeSelected(allIds: string[]): boolean;
+    /** Row ids whose detail row is currently expanded. */
+    expandedRows: Readonly<Ref<Set<string>>>;
+    toggleRowExpanded(rowId: string): void;
+    isRowExpanded(rowId: string): boolean;
+    /** Current per-column widths in pixels; columns absent from it are left to the browser. */
+    columnWidths: Readonly<Ref<TableColumnWidths>>;
+    setColumnWidth(columnKey: string, width: number): void;
+}
+/**
+ * Injection key a Table provides so its header cells and rows share sort and selection state.
+ *
+ * @internal
+ */
+export declare const TABLE_CONTEXT: InjectionKey<TableContext>;
+/**
+ * Column-scoped defaults an `SkdxTableHeaderCell` publishes to the
+ * sort and resize parts nested inside it, so those parts don't repeat the
+ * column's key and bounds. Every field is optional — the parts also work
+ * standalone, given their own props. Not part of the public API.
+ *
+ * @internal
+ */
+export interface TableHeaderCellContext {
+    readonly sortKey: string | undefined;
+    readonly columnKey: string | undefined;
+    readonly minWidth: number | undefined;
+    readonly maxWidth: number | undefined;
+    readonly resizeLabel: string | undefined;
+    readonly resizeStep: number | undefined;
+}
+/**
+ * Injection key an `SkdxTableHeaderCell` provides so a sort trigger,
+ * sort indicator or resize handle nested inside it inherits the column's key
+ * and bounds. Injected with an `undefined` fallback rather than throwing,
+ * because those parts are also legal outside a header cell — they just need
+ * their own `sortKey`/`columnKey` there.
+ *
+ * @internal
+ */
+export declare const TABLE_HEADER_CELL_CONTEXT: InjectionKey<TableHeaderCellContext>;
+/**
+ * The DOM id a row's detail row carries and its `SkdxTableExpandTrigger` points
+ * at with `aria-controls`. Derived from the table's own id so two tables on one
+ * page can share row ids without colliding.
+ */
+export declare function tableDetailRowId(tableId: string, rowId: string): string;
+/**
+ * Default `getSortLabel`, announced when a column's sort changes.
+ *
+ * Lives here rather than in `Table.vue` because `withDefaults(defineProps())`
+ * is hoisted out of `setup()`, so it cannot reference a binding declared
+ * locally in the same `<script setup>` — only an imported one.
+ *
+ * @internal
+ */
+export declare function defaultGetSortLabel(column: string, direction: SortDirection | null): string;
+/**
+ * Default accessible name for `SkdxTableSelectAllCheckbox` — 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;