@bysages/solid 0.3.0 → 0.4.0

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

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 import { Field as Field$1 } from "@ark-ui/solid/field";
 //#region src/components/field/index.d.ts
 /** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
  * border-and-halo control, and quiet help text. The API is Ark's own —
  * Root, Label, Input, Textarea, Select, HelperText, ErrorText,
  * RequiredIndicator. */
-export declare const Field: typeof Field$1;
+declare function FieldRoot(props: ComponentProps<typeof Field$1.Root>): import("solid-js").JSX.Element;
+export declare const Field: typeof FieldRoot & Omit<typeof Field$1, "Root"> & {
+  Root: typeof FieldRoot;
+};
 //#endregion

package/dist/components/field/index.mjs

@@ -1,11 +1,23 @@
+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 "solid-js";
 import { Field as Field$1 } from "@ark-ui/solid/field";
 //#region src/components/field/index.ts
 /** Ark's Field, dressed in the paper-and-ink system: a tracked label, a
 * border-and-halo control, and quiet help text. The API is Ark's own —
 * Root, Label, Input, Textarea, Select, HelperText, ErrorText,
 * RequiredIndicator. */
-const Field = Field$1;
+function FieldRoot(props) {
+	const id = useElementId("field", () => props.id);
+	return createComponent(Field$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Field = defineFamily(FieldRoot, {
+	...Field$1,
+	Root: FieldRoot
+});
 injectComponentStyle("field");
 //#endregion
 export { Field };

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

@@ -1,7 +1,11 @@
+import { ComponentProps } from "solid-js";
 import { Fieldset as Fieldset$1 } from "@ark-ui/solid/fieldset";
 //#region src/components/fieldset/index.d.ts
 /** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
  * legend heading a column of fields. The API is Ark's own — Root, Legend,
  * HelperText, ErrorText. */
-export declare const Fieldset: typeof Fieldset$1;
+declare function FieldsetRoot(props: ComponentProps<typeof Fieldset$1.Root>): import("solid-js").JSX.Element;
+export declare const Fieldset: typeof FieldsetRoot & Omit<typeof Fieldset$1, "Root"> & {
+  Root: typeof FieldsetRoot;
+};
 //#endregion

package/dist/components/fieldset/index.mjs

@@ -1,10 +1,22 @@
+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 "solid-js";
 import { Fieldset as Fieldset$1 } from "@ark-ui/solid/fieldset";
 //#region src/components/fieldset/index.ts
 /** Ark's Fieldset, dressed in the paper-and-ink system: a song-serif
 * legend heading a column of fields. The API is Ark's own — Root, Legend,
 * HelperText, ErrorText. */
-const Fieldset = Fieldset$1;
+function FieldsetRoot(props) {
+	const id = useElementId("fieldset", () => props.id);
+	return createComponent(Fieldset$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Fieldset = defineFamily(FieldsetRoot, {
+	...Fieldset$1,
+	Root: FieldsetRoot
+});
 injectComponentStyle("fieldset");
 //#endregion
 export { Fieldset };

package/dist/components/file-upload/index.d.mts

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

package/dist/components/file-upload/index.mjs

@@ -1,18 +1,36 @@
+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";
 import { FileUpload as FileUpload$1 } from "@ark-ui/solid/file-upload";
 //#region src/components/file-upload/index.tsx
+/** The inner trigger repeats the click binding the dropzone already
+* owns: keyboard users enter through the dropzone, so the button
+* leaves the tab order and the semantic tree entirely. */
+function FileUploadTrigger(props) {
+	return createComponent(FileUpload$1.Trigger, mergeProps(props, {
+		tabindex: -1,
+		"aria-hidden": "true"
+	}));
+}
 function FileUploadRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(FileUpload$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("file-upload", () => rest.id);
+	return createComponent(FileUpload$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const FileUpload = {
+const FileUpload = defineFamily(FileUploadRoot, {
 	...FileUpload$1,
-	Root: FileUploadRoot
-};
+	Root: FileUploadRoot,
+	Trigger: FileUploadTrigger
+});
 injectComponentStyle("file-upload");
 //#endregion
 export { FileUpload };

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

@@ -1,4 +1,5 @@
 import { Button } from "../button/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { createContext, createSignal, splitProps, useContext } from "solid-js";
@@ -62,6 +63,7 @@ const STEP_DOWN = {
 function FloatButtonTrigger(props) {
 	const [own, rest] = splitProps(props, ["label", "children"]);
 	const context = useContext(FloatButtonContextKey);
+	const messages = useComponentMessages();
 	return createComponent(Button, mergeProps(rest, {
 		variant: "solid",
 		square: true,
@@ -70,7 +72,7 @@ function FloatButtonTrigger(props) {
 		},
 		onClick: () => context?.toggle(),
 		get "aria-label"() {
-			return own.label || "Actions";
+			return own.label || messages().floatButton.actions;
 		},
 		get "aria-expanded"() {
 			return context?.open() ?? false;

package/dist/components/floating-panel/index.d.mts

@@ -1,3 +1,4 @@
+import { ComponentProps } from "solid-js";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
 //#region src/components/floating-panel/index.d.ts
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
@@ -5,5 +6,8 @@ import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
  * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
  * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
  * Body. */
-export declare const FloatingPanel: typeof FloatingPanel$1;
+declare function FloatingPanelRoot(props: ComponentProps<typeof FloatingPanel$1.Root>): import("solid-js").JSX.Element;
+export declare const FloatingPanel: typeof FloatingPanelRoot & Omit<typeof FloatingPanel$1, "Root"> & {
+  Root: typeof FloatingPanelRoot;
+};
 //#endregion

package/dist/components/floating-panel/index.mjs

@@ -1,4 +1,7 @@
+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 "solid-js";
 import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
 //#region src/components/floating-panel/index.ts
 /** Ark's FloatingPanel, dressed in the paper-and-ink system: the shared
@@ -6,7 +9,16 @@ import { FloatingPanel as FloatingPanel$1 } from "@ark-ui/solid/floating-panel";
 * handle. The API is Ark's own — Root, Trigger, Positioner, Content, Header,
 * Title, Control, DragTrigger, StageTrigger, CloseTrigger, ResizeTrigger,
 * Body. */
-const FloatingPanel = FloatingPanel$1;
+function FloatingPanelRoot(props) {
+	const id = useElementId("floating-panel", () => props.id);
+	return createComponent(FloatingPanel$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const FloatingPanel = defineFamily(FloatingPanelRoot, {
+	...FloatingPanel$1,
+	Root: FloatingPanelRoot
+});
 injectComponentStyle("floating-panel");
 //#endregion
 export { FloatingPanel };

package/dist/components/focus-trap/index.d.mts

@@ -1,2 +1,7 @@
-import { FocusTrap, FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/solid/focus-trap";
-export { FocusTrap, type FocusTrapBaseProps, type FocusTrapProps };
+import { FocusTrapBaseProps, FocusTrapProps } from "@ark-ui/solid/focus-trap";
+//#region src/components/focus-trap/index.d.ts
+export declare const FocusTrap: ((props: import("@ark-ui/solid/focus-trap").FocusTrapProps) => import("solid-js").JSX.Element) & {
+  Root: (props: import("@ark-ui/solid/focus-trap").FocusTrapProps) => import("solid-js").JSX.Element;
+};
+//#endregion
+export type { FocusTrapBaseProps, FocusTrapProps };

package/dist/components/focus-trap/index.mjs

@@ -1,2 +1,9 @@
-import { FocusTrap } from "@ark-ui/solid/focus-trap";
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { FocusTrap as FocusTrap$1 } from "@ark-ui/solid/focus-trap";
+//#region src/components/focus-trap/index.ts
+/** Trap focus within a subtree — for containers that live outside the
+* dialog machine but still owe the keyboard a boundary. Headless, like
+* the rest of Ark's utilities. */
+const FocusTrap = withSelfRoot(FocusTrap$1);
+//#endregion
 export { FocusTrap };

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

@@ -1,2 +1,2 @@
-import { a as SolidFormApi, c as FormApi, i as FormProps, l as FieldApi, n as FormField, o as createField, r as FormFieldProps, s as createForm, t as Form } from "../../index-B1xiJ5ki.mjs";
+import { a as SolidFormApi, c as FormApi, i as FormProps, l as FieldApi, n as FormField, o as createField, r as FormFieldProps, s as createForm, t as Form } from "../../index-B1-quIrl.mjs";
 export { type FieldApi, Form, type FormApi, FormField, FormFieldProps, FormProps, type SolidFormApi, createField, createField as useField, createForm, createForm as useForm };

package/dist/components/form/index.mjs

@@ -1,3 +1,5 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { claimElement, createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
 import { Show, createContext, splitProps, useContext } from "solid-js";
@@ -15,7 +17,7 @@ function errorText(error) {
 	if (typeof error === "object" && "message" in error) return String(error.message);
 	return "";
 }
-function Form(props) {
+const Form = withSelfRoot(function Form(props) {
 	injectComponentStyle("form");
 	injectComponentStyle("field");
 	const [own, rest] = splitProps(props, ["form"]);
@@ -38,8 +40,8 @@ function Form(props) {
 			return _el$;
 		}
 	});
-}
-function FormField(props) {
+});
+const FormField = withSelfRoot(function FormField(props) {
 	const injected = useContext(FormContext);
 	const [own, rest] = splitProps(props, [
 		"form",
@@ -51,6 +53,7 @@ function FormField(props) {
 		"disabled",
 		"children"
 	]);
+	const id = useElementId("form-field");
 	const form = () => own.form ?? injected;
 	const assemble = (field) => {
 		const errors = () => {
@@ -63,6 +66,9 @@ function FormField(props) {
 			return own.name;
 		} }], true);
 		insert(_el$2, createComponent(Field.Root, {
+			get id() {
+				return id();
+			},
 			get invalid() {
 				return own.invalid || errors().length > 0;
 			},
@@ -120,6 +126,6 @@ function FormField(props) {
 			children: (field) => assemble(field)
 		}))
 	});
-}
+});
 //#endregion
 export { Form, FormField, createField, createField as useField, createForm, createForm as useForm };

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

@@ -1,3 +1,5 @@
+import { ComponentProps } from "solid-js";
+import { Frame as Frame$1 } from "@ark-ui/solid/frame";
 //#region src/components/frame/index.d.ts
 /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
  * iframe whose body mounts the children and whose `head` prop
@@ -6,5 +8,8 @@
  * grows to fit; the vessel's border and paper belong to the
  * consumer, since an iframe carries no anatomy attributes for the
  * core stylesheet to hook. The API is Ark's own. */
-export declare const Frame: (props: import("@ark-ui/solid/frame").FrameProps) => import("solid-js").JSX.Element;
+declare function FrameRoot(props: ComponentProps<typeof Frame$1>): import("solid-js").JSX.Element;
+export declare const Frame: typeof FrameRoot & {
+  Root: typeof FrameRoot;
+};
 //#endregion

package/dist/components/frame/index.mjs

@@ -1,3 +1,6 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { createComponent, mergeProps } from "solid-js";
 import { Frame as Frame$1 } from "@ark-ui/solid/frame";
 //#region src/components/frame/index.ts
 /** Ark's Frame, dressed in the paper-and-ink system: a sandboxed
@@ -7,6 +10,12 @@ import { Frame as Frame$1 } from "@ark-ui/solid/frame";
 * grows to fit; the vessel's border and paper belong to the
 * consumer, since an iframe carries no anatomy attributes for the
 * core stylesheet to hook. The API is Ark's own. */
-const Frame = Frame$1;
+function FrameRoot(props) {
+	const id = useElementId("frame", () => props.id);
+	return createComponent(Frame$1, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Frame = withSelfRoot(FrameRoot);
 //#endregion
 export { Frame };

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

@@ -9,5 +9,7 @@ export interface GridProps extends JSX.HTMLAttributes<HTMLDivElement> {
    * and the container decides how many fit. */
   minChildWidth?: string;
 }
-export declare function Grid(props: GridProps): JSX.Element;
+export declare const Grid: ((props: GridProps) => JSX.Element) & {
+  Root: (props: GridProps) => JSX.Element;
+};
 //#endregion

package/dist/components/grid/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -13,7 +14,7 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Grid(props) {
+const Grid = withSelfRoot(function Grid(props) {
 	injectComponentStyle("grid");
 	const [own, rest] = splitProps(props, [
 		"columns",
@@ -37,6 +38,6 @@ function Grid(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Grid };

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

@@ -3,5 +3,7 @@
  * strokes of pigment on the page — a quiet tint of the accent behind the
  * ink, never neon. The component renders bare <mark> elements, so the
  * document-wide mark default carries the look. The API is Ark's own. */
-export declare const Highlight: (props: import("@ark-ui/solid/highlight").HighlightProps) => import("solid-js").JSX.Element;
+export declare const Highlight: ((props: import("@ark-ui/solid/highlight").HighlightProps) => import("solid-js").JSX.Element) & {
+  Root: (props: import("@ark-ui/solid/highlight").HighlightProps) => import("solid-js").JSX.Element;
+};
 //#endregion

package/dist/components/highlight/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { Highlight as Highlight$1 } from "@ark-ui/solid/highlight";
 //#region src/components/highlight/index.ts
@@ -5,7 +6,7 @@ import { Highlight as Highlight$1 } from "@ark-ui/solid/highlight";
 * strokes of pigment on the page — a quiet tint of the accent behind the
 * ink, never neon. The component renders bare <mark> elements, so the
 * document-wide mark default carries the look. The API is Ark's own. */
-const Highlight = Highlight$1;
+const Highlight = withSelfRoot(Highlight$1);
 injectComponentStyle("highlight");
 //#endregion
 export { Highlight };

package/dist/components/hover-card/index.d.mts

@@ -1,7 +1,25 @@
+import { ComponentProps, JSX } from "solid-js";
 import { HoverCard as HoverCard$1 } from "@ark-ui/solid/hover-card";
 //#region src/components/hover-card/index.d.ts
 /** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
  * that dissolves in over a quiet inline link, never stealing focus. The
  * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
-export declare const HoverCard: typeof HoverCard$1;
+declare function HoverCardRoot(props: ComponentProps<typeof HoverCard$1.Root>): JSX.Element;
+type HoverCardPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export interface HoverCardFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger: string | Element;
+  content?: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+  placement?: HoverCardPlacement;
+  children?: JSX.Element;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function HoverCardFacade(props: HoverCardFacadeProps): JSX.Element;
+export declare const HoverCard: typeof HoverCardFacade & Omit<typeof HoverCard$1, "Root"> & {
+  Root: typeof HoverCardRoot;
+};
 //#endregion

package/dist/components/hover-card/index.mjs

@@ -1,10 +1,99 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { n as withElementProps, t as isElement } from "../../element-dGIhOTJ6.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, memo, mergeProps, template } from "@solidjs/web";
+import { Show, createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { HoverCard as HoverCard$1 } from "@ark-ui/solid/hover-card";
-//#region src/components/hover-card/index.ts
+//#region src/components/hover-card/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<h3>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<p>`);
 /** Ark's HoverCard, dressed in the paper-and-ink system: a preview card
 * that dissolves in over a quiet inline link, never stealing focus. The
 * API is Ark's own — Root, Trigger, Positioner, Content, Arrow, ArrowTip. */
-const HoverCard = HoverCard$1;
+function HoverCardRoot(props) {
+	const id = useElementId("hover-card", () => props.id);
+	return createComponent$1(HoverCard$1.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
+function HoverCardFacade(props) {
+	injectComponentStyle("hover-card");
+	const triggerElement = () => isElement(props.trigger) ? props.trigger : void 0;
+	const triggerChildren = () => triggerElement() ? void 0 : props.trigger;
+	const triggerAsChild = (propsFn) => {
+		const trigger = triggerElement();
+		return trigger ? withElementProps(trigger, propsFn()) : props.trigger;
+	};
+	return createComponent(HoverCardRoot, mergeProps(() => {
+		return props.open === void 0 ? {} : { open: props.open };
+	}, () => {
+		return props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen };
+	}, () => {
+		return props.placement === void 0 ? {} : { positioning: { placement: props.placement } };
+	}, {
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get children() {
+			return [createComponent(HoverCard$1.Trigger, {
+				get disabled() {
+					return props.disabled;
+				},
+				get asChild() {
+					return triggerElement() ? triggerAsChild : void 0;
+				},
+				get children() {
+					return triggerChildren();
+				}
+			}), createComponent(HoverCard$1.Positioner, { get children() {
+				return createComponent(HoverCard$1.Content, { get children() {
+					return [
+						createComponent(HoverCard$1.Arrow, { get children() {
+							return createComponent(HoverCard$1.ArrowTip, {});
+						} }),
+						(() => {
+							var _el$ = _tmpl$();
+							insert(_el$, () => {
+								return props.label;
+							});
+							return _el$;
+						})(),
+						createComponent(Show, {
+							get when() {
+								return props.description;
+							},
+							get children() {
+								var _el$2 = _tmpl$2();
+								insert(_el$2, () => {
+									return props.description;
+								});
+								return _el$2;
+							}
+						}),
+						createComponent(Show, {
+							get when() {
+								return props.content;
+							},
+							get children() {
+								var _el$3 = _tmpl$2();
+								insert(_el$3, () => {
+									return props.content;
+								});
+								return _el$3;
+							}
+						}),
+						memo(() => {
+							return props.children;
+						})
+					];
+				} });
+			} })];
+		}
+	}));
+}
+const HoverCard = defineFamily(HoverCardFacade, {
+	...HoverCard$1,
+	Root: HoverCardRoot
+});
 injectComponentStyle("hover-card");
 //#endregion
 export { HoverCard };

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

@@ -3,9 +3,9 @@ import { IconifyIcon } from "@bysages/core/icons";
 //#region src/components/icon/index.d.ts
 /** The inkwell: a standard box that keeps any inline svg at its optical
  * measure and in the text's own ink — the icon carries no pigment and no
- * size of its own. Bring a glyph through `glyph` (a direct registry
- * import), through `name` from the whitelisted registry, or bring your
- * own; the well renders either. */
+ * size of its own. Bring an `@bysages/icons` export or any other
+ * IconifyIcon through `glyph`, a built-in core-registry name through
+ * `name`, or your own svg; the well renders either. */
 export interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   /** Size steps follow the surrounding font size; `inherit` is the
    * default — one em of the text the icon sits in. */
@@ -13,12 +13,13 @@ export interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {
   /** The accessible name. Without it the icon is presentation-only and
    * hidden from the accessibility tree. */
   label?: string;
-  /** A glyph from the registry, imported directly. Ignored when children
+  /** An `@bysages/icons` export or any IconifyIcon. Ignored when children
    * are given — an explicit glyph always wins. */
   glyph?: IconifyIcon;
-  /** A registry name — only the whitelisted set the wrappers draw
-   * themselves. Ignored when `glyph` or children are given. */
+  /** A built-in name from the curated core registry. Ignored when `glyph` or children are given. */
   name?: string;
 }
-export declare function Icon(props: IconProps): JSX.Element;
+export declare const Icon: ((props: IconProps) => JSX.Element) & {
+  Root: (props: IconProps) => JSX.Element;
+};
 //#endregion

package/dist/components/icon/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { effect, insert, setAttribute, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,7 +6,7 @@ import { getIcon } from "@bysages/core/icons";
 //#region src/components/icon/index.tsx
 var _tmpl$ = /* @__PURE__ */ template(`<span>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<svg fill=currentColor aria-hidden=true>`);
-function Icon(props) {
+const Icon = withSelfRoot(function Icon(props) {
 	injectComponentStyle("icon");
 	const [own, rest] = splitProps(props, [
 		"size",
@@ -15,7 +16,7 @@ function Icon(props) {
 		"children"
 	]);
 	const resolved = own.glyph ?? (own.name && own.children == null ? getIcon(own.name) : void 0);
-	if (own.name && own.children == null && own.glyph == null && !resolved) console.error(`[icons] unknown icon name "${own.name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
+	if (own.name && own.children == null && own.glyph == null && !resolved) console.error(`[icons] unknown icon name "${own.name}" — not in the core default registry; pass it explicitly as glyph`);
 	var _el$ = _tmpl$();
 	spread(_el$, [rest, {
 		get role() {
@@ -49,6 +50,6 @@ function Icon(props) {
 		})() : null);
 	});
 	return _el$;
-}
+});
 //#endregion
 export { Icon };

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

@@ -2,16 +2,22 @@ import { JSX } from "solid-js";
 //#region src/components/image/index.d.ts
 /** A framed picture: while the source loads, the frame keeps the
  * skeleton's breath; the picture dissolves in when it lands; a broken
- * source leaves the `fallback` prop — or the placeholder glyph when the
+ * source leaves the `fallback` prop — or the placeholder icon when the
  * caller has nothing local to say. The frame's size is the consumer's
  * to give. */
 export interface ImageProps extends JSX.HTMLAttributes<HTMLElement> {
   src: string;
   alt?: string;
+  /** Intrinsic dimensions for the image element, reserving the layout
+   * box before bytes arrive. */
+  width?: number | string;
+  height?: number | string;
   fit?: "cover" | "contain" | "fill" | "none";
   loading?: "lazy" | "eager";
   /** What a broken source leaves instead of the picture. */
   fallback?: JSX.Element;
 }
-export declare function Image(props: ImageProps): JSX.Element;
+export declare const Image: ((props: ImageProps) => JSX.Element) & {
+  Root: (props: ImageProps) => JSX.Element;
+};
 //#endregion