vanilla-jui 1.7.21 → 1.7.23

package/package.json

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

package/src/components/swiper.ts

@@ -259,6 +259,18 @@ function cloneData(data: SwiperDataItem[] | undefined): SwiperDataItem[] {
   return Array.isArray(data) ? data.map((item) => ({ ...item })) : [];
 }
 
+function cloneRenderableContent<TContext>(
+  content: RenderableContent<TContext>
+): RenderableContent<TContext> {
+  if (typeof Node !== 'undefined' && content instanceof Node) {
+    return content.cloneNode(true);
+  }
+  if (Array.isArray(content)) {
+    return content.map((item) => cloneRenderableContent(item));
+  }
+  return content;
+}
+
 function cloneDataSource(source: SwiperDataSource): SwiperDataSource {
   return Array.isArray(source) ? cloneData(source) : source;
 }
@@ -774,7 +786,7 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
     const realIndex = (): number =>
       toRealIndexFromTrackPosition(trackIndexAccessor());
     const slideContent = () => {
-      const { item } = itemAccessor();
+      const { item, clone } = itemAccessor();
       if (item.children != null) {
         const context = {
           swiper,
@@ -783,11 +795,11 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
             return realIndex();
           },
         } as SwiperSlideContext;
-        return asRenderable(
+        const content =
           typeof item.children === 'function'
             ? item.children(context)
-            : item.children
-        );
+            : item.children;
+        return asRenderable(clone ? cloneRenderableContent(content) : content);
       }
       return [
         item.image

package/src/css/layout.css

@@ -156,8 +156,10 @@
   .container {
     width: 100%;
     max-width: var(--screen-xl, 1200px);
-    margin-inline: auto;
-    padding-inline: var(--container-padding-inline, 1rem);
+    /* margin-inline: auto; */
+    /* padding-inline: 1rem; */
+    margin: 0 auto;
+    padding: 0 1rem;
   }
 
   .auto-container {
@@ -168,8 +170,9 @@
   }
 
   .block-center {
-    margin-inline: auto;
     height: fit-content;
+    margin: 0 auto;
+    /* margin-inline: auto; */
   }
 
   .group {

package/src/css/themes/default/avatar.css

@@ -77,7 +77,8 @@
   }
 
   .j-avatar-group .j-avatar:not(:first-child) {
-    margin-inline-start: calc(var(--s3) * -1);
+    /* margin-inline-start: calc(var(--s3) * -1); */
+    margin-left: calc(var(--s3) * -1);
   }
 
   .j-avatar-group .j-avatar:last-child {

package/src/css/themes/default/breadcrumb.css

@@ -92,7 +92,8 @@
   }
 
   .j-breadcrumb li:first-child a {
-    padding-inline-start: 0;
+    /* padding-inline-start: 0; */
+    padding-left: 0;
   }
 
   .j-breadcrumb.is-center ul,

package/src/css/themes/default/button.css

@@ -195,7 +195,10 @@
     opacity: var(--opacity-active);
   }
 
