@bysages/solid 0.3.1 → 0.4.1

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

@@ -1,12 +1,13 @@
-import { injectComponentStyle } from "@bysages/core";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { createComponent, effect, insert, setAttribute, setStyleProperty, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, Show, splitProps } from "solid-js";
 //#region src/components/progress-group/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=progress-group data-part=legend>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<div><div data-scope=progress-group data-part=track>`);
 var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=progress-group data-part=segment role=progressbar aria-valuemin=0>`);
 var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=progress-group data-part=legend-item><span data-scope=progress-group data-part=swatch aria-hidden=true></span><span data-scope=progress-group data-part=legend-label></span><span data-scope=progress-group data-part=legend-value>`);
-function ProgressGroup(props) {
+const ProgressGroup = withSelfRoot(function ProgressGroup(props) {
 	injectComponentStyle("progress-group");
 	const [own, rest] = splitProps(props, [
 		"segments",
@@ -44,7 +45,7 @@ function ProgressGroup(props) {
 				t !== _p$?.t && setAttribute(_el$4, "aria-valuenow", t);
 				a !== _p$?.a && setAttribute(_el$4, "aria-valuemax", a);
 				o !== _p$?.o && setAttribute(_el$4, "aria-label", o);
-				i !== _p$?.i && setStyleProperty(_el$4, "inline-size", i);
+				i !== _p$?.i && setStyleProperty(_el$4, "--bs-progress-group-share", i);
 			});
 			return _el$4;
 		})()
@@ -79,6 +80,6 @@ function ProgressGroup(props) {
 		}
 	}), null);
 	return _el$;
-}
+});
 //#endregion
 export { ProgressGroup };

package/dist/components/qr-code/index.d.mts

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 import { QrCode as QrCode$1 } from "@ark-ui/solid/qr-code";
 //#region src/components/qr-code/index.d.ts
 /** Ark's QrCode, dressed in the paper-and-ink system: the pattern prints in
  * ink on the page, with an optional paper badge and a seal-cut download
  * control. The API is Ark's own — Root, Frame, Pattern, Overlay,
  * DownloadTrigger. */
-export declare const QrCode: typeof QrCode$1;
+declare function QrCodeRoot(props: ComponentProps<typeof QrCode$1.Root>): import("solid-js").JSX.Element;
+export declare const QrCode: typeof QrCodeRoot & Omit<typeof QrCode$1, "Root"> & {
+  Root: typeof QrCodeRoot;
+};
 //#endregion

package/dist/components/qr-code/index.mjs

@@ -1,11 +1,23 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 import { QrCode as QrCode$1 } from "@ark-ui/solid/qr-code";
 //#region src/components/qr-code/index.ts
 /** Ark's QrCode, dressed in the paper-and-ink system: the pattern prints in
 * ink on the page, with an optional paper badge and a seal-cut download
 * control. The API is Ark's own — Root, Frame, Pattern, Overlay,
 * DownloadTrigger. */
