vanilla-jui 1.7.34 → 1.7.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.7.34",
+  "version": "1.7.36",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [
@@ -57,8 +57,7 @@
     "dev": "vp dev",
     "test": "vp test",
     "check": "vp check",
-    "lint": "vp lint",
-    "prepublishOnly": "vp run build"
+    "lint": "vp lint"
   },
   "dependencies": {
     "vanilla-create-storage": "^1.0.4",
@@ -66,10 +65,10 @@
     "vanilla-signal-i18n": "^1.1.3"
   },
   "devDependencies": {
-    "@tsdown/css": "^0.23.2",
-    "jsdom": "^30.1.3",
+    "@tsdown/css": "^0.23.7",
+    "jsdom": "^31.0.0",
     "typescript": "^7.0.2",
-    "vite-plus": "^1.4.0"
+    "vite-plus": "^1.5.1"
   },
   "registry": {
     "type": "git",
@@ -84,9 +83,5 @@
   },
   "allowScripts": {
     "fsevents@2.3.3": true
-  },
-  "overrides": {
-    "vite": "npm:@voidzero-dev/vite-plus-core@1.4.0",
-    "vitest": "5.0.5"
   }
 }

package/src/components/accordion.ts

@@ -129,9 +129,9 @@ const DEFAULT_CLASS_NAMES: AccordionClassNames = {
   root: 'j-accordion',
   header: 'accordion-header',
   title: 'header-title',
-  arrow: 'header-arrow j-btn is-ghost is-sm is-icon',
+  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

@@ -1,5 +1,4 @@
 @layer animation {
-
   /* none */
   .animate-none {
     animation: none;
@@ -22,7 +21,6 @@
   }
 
   @keyframes animate-ping {
-
     75%,
     100% {
       transform: scale(2);
@@ -47,7 +45,6 @@
   }
 
   @keyframes animate-bounce {
-
     0%,
     100% {
       transform: translateY(-25%);
@@ -61,7 +58,6 @@
   }
 
   @keyframes animate-bounce {
-
     0%,
     100% {
       transform: translateY(-25%);
@@ -114,7 +110,6 @@
   }
 
   @keyframes animate-shake {
-
     0%,
     100% {
       transform: translateX(0);
@@ -134,7 +129,6 @@
   }
 
   @keyframes animate-shake {
-
     0%,
     100% {
       transform: translateX(0);
@@ -218,7 +212,7 @@
     opacity: 0;
     transform: translateY(12px);
 
-    animation: reveal 0.62s ease forwards;
+    animation: reveal 0.6s ease forwards;
   }
 
   [data-reveal='2'] {
@@ -246,4 +240,4 @@
       transform: translateY(0);
     }
   }
-}
+}

package/src/css/card.css

@@ -8,7 +8,7 @@
     max-width: 100%;
     color: var(--ui-fg);
     background-color: var(--ui-bg);
-    border: 1px solid var(--ui-border);
+    border: var(--border);
     border-radius: var(--card-border-radius);
     box-shadow: var(--shadow-sm);
   }
@@ -30,7 +30,7 @@
     flex-grow: 1;
     color: var(--ui-fg);
     font-size: var(--font-size-md);
-    font-weight: var(--font-medium);
+    font-weight: 500;
     padding: 12px 16px;
     margin: 0;
   }
@@ -140,11 +140,11 @@
     padding: 16px;
   }
 
-  .j-card .card-content+.card-footer {
+  .j-card .card-content + .card-footer {
     padding-top: 0;
   }
 
   .j-card .card-footer:has(.j-btns) {
     padding-top: 4px;
   }
-}
+}

package/src/css/font.css

@@ -12,10 +12,13 @@
   }
 
   .font-mono {
-    font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-family:
+      Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   }
 
   .font-math {
-    font-family: Cambria Math, Latin Modern Math;
+    font-family:
+      Cambria Math,
+      Latin Modern Math;
   }