-  .j-button:not(:disabled).is-active,
+  .j-button:not(:disabled).is-active {
+    --btn-border-color: var(--tone-solid);
+  }
+
   .j-button:not(:disabled):focus,
   .j-button:not(:disabled):focus-within,
   .j-button:not(:disabled):focus-visible {

package/src/css/themes/default/editor.css

@@ -93,7 +93,7 @@
     font-size: 2em;
     letter-spacing: -0.02em;
     line-height: 1.25;
-    margin-block: 0;
+    margin: 0;
   }
 
   .j-editor h2 {
@@ -287,7 +287,8 @@
 
   /* Definition List */
   .j-editor dl {
-    margin-block: var(--editor-block-space);
+    /* margin-block: var(--editor-block-space); */
+    margin: var(--editor-block-space) 0;
   }
 
   .j-editor dt {
@@ -390,7 +391,8 @@
   }
 
   .j-editor blockquote > * {
-    margin-block: 0;
+    /* margin-block: 0; */
+    margin: 0;
   }
 
   .j-editor blockquote > * + * {
@@ -399,7 +401,8 @@
 
   .j-editor cite {
     display: block;
-    margin-block: 0.25rem;
+    /* margin-block: 0.25rem; */
+    margin: 0.25rem 0;
     font-style: normal;
     font-size: 0.875em;
     color: var(--editor-caption-fg);
@@ -746,13 +749,15 @@
     border-radius: 9999px;
     overflow: hidden;
     height: 0.625em;
-    margin-block: 0.25em;
+    /* margin-block: 0.25em; */
+    margin: 0.25em 0;
   }
 
   .j-editor meter {
     max-width: 100%;
     height: 1em;
-    margin-block: 0.125em;
+    /* margin-block: 0.125em; */
+    margin: 0.125em 0;
   }
 
   .j-editor progress::-webkit-progress-value,
@@ -773,7 +778,8 @@
   ============================================ */
   .j-editor address {
     font-style: normal;
-    margin-block: var(--editor-block-space);
+    /* margin-block: var(--editor-block-space); */
+    margin: var(--editor-block-space) 0;
     padding: 1em 1.25em;
     background-color: var(--editor-bg-subtle);
     border-radius: var(--radius-lg);
@@ -794,7 +800,8 @@
 
   .j-editor table,
   .j-editor .block {
-    margin-block: var(--editor-block-space);
+    /* margin-block: var(--editor-block-space); */
+    margin: var(--editor-block-space) 0;
   }
 
   .j-editor table {

package/src/css/themes/default/form.css

@@ -139,22 +139,25 @@
     color: var(--ui-fg-muted);
     appearance: none;
     border-width: 0;
-    border-inline-end-width: 1px;
+    /* border-inline-end-width: 1px; */
+    border-right-width: 1px;
     border-radius: 0;
     border-color: var(--ui-border);
     background-color: transparent;
-    margin: calc(var(--space) * -2);
+    margin: calc(var(--s2) * -1);
     font-size: var(--input-font-size);
   }
 
   .j-input[type='file']::file-selector-button,
   .j-font-sm .j-input[type='file']::file-selector-button {
-    margin-inline-end: var(--s2);
+    /* margin-inline-end: var(--s2); */
+    margin-right: var(--s2);
     padding: var(--s2);
   }
 
   .j-font-md .j-input[type='file']::file-selector-button {
-    margin-inline-end: calc(var(--space) * 2.75);
+    /* margin-inline-end: calc(var(--space) * 2.75); */
+    margin-right: calc(var(--space) * 2.75);
     padding: calc(var(--space) * 2.75);
   }
 
@@ -615,11 +618,14 @@
   }
 
   .input-inner-group .el-addon + .j-input {
-    padding-inline: 0 var(--space);
+    /* padding-inline: 0 var(--space); */
+    padding-left: 0;
+    padding-right: var(--space);
   }
 
   .input-inner-group .el-addon + .j-select {
-    padding-inline-start: 2px;
+    /* padding-inline-start: 2px; */
+    padding-left: 2px;
   }
 
   .input-inner-group .el-addon {
@@ -655,13 +661,17 @@
   .input-inner-group .el-addon.is-text {
     display: flex;
     align-items: center;
-    padding-inline: var(--s2);
     user-select: none;
+    /* padding-inline: var(--s2); */
+    padding-left: var(--s2);
+    padding-right: var(--s2);
   }
 
   .input-inner-group .el-addon.inner-wrap {
     gap: var(--space);
-    padding-inline: var(--space);
+    /* padding-inline: var(--space); */
+    padding-left: var(--space);
+    padding-right: var(--space);
   }
 
   .input-group .el-addon,
@@ -801,16 +811,11 @@
   /*************************
    * .mobile
    *************************/
-  .mobile .j-input[type='file']::file-selector-button {
-    padding: var(--s3);
-    margin: calc(var(--space) * -1.7);
-    margin-inline-end: calc(var(--space) * 2.75);
-  }
-
-  .mobile.j-font-md .j-input.is-lg[type='file']::file-selector-button {
-    margin: calc(var(--space) * -1.4);
+  .mobile input.j-input[type='file'] {
+    --input-padding: 0.5rem;
   }
 
+  .mobile .j-input[type='file'],
   .mobile .j-textarea {
     width: 100%;
   }

package/src/css/themes/default/theme-palette.css

@@ -1,6 +1,6 @@
 @layer components {
   .j-theme-palette {
-    padding: var(--s4) var(--s4) var(--s8);
+    padding: 1rem 1rem 2rem;
   }
 
   .j-theme-palette .palette-container,
@@ -36,7 +36,7 @@
 
   .j-theme-palette [data-theme-group='theme'] .j-button {
     justify-content: flex-start;
-    padding-inline: var(--s2);
+    --btn-padding: 0 var(--s2);
   }
 
   .j-theme-palette .j-button .item-hex {
@@ -49,11 +49,11 @@
   }
 
   .mobile .j-theme-palette {
-    padding-block: var(--s4) 4rem;
+    padding: 1rem 1rem 4rem;
   }
 
   .mobile .j-theme-palette [data-theme-group='theme'] .j-button {
-    padding-inline: 6px;
+    --btn-padding: 0 6px;
   }
 
   .j-theme-palette .j-button .button-text {

package/src/css/tokens.css

@@ -1261,15 +1261,15 @@
     --font-size-xl: 1.25rem;
     --font-size-2xl: 1.5rem;
 
-    --el-height-3xs: 1.75rem;
-    --el-height-2xs: 2rem;
-    --el-height-xs: 2.25rem;
-    --el-height-sm: 2.5rem;
-    --el-height-md: 2.75rem;
-    --el-height-lg: 3rem;
-    --el-height-xl: 3.25rem;
-    --el-height-2xl: 3.5rem;
-    --el-height-3xl: 3.75rem;
+    --el-height-3xs: 1.5rem;
+    --el-height-2xs: 1.75rem;
+    --el-height-xs: 2rem;
+    --el-height-sm: 2.25rem;
+    --el-height-md: 2.5rem;
+    --el-height-lg: 2.75rem;
+    --el-height-xl: 3rem;
+    --el-height-2xl: 3.25rem;
+    --el-height-3xl: 3.5rem;
   }
 
   .mobile.j-font-md {
@@ -1280,14 +1280,14 @@
     --font-size-xl: 1.5rem;
     --font-size-2xl: 1.75rem;
 
-    --el-height-3xs: 2rem;
-    --el-height-2xs: 2.25rem;
-    --el-height-xs: 2.5rem;
-    --el-height-sm: 2.75rem;
-    --el-height-md: 3rem;
-    --el-height-lg: 3.25rem;
-    --el-height-xl: 3.5rem;
-    --el-height-2xl: 3.75rem;
-    --el-height-3xl: 4rem;
+    --el-height-3xs: 1.75rem;
+    --el-height-2xs: 2rem;
+    --el-height-xs: 2.25rem;
+    --el-height-sm: 2.5rem;
+    --el-height-md: 2.75rem;
+    --el-height-lg: 3rem;
+    --el-height-xl: 3.25rem;
+    --el-height-2xl: 3.5rem;
+    --el-height-3xl: 3.75rem;
   }
 }