@thebuoyant-tsdev/mui-ts-library 3.30.0 → 3.32.0

package/README.de.md

@@ -555,6 +555,27 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.32.0] — 2026-07-18
+
+**Hinzugefügt**
+- **KanbanBoard — `priority`-Feld + `showPriority`-Prop**: `priority?: "low" | "medium" | "high" | "critical"` auf `KanbanTask` — als farbiger Punkt neben dem Kartentitel. `showPriority={false}` blendet alle Punkte aus. Neuer Typ-Export: `KanbanTaskPriority`. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
+
+---
+
+### [3.31.0] — 2026-07-18
+
+**Hinzugefügt**
+- **KanbanBoard — `showDueDateWarning`**: Überfällige Karten (dueDate in der Vergangenheit) erhalten automatisch roten Chip, Hintergrundton und linken Rahmen. `showDueDateWarning={false}` zum Deaktivieren. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
+- **KanbanBoard — `width`-Prop**: `width?: number | string` (Standard `"100%"`).
+
+**Behoben**
+- **KanbanBoard — Spalten-Scroll**: Karten in einer hohen Spalte scrollen jetzt korrekt statt still abgeschnitten zu werden.
+
+**Geändert**
+- **KanbanBoard — Kartenoptik poliert**: Expliziter `1px`-Rahmen, kontrollierter Box-Shadow mit Hover-Lift, ausgeblendeter Scrollbalken, `fontWeight: 700`-Titel. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
+
+---
+
 ### [3.30.0] — 2026-07-17
 
 **Hinzugefügt**

package/README.md

