@bysages/solid 0.3.1 → 0.4.1

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,25 +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 { n as useComponentMessages, t as formatComponentMessage } from "../../use-component-messages-C4SCVYjD.mjs";
-import { t as Input } from "../../input-DoFQ7RXh.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { t as Input } from "../../input-BL3N3L8g.mjs";
+import { Checkbox as Checkbox$1 } from "../checkbox/index.mjs";
 import { createComponent, insert, setAttribute, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 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
@@ -28,7 +27,7 @@ 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");
@@ -40,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("");
@@ -62,23 +62,23 @@ 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();
@@ -91,20 +91,23 @@ function Transfer(props) {
 						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);
 						},
@@ -116,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, {
@@ -132,21 +135,21 @@ 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,
@@ -158,10 +161,10 @@ function Transfer(props) {
 		},
 		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,
@@ -173,13 +176,14 @@ function Transfer(props) {
 		},
 		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,21 +1,23 @@
+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-DoFQ7RXh.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { t as Input } from "../../input-BL3N3L8g.mjs";
+import { Popover as Popover$1 } from "../popover/index.mjs";
 import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, Show, createMemo, createSignal, splitProps } from "solid-js";
 import { Portal } from "solid-js/web";
 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
@@ -24,10 +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",
@@ -97,14 +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, 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() {
@@ -134,6 +134,9 @@ function TreeSelect(props) {
 		});
 	}
 	return createComponent(Popover.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
 		get open() {
 			return open();
 		},
@@ -147,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",
@@ -166,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, {
@@ -185,8 +188,8 @@ 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();
@@ -199,19 +202,22 @@ function TreeSelect(props) {
 											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();
 											},
@@ -243,7 +249,7 @@ function TreeSelect(props) {
 										}));
 									}
 								}));
-								return _el$4;
+								return _el$2;
 							})()];
 						}
 					});
@@ -252,5 +258,6 @@ function TreeSelect(props) {
 		}
 	}));
 }
+const TreeSelect = defineFamily(TreeSelectImpl, Popover$1);
 //#endregion
 export { TreeSelect };

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

