@bysages/solid 0.3.0 → 0.4.0

package/dist/components/tour/index.mjs

@@ -1,13 +1,78 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { Tour as Tour$1, useTour } from "@ark-ui/solid/tour";
-//#region src/components/tour/index.ts
-/** Ark's Tour, dressed in the paper-and-ink system: a dimmed page where
-* the spotlight alone keeps the focus halo, and the anchored card rides
-* the shared popup vessel. The API is Ark's own — Root, Backdrop,
-* Spotlight, Positioner, Content, Arrow, ArrowTip, Title, Description,
-* ProgressText, Control, Actions, ActionTrigger, CloseTrigger, plus
-* useTour. */
-const Tour = Tour$1;
+import { createComponent, memo } from "@solidjs/web";
+import { Show, mergeProps as mergeProps$1 } from "solid-js";
+import { Tour as Tour$1, useTour as useTour$1 } from "@ark-ui/solid/tour";
+//#region src/components/tour/index.tsx
+function TourFacade(props) {
+	injectComponentStyle("tour");
+	return createComponent(Tour$1.Root, {
+		get tour() {
+			return props.tour;
+		},
+		get children() {
+			return [
+				createComponent(Button, {
+					size: "sm",
+					onClick: () => props.tour().start(),
+					get children() {
+						return props.trigger ?? "Start tour";
+					}
+				}),
+				memo(() => {
+					return props.children;
+				}),
+				createComponent(Tour$1.Backdrop, {}),
+				createComponent(Tour$1.Spotlight, {}),
+				createComponent(Tour$1.Positioner, { get children() {
+					return createComponent(Tour$1.Content, { get children() {
+						return createComponent(Show, {
+							get when() {
+								return props.content;
+							},
+							get fallback() {
+								return createComponent(TourCardBody, {});
+							},
+							get children() {
+								return props.content;
+							}
+						});
+					} });
+				} })
+			];
+		}
+	});
+}
+function TourCardBody() {
+	return [
+		createComponent(Tour$1.ProgressText, {}),
+		createComponent(Tour$1.Title, {}),
+		createComponent(Tour$1.Description, {}),
+		createComponent(Tour$1.Control, { get children() {
+			return createComponent(Tour$1.Actions, { children: (actions) => memo(() => {
+				return actions().map((action) => createComponent(Tour$1.ActionTrigger, {
+					action,
+					get children() {
+						return action.label;
+					}
+				}));
+			}) });
+		} })
+	];
+}
+const Tour = defineFamily(TourFacade, {
+	...Tour$1,
+	Root: Tour$1.Root
+});
+/** Tour machines are created by useTour, so the stable id belongs there. */
+function useTour(props = {}) {
+	const id = useElementId("tour", () => props.id);
+	return useTour$1(mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
 injectComponentStyle("tour");
 //#endregion
 export { Tour, useTour };

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

@@ -1,3 +1,4 @@
+import { Checkbox } from "../checkbox/index.mjs";
 import { JSX } from "solid-js";
 //#region src/components/transfer/index.d.ts
 export interface TransferItem {
@@ -20,5 +21,6 @@ export interface TransferProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * `data` stays on the left. `searchable` adds a filter line to each
  * panel.
  */
-export declare function Transfer(props: TransferProps): JSX.Element;
+declare function TransferImpl(props: TransferProps): JSX.Element;
+export declare const Transfer: typeof TransferImpl & typeof Checkbox;
 //#endregion

package/dist/components/transfer/index.mjs

@@ -1,24 +1,24 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { Button } from "../button/index.mjs";
-import { t as Input } from "../../input-DoFQ7RXh.mjs";
+import { n as useComponentMessages, t as formatComponentMessage } from "../../use-component-messages-C4SCVYjD.mjs";
+import { t as Input } from "../../input-CPAJdwDb.mjs";
+import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, setAttribute, spread, template } from "@solidjs/web";
 import { For, Show, createSignal, splitProps } from "solid-js";
 import { Checkbox } from "@ark-ui/solid/checkbox";
 //#region src/components/transfer/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m5 12.5 5 5L19 7">`);
-var _tmpl$2 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=transfer data-part=search>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=transfer data-part=panel><div data-scope=transfer data-part=head><span data-scope=transfer data-part=title></span><span data-scope=transfer data-part=count></span></div><div data-scope=transfer data-part=list>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<p data-scope=transfer data-part=empty>Nothing here`);
-var _tmpl$6 = /* @__PURE__ */ template(`<div><div data-scope=transfer data-part=operations><!><!></div><!>`);
-function checkGlyph() {
-	return _tmpl$();
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=transfer data-part=search>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=transfer data-part=panel><div data-scope=transfer data-part=head><span data-scope=transfer data-part=title></span><span data-scope=transfer data-part=count></span></div><div data-scope=transfer data-part=list>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<p data-scope=transfer data-part=empty>Nothing here`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div><div data-scope=transfer data-part=operations><!><!></div><!>`);
+function checkIcon() {
+	return iconNode("check");
 }
-function arrowGlyph(direction) {
-	var _el$2 = _tmpl$2();
-	var _el$3 = _el$2.firstChild;
-	setAttribute(_el$3, "d", direction === "right" ? "M5 12h14m-6-6 6 6-6 6" : "M19 12H5m6-6-6 6 6 6");
-	return _el$2;
+function arrowIcon(direction) {
+	return direction === "right" ? iconNode("arrow-right") : iconNode("arrow-left");
 }
 /**
 * Two ledgers and a crossing: items sit in the source column until the
@@ -27,7 +27,8 @@ function arrowGlyph(direction) {
 * `data` stays on the left. `searchable` adds a filter line to each
 * panel.
 */
-function Transfer(props) {
+function TransferImpl(props) {
+	const messages = useComponentMessages();
 	injectComponentStyle("transfer");
 	injectComponentStyle("checkbox");
 	const [own, rest] = splitProps(props, [
@@ -38,6 +39,7 @@ function Transfer(props) {
 		"disabled",
 		"onValueChange"
 	]);
+	const id = useElementId("transfer");
 	const [checkedSource, setCheckedSource] = createSignal(/* @__PURE__ */ new Set());
 	const [checkedTarget, setCheckedTarget] = createSignal(/* @__PURE__ */ new Set());
 	const [sourceQuery, setSourceQuery] = createSignal("");
@@ -60,45 +62,52 @@ function Transfer(props) {
 		own.onValueChange?.(next);
 	}
 	function panel(side, title, query, setQuery, checked, setChecked, items) {
-		var _el$4 = _tmpl$4();
-		var _el$5 = _el$4.firstChild;
-		var _el$6 = _el$5.firstChild;
-		var _el$7 = _el$6.nextSibling;
-		var _el$9 = _el$5.nextSibling;
-		setAttribute(_el$4, "data-side", side);
-		insert(_el$6, title);
-		insert(_el$7, () => {
+		var _el$ = _tmpl$2();
+		var _el$2 = _el$.firstChild;
+		var _el$3 = _el$2.firstChild;
+		var _el$4 = _el$3.nextSibling;
+		var _el$6 = _el$2.nextSibling;
+		setAttribute(_el$, "data-side", side);
+		insert(_el$3, title);
+		insert(_el$4, () => {
 			return String(items.length);
 		});
-		insert(_el$4, createComponent(Show, {
+		insert(_el$, createComponent(Show, {
 			get when() {
 				return own.searchable;
 			},
 			get children() {
-				var _el$8 = _tmpl$3();
-				insert(_el$8, createComponent(Input, {
+				var _el$5 = _tmpl$();
+				insert(_el$5, createComponent(Input, {
 					size: "sm",
 					get value() {
 						return query();
 					},
 					onValueChange: setQuery,
-					placeholder: "Filter…",
-					"aria-label": `Filter ${title}`
+					get placeholder() {
+						return formatComponentMessage(messages().transfer.filter, { name: title });
+					},
+					get "aria-label"() {
+						return formatComponentMessage(messages().transfer.filter, { name: title });
+					}
 				}));
-				return _el$8;
+				return _el$5;
 			}
-		}), _el$9);
-		insert(_el$9, createComponent(Show, {
+		}), _el$6);
+		insert(_el$6, createComponent(Show, {
 			get when() {
 				return items.length > 0;
 			},
 			get fallback() {
-				return _tmpl$5();
+				return _tmpl$3();
 			},
 			get children() {
 				return createComponent(For, {
 					each: items,
-					children: (item) => createComponent(Checkbox.Root, {
+					children: (item, index) => createComponent(Checkbox.Root, {
+						get id() {
+							return `${id()}-${index()}`;
+						},
 						get checked() {
 							return checked().has(item.value);
 						},
@@ -110,7 +119,7 @@ function Transfer(props) {
 							return [
 								createComponent(Checkbox.Control, { get children() {
 									return createComponent(Checkbox.Indicator, { get children() {
-										return checkGlyph();
+										return checkIcon();
 									} });
 								} }),
 								createComponent(Checkbox.Label, {
@@ -126,50 +135,55 @@ function Transfer(props) {
 				});
 			}
 		}));
-		return _el$4;
+		return _el$;
 	}
-	var _el$11 = _tmpl$6();
-	var _el$12 = _el$11.firstChild;
-	var _el$13 = _el$12.firstChild;
-	var _el$14 = _el$13.nextSibling;
-	var _el$15 = _el$12.nextSibling;
-	spread(_el$11, [rest, {
+	var _el$8 = _tmpl$4();
+	var _el$9 = _el$8.firstChild;
+	var _el$10 = _el$9.firstChild;
+	var _el$11 = _el$10.nextSibling;
+	var _el$12 = _el$9.nextSibling;
+	spread(_el$8, [rest, {
 		"data-scope": "transfer",
 		"data-part": "root"
 	}], true);
-	insert(_el$11, () => {
+	insert(_el$8, () => {
 		return panel("source", own.titles?.[0] ?? "Source", sourceQuery, setSourceQuery, checkedSource, setCheckedSource, panelItems(own.data, false, sourceQuery()));
-	}, _el$12);
-	insert(_el$12, createComponent(Button, {
+	}, _el$9);
+	insert(_el$9, createComponent(Button, {
 		variant: "outline",
 		size: "sm",
 		square: true,
 		get disabled() {
 			return checkedSource().size === 0 || own.disabled;
 		},
-		"aria-label": "Move right",
+		get "aria-label"() {
+			return messages().transfer.moveRight;
+		},
 		onClick: () => move(true),
 		get children() {
-			return arrowGlyph("right");
+			return arrowIcon("right");
 		}
-	}), _el$13);
-	insert(_el$12, createComponent(Button, {
+	}), _el$10);
+	insert(_el$9, createComponent(Button, {
 		variant: "outline",
 		size: "sm",
 		square: true,
 		get disabled() {
 			return checkedTarget().size === 0 || own.disabled;
 		},
-		"aria-label": "Move left",
+		get "aria-label"() {
+			return messages().transfer.moveLeft;
+		},
 		onClick: () => move(false),
 		get children() {
-			return arrowGlyph("left");
+			return arrowIcon("left");
 		}
-	}), _el$14);
-	insert(_el$11, () => {
+	}), _el$11);
+	insert(_el$8, () => {
 		return panel("target", own.titles?.[1] ?? "Target", targetQuery, setTargetQuery, checkedTarget, setCheckedTarget, panelItems(own.data, true, targetQuery()));
-	}, _el$15);
-	return _el$11;
+	}, _el$12);
+	return _el$8;
 }
+const Transfer = defineFamily(TransferImpl, Checkbox$1);
 //#endregion
 export { Transfer };

package/dist/components/tree-select/index.d.mts

@@ -1,3 +1,4 @@
+import { Popover } from "../popover/index.mjs";
 import { JSX } from "solid-js";
 //#region src/components/tree-select/index.d.ts
 export interface TreeSelectNode {
@@ -24,5 +25,6 @@ export interface TreeSelectProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * `value`. `filterable` puts a filter line at the top of the vessel;
  * matches keep their ancestors and the branches fan open.
  */
-export declare function TreeSelect(props: TreeSelectProps): JSX.Element;
+declare function TreeSelectImpl(props: TreeSelectProps): JSX.Element;
+export declare const TreeSelect: typeof TreeSelectImpl & typeof Popover;
 //#endregion

package/dist/components/tree-select/index.mjs

@@ -1,4 +1,9 @@
-import { t as Input } from "../../input-DoFQ7RXh.mjs";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { t as Input } from "../../input-CPAJdwDb.mjs";
+import { Popover as Popover$1 } from "../popover/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
 import { For, Show, createMemo, createSignal, splitProps } from "solid-js";
@@ -7,14 +12,12 @@ import { useFilter } from "@ark-ui/solid/locale";
 import { Popover } from "@ark-ui/solid/popover";
 import { TreeView, createTreeCollection } from "@ark-ui/solid/tree-view";
 //#region src/components/tree-select/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m9 18 6-6-6-6">`);
-var _tmpl$2 = /* @__PURE__ */ template(`<span>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=tree-select data-part=search>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=tree-select data-part=body>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<button><span data-part=chevron aria-hidden=true>`);
-var _tmpl$6 = /* @__PURE__ */ template(`<p data-scope=tree-select data-part=empty>Nothing matches`);
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=tree-select data-part=search>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=tree-select data-part=body>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<button><span data-part=chevron aria-hidden=true>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<p data-scope=tree-select data-part=empty>Nothing matches`);
 function chevron() {
-	return _tmpl$();
+	return iconNode("chevron-right");
 }
 /**
 * A tree behind a field: the control reads like an input, the vessel
@@ -23,9 +26,11 @@ function chevron() {
 * `value`. `filterable` puts a filter line at the top of the vessel;
 * matches keep their ancestors and the branches fan open.
 */
-function TreeSelect(props) {
+function TreeSelectImpl(props) {
+	const messages = useComponentMessages();
 	injectComponentStyle("tree-select");
 	injectComponentStyle("tree-view");
+	const id = useElementId("tree-select", () => rest.id);
 	const [own, rest] = splitProps(props, [
 		"value",
 		"data",
@@ -95,17 +100,11 @@ function TreeSelect(props) {
 						return rowProps.node.children;
 					},
 					get fallback() {
-						return createComponent(TreeView.Item, { asChild: (propsFn) => (() => {
-							var _el$2 = _tmpl$2();
-							spread(_el$2, [propsFn, { style: {
-								display: "flex",
-								"inline-size": "100%"
-							} }], true);
-							insert(_el$2, createComponent(TreeView.ItemText, { get children() {
+						return createComponent(TreeView.Item, { get children() {
+							return createComponent(TreeView.ItemText, { get children() {
 								return rowProps.node.label;
-							} }));
-							return _el$2;
-						})() });
+							} });
+						} });
 					},
 					get children() {
 						return createComponent(TreeView.Branch, { get children() {
@@ -135,6 +134,9 @@ function TreeSelect(props) {
 		});
 	}
 	return createComponent(Popover.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
 		get open() {
 			return open();
 		},
@@ -148,9 +150,9 @@ function TreeSelect(props) {
 		},
 		get children() {
 			return [createComponent(Popover.Trigger, { asChild: (propsFn) => (() => {
-				var _el$5 = _tmpl$5();
-				var _el$6 = _el$5.firstChild;
-				spread(_el$5, [propsFn, {
+				var _el$3 = _tmpl$3();
+				var _el$4 = _el$3.firstChild;
+				spread(_el$3, [propsFn, {
 					type: "button",
 					"data-scope": "tree-select",
 					"data-part": "control",
@@ -167,11 +169,11 @@ function TreeSelect(props) {
 						return own.disabled;
 					}
 				}], true);
-				insert(_el$5, () => {
+				insert(_el$3, () => {
 					return label() ?? own.placeholder ?? "Select…";
-				}, _el$6);
-				insert(_el$6, chevron);
-				return _el$5;
+				}, _el$4);
+				insert(_el$4, chevron);
+				return _el$3;
 			})() }), createComponent(Portal, { get children() {
 				return createComponent(Popover.Positioner, { get children() {
 					return createComponent(Popover.Content, {
@@ -186,29 +188,36 @@ function TreeSelect(props) {
 									return own.filterable;
 								},
 								get children() {
-									var _el$3 = _tmpl$3();
-									insert(_el$3, createComponent(Input, {
+									var _el$ = _tmpl$();
+									insert(_el$, createComponent(Input, {
 										size: "sm",
 										get value() {
 											return query();
 										},
 										onValueChange: setQuery,
-										placeholder: "Filter…",
-										"aria-label": "Filter options"
+										get placeholder() {
+											return messages().select.filter;
+										},
+										get "aria-label"() {
+											return messages().select.filter;
+										}
 									}));
-									return _el$3;
+									return _el$;
 								}
 							}), (() => {
-								var _el$4 = _tmpl$4();
-								insert(_el$4, createComponent(Show, {
+								var _el$2 = _tmpl$2();
+								insert(_el$2, createComponent(Show, {
 									get when() {
 										return (visibleCollection().rootNode.children ?? []).length > 0;
 									},
 									get fallback() {
-										return _tmpl$6();
+										return _tmpl$4();
 									},
 									get children() {
 										return createComponent(TreeView.Root, mergeProps({
+											get id() {
+												return `${id()}-tree`;
+											},
 											get collection() {
 												return visibleCollection();
 											},
@@ -240,7 +249,7 @@ function TreeSelect(props) {
 										}));
 									}
 								}));
-								return _el$4;
+								return _el$2;
 							})()];
 						}
 					});
@@ -249,5 +258,6 @@ function TreeSelect(props) {
 		}
 	}));
 }
+const TreeSelect = defineFamily(TreeSelectImpl, Popover$1);
 //#endregion
 export { TreeSelect };

package/dist/components/tree-view/index.d.mts

@@ -12,7 +12,7 @@ type TreeViewOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function TreeViewRoot<T extends TreeNode>(props: TreeViewRootProps<T> & TreeViewOwnProps): import("solid-js").JSX.Element;
-export declare const TreeView: Omit<typeof TreeView$1, "Root"> & {
+export declare const TreeView: typeof TreeViewRoot & Omit<typeof TreeView$1, "Root"> & {
   Root: typeof TreeViewRoot;
 };
 //#endregion

package/dist/components/tree-view/index.mjs

@@ -1,3 +1,6 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.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";
@@ -6,14 +9,32 @@ import { TreeView as TreeView$1 } from "@ark-ui/solid/tree-view";
 const ArkRoot = TreeView$1.Root;
 function TreeViewRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(ArkRoot, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
+	const id = useElementId("tree-view", () => rest.id);
+	return createComponent(ArkRoot, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
+}
+/** The node checkbox rides inside the branch control; the branch
+* itself answers the keyboard, so the checkbox stays visual only. */
+function TreeViewNodeCheckbox(props) {
+	return createComponent(TreeView$1.NodeCheckbox, mergeProps(props, { "aria-hidden": "true" }));
+}
+function TreeViewBranchIndicator(props) {
+	return createComponent(TreeView$1.BranchIndicator, mergeProps(props, { get children() {
+		return props.children ?? iconNode("chevron-right");
 	} }));
 }
-const TreeView = {
+const TreeView = defineFamily(TreeViewRoot, {
 	...TreeView$1,
-	Root: TreeViewRoot
-};
+	Root: TreeViewRoot,
+	NodeCheckbox: TreeViewNodeCheckbox,
+	BranchIndicator: TreeViewBranchIndicator
+});
 injectComponentStyle("tree-view");
 //#endregion
 export { TreeView };

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

@@ -15,5 +15,7 @@ export interface UserProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * quiet echo beneath. The mark is the Avatar itself — one component
  * renders it here, so every size and shape the Avatar knows the user
  * inherits; this row only lays the words out beside it. */
-export declare function User(props: UserProps): JSX.Element;
+export declare const User: ((props: UserProps) => JSX.Element) & {
+  Root: (props: UserProps) => JSX.Element;
+};
 //#endregion

package/dist/components/user/index.mjs

@@ -1,3 +1,5 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, memo, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -9,8 +11,9 @@ var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=user data-part=descript
 * quiet echo beneath. The mark is the Avatar itself — one component
 * renders it here, so every size and shape the Avatar knows the user
 * inherits; this row only lays the words out beside it. */
-function User(props) {
+const User = withSelfRoot(function User(props) {
 	injectComponentStyle("user");
+	const id = useElementId("user-avatar");
 	const [own, rest] = splitProps(props, [
 		"name",
 		"description",
@@ -30,6 +33,9 @@ function User(props) {
 		"data-part": "root"
 	}], true);
 	insert(_el$, createComponent(Avatar.Root, {
+		get id() {
+			return id();
+		},
 		get "data-size"() {
 			return own.size;
 		},
@@ -63,6 +69,6 @@ function User(props) {
 		return own.children;
 	}, _el$5);
 	return _el$;
-}
+});
 //#endregion
 export { User };

package/dist/components/virtual-list/index.d.mts

@@ -13,5 +13,7 @@ export interface VirtualListProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * scroll length by a spacer sized from the row height, the rows
  * themselves are positioned against it — a ten-thousand-row list
  * costs the DOM a window, not the ledger. */
-export declare function VirtualList(props: VirtualListProps): JSX.Element;
+export declare const VirtualList: ((props: VirtualListProps) => JSX.Element) & {
+  Root: (props: VirtualListProps) => JSX.Element;
+};
 //#endregion

package/dist/components/virtual-list/index.mjs

@@ -1,15 +1,19 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, effect, insert, ref, setStyleProperty, spread, template } from "@solidjs/web";
 import { For, createSignal, splitProps } from "solid-js";
 import { createVirtualizer } from "@tanstack/solid-virtual";
 //#region src/components/virtual-list/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=virtual-list data-part=inner style=position:relative>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=virtual-list data-part=row style=position:absolute;top:0;inset-inline-start:0;inline-size:100%>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=virtual-list data-part=inner>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=virtual-list data-part=row>`);
