@bysages/solid 0.4.3 → 0.5.0

package/dist/components/alert/index.mjs

@@ -1,11 +1,11 @@
-import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
-import { createComponent, insert, spread, template } from "@solidjs/web";
+import { r as iconNode } from "../../icon-DQqYA2fO.mjs";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { createContext, splitProps, useContext } from "solid-js";
-//#region src/components/alert/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=alert data-part=icon>`);
-var _tmpl$3 = /* @__PURE__ */ template(`<p>`);
+// src/components/alert/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span data-scope=alert data-part=icon>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<p>`);
 const StatusContext = createContext(() => "ink");
 function statusIcon(status) {
 	return iconNode({
@@ -26,51 +26,57 @@ function AlertRoot(props) {
 		value: status,
 		get children() {
 			var _el$ = _tmpl$();
-			spread(_el$, [rest, {
+			spread(_el$, mergeProps(rest, {
 				get role() {
 					return status() === "ink" || status() === "info" ? "status" : "alert";
 				},
 				"data-scope": "alert",
 				"data-part": "root",
-				get "data-status"() {
+				get ["data-status"]() {
 					return status();
 				}
-			}], false);
+			}), false, false);
 			return _el$;
 		}
 	});
 }
 function Icon() {
 	const status = useContext(StatusContext);
-	var _el$2 = _tmpl$2();
-	insert(_el$2, () => {
-		return statusIcon(status());
-	});
-	return _el$2;
+	return (() => {
+		var _el$2 = _tmpl$2();
+		insert(_el$2, () => statusIcon(status()));
+		return _el$2;
+	})();
 }
 function Body(props) {
-	var _el$3 = _tmpl$();
-	spread(_el$3, [props, {
-		"data-scope": "alert",
-		"data-part": "body"
-	}], false);
-	return _el$3;
+	return (() => {
+		var _el$3 = _tmpl$();
+		spread(_el$3, mergeProps(props, {
+			"data-scope": "alert",
+			"data-part": "body"
+		}), false, false);
+		return _el$3;
+	})();
 }
 function Title(props) {
-	var _el$4 = _tmpl$3();
-	spread(_el$4, [props, {
-		"data-scope": "alert",
-		"data-part": "title"
-	}], false);
-	return _el$4;
+	return (() => {
+		var _el$4 = _tmpl$3();
+		spread(_el$4, mergeProps(props, {
+			"data-scope": "alert",
+			"data-part": "title"
+		}), false, false);
+		return _el$4;
+	})();
 }
 function Description(props) {
-	var _el$5 = _tmpl$3();
-	spread(_el$5, [props, {
-		"data-scope": "alert",
-		"data-part": "description"
-	}], false);
-	return _el$5;
+	return (() => {
+		var _el$5 = _tmpl$3();
+		spread(_el$5, mergeProps(props, {
+			"data-scope": "alert",
+			"data-part": "description"
+		}), false, false);
+		return _el$5;
+	})();
 }
 const Alert = Object.assign(AlertRoot, {
 	Root: AlertRoot,
@@ -80,5 +86,4 @@ const Alert = Object.assign(AlertRoot, {
 	Description
 });
 injectComponentStyle("alert");
-//#endregion
 export { Alert };

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

@@ -1,5 +1,4 @@
 import { AngleSlider as AngleSlider$1, AngleSliderRootProps } from "@ark-ui/solid/angle-slider";
-//#region src/components/angle-slider/index.d.ts
 /** Ark's AngleSlider, dressed in the paper-and-ink system: a flat paper dial
  * the thumb sweeps as a pigment needle over hairline degree ticks. The API
  * is Ark's own — Root, Label, ValueText, Control, Thumb, MarkerGroup,
@@ -26,4 +25,4 @@ type AngleSliderParts = Omit<typeof AngleSlider$1, "Root"> & {
   Root: typeof AngleSliderRoot;
 };
 export declare const AngleSlider: typeof AngleSliderFacade & AngleSliderParts;
-//#endregion
+export {};

package/dist/components/angle-slider/index.mjs

@@ -1,10 +1,10 @@
-import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
-import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { createComponent, mergeProps } from "@solidjs/web";
+import { t as defineFamily } from "../../family-B5HtE0on.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { createComponent, mergeProps } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { For, Show, splitProps } from "solid-js";
 import { AngleSlider as AngleSlider$1 } from "@ark-ui/solid/angle-slider";
-//#region src/components/angle-slider/index.tsx
+// src/components/angle-slider/index.tsx
 function AngleSliderRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
 	const id = useElementId("angle-slider", () => rest.id);
@@ -12,7 +12,7 @@ function AngleSliderRoot(props) {
 		get id() {
 			return id();
 		},
-		get "data-size"() {
+		get ["data-size"]() {
 			return own.size ?? "md";
 		}
 	}));
@@ -36,9 +36,7 @@ function AngleSliderFacade(props) {
 		get defaultValue() {
 			return props.defaultValue ?? 45;
 		}
-	}, () => {
-		return props.value === void 0 ? {} : { value: props.value };
-	}, {
+	}, () => props.value === void 0 ? {} : { value: props.value }, {
 		onValueChange: (details) => props.onValueChange?.(details.value),
 		get children() {
 			return [
@@ -77,5 +75,4 @@ const AngleSlider = defineFamily(AngleSliderFacade, {
 	Root: AngleSliderRoot
 });
 injectComponentStyle("angle-slider");
-//#endregion
 export { AngleSlider };

package/dist/components/aspect-ratio/index.d.mts

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/aspect-ratio/index.d.ts
 /** A frame that keeps its shape: the box holds the given ratio whatever
  * the width it is dealt, and the child fills the frame it is given. */
 export interface AspectRatioProps extends JSX.HTMLAttributes<HTMLDivElement> {
@@ -8,5 +7,4 @@ export interface AspectRatioProps extends JSX.HTMLAttributes<HTMLDivElement> {
 }
 export declare const AspectRatio: ((props: AspectRatioProps) => JSX.Element) & {
   Root: (props: AspectRatioProps) => JSX.Element;
-};
-//#endregion
+};

package/dist/components/aspect-ratio/index.mjs

@@ -1,24 +1,25 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { spread, template } from "@solidjs/web";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
+import { mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
-//#region src/components/aspect-ratio/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+// src/components/aspect-ratio/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
 const AspectRatio = withSelfRoot(function AspectRatio(props) {
 	injectComponentStyle("aspect-ratio");
 	const [own, rest] = splitProps(props, ["ratio"]);
-	var _el$ = _tmpl$();
-	spread(_el$, [rest, {
-		get style() {
-			return {
-				...rest.style,
-				"--bs-aspect-ratio": own.ratio ?? "1 / 1"
-			};
-		},
-		"data-scope": "aspect-ratio",
-		"data-part": "root"
-	}], false);
-	return _el$;
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			get style() {
+				return {
+					...rest.style,
+					"--bs-aspect-ratio": own.ratio ?? "1 / 1"
+				};
+			},
+			"data-scope": "aspect-ratio",
+			"data-part": "root"
+		}), false, false);
+		return _el$;
+	})();
 });
