@bysages/solid 0.4.3 → 0.5.0

package/dist/components/banner/index.mjs

@@ -1,11 +1,11 @@
-import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
-import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { r as iconNode } from "../../icon-DQqYA2fO.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-DS9ppb4C.mjs";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { splitProps } from "solid-js";
-//#region src/components/banner/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+import { Show, createSignal, splitProps } from "solid-js";
+// src/components/banner/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<button>`);
 /** A page-level notice, spoken across the full measure: a wash of the
 * status pigment, one heavier hairline on the leading edge, and room
 * for actions and a quiet close. Ink is the neutral register; the four
@@ -13,20 +13,22 @@ var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
 function Root(props) {
 	const [own, rest] = splitProps(props, ["status"]);
 	const status = own.status ?? "ink";
-	var _el$ = _tmpl$();
-	spread(_el$, [rest, {
-		role: status === "ink" ? void 0 : "status",
-		"data-scope": "banner",
-		"data-part": "root",
-		"data-status": status
-	}], false);
-	return _el$;
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			"role": status === "ink" ? void 0 : "status",
+			"data-scope": "banner",
+			"data-part": "root",
+			"data-status": status
+		}), false, false);
+		return _el$;
+	})();
 }
 function part(name, tag) {
 	function Component(props) {
 		return createComponent(tag, mergeProps(props, {
 			"data-scope": "banner",
-			get "data-part"() {
+			get ["data-part"]() {
 				return name.toLowerCase();
 			}
 		}));
@@ -43,23 +45,99 @@ const Actions = part("Actions", "div");
 function Close(props) {
 	const [own, rest] = splitProps(props, ["type"]);
 	const messages = useComponentMessages();
-	var _el$2 = _tmpl$2();
-	spread(_el$2, [rest, {
-		get type() {
-			return own.type ?? "button";
-		},
-		get "aria-label"() {
-			return rest["aria-label"] ?? messages().banner.dismiss;
+	return (() => {
+		var _el$2 = _tmpl$2();
+		spread(_el$2, mergeProps(rest, {
+			get type() {
+				return own.type ?? "button";
+			},
+			get ["aria-label"]() {
+				return rest["aria-label"] ?? messages().banner.dismiss;
+			},
+			"data-scope": "banner",
+			"data-part": "close"
+		}), false, true);
+		insert(_el$2, () => iconNode("x"));
+		return _el$2;
+	})();
+}
+/** The shorthand: a complete notice from text, with actions and the
+* close folded away until asked for. Once closed, it stays closed. */
+function BannerFacade(props) {
+	const [own, rest] = splitProps(props, [
+		"actions",
+		"children",
+		"dismissible",
+		"message",
+		"status",
+		"title"
+	]);
+	const [visible, setVisible] = createSignal(true);
+	return createComponent(Show, {
+		get when() {
+			return visible();
 		},
-		"data-scope": "banner",
-		"data-part": "close"
-	}], true);
-	insert(_el$2, () => {
-		return iconNode("x");
+		get children() {
+			return createComponent(Root, mergeProps(rest, {
+				get status() {
+					return own.status;
+				},
+				get children() {
+					return [createComponent(Body, { get children() {
+						return [
+							createComponent(Show, {
+								get when() {
+									return own.title;
+								},
+								get children() {
+									return createComponent(Title, { get children() {
+										return own.title;
+									} });
+								}
+							}),
+							createComponent(Show, {
+								get when() {
+									return own.message;
+								},
+								get children() {
+									return createComponent(Description, { get children() {
+										return own.message;
+									} });
+								}
+							}),
+							createComponent(Show, {
+								get when() {
+									return own.children;
+								},
+								get children() {
+									return own.children;
+								}
+							}),
+							createComponent(Show, {
+								get when() {
+									return own.actions;
+								},
+								get children() {
+									return createComponent(Actions, { get children() {
+										return own.actions;
+									} });
+								}
+							})
+						];
+					} }), createComponent(Show, {
+						get when() {
+							return own.dismissible;
+						},
+						get children() {
+							return createComponent(Close, { onClick: () => setVisible(false) });
+						}
+					})];
+				}
+			}));
+		}
 	});
