vanilla-jui 1.7.34 → 1.7.36

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;
@@ -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,11 +73,11 @@
   .j-menu .menu .menu-item a {
     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);
+    padding: 8px 12px;
+    height: var(--menu-height);
+    line-height: var(--menu-line-height);
+    border-radius: var(--menu-radius);
+    font-weight: 500;
 
     display: flex;
     justify-content: center;
@@ -91,19 +91,16 @@
 
   .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 {
-    /* width: 0; */
-    /* height: 0; */
-    /* vertical-align: middle; */
-    transition: transform 0.2s ease-in-out;
+  .j-menu .menu .menu-item.menu-item-has-children > a::after {
+    transition: transform 0.2s ease;
 
     content: '';
     border-left: 3px solid transparent;
@@ -111,33 +108,29 @@
     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;
+    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 {
@@ -148,24 +141,37 @@
     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 {
-    background: var(--tone-soft);
+  .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-subtle);
     color: var(--tone-text);
   }
 
@@ -174,18 +180,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 +202,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 +217,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 +256,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 +269,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;
   }
 
@@ -268,14 +283,17 @@
     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;
   }
 
   .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 +303,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);
@@ -296,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 {
@@ -326,27 +359,34 @@
     color: var(--ui-fg);
   }
 
-  .j-menu[data-menu-type='bottom']>.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; */
+  .j-menu[data-menu-type='bottom']
+    > .menu
+    > .menu-item.menu-item-has-children
+    > a::after {
+    content: none;
   }
 
-  .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);
+    background-color: var(--tone-subtle);
   }
 
-  .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;
@@ -355,27 +395,41 @@
     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;
   }
 
-  .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,15 +1,11 @@
 @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;
+    min-width: 304px;
     max-width: 500px;
     max-height: 90lvh;
     max-height: 90dvh;
@@ -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);
   }
 
@@ -40,15 +39,18 @@
 
   .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,
-        var(--ui-border) 1px,
-        transparent 1px);
+    background-image: radial-gradient(
+      circle,
+      var(--ui-border) 1px,
+      transparent 1px
+    );
     background-size: 20px 20px;
 
     position: absolute;
-    content: 'loading';
+    content: 'LOADING';
+    font-family: Courier, monospace;
     top: 0;
     left: 0;
     width: 100%;
@@ -74,15 +76,15 @@
   }
 
   .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);
+    border-radius: inherit;
     line-height: var(--line-height-heading);
 
     display: block;
@@ -120,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,
@@ -135,8 +137,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);
@@ -152,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 {
@@ -188,8 +190,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;
   }
-}
+}