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

package/src/components/popover/popover.ts

@@ -0,0 +1,192 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, query, state, queryAssignedElements} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+
+export type PopoverPosition = "top" | "bottom" | "left" | "right";
+
+@customElement("st-popover")
+export class StPopover extends LitElement {
+  @property({type: String}) position: PopoverPosition = "bottom";
+  @property({type: Number}) offset = 8;
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  @state() private _isOpen = false;
+
+  @query(".trigger-wrapper") private _triggerWrapper!: HTMLElement;
+  @query("#popover-content") private _popoverEl!: HTMLElement;
+
+  @queryAssignedElements({slot: "trigger"}) private _triggerElements!: HTMLElement[];
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      .trigger-wrapper {
+        display: inline-block;
+        cursor: pointer;
+      }
+
+      /* Native popover styles */
+      [popover] {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        border: none;
+        background: transparent;
+        overflow: visible;
+        /* 🚀 FIX: Erase the browser's native centering inset so our JS coordinates work */
+        inset: auto;
+      }
+
+      .popover-surface {
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        border-radius: var(--st-radius-md);
+        box-shadow:
+          0 10px 15px -3px rgba(0, 0, 0, 0.1),
+          0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        padding: var(--st-spacing-md);
+        color: var(--st-color-text);
+
+        opacity: 0;
+        transform: scale(0.95);
+        transition:
+          opacity 0.15s ease,
+          transform 0.15s ease;
+      }
+
+      [popover]:popover-open .popover-surface {
+        opacity: 1;
+        transform: scale(1);
+      }
+
+      [popover]::backdrop {
+        background: transparent;
+      }
+    `,
+  ];
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("_isOpen")) {
+      this._triggerElements?.forEach((el) => {
+        el.setAttribute("aria-expanded", String(this._isOpen));
+      });
+    }
+  }
+
+  private _handleTriggerSlotChange() {
+    this._triggerElements?.forEach((el) => {
+      el.setAttribute("aria-haspopup", "dialog");
+      el.setAttribute("aria-expanded", String(this._isOpen));
+    });
+  }
+
+  private _togglePopover() {
+    if (this.disabled) return;
+    this._isOpen ? this.hide() : this.show();
+  }
+
+  public show() {
+    if (this.disabled || this._isOpen) return;
+
+    // 🚀 FIX: Update state synchronously so the _reposition check passes instantly
+    this._isOpen = true;
+
+    this._popoverEl.showPopover();
+    this._reposition();
+
+    window.addEventListener("resize", this._reposition);
+    window.addEventListener("scroll", this._reposition, true);
+  }
+
+  public hide() {
+    if (!this._isOpen) return;
+
+    // 🚀 FIX: Update state synchronously
+    this._isOpen = false;
+
+    this._popoverEl.hidePopover();
+  }
+
+  private _handleNativeToggle(e: Event) {
+    const isOpening = (e as any).newState === "open";
+    this._isOpen = isOpening;
+
+    // This handles the cleanup when the user clicks outside or hits ESC
+    if (!isOpening) {
+      window.removeEventListener("resize", this._reposition);
+      window.removeEventListener("scroll", this._reposition, true);
+    }
+  }
+
+  private _reposition = () => {
+    if (!this._isOpen || !this._popoverEl || !this._triggerWrapper) return;
+
+    const triggerRect = this._triggerWrapper.getBoundingClientRect();
+    const popoverRect = this._popoverEl.getBoundingClientRect();
+
+    let top = 0;
+    let left = 0;
+
+    switch (this.position) {
+      case "bottom":
+        top = triggerRect.bottom + this.offset;
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+        break;
+      case "top":
+        top = triggerRect.top - popoverRect.height - this.offset;
+        left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2;
+        break;
+      case "right":
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+        left = triggerRect.right + this.offset;
+        break;
+      case "left":
+        top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2;
+        left = triggerRect.left - popoverRect.width - this.offset;
+        break;
+    }
+
+    const padding = 8;
+    if (left < padding) left = padding;
+    if (left + popoverRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - popoverRect.width - padding;
+    }
+    if (top < padding) top = padding;
+    if (top + popoverRect.height > window.innerHeight - padding) {
+      top = window.innerHeight - popoverRect.height - padding;
+    }
+
+    this._popoverEl.style.top = `${top}px`;
+    this._popoverEl.style.left = `${left}px`;
+  };
+
+  render() {
+    return html`
+      <div
+        class="trigger-wrapper"
+        @click=${this._togglePopover}
+        @keydown=${(e: KeyboardEvent) =>
+          e.key === "Enter" || e.key === " " ? this._togglePopover() : null}
+      >
+        <slot name="trigger" @slotchange=${this._handleTriggerSlotChange}></slot>
+      </div>
+
+      <div id="popover-content" popover="auto" @toggle=${this._handleNativeToggle}>
+        <div class="popover-surface">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-popover": StPopover;
+  }
+}

