@bysages/svelte 0.3.0 → 0.4.0

package/dist/{table-BnNK4_su.mjs → table-geA12h-I.mjs}

@@ -1,12 +1,16 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as iconHtml } from "./icon-lWVQxDG6.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import { n as useComponentMessages, t as formatMessage } from "./messages-DNzA55pH.mjs";
 import { Pagination } from "./components/pagination/index.mjs";
-import { n as Select$1 } from "./select-rkY0qJKI.mjs";
+import { n as Select$1 } from "./select-DQQ0bSN9.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
+import { untrack } from "svelte";
 import { createListCollection } from "@ark-ui/svelte/select";
 import { FlexRender, FlexRender as FlexRender$1, 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/svelte-table";
 import { createVirtualizer } from "@tanstack/svelte-virtual";
-import { get } from "svelte/store";
 //#region src/components/table/table-utils.ts
 /** The list holding `id` and the index inside it, or null when absent. */
 function findNode(rows, id) {
@@ -85,22 +89,21 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"onRowReorder",
 	"onColumnReorder"
 ]);
-var root = $.from_html(`<input type="checkbox" aria-label="Select row"/>`);
-var root_1 = $.from_html(`<div data-scope="table" data-part="cell-main"><button type="button" data-scope="table" data-part="expander"><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"></path></svg></button> <!></div>`);
+var root = $.from_html(`<input type="checkbox"/>`);
+var root_1 = $.from_html(`<div data-scope="table" data-part="cell-main"><button type="button" data-scope="table" data-part="expander"><!></button> <!></div>`);
 var root_2 = $.from_html(`<div><!></div>`);
 var root_3 = $.from_html(`<div role="row" data-scope="table" data-part="row"></div>`);
-var root_4 = $.from_html(`<div data-scope="table" data-part="toolbar"><input type="search" data-scope="table" data-part="global-filter" aria-label="Filter all columns"/></div>`);
-var root_5 = $.from_html(`<div><input type="checkbox" aria-label="Select all rows"/></div>`);
-var root_6 = $.from_html(`<input type="text" data-scope="table" data-part="header-filter" placeholder="Filter"/>`);
-var root_7 = $.from_html(`<div><!> <!></div>`);
-var root_8 = $.from_html(`<div data-scope="table" data-part="empty"> </div>`);
-var root_9 = $.from_html(`<div role="rowgroup" data-scope="table" data-part="footer"></div>`);
-var root_10 = $.from_svg(`<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"></path></svg>`);
+var root_4 = $.from_html(`<div data-scope="table" data-part="toolbar"><input type="search" data-scope="table" data-part="global-filter"/></div>`);
+var root_5 = $.from_html(`<div><input type="checkbox"/></div>`);
+var root_6 = $.from_html(`<button type="button" data-scope="table" data-part="header-sort"><!></button>`);
+var root_7 = $.from_html(`<input type="text" data-scope="table" data-part="header-filter"/>`);
+var root_8 = $.from_html(`<div><!> <!></div>`);
+var root_9 = $.from_html(`<div data-scope="table" data-part="empty"> </div>`);
+var root_10 = $.from_html(`<div role="rowgroup" data-scope="table" data-part="footer"></div>`);
 var root_11 = $.from_html(`<!> <!>`, 1);
