vanilla-jui 1.4.8 → 1.5.2

package/src/css/gradient.css

@@ -1,9 +1,8 @@
 @layer gradient {
+
   :root,
   .light,
-  .light-theme,
-  .dark,
-  .dark-theme {
+  .dark {
     --gradient-card-border: var(--ui-border);
     --gradient-card-shadow: var(--shadow-md);
   }
@@ -22,197 +21,131 @@
 
   .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-danger) 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-danger-subtle)
-        )
-      );
+          var(--state-danger-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)));
   }
 
   .gradient-grid {
@@ -298,4 +231,4 @@
     font-size: 0.76rem;
     font-weight: 700;
   }
-}
+}

package/src/css/layout.css

@@ -11,27 +11,20 @@
     box-sizing: border-box;
   }
 
-  html.light,
-  html.theme-light {
+  .light {
     color-scheme: light;
   }
 
-  html.dark,
-  html.theme-dark {
+  .dark {
     color-scheme: dark;
   }
 
   body {
-    -webkit-text-size-adjust: 100%;
     tab-size: 4;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
     scroll-behavior: smooth;
     font-family:
       'Source Han Sans CN', 'Inter', 'PingFang SC', 'Helvetica Neue', Emoji,
       Arial, sans-serif;
-    font-feature-settings: normal;
-    font-variation-settings: normal;
     color: var(--ui-fg);
     background-color: var(--ui-bg);
 
@@ -61,8 +54,6 @@
   }
 
   .is-reset:where(button) {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     cursor: default;
     background-color: transparent;
@@ -76,7 +67,6 @@
     padding: 0;
     margin: 0;
     text-align: initial;
-    -webkit-tap-highlight-color: transparent;
   }
 
   .is-reset:where(h1, h2, h3, h4, h5, h6) {
@@ -112,11 +102,9 @@
       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;
   }
@@ -131,11 +119,9 @@
   .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%);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -782,4 +768,4 @@
   .w-screen {
     width: 100vw;
   }
-}
+}

package/src/css/menu.css

@@ -77,7 +77,10 @@
     height: var(--menu-item-icon-size);
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children > a {
+  .j-menu:not([data-menu-type='mobile']):not([data-menu-type='bottom'])
+    .menu
+    .menu-item.menu-item-has-children
+    > a {
     pointer-events: none;
   }
 
@@ -413,14 +416,13 @@
     width: 100%;
     visibility: hidden;
     opacity: 0;
-    transform: translateX(100%);
+    transform: translateX(80%);
     transition:
+      transform 0.3s ease-in-out,
       opacity 0.3s ease-in-out,
       visibility 0.3s ease-in-out;
-
     max-width: 100%;
     background: var(--ui-bg);
-    z-index: -1;
   }
 
   .j-menu[data-menu-type='mobile'] .menu .sub-menu .menu-item:hover a {
@@ -520,11 +522,13 @@
     min-width: var(--columns-6xs);
     max-width: var(--columns-2xs);
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(-50%) translateY(100%);
     bottom: calc(100% + var(--space));
     transition:
+      transform 0.3s ease-in-out,
       visibility 0.3s ease-in-out,
       opacity 0.3s ease-in-out;
+    z-index: -1;
   }
 
   .j-menu[data-menu-type='bottom']
@@ -533,6 +537,7 @@
     > .sub-menu {
     opacity: 1;
     visibility: visible;
+    transform: translateX(-50%) translateY(0%);
   }
 
   .j-menu[data-menu-type='bottom']

package/src/css/modal.css

@@ -11,7 +11,6 @@
     max-width: var(--modal-max-width);
     max-height: var(--modal-max-height);
     overflow: hidden;
-    animation: animate-fade-in 0.35s ease-in-out;
     display: flex;
     flex-direction: column;
     position: relative;
@@ -48,6 +47,8 @@
     overflow-y: auto;
     overflow-wrap: break-word;
     flex: 1;
+    position: relative;
+    min-height: 32px;
   }
 
   .j-modal .modal-body p {

package/src/css/offcanvas.css

@@ -5,7 +5,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    transition: opacity 0.3s ease;
+    pointer-events: auto;
     background: var(--offcanvas-overlay-bg);
     z-index: var(--z-overlay);
   }
@@ -17,20 +17,11 @@
     box-shadow: var(--offcanvas-box-shadow);
   }
 
-  .j-offcanvas[data-animate='slide'] {
-    transition: transform 0.3s ease;
-  }
-
-  .j-offcanvas:not([data-animate='slide']) {
-    transition: none;
-  }
-
   .j-offcanvas[data-direction='left'] {
     top: 0;
     left: 0;
     width: var(--offcanvas-block-width);
     height: 100vh;
-    transform: translateX(-100%);
     border-right: var(--offcanvas-border);
   }
 
@@ -39,7 +30,6 @@
     right: 0;
     width: var(--offcanvas-block-width);
     height: 100vh;
-    transform: translateX(100%);
     border-left: var(--offcanvas-border);
   }
 
@@ -48,7 +38,6 @@
     left: 0;
     width: 100%;
     height: var(--offcanvas-inline-height);
-    transform: translateY(-100%);
     border-bottom: var(--offcanvas-border);
   }
 
@@ -57,14 +46,9 @@
     left: 0;
     width: 100%;
     height: var(--offcanvas-inline-height);
-    transform: translateY(100%);
     border-top: var(--offcanvas-border);
   }
 
