@bysages/solid 0.3.1 → 0.4.0

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

@@ -11,7 +11,7 @@ type ListboxOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function ListboxRoot<T extends CollectionItem>(props: ListboxRootProps<T> & ListboxOwnProps): import("solid-js").JSX.Element;
-export declare const Listbox: Omit<typeof Listbox$1, "Root"> & {
+export declare const Listbox: typeof ListboxRoot & Omit<typeof Listbox$1, "Root"> & {
   Root: typeof ListboxRoot;
 };
 //#endregion

package/dist/components/listbox/index.mjs

@@ -1,3 +1,5 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -6,14 +8,20 @@ import { Listbox as Listbox$1 } from "@ark-ui/solid/listbox";
 const ArkRoot = Listbox$1.Root;
 function ListboxRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(ArkRoot, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("listbox", () => rest.id);
+	return createComponent(ArkRoot, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const Listbox = {
+const Listbox = defineFamily(ListboxRoot, {
 	...Listbox$1,
 	Root: ListboxRoot
-};
+});
 injectComponentStyle("listbox");
 //#endregion
 export { Listbox };

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

@@ -1,7 +1,11 @@
+import { ComponentProps } from "solid-js";
 import { Marquee as Marquee$1 } from "@ark-ui/solid/marquee";
 //#region src/components/marquee/index.d.ts
 /** Ark's Marquee, dressed in the paper-and-ink system: a linear ribbon of
  * seal-cut chips that dissolves into the paper at its edges rather than
  * cutting off. The API is Ark's own — Root, Viewport, Content, Edge, Item. */
-export declare const Marquee: typeof Marquee$1;
+declare function MarqueeRoot(props: ComponentProps<typeof Marquee$1.Root>): import("solid-js").JSX.Element;
+export declare const Marquee: typeof MarqueeRoot & Omit<typeof Marquee$1, "Root"> & {
+  Root: typeof MarqueeRoot;
+};
 //#endregion

package/dist/components/marquee/index.mjs

@@ -1,10 +1,22 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js";
 import { Marquee as Marquee$1 } from "@ark-ui/solid/marquee";
 //#region src/components/marquee/index.ts
 /** Ark's Marquee, dressed in the paper-and-ink system: a linear ribbon of
 * seal-cut chips that dissolves into the paper at its edges rather than
 * cutting off. The API is Ark's own — Root, Viewport, Content, Edge, Item. */
-const Marquee = Marquee$1;
+function MarqueeRoot(props) {
+	const id = useElementId("marquee", () => props.id);
+	return createComponent(Marquee$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const Marquee = defineFamily(MarqueeRoot, {
+	...Marquee$1,
+	Root: MarqueeRoot
+});
 injectComponentStyle("marquee");
 //#endregion
 export { Marquee };

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

@@ -7,5 +7,7 @@ export interface MasonryProps extends JSX.HTMLAttributes<HTMLDivElement> {
   columns?: number;
   gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
 }
-export declare function Masonry(props: MasonryProps): JSX.Element;
+export declare const Masonry: ((props: MasonryProps) => JSX.Element) & {
+  Root: (props: MasonryProps) => JSX.Element;
+};
 //#endregion

package/dist/components/masonry/index.mjs

@@ -1,3 +1,4 @@
+import { n as withSelfRoot } from "../../family-Cmd8HEyK.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -13,7 +14,7 @@ const gapVars = {
 	lg: "var(--bs-gap-lg)",
 	xl: "var(--bs-gap-xl)"
 };
-function Masonry(props) {
+const Masonry = withSelfRoot(function Masonry(props) {
 	injectComponentStyle("masonry");
 	const [own, rest] = splitProps(props, ["columns", "gap"]);
 	var _el$ = _tmpl$();
@@ -29,6 +30,6 @@ function Masonry(props) {
 		"data-part": "root"
 	}], false);
 	return _el$;
-}
+});
 //#endregion
 export { Masonry };

package/dist/components/media-player/index.d.mts

@@ -0,0 +1,2 @@
+import { a as MediaTextTrackOption, i as MediaSourceOption, n as Video, o as formatMediaTime, r as MediaPlayerProps, t as Audio } from "../../index-wW28BYf1.mjs";
+export { Audio, type MediaPlayerProps, type MediaSourceOption, type MediaTextTrackOption, Video, formatMediaTime };

package/dist/components/media-player/index.mjs

@@ -0,0 +1,2 @@
+import { n as Video, r as formatMediaTime, t as Audio } from "../../media-player-BC8D_d29.mjs";
+export { Audio, Video, formatMediaTime };

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

@@ -1,2 +1,2 @@
-import { a as MentionsVesselProps, c as useMentions, i as MentionsVessel, n as Mentions, o as UseMentionsHandlers, r as MentionsProps, s as UseMentionsOptions, t as MentionEntry } from "../../index-DDX7x8aT.mjs";
+import { a as MentionsVesselProps, c as useMentions, i as MentionsVessel, n as Mentions, o as UseMentionsHandlers, r as MentionsProps, s as UseMentionsOptions, t as MentionEntry } from "../../index-DEArHiFI.mjs";
 export { MentionEntry, Mentions, MentionsProps, MentionsVessel, MentionsVesselProps, type UseMentionsHandlers, type UseMentionsOptions, useMentions };

package/dist/components/mentions/index.mjs

@@ -1,3 +1,3 @@
-import "../textarea/index.mjs";
-import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-f5Js_2W7.mjs";
+import "../popover/index.mjs";
+import { n as MentionsVessel, r as useMentions, t as Mentions } from "../../mentions-CeG5u8Qm.mjs";
 export { Mentions, MentionsVessel, useMentions };

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

@@ -6,7 +6,27 @@ type MenuOwnProps = {
 };
 declare function MenuRoot(props: Parameters<typeof Menu$1.Root>[0] & MenuOwnProps): import("solid-js").JSX.Element;
 declare function MenuContent(props: Parameters<typeof Menu$1.Content>[0]): import("solid-js").JSX.Element;
-export declare const Menu: Omit<typeof Menu$1, "Root" | "Content"> & {
+/** One plain row in the callable menu; richer checkboxes, radios, and
+ * nested menus stay on the anatomy. */
+export interface MenuItemOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+type MenuPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
+export interface MenuFacadeProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  trigger: string;
+  items: MenuItemOption[];
+  disabled?: boolean;
+  placement?: MenuPlacement;
+  size?: "sm" | "md" | "lg";
+  onSelect?: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
+}
+declare function MenuFacade(props: MenuFacadeProps): import("solid-js").JSX.Element;
+export declare const Menu: typeof MenuFacade & Omit<typeof Menu$1, "Root" | "Content"> & {
   Root: typeof MenuRoot;
   Content: typeof MenuContent;
 };

package/dist/components/menu/index.mjs

@@ -1,6 +1,9 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { r as iconNode } from "../../icon-DTqmJCd5.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "@solidjs/web";
-import { createContext, splitProps, useContext } from "solid-js";
+import { createComponent, memo, mergeProps } from "@solidjs/web";
+import { For, createContext, splitProps, useContext } from "solid-js";
 import { Menu as Menu$1 } from "@ark-ui/solid/menu";
 //#region src/components/menu/index.tsx
 /** Ark's Menu, dressed in the paper-and-ink system: a quiet paper vessel on
@@ -15,10 +18,13 @@ import { Menu as Menu$1 } from "@ark-ui/solid/menu";
 const MenuSizeContext = createContext();
 function MenuRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
+	const id = useElementId("menu", () => rest.id);
 	return createComponent(MenuSizeContext.Provider, {
 		value: () => own.size ?? "md",
 		get children() {
-			return createComponent(Menu$1.Root, rest);
+			return createComponent(Menu$1.Root, mergeProps(rest, { get id() {
+				return id();
+			} }));
 		}
 	});
 }
@@ -28,11 +34,62 @@ function MenuContent(props) {
 		return size?.() ?? "md";
 	} }));
 }
-const Menu = {
+function MenuFacade(props) {
+	injectComponentStyle("menu");
+	return createComponent(MenuRoot, mergeProps({ get size() {
+		return props.size ?? "md";
+	} }, () => {
+		return props.open === void 0 ? {} : { open: props.open };
+	}, () => {
+		return props.defaultOpen === void 0 ? {} : { defaultOpen: props.defaultOpen };
+	}, () => {
+		return props.placement === void 0 ? {} : { positioning: { placement: props.placement } };
+	}, {
+		onSelect: (details) => props.onSelect?.(details.value),
+		onOpenChange: (details) => props.onOpenChange?.(details.open),
+		get children() {
+			return [createComponent(Menu$1.Trigger, {
+				get disabled() {
+					return props.disabled;
+				},
+				get children() {
+					return [memo(() => {
+						return props.trigger;
+					}), createComponent(Menu$1.Indicator, { get children() {
+						return iconNode("chevron-down", {
+							width: "14",
+							height: "14"
+						});
+					} })];
+				}
+			}), createComponent(Menu$1.Positioner, { get children() {
+				return createComponent(MenuContent, { get children() {
+					return createComponent(For, {
+						get each() {
+							return props.items;
+						},
+						children: (item) => createComponent(Menu$1.Item, {
+							get value() {
+								return item.value;
+							},
+							get disabled() {
+								return item.disabled;
+							},
+							get children() {
+								return item.label;
+							}
+						})
+					});
+				} });
+			} })];
+		}
+	}));
+}
+const Menu = defineFamily(MenuFacade, {
 	...Menu$1,
 	Root: MenuRoot,
 	Content: MenuContent
-};
+});
 injectComponentStyle("menu");
 //#endregion
 export { Menu };

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

@@ -1,3 +1,4 @@
+import { Menu } from "../menu/index.mjs";
 import { JSX } from "solid-js";
 //#region src/components/menubar/index.d.ts
 export interface MenubarEntry {
@@ -28,5 +29,6 @@ export interface MenubarProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "
  * arrow keys — cross-menu arrow traversal is out of scope for this
  * version. Inside an open menu the machine handles arrows and Escape.
  */
-export declare function Menubar(props: MenubarProps): JSX.Element;
+declare function MenubarImpl(props: MenubarProps): JSX.Element;
+export declare const Menubar: typeof MenubarImpl & typeof Menu;
 //#endregion

package/dist/components/menubar/index.mjs

@@ -1,10 +1,13 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
+import { Menu as Menu$1 } from "../menu/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, insert, spread, template } from "@solidjs/web";
 import { For, splitProps } from "solid-js";
 import { Portal } from "solid-js/web";
 import { Menu } from "@ark-ui/solid/menu";
 //#region src/components/menubar/index.tsx
-var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><!><!>`);
 var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
 /**
 * A desktop-style menu bar: a row of quiet ghost triggers, each opening
@@ -18,12 +21,23 @@ var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
 * arrow keys — cross-menu arrow traversal is out of scope for this
 * version. Inside an open menu the machine handles arrows and Escape.
 */
-function Menubar(props) {
+function MenubarImpl(props) {
 	injectComponentStyle("menubar");
 	injectComponentStyle("menu");
-	const [own, rest] = splitProps(props, ["items", "onSelect"]);
+	const [own, rest] = splitProps(props, [
+		"id",
+		"items",
+		"onSelect",
+		"children"
+	]);
+	const id = useElementId("menubar", () => own.id);
 	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.nextSibling;
 	spread(_el$, [rest, {
+		get id() {
+			return own.id;
+		},
 		"data-scope": "menubar",
 		"data-part": "root",
 		role: "menubar"
@@ -32,21 +46,24 @@ function Menubar(props) {
 		get each() {
 			return own.items ?? [];
 		},
-		children: (group) => createComponent(Menu.Root, {
+		children: (group, index) => createComponent(Menu.Root, {
+			get id() {
+				return `${id()}-${index()}`;
+			},
 			positioning: { placement: "bottom-start" },
 			get children() {
 				return [createComponent(Menu.Trigger, { asChild: (triggerProps) => (() => {
-					var _el$2 = _tmpl$2();
-					spread(_el$2, [triggerProps, {
+					var _el$4 = _tmpl$2();
+					spread(_el$4, [triggerProps, {
 						type: "button",
 						role: "menuitem",
 						"data-scope": "menubar",
 						"data-part": "trigger"
 					}], true);
-					insert(_el$2, () => {
+					insert(_el$4, () => {
 						return group.label;
 					});
-					return _el$2;
+					return _el$4;
 				})() }), createComponent(Portal, { get children() {
 					return createComponent(Menu.Positioner, { get children() {
 						return createComponent(Menu.Content, { get children() {
@@ -77,8 +94,12 @@ function Menubar(props) {
 				} })];
 			}
 		})
-	}));
+	}), _el$2);
+	insert(_el$, () => {
+		return own.children;
+	}, _el$3);
 	return _el$;
 }
+const Menubar = defineFamily(MenubarImpl, Menu$1);
 //#endregion
 export { Menubar };

package/dist/components/navigation-menu/index.d.mts

@@ -1,8 +1,12 @@
+import { ComponentProps } from "solid-js";
 import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/solid/navigation-menu";
 //#region src/components/navigation-menu/index.d.ts
 /** Ark's NavigationMenu, dressed in the paper-and-ink system: a menubar of
  * ghost triggers with one sliding stroke of primary ink, opening the shared
  * popup vessel. The API is Ark's own — Root, List, Item, Trigger, Link,
  * Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow. */
-export declare const NavigationMenu: typeof NavigationMenu$1;
+declare function NavigationMenuRoot(props: ComponentProps<typeof NavigationMenu$1.Root>): import("solid-js").JSX.Element;
+export declare const NavigationMenu: typeof NavigationMenuRoot & Omit<typeof NavigationMenu$1, "Root"> & {
+  Root: typeof NavigationMenuRoot;
+};
 //#endregion

package/dist/components/navigation-menu/index.mjs

@@ -1,11 +1,23 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
+import { createComponent, mergeProps } from "solid-js";
 import { NavigationMenu as NavigationMenu$1 } from "@ark-ui/solid/navigation-menu";
 //#region src/components/navigation-menu/index.ts
 /** Ark's NavigationMenu, dressed in the paper-and-ink system: a menubar of
 * ghost triggers with one sliding stroke of primary ink, opening the shared
 * popup vessel. The API is Ark's own — Root, List, Item, Trigger, Link,
 * Content, ViewportPositioner, Viewport, Indicator, ItemIndicator, Arrow. */
-const NavigationMenu = NavigationMenu$1;
+function NavigationMenuRoot(props) {
+	const id = useElementId("navigation-menu", () => props.id);
+	return createComponent(NavigationMenu$1.Root, mergeProps(props, { get id() {
+		return id();
+	} }));
+}
+const NavigationMenu = defineFamily(NavigationMenuRoot, {
+	...NavigationMenu$1,
+	Root: NavigationMenuRoot
+});
 injectComponentStyle("navigation-menu");
 //#endregion
 export { NavigationMenu };

package/dist/components/number-input/index.d.mts

@@ -9,7 +9,7 @@ type NumberInputOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function NumberInputRoot(props: NumberInputRootProps & NumberInputOwnProps): import("solid-js").JSX.Element;
-export declare const NumberInput: Omit<typeof NumberInput$1, "Root"> & {
+export declare const NumberInput: typeof NumberInputRoot & Omit<typeof NumberInput$1, "Root"> & {
   Root: typeof NumberInputRoot;
 };
 //#endregion

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

@@ -1,3 +1,5 @@
+import { t as defineFamily } from "../../family-Cmd8HEyK.mjs";
+import { t as useElementId } from "../../id-2ygNzPHF.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
@@ -5,14 +7,20 @@ import { NumberInput as NumberInput$1 } from "@ark-ui/solid/number-input";
 //#region src/components/number-input/index.tsx
 function NumberInputRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(NumberInput$1.Root, mergeProps(rest, { get "data-size"() {
-		return own.size ?? "md";
-	} }));
+	const id = useElementId("number-input", () => rest.id);
+	return createComponent(NumberInput$1.Root, mergeProps(rest, {
+		get id() {
+			return id();
+		},
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}));
 }
-const NumberInput = {
+const NumberInput = defineFamily(NumberInputRoot, {
 	...NumberInput$1,
 	Root: NumberInputRoot
-};
+});
 injectComponentStyle("number-input");
 //#endregion
 export { NumberInput };

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

@@ -17,5 +17,7 @@ export interface OrderListProps extends JSX.HTMLAttributes<HTMLDivElement> {
  * the model is the order. Dragging rides the native drag events — a
  * hairline of primary ink marks the seam the row will land on — so
  * touch keeps the buttons as its route. */
-export declare function OrderList(props: OrderListProps): JSX.Element;
+export declare const OrderList: ((props: OrderListProps) => JSX.Element) & {
+  Root: (props: OrderListProps) => JSX.Element;
+};
 //#endregion

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

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