-//#endregion
 export { AspectRatio };

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

@@ -1,5 +1,4 @@
 import { Combobox } from "../combobox/index.mjs";
-//#region src/components/autocomplete/index.d.ts
 export interface AutoCompleteProps {
   id?: string;
   value?: string;
@@ -21,4 +20,4 @@ export interface AutoCompleteProps {
  */
 declare function AutoCompleteImpl(props: AutoCompleteProps): import("solid-js").JSX.Element;
 export declare const AutoComplete: typeof AutoCompleteImpl & typeof Combobox;
-//#endregion
+export {};

package/dist/components/autocomplete/index.mjs

@@ -1,14 +1,13 @@
-import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
-import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
+import { t as defineFamily } from "../../family-B5HtE0on.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-DS9ppb4C.mjs";
 import { Combobox as Combobox$1 } from "../combobox/index.mjs";
-import { createComponent, mergeProps } from "@solidjs/web";
+import { Portal, createComponent, mergeProps } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { For, createEffect, splitProps } from "solid-js";
 import { useListCollection } from "@ark-ui/solid/collection";
 import { Combobox } from "@ark-ui/solid/combobox";
-import { Portal } from "solid-js/web";
-//#region src/components/autocomplete/index.tsx
+// src/components/autocomplete/index.tsx
 /**
 * Free text with suggestions: the reader types anything, the list
 * narrows to help, and both a pick and a custom value end up in the
@@ -49,7 +48,7 @@ function AutoCompleteImpl(props) {
 		get inputValue() {
 			return own.value;
 		},
-		get "data-size"() {
+		get ["data-size"]() {
 			return own.size ?? "md";
 		},
 		allowCustomValue: true,
@@ -91,5 +90,4 @@ function AutoCompleteImpl(props) {
 	}));
 }
 const AutoComplete = defineFamily(AutoCompleteImpl, Combobox$1);
-//#endregion
 export { AutoComplete };

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

@@ -1,6 +1,5 @@
-import { ComponentProps } from "solid-js";
+import { ComponentProps, JSX } from "solid-js";
 import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
-//#region src/components/avatar/index.d.ts
 /** Avatar, dressed in the paper-and-ink system: a circular seal on
  * inset paper that holds initials until the image loads over them.
  * `size` picks a control-height rung for the seal — the core styles
@@ -9,15 +8,27 @@ import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
 export type AvatarSize = "sm" | "md" | "lg";
 export interface AvatarProps extends ComponentProps<typeof Avatar$1.Root> {
   /** Seal diameter: the small, medium, or large control rung. The
-   * default (large) stands as tall as the biggest control so an avatar
+   * default (medium) stands as tall as the biggest control so an avatar
    * rides a row without stretching it. */
   size?: AvatarSize;
   /** The corner: round by default; square cuts it sharp, a stamp
    * beside a round portrait. */
   shape?: "circle" | "square";
 }
-declare function AvatarRoot(props: AvatarProps): import("solid-js").JSX.Element;
-export declare const Avatar: typeof AvatarRoot & Omit<typeof Avatar$1, "Root"> & {
+declare function AvatarRoot(props: AvatarProps): JSX.Element;
+export interface AvatarFacadeProps extends Omit<AvatarProps, "children" | "shape" | "size"> {
+  /** The person's name — the fallback initials and image description. */
+  name?: string;
+  /** The portrait source, loaded above the initials fallback. */
+  src?: string;
+  size?: AvatarSize;
+  shape?: "circle" | "square";
+  children?: JSX.Element;
+}
+/** The shorthand: a complete avatar from a name and image, with the
+ * anatomy still there when a consumer needs to compose its own. */
+declare function AvatarFacade(props: AvatarFacadeProps): JSX.Element;
+export declare const Avatar: typeof AvatarFacade & Omit<typeof Avatar$1, "Root"> & {
   Root: typeof AvatarRoot;
 };
-//#endregion
+export {};

package/dist/components/avatar/index.mjs

@@ -1,10 +1,10 @@
-import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
-import { t as useElementId } from "../../id-2ygNzPHF.mjs";
-import { createComponent, mergeProps } from "@solidjs/web";
+import { t as defineFamily } from "../../family-B5HtE0on.mjs";
+import { t as useElementId } from "../../id-DGvz-2rQ.mjs";
+import { createComponent, mergeProps } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
-import { splitProps } from "solid-js";
+import { Show, splitProps } from "solid-js";
 import { Avatar as Avatar$1 } from "@ark-ui/solid/avatar";
-//#region src/components/avatar/index.tsx
+// src/components/avatar/index.tsx
 function AvatarRoot(props) {
 	const [own, rest] = splitProps(props, ["size", "shape"]);
 	const id = useElementId("avatar", () => rest.id);
@@ -12,18 +12,74 @@ function AvatarRoot(props) {
 		get id() {
 			return id();
 		},
-		get "data-size"() {
-			return own.size;
+		get ["data-size"]() {
+			return own.size ?? "md";
 		},
-		get "data-shape"() {
+		get ["data-shape"]() {
 			return own.shape ?? "circle";
 		}
 	}));
 }
-const Avatar = defineFamily(AvatarRoot, {
+function initials(name) {
+	return name?.trim().split(/\s+/).slice(0, 2).map((word) => word.charAt(0).toUpperCase()).join("") ?? "";
+}
+/** The shorthand: a complete avatar from a name and image, with the
+* anatomy still there when a consumer needs to compose its own. */
+function AvatarFacade(props) {
+	const [own, rest] = splitProps(props, [
+		"name",
+		"shape",
+		"size",
+		"src"
+	]);
+	return createComponent(AvatarRoot, mergeProps(rest, {
+		get shape() {
+			return own.shape ?? "circle";
+		},
+		get size() {
+			return own.size ?? "md";
+		},
+		get children() {
+			return createComponent(Show, {
+				get when() {
+					return props.children;
+				},
+				get fallback() {
+					return [createComponent(Show, {
+						get when() {
+							return own.src;
+						},
+						get children() {
+							return createComponent(Avatar$1.Image, {
+								get alt() {
+									return own.name;
+								},
+								get src() {
+									return own.src;
+								}
+							});
+						}
+					}), createComponent(Show, {
+						get when() {
+							return own.name;
+						},
+						get children() {
+							return createComponent(Avatar$1.Fallback, { get children() {
+								return initials(own.name);
+							} });
+						}
+					})];
+				},
+				get children() {
+					return props.children;
+				}
+			});
+		}
+	}));
+}
+const Avatar = defineFamily(AvatarFacade, {
 	...Avatar$1,
 	Root: AvatarRoot
 });
 injectComponentStyle("avatar");
-//#endregion
 export { Avatar };

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

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/avatar-group/index.d.ts
 /** Avatars overlapping one row, each rimmed in the ground so the pile
  * stays legible. */
 export interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
@@ -9,5 +8,4 @@ export interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
 }
 export declare const AvatarGroup: ((props: AvatarGroupProps) => JSX.Element) & {
   Root: (props: AvatarGroupProps) => JSX.Element;
-};
-//#endregion
+};

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

@@ -1,21 +1,22 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { spread, template } from "@solidjs/web";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
+import { mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
-//#region src/components/avatar-group/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+// src/components/avatar-group/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
 const AvatarGroup = withSelfRoot(function AvatarGroup(props) {
 	injectComponentStyle("avatar-group");
 	const [own, rest] = splitProps(props, ["size"]);
-	var _el$ = _tmpl$();
-	spread(_el$, [rest, {
-		"data-scope": "avatar-group",
-		"data-part": "root",
-		get "data-size"() {
-			return own.size;
-		}
-	}], false);
-	return _el$;
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "avatar-group",
+			"data-part": "root",
+			get ["data-size"]() {
+				return own.size;
+			}
+		}), false, false);
+		return _el$;
+	})();
 });
