@bysages/solid 0.2.3 → 0.3.1

package/dist/components/result/index.mjs

@@ -0,0 +1,66 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, mergeProps, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/result/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.5 stroke-linecap=round stroke-linejoin=round aria-hidden=true>`);
+const MARK = { __html: "<g data-for=\"success\"><path d=\"M20 6 9 17l-5-5\"/></g><g data-for=\"warning\"><path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z\"/><path d=\"M12 9v4\"/><path d=\"M12 17h.01\"/></g><g data-for=\"danger\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"m15 9-6 6\"/><path d=\"m9 9 6 6\"/></g><g data-for=\"info\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4\"/><path d=\"M12 8h.01\"/></g>" };
+function ResultRoot(props) {
+	injectComponentStyle("result");
+	const [own, rest] = splitProps(props, ["status"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "result",
+		"data-part": "root",
+		get "data-status"() {
+			return own.status ?? "info";
+		}
+	}], false);
+	return _el$;
+}
+/** The mark carries all four verdicts and lets the root choose, so the
+* icon can never drift from the status the root declares. */
+function ResultIcon(props) {
+	injectComponentStyle("result");
+	const [own, rest] = splitProps(props, ["children"]);
+	var _el$2 = _tmpl$();
+	spread(_el$2, [rest, {
+		"data-scope": "result",
+		"data-part": "icon"
+	}], true);
+	insert(_el$2, () => {
+		return own.children ?? (() => {
+			var _el$3 = _tmpl$2();
+			effect(() => MARK.__html, (_v$) => {
+				_el$3.innerHTML = _v$;
+			});
+			return _el$3;
+		})();
+	});
+	return _el$2;
+}
+function part(name, tag) {
+	return function Part(props) {
+		injectComponentStyle("result");
+		const [own, rest] = splitProps(props, ["children"]);
+		return createComponent(tag, mergeProps(rest, {
+			"data-scope": "result",
+			"data-part": name,
+			get children() {
+				return own.children;
+			}
+		}));
+	};
+}
+/** A verdict drawn after the deed: the mark washes in the fixed
+* pigment, the title rides the serif, and the extra carries the way
+* onward. Any subset composes. */
+const Result = {
+	Root: ResultRoot,
+	Icon: ResultIcon,
+	Title: part("title", "h3"),
+	Description: part("description", "p"),
+	Extra: part("extra", "div")
+};
+//#endregion
+export { Result, ResultIcon, ResultRoot };

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

@@ -1,17 +1,2 @@
-import { CollectionItem } from "@ark-ui/solid/collection";
-import { Select as Select$1, SelectRootProps } from "@ark-ui/solid/select";
-//#region src/components/select/index.d.ts
-/** Ark's Select, dressed in the paper-and-ink system: the trigger is the
- * whole control and its list dissolves open as a paper vessel, the checked
- * row taking the flat ink fill. The API is Ark's own — Root, Label, Control,
- * Trigger, ValueText, Indicator, ClearTrigger, HiddenSelect, Positioner,
- * Content, List, Item, ItemText, ItemIndicator, ItemGroup, ItemGroupLabel. */
-type SelectOwnProps = {
-  /** One rung of the control-height ladder for the trigger. */
-  size?: "sm" | "md" | "lg";
-};
-declare function SelectRoot<T extends CollectionItem>(props: SelectRootProps<T> & SelectOwnProps): import("solid-js").JSX.Element;
-export declare const Select: Omit<typeof Select$1, "Root"> & {
-  Root: typeof SelectRoot;
-};
-//#endregion
+import { i as NativeSelectProps, n as NativeSelect, r as NativeSelectOption, t as Select } from "../../index-YPUiqD3n.mjs";
+export { NativeSelect, type NativeSelectOption, type NativeSelectProps, Select };

package/dist/components/select/index.mjs

@@ -1,18 +1,2 @@
-import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
-import { splitProps } from "solid-js";
-import { Select as Select$1 } from "@ark-ui/solid/select";
-//#region src/components/select/index.tsx
-function SelectRoot(props) {
-	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Select$1.Root, mergeProps(rest, { get ["data-size"]() {
-		return own.size ?? "md";
-	} }));
-}
-const Select = {
-	...Select$1,
-	Root: SelectRoot
-};
-injectComponentStyle("select");
-//#endregion
-export { Select };
+import { n as NativeSelect, t as Select } from "../../select-CX6OuQlU.mjs";
+export { NativeSelect, Select };

package/dist/components/separator/index.mjs

@@ -1,29 +1,27 @@
 import { injectComponentStyle } from "@bysages/core";
-import { memo, mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/separator/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 function Separator(props) {
 	injectComponentStyle("separator");
 	const [own, rest] = splitProps(props, ["orientation", "decorative"]);
 	const orientation = () => own.orientation ?? "horizontal";
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			get role() {
-				return own.decorative ? "none" : "separator";
-			},
-			"data-scope": "separator",
-			"data-part": "root",
-			get ["data-orientation"]() {
-				return orientation();
-			},
-			get ["aria-orientation"]() {
-				return memo(() => !!own.decorative)() ? void 0 : orientation();
-			}
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get role() {
+			return own.decorative ? "none" : "separator";
+		},
+		"data-scope": "separator",
+		"data-part": "root",
+		get "data-orientation"() {
+			return orientation();
+		},
+		get "aria-orientation"() {
+			return own.decorative ? void 0 : orientation();
+		}
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Separator };

package/dist/components/skeleton/index.mjs

@@ -1,17 +1,15 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 //#region src/components/skeleton/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 function Skeleton(props) {
 	injectComponentStyle("skeleton");
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(props, {
-			"data-scope": "skeleton",
-			"data-part": "root"
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [props, {
+		"data-scope": "skeleton",
+		"data-part": "root"
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Skeleton };

package/dist/components/slider/index.mjs

@@ -1,11 +1,11 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { Slider as Slider$1 } from "@ark-ui/solid/slider";
 //#region src/components/slider/index.tsx
 function SliderRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Slider$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(Slider$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }

package/dist/components/spinner/index.mjs

@@ -1,28 +1,28 @@
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/spinner/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span><svg viewBox="0 0 24 24"fill=none aria-hidden=true><circle cx=12 cy=12 r=9 stroke=currentColor stroke-opacity=0.2 stroke-width=2.5></circle><path d="M21 12a9 9 0 0 0-9-9"stroke=currentColor stroke-width=2.5 stroke-linecap=round>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span><svg viewBox="0 0 24 24"fill=none aria-hidden=true><circle cx=12 cy=12 r=9 stroke=currentColor stroke-opacity=0.2 stroke-width=2.5></circle><path d="M21 12a9 9 0 0 0-9-9"stroke=currentColor stroke-width=2.5 stroke-linecap=round>`);
 /** A wheel of waiting: one arc of ink turning about its center. Quiet by
 * default — it reports progress without claiming attention. */
 function Spinner(props) {
 	injectComponentStyle("spinner");
 	const [own, rest] = splitProps(props, ["size"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			"role": "status",
-			get ["aria-label"]() {
-				return rest["aria-label"] ?? "Loading";
-			},
-			"data-scope": "spinner",
-			"data-part": "root",
-			get ["data-size"]() {
-				return own.size ?? "md";
-			}
-		}), false, true);
-		return _el$;
-	})();
+	const messages = useComponentMessages();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		role: "status",
+		get "aria-label"() {
+			return rest["aria-label"] ?? messages().spinner.loading;
+		},
+		"data-scope": "spinner",
+		"data-part": "root",
+		get "data-size"() {
+			return own.size ?? "md";
+		}
+	}], true);
+	return _el$;
 }
 //#endregion
 export { Spinner };