-}
+}

package/src/css/gradient.css

@@ -1,5 +1,4 @@
 @layer gradient {
-
   .bg-gradient-sunrise,
   .bg-gradient-aurora,
   .bg-gradient-ocean,
@@ -14,130 +13,196 @@
 
   .bg-gradient-auto {
     background:
-      radial-gradient(circle at 16% 16%,
+      radial-gradient(
+        circle at 16% 16%,
         color-mix(in srgb, var(--tone-solid) 30%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 84% 0%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 84% 0%,
         color-mix(in srgb, var(--tone-tint) 24%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        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)));
+        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle))
+      );
   }
 
   .bg-gradient-sunrise {
     background:
-      radial-gradient(circle at 16% 16%,
+      radial-gradient(
+        circle at 16% 16%,
         color-mix(in srgb, var(--tone-solid) 30%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 84% 0%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 84% 0%,
         color-mix(in srgb, var(--state-warning) 24%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        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)));
+        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle))
+      );
   }
 
   .bg-gradient-aurora {
     background:
-      radial-gradient(circle at 12% 12%,
+      radial-gradient(
+        circle at 12% 12%,
         color-mix(in srgb, var(--state-info) 24%, transparent),
-        transparent 32%),
-      radial-gradient(circle at 84% 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at 84% 18%,
         color-mix(in srgb, var(--state-success) 20%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 82%, var(--state-info-subtle)),
-        color-mix(in srgb,
+        color-mix(
+          in srgb,
           var(--ui-surface-raised) 84%,
-          var(--state-success-subtle)));
+          var(--state-success-subtle)
+        )
+      );
   }
 
   .bg-gradient-ocean {
     background:
-      radial-gradient(circle at 22% 12%,
+      radial-gradient(
+        circle at 22% 12%,
         color-mix(in srgb, var(--state-info) 28%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 78% 0%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 78% 0%,
         color-mix(in srgb, var(--ui-blue) 22%, transparent),
-        transparent 28%),
-      linear-gradient(135deg,
+        transparent 28%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 76%, var(--ui-blue-tint)),
-        color-mix(in srgb,
+        color-mix(
+          in srgb,
           var(--ui-surface-raised) 84%,
-          var(--ui-teal-subtle, var(--state-info-subtle))));
+          var(--ui-teal-subtle, var(--state-info-subtle))
+        )
+      );
   }
 
   .bg-gradient-meadow {
     background:
-      radial-gradient(circle at 18% 16%,
+      radial-gradient(
+        circle at 18% 16%,
         color-mix(in srgb, var(--state-success) 28%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 82% 14%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 82% 14%,
         color-mix(in srgb, var(--ui-mint) 24%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        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-tint)));
+        color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-mint-tint))
+      );
   }
 
   .bg-gradient-ember {
     background:
-      radial-gradient(circle at 18% 10%,
+      radial-gradient(
+        circle at 18% 10%,
         color-mix(in srgb, var(--state-warning) 30%, transparent),
-        transparent 32%),
-      radial-gradient(circle at 84% 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at 84% 18%,
         color-mix(in srgb, var(--state-error) 22%, transparent),
-        transparent 28%),
-      linear-gradient(135deg,
+        transparent 28%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 80%, var(--state-warning-subtle)),
-        color-mix(in srgb,
+        color-mix(
+          in srgb,
           var(--ui-surface-raised) 84%,
-          var(--state-error-subtle)));
+          var(--state-error-subtle)
+        )
+      );
   }
 
   .bg-gradient-dusk {
     background:
-      radial-gradient(circle at 18% 16%,
+      radial-gradient(
+        circle at 18% 16%,
         color-mix(in srgb, var(--tone-solid) 28%, transparent),
-        transparent 33%),
-      radial-gradient(circle at 82% 14%,
+        transparent 33%
+      ),
+      radial-gradient(
+        circle at 82% 14%,
         color-mix(in srgb, var(--ui-violet) 22%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 78%, var(--tone-wash)),
-        color-mix(in srgb,
+        color-mix(
+          in srgb,
           var(--ui-surface-raised) 86%,
-          var(--ui-violet-subtle, var(--tone-subtle))));
+          var(--ui-violet-subtle, var(--tone-subtle))
+        )
+      );
   }
 
   .bg-gradient-gold {
     background:
-      radial-gradient(circle at 20% 16%,
+      radial-gradient(
+        circle at 20% 16%,
         color-mix(in srgb, var(--ui-gold) 24%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 80% 10%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 80% 10%,
         color-mix(in srgb, var(--state-warning) 18%, transparent),
-        transparent 28%),
-      linear-gradient(135deg,
-        color-mix(in srgb,
+        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-tint)));
+          var(--ui-gold-surface, var(--state-warning-subtle))
+        ),
+        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-gold-tint))
+      );
   }
 
   .bg-gradient-forest {
     background:
-      radial-gradient(circle at 16% 16%,
+      radial-gradient(
+        circle at 16% 16%,
         color-mix(in srgb, var(--ui-olive) 24%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 84% 14%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 84% 14%,
         color-mix(in srgb, var(--state-success) 18%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 80%, var(--ui-olive-tint)),
-        color-mix(in srgb,
+        color-mix(
+          in srgb,
           var(--ui-surface-raised) 86%,
-          var(--state-success-subtle)));
+          var(--state-success-subtle)
+        )
+      );
   }
-}
+}

