@stll/ui 0.18.0 → 0.20.0

package/dist/kanban/band-peek.js

@@ -1,25 +1,22 @@
 //#region src/kanban/band-peek.ts
 /**
-* The peek a collapsed band opens while a pointer rests on its folded slot,
-* as a state machine with an injectable scheduler so its timing rules can be
-* tested without a DOM.
+* The peek a collapsed band opens while a dragged card rests on its folded
+* slot, as a state machine with an injectable scheduler so its timing rules
+* can be tested without a DOM. A plain hover never peeks: the peek exists so
+* a drag can still land on a specific column inside a folded band, and the
+* board only feeds the controller drag events.
 *
-* Two rules keep a peek from fighting the pointer:
-*
-*  - A slot that appeared under the pointer does not peek. Folding a band
-*    from its caption leaves the new slot right under the cursor; the first
-*    movement there must not reopen what was just closed. The band is
-*    suppressed until the pointer leaves the slot once.
-*  - A peek ends only after the pointer has left every part of the open
-*    band for a short linger. The band renders as separate elements (its
-*    caption, then its columns in each lane), so moving from the caption
-*    down into a column crosses an element boundary; without the linger the
-*    band would fold under the pointer and the slot would peek it straight
-*    back open.
+* One rule keeps a peek from fighting the drag: it ends only after the drag
+* has left every part of the open band for a short linger. The band renders
+* as separate elements (its caption, then its columns in each lane), so
+* moving from the caption down into a column crosses an element boundary;
+* without the linger the band would fold under the card and the slot would
+* peek it straight back open. The end of the drag, wherever it lands, ends
+* the peek at once.
 */
-/** How long a pointer rests on a folded slot before the band peeks open. */
+/** How long a dragged card rests on a folded slot before the band peeks open. */
 const KANBAN_BAND_PEEK_DELAY_MS = 400;
