@bysages/svelte 0.3.0 → 0.4.0

package/dist/{terminal-B3b4KzoN.mjs → terminal-C0XnhwEh.mjs}

@@ -1,3 +1,5 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -18,6 +20,7 @@ function Terminal$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("terminal");
 	let lines = $.prop($$props, "lines", 19, () => []), prompt = $.prop($$props, "prompt", 3, "$"), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	let draft = $.state("");
 	let scroll = $.state(void 0);
 	$.user_effect(() => {
@@ -54,11 +57,11 @@ function Terminal$1($$anchor, $$props) {
 	$.remove_input_defaults(input);
 	$.reset(div_3);
 	$.reset(div);
-	$.template_effect(() => {
+	$.template_effect(($0) => {
 		$.set_text(text_2, prompt());
 		$.set_attribute(input, "placeholder", $$props.placeholder);
-		$.set_attribute(input, "aria-label", $$props.label ? `${$$props.label} command line` : "Command line");
-	});
+		$.set_attribute(input, "aria-label", $0);
+	}, [() => messages().terminal.commandLine]);
 	$.delegated("keydown", input, (event) => {
 		if (event.key === "Enter") {
 			event.preventDefault();
@@ -73,6 +76,6 @@ $.delegate(["keydown"]);
 //#endregion
 //#region src/components/terminal/index.ts
 /** A quiet console: the transcript above, the prompt line below. */
-const Terminal = Terminal$1;
+const Terminal = withSelfRoot(Terminal$1);
 //#endregion
 export { Terminal as t };

package/dist/{textarea-DzDc678j.mjs → textarea-BUzu42K0.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -39,6 +40,6 @@ function Textarea$1($$anchor, $$props) {
 /** The bare multi-line input, dressed in the field recipe: border,
 * surface, focus halo — no shadow. Inside a Field.Root it picks up the
 * label wiring and the invalid state from the context. */
-const Textarea = Textarea$1;
+const Textarea = withSelfRoot(Textarea$1);
 //#endregion
 export { Textarea as t };

package/dist/{toolbar-SNwuRrJr.mjs → toolbar-CiXQAM_F.mjs}

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -63,6 +64,6 @@ function Toolbar$1($$anchor, $$props) {
 //#region src/components/toolbar/index.ts
 /** A workbench rail: the start tools at the leading edge, the end
 * tools at the trailing. */
-const Toolbar = Toolbar$1;
+const Toolbar = withSelfRoot(Toolbar$1);
 //#endregion
 export { Toolbar as t };

package/dist/{transfer-0IAuhFCe.mjs → transfer-B0EAGhLK.mjs}

@@ -1,4 +1,7 @@
-import { t as Button } from "./button-BCcX7lHq.mjs";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import { t as Button } from "./button-CghWQD3J.mjs";
+import { n as useComponentMessages, t as formatMessage } from "./messages-DNzA55pH.mjs";
 import { Input } from "./components/input/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
@@ -17,16 +20,13 @@ var rest_excludes = /* @__PURE__ */ new Set([
 ]);
 var root = $.from_html(`<div data-scope="transfer" data-part="search"><!></div>`);
 var root_1 = $.from_html(`<p data-scope="transfer" data-part="empty">Nothing here</p>`);
-var root_2 = $.from_svg(`<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"></path></svg>`);
-var root_3 = $.from_html(`<!> <!> <!>`, 1);
-var root_4 = $.from_html(`<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"><!></div></div>`);
-var root_5 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14m-6-6 6 6-6 6"></path></svg>`);
-var root_6 = $.from_svg(`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5m6-6-6 6 6 6"></path></svg>`);
-var root_7 = $.from_html(`<div><!> <div data-scope="transfer" data-part="operations"><!> <!></div> <!></div>`);
+var root_2 = $.from_html(`<!> <!> <!>`, 1);
+var root_3 = $.from_html(`<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"><!></div></div>`);
+var root_4 = $.from_html(`<div><!> <div data-scope="transfer" data-part="operations"><!> <!></div> <!></div>`);
 function Transfer$1($$anchor, $$props) {
 	$.push($$props, true);
 	const panel = ($$anchor, side = $.noop, title = $.noop, items = $.noop, checked = $.noop) => {
-		var div = root_4();
+		var div = root_3();
 		var div_1 = $.child(div);
 		var span = $.child(div_1);
 		var text = $.only_child(span, true);
@@ -39,16 +39,19 @@ function Transfer$1($$anchor, $$props) {
 			var node_1 = $.child(div_2);
 			{
 				let $0 = $.derived(() => side() === "source" ? $.get(sourceQuery) : $.get(targetQuery));
-				let $1 = $.derived(() => `Filter ${title()}`);
+				let $1 = $.derived(() => formatMessage(messages().transfer.filter, { name: title() ?? "" }));
+				let $2 = $.derived(() => formatMessage(messages().transfer.filter, { name: title() ?? "" }));
 				Input(node_1, {
 					size: "sm",
 					get value() {
 						return $.get($0);
 					},
-					placeholder: "Filter…",
-					get "aria-label"() {
+					get placeholder() {
 						return $.get($1);
 					},
+					get "aria-label"() {
+						return $.get($2);
+					},
 					oninput: (event) => {
 						const query = event.currentTarget.value;
 						if (side() === "source") $.set(sourceQuery, query, true);
@@ -87,7 +90,7 @@ function Transfer$1($$anchor, $$props) {
 							},
 							onCheckedChange: () => toggle(checked(), $.get(item).value),
 							children: ($$anchor, $$slotProps) => {
-								var fragment_2 = root_3();
+								var fragment_2 = root_2();
 								var node_5 = $.first_child(fragment_2);
 								$.component(node_5, () => Checkbox.Control, ($$anchor, ArkCheckbox_Control) => {
 									ArkCheckbox_Control($$anchor, {
@@ -97,8 +100,7 @@ function Transfer$1($$anchor, $$props) {
 											$.component(node_6, () => Checkbox.Indicator, ($$anchor, ArkCheckbox_Indicator) => {
 												ArkCheckbox_Indicator($$anchor, {
 													children: ($$anchor, $$slotProps) => {
-														var svg = root_2();
-														$.append($$anchor, svg);
+														InternalIcon($$anchor, { name: "check" });
 													},
 													$$slots: { default: true }
 												});
@@ -150,6 +152,7 @@ function Transfer$1($$anchor, $$props) {
 	};
 	injectComponentStyle("transfer");
 	let value = $.prop($$props, "value", 31, () => $.proxy([])), titles = $.prop($$props, "titles", 19, () => ["Source", "Target"]), searchable = $.prop($$props, "searchable", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	let checkedSource = $.proxy(/* @__PURE__ */ new Set());
 	let checkedTarget = $.proxy(/* @__PURE__ */ new Set());
 	let sourceQuery = $.state("");
@@ -171,7 +174,7 @@ function Transfer$1($$anchor, $$props) {
 		moving.clear();
 		value(next);
 	}
-	var div_4 = root_7();
+	var div_4 = root_4();
 	$.attribute_effect(div_4, () => ({
 		...rest,
 		"data-scope": "transfer",
@@ -183,6 +186,7 @@ function Transfer$1($$anchor, $$props) {
 	var node_10 = $.child(div_5);
 	{
 		let $0 = $.derived(() => checkedSource.size === 0 || disabled());
+		let $1 = $.derived(() => messages().transfer.moveRight);
 		Button(node_10, {
 			variant: "outline",
 			size: "sm",
@@ -190,11 +194,12 @@ function Transfer$1($$anchor, $$props) {
 			get disabled() {
 				return $.get($0);
 			},
-			"aria-label": "Move right",
+			get "aria-label"() {
+				return $.get($1);
+			},
 			onclick: () => move(true),
 			children: ($$anchor, $$slotProps) => {
-				var svg_1 = root_5();
-				$.append($$anchor, svg_1);
+				InternalIcon($$anchor, { name: "arrow-right" });
 			},
 			$$slots: { default: true }
 		});
@@ -202,6 +207,7 @@ function Transfer$1($$anchor, $$props) {
 	var node_11 = $.sibling(node_10, 2);
 	{
 		let $0 = $.derived(() => checkedTarget.size === 0 || disabled());
+		let $1 = $.derived(() => messages().transfer.moveLeft);
 		Button(node_11, {
 			variant: "outline",
 			size: "sm",
@@ -209,11 +215,12 @@ function Transfer$1($$anchor, $$props) {
 			get disabled() {
 				return $.get($0);
 			},
-			"aria-label": "Move left",
+			get "aria-label"() {
+				return $.get($1);
+			},
 			onclick: () => move(false),
 			children: ($$anchor, $$slotProps) => {
-				var svg_2 = root_6();
-				$.append($$anchor, svg_2);
+				InternalIcon($$anchor, { name: "arrow-left" });
 			},
 			$$slots: { default: true }
 		});
@@ -229,7 +236,7 @@ function Transfer$1($$anchor, $$props) {
 /** Two ledgers and a crossing: items sit in the source column until
 * the reader checks them and walks them across — and back, the same
 * way. */
-const Transfer = Transfer$1;
+const Transfer = withSelfRoot(Transfer$1);
 injectComponentStyle("checkbox");
 //#endregion
 export { Transfer as t };

package/dist/{tree-select-BSf4a_En.mjs → tree-select-BEK7cdxE.mjs}

@@ -1,3 +1,6 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { t as Input } from "./Input-CZhcEeFU.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
@@ -27,18 +30,17 @@ const row = ($$anchor, node = $.noop, indexPath = $.noop) => {
 					$.component(node_3, () => TreeView.Branch, ($$anchor, ArkTreeView_Branch) => {
 						ArkTreeView_Branch($$anchor, {
 							children: ($$anchor, $$slotProps) => {
-								var fragment_3 = root_1();
+								var fragment_3 = root();
 								var node_4 = $.first_child(fragment_3);
 								$.component(node_4, () => TreeView.BranchControl, ($$anchor, ArkTreeView_BranchControl) => {
 									ArkTreeView_BranchControl($$anchor, {
 										children: ($$anchor, $$slotProps) => {
-											var fragment_4 = root_1();
+											var fragment_4 = root();
 											var node_5 = $.first_child(fragment_4);
 											$.component(node_5, () => TreeView.BranchIndicator, ($$anchor, ArkTreeView_BranchIndicator) => {
 												ArkTreeView_BranchIndicator($$anchor, {
 													children: ($$anchor, $$slotProps) => {
-														var svg = root();
-														$.append($$anchor, svg);
+														InternalIcon($$anchor, { name: "chevron-right" });
 													},
 													$$slots: { default: true }
 												});
@@ -64,8 +66,8 @@ const row = ($$anchor, node = $.noop, indexPath = $.noop) => {
 								$.component(node_7, () => TreeView.BranchContent, ($$anchor, ArkTreeView_BranchContent) => {
 									ArkTreeView_BranchContent($$anchor, {
 										children: ($$anchor, $$slotProps) => {
-											var fragment_6 = root_1();
-											var node_8 = $.first_child(fragment_6);
+											var fragment_7 = root();
+											var node_8 = $.first_child(fragment_7);
 											$.component(node_8, () => TreeView.BranchIndentGuide, ($$anchor, ArkTreeView_BranchIndentGuide) => {
 												ArkTreeView_BranchIndentGuide($$anchor, {});
 											});
@@ -76,7 +78,7 @@ const row = ($$anchor, node = $.noop, indexPath = $.noop) => {
 													row($$anchor, () => $.get(child), () => $.get($0));
 												}
 											});
-											$.append($$anchor, fragment_6);
+											$.append($$anchor, fragment_7);
 										},
 										$$slots: { default: true }
 									});
@@ -89,38 +91,30 @@ const row = ($$anchor, node = $.noop, indexPath = $.noop) => {
 					$.append($$anchor, fragment_2);
 				};
 				var alternate = ($$anchor) => {
-					var fragment_8 = $.comment();
-					var node_10 = $.first_child(fragment_8);
-					{
-						const asChild = ($$anchor, props = $.noop) => {
-							var span = root_2();
-							$.attribute_effect(span, ($0) => ({
-								...$0,
-								style: "display: flex; inline-size: 100%"
-							}), [() => props()()]);
-							var node_11 = $.child(span);
-							$.component(node_11, () => TreeView.ItemText, ($$anchor, ArkTreeView_ItemText) => {
-								ArkTreeView_ItemText($$anchor, {
-									children: ($$anchor, $$slotProps) => {
-										$.next();
-										var text_1 = $.text();
-										$.template_effect(() => $.set_text(text_1, node().label));
-										$.append($$anchor, text_1);
-									},
-									$$slots: { default: true }
+					var fragment_9 = $.comment();
+					var node_10 = $.first_child(fragment_9);
+					$.component(node_10, () => TreeView.Item, ($$anchor, ArkTreeView_Item) => {
+						ArkTreeView_Item($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								var fragment_10 = $.comment();
+								var node_11 = $.first_child(fragment_10);
+								$.component(node_11, () => TreeView.ItemText, ($$anchor, ArkTreeView_ItemText) => {
+									ArkTreeView_ItemText($$anchor, {
+										children: ($$anchor, $$slotProps) => {
+											$.next();
+											var text_1 = $.text();
+											$.template_effect(() => $.set_text(text_1, node().label));
+											$.append($$anchor, text_1);
+										},
+										$$slots: { default: true }
+									});
 								});
-							});
-							$.reset(span);
-							$.append($$anchor, span);
-						};
-						$.component(node_10, () => TreeView.Item, ($$anchor, ArkTreeView_Item) => {
-							ArkTreeView_Item($$anchor, {
-								asChild,
-								$$slots: { asChild: true }
-							});
+								$.append($$anchor, fragment_10);
+							},
+							$$slots: { default: true }
 						});
-					}
-					$.append($$anchor, fragment_8);
+					});
+					$.append($$anchor, fragment_9);
 				};
 				$.if(node_2, ($$render) => {
 					if (node().children) $$render(consequent);
@@ -144,17 +138,16 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"size",
 	"disabled"
 ]);
-var root = $.from_svg(`<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"></path></svg>`);
-var root_1 = $.from_html(`<!> <!>`, 1);
-var root_2 = $.from_html(`<span><!></span>`);
-var root_3 = $.from_html(`<button> <span data-part="chevron" aria-hidden="true"><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"></path></svg></span></button>`);
-var root_4 = $.from_html(`<div data-scope="tree-select" data-part="search"><!></div>`);
-var root_5 = $.from_html(`<p data-scope="tree-select" data-part="empty">Nothing matches</p>`);
-var root_6 = $.from_html(`<!> <div data-scope="tree-select" data-part="body"><!></div>`, 1);
+var root = $.from_html(`<!> <!>`, 1);
+var root_1 = $.from_html(`<button> <span data-part="chevron" aria-hidden="true"><!></span></button>`);
+var root_2 = $.from_html(`<div data-scope="tree-select" data-part="search"><!></div>`);
+var root_3 = $.from_html(`<p data-scope="tree-select" data-part="empty">Nothing matches</p>`);
+var root_4 = $.from_html(`<!> <div data-scope="tree-select" data-part="body"><!></div>`, 1);
 function TreeSelect$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("tree-select");
 	let value = $.prop($$props, "value", 15), placeholder = $.prop($$props, "placeholder", 3, "Select…"), filterable = $.prop($$props, "filterable", 3, false), size = $.prop($$props, "size", 3, "md"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	let open = $.state(false);
 	let query = $.state("");
 	const filterFns = useFilter({ sensitivity: "base" });
@@ -201,8 +194,8 @@ function TreeSelect$1($$anchor, $$props) {
 		value(selected);
 		$.set(open, false);
 	}
-	var fragment_10 = $.comment();
-	var node_12 = $.first_child(fragment_10);
+	var fragment_12 = $.comment();
+	var node_12 = $.first_child(fragment_12);
 	$.component(node_12, () => Popover.Root, ($$anchor, ArkPopover_Root) => {
 		ArkPopover_Root($$anchor, {
 			get open() {
@@ -217,11 +210,11 @@ function TreeSelect$1($$anchor, $$props) {
 				if (!details.open) $.set(query, "");
 			},
 			children: ($$anchor, $$slotProps) => {
-				var fragment_11 = root_1();
-				var node_13 = $.first_child(fragment_11);
+				var fragment_13 = root();
+				var node_13 = $.first_child(fragment_13);
 				{
 					const asChild = ($$anchor, props = $.noop) => {
-						var button = root_3();
+						var button = root_1();
 						$.attribute_effect(button, ($0) => ({
 							...$0,
 							...rest,
@@ -234,7 +227,10 @@ function TreeSelect$1($$anchor, $$props) {
 							disabled: disabled()
 						}), [() => props()()]);
 						var text_2 = $.child(button);
-						$.next();
+						var span = $.sibling(text_2);
+						var node_14 = $.child(span);
+						InternalIcon(node_14, { name: "chevron-right" });
+						$.reset(span);
 						$.reset(button);
 						$.template_effect(() => $.set_text(text_2, `${$.get(label) ?? placeholder() ?? ""} `));
 						$.append($$anchor, button);
@@ -249,17 +245,17 @@ function TreeSelect$1($$anchor, $$props) {
 						});
 					});
 				}
-				var node_14 = $.sibling(node_13, 2);
-				Portal(node_14, {
+				var node_15 = $.sibling(node_13, 2);
+				Portal(node_15, {
 					children: ($$anchor, $$slotProps) => {
-						var fragment_12 = $.comment();
-						var node_15 = $.first_child(fragment_12);
-						$.component(node_15, () => Popover.Positioner, ($$anchor, ArkPopover_Positioner) => {
+						var fragment_14 = $.comment();
+						var node_16 = $.first_child(fragment_14);
+						$.component(node_16, () => Popover.Positioner, ($$anchor, ArkPopover_Positioner) => {
 							ArkPopover_Positioner($$anchor, {
 								children: ($$anchor, $$slotProps) => {
-									var fragment_13 = $.comment();
-									var node_16 = $.first_child(fragment_13);
-									$.component(node_16, () => Popover.Content, ($$anchor, ArkPopover_Content) => {
+									var fragment_15 = $.comment();
+									var node_17 = $.first_child(fragment_15);
+									$.component(node_17, () => Popover.Content, ($$anchor, ArkPopover_Content) => {
 										ArkPopover_Content($$anchor, {
 											"data-scope": "tree-select",
 											"data-part": "content",
@@ -267,42 +263,50 @@ function TreeSelect$1($$anchor, $$props) {
 												return size();
 											},
 											children: ($$anchor, $$slotProps) => {
-												var fragment_14 = root_6();
-												var node_17 = $.first_child(fragment_14);
+												var fragment_16 = root_4();
+												var node_18 = $.first_child(fragment_16);
 												var consequent_1 = ($$anchor) => {
-													var div = root_4();
-													var node_18 = $.child(div);
-													Input(node_18, {
-														size: "sm",
-														placeholder: "Filter…",
-														"aria-label": "Filter options",
-														get value() {
-															return $.get(query);
-														},
-														set value($$value) {
-															$.set(query, $$value, true);
-														}
-													});
+													var div = root_2();
+													var node_19 = $.child(div);
+													{
+														let $0 = $.derived(() => messages().select.filter);
+														let $1 = $.derived(() => messages().select.filter);
+														Input(node_19, {
+															size: "sm",
+															get placeholder() {
+																return $.get($0);
+															},
+															get "aria-label"() {
+																return $.get($1);
+															},
+															get value() {
+																return $.get(query);
+															},
+															set value($$value) {
+																$.set(query, $$value, true);
+															}
+														});
+													}
 													$.reset(div);
 													$.append($$anchor, div);
 												};
-												$.if(node_17, ($$render) => {
+												$.if(node_18, ($$render) => {
 													if (filterable()) $$render(consequent_1);
 												});
-												var div_1 = $.sibling(node_17, 2);
-												var node_19 = $.child(div_1);
+												var div_1 = $.sibling(node_18, 2);
+												var node_20 = $.child(div_1);
 												var consequent_2 = ($$anchor) => {
-													var p = root_5();
+													var p = root_3();
 													$.append($$anchor, p);
 												};
 												var alternate_1 = ($$anchor) => {
-													var fragment_15 = $.comment();
-													var node_20 = $.first_child(fragment_15);
+													var fragment_17 = $.comment();
+													var node_21 = $.first_child(fragment_17);
 													{
 														let $0 = $.derived(() => value() ? [value()] : []);
 														let $1 = $.derived(() => $.get(filtering) ? $.get(expandedWhileFiltering) : void 0);
 														let $2 = $.derived(() => $.get(filtering) ? void 0 : $.get(firstLevel));
-														$.component(node_20, () => TreeView.Root, ($$anchor, ArkTreeView_Root) => {
+														$.component(node_21, () => TreeView.Root, ($$anchor, ArkTreeView_Root) => {
 															ArkTreeView_Root($$anchor, {
 																get collection() {
 																	return $.get(visibleCollection);
@@ -319,61 +323,61 @@ function TreeSelect$1($$anchor, $$props) {
 																},
 																onSelectionChange: pick,
 																children: ($$anchor, $$slotProps) => {
-																	var fragment_16 = $.comment();
-																	var node_21 = $.first_child(fragment_16);
-																	$.component(node_21, () => TreeView.Tree, ($$anchor, ArkTreeView_Tree) => {
+																	var fragment_18 = $.comment();
+																	var node_22 = $.first_child(fragment_18);
+																	$.component(node_22, () => TreeView.Tree, ($$anchor, ArkTreeView_Tree) => {
 																		ArkTreeView_Tree($$anchor, {
 																			children: ($$anchor, $$slotProps) => {
-																				var fragment_17 = $.comment();
-																				var node_22 = $.first_child(fragment_17);
-																				$.each(node_22, 19, () => $.get(visibleCollection).rootNode.children ?? [], (node) => node.value, ($$anchor, node, index) => {
+																				var fragment_19 = $.comment();
+																				var node_23 = $.first_child(fragment_19);
+																				$.each(node_23, 19, () => $.get(visibleCollection).rootNode.children ?? [], (node) => node.value, ($$anchor, node, index) => {
 																					row($$anchor, () => $.get(node), () => [$.get(index)]);
 																				});
-																				$.append($$anchor, fragment_17);
+																				$.append($$anchor, fragment_19);
 																			},
 																			$$slots: { default: true }
 																		});
 																	});
-																	$.append($$anchor, fragment_16);
+																	$.append($$anchor, fragment_18);
 																},
 																$$slots: { default: true }
 															});
 														});
 													}
-													$.append($$anchor, fragment_15);
+													$.append($$anchor, fragment_17);
 												};
-												$.if(node_19, ($$render) => {
+												$.if(node_20, ($$render) => {
 													if (($.get(visibleCollection).rootNode.children ?? []).length === 0) $$render(consequent_2);
 													else $$render(alternate_1, -1);
 												});
 												$.reset(div_1);
-												$.append($$anchor, fragment_14);
+												$.append($$anchor, fragment_16);
 											},
 											$$slots: { default: true }
 										});
 									});
-									$.append($$anchor, fragment_13);
+									$.append($$anchor, fragment_15);
 								},
 								$$slots: { default: true }
 							});
 						});
-						$.append($$anchor, fragment_12);
+						$.append($$anchor, fragment_14);
 					},
 					$$slots: { default: true }
 				});
-				$.append($$anchor, fragment_11);
+				$.append($$anchor, fragment_13);
 			},
 			$$slots: { default: true }
 		});
 	});
-	$.append($$anchor, fragment_10);
+	$.append($$anchor, fragment_12);
 	$.pop();
 }
 //#endregion
 //#region src/components/tree-select/index.ts
 /** A tree behind a field: the control reads like an input, the vessel
 * below walks the hierarchy, and one leaf click closes the deal. */
-const TreeSelect = TreeSelect$1;
+const TreeSelect = withSelfRoot(TreeSelect$1);
 injectComponentStyle("tree-view");
 //#endregion
 export { TreeSelect as t };

package/dist/{typography-Cygr9XaD.mjs → typography-Bl6MxaeI.mjs}

@@ -156,6 +156,7 @@ function TypographyMuted($$anchor, $$props) {
 * heading ride the song-serif, the rest ride the hei. Nothing here is
 * decorative — hierarchy is size, weight, and space. */
 const Typography = Object.assign(TypographyDisplay, {
+	Root: TypographyDisplay,
 	Display: TypographyDisplay,
 	Heading: TypographyHeading,
 	Lead: TypographyLead,