@bysages/react 0.3.0 → 0.4.0

package/dist/components/splitter/index.mjs

@@ -1,10 +1,44 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1 } from "react";
 import { Splitter as Splitter$1 } from "@ark-ui/react/splitter";
 //#region src/components/splitter/index.tsx
 /** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
 * a hairline and a small paper-seal thumb answers the hand. The API is
 * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
-const Splitter = Splitter$1;
+function SplitterRoot(props) {
+	const id = useElementId("splitter", props);
+	return /* @__PURE__ */ jsx(Splitter$1.Root, {
+		...props,
+		id
+	});
+}
+function SplitterFacade({ items, defaultValue, value, orientation = "horizontal", className }) {
+	return /* @__PURE__ */ jsx(SplitterRoot, {
+		className,
+		orientation,
+		panels: items.map((item) => ({ id: item.id })),
+		...defaultValue === void 0 ? {} : { defaultSize: defaultValue },
+		...value === void 0 ? {} : { size: value },
+		children: items.map((item, index) => {
+			const next = items.at(index + 1);
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Splitter$1.Panel, {
+				id: item.id,
+				children: item.label
+			}), next ? /* @__PURE__ */ jsx(Splitter$1.ResizeTrigger, {
+				id: `${item.id}:${next.id}`,
+				"aria-label": "Resize panels",
+				children: /* @__PURE__ */ jsx(Splitter$1.ResizeTriggerIndicator, {})
+			}) : null] }, item.id);
+		})
+	});
+}
+SplitterFacade.displayName = "SSplitter";
+const Splitter = Object.assign(SplitterFacade, {
+	...Splitter$1,
+	Root: SplitterRoot
+});
 injectComponentStyle("splitter");
 //#endregion
 export { Splitter };

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

