@sondor-technology/sondor-components 1.0.1-develop.2 → 1.0.1-develop.4

package/dist/components/icon/icon-paths.d.ts

@@ -111,6 +111,22 @@ export declare const iconPaths: {
         outline: import("lit-html").TemplateResult<2>;
         solid: import("lit-html").TemplateResult<2>;
     };
+    calender: {
+        outline: import("lit-html").TemplateResult<2>;
+        solid: import("lit-html").TemplateResult<2>;
+    };
+    user: {
+        outline: import("lit-html").TemplateResult<2>;
+        solid: import("lit-html").TemplateResult<2>;
+    };
+    home: {
+        outline: import("lit-html").TemplateResult<2>;
+        solid: import("lit-html").TemplateResult<2>;
+    };
+    "circle-cross": {
+        outline: import("lit-html").TemplateResult<2>;
+        solid: import("lit-html").TemplateResult<2>;
+    };
 };
 export type IconName = keyof typeof iconPaths;
 //# sourceMappingURL=icon-paths.d.ts.map

package/dist/components/icon/icon-paths.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-paths.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon-paths.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;IACpB,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,iBAAiB;QACf,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,GAAG;QACD,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QAIP,KAAK;;IAKP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,KAAK;QACH,OAAO;QACP,KAAK;;IAEP,WAAW;QACT,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,sBAAsB;QACpB,OAAO;QACP,KAAK;;IAEP,wBAAwB;QACtB,OAAO;QACP,KAAK;;IAEP,kBAAkB;QAChB,OAAO;QACP,KAAK;;IAEP,qBAAqB;QACnB,OAAO;QACP,KAAK;;CAER,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC"}
+{"version":3,"file":"icon-paths.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon-paths.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;IACpB,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,gBAAgB;QACd,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,iBAAiB;QACf,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,GAAG;QACD,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,SAAS;QACP,OAAO;QACP,KAAK;;IAEP,cAAc;QACZ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QACP,KAAK;;IAEP,OAAO;QACL,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,eAAe;QACb,OAAO;QAIP,KAAK;;IAKP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,KAAK;QACH,OAAO;QACP,KAAK;;IAEP,WAAW;QACT,OAAO;QACP,KAAK;;IAEP,MAAM;QACJ,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,sBAAsB;QACpB,OAAO;QACP,KAAK;;IAEP,wBAAwB;QACtB,OAAO;QACP,KAAK;;IAEP,kBAAkB;QAChB,OAAO;QACP,KAAK;;IAEP,qBAAqB;QACnB,OAAO;QACP,KAAK;;IAEP,QAAQ;QACN,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,IAAI;QACF,OAAO;QACP,KAAK;;IAEP,cAAc;QACZ,OAAO;QACP,KAAK;;CAER,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,SAAS,CAAC"}

package/dist/components/icon/icon-paths.js

@@ -118,4 +118,20 @@ 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>`,
+    },
 };

package/dist/components/skeleton/skeleton.d.ts

@@ -1,11 +1,10 @@
 import { LitElement } from 'lit';
 export declare class StSkeleton extends LitElement {
-    /** Variant shape: 'text' | 'circular' | 'rectangular' */
     variant: 'text' | 'circular' | 'rectangular';
-    /** Custom width override (e.g., '200px', '50%') */
+    animation: 'shimmer' | 'pulse' | 'none';
     width: string;
-    /** Custom height override (e.g., '40px', '1rem') */
     height: string;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
     static styles: import("lit").CSSResult[];
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/skeleton/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACxC,yDAAyD;IAC7B,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAU;IAElF,mDAAmD;IACvB,KAAK,SAAM;IAEvC,oDAAoD;IACxB,MAAM,SAAM;IAExC,MAAM,CAAC,MAAM,4BAqCX;IAEF,MAAM,yCAML;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACG,OAAO,EAAE,MAAM,GAAG,UAAU,GAAG,aAAa,CAAU;IACtD,SAAS,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IACnE,KAAK,SAAM;IACX,MAAM,SAAM;IAGxC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,QAkBhE;IAED,MAAM,CAAC,MAAM,4BAyFX;IAEF,MAAM,yCAIL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/components/skeleton/skeleton.js

@@ -10,19 +10,35 @@ import { resetStyles } from '../../styles/reset.js';
 let StSkeleton = class StSkeleton extends LitElement {
     constructor() {
         super(...arguments);
-        /** Variant shape: 'text' | 'circular' | 'rectangular' */
         this.variant = 'text';
-        /** Custom width override (e.g., '200px', '50%') */
+        this.animation = 'shimmer';
         this.width = '';
-        /** Custom height override (e.g., '40px', '1rem') */
         this.height = '';
     }
+    // Apply properties directly to the :host as CSS variables when they change
+    updated(changedProperties) {
+        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');
+            }
+        }
+    }
     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>`;
     }
 };
 StSkeleton.styles = [
@@ -30,12 +46,38 @@ StSkeleton.styles = [
     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%,
@@ -43,29 +85,58 @@ StSkeleton.styles = [
           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; }
       }
     `
 ];
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], StSkeleton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], StSkeleton.prototype, "animation", void 0);
 __decorate([
     property({ type: String })
 ], StSkeleton.prototype, "width", void 0);

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

@@ -2,8 +2,14 @@ import { LitElement } from 'lit';
 export declare class StNavGroup extends LitElement {
     label: string;
     open: boolean;
+    depth: number;
     static styles: import("lit").CSSResult[];
     private _toggle;
     render(): import("lit-html").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-vertical-nav-group': StNavGroup;
+    }
+}
 //# sourceMappingURL=vertical-nav-group.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"vertical-nav-group.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACZ,KAAK,SAAM;IACK,IAAI,UAAS;IAEzD,MAAM,CAAC,MAAM,4BA8DX;IAEF,OAAO,CAAC,OAAO;IAIf,MAAM,yCAkBL;CACF"}
+{"version":3,"file":"vertical-nav-group.d.ts","sourceRoot":"","sources":["../../../src/components/vertical-nav/vertical-nav-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,UAAW,SAAQ,UAAU;IACZ,KAAK,SAAM;IACK,IAAI,UAAS;IAC7B,KAAK,SAAK;IAEtC,MAAM,CAAC,MAAM,4BA8EX;IAEF,OAAO,CAAC,OAAO;IAIf,MAAM,yCAcL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,UAAU,CAAC;KACrC;CACF"}

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.1-develop.2",
+  "version": "1.0.1-develop.4",
   "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/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;
+  }
 }