@bysages/solid 0.3.1 → 0.4.0

package/dist/components/ai-reasoning/index.mjs

@@ -1,4 +1,5 @@
-import { t as chevron } from "../../chevron-D5RzcayK.mjs";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { t as chevron } from "../../chevron-BHQrYKPM.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, template } from "@solidjs/web";
@@ -8,7 +9,7 @@ var _tmpl$ = /* @__PURE__ */ template(`<span>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=ai data-part=reasoning-content>`);
 /** The model's thought, folded by the shared collapsible in its quiet
 * register: bare ink for a trigger, the thought on one hairline. */
-function Reasoning(props) {
+const Reasoning = withSelfRoot(function Reasoning(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, ["label", "children"]);
 	return createComponent(Collapsible.Root, mergeProps(rest, {
@@ -33,6 +34,6 @@ function Reasoning(props) {
 			} })];
 		}
 	}));
-}
+});
 //#endregion
 export { Reasoning as AiReasoning, Reasoning };

package/dist/components/ai-response/index.d.mts

@@ -15,6 +15,8 @@ export interface ResponseProps extends JSX.HTMLAttributes<HTMLDivElement> {
 /** Markdown set on the paper. Rendering goes through
  * `@tanstack/markdown`, whose defaults leave raw HTML and executable
  * links inert — streaming-safe by construction. */
-export declare function Response(props: ResponseProps): JSX.Element;
+export declare const Response: ((props: ResponseProps) => JSX.Element) & {
+  Root: (props: ResponseProps) => JSX.Element;
+};
 //#endregion
 export { Response as AiResponse };

package/dist/components/ai-response/index.mjs

@@ -1,2 +1,2 @@
-import { t as Response } from "../../ai-response-slzE03wh.mjs";
+import { t as Response } from "../../ai-response-D2uINBIi.mjs";
 export { Response as AiResponse, Response };

package/dist/components/ai-source/index.d.mts

@@ -6,8 +6,12 @@ export interface SourceProps extends JSX.HTMLAttributes<HTMLAnchorElement> {
   href: string;
 }
 /** One place the ink came from; href and the rest ride the anchor. */
-export declare function Source(props: SourceProps): JSX.Element;
+export declare const Source: ((props: SourceProps) => JSX.Element) & {
+  Root: (props: SourceProps) => JSX.Element;
+};
 /** The reading list under a response: where this ink came from. */
-export declare function Sources(props: JSX.HTMLAttributes<HTMLOListElement>): JSX.Element;
+export declare const Sources: ((props: JSX.HTMLAttributes<HTMLOListElement>) => JSX.Element) & {
+  Root: (props: JSX.HTMLAttributes<HTMLOListElement>) => JSX.Element;
+};
 //#endregion
 export { Source as AiSource, Sources as AiSources };

package/dist/components/ai-source/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { claimElement, insert, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,7 +6,7 @@ import { splitProps } from "solid-js";
 var _tmpl$ = /* @__PURE__ */ template(`<li data-scope=ai data-part=source><a>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<ol>`);
 /** One place the ink came from; href and the rest ride the anchor. */
-function Source(props) {
+const Source = withSelfRoot(function Source(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, ["href", "children"]);
 	var _el$ = _tmpl$();
@@ -22,15 +23,15 @@ function Source(props) {
 		return own.children ?? own.href;
 	});
 	return _el$;
-}
+});
 /** The reading list under a response: where this ink came from. */
-function Sources(props) {
+const Sources = withSelfRoot(function Sources(props) {
 	var _el$3 = _tmpl$2();
 	spread(_el$3, [props, {
 		"data-scope": "ai",
 		"data-part": "sources"
 	}], false);
 	return _el$3;
-}
+});
 //#endregion
 export { Source as AiSource, Source, Sources as AiSources, Sources };

package/dist/components/ai-suggestion/index.d.mts

@@ -8,6 +8,8 @@ export interface SuggestionProps extends Omit<JSX.HTMLAttributes<HTMLButtonEleme
 }
 /** A seal-cut button proposing the next stroke; selection hands back
  * the prompt. The shared Button in its outline register. */
-export declare function Suggestion(props: SuggestionProps): JSX.Element;
+export declare const Suggestion: ((props: SuggestionProps) => JSX.Element) & {
+  Root: (props: SuggestionProps) => JSX.Element;
+};
 //#endregion
 export { Suggestion as AiSuggestion };

