@human-kit/svelte-components 1.0.0-alpha.19 → 1.0.0-alpha.20

package/dist/popover/trigger/popover-trigger.svelte

@@ -26,15 +26,25 @@
 	let wrapperRef: HTMLElement | null = $state(null);
 	let activeTrigger: HTMLElement | null = null;
 
+	function syncTriggerState(button: HTMLElement) {
+		button.setAttribute('aria-haspopup', 'dialog');
+		button.setAttribute('aria-expanded', String(popoverCtx.isOpen));
+		if (popoverCtx.isOpen) {
+			button.dataset.pressed = 'true';
+		} else {
+			delete button.dataset.pressed;
+		}
+	}
+
 	function setActiveTrigger(button: HTMLElement) {
 		if (activeTrigger && activeTrigger !== button) {
 			activeTrigger.setAttribute('aria-expanded', 'false');
+			delete activeTrigger.dataset.pressed;
 		}
 
 		activeTrigger = button;
 		popoverCtx.setTriggerRef(button);
-		button.setAttribute('aria-haspopup', 'dialog');
-		button.setAttribute('aria-expanded', String(popoverCtx.isOpen));
+		syncTriggerState(button);
 	}
 
 	function handleClick(event: MouseEvent) {
@@ -70,8 +80,7 @@
 			if (activeTrigger !== popoverCtx.triggerRef) {
 				activeTrigger = popoverCtx.triggerRef;
 			}
-			popoverCtx.triggerRef.setAttribute('aria-haspopup', 'dialog');
-			popoverCtx.triggerRef.setAttribute('aria-expanded', String(popoverCtx.isOpen));
+			syncTriggerState(popoverCtx.triggerRef);
 		}
 	});
 </script>

package/dist/table/README.md

@@ -4,9 +4,9 @@
 
 ## Description
 
-`Table` is a headless interactive table primitive with grid-style keyboard navigation, row selection, sortable column headers, and a composable part-based API.
+`Table` is a headless interactive table primitive with grid-style keyboard navigation, row selection, explicit sortable header triggers, and a composable part-based API.
 
-All public Table part prop types are exported from the table barrel, including `TableRootProps`, `TableColumnProps`, `TableHeaderProps`, `TableBodyProps`, `TableFooterProps`, `TableRowProps`, `TableColumnHeaderCellProps`, `TableColumnResizerProps`, `TableCellProps`, `TableEmptyStateProps`, `TableCheckboxProps`, and `TableCheckboxIndicatorProps`.
+All public Table part prop types are exported from the table barrel, including `TableRootProps`, `TableColumnProps`, `TableHeaderProps`, `TableBodyProps`, `TableFooterProps`, `TableRowProps`, `TableColumnHeaderCellProps`, `TableSortTriggerProps`, `TableColumnResizerProps`, `TableCellProps`, `TableEmptyStateProps`, `TableCheckboxProps`, and `TableCheckboxIndicatorProps`.
 
 ## Anatomy
 
@@ -26,8 +26,19 @@ All public Table part prop types are exported from the table barrel, including `
 			<Table.Column id="email" isRowHeader>
 				<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
 			</Table.Column>
-			<Table.Column id="group" allowsSorting>
-				<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
+			<Table.Column id="group">
+				<Table.ColumnHeaderCell>
+					<Table.SortTrigger>
+						{#snippet children({ sortDirection })}
+							<button
+								type="button"
+								aria-label={`Group sort button. ${sortDirection ?? 'not sorted'}.`}
+							>
+								Sort group
+							</button>
+						{/snippet}
+					</Table.SortTrigger>
+				</Table.ColumnHeaderCell>
 			</Table.Column>
 			<Table.Column id="size" minWidth={120}>
 				<Table.ColumnHeaderCell>
@@ -71,6 +82,7 @@ All public Table part prop types are exported from the table barrel, including `
 - `Table.Footer`
 - `Table.Row`
 - `Table.ColumnHeaderCell`
+- `Table.SortTrigger`
 - `Table.ColumnResizer`
 - `Table.Checkbox`
 - `Table.CheckboxIndicator`