package/src/css/icon.css

@@ -32,8 +32,4 @@
   .icon-close::after {
     transform: translate(-50%, -50%) rotate(-45deg);
   }
-
-  /* .icon-close:focus-within {
-    background-color: var(--tone-subtle);
-  } */
-}
+}

package/src/css/layout.css

@@ -99,14 +99,15 @@
     right: 0;
     bottom: 0;
     left: 0;
-    /* z-index: -1; */
     background-image:
       linear-gradient(to right, var(--ui-surface-subtle) 1px, transparent 1px),
       linear-gradient(to bottom, var(--ui-surface-subtle) 1px, transparent 1px);
     background-size: 40px 56px;
-    mask-image: radial-gradient(ellipse 25% 10% at 50% 0%,
-        #000 60%,
-        transparent 300%);
+    mask-image: radial-gradient(
+      ellipse 25% 10% at 50% 0%,
+      #000 60%,
+      transparent 300%
+    );
     pointer-events: none;
     user-select: none;
   }
@@ -121,9 +122,11 @@
   .placeholder-image {
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg,
-        var(--ui-bg-muted) 0%,
-        var(--ui-surface-subtle) 100%);
+    background: linear-gradient(
+      135deg,
+      var(--ui-bg-muted) 0%,
+      var(--ui-surface-subtle) 100%
+    );
     color: var(--ui-fg-subtle);
     font-size: var(--font-size-sm);
     display: flex;
@@ -152,8 +155,6 @@
   .container {
     width: 100%;
     max-width: var(--screen-xl);
-    /* margin-inline: auto; */
-    /* padding-inline: 1rem; */
     margin: 0 auto;
     padding: 0 1rem;
   }
@@ -168,7 +169,6 @@
   .block-center {
     height: fit-content;
     margin: 0 auto;
-    /* margin-inline: auto; */
   }
 
   .group {
@@ -263,7 +263,10 @@
   .flex-col-10,
   .flex-col-11,
   .flex-col-12 {
-    width: calc((100% + var(--flex-container-gap, 1rem)) / var(--cols) * var(--span) - var(--flex-container-gap, 1rem));
+    width: calc(
+      (100% + var(--flex-container-gap, 1rem)) / var(--cols) * var(--span) -
+        var(--flex-container-gap, 1rem)
+    );
   }
 
   /* 关键：禁用 flex-basis 的自动收缩/拉伸，仅用 width 控制 */
@@ -1030,4 +1033,4 @@
     justify-content: flex-end;
     align-items: flex-end;
   }
