@bysages/svelte 0.3.1 → 0.4.0

package/dist/mentions-L0Z29LV8.mjs

@@ -0,0 +1,256 @@
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { Field } from "./components/field/index.mjs";
+import { t as useMentions } from "./use-mentions-DeF_38di.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { Popover } from "@ark-ui/svelte/popover";
+import { Portal } from "@ark-ui/svelte/portal";
+//#region src/components/mentions/MentionsVessel.svelte
+var root$1 = $.from_html(`<div data-scope="mentions" data-part="option" role="option"> </div>`);
+var root_1 = $.from_html(`<div></div>`);
+var root_2 = $.from_html(`<!> <!>`, 1);
+function MentionsVessel$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("mentions");
+	let open = $.prop($$props, "open", 3, false), matches = $.prop($$props, "matches", 19, () => []), active = $.prop($$props, "active", 3, 0), anchor = $.prop($$props, "anchor", 3, null), size = $.prop($$props, "size", 3, "md");
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	{
+		let $0 = $.derived(() => $$props.children ? { placement: "bottom-start" } : {
+			placement: "bottom-start",
+			getAnchorRect: () => anchor()?.getBoundingClientRect() ?? null
+		});
+		$.component(node, () => Popover.Root, ($$anchor, ArkPopover_Root) => {
+			ArkPopover_Root($$anchor, {
+				get open() {
+					return open();
+				},
+				get positioning() {
+					return $.get($0);
+				},
+				onOpenChange: (details) => $$props.onOpenChange?.(details.open),
+				children: ($$anchor, $$slotProps) => {
+					var fragment_1 = root_2();
+					var node_1 = $.first_child(fragment_1);
+					var consequent = ($$anchor) => {
+						var fragment_2 = $.comment();
+						var node_2 = $.first_child(fragment_2);
+						{
+							const asChild = ($$anchor, anchorProps = $.noop) => {
+								var fragment_3 = $.comment();
+								var node_3 = $.first_child(fragment_3);
+								$.snippet(node_3, () => $$props.children, anchorProps);
+								$.append($$anchor, fragment_3);
+							};
+							$.component(node_2, () => Popover.Anchor, ($$anchor, ArkPopover_Anchor) => {
+								ArkPopover_Anchor($$anchor, {
+									asChild,
+									$$slots: { asChild: true }
+								});
+							});
+						}
+						$.append($$anchor, fragment_2);
+					};
+					$.if(node_1, ($$render) => {
+						if ($$props.children) $$render(consequent);
+					});
+					var node_4 = $.sibling(node_1, 2);
+					Portal(node_4, {
+						children: ($$anchor, $$slotProps) => {
+							var fragment_4 = $.comment();
+							var node_5 = $.first_child(fragment_4);
+							$.component(node_5, () => Popover.Positioner, ($$anchor, ArkPopover_Positioner) => {
+								ArkPopover_Positioner($$anchor, {
+									children: ($$anchor, $$slotProps) => {
+										var fragment_5 = $.comment();
+										var node_6 = $.first_child(fragment_5);
+										{
+											const asChild = ($$anchor, contentProps = $.noop) => {
+												var div = root_1();
+												$.attribute_effect(div, ($0) => ({
+													...$0,
+													"data-scope": "mentions",
+													"data-part": "popup",
+													"data-size": size(),
+													role: "listbox"
+												}), [() => contentProps()()]);
+												$.each(div, 23, matches, (entry) => entry.value, ($$anchor, entry, index) => {
+													var div_1 = root$1();
+													$.set_attribute(div_1, "tabindex", -1);
+													var text = $.only_child(div_1, true);
+													$.template_effect(() => {
+														$.set_attribute(div_1, "aria-selected", $.get(index) === active());
+														$.set_attribute(div_1, "data-active", $.get(index) === active() ? "" : void 0);
+														$.set_text(text, $.get(entry).label);
+													});
+													$.event("mouseenter", div_1, () => $$props.onActiveChange?.($.get(index)));
+													$.delegated("mousedown", div_1, (event) => event.preventDefault());
+													$.delegated("click", div_1, () => $$props.onInsert?.($.get(entry)));
+													$.delegated("keydown", div_1, (event) => {
+														if (event.key !== "Enter" && event.key !== " ") return;
+														event.preventDefault();
+														$$props.onInsert?.($.get(entry));
+													});
+													$.append($$anchor, div_1);
+												});
+												$.reset(div);
+												$.append($$anchor, div);
+											};
+											$.component(node_6, () => Popover.Content, ($$anchor, ArkPopover_Content) => {
+												ArkPopover_Content($$anchor, {
+													asChild,
+													$$slots: { asChild: true }
+												});
+											});
+										}
+										$.append($$anchor, fragment_5);
+									},
+									$$slots: { default: true }
+								});
+							});
+							$.append($$anchor, fragment_4);
+						},
+						$$slots: { default: true }
+					});
+					$.append($$anchor, fragment_1);
+				},
+				$$slots: { default: true }
+			});
+		});
+	}
+	$.append($$anchor, fragment);
+	$.pop();
+}
+$.delegate([
+	"mousedown",
+	"click",
+	"keydown"
+]);
+//#endregion
+//#region src/components/mentions/Mentions.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"items",
+	"value",
+	"trigger",
+	"placeholder",
+	"autoresize",
+	"invalid",
+	"size",
+	"onValueChange"
+]);
+var root = $.from_html(`<div><!></div>`);
+function Mentions$1($$anchor, $$props) {
+	$.push($$props, true);
+	injectComponentStyle("mentions");
+	let items = $.prop($$props, "items", 19, () => []), value = $.prop($$props, "value", 15, ""), trigger = $.prop($$props, "trigger", 3, "@"), autoresize = $.prop($$props, "autoresize", 3, false), invalid = $.prop($$props, "invalid", 3, false), size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes);
+	let textareaEl = $.state(null);
+	const mentions = useMentions(() => ({
+		items: items(),
+		trigger: trigger()
+	}), () => $.get(textareaEl), {
+		getText: () => $.get(textareaEl)?.value ?? value(),
+		setText: (next) => {
+			value(next);
+			$$props.onValueChange?.(next);
+		}
+	});
+	function onInput(event) {
+		$$props.onValueChange?.(event.currentTarget.value);
+		mentions.onInput();
+	}
+	var div = root();
+	$.attribute_effect(div, () => ({
+		...rest,
+		"data-scope": "mentions",
+		"data-part": "root",
+		"data-size": size()
+	}));
+	var node = $.child(div);
+	{
+		const children = ($$anchor, anchorProps = $.noop) => {
+			var fragment = $.comment();
+			var node_1 = $.first_child(fragment);
+			{
+				let $0 = $.derived(() => anchorProps()());
+				let $1 = $.derived(() => invalid() ? "true" : void 0);
+				$.component(node_1, () => Field.Textarea, ($$anchor, Field_Textarea) => {
+					Field_Textarea($$anchor, $.spread_props(() => $.get($0), {
+						get autoresize() {
+							return autoresize();
+						},
+						rows: 3,
+						get placeholder() {
+							return $$props.placeholder;
+						},
+						get "aria-invalid"() {
+							return $.get($1);
+						},
+						"data-scope": "mentions",
+						"data-part": "textarea",
+						oninput: onInput,
+						get onkeydown() {
+							return mentions.onKeydown;
+						},
+						get ref() {
+							return $.get(textareaEl);
+						},
+						set ref($$value) {
+							$.set(textareaEl, $$value, true);
+						},
+						get value() {
+							return value();
+						},
+						set value($$value) {
+							value($$value);
+						}
+					}));
+				});
+			}
+			$.append($$anchor, fragment);
+		};
+		MentionsVessel$1(node, {
+			get open() {
+				return mentions.open;
+			},
+			get matches() {
+				return mentions.matches;
+			},
+			get active() {
+				return mentions.active;
+			},
+			get size() {
+				return size();
+			},
+			get onInsert() {
+				return mentions.insert;
+			},
+			onActiveChange: (index) => mentions.active = index,
+			onOpenChange: (open) => {
+				if (!open) mentions.close();
+			},
+			children,
+			$$slots: { default: true }
+		});
+	}
+	$.reset(div);
+	$.append($$anchor, div);
+	$.pop();
+}
+//#endregion
+//#region src/components/mentions/index.ts
+/** @-mentions: a plain textarea that, when the text before the caret
+* ends with the trigger character followed by a token, offers the
+* matching candidates in a small anchored vessel; choosing one replaces
+* the token with `trigger + label` and hands the whole text back
+* through `bind:value`. Arrows move, Enter inserts, Escape dismisses. */
+const Mentions = withSelfRoot(Mentions$1);
+/** The vessel: the candidates themselves as a floating card. Composers
+* that keep their own field anatomy wire it up with `useMentions`
+* directly. */
+const MentionsVessel = withSelfRoot(MentionsVessel$1);
+//#endregion
+export { MentionsVessel as n, Mentions as t };

