@sondor-technology/sondor-components 1.0.2 → 1.0.4

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`
@@ -31,9 +34,6 @@ export class StForm extends LitElement {
         gap: var(--st-spacing-md);
       }
 
-      /* ==========================================================
-         Layouts
-         ========================================================== */
       :host([layout="vertical"]) form {
         flex-direction: column;
       }
@@ -55,9 +55,6 @@ export class StForm extends LitElement {
         flex-direction: column;
       }
 
-      /* ==========================================================
-         Progress Navigation
-         ========================================================== */
       .progress-nav {
         display: flex;
         align-items: center;
@@ -121,9 +118,6 @@ export class StForm extends LitElement {
         background-color: var(--st-color-success);
       }
 
-      /* ==========================================================
-         Actions & States
-         ========================================================== */
       .form-actions {
         display: flex;
         gap: var(--st-spacing-md);
@@ -162,42 +156,165 @@ 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 _validateCurrentContext(): boolean {
-    if (this._stepElements.length === 0) {
-      return this._formEl.checkValidity();
-    }
+  private async _validateCurrentContext(): Promise<boolean> {
+    const steps = this._steps;
+    const scope: ParentNode = steps.length > 0
+      ? steps[this._currentStepIndex]
+      : this;
 
-    const currentStep = this._stepElements[this._currentStepIndex];
     let isValid = true;
 
-    // Find all custom and native form inputs assigned to the current step
     const inputs = Array.from(
-      currentStep.querySelectorAll<
-        HTMLElement & {checkValidity?: () => boolean; reportValidity?: () => void}
-      >("*"),
+      scope.querySelectorAll<
+        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()) {
-          // 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 as any).focus === "function") {
+          (input as any).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] as StFormStep & {
+        validate?: () => Promise<boolean> | boolean;
+      };
+
+      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;
         }
       }
     }
@@ -206,7 +323,6 @@ export class StForm extends LitElement {
   }
 
   private _triggerSubmission() {
-    // HTML5 method that triggers form validation and fires the native submit event
     this._formEl.requestSubmit();
   }
 
@@ -220,13 +336,11 @@ export class StForm extends LitElement {
   private _extractFormData(): FormData {
     const formData = new FormData();
 
-    // Query all light-DOM children that have a 'name' attribute
     const fields = this.querySelectorAll<
       HTMLElement & {name: string; value: any; checked?: boolean; files?: FileList}
     >("[name]");
 
     fields.forEach((field) => {
-      // Standard HTML form behavior: ignore disabled fields
       if (field.hasAttribute("disabled")) return;
 
       const isToggle =
@@ -236,7 +350,6 @@ export class StForm extends LitElement {
         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");
         }
@@ -245,10 +358,8 @@ export class StForm extends LitElement {
         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);
       }
     });
@@ -256,14 +367,16 @@ export class StForm extends LitElement {
     return formData;
   }
 
-  private _handleSubmit(e: Event) {
+  private async _handleSubmit(e: Event) {
     e.preventDefault();
     e.stopPropagation();
 
-    if (!this._validateCurrentContext()) return;
+    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++;
@@ -271,7 +384,6 @@ export class StForm extends LitElement {
       return;
     }
 
-    // Use our custom extractor to pierce the Shadow DOM boundary
     const formData = this._extractFormData();
 
     this.dispatchEvent(
@@ -285,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}>
@@ -300,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;
 
@@ -319,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> `
                       : ""}
                   `;
@@ -339,30 +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>
-                `
-              : ""}
-
-            <!-- 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>
+                </div>
+              `
+            : ""}
         </form>
       </div>
     `;
@@ -373,4 +489,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-form": StForm;
   }
-}
+}

package/src/components/icon/icon-paths.ts

@@ -119,6 +119,22 @@ 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>`,
+  },
 };
 
 export type IconName = keyof typeof iconPaths;

package/src/components/icon/icon.ts

@@ -3,10 +3,12 @@ import { customElement, property } from 'lit/decorators.js';
 import { iconPaths, IconName } from './icon-paths.js';
 import { resetStyles } from '../../styles/reset.js';
 
+export type IconVariant = 'outline' | 'solid';
+
 @customElement('st-icon')
 export class StIcon extends LitElement {
   @property({ type: String }) name: IconName | string = '';
-  @property({ type: String }) variant: 'outline' | 'solid' = 'outline';
+  @property({ type: String }) variant: IconVariant = 'outline';
   
   // Semantic Colors
   @property({ type: String, reflect: true }) color: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' = 'default';

package/src/components/modal/modal.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css, PropertyValues } from 'lit';
+import { LitElement, html, css, PropertyValues, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
 
@@ -14,8 +14,20 @@ export class StModal extends LitElement {
    */
   @property({ type: String }) heading = '';
 
+  /**
+   * Size of the modal (sm, md, lg, xl, xxl).
+   */
+  @property({ type: String }) size: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' = 'md';
+
+  /**
+   * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
+   */
+  @property({ type: Boolean }) static = false;
+
   @query('dialog') private dialogEl!: HTMLDialogElement;
 
+  private isClosing = false;
+
   static styles = [
     resetStyles,
     css`