-  .j-offcanvas[aria-expanded='true'] {
-    transform: translate(0, 0);
-  }
-
   .j-offcanvas .offcanvas-content {
     position: relative;
     height: 100%;

package/src/css/swiper.css

@@ -13,6 +13,7 @@
     width: 100%;
     height: 100%;
     will-change: transform;
+    position: relative;
   }
 
   .j-swiper .swiper-slide {
@@ -142,4 +143,4 @@
     cursor: default;
     opacity: 0.36;
   }
-}
+}

package/src/css/tabs.css

@@ -28,7 +28,6 @@
 
   .j-tabs .tab-list {
     display: flex;
-    user-select: none;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
   }
@@ -47,28 +46,20 @@
     cursor: pointer;
   }
 
-  .j-tabs .tab-list .tab-item[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-
-  .j-tabs .tab-panel {
-    padding: var(--tab-panel-padding);
-    margin: var(--tab-panel-margin);
+  .j-tabs .panel-list {
+    padding: var(--panel-list-padding);
+    margin: var(--panel-list-margin);
     flex: 1;
   }
 
-  .j-tabs .tab-panel .panel-item {
+  .j-tabs .panel-list .panel-item {
     display: none;
-    margin: var(--tab-panel-item-margin);
+    margin: var(--panel-list-item-margin);
     position: relative;
-    min-height: var(--tab-panel-item-min-height);
+    min-height: inherit;
   }
 
-  .j-tabs .tab-panel .panel-item[aria-hidden='false'] {
+  .j-tabs .panel-list .panel-item[aria-hidden='false'] {
     display: block;
   }
-
-  .j-tabs .tab-panel .panel-item > * {
-    margin: var(--tab-panel-item-content-margin);
-  }
-}
+}

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

@@ -6,57 +6,9 @@
     --accordion-header-padding: var(--s2) var(--s3);
     --accordion-header-margin: 0;
     --accordion-border: 1px solid var(--ui-border-subtle);
-    --accordion-icon-size: var(--font-size-lg);
     --accordion-icon-transform: rotate(0deg);
     --accordion-panel-margin: 0;
     --accordion-panel-content-margin: 0;
     --accordion-panel-content-padding: 0 var(--s3) var(--s2);
   }
-
-  .j-accordion .accordion-header {
-    padding: var(--accordion-header-padding);
-    margin: var(--accordion-header-margin);
-    font-weight: var(--accordion-font-weight);
-    font-size: var(--accordion-header-font-size);
-    background: var(--accordion-bg);
-    border-bottom: var(--accordion-border);
-  }
-
-  .j-accordion .accordion-header[aria-expanded='true'] {
-    border-color: transparent;
-  }
-
-  .j-accordion .accordion-header[aria-expanded='true'] .header-title {
-    --accordion-font-weight: var(--font-bold);
-  }
-
-  .j-accordion .accordion-header[aria-expanded='false']:hover {
-    --accordion-bg: var(--ui-surface-hover);
-  }
-
-  .j-accordion .accordion-header .header-arrow {
-    width: var(--accordion-icon-size);
-    height: var(--accordion-icon-size);
-    transition: transform 0.3s ease-out;
-    transform: var(--accordion-icon-transform);
-  }
-
-  .j-accordion .accordion-header[aria-expanded='true'] .header-arrow {
-    --accordion-icon-transform: rotate(180deg);
-  }
-
-  .j-accordion .accordion-panel {
-    margin: var(--accordion-panel-margin);
-    font-size: var(--accordion-font-size);
-  }
-
-  .j-accordion .accordion-panel .panel-content {
-    margin: var(--accordion-panel-content-margin);
-    padding: var(--accordion-panel-content-padding);
-    border-bottom: var(--accordion-border);
-  }
-
-  .j-accordion .accordion-panel:last-child .panel-content {
-    border-bottom: none;
-  }
 }

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

@@ -32,4 +32,4 @@
       --swiper-navigation-size: 32px;
     }
   }
-}
+}

package/src/css/themes/default/tabs.css

@@ -4,11 +4,9 @@
     --tab-list-item-margin: 0;
     --tab-list-font-weight: var(--font-medium);
     --tab-wrap-border: 1px solid var(--ui-border-subtle);
-    --tab-panel-padding: var(--s2) var(--s3);
-    --tab-panel-margin: 0;
-    --tab-panel-item-margin: 0;
-    --tab-panel-item-min-height: 1.25em;
-    --tab-panel-item-content-margin: 0;
+    --panel-list-padding: var(--s2) var(--s3);
+    --panel-list-margin: 0;
+    --panel-list-item-margin: 0;
   }
 
   .j-tabs[data-tabs-direction='top'] .tab-wrap {
@@ -34,4 +32,4 @@
   .j-tabs .tab-list .tab-item[aria-disabled='true'] {
     --tab-fg: var(--ui-border-strong);
   }
-}
+}

package/src/css/toast.css

@@ -32,15 +32,6 @@
     word-break: break-all;
     cursor: pointer;
     pointer-events: auto;
-
-    opacity: 0;
-    transform: translateY(-100%);
-    transition: all 0.3s ease-in-out;
-  }
-
-  .j-toast[aria-live] {
-    opacity: 1;
-    transform: translateY(0);
   }
 
   .j-toast .el-icon {
@@ -58,20 +49,13 @@
     position: fixed;
     top: 45%;
     left: 50%;
-    transition: opacity 0.15s ease-in-out;
     z-index: var(--z-toast);
     width: fit-content;
     max-width: 240px;
     text-align: center;
     user-select: none;
     pointer-events: none;
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
-  }
-
-  .j-toast-lite[aria-live] {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
+    transform: translate(-50%, -50%);
   }
 
   .j-toast.is-action {