@commenda/pathfinder 0.1.0 → 0.2.0

package/dist/components/stepper/Stepper.js

@@ -2,30 +2,38 @@
 import { controlFocusClassNames as e } from "../controls/control-class-names.js";
 import { StepMarker as t } from "./StepMarker.js";
 import n from "clsx";
-import { Fragment as r, forwardRef as i } from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Fragment as r, forwardRef as i, useEffect as a, useRef as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/stepper/Stepper.tsx
-var c = i(function({ label: i, items: c, orientation: l = "horizontal", navigationConfig: u, stateLabels: d, className: f, ...p }, m) {
-	return /* @__PURE__ */ o("ol", {
-		...p,
-		ref: m,
+var u = i(function({ label: i, items: u, orientation: d = "horizontal", navigationConfig: f, stateLabels: p, className: m, ...h }, g) {
+	let _ = o(null);
+	return a(() => {
+		let e = () => _.current?.setAttribute("data-motion", "pointer"), t = () => _.current?.removeAttribute("data-motion");
+		return document.addEventListener("pointerdown", e, !0), document.addEventListener("keydown", t, !0), () => {
+			document.removeEventListener("pointerdown", e, !0), document.removeEventListener("keydown", t, !0);
+		};
+	}, []), /* @__PURE__ */ c("ol", {
+		...h,
+		ref: (e) => {
+			_.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+		},
 		"aria-label": i,
-		className: n("pf:flex pf:min-w-0 pf:max-w-full pf:p-0 pf:m-0 pf:list-none pf:font-body", l === "vertical" ? "pf:w-[240px] pf:flex-col pf:gap-xxs" : "pf:w-full pf:items-start pf:gap-lg", f),
-		children: c.map((i, f) => {
-			let p = i.state === "done" && u, m = n("pf:flex pf:min-w-0 pf:items-start pf:font-body pf:text-start pf:border-0 pf:bg-transparent pf:text-label-13 pf:wrap-anywhere", l === "vertical" ? "pf:w-full pf:gap-lg pf:p-md pf:rounded-md" : "pf:flex-col pf:gap-md pf:p-0 pf:rounded-xs", i.state === "disabled" ? "pf:text-soft-pearl-600" : i.state === "upcoming" ? "pf:text-soft-pearl-800" : "pf:text-soft-pearl-1000", l === "vertical" && i.state === "current" && "pf:bg-soft-pearl-200", p && "pf:cursor-pointer", p && l === "vertical" && "pf:hover:bg-soft-pearl-200", e), h = /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(t, {
+		className: n("pf:group/stepper pf:flex pf:min-w-0 pf:max-w-full pf:p-0 pf:m-0 pf:list-none pf:font-body", d === "vertical" ? "pf:w-[240px] pf:flex-col pf:gap-xxs" : "pf:w-full pf:items-start pf:gap-lg", m),
+		children: u.map((i, a) => {
+			let o = i.state === "done" && f, m = n("pf:flex pf:min-w-0 pf:items-start pf:font-body pf:text-start pf:border-0 pf:bg-transparent pf:text-label-13 pf:wrap-anywhere", d === "vertical" ? "pf:w-full pf:gap-lg pf:p-md pf:rounded-md" : "pf:flex-col pf:gap-md pf:p-0 pf:rounded-xs", i.state === "disabled" ? "pf:text-soft-pearl-600" : i.state === "upcoming" ? "pf:text-soft-pearl-800" : "pf:text-soft-pearl-1000", d === "vertical" && i.state === "current" && "pf:bg-soft-pearl-200", o && "pf:cursor-pointer", o && d === "vertical" && "pf:hover:bg-soft-pearl-200", e), h = /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(t, {
 				state: i.state,
-				number: f + 1
-			}), /* @__PURE__ */ s("span", {
+				number: a + 1
+			}), /* @__PURE__ */ l("span", {
 				className: "pf:flex pf:flex-col pf:min-w-0 pf:gap-xxs",
 				children: [
-					/* @__PURE__ */ o("span", { children: i.label }),
-					i.description && /* @__PURE__ */ o("span", {
+					/* @__PURE__ */ c("span", { children: i.label }),
+					i.description && /* @__PURE__ */ c("span", {
 						className: "pf:text-copy-12 pf:text-soft-pearl-800",
 						children: i.description
 					}),
-					/* @__PURE__ */ o("span", {
+					/* @__PURE__ */ c("span", {
 						className: "pf:sr-only",
-						children: d?.[i.state] ?? {
+						children: p?.[i.state] ?? {
 							upcoming: "Upcoming",
 							current: "Current step",
 							done: "Completed",
@@ -34,22 +42,22 @@ var c = i(function({ label: i, items: c, orientation: l = "horizontal", navigati
 					})
 				]
 			})] });
-			return /* @__PURE__ */ s(r, { children: [/* @__PURE__ */ o("li", {
+			return /* @__PURE__ */ l(r, { children: [/* @__PURE__ */ c("li", {
 				"aria-current": i.state === "current" ? "step" : void 0,
 				"aria-disabled": i.state === "disabled" || void 0,
-				className: "pf:min-w-0",
-				children: p ? /* @__PURE__ */ o("button", {
+				className: n("pf:relative pf:min-w-0", d === "vertical" && a < u.length - 1 && "pf:after:absolute pf:after:start-[18px] pf:after:top-[32px] pf:after:bottom-[-6px] pf:after:w-px pf:after:bg-soft-pearl-300 pf:after:pointer-events-none"),
+				children: o ? /* @__PURE__ */ c("button", {
 					type: "button",
 					className: m,
 					onClick: () => {
-						u.onStepChange(i.id);
+						f.onStepChange(i.id);
 					},
 					children: h
-				}) : /* @__PURE__ */ o("div", {
+				}) : /* @__PURE__ */ c("div", {
 					className: m,
 					children: h
 				})
-			}), l === "horizontal" && f < c.length - 1 && /* @__PURE__ */ o("li", {
+			}), d === "horizontal" && a < u.length - 1 && /* @__PURE__ */ c("li", {
 				role: "presentation",
 				"aria-hidden": "true",
 				className: "pf:flex-1 pf:min-w-[12px] pf:mt-[10px] pf:h-[0.5px] pf:bg-soft-pearl-300"
@@ -58,4 +66,4 @@ var c = i(function({ label: i, items: c, orientation: l = "horizontal", navigati
 	});
 });
 //#endregion
-export { c as Stepper };
+export { u as Stepper };

package/dist/components/suggested-prompt/SuggestedPrompt.js

@@ -12,7 +12,7 @@ var r = t(function({ label: t, prompt: r, onSelect: i, className: a, ...o }, s)
 		onClick: () => {
 			i(r ?? t);
 		},
-		className: e("pf:box-border pf:inline-flex pf:min-w-0 pf:max-w-full pf:min-h-[32px] pf:items-center pf:rounded-full pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-soft-pearl-200 pf:px-lg pf:py-sm pf:font-body pf:text-copy-13 pf:text-soft-pearl-1000 pf:text-start pf:cursor-pointer pf:enabled:hover:bg-soft-pearl-300 pf:focus-visible:outline-2 pf:focus-visible:outline-offset-2 pf:focus-visible:outline-blue-700 pf:disabled:opacity-50 pf:disabled:cursor-not-allowed", a),
+		className: e("pf:box-border pf:inline-flex pf:min-w-0 pf:max-w-full pf:min-h-[32px] pf:items-center pf:rounded-full pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:bg-soft-pearl-200 pf:px-lg pf:py-sm pf:font-body pf:text-copy-13 pf:text-soft-pearl-1000 pf:text-start pf:cursor-pointer pf:enabled:hover:bg-soft-pearl-300 pf:transition-colors pf:duration-120 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:focus-visible:transition-none pf:motion-reduce:transition-none pf:focus-visible:outline-2 pf:focus-visible:outline-offset-2 pf:focus-visible:outline-blue-700 pf:disabled:opacity-50 pf:disabled:cursor-not-allowed", a),
 		children: /* @__PURE__ */ n("span", {
 			className: "pf:min-w-0 pf:truncate",
 			children: t

package/dist/components/switch/Switch.d.ts

@@ -11,7 +11,7 @@ export interface SwitchProps extends Omit<BaseSwitch.Root.Props, 'children' | 'c
  * Figma 199:4, 200:5083.
  * SWITCH-01: Applies immediately; use Checkbox for changes saved with a form.
  * SWITCH-02: Keep the setting's label stable; the application reverts and explains failed saves.
- * SWITCH-03: Track 36×20, thumb 16 with 2px inset; 200ms ease-out, no motion when reduced.
+ * SWITCH-03: Track 36×20, thumb 16 with 2px inset; 180ms pointer slide with thumb press feedback; keyboard/reduced motion is immediate.
  * Never use a Switch to choose between two non-boolean options.
  */
 export declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/dist/components/switch/Switch.js

@@ -1,36 +1,46 @@
 "use client";
 import { getChoiceClassNames as e } from "../choices/choice-class-names.js";
-import { ChoiceText as t } from "../choices/ChoiceText.js";
-import n from "clsx";
-import { forwardRef as r, useId as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useDirection as s } from "@base-ui/react/direction-provider";
-import { Switch as c } from "@base-ui/react/switch";
+import { choiceMotionProps as t } from "../choices/choice-motion.js";
+import { ChoiceText as n } from "../choices/ChoiceText.js";
+import r from "clsx";
+import { forwardRef as i, useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useDirection as c } from "@base-ui/react/direction-provider";
+import { Switch as l } from "@base-ui/react/switch";
 //#region src/components/switch/Switch.tsx
-var l = r(function({ label: r, hideLabel: l, description: u, disabledReason: d, disabled: f, className: p, onCheckedChange: m, "aria-describedby": h, ...g }, _) {
-	let v = i(), y = s(), b = f ? d : void 0;
-	return /* @__PURE__ */ o(c.Root, {
-		...g,
-		ref: _,
-		"data-direction": y,
-		disabled: f,
-		onCheckedChange: (e) => m?.(e),
-		"aria-label": r,
-		"aria-describedby": [h, u || b ? v : void 0].filter(Boolean).join(" ") || void 0,
-		className: n("pf-choice pf-switch", e(), "pf:[&_.pf-choice-text]:pt-xxs pf:pointer-coarse:[&_.pf-choice-text]:pt-xs", p),
-		children: [/* @__PURE__ */ a("span", {
-			className: n("pf-switch-track pf:box-border pf:relative pf:flex-none pf:w-[36px] pf:h-[20px] pf:rounded-full", "pf:bg-soft-pearl-400 pf:group-data-checked/choice:group-not-data-disabled/choice:bg-blue-700", "pf:group-focus-visible/choice:shadow-[0_0_0_2px_var(--pf-color-background),0_0_0_4px_var(--pf-color-blue-700)]", "pf:group-data-disabled/choice:bg-soft-pearl-100", "pf:group-data-disabled/choice:shadow-[inset_0_0_0_1px_var(--pf-color-soft-pearl-300)]", "pf:group-data-disabled/choice:group-data-checked/choice:bg-soft-pearl-300", "pf:group-not-data-disabled/choice:group-not-data-readonly/choice:group-hover/choice:bg-soft-pearl-500", "pf:group-not-data-disabled/choice:group-not-data-readonly/choice:group-data-checked/choice:group-hover/choice:bg-blue-800"),
+var u = i(function({ label: i, hideLabel: u, description: d, disabledReason: f, disabled: p, className: m, onCheckedChange: h, "aria-describedby": g, ..._ }, v) {
+	let y = a(), b = c(), x = p ? f : void 0;
+	return /* @__PURE__ */ s(l.Root, {
+		..._,
+		onPointerDownCapture: (e) => {
+			t.onPointerDownCapture(e), _.onPointerDownCapture?.(e);
+		},
+		onKeyDownCapture: (e) => {
+			t.onKeyDownCapture(e), _.onKeyDownCapture?.(e);
+		},
+		ref: v,
+		"data-direction": b,
+		disabled: p,
+		onCheckedChange: (e) => h?.(e),
+		"aria-label": i,
+		"aria-describedby": [g, d || x ? y : void 0].filter(Boolean).join(" ") || void 0,
+		className: r("pf-choice pf-switch", e(), "pf:[&_.pf-choice-text]:pt-xxs pf:pointer-coarse:[&_.pf-choice-text]:pt-xs", m),
+		children: [/* @__PURE__ */ o("span", {
+			className: r("pf-switch-track pf:box-border pf:relative pf:flex-none pf:w-[36px] pf:h-[20px] pf:rounded-full", "pf:bg-soft-pearl-400 pf:group-data-checked/choice:group-not-data-disabled/choice:bg-blue-700", "pf:group-focus-visible/choice:shadow-[0_0_0_2px_var(--pf-color-background),0_0_0_4px_var(--pf-color-blue-700)]", "pf:group-data-disabled/choice:bg-soft-pearl-100", "pf:group-data-disabled/choice:shadow-[inset_0_0_0_1px_var(--pf-color-soft-pearl-300)]", "pf:group-data-disabled/choice:group-data-checked/choice:bg-soft-pearl-300", "pf:group-not-data-disabled/choice:group-not-data-readonly/choice:group-hover/choice:bg-soft-pearl-500", "pf:group-not-data-disabled/choice:group-not-data-readonly/choice:group-data-checked/choice:group-hover/choice:bg-blue-800"),
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ a(c.Thumb, { className: n("pf-switch-thumb pf:absolute pf:top-[2px] pf:start-[2px] pf:size-[16px] pf:rounded-full pf:bg-background", "pf:shadow-control pf:transition-transform pf:duration-(--pf-duration-base) pf:ease-[ease-out]", "pf:group-data-checked/choice:translate-x-[16px]", "pf:group-data-[direction=rtl]/choice:group-data-checked/choice:-translate-x-[16px]", "pf:group-data-disabled/choice:bg-soft-pearl-200 pf:group-data-disabled/choice:shadow-none", "pf:motion-reduce:transition-none") })
-		}), /* @__PURE__ */ a(t, {
-			label: r,
-			hideLabel: l,
-			description: u,
-			descriptionId: v,
-			disabledReason: b
+			children: /* @__PURE__ */ o(l.Thumb, {
+				className: r("pf-switch-thumb pf:absolute pf:top-[2px] pf:start-[2px] pf:size-[16px] pf:rounded-full", "pf:transition-none pf:motion-safe:group-data-[motion=pointer]/choice:transition-transform pf:duration-180 pf:ease-[cubic-bezier(0.23,1,0.32,1)]", "pf:group-data-checked/choice:translate-x-[16px]", "pf:group-data-[direction=rtl]/choice:group-data-checked/choice:-translate-x-[16px]", "pf:motion-reduce:transition-none"),
+				children: /* @__PURE__ */ o("span", { className: "pf:block pf:size-full pf:rounded-full pf:bg-background pf:shadow-control pf:origin-left pf:group-data-checked/choice:origin-right pf:rtl:origin-right pf:rtl:group-data-checked/choice:origin-left pf:transition-none pf:motion-safe:group-data-[motion=pointer]/choice:transition-transform pf:duration-100 pf:group-active/choice:duration-150 pf:ease-[cubic-bezier(0.23,1,0.32,1)] pf:motion-safe:group-data-[motion=pointer]/choice:group-not-data-disabled/choice:group-not-data-readonly/choice:group-active/choice:scale-x-[1.25] pf:group-data-disabled/choice:bg-soft-pearl-200 pf:group-data-disabled/choice:shadow-none" })
+			})
+		}), /* @__PURE__ */ o(n, {
+			label: i,
+			hideLabel: u,
+			description: d,
+			descriptionId: y,
+			disabledReason: x
 		})]
 	});
 });
-l.displayName = "PathfinderSwitch";
+u.displayName = "PathfinderSwitch";
 //#endregion
-export { l as Switch };
+export { u as Switch };

package/dist/components/table/Table.js

@@ -32,7 +32,7 @@ function w(w) {
 			"aria-label": w.label,
 			className: y(i.shell, "pf:@container/table", (w.container ?? "card") === "card" && i.card, w.className),
 			children: [
-				/* @__PURE__ */ S(h, {
+				w.controlsConfig?.toolbar !== !1 && /* @__PURE__ */ S(h, {
 					props: w,
 					state: E
 				}),
@@ -45,117 +45,141 @@ function w(w) {
 					className: "pf:m-0 pf:px-lg pf:py-sm pf:text-copy-12 pf:text-soft-pearl-800",
 					children: "Pinned columns scroll with the table at this width. Widen the table or unpin columns to keep them fixed."
 				}),
-				/* @__PURE__ */ S("div", {
-					ref: P,
-					className: i.scroll,
-					tabIndex: 0,
-					role: "region",
-					"aria-label": `${w.label} scroll area`,
-					children: /* @__PURE__ */ C("table", {
-						"aria-label": w.label,
-						"aria-busy": k || void 0,
-						className: i.table,
-						style: {
-							minWidth: N,
-							width: w.viewConfig?.columnWidths || A.some((e) => e.pin) ? N : void 0
-						},
-						children: [
-							/* @__PURE__ */ C("colgroup", { children: [
-								w.selectionConfig && /* @__PURE__ */ S("col", { style: { width: 40 } }),
-								A.map((e) => /* @__PURE__ */ S("col", { style: { width: e.width ?? 160 } }, e.id)),
-								w.rowConfig.menu && /* @__PURE__ */ S("col", { style: { width: 48 } })
-							] }),
-							/* @__PURE__ */ S("thead", { children: /* @__PURE__ */ C("tr", { children: [
-								w.selectionConfig && /* @__PURE__ */ S("th", {
-									scope: "col",
-									className: y(i.header, "pf:text-start pf:align-middle pf:bg-background"),
-									style: F && A.some((e) => e.pin === "start") ? {
-										position: "sticky",
-										insetInlineStart: 0,
-										zIndex: 3
-									} : void 0,
-									children: /* @__PURE__ */ S(n, {
-										className: "pf:align-middle",
-										hideLabel: !0,
-										label: "Select current page",
-										checked: O.allPage,
-										indeterminate: O.somePage,
-										disabled: O.pageDisabled || k,
-										onCheckedChange: O.togglePage
-									})
-								}),
-								A.map((e) => {
-									let t = E.sort?.columnId === e.id ? E.sort.direction : null;
-									return /* @__PURE__ */ C("th", {
-										style: F ? s(e, A, j, M) : void 0,
-										scope: "col",
-										"aria-sort": t === "asc" ? "ascending" : t === "desc" ? "descending" : void 0,
-										className: y(i.header, "pf:relative", e.pin && "pf:bg-background", r[e.align ?? "start"]),
-										children: [/* @__PURE__ */ S(c, {
-											label: e.header,
-											pin: e.pin,
-											active: F,
-											description: e.description,
-											align: e.align,
-											sorted: t,
-											onSort: e.sortable ? (t) => {
-												E.changeSort(e.id, t);
+				/* @__PURE__ */ C("div", {
+					className: "pf:relative pf:group/scroll",
+					children: [
+						/* @__PURE__ */ S("div", {
+							ref: P,
+							className: i.scroll,
+							tabIndex: 0,
+							role: "region",
+							"aria-label": `${w.label} scroll area`,
+							children: /* @__PURE__ */ C("table", {
+								"aria-label": w.label,
+								"aria-busy": k || void 0,
+								className: i.table,
+								style: {
+									minWidth: N,
+									width: w.viewConfig?.columnWidths || A.some((e) => e.pin) ? N : void 0
+								},
+								children: [
+									/* @__PURE__ */ C("colgroup", { children: [
+										w.selectionConfig && /* @__PURE__ */ S("col", { style: { width: 40 } }),
+										A.map((e) => /* @__PURE__ */ S("col", { style: { width: e.width ?? 160 } }, e.id)),
+										w.rowConfig.menu && /* @__PURE__ */ S("col", { style: { width: 48 } })
+									] }),
+									/* @__PURE__ */ S("thead", { children: /* @__PURE__ */ C("tr", { children: [
+										w.selectionConfig && /* @__PURE__ */ S("th", {
+											scope: "col",
+											className: y(i.header, "pf:text-start pf:align-middle pf:bg-background"),
+											style: F && A.some((e) => e.pin === "start") ? {
+												position: "sticky",
+												insetInlineStart: 0,
+												zIndex: 6
 											} : void 0,
-											onChange: w.viewConfig?.columnPinning && e.pinnable !== !1 ? (t) => {
-												E.setPin(e.id, t);
-											} : void 0
-										}), w.viewConfig?.columnWidths && e.resizable !== !1 && /* @__PURE__ */ S(l, {
-											column: e,
-											resetWidth: w.columns.find((t) => t.id === e.id)?.width ?? 160,
-											onChange: E.setWidth
-										})]
-									}, e.id);
-								}),
-								w.rowConfig.menu && /* @__PURE__ */ S("th", {
-									scope: "col",
-									className: y(i.header, "pf:bg-background"),
-									style: F && A.some((e) => e.pin === "end") ? {
-										position: "sticky",
-										insetInlineEnd: 0,
-										zIndex: 3
-									} : void 0,
-									children: /* @__PURE__ */ S("span", {
-										className: "pf:sr-only",
-										children: "Actions"
+											children: /* @__PURE__ */ S(n, {
+												className: "pf:align-middle",
+												hideLabel: !0,
+												label: "Select current page",
+												checked: O.allPage,
+												indeterminate: O.somePage,
+												disabled: O.pageDisabled || k,
+												onCheckedChange: O.togglePage
+											})
+										}),
+										A.map((e) => {
+											let t = E.sort?.columnId === e.id ? E.sort.direction : null;
+											return /* @__PURE__ */ C("th", {
+												style: F ? {
+													...s(e, A, j, M),
+													zIndex: e.pin ? 5 : 4
+												} : void 0,
+												scope: "col",
+												"aria-sort": t === "asc" ? "ascending" : t === "desc" ? "descending" : void 0,
+												className: y(i.header, "pf:relative pf:z-[4]", e.pin && "pf:bg-background", r[e.align ?? "start"]),
+												children: [/* @__PURE__ */ S(c, {
+													label: e.header,
+													pin: e.pin,
+													active: F,
+													description: e.description,
+													align: e.align,
+													sorted: t,
+													onSort: e.sortable ? (t) => {
+														E.changeSort(e.id, t);
+													} : void 0,
+													onChange: w.viewConfig?.columnPinning && e.pinnable !== !1 ? (t) => {
+														E.setPin(e.id, t);
+													} : void 0
+												}), w.viewConfig?.columnWidths && e.resizable !== !1 && /* @__PURE__ */ S(l, {
+													column: e,
+													resetWidth: w.columns.find((t) => t.id === e.id)?.width ?? 160,
+													onChange: E.setWidth
+												})]
+											}, e.id);
+										}),
+										w.rowConfig.menu && /* @__PURE__ */ S("th", {
+											scope: "col",
+											className: y(i.header, "pf:bg-background"),
+											style: F && A.some((e) => e.pin === "end") ? {
+												position: "sticky",
+												insetInlineEnd: 0,
+												zIndex: 6
+											} : void 0,
+											children: /* @__PURE__ */ S("span", {
+												className: "pf:sr-only",
+												children: "Actions"
+											})
+										})
+									] }) }),
+									/* @__PURE__ */ S("tbody", { children: k ? Array.from({ length: Math.min(5, E.page.pageSize) }, (t, n) => /* @__PURE__ */ S("tr", { children: Array.from({ length: A.length + +!!j + +!!M }, (t, n) => /* @__PURE__ */ S("td", {
+										className: y(i.cell, V),
+										children: /* @__PURE__ */ S(e, { width: "80%" })
+									}, n)) }, n)) : !z && D.groups.map((e) => /* @__PURE__ */ C(b, { children: [w.groupingConfig && /* @__PURE__ */ S(d, {
+										label: w.groupingConfig.getLabel(e.id),
+										count: e.rows.length,
+										leading: w.groupingConfig.leading?.(e.id),
+										summary: w.groupingConfig.summary?.(e.id, e.rows),
+										collapsed: D.collapsed.includes(e.id),
+										onToggle: () => {
+											D.toggle(e.id);
+										},
+										colSpan: A.length + Number(!!j) + Number(!!M),
+										density: E.density
+									}), (!w.groupingConfig || !D.collapsed.includes(e.id)) && e.rows.map((e) => /* @__PURE__ */ S(p, {
+										props: w,
+										row: e,
+										columns: A,
+										selection: O,
+										canPin: F,
+										rowHeight: V
+									}, w.rowConfig.getId(e)))] }, e.id)) }),
+									!k && !z && /* @__PURE__ */ S(u, {
+										config: w.footerConfig,
+										columns: A,
+										selection: !!w.selectionConfig,
+										actions: !!w.rowConfig.menu,
+										canPin: F
 									})
-								})
-							] }) }),
-							/* @__PURE__ */ S("tbody", { children: k ? Array.from({ length: Math.min(5, E.page.pageSize) }, (t, n) => /* @__PURE__ */ S("tr", { children: Array.from({ length: A.length + +!!j + +!!M }, (t, n) => /* @__PURE__ */ S("td", {
-								className: y(i.cell, V),
-								children: /* @__PURE__ */ S(e, { width: "80%" })
-							}, n)) }, n)) : !z && D.groups.map((e) => /* @__PURE__ */ C(b, { children: [w.groupingConfig && /* @__PURE__ */ S(d, {
-								label: w.groupingConfig.getLabel(e.id),
-								count: e.rows.length,
-								leading: w.groupingConfig.leading?.(e.id),
-								summary: w.groupingConfig.summary?.(e.id, e.rows),
-								collapsed: D.collapsed.includes(e.id),
-								onToggle: () => {
-									D.toggle(e.id);
-								},
-								colSpan: A.length + Number(!!j) + Number(!!M),
-								density: E.density
-							}), (!w.groupingConfig || !D.collapsed.includes(e.id)) && e.rows.map((e) => /* @__PURE__ */ S(p, {
-								props: w,
-								row: e,
-								columns: A,
-								selection: O,
-								canPin: F,
-								rowHeight: V
-							}, w.rowConfig.getId(e)))] }, e.id)) }),
-							!k && !z && /* @__PURE__ */ S(u, {
-								config: w.footerConfig,
-								columns: A,
-								selection: !!w.selectionConfig,
-								actions: !!w.rowConfig.menu,
-								canPin: F
+								]
 							})
-						]
-					})
+						}),
+						/* @__PURE__ */ S("div", {
+							"aria-hidden": "true",
+							style: {
+								backgroundImage: "linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 6%, rgba(0,0,0,.07) 12%, rgba(0,0,0,.05) 25%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.007) 75%, rgba(0,0,0,0) 100%)",
+								insetInlineStart: F && A.some((e) => e.pin === "start") ? j + A.filter((e) => e.pin === "start").reduce((e, t) => e + (t.width ?? 160), 0) : 0
+							},
+							className: "pf:pointer-events-none pf:absolute pf:inset-y-0 pf:w-[24px] pf:z-[7] pf:opacity-0 pf:transition-opacity pf:duration-150 pf:ease-out pf:motion-reduce:transition-none pf:rtl:rotate-180 pf:group-data-scroll-start/scroll:group-hover/scroll:opacity-100 pf:group-data-scroll-start/scroll:group-focus-within/scroll:opacity-100"
+						}),
+						/* @__PURE__ */ S("div", {
+							"aria-hidden": "true",
+							style: {
+								backgroundImage: "linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 6%, rgba(0,0,0,.07) 12%, rgba(0,0,0,.05) 25%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.007) 75%, rgba(0,0,0,0) 100%)",
+								insetInlineEnd: F && A.some((e) => e.pin === "end") ? M + A.filter((e) => e.pin === "end").reduce((e, t) => e + (t.width ?? 160), 0) : 0
+							},
+							className: "pf:pointer-events-none pf:absolute pf:inset-y-0 pf:w-[24px] pf:z-[7] pf:opacity-0 pf:transition-opacity pf:duration-150 pf:ease-out pf:motion-reduce:transition-none pf:rtl:rotate-180 pf:group-data-scroll-end/scroll:group-hover/scroll:opacity-100 pf:group-data-scroll-end/scroll:group-focus-within/scroll:opacity-100"
+						})
+					]
 				}),
 				!k && (z || E.rows.length === 0) && /* @__PURE__ */ S(t, {
 					kind: z ? "error" : L ? "no-results" : "first-use",
@@ -172,7 +196,7 @@ function w(w) {
 						onClick: R.action.onAction
 					} : void 0
 				}),
-				/* @__PURE__ */ S(f, {
+				w.controlsConfig?.pagination !== !1 && /* @__PURE__ */ S(f, {
 					page: E.page,
 					total: E.total,
 					visibleCount: E.rows.length,

package/dist/components/table/TableColumnHeader.js

@@ -63,7 +63,16 @@ function m({ label: m, pin: h, active: g, description: _, align: v, sorted: y, o
 					id: e.id,
 					type: "action",
 					label: e.label,
-					leadingIcon: y === e.value ? /* @__PURE__ */ f(t, { size: 16 }) : void 0,
+					trailingIcon: y === e.value ? /* @__PURE__ */ f("span", {
+						className: "pf:text-blue-700",
+						children: /* @__PURE__ */ f(t, {
+							size: 16,
+							tone: "inherit"
+						})
+					}) : /* @__PURE__ */ f("span", {
+						"aria-hidden": "true",
+						className: "pf:size-[16px]"
+					}),
 					onClick: () => {
 						C(!1), b(e.value);
 					}
@@ -91,7 +100,16 @@ function m({ label: m, pin: h, active: g, description: _, align: v, sorted: y, o
 					id: e.id,
 					type: "action",
 					label: e.label,
-					leadingIcon: (h ?? null) === e.value ? /* @__PURE__ */ f(t, { size: 16 }) : void 0,
+					trailingIcon: (h ?? null) === e.value ? /* @__PURE__ */ f("span", {
+						className: "pf:text-blue-700",
+						children: /* @__PURE__ */ f(t, {
+							size: 16,
+							tone: "inherit"
+						})
+					}) : /* @__PURE__ */ f("span", {
+						"aria-hidden": "true",
+						className: "pf:size-[16px]"
+					}),
 					onClick: () => {
 						C(!1), x(e.value);
 					}

package/dist/components/table/TableColumnResize.js

@@ -14,7 +14,7 @@ function n({ column: n, resetWidth: r, onChange: i }) {
 		onValueChange: (e) => {
 			i(n.id, e);
 		},
-		className: "pf:absolute pf:inset-y-0 pf:end-0 pf:z-[4]"
+		className: "pf:absolute pf:inset-y-0 pf:end-0 pf:z-[4] pf:[&>span]:absolute pf:[&>span]:end-0 pf:[&>span]:top-0 pf:[&>span]:h-[var(--pf-table-height)]"
 	});
 }
 //#endregion

package/dist/components/table/TableColumnsMenu.js

@@ -19,6 +19,7 @@ function o({ props: o, state: s }) {
 			children: /* @__PURE__ */ a(n, {})
 		}),
 		children: o.columns.filter((e) => e.hideable !== !1).map((e) => /* @__PURE__ */ a(t, {
+			className: "pf:select-none",
 			label: e.header,
 			checked: !s.hidden.includes(e.id),
 			disabled: s.columns.length === 1 && !s.hidden.includes(e.id),

package/dist/components/table/TableFilterChip.js

@@ -83,7 +83,7 @@ function l({ filter: l, values: u, fields: d, onFieldChange: f, operator: p, onO
 				onClick: () => {
 					h([]);
 				},
-				className: "pf:shrink-0 pf:self-center",
+				className: "pf:shrink-0 pf:self-stretch pf:[&.pf-icon-button]:h-auto pf:[&.pf-icon-button]:w-[28px] pf:[&.pf-icon-button]:rounded-none pf:[&.pf-icon-button]:rounded-e-sm",
 				children: /* @__PURE__ */ o(t, { size: 16 })
 			})
 		]

package/dist/components/table/TableFilterEditor.js

@@ -2,8 +2,8 @@ import { CheckIcon as e } from "../icons/CheckIcon.js";
 import { Button as t } from "../button/Button.js";
 import { Input as n } from "../input/Input.js";
 import { Checkbox as r } from "../checkbox/Checkbox.js";
-import { DateCalendar as i } from "../date-picker/DateCalendar.js";
-import { Search as a } from "../search/Search.js";
+import { Search as i } from "../search/Search.js";
+import { DateCalendar as a } from "../date-picker/DateCalendar.js";
 import { useState as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/components/table/TableFilterEditor.tsx
@@ -16,7 +16,7 @@ function u({ filter: u, values: d, operator: f, onChange: p, onClose: m }) {
 		},
 		children: ["Clear ", u.label]
 	});
-	if (u.type === "date") return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(i, {
+	if (u.type === "date") return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(a, {
 		config: {
 			mode: "range",
 			label: u.label,
@@ -74,7 +74,7 @@ function u({ filter: u, values: d, operator: f, onChange: p, onClose: m }) {
 	});
 	let S = [...u.options].filter((e) => e.label.toLocaleLowerCase().includes(h.toLocaleLowerCase())).sort((e, t) => Number(d.includes(t.value)) - Number(d.includes(e.value))), C = u.type === "single" || f === "is";
 	return /* @__PURE__ */ l(s, { children: [
-		(u.searchable || u.options.length > 8) && /* @__PURE__ */ c(a, {
+		(u.searchable || u.options.length > 8) && /* @__PURE__ */ c(i, {
 			label: `Search ${u.label} options`,
 			hideLabel: !0,
 			value: h,
@@ -103,13 +103,13 @@ function u({ filter: u, values: d, operator: f, onChange: p, onClose: m }) {
 					})
 				]
 			}, t.value) : /* @__PURE__ */ l("div", {
-				className: "pf:relative pf:flex pf:items-center pf:gap-sm pf:rounded-sm pf:hover:bg-soft-pearl-200 pf:min-h-[36px] pf:px-md pf:py-sm",
+				className: "pf:relative pf:select-none pf:flex pf:items-center pf:gap-sm pf:rounded-sm pf:hover:bg-soft-pearl-200 pf:min-h-[36px] pf:px-md pf:py-sm",
 				children: [/* @__PURE__ */ c(r, {
 					label: t.label,
 					hideLabel: !!t.leading,
 					disabled: t.disabled,
 					checked: d.includes(t.value),
-					className: "pf:before:absolute pf:before:inset-0 pf:before:content-['']",
+					className: "pf:[&.pf-checkbox]:static pf:before:absolute pf:before:inset-0 pf:before:content-['']",
 					onCheckedChange: (e) => {
 						p(e ? [...d, t.value] : d.filter((e) => e !== t.value));
 					}

package/dist/components/table/TableFilters.js

@@ -53,6 +53,7 @@ function m({ config: m, operators: h, onOperatorChange: g, onChange: _, tools: v
 	}), t.filter((e) => e.label.toLocaleLowerCase().includes(N.toLocaleLowerCase())).map((t) => /* @__PURE__ */ p(e, {
 		size: "sm",
 		variant: "tertiary",
+		className: "pf:[&.pf-button]:justify-start pf:text-start",
 		"aria-label": `Add ${t.label} filter`,
 		onClick: () => {
 			S([.../* @__PURE__ */ new Set([...x, t.id])]), M(t.id);

package/dist/components/table/TableOptionMenu.d.ts

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 interface TableOptionMenuProps {
     label: string;
     trigger: ReactElement;

package/dist/components/table/TableOptionMenu.js

@@ -1,22 +1,21 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { Popover as n } from "@base-ui/react/popover";
+import { Popover as e } from "../popover/Popover.js";
+import { useState as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
 //#region src/components/table/TableOptionMenu.tsx
 function r({ label: r, trigger: i, children: a, open: o, onOpenChange: s, wide: c }) {
-	return /* @__PURE__ */ t(n.Root, {
-		open: o,
-		onOpenChange: s,
-		children: [/* @__PURE__ */ e(n.Trigger, { render: i }), /* @__PURE__ */ e(n.Portal, { children: /* @__PURE__ */ e(n.Positioner, {
-			sideOffset: 4,
-			align: "start",
-			collisionPadding: 8,
-			className: "pf:z-[60]",
-			children: /* @__PURE__ */ e(n.Popup, {
-				"aria-label": r,
-				style: { width: c ? "max-content" : 240 },
-				className: "pf:box-border pf:max-w-[calc(100vw-16px)] pf:max-h-[var(--available-height)] pf:overflow-auto pf:p-md pf:bg-background pf:border-[0.5px] pf:border-solid pf:border-soft-pearl-300 pf:rounded-[10px] pf:shadow-menu pf:font-body pf:text-label-13 pf:flex pf:flex-col pf:gap-md",
-				children: a
-			})
-		}) })]
+	let [l, u] = t(!1);
+	return /* @__PURE__ */ n(e, {
+		open: o ?? l,
+		onOpenChange: (e) => {
+			u(e), s?.(e);
+		},
+		trigger: i,
+		title: r,
+		className: c ? "pf:w-max" : "pf:w-[240px]",
+		children: /* @__PURE__ */ n("div", {
+			className: "pf:flex pf:flex-col pf:gap-md",
+			children: a
+		})
 	});
 }
 //#endregion