package/dist/components/split-button/index.mjs

@@ -1,12 +1,14 @@
 import { Button } from "../button/index.mjs";
+import { n as useComponentMessages } from "../../use-component-messages-C4SCVYjD.mjs";
 import { injectComponentStyle } from "@bysages/core";
-import { Portal, createComponent, insert, mergeProps, spread, template } from "solid-js/web";
+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/split-button/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<button>`);
-var _tmpl$3 = /*#__PURE__*/ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
+var _tmpl$ = /* @__PURE__ */ template(`<div><!><!>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.75 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m6 9 6 6 6-6">`);
 /**
 * A primary action with its alternatives one seam away: the main button
 * fires `onClick`, the fitted arrow opens a paper vessel of the same
@@ -33,87 +35,90 @@ function SplitButton(props) {
 	const variant = () => own.variant ?? "solid";
 	const tone = () => own.tone ?? "ink";
 	const size = () => own.size ?? "md";
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "split-button",
-			"data-part": "root"
-		}), false, true);
-		insert(_el$, createComponent(Button, {
-			get variant() {
-				return variant();
-			},
-			get tone() {
-				return tone();
-			},
-			get size() {
-				return size();
-			},
-			get disabled() {
-				return own.disabled;
-			},
-			onClick: (event) => own.onClick?.(event),
-			get children() {
-				return own.label;
-			}
-		}), null);
-		insert(_el$, createComponent(Menu.Root, {
-			positioning: { placement: "bottom-end" },
-			get children() {
-				return [createComponent(Menu.Trigger, { asChild: (propsFn) => (() => {
-					var _el$2 = _tmpl$2();
-					spread(_el$2, mergeProps(propsFn, {
-						"type": "button",
-						get disabled() {
-							return own.disabled;
-						},
-						"aria-label": "More actions",
-						get ["data-variant"]() {
-							return variant();
-						},
-						get ["data-tone"]() {
-							return tone();
-						},
-						get ["data-size"]() {
-							return size();
-						},
-						"data-square": "true",
-						"data-motion": "ink-ripple lit"
-					}), false, true);
-					insert(_el$2, chevronDown);
-					return _el$2;
-				})() }), createComponent(Portal, { get children() {
-					return createComponent(Menu.Positioner, { get children() {
-						return createComponent(Menu.Content, { get children() {
-							return createComponent(For, {
-								get each() {
-									return own.items ?? [];
+	const messages = useComponentMessages();
+	var _el$ = _tmpl$();
+	var _el$2 = _el$.firstChild;
+	var _el$3 = _el$2.nextSibling;
+	spread(_el$, [rest, {
+		"data-scope": "split-button",
+		"data-part": "root"
+	}], true);
+	insert(_el$, createComponent(Button, {
+		get variant() {
+			return variant();
+		},
+		get tone() {
+			return tone();
+		},
+		get size() {
+			return size();
+		},
+		get disabled() {
+			return own.disabled;
+		},
+		onClick: (event) => own.onClick?.(event),
+		get children() {
+			return own.label;
+		}
+	}), _el$2);
+	insert(_el$, createComponent(Menu.Root, {
+		positioning: { placement: "bottom-end" },
+		get children() {
+			return [createComponent(Menu.Trigger, { asChild: (propsFn) => (() => {
+				var _el$4 = _tmpl$2();
+				spread(_el$4, [propsFn, {
+					type: "button",
+					get disabled() {
+						return own.disabled;
+					},
+					get "aria-label"() {
+						return messages().more.actions;
+					},
+					get "data-variant"() {
+						return variant();
+					},
+					get "data-tone"() {
+						return tone();
+					},
+					get "data-size"() {
+						return size();
+					},
+					"data-square": "true",
+					"data-motion": "ink-ripple lit"
+				}], true);
+				insert(_el$4, chevronDown);
+				return _el$4;
+			})() }), createComponent(Portal, { get children() {
+				return createComponent(Menu.Positioner, { get children() {
+					return createComponent(Menu.Content, { get children() {
+						return createComponent(For, {
+							get each() {
+								return own.items ?? [];
+							},
+							children: (entry) => createComponent(Menu.Item, {
+								get value() {
+									return entry.value;
 								},
-								children: (entry) => createComponent(Menu.Item, {
-									get value() {
-										return entry.value;
-									},
-									get disabled() {
-										return entry.disabled;
-									},
-									get ["data-danger"]() {
-										return entry.danger ? "" : void 0;
-									},
-									onSelect: () => own.onSelect?.(entry.value),
-									get children() {
-										return createComponent(Menu.ItemText, { get children() {
-											return entry.label;
-										} });
-									}
-								})
-							});
-						} });
+								get disabled() {
+									return entry.disabled;
+								},
+								get "data-danger"() {
+									return entry.danger ? "" : void 0;
+								},
+								onSelect: () => own.onSelect?.(entry.value),
+								get children() {
+									return createComponent(Menu.ItemText, { get children() {
+										return entry.label;
+									} });
+								}
+							})
+						});
 					} });
-				} })];
-			}
-		}), null);
-		return _el$;
-	})();
+				} });
+			} })];
+		}
+	}), _el$3);
+	return _el$;
 }
 /** One stroke pointing down: all a fitted dropdown arrow needs. */
 function chevronDown() {

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

@@ -0,0 +1,11 @@
+import { JSX } from "solid-js";
+//#region src/components/spotlight/index.d.ts
+export interface SpotlightProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  /** How far the lamp throws before the ink swallows it. */
+  radius?: string;
+}
+/** The ink-light card: a vessel whose rim and face take light from the
+ * reader's hand. The wrapper only measures and writes the geometry —
+ * the lamp itself is the two layers the stylesheet paints. */
+export declare function Spotlight(props: SpotlightProps): JSX.Element;
+//#endregion