package/dist/{order-list-D3EhH7EX.mjs → order-list-CoE45N5_.mjs}

@@ -1,3 +1,4 @@
+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";
@@ -124,6 +125,6 @@ $.delegate(["click"]);
 //#region src/components/order-list/index.ts
 /** A ledger the reader may rewrite: rows move by grip or by the side
 * arrows; the value is the order. */
-const OrderList = OrderList$1;
+const OrderList = withSelfRoot(OrderList$1);
 //#endregion
 export { OrderList as t };

package/dist/{popconfirm-NK5BPbrN.mjs → popconfirm-C6VCMgtZ.mjs}

@@ -1,4 +1,5 @@
-import { t as Button } from "./button-BCcX7lHq.mjs";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as Button } from "./button-CghWQD3J.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -79,30 +80,56 @@ function Popconfirm$1($$anchor, $$props) {
 												var text = $.only_child(p, true);
 												var div = $.sibling(p, 2);
 												var node_6 = $.child(div);
-												Button(node_6, {
-													variant: "ghost",
-													size: "sm",
-													onclick: () => settle(false),
-													children: ($$anchor, $$slotProps) => {
-														$.next();
-														var text_1 = $.text();
-														$.template_effect(() => $.set_text(text_1, cancelText()));
-														$.append($$anchor, text_1);
-													},
-													$$slots: { default: true }
-												});
+												{
+													const asChild = ($$anchor, closeProps = $.noop) => {
+														{
+															let $0 = $.derived(() => closeProps()());
+															Button($$anchor, $.spread_props(() => $.get($0), {
+																variant: "ghost",
+																size: "sm",
+																onclick: () => settle(false),
+																children: ($$anchor, $$slotProps) => {
+																	$.next();
+																	var text_1 = $.text();
+																	$.template_effect(() => $.set_text(text_1, cancelText()));
+																	$.append($$anchor, text_1);
+																},
+																$$slots: { default: true }
+															}));
+														}
+													};
+													$.component(node_6, () => Popover.CloseTrigger, ($$anchor, ArkPopover_CloseTrigger) => {
+														ArkPopover_CloseTrigger($$anchor, {
+															asChild,
+															$$slots: { asChild: true }
+														});
+													});
+												}
 												var node_7 = $.sibling(node_6, 2);
