@sondor-technology/sondor-components 1.0.2 → 1.0.4

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

@@ -1,8 +1,9 @@
 import { LitElement } from 'lit';
 import { IconName } from './icon-paths.js';
+export type IconVariant = 'outline' | 'solid';
 export declare class StIcon extends LitElement {
     name: IconName | string;
-    variant: 'outline' | 'solid';
+    variant: IconVariant;
     color: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
     size: 'sm' | 'md' | 'lg' | 'xl';
     static styles: import("lit").CSSResult[];

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

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAa,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGtD,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAM;IAC7B,OAAO,EAAE,SAAS,GAAG,OAAO,CAAa;IAG1B,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IAGlG,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAElF,MAAM,CAAC,MAAM,4BAsCX;IAEF,MAAM,yCAmBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAa,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGtD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9C,qBACa,MAAO,SAAQ,UAAU;IACR,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAM;IAC7B,OAAO,EAAE,WAAW,CAAa;IAGlB,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAa;IAGlG,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAElF,MAAM,CAAC,MAAM,4BAsCX;IAEF,MAAM,yCAmBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/modal/modal.d.ts

@@ -8,10 +8,21 @@ export declare class StModal extends LitElement {
      * Title text displayed in the modal header.
      */
     heading: string;
+    /**
+     * Size of the modal (sm, md, lg, xl, xxl).
+     */
+    size: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
+     */
+    static: boolean;
     private dialogEl;
+    private isClosing;
     static styles: import("lit").CSSResult[];
     updated(changedProperties: PropertyValues): void;
+    private closeWithAnimation;
     private handleClose;
+    private handleCancel;
     private onDialogClose;
     private handleBackdropClick;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAI5D,qBACa,OAAQ,SAAQ,UAAU;IACrC;;OAEG;IACyC,IAAI,UAAS;IAEzD;;OAEG;IACyB,OAAO,SAAM;IAExB,OAAO,CAAC,QAAQ,CAAqB;IAEtD,MAAM,CAAC,MAAM,4BAwEX;IAEF,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAUxC;IAED,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAY3B,MAAM,yCAuBL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAW,MAAM,KAAK,CAAC;AAIrE,qBACa,OAAQ,SAAQ,UAAU;IACrC;;OAEG;IACyC,IAAI,UAAS;IAEzD;;OAEG;IACyB,OAAO,SAAM;IAEzC;;OAEG;IACyB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAQ;IAE3E;;OAEG;IAC0B,MAAM,UAAS;IAE3B,OAAO,CAAC,QAAQ,CAAqB;IAEtD,OAAO,CAAC,SAAS,CAAS;IAE1B,MAAM,CAAC,MAAM,4BAkHX;IAEF,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAYxC;IAED,OAAO,CAAC,kBAAkB;IAiB1B,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,mBAAmB;IAe3B,MAAM,yCA4BL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/modal/modal.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { resetStyles } from '../../styles/reset.js';
 let StModal = class StModal extends LitElement {
@@ -18,23 +18,55 @@ let StModal = class StModal extends LitElement {
          * Title text displayed in the modal header.
          */
         this.heading = '';
+        /**
+         * Size of the modal (sm, md, lg, xl, xxl).
+         */
+        this.size = 'md';
+        /**
+         * If true, the modal cannot be closed by clicking the backdrop or pressing Esc.
+         */
+        this.static = false;
+        this.isClosing = false;
     }
     updated(changedProperties) {
         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();
             }
         }
     }
+    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);
+    }
     handleClose() {
         this.open = false;
         this.dispatchEvent(new CustomEvent('st-close', { bubbles: true, composed: true }));
     }
+    handleCancel(e) {
+        e.preventDefault();
+        if (!this.static) {
+            this.handleClose();
+        }
+    }
     onDialogClose() {
         if (this.open) {
             this.open = false;
@@ -42,28 +74,36 @@ let StModal = class StModal extends LitElement {
         }
     }
     handleBackdropClick(e) {
+        if (this.static)
+            return;
         const rect = this.dialogEl.getBoundingClientRect();
-        if (e.clientX < rect.left ||
+        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();
         }
     }
     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) => 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) => e.stopPropagation()}>
           <slot></slot>
