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

package/src/components/router/router.ts

@@ -1,6 +1,6 @@
 export interface RouteDefinition {
   component: string;
-  [key: string]: unknown; // Allows consuming apps to attach custom metadata (e.g., titles, auth roles)
+  [key: string]: unknown;
 }
 
 export type RouteConfig = Record<string, RouteDefinition>;
@@ -13,85 +13,105 @@ export interface RouteMatch {
 }
 
 function getRouteWeight(pattern: string): number {
-  const segments = pattern.split('/').filter(Boolean);
+  const segments = pattern.split("/").filter(Boolean);
   return segments.reduce((weight, seg) => {
-    return weight + (seg.startsWith(':') ? 1 : 10);
+    return weight + (seg.startsWith(":") ? 1 : 10);
   }, 0);
 }
 
 export class AppRouter {
   private _routes: RouteConfig = {};
   private _initialized = false;
+  private _boundNotify: () => void;
+  private _boundClick: (e: MouseEvent) => void;
 
   constructor(routes?: RouteConfig) {
+    this._boundNotify = () => this._notify();
+    this._boundClick = (e: MouseEvent) => this._handleClick(e);
+
     if (routes) {
       this.setRoutes(routes);
     }
 
-    window.addEventListener('popstate', () => this._notify());
-    
-    document.addEventListener('click', (e) => {
-      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
-        return;
-      }
-
-      const path = e.composedPath();
-      const link = path.find((el: any) => 
-        el && typeof el.hasAttribute === 'function' && el.hasAttribute('href')
-      ) as HTMLElement | undefined;
+    // 🚀 FIX: SSR Safety check. Prevents crashes during Node.js CI test imports.
+    if (typeof window !== "undefined") {
+      window.addEventListener("popstate", this._boundNotify);
+      document.addEventListener("click", this._boundClick as EventListener);
+    }
+  }
 
-      if (!link) return;
+  /**
+   * 🚀 FIX: Removes global listeners to prevent memory leaks during testing/teardown.
+   */
+  public destroy() {
+    if (typeof window !== "undefined") {
+      window.removeEventListener("popstate", this._boundNotify);
+      document.removeEventListener("click", this._boundClick as EventListener);
+    }
+  }
 
-      const href = link.getAttribute('href');
-      const target = link.getAttribute('target');
+  private _handleClick(e: MouseEvent) {
+    if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+      return;
+    }
 
-      if (!href || href.startsWith('http') || href.startsWith('mailto:') || target === '_blank') {
-        return;
-      }
+    const path = e.composedPath();
+    const link = path.find(
+      (el: any) => el && typeof el.hasAttribute === "function" && el.hasAttribute("href"),
+    ) as HTMLElement | undefined;
+
+    if (!link) return;
+
+    const href = link.getAttribute("href");
+    const target = link.getAttribute("target");
+
+    // 🚀 FIX: Ignore links with the 'download' attribute so file downloads aren't hijacked
+    if (
+      !href ||
+      href.startsWith("http") ||
+      href.startsWith("mailto:") ||
+      target === "_blank" ||
+      link.hasAttribute("download")
+    ) {
+      return;
+    }
 
-      if (href.startsWith('/')) {
-        e.preventDefault(); 
-        this.navigate(href);
-      }
-    });
+    if (href.startsWith("/")) {
+      e.preventDefault();
+      this.navigate(href);
+    }
   }
 
-  /**
-   * Register or update the route configuration for this application.
-   */
   public setRoutes(routes: RouteConfig) {
     this._routes = routes;
 
-    // Trigger initial route resolution once routes are registered
     if (!this._initialized) {
       this._initialized = true;
-      setTimeout(() => this._notify(), 0);
+      if (typeof window !== "undefined") {
+        setTimeout(() => this._notify(), 0);
+      }
     } else {
       this._notify();
     }
   }
 
-  /**
-   * Programmatically navigate to an internal path.
-   */
   public navigate(path: string) {
-    window.history.pushState(null, '', path);
+    if (typeof window !== "undefined") {
+      window.history.pushState(null, "", path);
+    }
     this._notify();
   }
 
