vanilla-jui 1.3.10 → 1.4.0

package/src/css/components.css

@@ -24,3 +24,4 @@
 @import url('./toolbar.css');
 @import url('./menu.css');
 @import url('./toc.css');
+@import url('./form.css');

package/src/css/drop.css

@@ -7,7 +7,7 @@
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.2s ease;
-    z-index: var(--z-index-drop);
+    z-index: var(--z-drop);
   }
 
   .j-drop.is-active {

package/src/css/flow.css

@@ -1,6 +1,6 @@
 @layer components {
   .j-flow {
-    --flow-gap: calc(var(--space) * 2);
+    --flow-gap: var(--s2);
     --flow-step-size: 28px;
     --flow-border: 1px solid var(--ui-border-subtle);
 

package/src/css/form.css

@@ -1,4 +1,4 @@
-@layer form {
+@layer components {
 
   .j-form,
   .j-form .form-item,
@@ -8,16 +8,16 @@
 
   .j-form.is-vertical {
     flex-direction: column;
-    gap: var(--form-gap-vertical, calc(var(--space) * 2));
+    gap: var(--form-gap-vertical, var(--s2));
   }
 
   .j-form.is-horizontal {
     flex-direction: row;
-    gap: var(--form-gap-horizontal, calc(var(--space) * 2));
+    gap: var(--form-gap-horizontal, var(--s2));
   }
 
   .j-form .form-item {
-    gap: var(--form-label-gap, calc(var(--space) * 1));
+    gap: var(--form-label-gap, var(--space));
     margin: 0;
   }
 
@@ -36,7 +36,7 @@
 
   .j-form .form-item .item-label,
   .j-form .form-item .form-control {
-    gap: var(--form-label-gap, calc(var(--space) * 1));
+    gap: var(--form-label-gap, var(--space));
   }
 
   .j-form.is-horizontal .form-item .item-label {
@@ -67,14 +67,14 @@
 
   .j-form .form-buttons {
     display: flex;
-    gap: var(--form-buttons-gap, calc(var(--space) * 2));
+    gap: var(--form-buttons-gap, var(--s2));
     margin: 0;
   }
 
   /* input */
   .j-input:not([type='checkbox']) {
     display: block;
-    padding: var(--input-padding, calc(var(--space) * 1.5) calc(var(--space) * 2));
+    padding: var(--input-padding, calc(var(--space) * 1.5) var(--s2));
     border-width: var(--input-border-width, 1px);
     border-style: var(--input-border-style, solid);
     border-color: var(--input-border-color, var(--ui-input-border));
@@ -121,8 +121,8 @@
     border-inline-end-width: 1px;
     border-radius: 0;
     margin: calc(var(--space) * -2);
-    margin-inline-end: calc(var(--space) * 2);
-    padding: calc(var(--space) * 2);
+    margin-inline-end: var(--s2);
+    padding: var(--s2);
     border-color: var(--input-border-color, var(--ui-input-border));
     background-color: var(--ui-surface-subtle);
     font-size: var(--font-size-sm, 0.75rem);
@@ -194,19 +194,19 @@
 
   .j-radio.is-vertical {
     flex-direction: column;
-    /* --radio-gap: calc(var(--space) * 3); */
+    /* --radio-gap: var(--s3); */
   }
 
   .j-radio,
   .j-radio.is-horizontal {
     flex-direction: row;
-    /* --radio-gap: calc(var(--space) * 4); */
+    /* --radio-gap: var(--s4); */
   }
 
   .j-radio label {
     display: flex;
     align-items: center;
-    gap: var(--radio-label-gap, calc(var(--space) * 2));
+    gap: var(--radio-label-gap, var(--s2));
     font-size: var(--font-size-md);
     padding: calc(var(--space)*2);
     border-radius: var(--radius-md);
@@ -287,7 +287,7 @@
   .j-radio.is-group label span.radio-text {
     cursor: pointer;
     background-color: var(--ui-bg);
-    padding: var(--radio-group-padding, calc(var(--space) * 1.5) calc(var(--space) * 3));
+    padding: var(--radio-group-padding, calc(var(--space) * 1.5) var(--s3));
     height: var(--el-height-md);
     line-height: var(--line-height);
     position: relative;
@@ -323,7 +323,7 @@
   }
 
   .j-radio.is-group.is-sm label span.radio-text {
-    --radio-group-padding: calc(var(--space) * 1) calc(var(--space) * 2);
+    --radio-group-padding: var(--space) var(--s2);
     height: var(--el-height-sm);
   }
 
@@ -337,7 +337,7 @@
   }
 
   .j-radio.is-group.is-lg label span.radio-text {
-    --radio-group-padding: calc(var(--space) * 3) calc(var(--space) * 4);
+    --radio-group-padding: var(--s3) var(--s4);
     height: var(--el-height-lg);
   }
 
@@ -351,19 +351,19 @@
 
   .j-checkbox.is-vertical {
     flex-direction: column;
-    /* --checkbox-gap: calc(var(--space) * 3); */
+    /* --checkbox-gap: var(--s3); */
   }
 
   .j-checkbox,
   .j-checkbox.is-horizontal {
     flex-direction: row;
-    /* --checkbox-gap: calc(var(--space) * 4); */
+    /* --checkbox-gap: var(--s4); */
   }
 
   .j-checkbox label {
     display: flex;
     align-items: center;
-    gap: var(--checkbox-label-gap, calc(var(--space) * 2));
+    gap: var(--checkbox-label-gap, var(--s2));
     font-size: var(--checkbox-label-font-size, var(--font-size-md));
     height: var(--el-height-md);
     padding: calc(var(--space)*2);
@@ -611,13 +611,13 @@
 
   select.j-select.is-sm {
     --input-height: var(--el-height-sm);
-    --input-padding: calc(var(--space) * 1) calc(var(--space) * 1);
+    --input-padding: var(--space) var(--space);
     --input-font-size: var(--font-size-sm);
   }
 
   select.j-select.is-lg {
     --input-height: var(--el-height-lg);
-    --input-padding: calc(var(--space) * 2) calc(var(--space) * 2);
+    --input-padding: var(--s2) var(--s2);
     --input-font-size: var(--font-size-lg);
   }
 
@@ -633,7 +633,7 @@
     background-color: var(--input-background-color, var(--ui-bg));
     color: var(--input-color, var(--ui-input-color));
     resize: vertical;
-    padding: var(--textarea-padding, calc(var(--space) * 2));
+    padding: var(--textarea-padding, var(--s2));
     font-family: inherit;
     font-size: var(--textarea-font-size, var(--font-size-md));
     line-height: var(--textarea-line-height, var(--line-height));

package/src/css/gradient.css

@@ -21,6 +21,19 @@
         background-color: var(--ui-bg);
     }
 
+    .bg-gradient-auto {
+        background:
+            radial-gradient(circle at 16% 16%,
+                color-mix(in srgb, var(--tone-solid) 30%, transparent),
+                transparent 34%),
+            radial-gradient(circle at 84% 0%,
+                color-mix(in srgb, var(--tone-tint) 24%, transparent),
+                transparent 30%),
+            linear-gradient(135deg,
+                color-mix(in srgb, var(--ui-bg) 78%, var(--ui-surface-raised)),
+                color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle)));
+    }
+
     .bg-gradient-sunrise {
         background:
             radial-gradient(circle at 16% 16%,
@@ -56,7 +69,7 @@
                 color-mix(in srgb, var(--ui-blue) 22%, transparent),
                 transparent 28%),
             linear-gradient(135deg,
-                color-mix(in srgb, var(--ui-bg) 76%, var(--ui-blue-light)),
+                color-mix(in srgb, var(--ui-bg) 76%, var(--ui-blue-tint)),
                 color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-teal-subtle, var(--state-info-subtle))));
     }
 
@@ -70,7 +83,7 @@
                 transparent 30%),
             linear-gradient(135deg,
                 color-mix(in srgb, var(--ui-bg) 80%, var(--state-success-subtle)),
-                color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-mint-light)));
+                color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-mint-tint)));
     }
 
     .bg-gradient-ember {
@@ -109,7 +122,7 @@
                 transparent 28%),
             linear-gradient(135deg,
                 color-mix(in srgb, var(--ui-bg) 80%, var(--ui-gold-surface, var(--state-warning-subtle))),
-                color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-gold-light)));
+                color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-gold-tint)));
     }
 
     .bg-gradient-forest {
@@ -121,7 +134,7 @@
                 color-mix(in srgb, var(--state-success) 18%, transparent),
                 transparent 30%),
             linear-gradient(135deg,
-                color-mix(in srgb, var(--ui-bg) 80%, var(--ui-olive-light)),
+                color-mix(in srgb, var(--ui-bg) 80%, var(--ui-olive-tint)),
                 color-mix(in srgb, var(--ui-surface-raised) 86%, var(--state-success-subtle)));
     }
 

