vanilla-jui 1.7.31 → 1.7.33

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

@@ -22,7 +22,7 @@
     border-color: var(--loader-fg);
     border-right-color: transparent;
     border-radius: 50%;
-    animation: var(--speed-xl) linear infinite animate-spin;
+    animation: 0.75s linear infinite animate-spin;
   }
 
   .j-loader .polygon-loader {
@@ -53,14 +53,11 @@
   .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);
@@ -78,75 +75,63 @@
     }
 
     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%);
     }
   }
 
@@ -167,4 +152,4 @@
       transform: scaleY(-1) rotate(-135deg);
     }
   }
-}
+}

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

@@ -71,7 +71,7 @@
   }
 
   .j-menu .menu .menu-item a {
-    gap: var(--s2);
+    gap: 8px;
     color: currentColor;
     padding: 0.5rem 0.75rem;
     height: var(--menu-item-height);
@@ -200,7 +200,7 @@
   }
 
   .j-menu .menu-item.list-menu>.sub-menu>.menu-item>a {
-    padding: calc(var(--space) * 1.25) var(--s2d5);
+    padding: 5px 10px;
     line-height: 1.75;
   }
 
@@ -232,7 +232,7 @@
   }
 
   .j-menu[data-menu-type='mobile'] .menu .menu-item:not(:has(a)) {
-    padding: 0.5rem 1rem;
+    padding: 8px 16px;
   }
 
   .j-menu[data-menu-type='mobile'] .menu .menu-item a {
@@ -241,8 +241,8 @@
     white-space: normal;
     position: relative;
 
-    padding: 0.5rem 1rem;
-    gap: var(--s2);
+    padding: 8px 16px;
+    gap: 8px;
     min-height: var(--el-height-2xl);
     line-height: var(--line-height-paragraph);
   }
@@ -309,7 +309,7 @@
     justify-content: space-between;
     gap: 1px;
     border-top: 1px solid var(--ui-border-subtle);
