@bysages/solid 0.2.3 → 0.3.1

package/dist/components/meter/index.mjs

@@ -1,14 +1,14 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/meter/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span><span data-scope=meter data-part=range>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span><span data-scope=meter data-part=range>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div>`);
 function part(name, tag) {
 	function Component(props) {
 		return createComponent(tag, mergeProps(props, {
 			"data-scope": "meter",
-			get ["data-part"]() {
+			get "data-part"() {
 				return name.toLowerCase();
 			}
 		}));
@@ -19,10 +19,10 @@ const Label = part("Label", "span");
 const ValueText = part("ValueText", "span");
 const Track = (props) => (() => {
 	var _el$ = _tmpl$();
-	spread(_el$, mergeProps(props, {
+	spread(_el$, [props, {
 		"data-scope": "meter",
 		"data-part": "track"
-	}), false, true);
+	}], true);
 	return _el$;
 })();
 function Root(props) {
@@ -41,38 +41,38 @@ function Root(props) {
 		return span > 0 ? Math.min(Math.max((own.value - min()) / span, 0), 1) : 0;
 	};
 	const level = () => own.level ?? "normal";
-	return (() => {
-		var _el$2 = _tmpl$2();
-		spread(_el$2, mergeProps(rest, {
-			"role": "meter",
-			get ["aria-valuemin"]() {
-				return min();
-			},
-			get ["aria-valuemax"]() {
-				return max();
-			},
-			get ["aria-valuenow"]() {
-				return own.value;
-			},
-			get ["aria-label"]() {
-				return own.label ?? rest["aria-label"];
-			},
-			"data-scope": "meter",
-			"data-part": "root",
-			get ["data-size"]() {
-				return own.size ?? "md";
-			},
-			get ["data-level"]() {
-				return memo(() => level() !== "normal")() ? level() : void 0;
-			},
-			get style() {
-				return {
-					...rest.style,
-					"--_percent": `${ratio() * 100}%`
-				};
-			}
-		}), false, true);
-		insert(_el$2, () => rest.children ?? [
+	var _el$2 = _tmpl$2();
+	spread(_el$2, [rest, {
+		role: "meter",
+		get "aria-valuemin"() {
+			return min();
+		},
+		get "aria-valuemax"() {
+			return max();
+		},
+		get "aria-valuenow"() {
+			return own.value;
+		},
+		get "aria-label"() {
+			return own.label ?? rest["aria-label"];
+		},
+		"data-scope": "meter",
+		"data-part": "root",
+		get "data-size"() {
+			return own.size ?? "md";
+		},
+		get "data-level"() {
+			return level() !== "normal" ? level() : void 0;
+		},
+		get style() {
+			return {
+				...rest.style,
+				"--_percent": `${ratio() * 100}%`
+			};
+		}
+	}], true);
+	insert(_el$2, () => {
+		return rest.children ?? [
 			createComponent(Label, { get children() {
 				return own.label;
 			} }),
@@ -80,9 +80,9 @@ function Root(props) {
 				return `${Math.round(ratio() * 100)}%`;
 			} }),
 			createComponent(Track, {})
-		]);
-		return _el$2;
-	})();
+		];
+	});
+	return _el$2;
 }
 const Meter = Object.assign(Root, {
 	Root,

package/dist/components/number-input/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { NumberInput as NumberInput$1 } from "@ark-ui/solid/number-input";
 //#region src/components/number-input/index.tsx
 function NumberInputRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(NumberInput$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(NumberInput$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

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

@@ -0,0 +1,21 @@
+import { JSX } from "solid-js";
+//#region src/components/order-list/index.d.ts
+export interface OrderOption {
+  label: string;
+  value: string;
+}
+export interface OrderListProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The rows in their current order — the value is the order. */
+  value: string[];
+  /** Every row the ledger knows, in no particular order. */
+  options: OrderOption[];
+  label?: string;
+  onValueChange?: (value: string[]) => void;
+}
+/** A ledger the reader may rewrite: rows move by grip or by the side
+ * arrows, and the group reports the new order as the value itself —
+ * the model is the order. Dragging rides the native drag events — a
+ * hairline of primary ink marks the seam the row will land on — so
+ * touch keeps the buttons as its route. */
+export declare function OrderList(props: OrderListProps): JSX.Element;
+//#endregion

package/dist/components/order-list/index.mjs

@@ -0,0 +1,168 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, delegateEvents, effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { For, createSignal, createUniqueId, splitProps } from "solid-js";
+//#region src/components/order-list/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg viewBox="0 0 24 24"width=12 height=12 fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg><path></svg>`, 2);
+var _tmpl$3 = /* @__PURE__ */ template(`<div><ol data-scope=order-list data-part=list>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<li draggable aria-roledescription="Sortable item"data-scope=order-list data-part=item><span data-scope=order-list data-part=grip aria-hidden=true>⋮⋮</span><span data-scope=order-list data-part=label></span><span data-scope=order-list data-part=controls><button type=button data-scope=order-list data-part=move></button><button type=button data-scope=order-list data-part=move></button><button type=button data-scope=order-list data-part=move></button><button type=button data-scope=order-list data-part=move>`);
+const ARROWS = {
+	up: ["m18 15-6-6-6 6"],
+	down: ["m6 9 6 6 6-6"],
+	top: ["m18 15-6-6-6 6", "M5 4h14"],
+	bottom: ["m6 9 6 6 6-6", "M5 20h14"]
+};
+function arrowGlyph(paths) {
+	var _el$ = _tmpl$();
+	insert(_el$, createComponent(For, {
+		each: paths,
+		children: (d) => (() => {
+			var _el$2 = _tmpl$2();
+			setAttribute(_el$2, "d", d);
+			return _el$2;
+		})()
+	}));
+	return _el$;
+}
+/** A ledger the reader may rewrite: rows move by grip or by the side
+* arrows, and the group reports the new order as the value itself —
+* the model is the order. Dragging rides the native drag events — a
+* hairline of primary ink marks the seam the row will land on — so
+* touch keeps the buttons as its route. */
+function OrderList(props) {
+	const messages = useComponentMessages();
+	injectComponentStyle("order-list");
+	const uid = createUniqueId();
+	const [own, rest] = splitProps(props, [
+		"value",
+		"options",
+		"label",
+		"onValueChange"
+	]);
+	const [dragging, setDragging] = createSignal(null);
+	const [dropLine, setDropLine] = createSignal(null);
+	const rows = () => own.value.map((entry) => own.options.find((option) => option.value === entry)).filter((option) => option != null);
+	function reset() {
+		setDragging(null);
+		setDropLine(null);
+	}
+	function move(entry, offset) {
+		const next = [...own.value];
+		const from = next.indexOf(entry);
+		const to = Math.max(0, Math.min(next.length - 1, from + offset));
+		if (from === to) return;
+		next.splice(to, 0, ...next.splice(from, 1));
+		own.onValueChange?.(next);
+	}
+	function drop() {
+		const entry = dragging();
+		if (entry == null) return;
+		const seam = dropLine();
+		const from = own.value.indexOf(entry);
+		if (seam && seam.index === from) return reset();
+		const next = own.value.filter((candidate) => candidate !== entry);
+		let at = seam ? seam.before ? seam.index : seam.index + 1 : next.length;
+		if (from < at) at -= 1;
+		next.splice(Math.max(0, Math.min(next.length, at)), 0, entry);
+		own.onValueChange?.(next);
+		reset();
+	}
+	var _el$3 = _tmpl$3();
+	var _el$4 = _el$3.firstChild;
+	spread(_el$3, [rest, {
+		"data-scope": "order-list",
+		"data-part": "root",
+		"data-uid": uid,
+		onDragLeave: (event) => {
+			const host = event.currentTarget;
+			if (!event.relatedTarget || !host.contains(event.relatedTarget)) setDropLine(null);
+		}
+	}], true);
+	insert(_el$4, createComponent(For, {
+		get each() {
+			return rows();
+		},
+		children: (option, index) => {
+			const seam = () => dropLine() && dropLine().index === index() ? dropLine().before ? "top" : "bottom" : void 0;
+			var _el$5 = _tmpl$4();
+			var _el$7 = _el$5.firstChild.nextSibling;
+			var _el$9 = _el$7.nextSibling.firstChild;
+			var _el$10 = _el$9.nextSibling;
+			var _el$11 = _el$10.nextSibling;
+			var _el$12 = _el$11.nextSibling;
+			_el$5.addEventListener("drop", (event) => {
+				event.preventDefault();
+				drop();
+			});
+			_el$5.addEventListener("dragover", (event) => {
+				event.preventDefault();
+				if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+				const rect = event.currentTarget.getBoundingClientRect();
+				const before = event.clientY < rect.top + rect.height / 2;
+				setDropLine(dragging() != null && !(option.value === dragging() && before) ? {
+					index: index(),
+					before
+				} : null);
+			});
+			_el$5.addEventListener("dragend", reset);
+			_el$5.addEventListener("dragstart", (event) => {
+				setDragging(option.value);
+				event.dataTransfer?.setData("text/plain", option.value);
+				if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+			});
+			insert(_el$7, () => {
+				return option.label;
+			});
+			_el$9._$$click = () => move(option.value, -index());
+			insert(_el$9, () => {
+				return arrowGlyph(ARROWS.top);
+			});
+			_el$10._$$click = () => move(option.value, -1);
+			insert(_el$10, () => {
+				return arrowGlyph(ARROWS.up);
+			});
+			_el$11._$$click = () => move(option.value, 1);
+			insert(_el$11, () => {
+				return arrowGlyph(ARROWS.down);
+			});
+			_el$12._$$click = () => move(option.value, rows().length - 1 - index());
+			insert(_el$12, () => {
+				return arrowGlyph(ARROWS.bottom);
+			});
+			effect(() => {
+				return {
+					e: dragging() === option.value ? "" : void 0,
+					t: seam(),
+					a: messages().orderList.toTop,
+					o: index() === 0,
+					i: messages().orderList.moveUp,
+					n: index() === 0,
+					s: messages().orderList.moveDown,
+					h: index() === rows().length - 1,
+					r: messages().orderList.toBottom,
+					d: index() === rows().length - 1
+				};
+			}, ({ e, t, a, o, i, n, s, h, r, d }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$5, "data-dragging", e);
+				t !== _p$?.t && setAttribute(_el$5, "data-drop-line", t);
+				a !== _p$?.a && setAttribute(_el$9, "aria-label", a);
+				o !== _p$?.o && setAttribute(_el$9, "disabled", o);
+				i !== _p$?.i && setAttribute(_el$10, "aria-label", i);
+				n !== _p$?.n && setAttribute(_el$10, "disabled", n);
+				s !== _p$?.s && setAttribute(_el$11, "aria-label", s);
+				h !== _p$?.h && setAttribute(_el$11, "disabled", h);
+				r !== _p$?.r && setAttribute(_el$12, "aria-label", r);
+				d !== _p$?.d && setAttribute(_el$12, "disabled", d);
+			});
+			return _el$5;
+		}
+	}));
+	effect(() => own.label, (_v$) => {
+		setAttribute(_el$4, "aria-label", _v$);
+	});
+	return _el$3;
+}
+delegateEvents(["click"]);
+//#endregion
+export { OrderList };