@@ -555,6 +555,27 @@ This project follows [Semantic Versioning](https://semver.org/):
 
 ## Changelog
 
+### [3.32.0] — 2026-07-18
+
+**Added**
+- **KanbanBoard — `priority` field + `showPriority` prop**: `priority?: "low" | "medium" | "high" | "critical"` on `KanbanTask` — shown as a colored dot next to the card title. `showPriority={false}` to hide all dots. New type export: `KanbanTaskPriority`. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
+### [3.31.0] — 2026-07-18
+
+**Added**
+- **KanbanBoard — `showDueDateWarning`**: Overdue cards (dueDate in the past) auto-highlight with a red chip, background tint, and left border. `showDueDateWarning={false}` to opt out. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+- **KanbanBoard — `width` prop**: `width?: number | string` (default `"100%"`).
+
+**Fixed**
+- **KanbanBoard — column scroll**: Cards in a tall column now scroll correctly instead of being silently clipped.
+
+**Changed**
+- **KanbanBoard — card visual polish**: Explicit `1px` border, controlled box-shadow with hover lift, hidden scrollbar, `fontWeight: 700` title. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
+
+---
+
 ### [3.30.0] — 2026-07-17
 
 **Added**

package/dist/components/kanban-board/KanbanBoard.d.ts

@@ -1,2 +1,2 @@
 import { type KanbanBoardProps } from "./KanbanBoard.types";
-export declare function KanbanBoard({ tasks, columns, onTasksChange, onCardClick, enableBuiltinDialogs, onTaskCreated, onTaskUpdated, onTaskDeleted, onTaskMoved, showAssignee, showDueDate, chipVariant, height, translation, }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoard({ tasks, columns, onTasksChange, onCardClick, enableBuiltinDialogs, onTaskCreated, onTaskUpdated, onTaskDeleted, onTaskMoved, showPriority, showAssignee, showDueDate, showDueDateWarning, chipVariant, width, height, translation, }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/kanban-board/KanbanBoard.js

@@ -9,62 +9,62 @@ import { Box as m } from "@mui/material";
 import { useEffect as h, useState as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/kanban-board/KanbanBoard.tsx
-function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuiltinDialogs: C = !0, onTaskCreated: w, onTaskUpdated: T, onTaskDeleted: E, onTaskMoved: D, showAssignee: O = !0, showDueDate: k = !0, chipVariant: A = "outlined", height: j = "100%", translation: M }) {
-	let N = {
+function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuiltinDialogs: C = !0, onTaskCreated: w, onTaskUpdated: T, onTaskDeleted: E, onTaskMoved: D, showPriority: O = !0, showAssignee: k = !0, showDueDate: A = !0, showDueDateWarning: j = !0, chipVariant: M = "outlined", width: N = "100%", height: P = "100%", translation: F }) {
+	let I = {
 		...t,
-		...M
-	}, [P, F] = g(y);
+		...F
+	}, [L, R] = g(y);
 	h(() => {
-		F(y);
+		R(y);
 	}, [y]);
-	let [I, L] = g(null), [R, z] = g(null), B = d(u(c, { activationConstraint: { distance: 8 } }), u(s, { coordinateGetter: p }));
-	function V({ active: e }) {
-		L(P.find((t) => t.id === e.id) ?? null);
+	let [z, B] = g(null), [V, H] = g(null), U = d(u(c, { activationConstraint: { distance: 8 } }), u(s, { coordinateGetter: p }));
+	function W({ active: e }) {
+		B(L.find((t) => t.id === e.id) ?? null);
 	}
-	function H({ active: e, over: t }) {
+	function G({ active: e, over: t }) {
 		if (!t) return;
-		let n = e.id, r = t.id, i = P.find((e) => e.id === n);
+		let n = e.id, r = t.id, i = L.find((e) => e.id === n);
 		if (!i) return;
-		let a = b.find((e) => e.id === r), o = P.find((e) => e.id === r), s = a?.id ?? o?.status;
-		!s || i.status === s || F((e) => e.map((e) => e.id === n ? {
+		let a = b.find((e) => e.id === r), o = L.find((e) => e.id === r), s = a?.id ?? o?.status;
+		!s || i.status === s || R((e) => e.map((e) => e.id === n ? {
 			...e,
 			status: s
 		} : e));
 	}
-	function U({ active: e, over: t }) {
-		let n = I?.status;
-		if (L(null), !t) {
-			F(y);
+	function K({ active: e, over: t }) {
+		let n = z?.status;
+		if (B(null), !t) {
+			R(y);
 			return;
 		}
-		let r = e.id, i = t.id, a = P.findIndex((e) => e.id === r), o = P.findIndex((e) => e.id === i), s;
-		if (s = a !== -1 && o !== -1 && a !== o ? f(P, a, o) : [...P], F(s), x?.(s), n) {
+		let r = e.id, i = t.id, a = L.findIndex((e) => e.id === r), o = L.findIndex((e) => e.id === i), s;
+		if (s = a !== -1 && o !== -1 && a !== o ? f(L, a, o) : [...L], R(s), x?.(s), n) {
 			let e = s.find((e) => e.id === r);
 			e && e.status !== n && D?.(e, n, e.status);
 		}
 	}
-	function W(e) {
-		C ? z({
+	function q(e) {
+		C ? H({
 			mode: "edit",
 			task: e
 		}) : S?.(e);
 	}
-	function G(e) {
-		z({
+	function J(e) {
+		H({
 			mode: "add",
 			columnId: e
 		});
 	}
-	function K(e) {
-		let t = !P.find((t) => t.id === e.id), n = t ? [...P, e] : P.map((t) => t.id === e.id ? e : t);
-		F(n), x?.(n), t ? w?.(e) : T?.(e), z(null);
+	function Y(e) {
+		let t = !L.find((t) => t.id === e.id), n = t ? [...L, e] : L.map((t) => t.id === e.id ? e : t);
+		R(n), x?.(n), t ? w?.(e) : T?.(e), H(null);
 	}
-	function q(e) {
-		let t = P.filter((t) => t.id !== e);
-		F(t), x?.(t), E?.(e), z(null);
+	function X(e) {
+		let t = L.filter((t) => t.id !== e);
+		R(t), x?.(t), E?.(e), H(null);
 	}
-	function J(e) {
-		z({
+	function Z(e) {
+		H({
 			mode: "delete",
 			task: e
 		});
@@ -72,17 +72,18 @@ function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuilt
 	return /* @__PURE__ */ v(m, {
 		className: e.root,
 		sx: {
-			height: j,
+			width: N,
+			height: P,
 			display: "flex",
 			flexDirection: "column",
 			overflow: "hidden"
 		},
 		children: [/* @__PURE__ */ v(a, {
-			sensors: B,
+			sensors: U,
 			collisionDetection: l,
-			onDragStart: V,
-			onDragOver: H,
-			onDragEnd: U,
+			onDragStart: W,
+			onDragOver: G,
+			onDragEnd: K,
 			children: [/* @__PURE__ */ _(m, {
 				className: e.columns,
 				sx: {
@@ -92,37 +93,41 @@ function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuilt
 					p: 2,
 					overflowX: "auto",
 					overflowY: "hidden",
-					alignItems: "flex-start"
+					alignItems: "stretch"
 				},
 				children: b.map((e) => /* @__PURE__ */ _(i, {
 					column: e,
-					tasks: P.filter((t) => t.status === e.id),
-					showAssignee: O,
-					showDueDate: k,
-					chipVariant: A,
-					t: N,
+					tasks: L.filter((t) => t.status === e.id),
+					showPriority: O,
+					showAssignee: k,
+					showDueDate: A,
+					showDueDateWarning: j,
+					chipVariant: M,
+					t: I,
 					enableBuiltinDialogs: C,
-					onCardClick: W,
-					onAddClick: G
+					onCardClick: q,
+					onAddClick: J
 				}, e.id))
-			}), /* @__PURE__ */ _(o, { children: I && /* @__PURE__ */ _(n, {
-				task: I,
-				showAssignee: O,
-				showDueDate: k,
-				chipVariant: A,
-				t: N,
+			}), /* @__PURE__ */ _(o, { children: z && /* @__PURE__ */ _(n, {
+				task: z,
+				showPriority: O,
+				showAssignee: k,
+				showDueDate: A,
+				showDueDateWarning: j,
+				chipVariant: M,
+				t: I,
 				onCardClick: () => {},
 				isOverlay: !0
 			}) })]
 		}), C && /* @__PURE__ */ _(r, {
-			state: R,
+			state: V,
 			columns: b,
-			t: N,
-			onSave: K,
-			onDelete: q,
-			onRequestDelete: J,
-			onClose: () => z(null)
-		}, R ? `${R.mode}-${R.mode === "add" ? R.columnId : R.task.id}` : "closed")]
+			t: I,
+			onSave: Y,
+			onDelete: X,
+			onRequestDelete: Z,
+			onClose: () => H(null)
+		}, V ? `${V.mode}-${V.mode === "add" ? V.columnId : V.task.id}` : "closed")]
 	});
 }
 //#endregion

package/dist/components/kanban-board/KanbanBoard.types.d.ts

@@ -1,3 +1,4 @@
+export type KanbanTaskPriority = "low" | "medium" | "high" | "critical";
 export type KanbanTask = {
     id: string;
     title: string;
@@ -8,6 +9,8 @@ export type KanbanTask = {
     /** Overrides the column's default card color for this individual card. Any CSS color value. */
     color?: string;
     dueDate?: Date;
+    /** Optional priority level — shown as a colored dot next to the card title when `showPriority` is true. */
+    priority?: KanbanTaskPriority;
 };
 export type KanbanColumn = {
     /** Used as the key — must match `KanbanTask.status` values. */
@@ -67,16 +70,30 @@ export type KanbanBoardProps = {
      * so consumers can issue a targeted API call without diffing the full list.
      */
     onTaskMoved?: (task: KanbanTask, fromColumnId: string, toColumnId: string) => void;
+    /**
+     * Show the priority dot on cards (default: true).
+     * Has no visual effect when a card has no `priority` field set.
+     */
+    showPriority?: boolean;
     /** Show the assignee label on cards (default: true). */
     showAssignee?: boolean;
     /** Show the due date on cards (default: true). */
     showDueDate?: boolean;
+    /**
+     * Highlight cards whose `dueDate` is in the past (default: true).
+     * When true, the due-date chip turns red (`color="error"`) and the card
+     * receives a subtle red background tint and left border stripe.
+     * Has no effect when `showDueDate` is false or when the card has no `dueDate`.
+     */
+    showDueDateWarning?: boolean;
     /**
      * MUI Chip variant for assignee and due-date chips on cards.
      * `"outlined"` (default) — subtle border, transparent background.
      * `"filled"` — solid background, more prominent.
      */
     chipVariant?: "outlined" | "filled";
+    /** Width of the board. Default: "100%". */
+    width?: number | string;
     /** Height of the board. Default: "100%". */
     height?: number | string;
     /** Override any label or message — unset keys fall back to English defaults. */

package/dist/components/kanban-board/KanbanBoardCard.d.ts

@@ -1,13 +1,15 @@
 import type { KanbanBoardTranslation, KanbanTask } from "./KanbanBoard.types";
 type KanbanBoardCardProps = {
     task: KanbanTask;
+    showPriority: boolean;
     showAssignee: boolean;
     showDueDate: boolean;
+    showDueDateWarning: boolean;
     chipVariant: "outlined" | "filled";
     t: Required<KanbanBoardTranslation>;
     onCardClick: (task: KanbanTask) => void;
     /** True when this card is the drag overlay ghost — rendered without transform/listeners. */
     isOverlay?: boolean;
 };
-export declare function KanbanBoardCard({ task, showAssignee, showDueDate, chipVariant, t, onCardClick, isOverlay, }: KanbanBoardCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoardCard({ task, showPriority, showAssignee, showDueDate, showDueDateWarning, chipVariant, t, onCardClick, isOverlay, }: KanbanBoardCardProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/kanban-board/KanbanBoardCard.js

@@ -5,9 +5,15 @@ import { Box as r, Card as i, CardActionArea as a, CardContent as o, Chip as s,
 import { CSS as l } from "@dnd-kit/utilities";
 import u from "@mui/icons-material/CalendarToday";
 import d from "@mui/icons-material/Person";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { alpha as f } from "@mui/material/styles";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/components/kanban-board/KanbanBoardCard.tsx
-var m = {
+var h = {
+	low: "#4caf50",
+	medium: "#ff9800",
+	high: "#f44336",
+	critical: "#9c27b0"
+}, g = {
 	fontSize: "0.7rem",
 	height: 22,
 	"& .MuiChip-icon": {
@@ -22,78 +28,111 @@ var m = {
 		pr: "10px"
 	}
 };
-function h({ task: h, showAssignee: g, showDueDate: _, chipVariant: v, t: y, onCardClick: b, isOverlay: x = !1 }) {
-	let { attributes: S, listeners: C, setNodeRef: w, transform: T, transition: E, isDragging: D } = n({
-		id: h.id,
-		disabled: x
-	}), O = x ? { cursor: "grabbing" } : {
-		transform: l.Transform.toString(T),
-		transition: E,
-		opacity: +!D,
-		cursor: "grab"
-	}, k = g && !!h.assignee || _ && !!h.dueDate, A = h.dueDate ? h.dueDate.toLocaleDateString(void 0, {
+function _({ task: _, showPriority: v, showAssignee: y, showDueDate: b, showDueDateWarning: x, chipVariant: S, t: C, onCardClick: w, isOverlay: T = !1 }) {
+	let { attributes: E, listeners: D, setNodeRef: O, transform: k, transition: A, isDragging: j } = n({
+		id: _.id,
+		disabled: T
+	}), M = T ? void 0 : {
+		transform: l.Transform.toString(k),
+		transition: A,
+		opacity: +!j
+	}, N = y && !!_.assignee || b && !!_.dueDate, P = _.dueDate ? _.dueDate.toLocaleDateString(void 0, {
 		day: "2-digit",
 		month: "short",
 		year: "numeric"
-	}) : null;
-	return /* @__PURE__ */ f(i, {
-		ref: x ? void 0 : w,
-		style: O,
-		className: [t.card, D && e.selected].filter(Boolean).join(" "),
+	}) : null, F = /* @__PURE__ */ new Date();
+	F.setHours(0, 0, 0, 0);
+	let I = x && !!_.dueDate && _.dueDate < F;
+	return /* @__PURE__ */ p(i, {
+		ref: T ? void 0 : O,
+		style: M,
+		elevation: 0,
+		className: [t.card, j && e.selected].filter(Boolean).join(" "),
 		sx: {
 			mb: 1,
-			borderLeft: h.color ? `4px solid ${h.color}` : void 0,
+			border: "1px solid",
+			borderColor: I && !_.color ? "error.light" : "divider",
+			borderLeft: _.color ? `4px solid ${_.color}` : I ? (e) => `4px solid ${e.palette.error.main}` : void 0,
 			userSelect: "none",
-			bgcolor: (e) => e.palette.mode === "dark" ? "grey.800" : "background.paper",
+			cursor: T ? "grabbing" : "grab",
+			bgcolor: (e) => I ? e.palette.mode === "dark" ? f(e.palette.error.main, .12) : f(e.palette.error.main, .04) : e.palette.mode === "dark" ? e.palette.grey[800] : e.palette.background.paper,
+			boxShadow: (e) => e.palette.mode === "dark" ? "0 1px 3px rgba(0,0,0,0.4)" : "0 1px 3px rgba(0,0,0,0.08)",
+			transition: "box-shadow 0.15s ease, transform 0.15s ease",
+			...!j && !T && { "&:hover": {
+				boxShadow: (e) => e.palette.mode === "dark" ? "0 4px 14px rgba(0,0,0,0.5)" : "0 4px 14px rgba(0,0,0,0.12)",
+				transform: "translateY(-1px)"
+			} },
 			"&:active": { cursor: "grabbing" }
 		},
-		...x ? {} : {
-			...S,
-			...C
+		...T ? {} : {
+			...E,
+			...D
 		},
-		onClick: () => !D && b(h),
-		"aria-label": h.title,
-		children: /* @__PURE__ */ f(a, {
+		onClick: () => !j && w(_),
+		"aria-label": _.title,
+		children: /* @__PURE__ */ p(a, {
 			component: "div",
 			sx: { cursor: "inherit" },
-			children: /* @__PURE__ */ p(o, {
+			children: /* @__PURE__ */ m(o, {
 				sx: {
 					p: 1.5,
 					"&:last-child": { pb: 1.5 }
 				},
-				children: [/* @__PURE__ */ f(c, {
-					className: t.cardTitle,
-					variant: "body2",
+				children: [/* @__PURE__ */ m(r, {
 					sx: {
-						mb: +!!k,
-						lineHeight: 1.4,
-						fontWeight: 600
+						display: "flex",
+						alignItems: "flex-start",
+						gap: .75,
+						mb: +!!N
 					},
-					children: h.title
-				}), k && /* @__PURE__ */ p(r, {
+					children: [v && _.priority && /* @__PURE__ */ p(r, {
+						className: t.cardPriorityDot,
+						role: "img",
+						"aria-label": `Priority: ${_.priority}`,
+						sx: {
+							width: 8,
+							height: 8,
+							minWidth: 8,
+							borderRadius: "50%",
+							bgcolor: h[_.priority],
+							mt: "5px",
+							flexShrink: 0
+						}
+					}), /* @__PURE__ */ p(c, {
+						className: t.cardTitle,
+						variant: "body2",
+						sx: {
+							lineHeight: 1.4,
+							fontWeight: 700,
+							letterSpacing: "-0.01em"
+						},
+						children: _.title
+					})]
+				}), N && /* @__PURE__ */ m(r, {
 					className: t.cardMeta,
 					sx: {
 						display: "flex",
-						gap: .75,
+						gap: 1,
 						flexWrap: "wrap",
 						alignItems: "center"
 					},
-					children: [g && h.assignee && /* @__PURE__ */ f(s, {
+					children: [y && _.assignee && /* @__PURE__ */ p(s, {
 						className: t.cardAssignee,
-						icon: /* @__PURE__ */ f(d, {}),
-						label: h.assignee,
+						icon: /* @__PURE__ */ p(d, {}),
+						label: _.assignee,
 						size: "small",
-						variant: v,
-						"aria-label": `${y.dialogFieldAssignee}: ${h.assignee}`,
-						sx: m
-					}), _ && A && /* @__PURE__ */ f(s, {
+						variant: S,
+						"aria-label": `${C.dialogFieldAssignee}: ${_.assignee}`,
+						sx: g
+					}), b && P && /* @__PURE__ */ p(s, {
 						className: t.cardDueDate,
-						icon: /* @__PURE__ */ f(u, {}),
-						label: A,
+						icon: /* @__PURE__ */ p(u, {}),
+						label: P,
 						size: "small",
-						variant: v,
-						"aria-label": `${y.dialogFieldDueDate}: ${A}`,
-						sx: m
+						variant: S,
+						color: I ? "error" : "default",
+						"aria-label": `${C.dialogFieldDueDate}: ${P}`,
+						sx: g
 					})]
 				})]
 			})
@@ -101,4 +140,4 @@ function h({ task: h, showAssignee: g, showDueDate: _, chipVariant: v, t: y, onC
 	});
 }
 //#endregion
-export { h as KanbanBoardCard };
+export { _ as KanbanBoardCard };

package/dist/components/kanban-board/KanbanBoardColumn.d.ts

@@ -2,13 +2,15 @@ import type { KanbanBoardTranslation, KanbanColumn, KanbanTask } from "./KanbanB
 type KanbanBoardColumnProps = {
     column: KanbanColumn;
     tasks: KanbanTask[];
+    showPriority: boolean;
     showAssignee: boolean;
     showDueDate: boolean;
+    showDueDateWarning: boolean;
     chipVariant: "outlined" | "filled";
     t: Required<KanbanBoardTranslation>;
     enableBuiltinDialogs: boolean;
     onCardClick: (task: KanbanTask) => void;
     onAddClick: (columnId: string) => void;
 };
-export declare function KanbanBoardColumn({ column, tasks, showAssignee, showDueDate, chipVariant, t, enableBuiltinDialogs, onCardClick, onAddClick, }: KanbanBoardColumnProps): import("react/jsx-runtime").JSX.Element;
+export declare function KanbanBoardColumn({ column, tasks, showPriority, showAssignee, showDueDate, showDueDateWarning, chipVariant, t, enableBuiltinDialogs, onCardClick, onAddClick, }: KanbanBoardColumnProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/kanban-board/KanbanBoardColumn.js

@@ -6,8 +6,8 @@ import { Box as a, Button as o, Chip as s, Typography as c } from "@mui/material
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import d from "@mui/icons-material/Add";
 //#region src/components/kanban-board/KanbanBoardColumn.tsx
-function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant: g, t: _, enableBuiltinDialogs: v, onCardClick: y, onAddClick: b }) {
-	let { setNodeRef: x, isOver: S } = n({ id: f.id }), C = f.wipLimit !== void 0 && p.length > f.wipLimit, w = f.wipLimit === void 0 ? `${p.length}` : `${p.length} / ${f.wipLimit}`, T = f.color ?? "primary.main";
+function f({ column: f, tasks: p, showPriority: m, showAssignee: h, showDueDate: g, showDueDateWarning: _, chipVariant: v, t: y, enableBuiltinDialogs: b, onCardClick: x, onAddClick: S }) {
+	let { setNodeRef: C, isOver: w } = n({ id: f.id }), T = f.wipLimit !== void 0 && p.length > f.wipLimit, E = f.wipLimit === void 0 ? `${p.length}` : `${p.length} / ${f.wipLimit}`, D = f.color ?? "primary.main";
 	return /* @__PURE__ */ u(a, {
 		className: e.column,
 		sx: {
@@ -46,13 +46,13 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant:
 					children: f.label
 				}), /* @__PURE__ */ l(s, {
 					className: e.columnCount,
-					label: w,
+					label: E,
 					size: "small",
-					color: C ? "error" : "default",
+					color: T ? "error" : "default",
 					sx: {
 						height: 20,
 						fontSize: "0.7rem",
-						...!C && f.color && {
+						...!T && f.color && {
 							bgcolor: f.color,
 							color: "#fff"
 						}
@@ -64,17 +64,19 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant:
 				items: p.map((e) => e.id),
 				strategy: i,
 				children: /* @__PURE__ */ u(a, {
-					ref: x,
+					ref: C,
 					className: e.columnBody,
 					sx: {
 						flex: 1,
 						overflowY: "auto",
+						scrollbarWidth: "none",
+						"&::-webkit-scrollbar": { display: "none" },
 						p: 1,
 						minHeight: 80,
-						bgcolor: (e) => S ? e.palette.action.selected : e.palette.mode === "dark" ? e.palette.grey[900] : e.palette.grey[100],
+						bgcolor: (e) => w ? e.palette.action.selected : e.palette.mode === "dark" ? e.palette.grey[900] : e.palette.grey[100],
 						transition: "background-color 0.15s"
 					},
-					children: [p.length === 0 && !S && /* @__PURE__ */ l(c, {
+					children: [p.length === 0 && !w && /* @__PURE__ */ l(c, {
 						variant: "caption",
 						color: "text.disabled",
 						sx: {
@@ -82,18 +84,20 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant:
 							textAlign: "center",
 							mt: 2
 						},
-						children: _.noCardsLabel
+						children: y.noCardsLabel
 					}), p.map((e) => /* @__PURE__ */ l(t, {
 						task: e,
-						showAssignee: m,
-						showDueDate: h,
-						chipVariant: g,
-						t: _,
-						onCardClick: y
+						showPriority: m,
+						showAssignee: h,
+						showDueDate: g,
+						showDueDateWarning: _,
+						chipVariant: v,
+						t: y,
+						onCardClick: x
 					}, e.id))]
 				})
 			}),
-			v && /* @__PURE__ */ l(a, {
+			b && /* @__PURE__ */ l(a, {
 				sx: {
 					p: 1,
 					borderTop: "1px solid",
@@ -104,12 +108,12 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant:
 					startIcon: /* @__PURE__ */ l(d, {}),
 					size: "small",
 					fullWidth: !0,
-					onClick: () => b(f.id),
+					onClick: () => S(f.id),
 					sx: {
 						justifyContent: "flex-start",
-						color: T,
+						color: D,
 						border: "1px dashed",
-						borderColor: T,
+						borderColor: D,
 						borderRadius: 1,
 						py: .75,
 						fontWeight: 600,
@@ -119,7 +123,7 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, chipVariant:
 							borderStyle: "dashed"
 						}
 					},
-					children: _.addCardLabel
+					children: y.addCardLabel
 				})
 			})
 		]

package/dist/components/kanban-board/kanbanBoardClasses.d.ts

@@ -42,6 +42,8 @@ export declare const kanbanBoardClasses: {
     readonly cardAssignee: "MuiTsKanbanBoard-cardAssignee";
     /** The due date label on a card. */
     readonly cardDueDate: "MuiTsKanbanBoard-cardDueDate";
+    /** The priority indicator dot on a card. */
+    readonly cardPriorityDot: "MuiTsKanbanBoard-cardPriorityDot";
     /** The "+ Add card" button at the bottom of each column. */
     readonly addButton: "MuiTsKanbanBoard-addButton";
 };

package/dist/components/kanban-board/kanbanBoardClasses.js

@@ -12,6 +12,7 @@ var e = {
 	cardMeta: "MuiTsKanbanBoard-cardMeta",
 	cardAssignee: "MuiTsKanbanBoard-cardAssignee",
 	cardDueDate: "MuiTsKanbanBoard-cardDueDate",
+	cardPriorityDot: "MuiTsKanbanBoard-cardPriorityDot",
 	addButton: "MuiTsKanbanBoard-addButton"
 };
 //#endregion