package/dist/components/spotlight/index.mjs

@@ -0,0 +1,38 @@
+import { injectComponentStyle } from "@bysages/core";
+import { insert, spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/spotlight/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/** The ink-light card: a vessel whose rim and face take light from the
+* reader's hand. The wrapper only measures and writes the geometry —
+* the lamp itself is the two layers the stylesheet paints. */
+function Spotlight(props) {
+	injectComponentStyle("spotlight");
+	const [own, rest] = splitProps(props, ["radius"]);
+	const track = (event) => {
+		const host = event.currentTarget;
+		const rect = host.getBoundingClientRect();
+		host.style.setProperty("--bs-spot-x", `${event.clientX - rect.left}px`);
+		host.style.setProperty("--bs-spot-y", `${event.clientY - rect.top}px`);
+	};
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "spotlight",
+		"data-part": "root",
+		get style() {
+			return { "--bs-spot-radius": own.radius };
+		},
+		onPointerMove: track,
+		onPointerEnter: (event) => {
+			track(event);
+			event.currentTarget.setAttribute("data-hovered", "");
+		},
+		onPointerLeave: (event) => event.currentTarget.removeAttribute("data-hovered")
+	}], true);
+	insert(_el$, () => {
+		return props.children;
+	});
+	return _el$;
+}
+//#endregion
+export { Spotlight };