@@ -112,7 +124,8 @@ All public Table part prop types are exported from the table barrel, including `
 
 - DOM-rendering parts: `Table.Root`, `Table.Header`, `Table.Body`, `Table.Footer`, `Table.Row`, `Table.Cell`, `Table.ColumnHeaderCell`, `Table.ColumnResizer`, `Table.Checkbox`, `Table.CheckboxIndicator`, and `Table.EmptyState` all render DOM.
 - Metadata-only part: `Table.Column` does not render its own element. It only registers the public column input for the surrounding header composition.
-- Sorting: `Table.Column.allowsSorting` declares that a column participates in sorting, and `Table.ColumnHeaderCell` is the interactive header cell that toggles the sort state.
+- Sorting: `Table.SortTrigger` is the public opt-in for sortable columns. Rendering it inside `Table.ColumnHeaderCell` makes the owning `Table.Column` sortable and toggles `Table.Root.sortDescriptor`.
+- `Table.SortTrigger.children` can consume a `sortDirection` render state so the nested button can expose stateful labels or visuals without reading the root descriptor directly.
 - Resizing: `Table.ColumnResizer` is the only public opt-in for resizing. Rendering it inside a `Table.ColumnHeaderCell` enables resizing for the owning `Table.Column`.
 - Public input types: import the `Table*Props` types you need from `@human-kit/svelte-components/table` or the main package barrel instead of deriving contracts from component internals.
 - Internal normalized state: table context stores normalized column metadata internally as `TableColumnMetadata`. That metadata is not the public input contract for wrappers or consumers.
@@ -125,5 +138,6 @@ All public Table part prop types are exported from the table barrel, including `
 - `Table.Checkbox` can receive DOM focus directly while still participating in the table's roving-focus grid.
 - First-column body cells become `rowheader` when their associated column has `isRowHeader`.
 - Disabled rows remain rendered and non-selectable, but are skipped by focus navigation.
+- `Table.SortTrigger` wires a nested trigger button, while the header cell remains the roving-focus target for arrow-key grid navigation.
 - Sort changes are mirrored into a polite live region so screen readers announce direction changes more reliably than `aria-sort` alone.
 - Column resize handles are keyboard accessible separators. Press `Enter` to enter resize mode, use the horizontal arrow keys to resize, `Home` to jump to the minimum width, `End` to auto-fit to content width, and press `Enter` again to exit resize mode while keeping focus on the handle.

package/dist/table/column/README.md

@@ -7,21 +7,22 @@
 ### Table.Column
 
 Name: `Table.Column`
-Description: Logical metadata wrapper for a header column. It does not render DOM and is used to register stable column identity, sorting capability, row-header semantics, and width constraints.
+Description: Logical metadata wrapper for a header column. It does not render DOM and is used to register stable column identity, row-header semantics, and width constraints.
 
 Public prop type: `TableColumnProps`
 
-| Prop            | Type                        | Default     | Description                                                                                                   |
-| --------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
-| `id`            | `string`                    | `-`         | Stable identifier for the column.                                                                             |
-| `allowsSorting` | `boolean`                   | `false`     | Enables sorting for the wrapped header cell.                                                                  |
-| `isRowHeader`   | `boolean`                   | `false`     | Marks the associated body column as row-header cells.                                                         |
-| `textValue`     | `string`                    | `undefined` | Optional spoken label used by `Table.Root` sort announcements when it should differ from `id`.                |
-| `width`         | `number \| \`${number}px\`` | `undefined` | Fixed column width. When set, the column keeps that width and user resize interactions are disabled.          |
-| `defaultWidth`  | `number \| \`${number}px\`` | `undefined` | Uncontrolled initial width hint for the column. The column remains user-resizable when a resizer is composed. |
-| `minWidth`      | `number`                    | `undefined` | Minimum width in px enforced during resize interactions.                                                      |
-| `maxWidth`      | `number`                    | `undefined` | Maximum width in px enforced during resize interactions.                                                      |
-| `children`      | `Snippet`                   | `undefined` | Usually a single `Table.ColumnHeaderCell`.                                                                    |
+| Prop           | Type                        | Default     | Description                                                                                                   |
+| -------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------- |
+| `id`           | `string`                    | `-`         | Stable identifier for the column.                                                                             |
+| `isRowHeader`  | `boolean`                   | `false`     | Marks the associated body column as row-header cells.                                                         |
+| `textValue`    | `string`                    | `undefined` | Optional spoken label used by `Table.Root` sort announcements when it should differ from `id`.                |
+| `width`        | `number \| \`${number}px\`` | `undefined` | Fixed column width. When set, the column keeps that width and user resize interactions are disabled.          |
+| `defaultWidth` | `number \| \`${number}px\`` | `undefined` | Uncontrolled initial width hint for the column. The column remains user-resizable when a resizer is composed. |
+| `minWidth`     | `number`                    | `undefined` | Minimum width in px enforced during resize interactions.                                                      |
+| `maxWidth`     | `number`                    | `undefined` | Maximum width in px enforced during resize interactions.                                                      |
+| `children`     | `Snippet`                   | `undefined` | Usually a single `Table.ColumnHeaderCell`.                                                                    |
+
+`Table.SortTrigger` is the public sorting opt-in. Compose it inside `Table.ColumnHeaderCell` when the owning column should be sortable.
 
 `Table.ColumnResizer` is the public resize opt-in. Compose it inside `Table.ColumnHeaderCell` when the owning column should be resizable.
 

