@vandenberghinc/volt 1.1.4 → 1.1.6

package/frontend/dist/ui/stack.js

@@ -36,10 +36,6 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
-    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
-    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
-};
 // Imports.
 import { Elements, VElementTagMap } from "../elements/module.js";
 // Div element
@@ -50,13 +46,31 @@ import { Elements, VElementTagMap } from "../elements/module.js";
 // declare module './any_element.d.ts' { interface AnyElementMap { VDivElement: VDivElement }}
 // VStack.
 let FrameElement = (() => {
-    var _a;
-    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDecorators = [Elements.create({
+            name: "FrameElement",
+            default_style: {
+                // "position": "relative",
+                "margin": "0px",
+                "padding": "0px",
+                // "clear": "both",
+                "display": "block",
+                "overflow": "hidden",
+                "width": "100%", // to ensure its passed along all children.
+            }
+        })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = VElementTagMap.div;
-    var FrameElement = _classThis = class extends _classSuper {
+    var FrameElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            FrameElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
         // Constructor.
         constructor(...children) {
             // Initialize base class.
@@ -67,24 +81,6 @@ let FrameElement = (() => {
             this.append(...children);
         }
     };
-    __setFunctionName(_classThis, "FrameElement");
-    (() => {
-        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-        FrameElement = _classThis = _classDescriptor.value;
-        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-    })();
-    _classThis.default_style = {
-        // "position": "relative",
-        "margin": "0px",
-        "padding": "0px",
-        // "clear": "both",
-        "display": "block",
-        "overflow": "visible",
-    };
-    (() => {
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
     return FrameElement = _classThis;
 })();
 export { FrameElement };
@@ -92,13 +88,38 @@ export const Frame = Elements.wrapper(FrameElement);
 export const NullFrame = Elements.create_null(FrameElement);
 // VStack.
 let VStackElement = (() => {
-    var _a;
-    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDecorators = [Elements.create({
+            name: "VStackElement",
+            default_style: {
+                // "position": "relative",
+                "margin": "0px",
+                "padding": "0px",
+                // "clear": "both",
+                "display": "flex", // to support vertical spacers.
+                "overflow": "visible",
+                // "flex": "1", // disabled to support horizontal spacers in VStacks.
+                "align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
+                // "align-items": "flex-start", // otherwise the children automatically expand width to match the vstacks width.
+                "flex-direction": "column",
+                // "text-align": "start",
+                "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+                "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+                "width": "100%", // to ensure its passed along all children.
+            }
+        })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = VElementTagMap.div;
-    var VStackElement = _classThis = class extends _classSuper {
+    var VStackElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            VStackElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
         // Constructor.
         constructor(...children) {
             // Initialize base class.
@@ -109,31 +130,6 @@ let VStackElement = (() => {
             this.append(...children);
         }
     };
-    __setFunctionName(_classThis, "VStackElement");
-    (() => {
-        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-        VStackElement = _classThis = _classDescriptor.value;
-        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-    })();
-    _classThis.default_style = {
-        // "position": "relative",
-        "margin": "0px",
-        "padding": "0px",
-        // "clear": "both",
-        "display": "flex", // to support vertical spacers.
-        "overflow": "visible",
-        // "flex": "1", // disabled to support horizontal spacers in VStacks.
-        "align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
-        // "align-items": "flex-start", // otherwise the children automatically expand width to match the vstacks width.
-        "flex-direction": "column",
-        // "text-align": "start",
-        "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-        "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-    };
-    (() => {
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
     return VStackElement = _classThis;
 })();
 export { VStackElement };
@@ -141,13 +137,41 @@ export const VStack = Elements.wrapper(VStackElement);
 export const NullVStack = Elements.create_null(VStackElement);
 // AnchorVStack.
 let AnchorVStackElement = (() => {
-    var _a;
-    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDecorators = [Elements.create({
+            name: "AnchorVStackElement",
+            default_style: {
+                // "position": "relative",
+                "margin": "0px",
+                "padding": "0px",
+                // "clear": "both",
+                "display": "flex", // to support vertical spacers.
+                "overflow": "visible",
+                // "flex": "1", // disabled to support horizontal spacers in VStacks.
+                "align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
+                // "align-items": "flex-start", // otherwise the children automatically expand width to match the vstacks width.
+                "flex-direction": "column",
+                // "text-align": "start",
+                "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+                "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+                "text-decoration": "none",
+                "width": "100%", // to ensure its passed along all children.
+                // After extending VStack.
+                "color": "inherit", // inherit colors since <a> does not have that and a <div> does.
+            },
+        })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = VElementTagMap.a;
-    var AnchorVStackElement = _classThis = class extends _classSuper {
+    var AnchorVStackElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            AnchorVStackElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
         // Constructor.
         constructor(...children) {
             // Initialize base class.
@@ -158,34 +182,6 @@ let AnchorVStackElement = (() => {
             this.append(...children);
         }
     };
-    __setFunctionName(_classThis, "AnchorVStackElement");
-    (() => {
-        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-        AnchorVStackElement = _classThis = _classDescriptor.value;
-        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-    })();
-    _classThis.default_style = {
-        // "position": "relative",
-        "margin": "0px",
-        "padding": "0px",
-        // "clear": "both",
-        "display": "flex", // to support vertical spacers.
-        "overflow": "visible",
-        // "flex": "1", // disabled to support horizontal spacers in VStacks.
-        "align-content": "flex-start", // align items at start, do not stretch / space when inside HStack.
-        // "align-items": "flex-start", // otherwise the children automatically expand width to match the vstacks width.
-        "flex-direction": "column",
-        // "text-align": "start",
-        "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-        "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-        "text-decoration": "none",
-        // After extending VStack.
-        "color": "inherit", // inherit colors since <a> does not have that and a <div> does.
-    };
-    (() => {
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
     return AnchorVStackElement = _classThis;
 })();
 export { AnchorVStackElement };
@@ -194,13 +190,40 @@ export const NullAnchorVStack = Elements.create_null(AnchorVStackElement);
 // const stack: VElement = new AnchorVStackElement();
 // HStack.
 let HStackElement = (() => {
-    var _a;
-    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDecorators = [Elements.create({
+            name: "HStackElement",
+            default_style: {
+                // "position": "relative",
+                "margin": "0px",
+                "padding": "0px",
+                // "clear": "both",
+                "overflow-x": "visible",
+                "overflow-y": "visible",
+                // "text-align": "start",
+                "display": "flex",
+                "flex-direction": "row",
+                "align-items": "flex-start", // disable the auto extending of the childs height to the max child height.
+                // "flex": "1", // disabled to support horizontal spacers in VStacks.
+                "flex:": "1 1 auto", // prevent children from exceeding its max width, @warning do not remove this cause it can produce some nasty overflow bugs, so if you want to remove it create an function to optionally remove it.
+                "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+                "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+                "width": "100%", // to ensure its passed along all children.
+            },
+        })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = VElementTagMap.div;
-    var HStackElement = _classThis = class extends _classSuper {
+    var HStackElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            HStackElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        ;
         // Constructor.
         constructor(...children) {
             // Initialize base class.
@@ -211,32 +234,6 @@ let HStackElement = (() => {
             this.append(...children);
         }
     };
-    __setFunctionName(_classThis, "HStackElement");
-    (() => {
-        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-        HStackElement = _classThis = _classDescriptor.value;
-        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-    })();
-    _classThis.default_style = {
-        // "position": "relative",
-        "margin": "0px",
-        "padding": "0px",
-        // "clear": "both",
-        "overflow-x": "visible",
-        "overflow-y": "visible",
-        // "text-align": "start",
-        "display": "flex",
-        "flex-direction": "row",
-        "align-items": "flex-start", // disable the auto extending of the childs height to the max child height.
-        // "flex": "1", // disabled to support horizontal spacers in VStacks.
-        "flex:": "1 1 auto", // prevent children from exceeding its max width, @warning do not remove this cause it can produce some nasty overflow bugs, so if you want to remove it create an function to optionally remove it.
-        "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-        "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-    };
-    (() => {
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
     return HStackElement = _classThis;
 })();
 export { HStackElement };
@@ -244,13 +241,42 @@ export const HStack = Elements.wrapper(HStackElement);
 export const NullHStack = Elements.create_null(HStackElement);
 // AnchorHStack
 let AnchorHStackElement = (() => {
-    var _a;
-    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDecorators = [Elements.create({
+            name: "AnchorHStackElement",
+            default_style: {
+                // "position": "relative",
+                "margin": "0px",
+                "padding": "0px",
+                // "clear": "both",
+                "overflow-x": "visible",
+                "overflow-y": "visible",
+                // "text-align": "start",
+                "display": "flex",
+                "flex-direction": "row",
+                "align-items": "flex-start", // disable the auto extending of the childs height to the max child height.
+                // "flex": "1", // disabled to support horizontal spacers in VStacks.
+                "flex:": "1 1 auto", // prevent children from exceeding its max width, @warning do not remove this cause it can produce some nasty overflow bugs, so if you want to remove it create an function to optionally remove it.
+                "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+                "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+                "text-decoration": "none",
+                "width": "100%", // to ensure its passed along all children.
+                // After extending VStack.
+                "color": "inherit", // inherit colors since <a> does not have that and a <div> does.
+            },
+        })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = VElementTagMap.a;
-    var AnchorHStackElement = _classThis = class extends _classSuper {
+    var AnchorHStackElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            AnchorHStackElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
         // Constructor.
         constructor(...children) {
             // Initialize base class.
@@ -261,35 +287,6 @@ let AnchorHStackElement = (() => {
             this.append(...children);
         }
     };
-    __setFunctionName(_classThis, "AnchorHStackElement");
-    (() => {
-        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-        AnchorHStackElement = _classThis = _classDescriptor.value;
-        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-    })();
-    _classThis.default_style = {
-        // "position": "relative",
-        "margin": "0px",
-        "padding": "0px",
-        // "clear": "both",
-        "overflow-x": "visible",
-        "overflow-y": "visible",
-        // "text-align": "start",
-        "display": "flex",
-        "flex-direction": "row",
-        "align-items": "flex-start", // disable the auto extending of the childs height to the max child height.
-        // "flex": "1", // disabled to support horizontal spacers in VStacks.
-        "flex:": "1 1 auto", // prevent children from exceeding its max width, @warning do not remove this cause it can produce some nasty overflow bugs, so if you want to remove it create an function to optionally remove it.
-        "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-        "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-        "text-decoration": "none",
-        // After extending VStack.
-        "color": "inherit", // inherit colors since <a> does not have that and a <div> does.
-    };
-    (() => {
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
     return AnchorHStackElement = _classThis;
 })();
 export { AnchorHStackElement };
@@ -297,13 +294,32 @@ export const AnchorHStack = Elements.wrapper(AnchorHStackElement);
 export const NullAnchorHStack = Elements.create_null(AnchorHStackElement);
 // ZStack.
 let ZStackElement = (() => {
-    var _a;
-    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDecorators = [Elements.create({
+            name: "ZStackElement",
+            default_style: {
+                // "position": "relative",
+                "margin": "0px",
+                "padding": "0px",
+                "display": "grid",
+                // "text-align": "start",
+                "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+                "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
+                "width": "100%", // to ensure its passed along all children.
+            },
+        })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = VElementTagMap.div;
-    var ZStackElement = _classThis = class extends _classSuper {
+    var ZStackElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ZStackElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
         // Constructor.
         constructor(...children) {
             // Initialize base class.
@@ -311,32 +327,13 @@ let ZStackElement = (() => {
                 derived: ZStackElement,
             });
             // Add children.
-            this.zstack_append(...children);
+            this.zstack_append(children);
         }
         // Override append.
         append(...children) {
-            return this.zstack_append(...children);
+            return this.zstack_append(children);
         }
     };
-    __setFunctionName(_classThis, "ZStackElement");
-    (() => {
-        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-        ZStackElement = _classThis = _classDescriptor.value;
-        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-    })();
-    _classThis.default_style = {
-        // "position": "relative",
-        "margin": "0px",
-        "padding": "0px",
-        "display": "grid",
-        // "text-align": "start",
-        "outline": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-        "border": "none", // otherwise the focus border might show up inside an animation when the href # hashtag id is loaded.
-    };
-    (() => {
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
     return ZStackElement = _classThis;
 })();
 export { ZStackElement };

package/frontend/dist/ui/steps.d.ts

@@ -1,33 +1,20 @@
+import { VElementBaseSignature } from "../elements/module.js";
 import { VStackElement, HStackElement } from "./stack";
 import { DividerElement } from "./divider";
-interface ContentObject {
+export interface StepContentOptions {
     content: any[];
     title?: string;
     hstack?: boolean;
     side_by_side_width?: number;
 }
-export declare class StepsElement extends VStackElement {
-    static default_style: {
-        "--steps-tint": string;
-        "--steps-tint-opac": number;
-        "--steps-step-bg": string;
-        "--steps-step-border": string;
-        "--steps-step-border-radius": string;
-        "--steps-div-bg": string;
-        margin: string;
-        padding: string;
-        display: string;
-        overflow: string;
-        "align-content": string;
-        "flex-direction": string;
-        outline: string;
-        border: string;
-    };
+declare const StepsElement_base: VElementBaseSignature;
+export declare class StepsElement extends StepsElement_base {
     _tint: string;
     _tint_opac: number;
     _step_bg: string;
     _step_border: string;
     _step_border_radius: string;
+    _step_margin_right: string;
     _div_bg: string;
     _step_nr_nodes: (VStackElement & {
         bg: VStackElement;
@@ -35,9 +22,8 @@ export declare class StepsElement extends VStackElement {
     _step_nodes: HStackElement[];
     _div_nodes: DividerElement[];
     _content_nodes: (HStackElement | VStackElement)[];
-    constructor({ content, spacing, }: {
-        content: any[] | any[][] | ContentObject[];
-        spacing?: string | number;
+    constructor({ content, }: {
+        content: any[] | any[][] | StepContentOptions[];
     });
     set_default(): this;
     styles(): Record<string, string>;
@@ -56,12 +42,13 @@ export declare class StepsElement extends VStackElement {
     step_number_border_color(value: string): this;
     step_number_border_radius(): string;
     step_number_border_radius(value: string): this;
+    step_number_margin_right(): string;
+    step_number_margin_right(value: string): this;
     iterate_step_numbers(callback: (element: VStackElement) => void): this;
     iterate_steps(callback: (element: HStackElement) => void): this;
 }
 export declare const Steps: <Extensions extends object = {}>(args_0: {
-    content: any[] | any[][] | ContentObject[];
-    spacing?: string | number;
+    content: any[] | any[][] | StepContentOptions[];
 }) => StepsElement & Extensions;
 export declare const NullSteps: <Extensions extends object = {}>() => StepsElement & Extensions;
 declare module './any_element.d.ts' {

package/frontend/dist/ui/steps.js

@@ -36,10 +36,6 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
-    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
-    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
-};
 // Imports.
 import { Elements, isVElement } from "../elements/module.js";
 import { VStack, VStackElement, HStack } from "./stack";
@@ -80,22 +76,47 @@ import { ForEach } from "./for_each";
         @default: "1.25em"
  */
 let StepsElement = (() => {
-    var _a;
-    let _classDecorators = [(_a = Elements).register.bind(_a)];
+    let _classDecorators = [Elements.create({
+            name: "StepsElement",
+            default_style: {
+                ...VStackElement.default_style,
+                "--steps-tint": "gray",
+                "--steps-tint-opac": 1,
+                "--steps-step-bg": "gray",
+                "--steps-step-border": "gray",
+                "--steps-step-border-radius": "50%",
+                "--steps-div-bg": "gray",
+            },
+        })];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = VStackElement;
-    var StepsElement = _classThis = class extends _classSuper {
+    var StepsElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            StepsElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        _tint;
+        _tint_opac;
+        _step_bg;
+        _step_border;
+        _step_border_radius;
+        _step_margin_right = "1em";
+        _div_bg;
+        _step_nr_nodes = [];
+        _step_nodes = [];
+        _div_nodes = [];
+        _content_nodes = [];
         // Constructor.
-        constructor({ content = [], spacing = "1.25em", }) {
+        constructor({ content = [], }) {
             // Inherit.
             super();
-            this._step_nr_nodes = [];
-            this._step_nodes = [];
-            this._div_nodes = [];
-            this._content_nodes = [];
-            this._init_derived({
+            this._init({
                 derived: StepsElement,
             });
             // Assign single array argument to content.
@@ -117,6 +138,7 @@ let StepsElement = (() => {
             this._step_border_radius = StepsElement.default_style["--steps-step-border-radius"];
             this._div_bg = StepsElement.default_style["--steps-div-bg"];
             // Build.
+            const spacing = "1.25em";
             this.append(ForEach(content, (item, index, is_last) => {
                 // Build divider.
                 const divider = is_last ? null : Divider()
@@ -130,7 +152,7 @@ let StepsElement = (() => {
                 // Build content.
                 const content = (item.hstack ? HStack() : VStack())
                     .z_index(1)
-                    // .width(100%)
+                    // .width("100%")
                     .stretch(true)
                     .overflow("hidden"); // required otherwise when inside Tabs will mess up.
                 if (typeof item.title === "string") {
@@ -165,7 +187,7 @@ let StepsElement = (() => {
                     .font_size("0.7em")
                     .flex_shrink(0)
                     .frame("1.8em", "1.8em")
-                    .margin("0.2em", "1em", null, null)
+                    .margin("0.2em", this._step_margin_right, null, null)
                     // .border_radius(this._step_border_radius)
                     .border_radius(5)
                     .border(1, this._step_border)
@@ -263,6 +285,16 @@ let StepsElement = (() => {
             });
             return this;
         }
+        step_number_margin_right(value) {
+            if (value == null) {
+                return this._step_margin_right;
+            }
+            this._step_margin_right = value;
+            this._step_nr_nodes.iterate(node => {
+                node.margin_right(value);
+            });
+            return this;
+        }
         /*	@docs:
             @title: Iterate step number nodes
             @description: Iterate the step number nodes. When the callback returns any non null value the iteration will be stopped.
@@ -280,25 +312,6 @@ let StepsElement = (() => {
             return this;
         }
     };
-    __setFunctionName(_classThis, "StepsElement");
-    (() => {
-        const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
-        __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
-        StepsElement = _classThis = _classDescriptor.value;
-        if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
-    })();
-    _classThis.default_style = {
-        ...VStackElement.default_style,
-        "--steps-tint": "gray",
-        "--steps-tint-opac": 1,
-        "--steps-step-bg": "gray",
-        "--steps-step-border": "gray",
-        "--steps-step-border-radius": "50%",
-        "--steps-div-bg": "gray",
-    };
-    (() => {
-        __runInitializers(_classThis, _classExtraInitializers);
-    })();
     return StepsElement = _classThis;
 })();
 export { StepsElement };