@bysages/svelte 0.3.0 → 0.3.1

package/dist/{split-button-CGjPB9DQ.mjs → split-button-DnmVc_J0.mjs}

@@ -1,4 +1,5 @@
 import { t as Button } from "./button-BCcX7lHq.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";
@@ -25,6 +26,7 @@ function SplitButton$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("split-button");
 	let items = $.prop($$props, "items", 19, () => []), variant = $.prop($$props, "variant", 3, "solid"), tone = $.prop($$props, "tone", 3, "ink"), size = $.prop($$props, "size", 3, "md"), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	var div = root_2();
 	$.attribute_effect(div, () => ({
 		...rest,
@@ -64,16 +66,16 @@ function SplitButton$1($$anchor, $$props) {
 				{
 					const asChild = ($$anchor, props = $.noop) => {
 						var button = root();
-						$.attribute_effect(button, ($0) => ({
+						$.attribute_effect(button, ($0, $1) => ({
 							...$0,
 							disabled: disabled(),
-							"aria-label": "More actions",
+							"aria-label": $1,
 							"data-variant": variant(),
 							"data-tone": tone(),
 							"data-size": size(),
 							"data-square": "true",
 							"data-motion": "ink-ripple lit"
-						}), [() => props()()]);
+						}), [() => props()(), () => messages().more.actions]);
 						$.append($$anchor, button);
 					};
 					$.component(node_2, () => Menu.Trigger, ($$anchor, ArkMenu_Trigger) => {

package/dist/{table-BnNK4_su.mjs → table-BsdqRuvj.mjs}

@@ -1,5 +1,6 @@
+import { n as useComponentMessages, t as formatMessage } from "./messages-DNzA55pH.mjs";
 import { Pagination } from "./components/pagination/index.mjs";
-import { n as Select$1 } from "./select-rkY0qJKI.mjs";
+import { n as Select$1 } from "./select-8ume4i2e.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -85,13 +86,13 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"onRowReorder",
 	"onColumnReorder"
 ]);
-var root = $.from_html(`<input type="checkbox" aria-label="Select row"/>`);
+var root = $.from_html(`<input type="checkbox"/>`);
 var root_1 = $.from_html(`<div data-scope="table" data-part="cell-main"><button type="button" data-scope="table" data-part="expander"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"></path></svg></button> <!></div>`);
 var root_2 = $.from_html(`<div><!></div>`);
 var root_3 = $.from_html(`<div role="row" data-scope="table" data-part="row"></div>`);
-var root_4 = $.from_html(`<div data-scope="table" data-part="toolbar"><input type="search" data-scope="table" data-part="global-filter" aria-label="Filter all columns"/></div>`);
-var root_5 = $.from_html(`<div><input type="checkbox" aria-label="Select all rows"/></div>`);
-var root_6 = $.from_html(`<input type="text" data-scope="table" data-part="header-filter" placeholder="Filter"/>`);
+var root_4 = $.from_html(`<div data-scope="table" data-part="toolbar"><input type="search" data-scope="table" data-part="global-filter"/></div>`);
+var root_5 = $.from_html(`<div><input type="checkbox"/></div>`);
+var root_6 = $.from_html(`<input type="text" data-scope="table" data-part="header-filter"/>`);
 var root_7 = $.from_html(`<div><!> <!></div>`);
 var root_8 = $.from_html(`<div data-scope="table" data-part="empty"> </div>`);
 var root_9 = $.from_html(`<div role="rowgroup" data-scope="table" data-part="footer"></div>`);
@@ -129,7 +130,10 @@ function DataTable$1($$anchor, $$props) {
 					var input = root();
 					$.remove_input_defaults(input);
 					input.indeterminate = false;
-					$.template_effect(($0) => $.set_checked(input, $0), [() => row().getIsSelected()]);
+					$.template_effect(($0, $1) => {
+						$.set_checked(input, $0);
+						$.set_attribute(input, "aria-label", $1);
+					}, [() => row().getIsSelected(), () => messages().table.selectRow]);
 					$.delegated("change", input, () => row().toggleSelected(!row().getIsSelected()));
 					$.append($$anchor, input);
 				};
@@ -151,7 +155,7 @@ function DataTable$1($$anchor, $$props) {
 						() => String(row().depth),
 						() => row().getIsExpanded() || void 0,
 						() => !row().getCanExpand() || void 0,
-						() => row().getIsExpanded() ? "Collapse row" : "Expand row"
+						() => row().getIsExpanded() ? messages().table.collapseRow : messages().table.expandRow
 					]);
 					$.delegated("click", button, () => row().toggleExpanded());
 					$.append($$anchor, div_2);
@@ -199,7 +203,9 @@ function DataTable$1($$anchor, $$props) {
 		10,
 		20,
 		50
-	]), stickyFooter = $.prop($$props, "stickyFooter", 3, false), globalFilterPlaceholder = $.prop($$props, "globalFilterPlaceholder", 3, "Filter rows"), emptyText = $.prop($$props, "emptyText", 3, "No rows"), reorderable = $.prop($$props, "reorderable", 3, false), rest = $.rest_props($$props, rest_excludes);
+	]), stickyFooter = $.prop($$props, "stickyFooter", 3, false), reorderable = $.prop($$props, "reorderable", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
+	const globalFilterText = $.derived(() => $$props.globalFilterPlaceholder ?? messages().table.filterAll);
 	const SELECT_COL_ID = "__select";
 	const SELECT_COL_WIDTH = 48;
 	if (virtual() && $$props.merge) console.warn("[DataTable] `virtual` and `merge` are mutually exclusive; merge wins.");
@@ -526,10 +532,11 @@ function DataTable$1($$anchor, $$props) {
 		var input_1 = $.child(div_4);
 		$.remove_input_defaults(input_1);
 		$.reset(div_4);
-		$.template_effect(($0) => {
-			$.set_attribute(input_1, "placeholder", globalFilterPlaceholder());
-			$.set_value(input_1, $0);
-		}, [() => table.atoms.globalFilter.get() ?? ""]);
+		$.template_effect(($0, $1) => {
+			$.set_attribute(input_1, "aria-label", $0);
+			$.set_attribute(input_1, "placeholder", $.get(globalFilterText));
+			$.set_value(input_1, $1);
+		}, [() => messages().table.filterAll, () => table.atoms.globalFilter.get() ?? ""]);
 		$.delegated("input", input_1, (e) => table.setGlobalFilter(e.currentTarget.value));
 		$.append($$anchor, div_4);
 	};
@@ -537,6 +544,7 @@ function DataTable$1($$anchor, $$props) {
 		if (filterable() && showToolbar()) $$render(consequent_3);
 	});
 	var div_5 = $.sibling(node_4, 2);
+	$.set_attribute(div_5, "tabindex", 0);
 	var div_6 = $.child(div_5);
 	let styles_1;
 	var div_7 = $.child(div_6);
@@ -559,10 +567,11 @@ function DataTable$1($$anchor, $$props) {
 				var input_2 = $.child(div_9);
 				$.remove_input_defaults(input_2);
 				$.reset(div_9);
-				$.template_effect(($0) => {
+				$.template_effect(($0, $1) => {
 					$.set_checked(input_2, $.get(all));
 					input_2.indeterminate = $0;
-				}, [() => table.getIsSomeRowsSelected() && !$.get(all)]);
+					$.set_attribute(input_2, "aria-label", $1);
+				}, [() => table.getIsSomeRowsSelected() && !$.get(all), () => messages().table.selectAllRows]);
 				$.delegated("change", input_2, () => table.toggleAllRowsSelected(!$.get(all)));
 				$.append($$anchor, div_9);
 			};
@@ -606,10 +615,15 @@ function DataTable$1($$anchor, $$props) {
 					var input_3 = root_6();
 					$.remove_input_defaults(input_3);
 					$.set_attribute(input_3, "draggable", false);
-					$.template_effect(($0) => {
-						$.set_attribute(input_3, "aria-label", `Filter ${$.get(column).id}`);
-						$.set_value(input_3, $0);
-					}, [() => $.get(column).getFilterValue() ?? ""]);
+					$.template_effect(($0, $1, $2) => {
+						$.set_attribute(input_3, "aria-label", $0);
+						$.set_value(input_3, $1);
+						$.set_attribute(input_3, "placeholder", $2);
+					}, [
+						() => formatMessage(messages().table.filterColumn, { name: $.get(column).id }),
+						() => $.get(column).getFilterValue() ?? "",
+						() => messages().command.filter
+					]);
 					$.delegated("click", input_3, (e) => e.stopPropagation());
 					$.event("dragstart", input_3, (e) => e.stopPropagation());
 					$.delegated("input", input_3, (e) => $.get(column).setFilterValue(e.currentTarget.value));
@@ -658,7 +672,7 @@ function DataTable$1($$anchor, $$props) {
 	var consequent_8 = ($$anchor) => {
 		var div_12 = root_8();
 		var text = $.only_child(div_12, true);
-		$.template_effect(() => $.set_text(text, emptyText()));
+		$.template_effect(($0) => $.set_text(text, $0), [() => $$props.emptyText ?? messages().table.empty]);
 		$.append($$anchor, div_12);
 	};
 	$.if(node_11, ($$render) => {
@@ -673,7 +687,7 @@ function DataTable$1($$anchor, $$props) {
 			$.each(div_14, 21, () => $.get(group).headers, (header) => header.column.id, ($$anchor, header) => {
 				var div_15 = root_2();
 				$.attribute_effect(div_15, ($0, $1) => ({
-					role: "columnheader",
+					role: "cell",
 					"data-scope": "table",
 					"data-part": "footer-cell",
 					"data-numeric": $.get(header).column.columnDef.meta?.numeric ? "" : void 0,
@@ -708,7 +722,7 @@ function DataTable$1($$anchor, $$props) {
 	var consequent_12 = ($$anchor) => {
 		const pagination = $.derived(() => table.atoms.pagination.get());
 		const sizeItems = $.derived(() => createListCollection({ items: pageSizeOptions().map((size) => ({
-			label: `${size} / page`,
+			label: formatMessage(messages().table.perPage, { size }),
 			value: String(size)
 		})) }));
 		var div_16 = root_14();
@@ -736,30 +750,35 @@ function DataTable$1($$anchor, $$props) {
 								children: ($$anchor, $$slotProps) => {
 									var fragment_10 = $.comment();
 									var node_17 = $.first_child(fragment_10);
-									$.component(node_17, () => Select$1.Trigger, ($$anchor, ArkSelect_Trigger) => {
-										ArkSelect_Trigger($$anchor, {
-											"aria-label": "Rows per page",
-											children: ($$anchor, $$slotProps) => {
-												var fragment_11 = root_11();
-												var node_18 = $.first_child(fragment_11);
-												$.component(node_18, () => Select$1.ValueText, ($$anchor, ArkSelect_ValueText) => {
-													ArkSelect_ValueText($$anchor, {});
-												});
-												var node_19 = $.sibling(node_18, 2);
-												$.component(node_19, () => Select$1.Indicator, ($$anchor, ArkSelect_Indicator) => {
-													ArkSelect_Indicator($$anchor, {
-														children: ($$anchor, $$slotProps) => {
-															var svg = root_10();
-															$.append($$anchor, svg);
-														},
-														$$slots: { default: true }
+									{
+										let $0 = $.derived(() => messages().table.rowsPerPage);
+										$.component(node_17, () => Select$1.Trigger, ($$anchor, ArkSelect_Trigger) => {
+											ArkSelect_Trigger($$anchor, {
+												get "aria-label"() {
+													return $.get($0);
+												},
+												children: ($$anchor, $$slotProps) => {
+													var fragment_11 = root_11();
+													var node_18 = $.first_child(fragment_11);
+													$.component(node_18, () => Select$1.ValueText, ($$anchor, ArkSelect_ValueText) => {
+														ArkSelect_ValueText($$anchor, {});
 													});
-												});
-												$.append($$anchor, fragment_11);
-											},
-											$$slots: { default: true }
+													var node_19 = $.sibling(node_18, 2);
+													$.component(node_19, () => Select$1.Indicator, ($$anchor, ArkSelect_Indicator) => {
+														ArkSelect_Indicator($$anchor, {
+															children: ($$anchor, $$slotProps) => {
+																var svg = root_10();
+																$.append($$anchor, svg);
+															},
+															$$slots: { default: true }
+														});
+													});
+													$.append($$anchor, fragment_11);
+												},
+												$$slots: { default: true }
+											});
 										});
-									});
+									}
 									$.append($$anchor, fragment_10);
 								},
 								$$slots: { default: true }
@@ -941,7 +960,7 @@ function DataTable$1($$anchor, $$props) {
 		}
 		$.reset(div_17);
 		$.reset(div_16);
-		$.template_effect(($0) => $.set_text(text_1, $0), [() => `${table.getRowCount()} rows`]);
+		$.template_effect(($0) => $.set_text(text_1, $0), [() => formatMessage(messages().table.rowsCount, { count: table.getRowCount() })]);
 		$.append($$anchor, div_16);
 	};
 	$.if(node_14, ($$render) => {

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

@@ -1,3 +1,4 @@
+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 +19,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 +56,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();

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

@@ -1,4 +1,5 @@
 import { t as Button } from "./button-BCcX7lHq.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";
@@ -39,16 +40,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);
@@ -150,6 +154,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("");
@@ -183,6 +188,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,7 +196,9 @@ 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();
@@ -202,6 +210,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,7 +218,9 @@ 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();

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

@@ -1,3 +1,4 @@
+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";
@@ -91,35 +92,27 @@ const row = ($$anchor, node = $.noop, indexPath = $.noop) => {
 				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 }
+					$.component(node_10, () => TreeView.Item, ($$anchor, ArkTreeView_Item) => {
+						ArkTreeView_Item($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								var fragment_9 = $.comment();
+								var node_11 = $.first_child(fragment_9);
+								$.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_9);
+							},
+							$$slots: { default: true }
 						});
-					}
+					});
 					$.append($$anchor, fragment_8);
 				};
 				$.if(node_2, ($$render) => {
@@ -146,15 +139,15 @@ var rest_excludes = /* @__PURE__ */ new Set([
 ]);
 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_2 = $.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_3 = $.from_html(`<div data-scope="tree-select" data-part="search"><!></div>`);
+var root_4 = $.from_html(`<p data-scope="tree-select" data-part="empty">Nothing matches</p>`);
+var root_5 = $.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_11 = $.comment();
+	var node_12 = $.first_child(fragment_11);
 	$.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_12 = root_1();
+				var node_13 = $.first_child(fragment_12);
 				{
 					const asChild = ($$anchor, props = $.noop) => {
-						var button = root_3();
+						var button = root_2();
 						$.attribute_effect(button, ($0) => ({
 							...$0,
 							...rest,
@@ -252,13 +245,13 @@ function TreeSelect$1($$anchor, $$props) {
 				var node_14 = $.sibling(node_13, 2);
 				Portal(node_14, {
 					children: ($$anchor, $$slotProps) => {
-						var fragment_12 = $.comment();
-						var node_15 = $.first_child(fragment_12);
+						var fragment_13 = $.comment();
+						var node_15 = $.first_child(fragment_13);
 						$.component(node_15, () => Popover.Positioner, ($$anchor, ArkPopover_Positioner) => {
 							ArkPopover_Positioner($$anchor, {
 								children: ($$anchor, $$slotProps) => {
-									var fragment_13 = $.comment();
-									var node_16 = $.first_child(fragment_13);
+									var fragment_14 = $.comment();
+									var node_16 = $.first_child(fragment_14);
 									$.component(node_16, () => Popover.Content, ($$anchor, ArkPopover_Content) => {
 										ArkPopover_Content($$anchor, {
 											"data-scope": "tree-select",
@@ -267,22 +260,30 @@ function TreeSelect$1($$anchor, $$props) {
 												return size();
 											},
 											children: ($$anchor, $$slotProps) => {
-												var fragment_14 = root_6();
-												var node_17 = $.first_child(fragment_14);
+												var fragment_15 = root_5();
+												var node_17 = $.first_child(fragment_15);
 												var consequent_1 = ($$anchor) => {
-													var div = root_4();
+													var div = root_3();
 													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);
-														}
-													});
+													{
+														let $0 = $.derived(() => messages().select.filter);
+														let $1 = $.derived(() => messages().select.filter);
+														Input(node_18, {
+															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);
 												};
@@ -292,12 +293,12 @@ function TreeSelect$1($$anchor, $$props) {
 												var div_1 = $.sibling(node_17, 2);
 												var node_19 = $.child(div_1);
 												var consequent_2 = ($$anchor) => {
-													var p = root_5();
+													var p = root_4();
 													$.append($$anchor, p);
 												};
 												var alternate_1 = ($$anchor) => {
-													var fragment_15 = $.comment();
-													var node_20 = $.first_child(fragment_15);
+													var fragment_16 = $.comment();
+													var node_20 = $.first_child(fragment_16);
 													{
 														let $0 = $.derived(() => value() ? [value()] : []);
 														let $1 = $.derived(() => $.get(filtering) ? $.get(expandedWhileFiltering) : void 0);
@@ -319,54 +320,54 @@ function TreeSelect$1($$anchor, $$props) {
 																},
 																onSelectionChange: pick,
 																children: ($$anchor, $$slotProps) => {
-																	var fragment_16 = $.comment();
-																	var node_21 = $.first_child(fragment_16);
+																	var fragment_17 = $.comment();
+																	var node_21 = $.first_child(fragment_17);
 																	$.component(node_21, () => TreeView.Tree, ($$anchor, ArkTreeView_Tree) => {
 																		ArkTreeView_Tree($$anchor, {
 																			children: ($$anchor, $$slotProps) => {
-																				var fragment_17 = $.comment();
-																				var node_22 = $.first_child(fragment_17);
+																				var fragment_18 = $.comment();
+																				var node_22 = $.first_child(fragment_18);
 																				$.each(node_22, 19, () => $.get(visibleCollection).rootNode.children ?? [], (node) => node.value, ($$anchor, node, index) => {
 																					row($$anchor, () => $.get(node), () => [$.get(index)]);
 																				});
-																				$.append($$anchor, fragment_17);
+																				$.append($$anchor, fragment_18);
 																			},
 																			$$slots: { default: true }
 																		});
 																	});
-																	$.append($$anchor, fragment_16);
+																	$.append($$anchor, fragment_17);
 																},
 																$$slots: { default: true }
 															});
 														});
 													}
-													$.append($$anchor, fragment_15);
+													$.append($$anchor, fragment_16);
 												};
 												$.if(node_19, ($$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_15);
 											},
 											$$slots: { default: true }
 										});
 									});
-									$.append($$anchor, fragment_13);
+									$.append($$anchor, fragment_14);
 								},
 								$$slots: { default: true }
 							});
 						});
-						$.append($$anchor, fragment_12);
+						$.append($$anchor, fragment_13);
 					},
 					$$slots: { default: true }
 				});
-				$.append($$anchor, fragment_11);
+				$.append($$anchor, fragment_12);
 			},
 			$$slots: { default: true }
 		});
 	});
-	$.append($$anchor, fragment_10);
+	$.append($$anchor, fragment_11);
 	$.pop();
 }
 //#endregion

package/dist/{virtual-list-psKQ_NVr.mjs → virtual-list-_10ypBUP.mjs}

@@ -31,6 +31,7 @@ function VirtualList$1($$anchor, $$props) {
 	var div = root_1();
 	$.attribute_effect(div, () => ({
 		...rest,
+		tabindex: 0,
 		"data-scope": "virtual-list",
 		"data-part": "root",
 		style: `block-size: ${$.get(blockHeight) ?? ""}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bysages/svelte",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "By Sages Elements components for Svelte — styled by the paper-and-ink design tokens",
   "keywords": [
     "accessible",
@@ -79,8 +79,8 @@
     "@tanstack/svelte-virtual": "3.13.39",
     "@zag-js/cascade-select": "1.44.0",
     "@zag-js/svelte": "1.44.0",
-    "@bysages/core": "0.3.0",
-    "@bysages/icons": "0.3.0"
+    "@bysages/icons": "0.3.1",
+    "@bysages/core": "0.3.1"
   },
   "devDependencies": {
     "@json-render/core": "0.21.0",