@bysages/solid 0.4.4 → 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, 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
@@ -32,4 +31,4 @@ 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 { 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,10 +12,10 @@ function AvatarRoot(props) {
 		get id() {
 			return id();
 		},
-		get "data-size"() {
+		get ["data-size"]() {
 			return own.size ?? "md";
 		},
-		get "data-shape"() {
+		get ["data-shape"]() {
 			return own.shape ?? "circle";
 		}
 	}));
@@ -82,5 +82,4 @@ const Avatar = defineFamily(AvatarFacade, {
 	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;
@@ -37,4 +36,4 @@ export declare const Banner: typeof BannerFacade & {
   Actions: (props: JSX.HTMLAttributes<HTMLDivElement>) => JSX.Element;
   Close: typeof Close;
 };
-//#endregion
+export {};

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 { Show, createSignal, splitProps } from "solid-js";
-//#region src/components/banner/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
-var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+// 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,21 +45,21 @@ 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;
-		},
-		"data-scope": "banner",
-		"data-part": "close"
-	}], true);
-	insert(_el$2, () => {
-		return iconNode("x");
-	});
-	return _el$2;
+	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. */
@@ -145,5 +147,4 @@ const Banner = Object.assign(BannerFacade, {
 	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
+};