@bysages/svelte 0.3.0 → 0.4.0

package/dist/{data-view-B3TY3rYl.mjs → data-view-B3cJiuVC.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";
@@ -21,6 +23,7 @@ function DataView$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("data-view");
 	let layout = $.prop($$props, "layout", 3, "list"), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	let page = $.state(1);
 	const pageCount = $.derived(() => $$props.pageSize ? Math.max(1, Math.ceil($$props.items.length / $$props.pageSize)) : 1);
 	const visible = $.derived(() => $$props.pageSize ? $$props.items.slice(($.get(page) - 1) * $$props.pageSize, $.get(page) * $$props.pageSize) : $$props.items);
@@ -61,17 +64,22 @@ function DataView$1($$anchor, $$props) {
 				children: ($$anchor, $$slotProps) => {
 					var fragment = root_1();
 					var node_4 = $.first_child(fragment);
-					$.component(node_4, () => Pagination.PrevTrigger, ($$anchor, ArkPagination_PrevTrigger) => {
-						ArkPagination_PrevTrigger($$anchor, {
-							"aria-label": "Previous page",
-							children: ($$anchor, $$slotProps) => {
-								$.next();
-								var text = $.text("‹");
-								$.append($$anchor, text);
-							},
-							$$slots: { default: true }
+					{
+						let $0 = $.derived(() => messages().pagination.previous);
+						$.component(node_4, () => Pagination.PrevTrigger, ($$anchor, ArkPagination_PrevTrigger) => {
+							ArkPagination_PrevTrigger($$anchor, {
+								get "aria-label"() {
+									return $.get($0);
+								},
+								children: ($$anchor, $$slotProps) => {
+									$.next();
+									var text = $.text("‹");
+									$.append($$anchor, text);
+								},
+								$$slots: { default: true }
+							});
 						});
-					});
+					}
 					var node_5 = $.sibling(node_4, 2);
 					{
 						const children = ($$anchor, pagination = $.noop) => {
@@ -131,17 +139,22 @@ function DataView$1($$anchor, $$props) {
 						});
 					}
 					var node_10 = $.sibling(node_5, 2);
-					$.component(node_10, () => Pagination.NextTrigger, ($$anchor, ArkPagination_NextTrigger) => {
-						ArkPagination_NextTrigger($$anchor, {
-							"aria-label": "Next page",
-							children: ($$anchor, $$slotProps) => {
-								$.next();
-								var text_3 = $.text("›");
-								$.append($$anchor, text_3);
-							},
-							$$slots: { default: true }
+					{
+						let $0 = $.derived(() => messages().pagination.next);
+						$.component(node_10, () => Pagination.NextTrigger, ($$anchor, ArkPagination_NextTrigger) => {
+							ArkPagination_NextTrigger($$anchor, {
+								get "aria-label"() {
+									return $.get($0);
+								},
+								children: ($$anchor, $$slotProps) => {
+									$.next();
+									var text_3 = $.text("›");
+									$.append($$anchor, text_3);
+								},
+								$$slots: { default: true }
+							});
 						});
-					});
+					}
 					$.append($$anchor, fragment);
 				},
 				$$slots: { default: true }
@@ -162,6 +175,6 @@ function DataView$1($$anchor, $$props) {
 //#region src/components/data-view/index.ts
 /** One vessel, two layouts: a ledger or a lattice, paged with the
 * pagination family's own parts. */
-const DataView = DataView$1;
+const DataView = withSelfRoot(DataView$1);
 //#endregion
 export { DataView as t };

package/dist/{deferred-content-CO9YsKMQ.mjs → deferred-content-BYDuJ6NQ.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";
@@ -60,6 +61,6 @@ function DeferredContent$1($$anchor, $$props) {
 //#region src/components/deferred-content/index.ts
 /** Content that waits to be worth rendering: the slot mounts when the
 * placeholder approaches the viewport. */
-const DeferredContent = DeferredContent$1;
+const DeferredContent = withSelfRoot(DeferredContent$1);
 //#endregion
 export { DeferredContent as t };

package/dist/{descriptions-DgkA_9B-.mjs → descriptions-BeZtDMzt.mjs}

@@ -1,50 +1,19 @@
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-//#region src/components/descriptions/Descriptions.svelte
-var rest_excludes$3 = /* @__PURE__ */ new Set([
-	"$$slots",
-	"$$events",
-	"$$legacy",
-	"layout",
-	"bordered",
-	"column",
-	"children"
-]);
-var root$3 = $.from_html(`<dl><!></dl>`);
-function Descriptions$1($$anchor, $$props) {
-	$.push($$props, true);
-	injectComponentStyle("descriptions");
-	let layout = $.prop($$props, "layout", 3, "horizontal"), bordered = $.prop($$props, "bordered", 3, false), column = $.prop($$props, "column", 3, 1), rest = $.rest_props($$props, rest_excludes$3);
-	var dl = root$3();
-	$.attribute_effect(dl, ($0) => ({
-		...rest,
-		"data-scope": "descriptions",
-		"data-part": "root",
-		"data-layout": layout(),
-		"data-bordered": bordered() || void 0,
-		[$.STYLE]: { "--bs-desc-columns": $0 }
-	}), [() => String(column())]);
-	var node = $.child(dl);
-	$.snippet(node, () => $$props.children ?? $.noop);
-	$.reset(dl);
-	$.append($$anchor, dl);
-	$.pop();
-}
-//#endregion
 //#region src/components/descriptions/DescriptionsDetail.svelte
-var rest_excludes$2 = /* @__PURE__ */ new Set([
+var rest_excludes$3 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root$2 = $.from_html(`<dd><!></dd>`);
+var root$3 = $.from_html(`<dd><!></dd>`);
 function DescriptionsDetail($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("descriptions");
-	let rest = $.rest_props($$props, rest_excludes$2);
-	var dd = root$2();
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var dd = root$3();
 	$.attribute_effect(dd, () => ({
 		...rest,
 		"data-scope": "descriptions",
@@ -58,19 +27,19 @@ function DescriptionsDetail($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/descriptions/DescriptionsItem.svelte
-var rest_excludes$1 = /* @__PURE__ */ new Set([
+var rest_excludes$2 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"span",
 	"children"
 ]);
-var root$1 = $.from_html(`<div><!></div>`);
+var root$2 = $.from_html(`<div><!></div>`);
 function DescriptionsItem($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("descriptions");
-	let span = $.prop($$props, "span", 3, 1), rest = $.rest_props($$props, rest_excludes$1);
-	var div = root$1();
+	let span = $.prop($$props, "span", 3, 1), rest = $.rest_props($$props, rest_excludes$2);
+	var div = root$2();
 	$.attribute_effect(div, ($0) => ({
 		...rest,
 		"data-scope": "descriptions",
@@ -85,18 +54,18 @@ function DescriptionsItem($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/descriptions/DescriptionsTerm.svelte
-var rest_excludes = /* @__PURE__ */ new Set([
+var rest_excludes$1 = /* @__PURE__ */ new Set([
 	"$$slots",
 	"$$events",
 	"$$legacy",
 	"children"
 ]);
-var root = $.from_html(`<dt><!></dt>`);
+var root$1 = $.from_html(`<dt><!></dt>`);
 function DescriptionsTerm($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("descriptions");
-	let rest = $.rest_props($$props, rest_excludes);
-	var dt = root();
+	let rest = $.rest_props($$props, rest_excludes$1);
+	var dt = root$1();
 	$.attribute_effect(dt, () => ({
 		...rest,
 		"data-scope": "descriptions",
@@ -109,6 +78,84 @@ function DescriptionsTerm($$anchor, $$props) {
 	$.pop();
 }
 //#endregion
+//#region src/components/descriptions/Descriptions.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"layout",
+	"bordered",
+	"column",
+	"items",
+	"children"
+]);
+var root = $.from_html(`<!> <!>`, 1);
+var root_1 = $.from_html(`<dl><!></dl>`);
+function Descriptions$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("descriptions");
+	let layout = $.prop($$props, "layout", 3, "horizontal"), bordered = $.prop($$props, "bordered", 3, false), column = $.prop($$props, "column", 3, 1), rest = $.rest_props($$props, rest_excludes);
+	var dl = root_1();
+	$.attribute_effect(dl, ($0) => ({
+		...rest,
+		"data-scope": "descriptions",
+		"data-part": "root",
+		"data-layout": layout(),
+		"data-bordered": bordered() || void 0,
+		[$.STYLE]: { "--bs-desc-columns": $0 }
+	}), [() => String(column())]);
+	var node = $.child(dl);
+	var consequent = ($$anchor) => {
+		var fragment = $.comment();
+		var node_1 = $.first_child(fragment);
+		$.snippet(node_1, () => $$props.children);
+		$.append($$anchor, fragment);
+	};
+	var alternate = ($$anchor) => {
+		var fragment_1 = $.comment();
+		var node_2 = $.first_child(fragment_1);
+		$.each(node_2, 17, () => $$props.items ?? [], $.index, ($$anchor, item) => {
+			DescriptionsItem($$anchor, {
+				get span() {
+					return $.get(item).span;
+				},
+				children: ($$anchor, $$slotProps) => {
+					var fragment_3 = root();
+					var node_3 = $.first_child(fragment_3);
+					DescriptionsTerm(node_3, {
+						children: ($$anchor, $$slotProps) => {
+							$.next();
+							var text = $.text();
+							$.template_effect(() => $.set_text(text, $.get(item).term));
+							$.append($$anchor, text);
+						},
+						$$slots: { default: true }
+					});
+					DescriptionsDetail($.sibling(node_3, 2), {
+						children: ($$anchor, $$slotProps) => {
+							$.next();
+							var text_1 = $.text();
+							$.template_effect(() => $.set_text(text_1, $.get(item).detail));
+							$.append($$anchor, text_1);
+						},
+						$$slots: { default: true }
+					});
+					$.append($$anchor, fragment_3);
+				},
+				$$slots: { default: true }
+			});
+		});
+		$.append($$anchor, fragment_1);
+	};
+	$.if(node, ($$render) => {
+		if ($$props.children) $$render(consequent);
+		else $$render(alternate, -1);
+	});
+	$.reset(dl);
+	$.append($$anchor, dl);
+	$.pop();
+}
+//#endregion
 //#region src/components/descriptions/index.ts
 /** A ledger laid flat: term and detail pairs in one quiet grid. The
 * horizontal layout reads as a table of two columns; the vertical one

package/dist/{dynamic-input-B3IBAoLs.mjs → dynamic-input-Bt1CeSq4.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 } from "./messages-DNzA55pH.mjs";
 import { Input } from "./components/input/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
@@ -17,13 +20,13 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"disabled",
 	"invalid"
 ]);
-var root = $.from_svg(`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"></path></svg>`);
-var root_1 = $.from_html(`<div data-scope="dynamic-input" data-part="row"><!> <!></div>`);
-var root_2 = $.from_html(`<div><!> <div data-scope="dynamic-input" data-part="add"><!></div></div>`);
+var root = $.from_html(`<div data-scope="dynamic-input" data-part="row"><!> <!></div>`);
+var root_1 = $.from_html(`<div><!> <div data-scope="dynamic-input" data-part="add"><!></div></div>`);
 function DynamicInput$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("dynamic-input");
 	let value = $.prop($$props, "value", 31, () => $.proxy([""])), min = $.prop($$props, "min", 3, 0), addLabel = $.prop($$props, "addLabel", 3, "Add entry"), size = $.prop($$props, "size", 3, "md"), disabled = $.prop($$props, "disabled", 3, false), invalid = $.prop($$props, "invalid", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	const canRemove = $.derived(() => value().length > Math.max(min(), 1));
 	const canAdd = $.derived(() => $$props.max === void 0 || value().length < $$props.max);
 	function update(index, next) {
@@ -38,7 +41,7 @@ function DynamicInput$1($$anchor, $$props) {
 	function add() {
 		value([...value(), ""]);
 	}
-	var div = root_2();
+	var div = root_1();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "dynamic-input",
@@ -46,7 +49,7 @@ function DynamicInput$1($$anchor, $$props) {
 	}));
 	var node = $.child(div);
 	$.each(node, 17, value, $.index, ($$anchor, entry, index) => {
-		var div_1 = root_1();
+		var div_1 = root();
 		var node_1 = $.child(div_1);
 		Input(node_1, {
 			get value() {
@@ -69,6 +72,7 @@ function DynamicInput$1($$anchor, $$props) {
 		var node_2 = $.sibling(node_1, 2);
 		{
 			let $0 = $.derived(() => disabled() || !$.get(canRemove));
+			let $1 = $.derived(() => messages().dynamicEntry.remove);
 			Button(node_2, {
 				variant: "ghost",
 				square: true,
@@ -78,11 +82,12 @@ function DynamicInput$1($$anchor, $$props) {
 				get disabled() {
 					return $.get($0);
 				},
-				"aria-label": `Remove entry ${index + 1}`,
+				get "aria-label"() {
+					return $.get($1);
+				},
 				onclick: () => remove(index),
 				children: ($$anchor, $$slotProps) => {
-					var svg = root();
-					$.append($$anchor, svg);
+					InternalIcon($$anchor, { name: "x" });
 				},
 				$$slots: { default: true }
 			});
@@ -122,6 +127,6 @@ function DynamicInput$1($$anchor, $$props) {
 /** A column of entry rows: one Input per line, each with a quiet remove
 * seal, and an add row at the tail — the bound array stays the only
 * truth. */
-const DynamicInput = DynamicInput$1;
+const DynamicInput = withSelfRoot(DynamicInput$1);
 //#endregion
 export { DynamicInput as t };

package/dist/{ellipsis-CLaZ9Grh.mjs → ellipsis-CPs9IHbU.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";
@@ -34,6 +35,6 @@ function Ellipsis$1($$anchor, $$props) {
 /** The overflow knife: text cut at one line, or held to N lines. The
 * primitive only draws the cut — reaching the full text (title,
 * tooltip) stays the consumer's decision. */
-const Ellipsis = Ellipsis$1;
+const Ellipsis = withSelfRoot(Ellipsis$1);
 //#endregion
 export { Ellipsis as t };

package/dist/family-CzLaku1F.mjs

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

package/dist/{float-button-CZAda2SI.mjs → float-button-B6J8RQMu.mjs}

@@ -1,4 +1,5 @@
-import { t as Button } from "./button-BCcX7lHq.mjs";
+import { t as Button } from "./button-CghWQD3J.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,14 +26,22 @@ var root$1 = $.from_html(`<div><!></div>`);
 function FloatButton$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("float-button");
-	let open = $.prop($$props, "open", 15, false), placement = $.prop($$props, "placement", 3, "bottom-end"), size = $.prop($$props, "size", 3, "lg"), rest = $.rest_props($$props, rest_excludes);
+	let open = $.prop($$props, "open", 15), placement = $.prop($$props, "placement", 3, "bottom-end"), size = $.prop($$props, "size", 3, "lg"), rest = $.rest_props($$props, rest_excludes);
+	let localOpen = $.state(false);
+	const isOpen = $.derived(() => open() ?? $.get(localOpen));
+	function setOpen(value) {
+		if (open() !== void 0) open(value);
+		else $.set(localOpen, value, true);
+	}
 	setContext(FLOAT_BUTTON_KEY, {
 		get open() {
-			return open();
+			return $.get(isOpen);
+		},
+		get size() {
+			return size();
 		},
-		size: size(),
-		toggle: () => open(!open()),
-		close: () => open(false)
+		toggle: () => setOpen(!$.get(isOpen)),
+		close: () => setOpen(false)
 	});
 	var div = root$1();
 	$.attribute_effect(div, () => ({
@@ -40,7 +49,7 @@ function FloatButton$1($$anchor, $$props) {
 		"data-scope": "float-button",
 		"data-part": "root",
 		"data-placement": placement(),
-		"data-state": open() ? "open" : "closed"
+		"data-state": $.get(isOpen) ? "open" : "closed"
 	}));
 	var node = $.child(div);
 	$.snippet(node, () => $$props.children ?? $.noop);
@@ -102,10 +111,11 @@ function FloatButtonItem($$anchor, $$props) {
 function FloatButtonTrigger($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("float-button");
+	const messages = useComponentMessages();
 	const context = useFloatButton();
 	{
 		let $0 = $.derived(() => context?.size ?? "lg");
-		let $1 = $.derived(() => $$props.label || "Actions");
+		let $1 = $.derived(() => $$props.label || messages().floatButton.actions);
 		let $2 = $.derived(() => context?.open ?? false);
 		Button($$anchor, {
 			variant: "solid",