package/dist/table/column/table-column.svelte

@@ -5,7 +5,6 @@
 
 	let {
 		id,
-		allowsSorting = false,
 		isRowHeader = false,
 		textValue,
 		width,
@@ -28,9 +27,6 @@
 		get id() {
 			return id;
 		},
-		get allowsSorting() {
-			return allowsSorting;
-		},
 		get isHidden() {
 			return table.isColumnHidden(id);
 		},
@@ -58,7 +54,6 @@
 		table.registerColumn({
 			token,
 			id,
-			allowsSorting,
 			isRowHeader,
 			textValue,
 			width,

package/dist/table/column-header-cell/README.md

@@ -7,7 +7,7 @@
 ### Table.ColumnHeaderCell
 
 Name: `Table.ColumnHeaderCell`
-Description: Focusable header cell for a column. It participates in roving focus and toggles sorting when the wrapping `Table.Column` allows it.
+Description: Focusable header cell for a column. It participates in roving focus, exposes `aria-sort` when a nested `Table.SortTrigger` is present, and can host additional header actions.
 
 Public prop type: `TableColumnHeaderCellProps`
 

package/dist/table/column-header-cell/table-column-header-cell.svelte

@@ -109,6 +109,11 @@
 		void $layoutVersion;
 		return table.getVisibleColumnIndexByToken(column.token);
 	});
+	const isSortable = $derived.by(() => {
+		void $layoutVersion;
+		void $sortVersion;
+		return table.isColumnSortable(column.id);
+	});
 	const headerTabIndex = $derived.by(() => {
 		if (isHidden || focusDelegate) return undefined;
 		return table.isCellTabStop(key) ? 0 : -1;
@@ -173,12 +178,7 @@
 
 	function handleClick() {
 		table.focusCellByKey(key);
-		if (table.consumeHeaderClickSuppression()) {
-			return;
-		}
-		if (column.allowsSorting) {
-			table.toggleSort(column.id);
-		}
+		table.consumeHeaderClickSuppression();
 	}
 
 	function handleMouseDown(event: MouseEvent) {
@@ -230,13 +230,6 @@
 				event.preventDefault();
 				table.moveToRowEnd();
 				return;
-			case 'Enter':
-			case ' ':
-				if (!column.allowsSorting) return;
-				event.preventDefault();
-				if (event.repeat) return;
-				table.toggleSort(column.id);
-				return;
 		}
 	}
 </script>
@@ -248,12 +241,12 @@
 	tabindex={headerTabIndex}
 	aria-colindex={!isHidden && visibleColumnIndex >= 0 ? visibleColumnIndex + 1 : undefined}
 	aria-hidden={isHidden ? true : undefined}
-	aria-sort={column.allowsSorting ? (sortDirection ?? 'none') : undefined}
+	aria-sort={isSortable ? (sortDirection ?? 'none') : undefined}
 	data-focused={isFocused ? 'true' : undefined}
 	data-focus-visible={isFocusVisible ? 'true' : undefined}
 	data-focus-within={isFocusWithin ? 'true' : undefined}
 	data-focus-visible-within={isFocusVisibleWithin ? 'true' : undefined}
-	data-sortable={column.allowsSorting || undefined}
+	data-sortable={isSortable || undefined}
 	data-sort-direction={sortDirection}
 	data-column-index={visibleColumnIndex >= 0 ? visibleColumnIndex : undefined}
 	style:box-sizing="border-box"

package/dist/table/column-resizer/table-column-resizer-test.svelte

@@ -37,10 +37,12 @@
 					</div>
 				</Table.ColumnHeaderCell>
 			</Table.Column>
-			<Table.Column id="group" allowsSorting textValue="Group" minWidth={100} maxWidth={260}>
+			<Table.Column id="group" textValue="Group" minWidth={100} maxWidth={260}>
 				<Table.ColumnHeaderCell data-testid="group-header-cell">
 					<div class="flex items-center justify-between gap-3">
-						<span>Group</span>
+						<Table.SortTrigger>
+							<button type="button" data-testid="group-sort-trigger">Group</button>
+						</Table.SortTrigger>
 						<Table.ColumnResizer
 							data-testid="group-resizer"
 							class="inline-flex w-3 cursor-col-resize justify-center"

package/dist/table/column-resizer/table-column-resizer.svelte

@@ -365,6 +365,12 @@
 
 		const handlePointerCancel = (cancelEvent: PointerEvent) => {
 			if (cancelEvent.pointerId !== pointerId) return;
+			cancelPointerResize();
+		};
+
+		function cancelPointerResize(event?: Event) {
+			event?.preventDefault();
+			event?.stopPropagation();
 			clearRecentClickCandidate();
 			if (animationFrameId !== null) {
 				cancelAnimationFrame(animationFrameId);
@@ -376,21 +382,20 @@
 				updateWidth(startWidth);
 			}
 			cleanupPointerListeners();
-		};
+		}
 
 		const handleWindowKeyDown = (keyEvent: KeyboardEvent) => {
 			if (keyEvent.key !== 'Escape') return;
-			keyEvent.preventDefault();
-			keyEvent.stopPropagation();
-			clearRecentClickCandidate();
-			if (animationFrameId !== null) {
-				cancelAnimationFrame(animationFrameId);
-				animationFrameId = null;
-			}
-			if (didStartResize) {
-				updateWidth(startWidth);
-			}
-			cleanupPointerListeners();
+			cancelPointerResize(keyEvent);
+		};
+
+		const handleContextMenu = (menuEvent: MouseEvent) => {
+			if (!didStartResize && !didDrag) return;
+			cancelPointerResize(menuEvent);
+		};
+
+		const handleWindowBlur = () => {
+			cancelPointerResize();
 		};
 
 		// With pointer capture active the browser routes all pointer events for
@@ -401,6 +406,8 @@
 		window.addEventListener('pointerup', handlePointerUp);
 		window.addEventListener('pointercancel', handlePointerCancel);
 		window.addEventListener('keydown', handleWindowKeyDown, true);
+		window.addEventListener('contextmenu', handleContextMenu, true);
+		window.addEventListener('blur', handleWindowBlur);
 		removeListeners = () => {
 			if (animationFrameId !== null) {
 				cancelAnimationFrame(animationFrameId);
@@ -415,6 +422,8 @@
 			window.removeEventListener('pointerup', handlePointerUp);
 			window.removeEventListener('pointercancel', handlePointerCancel);
 			window.removeEventListener('keydown', handleWindowKeyDown, true);
+			window.removeEventListener('contextmenu', handleContextMenu, true);
+			window.removeEventListener('blur', handleWindowBlur);
 		};
 	}
 

package/dist/table/index.d.ts

@@ -1,5 +1,5 @@
 export * as Table from './index.parts.js';
-export type { TableBodyProps, TableCellProps, TableCheckboxIndicatorProps, TableCheckboxProps, TableColumnHeaderCellProps, TableColumnProps, TableColumnResizerProps, TableEmptyStateProps, TableFooterProps, TableHeaderProps, TableRowProps, TableRootProps } from './types.js';
+export type { TableBodyProps, TableCellProps, TableCheckboxIndicatorProps, TableCheckboxProps, TableColumnHeaderCellProps, TableColumnProps, TableColumnResizerProps, TableSortTriggerRenderState, TableSortTriggerProps, TableEmptyStateProps, TableFooterProps, TableHeaderProps, TableRowProps, TableRootProps } from './types.js';
 export { default as TableRoot } from './root/table-root.svelte';
 export { default as TableColumn } from './column/table-column.svelte';
 export { default as TableHeader } from './header/table-header.svelte';
@@ -8,6 +8,7 @@ export { default as TableEmptyState } from './empty-state/table-empty-state.svel
 export { default as TableFooter } from './footer/table-footer.svelte';
 export { default as TableRow } from './row/table-row.svelte';
 export { default as TableColumnHeaderCell } from './column-header-cell/table-column-header-cell.svelte';
+export { default as TableSortTrigger } from './sort-trigger/table-sort-trigger.svelte';
 export { default as TableColumnResizer } from './column-resizer/table-column-resizer.svelte';
 export { default as TableCheckbox } from './checkbox/table-checkbox.svelte';
 export { default as TableCheckboxIndicator } from './checkbox-indicator/table-checkbox-indicator.svelte';

package/dist/table/index.js

@@ -7,6 +7,7 @@ export { default as TableEmptyState } from './empty-state/table-empty-state.svel
 export { default as TableFooter } from './footer/table-footer.svelte';
 export { default as TableRow } from './row/table-row.svelte';
 export { default as TableColumnHeaderCell } from './column-header-cell/table-column-header-cell.svelte';
+export { default as TableSortTrigger } from './sort-trigger/table-sort-trigger.svelte';
 export { default as TableColumnResizer } from './column-resizer/table-column-resizer.svelte';
 export { default as TableCheckbox } from './checkbox/table-checkbox.svelte';
 export { default as TableCheckboxIndicator } from './checkbox-indicator/table-checkbox-indicator.svelte';

package/dist/table/index.parts.d.ts

@@ -6,6 +6,7 @@ export { default as EmptyState } from './empty-state/table-empty-state.svelte';
 export { default as Footer } from './footer/table-footer.svelte';
 export { default as Row } from './row/table-row.svelte';
 export { default as ColumnHeaderCell } from './column-header-cell/table-column-header-cell.svelte';
+export { default as SortTrigger } from './sort-trigger/table-sort-trigger.svelte';
 export { default as ColumnResizer } from './column-resizer/table-column-resizer.svelte';
 export { default as Checkbox } from './checkbox/table-checkbox.svelte';
 export { default as CheckboxIndicator } from './checkbox-indicator/table-checkbox-indicator.svelte';

package/dist/table/index.parts.js

@@ -6,6 +6,7 @@ export { default as EmptyState } from './empty-state/table-empty-state.svelte';
 export { default as Footer } from './footer/table-footer.svelte';
 export { default as Row } from './row/table-row.svelte';
 export { default as ColumnHeaderCell } from './column-header-cell/table-column-header-cell.svelte';
+export { default as SortTrigger } from './sort-trigger/table-sort-trigger.svelte';
 export { default as ColumnResizer } from './column-resizer/table-column-resizer.svelte';
 export { default as Checkbox } from './checkbox/table-checkbox.svelte';
 export { default as CheckboxIndicator } from './checkbox-indicator/table-checkbox-indicator.svelte';

package/dist/table/root/context.d.ts

@@ -37,7 +37,6 @@ export type TableRowFocusEdge = 'start' | 'end';
 type TableColumnMetadata = {
     token: string;
     id: string;
-    allowsSorting: boolean;
     isRowHeader: boolean;
     textValue?: string;
     width?: TableColumnWidth;
@@ -113,6 +112,8 @@ export type TableContext = {
     hasAuthoredColumnWidthSpec: (columnId: string) => boolean;
     getColumnMinWidth: (columnId: string) => number | undefined;
     getColumnMaxWidth: (columnId: string) => number | undefined;
+    registerColumnSortTrigger: (columnToken: string) => void;
+    unregisterColumnSortTrigger: (columnToken: string) => void;
     isColumnHidden: (columnId: string) => boolean;
     isColumnResizable: (columnId: string) => boolean;
     getColumnWidths: () => Map<string, TableColumnWidth>;
@@ -193,7 +194,6 @@ export type TableRowContext = {
 export type TableColumnContext = {
     token: string;
     id: string;
-    allowsSorting: boolean;
     isHidden: boolean;
     isRowHeader: boolean;
     textValue?: string;

package/dist/table/root/context.js

@@ -66,6 +66,7 @@ export function createTableContext(options = {}) {
     const columns = new Map();
     const columnIds = new Map();
     const columnOrder = [];
+    const columnsWithSortTriggers = new Set();
     const columnsWithResizers = new Set();
     let resizerLayoutReady = false;
     const columnWidths = new Map(options.initialColumnWidths ?? []);
@@ -95,6 +96,7 @@ export function createTableContext(options = {}) {
     const resizeVersion = writable(0);
     const instanceCounters = new Map();
     const selectionUnavailableDescriptionId = createInstanceToken('selection-unavailable');
+    setSelectedKeys(new Set(selectedKeys), selectionAnchorKey);
     function createInstanceToken(prefix) {
         const nextCount = (instanceCounters.get(prefix) ?? 0) + 1;
         instanceCounters.set(prefix, nextCount);
@@ -351,7 +353,6 @@ export function createTableContext(options = {}) {
     function sameColumnMetadata(left, right) {
         return (left.token === right.token &&
             left.id === right.id &&
-            left.allowsSorting === right.allowsSorting &&
             left.isRowHeader === right.isRowHeader &&
             left.textValue === right.textValue &&
             left.width === right.width &&
@@ -396,6 +397,7 @@ export function createTableContext(options = {}) {
             columnIds.delete(column.id);
         }
         columns.delete(token);
+        columnsWithSortTriggers.delete(token);
         columnsWithResizers.delete(token);
         const index = columnOrder.indexOf(token);
         if (index >= 0) {
@@ -403,6 +405,17 @@ export function createTableContext(options = {}) {
         }
         notifyLayout();
     }
+    function registerColumnSortTrigger(columnToken) {
+        if (columnsWithSortTriggers.has(columnToken))
+            return;
+        columnsWithSortTriggers.add(columnToken);
+        notifyLayout();
+    }
+    function unregisterColumnSortTrigger(columnToken) {
+        if (!columnsWithSortTriggers.delete(columnToken))
+            return;
+        notifyLayout();
+    }
     function getOrderedColumnTokens() {
         if (orderedColumnTokensCache)
             return orderedColumnTokensCache;
@@ -1888,7 +1901,8 @@ export function createTableContext(options = {}) {
         notifySort();
     }
     function isColumnSortable(columnId) {
-        return getColumnRegistrationById(columnId)?.allowsSorting ?? false;
+        const token = columnIds.get(columnId);
+        return token ? columnsWithSortTriggers.has(token) : false;
     }
     function toggleSort(columnId) {
         if (!isColumnSortable(columnId))
@@ -1945,6 +1959,8 @@ export function createTableContext(options = {}) {
         },
         registerColumn,
         unregisterColumn,
+        registerColumnSortTrigger,
+        unregisterColumnSortTrigger,
         registerColumnResizer,
         unregisterColumnResizer,
         getColumnCount,

package/dist/table/root/table-test.svelte

@@ -117,8 +117,20 @@
 			<Table.Column id="email" isRowHeader textValue="Email">
 				<Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
 			</Table.Column>
-			<Table.Column id="group" allowsSorting textValue="Group">
-				<Table.ColumnHeaderCell>Group</Table.ColumnHeaderCell>
+			<Table.Column id="group" textValue="Group">
+				<Table.ColumnHeaderCell>
+					<Table.SortTrigger>
+						{#snippet children({ sortDirection })}
+							<button
+								type="button"
+								data-testid="group-sort-trigger"
+								data-sort-direction-state={sortDirection ?? 'none'}
+							>
+								Group
+							</button>
+						{/snippet}
+					</Table.SortTrigger>
+				</Table.ColumnHeaderCell>
 			</Table.Column>
 		</Table.Row>
 	</Table.Header>

package/dist/table/sort-trigger/README.md

@@ -0,0 +1,45 @@
+<!-- markdownlint-disable MD024 -->
+
+# Table.SortTrigger
+
+## API reference
+
+### Table.SortTrigger
+
+Name: `Table.SortTrigger`
+Description: Headless wrapper that makes the owning `Table.Column` sortable. It must be composed inside `Table.ColumnHeaderCell` and contain a `button` or `[role="button"]` child that acts as the actual trigger element.
+
+Public prop type: `TableSortTriggerProps`
+
+| Prop       | Type                                                | Default     | Description                                                                                                                |
+| ---------- | --------------------------------------------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `children` | `Snippet<[TableSortTriggerRenderState]> \| Snippet` | `undefined` | Child content that includes the actual trigger button or role=button UI. The snippet receives the current `sortDirection`. |
+
+## Usage notes
+
+- `Table.SortTrigger` must be used inside `Table.ColumnHeaderCell`.
+- Rendering `Table.SortTrigger` inside `Table.ColumnHeaderCell` is enough to make the owning `Table.Column` sortable.
+- The trigger resolves the active column from `Table.Column` context. It does not accept a separate `columnId` prop.
+- The wrapper finds the first nested `button` or `[role="button"]` and wires sorting behavior plus sort-state data attributes onto that element.
+- `children` can read the current `sortDirection` render state to adjust accessible labels or icons without reaching into `Table.Root.sortDescriptor`.
+- The header cell remains the roving-focus target for arrow-key grid navigation; use `Tab` to move into the nested trigger button.
+- Use separate controls for secondary header actions such as filter popovers or menus.
+
+```svelte
+<Table.Column id="group" textValue="Group">
+	<Table.ColumnHeaderCell>
+		<Table.SortTrigger>
+			{#snippet children({ sortDirection })}
+				<button
+					type="button"
+					class="inline-flex items-center gap-2 rounded-sm"
+					aria-label={`Group sort button. ${sortDirection ?? 'not sorted'}.`}
+				>
+					<span>Sort group</span>
+					<SortIcon data-direction={sortDirection} />
+				</button>
+			{/snippet}
+		</Table.SortTrigger>
+	</Table.ColumnHeaderCell>
+</Table.Column>
+```

package/dist/table/sort-trigger/table-sort-trigger.svelte

@@ -0,0 +1,183 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import { useTableCellContext, useTableColumnContext, useTableContext } from '../root/context';
+	import type { TableSortTriggerProps, TableSortTriggerRenderState } from '../types.js';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+
+	let { children }: TableSortTriggerProps = $props();
+
+	const table = useTableContext();
+	const column = useTableColumnContext();
+	const cell = useTableCellContext();
+	const sortVersion = table.sortVersion;
+
+	let wrapperRef = $state<HTMLElement | null>(null);
+	let activeTrigger = $state<HTMLElement | null>(null);
+
+	const sortDirection = $derived.by(() => {
+		void $sortVersion;
+		return table.getSortDirection(column.id);
+	});
+	const renderState = $derived.by<TableSortTriggerRenderState>(() => ({
+		sortDirection
+	}));
+
+	function getTriggerElement() {
+		if (!wrapperRef) return null;
+		return wrapperRef.querySelector<HTMLElement>('button, [role="button"]');
+	}
+
+	function syncTriggerMetadata(trigger: HTMLElement | null) {
+		if (!trigger) return;
+
+		if (trigger instanceof HTMLButtonElement && !trigger.hasAttribute('type')) {
+			trigger.type = 'button';
+		}
+
+		trigger.setAttribute('data-table-sort-trigger', 'true');
+		if (sortDirection) {
+			trigger.setAttribute('data-sorted', 'true');
+			trigger.setAttribute('data-sort-direction', sortDirection);
+		} else {
+			trigger.removeAttribute('data-sorted');
+			trigger.removeAttribute('data-sort-direction');
+		}
+	}
+
+	function refreshActiveTrigger() {
+		activeTrigger = getTriggerElement();
+		syncTriggerMetadata(activeTrigger);
+	}
+
+	$effect(() => {
+		table.registerColumnSortTrigger(column.token);
+		syncTriggerMetadata(activeTrigger);
+
+		return () => {
+			table.unregisterColumnSortTrigger(column.token);
+		};
+	});
+
+	function handleFocusIn(event: FocusEvent) {
+		const target = event.target instanceof HTMLElement ? event.target : activeTrigger;
+		table.setFocusedCell(cell.cellKey);
+		table.setFocusVisible(shouldShowFocusVisible(target ?? null));
+	}
+
+	function handleMouseDown(event: MouseEvent) {
+		const target = event.target as HTMLElement | null;
+		const trigger = target?.closest('button, [role="button"]') as HTMLElement | null;
+		if (!trigger || !wrapperRef?.contains(trigger)) return;
+
+		trackInteractionModality(event, trigger);
+		table.setFocusVisible(false);
+		event.stopPropagation();
+	}
+
+	function handleClick(event: MouseEvent) {
+		const target = event.target as HTMLElement | null;
+		const trigger = target?.closest('button, [role="button"]') as HTMLElement | null;
+		if (!trigger || !wrapperRef?.contains(trigger)) return;
+
+		activeTrigger = trigger;
+		syncTriggerMetadata(activeTrigger);
+		event.stopPropagation();
+		table.toggleSort(column.id);
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		const target = event.target as HTMLElement | null;
+		const trigger = target?.closest('button, [role="button"]') as HTMLElement | null;
+		if (!trigger || !wrapperRef?.contains(trigger)) return;
+
+		activeTrigger = trigger;
+		syncTriggerMetadata(activeTrigger);
+		trackInteractionModality(event, trigger);
+
+		if ((event.ctrlKey || event.metaKey) && event.key === 'Home') {
+			event.preventDefault();
+			event.stopPropagation();
+			table.moveToGridStart();
+			return;
+		}
+
+		if ((event.ctrlKey || event.metaKey) && event.key === 'End') {
+			event.preventDefault();
+			event.stopPropagation();
+			table.moveToGridEnd();
+			return;
+		}
+
+		switch (event.key) {
+			case 'ArrowUp':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('up', {
+					shiftKey: event.shiftKey,
+					ctrlKey: event.ctrlKey,
+					metaKey: event.metaKey,
+					altKey: event.altKey
+				});
+				return;
+			case 'ArrowDown':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('down', {
+					shiftKey: event.shiftKey,
+					ctrlKey: event.ctrlKey,
+					metaKey: event.metaKey,
+					altKey: event.altKey
+				});
+				return;
+			case 'ArrowLeft':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('left');
+				return;
+			case 'ArrowRight':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveFocus('right');
+				return;
+			case 'Home':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveToRowStart();
+				return;
+			case 'End':
+				event.preventDefault();
+				event.stopPropagation();
+				table.moveToRowEnd();
+				return;
+			case 'Enter':
+			case ' ':
+				event.stopPropagation();
+				return;
+		}
+	}
+
+	onMount(() => {
+		refreshActiveTrigger();
+		wrapperRef?.addEventListener('focusin', handleFocusIn);
+		wrapperRef?.addEventListener('mousedown', handleMouseDown);
+		wrapperRef?.addEventListener('click', handleClick);
+		wrapperRef?.addEventListener('keydown', handleKeyDown);
+	});
+
+	onDestroy(() => {
+		wrapperRef?.removeEventListener('focusin', handleFocusIn);
+		wrapperRef?.removeEventListener('mousedown', handleMouseDown);
+		wrapperRef?.removeEventListener('click', handleClick);
+		wrapperRef?.removeEventListener('keydown', handleKeyDown);
+	});
+</script>
+
+<div bind:this={wrapperRef} style="display: contents;">
+	{#if children}
+		{@render (children as Snippet<[TableSortTriggerRenderState]>)(renderState)}
+	{/if}
+</div>

package/dist/table/sort-trigger/table-sort-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TableSortTriggerProps } from '../types.js';
+declare const TableSortTrigger: import("svelte").Component<TableSortTriggerProps, {}, "">;
+type TableSortTrigger = ReturnType<typeof TableSortTrigger>;
+export default TableSortTrigger;

package/dist/table/types.d.ts

@@ -1,9 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-import type { TableColumnWidth, TableContext, TableDisabledBehavior, TableRowActionHandler, TableSelectionBehavior, TableSelectionKey, TableSelectionMode, TableSortDescriptor } from './root/context.js';
+import type { TableColumnWidth, TableContext, TableDisabledBehavior, TableRowActionHandler, TableSelectionBehavior, TableSelectionKey, TableSelectionMode, TableSortDirection, TableSortDescriptor } from './root/context.js';
 export type TableColumnProps = {
     id: string;
-    allowsSorting?: boolean;
     isRowHeader?: boolean;
     textValue?: string;
     width?: TableColumnWidth;
@@ -61,6 +60,12 @@ export type TableColumnHeaderCellProps = Omit<HTMLAttributes<HTMLTableCellElemen
     children?: Snippet;
     class?: string;
 };
+export type TableSortTriggerRenderState = {
+    sortDirection: TableSortDirection | undefined;
+};
+export type TableSortTriggerProps = {
+    children?: Snippet<[TableSortTriggerRenderState]> | Snippet;
+};
 export type TableColumnResizerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
     step?: number;
     shiftStep?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@human-kit/svelte-components",
-	"version": "1.0.0-alpha.19",
+	"version": "1.0.0-alpha.20",
 	"license": "MIT",
 	"type": "module",
 	"svelte": "./dist/index.js",