package/src/css/icon.css

@@ -3,6 +3,16 @@
 		display: block;
 	}
 
+	.j-loader {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: var(--ui-bg-subtle);
+		width: 100%;
+		height: 100%;
+		position: absolute;
+	}
+
 	/* loader icon */
 	.icon-loader {
 		display: inline-block;
@@ -27,6 +37,7 @@
 		color: inherit;
 		cursor: pointer;
 	}
+
 	.icon-close::after,
 	.icon-close::before {
 		content: "";
@@ -40,15 +51,19 @@
 		border-radius: 1px;
 		transform-origin: center center;
 	}
+
 	.icon-close::before {
 		transform: translate(-50%, -50%) rotate(45deg);
 	}
+
 	.icon-close::after {
 		transform: translate(-50%, -50%) rotate(-45deg);
 	}
+
 	.icon-close:active {
 		transform: translateY(1px);
 	}
+
 	.icon-close:focus-within {
 		background-color: var(--tone-subtle);
 	}
@@ -57,7 +72,8 @@
 	.el-icon[data-action-close] {
 		cursor: pointer;
 	}
+
 	.el-icon[data-action-close]:active {
 		transform: scale(0.85);
 	}
-}
+}

package/src/css/index.css

@@ -1,12 +1,12 @@
-@layer config, layout, content, icon, font, components, menu, form, animation, status;
+@layer config, layout, content, icon, font, components, themes, animation, status;
 
 @import url('./tokens.css');