-}
+}

package/src/css/status.css

@@ -1,25 +1,22 @@
 /* 
  * status.css
  * - sad mode
- * - disabled
  * - readonly
  * - data-action
  * - shape status
  * - drag status
- * - hidden
+ * - disabled
+ * - flex direction
+ * - element
+ * - height size
  */
 @layer status {
-
   /* sad mode */
   .is-sad {
     filter: grayscale(100%);
   }
 
   /* readonly */
-  /* [readonly] {
-    opacity: var(--opacity-readonly);
-    cursor: default;
-  } */
 
   /* data-action */
   [data-action] {
@@ -92,4 +89,4 @@
   .is-xl {
     --el-height: var(--el-height-xl);
   }
-}
+}

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

@@ -10,7 +10,7 @@
   .j-accordion .accordion-header {
     padding: 8px 12px;
     margin: 0;
-    font-weight: var(--font-medium);
+    font-weight: 500;
     font-size: var(--font-size-md);
     border-bottom: var(--accordion-border);
 
@@ -34,7 +34,8 @@
     background: var(--ui-bg-subtle);
   }
 
-  .j-accordion.is-horizontal .accordion-header[aria-expanded='false']:nth-last-child(2) {
+  .j-accordion.is-horizontal
+    .accordion-header[aria-expanded='false']:nth-last-child(2) {
     border-right: 0;
   }
 
@@ -43,9 +44,9 @@
     text-align: left;
   }
 
-  .j-accordion .accordion-header .header-arrow svg {
+  /* .j-accordion .accordion-header .header-arrow svg {
     width: var(--accordion-icon-size, var(--font-size-md));
-  }
+  } */
 
   .j-accordion .accordion-panel {
     margin: 0;
@@ -76,7 +77,7 @@
     border-right: 0;
   }
 
-  .j-accordion .accordion-panel .panel-content {
+  .j-accordion .accordion-panel .panel-body {
     margin: 0;
     padding: 0 12px 8px;
 
@@ -84,10 +85,10 @@
     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;
     height: 100%;
   }
-}
+}

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

@@ -2,11 +2,10 @@
   .j-avatar {
     --avatar-size: var(--el-height-md);
     --avatar-border-radius: var(--radius-sm);
-    --avatar-box-shadow: var(--shadow-sm);
 
     width: var(--avatar-size);
     height: var(--avatar-size);
-    box-shadow: var(--avatar-box-shadow);
+    box-shadow: var(--avatar-box-shadow, var(--shadow-sm));
     border: var(--avatar-border);
     border-radius: var(--avatar-border-radius);
     background: var(--avatar-bg);
@@ -61,7 +60,7 @@
   .j-avatar.is-text {
     --avatar-bg: var(--tone-subtle);
     --avatar-fg: var(--tone-solid);
-    --avatar-font-weight: var(--font-medium);
+    --avatar-font-weight: 500;
   }
 
   .j-avatar.is-text,
@@ -85,4 +84,4 @@
     --avatar-bg: var(--ui-bg);
     --avatar-box-shadow: var(--shadow-sm);
   }
-}
+}

package/src/css/themes/default/badge.css

@@ -5,7 +5,7 @@
     min-width: var(--badge-min-width, 1.25rem);
     height: var(--badge-height, 1.25rem);
     font-size: var(--badge-font-size, var(--font-size-sm));
-    font-weight: var(--font-medium);
+    font-weight: 500;
     border-radius: 48px;
     border: 1px solid var(--badge-border-color, var(--ui-border));
     color: var(--badge-fg, var(--ui-fg));
@@ -81,4 +81,4 @@
     --badge-bg: var(--state-error-subtle);
     --badge-border-color: var(--state-error-muted);
   }
-}
+}