vanilla-jui 1.7.41 → 1.7.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.7.41",
+  "version": "1.7.42",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [

package/src/components/swiper.ts

@@ -31,7 +31,7 @@ const AUTOPLAY_DELAY_FLOOR = 16;
 
 export interface SwiperClassNames {
   root: string;
-  wrapper: string;
+  wrap: string;
   slide: string;
   image: string;
   title: string;
@@ -174,7 +174,7 @@ export type Swiper = SwiperBase & {
 
 const DEFAULT_CLASS_NAMES: SwiperClassNames = {
   root: 'j-swiper',
-  wrapper: 'swiper-wrapper',
+  wrap: 'swiper-wrap',
   slide: 'swiper-slide',
   image: 'swiper-image',
   title: 'swiper-slide-title',
@@ -908,8 +908,8 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
         return view;
       };
       wrapper = jsx('div', {
-        className: props.className.wrapper,
-        'data-swiper-wrapper': '',
+        className: props.className.wrap,
+        'data-swiper-wrap': '',
         'aria-live': 'polite',
         children: () =>
           state.loading
@@ -974,7 +974,7 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
                   ),
                 'data-action': 'prev',
                 'data-swiper-navigation': 'prev',
-                'aria-label': 'Previous slide',
+                'aria-label': 'Previous Slide',
                 disabled: () => !props.loop && state.index <= 0,
                 children: icon('arrow-left'),
               })
@@ -992,7 +992,7 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
                   ),
                 'data-action': 'next',
                 'data-swiper-navigation': 'next',
-                'aria-label': 'Next slide',
+                'aria-label': 'Next Slide',
                 disabled: () => !props.loop && state.index >= realCount() - 1,
                 children: icon('arrow-right'),
               })

package/src/css/layout.css

@@ -892,11 +892,11 @@
     Skeleton
   ============================================ */
   .j-skeleton {
-    display: block;
-    width: 100%;
-    min-height: var(--el-height-2xs);
-    border-radius: var(--radius-sm);
-    background: var(--ui-bg-muted);
+    display: var(--skeleton-display, block);
+    width: var(--skeleton-width, 100%);
+    height: var(--skeleton-height, var(--el-height-2xs));
+    border-radius: var(--skeleton-radius, var(--radius-sm));
+    background: var(--skeleton-bg, var(--ui-bg-muted));
     color: transparent;
     pointer-events: none;
     user-select: none;
@@ -909,41 +909,39 @@
   }
 
   .j-skeleton.skeleton-inline {
-    display: inline-block;
-    width: 8rem;
+    --skeleton-display: inline-block;
+    --skeleton-width: 8rem;
+    --skeleton-height: var(--el-height-xs);
     vertical-align: middle;
   }
 
   .j-skeleton.skeleton-text {
-    height: var(--el-height-sm);
-    min-height: var(--el-height-sm);
+    --skeleton-height: var(--el-height-sm);
   }
 
   .j-skeleton.skeleton-title {
-    width: 60%;
-    height: var(--el-height-md);
-    min-height: var(--el-height-md);
+    --skeleton-width: 60%;
+    --skeleton-height: var(--el-height);
   }
 
   .j-skeleton.skeleton-block {
-    height: calc(var(--el-height-md) * 4);
-    min-height: calc(var(--el-height-md) * 4);
+    --skeleton-height: calc(var(--el-height) * 2);
   }
 
   .j-skeleton.skeleton-avatar,
   .j-skeleton.skeleton-circle {
+    --skeleton-radius: 999px;
     aspect-ratio: 1;
-    border-radius: 999px;
   }
 
   .j-skeleton.skeleton-avatar {
-    width: var(--el-height-md);
-    min-height: var(--el-height-md);
+    --skeleton-width: var(--el-height);
+    --skeleton-height: var(--el-height);
   }
 
   .j-skeleton.skeleton-button {
-    width: 5rem;
-    min-height: var(--el-height-md);
+    --skeleton-width: 4rem;
+    --skeleton-height: var(--el-height);
   }
 
   .j-skeleton.skeleton-image {

package/src/css/themes/default/swiper.css

@@ -14,7 +14,7 @@
     border-radius: var(--radius-md);
   }
 
-  .j-swiper .swiper-wrapper {
+  .j-swiper .swiper-wrap {
     display: flex;
     will-change: transform;
     position: relative;
@@ -31,7 +31,7 @@
     color: inherit;
     text-decoration: none;
     user-select: none;
-    width: 100%;
+    width: var(--swiper-slide-width, 100%);
     min-width: 100%;
     aspect-ratio: inherit;
     border-radius: inherit;
@@ -178,7 +178,6 @@
   .j-swiper .swiper-navigation svg {
     width: 16px;
     height: 16px;
-
     pointer-events: none;
   }