-@import url('./gradient.css');
+/* @import url('./gradient.css'); */
 @import url('./layout.css');
 @import url('./icon.css');
 @import url('./font.css');
 @import url('./components.css');
-@import url('./form.css');
 @import url('./content.css');
+@import url('./themes/index.css');
 @import url('./animation.css');
 @import url('./status.css');

package/src/css/layout.css

@@ -449,7 +449,7 @@
   /* Grid 容器：自动 gap + 响应式列 */
   .grid-container {
     display: grid;
-    gap: var(--grid-container-gap, calc(var(--space) * 2));
+    gap: var(--grid-container-gap, var(--s2));
     width: 100%;
     /* 默认：单列（移动端友好） */
     grid-template-columns: 1fr;

package/src/css/menu.css

@@ -1,4 +1,4 @@
-@layer menu {
+@layer components {
   .j-menu {
     width: 100%;
     white-space: nowrap;
@@ -52,7 +52,7 @@
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
-    gap: calc(var(--space) * 1);
+    gap: var(--space);
     white-space: nowrap;
     cursor: pointer;
     appearance: button;
@@ -106,7 +106,7 @@
     display: none;
     position: absolute;
     transform: translateY(1px);
-    padding: calc(var(--space) * 2) 0;
+    padding: var(--s2) 0;
     background-color: var(--ui-surface-subtle);
     border: 1px solid var(--ui-border);
     border-radius: var(--radius-md);
@@ -125,7 +125,7 @@
 
   .j-menu .menu .menu-item.menu-item-has-children:hover .sub-menu {
     display: block;
-    z-index: var(--z-index-submenu);
+    z-index: var(--z-submenu);
   }
 
   .j-menu .menu .menu-item .sub-menu .menu-item:hover a {
@@ -329,13 +329,13 @@
     justify-content: flex-start;
     align-items: center;
     flex-wrap: wrap;
-    gap: calc(var(--space) * 2);
+    gap: var(--s2);
     white-space: normal;
     appearance: button;
     touch-action: manipulation;
     color: currentColor;
-    min-height: var(--el-height-xl);
-    padding: calc(var(--space) * 2) calc(var(--space) * 4);
+    min-height: var(--el-height-2xl);
+    padding: var(--s2) var(--s4);
     line-height: var(--line-height-paragraph);
     position: relative;
     text-decoration: none;
@@ -394,7 +394,7 @@
     opacity: 1;
     transform: translateX(0);
     height: 100%;
-    z-index: var(--z-index-submenu);
+    z-index: var(--z-submenu);
   }
 
   /* bottom menu */
@@ -424,11 +424,11 @@
     gap: 1px;
     border-top: 1px solid var(--ui-border-subtle);
     background: linear-gradient(to bottom,
-        var(--ui-surface-subtle) 20%,
-        var(--ui-bg-muted) 40%,
-        var(--ui-surface-muted) 50%,
-        var(--ui-bg-muted) 60%,
-        var(--ui-surface-subtle) 80%);
+        var(--ui-bg-subtle) 20%,
+        var(--ui-border) 40%,
+        var(--ui-outline) 50%,
+        var(--ui-border) 60%,
+        var(--ui-bg-subtle) 80%);
     font-size: var(--font-size-md);
   }
 
@@ -444,11 +444,11 @@
     width: 100%;
     text-align: center;
     text-decoration: none;
-    height: var(--el-height-xl);
+    height: var(--el-height-2xl);
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: calc(var(--space) * 1);
+    gap: var(--space);
     color: var(--ui-fg);
     padding: calc(var(--space) * 1.5);
   }
@@ -475,9 +475,9 @@
     visibility: hidden;
     background: linear-gradient(to right,
         var(--ui-surface-subtle) 20%,
-        var(--ui-bg-muted) 40%,
-        var(--ui-surface-muted) 50%,
-        var(--ui-bg-muted) 60%,
+        var(--ui-border) 40%,
+        var(--ui-outline) 50%,
+        var(--ui-border) 60%,
         var(--ui-surface-subtle) 80%);
     border: 1px solid var(--ui-border-subtle);
     display: flex;
@@ -485,8 +485,8 @@
     align-items: center;
     justify-content: center;
     gap: 1px;
-    min-width: calc(var(--space) * 30);
-    max-width: calc(var(--space) * 76);
+    min-width: var(--columns-6xs);
+    max-width: var(--columns-2xs);
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -507,14 +507,14 @@
   }
 
   .j-bottom-menu .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item>a {
-    padding: calc(var(--space) * 1.5) calc(var(--space) * 3);
+    padding: calc(var(--space) * 1.5) var(--s3);
   }
 
   /* drop menu  */
   .drop-menu {
     min-width: 100px;
     max-width: 200px;
-    padding: calc(var(--space) * 2);
+    padding: var(--s2);
     font-size: var(--font-size-md);
     background-color: var(--ui-surface-subtle);
     border-radius: var(--radius-sm);
@@ -532,9 +532,9 @@
   .drop-menu .menu-item a {
     display: flex;
     align-items: center;
-    gap: var(--drop-menu-item-gap, calc(var(--space) * 2));
+    gap: var(--drop-menu-item-gap, var(--s2));
     width: 100%;
-    padding: calc(var(--space) * 1) calc(var(--space) * 2);
+    padding: var(--space) var(--s2);
     text-decoration: none;
     color: var(--ui-fg-muted);
     border-radius: var(--radius-md);
@@ -552,12 +552,12 @@
 
   .drop-menu .el-icon,
   .drop-menu svg {
-    width: var(--drop-menu-icon-size, calc(var(--space) * 4));
-    height: var(--drop-menu-icon-size, calc(var(--space) * 4));
+    width: var(--drop-menu-icon-size, var(--s4));
+    height: var(--drop-menu-icon-size, var(--s4));
   }
 
   .drop-menu .menu-item.menu-heading {
-    padding: var(--menu-item-heading, calc(var(--space) * 1) calc(var(--space) * 2));
+    padding: var(--menu-item-heading, var(--space) var(--s2));
     color: var(--ui-fg-soft);
     font-size: var(--font-size-sm);
   }

package/src/css/modal.css

@@ -2,18 +2,18 @@
   .j-modal {
     --modal-border: var(--modal-border-width, 1px) var(--modal-border-style, solid) var(--modal-border-color, transparent);
 
-    --modal-header-padding: calc(var(--space) * 4) calc(var(--space) * 4) 0;
+    --modal-header-padding: var(--s4) var(--s4) 0;
     --modal-header-gap: var(--space);
     --modal-title-font-size: var(--font-size-md);
     --modal-close-icon-size: var(--el-height-3xs);
     --modal-close-font-size: var(--font-size-lg);
     --modal-close-color: var(--ui-fg-muted);
 
-    --modal-body-padding: calc(var(--space) * 4);
+    --modal-body-padding: var(--s4);
     --modal-body-line-height: var(--line-height-paragraph);
 
-    --modal-footer-padding: 0 calc(var(--space) * 4) calc(var(--space) * 4);
-    --modal-footer-gap: calc(var(--space) * 2);
+    --modal-footer-padding: 0 var(--s4) var(--s4);
+    --modal-footer-gap: var(--s2);
 
     background: var(--modal-background, var(--ui-bg));
     border: var(--modal-border, 1px solid var(--ui-border));
@@ -56,27 +56,6 @@
     font-weight: 500;
   }
 
-  .j-modal .modal-header .modal-close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--modal-close-icon-size);
-    height: var(--modal-close-icon-size);
-    font-size: var(--modal-close-font-size);
-    color: var(--modal-close-color);
-    text-align: center;
-  }
-
-  .j-modal .modal-header .modal-close:focus-within {
-    outline: 2px solid var(--tone-solid);
-    color: var(--tone-solid);
-  }
-
-  .j-modal .modal-header .modal-close:hover {
-    color: var(--tone-solid);
-    background-color: var(--tone-subtle);
-  }
-
   .j-modal .modal-body {
     padding: var(--modal-body-padding);
     overflow-y: auto;
@@ -90,7 +69,11 @@
   }
 
   .j-modal.is-fullscreen .modal-header {
-    --modal-header-padding: calc(var(--space) * 4);
+    --modal-header-padding: var(--s4);
+  }
+
+  .j-modal:not(.is-fullscreen) .modal-header:has(.modal-close) {
+    --modal-header-padding: var(--s3) var(--s4) 0;
   }
 
   .j-modal.is-fullscreen .modal-body {
@@ -98,7 +81,7 @@
   }
 
   .j-modal.is-fullscreen .modal-footer {
-    --modal-footer-padding: calc(var(--space) * 4);
+    --modal-footer-padding: var(--s4);
   }
 
   .j-modal .modal-footer {

package/src/css/offcanvas.css

@@ -7,7 +7,7 @@
     height: 100%;
     background-color: var(--offcanvas-overlay-background,
         var(--ui-overlay-muted));
-    z-index: var(--z-index-overlay);
+    z-index: var(--z-overlay);
     opacity: 0;
     transition: opacity 0.3s ease;
   }