package/dist/components/stack/index.mjs

@@ -1,8 +1,8 @@
 import { injectComponentStyle } from "@bysages/core";
-import { mergeProps, spread, template } from "solid-js/web";
+import { spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/stack/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
 /** Whitespace chosen by name: the named steps point at the space ramp so
 * siblings are held apart by one token, never by ad-hoc margins. */
 const gapVars = {
@@ -22,26 +22,24 @@ function Stack(props) {
 		"align",
 		"justify"
 	]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			get style() {
-				return {
-					...rest.style,
-					"--bs-stack-gap": gapVars[own.gap ?? "md"] ?? gapVars.md,
-					"align-items": own.align,
-					"justify-content": own.justify,
-					"flex-wrap": own.wrap ? "wrap" : void 0
-				};
-			},
-			"data-scope": "stack",
-			"data-part": "root",
-			get ["data-direction"]() {
-				return own.direction ?? "column";
-			}
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		get style() {
+			return {
+				...rest.style,
+				"--bs-stack-gap": gapVars[own.gap ?? "md"] ?? gapVars.md,
+				"align-items": own.align,
+				"justify-content": own.justify,
+				"flex-wrap": own.wrap ? "wrap" : void 0
+			};
+		},
+		"data-scope": "stack",
+		"data-part": "root",
+		get "data-direction"() {
+			return own.direction ?? "column";
+		}
+	}], false);
+	return _el$;
 }
 //#endregion
 export { Stack };