-	return _el$2;
 }
-const Banner = Object.assign(Root, {
+const Banner = Object.assign(BannerFacade, {
 	Root,
 	Icon,
 	Body,
@@ -69,5 +147,4 @@ const Banner = Object.assign(Root, {
 	Close
 });
 injectComponentStyle("banner");
-//#endregion
 export { Banner };

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

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/bento/index.d.ts
 export interface BentoProps extends JSX.HTMLAttributes<HTMLDivElement> {
   /** Tracks across the lattice. */
   columns?: number;
@@ -20,5 +19,4 @@ export declare function BentoCell(props: BentoCellProps): JSX.Element;
 export declare const Bento: typeof BentoRoot & {
   Root: typeof BentoRoot;
   Cell: typeof BentoCell;
-};
-//#endregion
+};

package/dist/components/bento/index.mjs

@@ -1,51 +1,50 @@
-import { insert, spread, template } from "@solidjs/web";
+import { insert, mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
-//#region src/components/bento/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+// src/components/bento/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
 /** The bento lattice: a grid of unequal tiles that reads as one plate.
 * The container owns the track count; each cell claims its own span. */
 function BentoRoot(props) {
 	injectComponentStyle("bento");
 	const [own, rest] = splitProps(props, ["columns"]);
-	var _el$ = _tmpl$();
-	spread(_el$, [rest, {
-		"data-scope": "bento",
-		"data-part": "root",
-		get style() {
-			return { "--bs-bento-columns": String(own.columns ?? 3) };
-		}
-	}], true);
-	insert(_el$, () => {
-		return rest.children;
-	});
-	return _el$;
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "bento",
+			"data-part": "root",
+			get style() {
+				return { "--bs-bento-columns": String(own.columns ?? 3) };
+			}
+		}), false, true);
+		insert(_el$, () => rest.children);
+		return _el$;
+	})();
 }
 /** One tile: `span` claims columns, `rowSpan` claims rows — the rest
 * of the plate stays in measure. */
 function BentoCell(props) {
 	injectComponentStyle("bento");
 	const [own, rest] = splitProps(props, ["span", "rowSpan"]);
-	var _el$2 = _tmpl$();
-	spread(_el$2, [rest, {
-		"data-scope": "bento",
-		"data-part": "cell",
-		get style() {
-			return {
-				"--bs-bento-span-x": String(own.span ?? 1),
-				"--bs-bento-span-y": String(own.rowSpan ?? 1)
-			};
-		}
-	}], true);
-	insert(_el$2, () => {
-		return rest.children;
-	});
-	return _el$2;
+	return (() => {
+		var _el$2 = _tmpl$();
+		spread(_el$2, mergeProps(rest, {
+			"data-scope": "bento",
+			"data-part": "cell",
+			get style() {
+				return {
+					"--bs-bento-span-x": String(own.span ?? 1),
+					"--bs-bento-span-y": String(own.rowSpan ?? 1)
+				};
+			}
+		}), false, true);
+		insert(_el$2, () => rest.children);
+		return _el$2;
+	})();
 }
 /** The whole family under one handle — Bento.Root, Bento.Cell. */
 const Bento = Object.assign(BentoRoot, {
 	Root: BentoRoot,
 	Cell: BentoCell
 });
-//#endregion
 export { Bento, BentoCell, BentoRoot };

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

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/block-ui/index.d.ts
 export interface BlockUIProps extends JSX.HTMLAttributes<HTMLDivElement> {
   /** Whether the curtain is drawn. */
   blocked?: boolean;
@@ -10,5 +9,4 @@ export interface BlockUIProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * wait. Callers own the state; the curtain only answers it. */
 export declare const BlockUI: ((props: BlockUIProps) => JSX.Element) & {
   Root: (props: BlockUIProps) => JSX.Element;
-};
-//#endregion
+};

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