package/dist/components/ai-suggestion/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
@@ -5,7 +6,7 @@ import { splitProps } from "solid-js";
 //#region src/components/ai-suggestion/index.tsx
 /** A seal-cut button proposing the next stroke; selection hands back
 * the prompt. The shared Button in its outline register. */
-function Suggestion(props) {
+const Suggestion = withSelfRoot(function Suggestion(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, ["prompt", "onSelect"]);
 	return createComponent(Button, mergeProps({
@@ -17,6 +18,6 @@ function Suggestion(props) {
 			return own.prompt;
 		}
 	}));
-}
+});
 //#endregion
 export { Suggestion as AiSuggestion, Suggestion };

package/dist/components/ai-tool/index.d.mts

@@ -18,6 +18,8 @@ export interface ToolProps extends JSX.HTMLAttributes<HTMLDivElement> {
 /** A tool call: the shared collapsible as the vessel — the name it was
  * reached by and the state it reached in on the trigger, its input and
  * output folded inside. */
-export declare function Tool(props: ToolProps): JSX.Element;
+export declare const Tool: ((props: ToolProps) => JSX.Element) & {
+  Root: (props: ToolProps) => JSX.Element;
+};
 //#endregion
 export { Tool as AiTool };

package/dist/components/ai-tool/index.mjs

@@ -1,4 +1,5 @@
-import { t as chevron } from "../../chevron-D5RzcayK.mjs";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { t as chevron } from "../../chevron-BHQrYKPM.mjs";
 import { Collapsible } from "../collapsible/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, template } from "@solidjs/web";
@@ -13,7 +14,7 @@ var _tmpl$6 = /* @__PURE__ */ template(`<div data-scope=ai data-part=tool-body><
 /** A tool call: the shared collapsible as the vessel — the name it was
 * reached by and the state it reached in on the trigger, its input and
 * output folded inside. */
-function Tool(props) {
+const Tool = withSelfRoot(function Tool(props) {
 	injectComponentStyle("ai");
 	const [own, rest] = splitProps(props, [
 		"name",
@@ -85,6 +86,6 @@ function Tool(props) {
 			return _el$3;
 		} })];
 	} }));
-}
+});
 //#endregion
 export { Tool as AiTool, Tool };

package/dist/components/alert/index.mjs

@@ -1,26 +1,23 @@
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { createComponent, insert, spread, template } from "@solidjs/web";
 import { createContext, splitProps, useContext } from "solid-js";
 //#region src/components/alert/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<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>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<span data-scope=alert data-part=icon>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<p>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=alert data-part=icon>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<p>`);
 const StatusContext = createContext(() => "ink");
-function glyph(status) {
-	const paths = {
-		info: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
-		success: "m4 12.5 5 5L20 6.5",
-		warning: "M12 4 2.5 20h19L12 4Zm0 6v4m0 3v.01",
-		danger: "M6 6l12 12M18 6 6 18",
-		ink: "M12 8v5m0 3v.01M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z"
-	};
-	var _el$ = _tmpl$();
-	var _el$2 = _el$.firstChild;
-	effect(() => paths[status], (_v$) => {
-		setAttribute(_el$2, "d", _v$);
+function statusIcon(status) {
+	return iconNode({
+		ink: "info",
+		info: "info",
+		success: "circle-check",
+		warning: "triangle-alert",
+		danger: "circle-x"
+	}[status], {
+		width: "16",
+		height: "16"
 	});
-	return _el$;
 }
 function AlertRoot(props) {
 	const [own, rest] = splitProps(props, ["status"]);
@@ -28,8 +25,8 @@ function AlertRoot(props) {
 	return createComponent(StatusContext.Provider, {
 		value: status,
 		get children() {
-			var _el$3 = _tmpl$2();
-			spread(_el$3, [rest, {
+			var _el$ = _tmpl$();
+			spread(_el$, [rest, {
 				get role() {
 					return status() === "ink" || status() === "info" ? "status" : "alert";
 				},
@@ -39,41 +36,41 @@ function AlertRoot(props) {
 					return status();
 				}
 			}], false);
-			return _el$3;
+			return _el$;
 		}
 	});
 }
 function Icon() {
 	const status = useContext(StatusContext);
-	var _el$4 = _tmpl$3();
-	insert(_el$4, () => {
-		return glyph(status());
+	var _el$2 = _tmpl$2();
+	insert(_el$2, () => {
+		return statusIcon(status());
 	});
-	return _el$4;
+	return _el$2;
 }
 function Body(props) {
-	var _el$5 = _tmpl$2();
-	spread(_el$5, [props, {
+	var _el$3 = _tmpl$();
+	spread(_el$3, [props, {
 		"data-scope": "alert",
 		"data-part": "body"
 	}], false);
-	return _el$5;
+	return _el$3;
 }
 function Title(props) {
-	var _el$6 = _tmpl$4();
-	spread(_el$6, [props, {
+	var _el$4 = _tmpl$3();
+	spread(_el$4, [props, {
 		"data-scope": "alert",
 		"data-part": "title"
 	}], false);
-	return _el$6;
+	return _el$4;
 }
 function Description(props) {
-	var _el$7 = _tmpl$4();
-	spread(_el$7, [props, {
+	var _el$5 = _tmpl$3();
+	spread(_el$5, [props, {
 		"data-scope": "alert",
 		"data-part": "description"
 	}], false);
-	return _el$7;
+	return _el$5;
 }
 const Alert = Object.assign(AlertRoot, {
 	Root: AlertRoot,

package/dist/components/angle-slider/index.d.mts

@@ -9,7 +9,7 @@ type AngleSliderOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function AngleSliderRoot(props: AngleSliderRootProps & AngleSliderOwnProps): import("solid-js").JSX.Element;
-export declare const AngleSlider: Omit<typeof AngleSlider$1, "Root"> & {
+export declare const AngleSlider: typeof AngleSliderRoot & Omit<typeof AngleSlider$1, "Root"> & {
   Root: typeof AngleSliderRoot;
 };
 //#endregion

package/dist/components/angle-slider/index.mjs

@@ -1,3 +1,5 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,14 +7,20 @@ import { AngleSlider as AngleSlider$1 } from "@ark-ui/solid/angle-slider";
 //#region src/components/angle-slider/index.tsx
 function AngleSliderRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(AngleSlider$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("angle-slider", () => rest.id);
+	return createComponent(AngleSlider$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const AngleSlider = {
+const AngleSlider = defineFamily(AngleSliderRoot, {
 	...AngleSlider$1,
 	Root: AngleSliderRoot
-};
+});
 injectComponentStyle("angle-slider");
 //#endregion
 export { AngleSlider };

package/dist/components/aspect-ratio/index.d.mts

@@ -6,5 +6,7 @@ export interface AspectRatioProps extends JSX.HTMLAttributes<HTMLDivElement> {
   /** A CSS `aspect-ratio` value — "16 / 9", "4 / 3", "1 / 1". */
   ratio?: string;
 }
-export declare function AspectRatio(props: AspectRatioProps): JSX.Element;
+export declare const AspectRatio: ((props: AspectRatioProps) => JSX.Element) & {
+  Root: (props: AspectRatioProps) => JSX.Element;
+};
 //#endregion

package/dist/components/aspect-ratio/index.mjs

@@ -1,9 +1,10 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/aspect-ratio/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-function AspectRatio(props) {
+const AspectRatio = withSelfRoot(function AspectRatio(props) {
 	injectComponentStyle("aspect-ratio");
 	const [own, rest] = splitProps(props, ["ratio"]);
 	var _el$ = _tmpl$();
@@ -18,6 +19,6 @@ function AspectRatio(props) {
 		"data-part": "root"
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { AspectRatio };

package/dist/components/autocomplete/index.d.mts

@@ -1,5 +1,7 @@
+import { Combobox } from "../combobox/index.mjs";
 //#region src/components/autocomplete/index.d.ts
 export interface AutoCompleteProps {
+  id?: string;
   value?: string;
   items?: string[];
   placeholder?: string;
@@ -17,5 +19,6 @@ export interface AutoCompleteProps {
  * matching is a case-insensitive substring unless `filter` says
  * otherwise.
  */
-export declare function AutoComplete(props: AutoCompleteProps): import("solid-js").JSX.Element;
+declare function AutoCompleteImpl(props: AutoCompleteProps): import("solid-js").JSX.Element;
+export declare const AutoComplete: typeof AutoCompleteImpl & typeof Combobox;
 //#endregion

package/dist/components/autocomplete/index.mjs

@@ -1,4 +1,7 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { Combobox as Combobox$1 } from "../combobox/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { For, splitProps } from "solid-js";
@@ -14,10 +17,11 @@ import { Portal } from "solid-js/web";
 * matching is a case-insensitive substring unless `filter` says
 * otherwise.
 */
-function AutoComplete(props) {
+function AutoCompleteImpl(props) {
 	const messages = useComponentMessages();
 	injectComponentStyle("combobox");
 	const [own, rest] = splitProps(props, [
+		"id",
 		"value",
 		"items",
 		"placeholder",
@@ -25,11 +29,15 @@ function AutoComplete(props) {
 		"filter",
 		"onValueChange"
 	]);
+	const id = useElementId("autocomplete", () => props.id);
 	const { collection, filter } = useListCollection({
 		initialItems: own.items ?? [],
 		filter: (item, input) => own.filter ? own.filter(item, input) : item.toLowerCase().includes(input.toLowerCase())
 	});
 	return createComponent(Combobox.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
 		get collection() {
 			return collection();
 		},
@@ -76,5 +84,6 @@ function AutoComplete(props) {
 		}
 	}));
 }
+const AutoComplete = defineFamily(AutoCompleteImpl, Combobox$1);
 //#endregion
 export { AutoComplete };

package/dist/components/avatar/index.d.mts

@@ -17,7 +17,7 @@ export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
   shape?: "circle" | "square";
 }
 declare function AvatarRoot(props: AvatarProps): import("solid-js").JSX.Element;
-export declare const Avatar: typeof Avatar$1 & {
+export declare const Avatar: typeof AvatarRoot & Omit<typeof Avatar$1, "Root"> & {
   Root: typeof AvatarRoot;
 };
 //#endregion

package/dist/components/avatar/index.mjs

@@ -1,3 +1,5 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,7 +7,11 @@ import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
 //#region src/components/avatar/index.tsx
 function AvatarRoot(props) {
 	const [own, rest] = splitProps(props, ["size", "shape"]);
+	const id = useElementId("avatar", () => rest.id);
 	return createComponent(Avatar$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
 		get "data-size"() {
 			return own.size;
 		},
@@ -14,7 +20,10 @@ function AvatarRoot(props) {
 		}
 	}));
 }
-const Avatar = Object.assign({}, Avatar$1, { Root: AvatarRoot });
+const Avatar = defineFamily(AvatarRoot, {
+	...Avatar$1,
+	Root: AvatarRoot
+});
 injectComponentStyle("avatar");
 //#endregion
 export { Avatar };

package/dist/components/avatar-group/index.d.mts

@@ -7,5 +7,7 @@ export interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
    * stylesheet to re-point the avatars' measure. */
   size?: "sm" | "md" | "lg";
 }
-export declare function AvatarGroup(props: AvatarGroupProps): JSX.Element;
+export declare const AvatarGroup: ((props: AvatarGroupProps) => JSX.Element) & {
+  Root: (props: AvatarGroupProps) => JSX.Element;
+};
 //#endregion

package/dist/components/avatar-group/index.mjs

@@ -1,9 +1,10 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/avatar-group/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-function AvatarGroup(props) {
+const AvatarGroup = withSelfRoot(function AvatarGroup(props) {
 	injectComponentStyle("avatar-group");
 	const [own, rest] = splitProps(props, ["size"]);
 	var _el$ = _tmpl$();
@@ -15,6 +16,6 @@ function AvatarGroup(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { AvatarGroup };

package/dist/components/back-top/index.d.mts

@@ -25,5 +25,7 @@ export interface BackTopProps extends JSX.HTMLAttributes<HTMLButtonElement> {
  * paper, hairline and halo are its; this family owns only the floating
  * and the entrance.
  */
-export declare function BackTop(props: BackTopProps): JSX.Element;
+export declare const BackTop: ((props: BackTopProps) => JSX.Element) & {
+  Root: (props: BackTopProps) => JSX.Element;
+};
 //#endregion

package/dist/components/back-top/index.mjs

@@ -1,10 +1,11 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { createSignal, onCleanup, onMount, splitProps } from "solid-js";
 //#region src/components/back-top/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<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 14 6-6 6 6">`);
 /**
 * A way home: after the page has scrolled past `threshold`, a small
 * floating control rises at the page's corner and returns the reader to
@@ -19,7 +20,7 @@ var _tmpl$2 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24
 * paper, hairline and halo are its; this family owns only the floating
 * and the entrance.
 */
-function BackTop(props) {
+const BackTop = withSelfRoot(function BackTop(props) {
 	injectComponentStyle("back-top");
 	const [own, rest] = splitProps(props, [
 		"threshold",
@@ -84,10 +85,13 @@ function BackTop(props) {
 		}
 	})));
 	return _el$;
-}
-/** The single glyph a way-home control needs: one stroke pointing up. */
+});
+/** The single icon a way-home control needs: one stroke pointing up. */
 function chevronUp() {
-	return _tmpl$2();
+	return iconNode("chevron-up", {
+		width: "16",
+		height: "16"
+	});
 }
 //#endregion
 export { BackTop };

package/dist/components/badge/index.d.mts

@@ -6,5 +6,7 @@ export interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   tone?: "ink" | "info" | "success" | "warning" | "danger";
   variant?: "solid" | "subtle" | "outline";
 }
-export declare function Badge(props: BadgeProps): JSX.Element;
+export declare const Badge: ((props: BadgeProps) => JSX.Element) & {
+  Root: (props: BadgeProps) => JSX.Element;
+};
 //#endregion

package/dist/components/badge/index.mjs

@@ -1,9 +1,10 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/badge/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);
-function Badge(props) {
+const Badge = withSelfRoot(function Badge(props) {
 	injectComponentStyle("badge");
 	const [own, rest] = splitProps(props, ["tone", "variant"]);
 	var _el$ = _tmpl$();
@@ -18,6 +19,6 @@ function Badge(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Badge };

package/dist/components/banner/index.mjs

@@ -1,10 +1,11 @@
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps, spread, template } from "@solidjs/web";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/banner/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button><svg viewBox="0 0 16 16"fill=none aria-hidden=true><path d="M4 4l8 8M12 4l-8 8"stroke=currentColor stroke-width=1.5 stroke-linecap=round>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
 /** A page-level notice, spoken across the full measure: a wash of the
 * status pigment, one heavier hairline on the leading edge, and room
 * for actions and a quiet close. Ink is the neutral register; the four
@@ -53,6 +54,9 @@ function Close(props) {
 		"data-scope": "banner",
 		"data-part": "close"
 	}], true);
+	insert(_el$2, () => {
+		return iconNode("x");
+	});
 	return _el$2;
 }
 const Banner = Object.assign(Root, {

package/dist/components/block-ui/index.d.mts

@@ -8,5 +8,7 @@ export interface BlockUIProps extends JSX.HTMLAttributes<HTMLDivElement> {
 /** A curtain over content that must wait: the blocked region keeps its
  * shape and dims under frosted paper while a quiet wheel reports the
  * wait. Callers own the state; the curtain only answers it. */
-export declare function BlockUI(props: BlockUIProps): JSX.Element;
+export declare const BlockUI: ((props: BlockUIProps) => JSX.Element) & {
+  Root: (props: BlockUIProps) => JSX.Element;
+};
 //#endregion

package/dist/components/block-ui/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { Spinner } from "../spinner/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, spread, template } from "@solidjs/web";
@@ -8,7 +9,7 @@ var _tmpl$2 = /* @__PURE__ */ template(`<div><!><!>`);
 /** A curtain over content that must wait: the blocked region keeps its
 * shape and dims under frosted paper while a quiet wheel reports the
 * wait. Callers own the state; the curtain only answers it. */
-function BlockUI(props) {
+const BlockUI = withSelfRoot(function BlockUI(props) {
 	injectComponentStyle("block-ui");
 	const [own, rest] = splitProps(props, ["blocked", "children"]);
 	var _el$ = _tmpl$2();
@@ -38,6 +39,6 @@ function BlockUI(props) {
 		}
 	}), _el$4);
 	return _el$;
-}
+});
 //#endregion
 export { BlockUI };

package/dist/components/button/index.d.mts

@@ -11,5 +11,7 @@ export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement>
   /** Icon-only: the silhouette squares to the control height. */
   square?: boolean;
 }
-export declare function Button(props: ButtonProps): JSX.Element;
+export declare const Button: ((props: ButtonProps) => JSX.Element) & {
+  Root: (props: ButtonProps) => JSX.Element;
+};
 //#endregion

package/dist/components/button/index.mjs

@@ -1,9 +1,10 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/button/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<button>`);
-function Button(props) {
+const Button = withSelfRoot(function Button(props) {
 	injectComponentStyle("button");
 	const [own, rest] = splitProps(props, [
 		"variant",
@@ -38,6 +39,6 @@ function Button(props) {
 		"data-motion": "ink-ripple lit"
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Button };