@@ -1,4 +1,3 @@
-import { ComponentProps } from "solid-js";
 import { TreeNode, TreeView as TreeView$1, TreeViewRootProps } from "@ark-ui/solid/tree-view";
 //#region src/components/tree-view/index.d.ts
 /** Ark's TreeView, dressed in the paper-and-ink system: quiet rows where
@@ -13,13 +12,7 @@ type TreeViewOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function TreeViewRoot<T extends TreeNode>(props: TreeViewRootProps<T> & TreeViewOwnProps): import("solid-js").JSX.Element;
-/** The node checkbox rides inside the branch control; the branch
- * itself answers the keyboard, so the checkbox stays visual only. */
-declare function TreeViewNodeCheckbox(props: ComponentProps<typeof TreeView$1.NodeCheckbox>): import("solid-js").JSX.Element;
-declare function TreeViewBranchIndicator(props: ComponentProps<typeof TreeView$1.BranchIndicator>): import("solid-js").JSX.Element;
-export declare const TreeView: Omit<typeof TreeView$1, "Root" | "NodeCheckbox" | "BranchIndicator"> & {
+export declare const TreeView: typeof TreeViewRoot & Omit<typeof TreeView$1, "Root"> & {
   Root: typeof TreeViewRoot;
-  NodeCheckbox: typeof TreeViewNodeCheckbox;
-  BranchIndicator: typeof TreeViewBranchIndicator;
 };
 //#endregion

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

@@ -1,16 +1,23 @@
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, mergeProps, setAttribute, template } from "@solidjs/web";
+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 { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
-import { chevron_right } from "@bysages/icons";
 import { TreeView as TreeView$1 } from "@ark-ui/solid/tree-view";
 //#region src/components/tree-view/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg aria-hidden=true>`);
 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. */
@@ -19,27 +26,15 @@ function TreeViewNodeCheckbox(props) {
 }
 function TreeViewBranchIndicator(props) {
 	return createComponent(TreeView$1.BranchIndicator, mergeProps(props, { get children() {
-		return props.children ?? (() => {
-			var _el$ = _tmpl$();
-			effect(() => {
-				return {
-					e: `0 0 ${chevron_right.width} ${chevron_right.height}`,
-					t: chevron_right.body
-				};
-			}, ({ e, t }, _p$) => {
-				e !== _p$?.e && setAttribute(_el$, "viewBox", e);
-				t !== _p$?.t && (_el$.innerHTML = t);
-			});
-			return _el$;
-		})();
+		return props.children ?? iconNode("chevron-right");
 	} }));
 }
-const TreeView = {
+const TreeView = defineFamily(TreeViewRoot, {
 	...TreeView$1,
 	Root: TreeViewRoot,
 	NodeCheckbox: TreeViewNodeCheckbox,
 	BranchIndicator: TreeViewBranchIndicator
-};
+});
 injectComponentStyle("tree-view");
 //#endregion
 export { TreeView };

package/dist/components/typography/index.mjs

@@ -1,5 +1,5 @@
-import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/typography/index.tsx
 /** The typographic voices, named so prose can ask for one: display and
 * heading ride the song-serif, the rest ride the hei. Nothing here is

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,5 +1,7 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, insert, memo, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 import { Avatar } from "@ark-ui/solid/avatar";
 //#region src/components/user/index.tsx
@@ -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 { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { createComponent, effect, insert, ref, setStyleProperty, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 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",
@@ -38,7 +42,7 @@ function VirtualList(props) {
 		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);
@@ -53,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 };

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

@@ -13,5 +13,7 @@ export interface WatermarkProps extends JSX.HTMLAttributes<HTMLDivElement> {
   rotate?: number;
   fontSize?: string;
 }
-export declare function Watermark(props: WatermarkProps): JSX.Element;
+export declare const Watermark: ((props: WatermarkProps) => JSX.Element) & {
+  Root: (props: WatermarkProps) => JSX.Element;
+};
 //#endregion

package/dist/components/watermark/index.mjs

@@ -1,5 +1,6 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { effect, insert, ref, setStyleProperty, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { createEffect, createSignal, splitProps } from "solid-js";
 //#region src/components/watermark/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><div data-scope=watermark data-part=content></div><div data-scope=watermark data-part=marks aria-hidden=true>`);
@@ -12,7 +13,7 @@ function toPx(size) {
 	if (size.includes("em")) return value * root;
 	return value;
 }
-function Watermark(props) {
+const Watermark = withSelfRoot(function Watermark(props) {
 	injectComponentStyle("watermark");
 	const [own, rest] = splitProps(props, [
 		"content",
@@ -69,9 +70,9 @@ function Watermark(props) {
 		return rest.children;
 	});
 	effect(() => tile(), (_v$) => {
-		setStyleProperty(_el$3, "background-image", _v$);
+		setStyleProperty(_el$3, "--bs-watermark-image", _v$);
 	});
 	return _el$;
-}
+});
 //#endregion
 export { Watermark };

package/dist/element-dGIhOTJ6.mjs

@@ -0,0 +1,16 @@
+import { spread } from "solid-js/web";
+//#region src/internal/element.tsx
+/** Detect a host element without assuming one exists during SSR. */
+function isElement(value) {
+	return typeof Element !== "undefined" && value instanceof Element;
+}
+/** Graft machine props onto a caller-owned Solid element. Solid elements
+* are concrete nodes rather than cloneable vnodes, so this uses the same
+* runtime spread that JSX spread compiles to.
+*/
+function withElementProps(element, props) {
+	spread(element, props, element instanceof SVGElement, true);
+	return element;
+}
+//#endregion
+export { withElementProps as n, isElement as t };

package/dist/family-Cmd8HEyK.mjs

@@ -0,0 +1,11 @@
+//#region src/internal/family.ts
+/** Attaches anatomy parts to a callable family facade. */
+function defineFamily(facade, parts) {
+	return Object.assign(facade, parts);
+}
+/** Gives a single-component family the same callable + Root surface. */
+function withSelfRoot(component) {
+	return Object.assign(component, { Root: component });
+}
+//#endregion
+export { withSelfRoot as n, defineFamily as t };