@@ -1,44 +1,41 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
 import { Spinner } from "../spinner/index.mjs";
-import { createComponent, insert, spread, template } from "@solidjs/web";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { Show, splitProps } from "solid-js";
-//#region src/components/block-ui/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=block-ui data-part=mask>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<div><!><!>`);
+// src/components/block-ui/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-scope=block-ui data-part=mask>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div>`);
 /** A curtain over content that must wait: the blocked region keeps its
 * shape and dims under frosted paper while a quiet wheel reports the
 * wait. Callers own the state; the curtain only answers it. */
 const BlockUI = withSelfRoot(function BlockUI(props) {
 	injectComponentStyle("block-ui");
 	const [own, rest] = splitProps(props, ["blocked", "children"]);
-	var _el$ = _tmpl$2();
-	var _el$2 = _el$.firstChild;
-	var _el$4 = _el$2.nextSibling;
-	spread(_el$, [rest, {
-		"data-scope": "block-ui",
-		"data-part": "root",
-		get "data-blocked"() {
-			return own.blocked ? "" : void 0;
-		},
-		get "aria-busy"() {
-			return own.blocked || void 0;
-		}
-	}], true);
-	insert(_el$, () => {
-		return own.children;
-	}, _el$2);
-	insert(_el$, createComponent(Show, {
-		get when() {
-			return own.blocked;
-		},
-		get children() {
-			var _el$3 = _tmpl$();
-			insert(_el$3, createComponent(Spinner, { size: "lg" }));
-			return _el$3;
-		}
-	}), _el$4);
-	return _el$;
+	return (() => {
+		var _el$ = _tmpl$2();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "block-ui",
+			"data-part": "root",
+			get ["data-blocked"]() {
+				return own.blocked ? "" : void 0;
+			},
+			get ["aria-busy"]() {
+				return own.blocked || void 0;
+			}
+		}), false, true);
+		insert(_el$, () => own.children, null);
+		insert(_el$, createComponent(Show, {
+			get when() {
+				return own.blocked;
+			},
+			get children() {
+				var _el$2 = _tmpl$();
+				insert(_el$2, createComponent(Spinner, { size: "lg" }));
+				return _el$2;
+			}
+		}), null);
+		return _el$;
+	})();
 });
-//#endregion
 export { BlockUI };

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

@@ -1,6 +1,18 @@
 import { Component, JSX } from "solid-js";