-												Button(node_7, {
-													size: "sm",
-													onclick: () => settle(true),
-													children: ($$anchor, $$slotProps) => {
-														$.next();
-														var text_2 = $.text();
-														$.template_effect(() => $.set_text(text_2, confirmText()));
-														$.append($$anchor, text_2);
-													},
-													$$slots: { default: true }
-												});
+												{
+													const asChild = ($$anchor, closeProps = $.noop) => {
+														{
+															let $0 = $.derived(() => closeProps()());
+															Button($$anchor, $.spread_props(() => $.get($0), {
+																size: "sm",
+																onclick: () => settle(true),
+																children: ($$anchor, $$slotProps) => {
+																	$.next();
+																	var text_2 = $.text();
+																	$.template_effect(() => $.set_text(text_2, confirmText()));
+																	$.append($$anchor, text_2);
+																},
+																$$slots: { default: true }
+															}));
+														}
+													};
+													$.component(node_7, () => Popover.CloseTrigger, ($$anchor, ArkPopover_CloseTrigger_1) => {
+														ArkPopover_CloseTrigger_1($$anchor, {
+															asChild,
+															$$slots: { asChild: true }
+														});
+													});
+												}
 												$.reset(div);
 												$.template_effect(() => $.set_text(text, $$props.message));
 												$.append($$anchor, fragment_4);
