@aquera/nile-elements 1.3.9-beta-1.2 → 1.3.9-beta-1.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.3.9-beta-1.2",
+  "version": "1.3.9-beta-1.1",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-skeleton-loader/nile-skeleton-loader.css.ts

@@ -5,11 +5,15 @@ export const styles = css`
     -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
     -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
     text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
-    display: inline-block;
+    box-sizing: border-box;
+    display: block;
+    width: 100%;
   }
 
   .skeleton-loader {
-    display: inline-block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     width: 100%;
   }
 

package/src/nile-skeleton-loader/nile-skeleton-loader.ts

@@ -28,13 +28,10 @@ export class NileSkeletonLoader extends NileElement {
     if (typeof value === 'number') {
       return `${value}px`;
     }
-    // If it's a string, check if it's a plain number (no units)
     const trimmed = String(value).trim();
-    // Check if it's a numeric value without units (matches numbers, optionally with decimals)
     if (/^\d+(\.\d+)?$/.test(trimmed)) {
       return `${trimmed}px`;
     }
-    // If it already has units (px, %, em, rem, etc.), return as-is
     return trimmed;
   }
 
@@ -43,7 +40,7 @@ export class NileSkeletonLoader extends NileElement {
     if (formattedWidth) {
       return formattedWidth;
     }
-    return this.variant === 'circular' ? '40px' : '100%';
+    return this.variant === 'circular' ? '40px' : 'calc(100% - 20px)';
   }
 
   private getComputedHeight(): string {