vanilla-jui 1.7.33 → 1.7.35

package/src/css/themes/default/loading.css

@@ -53,11 +53,14 @@
   .j-loader .flow-loader {
     --loader-width: 2px;
     --loader-bg:
-      radial-gradient(farthest-side, var(--tone-solid) 94%, #0000) top/var(--loader-width) var(--loader-width) no-repeat,
+      radial-gradient(farthest-side, var(--tone-solid) 94%, #0000)
+        top/var(--loader-width) var(--loader-width) no-repeat,
       conic-gradient(#0000 30%, var(--tone-solid));
-    --loader-mask: radial-gradient(farthest-side,
-        #0000 calc(100% - var(--loader-width)),
-        #000 0);
+    --loader-mask: radial-gradient(
+      farthest-side,
+      #0000 calc(100% - var(--loader-width)),
+      #000 0
+    );
 
     width: var(--loader-size);
     height: var(--loader-size);
@@ -75,63 +78,75 @@
     }
 
     12.5% {
-      clip-path: polygon(50% 50%,
-          0 0,
-          50% 0%,
-          100% 0%,
-          100% 0%,
-          100% 0%,
-          100% 0%);
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%
+      );
     }
 
     25% {
-      clip-path: polygon(50% 50%,
-          0 0,
-          50% 0%,
-          100% 0%,
-          100% 100%,
-          100% 100%,
-          100% 100%);
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        100% 100%,
+        100% 100%
+      );
     }
 
     50% {
-      clip-path: polygon(50% 50%,
-          0 0,
-          50% 0%,
-          100% 0%,
-          100% 100%,
-          50% 100%,
-          0% 100%);
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
     }
 
     62.5% {
-      clip-path: polygon(50% 50%,
-          100% 0,
-          100% 0%,
-          100% 0%,
-          100% 100%,
-          50% 100%,
-          0% 100%);
+      clip-path: polygon(
+        50% 50%,
+        100% 0,
+        100% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
     }
 
     75% {
-      clip-path: polygon(50% 50%,
-          100% 100%,
-          100% 100%,
-          100% 100%,
-          100% 100%,
-          50% 100%,
-          0% 100%);
+      clip-path: polygon(
+        50% 50%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
     }
 
     100% {
-      clip-path: polygon(50% 50%,
-          50% 100%,
-          50% 100%,
-          50% 100%,
-          50% 100%,
-          50% 100%,
-          0% 100%);
+      clip-path: polygon(
+        50% 50%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        0% 100%
+      );
     }
   }
 
@@ -152,4 +167,4 @@
       transform: scaleY(-1) rotate(-135deg);
     }
   }
-}
+}

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

