@bysages/solid 0.3.0 → 0.4.0

package/dist/components/image/index.mjs

@@ -1,35 +1,35 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+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, effect, insert, ref, setAttribute, spread, template } from "@solidjs/web";
 import { Show, createEffect, createSignal, on, splitProps } from "solid-js";
 //#region src/components/image/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg><rect x=3 y=4 width=18 height=16 rx=1.5></svg>`, 2);
-var _tmpl$2 = /* @__PURE__ */ template(`<svg><circle cx=9 cy=10 r=1.5></svg>`, 2);
-var _tmpl$3 = /* @__PURE__ */ template(`<svg><path d="m5.5 17.5 4.5-5 3 3.5 2.5-3 3 4.5"></svg>`, 2);
-var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=image data-part=fallback>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<figure><img data-scope=image data-part=img decoding=async>`, 1);
-/** The mark for a source that never arrived: a quiet mountain-and-sun,
-* drawn in the stylesheet's stroke and hidden from the reader. */
-function placeholderGlyph() {
-	return [
-		_tmpl$(),
-		_tmpl$2(),
-		_tmpl$3()
-	];
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=image data-part=fallback>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<figure><img data-scope=image data-part=img decoding=async>`, 1);
+/** The registry icon for a source that never arrived, hidden from the reader. */
+function placeholderIcon() {
+	return iconNode("image");
 }
