@bysages/svelte 0.3.0 → 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/messages-DNzA55pH.mjs

@@ -0,0 +1,17 @@
+import { n as useConfig } from "./context-Da-QMQRq.mjs";
+import { resolveComponentMessages } from "@bysages/core";
+//#region src/components/config-provider/messages.ts
+/** Resolve the nearest provider's locale and overrides into one complete
+* message table; calling the selector keeps each read live with provider
+* props. */
+function useComponentMessages() {
+	const config = useConfig();
+	return () => resolveComponentMessages(config.locale ?? "en", config.messages);
+}
+/** Substitute `{name}` leaves with caller values; unknown leaves stay
+* visible so a typo cannot turn an accessible name silent. */
+function formatMessage(template, values) {
+	return template.replace(/\{(\w+)\}/g, (match, key) => key in values ? String(values[key]) : match);
+}
+//#endregion
+export { useComponentMessages as n, formatMessage as t };

package/dist/{order-list-q7VlsbmU.mjs → order-list-CoE45N5_.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";
@@ -10,12 +12,13 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"options",
 	"label"
 ]);
-var root = $.from_html(`<li role="option" aria-selected="true" draggable="" data-scope="order-list" data-part="item"><span data-scope="order-list" data-part="grip" aria-hidden="true">⋮⋮</span> <span data-scope="order-list" data-part="label"> </span> <span data-scope="order-list" data-part="controls"><button type="button" aria-label="Move to top" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"></path><path d="M5 4h14"></path></svg></button> <button type="button" aria-label="Move up" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"></path></svg></button> <button type="button" aria-label="Move down" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button> <button type="button" aria-label="Move to bottom" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path><path d="M5 20h14"></path></svg></button></span></li>`);
+var root = $.from_html(`<li draggable="" aria-roledescription="Sortable item" data-scope="order-list" data-part="item"><span data-scope="order-list" data-part="grip" aria-hidden="true">⋮⋮</span> <span data-scope="order-list" data-part="label"> </span> <span data-scope="order-list" data-part="controls"><button type="button" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"></path><path d="M5 4h14"></path></svg></button> <button type="button" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"></path></svg></button> <button type="button" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button> <button type="button" data-scope="order-list" data-part="move"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"></path><path d="M5 20h14"></path></svg></button></span></li>`);
 var root_1 = $.from_html(`<div><ol data-scope="order-list" data-part="list"></ol></div>`);
 function OrderList$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("order-list");
 	let value = $.prop($$props, "value", 31, () => $.proxy([])), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	let dragging = $.state(null);
 	let dropLine = $.state(null);
 	const rows = $.derived(() => value().map((entry) => $$props.options.find((option) => option.value === entry)).filter((option) => option != null));
@@ -51,9 +54,6 @@ function OrderList$1($$anchor, $$props) {
 	};
 	$.attribute_effect(div, () => ({
 		...rest,
-		role: "listbox",
-		"aria-label": $$props.label,
-		"aria-multiselectable": false,
 		"data-scope": "order-list",
 		"data-part": "root",
 		ondragleave: event_handler
@@ -70,15 +70,24 @@ function OrderList$1($$anchor, $$props) {
 		var button_3 = $.sibling(button_2, 2);
 		$.reset(span_1);
 		$.reset(li);
-		$.template_effect(() => {
+		$.template_effect(($0, $1, $2, $3) => {
 			$.set_attribute(li, "data-dragging", $.get(dragging) === $.get(option).value ? "" : void 0);
 			$.set_attribute(li, "data-drop-line", $.get(dropLine) && $.get(dropLine).index === $.get(index) ? $.get(dropLine).before ? "top" : "bottom" : void 0);
 			$.set_text(text, $.get(option).label);
+			$.set_attribute(button, "aria-label", $0);
 			button.disabled = $.get(index) === 0;
+			$.set_attribute(button_1, "aria-label", $1);
 			button_1.disabled = $.get(index) === 0;
+			$.set_attribute(button_2, "aria-label", $2);
 			button_2.disabled = $.get(index) === $.get(rows).length - 1;
+			$.set_attribute(button_3, "aria-label", $3);
 			button_3.disabled = $.get(index) === $.get(rows).length - 1;
-		});
+		}, [
+			() => messages().orderList.toTop,
+			() => messages().orderList.moveUp,
+			() => messages().orderList.moveDown,
+			() => messages().orderList.toBottom
+		]);
 		$.event("dragstart", li, (event) => {
 			$.set(dragging, $.get(option).value, true);
 			event.dataTransfer?.setData("text/plain", $.get(option).value);
@@ -107,6 +116,7 @@ function OrderList$1($$anchor, $$props) {
 	});
 	$.reset(ol);
 	$.reset(div);
+	$.template_effect(() => $.set_attribute(ol, "aria-label", $$props.label));
 	$.append($$anchor, div);
 	$.pop();
 }
@@ -115,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-rkY0qJKI.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";
@@ -14,11 +16,13 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"size",
 	"invalid",
 	"placeholder",
-	"disabled"
+	"disabled",
+	"aria-label",
+	"aria-labelledby"
 ]);
 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");
@@ -41,6 +45,8 @@ function NativeSelect$1($$anchor, $$props) {
 	var select = $.child(span);
 	$.attribute_effect(select, () => ({
 		...$.get(fieldProps),
+		"aria-label": $$props["aria-label"],
+		"aria-labelledby": $$props["aria-labelledby"],
 		"data-scope": "select",
 		"data-part": "native",
 		disabled: $.get(isDisabled) || void 0
@@ -72,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);
@@ -85,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 };