@botiverse/raft-ui 0.58.1 → 0.59.1

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [0.59.0](https://github.com/botiverse/raft-design/compare/v0.58.1...v0.59.0) (2026-11-03)
+
+### Breaking Changes
+
+- **TableHead / TableCell**: `align` is now a variant, `"left"` (the default) or `"right"`, instead of the native HTML `align` attribute. Pass the same value to a column's heading and its cells. ([#959](https://github.com/botiverse/raft-design/pull/959))
+  - Why: a right-aligned column was set with a class on each cell, which can't move a sortable heading's label (a button filling the cell); one `align` value now aligns a heading, its cells and a sortable heading's label alike.
+  - Affects: `align="right"` sets `text-right` instead of rendering the `align` attribute; `align` no longer takes `"center"`, `"justify"` or `"char"`, and is no longer passed to the `th` or `td`.
+  - Migrate: replace `align="center"` / `"justify"` / `"char"` with a class such as `text-center`; a column aligned with a `text-right` class can pass `align="right"` to its heading and cells instead.
+  - Docs: https://raft-design.botiverse.build/components/table/#content
+
+### Added
+
+- **TableSortableHead** (`@botiverse/raft-ui/wip`, experimental, + types `TableSort`, `TableSortableHeadProps`): a column heading that sorts the rows. Its label is a button filling the cell; it sets `aria-sort` on the heading cell and draws a 12px arrow on the sorted column only, after the label or before it with `align="right"`. The sort stays in your state: pass `sort` and set it from `onSortChange`; `firstSort` (default `"ascending"`) is the direction of a first click. ([#959](https://github.com/botiverse/raft-design/pull/959))
+  - Why: the Sorting rule had no part, so each list had to build its heading's button, `aria-sort`, arrow and touch hit area itself.
+  - Affects: every sortable heading keeps the 12px arrow's room, empty when unsorted, so columns don't move when the sort changes; on a touch screen the button's hit area is 44px high.
+  - Docs: https://raft-design.botiverse.build/components/table/#sorting
+
 ## [0.58.1](https://github.com/botiverse/raft-design/compare/v0.58.0...v0.58.1) (2026-11-03)
 
 ### Fixed

package/dist/components/table/index.d.mts

@@ -1,2 +1,2 @@
-import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColgroup, TableColgroupProps, TableColumn, TableColumnProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from "./table.mjs";
-export { Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableColgroup, type TableColgroupProps, TableColumn, type TableColumnProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps };
+import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColgroup, TableColgroupProps, TableColumn, TableColumnProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, TableSort, TableSortButton, TableSortButtonProps, TableSortableHead, TableSortableHeadProps } from "./table.mjs";
+export { Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableColgroup, type TableColgroupProps, TableColumn, type TableColumnProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, type TableSort, TableSortButton, type TableSortButtonProps, TableSortableHead, type TableSortableHeadProps };

package/dist/components/table/table.d.mts

@@ -5,8 +5,62 @@ type TableProps = StyledProps<useRender.ComponentProps<"table">>;
 type TableHeaderProps = StyledProps<useRender.ComponentProps<"thead">>;
 type TableBodyProps = StyledProps<useRender.ComponentProps<"tbody">>;
 type TableRowProps = StyledProps<useRender.ComponentProps<"tr">>;
-type TableHeadProps = StyledProps<useRender.ComponentProps<"th">>;
-type TableCellProps = StyledProps<useRender.ComponentProps<"td">>;
+type TableHeadProps = Omit<StyledProps<useRender.ComponentProps<"th">>, "align"> & {
+  /**
+   * `"right"` for a right-aligned column, such as numbers. Pass the same
+   * value to the column's cells, so the heading sits over its values.
+   */
+  align?: "left" | "right";
+};
+type TableCellProps = Omit<StyledProps<useRender.ComponentProps<"td">>, "align"> & {
+  /**
+   * `"right"` for a right-aligned column, such as numbers. Pass the same
+   * value to the column's heading, so the heading sits over its values.
+   */
+  align?: "left" | "right";
+};
+type TableSort = "ascending" | "descending";
+type TableSortButtonProps = Omit<StyledProps<useRender.ComponentProps<"button">>, "aria-sort"> & {
+  /**
+   * The column's current sort, or undefined when the rows aren't sorted by
+   * it. Draws the arrow and colors the label; set the same value as
+   * `aria-sort` on the heading cell around the button (in development, a
+   * warning says when they differ).
+   */
+  sort?: TableSort;
+  /**
+   * The direction of a first click, when the rows aren't sorted by this
+   * column: `"descending"` for numbers and dates, `"ascending"` for text.
+   */
+  firstSort?: TableSort;
+  /** Called with the next direction: the reverse of `sort`, or `firstSort`. */
+  onSortChange?: (sort: TableSort) => void;
+  /**
+   * `"right"` for a right-aligned column, such as numbers: the label ends on
+   * the column's right edge and the arrow goes before it.
+   */
+  align?: "left" | "right";
+};
+type TableSortableHeadProps = Omit<StyledProps<useRender.ComponentProps<"th">>, "align" | "aria-sort"> & {
+  /**
+   * The column's current sort, or undefined when the rows aren't sorted by
+   * it. Sets `aria-sort` on the heading cell and draws the arrow.
+   */
+  sort?: TableSort;
+  /**
+   * The direction of a first click, when the rows aren't sorted by this
+   * column: `"descending"` for numbers and dates, `"ascending"` for text.
+   */
+  firstSort?: TableSort;
+  /** Called with the next direction: the reverse of `sort`, or `firstSort`. */
+  onSortChange?: (sort: TableSort) => void;
+  /**
+   * `"right"` for a right-aligned column, such as numbers: the label ends on
+   * the column's right edge and the arrow goes before it. Pass the same value
+   * to the column's cells.
+   */
+  align?: "left" | "right";
+};
 type TableColgroupProps = StyledProps<useRender.ComponentProps<"colgroup">>;
 type TableColumnProps = StyledProps<useRender.ComponentProps<"col">>;
 type TableCaptionProps = StyledProps<useRender.ComponentProps<"caption">>;
@@ -21,8 +75,33 @@ export declare function Table({ className, render, ...props }: TableProps): impo
 export declare function TableHeader({ className, render, ...props }: TableHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function TableBody({ className, render, ...props }: TableBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function TableRow({ className, render, ...props }: TableRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export declare function TableHead({ className, render, scope, ...props }: TableHeadProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export declare function TableCell({ className, render, ...props }: TableCellProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TableHead({ className, render, scope, align, ...props }: TableHeadProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * A column heading that sorts the rows (table.md, "Sorting"): a `TableHead`
+ * whose label is a `TableSortButton` filling the cell, with `aria-sort` on the
+ * cell and a 12px arrow on the sorted column only. Which column is sorted is
+ * the caller's: pass `sort` and update it from `onSortChange`. With
+ * `render={<div role="columnheader" />}` it draws a th-like cell, with the
+ * header type, line and padding, and sets no `scope`, which only a `th`
+ * takes. Native props, `className` and the ref go to the heading cell, not the
+ * button.
+ */
+export declare function TableSortableHead({ className, render, scope, sort, firstSort, onSortChange, align, children, ...props }: TableSortableHeadProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * The button of a heading that sorts, on its own, for a header row drawn
+ * without `Table` (table.md, "Sorting"): the label, the 12px arrow on the
+ * sorted column (its room kept, empty, on the others), the label's color, the
+ * touch hit area and the sort cycle. It fills the heading cell around it, so
+ * the whole cell is the target. It has no padding and no border and inherits
+ * the font: the cell sets the type, height and line and has no padding, and
+ * the row's horizontal padding goes on the button through `className`. Set
+ * `aria-sort` on that cell, which needs `role="columnheader"` inside a
+ * `role="row"` in a `role="table"` or `role="grid"`; in development a warning
+ * says when there is no such cell or its `aria-sort` isn't `sort`. Native
+ * props, `className` and the ref go to the button.
+ */
+export declare function TableSortButton({ firstSort, align, ref, ...props }: TableSortButtonProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TableCell({ className, render, align, ...props }: TableCellProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 /**
  * The table's accessible name. Render it visually or hide it with `sr-only`;
  * a table without a caption should carry `aria-label` instead.
@@ -32,4 +111,4 @@ export declare function TableCaption({ className, render, ...props }: TableCapti
 export declare function TableColgroup({ className, render, ...props }: TableColgroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function TableColumn({ className, render, ...props }: TableColumnProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 //#endregion
-export type { TableBodyProps, TableCaptionProps, TableCellProps, TableColgroupProps, TableColumnProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps };
+export type { TableBodyProps, TableCaptionProps, TableCellProps, TableColgroupProps, TableColumnProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps, TableSort, TableSortButtonProps, TableSortableHeadProps };

package/dist/components/table/table.mjs

@@ -1,4 +1,7 @@
 import { table } from "./table.recipe.mjs";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/table/table.tsx
@@ -45,8 +48,8 @@ function TableRow({ className, render, ...props }) {
 		state: { slot: "table-row" }
 	});
 }
-function TableHead({ className, render, scope = "col", ...props }) {
-	const { head } = table();
+function TableHead({ className, render, scope = "col", align = "left", ...props }) {
+	const { head } = table({ align });
 	return useRender({
 		defaultTagName: "th",
 		render,
@@ -57,8 +60,111 @@ function TableHead({ className, render, scope = "col", ...props }) {
 		state: { slot: "table-head" }
 	});
 }
-function TableCell({ className, render, ...props }) {
-	const { cell } = table();
+/**
+* A column heading that sorts the rows (table.md, "Sorting"): a `TableHead`
+* whose label is a `TableSortButton` filling the cell, with `aria-sort` on the
+* cell and a 12px arrow on the sorted column only. Which column is sorted is
+* the caller's: pass `sort` and update it from `onSortChange`. With
+* `render={<div role="columnheader" />}` it draws a th-like cell, with the
+* header type, line and padding, and sets no `scope`, which only a `th`
+* takes. Native props, `className` and the ref go to the heading cell, not the
+* button.
+*/
+function TableSortableHead({ className, render, scope, sort, firstSort = "ascending", onSortChange, align = "left", children, ...props }) {
+	const { head, sortableHead } = table({ align });
+	const button = useSortButton({
+		sort,
+		firstSort,
+		onSortChange,
+		align,
+		children
+	}, "headSortButton");
+	return useRender({
+		defaultTagName: "th",
+		render,
+		props: mergeProps({
+			scope: scope ?? (render === void 0 ? "col" : void 0),
+			"aria-sort": sort,
+			className: head({ className: sortableHead({ className }) }),
+			children: button
+		}, props),
+		state: { slot: "table-sortable-head" }
+	});
+}
+/**
+* The button of a heading that sorts, on its own, for a header row drawn
+* without `Table` (table.md, "Sorting"): the label, the 12px arrow on the
+* sorted column (its room kept, empty, on the others), the label's color, the
+* touch hit area and the sort cycle. It fills the heading cell around it, so
+* the whole cell is the target. It has no padding and no border and inherits
+* the font: the cell sets the type, height and line and has no padding, and
+* the row's horizontal padding goes on the button through `className`. Set
+* `aria-sort` on that cell, which needs `role="columnheader"` inside a
+* `role="row"` in a `role="table"` or `role="grid"`; in development a warning
+* says when there is no such cell or its `aria-sort` isn't `sort`. Native
+* props, `className` and the ref go to the button.
+*/
+function TableSortButton({ firstSort = "ascending", align = "left", ref, ...props }) {
+	const element = useRef(null);
+	const { sort } = props;
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		warnOnSortCell(element.current, sort);
+	}, [sort]);
+	return useSortButton({
+		...props,
+		firstSort,
+		align
+	}, "sortButton", ref ? [ref, element] : element);
+}
+function warnOnSortCell(button, sort) {
+	if (!button) return;
+	const cell = button.closest("[role=\"columnheader\"], th");
+	if (!cell) {
+		console.warn("raft-ui: a TableSortButton is not inside a heading cell, so screen readers never hear the sort of its column. Put it in a `th`, or in an element with role=\"columnheader\" inside a role=\"row\", and set aria-sort on that cell from the same `sort`.");
+		return;
+	}
+	const ariaSort = cell.getAttribute("aria-sort");
+	if ((ariaSort === null || ariaSort === "none" ? void 0 : ariaSort) === sort) return;
+	console.warn(`raft-ui: a TableSortButton has sort=${sort === void 0 ? "undefined" : `"${sort}"`} but its heading cell has ${ariaSort === null ? "no aria-sort" : `aria-sort="${ariaSort}"`}, so screen readers hear a different sort from the one its arrow shows. Set aria-sort={sort} on the cell.`);
+}
+function useSortButton({ className, render, sort, firstSort, onSortChange, align, children, ...props }, slot, ref) {
+	const classes = table({
+		align,
+		sorted: sort !== void 0
+	});
+	const arrow = sort ? /* @__PURE__ */ jsx(sort === "descending" ? ArrowDown : ArrowUp, {
+		"aria-hidden": true,
+		"data-slot": "table-sort-arrow",
+		className: classes.sortArrow()
+	}) : /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-slot": "table-sort-arrow-space",
+		className: classes.sortArrow()
+	});
+	const defaultProps = {
+		type: "button",
+		"data-slot": "table-sort-button",
+		className: classes[slot]({ className }),
+		onClick: () => onSortChange?.(sort ? reverseSort(sort) : firstSort),
+		children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			align === "right" ? arrow : null,
+			children,
+			align === "right" ? null : arrow
+		] })
+	};
+	return useRender({
+		defaultTagName: "button",
+		render,
+		ref,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function reverseSort(sort) {
+	return sort === "ascending" ? "descending" : "ascending";
+}
+function TableCell({ className, render, align = "left", ...props }) {
+	const { cell } = table({ align });
 	return useRender({
 		defaultTagName: "td",
 		render,
@@ -99,4 +205,4 @@ function TableColumn({ className, render, ...props }) {
 	});
 }
 //#endregion
-export { Table, TableBody, TableCaption, TableCell, TableColgroup, TableColumn, TableHead, TableHeader, TableRow };
+export { Table, TableBody, TableCaption, TableCell, TableColgroup, TableColumn, TableHead, TableHeader, TableRow, TableSortButton, TableSortableHead };

package/dist/components/table/table.recipe.mjs

@@ -1,5 +1,12 @@
 import { tv } from "../../lib/tv.mjs";
 //#region src/components/table/table.recipe.ts
+const sortButtonInteraction = [
+	"cursor-pointer rounded-sticker",
+	"hover:text-foreground",
+	"outline-none focus-visible:shadow-focus",
+	"pointer-coarse:after:absolute pointer-coarse:after:inset-x-0 pointer-coarse:after:bottom-0 pointer-coarse:after:content-['']",
+	"pointer-coarse:after:-top-[calc(--spacing(11)-100%)]"
+];
 /**
 * The settings-grade table: unified header, row separators and cell padding in
 * the shared theme language (matching the markdown table's chrome tokens).
@@ -7,25 +14,60 @@ import { tv } from "../../lib/tv.mjs";
 * `table-fixed` class when stable widths matter; the base writes no
 * `table-layout` so that override is always available.
 */
-const table = tv({ slots: {
-	root: ["w-full border-collapse caption-bottom", "font-sans text-callout text-foreground"],
-	header: [],
-	body: ["[&>tr:last-child>td]:border-b-0 [&>tr:last-child>th]:border-b-0", "[&>tr]:hover:bg-fill-subtle [&>tr]:active:bg-fill-medium"],
-	row: [
-		"not-aria-selected:not-data-[selected=true]:data-popup-open:bg-fill-subtle",
-		"not-aria-selected:not-data-[selected=true]:has-data-popup-open:bg-fill-subtle",
-		"aria-selected:bg-info-soft aria-selected:hover:bg-info-soft aria-selected:active:bg-info-soft",
-		"data-[selected=true]:bg-info-soft data-[selected=true]:hover:bg-info-soft data-[selected=true]:active:bg-info-soft"
-	],
-	head: [
-		"text-left whitespace-nowrap",
-		"border-b border-line-hairline px-3 py-2",
-		"text-footnote font-bold normal-case tracking-normal text-foreground-hint"
-	],
-	cell: ["align-top wrap-anywhere", "border-b border-line-hairline px-3 py-2"],
-	colgroup: [],
-	column: [],
-	caption: ["pt-2 text-caption text-foreground-hint"]
-} });
+const table = tv({
+	slots: {
+		root: ["w-full border-collapse caption-bottom", "font-sans text-callout text-foreground"],
+		header: [],
+		body: ["[&>tr:last-child>td]:border-b-0 [&>tr:last-child>th]:border-b-0", "[&>tr]:hover:bg-fill-subtle [&>tr]:active:bg-fill-medium"],
+		row: [
+			"not-aria-selected:not-data-[selected=true]:data-popup-open:bg-fill-subtle",
+			"not-aria-selected:not-data-[selected=true]:has-data-popup-open:bg-fill-subtle",
+			"aria-selected:bg-info-soft aria-selected:hover:bg-info-soft aria-selected:active:bg-info-soft",
+			"data-[selected=true]:bg-info-soft data-[selected=true]:hover:bg-info-soft data-[selected=true]:active:bg-info-soft"
+		],
+		head: [
+			"text-left whitespace-nowrap",
+			"border-b border-line-hairline px-3 py-2",
+			"text-footnote font-bold normal-case tracking-normal text-foreground-hint"
+		],
+		cell: ["align-top wrap-anywhere", "border-b border-line-hairline px-3 py-2"],
+		colgroup: [],
+		column: [],
+		caption: ["pt-2 text-caption text-foreground-hint"],
+		sortableHead: ["p-0"],
+		sortButton: [
+			"relative flex h-full w-full items-center gap-1",
+			"border-0 bg-transparent [font:inherit]",
+			...sortButtonInteraction
+		],
+		headSortButton: [
+			"relative flex w-full items-center gap-1",
+			"border-0 bg-transparent px-3 py-2 [font:inherit]",
+			...sortButtonInteraction
+		],
+		sortArrow: ["size-3 shrink-0"]
+	},
+	variants: {
+		align: {
+			left: {},
+			right: {
+				head: "text-right",
+				cell: "text-right",
+				sortButton: "justify-end",
+				headSortButton: "justify-end"
+			}
+		},
+		sorted: {
+			true: {
+				sortButton: "text-foreground",
+				headSortButton: "text-foreground"
+			},
+			false: {
+				sortButton: "text-foreground-hint",
+				headSortButton: "text-foreground-hint"
+			}
+		}
+	}
+});
 //#endregion
 export { table };

package/dist/wip.d.mts

@@ -16,6 +16,8 @@ import { MessageQuotedPreviewAuthorDelegatedBy, MessageQuotedPreviewAuthorDelega
 import "./components/message-quoted-preview/index.mjs";
 import { MessageListJumpControls, MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillDismissProps, MessageListJumpPillGroup, MessageListJumpPillGroupProps, MessageListJumpPillProps } from "./components/message-list/message-list-jump.mjs";
 import "./components/message-list/index.mjs";
+import { TableSort, TableSortButton, TableSortButtonProps, TableSortableHead, TableSortableHeadProps } from "./components/table/table.mjs";
+import "./components/table/index.mjs";
 import { DEFAULT_DRAG_MESSAGES, DragAnnouncementSource, DragMessages, DragNamed, DragPlace, createDragAnnouncements, dragInstructions, dragMessages } from "./components/drag/drag-announcements.mjs";
 import { PanelSplitAction, PanelSplitActionMain, PanelSplitActionMainProps, PanelSplitActionMenu, PanelSplitActionMenuProps, PanelSplitActionProps, PanelSplitActionToggle, PanelSplitActionToggleProps } from "./components/panel/panel-split-action.mjs";
 import "./components/panel/index.mjs";
@@ -62,4 +64,4 @@ import { SaveStatus, SaveStatusError, SaveStatusErrorProps, SaveStatusProps, Sav
 import "./components/save-status/index.mjs";
 import { TaskCompletionControl, TaskCompletionControlProps } from "./components/task-completion-control/task-completion-control.mjs";
 import "./components/task-completion-control/index.mjs";
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, type AvatarGroupButtonProps, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, type DialogCommitProps, DialogFooterNote, type DialogFooterNoteProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, FilterChip, FilterChipLabel, type FilterChipLabelProps, type FilterChipProps, FilterChipRemove, type FilterChipRemoveProps, type HoldThenMoveOptions, HoldThenMoveTouchSensor, InboxItemLeadingBadge, type InboxItemLeadingBadgeProps, InboxItemSkeleton, InboxItemSkeletonList, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, LIFT_CLASS, ListRowSkeleton, type ListRowSkeletonProps, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, ModeBar, ModeBarAction, type ModeBarActionProps, ModeBarContent, type ModeBarContentProps, ModeBarDescription, type ModeBarDescriptionProps, type ModeBarProps, ModeBarTitle, type ModeBarTitleProps, MouseOnlyPointerSensor, ORIGIN_OPACITY, type OverlayLayerKind, OverlayLayerProvider, type OverlayLayerProviderProps, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, SaveStatus, SaveStatusError, type SaveStatusErrorProps, type SaveStatusProps, SaveStatusSaved, type SaveStatusSavedProps, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, TaskCompletionControl, type TaskCompletionControlProps, type UseCommentMarginFitsOptions, type UseDragListsOptions, type UsePullToRefreshOptions, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, type AvatarGroupButtonProps, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, type ChoiceListGroup, type ChoiceListItem, type ChoiceListMultipleProps, type ChoiceListProps, type ChoiceListSingleProps, ComboboxSelect, type ComboboxSelectGroup, type ComboboxSelectMessages, type ComboboxSelectOption, type ComboboxSelectProps, type ComboboxSelectSelection, type ComboboxSelectValue, CommentCard, CommentCardMeta, type CommentCardMetaProps, type CommentCardProps, CommentCardQuote, type CommentCardQuoteProps, CommentCardTrigger, type CommentCardTriggerProps, CommentEntry, CommentEntryAuthor, type CommentEntryAuthorProps, CommentEntryBody, type CommentEntryBodyProps, CommentEntryHeader, type CommentEntryHeaderProps, type CommentEntryProps, CommentEntryTime, type CommentEntryTimeProps, CommentMargin, CommentMarginItem, type CommentMarginItemProps, type CommentMarginLayout, type CommentMarginLayoutItem, type CommentMarginLayoutOptions, type CommentMarginProps, CommentMarker, type CommentMarkerProps, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, type DialogCommitProps, DialogFooterNote, type DialogFooterNoteProps, DialogSheetBack, type DialogSheetBackProps, DialogSheetContent, type DialogSheetContentProps, type DragAcrossLists, type DragAnnouncementSource, DragLift, type DragLiftProps, type DragListsItems, DragLiveRegion, type DragMessages, type DragNamed, type DragPlace, DragRefusalHint, type DragRefusalHintProps, DragRemeasure, type DragRemeasureProps, type DragSensorsOptions, DraggedSlot, type DraggedSlotProps, DropPlaceholder, type DropPlaceholderProps, DropdownMenuLinkItem, type DropdownMenuLinkItemProps, Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, FilterChip, FilterChipLabel, type FilterChipLabelProps, type FilterChipProps, FilterChipRemove, type FilterChipRemoveProps, type HoldThenMoveOptions, HoldThenMoveTouchSensor, InboxItemLeadingBadge, type InboxItemLeadingBadgeProps, InboxItemSkeleton, InboxItemSkeletonList, type InboxItemSkeletonListProps, type InboxItemSkeletonProps, LIFT_CLASS, ListRowSkeleton, type ListRowSkeletonProps, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, type MessageItemDelegatedAvatarProps, MessageItemDelegatedBy, MessageItemDelegatedByButton, type MessageItemDelegatedByButtonProps, MessageItemDelegatedByName, type MessageItemDelegatedByNameProps, type MessageItemDelegatedByProps, MessageListJumpControls, type MessageListJumpControlsProps, MessageListJumpPill, MessageListJumpPillDismiss, type MessageListJumpPillDismissProps, MessageListJumpPillGroup, type MessageListJumpPillGroupProps, type MessageListJumpPillProps, MessageQuotedPreviewAuthorDelegatedBy, type MessageQuotedPreviewAuthorDelegatedByProps, MessageReferenceIcon, type MessageReferenceIconProps, MessageReferenceReadMark, type MessageReferenceReadMarkProps, Meter, MeterHeader, type MeterHeaderProps, MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, type MeterProps, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps, MobileNavServerItem, type MobileNavServerItemProps, MobileNavServerPopover, MobileNavServerPopoverContent, type MobileNavServerPopoverContentProps, MobileNavServerPopoverDestination, type MobileNavServerPopoverDestinationProps, MobileNavServerPopoverDestinations, type MobileNavServerPopoverDestinationsProps, MobileNavServerPopoverGroup, type MobileNavServerPopoverGroupProps, MobileNavServerPopoverList, type MobileNavServerPopoverListProps, type MobileNavServerPopoverProps, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, type MobileNavServerPopoverRowBodyProps, MobileNavServerPopoverRowDescription, type MobileNavServerPopoverRowDescriptionProps, MobileNavServerPopoverRowLabel, type MobileNavServerPopoverRowLabelProps, type MobileNavServerPopoverRowProps, ModeBar, ModeBarAction, type ModeBarActionProps, ModeBarContent, type ModeBarContentProps, ModeBarDescription, type ModeBarDescriptionProps, type ModeBarProps, ModeBarTitle, type ModeBarTitleProps, MouseOnlyPointerSensor, ORIGIN_OPACITY, type OverlayLayerKind, OverlayLayerProvider, type OverlayLayerProviderProps, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, type PanelSplitActionMainProps, PanelSplitActionMenu, type PanelSplitActionMenuProps, type PanelSplitActionProps, PanelSplitActionToggle, type PanelSplitActionToggleProps, PopoverActions, type PopoverActionsProps, PopoverBody, type PopoverBodyProps, PreviewCardActions, type PreviewCardActionsProps, PreviewCardBody, type PreviewCardBodyProps, PreviewCardEyebrow, type PreviewCardEyebrowProps, PreviewCardFooter, type PreviewCardFooterProps, PreviewCardMeta, type PreviewCardMetaProps, type PullToRefresh, PullToRefreshIndicator, type PullToRefreshIndicatorProps, type PullToRefreshPlatform, type PullToRefreshState, SaveStatus, SaveStatusError, type SaveStatusErrorProps, type SaveStatusProps, SaveStatusSaved, type SaveStatusSavedProps, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, type TableSort, TableSortButton, type TableSortButtonProps, TableSortableHead, type TableSortableHeadProps, TaskCompletionControl, type TaskCompletionControlProps, type UseCommentMarginFitsOptions, type UseDragListsOptions, type UsePullToRefreshOptions, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };

package/dist/wip.mjs

@@ -12,6 +12,7 @@ import { MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegate
 import { MessageReferenceIcon, MessageReferenceReadMark } from "./components/message-item/message-reference.mjs";
 import { MessageQuotedPreviewAuthorDelegatedBy } from "./components/message-quoted-preview/message-quoted-preview.mjs";
 import { MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup } from "./components/message-list/message-list-jump.mjs";
+import { TableSortButton, TableSortableHead } from "./components/table/table.mjs";
 import { DEFAULT_DRAG_MESSAGES, createDragAnnouncements, dragInstructions, dragMessages } from "./components/drag/drag-announcements.mjs";
 import { LIFT_CLASS } from "./components/drag/drag.recipe.mjs";
 import { DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DragLift, ORIGIN_OPACITY, cancelDrag, keepGrabInside, useDragSiblingTransition } from "./components/drag/drag-lift.mjs";
@@ -42,4 +43,4 @@ import { PullToRefreshIndicator } from "./components/pull-to-refresh/pull-to-ref
 import { ChoiceList } from "./components/choice-list/choice-list.mjs";
 import { SaveStatus, SaveStatusError, SaveStatusSaved } from "./components/save-status/save-status.mjs";
 import { TaskCompletionControl } from "./components/task-completion-control/task-completion-control.mjs";
-export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemSkeleton, InboxItemSkeletonList, LIFT_CLASS, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, SaveStatus, SaveStatusError, SaveStatusSaved, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, TaskCompletionControl, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };
+export { Dialog as AnnouncementDialog, AnnouncementDialogAction, AnnouncementDialogBody, DialogClose as AnnouncementDialogClose, AnnouncementDialogContent, AnnouncementDialogFooter, AnnouncementDialogHeader, AnnouncementDialogLabel, AnnouncementDialogPicture, AnnouncementDialogSecondaryAction, AnnouncementDialogText, AnnouncementDialogTitle, DialogTrigger as AnnouncementDialogTrigger, AvatarGroupButton, COMMENT_HIGHLIGHT, COMMENT_HIGHLIGHT_ACTIVE, ChoiceList, ComboboxSelect, CommentCard, CommentCardMeta, CommentCardQuote, CommentCardTrigger, CommentEntry, CommentEntryAuthor, CommentEntryBody, CommentEntryHeader, CommentEntryTime, CommentMargin, CommentMarginItem, CommentMarker, DEFAULT_DRAG_MESSAGES, DRAG_AUTO_SCROLL_ZONE_PX, DRAG_KEYBOARD_CODES, DRAG_KEYBOARD_OFFSET_PX, DRAG_LIFT_Z_INDEX, DRAG_SETTLE, DRAG_SIBLING_TRANSITION, DROP_GLIDE, DialogCommit, DialogFooterNote, DialogSheetBack, DialogSheetContent, DragLift, DragLiveRegion, DragRefusalHint, DragRemeasure, DraggedSlot, DropPlaceholder, DropdownMenuLinkItem, Ellipsis, EllipsisToggle, FilterChip, FilterChipLabel, FilterChipRemove, HoldThenMoveTouchSensor, InboxItemLeadingBadge, InboxItemSkeleton, InboxItemSkeletonList, LIFT_CLASS, ListRowSkeleton, MOUSE_DRAG_DISTANCE_PX, MessageItemDelegatedAvatar, MessageItemDelegatedBy, MessageItemDelegatedByButton, MessageItemDelegatedByName, MessageListJumpControls, MessageListJumpPill, MessageListJumpPillDismiss, MessageListJumpPillGroup, MessageQuotedPreviewAuthorDelegatedBy, MessageReferenceIcon, MessageReferenceReadMark, Meter, MeterHeader, MeterIndicator, MeterLabel, MeterTrack, MeterValue, MobileNavServerItem, MobileNavServerPopover, MobileNavServerPopoverContent, MobileNavServerPopoverDestination, MobileNavServerPopoverDestinations, MobileNavServerPopoverGroup, MobileNavServerPopoverList, MobileNavServerPopoverRow, MobileNavServerPopoverRowBody, MobileNavServerPopoverRowDescription, MobileNavServerPopoverRowLabel, ModeBar, ModeBarAction, ModeBarContent, ModeBarDescription, ModeBarTitle, MouseOnlyPointerSensor, ORIGIN_OPACITY, OverlayLayerProvider, PULL_TO_REFRESH_DAMPING, PULL_TO_REFRESH_HOLD_DISTANCE, PULL_TO_REFRESH_MAX_DISTANCE, PULL_TO_REFRESH_POINTER_QUERY, PULL_TO_REFRESH_SNAP_BACK_MS, PULL_TO_REFRESH_THRESHOLD, PanelSplitAction, PanelSplitActionMain, PanelSplitActionMenu, PanelSplitActionToggle, PopoverActions, PopoverBody, PreviewCardActions, PreviewCardBody, PreviewCardEyebrow, PreviewCardFooter, PreviewCardMeta, PullToRefreshIndicator, SaveStatus, SaveStatusError, SaveStatusSaved, TOUCH_DRAG_DISTANCE_PX, TOUCH_DRAG_HOLD_MS, TOUCH_DRAG_TOLERANCE_PX, TableSortButton, TableSortableHead, TaskCompletionControl, cancelDrag, createDragAnnouncements, dragInstructions, dragListStrategy, dragMessages, keepGrabInside, listKeyboardCoordinates, resolveCommentMarginLayout, setCommentHighlights, useCommentMarginFits, useDragAcrossLists, useDragAnnouncer, useDragLists, useDragSensors, useDragSiblingTransition, useHoldThenMoveTouchSensor, useMouseOnlyPointerSensor, useParentOverlayKind, usePullToRefresh, useTruncated };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@botiverse/raft-ui",
-  "version": "0.58.1",
+  "version": "0.59.1",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",