-function Image(props) {
+const Image = withSelfRoot(function Image(props) {
 	injectComponentStyle("image");
 	const [own, rest] = splitProps(props, [
 		"src",
 		"alt",
+		"width",
+		"height",
 		"fit",
 		"loading",
 		"fallback"
 	]);
 	const [state, setState] = createSignal("loading");
-	createEffect(on(() => own.src, () => setState("loading")));
-	var _el$4 = _tmpl$5();
-	var _el$5 = _el$4.firstChild;
-	spread(_el$4, [rest, {
+	let image;
+	createEffect(on(() => own.src, () => {
+		setState("loading");
+		if (image?.complete) setState(image.naturalWidth > 0 ? "loaded" : "error");
+	}));
+	var _el$ = _tmpl$2();
+	var _el$2 = _el$.firstChild;
+	spread(_el$, [rest, {
 		"data-scope": "image",
 		"data-part": "root",
 		get "data-state"() {
@@ -39,32 +39,39 @@ function Image(props) {
 			return own.fit ?? "cover";
 		}
 	}], true);
-	_el$5.addEventListener("error", () => setState("error"));
-	_el$5.addEventListener("load", () => setState("loaded"));
-	insert(_el$4, createComponent(Show, {
+	_el$2.addEventListener("error", () => setState("error"));
+	_el$2.addEventListener("load", () => setState("loaded"));
+	ref(() => {
+		return (element) => image = element;
+	}, _el$2);
+	insert(_el$, createComponent(Show, {
 		get when() {
 			return state() === "error";
 		},
 		get children() {
-			var _el$6 = _tmpl$4();
-			insert(_el$6, () => {
-				return own.fallback ?? placeholderGlyph();
+			var _el$3 = _tmpl$();
+			insert(_el$3, () => {
+				return own.fallback ?? placeholderIcon();
 			});
-			return _el$6;
+			return _el$3;
 		}
 	}), null);
 	effect(() => {
 		return {
 			e: own.src,
 			t: own.alt ?? "",
-			a: own.loading ?? "lazy"
+			a: own.width,
+			o: own.height,
+			i: own.loading ?? "lazy"
 		};
-	}, ({ e, t, a }, _p$) => {
-		e !== _p$?.e && setAttribute(_el$5, "src", e);
-		t !== _p$?.t && setAttribute(_el$5, "alt", t);
-		a !== _p$?.a && setAttribute(_el$5, "loading", a);
+	}, ({ e, t, a, o, i }, _p$) => {
+		e !== _p$?.e && setAttribute(_el$2, "src", e);
+		t !== _p$?.t && setAttribute(_el$2, "alt", t);
+		a !== _p$?.a && setAttribute(_el$2, "width", a);
+		o !== _p$?.o && setAttribute(_el$2, "height", o);
+		i !== _p$?.i && setAttribute(_el$2, "loading", i);
 	});
-	return _el$4;
-}
+	return _el$;
+});
 //#endregion
 export { Image };

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

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 import { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
 //#region src/components/image-cropper/index.d.ts
 /** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
  * holding the photograph, one lit selection window framed by light hairlines.
  * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
  * Context. */
-export declare const ImageCropper: typeof ImageCropper$1;
+declare function ImageCropperRoot(props: ComponentProps<typeof ImageCropper$1.Root>): import("solid-js").JSX.Element;
+export declare const ImageCropper: typeof ImageCropperRoot & Omit<typeof ImageCropper$1, "Root"> & {
+  Root: typeof ImageCropperRoot;
+};
 //#endregion

package/dist/components/image-cropper/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 { ImageCropper as ImageCropper$1 } from "@ark-ui/solid/image-cropper";
 //#region src/components/image-cropper/index.ts
 /** Ark's ImageCropper, dressed in the paper-and-ink system: a rounded vessel
 * holding the photograph, one lit selection window framed by light hairlines.
 * The API is Ark's own — Root, Viewport, Image, Selection, Handle, Grid,
 * Context. */
-const ImageCropper = ImageCropper$1;
+function ImageCropperRoot(props) {
+	const id = useElementId("image-cropper", () => props.id);
+	return createComponent(ImageCropper$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const ImageCropper = defineFamily(ImageCropperRoot, {
+	...ImageCropper$1,
+	Root: ImageCropperRoot
+});
 injectComponentStyle("image-cropper");
 //#endregion
 export { ImageCropper };

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

@@ -1,19 +1,2 @@
-import { JSX } from "solid-js";
-//#region src/components/image-viewer/index.d.ts
-/**
- * A lightbox: the picture over a dimmed page, with a small toolbar
- * beneath it. Zoom is the reader's hand (half to three times, clamped),
- * a quarter turn at a time rotates, Escape and the scrim close — the
- * dialog machine carries the modal part. `open` may stay with the
- * caller; left undefined the viewer keeps it to itself.
- */
-export interface ImageViewerProps {
-  src: string;
-  alt?: string;
-  open?: boolean;
-  zoomable?: boolean;
-  /** The openness changed — from the scrim, Escape or the toolbar. */
-  onOpenChange?: (open: boolean) => void;
-}
-export declare function ImageViewer(props: ImageViewerProps): JSX.Element;
-//#endregion
+import { n as ImageViewerProps, t as ImageViewer } from "../../index-DhripUtf.mjs";
+export { ImageViewer, ImageViewerProps };

package/dist/components/image-viewer/index.mjs

@@ -1,152 +1,4 @@
-import { Button } from "../button/index.mjs";
-import { ButtonGroup } from "../button-group/index.mjs";
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, insert, memo, setAttribute, setStyleProperty, template } from "@solidjs/web";
-import { Show, createEffect, createSignal, splitProps } from "solid-js";
-import { Portal } from "solid-js/web";
-import { Dialog } from "@ark-ui/solid/dialog";
-//#region src/components/image-viewer/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<svg><circle cx=11 cy=11 r=7></svg>`, 2);
-var _tmpl$2 = /* @__PURE__ */ template(`<svg><path d="m16.2 16.2 4.8 4.8"></svg>`, 2);
-var _tmpl$3 = /* @__PURE__ */ template(`<svg><path d="M8 11h6"></svg>`, 2);
-var _tmpl$4 = /* @__PURE__ */ template(`<svg><path d="M11 8v6"></svg>`, 2);
-var _tmpl$5 = /* @__PURE__ */ template(`<svg><path d="M20.49 12A8.5 8.5 0 1 1 18 6.06"></svg>`, 2);
-var _tmpl$6 = /* @__PURE__ */ template(`<svg><path d="M20.5 3.5v4h-4"></svg>`, 2);
-var _tmpl$7 = /* @__PURE__ */ template(`<svg><path d="m6 6 12 12"></svg>`, 2);
-var _tmpl$8 = /* @__PURE__ */ template(`<svg><path d="M18 6 6 18"></svg>`, 2);
-var _tmpl$9 = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
-var _tmpl$10 = /* @__PURE__ */ template(`<img data-scope=image-viewer data-part=viewport>`);
-var _tmpl$11 = /* @__PURE__ */ template(`<div data-scope=image-viewer data-part=toolbar>`);
-const MIN_SCALE = .5;
-const MAX_SCALE = 3;
-const SCALE_STEP = .25;
-/** The toolbar's line-drawn glyphs, fresh per render. */
-const TOOL_GLYPHS = {
-	zoomIn: () => [
-		_tmpl$(),
-		_tmpl$2(),
-		_tmpl$3(),
-		_tmpl$4()
-	],
-	zoomOut: () => [
-		_tmpl$(),
-		_tmpl$2(),
-		_tmpl$3()
-	],
-	rotate: () => [_tmpl$5(), _tmpl$6()],
-	close: () => [_tmpl$7(), _tmpl$8()]
-};
-function ImageViewer(props) {
-	injectComponentStyle("image-viewer");
-	const [own] = splitProps(props, [
-		"src",
-		"alt",
-		"open",
-		"zoomable",
-		"onOpenChange"
-	]);
-	const [localOpen, setLocalOpen] = createSignal(false);
-	const [scale, setScale] = createSignal(1);
-	const [rotation, setRotation] = createSignal(0);
-	const isOpen = () => own.open ?? localOpen();
-	const setOpen = (value) => {
-		if (own.open === void 0) setLocalOpen(value);
-		own.onOpenChange?.(value);
-	};
-	createEffect(() => {
-		if (isOpen()) {
-			setScale(1);
-			setRotation(0);
-		}
-	});
-	function zoom(step) {
-		setScale(Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale() + step)));
-	}
-	function rotate() {
-		setRotation((rotation() + 90) % 360);
-	}
-	function toolButton(label, glyph, onClick) {
-		return createComponent(Button, {
-			variant: "ghost",
-			square: true,
-			size: "lg",
-			"aria-label": label,
-			onClick,
-			get children() {
-				var _el$12 = _tmpl$9();
-				insert(_el$12, glyph);
-				return _el$12;
-			}
-		});
-	}
-	return createComponent(Dialog.Root, {
-		get open() {
-			return isOpen();
-		},
-		onOpenChange: (details) => setOpen(details.open),
-		lazyMount: true,
-		unmountOnExit: true,
-		get children() {
-			return createComponent(Portal, { get children() {
-				return [createComponent(Dialog.Backdrop, { class: "bs-image-viewer-backdrop" }), createComponent(Dialog.Positioner, {
-					class: "bs-image-viewer-positioner",
-					get children() {
-						return createComponent(Dialog.Content, {
-							class: "bs-image-viewer-content",
-							get "aria-label"() {
-								return own.alt || "Image preview";
-							},
-							onClick: (event) => {
-								if (event.target === event.currentTarget) setOpen(false);
-							},
-							get children() {
-								return [(() => {
-									var _el$13 = _tmpl$10();
-									effect(() => {
-										return {
-											e: own.src,
-											t: own.alt ?? "",
-											a: `scale(${scale()}) rotate(${rotation()}deg)`
-										};
-									}, ({ e, t, a }, _p$) => {
-										e !== _p$?.e && setAttribute(_el$13, "src", e);
-										t !== _p$?.t && setAttribute(_el$13, "alt", t);
-										a !== _p$?.a && setStyleProperty(_el$13, "transform", a);
-									});
-									return _el$13;
-								})(), (() => {
-									var _el$14 = _tmpl$11();
-									insert(_el$14, createComponent(ButtonGroup, { get children() {
-										return [
-											createComponent(Show, {
-												get when() {
-													return own.zoomable ?? true;
-												},
-												get children() {
-													return [memo(() => {
-														return toolButton("Zoom in", TOOL_GLYPHS.zoomIn, () => zoom(SCALE_STEP));
-													}), memo(() => {
-														return toolButton("Zoom out", TOOL_GLYPHS.zoomOut, () => zoom(-.25));
-													})];
-												}
-											}),
-											memo(() => {
-												return toolButton("Rotate 90 degrees", TOOL_GLYPHS.rotate, rotate);
-											}),
-											memo(() => {
-												return toolButton("Close", TOOL_GLYPHS.close, () => setOpen(false));
-											})
-										];
-									} }));
-									return _el$14;
-								})()];
-							}
-						});
-					}
-				})];
-			} });
-		}
-	});
-}
-//#endregion
+import "../button-group/index.mjs";
+import "../dialog/index.mjs";
+import { t as ImageViewer } from "../../image-viewer-B9A5lXsk.mjs";
 export { ImageViewer };

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

@@ -15,5 +15,7 @@ export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
  * the label id, the described-by wiring and the invalid state for free,
  * which is also the seam the Form validation layer will drive. Disabled
  * rides the native attribute. */
-export declare function Input(props: InputProps): JSX.Element;
+export declare const Input: ((props: InputProps) => JSX.Element) & {
+  Root: (props: InputProps) => JSX.Element;
+};
 //#endregion

package/dist/components/input/index.mjs

@@ -1,2 +1,2 @@
-import { t as Input } from "../../input-DoFQ7RXh.mjs";
+import { t as Input } from "../../input-CPAJdwDb.mjs";
 export { Input };

package/dist/components/json-tree-view/index.d.mts

@@ -1,7 +1,11 @@
+import { ComponentProps } from "solid-js";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
 //#region src/components/json-tree-view/index.d.ts
 /** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
  * recipes re-scoped, with value nodes reading as tabular data. The API is
  * Ark's own — Root, Tree, plus createJsonTreeCollection. */
-export declare const JsonTreeView: typeof JsonTreeView$1;
+declare function JsonTreeViewRoot(props: ComponentProps<typeof JsonTreeView$1.Root>): import("solid-js").JSX.Element;
+export declare const JsonTreeView: typeof JsonTreeViewRoot & Omit<typeof JsonTreeView$1, "Root"> & {
+  Root: typeof JsonTreeViewRoot;
+};
 //#endregion

package/dist/components/json-tree-view/index.mjs

@@ -1,10 +1,30 @@
+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 { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "@solidjs/web";
+import { createComponent as createComponent$1, mergeProps as mergeProps$1 } from "solid-js";
 import { JsonTreeView as JsonTreeView$1 } from "@ark-ui/solid/json-tree-view";
-//#region src/components/json-tree-view/index.ts
+//#region src/components/json-tree-view/index.tsx
 /** Ark's JsonTreeView, dressed in the paper-and-ink system: the tree-view
 * recipes re-scoped, with value nodes reading as tabular data. The API is
 * Ark's own — Root, Tree, plus createJsonTreeCollection. */
-const JsonTreeView = JsonTreeView$1;
+function JsonTreeViewRoot(props) {
+	const id = useElementId("json-tree-view", () => props.id);
+	return createComponent$1(JsonTreeView$1.Root, mergeProps$1(props, { get id() {
+		return id();
+	} }));
+}
+function JsonTreeViewTree(props) {
+	return createComponent(JsonTreeView$1.Tree, mergeProps(props, { get arrow() {
+		return props.arrow ?? iconNode("chevron-right");
+	} }));
+}
+const JsonTreeView = defineFamily(JsonTreeViewRoot, {
+	...JsonTreeView$1,
+	Root: JsonTreeViewRoot,
+	Tree: JsonTreeViewTree
+});
 injectComponentStyle("json-tree-view");
 //#endregion
 export { JsonTreeView };

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

@@ -2,5 +2,7 @@ import { JSX } from "solid-js";
 //#region src/components/kbd/index.d.ts
 /** A keycap in miniature, riding the type it annotates. */
 export type KbdProps = JSX.HTMLAttributes<HTMLElement>;
-export declare function Kbd(props: KbdProps): JSX.Element;
+export declare const Kbd: ((props: KbdProps) => JSX.Element) & {
+  Root: (props: KbdProps) => JSX.Element;
+};
 //#endregion

package/dist/components/kbd/index.mjs

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

package/dist/components/layout/index.mjs

@@ -1,3 +1,4 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, delegateEvents, effect, insert, memo, ref, setAttribute, spread, template } from "@solidjs/web";
 import { createContext, createEffect, createSignal, splitProps, useContext } from "solid-js";
@@ -6,7 +7,7 @@ var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<header>`);
 var _tmpl$3 = /* @__PURE__ */ template(`<main>`);
 var _tmpl$4 = /* @__PURE__ */ template(`<footer>`);
-var _tmpl$5 = /* @__PURE__ */ template(`<div data-scope=layout data-part=sider-resize role=separator aria-orientation=vertical tabindex=0 aria-label="Resize sidebar">`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div data-scope=layout data-part=sider-resize role=separator aria-orientation=vertical tabindex=0>`);
 var _tmpl$6 = /* @__PURE__ */ template(`<aside><!><!>`);
 const LayoutContext = createContext();
 /**
@@ -89,6 +90,7 @@ function LayoutSider(props) {
 	});
 	const layout = useContext(LayoutContext);
 	const [dragging, setDragging] = createSignal(false);
+	const messages = useComponentMessages();
 	let rail;
 	let startPointerX = 0;
 	let startWidth = 0;
@@ -127,11 +129,13 @@ function LayoutSider(props) {
 		effect(() => {
 			return {
 				e: dragging() ? "" : void 0,
-				t: railWidth()
+				t: messages().sidebar.resize,
+				a: railWidth()
 			};
-		}, ({ e, t }, _p$) => {
+		}, ({ e, t, a }, _p$) => {
 			e !== _p$?.e && setAttribute(_el$5, "data-dragging", e);
-			t !== _p$?.t && setAttribute(_el$5, "aria-valuenow", t);
+			t !== _p$?.t && setAttribute(_el$5, "aria-label", t);
+			a !== _p$?.a && setAttribute(_el$5, "aria-valuenow", a);
 		});
 		return _el$5;
 	})() : null;

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

@@ -6,5 +6,7 @@ export interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
 /** A link is ink in the accent's voice: quiet at rest, deepening under
  * the hand, the halo at focus. The underline follows the prose —
  * always, on hover, or never. */
-export declare function Link(props: LinkProps): JSX.Element;
+export declare const Link: ((props: LinkProps) => JSX.Element) & {
+  Root: (props: LinkProps) => JSX.Element;
+};
 //#endregion

package/dist/components/link/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { claimElement, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -6,7 +7,7 @@ var _tmpl$ = /* @__PURE__ */ template(`<a>`);
 /** A link is ink in the accent's voice: quiet at rest, deepening under
 * the hand, the halo at focus. The underline follows the prose —
 * always, on hover, or never. */
-function Link(props) {
+const Link = withSelfRoot(function Link(props) {
 	injectComponentStyle("link");
 	const [own, rest] = splitProps(props, ["underline"]);
 	var _el$ = _tmpl$();
@@ -19,6 +20,6 @@ function Link(props) {
 		}
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Link };

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

@@ -1,5 +1,6 @@
 import { Component, JSX } from "solid-js";
 //#region src/components/list/index.d.ts
+declare function Item(props: JSX.HTMLAttributes<HTMLLIElement>): JSX.Element;
 export interface ListRootProps extends JSX.HTMLAttributes<HTMLUListElement> {
   /** One hairline between rows. */
   bordered?: boolean;
@@ -18,7 +19,7 @@ export interface ListContentProps extends Omit<JSX.HTMLAttributes<HTMLDivElement
 declare function Content(props: ListContentProps): JSX.Element;
 export declare const List: typeof Root & {
   Root: typeof Root;
-  Item: Component<JSX.HTMLAttributes<HTMLElement>>;
+  Item: typeof Item;
   Leading: Component<JSX.HTMLAttributes<HTMLElement>>;
   Content: typeof Content;
   Actions: Component<JSX.HTMLAttributes<HTMLElement>>;

package/dist/components/list/index.mjs

@@ -2,10 +2,11 @@ import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { Show, splitProps } from "solid-js";
 //#region src/components/list/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<ul>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=list data-part=title>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=list data-part=description>`);
-var _tmpl$4 = /* @__PURE__ */ template(`<div><!><!><!>`);
+var _tmpl$ = /* @__PURE__ */ template(`<li>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<ul>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<div data-scope=list data-part=title>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div data-scope=list data-part=description>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div><!><!><!>`);
 /** A ledger of rows: Root is the list, Item one row, Leading the mark
 * before the words, Content the title and its quiet echo, Actions the
 * way out. The bordered variant draws the hairlines; the hoverable
@@ -22,13 +23,21 @@ function part(name, tag) {
 	}
 	return Component;
 }
-const Item = part("Item", "li");
+function Item(props) {
+	const [, rest] = splitProps(props, ["role"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "list",
+		"data-part": "item"
+	}], false);
+	return _el$;
+}
 const Leading = part("Leading", "div");
 const Actions = part("Actions", "div");
 function Root(props) {
 	const [own, rest] = splitProps(props, ["bordered", "hoverable"]);
-	var _el$ = _tmpl$();
-	spread(_el$, [rest, {
+	var _el$2 = _tmpl$2();
+	spread(_el$2, [rest, {
 		"data-scope": "list",
 		"data-part": "root",
 		get "data-bordered"() {
@@ -38,7 +47,7 @@ function Root(props) {
 			return own.hoverable || void 0;
 		}
 	}], false);
-	return _el$;
+	return _el$2;
 }
 /** The row's words: `title` and `description` ride their own named
 * parts, the children follow them for anything else. */
@@ -48,42 +57,42 @@ function Content(props) {
 		"description",
 		"children"
 	]);
-	var _el$2 = _tmpl$4();
-	var _el$4 = _el$2.firstChild;
-	var _el$6 = _el$4.nextSibling;
-	var _el$7 = _el$6.nextSibling;
-	spread(_el$2, [rest, {
+	var _el$3 = _tmpl$5();
+	var _el$5 = _el$3.firstChild;
+	var _el$7 = _el$5.nextSibling;
+	var _el$8 = _el$7.nextSibling;
+	spread(_el$3, [rest, {
 		"data-scope": "list",
 		"data-part": "content"
 	}], true);
-	insert(_el$2, createComponent(Show, {
+	insert(_el$3, createComponent(Show, {
 		get when() {
 			return own.title;
 		},
 		get children() {
-			var _el$3 = _tmpl$2();
-			insert(_el$3, () => {
+			var _el$4 = _tmpl$3();
+			insert(_el$4, () => {
 				return own.title;
 			});
-			return _el$3;
+			return _el$4;
 		}
-	}), _el$4);
-	insert(_el$2, createComponent(Show, {
+	}), _el$5);
+	insert(_el$3, createComponent(Show, {
 		get when() {
 			return own.description;
 		},
 		get children() {
-			var _el$5 = _tmpl$3();
-			insert(_el$5, () => {
+			var _el$6 = _tmpl$4();
+			insert(_el$6, () => {
 				return own.description;
 			});
-			return _el$5;
+			return _el$6;
 		}
-	}), _el$6);
-	insert(_el$2, () => {
+	}), _el$7);
+	insert(_el$3, () => {
 		return own.children;
-	}, _el$7);
-	return _el$2;
+	}, _el$8);
+	return _el$3;
 }
 const List = Object.assign(Root, {
 	Root,

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

@@ -11,7 +11,7 @@ type ListboxOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ListboxRoot<T extends CollectionItem>(props: ListboxRootProps<T> & ListboxOwnProps): import("solid-js").JSX.Element;
-export declare const Listbox: Omit<typeof Listbox$1, "Root"> & {
+export declare const Listbox: typeof ListboxRoot & Omit<typeof Listbox$1, "Root"> & {
   Root: typeof ListboxRoot;
 };
 //#endregion

package/dist/components/listbox/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";
@@ -6,14 +8,20 @@ import { Listbox as Listbox$1 } from "@ark-ui/solid/listbox";
 const ArkRoot = Listbox$1.Root;
 function ListboxRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(ArkRoot, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("listbox", () => rest.id);
+	return createComponent(ArkRoot, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Listbox = {
+const Listbox = defineFamily(ListboxRoot, {
 	...Listbox$1,
 	Root: ListboxRoot
-};
+});
 injectComponentStyle("listbox");
 //#endregion
 export { Listbox };