@sondor-technology/sondor-components 1.0.2 → 1.0.4

package/dist/components/checkbox/checkbox.d.ts

@@ -11,11 +11,14 @@ export declare class StCheckbox extends LitElement {
     disabled: boolean;
     invalid: boolean;
     required: boolean;
+    errorMessage: string;
     ariaLabel: string;
     constructor();
     static styles: import("lit").CSSResult[];
     updated(changedProperties: PropertyValues<this>): void;
     private _syncValidity;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
     formResetCallback(): void;
     private _handleChange;
     render(): import("lit-html").TemplateResult<1>;

package/dist/components/checkbox/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAErB,OAAO,CAAC,QAAQ,CAAoB;IAEX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,IAAI,SAAM;IAEzB,KAAK,SAAQ;IAEG,OAAO,UAAS;IAChB,aAAa,UAAS;IAEtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IAEtB,SAAS,SAAM;IAEtD,cAaG;IAED,MAAM,CAAC,MAAM,4BAuHX;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAYvD;IAED,OAAO,CAAC,aAAa;IASrB,iBAAiB,SAKhB;IAED,OAAO,CAAC,aAAa;IAcrB,MAAM,yCAyBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAErB,OAAO,CAAC,QAAQ,CAAoB;IAEX,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAChC,IAAI,SAAM;IACzB,KAAK,SAAQ;IAEG,OAAO,UAAS;IAChB,aAAa,UAAS;IAEtB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IACjC,YAAY,SAAM;IAEP,SAAS,SAAM;IAEpD,cAWC;IAED,MAAM,CAAC,MAAM,4BA6GX;IAEO,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAWvD;IAED,OAAO,CAAC,aAAa;IAmBd,aAAa,IAAI,OAAO,CAkB9B;IAEM,cAAc,IAAI,OAAO,CAK/B;IAED,iBAAiB,SAMhB;IAED,OAAO,CAAC,aAAa;IAkBrB,MAAM,yCAwBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/checkbox/checkbox.js

@@ -12,28 +12,25 @@ let StCheckbox = class StCheckbox extends LitElement {
         super();
         this.size = "md";
         this.name = "";
-        // Checkboxes default to 'on' natively if no value is provided
         this.value = "on";
         this.checked = false;
         this.indeterminate = false;
         this.disabled = false;
         this.invalid = false;
         this.required = false;
+        this.errorMessage = "";
         this.ariaLabel = "";
         this._internals = this.attachInternals();
-        // 1. Trigger error state if the user clicks away and the field is invalid
         this.addEventListener('focusout', () => {
-            this.invalid = !this._inputEl.validity.valid;
+            this.invalid = !this.checkValidity();
         });
-        // 2. Trigger error state if the st-form tries to submit and fails
         this.addEventListener('invalid', () => {
-            this.invalid = true;
+            this.invalid = !this.checkValidity();
         });
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has("checked") || changedProperties.has("value")) {
-            // Form API: If checked, submit the value. If unchecked, submit null to remove it from FormData.
+        if (changedProperties.has("checked") || changedProperties.has("value") || changedProperties.has("errorMessage")) {
             this._internals.setFormValue(this.checked ? this.value : null);
             this._syncValidity();
         }
@@ -44,11 +41,38 @@ let StCheckbox = class StCheckbox extends LitElement {
     _syncValidity() {
         if (!this._inputEl)
             return;
-        this._internals.setValidity(this._inputEl.validity, this._inputEl.validationMessage, this._inputEl);
+        if (this.required && !this.checked) {
+            const message = this.errorMessage || this._inputEl.validationMessage || "Please check this box if you want to proceed.";
+            this._internals.setValidity({ valueMissing: true }, message, this._inputEl);
+        }
+        else {
+            this._internals.setValidity(this._inputEl.validity, this._inputEl.validationMessage, this._inputEl);
+        }
+    }
+    checkValidity() {
+        if (!this._inputEl)
+            return true;
+        if (this.required && !this.checked) {
+            const message = this.errorMessage || this._inputEl.validationMessage || "Please check this box if you want to proceed.";
+            this._internals.setValidity({ valueMissing: true }, message, this._inputEl);
+            this.invalid = true;
+            return false;
+        }
+        const isValid = this._inputEl.checkValidity();
+        this._syncValidity();
+        this.invalid = !isValid;
+        return isValid;
+    }
+    reportValidity() {
+        this._syncValidity();
+        const isValid = this._internals.reportValidity();
+        this.invalid = !isValid;
+        return isValid;
     }
     formResetCallback() {
         this.checked = false;
         this.indeterminate = false;
+        this.invalid = false;
         this._internals.setFormValue(null);
         this.updateComplete.then(() => this._syncValidity());
     }
@@ -56,11 +80,13 @@ let StCheckbox = class StCheckbox extends LitElement {
         e.stopPropagation();
         if (this.disabled)
             return;
-        // Standard native behavior: clicking an indeterminate checkbox unsets the indeterminate state
         if (this.indeterminate) {
             this.indeterminate = false;
         }
         this.checked = this._inputEl.checked;
+        if (this.checkValidity()) {
+            this.invalid = false;
+        }
         this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
     }
     render() {
@@ -78,7 +104,6 @@ let StCheckbox = class StCheckbox extends LitElement {
           @change=${this._handleChange}
         />
         <div class="control">
-          <!-- Render both SVGs and use CSS to conditionally reveal them based on host attributes -->
           ${this.indeterminate
             ? html `<svg class="icon-minus" viewBox="0 0 24 24"><path d="M5 12h14"></path></svg>`
             : html `<svg class="icon-check" viewBox="0 0 24 24">
@@ -120,7 +145,6 @@ StCheckbox.styles = [
         font-size: var(--st-font-size-base);
       }
 
-      /* Visually hide the native input but keep it in the DOM for focus/screen readers */
       input {
         position: absolute;
         width: var(--checkbox-size);
@@ -133,7 +157,6 @@ StCheckbox.styles = [
         border-width: 0;
       }
 
-      /* Custom Checkbox Box */
       .control {
         display: flex;
         align-items: center;
@@ -145,30 +168,25 @@ StCheckbox.styles = [
         background-color: var(--st-color-bg);
         transition: all 0.2s ease;
         flex-shrink: 0;
-        /* Aligns the box nicely with standard text line-height */
         margin-top: 0.125rem;
       }
 
-      /* Hover State */
       label:hover .control {
         border-color: var(--st-color-primary-hover);
       }
 
-      /* Focus State */
       input:focus-visible + .control {
         box-shadow:
           0 0 0 2px var(--st-color-bg),
           0 0 0 4px var(--st-color-primary);
       }
 
-      /* Checked & Indeterminate States */
       :host([checked]) .control,
       :host([indeterminate]) .control {
         border-color: var(--st-color-primary);
         background-color: var(--st-color-primary);
       }
 
-      /* SVG Icons */
       svg {
         width: var(--checkbox-icon-size);
         height: var(--checkbox-icon-size);
@@ -184,14 +202,12 @@ StCheckbox.styles = [
           opacity 0.2s ease;
       }
 
-      /* Reveal Icons */
       :host([checked]) svg.icon-check,
       :host([indeterminate]) svg.icon-minus {
         opacity: 1;
         transform: scale(1);
       }
 
-      /* Disabled State */
       :host([disabled]) {
         pointer-events: none;
       }
@@ -200,7 +216,6 @@ StCheckbox.styles = [
         cursor: not-allowed;
       }
 
-      /* Invalid State */
       :host([invalid]) .control {
         border-color: var(--st-color-error);
       }
@@ -238,6 +253,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], StCheckbox.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], StCheckbox.prototype, "errorMessage", void 0);
 __decorate([
     property({ attribute: "aria-label" })
 ], StCheckbox.prototype, "ariaLabel", void 0);

package/dist/components/form/form-step.d.ts

@@ -2,6 +2,7 @@ import { LitElement } from "lit";
 export declare class StFormStep extends LitElement {
     title: string;
     active: boolean;
+    validate?: () => Promise<boolean> | boolean;
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/form/form-step.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-step.d.ts","sourceRoot":"","sources":["../../../src/components/form/form-step.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,qBACa,UAAW,SAAQ,UAAU;IACd,KAAK,SAAM;IACK,MAAM,UAAS;IAEzD,MAAM,CAAC,MAAM,4BAWX;IAEF,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}
+{"version":3,"file":"form-step.d.ts","sourceRoot":"","sources":["../../../src/components/form/form-step.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAI1C,qBACa,UAAW,SAAQ,UAAU;IACd,KAAK,SAAM;IACK,MAAM,UAAS;IAIzD,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC;IAE5C,MAAM,CAAC,MAAM,4BAWX;IAEF,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}

package/dist/components/form/form-step.js

@@ -35,6 +35,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], StFormStep.prototype, "active", void 0);
+__decorate([
+    property({ attribute: false })
+], StFormStep.prototype, "validate", void 0);
 StFormStep = __decorate([
     customElement("st-form-step")
 ], StFormStep);

package/dist/components/form/form.d.ts

@@ -1,13 +1,18 @@
-import { LitElement } from "lit";
+import { LitElement, PropertyValues } from "lit";
 export type FormLayout = "vertical" | "horizontal" | "inline";
 export declare class StForm extends LitElement {
     layout: FormLayout;
     loading: boolean;
     error: string;
     private _currentStepIndex;
-    private _stepElements;
     private _formEl;
+    private _modalFooterEl;
+    private get _steps();
     static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    private _updateModalFooter;
     private _handleSlotChange;
     private _updateStepVisibility;
     private _validateCurrentContext;

package/dist/components/form/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAK1C,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE9D,qBACa,MAAO,SAAQ,UAAU;IACK,MAAM,EAAE,UAAU,CAAc;IAC/B,OAAO,UAAS;IAChC,KAAK,SAAM;IAE5B,OAAO,CAAC,iBAAiB,CAAK;IAGvC,OAAO,CAAC,aAAa,CAAgB;IAEtB,OAAO,CAAC,OAAO,CAAmB;IAEjD,MAAM,CAAC,MAAM,4BA8IX;IAEF,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,gBAAgB;IAuCxB,OAAO,CAAC,aAAa;IA4BrB,MAAM,yCAkFL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE9D,qBACa,MAAO,SAAQ,UAAU;IACK,MAAM,EAAE,UAAU,CAAc;IAC/B,OAAO,UAAS;IAChC,KAAK,SAAM;IAE5B,OAAO,CAAC,iBAAiB,CAAK;IAExB,OAAO,CAAC,OAAO,CAAmB;IAEjD,OAAO,CAAC,cAAc,CAA4B;IAElD,OAAO,KAAK,MAAM,GAEjB;IAED,MAAM,CAAC,MAAM,4BAqIX;IAEO,iBAAiB,SAMzB;IAEQ,oBAAoB,SAM5B;IAEQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAGvD;IAED,OAAO,CAAC,kBAAkB;IAmD1B,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,qBAAqB;YAQf,uBAAuB;IAiFrC,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,gBAAgB;YAkCV,aAAa;IA6B3B,MAAM,yCAsFL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/form/form.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { LitElement, html, css } from "lit";
-import { customElement, property, state, queryAssignedElements, query } from "lit/decorators.js";
+import { customElement, property, state, query } from "lit/decorators.js";
 import { resetStyles } from "../../styles/reset.js";
 let StForm = class StForm extends LitElement {
     constructor() {
@@ -14,41 +14,151 @@ let StForm = class StForm extends LitElement {
         this.loading = false;
         this.error = "";
         this._currentStepIndex = 0;
+        this._modalFooterEl = null;
     }
-    _handleSlotChange() {
-        if (this._stepElements.length > 0) {
+    get _steps() {
+        return Array.from(this.querySelectorAll("st-form-step"));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.updateComplete.then(() => {
             this._updateStepVisibility();
+            this._updateModalFooter();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._modalFooterEl) {
+            this._modalFooterEl.remove();
+            this._modalFooterEl = null;
         }
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this._updateModalFooter();
+    }
+    _updateModalFooter() {
+        const modal = this.closest("st-modal");
+        if (modal) {
+            if (!this._modalFooterEl) {
+                this._modalFooterEl = document.createElement("div");
+                this._modalFooterEl.setAttribute("slot", "footer");
+                this._modalFooterEl.style.display = "flex";
+                this._modalFooterEl.style.gap = "var(--st-spacing-md)";
+                this._modalFooterEl.style.width = "100%";
+                this._modalFooterEl.style.justifyContent = "flex-end";
+                this._modalFooterEl.style.alignItems = "center";
+                modal.appendChild(this._modalFooterEl);
+            }
+            const steps = this._steps;
+            const hasSteps = steps.length > 0;
+            const isLastStep = hasSteps ? this._currentStepIndex === steps.length - 1 : true;
+            // Imperative DOM management prevents event listener loss and re-rendering conflicts
+            this._modalFooterEl.innerHTML = "";
+            if (hasSteps && this._currentStepIndex > 0) {
+                const backBtn = document.createElement("st-button");
+                backBtn.setAttribute("variant", "secondary");
+                backBtn.setAttribute("type", "button");
+                if (this.loading)
+                    backBtn.setAttribute("disabled", "");
+                backBtn.textContent = "Back";
+                backBtn.addEventListener("click", (e) => {
+                    e.preventDefault();
+                    this._prevStep();
+                });
+                this._modalFooterEl.appendChild(backBtn);
+            }
+            const submitBtn = document.createElement("st-button");
+            submitBtn.setAttribute("color", "primary");
+            submitBtn.setAttribute("type", "button");
+            if (this.loading)
+                submitBtn.setAttribute("disabled", "");
+            submitBtn.textContent = this.loading ? "Submitting..." : (isLastStep ? "Submit" : "Continue");
+            submitBtn.addEventListener("click", (e) => {
+                e.preventDefault();
+                this._triggerSubmission();
+            });
+            this._modalFooterEl.appendChild(submitBtn);
+        }
+        else if (this._modalFooterEl) {
+            this._modalFooterEl.remove();
+            this._modalFooterEl = null;
+        }
+    }
+    _handleSlotChange() {
+        this._updateStepVisibility();
+        this._updateModalFooter();
+    }
     _updateStepVisibility() {
-        this._stepElements.forEach((step, index) => {
+        const steps = this._steps;
+        steps.forEach((step, index) => {
             step.active = index === this._currentStepIndex;
         });
         this.requestUpdate();
     }
-    _validateCurrentContext() {
-        if (this._stepElements.length === 0) {
-            return this._formEl.checkValidity();
-        }
-        const currentStep = this._stepElements[this._currentStepIndex];
+    async _validateCurrentContext() {
+        const steps = this._steps;
+        const scope = steps.length > 0
+            ? steps[this._currentStepIndex]
+            : this;
         let isValid = true;
-        // Find all custom and native form inputs assigned to the current step
-        const inputs = Array.from(currentStep.querySelectorAll("*"));
+        const inputs = Array.from(scope.querySelectorAll("st-input, st-select, st-textarea, st-checkbox, st-radio, input, select, textarea"));
         for (const input of inputs) {
+            if (input.hasAttribute("disabled") || input.disabled)
+                continue;
+            let fieldValid = true;
             if (typeof input.checkValidity === "function") {
-                if (!input.checkValidity()) {
-                    // Focus and report on the first invalid element encountered
-                    if (isValid && typeof input.reportValidity === "function") {
-                        input.reportValidity();
+                fieldValid = input.checkValidity();
+            }
+            else {
+                const isRequired = input.hasAttribute("required") || input.required;
+                if (isRequired) {
+                    const isToggle = input.tagName === "ST-CHECKBOX" || input.tagName === "ST-RADIO";
+                    const val = isToggle ? input.checked : input.value;
+                    if (val === undefined || val === null || val === "" || val === false) {
+                        fieldValid = false;
                     }
+                }
+            }
+            if (!fieldValid) {
+                if (typeof input.reportValidity === "function") {
+                    input.reportValidity();
+                }
+                else if ("invalid" in input) {
+                    input.invalid = true;
+                }
+                if (isValid && typeof input.focus === "function") {
+                    input.focus();
+                }
+                isValid = false;
+            }
+        }
+        if (steps.length === 0 && this._formEl) {
+            if (!this._formEl.checkValidity()) {
+                isValid = false;
+            }
+        }
+        if (isValid && steps.length > 0) {
+            const currentStep = steps[this._currentStepIndex];
+            if (typeof currentStep.validate === "function") {
+                try {
+                    this.loading = true;
+                    const stepPassed = await currentStep.validate();
+                    if (!stepPassed) {
+                        isValid = false;
+                    }
+                }
+                catch {
                     isValid = false;
                 }
+                finally {
+                    this.loading = false;
+                }
             }
         }
         return isValid;
     }
     _triggerSubmission() {
-        // HTML5 method that triggers form validation and fires the native submit event
         this._formEl.requestSubmit();
     }
     _prevStep() {
@@ -59,10 +169,8 @@ let StForm = class StForm extends LitElement {
     }
     _extractFormData() {
         const formData = new FormData();
-        // Query all light-DOM children that have a 'name' attribute
         const fields = this.querySelectorAll("[name]");
         fields.forEach((field) => {
-            // Standard HTML form behavior: ignore disabled fields
             if (field.hasAttribute("disabled"))
                 return;
             const isToggle = field.tagName === "ST-RADIO" ||
@@ -70,7 +178,6 @@ let StForm = class StForm extends LitElement {
                 field.getAttribute("type") === "radio" ||
                 field.getAttribute("type") === "checkbox";
             if (isToggle) {
-                // Only append radios/checkboxes if they are actively checked
                 if (field.checked) {
                     formData.append(field.name, field.value || "on");
                 }
@@ -78,29 +185,28 @@ let StForm = class StForm extends LitElement {
             else if (field.tagName === "INPUT" &&
                 field.getAttribute("type") === "file" &&
                 field.files) {
-                // Handle native file uploads
                 Array.from(field.files).forEach((file) => formData.append(field.name, file));
             }
             else if (field.value !== undefined) {
-                // Handle st-input, st-select, st-textarea, and standard inputs
                 formData.append(field.name, field.value);
             }
         });
         return formData;
     }
-    _handleSubmit(e) {
+    async _handleSubmit(e) {
         e.preventDefault();
         e.stopPropagation();
-        if (!this._validateCurrentContext())
+        const isValid = await this._validateCurrentContext();
+        if (!isValid)
             return;
-        const hasSteps = this._stepElements.length > 0;
-        const isLastStep = hasSteps ? this._currentStepIndex === this._stepElements.length - 1 : true;
+        const steps = this._steps;
+        const hasSteps = steps.length > 0;
+        const isLastStep = hasSteps ? this._currentStepIndex === steps.length - 1 : true;
         if (hasSteps && !isLastStep) {
             this._currentStepIndex++;
             this._updateStepVisibility();
             return;
         }
-        // Use our custom extractor to pierce the Shadow DOM boundary
         const formData = this._extractFormData();
         this.dispatchEvent(new CustomEvent("submit", {
             bubbles: true,
@@ -110,8 +216,9 @@ let StForm = class StForm extends LitElement {
         }));
     }
     render() {
-        const hasSteps = this._stepElements?.length > 0;
-        const isLastStep = hasSteps ? this._currentStepIndex === this._stepElements.length - 1 : true;
+        const steps = this._steps;
+        const hasSteps = steps.length > 0;
+        const isInModal = !!this.closest("st-modal");
         return html `
       <div class="${hasSteps ? "has-steps" : ""}" aria-busy=${this.loading}>
         ${this.loading
@@ -124,7 +231,7 @@ let StForm = class StForm extends LitElement {
         ${hasSteps
             ? html `
               <div class="progress-nav" role="tablist">
-                ${this._stepElements.map((step, index) => {
+                ${steps.map((step, index) => {
                 const isActive = index === this._currentStepIndex;
                 const isCompleted = index < this._currentStepIndex;
                 return html `
@@ -142,7 +249,7 @@ let StForm = class StForm extends LitElement {
                       </div>
                       <span>${step.title || `Step ${index + 1}`}</span>
                     </div>
-                    ${index < this._stepElements.length - 1
+                    ${index < steps.length - 1
                     ? html ` <div class="step-connector ${isCompleted ? "completed" : ""}"></div> `
                     : ""}
                   `;
@@ -162,30 +269,33 @@ let StForm = class StForm extends LitElement {
         <form @submit=${this._handleSubmit}>
           <slot @slotchange=${this._handleSlotChange}></slot>
 
-          <div class="form-actions">
-            ${hasSteps && this._currentStepIndex > 0
+          ${!isInModal
             ? html `
+                <div class="form-actions">
+                  ${hasSteps && this._currentStepIndex > 0
+                ? html `
+                        <st-button
+                          variant="secondary"
+                          type="button"
+                          @click=${this._prevStep}
+                          ?disabled=${this.loading}
+                        >
+                          Back
+                        </st-button>
+                      `
+                : ""}
+
                   <st-button
-                    variant="secondary"
+                    color="primary"
                     type="button"
-                    @click=${this._prevStep}
+                    @click=${this._triggerSubmission}
                     ?disabled=${this.loading}
                   >
-                    Back
+                    ${this.loading ? "Submitting..." : hasSteps && this._currentStepIndex === steps.length - 1 ? "Submit" : hasSteps ? "Continue" : "Submit"}
                   </st-button>
-                `
+                </div>
+              `
             : ""}
-
-            <!-- Type is "button", but click triggers requestSubmit() on the internal form -->
-            <st-button
-              color="primary"
-              type="button"
-              @click=${this._triggerSubmission}
-              ?disabled=${this.loading}
-            >
-              ${this.loading ? "Submitting..." : isLastStep ? "Submit" : "Continue"}
-            </st-button>
-          </div>
         </form>
       </div>
     `;
@@ -204,9 +314,6 @@ StForm.styles = [
         gap: var(--st-spacing-md);
       }
 
-      /* ==========================================================
-         Layouts
-         ========================================================== */
       :host([layout="vertical"]) form {
         flex-direction: column;
       }
@@ -228,9 +335,6 @@ StForm.styles = [
         flex-direction: column;
       }
 
-      /* ==========================================================
-         Progress Navigation
-         ========================================================== */
       .progress-nav {
         display: flex;
         align-items: center;
@@ -294,9 +398,6 @@ StForm.styles = [
         background-color: var(--st-color-success);
       }
 
-      /* ==========================================================
-         Actions & States
-         ========================================================== */
       .form-actions {
         display: flex;
         gap: var(--st-spacing-md);
@@ -346,9 +447,6 @@ __decorate([
 __decorate([
     state()
 ], StForm.prototype, "_currentStepIndex", void 0);
-__decorate([
-    queryAssignedElements({ selector: "st-form-step" })
-], StForm.prototype, "_stepElements", void 0);
 __decorate([
     query("form")
 ], StForm.prototype, "_formEl", void 0);

package/dist/components/icon/icon-paths.d.ts

@@ -111,6 +111,22 @@ export declare const iconPaths: {
         outline: import("lit-html").TemplateResult<2>;
         solid: import("lit-html").TemplateResult<2>;
     };
+    calender: {
+        outline: import("lit-html").TemplateResult<2>;
+        solid: import("lit-html").TemplateResult<2>;
+    };
+    user: {
+        outline: import("lit-html").TemplateResult<2>;
+        solid: import("lit-html").TemplateResult<2>;
+    };
+    home: {
+        outline: import("lit-html").TemplateResult<2>;
+        solid: import("lit-html").TemplateResult<2>;
+    };
+    "circle-cross": {
+        outline: import("lit-html").TemplateResult<2>;
+        solid: import("lit-html").TemplateResult<2>;
+    };
 };
 export type IconName = keyof typeof iconPaths;
 //# sourceMappingURL=icon-paths.d.ts.map

package/dist/components/icon/icon-paths.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-paths.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon-paths.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;IACpB,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,iBAAiB;QACf,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,GAAG;QACD,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QAIP,KAAK;;IAKP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,KAAK;QACH,OAAO;QACP,KAAK;;IAEP,WAAW;QACT,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,sBAAsB;QACpB,OAAO;QACP,KAAK;;IAEP,wBAAwB;QACtB,OAAO;QACP,KAAK;;IAEP,kBAAkB;QAChB,OAAO;QACP,KAAK;;IAEP,qBAAqB;QACnB,OAAO;QACP,KAAK;;CAER,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC"}
+{"version":3,"file":"icon-paths.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon-paths.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;IACpB,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,iBAAiB;QACf,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,GAAG;QACD,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QAIP,KAAK;;IAKP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,KAAK;QACH,OAAO;QACP,KAAK;;IAEP,WAAW;QACT,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,sBAAsB;QACpB,OAAO;QACP,KAAK;;IAEP,wBAAwB;QACtB,OAAO;QACP,KAAK;;IAEP,kBAAkB;QAChB,OAAO;QACP,KAAK;;IAEP,qBAAqB;QACnB,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,cAAc;QACZ,OAAO;QACP,KAAK;;CAER,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC"}

package/dist/components/icon/icon-paths.js

@@ -118,4 +118,20 @@ export const iconPaths = {
         outline: svg `<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2" fill="none"></rect><line x1="3" y1="8" x2="21" y2="8" stroke="currentColor" stroke-width="2"></line><line x1="7" y1="8" x2="7" y2="21" stroke="currentColor" stroke-width="2"></line><line x1="17" y1="8" x2="17" y2="21" stroke="currentColor" stroke-width="2"></line><line x1="10" y1="14" x2="14" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line>`,
         solid: svg `<path fill="currentColor" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5zm2 3h14V5H5v3zM7 9H3v12h4V9zm14 0h-4v12h4V9z"></path>`,
     },
+    calender: {
+        outline: svg `<rect x="3" y="4" width="18" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></rect><line x1="16" y1="2" x2="16" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line><line x1="8" y1="2" x2="8" y2="6" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line><line x1="3" y1="10" x2="21" y2="10" stroke="currentColor" stroke-width="2"></line>`,
+        solid: svg `<path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14v11z"></path>`,
+    },
+    user: {
+        outline: svg `<circle cx="12" cy="8" r="4" fill="none" stroke="currentColor" stroke-width="2"></circle><path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>`,
+        solid: svg `<path fill="currentColor" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-3.33 0-10 1.67-10 5v3h20v-3c0-3.33-6.67-5-10-5z"></path>`,
+    },
+    home: {
+        outline: svg `<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><polyline points="9 22 9 12 15 12 15 22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>`,
+        solid: svg `<path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>`,
+    },
+    "circle-cross": {
+        outline: svg `<circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle><line x1="15" y1="9" x2="9" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line><line x1="9" y1="9" x2="15" y2="15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></line>`,
+        solid: svg `<path fill="currentColor" fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm3.36 6.64a1 1 0 0 1 0 1.41L13.41 12l1.95 1.95a1 1 0 0 1-1.41 1.41L12 13.41l-1.95 1.95a1 1 0 0 1-1.41-1.41L10.59 12 8.64 10.05a1 1 0 0 1 1.41-1.41L12 10.59l1.95-1.95a1 1 0 0 1 1.41 0z" clip-rule="evenodd"></path>`,
+    },
 };