-    position: relative;
+    padding: 4px;
   }
 
   .j-menu[data-menu-type='bottom'] .menu .menu-item {
@@ -322,18 +322,18 @@
 
   .j-menu[data-menu-type='bottom'] .menu .menu-item a {
     width: 100%;
-    height: var(--el-height-2xl);
+    height: var(--el-height-xl);
     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);
-    margin-left: unset;
-    border: unset;
-    width: unset;
-    height: unset;
-    transition: unset;
+    border: none;
+    /* margin-left: unset; */
+    /* width: unset; */
+    /* height: unset; */
+    /* transition: unset; */
   }
 
   .j-menu[data-menu-type='bottom']>.menu .menu-item.menu-item-has-children:hover>a::after {
@@ -357,7 +357,7 @@
     max-width: 18rem;
     left: 50%;
     transform: translateX(-50%) translateY(100%);
-    bottom: calc(100% + var(--space));
+    bottom: calc(100% + 4px);
     transition:
       transform 0.3s ease-in-out,
       visibility 0.3s ease-in-out,
@@ -391,7 +391,7 @@
   .drop-menu .drop-container {
     min-width: 100px;
     max-width: 200px;
-    padding: var(--space);
+    padding: 4px;
     font-size: var(--font-size-md);
     background-color: var(--ui-surface-subtle);
     border-radius: var(--radius-sm);
@@ -409,9 +409,9 @@
   .drop-menu .menu-item a {
     display: flex;
     align-items: center;
-    gap: var(--s2);
+    gap: 8px;
     width: 100%;
-    padding: var(--space) var(--s2);
+    padding: 4px 8px;
     text-decoration: none;
     color: var(--ui-fg-muted);
     user-select: none;
@@ -435,7 +435,7 @@
   }
 
   .drop-menu .menu-item.menu-heading {
-    padding: 2px var(--s2);
+    padding: 2px 8px;
     color: var(--ui-fg-soft);
     font-size: var(--font-size-sm);
   }

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

@@ -1,8 +1,8 @@
 @layer components {
   .j-modal {
-    --modal-header-padding: var(--s3) var(--s4) 0;
-    --modal-body-padding: var(--s4);
-    --modal-footer-padding: 0 var(--s4) var(--s4);
+    --modal-header-padding: 12px 16px 0;
+    --modal-body-padding: 16px;
+    --modal-footer-padding: 0 16px 16px;
 
     color: var(--ui-fg);
     background: var(--ui-bg);
@@ -21,7 +21,7 @@
   }
 
   .j-modal .modal-header {
-    gap: var(--space);
+    gap: 4px;
     padding: var(--modal-header-padding);
     border-bottom: transparent;
 
@@ -49,7 +49,7 @@
     overflow-y: auto;
     overflow-wrap: break-word;
     scrollbar-width: thin;
-    scrollbar-color: var(--ui-border) transparent;
+    scrollbar-color: var(--ui-border-subtle) transparent;
   }
 
   .j-modal .modal-body p {
@@ -58,7 +58,7 @@
   }
 
   .j-modal .modal-footer {
-    gap: var(--s2);
+    gap: 8px;
     padding: var(--modal-footer-padding);
     border-top: 1px solid transparent;
 
@@ -74,7 +74,7 @@
   }
 
   .j-modal.is-fullscreen .modal-header {
-    --modal-header-padding: var(--s4);
+    --modal-header-padding: 16px;
   }
 
   .j-modal.is-fullscreen .modal-body {
@@ -82,10 +82,10 @@
   }
 
   .j-modal.is-fullscreen .modal-footer {
-    --modal-footer-padding: var(--s4);
+    --modal-footer-padding: 16px;
   }
 
   .j-popup-layout:has(.is-fullscreen) {
     padding: 0;
   }
-}
+}

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

@@ -1,6 +1,6 @@
 @layer components {
   .j-offcanvas-overlay {
-    background: var(--ui-overlay-muted);
+    background: var(--ui-popup-bg);
 
     position: fixed;
     top: 0;
@@ -59,10 +59,10 @@
     --offcanvas-block-width: 316px;
   }
 
-  .j-offcanvas .offcanvas-content {
+  .j-offcanvas .offcanvas-panel {
     position: relative;
     height: 100%;
     overflow-y: auto;
     scrollbar-width: none;
   }
-}
+}

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

@@ -1,9 +1,9 @@
 @layer components {
   .j-swiper {
     --swiper-min-height: 120px;
-    --swiper-title-inset: var(--s3);
+    --swiper-title-inset: 12px;
     --swiper-title-font-size: var(--font-size-lg);
-    --swiper-navigation-size: 36px;
+    --swiper-navigation-size: 32px;
 
     position: relative;
     display: block;
@@ -77,11 +77,11 @@
     right: var(--swiper-title-inset);
     bottom: var(--swiper-title-inset);
     left: var(--swiper-title-inset);
-    padding: var(--s1d5) var(--s2);
+    padding: 6px 8px;
     color: #fff;
     font-size: var(--swiper-title-font-size);
     font-weight: var(--font-bold);
-    background: rgb(0 0 0 / 35%);
+    background: rgba(0, 0, 0, 0.35);
     border-radius: var(--radius-sm);
     line-height: var(--line-height-heading);
 
@@ -104,32 +104,33 @@
   }
 
   .j-swiper .swiper-pagination.is-horizontal {
-    right: var(--s3);
-    bottom: var(--s2);
-    left: var(--s3);
+    right: 12px;
+    bottom: 8px;
+    left: 12px;
   }
 
   .j-swiper .swiper-pagination-indicator {
     width: 8px;
     height: 8px;
     padding: 0;
-    background: rgb(255 255 255 / 62%);
+    background: rgba(255, 255, 255, 0.62);
     border: 0;
 
     display: inline-block;
     cursor: pointer;
     border-radius: 999px;
     outline: none;
+    transition: width 0.5s var(--bezier);
   }
 
   .j-swiper .swiper-pagination-indicator:hover,
   .j-swiper .swiper-pagination-indicator:focus-visible {
-    background: rgb(255 255 255 / 86%);
+    background: rgba(255, 255, 255, 0.86);
   }
 
   .j-swiper .swiper-pagination-indicator.is-active,
   .j-swiper .swiper-pagination-indicator.active {
-    width: 22px;
+    width: 20px;
     background: #fff;
   }
 
@@ -138,7 +139,7 @@
     height: var(--swiper-navigation-size);
     padding: 0;
     color: #fff;
-    background: rgb(0 0 0 / 35%);
+    background: rgba(0, 0, 0, 0.35);
     border: 0;
     transform: translateY(-50%);
     opacity: 0;
@@ -160,21 +161,21 @@
 
   .j-swiper .swiper-navigation:hover,
   .j-swiper .swiper-navigation:focus-visible {
-    background: rgb(0 0 0 / 65%);
+    background: rgba(0, 0, 0, 0.65);
     outline: none;
   }
 
   .j-swiper .swiper-navigation.is-prev {
-    left: var(--s2);
+    left: 8px;
   }
 
   .j-swiper .swiper-navigation.is-next {
-    right: var(--s2);
+    right: 8px;
   }
 
   .j-swiper .swiper-navigation svg {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
 
     pointer-events: none;
   }
@@ -188,8 +189,7 @@
   @media (max-width: 640px) {
     .j-swiper {
       --swiper-title-font-size: var(--font-size-md);
-      --swiper-title-inset: var(--s2);
-      --swiper-navigation-size: 32px;
+      --swiper-title-inset: 8px;
     }
   }
 }

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

@@ -1,24 +1,24 @@
 @layer components {
   .j-tabs {
-    --tab-wrap-border: 1px solid var(--ui-border-subtle);
+    --tab-wrap-border: none;
 
     display: flex;
   }
 
   .j-tabs,
-  .j-tabs[data-tabs-direction='top'] {
+  .j-tabs[data-direction='top'] {
     flex-direction: column;
   }
 
-  .j-tabs[data-tabs-direction='bottom'] {
+  .j-tabs[data-direction='bottom'] {
     flex-direction: column-reverse;
   }
 
-  .j-tabs[data-tabs-direction='left'] {
+  .j-tabs[data-direction='left'] {
     flex-direction: row;
   }
 
-  .j-tabs[data-tabs-direction='right'] {
+  .j-tabs[data-direction='right'] {
     flex-direction: row-reverse;
   }
 
@@ -26,61 +26,75 @@
     overflow: hidden;
     position: relative;
     margin: 0;
+    padding: var(--tab-wrap-padding, 4px);
+    width: var(--tab-wrap-width, fit-content);
+    background-color: var(--tab-bg, var(--ui-bg-subtle));
+    border-radius: var(--tab-wrap-radius, var(--radius-md));
   }
 
-  .j-tabs[data-tabs-direction='top'] .tab-wrap {
+  .j-tabs[data-direction='top'] .tab-wrap {
     border-bottom: var(--tab-wrap-border);
   }
 
-  .j-tabs[data-tabs-direction='bottom'] .tab-wrap {
+  .j-tabs[data-direction='bottom'] .tab-wrap {
     border-top: var(--tab-wrap-border);
   }
 
-  .j-tabs[data-tabs-direction='left'] .tab-wrap {
+  .j-tabs[data-direction='left'] .tab-wrap {
     border-right: var(--tab-wrap-border);
   }
 
-  .j-tabs[data-tabs-direction='right'] .tab-wrap {
+  .j-tabs[data-direction='right'] .tab-wrap {
     border-left: var(--tab-wrap-border);
   }
 
-  .j-tabs .tab-list {
+  .j-tabs .tab-nav {
+    position: relative;
     display: flex;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
   }
 
-  .j-tabs[data-tabs-direction='left'] .tab-list,
-  .j-tabs[data-tabs-direction='right'] .tab-list {
+  .j-tabs .tab-indicator {
+    background-color: var(--tab-indicator-bg, var(--tone-soft));
+    border-radius: var(--tab-indicator-radius, var(--radius-md));
+  }
+
+  .j-tabs[data-direction='left'] .tab-nav,
+  .j-tabs[data-direction='right'] .tab-nav {
     flex-direction: column;
   }
 
-  .j-tabs .tab-list .tab-item {
-    padding: var(--s2) var(--s3);
+  .j-tabs .tab-nav .tab-item {
+    padding: var(--tab-item-padding, 6px 12px);
     margin: 0;
-    color: var(--tab-fg);
+    color: var(--tab-fg, var(--tone-body));
     font-weight: var(--font-medium);
 
     flex-shrink: 0;
     cursor: pointer;
+    position: relative;
   }
 
-  .j-tabs .tab-list .tab-item[aria-selected='true'] {
+  .j-tabs .tab-nav .tab-item:hover {
     --tab-fg: var(--tone-solid);
   }
 
-  .j-tabs .tab-list .tab-item[aria-disabled='true'] {
-    --tab-fg: var(--ui-border-strong);
+  .j-tabs .tab-nav .tab-item[aria-selected='true'] {
+    --tab-fg: var(--tone-solid);
   }
 
-  .j-tabs .panel-list {
-    padding: var(--s3);
-    margin: 0;
+  .j-tabs .tab-nav .tab-item[aria-disabled='true'] {
+    --tab-fg: var(--tone-disabled);
+  }
 
+  .j-tabs .tab-panel {
+    padding: var(--tab-panel-padding, 12px);
+    margin: 0;
     flex: 1;
   }
 
-  .j-tabs .panel-list .panel-item {
+  .j-tabs .tab-panel .panel-item {
     margin: 0;
 
     display: none;
@@ -88,7 +102,7 @@
     min-height: 22px;
   }
 
-  .j-tabs .panel-list .panel-item[aria-hidden='false'] {
+  .j-tabs .tab-panel .panel-item[aria-hidden='false'] {
     display: block;
   }
-}
+}

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

@@ -1,45 +1,49 @@
 @layer components {
-  .j-theme-palette {
+  .j-themes {
     padding: 1rem 1rem 2rem;
   }
 
-  .j-theme-palette .palette-container,
-  .j-theme-palette .palette-item {
+  .j-themes .theme-title {
+    margin: 0 0 1rem;
+  }
+
+  .j-themes .theme-container,
+  .j-themes .theme-item {
     display: flex;
     flex-direction: column;
   }
 
-  .j-theme-palette .palette-container {
-    gap: var(--s4);
+  .j-themes .theme-container {
+    gap: 16px;
   }
 
-  .j-theme-palette .palette-item {
-    gap: var(--s2);
+  .j-themes .theme-item {
+    gap: 8px;
   }
 
-  .j-theme-palette .item-title {
+  .j-themes .item-title {
     font-size: var(--font-size-md);
     font-weight: var(--font-bold);
   }
 
-  .j-theme-palette .items {
-    gap: var(--space);
+  .j-themes .items {
+    gap: 4px;
 
     display: grid;
     grid-template-columns: repeat(3, 1fr);
   }
 
-  .j-theme-palette .j-button {
+  .j-themes .j-btn {
     min-width: 0;
     overflow: hidden;
   }
 
-  .j-theme-palette [data-theme-group='theme'] .j-button {
+  .j-themes [data-theme-group='theme'] .j-btn {
     justify-content: flex-start;
-    --btn-padding: 0 var(--s2);
+    --btn-padding: 0 8px;
   }
 
-  .j-theme-palette .j-button .item-hex {
+  .j-themes .j-btn .item-hex {
     width: var(--font-size-sm);
     height: var(--font-size-sm);
 
@@ -48,16 +52,16 @@
     flex-shrink: 0;
   }
 
-  .mobile .j-theme-palette {
+  .mobile .j-themes {
     padding: 1rem 1rem 4rem;
   }
 
-  .mobile .j-theme-palette [data-theme-group='theme'] .j-button {
+  .mobile .j-themes [data-theme-group='theme'] .j-btn {
     --btn-padding: 0 6px;
   }
 
-  .j-theme-palette .j-button .button-text {
+  .j-themes .j-btn .el-text {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-}
+}