@bysages/solid 0.3.1 → 0.4.1

package/dist/components/table/index.mjs

@@ -1,38 +1,45 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { n as useComponentMessages, t as formatComponentMessage } from "../../use-component-messages-C4SCVYjD.mjs";
 import { Pagination } from "../pagination/index.mjs";
-import { t as Select$1 } from "../../select-CX6OuQlU.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { t as Select$1 } from "../../select-DI7pFspF.mjs";
 import { addEvent, createComponent, delegateEvents, effect, insert, memo, readShallow, ref, setAttribute, setStyleProperty, spread, style, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, createMemo, createSignal, onCleanup, onMount } from "solid-js";
 import { createListCollection } from "@ark-ui/solid/select";
 import { FlexRender, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, createTable, filterFn_arrIncludes, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, filterFn_weakEquals, globalFilteringFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_alphanumericCaseSensitive, sortFn_basic, sortFn_datetime, sortFn_text, sortFn_textCaseSensitive, tableFeatures } from "@tanstack/solid-table";
 import { createVirtualizer } from "@tanstack/solid-virtual";
 //#region src/components/table/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=14 height=14 fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=14 height=14 fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
-var _tmpl$3 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 6 6 6-6 6">`);
-var _tmpl$4 = /* @__PURE__ */ template(`<input>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<div data-scope=table data-part=cell-main><button type=button data-scope=table data-part=expander>`);
-var _tmpl$6 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$7 = /* @__PURE__ */ template(`<div role=row data-scope=table data-part=row>`);
-var _tmpl$8 = /* @__PURE__ */ template(`<div><!><!>`);
-var _tmpl$9 = /* @__PURE__ */ template(`<input type=text data-scope=table data-part=header-filter>`);
-var _tmpl$10 = /* @__PURE__ */ template(`<div data-scope=table data-part=root><div data-scope=table data-part=viewport tabindex=0><div role=table data-scope=table data-part=table><div role=rowgroup data-scope=table data-part=header></div><div role=rowgroup data-scope=table data-part=body><!><!></div></div></div><!>`);
-var _tmpl$11 = /* @__PURE__ */ template(`<div data-scope=table data-part=toolbar><input type=search data-scope=table data-part=global-filter>`);
-var _tmpl$12 = /* @__PURE__ */ template(`<div><input>`);
-var _tmpl$13 = /* @__PURE__ */ template(`<div data-scope=table data-part=empty>`);
-var _tmpl$14 = /* @__PURE__ */ template(`<div role=rowgroup data-scope=table data-part=footer>`);
-var _tmpl$15 = /* @__PURE__ */ template(`<div data-scope=table data-part=pagination><span data-scope=table data-part=page-status></span><div data-scope=table data-part=page-nav><!><!>`);
+var _tmpl$ = /* @__PURE__ */ template(`<input>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=table data-part=cell-main><button type=button data-scope=table data-part=expander>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div role=row data-scope=table data-part=row>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div><!><!>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<button type=button data-scope=table data-part=header-sort>`);
+var _tmpl$7 = /* @__PURE__ */ template(`<input type=text data-scope=table data-part=header-filter>`);
+var _tmpl$8 = /* @__PURE__ */ template(`<div data-scope=table data-part=root><div data-scope=table data-part=viewport tabindex=0><div role=table data-scope=table data-part=table><div role=rowgroup data-scope=table data-part=header></div><div role=rowgroup data-scope=table data-part=body><!><!></div></div></div><!>`);
+var _tmpl$9 = /* @__PURE__ */ template(`<div data-scope=table data-part=toolbar><input type=search data-scope=table data-part=global-filter>`);
+var _tmpl$10 = /* @__PURE__ */ template(`<div><input>`);
+var _tmpl$11 = /* @__PURE__ */ template(`<div data-scope=table data-part=empty>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<div role=rowgroup data-scope=table data-part=footer>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<div data-scope=table data-part=pagination><span data-scope=table data-part=page-status></span><div data-scope=table data-part=page-nav><!><!>`);
 /** The pagination bar's arrows — thin chevrons for the row of seals. */