-/** How long the pointer may be outside an open band before the peek ends. */
+/** How long the drag may be outside an open band before the peek ends. */
 const KANBAN_BAND_PEEK_LINGER_MS = 150;
 const hostScheduler = (callback, ms) => {
 	const timer = setTimeout(callback, ms);
@@ -27,7 +24,6 @@ const hostScheduler = (callback, ms) => {
 };
 const createBandPeekController = ({ onChange, delayMs = 400, lingerMs = 150, schedule = hostScheduler }) => {
 	let peekingBandId = null;
-	let suppressedBandId = null;
 	let cancelOpen = null;
 	let openingBandId = null;
 	let cancelEnd = null;
@@ -57,8 +53,8 @@ const createBandPeekController = ({ onChange, delayMs = 400, lingerMs = 150, sch
 		}
 	};
 	return {
-		slotPointerMove: (bandId) => {
-			if (suppressedBandId === bandId || peekingBandId === bandId || openingBandId === bandId) return;
+		slotDragOver: (bandId) => {
+			if (peekingBandId === bandId || openingBandId === bandId) return;
 			clearOpenTimer();
 			openingBandId = bandId;
 			cancelOpen = schedule(() => {
@@ -68,28 +64,22 @@ const createBandPeekController = ({ onChange, delayMs = 400, lingerMs = 150, sch
 				setPeeking(bandId);
 			}, delayMs);
 		},
-		slotPointerLeave: (bandId) => {
+		slotDragLeave: (bandId) => {
 			if (openingBandId === bandId) clearOpenTimer();
-			if (suppressedBandId === bandId) suppressedBandId = null;
 		},
-		openPointerEnter: (bandId) => {
+		openDragEnter: (bandId) => {
 			if (peekingBandId === bandId) clearEndTimer();
 		},
-		openPointerLeave: (bandId) => {
+		openDragLeave: (bandId) => {
 			if (peekingBandId !== bandId || cancelEnd !== null) return;
 			cancelEnd = schedule(() => {
 				cancelEnd = null;
 				setPeeking(null);
 			}, lingerMs);
 		},
-		foldedUnderPointer: (bandId) => {
-			bandFolded(bandId);
-			suppressedBandId = bandId;
-		},
 		bandFolded,
 		bandExpanded: (bandId) => {
 			if (openingBandId === bandId) clearOpenTimer();
-			if (suppressedBandId === bandId) suppressedBandId = null;
 			if (peekingBandId === bandId) {
 				clearEndTimer();
 				setPeeking(null);
@@ -97,7 +87,11 @@ const createBandPeekController = ({ onChange, delayMs = 400, lingerMs = 150, sch
 		},
 		slotUnmounted: (bandId) => {
 			if (openingBandId === bandId) clearOpenTimer();
-			if (suppressedBandId === bandId) suppressedBandId = null;
+		},
+		dragEnded: () => {
+			clearOpenTimer();
+			clearEndTimer();
+			setPeeking(null);
 		},
 		dispose: () => {
 			clearOpenTimer();

package/dist/kanban/column-header.d.ts

@@ -13,11 +13,18 @@ type KanbanColumnHeaderProps = {
   dragHandle?: ReactNode;
   /** Column menu. */
   actions?: ReactNode;
+  /** Extra classes, e.g. to opt a caller out of the default row height. */
+  className?: string;
 };
 /**
  * The column header row: one rhythm for the swatch, the name, the count, the
  * calculation, and the column's controls, so every board's header lines up.
+ *
+ * Fixed at `TOOLBAR_ROW_HEIGHT`, the same height as the page header, the view
+ * switcher, and the inspector rail's cells, so a column's top edge lines up
+ * with every other chrome row above the board. The title clips instead of
+ * wrapping so a long name can never grow the row past that height.
  */
-declare const KanbanColumnHeader: ({ swatch, title, meta, calculation, dragHandle, actions }: KanbanColumnHeaderProps) => import("react").JSX.Element;
+declare const KanbanColumnHeader: ({ swatch, title, meta, calculation, dragHandle, actions, className }: KanbanColumnHeaderProps) => import("react").JSX.Element;
 //#endregion
 export { KanbanColumnHeader, KanbanColumnHeaderProps };

package/dist/kanban/column-header.js

@@ -1,11 +1,18 @@
+import { cn } from "../lib/utils.js";
+import { TOOLBAR_ROW_HEIGHT } from "../inspector/layout-tokens.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/kanban/column-header.tsx
 /**
 * The column header row: one rhythm for the swatch, the name, the count, the
 * calculation, and the column's controls, so every board's header lines up.
+*
+* Fixed at `TOOLBAR_ROW_HEIGHT`, the same height as the page header, the view
+* switcher, and the inspector rail's cells, so a column's top edge lines up
+* with every other chrome row above the board. The title clips instead of
+* wrapping so a long name can never grow the row past that height.
 */
-const KanbanColumnHeader = ({ swatch, title, meta, calculation, dragHandle, actions }) => /* @__PURE__ */ jsxs("div", {
-	className: "flex items-center gap-2 px-3 py-2",
+const KanbanColumnHeader = ({ swatch, title, meta, calculation, dragHandle, actions, className }) => /* @__PURE__ */ jsxs("div", {
+	className: cn("flex items-center gap-2 px-3", TOOLBAR_ROW_HEIGHT, className),
 	children: [
 		swatch,
 		/* @__PURE__ */ jsxs("span", {

package/dist/kanban/drag-interactions.d.ts

@@ -1,6 +1,14 @@
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 //#region src/kanban/drag-interactions.d.ts
 type AtlaskitDraggableOptions = Parameters<typeof draggable>[0];
+/**
+ * Marks a card drag on the native `DataTransfer` so the board's native
+ * `dragover`/`dragenter`/`dragleave` listeners (which also see reorders,
+ * file drops, and any other native drag passing over the board) can tell a
+ * kanban card drag from everything else. Pragmatic's `getInitialData` never
+ * reaches those native events; only data attached this way does.
+ */
+declare const KANBAN_CARD_DRAG_MIME: "application/x-stella-kanban-card";
 type RegisterKanbanCardDragOptions = {
   /** The drag wrapper rendered by `KanbanCardShell`. */
   element: AtlaskitDraggableOptions["element"];
@@ -32,4 +40,4 @@ type RegisterKanbanBoardAutoScrollOptions = {
 /** Register horizontal auto-scroll at the board's overflow boundary. */
 declare const registerKanbanBoardAutoScroll: ({ element, sources }: RegisterKanbanBoardAutoScrollOptions) => (() => void);
 //#endregion
-export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag };
+export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag };

package/dist/kanban/drag-interactions.js

@@ -6,6 +6,14 @@ import { centerUnderPointer } from "@atlaskit/pragmatic-drag-and-drop/element/ce
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
 //#region src/kanban/drag-interactions.ts
 /**
+* Marks a card drag on the native `DataTransfer` so the board's native
+* `dragover`/`dragenter`/`dragleave` listeners (which also see reorders,
+* file drops, and any other native drag passing over the board) can tell a
+* kanban card drag from everything else. Pragmatic's `getInitialData` never
+* reaches those native events; only data attached this way does.
+*/
+const KANBAN_CARD_DRAG_MIME = "application/x-stella-kanban-card";
+/**
 * Register the standard kanban card drag source and native preview.
 *
 * Movement remains with the caller: the package does not inspect the drag data
@@ -15,6 +23,7 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
 const registerKanbanCardDrag = ({ element, getInitialData, canDrag, onDragStart, onDrop }) => draggable({
 	element,
 	getInitialData,
+	getInitialDataForExternal: () => ({ [KANBAN_CARD_DRAG_MIME]: "" }),
 	...canDrag === void 0 ? {} : { canDrag },
 	...onDragStart === void 0 ? {} : { onDragStart },
 	...onDrop === void 0 ? {} : { onDrop },
@@ -50,4 +59,4 @@ const registerKanbanBoardAutoScroll = ({ element, sources }) => {
 	}));
 };
 //#endregion
-export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag };
+export { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, registerKanbanBoardAutoScroll, registerKanbanCardDrag };

package/dist/kanban/index.d.ts

@@ -9,8 +9,8 @@ import { KanbanColumnHeader, KanbanColumnHeaderProps } from "./column-header.js"
 import { KANBAN_BOARD_COLLISION_DETECTION, KanbanCellVirtualNavigation, KanbanSortableCellPosition, KanbanVirtualScrollRequest, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
 import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanCardDragSurfaceProps, KanbanDragCancelEvent, KanbanDragEndEvent, KanbanDragHandle, KanbanDragHandleProps, KanbanDragOverEvent, KanbanDragStartEvent, KanbanSortableActivationMode, KanbanSortableBindings, KanbanSortableBoard, KanbanSortableBoardProps, KanbanSortableColumns, KanbanSortableColumnsProps, KanbanSortableList, KanbanSortableListProps, UseKanbanDropTargetOptions, UseKanbanSortableOptions, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
 import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, KanbanDirection, KanbanHorizontalEdge, getKanbanHorizontalEdge } from "./sortable-edge.js";
-import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
+import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, RegisterKanbanBoardAutoScrollOptions, RegisterKanbanCardDragOptions, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
 import { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext } from "./subgroup-board.js";
 import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./band-peek.js";
 import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext } from "./virtual-cell.js";
-export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
+export { type BuildKanbanBoardMatrixParams, type CreateKanbanDropIntentParams, KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, type KanbanBandToggleActivation, type KanbanBoardAxis, type KanbanBoardCell, type KanbanBoardColumn, type KanbanBoardCoordinate, type KanbanBoardDestination, type KanbanBoardLane, type KanbanBoardMatrix, type KanbanBuiltInGroup, KanbanCardDragSurface, type KanbanCardDragSurfaceProps, type KanbanCardFieldSelection, KanbanCardShell, type KanbanCardShellProps, KanbanCellAction, type KanbanCellActionProps, type KanbanCellVirtualNavigation, type KanbanColumnBand, KanbanColumnBandHeader, type KanbanColumnBandHeaderProps, type KanbanColumnBandSpan, KanbanColumnHeader, type KanbanColumnHeaderProps, type KanbanDirection, type KanbanDragCancelEvent, type KanbanDragEndEvent, KanbanDragHandle, type KanbanDragHandleProps, type KanbanDragOverEvent, type KanbanDragStartEvent, type KanbanDropAxisChange, type KanbanDropIntent, type KanbanGroup, type KanbanGroupOption, type KanbanGrouping, type KanbanHorizontalEdge, type KanbanSchema, type KanbanSortableActivationMode, type KanbanSortableBindings, KanbanSortableBoard, type KanbanSortableBoardProps, type KanbanSortableCellPosition, KanbanSortableColumns, type KanbanSortableColumnsProps, KanbanSortableList, type KanbanSortableListProps, type KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, type KanbanSubgroupBoardProps, type KanbanSubgroupCellContext, type KanbanSubgroupCollapsedBandCellContext, type KanbanSubgroupColumnHeaderContext, type KanbanSubgroupLaneIdentityContext, KanbanVirtualCell, type KanbanVirtualCellPagination, type KanbanVirtualCellProps, type KanbanVirtualCellSortableContext, type KanbanVirtualScrollRequest, type OrderKanbanCellsByColumnsParams, type RegisterKanbanBoardAutoScrollOptions, type RegisterKanbanCardDragOptions, type ResolveKanbanGroupValueParams, type ResolveKanbanGroupingParams, type UseKanbanDropTargetOptions, type UseKanbanSortableOptions, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };

package/dist/kanban/index.js

@@ -9,8 +9,8 @@ import { KanbanColumnHeader } from "./column-header.js";
 import { KANBAN_BOARD_COLLISION_DETECTION, kanbanKeyboardCoordinates } from "./sortable-interactions.logic.js";
 import { KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KanbanCardDragSurface, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors } from "./sortable-interactions.js";
 import { KANBAN_DIRECTIONS, KANBAN_HORIZONTAL_EDGES, getKanbanHorizontalEdge } from "./sortable-edge.js";
-import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
+import { KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_CARD_DRAG_MIME, registerKanbanBoardAutoScroll, registerKanbanCardDrag } from "./drag-interactions.js";
 import { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS } from "./band-peek.js";
 import { KanbanSubgroupBoard } from "./subgroup-board.js";
 import { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell } from "./virtual-cell.js";
-export { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };
+export { KANBAN_BAND_PEEK_DELAY_MS, KANBAN_BAND_PEEK_LINGER_MS, KANBAN_BOARD_AUTO_SCROLL_OPTIONS, KANBAN_BOARD_AUTO_SCROLL_SOURCES, KANBAN_BOARD_AXES, KANBAN_BOARD_COLLISION_DETECTION, KANBAN_CARD_DRAG_MIME, KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLLAPSED_BAND_WIDTH_PX, KANBAN_COLUMN_GAP_PX, KANBAN_COLUMN_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_PX, KANBAN_DIRECTIONS, KANBAN_DRAG_OVERLAY_Z_INDEX, KANBAN_HORIZONTAL_EDGES, KANBAN_MOUSE_ACTIVATION_DISTANCE, KANBAN_SORTABLE_ACTIVATION_MODES, KANBAN_TOUCH_ACTIVATION_CONSTRAINT, KANBAN_VIRTUAL_CELL_PAGINATION, KanbanCardDragSurface, KanbanCardShell, KanbanCellAction, KanbanColumnBandHeader, KanbanColumnHeader, KanbanDragHandle, KanbanSortableBoard, KanbanSortableColumns, KanbanSortableList, KanbanSubgroupBoard, KanbanVirtualCell, buildKanbanBoardMatrix, createKanbanDropIntent, getKanbanBoardColumnIdentity, getKanbanBoardLaneIdentity, getKanbanGroupingPropertyId, getKanbanGroups, getKanbanHorizontalEdge, hasKanbanColumnBands, isKanbanGroupingRenderable, kanbanKeyboardCoordinates, orderKanbanCellsByColumns, registerKanbanBoardAutoScroll, registerKanbanCardDrag, resolveKanbanColumnBands, resolveKanbanGroupOptions, resolveKanbanGrouping, selectKanbanCardFieldIds, selectKanbanRows, useKanbanDropTarget, useKanbanSortable, useKanbanSortableSensors };

package/dist/kanban/sortable-interactions.d.ts

@@ -40,7 +40,19 @@ type KanbanSortableBoardProps = {
   sensors?: DndContextProps["sensors"] | undefined;
   /** Overrides dnd-kit's screen-reader announcements when supplied. */
   accessibility?: DndContextProps["accessibility"] | undefined;
+  /**
+   * Fires on drag start and on every drag end or cancel; a board over a
+   * `KanbanSubgroupBoard` combines the two into that board's `isDragging`
+   * (`true` here, `false` on `onDragEnd`/`onDragCancel`).
+   */
   onDragStart?: ((event: KanbanDragStartEvent) => void) | undefined;
+  /**
+   * Fires whenever dnd-kit's collision detection changes the drop target
+   * the drag is over, `event.over` included when it becomes none. A board
+   * over a `KanbanSubgroupBoard` maps `event.over?.id ?? null` to a band id
+   * (via `KanbanSubgroupCellContext.band`, or a droppable registered for a
+   * folded band's slot) to drive that board's `dragOverBandId`.
+   */
   onDragOver?: ((event: KanbanDragOverEvent) => void) | undefined;
   onDragCancel?: ((event: KanbanDragCancelEvent) => void) | undefined;
   /** Called once mounted child drop targets can safely receive input. */

package/dist/kanban/subgroup-board.d.ts

@@ -16,6 +16,12 @@ type KanbanSubgroupCellContext<TRow> = {
   /** Number of rows in this lane/column intersection, including zero. */
   count: number;
   laneValue: string | null;
+  /**
+   * The band this cell's column belongs to, or `null` outside any band. Lets
+   * a host that drives its own drag-and-drop (see `dragOverBandId` on the
+   * board) map a cell's droppable id back to the band it should report.
+   */
+  band: KanbanColumnBand | null;
 };
 type KanbanSubgroupBandHeaderContext = {
   band: KanbanColumnBand;
@@ -31,9 +37,9 @@ type KanbanSubgroupBandHeaderContext = {
    */
   folded: boolean;
   /**
-   * A custom caption reports which way it was activated; omitting the
-   * activation is read as a pointer fold, the conservative choice for the
-   * peek that follows.
+   * A custom caption may report which way it was activated (pointer vs.
+   * keyboard); the board itself has no use for the distinction and passes
+   * it through unread, purely as information for a host's own header.
    */
   onCollapsedChange: (collapsed: boolean, activation?: KanbanBandToggleActivation) => void;
 };
@@ -82,6 +88,27 @@ type KanbanSubgroupBoardProps<TRow> = {
   formatCount?: ((count: number) => ReactNode) | undefined;
   footer?: ReactNode;
   className?: string | undefined;
+  /**
+   * The band whose folded slot (or, for a peeked band, whose open part) the
+   * host's own drag is currently over, or `null` when it is over neither.
+   * Omit (`undefined`) when the host does not drive drags itself — the
+   * board's native `dragover`/`dragenter`/`dragleave` listeners already feed
+   * the peek controller in that case. A host drives its own drag when it
+   * builds the drop targets itself (for example a `KanbanSortableBoard`,
+   * whose `onDragOver` reports the active `over` droppable); it maps that
+   * droppable back to a band id — a folded cell's context and an open
+   * cell's context (see `KanbanSubgroupCellContext.band`) both carry the
+   * band — and passes it here. The controller treats "over the band" as
+   * entering the open band when it is already peeked, and as hovering its
+   * folded slot otherwise; leaving it is reported the same way.
+   */
+  dragOverBandId?: string | null | undefined;
+  /**
+   * Whether the host's own drag (see `dragOverBandId`) is in progress.
+   * Flipping to `false` ends any peek immediately, mirroring the native
+   * `dragend`/`drop` listeners the board installs for its own drags.
+   */
+  isDragging?: boolean | undefined;
 } & KanbanSubgroupCollapseControl;
 /**
  * Reusable swimlane layout over the canonical two-axis Kanban matrix.
@@ -89,12 +116,12 @@ type KanbanSubgroupBoardProps<TRow> = {
  * Columns that carry band metadata render under a one-line band caption and
  * can be collapsed as a run: the band folds into one narrow slot in every
  * row, whose cells stay reachable (a host renders its drop target in them),
- * and peeks open while a pointer rests on it, so a drag can still land on a
- * specific column inside. Every row is laid out span by span with the same
+ * and peeks open while a dragged card rests on it, so a drag can still land
+ * on a specific column inside; a plain hover never opens it. Every row is laid out span by span with the same
  * widths, which is what keeps captions, headers, counts, and cells aligned
  * in every state; the caption line never grows past its own height, so a
  * folded band costs no vertical space.
  */
-declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
+declare const KanbanSubgroupBoard: <TRow>({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }: KanbanSubgroupBoardProps<TRow>) => import("react").JSX.Element;
 //#endregion
 export { KanbanSubgroupBandHeaderContext, KanbanSubgroupBoard, KanbanSubgroupBoardProps, KanbanSubgroupCellContext, KanbanSubgroupCollapsedBandCellContext, KanbanSubgroupColumnHeaderContext, KanbanSubgroupLaneIdentityContext };

package/dist/kanban/subgroup-board.js

@@ -2,10 +2,11 @@ import { cn } from "../lib/utils.js";
 import { DirectionalIcon } from "../components/directional-icon.js";
 import { KanbanColumnBandHeader } from "./column-band-header.js";
 import { KANBAN_COLLAPSED_BAND_WIDTH_CLASS, KANBAN_COLUMN_WIDTH_CLASS, resolveKanbanColumnBands } from "./column-bands.js";
+import { KANBAN_CARD_DRAG_MIME } from "./drag-interactions.js";
 import { createBandPeekController } from "./band-peek.js";
 import { ChevronDownIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 //#region src/kanban/subgroup-board.tsx
 const groupValueKey = (value) => value === null ? "null" : `value:${value.length}:${value}`;
 const columnKey = (column) => column.type === "group" ? `group:${groupValueKey(column.group.value)}` : `destination:${column.destination.id}`;
@@ -17,19 +18,48 @@ const rowsIn = (cells) => cells.reduce((sum, cell) => sum + cell.rows.length, 0)
 * Columns that carry band metadata render under a one-line band caption and
 * can be collapsed as a run: the band folds into one narrow slot in every
 * row, whose cells stay reachable (a host renders its drop target in them),
-* and peeks open while a pointer rests on it, so a drag can still land on a
-* specific column inside. Every row is laid out span by span with the same
+* and peeks open while a dragged card rests on it, so a drag can still land
+* on a specific column inside; a plain hover never opens it. Every row is laid out span by span with the same
 * widths, which is what keeps captions, headers, counts, and cells aligned
 * in every state; the caption line never grows past its own height, so a
 * folded band costs no vertical space.
 */
-const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className }) => {
+const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, renderCell, renderBandHeader, renderCollapsedBandCell, formatBandToggleLabel, formatCount = String, isLaneCollapsed, onLaneCollapsedChange, isBandCollapsed, onBandCollapsedChange, footer, className, dragOverBandId, isDragging }) => {
 	const [collapsedLaneValues, setCollapsedLaneValues] = useState(() => /* @__PURE__ */ new Set());
 	const [expandedEmptyLaneValues, setExpandedEmptyLaneValues] = useState(() => /* @__PURE__ */ new Set());
 	const [collapsedBandIds, setCollapsedBandIds] = useState(() => /* @__PURE__ */ new Set());
 	const [peekingBandId, setPeekingBandId] = useState(null);
 	const [peek] = useState(() => createBandPeekController({ onChange: setPeekingBandId }));
 	useEffect(() => () => peek.dispose(), [peek]);
+	useEffect(() => {
+		const end = () => peek.dragEnded();
+		window.addEventListener("dragend", end);
+		window.addEventListener("drop", end);
+		return () => {
+			window.removeEventListener("dragend", end);
+			window.removeEventListener("drop", end);
+		};
+	}, [peek]);
+	const previousDragOverBandId = useRef(null);
+	useEffect(() => {
+		if (dragOverBandId === void 0 || dragOverBandId === previousDragOverBandId.current) return;
+		const previous = previousDragOverBandId.current;
+		previousDragOverBandId.current = dragOverBandId;
+		if (previous !== null) if (peekingBandId === previous) peek.openDragLeave(previous);
+		else peek.slotDragLeave(previous);
+		if (dragOverBandId !== null) if (peekingBandId === dragOverBandId) peek.openDragEnter(dragOverBandId);
+		else peek.slotDragOver(dragOverBandId);
+	}, [
+		dragOverBandId,
+		peek,
+		peekingBandId
+	]);
+	useEffect(() => {
+		if (isDragging === false) {
+			previousDragOverBandId.current = null;
+			peek.dragEnded();
+		}
+	}, [isDragging, peek]);
 	const { cellsByLaneValue, countByColumnValue, ungroupedCells } = useMemo(() => {
 		const laneCells = /* @__PURE__ */ new Map();
 		const columnCounts = /* @__PURE__ */ new Map();
@@ -89,11 +119,9 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 	useEffect(() => {
 		if (staleBandId !== null) peek.bandExpanded(staleBandId);
 	}, [peek, staleBandId]);
-	const setBandCollapsed = (band, collapsed, activation) => {
-		const viaPointer = activation === void 0 ? true : activation.viaPointer;
-		if (!collapsed) peek.bandExpanded(band.id);
-		else if (viaPointer) peek.foldedUnderPointer(band.id);
-		else peek.bandFolded(band.id);
+	const setBandCollapsed = (band, collapsed) => {
+		if (collapsed) peek.bandFolded(band.id);
+		else peek.bandExpanded(band.id);
 		if (onBandCollapsedChange) {
 			onBandCollapsedChange(band, collapsed);
 			return;
@@ -126,11 +154,15 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 			return /* @__PURE__ */ jsx("div", {
 				className: "flex gap-3",
 				"data-kanban-band": band?.id,
-				onPointerEnter: band === null ? void 0 : () => peek.openPointerEnter(band.id),
-				onPointerLeave: band === null ? void 0 : () => peek.openPointerLeave(band.id),
+				onDragEnter: band === null ? void 0 : (event) => {
+					if (isKanbanCardDragEvent(event)) peek.openDragEnter(band.id);
+				},
+				onDragLeave: band === null ? void 0 : (event) => {
+					if (leavesElement(event) && isKanbanCardDragEvent(event)) peek.openDragLeave(band.id);
+				},
 				children: span.columns.map((column) => /* @__PURE__ */ jsx("div", {
 					className: KANBAN_COLUMN_WIDTH_CLASS,
-					children: renderColumn(column)
+					children: renderColumn(column, band)
 				}, columnKey(column)))
 			}, spanKey(span));
 		})
@@ -144,7 +176,7 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 			columns: span.columns,
 			count: span.columns.reduce((sum, column) => sum + columnCount(column), 0),
 			folded,
-			onCollapsedChange: (next, activation) => setBandCollapsed(band, next, activation)
+			onCollapsedChange: (next) => setBandCollapsed(band, next)
 		};
 		if (renderBandHeader) return /* @__PURE__ */ jsx(Fragment, { children: renderBandHeader(context) });
 		return /* @__PURE__ */ jsx(KanbanColumnBandHeader, {
@@ -214,8 +246,12 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 								className: "border-border/60 shrink-0 border-b",
 								"data-kanban-band": band.id,
 								style: { width: `${String(spanWidth(span))}px` },
-								onPointerEnter: () => peek.openPointerEnter(band.id),
-								onPointerLeave: () => peek.openPointerLeave(band.id),
+								onDragEnter: (event) => {
+									if (isKanbanCardDragEvent(event)) peek.openDragEnter(band.id);
+								},
+								onDragLeave: (event) => {
+									if (leavesElement(event) && isKanbanCardDragEvent(event)) peek.openDragLeave(band.id);
+								},
 								children: bandHeader(band, span)
 							}, spanKey(span));
 						})
@@ -229,9 +265,10 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 				}),
 				ungroupedCells.length === 0 ? null : renderRow({
 					className: "pb-1",
-					renderColumn: (column) => {
+					renderColumn: (column, band) => {
 						const cell = ungroupedCells.find((candidate) => columnKey(candidate.coordinate.column) === columnKey(column));
 						return cell === void 0 ? null : /* @__PURE__ */ jsx(Fragment, { children: renderCell({
+							band,
 							cell,
 							count: cell.rows.length,
 							laneValue: null
@@ -291,9 +328,10 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 							}),
 							!collapsed && renderRow({
 								className: "pb-1",
-								renderColumn: (column) => {
+								renderColumn: (column, band) => {
 									const cell = cellFor(column);
 									return cell === void 0 ? null : /* @__PURE__ */ jsx(Fragment, { children: renderCell({
+										band,
 										cell,
 										count: cell.rows.length,
 										laneValue: group.value
@@ -310,9 +348,20 @@ const KanbanSubgroupBoard = ({ matrix, renderColumnHeader, renderLaneIdentity, r
 	});
 };
 /**
-* The narrow slot a folded band occupies in a row. Its pointer events go to
-* the board's peek controller, which decides when a resting pointer peeks
-* the band open and keeps a slot that appeared under the pointer folded.
+* Whether a drag-leave event actually leaves `currentTarget` rather than
+* moving between its descendants, which fire leave/enter pairs of their own.
+*/
+const leavesElement = (event) => !(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget));
+/**
+* Whether a native drag event is a kanban card drag, rather than some other
+* native drag (a column reorder, a file, text) passing over the board. Only
+* a card drag should ever open or hold a band's peek.
+*/
+const isKanbanCardDragEvent = (event) => event.dataTransfer.types.includes(KANBAN_CARD_DRAG_MIME);
+/**
+* The narrow slot a folded band occupies in a row. Its drag events go to
+* the board's peek controller, which decides when a resting drag peeks the
+* band open.
 */
 const FoldedBandSlot = ({ band, children, className, peek }) => {
 	useEffect(() => () => peek.slotUnmounted(band.id), [peek, band.id]);
@@ -320,8 +369,12 @@ const FoldedBandSlot = ({ band, children, className, peek }) => {
 		className,
 		"data-kanban-band": band.id,
 		"data-kanban-band-collapsed": "",
-		onPointerMove: () => peek.slotPointerMove(band.id),
-		onPointerLeave: () => peek.slotPointerLeave(band.id),
+		onDragOver: (event) => {
+			if (isKanbanCardDragEvent(event)) peek.slotDragOver(band.id);
+		},
+		onDragLeave: (event) => {
+			if (leavesElement(event) && isKanbanCardDragEvent(event)) peek.slotDragLeave(band.id);
+		},
 		children
 	});
 };

package/dist/kanban/virtual-cell.d.ts

@@ -1,3 +1,4 @@
+import { OptionColor } from "../lib/option-color.js";
 import { UseKanbanDropTargetOptions } from "./sortable-interactions.js";
 import { Key, ReactNode, RefObject } from "react";
 import { UniqueIdentifier } from "@dnd-kit/core";
@@ -38,6 +39,14 @@ type KanbanVirtualCellProps<TRow> = {
   containerRef?: RefObject<HTMLDivElement | null> | undefined;
   active?: boolean | undefined;
   backgroundColor?: string | undefined;
+  /**
+   * Optional colour identity for the cell surface: a faint resting tint at
+   * the same alpha as `option-color`'s own subtle background, with a
+   * stronger accent-coloured wash and ring while `active` is also set. Omit
+   * for the plain neutral surface; `backgroundColor` still wins outright
+   * when both are given, since that prop is the caller's explicit override.
+   */
+  accent?: OptionColor | undefined;
   footer?: ReactNode;
   estimateSize?: number | undefined;
   overscan?: number | undefined;
@@ -45,6 +54,6 @@ type KanbanVirtualCellProps<TRow> = {
   className?: string | undefined;
 };
 /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
-declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active, backgroundColor, footer, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
+declare const KanbanVirtualCell: <TRow>({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active, backgroundColor, accent, footer, estimateSize, overscan, loadMoreThreshold, className }: KanbanVirtualCellProps<TRow>) => import("react").JSX.Element;
 //#endregion
 export { KANBAN_VIRTUAL_CELL_PAGINATION, KanbanVirtualCell, KanbanVirtualCellPagination, KanbanVirtualCellProps, KanbanVirtualCellSortableContext };

package/dist/kanban/virtual-cell.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
 import { useKanbanDropTarget } from "./sortable-interactions.js";
+import { resolveOptionColor } from "../lib/option-color.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useRef } from "react";
 import { useDndContext } from "@dnd-kit/core";
@@ -9,6 +10,18 @@ import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 const DEFAULT_ESTIMATE_SIZE_PX = 128;
 const DEFAULT_OVERSCAN = 8;
 const DEFAULT_LOAD_MORE_THRESHOLD_PX = 200;
+/** The CSS custom property every accent tint and the active accent ring are
+*  derived from, so both stay in lockstep with the resolved colour token. */
+const KANBAN_CELL_ACCENT_VAR = "--kanban-cell-accent";
+/** Faint resting wash: matches the alpha `option-color` already uses for its
+*  own subtle background token, so a tinted cell reads at the same weight as
+*  the swatch and badges that carry the same colour. */
+const KANBAN_CELL_ACCENT_RESTING_ALPHA = 12;
+/** Stronger wash while a card is dragged over an accented cell. */
+const KANBAN_CELL_ACCENT_ACTIVE_ALPHA = 22;
+/** Ring alpha for the active accent frame, well above the wash so the frame
+*  still reads as the drag-over affordance rather than more background tint. */
+const KANBAN_CELL_ACCENT_ACTIVE_RING_ALPHA = 55;
 const retainActiveSortableIndex = (range, activeIndex) => {
 	const indexes = defaultRangeExtractor(range);
 	if (activeIndex < 0 || indexes.includes(activeIndex)) return indexes;
@@ -21,7 +34,7 @@ const KANBAN_VIRTUAL_CELL_PAGINATION = {
 	CURSOR: "cursor"
 };
 /** Bounded, virtualized Kanban cell with cursor-page request deduplication. */
-const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active = false, backgroundColor, footer, estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
+const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, containerRef, active = false, backgroundColor, accent, footer, estimateSize = DEFAULT_ESTIMATE_SIZE_PX, overscan = DEFAULT_OVERSCAN, loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD_PX, className }) => {
 	const internalRef = useRef(null);
 	const fallbackDropTargetId = useId();
 	const scrollRef = internalRef;
@@ -69,12 +82,21 @@ const KanbanVirtualCell = ({ rows, getRowKey, renderRow, pagination, sortable, c
 		if (containerRef) containerRef.current = element;
 		dropTarget.setNodeRef(element);
 	};
+	const accentVariants = accent === void 0 ? void 0 : resolveOptionColor(accent);
+	const accentBackground = accentVariants === void 0 ? void 0 : `color-mix(in srgb, var(${KANBAN_CELL_ACCENT_VAR}) ${active ? KANBAN_CELL_ACCENT_ACTIVE_ALPHA : KANBAN_CELL_ACCENT_RESTING_ALPHA}%, var(--background))`;
+	const activeAccentRing = active && accentVariants !== void 0 ? `0 0 0 2px color-mix(in srgb, var(${KANBAN_CELL_ACCENT_VAR}) ${KANBAN_CELL_ACCENT_ACTIVE_RING_ALPHA}%, transparent)` : void 0;
+	const style = backgroundColor === void 0 && accentVariants === void 0 ? void 0 : {
+		backgroundColor: backgroundColor ?? accentBackground,
+		...activeAccentRing === void 0 ? void 0 : { boxShadow: activeAccentRing },
+		...accentVariants === void 0 ? void 0 : { [KANBAN_CELL_ACCENT_VAR]: accentVariants.color }
+	};
 	const content = /* @__PURE__ */ jsxs("div", {
-		className: cn("bg-muted/20 max-h-[min(60vh,40rem)] min-h-20 overflow-y-auto overscroll-y-contain rounded-xl p-2 transition-[background-color,outline-color]", active && "bg-primary/5 ring-primary/50 ring-2", className),
+		className: cn("bg-muted/20 max-h-[min(60vh,40rem)] min-h-20 overflow-y-auto overscroll-y-contain rounded-xl p-2 transition-[background-color,outline-color]", active && accentVariants === void 0 && "bg-primary/5 ring-primary/50 ring-2", className),
 		"data-kanban-cell": sortable?.dropTarget.id,
+		"data-kanban-cell-accent": accentVariants === void 0 ? void 0 : "true",
 		onScroll: handleScroll,
 		ref: setScrollElement,
-		style: backgroundColor ? { backgroundColor } : void 0,
+		style,
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "relative",
 			style: { height: virtualizer.getTotalSize() },

package/dist/lib/control-size.d.ts

@@ -5,6 +5,6 @@ declare const CONTROL_SIZE: Readonly<{
   readonly lg: "lg";
 }>;
 type ControlSize = (typeof CONTROL_SIZE)[keyof typeof CONTROL_SIZE];
-declare const CONTROL_SIZES: readonly ("default" | "lg" | "sm")[];
+declare const CONTROL_SIZES: readonly ("sm" | "default" | "lg")[];
 //#endregion
 export { CONTROL_SIZE, CONTROL_SIZES, type ControlSize };