+function toCssLength(length) {
+	return typeof length === "number" ? `${length}px` : length;
+}
 /** A ledger that only mounts the rows on stage: the viewport keeps its
 * scroll length by a spacer sized from the row height, the rows
 * themselves are positioned against it — a ten-thousand-row list
 * costs the DOM a window, not the ledger. */
-function VirtualList(props) {
+const VirtualList = withSelfRoot(function VirtualList(props) {
 	injectComponentStyle("virtual-list");
 	const [own, rest] = splitProps(props, [
 		"items",
@@ -32,12 +36,13 @@ function VirtualList(props) {
 		return setViewport;
 	}, _el$);
 	spread(_el$, [rest, {
+		tabindex: 0,
 		"data-scope": "virtual-list",
 		"data-part": "root",
 		get style() {
 			return {
 				...typeof restStyle === "object" && restStyle ? restStyle : {},
-				"block-size": typeof own.height === "number" ? `${own.height}px` : own.height ?? "320px"
+				"--bs-virtual-list-height": toCssLength(own.height ?? 320)
 			};
 		}
 	}], true);
@@ -52,20 +57,20 @@ function VirtualList(props) {
 			});
 			effect(() => {
 				return {
-					e: `translateY(${row.start}px)`,
+					e: `${row.start}px`,
 					t: `${row.size}px`
 				};
 			}, ({ e, t }, _p$) => {
-				e !== _p$?.e && setStyleProperty(_el$3, "transform", e);
-				t !== _p$?.t && setStyleProperty(_el$3, "block-size", t);
+				e !== _p$?.e && setStyleProperty(_el$3, "--bs-virtual-list-row-start", e);
+				t !== _p$?.t && setStyleProperty(_el$3, "--bs-virtual-list-row-size", t);
 			});
 			return _el$3;
 		})()
 	}));
 	effect(() => `${virtualizer.getTotalSize()}px`, (_v$) => {
-		setStyleProperty(_el$2, "block-size", _v$);
+		setStyleProperty(_el$2, "--bs-virtual-list-total", _v$);
 	});
 	return _el$;
-}
+});
 //#endregion
 export { VirtualList };