-const QrCode = QrCode$1;
+function QrCodeRoot(props) {
+	const id = useElementId("qr-code", () => props.id);
+	return createComponent(QrCode$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const QrCode = defineFamily(QrCodeRoot, {
+	...QrCode$1,
+	Root: QrCodeRoot
+});
 injectComponentStyle("qr-code");
 //#endregion
 export { QrCode };

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

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

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

@@ -1,18 +1,26 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 import { RadioGroup as RadioGroup$1 } from "@ark-ui/solid/radio-group";
 //#region src/components/radio-group/index.tsx
 function RadioGroupRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(RadioGroup$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("radio-group", () => rest.id);
+	return createComponent(RadioGroup$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const RadioGroup = {
+const RadioGroup = defineFamily(RadioGroupRoot, {
 	...RadioGroup$1,
 	Root: RadioGroupRoot
-};
+});
 injectComponentStyle("radio-group");
 //#endregion
 export { RadioGroup };

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

@@ -1,7 +1,7 @@
 import { RatingGroup as RatingGroup$1, RatingGroupRootProps } from "@ark-ui/solid/rating-group";
 //#region src/components/rating-group/index.d.ts
 /** Ark's RatingGroup, dressed in the paper-and-ink system: a row of quiet
- * seals whose glyphs take the primary pigment as they light up. The API is
+ * seals whose icons take the primary pigment as they light up. The API is
  * Ark's own — Root, Label, Control, Item, HiddenInput (plus the Context and
  * ItemContext render helpers). */
 type RatingGroupOwnProps = {
@@ -9,7 +9,7 @@ type RatingGroupOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function RatingGroupRoot(props: RatingGroupRootProps & RatingGroupOwnProps): import("solid-js").JSX.Element;
-export declare const RatingGroup: Omit<typeof RatingGroup$1, "Root"> & {
+export declare const RatingGroup: typeof RatingGroupRoot & Omit<typeof RatingGroup$1, "Root"> & {
   Root: typeof RatingGroupRoot;
 };
 //#endregion

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

@@ -1,18 +1,26 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { createComponent, mergeProps } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 import { RatingGroup as RatingGroup$1 } from "@ark-ui/solid/rating-group";
 //#region src/components/rating-group/index.tsx
 function RatingGroupRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(RatingGroup$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("rating-group", () => rest.id);
+	return createComponent(RatingGroup$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const RatingGroup = {
+const RatingGroup = defineFamily(RatingGroupRoot, {
 	...RatingGroup$1,
 	Root: RatingGroupRoot
-};
+});
 injectComponentStyle("rating-group");
 //#endregion
 export { RatingGroup };

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

@@ -12,7 +12,7 @@ export declare function ResultIcon(props: JSX.HTMLAttributes<HTMLDivElement>): J
 /** A verdict drawn after the deed: the mark washes in the fixed
  * pigment, the title rides the serif, and the extra carries the way
  * onward. Any subset composes. */
-export declare const Result: {
+export declare const Result: typeof ResultRoot & {
   Root: typeof ResultRoot;
   Icon: typeof ResultIcon;
   Title: (props: JSX.HTMLAttributes<HTMLElement>) => JSX.Element;

package/dist/components/result/index.mjs

@@ -1,10 +1,12 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as iconBody } from "../../icon-DTqmJCd5.mjs";
 import { createComponent, effect, insert, mergeProps, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/result/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
-const MARK = { __html: "<g data-for=\"success\"><path d=\"M20 6 9 17l-5-5\"/></g><g data-for=\"warning\"><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></g><g data-for=\"danger\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/></g><g data-for=\"info\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></g>" };
+const MARK = { __html: `<g data-for="success">${iconBody("check")}</g><g data-for="warning">${iconBody("triangle-alert")}</g><g data-for="danger">${iconBody("circle-x")}</g><g data-for="info">${iconBody("info")}</g>` };
 function ResultRoot(props) {
 	injectComponentStyle("result");
 	const [own, rest] = splitProps(props, ["status"]);
@@ -55,12 +57,12 @@ function part(name, tag) {
 /** A verdict drawn after the deed: the mark washes in the fixed
 * pigment, the title rides the serif, and the extra carries the way
 * onward. Any subset composes. */
-const Result = {
+const Result = defineFamily(ResultRoot, {
 	Root: ResultRoot,
 	Icon: ResultIcon,
 	Title: part("title", "h3"),
 	Description: part("description", "p"),
 	Extra: part("extra", "div")
-};
+});
 //#endregion
 export { Result, ResultIcon, ResultRoot };

package/dist/components/scroll-area/index.d.mts

@@ -1,7 +1,11 @@
+import { ComponentProps } from "solid-js";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/solid/scroll-area";
 //#region src/components/scroll-area/index.d.ts
 /** Ark's ScrollArea, dressed in the paper-and-ink system: native bars
  * give way to quiet ink lanes that surface on hover and scroll. The API
  * is Ark's own — Root, Viewport, Content, Scrollbar, Thumb, Corner. */
-export declare const ScrollArea: typeof ScrollArea$1;
+declare function ScrollAreaRoot(props: ComponentProps<typeof ScrollArea$1.Root>): import("solid-js").JSX.Element;
+export declare const ScrollArea: typeof ScrollAreaRoot & Omit<typeof ScrollArea$1, "Root"> & {
+  Root: typeof ScrollAreaRoot;
+};
 //#endregion

package/dist/components/scroll-area/index.mjs

@@ -1,10 +1,22 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 import { ScrollArea as ScrollArea$1 } from "@ark-ui/solid/scroll-area";
 //#region src/components/scroll-area/index.ts
 /** Ark's ScrollArea, dressed in the paper-and-ink system: native bars
 * give way to quiet ink lanes that surface on hover and scroll. The API
 * is Ark's own — Root, Viewport, Content, Scrollbar, Thumb, Corner. */
-const ScrollArea = ScrollArea$1;
+function ScrollAreaRoot(props) {
+	const id = useElementId("scroll-area", () => props.id);
+	return createComponent(ScrollArea$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const ScrollArea = defineFamily(ScrollAreaRoot, {
+	...ScrollArea$1,
+	Root: ScrollAreaRoot
+});
 injectComponentStyle("scroll-area");
 //#endregion
 export { ScrollArea };

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

@@ -11,7 +11,7 @@ declare function SegmentGroupRoot(props: SegmentGroupRootProps & SegmentGroupOwn
 /** SegmentGroup, dressed in the paper-and-ink system: a hairline tray
  * where one flat ink plate travels beneath the checked seal. The parts - Root, Label, Indicator, Item, ItemText, ItemControl,
  * ItemHiddenInput. */
-export declare const SegmentGroup: Omit<typeof SegmentGroup$1, "Root"> & {
+export declare const SegmentGroup: typeof SegmentGroupRoot & Omit<typeof SegmentGroup$1, "Root"> & {
   Root: typeof SegmentGroupRoot;
 };
 //#endregion

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

@@ -1,23 +1,28 @@
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, splitProps } from "solid-js";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps, splitProps } from "solid-js";
 import { SegmentGroup as SegmentGroup$1 } from "@ark-ui/solid/segment-group";
 //#region src/components/segment-group/index.tsx
 function SegmentGroupRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(SegmentGroup$1.Root, {
+	const id = useElementId("segment-group", () => rest.id);
+	return createComponent(SegmentGroup$1.Root, mergeProps(rest, {
 		get "data-size"() {
 			return own.size ?? "md";
 		},
-		...rest
-	});
+		get id() {
+			return id();
+		}
+	}));
 }
 /** SegmentGroup, dressed in the paper-and-ink system: a hairline tray
 * where one flat ink plate travels beneath the checked seal. The parts - Root, Label, Indicator, Item, ItemText, ItemControl,
 * ItemHiddenInput. */
-const SegmentGroup = {
+const SegmentGroup = defineFamily(SegmentGroupRoot, {
 	...SegmentGroup$1,
 	Root: SegmentGroupRoot
-};
+});
 injectComponentStyle("segment-group");
 //#endregion
 export { SegmentGroup };

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

@@ -1,2 +1,2 @@
-import { i as NativeSelectProps, n as NativeSelect, r as NativeSelectOption, t as Select } from "../../index-YPUiqD3n.mjs";
-export { NativeSelect, type NativeSelectOption, type NativeSelectProps, Select };
+import { a as NativeSelectProps, i as NativeSelectOption, n as SelectFacadeProps, r as NativeSelect, t as Select } from "../../index-ID48LCMU.mjs";
+export { NativeSelect, type NativeSelectOption, type NativeSelectProps, Select, SelectFacadeProps };

package/dist/components/select/index.mjs

@@ -1,2 +1,2 @@
-import { n as NativeSelect, t as Select } from "../../select-CX6OuQlU.mjs";
+import { n as NativeSelect, t as Select } from "../../select-DI7pFspF.mjs";
 export { NativeSelect, Select };

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

@@ -7,5 +7,7 @@ export interface SeparatorProps extends JSX.HTMLAttributes<HTMLDivElement> {
   orientation?: "horizontal" | "vertical";
   decorative?: boolean;
 }
-export declare function Separator(props: SeparatorProps): JSX.Element;
+export declare const Separator: ((props: SeparatorProps) => JSX.Element) & {
+  Root: (props: SeparatorProps) => JSX.Element;
+};
 //#endregion

package/dist/components/separator/index.mjs

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

package/dist/components/signature-pad/index.d.mts

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/solid/signature-pad";
 //#region src/components/signature-pad/index.d.ts
 /** Ark's SignaturePad, dressed in the paper-and-ink system: a quiet paper
  * field with a guide hairline where ink — real ink strokes — is laid down.
  * The API is Ark's own — Root, Label, Control, Segment, SegmentPath, Guide,
  * ClearTrigger, HiddenInput, Context. */
-export declare const SignaturePad: typeof SignaturePad$1;
+declare function SignaturePadRoot(props: ComponentProps<typeof SignaturePad$1.Root>): import("solid-js").JSX.Element;
+export declare const SignaturePad: typeof SignaturePadRoot & Omit<typeof SignaturePad$1, "Root"> & {
+  Root: typeof SignaturePadRoot;
+};
 //#endregion

package/dist/components/signature-pad/index.mjs

@@ -1,11 +1,23 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 import { SignaturePad as SignaturePad$1 } from "@ark-ui/solid/signature-pad";
 //#region src/components/signature-pad/index.ts
 /** Ark's SignaturePad, dressed in the paper-and-ink system: a quiet paper
 * field with a guide hairline where ink — real ink strokes — is laid down.
 * The API is Ark's own — Root, Label, Control, Segment, SegmentPath, Guide,
 * ClearTrigger, HiddenInput, Context. */
-const SignaturePad = SignaturePad$1;
+function SignaturePadRoot(props) {
+	const id = useElementId("signature-pad", () => props.id);
+	return createComponent(SignaturePad$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const SignaturePad = defineFamily(SignaturePadRoot, {
+	...SignaturePad$1,
+	Root: SignaturePadRoot
+});
 injectComponentStyle("signature-pad");
 //#endregion
 export { SignaturePad };

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

@@ -3,5 +3,7 @@ import { JSX } from "solid-js";
 /** A waiting sheet of unset paper. Size it from the outside; the breath
  * is the component's own. */
 export type SkeletonProps = JSX.HTMLAttributes<HTMLDivElement>;
-export declare function Skeleton(props: SkeletonProps): JSX.Element;
+export declare const Skeleton: ((props: SkeletonProps) => JSX.Element) & {
+  Root: (props: SkeletonProps) => JSX.Element;
+};
 //#endregion

package/dist/components/skeleton/index.mjs

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

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

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

package/dist/components/slider/index.mjs

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

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

@@ -5,5 +5,7 @@ export interface SpinnerProps extends JSX.HTMLAttributes<HTMLElement> {
 }
 /** A wheel of waiting: one arc of ink turning about its center. Quiet by
  * default — it reports progress without claiming attention. */
-export declare function Spinner(props: SpinnerProps): JSX.Element;
+export declare const Spinner: ((props: SpinnerProps) => JSX.Element) & {
+  Root: (props: SpinnerProps) => JSX.Element;
+};
 //#endregion

package/dist/components/spinner/index.mjs

@@ -1,12 +1,13 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
 //#region src/components/spinner/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span><svg viewBox="0 0 24 24"fill=none aria-hidden=true><circle cx=12 cy=12 r=9 stroke=currentColor stroke-opacity=0.2 stroke-width=2.5></circle><path d="M21 12a9 9 0 0 0-9-9"stroke=currentColor stroke-width=2.5 stroke-linecap=round>`);
 /** A wheel of waiting: one arc of ink turning about its center. Quiet by
 * default — it reports progress without claiming attention. */
-function Spinner(props) {
+const Spinner = withSelfRoot(function Spinner(props) {
 	injectComponentStyle("spinner");
 	const [own, rest] = splitProps(props, ["size"]);
 	const messages = useComponentMessages();
@@ -23,6 +24,6 @@ function Spinner(props) {
 		}
 	}], true);
 	return _el$;
-}
+});
 //#endregion
 export { Spinner };

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

@@ -1,3 +1,4 @@
+import { Menu } from "../menu/index.mjs";
 import { JSX } from "solid-js";
 //#region src/components/split-button/index.d.ts
 export interface SplitButtonEntry {
@@ -32,5 +33,6 @@ export interface SplitButtonProps extends Omit<JSX.HTMLAttributes<HTMLDivElement
  * button stylesheet's trigger register dresses it. The popup keeps the
  * menu parts untouched.
  */
-export declare function SplitButton(props: SplitButtonProps): JSX.Element;
+declare function SplitButtonImpl(props: SplitButtonProps): JSX.Element;
+export declare const SplitButton: typeof SplitButtonImpl & typeof Menu;
 //#endregion

package/dist/components/split-button/index.mjs

@@ -1,14 +1,17 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { Button } from "../button/index.mjs";
 import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { injectComponentStyle } from "@bysages/core";
+import { Menu as Menu$1 } from "../menu/index.mjs";
 import { createComponent, insert, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
 import { For, splitProps } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Menu } from "@ark-ui/solid/menu";
 //#region src/components/split-button/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<div><!><!>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
-var _tmpl$3 = /* @__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 9 6 6 6-6">`);
 /**
 * A primary action with its alternatives one seam away: the main button
 * fires `onClick`, the fitted arrow opens a paper vessel of the same
@@ -18,7 +21,7 @@ var _tmpl$3 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24
 * button stylesheet's trigger register dresses it. The popup keeps the
 * menu parts untouched.
 */
-function SplitButton(props) {
+function SplitButtonImpl(props) {
 	injectComponentStyle("split-button");
 	injectComponentStyle("menu");
 	const [own, rest] = splitProps(props, [
@@ -35,6 +38,7 @@ function SplitButton(props) {
 	const variant = () => own.variant ?? "solid";
 	const tone = () => own.tone ?? "ink";
 	const size = () => own.size ?? "md";
+	const id = useElementId("split-button-menu");
 	const messages = useComponentMessages();
 	var _el$ = _tmpl$();
 	var _el$2 = _el$.firstChild;
@@ -62,6 +66,9 @@ function SplitButton(props) {
 		}
 	}), _el$2);
 	insert(_el$, createComponent(Menu.Root, {
+		get id() {
+			return id();
+		},
 		positioning: { placement: "bottom-end" },
 		get children() {
 			return [createComponent(Menu.Trigger, { asChild: (propsFn) => (() => {
@@ -122,7 +129,11 @@ function SplitButton(props) {
 }
 /** One stroke pointing down: all a fitted dropdown arrow needs. */
 function chevronDown() {
-	return _tmpl$3();
+	return iconNode("chevron-down", {
+		width: "16",
+		height: "16"
+	});
 }
+const SplitButton = defineFamily(SplitButtonImpl, Menu$1);
 //#endregion
 export { SplitButton };

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

@@ -1,7 +1,11 @@
+import { ComponentProps } from "solid-js";
 import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
 //#region src/components/splitter/index.d.ts
 /** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
  * a hairline and a small paper-seal thumb answers the hand. The API is
  * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
-export declare const Splitter: typeof Splitter$1;
+declare function SplitterRoot(props: ComponentProps<typeof Splitter$1.Root>): import("solid-js").JSX.Element;
+export declare const Splitter: typeof SplitterRoot & Omit<typeof Splitter$1, "Root"> & {
+  Root: typeof SplitterRoot;
+};
 //#endregion

package/dist/components/splitter/index.mjs

@@ -1,10 +1,22 @@
-import { injectComponentStyle } from "@bysages/core";
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { createComponent, mergeProps } from "solid-js";
 import { Splitter as Splitter$1 } from "@ark-ui/solid/splitter";
 //#region src/components/splitter/index.ts
 /** Ark's Splitter, dressed in the paper-and-ink system: panels divide on
 * a hairline and a small paper-seal thumb answers the hand. The API is
 * Ark's own — Root, Panel, ResizeTrigger, ResizeTriggerIndicator. */
-const Splitter = Splitter$1;
+function SplitterRoot(props) {
+	const id = useElementId("splitter", () => props.id);
+	return createComponent(Splitter$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Splitter = defineFamily(SplitterRoot, {
+	...Splitter$1,
+	Root: SplitterRoot
+});
 injectComponentStyle("splitter");
 //#endregion
 export { Splitter };

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

@@ -7,5 +7,7 @@ export interface SpotlightProps extends JSX.HTMLAttributes<HTMLDivElement> {
 /** The ink-light card: a vessel whose rim and face take light from the
  * reader's hand. The wrapper only measures and writes the geometry —
  * the lamp itself is the two layers the stylesheet paints. */
-export declare function Spotlight(props: SpotlightProps): JSX.Element;
+export declare const Spotlight: ((props: SpotlightProps) => JSX.Element) & {
+  Root: (props: SpotlightProps) => JSX.Element;
+};
 //#endregion