-//#endregion
 export { AvatarGroup };

package/dist/components/back-top/index.d.mts

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/back-top/index.d.ts
 export interface BackTopProps extends JSX.HTMLAttributes<HTMLButtonElement> {
   /** How far the reader must have travelled (px) before the affordance
    * appears. */
@@ -27,5 +26,4 @@ export interface BackTopProps extends JSX.HTMLAttributes<HTMLButtonElement> {
  */
 export declare const BackTop: ((props: BackTopProps) => JSX.Element) & {
   Root: (props: BackTopProps) => JSX.Element;
-};
-//#endregion
+};

package/dist/components/back-top/index.mjs

@@ -1,11 +1,11 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
+import { r as iconNode } from "../../icon-DQqYA2fO.mjs";
 import { Button } from "../button/index.mjs";
-import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { createSignal, onCleanup, onMount, splitProps } from "solid-js";
-//#region src/components/back-top/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+// src/components/back-top/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-scope=back-top data-part=root>`);
 /**
 * A way home: after the page has scrolled past `threshold`, a small
 * floating control rises at the page's corner and returns the reader to
@@ -56,35 +56,31 @@ const BackTop = withSelfRoot(function BackTop(props) {
 		if (el) el.removeEventListener("scroll", onScroll);
 		else window.removeEventListener("scroll", onScroll);
 	});
-	var _el$ = _tmpl$();
-	spread(_el$, [{
-		"data-scope": "back-top",
-		"data-part": "root",
-		get "data-state"() {
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["data-state"]() {
 			return visible() ? "shown" : "hidden";
-		}
-	}, () => {
-		return scroller() ? { "data-container": "" } : {};
-	}], true);
-	insert(_el$, createComponent(Button, mergeProps(rest, {
-		variant: "outline",
-		square: true,
-		size: "lg",
-		get "aria-label"() {
-			return own.label ?? "Back to top";
-		},
-		get "aria-hidden"() {
-			return visible() ? void 0 : "true";
-		},
-		get tabindex() {
-			return visible() ? 0 : -1;
-		},
-		onClick: toTop,
-		get children() {
-			return rest.children ?? chevronUp();
-		}
-	})));
-	return _el$;
+		} }, () => scroller() ? { "data-container": "" } : {}), false, true);
+		insert(_el$, createComponent(Button, mergeProps(rest, {
+			variant: "outline",
+			square: true,
+			size: "lg",
+			get ["aria-label"]() {
+				return own.label ?? "Back to top";
+			},
+			get ["aria-hidden"]() {
+				return visible() ? void 0 : "true";
+			},
+			get tabindex() {
+				return visible() ? 0 : -1;
+			},
+			onClick: toTop,
+			get children() {
+				return rest.children ?? chevronUp();
+			}
+		})));
+		return _el$;
+	})();
 });
 /** The single icon a way-home control needs: one stroke pointing up. */
 function chevronUp() {
@@ -93,5 +89,4 @@ function chevronUp() {
 		height: "16"
 	});
 }
