@sondor-technology/sondor-components 1.0.1-develop.10 → 1.0.1-develop.12

package/dist/styles/index.css

@@ -69,6 +69,8 @@
 :root[data-theme=light] {
   --st-color-bg: var(--st-white);
   --st-color-surface: var(--st-gray-50);
+  --st-color-surface-muted: color-mix(in srgb, var(--st-color-surface), black 15%);
+  --st-color-surface-hover: color-mix(in srgb, var(--st-color-surface), white 10%);
   --st-color-border: var(--st-gray-200);
   --st-color-text: var(--st-gray-900);
   --st-color-text-muted: var(--st-gray-700);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sondor-technology/sondor-components",
-  "version": "1.0.1-develop.10",
+  "version": "1.0.1-develop.12",
   "description": "",
   "main": "src/index.js",
   "types": "dist/index.d.ts",

package/src/components/button-group/button-group.ts

@@ -65,3 +65,9 @@ export class StButtonGroup extends LitElement {
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-button-group": StButtonGroup;
+  }
+}

package/src/components/code-block/code-block.ts

@@ -254,4 +254,10 @@ export class StCodeBlock extends LitElement {
       </div>
     `;
   }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-code-block": StCodeBlock;
+  }
 }

package/src/components/form/form-step.ts

@@ -6,6 +6,10 @@ import {resetStyles} from "../../styles/reset.js";
 export class StFormStep extends LitElement {
   @property({type: String}) title = "";
   @property({type: Boolean, reflect: true}) active = false;
+  
+  // Declare the validate function property (attribute: false prevents reflection of functions to DOM attributes)
+  @property({attribute: false})
+  validate?: () => Promise<boolean> | boolean;
 
   static styles = [
     resetStyles,
@@ -29,4 +33,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-form-step": StFormStep;
   }
-}
+}

package/src/components/form/form.ts

@@ -1,5 +1,5 @@
-import {LitElement, html, css} from "lit";
-import {customElement, property, state, queryAssignedElements, query} from "lit/decorators.js";
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, state, query} from "lit/decorators.js";
 import {resetStyles} from "../../styles/reset.js";
 import type {StFormStep} from "./form-step.js";
 
@@ -13,11 +13,14 @@ export class StForm extends LitElement {
 
   @state() private _currentStepIndex = 0;
 
-  @queryAssignedElements({selector: "st-form-step"})
-  private _stepElements!: StFormStep[];
-
   @query("form") private _formEl!: HTMLFormElement;
 
+  private _modalFooterEl: HTMLElement | null = null;
+
+  private get _steps(): StFormStep[] {
+    return Array.from(this.querySelectorAll("st-form-step"));
+  }
+
   static styles = [
     resetStyles,
     css`
@@ -153,53 +156,151 @@ export class StForm extends LitElement {
     `,
   ];
 
-  private _handleSlotChange() {
-    if (this._stepElements.length > 0) {
+  override connectedCallback() {
+    super.connectedCallback();
+    this.updateComplete.then(() => {
       this._updateStepVisibility();
+      this._updateModalFooter();
+    });
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._modalFooterEl) {
+      this._modalFooterEl.remove();
+      this._modalFooterEl = null;
+    }
+  }
+
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+    this._updateModalFooter();
+  }
+
+  private _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;
     }
   }
 
+  private _handleSlotChange() {
+    this._updateStepVisibility();
+    this._updateModalFooter();
+  }
+
   private _updateStepVisibility() {
-    this._stepElements.forEach((step, index) => {
+    const steps = this._steps;
+    steps.forEach((step, index) => {
       step.active = index === this._currentStepIndex;
     });
     this.requestUpdate();
   }
 
   private async _validateCurrentContext(): Promise<boolean> {
-    const scope: ParentNode = this._stepElements.length > 0
-      ? this._stepElements[this._currentStepIndex]
+    const steps = this._steps;
+    const scope: ParentNode = steps.length > 0
+      ? steps[this._currentStepIndex]
       : this;
 
     let isValid = true;
 
-    // 1. Validate standard DOM input components
     const inputs = Array.from(
       scope.querySelectorAll<
-        HTMLElement & {checkValidity?: () => boolean; reportValidity?: () => boolean}
-      >("*"),
+        HTMLElement & {
+          checkValidity?: () => boolean;
+          reportValidity?: () => boolean;
+          required?: boolean;
+          value?: any;
+          checked?: boolean;
+          invalid?: boolean;
+        }
+      >("st-input, st-select, st-textarea, st-checkbox, st-radio, input, select, textarea"),
     );
     
     for (const input of inputs) {
+      if (input.hasAttribute("disabled") || (input as any).disabled) continue;
+
+      let fieldValid = true;
+
       if (typeof input.checkValidity === "function") {
-        if (!input.checkValidity()) {
-          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;
           }
-          isValid = false;
         }
       }
+
+      if (!fieldValid) {
+        if (typeof input.reportValidity === "function") {
+          input.reportValidity();
+        } else if ("invalid" in input) {
+          input.invalid = true;
+        }
+        if (isValid && typeof (input as any).focus === "function") {
+          (input as any).focus();
+        }
+        isValid = false;
+      }
     }
 
-    if (this._stepElements.length === 0 && this._formEl) {
+    if (steps.length === 0 && this._formEl) {
       if (!this._formEl.checkValidity()) {
         isValid = false;
       }
     }
 
-    // 2. Execute step-level async/sync validation hook if defined
-    if (isValid && this._stepElements.length > 0) {
-      const currentStep = this._stepElements[this._currentStepIndex] as StFormStep & {
+    if (isValid && steps.length > 0) {
+      const currentStep = steps[this._currentStepIndex] as StFormStep & {
         validate?: () => Promise<boolean> | boolean;
       };
 
@@ -210,7 +311,7 @@ export class StForm extends LitElement {
           if (!stepPassed) {
             isValid = false;
           }
-        } catch (err) {
+        } catch {
           isValid = false;
         } finally {
           this.loading = false;
@@ -273,8 +374,9 @@ export class StForm extends LitElement {
     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++;
@@ -295,8 +397,9 @@ export 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}>
@@ -310,7 +413,7 @@ export 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;
 
@@ -329,7 +432,7 @@ export 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> `
                       : ""}
                   `;
@@ -349,29 +452,33 @@ export class StForm extends LitElement {
         <form @submit=${this._handleSubmit}>
           <slot @slotchange=${this._handleSlotChange}></slot>
 
-          <div class="form-actions">
-            ${hasSteps && this._currentStepIndex > 0
-              ? html`
+          ${!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>
-                `
-              : ""}
-
-            <st-button
-              color="primary"
-              type="button"
-              @click=${this._triggerSubmission}
-              ?disabled=${this.loading}
-            >
-              ${this.loading ? "Submitting..." : isLastStep ? "Submit" : "Continue"}
-            </st-button>
-          </div>
+                </div>
+              `
+            : ""}
         </form>
       </div>
     `;

package/src/components/input/input.ts

@@ -246,3 +246,9 @@ export class StInput extends LitElement {
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-input": StInput;
+  }
+}

package/src/components/page-layout/page-layout.ts

@@ -153,7 +153,7 @@ export class StPageLayout extends LitElement {
         --layout-surface-color: var(--st-color-surface, #f8fafc);
         --layout-border-color: var(--st-color-border, #e2e8f0);
         --layout-sidebar-width: 16rem;
-        --layout-right-sidebar-width: 14rem;
+        --layout-right-sidebar-width: 16rem;
         --layout-main-max-width: none;
         --layout-nav-height: 4rem;
       }