@botiverse/raft-ui 0.58.0 → 0.59.0

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## [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
+
+- **Button**: a `loading` button keeps keyboard focus. It is `aria-disabled` and stays in the tab order instead of becoming natively `disabled`; click, Enter, Space and form submit are blocked while it runs. A `disabled` button stays natively disabled. ([#956](https://github.com/botiverse/raft-design/pull/956))
+  - Why: pressing a button that then turned busy dropped focus to the page, and it didn't come back when the request failed.
+  - Affects: every component that passes `loading` to Button (DialogCommit, AlertDialog, Dialog, Drawer, Banner, SidebarSectionControl and others). A busy button now receives pointer events: the wait cursor shows, and a wrapping Tooltip opens on hover. Its look is unchanged.
+  - Docs: https://raft-design.botiverse.build/components/button/
+
+### Docs
+
+- **Table**: a Sorting section on sorting rows from a column heading. ([#954](https://github.com/botiverse/raft-design/pull/954))
+
 ## [0.58.0](https://github.com/botiverse/raft-design/compare/v0.57.2...v0.58.0) (2026-11-03)
 
 ### Added

package/dist/components/button/button.d.mts

@@ -249,9 +249,16 @@ export type ButtonProps = StyledProps<Button.Props> & Omit<ButtonVariantProps, "
    * `icon-md`, removed in raft-ui 1.0 (`codemods/button-sizes.mjs`).
    */
   size?: "md" | "lg" | "xl" | "icon-md" | "icon-lg" | DeprecatedButtonSize;
+  /**
+   * Busy: shows the spinner and blocks activation (click, Enter, Space and
+   * form submission) while keeping the button focusable. A busy button is
+   * `aria-disabled`, not natively `disabled`, so the focus a press left on
+   * it stays there and is still there when the wait ends.
+   */
   loading?: boolean;
+  /** The spinner's accessible name while `loading`: say what is happening. */
   loadingLabel?: string;
 };
-declare function Button$1({ variant, size, loading, loadingLabel, disabled, className, children, render, nativeButton, ...props }: ButtonProps): import("react").JSX.Element;
+declare function Button$1({ variant, size, loading, loadingLabel, disabled, focusableWhenDisabled, className, children, render, nativeButton, ...props }: ButtonProps): import("react").JSX.Element;
 //#endregion
 export { Button$1 as Button };

package/dist/components/button/button.mjs

@@ -146,7 +146,7 @@ const ICON_SIZES = /* @__PURE__ */ new Set([
 	"icon-md",
 	"icon-lg"
 ]);
-function Button$1({ variant, size, loading = false, loadingLabel = "Loading", disabled, className, children, render, nativeButton, ...props }) {
+function Button$1({ variant, size, loading = false, loadingLabel = "Loading", disabled, focusableWhenDisabled, className, children, render, nativeButton, ...props }) {
 	const { root, content, loadingIndicator } = buttonVariants({
 		variant,
 		size
@@ -160,6 +160,7 @@ function Button$1({ variant, size, loading = false, loadingLabel = "Loading", di
 		className: root({ className }),
 		"data-loading": loading ? "true" : void 0,
 		disabled: disabled || loading,
+		focusableWhenDisabled: loading && !disabled || focusableWhenDisabled,
 		...loading ? { "aria-disabled": true } : {},
 		children: [loading ? /* @__PURE__ */ jsx("span", {
 			"data-slot": "button-loading-indicator",

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, 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, TableSortableHead, type TableSortableHeadProps };

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

@@ -5,8 +5,41 @@ 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 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 +54,18 @@ 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 button 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`. In a header row
+ * drawn without `Table`, pass `render={<div role="columnheader" />}`; with
+ * `render` it 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>>;
+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 +75,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, TableSortableHeadProps };

package/dist/components/table/table.mjs

@@ -1,4 +1,6 @@
 import { table } from "./table.recipe.mjs";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { 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 +47,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 +59,57 @@ 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 button 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`. In a header row
+* drawn without `Table`, pass `render={<div role="columnheader" />}`; with
+* `render` it 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, sortButton, sortArrow } = table({
+		align,
+		sorted: sort !== void 0
+	});
+	const arrow = sort ? /* @__PURE__ */ jsx(sort === "descending" ? ArrowDown : ArrowUp, {
+		"aria-hidden": true,
+		"data-slot": "table-sort-arrow",
+		className: sortArrow()
+	}) : /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		"data-slot": "table-sort-arrow-space",
+		className: sortArrow()
+	});
+	const button = /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"data-slot": "table-sort-button",
+		className: sortButton(),
+		onClick: () => onSortChange?.(sort ? reverseSort(sort) : firstSort),
+		children: [
+			align === "right" ? arrow : null,
+			children,
+			align === "right" ? null : arrow
+		]
+	});
+	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" }
+	});
+}
+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 +150,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, TableSortableHead };

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

@@ -7,25 +7,52 @@ 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 w-full items-center gap-1",
+			"border-0 bg-transparent px-3 py-2 [font:inherit]",
+			"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%)]"
+		],
+		sortArrow: ["size-3 shrink-0"]
+	},
+	variants: {
+		align: {
+			left: {},
+			right: {
+				head: "text-right",
+				cell: "text-right",
+				sortButton: "justify-end"
+			}
+		},
+		sorted: {
+			true: { sortButton: "text-foreground" },
+			false: { sortButton: "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, 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, 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 { 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, 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.0",
+  "version": "0.59.0",
   "description": "React components and CSS foundations for the Raft Design System.",
   "keywords": [
     "agent-skills",