@sondor-technology/sondor-components 1.0.1-develop.13 → 1.0.1-develop.14

package/src/components/drawer/drawer.ts

@@ -1,14 +1,14 @@
-import { LitElement, html, css, nothing } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
 
-export type DrawerPlacement = 'left' | 'right';
+export type DrawerPlacement = "left" | "right";
 
-@customElement('st-drawer')
+@customElement("st-drawer")
 export class StDrawer extends LitElement {
-  @property({ type: Boolean, reflect: true }) open = false;
-  @property({ type: String, reflect: true }) placement: DrawerPlacement = 'left';
-  @property({ type: Boolean, attribute: 'mobile-only', reflect: true }) mobileOnly = false;
+  @property({type: Boolean, reflect: true}) open = false;
+  @property({type: String, reflect: true}) placement: DrawerPlacement = "left";
+  @property({type: Boolean, attribute: "mobile-only", reflect: true}) mobileOnly = false;
 
   private _touchStartX = 0;
   private _currentTranslateX = 0;
@@ -24,6 +24,7 @@ export class StDrawer extends LitElement {
       :host([mobile-only]) {
         display: block;
       }
+
       @media (min-width: 768px) {
         :host([mobile-only]) {
           display: none !important;
@@ -41,12 +42,17 @@ export class StDrawer extends LitElement {
         z-index: 1000;
         display: flex;
         opacity: 0;
+        /* Delay visibility hidden until opacity finishes transitioning */
+        visibility: hidden;
         pointer-events: none;
-        transition: opacity 0.25s ease-in-out;
+        transition:
+          opacity 0.25s ease-in-out,
+          visibility 0.25s;
       }
 
       :host([open]) .overlay {
         opacity: 1;
+        visibility: visible;
         pointer-events: auto;
       }
 
@@ -54,18 +60,28 @@ export class StDrawer extends LitElement {
         position: fixed;
         top: 0;
         bottom: 0;
-        width: auto;
+        width: var(--st-drawer-width, 320px);
         max-width: 90vw;
         background-color: var(--st-color-surface, #ffffff);
-        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
         display: flex;
         flex-direction: column;
         z-index: 1001;
         overflow-y: auto;
-        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+        visibility: hidden;
+        /* Remove box shadow when closed to prevent viewport bleeding */
+        box-shadow: none;
+        transition:
+          transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+          visibility 0.3s,
+          box-shadow 0.3s;
         touch-action: pan-y;
       }
 
+      :host([open]) .panel {
+        visibility: visible;
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+      }
+
       /* Slide from Left */
       :host([placement="left"]) .panel {
         left: 0;
@@ -131,35 +147,63 @@ export class StDrawer extends LitElement {
         padding: var(--st-spacing-lg);
         flex: 1;
       }
-    `
+    `,
   ];
 
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+
+    // Manage side-effects when the drawer opens or closes
+    if (changedProperties.has("open")) {
+      if (this.open) {
+        document.addEventListener("keydown", this._handleKeyDown);
+        document.body.style.overflow = "hidden"; // Lock background scroll
+      } else {
+        document.removeEventListener("keydown", this._handleKeyDown);
+        document.body.style.overflow = ""; // Restore background scroll
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    // Safety cleanup in case the component is destroyed while open
+    document.removeEventListener("keydown", this._handleKeyDown);
+    document.body.style.overflow = "";
+  }
+
+  private _handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Escape" && this.open) {
+      this._close();
+    }
+  };
+
   private _close() {
     this.open = false;
-    const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;
-    if (panel) panel.style.transform = '';
-    this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
+    const panel = this.shadowRoot?.querySelector(".panel") as HTMLElement;
+    if (panel) panel.style.transform = "";
+    this.dispatchEvent(new CustomEvent("st-close", {bubbles: true, composed: true}));
   }
 
   private _handleTouchStart(e: TouchEvent) {
     this._touchStartX = e.touches[0].clientX;
     this._isDragging = true;
-    const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;
-    if (panel) panel.style.transition = 'none';
+    const panel = this.shadowRoot?.querySelector(".panel") as HTMLElement;
+    if (panel) panel.style.transition = "none"; // Disable animation for 1:1 finger tracking
   }
 
   private _handleTouchMove(e: TouchEvent) {
     if (!this._isDragging) return;
     const currentX = e.touches[0].clientX;
     const diff = currentX - this._touchStartX;
-    const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;
+    const panel = this.shadowRoot?.querySelector(".panel") as HTMLElement;
 
     if (!panel) return;
 
-    if (this.placement === 'left' && diff < 0) {
+    if (this.placement === "left" && diff < 0) {
       this._currentTranslateX = diff;
       panel.style.transform = `translateX(${diff}px)`;
-    } else if (this.placement === 'right' && diff > 0) {
+    } else if (this.placement === "right" && diff > 0) {
       this._currentTranslateX = diff;
       panel.style.transform = `translateX(${diff}px)`;
     }
@@ -168,37 +212,38 @@ export class StDrawer extends LitElement {
   private _handleTouchEnd() {
     if (!this._isDragging) return;
     this._isDragging = false;
-    const panel = this.shadowRoot?.querySelector('.panel') as HTMLElement;
-    if (panel) panel.style.transition = '';
+    const panel = this.shadowRoot?.querySelector(".panel") as HTMLElement;
+    if (panel) panel.style.transition = ""; // Restore CSS animations
 
     const threshold = 70;
     if (
-      (this.placement === 'left' && this._currentTranslateX < -threshold) ||
-      (this.placement === 'right' && this._currentTranslateX > threshold)
+      (this.placement === "left" && this._currentTranslateX < -threshold) ||
+      (this.placement === "right" && this._currentTranslateX > threshold)
     ) {
       this._close();
     } else if (panel) {
-      panel.style.transform = '';
+      // Snap back if swipe wasn't far enough
+      panel.style.transform = "";
     }
     this._currentTranslateX = 0;
   }
 
   render() {
-    if (!this.open) return nothing;
-
     return html`
       <div class="overlay" @click=${this._close}></div>
-      <div 
-        class="panel" 
-        role="dialog" 
+      <div
+        class="panel"
+        role="dialog"
         aria-modal="true"
+        aria-labelledby="drawer-title"
         @click=${(e: Event) => e.stopPropagation()}
         @touchstart=${this._handleTouchStart}
         @touchmove=${this._handleTouchMove}
         @touchend=${this._handleTouchEnd}
       >
         <div class="header">
-          <span class="title"><slot name="header">Menu</slot></span>
+          <!-- Added id="drawer-title" to link the slot content to the dialog name -->
+          <span class="title" id="drawer-title"><slot name="header">Menu</slot></span>
           <button class="close-btn" @click=${this._close} aria-label="Close Drawer">
             <svg viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"></path></svg>
           </button>
@@ -213,6 +258,6 @@ export class StDrawer extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-drawer': StDrawer;
+    "st-drawer": StDrawer;
   }
-}
+}

package/src/components/field/field.ts

@@ -1,8 +1,8 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
+import {LitElement, html, css} from "lit";
+import {customElement} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
 
-@customElement('st-field')
+@customElement("st-field")
 export class StField extends LitElement {
   static styles = [
     resetStyles,
@@ -12,20 +12,18 @@ export class StField extends LitElement {
         flex-direction: column;
         gap: var(--st-spacing-xs, 0.25rem);
         width: 100%;
-        margin-bottom: var(--st-spacing-md, 0.25rem);
+        margin-bottom: var(--st-spacing-md, 1rem);
       }
-    `
+    `,
   ];
 
   render() {
-    return html`
-      <slot></slot>
-    `;
+    return html` <slot></slot> `;
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'st-field': StField;
+    "st-field": StField;
   }
-}
+}

package/src/components/footer/footer.ts

@@ -1,9 +1,11 @@
-import {LitElement, html, css} from "lit";
-import {customElement} from "lit/decorators.js";
-import {resetStyles} from "../../styles/reset";
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
 
-@customElement("st-footer")
+@customElement('st-footer')
 export class StFooter extends LitElement {
+  @property({ type: String }) company = 'Sondor';
+
   static styles = [
     resetStyles,
     css`
@@ -12,10 +14,11 @@ export class StFooter extends LitElement {
         border-top: 1px solid var(--st-color-border);
         background-color: var(--st-color-surface);
         padding: var(--st-spacing-lg, 2rem) 0;
-        margin-top: auto; /* Pushes footer to the bottom of the page */
+        margin-top: auto;
       }
 
-      footer {
+      /* 🚀 Changed from 'footer' to a class */
+      .footer-container {
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -27,10 +30,15 @@ export class StFooter extends LitElement {
         font-size: 0.875rem;
       }
 
-      /* Wrapper for footer links */
       .links {
         display: flex;
         gap: var(--st-spacing-md, 1rem);
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+
+      .copyright {
+        text-align: center;
       }
 
       ::slotted(a) {
@@ -42,17 +50,40 @@ export class StFooter extends LitElement {
       ::slotted(a:hover) {
         color: var(--st-color-primary);
       }
-    `,
+      
+      ::slotted(a:focus-visible) {
+        color: var(--st-color-primary);
+        outline: 2px solid var(--st-color-primary);
+        outline-offset: 4px;
+        border-radius: 2px;
+      }
+    `
   ];
 
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'contentinfo');
+    }
+  }
+
   render() {
     return html`
-      <footer>
-        <slot></slot>
+      <!-- 🚀 Changed to a standard div to avoid duplicate landmarks -->
+      <div class="footer-container">
         <div class="links">
-          <span>&copy; ${new Date().getFullYear()} Sondor.</span>
+          <slot></slot>
+        </div>
+        <div class="copyright">
+          <span>&copy; ${new Date().getFullYear()} ${this.company}.</span>
         </div>
-      </footer>
+      </div>
     `;
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-footer': StFooter;
+  }
+}

package/src/components/form/form.ts

@@ -16,6 +16,8 @@ export class StForm extends LitElement {
   @query("form") private _formEl!: HTMLFormElement;
 
   private _modalFooterEl: HTMLElement | null = null;
+  private _modalBackBtn: HTMLElement | null = null;
+  private _modalSubmitBtn: HTMLElement | null = null;
 
   private get _steps(): StFormStep[] {
     return Array.from(this.querySelectorAll("st-form-step"));
@@ -55,15 +57,22 @@ export class StForm extends LitElement {
         flex-direction: column;
       }
 
+      /* Accessibility: Reset lists for the nav */
       .progress-nav {
-        display: flex;
-        align-items: center;
         margin-bottom: var(--st-spacing-xl);
         padding-bottom: var(--st-spacing-md);
         overflow-x: auto;
         scrollbar-width: none;
       }
 
+      .step-list {
+        display: flex;
+        align-items: center;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
       .step-indicator {
         display: flex;
         align-items: center;
@@ -158,6 +167,8 @@ export class StForm extends LitElement {
 
   override connectedCallback() {
     super.connectedCallback();
+    // Catch Enter key from Light DOM slotted elements
+    this.addEventListener("keydown", this._handleGlobalKeyDown);
     this.updateComplete.then(() => {
       this._updateStepVisibility();
       this._updateModalFooter();
@@ -166,6 +177,7 @@ export class StForm extends LitElement {
 
   override disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeEventListener("keydown", this._handleGlobalKeyDown);
     if (this._modalFooterEl) {
       this._modalFooterEl.remove();
       this._modalFooterEl = null;
@@ -177,54 +189,76 @@ export class StForm extends LitElement {
     this._updateModalFooter();
   }
 
+  private _handleGlobalKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "Enter") {
+      const target = e.target as HTMLElement;
+      // Allow multi-line typing in textareas
+      if (target.tagName !== "TEXTAREA" && target.tagName !== "ST-TEXTAREA") {
+        e.preventDefault();
+        this._triggerSubmission();
+      }
+    }
+  };
+
   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);
+    if (!modal) {
+      if (this._modalFooterEl) {
+        this._modalFooterEl.remove();
+        this._modalFooterEl = null;
       }
+      return;
+    }
 
-      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);
-      }
+    // Create the footer wrapper only once to prevent memory leaks
+    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";
+
+      this._modalBackBtn = document.createElement("st-button");
+      this._modalBackBtn.setAttribute("variant", "secondary");
+      this._modalBackBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._prevStep();
+      });
 
-      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) => {
+      this._modalSubmitBtn = document.createElement("st-button");
+      this._modalSubmitBtn.setAttribute("color", "primary");
+      this._modalSubmitBtn.addEventListener("click", (e) => {
         e.preventDefault();
         this._triggerSubmission();
       });
-      this._modalFooterEl.appendChild(submitBtn);
 
-    } else if (this._modalFooterEl) {
-      this._modalFooterEl.remove();
-      this._modalFooterEl = null;
+      this._modalFooterEl.appendChild(this._modalBackBtn);
+      this._modalFooterEl.appendChild(this._modalSubmitBtn);
+      modal.appendChild(this._modalFooterEl);
+    }
+
+    const steps = this._steps;
+    const hasSteps = steps.length > 0;
+    const isLastStep = hasSteps ? this._currentStepIndex === steps.length - 1 : true;
+
+    // Mutate existing elements instead of trashing the DOM
+    if (this._modalBackBtn) {
+      this._modalBackBtn.style.display = hasSteps && this._currentStepIndex > 0 ? "block" : "none";
+      if (this.loading) this._modalBackBtn.setAttribute("disabled", "");
+      else this._modalBackBtn.removeAttribute("disabled");
+      this._modalBackBtn.textContent = "Back";
+    }
+
+    if (this._modalSubmitBtn) {
+      if (this.loading) this._modalSubmitBtn.setAttribute("disabled", "");
+      else this._modalSubmitBtn.removeAttribute("disabled");
+      this._modalSubmitBtn.textContent = this.loading
+        ? "Submitting..."
+        : isLastStep
+          ? "Submit"
+          : "Continue";
     }
   }
 
@@ -243,12 +277,9 @@ export class StForm extends LitElement {
 
   private async _validateCurrentContext(): Promise<boolean> {
     const steps = this._steps;
-    const scope: ParentNode = steps.length > 0
-      ? steps[this._currentStepIndex]
-      : this;
+    const scope: ParentNode = steps.length > 0 ? steps[this._currentStepIndex] : this;
 
     let isValid = true;
-
     const inputs = Array.from(
       scope.querySelectorAll<
         HTMLElement & {
@@ -261,7 +292,7 @@ export class StForm extends LitElement {
         }
       >("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;
 
@@ -293,10 +324,9 @@ export class StForm extends LitElement {
       }
     }
 
-    if (steps.length === 0 && this._formEl) {
-      if (!this._formEl.checkValidity()) {
-        isValid = false;
-      }
+    // If there are no custom steps, ensure the native form validates as a fallback
+    if (steps.length === 0 && this._formEl && typeof this._formEl.checkValidity === "function") {
+      if (!this._formEl.checkValidity()) isValid = false;
     }
 
     if (isValid && steps.length > 0) {
@@ -308,9 +338,7 @@ export class StForm extends LitElement {
         try {
           this.loading = true;
           const stepPassed = await currentStep.validate();
-          if (!stepPassed) {
-            isValid = false;
-          }
+          if (!stepPassed) isValid = false;
         } catch {
           isValid = false;
         } finally {
@@ -335,7 +363,6 @@ export class StForm extends LitElement {
 
   private _extractFormData(): FormData {
     const formData = new FormData();
-
     const fields = this.querySelectorAll<
       HTMLElement & {name: string; value: any; checked?: boolean; files?: FileList}
     >("[name]");
@@ -412,38 +439,43 @@ export class StForm extends LitElement {
           : ""}
         ${hasSteps
           ? html`
-              <div class="progress-nav" role="tablist">
-                ${steps.map((step, index) => {
-                  const isActive = index === this._currentStepIndex;
-                  const isCompleted = index < this._currentStepIndex;
-
-                  return html`
-                    <div
-                      class="step-indicator ${isActive ? "active" : ""} ${isCompleted
-                        ? "completed"
-                        : ""}"
-                      role="tab"
-                      aria-selected=${isActive}
-                    >
-                      <div class="step-circle">
-                        ${isCompleted
-                          ? html`<st-icon name="check-circle" size="sm"></st-icon>`
-                          : html`${index + 1}`}
-                      </div>
-                      <span>${step.title || `Step ${index + 1}`}</span>
-                    </div>
-                    ${index < steps.length - 1
-                      ? html` <div class="step-connector ${isCompleted ? "completed" : ""}"></div> `
-                      : ""}
-                  `;
-                })}
-              </div>
+              <!-- Accessibility: Refactored to a semantic ordered list -->
+              <nav class="progress-nav" aria-label="Progress">
+                <ol class="step-list">
+                  ${steps.map((step, index) => {
+                    const isActive = index === this._currentStepIndex;
+                    const isCompleted = index < this._currentStepIndex;
+
+                    return html`
+                      <li
+                        class="step-indicator ${isActive ? "active" : ""} ${isCompleted
+                          ? "completed"
+                          : ""}"
+                        aria-current=${isActive ? "step" : "false"}
+                      >
+                        <div class="step-circle">
+                          ${isCompleted
+                            ? html`<st-icon name="circle-check" size="sm"></st-icon>`
+                            : html`${index + 1}`}
+                        </div>
+                        <span>${step.title || `Step ${index + 1}`}</span>
+                      </li>
+                      ${index < steps.length - 1
+                        ? html`<li
+                            class="step-connector ${isCompleted ? "completed" : ""}"
+                            aria-hidden="true"
+                          ></li>`
+                        : ""}
+                    `;
+                  })}
+                </ol>
+              </nav>
             `
           : ""}
         ${this.error
           ? html`
               <st-alert color="error" style="margin-bottom: var(--st-spacing-lg);">
-                <st-icon slot="icon" name="alert-triangle"></st-icon>
+                <st-icon slot="icon" name="triangle-exclamation"></st-icon>
                 ${this.error}
               </st-alert>
             `
@@ -467,14 +499,19 @@ export class StForm extends LitElement {
                         </st-button>
                       `
                     : ""}
-
                   <st-button
                     color="primary"
                     type="button"
                     @click=${this._triggerSubmission}
                     ?disabled=${this.loading}
                   >
-                    ${this.loading ? "Submitting..." : hasSteps && this._currentStepIndex === steps.length - 1 ? "Submit" : hasSteps ? "Continue" : "Submit"}
+                    ${this.loading
+                      ? "Submitting..."
+                      : hasSteps && this._currentStepIndex === steps.length - 1
+                        ? "Submit"
+                        : hasSteps
+                          ? "Continue"
+                          : "Submit"}
                   </st-button>
                 </div>
               `
@@ -489,4 +526,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-form": StForm;
   }
-}
+}