package/dist/components/stat/index.mjs

@@ -1,13 +1,13 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps, spread, template } from "solid-js/web";
+import { createComponent, mergeProps, spread, template } from "@solidjs/web";
 import { splitProps } from "solid-js";
 //#region src/components/stat/index.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<span>`);
+var _tmpl$ = /* @__PURE__ */ template(`<span>`);
 function part(name, tag) {
 	function Component(props) {
 		return createComponent(tag, mergeProps(props, {
 			"data-scope": "stat",
-			get ["data-part"]() {
+			get "data-part"() {
 				return name.toLowerCase();
 			}
 		}));
@@ -22,17 +22,15 @@ const Description = part("Description", "p");
 * explicit `data-direction` attribute on the consumer side still wins. */
 function Delta(props) {
 	const [own, rest] = splitProps(props, ["direction"]);
-	return (() => {
-		var _el$ = _tmpl$();
-		spread(_el$, mergeProps(rest, {
-			"data-scope": "stat",
-			"data-part": "delta",
-			get ["data-direction"]() {
-				return rest["data-direction"] ?? own.direction ?? "flat";
-			}
-		}), false, false);
-		return _el$;
-	})();
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "stat",
+		"data-part": "delta",
+		get "data-direction"() {
+			return rest["data-direction"] ?? own.direction ?? "flat";
+		}
+	}], false);
+	return _el$;
 }
 const Stat = Object.assign(Root, {
 	Root,

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

@@ -1,3 +1,4 @@
+import { ComponentProps } from "solid-js";
 import { Steps as Steps$1, StepsRootProps } from "@ark-ui/solid/steps";
 //#region src/components/steps/index.d.ts
 /**
@@ -12,7 +13,11 @@ type StepsOwnProps = {
   size?: "sm" | "md" | "lg";
 };
 declare function StepsRoot(props: StepsRootProps & StepsOwnProps): import("solid-js").JSX.Element;
-export declare const Steps: Omit<typeof Steps$1, "Root"> & {
+/** The machine wraps each tab in an item div; presentation keeps the
+ * tablist owned children legal while the tab itself keeps its role. */
+declare function StepsItem(props: ComponentProps<typeof Steps$1.Item>): import("solid-js").JSX.Element;
+export declare const Steps: Omit<typeof Steps$1, "Root" | "Item"> & {
   Root: typeof StepsRoot;
+  Item: typeof StepsItem;
 };
 //#endregion

package/dist/components/steps/index.mjs

@@ -1,17 +1,23 @@
 import { injectComponentStyle } from "@bysages/core";
-import { createComponent, mergeProps } from "solid-js/web";
+import { createComponent, mergeProps } from "@solidjs/web";
 import { splitProps } from "solid-js";
 import { Steps as Steps$1 } from "@ark-ui/solid/steps";
 //#region src/components/steps/index.tsx
 function StepsRoot(props) {
 	const [own, rest] = splitProps(props, ["size"]);
-	return createComponent(Steps$1.Root, mergeProps(rest, { get ["data-size"]() {
+	return createComponent(Steps$1.Root, mergeProps(rest, { get "data-size"() {
 		return own.size ?? "md";
 	} }));
 }
+/** The machine wraps each tab in an item div; presentation keeps the
+* tablist owned children legal while the tab itself keeps its role. */
+function StepsItem(props) {
+	return createComponent(Steps$1.Item, mergeProps(props, { role: "presentation" }));
+}
 const Steps = {
 	...Steps$1,
-	Root: StepsRoot
+	Root: StepsRoot,
+	Item: StepsItem
 };
 injectComponentStyle("steps");
 //#endregion