-//#region src/components/breadcrumb/index.d.ts
-export declare const Breadcrumb: Component<Record<string, unknown>> & {
+export type BreadcrumbItem = string | {
+  label: string;
+  href?: string;
+};
+export interface BreadcrumbFacadeProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "children"> {
+  /** The waymarks, in walking order. */
+  items: BreadcrumbItem[];
+  /** The trail's name, when the default is not enough. */
+  label?: string;
+}
+/** The shorthand: the whole trail from plain labels and destinations,
+ * with the last waymark set down as the current page. */
+declare function BreadcrumbFacade(props: BreadcrumbFacadeProps): JSX.Element;
+export declare const Breadcrumb: typeof BreadcrumbFacade & {
   Root: Component<Record<string, unknown>>;
   List: Component<Record<string, unknown>>;
   Item: Component<Record<string, unknown>>;
@@ -8,4 +20,4 @@ export declare const Breadcrumb: Component<Record<string, unknown>> & {
   Current: Component<Record<string, unknown>>;
   Separator: Component<JSX.HTMLAttributes<HTMLSpanElement>>;
 };
-//#endregion
+export {};

package/dist/components/breadcrumb/index.mjs

@@ -1,16 +1,16 @@
-import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
-import { createComponent, mergeProps, spread, template } from "@solidjs/web";
+import { n as useComponentMessages } from "../../use-component-messages-DS9ppb4C.mjs";
+import { createComponent, mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { mergeProps as mergeProps$1 } from "solid-js";
-//#region src/components/breadcrumb/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+import { For, Show, mergeProps as mergeProps$1, splitProps } from "solid-js";
+// src/components/breadcrumb/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span>`);
 function part(name, tag, extra = {}) {
 	return ((props) => {
 		const messages = useComponentMessages();
 		const partExtra = typeof extra === "function" ? extra(messages()) : extra;
 		return createComponent(tag, mergeProps(partExtra, props, {
 			"data-scope": "breadcrumb",
-			get "data-part"() {
+			get ["data-part"]() {
 				return name.toLowerCase();
 			}
 		}));
@@ -23,16 +23,61 @@ const Link = part("Link", "a");
 const Current = part("Current", "span", { "aria-current": "page" });
 const Separator = (props) => (() => {
 	var _el$ = _tmpl$();
-	spread(_el$, [() => {
-		return mergeProps$1({ children: "/" }, props);
-	}, {
+	spread(_el$, mergeProps(() => mergeProps$1({ children: "/" }, props), {
 		"aria-hidden": "true",
 		"data-scope": "breadcrumb",
 		"data-part": "separator"
-	}], false);
+	}), false, false);
 	return _el$;
 })();
-const Breadcrumb = Object.assign(Root, {
+/** The shorthand: the whole trail from plain labels and destinations,
+* with the last waymark set down as the current page. */
+function BreadcrumbFacade(props) {
+	const [own, rest] = splitProps(props, ["items", "label"]);
+	return createComponent(Root, mergeProps(rest, () => own.label ? { "aria-label": own.label } : {}, { get children() {
+		return createComponent(List, { get children() {
+			return createComponent(For, {
+				get each() {
+					return own.items;
+				},
+				children: (item, index) => {
+					const entry = typeof item === "string" ? { label: item } : item;
+					const current = () => index() === own.items.length - 1;
+					return [createComponent(Item, { get children() {
+						return createComponent(Show, {
+							get when() {
+								return !current();
+							},
+							get fallback() {
+								return createComponent(Current, { get children() {
+									return entry.label;
+								} });
+							},
+							get children() {
+								return createComponent(Link, {
+									get href() {
+										return entry.href;
+									},
+									get children() {
+										return entry.label;
+									}
+								});
+							}
+						});
+					} }), createComponent(Show, {
+						get when() {
+							return !current();
+						},
+						get children() {
+							return createComponent(Separator, {});
+						}
+					})];
+				}
+			});
+		} });
+	} }));
+}
+const Breadcrumb = Object.assign(BreadcrumbFacade, {
 	Root,
 	List,
 	Item,
@@ -41,5 +86,4 @@ const Breadcrumb = Object.assign(Root, {
 	Separator
 });
 injectComponentStyle("breadcrumb");
-//#endregion
 export { Breadcrumb };

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

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/browser/index.d.ts
 export interface BrowserPartProps extends JSX.HTMLAttributes<HTMLDivElement> {}
 /** The three lamps are the system's own fixed pigments — the same
  * semantics reserved for danger, warning, and success. */
@@ -17,5 +16,4 @@ export declare const Browser: typeof BrowserRoot & {
   Dots: typeof BrowserDots;
   UrlBar: typeof BrowserUrlBar;
   Body: typeof BrowserBody;
-};
-//#endregion
+};

package/dist/components/browser/index.mjs

@@ -1,19 +1,19 @@
-import { insert, setAttribute, spread, template } from "@solidjs/web";
+import { insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-//#region src/components/browser/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=browser data-part=dot>`);
+// src/components/browser/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-scope=browser data-part=dot>`);
 /** The three lamps are the system's own fixed pigments — the same
 * semantics reserved for danger, warning, and success. */
 function BrowserDots(props) {
 	injectComponentStyle("browser");
-	var _el$ = _tmpl$();
-	spread(_el$, [props, {
-		"data-scope": "browser",
-		"data-part": "dots"
-	}], true);
-	insert(_el$, () => {
-		return [
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(props, {
+			"data-scope": "browser",
+			"data-part": "dots"
+		}), false, true);
+		insert(_el$, () => [
 			"danger",
 			"warning",
 			"success"
@@ -21,57 +21,57 @@ function BrowserDots(props) {
 			var _el$2 = _tmpl$2();
 			setAttribute(_el$2, "data-tone", tone);
 			return _el$2;
-		})());
-	});
-	return _el$;
+		})()));
+		return _el$;
+	})();
 }
 function BrowserRoot(props) {
 	injectComponentStyle("browser");
-	var _el$3 = _tmpl$();
-	spread(_el$3, [props, {
-		"data-scope": "browser",
-		"data-part": "root"
-	}], true);
-	insert(_el$3, () => {
-		return props.children;
-	});
-	return _el$3;
+	return (() => {
+		var _el$3 = _tmpl$();
+		spread(_el$3, mergeProps(props, {
+			"data-scope": "browser",
+			"data-part": "root"
+		}), false, true);
+		insert(_el$3, () => props.children);
+		return _el$3;
+	})();
 }
 function BrowserTitleBar(props) {
 	injectComponentStyle("browser");
-	var _el$4 = _tmpl$();
-	spread(_el$4, [props, {
-		"data-scope": "browser",
-		"data-part": "titlebar"
-	}], true);
-	insert(_el$4, () => {
-		return props.children;
-	});
-	return _el$4;
+	return (() => {
+		var _el$4 = _tmpl$();
+		spread(_el$4, mergeProps(props, {
+			"data-scope": "browser",
+			"data-part": "titlebar"
+		}), false, true);
+		insert(_el$4, () => props.children);
+		return _el$4;
+	})();
 }
 function BrowserUrlBar(props) {
 	injectComponentStyle("browser");
-	var _el$5 = _tmpl$();
-	spread(_el$5, [props, {
-		"data-scope": "browser",
-		"data-part": "urlbar"
-	}], true);
-	insert(_el$5, () => {
-		return props.children;
-	});
-	return _el$5;
+	return (() => {
+		var _el$5 = _tmpl$();
+		spread(_el$5, mergeProps(props, {
+			"data-scope": "browser",
+			"data-part": "urlbar"
+		}), false, true);
+		insert(_el$5, () => props.children);
+		return _el$5;
+	})();
 }
 function BrowserBody(props) {
 	injectComponentStyle("browser");
-	var _el$6 = _tmpl$();
-	spread(_el$6, [props, {
-		"data-scope": "browser",
-		"data-part": "body"
-	}], true);
-	insert(_el$6, () => {
-		return props.children;
-	});
-	return _el$6;
+	return (() => {
+		var _el$6 = _tmpl$();
+		spread(_el$6, mergeProps(props, {
+			"data-scope": "browser",
+			"data-part": "body"
+		}), false, true);
+		insert(_el$6, () => props.children);
+		return _el$6;
+	})();
 }
 /** A browser window as a vessel: title bar, the three lamps, the
 * address well, and a body that carries whatever the site hangs in
@@ -83,5 +83,4 @@ const Browser = Object.assign(BrowserRoot, {
 	UrlBar: BrowserUrlBar,
 	Body: BrowserBody
 });
-//#endregion
 export { Browser, BrowserBody, BrowserDots, BrowserRoot, BrowserTitleBar, BrowserUrlBar };

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

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/button/index.d.ts
 /** The control recipe as a standalone button: the variant chooses how it
  * rests, the tone chooses the pigment. Ink is the solemn default; any
  * action can carry the primary weight. The react package's asChild has
@@ -13,5 +12,4 @@ export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement>
 }
 export declare const Button: ((props: ButtonProps) => JSX.Element) & {
   Root: (props: ButtonProps) => JSX.Element;
-};
-//#endregion
+};