@@ -8,5 +8,8 @@ export interface SpotlightProps extends HTMLAttributes<HTMLDivElement> {
 /** The ink-light card: a vessel whose rim and face take light from the
  * reader's hand. The wrapper only measures and writes the geometry —
  * the lamp itself is the two layers the stylesheet paints. */
-export declare function Spotlight({ radius, children, ...rest }: SpotlightProps): import("react").JSX.Element;
+declare function SpotlightImpl({ radius, children, ...rest }: SpotlightProps): import("react").JSX.Element;
+export declare const Spotlight: typeof SpotlightImpl & {
+  Root: typeof SpotlightImpl;
+};
 //#endregion

package/dist/components/spotlight/index.mjs

@@ -1,10 +1,11 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/spotlight/index.tsx
 /** The ink-light card: a vessel whose rim and face take light from the
 * reader's hand. The wrapper only measures and writes the geometry —
 * the lamp itself is the two layers the stylesheet paints. */
-function Spotlight({ radius, children, ...rest }) {
+function SpotlightImpl({ radius, children, ...rest }) {
 	injectComponentStyle("spotlight");
 	const track = (event) => {
 		const host = event.currentTarget;
@@ -29,5 +30,6 @@ function Spotlight({ radius, children, ...rest }) {
 		children
 	});
 }
+const Spotlight = withSelfRoot(SpotlightImpl);
 //#endregion
 export { Spotlight };

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

@@ -7,5 +7,8 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   align?: string;
   justify?: string;
 }
-export declare function Stack({ direction, gap, wrap, align, justify, ...rest }: StackProps): import("react").JSX.Element;
+declare function StackImpl({ direction, gap, wrap, align, justify, ...rest }: StackProps): import("react").JSX.Element;
+export declare const Stack: typeof StackImpl & {
+  Root: typeof StackImpl;
+};
 //#endregion

package/dist/components/stack/index.mjs

@@ -1,3 +1,4 @@
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/stack/index.tsx
@@ -11,14 +12,14 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Stack({ direction = "column", gap = "md", wrap = false, align, justify, ...rest }) {
+function StackImpl({ direction = "column", gap = "md", wrap = false, align, justify, ...rest }) {
 	injectComponentStyle("stack");
 	const style = {
 		...rest.style,
 		"--bs-stack-gap": gapVars[gap] ?? gapVars.md,
-		alignItems: align,
-		justifyContent: justify,
-		flexWrap: wrap ? "wrap" : void 0
+		"--bs-stack-align": align,
+		"--bs-stack-justify": justify,
+		"--bs-stack-wrap": wrap ? "wrap" : void 0
 	};
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
@@ -28,5 +29,6 @@ function Stack({ direction = "column", gap = "md", wrap = false, align, justify,
 		"data-direction": direction
 	});
 }
+const Stack = withSelfRoot(StackImpl);
 //#endregion
 export { Stack };

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

@@ -5,7 +5,28 @@ type StepsRootProps = ComponentProps<typeof Steps$1.Root> & {
   /** One rung of the control-height ladder every indicator stands on. */
   size?: "sm" | "md" | "lg";
 };
-declare function StepsRoot({ size, ...rest }: StepsRootProps): import("react").JSX.Element;
+declare function StepsRoot(props: StepsRootProps): import("react").JSX.Element;
+type StepsItem = {
+  title: string;
+};
+export interface StepsFacadeProps {
+  items: StepsItem[];
+  step?: number;
+  defaultStep?: number;
+  linear?: boolean;
+  orientation?: "horizontal" | "vertical";
+  /** One rung of the control-height ladder every indicator stands on. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onStepChange?: (step: number) => void;
+}
+declare function StepsFacade({ items, step, defaultStep, linear, orientation, size, className, onStepChange }: StepsFacadeProps): import("react").JSX.Element;
+declare namespace StepsFacade {
+  var displayName: string;
+}
+/** The machine wraps each tab in an item div; presentation keeps the
+ * tablist owned children legal while the tab itself keeps its role. */
+declare function StepsItem(props: ComponentProps<typeof Steps$1.Item>): import("react").JSX.Element;
 /**
  * Steps — linear progress through a sequence.
  *
@@ -13,7 +34,10 @@ declare function StepsRoot({ size, ...rest }: StepsRootProps): import("react").J
  * PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
  * data-complete / data-current / data-incomplete.
  */
-export declare const Steps: Omit<typeof Steps$1, "Root"> & {
+type StepsParts = Omit<typeof Steps$1, "Root" | "Item"> & {
   Root: typeof StepsRoot;
+  Item: typeof StepsItem;
 };
-//#endregion
+export declare const Steps: typeof StepsFacade & StepsParts;
+//#endregion
+export { StepsItem };

package/dist/components/steps/index.mjs

@@ -1,24 +1,48 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Steps as Steps$1 } from "@ark-ui/react/steps";
 //#region src/components/steps/index.tsx
-function StepsRoot({ size = "md", ...rest }) {
+function StepsRoot(props) {
+	const id = useElementId("steps", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Steps$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/**
-* Steps — linear progress through a sequence.
-*
-* Parts: Root, List, Item, Trigger, Indicator, Separator, Content,
-* PrevTrigger, NextTrigger, Progress. Indicator and Separator carry
-* data-complete / data-current / data-incomplete.
-*/
-const Steps = {
+function StepsFacade({ items, step, defaultStep = 0, linear = false, orientation = "horizontal", size = "md", className, onStepChange }) {
+	return /* @__PURE__ */ jsx(StepsRoot, {
+		className,
+		size,
+		count: items.length,
+		linear,
+		orientation,
+		defaultStep,
+		...step === void 0 ? {} : { step },
+		onStepChange: (details) => onStepChange?.(details.step),
+		children: /* @__PURE__ */ jsx(Steps$1.List, { children: items.map((item, index) => /* @__PURE__ */ jsxs(Steps$1.Item, {
+			index,
+			role: "presentation",
+			children: [/* @__PURE__ */ jsxs(Steps$1.Trigger, { children: [/* @__PURE__ */ jsx(Steps$1.Indicator, { children: String(index + 1) }), item.title] }), /* @__PURE__ */ jsx(Steps$1.Separator, {})]
+		}, item.title)) })
+	});
+}
+StepsFacade.displayName = "SSteps";
+/** The machine wraps each tab in an item div; presentation keeps the
+* tablist owned children legal while the tab itself keeps its role. */
+function StepsItem(props) {
+	return /* @__PURE__ */ jsx(Steps$1.Item, {
+		...props,
+		role: "presentation"
+	});
+}
+const Steps = Object.assign(StepsFacade, {
 	...Steps$1,
-	Root: StepsRoot
-};
+	Root: StepsRoot,
+	Item: StepsItem
+});
 injectComponentStyle("steps");
 //#endregion
 export { Steps };

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

@@ -1,8 +1,14 @@
+import { ReactNode } from "react";
 import { Swap as Swap$1 } from "@ark-ui/react/swap";
 //#region src/components/swap/index.d.ts
-/** Ark's Swap, dressed in the paper-and-ink system: two impressions
- * occupying one seal, the arriving one growing into place on the spring
- * while the departing one shrinks away. The API is Ark's own — Root,
- * Indicator (type="on" | "off"), RootProvider. */
-export declare const Swap: typeof Swap$1;
+interface SwapFacadeProps {
+  swap?: boolean;
+  on?: ReactNode;
+  off?: ReactNode;
+  children?: ReactNode;
+}
+/** The one-tag path for the default check/cross impression; custom
+ * transitions and indicators stay on the anatomy. */
+declare function SwapFacade({ swap, on, off }: SwapFacadeProps): import("react").JSX.Element;
+export declare const Swap: typeof SwapFacade & typeof Swap$1;
 //#endregion

package/dist/components/swap/index.mjs

@@ -1,11 +1,38 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Swap as Swap$1 } from "@ark-ui/react/swap";
 //#region src/components/swap/index.tsx
-/** Ark's Swap, dressed in the paper-and-ink system: two impressions
+/** Swap, dressed in the paper-and-ink system: two impressions
 * occupying one seal, the arriving one growing into place on the spring
-* while the departing one shrinks away. The API is Ark's own — Root,
+* while the departing one shrinks away. The parts — Root,
 * Indicator (type="on" | "off"), RootProvider. */
-const Swap = Swap$1;
+function SwapRoot(props) {
+	const id = useElementId("swap", props);
+	return /* @__PURE__ */ jsx(Swap$1.Root, {
+		...props,
+		id
+	});
+}
+/** The one-tag path for the default check/cross impression; custom
+* transitions and indicators stay on the anatomy. */
+function SwapFacade({ swap = false, on, off }) {
+	return /* @__PURE__ */ jsxs(SwapRoot, {
+		swap,
+		children: [/* @__PURE__ */ jsx(Swap$1.Indicator, {
+			type: "on",
+			children: on ?? iconNode("check")
+		}), /* @__PURE__ */ jsx(Swap$1.Indicator, {
+			type: "off",
+			children: off ?? iconNode("x")
+		})]
+	});
+}
+const Swap = Object.assign(SwapFacade, {
+	...Swap$1,
+	Root: SwapRoot
+});
 injectComponentStyle("swap");
 //#endregion
 export { Swap };

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

@@ -5,12 +5,30 @@ type SwitchRootProps = ComponentProps<typeof Switch$1.Root> & {
   /** One rung for the thumb; the track travels with it. */
   size?: "sm" | "md" | "lg";
 };
-declare function SwitchRoot({ size, ...rest }: SwitchRootProps): import("react").JSX.Element;
+declare function SwitchRoot(props: SwitchRootProps): import("react").JSX.Element;
+export interface SwitchFacadeProps {
+  value?: boolean;
+  defaultValue?: boolean;
+  label?: string;
+  disabled?: boolean;
+  invalid?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  /** One rung for the thumb; the track travels with it. */
+  size?: "sm" | "md" | "lg";
+  className?: string;
+  onValueChange?: (value: boolean) => void;
+}
+declare function SwitchFacade({ value, defaultValue, label, disabled, invalid, required, readOnly, size, className, onValueChange }: SwitchFacadeProps): import("react").JSX.Element;
+declare namespace SwitchFacade {
+  var displayName: string;
+}
 /** Ark's Switch, dressed in the paper-and-ink system: a track that rests
  * in the inset shade of the paper and fills flat with primary ink when on,
  * the thumb sliding on the spring. The API is Ark's own — Root, Label,
  * Control, Thumb, HiddenInput. */
-export declare const Switch: Omit<typeof Switch$1, "Root"> & {
+type SwitchParts = Omit<typeof Switch$1, "Root"> & {
   Root: typeof SwitchRoot;
 };
+export declare const Switch: typeof SwitchFacade & SwitchParts;
 //#endregion

package/dist/components/switch/index.mjs

@@ -1,21 +1,40 @@
+import { t as useElementId } from "../../id-C37UYLwJ.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Switch as Switch$1 } from "@ark-ui/react/switch";
 //#region src/components/switch/index.tsx
-function SwitchRoot({ size = "md", ...rest }) {
+function SwitchRoot(props) {
+	const id = useElementId("switch", props);
+	const { size = "md", ...rest } = props;
 	return /* @__PURE__ */ jsx(Switch$1.Root, {
 		...rest,
+		id,
 		"data-size": size
 	});
 }
-/** Ark's Switch, dressed in the paper-and-ink system: a track that rests
-* in the inset shade of the paper and fills flat with primary ink when on,
-* the thumb sliding on the spring. The API is Ark's own — Root, Label,
-* Control, Thumb, HiddenInput. */
-const Switch = {
+function SwitchFacade({ value, defaultValue = false, label, disabled = false, invalid = false, required = false, readOnly = false, size = "md", className, onValueChange }) {
+	return /* @__PURE__ */ jsxs(SwitchRoot, {
+		className,
+		size,
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		defaultChecked: defaultValue,
+		...value === void 0 ? {} : { checked: value },
+		onCheckedChange: (details) => onValueChange?.(details.checked),
+		children: [
+			/* @__PURE__ */ jsx(Switch$1.Control, { children: /* @__PURE__ */ jsx(Switch$1.Thumb, {}) }),
+			label ? /* @__PURE__ */ jsx(Switch$1.Label, { children: label }) : null,
+			/* @__PURE__ */ jsx(Switch$1.HiddenInput, {})
+		]
+	});
+}
+SwitchFacade.displayName = "SSwitch";
+const Switch = Object.assign(SwitchFacade, {
 	...Switch$1,
 	Root: SwitchRoot
-};
+});
 injectComponentStyle("switch");
 //#endregion
 export { Switch };

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

@@ -74,6 +74,9 @@ export interface DataTableProps {
   /** Applied to the root vessel. */
   style?: CSSProperties;
 }
-export declare function DataTable(rawProps: DataTableProps): import("react").JSX.Element;
+declare function DataTableImpl(rawProps: DataTableProps): import("react").JSX.Element;
+export declare const DataTable: typeof DataTableImpl & {
+  Root: typeof DataTableImpl;
+};
 //#endregion
 export { type ColumnDef, FlexRender, type SortingState, createColumnHelper };

package/dist/components/table/index.mjs

@@ -1,5 +1,8 @@
+import { t as iconNode } from "../../icon-BALgGtNK.mjs";
+import { t as withSelfRoot } from "../../family-DE_GQeeM.mjs";
+import { n as useComponentMessages, t as formatMessage } from "../../messages-1jJWtaYU.mjs";
 import { Pagination } from "../pagination/index.mjs";
-import { t as Select$1 } from "../../select-D1xiT1oJ.mjs";
+import { t as Select$1 } from "../../select-ozUFq0zd.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "react";
@@ -7,36 +10,16 @@ import { createListCollection } from "@ark-ui/react/select";
 import { FlexRender, cellSpanningFeature, columnFilteringFeature, columnOrderingFeature, columnPinningFeature, columnSizingFeature, columnVisibilityFeature, createColumnHelper, createExpandedRowModel, createFilteredRowModel, createPaginatedRowModel, createSortedRowModel, 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, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 //#region src/components/table/index.tsx
-/** The pagination bar's arrows — thin chevrons for the row of seals. */
-function pageGlyph(direction) {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 24 24",
+function pageIcon(direction) {
+	return iconNode(direction === "start" ? "chevron-left" : "chevron-right", {
 		width: 14,
-		height: 14,
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: direction === "start" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
-	});
-}
-/** The page-size select's pointing chevron. */
-function chevronDownGlyph() {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 24 24",
-		width: 14,
-		height: 14,
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2.5,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+		height: 14
 	});
 }
+const chevronDownIcon = iconNode("chevron-down", {
+	width: 14,
+	height: 14
+});
 const SELECT_COL_ID = "__select";
 const SELECT_COL_WIDTH = 48;
 /** The list holding `id` and the index inside it, or null when absent. */
@@ -87,18 +70,7 @@ function mark(el, attr, on) {
 	if (on) el.setAttribute(attr, "");
 	else el.removeAttribute(attr);
 }
-function ChevronGlyph() {
-	return /* @__PURE__ */ jsx("svg", {
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: 2.5,
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": true,
-		children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
-	});
-}
+const chevronIcon = iconNode("chevron-right");
 /** React keeps `indeterminate` off the JSX types; the DOM property is the
 * only channel, so the checkbox owns its ref. */
 function SelectBox(props) {
@@ -114,15 +86,17 @@ function SelectBox(props) {
 		onChange: props.onToggle
 	});
 }
-function DataTable(rawProps) {
+function DataTableImpl(rawProps) {
 	injectComponentStyle("table");
 	const props = rawProps;
 	const { selectable = false, sortable = true, filterable = false, showToolbar = true, tree = false, virtual: virtualProp = false, rowHeight = 40, paginated = false, pageSize = 10, pageSizeOptions = [
 		10,
 		20,
 		50
-	], globalFilterPlaceholder = "Filter rows", emptyText = "No rows", reorderable = false } = props;
+	], globalFilterPlaceholder, emptyText, reorderable = false } = props;
 	const merge = props.merge;
+	const messages = useComponentMessages();
+	const globalFilterText = globalFilterPlaceholder ?? messages.table.filterAll;
 	const virtual = virtualProp && !merge;
 	const mergeMode = !virtualProp && !!merge;
 	/** Features follow the construction-time switches: sorting, selection,
@@ -428,14 +402,14 @@ function DataTable(rawProps) {
 		const style = { ...pin.style };
 		delete pin.style;
 		const rowSpan = cell.getRowSpan();
-		if (rowSpan > 1) style.gridRow = `span ${rowSpan}`;
+		if (rowSpan > 1) style["--bs-table-row-span"] = String(rowSpan);
 		const spanned = rowSpan > 1 ? { "data-spanned": "" } : {};
 		let content;
 		if (column.id === SELECT_COL_ID) content = /* @__PURE__ */ jsx(SelectBox, {
 			checked: row.getIsSelected(),
 			indeterminate: false,
 			onToggle: () => row.toggleSelected(!row.getIsSelected()),
-			label: "Select row"
+			label: messages.table.selectRow
 		});
 		else if (isExpandHost) content = /* @__PURE__ */ jsxs("div", {
 			"data-scope": "table",
@@ -447,9 +421,9 @@ function DataTable(rawProps) {
 				"data-part": "expander",
 				"data-expanded": row.getIsExpanded() || void 0,
 				"data-leaf": !row.getCanExpand() || void 0,
-				"aria-label": row.getIsExpanded() ? "Collapse row" : "Expand row",
+				"aria-label": row.getIsExpanded() ? messages.table.collapseRow : messages.table.expandRow,
 				onClick: () => row.toggleExpanded(),
-				children: /* @__PURE__ */ jsx(ChevronGlyph, {})
+				children: chevronIcon
 			}), /* @__PURE__ */ jsx(FlexRender, { cell })]
 		});
 		else content = /* @__PURE__ */ jsx(FlexRender, { cell });
@@ -492,9 +466,9 @@ function DataTable(rawProps) {
 				type: "text",
 				"data-scope": "table",
 				"data-part": "header-filter",
-				"aria-label": `Filter ${column.id}`,
+				"aria-label": formatMessage(messages.table.filterColumn, { name: column.id }),
 				value: column.getFilterValue() ?? "",
-				placeholder: "Filter",
+				placeholder: messages.command.filter,
 				draggable: false,
 				onClick: (e) => e.stopPropagation(),
 				onDragStart: (e) => e.stopPropagation(),
@@ -506,11 +480,8 @@ function DataTable(rawProps) {
 		const style = {};
 		if (virtual) {
 			const item = virtualRows[virtualIndex];
-			style.position = "absolute";
-			style.insetInlineStart = "0";
-			style.inlineSize = "100%";
-			style.transform = `translateY(${item.start}px)`;
-			style.blockSize = `${item.size}px`;
+			style["--bs-table-virtual-row-start"] = `${item.start}px`;
+			style["--bs-table-virtual-row-size"] = `${item.size}px`;
 		}
 		return /* @__PURE__ */ jsx("div", {
 			role: "row",
@@ -548,7 +519,7 @@ function DataTable(rawProps) {
 							checked: all,
 							indeterminate: table.getIsSomeRowsSelected() && !all,
 							onToggle: () => table.toggleAllRowsSelected(!all),
-							label: "Select all rows"
+							label: messages.table.selectAllRows
 						})
 					}, column.id);
 				}
@@ -561,14 +532,12 @@ function DataTable(rawProps) {
 		"data-scope": "table",
 		"data-part": "body",
 		"data-merge": mergeMode || void 0,
-		style: virtual ? {
-			position: "relative",
-			blockSize: `${totalSize}px`
-		} : void 0,
+		"data-virtual": virtual || void 0,
+		style: virtual ? { "--bs-table-virtual-total": `${totalSize}px` } : void 0,
 		children: [virtual ? virtualRows.map((_, index) => renderRow(rows[index], index)) : rows.map((row) => renderRow(row, -1)), rows.length === 0 ? /* @__PURE__ */ jsx("div", {
 			"data-scope": "table",
 			"data-part": "empty",
-			children: emptyText
+			children: emptyText ?? messages.table.empty
 		}) : null]
 	});
 	const hasFooters = table.getFooterGroups().some((group) => group.headers.some((header) => header.column.columnDef.footer));
@@ -581,7 +550,7 @@ function DataTable(rawProps) {
 			"data-scope": "table",
 			"data-part": "row",
 			children: group.headers.map((header) => /* @__PURE__ */ jsx("div", {
-				role: "columnheader",
+				role: "cell",
 				"data-scope": "table",
 				"data-part": "footer-cell",
 				"data-numeric": header.column.columnDef.meta?.numeric ? "" : void 0,
@@ -596,7 +565,7 @@ function DataTable(rawProps) {
 		const pagination = table.atoms.pagination.get();
 		const rowCount = table.getRowCount();
 		const sizeItems = createListCollection({ items: pageSizeOptions.map((size) => ({
-			label: `${size} / page`,
+			label: formatMessage(messages.table.perPage, { size }),
 			value: String(size)
 		})) });
 		const pageSize = /* @__PURE__ */ jsxs(Select$1.Root, {
@@ -605,11 +574,14 @@ function DataTable(rawProps) {
 			onValueChange: (details) => table.setPageSize(Number(details.value[0])),
 			positioning: { placement: "top-start" },
 			children: [/* @__PURE__ */ jsx(Select$1.Control, { children: /* @__PURE__ */ jsxs(Select$1.Trigger, {
-				"aria-label": "Rows per page",
-				children: [/* @__PURE__ */ jsx(Select$1.ValueText, {}), /* @__PURE__ */ jsx(Select$1.Indicator, { children: chevronDownGlyph() })]
+				"aria-label": messages.table.rowsPerPage,
+				children: [/* @__PURE__ */ jsx(Select$1.ValueText, {}), /* @__PURE__ */ jsx(Select$1.Indicator, { children: chevronDownIcon })]
 			}) }), /* @__PURE__ */ jsx(Select$1.Positioner, { children: /* @__PURE__ */ jsx(Select$1.Content, { children: sizeItems.items.map((item) => /* @__PURE__ */ jsxs(Select$1.Item, {
 				item,
-				children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: "✓" })]
+				children: [/* @__PURE__ */ jsx(Select$1.ItemText, { children: item.label }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: iconNode("check", {
+					width: 14,
+					height: 14
+				}) })]
 			}, item.value)) }) })]
 		});
 		const pager = /* @__PURE__ */ jsxs(Pagination.Root, {
@@ -618,22 +590,22 @@ function DataTable(rawProps) {
 			page: pagination.pageIndex + 1,
 			onPageChange: (details) => table.setPageIndex(details.page - 1),
 			children: [
-				/* @__PURE__ */ jsx(Pagination.PrevTrigger, { children: pageGlyph("start") }),
+				/* @__PURE__ */ jsx(Pagination.PrevTrigger, { children: pageIcon("start") }),
 				/* @__PURE__ */ jsx(Pagination.Context, { children: (scope) => scope.pages.map((page, index) => page.type === "ellipsis" ? /* @__PURE__ */ jsx(Pagination.Ellipsis, { index }, `e${index}`) : /* @__PURE__ */ jsx(Pagination.Item, {
 					type: "page",
 					value: page.value,
 					children: String(page.value)
 				}, page.value)) }),
-				/* @__PURE__ */ jsx(Pagination.NextTrigger, { children: pageGlyph("end") })
+				/* @__PURE__ */ jsx(Pagination.NextTrigger, { children: pageIcon("end") })
 			]
 		});
 		return /* @__PURE__ */ jsxs("div", {
 			"data-scope": "table",
 			"data-part": "pagination",
-			children: [/* @__PURE__ */ jsxs("span", {
+			children: [/* @__PURE__ */ jsx("span", {
 				"data-scope": "table",
 				"data-part": "page-status",
-				children: [rowCount, " rows"]
+				children: formatMessage(messages.table.rowsCount, { count: rowCount })
 			}), /* @__PURE__ */ jsxs("div", {
 				"data-scope": "table",
 				"data-part": "page-nav",
@@ -648,8 +620,8 @@ function DataTable(rawProps) {
 			type: "search",
 			"data-scope": "table",
 			"data-part": "global-filter",
-			"aria-label": "Filter all columns",
-			placeholder: globalFilterPlaceholder,
+			"aria-label": messages.table.filterAll,
+			placeholder: globalFilterText,
 			value: table.atoms.globalFilter.get() ?? "",
 			onInput: (e) => table.setGlobalFilter(e.target.value)
 		})
@@ -668,6 +640,7 @@ function DataTable(rawProps) {
 				"data-scope": "table",
 				"data-part": "viewport",
 				ref: viewport,
+				tabIndex: 0,
 				children: /* @__PURE__ */ jsxs("div", {
 					role: "table",
 					"data-scope": "table",
@@ -684,5 +657,6 @@ function DataTable(rawProps) {
 		]
 	});
 }
+const DataTable = withSelfRoot(DataTableImpl);
 //#endregion
 export { DataTable, FlexRender, createColumnHelper };