-function pageGlyph(direction) {
-	var _el$ = _tmpl$();
-	var _el$2 = _el$.firstChild;
-	setAttribute(_el$2, "d", direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6");
-	return _el$;
+function pageIcon(direction) {
+	return direction === "start" ? iconNode("chevron-left", {
+		width: "14",
+		height: "14"
+	}) : iconNode("chevron-right", {
+		width: "14",
+		height: "14"
+	});
 }
 /** The page-size select's pointing chevron. */
-function chevronDownGlyph() {
-	return _tmpl$2();
+function chevronDownIcon() {
+	return iconNode("chevron-down", {
+		width: "14",
+		height: "14"
+	});
 }
 const SELECT_COL_ID = "__select";
 const SELECT_COL_WIDTH = 48;
@@ -84,8 +91,9 @@ function mark(el, attr, on) {
 	if (on) el.setAttribute(attr, "");
 	else el.removeAttribute(attr);
 }
-const chevronGlyph = _tmpl$3();
-function DataTable(props) {
+const chevronIcon = iconNode("chevron-right");
+const DataTable = withSelfRoot(function DataTable(props) {
+	const id = useElementId("table");
 	const messages = useComponentMessages();
 	injectComponentStyle("table");
 	if (props.virtual && props.merge) console.warn("[DataTable] `virtual` and `merge` are mutually exclusive; merge wins.");
@@ -166,6 +174,7 @@ function DataTable(props) {
 	});
 	const [viewport, setViewport] = createSignal(null);
 	const rows = createMemo(() => table.getRowModel().rows);
+	const [mounted, setMounted] = createSignal(false);
 	/** The declared row height is the density-scale baseline; the live
 	* scale comes off the document so the virtual window matches what CSS
 	* actually renders. It is read once and re-read only when the density
@@ -200,6 +209,25 @@ function DataTable(props) {
 	});
 	const virtual = () => props.virtual && !props.merge;
 	const mergeMode = () => !props.virtual && !!props.merge;
+	onMount(() => setMounted(true));
+	const virtualRows = () => {
+		if (mounted()) return virtualizer.getVirtualItems();
+		if (!virtual()) return [];
+		const fallback = Math.max(1, Math.ceil(320 / baseRowHeight()));
+		return rows().slice(0, fallback).map((row, index) => {
+			const start = index * baseRowHeight();
+			const size = baseRowHeight();
+			return {
+				key: row.id ?? index,
+				index,
+				start,
+				end: start + size,
+				size,
+				lane: 0
+			};
+		});
+	};
+	const totalSize = () => mounted() ? virtualizer.getTotalSize() : rows().length * baseRowHeight();
 	/** Column ids of the visible leaves, for pin-seam bookkeeping. */
 	const leafIds = createMemo(() => table.getAllLeafColumns().map((c) => c.id));
 	const expandHostId = createMemo(() => {
@@ -396,12 +424,12 @@ function DataTable(props) {
 		const rowSpan = cell.getRowSpan();
 		const style = {
 			...pinStyle,
-			...rowSpan > 1 ? { "grid-row": `span ${rowSpan}` } : {}
+			...rowSpan > 1 ? { "--bs-table-row-span": String(rowSpan) } : {}
 		};
 		let content;
 		if (column.id === SELECT_COL_ID) content = (() => {
-			var _el$5 = _tmpl$4();
-			spread(_el$5, [
+			var _el$ = _tmpl$();
+			spread(_el$, [
 				{
 					type: "checkbox",
 					get checked() {
@@ -416,14 +444,14 @@ function DataTable(props) {
 					onchange: () => row.toggleSelected(!row.getIsSelected())
 				}
 			], false);
-			return _el$5;
+			return _el$;
 		})();
 		else if (isExpandHost) content = (() => {
-			var _el$6 = _tmpl$5();
-			var _el$7 = _el$6.firstChild;
-			_el$7._$$click = () => row.toggleExpanded();
-			insert(_el$7, chevronGlyph);
-			insert(_el$6, createComponent(FlexRender, { cell }), null);
+			var _el$2 = _tmpl$2();
+			var _el$3 = _el$2.firstChild;
+			_el$3._$$click = () => row.toggleExpanded();
+			insert(_el$3, chevronIcon);
+			insert(_el$2, createComponent(FlexRender, { cell }), null);
 			effect(() => {
 				return {
 					e: String(row.depth),
@@ -432,16 +460,16 @@ function DataTable(props) {
 					o: row.getIsExpanded() ? messages().table.collapseRow : messages().table.expandRow
 				};
 			}, ({ e, t, a, o }, _p$) => {
-				e !== _p$?.e && setStyleProperty(_el$6, "--bs-table-depth", e);
-				t !== _p$?.t && setAttribute(_el$7, "data-expanded", t);
-				a !== _p$?.a && setAttribute(_el$7, "data-leaf", a);
-				o !== _p$?.o && setAttribute(_el$7, "aria-label", o);
+				e !== _p$?.e && setStyleProperty(_el$2, "--bs-table-depth", e);
+				t !== _p$?.t && setAttribute(_el$3, "data-expanded", t);
+				a !== _p$?.a && setAttribute(_el$3, "data-leaf", a);
+				o !== _p$?.o && setAttribute(_el$3, "aria-label", o);
 			});
-			return _el$6;
+			return _el$2;
 		})();
 		else content = createComponent(FlexRender, { cell });
-		var _el$8 = _tmpl$6();
-		spread(_el$8, [
+		var _el$4 = _tmpl$3();
+		spread(_el$4, [
 			{
 				role: "cell",
 				"data-scope": "table",
@@ -454,26 +482,23 @@ function DataTable(props) {
 			pin,
 			{ style }
 		], true);
-		insert(_el$8, content);
-		return _el$8;
+		insert(_el$4, content);
+		return _el$4;
 	}
 	function renderRow(row, virtualItem) {
 		const style$1 = virtualItem ? {
-			position: "absolute",
-			"inset-inline-start": "0",
-			"inline-size": "100%",
-			transform: `translateY(${virtualItem.start}px)`,
-			"block-size": `${virtualItem.size}px`
+			"--bs-table-virtual-row-start": `${virtualItem.start}px`,
+			"--bs-table-virtual-row-size": `${virtualItem.size}px`
 		} : {};
 		const draggable = rowDraggable();
-		var _el$9 = _tmpl$7();
-		addEvent(_el$9, "dragend", draggable ? onRowDragEnd : void 0);
-		addEvent(_el$9, "drop", draggable ? (e) => onRowDrop(row, e) : void 0);
-		addEvent(_el$9, "dragleave", draggable ? onRowDragLeave : void 0);
-		addEvent(_el$9, "dragover", draggable ? (e) => onRowDragOver(row, e) : void 0);
-		addEvent(_el$9, "dragstart", draggable ? (e) => onRowDragStart(row, e) : void 0);
-		setAttribute(_el$9, "draggable", draggable || void 0);
-		insert(_el$9, createComponent(For, {
+		var _el$5 = _tmpl$4();
+		addEvent(_el$5, "dragend", draggable ? onRowDragEnd : void 0);
+		addEvent(_el$5, "drop", draggable ? (e) => onRowDrop(row, e) : void 0);
+		addEvent(_el$5, "dragleave", draggable ? onRowDragLeave : void 0);
+		addEvent(_el$5, "dragover", draggable ? (e) => onRowDragOver(row, e) : void 0);
+		addEvent(_el$5, "dragstart", draggable ? (e) => onRowDragStart(row, e) : void 0);
+		setAttribute(_el$5, "draggable", draggable || void 0);
+		insert(_el$5, createComponent(For, {
 			get each() {
 				return row.getVisibleCells();
 			},
@@ -485,10 +510,10 @@ function DataTable(props) {
 				t: readShallow(style$1)
 			};
 		}, ({ e, t }, _p$) => {
-			e !== _p$?.e && setAttribute(_el$9, "data-selected", e);
-			style(_el$9, t, _p$?.t);
+			e !== _p$?.e && setAttribute(_el$5, "data-selected", e);
+			style(_el$5, t, _p$?.t);
 		});
-		return _el$9;
+		return _el$5;
 	}
 	function renderHeaderCell(header) {
 		const column = header.column;
@@ -496,10 +521,10 @@ function DataTable(props) {
 		const canSort = column.getCanSort();
 		const canFilter = props.filterable && column.getCanFilter();
 		const canDrag = !!props.reorderable && column.id !== SELECT_COL_ID && !column.getIsPinned();
-		var _el$10 = _tmpl$8();
-		var _el$11 = _el$10.firstChild;
-		var _el$12 = _el$11.nextSibling;
-		spread(_el$10, [
+		var _el$6 = _tmpl$5();
+		var _el$7 = _el$6.firstChild;
+		var _el$8 = _el$7.nextSibling;
+		spread(_el$6, [
 			{
 				role: "columnheader",
 				"data-scope": "table",
@@ -520,7 +545,6 @@ function DataTable(props) {
 				return pinAttrs(column);
 			},
 			{
-				onclick: canSort ? () => column.toggleSorting() : void 0,
 				ondragstart: canDrag ? onColDragStart : void 0,
 				ondragover: canDrag ? (e) => onColDragOver(column, e) : void 0,
 				ondragleave: canDrag ? onColDragLeave : void 0,
@@ -528,19 +552,23 @@ function DataTable(props) {
 				ondragend: canDrag ? onColDragEnd : void 0
 			}
 		], true);
-		insert(_el$10, (() => {
+		insert(_el$6, (() => {
 			var _c$ = memo(() => {
 				return !!(header.isPlaceholder || header.column.columnDef.header === "");
 			});
 			return () => {
-				return _c$() ? null : createComponent(FlexRender, { header });
+				return _c$() ? null : canSort ? (() => {
+					var _el$9 = _tmpl$6();
+					_el$9._$$click = () => column.toggleSorting();
+					insert(_el$9, createComponent(FlexRender, { header }));
+					return _el$9;
+				})() : createComponent(FlexRender, { header });
 			};
-		})(), _el$11);
-		insert(_el$10, canFilter ? (() => {
-			var _el$13 = _tmpl$9();
-			_el$13._$$input = (e) => column.setFilterValue(e.target.value);
-			_el$13.addEventListener("dragstart", (e) => e.stopPropagation());
-			_el$13._$$click = (e) => e.stopPropagation();
+		})(), _el$7);
+		insert(_el$6, canFilter ? (() => {
+			var _el$10 = _tmpl$7();
+			_el$10._$$input = (e) => column.setFilterValue(e.target.value);
+			_el$10.addEventListener("dragstart", (e) => e.stopPropagation());
 			effect(() => {
 				return {
 					e: formatComponentMessage(messages().table.filterColumn, { name: column.id }),
@@ -548,31 +576,31 @@ function DataTable(props) {
 					a: messages().command.filter
 				};
 			}, ({ e, t, a }, _p$) => {
-				e !== _p$?.e && setAttribute(_el$13, "aria-label", e);
-				_el$13.value = t ?? "";
-				a !== _p$?.a && setAttribute(_el$13, "placeholder", a);
+				e !== _p$?.e && setAttribute(_el$10, "aria-label", e);
+				_el$10.value = t ?? "";
+				a !== _p$?.a && setAttribute(_el$10, "placeholder", a);
 			});
-			return _el$13;
-		})() : null, _el$12);
-		return _el$10;
+			return _el$10;
+		})() : null, _el$8);
+		return _el$6;
 	}
-	var _el$14 = _tmpl$10();
-	var _el$15 = _el$14.firstChild;
+	var _el$11 = _tmpl$8();
+	var _el$12 = _el$11.firstChild;
+	var _el$13 = _el$12.firstChild;
+	var _el$14 = _el$13.firstChild;
+	var _el$15 = _el$14.nextSibling;
 	var _el$16 = _el$15.firstChild;
-	var _el$17 = _el$16.firstChild;
-	var _el$18 = _el$17.nextSibling;
-	var _el$19 = _el$18.firstChild;
-	var _el$20 = _el$19.nextSibling;
-	var _el$21 = _el$15.nextSibling;
-	insert(_el$14, (() => {
+	var _el$17 = _el$16.nextSibling;
+	var _el$18 = _el$12.nextSibling;
+	insert(_el$11, (() => {
 		var _c$2 = memo(() => {
 			return !!(props.filterable && (props.showToolbar ?? true));
 		});
 		return () => {
 			return _c$2() ? (() => {
-				var _el$22 = _tmpl$11();
-				var _el$23 = _el$22.firstChild;
-				_el$23._$$input = (e) => table.setGlobalFilter(e.target.value);
+				var _el$19 = _tmpl$9();
+				var _el$20 = _el$19.firstChild;
+				_el$20._$$input = (e) => table.setGlobalFilter(e.target.value);
 				effect(() => {
 					return {
 						e: messages().table.filterAll,
@@ -580,24 +608,24 @@ function DataTable(props) {
 						a: table.atoms.globalFilter.get() ?? ""
 					};
 				}, ({ e, t, a }, _p$) => {
-					e !== _p$?.e && setAttribute(_el$23, "aria-label", e);
-					t !== _p$?.t && setAttribute(_el$23, "placeholder", t);
-					_el$23.value = a ?? "";
+					e !== _p$?.e && setAttribute(_el$20, "aria-label", e);
+					t !== _p$?.t && setAttribute(_el$20, "placeholder", t);
+					_el$20.value = a ?? "";
 				});
-				return _el$22;
+				return _el$19;
 			})() : null;
 		};
-	})(), _el$15);
+	})(), _el$12);
 	ref(() => {
 		return setViewport;
-	}, _el$15);
-	insert(_el$17, createComponent(For, {
+	}, _el$12);
+	insert(_el$14, createComponent(For, {
 		get each() {
 			return table.getHeaderGroups();
 		},
 		children: (group) => (() => {
-			var _el$24 = _tmpl$7();
-			insert(_el$24, createComponent(For, {
+			var _el$21 = _tmpl$4();
+			insert(_el$21, createComponent(For, {
 				get each() {
 					return group.headers;
 				},
@@ -605,16 +633,16 @@ function DataTable(props) {
 					const column = header.column;
 					if (column.id !== SELECT_COL_ID) return renderHeaderCell(header);
 					const all = table.getIsAllRowsSelected();
-					var _el$25 = _tmpl$12();
-					var _el$26 = _el$25.firstChild;
-					spread(_el$25, [{
+					var _el$22 = _tmpl$10();
+					var _el$23 = _el$22.firstChild;
+					spread(_el$22, [{
 						role: "columnheader",
 						"data-scope": "table",
 						"data-part": "header-cell"
 					}, () => {
 						return pinAttrs(column);
 					}], true);
-					spread(_el$26, [
+					spread(_el$23, [
 						{
 							type: "checkbox",
 							checked: all
@@ -629,20 +657,20 @@ function DataTable(props) {
 							onchange: () => table.toggleAllRowsSelected(!all)
 						}
 					], false);
-					return _el$25;
+					return _el$22;
 				}
 			}));
-			return _el$24;
+			return _el$21;
 		})()
 	}));
-	insert(_el$18, (() => {
+	insert(_el$15, (() => {
 		var _c$3 = memo(() => {
 			return !!virtual();
 		});
 		return () => {
 			return _c$3() ? createComponent(For, {
 				get each() {
-					return virtualizer.getVirtualItems();
+					return virtualRows();
 				},
 				children: (item) => renderRow(rows()[item.index], item)
 			}) : createComponent(For, {
@@ -652,41 +680,41 @@ function DataTable(props) {
 				children: (row) => renderRow(row)
 			});
 		};
-	})(), _el$19);
-	insert(_el$18, (() => {
+	})(), _el$16);
+	insert(_el$15, (() => {
 		var _c$4 = memo(() => {
 			return rows().length === 0;
 		});
 		return () => {
 			return _c$4() ? (() => {
-				var _el$27 = _tmpl$13();
-				insert(_el$27, () => {
+				var _el$24 = _tmpl$11();
+				insert(_el$24, () => {
 					return props.emptyText ?? messages().table.empty;
 				});
-				return _el$27;
+				return _el$24;
 			})() : null;
 		};
-	})(), _el$20);
-	insert(_el$16, (() => {
+	})(), _el$17);
+	insert(_el$13, (() => {
 		var _c$5 = memo(() => {
 			return !!(props.stickyFooter && table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer)));
 		});
 		return () => {
 			return _c$5() ? (() => {
-				var _el$28 = _tmpl$14();
-				insert(_el$28, createComponent(For, {
+				var _el$25 = _tmpl$12();
+				insert(_el$25, createComponent(For, {
 					get each() {
 						return table.getFooterGroups();
 					},
 					children: (group) => (() => {
-						var _el$29 = _tmpl$7();
-						insert(_el$29, createComponent(For, {
+						var _el$26 = _tmpl$4();
+						insert(_el$26, createComponent(For, {
 							get each() {
 								return group.headers;
 							},
 							children: (header) => (() => {
-								var _el$30 = _tmpl$6();
-								spread(_el$30, [{
+								var _el$27 = _tmpl$3();
+								spread(_el$27, [{
 									role: "cell",
 									"data-scope": "table",
 									"data-part": "footer-cell",
@@ -696,7 +724,7 @@ function DataTable(props) {
 								}, () => {
 									return pinAttrs(header.column);
 								}], true);
-								insert(_el$30, (() => {
+								insert(_el$27, (() => {
 									var _c$7 = memo(() => {
 										return !!header.isPlaceholder;
 									});
@@ -704,31 +732,34 @@ function DataTable(props) {
 										return _c$7() ? null : createComponent(FlexRender, { footer: header });
 									};
 								})());
-								return _el$30;
+								return _el$27;
 							})()
 						}));
-						return _el$29;
+						return _el$26;
 					})()
 				}));
-				return _el$28;
+				return _el$25;
 			})() : null;
 		};
 	})(), null);
-	insert(_el$14, (() => {
+	insert(_el$11, (() => {
 		var _c$6 = memo(() => {
 			return !!props.paginated;
 		});
 		return () => {
 			return _c$6() ? (() => {
-				var _el$31 = _tmpl$15();
-				var _el$32 = _el$31.firstChild;
-				var _el$33 = _el$32.nextSibling;
-				var _el$34 = _el$33.firstChild;
-				var _el$35 = _el$34.nextSibling;
-				insert(_el$32, () => {
+				var _el$28 = _tmpl$13();
+				var _el$29 = _el$28.firstChild;
+				var _el$30 = _el$29.nextSibling;
+				var _el$31 = _el$30.firstChild;
+				var _el$32 = _el$31.nextSibling;
+				insert(_el$29, () => {
 					return formatComponentMessage(messages().table.rowsCount, { count: table.getRowCount() });
 				});
-				insert(_el$33, createComponent(Select$1.Root, {
+				insert(_el$30, createComponent(Select$1.Root, {
+					get id() {
+						return id();
+					},
 					get collection() {
 						return createListCollection({ items: (props.pageSizeOptions ?? [
 							10,
@@ -752,7 +783,7 @@ function DataTable(props) {
 								},
 								get children() {
 									return [createComponent(Select$1.ValueText, {}), createComponent(Select$1.Indicator, { get children() {
-										return chevronDownGlyph();
+										return chevronDownIcon();
 									} })];
 								}
 							});
@@ -774,15 +805,23 @@ function DataTable(props) {
 										get children() {
 											return [createComponent(Select$1.ItemText, { get children() {
 												return item.label;
-											} }), createComponent(Select$1.ItemIndicator, { children: "✓" })];
+											} }), createComponent(Select$1.ItemIndicator, { get children() {
+												return iconNode("check", {
+													width: 14,
+													height: 14
+												});
+											} })];
 										}
 									})
 								});
 							} });
 						} })];
 					}
-				}), _el$34);
-				insert(_el$33, createComponent(Pagination.Root, {
+				}), _el$31);
+				insert(_el$30, createComponent(Pagination.Root, {
+					get id() {
+						return `${id()}-pagination`;
+					},
 					get count() {
 						return table.getRowCount();
 					},
@@ -796,7 +835,7 @@ function DataTable(props) {
 					get children() {
 						return [
 							createComponent(Pagination.PrevTrigger, { get children() {
-								return pageGlyph("start");
+								return pageIcon("start");
 							} }),
 							createComponent(Pagination.Context, { children: (scope) => createComponent(For, {
 								get each() {
@@ -815,35 +854,34 @@ function DataTable(props) {
 								})
 							}) }),
 							createComponent(Pagination.NextTrigger, { get children() {
-								return pageGlyph("end");
+								return pageIcon("end");
 							} })
 						];
 					}
-				}), _el$35);
-				return _el$31;
+				}), _el$32);
+				return _el$28;
 			})() : null;
 		};
-	})(), _el$21);
+	})(), _el$18);
 	effect(() => {
 		return {
 			e: props.reorderable || void 0,
 			t: `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`,
 			a: colsTemplate(),
 			o: mergeMode() || void 0,
-			i: readShallow(virtual() ? {
-				position: "relative",
-				"block-size": `${virtualizer.getTotalSize()}px`
-			} : void 0)
+			i: virtual() || void 0,
+			n: readShallow(virtual() ? { "--bs-table-virtual-total": `${totalSize()}px` } : void 0)
 		};
-	}, ({ e, t, a, o, i }, _p$) => {
-		e !== _p$?.e && setAttribute(_el$14, "data-reorderable", e);
-		t !== _p$?.t && setStyleProperty(_el$14, "--bs-table-row-height", t);
-		a !== _p$?.a && setStyleProperty(_el$16, "--bs-table-cols", a);
-		o !== _p$?.o && setAttribute(_el$18, "data-merge", o);
-		style(_el$18, i, _p$?.i);
+	}, ({ e, t, a, o, i, n }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$11, "data-reorderable", e);
+		t !== _p$?.t && setStyleProperty(_el$11, "--bs-table-row-height", t);
+		a !== _p$?.a && setStyleProperty(_el$13, "--bs-table-cols", a);
+		o !== _p$?.o && setAttribute(_el$15, "data-merge", o);
+		i !== _p$?.i && setAttribute(_el$15, "data-virtual", i);
+		style(_el$15, n, _p$?.n);
 	});
-	return _el$14;
-}
+	return _el$11;
+});
 delegateEvents(["click", "input"]);
 //#endregion
 export { DataTable, FlexRender, createColumnHelper };

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

@@ -1,3 +1,4 @@
+import { JSX } from "solid-js";
 import { Tabs as Tabs$1, TabsRootProps } from "@ark-ui/solid/tabs";
 //#region src/components/tabs/index.d.ts
 /**
@@ -12,8 +13,25 @@ type TabsOwnProps = {
   /** The register: a ruled line (default), or each tab its own card. */
   variant?: "line" | "card";
 };
-declare function TabsRoot(props: TabsRootProps & TabsOwnProps): import("solid-js").JSX.Element;
-export declare const Tabs: Omit<typeof Tabs$1, "Root"> & {
+declare function TabsRoot(props: TabsRootProps & TabsOwnProps): JSX.Element;
+export type TabsItem = {
+  value: string;
+  label: string;
+  content?: JSX.Element;
+};
+export interface TabsFacadeProps {
+  value?: string;
+  defaultValue?: string;
+  items: TabsItem[];
+  /** The register: a ruled line (default), or each tab its own card. */
+  variant?: "line" | "card";
+  orientation?: "horizontal" | "vertical";
+  /** One rung of the control-height ladder for the tab rows. */
+  size?: "sm" | "md" | "lg";
+  onValueChange?: (value: string) => void;
+}
+declare function TabsFacade(props: TabsFacadeProps): JSX.Element;
+export declare const Tabs: typeof TabsFacade & Omit<typeof Tabs$1, "Root"> & {
   Root: typeof TabsRoot;
 };
 //#endregion