@@ -131,6 +158,6 @@ function Popconfirm$1($$anchor, $$props) {
 //#region src/components/popconfirm/index.ts
 /** A question at the point of no return: the trigger opens a small
 * anchored vessel carrying the message and two answers. */
-const Popconfirm = Popconfirm$1;
+const Popconfirm = withSelfRoot(Popconfirm$1);
 //#endregion
 export { Popconfirm as t };

package/dist/{progress-group-BQMAQWXh.mjs → progress-group-OR53RKfW.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";
@@ -37,7 +38,7 @@ function ProgressGroup$1($$anchor, $$props) {
 			$.set_attribute(div_2, "aria-valuenow", $.get(segment).value);
 			$.set_attribute(div_2, "aria-valuemax", $.get(total));
 			$.set_attribute(div_2, "aria-label", $0);
-			styles = $.set_style(div_2, "", styles, { "inline-size": $1 });
+			styles = $.set_style(div_2, "", styles, { "--bs-progress-group-share": $1 });
 		}, [() => nameOf($.get(segment), index), () => share($.get(segment).value)]);
 		$.append($$anchor, div_2);
 	});
@@ -76,6 +77,6 @@ function ProgressGroup$1($$anchor, $$props) {
 * the legend reads them back beneath (swatch, label, value) unless the
 * caller declines it. The whole is the sum of the parts unless the
 * caller brings a larger one — the remainder then shows as groove. */
-const ProgressGroup = ProgressGroup$1;
+const ProgressGroup = withSelfRoot(ProgressGroup$1);
 //#endregion
 export { ProgressGroup as t };

package/dist/{props-U567RIQo.d.mts → props-DL-XfEtS.d.mts}

@@ -1,4 +1,4 @@
-import { r as MentionEntry } from "./index-DKDpZraB.mjs";
+import { r as MentionEntry } from "./index-D_fO4kp1.mjs";
 import { Snippet } from "svelte";
 import { HTMLAttributes } from "svelte/elements";
 //#region src/components/ai-prompt-input/props.d.ts

package/dist/{result-4Oee2ndu.mjs → result-1kEBWRai.mjs}

@@ -150,6 +150,7 @@ function Title($$anchor, $$props) {
 /** A verdict drawn after the deed — Result, Result.Icon, Result.Title,
 * Result.Description, Result.Extra. */
 const Result = Object.assign(Result$1, {
+	Root: Result$1,
 	Icon: ResultIcon,
 	Title,
 	Description,

package/dist/{select-8ume4i2e.mjs → select-DQQ0bSN9.mjs}

@@ -1,4 +1,6 @@
-import { t as SelectRoot } from "./SelectRoot-l-rb18FH.mjs";
+import { n as withSelfRoot, t as defineFamily } from "./family-CzLaku1F.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import { n as SelectRoot, t as Select$2 } from "./Select-CnNtViJ4.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -20,7 +22,7 @@ var rest_excludes = /* @__PURE__ */ new Set([
 ]);
 var root = $.from_html(`<option disabled=""> </option>`);
 var root_1 = $.from_html(`<option> </option>`);
-var root_2 = $.from_html(`<span><select><!><!></select> <svg data-scope="select" data-part="native-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>`);
+var root_2 = $.from_html(`<span><select><!><!></select> <span data-scope="select" data-part="native-icon"><!></span></span>`);
 function NativeSelect$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("select");
@@ -76,7 +78,10 @@ function NativeSelect$1($$anchor, $$props) {
 		$.append($$anchor, option_2);
 	});
 	$.reset(select);
-	$.next(2);
+	var span_1 = $.sibling(select, 2);
+	var node_2 = $.child(span_1);
+	InternalIcon(node_2, { name: "chevron-down" });
+	$.reset(span_1);
 	$.reset(span);
 	$.bind_select_value(select, value);
 	$.append($$anchor, span);
@@ -89,11 +94,11 @@ function NativeSelect$1($$anchor, $$props) {
 * row taking the flat ink fill. The API is Ark's own — Root, Label, Control,
 * Trigger, ValueText, Indicator, ClearTrigger, HiddenSelect, Positioner,
 * Content, List, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
-const Select$1 = {
+const Select$1 = defineFamily(Select$2, {
 	...Select,
 	Root: SelectRoot
-};
+});
 /** The platform's own list wearing the control recipe. */
-const NativeSelect = NativeSelect$1;
+const NativeSelect = withSelfRoot(NativeSelect$1);
 //#endregion
 export { Select$1 as n, NativeSelect as t };

package/dist/{separator-4JWXConE.mjs → separator-doDccxti.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";
@@ -31,6 +32,6 @@ function Separator$1($$anchor, $$props) {
 /** The paper-ink hairline as a component: a named rule between sections.
 * Decorative separators drop the separator role, since the page reads
 * fine without them. */
-const Separator = Separator$1;
+const Separator = withSelfRoot(Separator$1);
 //#endregion
 export { Separator as t };

package/dist/{skeleton-DOfOrlmL.mjs → skeleton-CKLyMSAV.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";
@@ -25,6 +26,6 @@ function Skeleton$1($$anchor, $$props) {
 //#region src/components/skeleton/index.ts
 /** A waiting sheet of unset paper. Size it from the outside; the breath
 * is the component's own. */
-const Skeleton = Skeleton$1;
+const Skeleton = withSelfRoot(Skeleton$1);
 //#endregion
 export { Skeleton as t };

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

@@ -1,4 +1,6 @@
-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 { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
@@ -19,7 +21,7 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"onclick",
 	"onSelect"
 ]);
-var root = $.from_html(`<button><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="m6 9 6 6 6-6"></path></svg></button>`);
+var root = $.from_html(`<button><!></button>`);
 var root_1 = $.from_html(`<!> <!>`, 1);
 var root_2 = $.from_html(`<div><!> <!></div>`);
 function SplitButton$1($$anchor, $$props) {
@@ -76,6 +78,9 @@ function SplitButton$1($$anchor, $$props) {
 							"data-square": "true",
 							"data-motion": "ink-ripple lit"
 						}), [() => props()(), () => messages().more.actions]);
+						var node_3 = $.child(button);
+						InternalIcon(node_3, { name: "chevron-down" });
+						$.reset(button);
 						$.append($$anchor, button);
 					};
 					$.component(node_2, () => Menu.Trigger, ($$anchor, ArkMenu_Trigger) => {
@@ -85,27 +90,27 @@ function SplitButton$1($$anchor, $$props) {
 						});
 					});
 				}
-				var node_3 = $.sibling(node_2, 2);
-				Portal(node_3, {
+				var node_4 = $.sibling(node_2, 2);
+				Portal(node_4, {
 					children: ($$anchor, $$slotProps) => {
 						var fragment_2 = $.comment();
-						var node_4 = $.first_child(fragment_2);
-						$.component(node_4, () => Menu.Positioner, ($$anchor, ArkMenu_Positioner) => {
+						var node_5 = $.first_child(fragment_2);
+						$.component(node_5, () => Menu.Positioner, ($$anchor, ArkMenu_Positioner) => {
 							ArkMenu_Positioner($$anchor, {
 								children: ($$anchor, $$slotProps) => {
 									var fragment_3 = $.comment();
-									var node_5 = $.first_child(fragment_3);
-									$.component(node_5, () => Menu.Content, ($$anchor, ArkMenu_Content) => {
+									var node_6 = $.first_child(fragment_3);
+									$.component(node_6, () => Menu.Content, ($$anchor, ArkMenu_Content) => {
 										ArkMenu_Content($$anchor, {
 											children: ($$anchor, $$slotProps) => {
 												var fragment_4 = $.comment();
-												var node_6 = $.first_child(fragment_4);
-												$.each(node_6, 17, items, (entry) => entry.value, ($$anchor, entry) => {
+												var node_7 = $.first_child(fragment_4);
+												$.each(node_7, 17, items, (entry) => entry.value, ($$anchor, entry) => {
 													var fragment_5 = $.comment();
-													var node_7 = $.first_child(fragment_5);
+													var node_8 = $.first_child(fragment_5);
 													{
 														let $0 = $.derived(() => $.get(entry).danger ? "" : void 0);
-														$.component(node_7, () => Menu.Item, ($$anchor, ArkMenu_Item) => {
+														$.component(node_8, () => Menu.Item, ($$anchor, ArkMenu_Item) => {
 															ArkMenu_Item($$anchor, {
 																get value() {
 																	return $.get(entry).value;
@@ -119,8 +124,8 @@ function SplitButton$1($$anchor, $$props) {
 																onSelect: () => $$props.onSelect?.($.get(entry).value),
 																children: ($$anchor, $$slotProps) => {
 																	var fragment_6 = $.comment();
-																	var node_8 = $.first_child(fragment_6);
-																	$.component(node_8, () => Menu.ItemText, ($$anchor, ArkMenu_ItemText) => {
+																	var node_9 = $.first_child(fragment_6);
+																	$.component(node_9, () => Menu.ItemText, ($$anchor, ArkMenu_ItemText) => {
 																		ArkMenu_ItemText($$anchor, {
 																			children: ($$anchor, $$slotProps) => {
 																				$.next();
@@ -167,7 +172,7 @@ function SplitButton$1($$anchor, $$props) {
 /** A primary action with its alternatives one seam away: the main
 * button fires, the fitted arrow opens a paper vessel whose entries
 * hand back their value. */
-const SplitButton = SplitButton$1;
+const SplitButton = withSelfRoot(SplitButton$1);
 injectComponentStyle("menu");
 //#endregion
 export { SplitButton as t };

package/dist/{spotlight-DMC5E1eS.mjs → spotlight-COA_C9G5.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";
@@ -46,6 +47,6 @@ function Spotlight$1($$anchor, $$props) {
 //#region src/components/spotlight/index.ts
 /** The ink-light card: a vessel whose rim and face take light from the
 * reader's hand. */
-const Spotlight = Spotlight$1;
+const Spotlight = withSelfRoot(Spotlight$1);
 //#endregion
 export { Spotlight as t };

package/dist/{stack-DCKrejZp.mjs → stack-qBPmVt5S.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";
@@ -37,9 +38,9 @@ function Stack$1($$anchor, $$props) {
 		"data-direction": direction(),
 		[$.STYLE]: {
 			"--bs-stack-gap": $.get(gapValue),
-			"align-items": $$props.align,
-			"justify-content": $$props.justify,
-			"flex-wrap": wrap() ? "wrap" : void 0
+			"--bs-stack-align": $$props.align,
+			"--bs-stack-justify": $$props.justify,
+			"--bs-stack-wrap": wrap() ? "wrap" : void 0
 		}
 	}));
 	var node = $.child(div);
@@ -52,6 +53,6 @@ function Stack$1($$anchor, $$props) {
 //#region src/components/stack/index.ts
 /** Whitespace chosen by name: the named steps point at the space ramp
 * so siblings are held apart by one token, never by ad-hoc margins. */
-const Stack = Stack$1;
+const Stack = withSelfRoot(Stack$1);
 //#endregion
 export { Stack as t };