vanilla-jui 1.7.35 → 1.7.37

package/package.json

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

package/src/components/accordion.ts

@@ -131,7 +131,7 @@ const DEFAULT_CLASS_NAMES: AccordionClassNames = {
   title: 'header-title',
   arrow: 'header-arrow j-btn is-ghost is-icon',
   panel: 'accordion-panel',
-  content: 'panel-content',
+  content: 'panel-body',
 };
 
 const ACCORDION_ITEM_RULE = {

package/src/components/toc.ts

@@ -175,7 +175,7 @@ const TOC_PROPS_SCHEMA = {
 const ACTIVE_OFFSET_TOLERANCE = 1;
 const INDICATOR_TRANSITION_MAX_MS = 1200;
 const INDICATOR_TRANSITION_MIN_MS = 120;
-const INDICATOR_TRANSITION_TIMING = 'ease-in-out';
+const INDICATOR_TRANSITION_TIMING = 'ease';
 const PROGRAMMATIC_SCROLL_TIMEOUT_MS = 2400;
 const SCROLL_REACHED_TOLERANCE = 2;
 

package/src/css/animation.css

@@ -212,7 +212,7 @@
     opacity: 0;
     transform: translateY(12px);
 
-    animation: reveal 0.62s ease forwards;
+    animation: reveal 0.6s ease forwards;
   }
 
   [data-reveal='2'] {

package/src/css/themes/default/accordion.css

@@ -77,7 +77,7 @@
     border-right: 0;
   }
 
-  .j-accordion .accordion-panel .panel-content {
+  .j-accordion .accordion-panel .panel-body {
     margin: 0;
     padding: 0 12px 8px;
 
@@ -85,9 +85,7 @@
     min-height: inherit;
   }
 
-  .j-accordion.is-horizontal
-    .accordion-panel[aria-hidden='false']
-    .panel-content {
+  .j-accordion.is-horizontal .accordion-panel[aria-hidden='false'] .panel-body {
     display: flex;
     flex-direction: column;
     justify-content: center;

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

@@ -25,7 +25,7 @@
     touch-action: manipulation;
     transition-property: box-shadow, opacity, transform;
     transition-duration: 0.15s;
-    transition-timing-function: var(--bezier);
+    transition-timing-function: ease;
   }
 
   .j-btn svg {

package/src/css/themes/default/captcha.css

@@ -23,7 +23,7 @@
   line-height: 18px;
   text-align: start;
   cursor: pointer;
-  transition: all 0.15s ease-in-out;
+  transition: all 0.2s ease;
 }
 
 .j-cap-field .cap-control[data-state='idle']:hover {

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

@@ -366,7 +366,7 @@
     height: 1rem;
     margin: 0;
     appearance: none;
-    transition: all 0.05s ease-in-out;
+    transition: all 0.2s ease;
   }
 
   .j-editor:not(:has(.j-checkbox)) input[type='checkbox']:checked {

package/src/css/themes/default/flow.css

@@ -7,7 +7,7 @@
 
   .j-flow .flow-steps {
     display: flex;
-    gap: 8px;
+    gap: 16px;
     list-style: none;
     margin: 0;
     padding: 0;
@@ -58,11 +58,9 @@
   }
 
   .j-flow .flow-footer {
-    border-top: 1px solid var(--ui-border-subtle);
     display: flex;
-    gap: 4px;
+    gap: 8px;
     justify-content: flex-end;
-    padding-top: 8px;
     position: relative;
   }
 }

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

@@ -164,7 +164,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0);
-    transition: transform 0.15s ease-in-out;
+    transition: transform 0.2s ease;
   }
 
   .j-radio label input[type='radio']:checked::before {
@@ -203,7 +203,7 @@
     user-select: none;
     transition-property: box-shadow, color, background-color;
     transition-duration: 0.2s;
-    transition-timing-function: ease-in-out;
+    transition-timing-function: ease;
   }
 
   .j-radio.is-group label:not(:first-child) span.radio-text {
@@ -324,7 +324,7 @@
     inset: 0;
     border-radius: 50px;
     background-color: var(--ui-border);
-    transition: all 0.2s var(--bezier);
+    transition: all 0.2s ease;
   }
 
   .j-switch .switch-slider:after {
@@ -332,7 +332,7 @@
     position: absolute;
     border-radius: 50%;
     background-color: #fff;
-    transition: all 0.2s var(--bezier);
+    transition: all 0.2s ease;
   }
 
   .j-switch.is-sm .switch-slider:after {
@@ -685,11 +685,6 @@
   /*************************
    * .mobile
    *************************/
-  .mobile input.j-input[type='file'] {
-    --input-padding: 8px;
-  }
-
-  .mobile .j-input[type='file'],
   .mobile .j-textarea {
     width: 100%;
   }

package/src/css/themes/default/menu.css

@@ -55,7 +55,7 @@
 
   .j-menu .menu .menu-item:not(:has(a)):hover {
     background: var(--state-error-subtle);
-    border-radius: 4px;
+    border-radius: var(--menu-radius);
   }
 
   .j-menu .menu .menu-item:not(:has(a)):hover::after {
@@ -73,7 +73,7 @@
   .j-menu .menu .menu-item a {
     gap: 8px;
     color: currentColor;
-    padding: 0.5rem 0.75rem;
+    padding: 8px 12px;
     height: var(--menu-height);
     line-height: var(--menu-line-height);
     border-radius: var(--menu-radius);
@@ -100,10 +100,7 @@
   }
 
   .j-menu .menu .menu-item.menu-item-has-children > a::after {
-    /* width: 0; */
-    /* height: 0; */
-    /* vertical-align: middle; */
-    transition: transform 0.2s ease-in-out;
+    transition: transform 0.2s ease;
 
     content: '';
     border-left: 3px solid transparent;
@@ -120,26 +117,20 @@
     border-radius: var(--menu-radius);
     min-width: 120px;
     max-width: 240px;
+    backdrop-filter: blur(4px);
+    display: none;
+    position: absolute;
 
-    background-color: var(--ui-bg-subtle);
+    background-color: var(--ui-bg);
 
     @supports (color: color-mix(in srgb, red 50%, blue)) {
-      background-color: color-mix(
-        in srgb,
-        var(--ui-bg-subtle) 75%,
-        transparent
-      );
+      background-color: color-mix(in srgb, var(--ui-bg) 70%, transparent);
     }
-
-    backdrop-filter: blur(4px);
-
-    display: none;
-    position: absolute;
   }
 
   .j-menu:not([data-menu-type='mobile']) .menu .menu-item .sub-menu {
     box-shadow: var(--shadow-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: var(--border-soft);
   }
 
   .j-menu .menu .menu-item .sub-menu .menu-item a {
@@ -180,7 +171,7 @@
     > .sub-menu
     > .menu-item.current-menu-item
     a {
-    background: var(--tone-soft);
+    background: var(--tone-subtle);
     color: var(--tone-text);
   }
 
@@ -292,7 +283,7 @@
     width: 100%;
     visibility: hidden;
     opacity: 0;
-    transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.2s ease;
     max-width: 100%;
     background: var(--ui-bg);
     padding: 0;
@@ -326,20 +317,32 @@
    * 底部菜单
    */
   .j-menu[data-menu-type='bottom'] {
-    position: fixed;
-    bottom: 0;
-    left: 0;
+    --menu-radius: 99px;
     overflow: visible;
-    background-color: var(--ui-bg);
     z-index: var(--z-submenu);
+    position: fixed;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 288px;
+    max-width: 93.75%;
   }
 
   .j-menu[data-menu-type='bottom'] .menu {
     position: relative;
     justify-content: space-between;
     gap: 1px;
-    border-top: 1px solid var(--ui-border-subtle);
     padding: 4px;
+    border: var(--border-soft);
+    border-radius: var(--menu-radius);
+    box-shadow: var(--shadow-sm);
+    backdrop-filter: blur(4px);
+
+    background-color: var(--ui-bg);
+
+    @supports (color: color-mix(in srgb, red 50%, blue)) {
+      background-color: color-mix(in srgb, var(--ui-bg) 70%, transparent);
+    }
   }
 
   .j-menu[data-menu-type='bottom'] .menu .menu-item {
@@ -360,13 +363,7 @@
     > .menu
     > .menu-item.menu-item-has-children
     > a::after {
-    content: '☰';
-    font-size: var(--font-size-sm);
-    border: none;
-    /* margin-left: unset; */
-    /* width: unset; */
-    /* height: unset; */
-    /* transition: unset; */
+    content: none;
   }
 
   .j-menu[data-menu-type='bottom']
@@ -383,6 +380,7 @@
     .menu-item.menu-item-has-children.is-active
     > a {
     color: var(--tone-solid);
+    background-color: var(--tone-subtle);
   }
 
   .j-menu[data-menu-type='bottom']
@@ -397,13 +395,15 @@
     justify-content: center;
     min-width: 10rem;
     max-width: 18rem;
+    border-radius: 16px;
+    background-color: var(--ui-bg);
     left: 50%;
     transform: translateX(-50%) translateY(100%);
-    bottom: calc(100% + 4px);
+    bottom: calc(100% + 8px);
     transition:
-      transform 0.3s ease-in-out,
-      visibility 0.3s ease-in-out,
-      opacity 0.3s ease-in-out;
+      transform 0.2s ease,
+      visibility 0.2s ease,
+      opacity 0.2s ease;
     z-index: -1;
   }
 

package/src/css/themes/default/modal.css

@@ -5,7 +5,7 @@
     border: var(--border);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-md);
-    min-width: 300px;
+    min-width: 304px;
     max-width: 500px;
     max-height: 90lvh;
     max-height: 90dvh;

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

@@ -39,7 +39,7 @@
 
   .j-swiper .swiper-slide::before {
     color: var(--ui-fg-soft);
-    font-size: var(--font-size-md);
+    font-size: var(--font-size-xl);
     background-color: var(--tone-wash);
     background-image: radial-gradient(
       circle,
@@ -49,7 +49,8 @@
     background-size: 20px 20px;
 
     position: absolute;
-    content: 'loading';
+    content: 'LOADING';
+    font-family: Courier, monospace;
     top: 0;
     left: 0;
     width: 100%;
@@ -83,7 +84,7 @@
     font-size: var(--swiper-font-size);
     font-weight: 700;
     background: rgba(0, 0, 0, 0.35);
-    border-radius: var(--radius-sm);
+    border-radius: inherit;
     line-height: var(--line-height-heading);
 
     display: block;
@@ -121,7 +122,7 @@
     cursor: pointer;
     border-radius: 999px;
     outline: none;
-    transition: width 0.5s var(--bezier);
+    transition: width 0.2s ease;
   }
 
   .j-swiper .swiper-pagination-indicator:hover,
@@ -153,7 +154,7 @@
     justify-content: center;
     cursor: pointer;
     border-radius: 999px;
-    transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.2s ease;
   }
 
   .j-swiper:hover .swiper-navigation {

package/src/css/themes/default/tip.css

@@ -58,20 +58,20 @@
     margin: 0;
   }
 
-  .j-tip .tip-content {
+  .j-tip .tip-body {
     grid-column-start: 2;
     color: var(--tone-body);
   }
 
-  .j-tip .tip-content p {
+  .j-tip .tip-body p {
     margin: 6px 0;
   }
 
-  .j-tip .tip-content > *:first-child {
+  .j-tip .tip-body > *:first-child {
     margin-top: 0;
   }
 
-  .j-tip .tip-content > *:last-child {
+  .j-tip .tip-body > *:last-child {
     margin-bottom: 0;
   }
 

package/src/css/themes/default/tree.css

@@ -1,9 +1,8 @@
 @layer components {
   .j-tree {
     padding: 14px;
-    border: 1px solid var(--ui-border-subtle);
+    border: var(--border-subtle);
     border-radius: var(--radius-md);
-    background: var(--ui-surface);
     color: var(--tone-heading);
     font-size: var(--font-size-sm);
     line-height: 1.45;

package/src/css/tokens.css

@@ -45,12 +45,12 @@
     --opacity-disabled: 0.5;
 
     /* --- Animation --- */
-    --speed: 0.2s;
-
     --bezier: cubic-bezier(0.4, 0, 0.2, 1);
 
     /* border */
     --border: 1px solid var(--ui-border);
+    --border-subtle: 1px solid var(--ui-border-subtle);
+    --border-soft: 1px solid var(--ui-border-soft);
   }
 
   /* ============================================