@bysages/svelte 0.3.1 → 0.4.1

package/dist/ToggleGroup-NRzTANnd.mjs

@@ -0,0 +1,142 @@
+import { t as useElementId } from "./id-Alz497yI.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { ToggleGroup } from "@ark-ui/svelte/toggle-group";
+//#region src/components/toggle-group/ToggleGroupRoot.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function ToggleGroupRoot($$anchor, $$props) {
+	const generatedId = $.props_id();
+	$.push($$props, true);
+	injectComponentStyle("toggle-group");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes$1);
+	const id = $.derived(() => useElementId("toggle-group", generatedId, $$props.id));
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => ToggleGroup.Root, ($$anchor, ArkToggleGroup_Root) => {
+		ArkToggleGroup_Root($$anchor, $.spread_props(() => rest, {
+			get id() {
+				return $.get(id);
+			},
+			get "data-size"() {
+				return size();
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/toggle-group/ToggleGroup.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"defaultValue",
+	"items",
+	"multiple",
+	"disabled",
+	"readOnly",
+	"orientation",
+	"children"
+]);
+var root = $.from_html(`<!> <!>`, 1);
+function ToggleGroup$1($$anchor, $$props) {
+	$.push($$props, true);
+	/** A built-in core-registry icon; omit it to render the label as text. */
+	let value = $.prop($$props, "value", 15), multiple = $.prop($$props, "multiple", 3, false), disabled = $.prop($$props, "disabled", 3, false), readOnly = $.prop($$props, "readOnly", 3, false), orientation = $.prop($$props, "orientation", 3, "horizontal"), rest = $.rest_props($$props, rest_excludes);
+	ToggleGroupRoot($$anchor, $.spread_props({
+		get defaultValue() {
+			return $$props.defaultValue;
+		},
+		get multiple() {
+			return multiple();
+		},
+		get disabled() {
+			return disabled();
+		},
+		get readOnly() {
+			return readOnly();
+		},
+		get orientation() {
+			return orientation();
+		}
+	}, () => rest, {
+		get value() {
+			return value();
+		},
+		set value($$value) {
+			value($$value);
+		},
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = root();
+			var node = $.first_child(fragment_1);
+			$.each(node, 17, () => $$props.items, (item) => item.value, ($$anchor, item) => {
+				var fragment_2 = $.comment();
+				var node_1 = $.first_child(fragment_2);
+				{
+					let $0 = $.derived(() => $.get(item).icon ? "icon" : "text");
+					$.component(node_1, () => ToggleGroup.Item, ($$anchor, ArkToggleGroup_Item) => {
+						ArkToggleGroup_Item($$anchor, {
+							get value() {
+								return $.get(item).value;
+							},
+							get disabled() {
+								return $.get(item).disabled;
+							},
+							get "aria-label"() {
+								return $.get(item).label;
+							},
+							get "data-variant"() {
+								return $.get($0);
+							},
+							children: ($$anchor, $$slotProps) => {
+								var fragment_3 = $.comment();
+								var node_2 = $.first_child(fragment_3);
+								var consequent = ($$anchor) => {
+									InternalIcon($$anchor, { get name() {
+										return $.get(item).icon;
+									} });
+								};
+								var alternate = ($$anchor) => {
+									var text = $.text();
+									$.template_effect(() => $.set_text(text, $.get(item).label));
+									$.append($$anchor, text);
+								};
+								$.if(node_2, ($$render) => {
+									if ($.get(item).icon) $$render(consequent);
+									else $$render(alternate, -1);
+								});
+								$.append($$anchor, fragment_3);
+							},
+							$$slots: { default: true }
+						});
+					});
+				}
+				$.append($$anchor, fragment_2);
+			});
+			var node_3 = $.sibling(node, 2);
+			$.snippet(node_3, () => $$props.children ?? $.noop);
+			$.append($$anchor, fragment_1);
+		},
+		$$slots: { default: true }
+	}));
+	$.pop();
+}
+//#endregion
+export { ToggleGroupRoot as n, ToggleGroup$1 as t };

package/dist/Tooltip-BMFCR30g.mjs

@@ -0,0 +1,194 @@
+import { t as useElementId } from "./id-Alz497yI.mjs";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Portal } from "@ark-ui/svelte/portal";
+import { Tooltip } from "@ark-ui/svelte/tooltip";
+//#region src/components/tooltip/TooltipRoot.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"open",
+	"children"
+]);
+function TooltipRoot($$anchor, $$props) {
+	const generatedId = $.props_id();
+	$.push($$props, true);
+	injectComponentStyle("tooltip");
+	let open = $.prop($$props, "open", 15), rest = $.rest_props($$props, rest_excludes$1);
+	const id = $.derived(() => useElementId("tooltip", generatedId, $$props.id));
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => Tooltip.Root, ($$anchor, ArkTooltip_Root) => {
+		ArkTooltip_Root($$anchor, $.spread_props(() => rest, {
+			get id() {
+				return $.get(id);
+			},
+			get open() {
+				return open();
+			},
+			set open($$value) {
+				open($$value);
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/tooltip/Tooltip.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"open",
+	"content",
+	"disabled",
+	"placement",
+	"trigger",
+	"children"
+]);
+var root = $.from_html(`<!> `, 1);
+var root_1 = $.from_html(`<!> <!>`, 1);
+function Tooltip$1($$anchor, $$props) {
+	$.push($$props, true);
+	let open = $.prop($$props, "open", 15), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
+	/** The affordance the tooltip describes: text, a snippet, or the default slot. */
+	TooltipRoot($$anchor, $.spread_props(() => $$props.placement === void 0 ? null : { positioning: { placement: $$props.placement } }, () => rest, {
+		get open() {
+			return open();
+		},
+		set open($$value) {
+			open($$value);
+		},
+		children: ($$anchor, $$slotProps) => {
+			var fragment_1 = root_1();
+			var node = $.first_child(fragment_1);
+			var consequent = ($$anchor) => {
+				var fragment_2 = $.comment();
+				var node_1 = $.first_child(fragment_2);
+				$.component(node_1, () => Tooltip.Trigger, ($$anchor, ArkTooltip_Trigger) => {
+					ArkTooltip_Trigger($$anchor, {
+						get disabled() {
+							return disabled();
+						},
+						children: ($$anchor, $$slotProps) => {
+							$.next();
+							var text = $.text();
+							$.template_effect(() => $.set_text(text, $$props.trigger));
+							$.append($$anchor, text);
+						},
+						$$slots: { default: true }
+					});
+				});
+				$.append($$anchor, fragment_2);
+			};
+			var consequent_1 = ($$anchor) => {
+				var fragment_4 = $.comment();
+				var node_2 = $.first_child(fragment_4);
+				{
+					const asChild = ($$anchor, triggerProps = $.noop) => {
+						var fragment_5 = $.comment();
+						var node_3 = $.first_child(fragment_5);
+						{
+							let $0 = $.derived(() => triggerProps()());
+							$.snippet(node_3, () => $$props.trigger, () => $.get($0));
+						}
+						$.append($$anchor, fragment_5);
+					};
+					$.component(node_2, () => Tooltip.Trigger, ($$anchor, ArkTooltip_Trigger_1) => {
+						ArkTooltip_Trigger_1($$anchor, {
+							get disabled() {
+								return disabled();
+							},
+							asChild,
+							$$slots: { asChild: true }
+						});
+					});
+				}
+				$.append($$anchor, fragment_4);
+			};
+			var consequent_2 = ($$anchor) => {
+				var fragment_6 = $.comment();
+				var node_4 = $.first_child(fragment_6);
+				$.component(node_4, () => Tooltip.Trigger, ($$anchor, ArkTooltip_Trigger_2) => {
+					ArkTooltip_Trigger_2($$anchor, {
+						get disabled() {
+							return disabled();
+						},
+						children: ($$anchor, $$slotProps) => {
+							var fragment_7 = $.comment();
+							var node_5 = $.first_child(fragment_7);
+							$.snippet(node_5, () => $$props.children);
+							$.append($$anchor, fragment_7);
+						},
+						$$slots: { default: true }
+					});
+				});
+				$.append($$anchor, fragment_6);
+			};
+			$.if(node, ($$render) => {
+				if (typeof $$props.trigger === "string") $$render(consequent);
+				else if ($$props.trigger) $$render(consequent_1, 1);
+				else if ($$props.children) $$render(consequent_2, 2);
+			});
+			var node_6 = $.sibling(node, 2);
+			Portal(node_6, {
+				children: ($$anchor, $$slotProps) => {
+					var fragment_8 = $.comment();
+					var node_7 = $.first_child(fragment_8);
+					$.component(node_7, () => Tooltip.Positioner, ($$anchor, ArkTooltip_Positioner) => {
+						ArkTooltip_Positioner($$anchor, {
+							children: ($$anchor, $$slotProps) => {
+								var fragment_9 = $.comment();
+								var node_8 = $.first_child(fragment_9);
+								$.component(node_8, () => Tooltip.Content, ($$anchor, ArkTooltip_Content) => {
+									ArkTooltip_Content($$anchor, {
+										children: ($$anchor, $$slotProps) => {
+											var fragment_10 = root();
+											var node_9 = $.first_child(fragment_10);
+											$.component(node_9, () => Tooltip.Arrow, ($$anchor, ArkTooltip_Arrow) => {
+												ArkTooltip_Arrow($$anchor, {
+													children: ($$anchor, $$slotProps) => {
+														var fragment_11 = $.comment();
+														var node_10 = $.first_child(fragment_11);
+														$.component(node_10, () => Tooltip.ArrowTip, ($$anchor, ArkTooltip_ArrowTip) => {
+															ArkTooltip_ArrowTip($$anchor, {});
+														});
+														$.append($$anchor, fragment_11);
+													},
+													$$slots: { default: true }
+												});
+											});
+											var text_1 = $.sibling(node_9);
+											$.template_effect(() => $.set_text(text_1, ` ${$$props.content ?? ""}`));
+											$.append($$anchor, fragment_10);
+										},
+										$$slots: { default: true }
+									});
+								});
+								$.append($$anchor, fragment_9);
+							},
+							$$slots: { default: true }
+						});
+					});
+					$.append($$anchor, fragment_8);
+				},
+				$$slots: { default: true }
+			});
+			$.append($$anchor, fragment_1);
+		},
+		$$slots: { default: true }
+	}));
+	$.pop();
+}
+//#endregion
+export { TooltipRoot as n, Tooltip$1 as t };

package/dist/TreeViewNodeCheckbox-l1l6EYyz.mjs

@@ -0,0 +1,292 @@
+import { t as useElementId } from "./id-Alz497yI.mjs";
+import { t as InternalIcon } from "./InternalIcon-Clwbj4MY.mjs";
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { TreeView, createTreeCollection } from "@ark-ui/svelte/tree-view";
+//#region src/components/tree-view/TreeViewBranchIndicator.svelte
+var rest_excludes$3 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+function TreeViewBranchIndicator($$anchor, $$props) {
+	let rest = $.rest_props($$props, rest_excludes$3);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => TreeView.BranchIndicator, ($$anchor, ArkTreeView_BranchIndicator) => {
+		ArkTreeView_BranchIndicator($$anchor, $.spread_props(() => rest, {
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				var consequent = ($$anchor) => {
+					var fragment_2 = $.comment();
+					var node_2 = $.first_child(fragment_2);
+					$.snippet(node_2, () => $$props.children);
+					$.append($$anchor, fragment_2);
+				};
+				var alternate = ($$anchor) => {
+					InternalIcon($$anchor, { name: "chevron-right" });
+				};
+				$.if(node_1, ($$render) => {
+					if ($$props.children) $$render(consequent);
+					else $$render(alternate, -1);
+				});
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+}
+//#endregion
+//#region src/components/tree-view/TreeViewNodes.svelte
+var root$1 = $.from_html(`<!> <!>`, 1);
+function TreeViewNodes_1($$anchor, $$props) {
+	let indexPath = $.prop($$props, "indexPath", 19, () => []);
+	var fragment = $.comment();
+	var node_1 = $.first_child(fragment);
+	$.each(node_1, 19, () => $$props.items, (node) => node.value, ($$anchor, node, index) => {
+		const nodePath = $.derived(() => [...indexPath(), $.get(index)]);
+		var fragment_1 = $.comment();
+		var node_2 = $.first_child(fragment_1);
+		$.component(node_2, () => TreeView.NodeProvider, ($$anchor, ArkTreeView_NodeProvider) => {
+			ArkTreeView_NodeProvider($$anchor, {
+				get node() {
+					return $.get(node);
+				},
+				get indexPath() {
+					return $.get(nodePath);
+				},
+				children: ($$anchor, $$slotProps) => {
+					var fragment_2 = $.comment();
+					var node_3 = $.first_child(fragment_2);
+					var consequent = ($$anchor) => {
+						var fragment_3 = $.comment();
+						var node_4 = $.first_child(fragment_3);
+						$.component(node_4, () => TreeView.Branch, ($$anchor, ArkTreeView_Branch) => {
+							ArkTreeView_Branch($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									var fragment_4 = root$1();
+									var node_5 = $.first_child(fragment_4);
+									$.component(node_5, () => TreeView.BranchControl, ($$anchor, ArkTreeView_BranchControl) => {
+										ArkTreeView_BranchControl($$anchor, {
+											children: ($$anchor, $$slotProps) => {
+												var fragment_5 = root$1();
+												var node_6 = $.first_child(fragment_5);
+												TreeViewBranchIndicator(node_6, {});
+												var node_7 = $.sibling(node_6, 2);
+												$.component(node_7, () => TreeView.BranchText, ($$anchor, ArkTreeView_BranchText) => {
+													ArkTreeView_BranchText($$anchor, {
+														children: ($$anchor, $$slotProps) => {
+															$.next();
+															var text = $.text();
+															$.template_effect(() => $.set_text(text, $.get(node).label));
+															$.append($$anchor, text);
+														},
+														$$slots: { default: true }
+													});
+												});
+												$.append($$anchor, fragment_5);
+											},
+											$$slots: { default: true }
+										});
+									});
+									var node_8 = $.sibling(node_5, 2);
+									$.component(node_8, () => TreeView.BranchContent, ($$anchor, ArkTreeView_BranchContent) => {
+										ArkTreeView_BranchContent($$anchor, {
+											children: ($$anchor, $$slotProps) => {
+												TreeViewNodes_1($$anchor, {
+													get items() {
+														return $.get(node).children;
+													},
+													get indexPath() {
+														return $.get(nodePath);
+													}
+												});
+											},
+											$$slots: { default: true }
+										});
+									});
+									$.append($$anchor, fragment_4);
+								},
+								$$slots: { default: true }
+							});
+						});
+						$.append($$anchor, fragment_3);
+					};
+					var alternate = ($$anchor) => {
+						var fragment_8 = $.comment();
+						var node_9 = $.first_child(fragment_8);
+						$.component(node_9, () => TreeView.Item, ($$anchor, ArkTreeView_Item) => {
+							ArkTreeView_Item($$anchor, {
+								children: ($$anchor, $$slotProps) => {
+									var fragment_9 = $.comment();
+									var node_10 = $.first_child(fragment_9);
+									$.component(node_10, () => TreeView.ItemText, ($$anchor, ArkTreeView_ItemText) => {
+										ArkTreeView_ItemText($$anchor, {
+											children: ($$anchor, $$slotProps) => {
+												$.next();
+												var text_1 = $.text();
+												$.template_effect(() => $.set_text(text_1, $.get(node).label));
+												$.append($$anchor, text_1);
+											},
+											$$slots: { default: true }
+										});
+									});
+									$.append($$anchor, fragment_9);
+								},
+								$$slots: { default: true }
+							});
+						});
+						$.append($$anchor, fragment_8);
+					};
+					$.if(node_3, ($$render) => {
+						if ($.get(node).children?.length) $$render(consequent);
+						else $$render(alternate, -1);
+					});
+					$.append($$anchor, fragment_2);
+				},
+				$$slots: { default: true }
+			});
+		});
+		$.append($$anchor, fragment_1);
+	});
+	$.append($$anchor, fragment);
+}
+//#endregion
+//#region src/components/tree-view/TreeViewRoot.svelte
+var rest_excludes$2 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"size",
+	"children"
+]);
+function TreeViewRoot($$anchor, $$props) {
+	const generatedId = $.props_id();
+	$.push($$props, true);
+	injectComponentStyle("tree-view");
+	let size = $.prop($$props, "size", 3, "md"), rest = $.rest_props($$props, rest_excludes$2);
+	const id = $.derived(() => useElementId("tree-view", generatedId, $$props.id));
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => TreeView.Root, ($$anchor, ArkTreeView_Root) => {
+		ArkTreeView_Root($$anchor, $.spread_props(() => rest, {
+			get id() {
+				return $.get(id);
+			},
+			get "data-size"() {
+				return size();
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+	$.pop();
+}
+//#endregion
+//#region src/components/tree-view/TreeView.svelte
+var rest_excludes$1 = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"value",
+	"defaultValue",
+	"options",
+	"multiple",
+	"label",
+	"children"
+]);
+var root = $.from_html(`<!> <!>`, 1);
+function TreeView$1($$anchor, $$props) {
+	$.push($$props, true);
+	let value = $.prop($$props, "value", 15), multiple = $.prop($$props, "multiple", 3, false), rest = $.rest_props($$props, rest_excludes$1);
+	const branchValues = $.derived(() => $$props.options.filter((option) => option.children?.length).map((option) => option.value));
+	const collection = $.derived(() => createTreeCollection({
+		nodeToValue: (node) => node.value,
+		nodeToString: (node) => node.label,
+		isNodeDisabled: (node) => !!node.disabled
+	}));
+	{
+		let $0 = $.derived(() => multiple() ? "multiple" : "single");
+		TreeViewRoot($$anchor, $.spread_props({
+			get collection() {
+				return $.get(collection);
+			},
+			get defaultExpandedValue() {
+				return $.get(branchValues);
+			},
+			get defaultSelectedValue() {
+				return $$props.defaultValue;
+			},
+			get selectionMode() {
+				return $.get($0);
+			},
+			get "aria-label"() {
+				return $$props.label;
+			}
+		}, () => rest, {
+			get value() {
+				return value();
+			},
+			set value($$value) {
+				value($$value);
+			},
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = root();
+				var node_1 = $.first_child(fragment_1);
+				$.component(node_1, () => TreeView.Tree, ($$anchor, ArkTreeView_Tree) => {
+					ArkTreeView_Tree($$anchor, {
+						children: ($$anchor, $$slotProps) => {
+							TreeViewNodes_1($$anchor, { get items() {
+								return $$props.options;
+							} });
+						},
+						$$slots: { default: true }
+					});
+				});
+				var node_2 = $.sibling(node_1, 2);
+				$.snippet(node_2, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	}
+	$.pop();
+}
+//#endregion
+//#region src/components/tree-view/TreeViewNodeCheckbox.svelte
+var rest_excludes = /* @__PURE__ */ new Set([
+	"$$slots",
+	"$$events",
+	"$$legacy",
+	"children"
+]);
+function TreeViewNodeCheckbox($$anchor, $$props) {
+	let rest = $.rest_props($$props, rest_excludes);
+	var fragment = $.comment();
+	var node = $.first_child(fragment);
+	$.component(node, () => TreeView.NodeCheckbox, ($$anchor, ArkTreeView_NodeCheckbox) => {
+		ArkTreeView_NodeCheckbox($$anchor, $.spread_props(() => rest, {
+			"aria-hidden": "true",
+			children: ($$anchor, $$slotProps) => {
+				var fragment_1 = $.comment();
+				var node_1 = $.first_child(fragment_1);
+				$.snippet(node_1, () => $$props.children ?? $.noop);
+				$.append($$anchor, fragment_1);
+			},
+			$$slots: { default: true }
+		}));
+	});
+	$.append($$anchor, fragment);
+}
+//#endregion
+export { TreeViewBranchIndicator as i, TreeView$1 as n, TreeViewRoot as r, TreeViewNodeCheckbox as t };

package/dist/{affix-BtL4lBPi.mjs → affix-zZj9e2iB.mjs}

@@ -1,6 +1,7 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/affix/Affix.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -14,15 +15,15 @@ var root = $.from_html(`<div><!></div>`);
 function Affix$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("affix");
-	let offsetTop = $.prop($$props, "offsetTop", 3, "0px"), offsetBottom = $.prop($$props, "offsetBottom", 3, "0px"), rest = $.rest_props($$props, rest_excludes);
+	let rest = $.rest_props($$props, rest_excludes);
 	var div = root();
 	$.attribute_effect(div, () => ({
 		...rest,
 		"data-scope": "affix",
 		"data-part": "root",
 		[$.STYLE]: {
-			top: offsetTop(),
-			bottom: offsetBottom()
+			"--bs-affix-top": $$props.offsetTop,
+			"--bs-affix-bottom": $$props.offsetBottom
 		}
 	}));
 	var node = $.child(div);
@@ -40,6 +41,6 @@ function Affix$1($$anchor, $$props) {
 * exactly as it does on the page itself, and a parent with
 * `overflow: hidden` clips the pin. Both offsets may be given: the
 * content then holds its place inside that band. */
-const Affix = Affix$1;
+const Affix = withSelfRoot(Affix$1);
 //#endregion
 export { Affix as t };

package/dist/{ai-action-DKsvxilp.mjs → ai-action-D3kQhycd.mjs}

@@ -1,7 +1,8 @@
-import { t as Button } from "./button-BCcX7lHq.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "./family-CzLaku1F.mjs";
+import { t as Button } from "./button-Cl45zjdj.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
+import { injectComponentStyle } from "@bysages/core/styling";
 //#region src/components/ai-action/AiAction.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -39,6 +40,6 @@ function AiAction$1($$anchor, $$props) {
 //#region src/components/ai-action/index.ts
 /** A quiet icon button — copy, retry, thumbs. The control is the
 * shared Button in its ghost register. */
-const AiAction = AiAction$1;
+const AiAction = withSelfRoot(AiAction$1);
 //#endregion
 export { AiAction as t };