@bysages/solid 0.3.0 → 0.4.0

package/dist/components/switch/index.mjs

@@ -1,3 +1,5 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,14 +7,20 @@ import { Switch as Switch$1 } from "@ark-ui/solid/switch";
 //#region src/components/switch/index.tsx
 function SwitchRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Switch$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("switch", () => rest.id);
+	return createComponent(Switch$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Switch = {
+const Switch = defineFamily(SwitchRoot, {
 	...Switch$1,
 	Root: SwitchRoot
-};
+});
 injectComponentStyle("switch");
 //#endregion
 export { Switch };

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

@@ -72,6 +72,8 @@ export interface DataTableProps {
   /** Fires with the full leaf-column id order after a header drop. */
   onColumnReorder?: (ids: string[]) => void;
 }
-export declare function DataTable(props: DataTableProps): JSX.Element;
+export declare const DataTable: ((props: DataTableProps) => JSX.Element) & {
+  Root: (props: DataTableProps) => JSX.Element;
+};
 //#endregion
 export { type ColumnDef, FlexRender, type SortingState, createColumnHelper };

package/dist/components/table/index.mjs

@@ -1,5 +1,9 @@
+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-CHaXbzLX.mjs";
+import { t as Select$1 } from "../../select-7YjMSBGx.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { addEvent, createComponent, delegateEvents, effect, insert, memo, readShallow, ref, setAttribute, setStyleProperty, spread, style, template } from "@solidjs/web";
 import { For, createMemo, createSignal, onCleanup, onMount } from "solid-js";
@@ -7,31 +11,35 @@ 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 placeholder=Filter>`);
-var _tmpl$10 = /* @__PURE__ */ template(`<div data-scope=table data-part=root><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><!>`);
-var _tmpl$11 = /* @__PURE__ */ template(`<div data-scope=table data-part=toolbar><input type=search data-scope=table data-part=global-filter aria-label="Filter all columns">`);
-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;
@@ -83,8 +91,10 @@ 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.");
 	/** Features follow the construction-time switches: sorting, selection,
@@ -394,12 +404,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() {
@@ -408,36 +418,38 @@ function DataTable(props) {
 				},
 				{ indeterminate: false },
 				{
-					"aria-label": "Select row",
+					get "aria-label"() {
+						return messages().table.selectRow;
+					},
 					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),
 					t: row.getIsExpanded() || void 0,
 					a: !row.getCanExpand() || void 0,
-					o: row.getIsExpanded() ? "Collapse row" : "Expand row"
+					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",
@@ -450,26 +462,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();
 			},
@@ -481,10 +490,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;
@@ -492,10 +501,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",
@@ -516,7 +525,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,
@@ -524,72 +532,80 @@ 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: `Filter ${column.id}`,
-					t: column.getFilterValue() ?? ""
+					e: formatComponentMessage(messages().table.filterColumn, { name: column.id }),
+					t: column.getFilterValue() ?? "",
+					a: messages().command.filter
 				};
-			}, ({ e, t }, _p$) => {
-				e !== _p$?.e && setAttribute(_el$13, "aria-label", e);
-				_el$13.value = t ?? "";
+			}, ({ e, t, a }, _p$) => {
+				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: props.globalFilterPlaceholder,
-						t: table.atoms.globalFilter.get() ?? ""
+						e: messages().table.filterAll,
+						t: props.globalFilterPlaceholder,
+						a: table.atoms.globalFilter.get() ?? ""
 					};
-				}, ({ e, t }, _p$) => {
-					e !== _p$?.e && setAttribute(_el$23, "placeholder", e);
-					_el$23.value = t ?? "";
+				}, ({ e, t, a }, _p$) => {
+					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;
 				},
@@ -597,16 +613,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
@@ -615,17 +631,19 @@ function DataTable(props) {
 							return { indeterminate: table.getIsSomeRowsSelected() && !all };
 						},
 						{
-							"aria-label": "Select all rows",
+							get "aria-label"() {
+								return messages().table.selectAllRows;
+							},
 							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();
 		});
@@ -642,42 +660,42 @@ 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, () => {
-					return props.emptyText;
+				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, [{
-									role: "columnheader",
+								var _el$27 = _tmpl$3();
+								spread(_el$27, [{
+									role: "cell",
 									"data-scope": "table",
 									"data-part": "footer-cell",
 									get "data-numeric"() {
@@ -686,7 +704,7 @@ function DataTable(props) {
 								}, () => {
 									return pinAttrs(header.column);
 								}], true);
-								insert(_el$30, (() => {
+								insert(_el$27, (() => {
 									var _c$7 = memo(() => {
 										return !!header.isPlaceholder;
 									});
@@ -694,38 +712,41 @@ 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, () => {
-					return `${table.getRowCount()} rows`;
+				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,
 							20,
 							50
 						]).map((size) => ({
-							label: `${size} / page`,
+							label: formatComponentMessage(messages().table.perPage, { size }),
 							value: String(size)
 						})) });
 					},
@@ -737,10 +758,12 @@ function DataTable(props) {
 					get children() {
 						return [createComponent(Select$1.Control, { get children() {
 							return createComponent(Select$1.Trigger, {
-								"aria-label": "Rows per page",
+								get "aria-label"() {
+									return messages().table.rowsPerPage;
+								},
 								get children() {
 									return [createComponent(Select$1.ValueText, {}), createComponent(Select$1.Indicator, { get children() {
-										return chevronDownGlyph();
+										return chevronDownIcon();
 									} })];
 								}
 							});
@@ -753,7 +776,7 @@ function DataTable(props) {
 											20,
 											50
 										]).map((size) => ({
-											label: `${size} / page`,
+											label: formatComponentMessage(messages().table.perPage, { size }),
 											value: String(size)
 										}));
 									},
@@ -762,15 +785,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();
 					},
@@ -784,7 +815,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() {
@@ -803,35 +834,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": `${virtualizer.getTotalSize()}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 };