-var root_12 = $.from_svg(`<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></path></svg>`);
-var root_13 = $.from_html(`<!> <!> <!>`, 1);
-var root_14 = $.from_html(`<div data-scope="table" data-part="pagination"><span data-scope="table" data-part="page-status"> </span> <div data-scope="table" data-part="page-nav"><!> <!></div></div>`);
-var root_15 = $.from_html(`<div><!> <div data-scope="table" data-part="viewport"><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> <!></div>`);
+var root_12 = $.from_html(`<!> <!> <!>`, 1);
+var root_13 = $.from_html(`<div data-scope="table" data-part="pagination"><span data-scope="table" data-part="page-status"> </span> <div data-scope="table" data-part="page-nav"><!> <!></div></div>`);
+var root_14 = $.from_html(`<div><!>  <div data-scope="table" data-part="viewport"><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> <!></div>`);
 function DataTable$1($$anchor, $$props) {
 	$.push($$props, true);
 	const $virtualizer = () => $.store_get(virtualizer, "$virtualizer", $$stores);
@@ -129,7 +132,10 @@ function DataTable$1($$anchor, $$props) {
 					var input = root();
 					$.remove_input_defaults(input);
 					input.indeterminate = false;
-					$.template_effect(($0) => $.set_checked(input, $0), [() => row().getIsSelected()]);
+					$.template_effect(($0, $1) => {
+						$.set_checked(input, $0);
+						$.set_attribute(input, "aria-label", $1);
+					}, [() => row().getIsSelected(), () => messages().table.selectRow]);
 					$.delegated("change", input, () => row().toggleSelected(!row().getIsSelected()));
 					$.append($$anchor, input);
 				};
@@ -137,8 +143,11 @@ function DataTable$1($$anchor, $$props) {
 					var div_2 = root_1();
 					let styles;
 					var button = $.child(div_2);
-					var node_3 = $.sibling(button, 2);
-					FlexRender(node_3, { get cell() {
+					var node_3 = $.child(button);
+					InternalIcon(node_3, { name: "chevron-right" });
+					$.reset(button);
+					var node_4 = $.sibling(button, 2);
+					FlexRender(node_4, { get cell() {
 						return $.get(cell);
 					} });
 					$.reset(div_2);
@@ -151,7 +160,7 @@ function DataTable$1($$anchor, $$props) {
 						() => String(row().depth),
 						() => row().getIsExpanded() || void 0,
 						() => !row().getCanExpand() || void 0,
-						() => row().getIsExpanded() ? "Collapse row" : "Expand row"
+						() => row().getIsExpanded() ? messages().table.collapseRow : messages().table.expandRow
 					]);
 					$.delegated("click", button, () => row().toggleExpanded());
 					$.append($$anchor, div_2);
@@ -177,14 +186,12 @@ function DataTable$1($$anchor, $$props) {
 		});
 		$.reset(div);
 		$.template_effect(($0) => {
+			$.set_attribute(div, "tabindex", $.get(rowDraggable) ? 0 : -1);
 			$.set_attribute(div, "data-selected", $0);
 			$.set_attribute(div, "draggable", $.get(rowDraggable) || void 0);
 			$.set_style(div, item() ? {
-				position: "absolute",
-				"inset-inline-start": "0",
-				"inline-size": "100%",
-				transform: `translateY(${item().start}px)`,
-				"block-size": `${item().size}px`
+				"--bs-table-virtual-row-start": `${item().start}px`,
+				"--bs-table-virtual-row-size": `${item().size}px`
 			} : void 0);
 		}, [() => row().getIsSelected() || void 0]);
 		$.event("dragstart", div, (e) => onRowDragStart(row(), e));
@@ -199,14 +206,18 @@ function DataTable$1($$anchor, $$props) {
 		10,
 		20,
 		50
-	]), stickyFooter = $.prop($$props, "stickyFooter", 3, false), globalFilterPlaceholder = $.prop($$props, "globalFilterPlaceholder", 3, "Filter rows"), emptyText = $.prop($$props, "emptyText", 3, "No rows"), reorderable = $.prop($$props, "reorderable", 3, false), rest = $.rest_props($$props, rest_excludes);
+	]), stickyFooter = $.prop($$props, "stickyFooter", 3, false), reorderable = $.prop($$props, "reorderable", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
+	const globalFilterText = $.derived(() => $$props.globalFilterPlaceholder ?? messages().table.filterAll);
 	const SELECT_COL_ID = "__select";
 	const SELECT_COL_WIDTH = 48;
-	if (virtual() && $$props.merge) console.warn("[DataTable] `virtual` and `merge` are mutually exclusive; merge wins.");
+	untrack(() => {
+		if (virtual() && $$props.merge) console.warn("[DataTable] `virtual` and `merge` are mutually exclusive; merge wins.");
+	});
 	/** Features follow the construction-time switches: sorting, selection,
 	* expansion, pinning, and spanning are always part of the one-stop
 	* shape; filtering and pagination ride their own render paths. */
-	const features = tableFeatures({
+	const features = untrack(() => tableFeatures({
 		rowSortingFeature,
 		sortedRowModel: createSortedRowModel(),
 		sortFns: {
@@ -242,24 +253,27 @@ function DataTable$1($$anchor, $$props) {
 			rowPaginationFeature,
 			paginatedRowModel: createPaginatedRowModel()
 		} : {}
-	});
+	}));
 	/** The select column leads; merged columns opt into value-based row
 	* spanning at the model level. Built once: column inputs stay stable
 	* for the life of the instance, like the features above. */
-	const mergeIds = new Set($$props.merge ?? []);
 	const defId = (def) => def.id ?? ("accessorKey" in def ? String(def.accessorKey) : "");
-	const cols = $$props.columns.map((def) => mergeIds.has(defId(def)) ? {
-		...def,
-		spanRows: true
-	} : def);
-	if (selectable()) cols.unshift({
-		id: SELECT_COL_ID,
-		size: SELECT_COL_WIDTH,
-		enableSorting: false,
-		header: () => "",
-		cell: () => ""
+	const cols = untrack(() => {
+		const mergeIds = new Set($$props.merge ?? []);
+		const mapped = $$props.columns.map((def) => mergeIds.has(defId(def)) ? {
+			...def,
+			spanRows: true
+		} : def);
+		if (selectable()) mapped.unshift({
+			id: SELECT_COL_ID,
+			size: SELECT_COL_WIDTH,
+			enableSorting: false,
+			header: () => "",
+			cell: () => ""
+		});
+		return mapped;
 	});
-	const table = createTable({
+	const table = untrack(() => createTable({
 		features,
 		columns: cols,
 		get data() {
@@ -280,7 +294,7 @@ function DataTable$1($$anchor, $$props) {
 				end: $$props.pinEnd ?? []
 			} } : {}
 		}
-	});
+	}));
 	/** Instance-shaped aliases for the helpers below. */
 	const rows = $.derived(() => table.getRowModel().rows);
 	const virtualMode = $.derived(() => virtual() && !$$props.merge);
@@ -509,10 +523,10 @@ function DataTable$1($$anchor, $$props) {
 	function cellStyle(column, span) {
 		return {
 			...pinOffset(column) ? { "--pin-offset": pinOffset(column) } : {},
-			...span > 1 ? { "grid-row": `span ${span}` } : {}
+			...span > 1 ? { "--bs-table-row-span": String(span) } : {}
 		};
 	}
-	var div_3 = root_15();
+	var div_3 = root_14();
 	$.attribute_effect(div_3, ($0) => ({
 		...rest,
 		"data-scope": "table",
@@ -520,23 +534,25 @@ function DataTable$1($$anchor, $$props) {
 		"data-reorderable": reorderable() || void 0,
 		[$.STYLE]: { "--bs-table-row-height": $0 }
 	}), [() => `calc(${baseRowHeight()}px * var(--bs-density-scale, 1))`]);
-	var node_4 = $.child(div_3);
+	var node_5 = $.child(div_3);
 	var consequent_3 = ($$anchor) => {
 		var div_4 = root_4();
 		var input_1 = $.child(div_4);
 		$.remove_input_defaults(input_1);
 		$.reset(div_4);
-		$.template_effect(($0) => {
-			$.set_attribute(input_1, "placeholder", globalFilterPlaceholder());
-			$.set_value(input_1, $0);
-		}, [() => table.atoms.globalFilter.get() ?? ""]);
+		$.template_effect(($0, $1) => {
+			$.set_attribute(input_1, "aria-label", $0);
+			$.set_attribute(input_1, "placeholder", $.get(globalFilterText));
+			$.set_value(input_1, $1);
+		}, [() => messages().table.filterAll, () => table.atoms.globalFilter.get() ?? ""]);
 		$.delegated("input", input_1, (e) => table.setGlobalFilter(e.currentTarget.value));
 		$.append($$anchor, div_4);
 	};
-	$.if(node_4, ($$render) => {
+	$.if(node_5, ($$render) => {
 		if (filterable() && showToolbar()) $$render(consequent_3);
 	});
-	var div_5 = $.sibling(node_4, 2);
+	var div_5 = $.sibling(node_5, 2);
+	$.set_attribute(div_5, "tabindex", 0);
 	var div_6 = $.child(div_5);
 	let styles_1;
 	var div_7 = $.child(div_6);
@@ -545,7 +561,7 @@ function DataTable$1($$anchor, $$props) {
 		$.each(div_8, 21, () => $.get(group).headers, (header) => header.column.id, ($$anchor, header) => {
 			const column = $.derived(() => $.get(header).column);
 			var fragment_2 = $.comment();
-			var node_5 = $.first_child(fragment_2);
+			var node_6 = $.first_child(fragment_2);
 			var consequent_4 = ($$anchor) => {
 				const all = $.derived(() => table.getIsAllRowsSelected());
 				var div_9 = root_5();
@@ -559,19 +575,20 @@ function DataTable$1($$anchor, $$props) {
 				var input_2 = $.child(div_9);
 				$.remove_input_defaults(input_2);
 				$.reset(div_9);
-				$.template_effect(($0) => {
+				$.template_effect(($0, $1) => {
 					$.set_checked(input_2, $.get(all));
 					input_2.indeterminate = $0;
-				}, [() => table.getIsSomeRowsSelected() && !$.get(all)]);
+					$.set_attribute(input_2, "aria-label", $1);
+				}, [() => table.getIsSomeRowsSelected() && !$.get(all), () => messages().table.selectAllRows]);
 				$.delegated("change", input_2, () => table.toggleAllRowsSelected(!$.get(all)));
 				$.append($$anchor, div_9);
 			};
-			var alternate_1 = ($$anchor) => {
+			var alternate_2 = ($$anchor) => {
 				const sorted = $.derived(() => $.get(column).getIsSorted());
 				const canSort = $.derived(() => $.get(column).getCanSort());
 				const canFilter = $.derived(() => filterable() && $.get(column).getCanFilter());
 				const canDrag = $.derived(() => !!reorderable() && $.get(column).id !== SELECT_COL_ID && !$.get(column).getIsPinned());
-				var div_10 = root_7();
+				var div_10 = root_8();
 				$.attribute_effect(div_10, ($0, $1) => ({
 					role: "columnheader",
 					"data-scope": "table",
@@ -584,7 +601,6 @@ function DataTable$1($$anchor, $$props) {
 					draggable: $.get(canDrag) || void 0,
 					"aria-sort": $.get(sorted) === "asc" ? "ascending" : $.get(sorted) === "desc" ? "descending" : void 0,
 					...$0,
-					onclick: $.get(canSort) ? () => $.get(column).toggleSorting() : void 0,
 					ondragstart: $.get(canDrag) ? onColDragStart : void 0,
 					ondragover: $.get(canDrag) ? (e) => onColDragOver($.get(column), e) : void 0,
 					ondragleave: $.get(canDrag) ? onColDragLeave : void 0,
@@ -592,38 +608,61 @@ function DataTable$1($$anchor, $$props) {
 					ondragend: $.get(canDrag) ? onColDragEnd : void 0,
 					[$.STYLE]: { "--pin-offset": $1 }
 				}), [() => pinAttrs($.get(column)), () => pinOffset($.get(column))]);
-				var node_6 = $.child(div_10);
-				var consequent_5 = ($$anchor) => {
-					FlexRender($$anchor, { get header() {
-						return $.get(header);
-					} });
+				var node_7 = $.child(div_10);
+				var consequent_6 = ($$anchor) => {
+					var fragment_3 = $.comment();
+					var node_8 = $.first_child(fragment_3);
+					var consequent_5 = ($$anchor) => {
+						var button_1 = root_6();
+						var node_9 = $.child(button_1);
+						FlexRender(node_9, { get header() {
+							return $.get(header);
+						} });
+						$.reset(button_1);
+						$.delegated("click", button_1, () => $.get(column).toggleSorting());
+						$.append($$anchor, button_1);
+					};
+					var alternate_1 = ($$anchor) => {
+						FlexRender($$anchor, { get header() {
+							return $.get(header);
+						} });
+					};
+					$.if(node_8, ($$render) => {
+						if ($.get(canSort)) $$render(consequent_5);
+						else $$render(alternate_1, -1);
+					});
+					$.append($$anchor, fragment_3);
 				};
-				$.if(node_6, ($$render) => {
-					if (!$.get(header).isPlaceholder && $.get(header).column.columnDef.header !== "") $$render(consequent_5);
+				$.if(node_7, ($$render) => {
+					if (!$.get(header).isPlaceholder && $.get(header).column.columnDef.header !== "") $$render(consequent_6);
 				});
-				var node_7 = $.sibling(node_6, 2);
-				var consequent_6 = ($$anchor) => {
-					var input_3 = root_6();
+				var node_10 = $.sibling(node_7, 2);
+				var consequent_7 = ($$anchor) => {
+					var input_3 = root_7();
 					$.remove_input_defaults(input_3);
 					$.set_attribute(input_3, "draggable", false);
-					$.template_effect(($0) => {
-						$.set_attribute(input_3, "aria-label", `Filter ${$.get(column).id}`);
-						$.set_value(input_3, $0);
-					}, [() => $.get(column).getFilterValue() ?? ""]);
-					$.delegated("click", input_3, (e) => e.stopPropagation());
+					$.template_effect(($0, $1, $2) => {
+						$.set_attribute(input_3, "aria-label", $0);
+						$.set_value(input_3, $1);
+						$.set_attribute(input_3, "placeholder", $2);
+					}, [
+						() => formatMessage(messages().table.filterColumn, { name: $.get(column).id }),
+						() => $.get(column).getFilterValue() ?? "",
+						() => messages().command.filter
+					]);
 					$.event("dragstart", input_3, (e) => e.stopPropagation());
 					$.delegated("input", input_3, (e) => $.get(column).setFilterValue(e.currentTarget.value));
 					$.append($$anchor, input_3);
 				};
-				$.if(node_7, ($$render) => {
-					if ($.get(canFilter)) $$render(consequent_6);
+				$.if(node_10, ($$render) => {
+					if ($.get(canFilter)) $$render(consequent_7);
 				});
 				$.reset(div_10);
 				$.append($$anchor, div_10);
 			};
-			$.if(node_5, ($$render) => {
+			$.if(node_6, ($$render) => {
 				if ($.get(column).id === SELECT_COL_ID) $$render(consequent_4);
-				else $$render(alternate_1, -1);
+				else $$render(alternate_2, -1);
 			});
 			$.append($$anchor, fragment_2);
 		});
@@ -632,62 +671,62 @@ function DataTable$1($$anchor, $$props) {
 	});
 	$.reset(div_7);
 	var div_11 = $.sibling(div_7, 2);
-	var node_8 = $.child(div_11);
-	var consequent_7 = ($$anchor) => {
-		var fragment_4 = $.comment();
-		var node_9 = $.first_child(fragment_4);
-		$.each(node_9, 1, () => $virtualizer().getVirtualItems(), (item) => item.key, ($$anchor, item) => {
+	var node_11 = $.child(div_11);
+	var consequent_8 = ($$anchor) => {
+		var fragment_5 = $.comment();
+		var node_12 = $.first_child(fragment_5);
+		$.each(node_12, 1, () => $virtualizer().getVirtualItems(), (item) => item.key, ($$anchor, item) => {
 			const row = $.derived(() => $.get(rows)[$.get(item).index]);
 			renderRow($$anchor, () => $.get(row), () => $.get(item));
 		});
-		$.append($$anchor, fragment_4);
+		$.append($$anchor, fragment_5);
 	};
-	var alternate_2 = ($$anchor) => {
-		var fragment_6 = $.comment();
-		var node_10 = $.first_child(fragment_6);
-		$.each(node_10, 17, () => $.get(rows), (row) => row.id, ($$anchor, row) => {
+	var alternate_3 = ($$anchor) => {
+		var fragment_7 = $.comment();
+		var node_13 = $.first_child(fragment_7);
+		$.each(node_13, 17, () => $.get(rows), (row) => row.id, ($$anchor, row) => {
 			renderRow($$anchor, () => $.get(row));
 		});
-		$.append($$anchor, fragment_6);
+		$.append($$anchor, fragment_7);
 	};
-	$.if(node_8, ($$render) => {
-		if ($.get(virtualMode)) $$render(consequent_7);
-		else $$render(alternate_2, -1);
+	$.if(node_11, ($$render) => {
+		if ($.get(virtualMode)) $$render(consequent_8);
+		else $$render(alternate_3, -1);
 	});
-	var node_11 = $.sibling(node_8, 2);
-	var consequent_8 = ($$anchor) => {
-		var div_12 = root_8();
+	var node_14 = $.sibling(node_11, 2);
+	var consequent_9 = ($$anchor) => {
+		var div_12 = root_9();
 		var text = $.only_child(div_12, true);
-		$.template_effect(() => $.set_text(text, emptyText()));
+		$.template_effect(($0) => $.set_text(text, $0), [() => $$props.emptyText ?? messages().table.empty]);
 		$.append($$anchor, div_12);
 	};
-	$.if(node_11, ($$render) => {
-		if ($.get(rows).length === 0) $$render(consequent_8);
+	$.if(node_14, ($$render) => {
+		if ($.get(rows).length === 0) $$render(consequent_9);
 	});
 	$.reset(div_11);
-	var node_12 = $.sibling(div_11, 2);
-	var consequent_10 = ($$anchor) => {
-		var div_13 = root_9();
+	var node_15 = $.sibling(div_11, 2);
+	var consequent_11 = ($$anchor) => {
+		var div_13 = root_10();
 		$.each(div_13, 21, () => table.getFooterGroups(), (group) => group.id, ($$anchor, group) => {
 			var div_14 = root_3();
 			$.each(div_14, 21, () => $.get(group).headers, (header) => header.column.id, ($$anchor, header) => {
 				var div_15 = root_2();
 				$.attribute_effect(div_15, ($0, $1) => ({
-					role: "columnheader",
+					role: "cell",
 					"data-scope": "table",
 					"data-part": "footer-cell",
 					"data-numeric": $.get(header).column.columnDef.meta?.numeric ? "" : void 0,
 					...$0,
 					[$.STYLE]: { "--pin-offset": $1 }
 				}), [() => pinAttrs($.get(header).column), () => pinOffset($.get(header).column)]);
-				var node_13 = $.child(div_15);
-				var consequent_9 = ($$anchor) => {
+				var node_16 = $.child(div_15);
+				var consequent_10 = ($$anchor) => {
 					FlexRender($$anchor, { get footer() {
 						return $.get(header);
 					} });
 				};
-				$.if(node_13, ($$render) => {
-					if (!$.get(header).isPlaceholder) $$render(consequent_9);
+				$.if(node_16, ($$render) => {
+					if (!$.get(header).isPlaceholder) $$render(consequent_10);
 				});
 				$.reset(div_15);
 				$.append($$anchor, div_15);
@@ -698,27 +737,27 @@ function DataTable$1($$anchor, $$props) {
 		$.reset(div_13);
 		$.append($$anchor, div_13);
 	};
-	$.if(node_12, ($$render) => {
-		if (stickyFooter() && $.get(hasFooters)) $$render(consequent_10);
+	$.if(node_15, ($$render) => {
+		if (stickyFooter() && $.get(hasFooters)) $$render(consequent_11);
 	});
 	$.reset(div_6);
 	$.reset(div_5);
 	$.bind_this(div_5, ($$value) => $.set(viewportEl, $$value), () => $.get(viewportEl));
-	var node_14 = $.sibling(div_5, 2);
-	var consequent_12 = ($$anchor) => {
+	var node_17 = $.sibling(div_5, 2);
+	var consequent_13 = ($$anchor) => {
 		const pagination = $.derived(() => table.atoms.pagination.get());
 		const sizeItems = $.derived(() => createListCollection({ items: pageSizeOptions().map((size) => ({
-			label: `${size} / page`,
+			label: formatMessage(messages().table.perPage, { size }),
 			value: String(size)
 		})) }));
-		var div_16 = root_14();
+		var div_16 = root_13();
 		var span_1 = $.child(div_16);
 		var text_1 = $.only_child(span_1, true);
 		var div_17 = $.sibling(span_1, 2);
-		var node_15 = $.child(div_17);
+		var node_18 = $.child(div_17);
 		{
 			let $0 = $.derived(() => [String($.get(pagination).pageSize)]);
-			$.component(node_15, () => Select$1.Root, ($$anchor, ArkSelect_Root) => {
+			$.component(node_18, () => Select$1.Root, ($$anchor, ArkSelect_Root) => {
 				ArkSelect_Root($$anchor, {
 					get collection() {
 						return $.get(sizeItems);
@@ -729,57 +768,64 @@ function DataTable$1($$anchor, $$props) {
 					onValueChange: (details) => table.setPageSize(Number(details.value[0])),
 					positioning: { placement: "top-start" },
 					children: ($$anchor, $$slotProps) => {
-						var fragment_9 = root_11();
-						var node_16 = $.first_child(fragment_9);
-						$.component(node_16, () => Select$1.Control, ($$anchor, ArkSelect_Control) => {
+						var fragment_10 = root_11();
+						var node_19 = $.first_child(fragment_10);
+						$.component(node_19, () => Select$1.Control, ($$anchor, ArkSelect_Control) => {
 							ArkSelect_Control($$anchor, {
 								children: ($$anchor, $$slotProps) => {
-									var fragment_10 = $.comment();
-									var node_17 = $.first_child(fragment_10);
-									$.component(node_17, () => Select$1.Trigger, ($$anchor, ArkSelect_Trigger) => {
-										ArkSelect_Trigger($$anchor, {
-											"aria-label": "Rows per page",
-											children: ($$anchor, $$slotProps) => {
-												var fragment_11 = root_11();
-												var node_18 = $.first_child(fragment_11);
-												$.component(node_18, () => Select$1.ValueText, ($$anchor, ArkSelect_ValueText) => {
-													ArkSelect_ValueText($$anchor, {});
-												});
-												var node_19 = $.sibling(node_18, 2);
-												$.component(node_19, () => Select$1.Indicator, ($$anchor, ArkSelect_Indicator) => {
-													ArkSelect_Indicator($$anchor, {
-														children: ($$anchor, $$slotProps) => {
-															var svg = root_10();
-															$.append($$anchor, svg);
-														},
-														$$slots: { default: true }
+									var fragment_11 = $.comment();
+									var node_20 = $.first_child(fragment_11);
+									{
+										let $0 = $.derived(() => messages().table.rowsPerPage);
+										$.component(node_20, () => Select$1.Trigger, ($$anchor, ArkSelect_Trigger) => {
+											ArkSelect_Trigger($$anchor, {
+												get "aria-label"() {
+													return $.get($0);
+												},
+												children: ($$anchor, $$slotProps) => {
+													var fragment_12 = root_11();
+													var node_21 = $.first_child(fragment_12);
+													$.component(node_21, () => Select$1.ValueText, ($$anchor, ArkSelect_ValueText) => {
+														ArkSelect_ValueText($$anchor, {});
 													});
-												});
-												$.append($$anchor, fragment_11);
-											},
-											$$slots: { default: true }
+													var node_22 = $.sibling(node_21, 2);
+													$.component(node_22, () => Select$1.Indicator, ($$anchor, ArkSelect_Indicator) => {
+														ArkSelect_Indicator($$anchor, {
+															children: ($$anchor, $$slotProps) => {
+																InternalIcon($$anchor, {
+																	name: "chevron-down",
+																	size: "sm"
+																});
+															},
+															$$slots: { default: true }
+														});
+													});
+													$.append($$anchor, fragment_12);
+												},
+												$$slots: { default: true }
+											});
 										});
-									});
-									$.append($$anchor, fragment_10);
+									}
+									$.append($$anchor, fragment_11);
 								},
 								$$slots: { default: true }
 							});
 						});
-						var node_20 = $.sibling(node_16, 2);
-						$.component(node_20, () => Select$1.Positioner, ($$anchor, ArkSelect_Positioner) => {
+						var node_23 = $.sibling(node_19, 2);
+						$.component(node_23, () => Select$1.Positioner, ($$anchor, ArkSelect_Positioner) => {
 							ArkSelect_Positioner($$anchor, {
 								children: ($$anchor, $$slotProps) => {
-									var fragment_12 = $.comment();
-									var node_21 = $.first_child(fragment_12);
-									$.component(node_21, () => Select$1.Content, ($$anchor, ArkSelect_Content) => {
+									var fragment_14 = $.comment();
+									var node_24 = $.first_child(fragment_14);
+									$.component(node_24, () => Select$1.Content, ($$anchor, ArkSelect_Content) => {
 										ArkSelect_Content($$anchor, {
 											children: ($$anchor, $$slotProps) => {
-												var fragment_13 = $.comment();
-												var node_22 = $.first_child(fragment_13);
-												$.each(node_22, 17, () => $.get(sizeItems).items, (item) => item.value, ($$anchor, item) => {
-													var fragment_14 = $.comment();
-													var node_23 = $.first_child(fragment_14);
-													$.component(node_23, () => Select$1.Item, ($$anchor, ArkSelect_Item) => {
+												var fragment_15 = $.comment();
+												var node_25 = $.first_child(fragment_15);
+												$.each(node_25, 17, () => $.get(sizeItems).items, (item) => item.value, ($$anchor, item) => {
+													var fragment_16 = $.comment();
+													var node_26 = $.first_child(fragment_16);
+													$.component(node_26, () => Select$1.Item, ($$anchor, ArkSelect_Item) => {
 														ArkSelect_Item($$anchor, {
 															get item() {
 																return $.get(item);
@@ -788,9 +834,9 @@ function DataTable$1($$anchor, $$props) {
 																return $.get(item).value;
 															},
 															children: ($$anchor, $$slotProps) => {
-																var fragment_15 = root_11();
-																var node_24 = $.first_child(fragment_15);
-																$.component(node_24, () => Select$1.ItemText, ($$anchor, ArkSelect_ItemText) => {
+																var fragment_17 = root_11();
+																var node_27 = $.first_child(fragment_17);
+																$.component(node_27, () => Select$1.ItemText, ($$anchor, ArkSelect_ItemText) => {
 																	ArkSelect_ItemText($$anchor, {
 																		children: ($$anchor, $$slotProps) => {
 																			$.next();
@@ -801,51 +847,60 @@ function DataTable$1($$anchor, $$props) {
 																		$$slots: { default: true }
 																	});
 																});
-																var node_25 = $.sibling(node_24, 2);
-																$.component(node_25, () => Select$1.ItemIndicator, ($$anchor, ArkSelect_ItemIndicator) => {
+																var node_28 = $.sibling(node_27, 2);
+																$.component(node_28, () => Select$1.ItemIndicator, ($$anchor, ArkSelect_ItemIndicator) => {
 																	ArkSelect_ItemIndicator($$anchor, {
 																		children: ($$anchor, $$slotProps) => {
-																			$.next();
-																			var text_3 = $.text("✓");
-																			$.append($$anchor, text_3);
+																			var fragment_19 = $.comment();
+																			var node_29 = $.first_child(fragment_19);
+																			$.html(node_29, () => iconHtml("check", {
+																				width: "14",
+																				height: "14"
+																			}));
+																			$.append($$anchor, fragment_19);
 																		},
 																		$$slots: { default: true }
 																	});
 																});
-																$.append($$anchor, fragment_15);
+																$.append($$anchor, fragment_17);
 															},
 															$$slots: { default: true }
 														});
 													});
-													$.append($$anchor, fragment_14);
+													$.append($$anchor, fragment_16);
 												});
-												$.append($$anchor, fragment_13);
+												$.append($$anchor, fragment_15);
 											},
 											$$slots: { default: true }
 										});
 									});
-									$.append($$anchor, fragment_12);
+									$.append($$anchor, fragment_14);
 								},
 								$$slots: { default: true }
 							});
 						});
-						$.append($$anchor, fragment_9);
+						$.append($$anchor, fragment_10);
 					},
 					$$slots: { default: true }
 				});
 			});
 		}
-		var node_26 = $.sibling(node_15, 2);
+		var node_30 = $.sibling(node_18, 2);
 		{
-			const glyph = ($$anchor, direction = $.noop) => {
-				var svg_1 = root_12();
-				var path = $.only_child(svg_1);
-				$.template_effect(() => $.set_attribute(path, "d", direction() === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6"));
-				$.append($$anchor, svg_1);
+			const icon = ($$anchor, direction = $.noop) => {
+				{
+					let $0 = $.derived(() => direction() === "start" ? "chevron-left" : "chevron-right");
+					InternalIcon($$anchor, {
+						get name() {
+							return $.get($0);
+						},
+						size: "sm"
+					});
+				}
 			};
 			let $0 = $.derived(() => table.getRowCount());
 			let $1 = $.derived(() => $.get(pagination).pageIndex + 1);
-			$.component(node_26, () => Pagination.Root, ($$anchor, ArkPagination_Root) => {
+			$.component(node_30, () => Pagination.Root, ($$anchor, ArkPagination_Root) => {
 				ArkPagination_Root($$anchor, {
 					get count() {
 						return $.get($0);
@@ -857,83 +912,83 @@ function DataTable$1($$anchor, $$props) {
 						return $.get($1);
 					},
 					onPageChange: (details) => table.setPageIndex(details.page - 1),
-					glyph,
+					icon,
 					children: ($$anchor, $$slotProps) => {
-						var fragment_17 = root_13();
-						var node_27 = $.first_child(fragment_17);
-						$.component(node_27, () => Pagination.PrevTrigger, ($$anchor, ArkPagination_PrevTrigger) => {
+						var fragment_21 = root_12();
+						var node_31 = $.first_child(fragment_21);
+						$.component(node_31, () => Pagination.PrevTrigger, ($$anchor, ArkPagination_PrevTrigger) => {
 							ArkPagination_PrevTrigger($$anchor, {
 								children: ($$anchor, $$slotProps) => {
-									glyph($$anchor, () => "start");
+									icon($$anchor, () => "start");
 								},
 								$$slots: { default: true }
 							});
 						});
-						var node_28 = $.sibling(node_27, 2);
+						var node_32 = $.sibling(node_31, 2);
 						{
 							const children = ($$anchor, scope = $.noop) => {
-								var fragment_19 = $.comment();
-								var node_29 = $.first_child(fragment_19);
-								$.each(node_29, 19, () => scope().pages, (page, index) => page.type === "ellipsis" ? `e${index}` : page.value, ($$anchor, page, index) => {
-									var fragment_20 = $.comment();
-									var node_30 = $.first_child(fragment_20);
-									var consequent_11 = ($$anchor) => {
-										var fragment_21 = $.comment();
-										var node_31 = $.first_child(fragment_21);
-										$.component(node_31, () => Pagination.Ellipsis, ($$anchor, ArkPagination_Ellipsis) => {
+								var fragment_23 = $.comment();
+								var node_33 = $.first_child(fragment_23);
+								$.each(node_33, 19, () => scope().pages, (page, index) => page.type === "ellipsis" ? `e${index}` : page.value, ($$anchor, page, index) => {
+									var fragment_24 = $.comment();
+									var node_34 = $.first_child(fragment_24);
+									var consequent_12 = ($$anchor) => {
+										var fragment_25 = $.comment();
+										var node_35 = $.first_child(fragment_25);
+										$.component(node_35, () => Pagination.Ellipsis, ($$anchor, ArkPagination_Ellipsis) => {
 											ArkPagination_Ellipsis($$anchor, { get index() {
 												return $.get(index);
 											} });
 										});
-										$.append($$anchor, fragment_21);
+										$.append($$anchor, fragment_25);
 									};
-									var alternate_3 = ($$anchor) => {
-										var fragment_22 = $.comment();
-										var node_32 = $.first_child(fragment_22);
-										$.component(node_32, () => Pagination.Item, ($$anchor, ArkPagination_Item) => {
+									var alternate_4 = ($$anchor) => {
+										var fragment_26 = $.comment();
+										var node_36 = $.first_child(fragment_26);
+										$.component(node_36, () => Pagination.Item, ($$anchor, ArkPagination_Item) => {
 											ArkPagination_Item($$anchor, {
 												get value() {
 													return $.get(page).value;
 												},
 												children: ($$anchor, $$slotProps) => {
 													$.next();
-													var text_4 = $.text();
-													$.template_effect(($0) => $.set_text(text_4, $0), [() => String($.get(page).value)]);
-													$.append($$anchor, text_4);
+													var text_3 = $.text();
+													$.template_effect(($0) => $.set_text(text_3, $0), [() => String($.get(page).value)]);
+													$.append($$anchor, text_3);
 												},
 												$$slots: { default: true }
 											});
 										});
-										$.append($$anchor, fragment_22);
+										$.append($$anchor, fragment_26);
 									};
-									$.if(node_30, ($$render) => {
-										if ($.get(page).type === "ellipsis") $$render(consequent_11);
-										else $$render(alternate_3, -1);
+									$.if(node_34, ($$render) => {
+										if ($.get(page).type === "ellipsis") $$render(consequent_12);
+										else $$render(alternate_4, -1);
 									});
-									$.append($$anchor, fragment_20);
+									$.append($$anchor, fragment_24);
 								});
-								$.append($$anchor, fragment_19);
+								$.append($$anchor, fragment_23);
 							};
-							$.component(node_28, () => Pagination.Context, ($$anchor, ArkPagination_Context) => {
+							$.component(node_32, () => Pagination.Context, ($$anchor, ArkPagination_Context) => {
 								ArkPagination_Context($$anchor, {
 									children,
 									$$slots: { default: true }
 								});
 							});
 						}
-						var node_33 = $.sibling(node_28, 2);
-						$.component(node_33, () => Pagination.NextTrigger, ($$anchor, ArkPagination_NextTrigger) => {
+						var node_37 = $.sibling(node_32, 2);
+						$.component(node_37, () => Pagination.NextTrigger, ($$anchor, ArkPagination_NextTrigger) => {
 							ArkPagination_NextTrigger($$anchor, {
 								children: ($$anchor, $$slotProps) => {
-									glyph($$anchor, () => "end");
+									icon($$anchor, () => "end");
 								},
 								$$slots: { default: true }
 							});
 						});
-						$.append($$anchor, fragment_17);
+						$.append($$anchor, fragment_21);
 					},
 					$$slots: {
-						glyph: true,
+						icon: true,
 						default: true
 					}
 				});
@@ -941,21 +996,19 @@ function DataTable$1($$anchor, $$props) {
 		}
 		$.reset(div_17);
 		$.reset(div_16);
-		$.template_effect(($0) => $.set_text(text_1, $0), [() => `${table.getRowCount()} rows`]);
+		$.template_effect(($0) => $.set_text(text_1, $0), [() => formatMessage(messages().table.rowsCount, { count: table.getRowCount() })]);
 		$.append($$anchor, div_16);
 	};
-	$.if(node_14, ($$render) => {
-		if (paginated()) $$render(consequent_12);
+	$.if(node_17, ($$render) => {
+		if (paginated()) $$render(consequent_13);
 	});
 	$.reset(div_3);
 	$.template_effect(($0) => {
 		styles_1 = $.set_style(div_6, "", styles_1, { "--bs-table-cols": $.get(colsTemplate) });
 		$.set_attribute(div_11, "data-merge", $.get(mergeMode) || void 0);
+		$.set_attribute(div_11, "data-virtual", $.get(virtualMode) || void 0);
 		$.set_style(div_11, $0);
-	}, [() => $.get(virtualMode) ? {
-		position: "relative",
-		"block-size": `${$virtualizer().getTotalSize()}px`
-	} : void 0]);
+	}, [() => $.get(virtualMode) ? { "--bs-table-virtual-total": `${$virtualizer().getTotalSize()}px` } : void 0]);
 	$.append($$anchor, div_3);
 	$.pop();
 	$$cleanup();
@@ -970,6 +1023,6 @@ $.delegate([
 /** The control recipe as a one-stop data table: sorting, filtering,
 * pinning, merging, virtualization, and drag-to-reorder behind one
 * component. The API is TanStack's own — columns ride `ColumnDef`. */
-const DataTable = DataTable$1;
+const DataTable = withSelfRoot(DataTable$1);
 //#endregion
 export { FlexRender$1 as n, createColumnHelper as r, DataTable as t };