@@ -1,11 +1,11 @@
 @layer components {
   .j-menu {
-    --menu-border-radius: var(--radius-md);
-    --menu-item-icon-size: var(--font-size-lg);
-    --menu-item-height: var(--el-height-md);
-    --menu-item-line-height: var(--line-height);
+    --menu-radius: var(--radius-md);
+    --menu-icon-size: var(--font-size-lg);
+    --menu-height: var(--el-height-md);
+    --menu-line-height: var(--line-height);
 
-    font-weight: var(--font-medium);
+    font-weight: 500;
     width: 100%;
     white-space: nowrap;
     overflow-x: auto;
@@ -40,8 +40,8 @@
   }
 
   .j-menu .menu .menu-item:not(:has(a)) {
-    height: var(--menu-item-height);
-    line-height: var(--menu-item-line-height);
+    height: var(--menu-height);
+    line-height: var(--menu-line-height);
 
     text-decoration: underline;
     text-decoration-style: wavy;
@@ -74,10 +74,10 @@
     gap: 8px;
     color: currentColor;
     padding: 0.5rem 0.75rem;
-    height: var(--menu-item-height);
-    line-height: var(--menu-item-line-height);
-    border-radius: var(--menu-border-radius);
-    font-weight: var(--font-medium);
+    height: var(--menu-height);
+    line-height: var(--menu-line-height);
+    border-radius: var(--menu-radius);
+    font-weight: 500;
 
     display: flex;
     justify-content: center;
@@ -91,15 +91,15 @@
 
   .j-menu .menu .menu-item a .el-icon,
   .j-menu .menu .menu-item a svg {
-    width: var(--menu-item-icon-size);
-    height: var(--menu-item-icon-size);
+    width: var(--menu-icon-size);
+    height: var(--menu-icon-size);
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children>a {
+  .j-menu .menu .menu-item.menu-item-has-children > a {
     position: relative;
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children>a::after {
+  .j-menu .menu .menu-item.menu-item-has-children > a::after {
     /* width: 0; */
     /* height: 0; */
     /* vertical-align: middle; */
@@ -111,22 +111,24 @@
     border-top: 4px solid currentColor;
   }
 
-  .j-menu .menu .menu-item.menu-item-has-children:hover>a::after {
+  .j-menu .menu .menu-item.menu-item-has-children:hover > a::after {
     transform: rotate(180deg);
   }
 
   .j-menu .menu .menu-item .sub-menu {
     padding: 4px;
-    border-radius: var(--menu-border-radius);
+    border-radius: var(--menu-radius);
     min-width: 120px;
     max-width: 240px;
 
     background-color: var(--ui-bg-subtle);
 
     @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-subtle) 75%,
+        transparent
+      );
     }
 
     backdrop-filter: blur(4px);
@@ -148,23 +150,36 @@
     white-space: normal;
   }
 
-  .j-menu .menu>.menu-item.current-menu-item>a,
-  .j-menu .menu>.menu-item.current-menu-ancestor>a {
+  .j-menu .menu > .menu-item.current-menu-item > a,
+  .j-menu .menu > .menu-item.current-menu-ancestor > a {
     color: var(--tone-solid);
   }
 
-  .j-menu .menu .menu-item.current-menu-item>.sub-menu>.menu-item:not(.current-menu-item) a {
+  .j-menu
+    .menu
+    .menu-item.current-menu-item
+    > .sub-menu
+    > .menu-item:not(.current-menu-item)
+    a {
     color: inherit;
   }
 
-  .j-menu .menu-item.current-menu-item>.sub-menu>.menu-item:not(.current-menu-item):hover a {
+  .j-menu
+    .menu-item.current-menu-item
+    > .sub-menu
+    > .menu-item:not(.current-menu-item):hover
+    a {
     color: var(--tone-fg);
   }
 
   .j-menu .menu .menu-item .sub-menu .menu-item:hover a,
   .j-menu .menu .menu-item a:hover,
-  .j-menu .menu .menu-item.menu-item-has-children:hover>a,
-  .j-menu .menu-item.menu-item-has-children:hover>.sub-menu>.menu-item.current-menu-item a {
+  .j-menu .menu .menu-item.menu-item-has-children:hover > a,
+  .j-menu
+    .menu-item.menu-item-has-children:hover
+    > .sub-menu
+    > .menu-item.current-menu-item
+    a {
     background: var(--tone-soft);
     color: var(--tone-text);
   }
@@ -174,18 +189,21 @@
     z-index: var(--z-submenu);
   }
 
-  .j-menu:not([data-menu-type='mobile']):not([data-menu-type='bottom']) .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;
   }
 
   /* list card menu */
-  .j-menu .menu-item.menu-item-has-children.list-menu:hover>.sub-menu {
+  .j-menu .menu-item.menu-item-has-children.list-menu:hover > .sub-menu {
     width: auto;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
   }
 
-  .j-menu .menu-item.list-menu>.sub-menu>.menu-item>a {
+  .j-menu .menu-item.list-menu > .sub-menu > .menu-item > a {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -193,13 +211,13 @@
     line-clamp: 1;
   }
 
-  .j-menu .menu-item.menu-item-has-children.list-menu:hover>.sub-menu {
+  .j-menu .menu-item.menu-item-has-children.list-menu:hover > .sub-menu {
     min-width: 240px;
     max-width: 360px;
     transform: translateX(-20%) translateY(1px);
   }
 
-  .j-menu .menu-item.list-menu>.sub-menu>.menu-item>a {
+  .j-menu .menu-item.list-menu > .sub-menu > .menu-item > a {
     padding: 5px 10px;
     line-height: 1.75;
   }
@@ -208,9 +226,9 @@
    * 侧边栏菜单
    */
   .j-menu[data-menu-type='mobile'] {
-    --menu-item-line-height: var(--line-height-paragraph);
-    --menu-item-height: var(--el-height-xl);
-    --menu-border-radius: none;
+    --menu-line-height: var(--line-height-paragraph);
+    --menu-height: var(--el-height-xl);
+    --menu-radius: none;
     --menu-item-active-bg: var(--ui-bg-subtle);
 
     overflow-x: hidden;
@@ -247,7 +265,10 @@
     line-height: var(--line-height-paragraph);
   }
 
-  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children>a::after {
+  .j-menu[data-menu-type='mobile']
+    .menu
+    .menu-item.menu-item-has-children
+    > a::after {
     vertical-align: middle;
     position: absolute;
     right: 1rem;
@@ -257,7 +278,10 @@
     border-top: 4px solid transparent;
   }
 
-  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children:hover>a::after {
+  .j-menu[data-menu-type='mobile']
+    .menu
+    .menu-item.menu-item-has-children:hover
+    > a::after {
     transform: none;
   }
 
@@ -275,7 +299,10 @@
   }
 
   .j-menu[data-menu-type='mobile'] .menu .menu-item a:hover,
-  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children:hover>a,
+  .j-menu[data-menu-type='mobile']
+    .menu
+    .menu-item.menu-item-has-children:hover
+    > a,
   .j-menu[data-menu-type='mobile'] .menu .sub-menu .menu-item:hover a {
     background: inherit;
     color: inherit;
@@ -285,7 +312,10 @@
     background: var(--menu-item-active-bg);
   }
 
-  .j-menu[data-menu-type='mobile'] .menu .menu-item.menu-item-has-children.is-active>.sub-menu {
+  .j-menu[data-menu-type='mobile']
+    .menu
+    .menu-item.menu-item-has-children.is-active
+    > .sub-menu {
     visibility: visible;
     opacity: 1;
     z-index: var(--z-submenu);
@@ -326,7 +356,10 @@
     color: var(--ui-fg);
   }
 
-  .j-menu[data-menu-type='bottom']>.menu>.menu-item.menu-item-has-children>a::after {
+  .j-menu[data-menu-type='bottom']
+    > .menu
+    > .menu-item.menu-item-has-children
+    > a::after {
     content: '☰';
     font-size: var(--font-size-sm);
     border: none;
@@ -336,17 +369,26 @@
     /* transition: unset; */
   }
 
-  .j-menu[data-menu-type='bottom']>.menu .menu-item.menu-item-has-children:hover>a::after {
+  .j-menu[data-menu-type='bottom']
+    > .menu
+    .menu-item.menu-item-has-children:hover
+    > a::after {
     transform: none;
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-parent>a,
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-item>a,
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children.is-active>a {
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-parent > a,
+  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-item > a,
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children.is-active
+    > a {
     color: var(--tone-solid);
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu {
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children
+    > .sub-menu {
     opacity: 0;
     visibility: hidden;
     display: flex;
@@ -365,17 +407,29 @@
     z-index: -1;
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children.is-active>.sub-menu {
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children.is-active
+    > .sub-menu {
     opacity: 1;
     visibility: visible;
     transform: translateX(-50%) translateY(0%);
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item {
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children
+    > .sub-menu
+    > .menu-item {
     white-space: normal;
   }
 
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item>a {
+  .j-menu[data-menu-type='bottom']
+    .menu
+    .menu-item.menu-item-has-children
+    > .sub-menu
+    > .menu-item
+    > a {
     min-height: var(--el-height-2xl);
     justify-content: center;
   }
@@ -439,4 +493,4 @@
     color: var(--ui-fg-soft);
     font-size: var(--font-size-sm);
   }
-}
+}

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

@@ -1,12 +1,8 @@
 @layer components {
   .j-modal {
-    --modal-header-padding: 12px 16px 0;
-    --modal-body-padding: 16px;
-    --modal-footer-padding: 0 16px 16px;
-
     color: var(--ui-fg);
     background: var(--ui-bg);
-    border: 1px solid var(--ui-border);
+    border: var(--border);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-md);
     min-width: 300px;
@@ -22,7 +18,7 @@
 
   .j-modal .modal-header {
     gap: 4px;
-    padding: var(--modal-header-padding);
+    padding: var(--modal-header-padding, 12px 16px 0);
     border-bottom: transparent;
 
     display: flex;
@@ -33,7 +29,7 @@
   .j-modal .modal-header .modal-title {
     margin: 0;
     font-size: var(--font-size-md);
-    font-weight: var(--font-medium);
+    font-weight: 500;
   }
 
   .j-modal .modal-header .is-icon svg {
@@ -41,7 +37,7 @@
   }
 
   .j-modal .modal-body {
-    padding: var(--modal-body-padding);
+    padding: var(--modal-body-padding, 16px);
     min-height: 32px;
 
     flex: 1;
@@ -59,7 +55,7 @@
 
   .j-modal .modal-footer {
     gap: 8px;
-    padding: var(--modal-footer-padding);
+    padding: var(--modal-footer-padding, 0 16px 16px);
     border-top: 1px solid transparent;
 
     display: flex;
@@ -88,4 +84,4 @@
   .j-popup-layout:has(.is-fullscreen) {
     padding: 0;
   }
-}
+}

package/src/css/themes/default/offcanvas.css

@@ -12,9 +12,8 @@
   }
 
   .j-offcanvas {
-    --offcanvas-border: 1px solid var(--ui-border-subtle);
-    --offcanvas-block-width: 300px;
-    --offcanvas-inline-height: 200px;
+    --offcanvas-width: 300px;
+    --offcanvas-height: 200px;
 
     background: var(--ui-bg);
     box-shadow: var(--shadow-md);
@@ -26,37 +25,37 @@
   .j-offcanvas[data-direction='left'] {
     top: 0;
     left: 0;
-    width: var(--offcanvas-block-width);
+    width: var(--offcanvas-width);
     height: 100vh;
-    border-right: var(--offcanvas-border);
+    border-right: var(--border);
   }
 
   .j-offcanvas[data-direction='right'] {
     top: 0;
     right: 0;
-    width: var(--offcanvas-block-width);
+    width: var(--offcanvas-width);
     height: 100vh;
-    border-left: var(--offcanvas-border);
+    border-left: var(--border);
   }
 
   .j-offcanvas[data-direction='top'] {
     top: 0;
     left: 0;
     width: 100%;
-    height: var(--offcanvas-inline-height);
-    border-bottom: var(--offcanvas-border);
+    height: var(--offcanvas-height);
+    border-bottom: var(--border);
   }
 
   .j-offcanvas[data-direction='bottom'] {
     bottom: 0;
     left: 0;
     width: 100%;
-    height: var(--offcanvas-inline-height);
-    border-top: var(--offcanvas-border);
+    height: var(--offcanvas-height);
+    border-top: var(--border);
   }
 
   .j-font-md .j-offcanvas {
-    --offcanvas-block-width: 316px;
+    --offcanvas-width: 316px;
   }
 
   .j-offcanvas .offcanvas-panel {
@@ -65,4 +64,4 @@
     overflow-y: auto;
     scrollbar-width: none;
   }
-}
+}

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

@@ -1,9 +1,8 @@
 @layer components {
   .j-swiper {
-    --swiper-min-height: 120px;
-    --swiper-title-inset: 12px;
-    --swiper-title-font-size: var(--font-size-lg);
-    --swiper-navigation-size: 32px;
+    --swiper-inset: 12px;
+    --swiper-font-size: var(--font-size-lg);
+    --swiper-icon-size: 32px;
 
     position: relative;
     display: block;
@@ -11,7 +10,7 @@
     touch-action: pan-y;
     user-select: none;
     width: 100%;
-    min-height: var(--swiper-min-height);
+    min-height: var(--swiper-min-height, 120px);
     border-radius: var(--radius-md);
   }
 
@@ -42,9 +41,11 @@
     color: var(--ui-fg-soft);
     font-size: var(--font-size-md);
     background-color: var(--tone-wash);
-    background-image: radial-gradient(circle,
-        var(--ui-border) 1px,
-        transparent 1px);
+    background-image: radial-gradient(
+      circle,
+      var(--ui-border) 1px,
+      transparent 1px
+    );
     background-size: 20px 20px;
 
     position: absolute;
@@ -74,13 +75,13 @@
   }
 
   .j-swiper .swiper-slide-title {
-    right: var(--swiper-title-inset);
-    bottom: var(--swiper-title-inset);
-    left: var(--swiper-title-inset);
+    right: var(--swiper-inset);
+    bottom: var(--swiper-inset);
+    left: var(--swiper-inset);
     padding: 6px 8px;
     color: #fff;
-    font-size: var(--swiper-title-font-size);
-    font-weight: var(--font-bold);
+    font-size: var(--swiper-font-size);
+    font-weight: 700;
     background: rgba(0, 0, 0, 0.35);
     border-radius: var(--radius-sm);
     line-height: var(--line-height-heading);
@@ -135,8 +136,8 @@
   }
 
   .j-swiper .swiper-navigation {
-    width: var(--swiper-navigation-size);
-    height: var(--swiper-navigation-size);
+    width: var(--swiper-icon-size);
+    height: var(--swiper-icon-size);
     padding: 0;
     color: #fff;
     background: rgba(0, 0, 0, 0.35);
@@ -188,8 +189,8 @@
 
   @media (max-width: 640px) {
     .j-swiper {
-      --swiper-title-font-size: var(--font-size-md);
-      --swiper-title-inset: 8px;
+      --swiper-font-size: var(--font-size-md);
+      --swiper-inset: 8px;
     }
   }
-}
+}

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

@@ -69,7 +69,7 @@
     padding: var(--tab-item-padding, 6px 12px);
     margin: 0;
     color: var(--tab-fg, var(--tone-body));
-    font-weight: var(--font-medium);
+    font-weight: 500;
 
     flex-shrink: 0;
     cursor: pointer;
@@ -85,7 +85,7 @@
   }
 
   .j-tabs .tab-nav .tab-item[aria-disabled='true'] {
-    --tab-fg: var(--tone-disabled);
+    --tab-fg: var(--ui-fg-disabled);
   }
 
   .j-tabs .tab-panel {
@@ -105,4 +105,4 @@
   .j-tabs .tab-panel .panel-item[aria-hidden='false'] {
     display: block;
   }
-}
+}

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

@@ -23,7 +23,7 @@
 
   .j-themes .item-title {
     font-size: var(--font-size-md);
-    font-weight: var(--font-bold);
+    font-weight: 700;
   }
 
   .j-themes .items {
@@ -64,4 +64,4 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
-}
+}