@sondor-technology/sondor-components 1.0.2 → 1.0.4

package/src/components/router/router.ts

@@ -1,14 +1,40 @@
-class AppRouter {
-  constructor() {
+export interface RouteDefinition {
+  component: string;
+  [key: string]: unknown; // Allows consuming apps to attach custom metadata (e.g., titles, auth roles)
+}
+
+export type RouteConfig = Record<string, RouteDefinition>;
+
+export interface RouteMatch {
+  path: string;
+  component: string;
+  params: Record<string, string>;
+  definition: RouteDefinition;
+}
+
+function getRouteWeight(pattern: string): number {
+  const segments = pattern.split('/').filter(Boolean);
+  return segments.reduce((weight, seg) => {
+    return weight + (seg.startsWith(':') ? 1 : 10);
+  }, 0);
+}
+
+export class AppRouter {
+  private _routes: RouteConfig = {};
+  private _initialized = false;
+
+  constructor(routes?: RouteConfig) {
+    if (routes) {
+      this.setRoutes(routes);
+    }
+
     window.addEventListener('popstate', () => this._notify());
     
     document.addEventListener('click', (e) => {
-      // 1. Ignore modified clicks (Ctrl+Click, etc)
       if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
         return;
       }
 
-      // 2. Safely traverse the path
       const path = e.composedPath();
       const link = path.find((el: any) => 
         el && typeof el.hasAttribute === 'function' && el.hasAttribute('href')
@@ -19,29 +45,90 @@ class AppRouter {
       const href = link.getAttribute('href');
       const target = link.getAttribute('target');
 
-      // 3. Ignore external links
       if (!href || href.startsWith('http') || href.startsWith('mailto:') || target === '_blank') {
         return;
       }
 
-      // 4. Intercept internal links
       if (href.startsWith('/')) {
         e.preventDefault(); 
-        window.history.pushState(null, '', href);
-        this._notify();
+        this.navigate(href);
       }
     });
+  }
+
+  /**
+   * Register or update the route configuration for this application.
+   */
+  public setRoutes(routes: RouteConfig) {
+    this._routes = routes;
 
-    // Broadcast initial route on load
-    // Use setTimeout to ensure all Lit components have registered first
-    setTimeout(() => this._notify(), 0);
+    // Trigger initial route resolution once routes are registered
+    if (!this._initialized) {
+      this._initialized = true;
+      setTimeout(() => this._notify(), 0);
+    } else {
+      this._notify();
+    }
+  }
+
+  /**
+   * Programmatically navigate to an internal path.
+   */
+  public navigate(path: string) {
+    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)
+    );
+
+    for (const [pattern, routeDef] of sortedRoutes) {
+      const paramNames: string[] = [];
+      const regexPath = pattern.replace(/:([a-zA-Z0-9_]+)/g, (_, paramName) => {
+        paramNames.push(paramName);
+        return '([^/]+)';
+      });
+
+      const regex = new RegExp(`^${regexPath}$`);
+      const match = currentPath.match(regex);
+
+      if (match) {
+        const params: Record<string, string> = {};
+        paramNames.forEach((name, index) => {
+          params[name] = decodeURIComponent(match[index + 1]);
+        });
+
+        return {
+          path: currentPath,
+          component: routeDef.component,
+          params,
+          definition: routeDef
+        };
+      }
+    }
+
+    return null;
   }
 
   private _notify() {
+    const currentPath = window.location.pathname;
+    const match = this.matchRoute(currentPath);
+
     window.dispatchEvent(new CustomEvent('route-changed', { 
-      detail: window.location.pathname 
+      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();

package/src/components/skeleton/skeleton.ts

@@ -4,26 +4,69 @@ import { resetStyles } from '../../styles/reset.js';
 
 @customElement('st-skeleton')
 export class StSkeleton extends LitElement {
-  /** Variant shape: 'text' | 'circular' | 'rectangular' */
-  @property({ type: String }) variant: 'text' | 'circular' | 'rectangular' = 'text';
-
-  /** Custom width override (e.g., '200px', '50%') */
+  @property({ type: String, reflect: true }) variant: 'text' | 'circular' | 'rectangular' = 'text';
+  @property({ type: String, reflect: true }) animation: 'shimmer' | 'pulse' | 'none' = 'shimmer';
   @property({ type: String }) width = '';
-
-  /** Custom height override (e.g., '40px', '1rem') */
   @property({ type: String }) height = '';
 
+  // Apply properties directly to the :host as CSS variables when they change
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+    
+    if (changedProperties.has('width')) {
+      if (this.width) {
+        this.style.setProperty('--st-skeleton-width', this.width);
+      } else {
+        this.style.removeProperty('--st-skeleton-width');
+      }
+    }
+    
+    if (changedProperties.has('height')) {
+      if (this.height) {
+        this.style.setProperty('--st-skeleton-height', this.height);
+      } else {
+        this.style.removeProperty('--st-skeleton-height');
+      }
+    }
+  }
+
   static styles = [
     resetStyles,
     css`
       :host {
         display: block;
-        width: 100%;
+        
+        /* 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="circular"]) {
+        --_width: var(--st-skeleton-width, 2.5rem);
+        --_height: var(--st-skeleton-height, 2.5rem);
+      }
+
+      :host([variant="rectangular"]) {
+        --_height: var(--st-skeleton-height, 8rem);
       }
 
       .skeleton {
-        width: var(--st-skeleton-width, 100%);
-        height: var(--st-skeleton-height, 1em);
+        /* The inner element simply fills the host */
+        display: block;
+        width: 100%;
+        height: 100%;
+        
         background: linear-gradient(
           90deg,
           var(--st-color-surface-muted, #f1f5f9) 25%,
@@ -31,33 +74,57 @@ export class StSkeleton extends LitElement {
           var(--st-color-surface-muted, #f1f5f9) 63%
         );
         background-size: 400% 100%;
-        animation: st-shimmer 1.4s ease infinite;
-        border-radius: var(--st-radius-sm, 0.25rem);
+        border-radius: var(--st-skeleton-radius);
+        
+        /* Prevent accidental selection */
+        user-select: none;
+        pointer-events: none;
       }
 
       :host([variant="circular"]) .skeleton {
         border-radius: 50%;
-        height: var(--st-skeleton-height, 2.5rem);
-        width: var(--st-skeleton-width, 2.5rem);
       }
 
-      :host([variant="rectangular"]) .skeleton {
-        height: var(--st-skeleton-height, 8rem);
+      /* Animations */
+      :host([animation="shimmer"]) .skeleton {
+        animation: st-shimmer 1.4s ease infinite;
+      }
+
+      :host([animation="pulse"]) .skeleton {
+        background: var(--st-color-surface-muted, #f1f5f9);
+        animation: st-pulse 1.5s ease-in-out infinite;
+      }
+
+      :host([animation="none"]) .skeleton {
+        background: var(--st-color-surface-muted, #f1f5f9);
+        animation: none;
+      }
+
+      /* Accessibility: Respect OS reduced motion settings */
+      @media (prefers-reduced-motion: reduce) {
+        .skeleton {
+          animation: none !important;
+          background: var(--st-color-surface-muted, #f1f5f9) !important;
+        }
       }
 
       @keyframes st-shimmer {
         0% { background-position: 100% 0; }
-        100% { background-position: 0 0; }
+        100% { background-position: -100% 0; }
+      }
+
+      @keyframes st-pulse {
+        0% { opacity: 1; }
+        50% { opacity: 0.4; }
+        100% { opacity: 1; }
       }
     `
   ];
 
   render() {
-    const style = `
-      ${this.width ? `--st-skeleton-width: ${this.width};` : ''}
-      ${this.height ? `--st-skeleton-height: ${this.height};` : ''}
+    return html`
+      <div class="skeleton" aria-hidden="true" part="base"></div>
     `;
-    return html`<div class="skeleton" style=${style}></div>`;
   }
 }
 

package/src/components/vertical-nav/vertical-nav-group.ts

@@ -6,38 +6,58 @@ import { resetStyles } from '../../styles/reset.js';
 export class StNavGroup extends LitElement {
   @property({ type: String }) label = '';
   @property({ type: Boolean, reflect: true }) open = false;
+  @property({ type: Number }) depth = 0;
 
   static styles = [
     resetStyles,
     css`
       :host {
         display: block;
-        margin-bottom: var(--st-spacing-sm);
+        margin-bottom: 2px;
+        overflow: hidden;
       }
 
       button {
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        gap: var(--st-spacing-sm, 8px);
         width: 100%;
+        box-sizing: border-box;
         background: transparent;
         border: none;
-        padding: var(--st-spacing-xs) var(--st-spacing-lg);
+        padding: var(--st-spacing-sm) var(--st-spacing-xl);
+        padding-left: calc(var(--st-spacing-xl, 24px) + (var(--nav-depth, 0) * 16px));
         color: var(--st-color-text);
         font-size: var(--st-font-size-sm);
-        font-weight: var(--st-font-weight-bold);
+        font-weight: var(--st-font-weight-semibold);
         cursor: pointer;
-        text-align: left;
-        transition: color 0.2s ease;
+        transition: background-color 0.2s ease, color 0.2s ease;
       }
 
       button:hover {
-        color: var(--st-color-primary);
+        background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
+      }
+
+      /* Styles for slotted icons */
+      ::slotted([slot="icon"]) {
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        color: var(--st-color-text-muted);
       }
 
-      svg {
+      .label {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: left;
+      }
+
+      svg.chevron {
         width: 1rem;
         height: 1rem;
+        flex-shrink: 0;
         fill: none;
         stroke: currentColor;
         stroke-width: 2;
@@ -46,12 +66,10 @@ export class StNavGroup extends LitElement {
         transition: transform 0.2s ease;
       }
 
-      /* Rotate Chevron when open */
-      :host([open]) svg {
+      :host([open]) svg.chevron {
         transform: rotate(180deg);
       }
 
-      /* Modern CSS Grid Animation trick for accordion height */
       .drawer {
         display: grid;
         grid-template-rows: 0fr;
@@ -66,7 +84,6 @@ export class StNavGroup extends LitElement {
         overflow: hidden;
         display: flex;
         flex-direction: column;
-        gap: 2px;
       }
     `
   ];
@@ -77,21 +94,23 @@ export class StNavGroup extends LitElement {
 
   render() {
     return html`
-      <button @click=${this._toggle} aria-expanded=${this.open}>
-        ${this.label}
-        <svg viewBox="0 0 24 24">
-          <path d="M6 9l6 6 6-6"></path>
-        </svg>
+      <button @click=${this._toggle} aria-expanded=${this.open} style="--nav-depth: ${this.depth}">
+        <slot name="icon"></slot>
+        <span class="label">${this.label}</span>
+        <svg class="chevron" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"></path></svg>
       </button>
       
       <div class="drawer">
         <div class="drawer-content">
-          <!-- We add slight padding top/bottom so the inner links breathe -->
-          <div style="padding: 4px 0;">
-            <slot></slot>
-          </div>
+          <slot></slot>
         </div>
       </div>
     `;
   }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-vertical-nav-group': StNavGroup;
+  }
 }

package/src/components/vertical-nav/vertical-nav-item.ts

@@ -6,45 +6,68 @@ import { resetStyles } from '../../styles/reset.js';
 export class StNavItem extends LitElement {
   @property({ type: String }) href = '#';
   @property({ type: Boolean, reflect: true }) active = false;
+  @property({ type: Number }) depth = 0;
 
   static styles = [
     resetStyles,
     css`
       :host {
         display: block;
+        overflow: hidden;
       }
 
       a {
         display: flex;
         align-items: center;
-        padding: 6px var(--st-spacing-lg);
+        gap: var(--st-spacing-sm, 8px);
+        width: 100%;
+        box-sizing: border-box;
+        padding: 8px var(--st-spacing-xl);
+        padding-left: calc(var(--st-spacing-xl, 24px) + (var(--nav-depth, 0) * 16px));
         color: var(--st-color-text-muted);
         font-size: var(--st-font-size-sm);
         text-decoration: none;
-        border-left: 2px solid transparent;
+        border-left: 3px solid transparent;
         transition: all 0.15s ease;
+
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       a:hover {
         color: var(--st-color-text);
-        background-color: var(--st-color-surface);
+        background-color: var(--st-color-surface-hover, rgba(0,0,0,0.03));
+      }
+
+      ::slotted([slot="icon"]) {
+        width: 1rem;
+        height: 1rem;
+        flex-shrink: 0;
+        color: inherit;
       }
 
-      /* Active state: Purple text with a left border indicator */
       :host([active]) a {
         color: var(--st-color-primary);
         border-left-color: var(--st-color-primary);
-        font-weight: var(--st-font-weight-medium);
-        background-color: transparent;
+        font-weight: var(--st-font-weight-bold);
+        background-color: var(--st-color-primary-light, rgba(98, 0, 238, 0.05));
       }
     `
   ];
 
   render() {
     return html`
-      <a href=${this.href} part="link">
+      <a href=${this.href} part="link" style="--nav-depth: ${this.depth}">
+        <slot name="icon"></slot>
         <slot></slot>
       </a>
     `;
   }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-vertical-nav-item': StNavItem;
+  }
 }