@@ -29,17 +41,59 @@ export class StModal extends LitElement {
         border-radius: var(--st-radius-lg, 0.5rem);
         background-color: var(--st-color-surface);
         color: var(--st-color-text);
-        width: 100%;
-        max-width: 500px;
+        
+        /* Responsive width calculation */
+        width: calc(100% - 2rem);
+        margin: auto;
+        
         box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
         font-family: var(--st-font-family, inherit);
       }
 
+      /* Sizes */
+      dialog.size-sm { max-width: 400px; }
+      dialog.size-md { max-width: 500px; }
+      dialog.size-lg { max-width: 800px; }
+      dialog.size-xl { max-width: 1024px; }
+      dialog.size-xxl { max-width: 1280px; }
+
       dialog::backdrop {
         background-color: rgba(0, 0, 0, 0.5);
         backdrop-filter: blur(2px);
       }
 
+      /* Animations */
+      @keyframes fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      @keyframes fade-out {
+        from { opacity: 1; }
+        to { opacity: 0; }
+      }
+      @keyframes slide-up {
+        from { opacity: 0; transform: translateY(20px) scale(0.95); }
+        to { opacity: 1; transform: translateY(0) scale(1); }
+      }
+      @keyframes slide-down {
+        from { opacity: 1; transform: translateY(0) scale(1); }
+        to { opacity: 0; transform: translateY(20px) scale(0.95); }
+      }
+
+      dialog[open] {
+        animation: slide-up 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      dialog[open]::backdrop {
+        animation: fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      
+      dialog.closing {
+        animation: slide-down 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+      dialog.closing::backdrop {
+        animation: fade-out 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+      }
+
       .modal-header {
         display: flex;
         align-items: center;
@@ -92,21 +146,47 @@ export class StModal extends LitElement {
 
   updated(changedProperties: PropertyValues) {
     if (changedProperties.has('open')) {
-      if (this.dialogEl) {
-        if (this.open && !this.dialogEl.open) {
+      if (this.open) {
+        this.dialogEl.classList.remove('closing');
+        this.isClosing = false;
+        if (!this.dialogEl.open) {
           this.dialogEl.showModal();
-        } else if (!this.open && this.dialogEl.open) {
-          this.dialogEl.close();
         }
+      } else if (this.dialogEl.open && !this.isClosing) {
+        this.closeWithAnimation();
       }
     }
   }
 
+  private closeWithAnimation() {
+    if (this.isClosing) return;
+    this.isClosing = true;
+    this.dialogEl.classList.add('closing');
+    
+    const onAnimationEnd = () => {
+      this.dialogEl.removeEventListener('animationend', onAnimationEnd);
+      this.dialogEl.classList.remove('closing');
+      this.isClosing = false;
+      if (!this.open) {
+        this.dialogEl.close();
+      }
+    };
+    
+    this.dialogEl.addEventListener('animationend', onAnimationEnd);
+  }
+
   private handleClose() {
     this.open = false;
     this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
   }
 
+  private handleCancel(e: Event) {
+    e.preventDefault(); 
+    if (!this.static) {
+      this.handleClose();
+    }
+  }
+
   private onDialogClose() {
     if (this.open) {
       this.open = false;
@@ -115,13 +195,16 @@ export class StModal extends LitElement {
   }
 
   private handleBackdropClick(e: MouseEvent) {
+    if (this.static) return;
+
     const rect = this.dialogEl.getBoundingClientRect();
-    if (
+    const clickedOutside = 
       e.clientX < rect.left ||
       e.clientX > rect.right ||
       e.clientY < rect.top ||
-      e.clientY > rect.bottom
-    ) {
+      e.clientY > rect.bottom;
+
+    if (clickedOutside) {
       this.handleClose();
     }
   }
@@ -129,17 +212,22 @@ export class StModal extends LitElement {
   render() {
     return html`
       <dialog 
-        @cancel=${this.handleClose} 
+        class="size-${this.size}"
+        aria-labelledby=${this.heading ? 'modal-heading' : nothing}
+        @cancel=${this.handleCancel} 
         @click=${this.handleBackdropClick} 
         @close=${this.onDialogClose}
       >
         <div class="modal-header" @click=${(e: MouseEvent) => e.stopPropagation()}>
           <slot name="header">
-            <h3 class="modal-title">${this.heading}</h3>
+            <h3 class="modal-title" id="modal-heading">${this.heading}</h3>
           </slot>
-          <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-          </button>
+          
+          ${!this.static ? html`
+            <button class="close-btn" @click=${this.handleClose} aria-label="Close modal">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+          ` : nothing}
         </div>
         <div class="modal-body" @click=${(e: MouseEvent) => e.stopPropagation()}>
           <slot></slot>