-//#endregion
 export { BackTop };

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

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/badge/index.d.ts
 /** A small seal of state. Ink is the neutral tone; the four semantic
  * pigments are fixed. Subtle and outline re-register the same pigment. */
 export interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {
@@ -8,5 +7,4 @@ export interface BadgeProps extends JSX.HTMLAttributes<HTMLSpanElement> {
 }
 export declare const Badge: ((props: BadgeProps) => JSX.Element) & {
   Root: (props: BadgeProps) => JSX.Element;
-};
-//#endregion
+};

package/dist/components/badge/index.mjs

@@ -1,24 +1,25 @@
-import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
-import { spread, template } from "@solidjs/web";
+import { n as withSelfRoot } from "../../family-B5HtE0on.mjs";
+import { mergeProps, spread, template } from "solid-js/web";
 import { injectComponentStyle } from "@bysages/core/styling";
 import { splitProps } from "solid-js";
-//#region src/components/badge/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<span>`);
+// src/components/badge/index.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span>`);
 const Badge = withSelfRoot(function Badge(props) {
 	injectComponentStyle("badge");
 	const [own, rest] = splitProps(props, ["tone", "variant"]);
-	var _el$ = _tmpl$();
-	spread(_el$, [rest, {
-		"data-scope": "badge",
-		"data-part": "root",
-		get "data-tone"() {
-			return own.tone ?? "ink";
-		},
-		get "data-variant"() {
-			return own.variant ?? "solid";
-		}
-	}], false);
-	return _el$;
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			"data-scope": "badge",
+			"data-part": "root",
+			get ["data-tone"]() {
+				return own.tone ?? "ink";
+			},
+			get ["data-variant"]() {
+				return own.variant ?? "solid";
+			}
+		}), false, false);
+		return _el$;
+	})();
 });
