@sondor-technology/sondor-components 1.0.2 → 1.0.3

package/dist/components/vertical-nav/vertical-nav-group.js

@@ -12,25 +12,22 @@ let StNavGroup = class StNavGroup extends LitElement {
         super(...arguments);
         this.label = '';
         this.open = false;
+        this.depth = 0;
     }
     _toggle() {
         this.open = !this.open;
     }
     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>
     `;
@@ -41,32 +38,51 @@ StNavGroup.styles = [
     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));
       }
 
-      svg {
+      /* Styles for slotted icons */
+      ::slotted([slot="icon"]) {
         width: 1rem;
         height: 1rem;
+        flex-shrink: 0;
+        color: var(--st-color-text-muted);
+      }
+
+      .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;
@@ -75,12 +91,10 @@ StNavGroup.styles = [
         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;
@@ -95,7 +109,6 @@ StNavGroup.styles = [
         overflow: hidden;
         display: flex;
         flex-direction: column;
-        gap: 2px;
       }
     `
 ];
@@ -105,6 +118,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], StNavGroup.prototype, "open", void 0);
+__decorate([
+    property({ type: Number })
+], StNavGroup.prototype, "depth", void 0);
 StNavGroup = __decorate([
     customElement('st-vertical-nav-group')
 ], StNavGroup);

package/dist/components/vertical-nav/vertical-nav-item.d.ts

@@ -2,7 +2,13 @@ import { LitElement } from 'lit';
 export declare class StNavItem extends LitElement {
     href: string;
     active: boolean;
+    depth: number;
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-vertical-nav-item': StNavItem;
+    }
+}
 //# sourceMappingURL=vertical-nav-item.d.ts.map

package/dist/components/vertical-nav/vertical-nav-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vertical-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAO;IACK,MAAM,UAAS;IAE3D,MAAM,CAAC,MAAM,4BA+BX;IAEF,MAAM,yCAML;CACF"}
+{"version":3,"file":"vertical-nav-item.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACX,IAAI,SAAO;IACK,MAAM,UAAS;IAC/B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8CX;IAEF,MAAM,yCAOL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,SAAS,CAAC;KACnC;CACF"}

package/dist/components/vertical-nav/vertical-nav-item.js

@@ -12,10 +12,12 @@ let StNavItem = class StNavItem extends LitElement {
         super(...arguments);
         this.href = '#';
         this.active = false;
+        this.depth = 0;
     }
     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>
     `;
@@ -26,30 +28,45 @@ StNavItem.styles = [
     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));
       }
     `
 ];
@@ -59,6 +76,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], StNavItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Number })
+], StNavItem.prototype, "depth", void 0);
 StNavItem = __decorate([
     customElement('st-vertical-nav-item')
 ], StNavItem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sondor-technology/sondor-components",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "main": "src/index.js",
   "types": "dist/index.d.ts",
@@ -101,6 +101,10 @@
       "types": "./dist/components/icon/icon.d.ts",
       "default": "./dist/components/icon/icon.js"
     },
+    "./icon-paths": {
+      "types": "./dist/components/icon/icon-paths.d.ts",
+      "default": "./dist/components/icon/icon-paths.js"
+    },
     "./footer": {
       "types": "./dist/components/footer/footer.d.ts",
       "default": "./dist/components/footer/footer.js"

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/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>

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