@@ -18,7 +18,7 @@
 
   .j-offcanvas {
     position: fixed;
-    z-index: var(--z-index-offcanvas);
+    z-index: var(--z-offcanvas);
     background: var(--offcanvas-background, var(--ui-bg));
     box-shadow: var(--offcanvas-box-shadow, var(--shadow-md));
     --offcanvas-border: 1px solid var(--ui-border-subtle);

package/src/css/pagination.css

@@ -13,7 +13,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: var(--pagination-gap, calc(var(--space) * 1));
+    gap: var(--pagination-gap, var(--space));
     margin: 0;
     padding: 0;
   }

package/src/css/popup.css

@@ -8,8 +8,8 @@
     background-color: var(--popup-background, var(--ui-popup-background));
     backdrop-filter: var(--popup-backdrop-filter, blur(4px));
     display: flex;
-    padding: var(--popup-layout-padding, calc(var(--space) * 4));
-    z-index: var(--z-index-popup);
+    padding: var(--popup-layout-padding, var(--s4));
+    z-index: var(--z-popup);
   }
 
   .j-popup-layout,

package/src/css/swiper.css

@@ -37,12 +37,12 @@
 
   .j-swiper .swiper-slide-title {
     position: absolute;
-    right: var(--swiper-title-inset, calc(var(--space) * 3));
-    bottom: var(--swiper-title-inset, calc(var(--space) * 3));
-    left: var(--swiper-title-inset, calc(var(--space) * 3));
+    right: var(--swiper-title-inset, var(--s3));
+    bottom: var(--swiper-title-inset, var(--s3));
+    left: var(--swiper-title-inset, var(--s3));
     z-index: 1;
     display: block;
-    padding: calc(var(--space) * 1.5) calc(var(--space) * 2);
+    padding: calc(var(--space) * 1.5) var(--s2);
     overflow: hidden;
     color: var(--swiper-title-color, #fff);
     font-size: var(--swiper-title-font-size, var(--font-size-lg));
@@ -64,9 +64,9 @@
   }
 
   .j-swiper .swiper-pagination.is-horizontal {
-    right: calc(var(--space) * 3);
-    bottom: calc(var(--space) * 2);
-    left: calc(var(--space) * 3);
+    right: var(--s3);
+    bottom: var(--s2);
+    left: var(--s3);
   }
 
   .j-swiper .swiper-pagination-indicator {
@@ -125,11 +125,11 @@
   }
 
   .j-swiper .swiper-navigation.is-prev {
-    left: calc(var(--space) * 2);
+    left: var(--s2);
   }
 
   .j-swiper .swiper-navigation.is-next {
-    right: calc(var(--space) * 2);
+    right: var(--s2);
   }
 
   .j-swiper .swiper-navigation svg {
@@ -146,9 +146,9 @@
 
   @media (max-width: 640px) {
     .j-swiper .swiper-slide-title {
-      right: calc(var(--space) * 2);
-      bottom: calc(var(--space) * 2);
-      left: calc(var(--space) * 2);
+      right: var(--s2);
+      bottom: var(--s2);
+      left: var(--s2);
       font-size: var(--font-size-md);
     }
 

package/src/css/tabs.css

@@ -40,7 +40,7 @@
 
   .j-tabs .tab-list .tab-item {
     flex-shrink: 0;
-    padding: var(--tab-list-item-padding, calc(var(--space) * 2) calc(var(--space) * 3));
+    padding: var(--tab-list-item-padding, var(--s2) var(--s3));
     margin: var(--tab-list-item-margin, 0);
     cursor: pointer;
   }
@@ -75,7 +75,7 @@
   }
 
   .j-tabs .tab-panel {
-    padding: var(--tab-panel-padding, calc(var(--space) * 2) calc(var(--space) * 3));
+    padding: var(--tab-panel-padding, var(--s2) var(--s3));
     margin: var(--tab-panel-margin, 0);
   }
 
@@ -83,6 +83,7 @@
     display: none;
     margin: var(--tab-panel-item-margin, 0);
     position: relative;
+    min-height: 1.25em;
   }
 
   .j-tabs .tab-panel .panel-item.is-active {