package/dist/components/page-header/index.mjs

@@ -1,5 +1,5 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 //#region src/components/page-header/index.tsx
 /** The page's face: an eyebrow whisper, a serif title, one line of
 * description, and the actions resting beside the title on the same
@@ -8,7 +8,7 @@ function part(name, tag, extra = {}) {
 	function Component(props) {
 		return createComponent(tag, mergeProps(extra, props, {
 			"data-scope": "page-header",
-			get ["data-part"]() {
+			get "data-part"() {
 				return name.toLowerCase();
 			}
 		}));

package/dist/components/pagination/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { Pagination as Pagination$1 } from "@ark-ui/solid/pagination";
 //#region src/components/pagination/index.tsx
 function PaginationRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Pagination$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(Pagination$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

package/dist/components/password-input/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { PasswordInput as PasswordInput$1 } from "@ark-ui/solid/password-input";
 //#region src/components/password-input/index.tsx
 function PasswordInputRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(PasswordInput$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(PasswordInput$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

package/dist/components/pin-input/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { PinInput as PinInput$1 } from "@ark-ui/solid/pin-input";
 //#region src/components/pin-input/index.tsx
 function PinInputRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(PinInput$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(PinInput$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

package/dist/components/popconfirm/index.mjs

@@ -1,12 +1,13 @@
 import { Button } from "../button/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { Portal, createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, insert, spread, template } from "@solidjs/web";
 import { createSignal, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
 import { Popover } from "@ark-ui/solid/popover";
 //#region src/components/popconfirm/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<p data-part=message>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<div data-part=actions>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<button>`);
+var _tmpl$ = /* @__PURE__ */ template(`<p data-part=message>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-part=actions><!><!>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<button>`);
 /** A question at the point of no return: the trigger opens a small
 * anchored vessel carrying the message and two answers. Confirmation
 * and cancellation are the caller's to act on — the panel closes
@@ -35,21 +36,27 @@ function Popconfirm(props) {
 		positioning: { placement: "top" },
 		get children() {
 			return [createComponent(Popover.Trigger, { asChild: (propsFn) => (() => {
-				var _el$3 = _tmpl$3();
-				spread(_el$3, mergeProps(propsFn, rest), false, true);
-				insert(_el$3, () => own.children);
-				return _el$3;
+				var _el$5 = _tmpl$3();
+				spread(_el$5, [propsFn, rest], true);
+				insert(_el$5, () => {
+					return own.children;
+				});
+				return _el$5;
 			})() }), createComponent(Portal, { get children() {
 				return createComponent(Popover.Positioner, { get children() {
 					return createComponent(Popover.Content, {
-						"class": "bs-popconfirm",
+						class: "bs-popconfirm",
 						get children() {
 							return [(() => {
 								var _el$ = _tmpl$();
-								insert(_el$, () => own.message);
+								insert(_el$, () => {
+									return own.message;
+								});
 								return _el$;
 							})(), (() => {
 								var _el$2 = _tmpl$2();
+								var _el$3 = _el$2.firstChild;
+								var _el$4 = _el$3.nextSibling;
 								insert(_el$2, createComponent(Button, {
 									variant: "ghost",
 									size: "sm",
@@ -57,14 +64,14 @@ function Popconfirm(props) {
 									get children() {
 										return own.cancelText ?? "Cancel";
 									}
-								}), null);
+								}), _el$3);
 								insert(_el$2, createComponent(Button, {
 									size: "sm",
 									onClick: () => settle(true),
 									get children() {
 										return own.confirmText ?? "Confirm";
 									}
-								}), null);
+								}), _el$4);
 								return _el$2;
 							})()];
 						}

package/dist/components/progress/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { Progress as Progress$1 } from "@ark-ui/solid/progress";
 //#region src/components/progress/index.tsx
 function ProgressRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Progress$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(Progress$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

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

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, effect, insert, mergeProps, setAttribute, setStyleProperty, spread, template } from "solid-js/web";
+import { createComponent, effect, insert, setAttribute, setStyleProperty, spread, template } from "@solidjs/web";
 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>`);
+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) {
 	injectComponentStyle("progress-group");
 	const [own, rest] = splitProps(props, [
@@ -19,59 +19,66 @@ function ProgressGroup(props) {
 		return whole > 0 ? `${value / whole * 100}%` : "0%";
 	};
 	const nameOf = (segment, index) => segment.label ?? segment.pigment ?? `Segment ${index + 1}`;
-	return (() => {
-		var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "progress-group",
-			"data-part": "root"
-		}), false, true);
-		insert(_el$2, createComponent(For, {
-			get each() {
-				return own.segments;
-			},
-			children: (segment, index) => (() => {
-				var _el$4 = _tmpl$3();
-				effect((_p$) => {
-					var _v$ = segment.pigment, _v$2 = segment.value, _v$3 = total(), _v$4 = nameOf(segment, index()), _v$5 = share(segment.value);
-					_v$ !== _p$.e && setAttribute(_el$4, "data-pigment", _p$.e = _v$);
-					_v$2 !== _p$.t && setAttribute(_el$4, "aria-valuenow", _p$.t = _v$2);
-					_v$3 !== _p$.a && setAttribute(_el$4, "aria-valuemax", _p$.a = _v$3);
-					_v$4 !== _p$.o && setAttribute(_el$4, "aria-label", _p$.o = _v$4);
-					_v$5 !== _p$.i && setStyleProperty(_el$4, "inline-size", _p$.i = _v$5);
-					return _p$;
-				}, {
-					e: void 0,
-					t: void 0,
-					a: void 0,
-					o: void 0,
-					i: void 0
-				});
-				return _el$4;
-			})()
-		}));
-		insert(_el$, createComponent(Show, {
-			get when() {
-				return own.showLegend ?? true;
-			},
-			get children() {
-				var _el$3 = _tmpl$();
-				insert(_el$3, createComponent(For, {
-					get each() {
-						return own.segments;
-					},
-					children: (segment, index) => (() => {
-						var _el$5 = _tmpl$4(), _el$7 = _el$5.firstChild.nextSibling, _el$8 = _el$7.nextSibling;
-						insert(_el$7, () => nameOf(segment, index()));
-						insert(_el$8, () => String(segment.value));
-						effect(() => setAttribute(_el$5, "data-pigment", segment.pigment));
-						return _el$5;
-					})()
-				}));
-				return _el$3;
-			}
-		}), null);
-		return _el$;
-	})();
+	var _el$ = _tmpl$2();
+	var _el$2 = _el$.firstChild;
+	spread(_el$, [rest, {
+		"data-scope": "progress-group",
+		"data-part": "root"
+	}], true);
+	insert(_el$2, createComponent(For, {
+		get each() {
+			return own.segments;
+		},
+		children: (segment, index) => (() => {
+			var _el$4 = _tmpl$3();
+			effect(() => {
+				return {
+					e: segment.pigment,
+					t: segment.value,
+					a: total(),
+					o: nameOf(segment, index()),
+					i: share(segment.value)
+				};
+			}, ({ e, t, a, o, i }, _p$) => {
+				e !== _p$?.e && setAttribute(_el$4, "data-pigment", e);
+				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);
+			});
+			return _el$4;
+		})()
+	}));
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return own.showLegend ?? true;
+		},
+		get children() {
+			var _el$3 = _tmpl$();
+			insert(_el$3, createComponent(For, {
+				get each() {
+					return own.segments;
+				},
+				children: (segment, index) => (() => {
+					var _el$5 = _tmpl$4();
+					var _el$7 = _el$5.firstChild.nextSibling;
+					var _el$8 = _el$7.nextSibling;
+					insert(_el$7, () => {
+						return nameOf(segment, index());
+					});
+					insert(_el$8, () => {
+						return String(segment.value);
+					});
+					effect(() => segment.pigment, (_v$) => {
+						setAttribute(_el$5, "data-pigment", _v$);
+					});
+					return _el$5;
+				})()
+			}));
+			return _el$3;
+		}
+	}), null);
+	return _el$;
 }
 //#endregion
 export { ProgressGroup };

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

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 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 createComponent(RadioGroup$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

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

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 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 createComponent(RatingGroup$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

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

@@ -0,0 +1,22 @@
+import { JSX } from "solid-js";
+//#region src/components/result/index.d.ts
+type Status = "success" | "warning" | "danger" | "info";
+export interface ResultRootProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** The verdict the operation returned; the fixed pigments speak it. */
+  status?: Status;
+}
+export declare function ResultRoot(props: ResultRootProps): JSX.Element;
+/** The mark carries all four verdicts and lets the root choose, so the
+ * icon can never drift from the status the root declares. */
+export declare function ResultIcon(props: JSX.HTMLAttributes<HTMLDivElement>): JSX.Element;
+/** 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: {
+  Root: typeof ResultRoot;
+  Icon: typeof ResultIcon;
+  Title: (props: JSX.HTMLAttributes<HTMLElement>) => JSX.Element;
+  Description: (props: JSX.HTMLAttributes<HTMLElement>) => JSX.Element;
+  Extra: (props: JSX.HTMLAttributes<HTMLElement>) => JSX.Element;
+};
+//#endregion