@@ -88,17 +128,59 @@ StModal.styles = [
         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;
@@ -154,6 +236,12 @@ __decorate([
 __decorate([
     property({ type: String })
 ], StModal.prototype, "heading", void 0);
+__decorate([
+    property({ type: String })
+], StModal.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], StModal.prototype, "static", void 0);
 __decorate([
     query('dialog')
 ], StModal.prototype, "dialogEl", void 0);

package/dist/components/router/router.d.ts

@@ -1,7 +1,31 @@
-declare class AppRouter {
-    constructor();
+export interface RouteDefinition {
+    component: string;
+    [key: string]: unknown;
+}
+export type RouteConfig = Record<string, RouteDefinition>;
+export interface RouteMatch {
+    path: string;
+    component: string;
+    params: Record<string, string>;
+    definition: RouteDefinition;
+}
+export declare class AppRouter {
+    private _routes;
+    private _initialized;
+    constructor(routes?: RouteConfig);
+    /**
+     * Register or update the route configuration for this application.
+     */
+    setRoutes(routes: RouteConfig): void;
+    /**
+     * Programmatically navigate to an internal path.
+     */
+    navigate(path: string): void;
+    /**
+     * Matches a URL path against the registered routes.
+     */
+    matchRoute(currentPath: string): RouteMatch | null;
     private _notify;
 }
 export declare const router: AppRouter;
-export {};
 //# sourceMappingURL=router.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../src/components/router/router.ts"],"names":[],"mappings":"AAAA,cAAM,SAAS;IACb,cAoCC;IAED,OAAO,CAAC,OAAO;CAKhB;AAED,eAAO,MAAM,MAAM,WAAkB,CAAC"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../src/components/router/router.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;AAE1D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,UAAU,EAAE,eAAe,CAAC;CAC7B;AASD,qBAAa,SAAS;IACpB,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,YAAY,CAAS;IAE7B,YAAY,MAAM,CAAC,EAAE,WAAW,EA+B/B;IAED;;OAEG;IACI,SAAS,CAAC,MAAM,EAAE,WAAW,QAUnC;IAED;;OAEG;IACI,QAAQ,CAAC,IAAI,EAAE,MAAM,QAG3B;IAED;;OAEG;IACI,UAAU,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,GAAG,IAAI,CA+BxD;IAED,OAAO,CAAC,OAAO;CAahB;AAGD,eAAO,MAAM,MAAM,WAAkB,CAAC"}

package/dist/components/router/router.js

@@ -1,37 +1,97 @@
-class AppRouter {
-    constructor() {
+function getRouteWeight(pattern) {
+    const segments = pattern.split('/').filter(Boolean);
+    return segments.reduce((weight, seg) => {
+        return weight + (seg.startsWith(':') ? 1 : 10);
+    }, 0);
+}
+export class AppRouter {
+    constructor(routes) {
+        this._routes = {};
+        this._initialized = false;
+        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) => el && typeof el.hasAttribute === 'function' && el.hasAttribute('href'));
             if (!link)
                 return;
             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);
             }
         });
-        // Broadcast initial route on load
-        // Use setTimeout to ensure all Lit components have registered first
-        setTimeout(() => this._notify(), 0);
+    }
+    /**
+     * Register or update the route configuration for this application.
+     */
+    setRoutes(routes) {
+        this._routes = routes;
+        // 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.
+     */
+    navigate(path) {
+        window.history.pushState(null, '', path);
+        this._notify();
+    }
+    /**
+     * Matches a URL path against the registered routes.
+     */
+    matchRoute(currentPath) {
+        const sortedRoutes = Object.entries(this._routes).sort(([patternA], [patternB]) => getRouteWeight(patternB) - getRouteWeight(patternA));
+        for (const [pattern, routeDef] of sortedRoutes) {
+            const paramNames = [];
+            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 = {};
+                paramNames.forEach((name, index) => {
+                    params[name] = decodeURIComponent(match[index + 1]);
+                });
+                return {
+                    path: currentPath,
+                    component: routeDef.component,
+                    params,
+                    definition: routeDef
+                };
+            }
+        }
+        return null;
     }
     _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/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"}