-  /**
-   * Matches a URL path against the registered routes.
-   */
   public matchRoute(currentPath: string): RouteMatch | null {
     const sortedRoutes = Object.entries(this._routes).sort(
-      ([patternA], [patternB]) => getRouteWeight(patternB) - getRouteWeight(patternA)
+      ([patternA], [patternB]) => getRouteWeight(patternB) - getRouteWeight(patternA),
     );
 
     for (const [pattern, routeDef] of sortedRoutes) {
       const paramNames: string[] = [];
       const regexPath = pattern.replace(/:([a-zA-Z0-9_]+)/g, (_, paramName) => {
         paramNames.push(paramName);
-        return '([^/]+)';
+        return "([^/]+)";
       });
 
       const regex = new RegExp(`^${regexPath}$`);
@@ -107,7 +127,7 @@ export class AppRouter {
           path: currentPath,
           component: routeDef.component,
           params,
-          definition: routeDef
+          definition: routeDef,
         };
       }
     }
@@ -116,19 +136,22 @@ export class AppRouter {
   }
 
   private _notify() {
+    if (typeof window === "undefined") return;
+
     const currentPath = window.location.pathname;
     const match = this.matchRoute(currentPath);
 
-    window.dispatchEvent(new CustomEvent('route-changed', { 
-      detail: {
-        path: currentPath,
-        component: match ? match.component : 'not-found-page',
-        params: match ? match.params : {},
-        definition: match ? match.definition : null
-      }
-    }));
+    window.dispatchEvent(
+      new CustomEvent("route-changed", {
+        detail: {
+          path: currentPath,
+          component: match ? match.component : "not-found-page",
+          params: match ? match.params : {},
+          definition: match ? match.definition : null,
+        },
+      }),
+    );
   }
 }
 
-// Export a singleton instance for standard app-wide use
-export const router = new AppRouter();
+export const router = new AppRouter();

package/src/components/select/select.ts

@@ -7,13 +7,9 @@ export interface SelectOption {
   value: string;
 }
 
-/**
- * Standard WHATWG Autocomplete tokens.
- */
 export type SelectAutocomplete =
   | "on"
   | "off"
-  // Names
   | "name"
   | "honorific-prefix"
   | "given-name"
@@ -21,7 +17,6 @@ export type SelectAutocomplete =
   | "family-name"
   | "honorific-suffix"
   | "nickname"
-  // Authentication & Identity
   | "email"
   | "username"
   | "new-password"
@@ -32,19 +27,17 @@ export type SelectAutocomplete =
   | "url"
   | "photo"
   | "webauthn"
-  // Addresses
   | "street-address"
   | "address-line1"
   | "address-line2"
   | "address-line3"
-  | "address-level1" // State / Province
-  | "address-level2" // City
+  | "address-level1"
+  | "address-level2"
   | "address-level3"
   | "address-level4"
   | "country"
   | "country-name"
   | "postal-code"
-  // Payment
   | "cc-name"
   | "cc-given-name"
   | "cc-additional-name"
@@ -57,14 +50,12 @@ export type SelectAutocomplete =
   | "cc-type"
   | "transaction-currency"
   | "transaction-amount"
-  // Personal
   | "language"
   | "bday"
   | "bday-day"
   | "bday-month"
   | "bday-year"
   | "sex"
-  // Telephone & Messaging
   | "tel"
   | "tel-country-code"
   | "tel-national"
@@ -74,7 +65,6 @@ export type SelectAutocomplete =
   | "tel-local-suffix"
   | "tel-extension"
   | "impp"
-  // Preserves IDE autocomplete while allowing space-separated modifiers (e.g., "shipping postal-code")
   | (string & {});
 
 @customElement("st-select")
