@bysages/svelte 0.4.3 → 0.4.4

package/dist/generative/index.mjs

@@ -3,12 +3,15 @@ import { t as Button } from "../button-Cl45zjdj.mjs";
 import { t as Alert } from "../alert-pTPh9zID.mjs";
 import { Avatar } from "../components/avatar/index.mjs";
 import { t as Badge } from "../badge-N_KoQG_c.mjs";
+import { Breadcrumb } from "../components/breadcrumb/index.mjs";
+import { Banner } from "../components/banner/index.mjs";
 import { t as Card } from "../card-DPVT_VaK.mjs";
 import { Checkbox } from "../components/checkbox/index.mjs";
 import { Input } from "../components/input/index.mjs";
+import { FloatButton } from "../components/float-button/index.mjs";
 import { Progress } from "../components/progress/index.mjs";
 import { RadioGroup } from "../components/radio-group/index.mjs";
-import { n as Select } from "../select-CVMOvviD.mjs";
+import { n as Select } from "../select-DuSzjsoK.mjs";
 import { t as Separator } from "../separator-I0MEoHjO.mjs";
 import { Slider } from "../components/slider/index.mjs";
 import { t as Stack } from "../stack-uMjCwn_2.mjs";
@@ -19,7 +22,6 @@ import { t as Textarea } from "../textarea-ClX5LWLE.mjs";
 import { t as Typography } from "../typography-DUWj7wex.mjs";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-import { createListCollection } from "@ark-ui/svelte/collection";
 import { z } from "zod";
 import { defineRegistry, getBoundProp } from "@json-render/svelte";
 import { defineCatalog } from "@json-render/core";
@@ -52,9 +54,6 @@ const headingClass = {
 	"5": "text-lg",
 	"6": "text-base"
 };
-function initials(name) {
-	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("");
-}
 function slug(value) {
 	return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || value;
 }
@@ -88,6 +87,25 @@ const faces$1 = defineFace({
 		}),
 		description: "A person's seal: image when given, initials as the fallback."
 	},