-//#endregion
 export { Badge };

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

@@ -1,5 +1,4 @@
 import { JSX } from "solid-js";
-//#region src/components/banner/index.d.ts
 export type BannerStatus = "ink" | "info" | "success" | "warning" | "danger";
 export interface BannerRootProps extends JSX.HTMLAttributes<HTMLDivElement> {
   status?: BannerStatus;
@@ -12,7 +11,23 @@ declare function Root(props: BannerRootProps): JSX.Element;
 /** The quiet close: a plain square-cut button; dismissal stays the
  * consumer's state. */
 declare function Close(props: JSX.ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element;
-export declare const Banner: typeof Root & {
+export interface BannerFacadeProps extends Omit<BannerRootProps, "status" | "title"> {
+  /** The status pigment; ink is the neutral register. */
+  status?: BannerStatus;
+  /** What the notice says at a glance. */
+  title?: string;
+  /** The supporting line, in the quiet register. */
+  message?: string;
+  /** Give the reader a way to fold the notice. */
+  dismissible?: boolean;
+  /** Where the reader answers — a row of buttons. */
+  actions?: JSX.Element;
+  children?: JSX.Element;
+}
+/** The shorthand: a complete notice from text, with actions and the
+ * close folded away until asked for. Once closed, it stays closed. */
+declare function BannerFacade(props: BannerFacadeProps): JSX.Element;
+export declare const Banner: typeof BannerFacade & {
   Root: typeof Root;
   Icon: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
   Body: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
@@ -21,4 +36,4 @@ export declare const Banner: typeof Root & {
   Actions: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
   Close: typeof Close;
 };
-//#endregion
+export {};