@@ -184,7 +174,7 @@ export class StSelect extends LitElement {
       top: calc(100% + 4px);
       left: 0;
       right: 0;
-      z-index: 1;
+      z-index: 10;
       background: var(--st-color-surface);
       border: 1px solid var(--st-color-border);
       border-radius: var(--st-radius-md);
@@ -264,19 +254,17 @@ export class StSelect extends LitElement {
     this.handleClickOutside = this.handleClickOutside.bind(this);
   }
 
-  // 2. Public API methods expected by st-form
   public checkValidity(): boolean {
     return this.internals.checkValidity();
   }
 
   public reportValidity(): boolean {
     const isValid = this.checkValidity();
-    this.touched = true; // Force UI to reveal the error
+    this.touched = true;
     this.invalid = !isValid;
     return isValid;
   }
 
-  // 3. Override native focus to target the internal combobox button
   public override focus(options?: FocusOptions) {
     this.buttonElement?.focus(options);
   }
@@ -297,6 +285,7 @@ export class StSelect extends LitElement {
   }
 
   override willUpdate(changedProperties: PropertyValues) {
+    super.willUpdate(changedProperties);
     if (
       changedProperties.has("value") ||
       changedProperties.has("required") ||
@@ -333,6 +322,13 @@ export class StSelect extends LitElement {
     }
   }
 
+  formResetCallback() {
+    const initialValue = this.getAttribute("value") || "";
+    this.value = initialValue;
+    this.touched = false;
+    this.validate();
+  }
+
   private handleClickOutside(e: Event) {
     const path = e.composedPath();
     if (!path.includes(this)) {
@@ -406,7 +402,6 @@ export class StSelect extends LitElement {
     const currentValues = this.selectedValues;
     const selectedOptions = this.options.filter((opt) => currentValues.includes(opt.value));
 
-    // 4. Update isInvalid to also respect the new property fallback
     const isInvalid =
       this.invalid || (this.touched && !this.internals.validity.valid) || !!this.error;
     const displayError = isInvalid ? this.error || this.nativeError : "";
@@ -465,6 +460,8 @@ export class StSelect extends LitElement {
                         class="search-input"
                         placeholder="Search options..."
                         autocomplete="off"
+                        spellcheck="false"
+                        autocapitalize="none"
                         .value=${this.filterText}
                         @input=${this.handleSearchInput}
                       />
@@ -495,6 +492,8 @@ export class StSelect extends LitElement {
                     })
                   : html`<li
                       class="option"
+                      role="option"
+                      aria-disabled="true"
                       style="color:var(--st-color-text-muted); cursor:default;"
                     >
                       No options found
@@ -508,7 +507,7 @@ export class StSelect extends LitElement {
       <select
         class="hidden-native"
         name="${this.name}"
-        .autocomplete="${this.autocomplete}"
+        .autocomplete="${this.autocomplete as any}"
         ?multiple=${this.multiple}
         tabindex="-1"
         aria-hidden="true"
@@ -531,4 +530,4 @@ declare global {
   interface HTMLElementTagNameMap {
     "st-select": StSelect;
   }
-}
+}

package/src/components/skeleton/skeleton.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, PropertyValues } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
 
@@ -9,8 +9,14 @@ export class StSkeleton extends LitElement {
   @property({ type: String }) width = '';
   @property({ type: String }) height = '';
 
-  // Apply properties directly to the :host as CSS variables when they change
-  updated(changedProperties: Map<string | number | symbol, unknown>) {
+  constructor() {
+    super();
+    this.setAttribute('role', 'status');
+    this.setAttribute('aria-label', 'Loading');
+    this.setAttribute('aria-busy', 'true');
+  }
+
+  override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
     
     if (changedProperties.has('width')) {
@@ -36,22 +42,20 @@ export class StSkeleton extends LitElement {
       :host {
         display: block;
         
-        /* Define base sizing variables that can be overridden by props */
         --_width: var(--st-skeleton-width, 100%);
         --_height: var(--st-skeleton-height, 1em);
         
-        /* 
-          CRITICAL FIX: Apply sizing directly to the host. 
-          This allows external classes and styles (like margin: auto) to work perfectly.
-        */
         width: var(--_width);
         height: var(--_height);
         
-        /* Expose radius as a token for external theme overrides */
         --st-skeleton-radius: var(--st-radius-sm, 0.25rem);
       }
 
-      /* Shape Variants adjust the host's sizing variables */
+      :host([variant="text"]) {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
       :host([variant="circular"]) {
         --_width: var(--st-skeleton-width, 2.5rem);
         --_height: var(--st-skeleton-height, 2.5rem);
@@ -62,7 +66,6 @@ export class StSkeleton extends LitElement {
       }
 
       .skeleton {
-        /* The inner element simply fills the host */
         display: block;
         width: 100%;
         height: 100%;
@@ -76,7 +79,6 @@ export class StSkeleton extends LitElement {
         background-size: 400% 100%;
         border-radius: var(--st-skeleton-radius);
         
-        /* Prevent accidental selection */
         user-select: none;
         pointer-events: none;
       }
@@ -85,7 +87,6 @@ export class StSkeleton extends LitElement {
         border-radius: 50%;
       }
 
-      /* Animations */
       :host([animation="shimmer"]) .skeleton {
         animation: st-shimmer 1.4s ease infinite;
       }
@@ -100,7 +101,6 @@ export class StSkeleton extends LitElement {
         animation: none;
       }
 
-      /* Accessibility: Respect OS reduced motion settings */
       @media (prefers-reduced-motion: reduce) {
         .skeleton {
           animation: none !important;

package/src/components/switch/switch.ts

@@ -1,23 +1,25 @@
 import {LitElement, html, css, PropertyValues} from "lit";
 import {customElement, property, query} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
 import {resetStyles} from "../../styles/reset.js";
 
 @customElement("st-switch")
 export class StSwitch extends LitElement {
   static formAssociated = true;
   private _internals: ElementInternals;
+  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
 
   @query("input") private _inputEl!: HTMLInputElement;
 
   @property({type: String, reflect: true}) name = "";
   @property({type: String}) value = "on";
-
   @property({type: Boolean, reflect: true}) checked = false;
   @property({type: Boolean, reflect: true}) disabled = false;
   @property({type: Boolean, reflect: true}) required = false;
-
   @property({attribute: "aria-label"}) ariaLabel = "";
 
+  private _defaultChecked = false;
+
   constructor() {
     super();
     this._internals = this.attachInternals();
@@ -41,7 +43,6 @@ export class StSwitch extends LitElement {
         font-size: var(--st-font-size-base);
       }
 
-      /* Visually hide the native input */
       input {
         position: absolute;
         width: 1px;
@@ -54,12 +55,11 @@ export class StSwitch extends LitElement {
         border-width: 0;
       }
 
-      /* The Switch Track (Pill) */
       .track {
         display: flex;
         align-items: center;
-        width: 2.25rem; /* 36px */
-        height: 1.25rem; /* 20px */
+        width: 2.25rem;
+        height: 1.25rem;
         background-color: var(--st-color-border);
         border-radius: 999px;
         padding: 2px;
@@ -69,40 +69,34 @@ export class StSwitch extends LitElement {
         flex-shrink: 0;
       }
 
-      /* The Switch Thumb (Circle) */
       .thumb {
-        width: 1rem; /* 16px */
-        height: 1rem; /* 16px */
-        background-color: var(--st-white);
+        width: 1rem;
+        height: 1rem;
+        background-color: #ffffff; /* Explicitly white for contrast */
         border-radius: 50%;
         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
         transform: translateX(0);
         transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
       }
 
-      /* Focus State */
+      label:hover input:not(:checked):not(:disabled) + .track {
+        background-color: var(--st-color-text-muted);
+      }
+
       input:focus-visible + .track {
         box-shadow:
           0 0 0 2px var(--st-color-bg),
           0 0 0 4px var(--st-color-primary);
       }
 
-      /* Checked State */
       :host([checked]) .track {
         background-color: var(--st-color-primary);
       }
 
       :host([checked]) .thumb {
-        /* Move thumb to the right: Track width (36px) - Padding (4px) - Thumb width (16px) = 16px */
         transform: translateX(16px);
       }
 
-      /* Hover State (Subtle darkening of the track if unchecked) */
-      label:hover input:not(:checked) + .track {
-        background-color: var(--st-color-text-muted);
-      }
-
-      /* Disabled State */
       :host([disabled]) {
         pointer-events: none;
       }
@@ -114,16 +108,21 @@ export class StSwitch extends LitElement {
     `,
   ];
 
+  override firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._defaultChecked = this.checked;
+  }
+
   override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
     if (changedProperties.has("checked") || changedProperties.has("value")) {
       this._internals.setFormValue(this.checked ? this.value : null);
-      this._syncValidity();
+      this.updateComplete.then(() => this._syncValidity());
     }
 
     if (changedProperties.has("required")) {
-      this._syncValidity();
+      this.updateComplete.then(() => this._syncValidity());
     }
   }
 
@@ -136,15 +135,22 @@ export class StSwitch extends LitElement {
     );
   }
 
+  public checkValidity() {
+    return this._internals.checkValidity();
+  }
+
+  public reportValidity() {
+    return this._internals.reportValidity();
+  }
+
   formResetCallback() {
-    this.checked = false;
-    this._internals.setFormValue(null);
+    this.checked = this._defaultChecked;
+    this._internals.setFormValue(this.checked ? this.value : null);
     this.updateComplete.then(() => this._syncValidity());
   }
 
   private _handleChange(e: Event) {
     e.stopPropagation();
-
     if (this.disabled) return;
 
     this.checked = this._inputEl.checked;
@@ -157,7 +163,7 @@ export class StSwitch extends LitElement {
         <input
           type="checkbox"
           role="switch"
-          aria-label=${this.ariaLabel || ""}
+          aria-label=${ifDefined(this.ariaLabel || undefined)}
           .name=${this.name}
           .value=${this.value}
           .checked=${this.checked}