+	Banner: {
+		props: z.object({
+			status: z.enum([
+				"ink",
+				"info",
+				"success",
+				"warning",
+				"danger"
+			]).optional(),
+			title: z.string().optional(),
+			message: z.string().optional(),
+			dismissible: z.boolean().optional()
+		}),
+		description: "A full-width notice that speaks once across the page."
+	},
+	Breadcrumb: {
+		props: z.object({ items: z.array(z.string()).optional() }),
+		description: "A trail of waymarks from home to the current page."
+	},
 	Badge: {
 		props: z.object({
 			text: z.string(),
@@ -152,6 +170,29 @@ const faces$1 = defineFace({
 		}),
 		description: "One independent box with its label."
 	},
+	FloatButton: {
+		props: z.object({
+			label: z.string().optional(),
+			actions: z.array(z.object({
+				label: z.string(),
+				icon: z.string().optional(),
+				disabled: z.boolean().optional()
+			})).optional(),
+			placement: z.enum([
+				"bottom-end",
+				"bottom-start",
+				"top-end",
+				"top-start"
+			]).optional(),
+			size: z.enum([
+				"sm",
+				"md",
+				"lg"
+			]).optional(),
+			defaultOpen: z.boolean().optional()
+		}),
+		description: "A floating action and its fanned alternatives; actions use curated icon names."
+	},
 	Heading: {
 		props: z.object({
 			text: z.string(),
@@ -319,7 +360,7 @@ function defineEntry(entries) {
 }
 //#endregion
 //#region src/components/alert/generative/Alert.svelte
-var root$11 = $.from_html(`<!> <!>`, 1);
+var root$9 = $.from_html(`<!> <!>`, 1);
 function Alert_1($$anchor, $$props) {
 	$.push($$props, true);
 	var fragment = $.comment();
@@ -332,7 +373,7 @@ function Alert_1($$anchor, $$props) {
 					return $.get($0);
 				},
 				children: ($$anchor, $$slotProps) => {
-					var fragment_1 = root$11();
+					var fragment_1 = root$9();
 					var node_1 = $.first_child(fragment_1);
 					$.component(node_1, () => Alert.Icon, ($$anchor, Alert_Icon) => {
 						Alert_Icon($$anchor, {});
@@ -341,7 +382,7 @@ function Alert_1($$anchor, $$props) {
 					$.component(node_2, () => Alert.Body, ($$anchor, Alert_Body) => {
 						Alert_Body($$anchor, {
 							children: ($$anchor, $$slotProps) => {
-								var fragment_2 = root$11();
+								var fragment_2 = root$9();
 								var node_3 = $.first_child(fragment_2);
 								$.component(node_3, () => Alert.Title, ($$anchor, Alert_Title) => {
 									Alert_Title($$anchor, {
@@ -390,70 +431,34 @@ function Alert_1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/alert/generative/index.ts
-var generative_exports$17 = /* @__PURE__ */ __exportAll({ default: () => generative_default$17 });
+var generative_exports$20 = /* @__PURE__ */ __exportAll({ default: () => generative_default$20 });
 /** A bordered notice; status picks the pigment. */
-var generative_default$17 = defineEntry({ Alert: {
+var generative_default$20 = defineEntry({ Alert: {
 	...faces$1.Alert,
 	component: Alert_1
 } });
 //#endregion
 //#region src/components/avatar/generative/Avatar.svelte
-var root$10 = $.from_html(`<!> <!>`, 1);
 function Avatar_1($$anchor, $$props) {
 	$.push($$props, true);
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	$.component(node, () => Avatar.Root, ($$anchor, Avatar_Root) => {
-		Avatar_Root($$anchor, {
-			get size() {
-				return $$props.props.size;
-			},
-			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = root$10();
-				var node_1 = $.first_child(fragment_1);
-				var consequent = ($$anchor) => {
-					var fragment_2 = $.comment();
-					var node_2 = $.first_child(fragment_2);
-					$.component(node_2, () => Avatar.Image, ($$anchor, Avatar_Image) => {
-						Avatar_Image($$anchor, {
-							get src() {
-								return $$props.props.src;
-							},
-							get alt() {
-								return $$props.props.name;
-							}
-						});
-					});
-					$.append($$anchor, fragment_2);
-				};
-				$.if(node_1, ($$render) => {
-					if ($$props.props.src != null) $$render(consequent);
-				});
-				var node_3 = $.sibling(node_1, 2);
-				$.component(node_3, () => Avatar.Fallback, ($$anchor, Avatar_Fallback) => {
-					Avatar_Fallback($$anchor, {
-						children: ($$anchor, $$slotProps) => {
-							$.next();
-							var text = $.text();
-							$.template_effect(($0) => $.set_text(text, $0), [() => initials($$props.props.name)]);
-							$.append($$anchor, text);
-						},
-						$$slots: { default: true }
-					});
-				});
-				$.append($$anchor, fragment_1);
-			},
-			$$slots: { default: true }
-		});
+	Avatar($$anchor, {
+		get name() {
+			return $$props.props.name;
+		},
+		get size() {
+			return $$props.props.size;
+		},
+		get src() {
+			return $$props.props.src;
+		}
 	});
-	$.append($$anchor, fragment);
 	$.pop();
 }
 //#endregion
 //#region src/components/avatar/generative/index.ts
-var generative_exports$16 = /* @__PURE__ */ __exportAll({ default: () => generative_default$16 });
+var generative_exports$19 = /* @__PURE__ */ __exportAll({ default: () => generative_default$19 });
 /** A person's seal: image when given, initials as the fallback. */
-var generative_default$16 = defineEntry({ Avatar: {
+var generative_default$19 = defineEntry({ Avatar: {
 	...faces$1.Avatar,
 	component: Avatar_1
 } });
@@ -480,13 +485,52 @@ function Badge_1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/badge/generative/index.ts
-var generative_exports$15 = /* @__PURE__ */ __exportAll({ default: () => generative_default$15 });
+var generative_exports$18 = /* @__PURE__ */ __exportAll({ default: () => generative_default$18 });
 /** A small status seal beside content; reads at a glance. */
-var generative_default$15 = defineEntry({ Badge: {
+var generative_default$18 = defineEntry({ Badge: {
 	...faces$1.Badge,
 	component: Badge_1
 } });
 //#endregion
+//#region src/components/banner/generative/Banner.svelte
+function Banner_1($$anchor, $$props) {
+	Banner($$anchor, $.spread_props(() => $$props.props, { dismissible: true }));
+}
+//#endregion
+//#region src/components/banner/generative/index.ts
+var generative_exports$17 = /* @__PURE__ */ __exportAll({ default: () => generative_default$17 });
+/** A full-width notice that speaks once across the page. */
+var generative_default$17 = defineEntry({ Banner: {
+	...faces$1.Banner,
+	component: Banner_1
+} });
+//#endregion
+//#region src/components/breadcrumb/generative/Breadcrumb.svelte
+function Breadcrumb_1($$anchor, $$props) {
+	$.push($$props, true);
+	const labels = $.derived(() => $$props.props.items ?? [
+		"Home",
+		"Guides",
+		"Ink"
+	]);
+	const items = $.derived(() => $.get(labels).map((label, index) => index === $.get(labels).length - 1 ? { label } : {
+		label,
+		href: `#${slug(label)}`
+	}));
+	Breadcrumb($$anchor, { get items() {
+		return $.get(items);
+	} });
+	$.pop();
+}
+//#endregion
+//#region src/components/breadcrumb/generative/index.ts
+var generative_exports$16 = /* @__PURE__ */ __exportAll({ default: () => generative_default$16 });
+/** A trail of waymarks from home to the current page. */
+var generative_default$16 = defineEntry({ Breadcrumb: {
+	...faces$1.Breadcrumb,
+	component: Breadcrumb_1
+} });
+//#endregion
 //#region src/components/button/generative/Button.svelte
 function Button_1($$anchor, $$props) {
 	$.push($$props, true);
@@ -519,15 +563,15 @@ function Button_1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/button/generative/index.ts
-var generative_exports$14 = /* @__PURE__ */ __exportAll({ default: () => generative_default$14 });
+var generative_exports$15 = /* @__PURE__ */ __exportAll({ default: () => generative_default$15 });
 /** The primary action register: solid ink for the one main action, outline, ghost, or subtle for the rest. */
-var generative_default$14 = defineEntry({ Button: {
+var generative_default$15 = defineEntry({ Button: {
 	...faces$1.Button,
 	component: Button_1
 } });
 //#endregion
 //#region src/components/card/generative/Card.svelte
-var root$9 = $.from_html(`<!> <!>`, 1);
+var root$8 = $.from_html(`<!> <!>`, 1);
 function Card_1($$anchor, $$props) {
 	$.push($$props, true);
 	var fragment = $.comment();
@@ -535,7 +579,7 @@ function Card_1($$anchor, $$props) {
 	$.component(node, () => Card.Root, ($$anchor, Card_Root) => {
 		Card_Root($$anchor, {
 			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = root$9();
+				var fragment_1 = root$8();
 				var node_1 = $.first_child(fragment_1);
 				var consequent_2 = ($$anchor) => {
 					var fragment_2 = $.comment();
@@ -543,7 +587,7 @@ function Card_1($$anchor, $$props) {
 					$.component(node_2, () => Card.Header, ($$anchor, Card_Header) => {
 						Card_Header($$anchor, {
 							children: ($$anchor, $$slotProps) => {
-								var fragment_3 = root$9();
+								var fragment_3 = root$8();
 								var node_3 = $.first_child(fragment_3);
 								var consequent = ($$anchor) => {
 									var fragment_4 = $.comment();
@@ -616,15 +660,15 @@ function Card_1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/card/generative/index.ts
-var generative_exports$13 = /* @__PURE__ */ __exportAll({ default: () => generative_default$13 });
+var generative_exports$14 = /* @__PURE__ */ __exportAll({ default: () => generative_default$14 });
 /** Grouping vessel. Give title and description instead of hand-building a header; children render in the body. */
-var generative_default$13 = defineEntry({ Card: {
+var generative_default$14 = defineEntry({ Card: {
 	...faces$1.Card,
 	component: Card_1
 } });
 //#endregion
 //#region src/components/checkbox/generative/Checkbox.svelte
-var root$8 = $.from_html(`<!> <!> <!>`, 1);
+var root$7 = $.from_html(`<!> <!> <!>`, 1);
 function Checkbox_1($$anchor, $$props) {
 	$.push($$props, true);
 	var fragment = $.comment();
@@ -640,7 +684,7 @@ function Checkbox_1($$anchor, $$props) {
 					return $$props.props.disabled;
 				},
 				children: ($$anchor, $$slotProps) => {
-					var fragment_1 = root$8();
+					var fragment_1 = root$7();
 					var node_1 = $.first_child(fragment_1);
 					$.component(node_1, () => Checkbox.Control, ($$anchor, Checkbox_Control) => {
 						Checkbox_Control($$anchor, {
@@ -687,15 +731,39 @@ function Checkbox_1($$anchor, $$props) {
 }
 //#endregion
 //#region src/components/checkbox/generative/index.ts
-var generative_exports$12 = /* @__PURE__ */ __exportAll({ default: () => generative_default$12 });
+var generative_exports$13 = /* @__PURE__ */ __exportAll({ default: () => generative_default$13 });
 /** One independent box with its label. */
-var generative_default$12 = defineEntry({ Checkbox: {
+var generative_default$13 = defineEntry({ Checkbox: {
 	...faces$1.Checkbox,
 	component: Checkbox_1
 } });
 //#endregion
+//#region src/components/float-button/generative/FloatButton.svelte
+function FloatButton_1($$anchor, $$props) {
+	$.push($$props, true);
+	const actions = $.derived(() => ($$props.props.actions ?? [{ label: "Edit" }]).map((action) => ({
+		...action,
+		icon: action.icon ?? "pencil"
+	})));
+	FloatButton($$anchor, $.spread_props(() => $$props.props, {
+		get actions() {
+			return $.get(actions);
+		},
+		defaultOpen: true
+	}));
+	$.pop();
+}
+//#endregion
+//#region src/components/float-button/generative/index.ts
+var generative_exports$12 = /* @__PURE__ */ __exportAll({ default: () => generative_default$12 });
+/** A floating action cluster; named actions fan out from one corner. */
+var generative_default$12 = defineEntry({ FloatButton: {
+	...faces$1.FloatButton,
+	component: FloatButton_1
+} });
+//#endregion
 //#region src/components/input/generative/Input.svelte
-var root$7 = $.from_html(`<!> <!>`, 1);
+var root$6 = $.from_html(`<!> <!>`, 1);
 function Input_1($$anchor, $$props) {
 	$.push($$props, true);
 	const bound = getBoundProp(() => $$props.props.value, () => $$props.bindings?.value);
@@ -705,7 +773,7 @@ function Input_1($$anchor, $$props) {
 		Stack($$anchor, {
 			gap: "xs",
 			children: ($$anchor, $$slotProps) => {
-				var fragment_2 = root$7();
+				var fragment_2 = root$6();
 				var node_1 = $.first_child(fragment_2);
 				$.component(node_1, () => Typography.Label, ($$anchor, Typography_Label) => {
 					Typography_Label($$anchor, {
@@ -777,7 +845,7 @@ var generative_default$11 = defineEntry({ Input: {
 } });
 //#endregion
 //#region src/components/progress/generative/Progress.svelte
-var root$6 = $.from_html(`<!> <!>`, 1);
+var root$5 = $.from_html(`<!> <!>`, 1);
 function Progress_1($$anchor, $$props) {
 	$.push($$props, true);
 	var fragment = $.comment();
@@ -791,7 +859,7 @@ function Progress_1($$anchor, $$props) {
 				return $$props.props.max;
 			},
 			children: ($$anchor, $$slotProps) => {
-				var fragment_1 = root$6();
+				var fragment_1 = root$5();
 				var node_1 = $.first_child(fragment_1);
 				var consequent = ($$anchor) => {
 					var fragment_2 = $.comment();
@@ -844,8 +912,8 @@ var generative_default$10 = defineEntry({ Progress: {
 } });
 //#endregion
 //#region src/components/radio-group/generative/RadioGroup.svelte
-var root$5 = $.from_html(`<!> <!> <!>`, 1);
-var root_1$1 = $.from_html(`<!> <!>`, 1);
+var root$4 = $.from_html(`<!> <!> <!>`, 1);
+var root_1 = $.from_html(`<!> <!>`, 1);
 function RadioGroup_1($$anchor, $$props) {
 	$.push($$props, true);
 	const values = $.derived(() => $$props.props.items ?? [
@@ -859,7 +927,7 @@ function RadioGroup_1($$anchor, $$props) {
 		Stack($$anchor, {
 			gap: "xs",
 			children: ($$anchor, $$slotProps) => {
-				var fragment_2 = root_1$1();
+				var fragment_2 = root_1();
 				var node_1 = $.first_child(fragment_2);
 				$.component(node_1, () => Typography.Label, ($$anchor, Typography_Label) => {
 					Typography_Label($$anchor, {
@@ -896,7 +964,7 @@ function RadioGroup_1($$anchor, $$props) {
 														return value;
 													},
 													children: ($$anchor, $$slotProps) => {
-														var fragment_7 = root$5();
+														var fragment_7 = root$4();
 														var node_5 = $.first_child(fragment_7);
 														$.component(node_5, () => RadioGroup.ItemControl, ($$anchor, RadioGroup_ItemControl) => {
 															RadioGroup_ItemControl($$anchor, {});
@@ -964,7 +1032,7 @@ function RadioGroup_1($$anchor, $$props) {
 												return value;
 											},
 											children: ($$anchor, $$slotProps) => {
-												var fragment_13 = root$5();
+												var fragment_13 = root$4();
 												var node_11 = $.first_child(fragment_13);
 												$.component(node_11, () => RadioGroup.ItemControl, ($$anchor, RadioGroup_ItemControl_1) => {
 													RadioGroup_ItemControl_1($$anchor, {});
@@ -1020,311 +1088,33 @@ var generative_default$9 = defineEntry({ RadioGroup: {
 } });
 //#endregion
 //#region src/components/select/generative/Select.svelte
-var root$4 = $.from_html(`<!> <!>`, 1);
-var root_1 = $.from_html(`<!> <!> <!>`, 1);
 function Select_1($$anchor, $$props) {
 	$.push($$props, true);
 	const bound = getBoundProp(() => $$props.props.value, () => $$props.bindings?.value);
-	const collection = $.derived(() => createListCollection({ items: $$props.props.options }));
-	const selectedValue = $.derived(() => $$props.props.multiple ? Array.isArray(bound.current) ? bound.current : bound.current ? [bound.current] : void 0 : typeof bound.current === "string" ? [bound.current] : void 0);
-	function setValue(details) {
-		bound.current = $$props.props.multiple ? details.value : details.value[0] ?? "";
+	function setValue(value) {
+		bound.current = $$props.props.multiple ? Array.isArray(value) ? value : [value] : Array.isArray(value) ? value.at(0) ?? "" : value;
 	}
-	var fragment = $.comment();
-	var node = $.first_child(fragment);
-	var consequent = ($$anchor) => {
-		Stack($$anchor, {
-			gap: "xs",
-			children: ($$anchor, $$slotProps) => {
-				var fragment_2 = root$4();
-				var node_1 = $.first_child(fragment_2);
-				$.component(node_1, () => Typography.Label, ($$anchor, Typography_Label) => {
-					Typography_Label($$anchor, {
-						children: ($$anchor, $$slotProps) => {
-							$.next();
-							var text = $.text();
-							$.template_effect(() => $.set_text(text, $$props.props.label));
-							$.append($$anchor, text);
-						},
-						$$slots: { default: true }
-					});
-				});
-				var node_2 = $.sibling(node_1, 2);
-				$.component(node_2, () => Select.Root, ($$anchor, Select_Root) => {
-					Select_Root($$anchor, {
-						get collection() {
-							return $.get(collection);
-						},
-						get value() {
-							return $.get(selectedValue);
-						},
-						get disabled() {
-							return $$props.props.disabled;
-						},
-						get multiple() {
-							return $$props.props.multiple;
-						},
-						onValueChange: setValue,
-						children: ($$anchor, $$slotProps) => {
-							var fragment_4 = root_1();
-							var node_3 = $.first_child(fragment_4);
-							$.component(node_3, () => Select.Control, ($$anchor, Select_Control) => {
-								Select_Control($$anchor, {
-									children: ($$anchor, $$slotProps) => {
-										var fragment_5 = root$4();
-										var node_4 = $.first_child(fragment_5);
-										$.component(node_4, () => Select.Trigger, ($$anchor, Select_Trigger) => {
-											Select_Trigger($$anchor, {
-												children: ($$anchor, $$slotProps) => {
-													var fragment_6 = $.comment();
-													var node_5 = $.first_child(fragment_6);
-													$.component(node_5, () => Select.ValueText, ($$anchor, Select_ValueText) => {
-														Select_ValueText($$anchor, { get placeholder() {
-															return $$props.props.placeholder;
-														} });
-													});
-													$.append($$anchor, fragment_6);
-												},
-												$$slots: { default: true }
-											});
-										});
-										var node_6 = $.sibling(node_4, 2);
-										$.component(node_6, () => Select.Indicator, ($$anchor, Select_Indicator) => {
-											Select_Indicator($$anchor, {
-												children: ($$anchor, $$slotProps) => {
-													InternalIcon($$anchor, { name: "chevrons-up-down" });
-												},
-												$$slots: { default: true }
-											});
-										});
-										$.append($$anchor, fragment_5);
-									},
-									$$slots: { default: true }
-								});
-							});
-							var node_7 = $.sibling(node_3, 2);
-							$.component(node_7, () => Select.Positioner, ($$anchor, Select_Positioner) => {
-								Select_Positioner($$anchor, {
-									children: ($$anchor, $$slotProps) => {
-										var fragment_8 = $.comment();
-										var node_8 = $.first_child(fragment_8);
-										$.component(node_8, () => Select.Content, ($$anchor, Select_Content) => {
-											Select_Content($$anchor, {
-												children: ($$anchor, $$slotProps) => {
-													var fragment_9 = $.comment();
-													var node_9 = $.first_child(fragment_9);
-													$.component(node_9, () => Select.ItemGroup, ($$anchor, Select_ItemGroup) => {
-														Select_ItemGroup($$anchor, {
-															children: ($$anchor, $$slotProps) => {
-																var fragment_10 = $.comment();
-																var node_10 = $.first_child(fragment_10);
-																$.each(node_10, 17, () => $$props.props.options, (option) => option.value, ($$anchor, option) => {
-																	var fragment_11 = $.comment();
-																	var node_11 = $.first_child(fragment_11);
-																	$.component(node_11, () => Select.Item, ($$anchor, Select_Item) => {
-																		Select_Item($$anchor, {
-																			get item() {
-																				return $.get(option);
-																			},
-																			children: ($$anchor, $$slotProps) => {
-																				var fragment_12 = root$4();
-																				var node_12 = $.first_child(fragment_12);
-																				$.component(node_12, () => Select.ItemText, ($$anchor, Select_ItemText) => {
-																					Select_ItemText($$anchor, {
-																						children: ($$anchor, $$slotProps) => {
-																							$.next();
-																							var text_1 = $.text();
-																							$.template_effect(() => $.set_text(text_1, $.get(option).label));
-																							$.append($$anchor, text_1);
-																						},
-																						$$slots: { default: true }
-																					});
-																				});
-																				var node_13 = $.sibling(node_12, 2);
-																				$.component(node_13, () => Select.ItemIndicator, ($$anchor, Select_ItemIndicator) => {
-																					Select_ItemIndicator($$anchor, {
-																						children: ($$anchor, $$slotProps) => {
-																							InternalIcon($$anchor, { name: "check" });
-																						},
-																						$$slots: { default: true }
-																					});
-																				});
-																				$.append($$anchor, fragment_12);
-																			},
-																			$$slots: { default: true }
-																		});
-																	});
-																	$.append($$anchor, fragment_11);
-																});
-																$.append($$anchor, fragment_10);
-															},
-															$$slots: { default: true }
-														});
-													});
-													$.append($$anchor, fragment_9);
-												},
-												$$slots: { default: true }
-											});
-										});
-										$.append($$anchor, fragment_8);
-									},
-									$$slots: { default: true }
-								});
-							});
-							var node_14 = $.sibling(node_7, 2);
-							$.component(node_14, () => Select.HiddenSelect, ($$anchor, Select_HiddenSelect) => {
-								Select_HiddenSelect($$anchor, {});
-							});
-							$.append($$anchor, fragment_4);
-						},
-						$$slots: { default: true }
-					});
-				});
-				$.append($$anchor, fragment_2);
-			},
-			$$slots: { default: true }
-		});
-	};
-	var alternate = ($$anchor) => {
-		var fragment_15 = $.comment();
-		var node_15 = $.first_child(fragment_15);
-		$.component(node_15, () => Select.Root, ($$anchor, Select_Root_1) => {
-			Select_Root_1($$anchor, {
-				get collection() {
-					return $.get(collection);
-				},
-				get value() {
-					return $.get(selectedValue);
-				},
-				get disabled() {
-					return $$props.props.disabled;
-				},
-				get multiple() {
-					return $$props.props.multiple;
-				},
-				onValueChange: setValue,
-				children: ($$anchor, $$slotProps) => {
-					var fragment_16 = root_1();
-					var node_16 = $.first_child(fragment_16);
-					$.component(node_16, () => Select.Control, ($$anchor, Select_Control_1) => {
-						Select_Control_1($$anchor, {
-							children: ($$anchor, $$slotProps) => {
-								var fragment_17 = root$4();
-								var node_17 = $.first_child(fragment_17);
-								$.component(node_17, () => Select.Trigger, ($$anchor, Select_Trigger_1) => {
-									Select_Trigger_1($$anchor, {
-										children: ($$anchor, $$slotProps) => {
-											var fragment_18 = $.comment();
-											var node_18 = $.first_child(fragment_18);
-											$.component(node_18, () => Select.ValueText, ($$anchor, Select_ValueText_1) => {
-												Select_ValueText_1($$anchor, { get placeholder() {
-													return $$props.props.placeholder;
-												} });
-											});
-											$.append($$anchor, fragment_18);
-										},
-										$$slots: { default: true }
-									});
-								});
-								var node_19 = $.sibling(node_17, 2);
-								$.component(node_19, () => Select.Indicator, ($$anchor, Select_Indicator_1) => {
-									Select_Indicator_1($$anchor, {
-										children: ($$anchor, $$slotProps) => {
-											InternalIcon($$anchor, { name: "chevrons-up-down" });
-										},
-										$$slots: { default: true }
-									});
-								});
-								$.append($$anchor, fragment_17);
-							},
-							$$slots: { default: true }
-						});
-					});
-					var node_20 = $.sibling(node_16, 2);
-					$.component(node_20, () => Select.Positioner, ($$anchor, Select_Positioner_1) => {
-						Select_Positioner_1($$anchor, {
-							children: ($$anchor, $$slotProps) => {
-								var fragment_20 = $.comment();
-								var node_21 = $.first_child(fragment_20);
-								$.component(node_21, () => Select.Content, ($$anchor, Select_Content_1) => {
-									Select_Content_1($$anchor, {
-										children: ($$anchor, $$slotProps) => {
-											var fragment_21 = $.comment();
-											var node_22 = $.first_child(fragment_21);
-											$.component(node_22, () => Select.ItemGroup, ($$anchor, Select_ItemGroup_1) => {
-												Select_ItemGroup_1($$anchor, {
-													children: ($$anchor, $$slotProps) => {
-														var fragment_22 = $.comment();
-														var node_23 = $.first_child(fragment_22);
-														$.each(node_23, 17, () => $$props.props.options, (option) => option.value, ($$anchor, option) => {
-															var fragment_23 = $.comment();
-															var node_24 = $.first_child(fragment_23);
-															$.component(node_24, () => Select.Item, ($$anchor, Select_Item_1) => {
-																Select_Item_1($$anchor, {
-																	get item() {
-																		return $.get(option);
-																	},
-																	children: ($$anchor, $$slotProps) => {
-																		var fragment_24 = root$4();
-																		var node_25 = $.first_child(fragment_24);
-																		$.component(node_25, () => Select.ItemText, ($$anchor, Select_ItemText_1) => {
-																			Select_ItemText_1($$anchor, {
-																				children: ($$anchor, $$slotProps) => {
-																					$.next();
-																					var text_2 = $.text();
-																					$.template_effect(() => $.set_text(text_2, $.get(option).label));
-																					$.append($$anchor, text_2);
-																				},
-																				$$slots: { default: true }
-																			});
-																		});
-																		var node_26 = $.sibling(node_25, 2);
-																		$.component(node_26, () => Select.ItemIndicator, ($$anchor, Select_ItemIndicator_1) => {
-																			Select_ItemIndicator_1($$anchor, {
-																				children: ($$anchor, $$slotProps) => {
-																					InternalIcon($$anchor, { name: "check" });
-																				},
-																				$$slots: { default: true }
-																			});
-																		});
-																		$.append($$anchor, fragment_24);
-																	},
-																	$$slots: { default: true }
-																});
-															});
-															$.append($$anchor, fragment_23);
-														});
-														$.append($$anchor, fragment_22);
-													},
-													$$slots: { default: true }
-												});
-											});
-											$.append($$anchor, fragment_21);
-										},
-										$$slots: { default: true }
-									});
-								});
-								$.append($$anchor, fragment_20);
-							},
-							$$slots: { default: true }
-						});
-					});
-					var node_27 = $.sibling(node_20, 2);
-					$.component(node_27, () => Select.HiddenSelect, ($$anchor, Select_HiddenSelect_1) => {
-						Select_HiddenSelect_1($$anchor, {});
-					});
-					$.append($$anchor, fragment_16);
-				},
-				$$slots: { default: true }
-			});
-		});
-		$.append($$anchor, fragment_15);
-	};
-	$.if(node, ($$render) => {
-		if ($$props.props.label) $$render(consequent);
-		else $$render(alternate, -1);
+	Select($$anchor, {
+		get label() {
+			return $$props.props.label;
+		},
+		get placeholder() {
+			return $$props.props.placeholder;
+		},
+		get options() {
+			return $$props.props.options;
+		},
+		get multiple() {
+			return $$props.props.multiple;
+		},
+		get disabled() {
+			return $$props.props.disabled;
+		},
+		get value() {
+			return bound.current;
+		},
+		onValueChange: setValue
 	});
-	$.append($$anchor, fragment);
 	$.pop();
 }
 //#endregion
@@ -1849,12 +1639,15 @@ var generative_default = defineEntry({
 * meet: one glob picks the faces up, so a family that lands in the
 * package is in the vocabulary without anyone editing this file. */
 const modules = /* #__PURE__ */ Object.assign({
-	"../components/alert/generative/index.ts": generative_exports$17,
-	"../components/avatar/generative/index.ts": generative_exports$16,
-	"../components/badge/generative/index.ts": generative_exports$15,
-	"../components/button/generative/index.ts": generative_exports$14,
-	"../components/card/generative/index.ts": generative_exports$13,
-	"../components/checkbox/generative/index.ts": generative_exports$12,
+	"../components/alert/generative/index.ts": generative_exports$20,
+	"../components/avatar/generative/index.ts": generative_exports$19,
+	"../components/badge/generative/index.ts": generative_exports$18,
+	"../components/banner/generative/index.ts": generative_exports$17,
+	"../components/breadcrumb/generative/index.ts": generative_exports$16,
+	"../components/button/generative/index.ts": generative_exports$15,
+	"../components/card/generative/index.ts": generative_exports$14,
+	"../components/checkbox/generative/index.ts": generative_exports$13,
+	"../components/float-button/generative/index.ts": generative_exports$12,
 	"../components/input/generative/index.ts": generative_exports$11,
 	"../components/progress/generative/index.ts": generative_exports$10,
 	"../components/radio-group/generative/index.ts": generative_exports$9,