package/src/components/radio/radio.ts

@@ -1,13 +1,15 @@
 import {LitElement, html, css} from "lit";
 import {customElement, property} from "lit/decorators.js";
+import {ifDefined} from "lit/directives/if-defined.js";
 import {resetStyles} from "../../styles/reset.js";
 
 @customElement("st-radio")
 export class StRadio extends LitElement {
+  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};
+
   @property({type: String}) value = "";
   @property({type: Boolean, reflect: true}) checked = false;
   @property({type: Boolean, reflect: true}) disabled = false;
-
   @property({attribute: "aria-label"}) ariaLabel = "";
 
   static styles = [
@@ -28,7 +30,6 @@ export class StRadio extends LitElement {
         font-size: var(--st-font-size-base);
       }
 
-      /* Hide the native input visually, but keep it accessible for screen readers */
       input {
         position: absolute;
         width: 1px;
@@ -41,7 +42,6 @@ export class StRadio extends LitElement {
         border-width: 0;
       }
 
-      /* Custom Radio Circle */
       .control {
         display: flex;
         align-items: center;
@@ -55,45 +55,42 @@ export class StRadio extends LitElement {
         flex-shrink: 0;
       }
 
-      /* Inner Dot (Hidden by default) */
       .control::after {
         content: "";
         width: 0.625rem;
         height: 0.625rem;
         border-radius: 50%;
-        background-color: var(--st-color-bg); /* Matches the dot color to background initially */
+        background-color: var(--st-color-bg);
         transition:
           transform 0.2s ease,
           background-color 0.2s ease;
         transform: scale(0);
       }
 
-      /* Hover State */
       label:hover .control {
         border-color: var(--st-color-primary-hover);
       }
 
-      /* Focus State (Driven by the hidden input) */
       input:focus-visible + .control {
         box-shadow:
           0 0 0 2px var(--st-color-bg),
           0 0 0 4px var(--st-color-primary);
       }
 
-      /* Checked State */
       :host([checked]) .control {
         border-color: var(--st-color-primary);
         background-color: var(--st-color-primary);
       }
+
       :host([checked]) .control::after {
-        background-color: var(--st-white); /* White dot inside the primary circle */
+        background-color: #ffffff; /* Explicitly white for contrast */
         transform: scale(1);
       }
 
-      /* Disabled State */
       :host([disabled]) {
         pointer-events: none;
       }
+
       :host([disabled]) label {
         opacity: 0.5;
         cursor: not-allowed;
@@ -102,11 +99,9 @@ export class StRadio extends LitElement {
   ];
 
   private _handleChange(e: Event) {
-    // Prevent the native change event from leaking out
     e.stopPropagation();
 
     if (!this.disabled) {
-      // Dispatch a custom event to tell the parent group this radio was selected
       this.dispatchEvent(
         new CustomEvent("st-radio-select", {
           detail: {value: this.value},
@@ -122,7 +117,7 @@ export class StRadio extends LitElement {
       <label>
         <input
           type="radio"
-          aria-label=${this.ariaLabel || ""}
+          aria-label=${ifDefined(this.ariaLabel || undefined)}
           .value=${this.value}
           .checked=${this.checked}
           ?disabled=${this.disabled}

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

@@ -12,23 +12,23 @@ export class StRadioGroup extends LitElement {
   @property({type: String}) value = "";
   @property({type: String}) label = "";
   @property({attribute: "help-text"}) helpText = "";
+  @property({type: String, reflect: true}) layout: "vertical" | "horizontal" = "vertical";
+  @property({type: Boolean, reflect: true}) required = false;
   @property({type: Boolean, reflect: true}) disabled = false;
   @property({type: Boolean, reflect: true}) invalid = false;
 
-  // Grabs all slotted st-radio components automatically
   @queryAssignedElements({selector: "st-radio"})
   private _radios!: StRadio[];
 
   constructor() {
     super();
     this._internals = this.attachInternals();
+    this._internals.role = "radiogroup";
 
-    // 1. Trigger error state if the user clicks away and the field is invalid
     this.addEventListener("change", () => {
       this.invalid = !this._internals.validity.valid;
     });
 
-    // 2. Trigger error state if the st-form tries to submit and fails
     this.addEventListener("invalid", () => {
       this.invalid = true;
     });
@@ -64,7 +64,6 @@ export class StRadioGroup extends LitElement {
         gap: var(--st-spacing-sm);
       }
 
-      /* Horizontal layout modifier */
       :host([layout="horizontal"]) .options {
         flex-direction: row;
         gap: var(--st-spacing-md);
@@ -76,36 +75,40 @@ export class StRadioGroup extends LitElement {
         margin: 0;
       }
 
-      :host([invalid]) .help-text {
-        color: var(--st-color-error);
-      }
+      :host([invalid]) .help-text,
       :host([invalid]) legend {
         color: var(--st-color-error);
       }
     `,
   ];
 
+  private _handleRadioSelect = (e: Event) => {
+    if (this.disabled) return;
+
+    const customEvent = e as CustomEvent<{value: string}>;
+    this.value = customEvent.detail.value;
+
+    // 🚀 THE FIX: Clear the invalid visual state as soon as the user makes a selection
+    if (this.invalid) {
+      this.invalid = false;
+    }
+
+    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+  };
+
   connectedCallback() {
     super.connectedCallback();
-    // Listen for selections from child radios
-    this.addEventListener("st-radio-select", this._handleRadioSelect as EventListener);
+    this.addEventListener("st-radio-select", this._handleRadioSelect);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener("st-radio-select", this._handleRadioSelect as EventListener);
-  }
-
-  private _handleRadioSelect(e: CustomEvent<{value: string}>) {
-    if (this.disabled) return;
-    this.value = e.detail.value;
-    this.dispatchEvent(new Event("change", {bubbles: true, composed: true}));
+    this.removeEventListener("st-radio-select", this._handleRadioSelect);
   }
 
   override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
 
-    // When the group's value changes, sync the form and update all child radios
     if (changedProperties.has("value")) {
       this._internals.setFormValue(this.value);
       this._syncRadios();
@@ -114,9 +117,20 @@ export class StRadioGroup extends LitElement {
     if (changedProperties.has("disabled")) {
       this._syncRadios();
     }
+
+    if (changedProperties.has("value") || changedProperties.has("required")) {
+      this._syncValidity();
+    }
+  }
+
+  private _syncValidity() {
+    if (this.required && !this.value) {
+      this._internals.setValidity({valueMissing: true}, "Please select an option.");
+    } else {
+      this._internals.setValidity({});
+    }
   }
 
-  // Loops through children and unchecks/checks them based on the group's current value
   private _syncRadios() {
     if (!this._radios) return;
 
@@ -128,11 +142,21 @@ export class StRadioGroup extends LitElement {
     });
   }
 
-  // Fired natively by the browser if the parent <form> is reset
   formResetCallback() {
-    this.value = "";
-    this._internals.setFormValue("");
+    const initialValue = this.getAttribute("value") || "";
+    this.value = initialValue;
+    this._internals.setFormValue(initialValue);
     this._syncRadios();
+    this.updateComplete.then(() => this._syncValidity());
+  }
+
+  // Expose standard native methods
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+
+  reportValidity() {
+    return this._internals.reportValidity();
   }
 
   render() {

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();