vanilla-jui 1.7.9 → 1.7.11

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

@@ -1,9 +1,41 @@
-@layer themes {
+@layer components {
   .j-swiper {
     --swiper-min-height: 120px;
     --swiper-title-inset: var(--s3);
     --swiper-title-font-size: var(--font-size-lg);
     --swiper-navigation-size: 36px;
+
+    position: relative;
+    display: block;
+    overflow: hidden;
+    touch-action: pan-y;
+    user-select: none;
+    width: 100%;
+    min-height: var(--swiper-min-height);
+    border-radius: var(--radius-md);
+  }
+
+  .j-swiper .swiper-wrapper {
+    display: flex;
+    will-change: transform;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: inherit;
+    border-radius: inherit;
+  }
+
+  .j-swiper .swiper-slide {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    color: inherit;
+    text-decoration: none;
+    user-select: none;
+    width: 100%;
+    min-width: 100%;
+    aspect-ratio: inherit;
+    border-radius: inherit;
   }
 
   .j-swiper .swiper-slide::before {
@@ -16,6 +48,31 @@
       transparent 1px
     );
     background-size: 20px 20px;
+
+    position: absolute;
+    content: 'loading';
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: inherit;
+    border-radius: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    letter-spacing: 1px;
+  }
+
+  .j-swiper .swiper-image {
+    position: relative;
+    display: block;
+    object-fit: cover;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+    min-height: var(--swiper-min-height);
+    aspect-ratio: inherit;
+    border-radius: inherit;
   }
 
   .j-swiper .swiper-slide-title {
@@ -29,10 +86,23 @@
     background: rgb(0 0 0 / 35%);
     border-radius: var(--radius-sm);
     line-height: var(--line-height-heading);
+
+    display: block;
+    position: absolute;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    z-index: 1;
+    overflow: hidden;
   }
 
   .j-swiper .swiper-pagination {
     gap: 6px;
+
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
   }
 
   .j-swiper .swiper-pagination.is-horizontal {
@@ -47,6 +117,11 @@
     padding: 0;
     background: rgb(255 255 255 / 62%);
     border: 0;
+
+    display: inline-block;
+    cursor: pointer;
+    border-radius: 999px;
+    outline: none;
   }
 
   .j-swiper .swiper-pagination-indicator:hover,
@@ -68,6 +143,21 @@
     background: rgb(0 0 0 / 35%);
     border: 0;
     transform: translateY(-50%);
+    opacity: 0;
+
+    position: absolute;
+    top: 50%;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 999px;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  .j-swiper:hover .swiper-navigation {
+    opacity: 1;
   }
 
   .j-swiper .swiper-navigation:hover,
@@ -87,6 +177,14 @@
   .j-swiper .swiper-navigation svg {
     width: 18px;
     height: 18px;
+
+    pointer-events: none;
+  }
+
+  .j-swiper .swiper-navigation.is-disabled,
+  .j-swiper .swiper-navigation:disabled {
+    cursor: default;
+    opacity: 0.36;
   }
 
   @media (max-width: 640px) {

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

@@ -1,6 +1,31 @@
-@layer themes {
+@layer components {
   .j-tabs {
     --tab-wrap-border: 1px solid var(--ui-border-subtle);
+
+    display: flex;
+  }
+
+  .j-tabs,
+  .j-tabs[data-tabs-direction='top'] {
+    flex-direction: column;
+  }
+
+  .j-tabs[data-tabs-direction='bottom'] {
+    flex-direction: column-reverse;
+  }
+
+  .j-tabs[data-tabs-direction='left'] {
+    flex-direction: row;
+  }
+
+  .j-tabs[data-tabs-direction='right'] {
+    flex-direction: row-reverse;
+  }
+
+  .j-tabs .tab-wrap {
+    overflow: hidden;
+    position: relative;
+    margin: 0;
   }
 
   .j-tabs[data-tabs-direction='top'] .tab-wrap {
@@ -19,11 +44,25 @@
     border-left: var(--tab-wrap-border);
   }
 
+  .j-tabs .tab-list {
+    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 {
+    flex-direction: column;
+  }
+
   .j-tabs .tab-list .tab-item {
     padding: var(--s2) var(--s3);
     margin: 0;
     color: var(--tab-fg);
     font-weight: var(--font-medium);
+
+    flex-shrink: 0;
+    cursor: pointer;
   }
 
   .j-tabs .tab-list .tab-item[aria-selected='true'] {
@@ -37,9 +76,19 @@
   .j-tabs .panel-list {
     padding: var(--s3);
     margin: 0;
+
+    flex: 1;
   }
 
   .j-tabs .panel-list .panel-item {
     margin: 0;
+
+    display: none;
+    position: relative;
+    min-height: 22px;
+  }
+
+  .j-tabs .panel-list .panel-item[aria-hidden='false'] {
+    display: block;
   }
 }

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

@@ -1,9 +1,15 @@
-@layer themes {
+@layer components {
   .j-theme-palette {
     padding-inline: var(--s4);
     padding-block: var(--s4) var(--s8);
   }
 
+  .j-theme-palette .palette-container,
+  .j-theme-palette .palette-item {
+    display: flex;
+    flex-direction: column;
+  }
+
   .j-theme-palette .palette-container {
     gap: var(--s4);
   }
@@ -19,6 +25,14 @@
 
   .j-theme-palette .items {
     gap: var(--space);
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .j-theme-palette .j-button {
+    min-width: 0;
+    overflow: hidden;
   }
 
   .j-theme-palette [data-theme-group='theme'] .j-button {
@@ -29,6 +43,10 @@
   .j-theme-palette .j-button .item-hex {
     width: var(--font-size-sm);
     height: var(--font-size-sm);
+
+    display: inline-block;
+    border-radius: 50%;
+    flex-shrink: 0;
   }
 
   .mobile .j-theme-palette {
@@ -38,4 +56,9 @@
   .mobile .j-theme-palette [data-theme-group='theme'] .j-button {
     padding-inline: 6px;
   }
+
+  .j-theme-palette .j-button .button-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }

package/src/css/themes/default/tip.css

@@ -1,4 +1,4 @@
-@layer themes {
+@layer components {
   .j-tip {
     --tip-border-color: var(--ui-border);
     --tip-bg: var(--ui-bg);
@@ -14,6 +14,20 @@
     background: var(--tip-bg);
     box-shadow: var(--shadow-xs);
     backdrop-filter: blur(2px);
+
+    position: relative;
+    display: grid;
+    grid-template-columns: 0 1fr;
+    align-items: flex-start;
+  }
+
+  .j-tip:has(.tip-icon) {
+    column-gap: var(--s3);
+    grid-template-columns: var(--s4) 1fr;
+  }
+
+  .j-font-md .j-tip:has(.tip-icon) {
+    column-gap: var(--s5);
   }
 
   .j-tip .tip-icon {
@@ -34,6 +48,27 @@
 
   .j-tip .tip-title {
     font-weight: var(--font-medium);
+
+    grid-column-start: 2;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    margin: 0;
+  }
+
+  .j-tip .tip-content {
+    grid-column-start: 2;
+    color: var(--ui-gray);
+  }
+
+  .j-tip .tip-content > *:first-child {
+    margin-top: 0;
+  }
+
+  .j-tip .tip-content > *:last-child {
+    margin-bottom: 0;
   }
 
   .j-tip.is-primary {

package/src/css/themes/default/toast.css

@@ -1,8 +1,17 @@
-@layer themes {
+@layer components {
   .j-toast-container {
     top: var(--s2);
     right: var(--s2);
     gap: var(--s2);
+
+    position: fixed;
+    z-index: var(--z-toast);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    left: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
   }
 
   .j-toast {
@@ -24,10 +33,24 @@
     min-width: 200px;
     max-width: 310px;
     backdrop-filter: blur(4px);
+
+    display: flex;
+    align-items: center;
+    word-break: break-all;
+    cursor: pointer;
+    pointer-events: auto;
   }
 
   .j-toast .el-icon {
     width: var(--font-size-lg);
+
+    position: relative;
+    color: inherit;
+  }
+
+  .j-toast .el-text {
+    flex: 1;
+    word-break: normal;
   }
 
   .j-toast.is-success {
@@ -61,15 +84,33 @@
     border-radius: var(--radius-md);
     padding: var(--s2) var(--s3);
     max-width: calc(var(--screen-sm) / 2);
+
+    position: fixed;
+    top: 45%;
+    left: 50%;
+    z-index: var(--z-toast);
+    width: fit-content;
+    text-align: center;
+    user-select: none;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
   }
 
   .j-toast.is-confirm {
     gap: var(--s4);
     min-width: 280px;
+
+    flex-direction: column;
+    align-items: flex-start;
+    cursor: default;
   }
 
   .j-toast.is-confirm .toast-buttons {
     width: 100%;
     gap: var(--space);
+
+    display: flex;
+    justify-content: flex-end;
+    position: relative;
   }
 }

package/src/css/themes/default/toolbar.css

@@ -1,13 +1,30 @@
-@layer themes {
+@layer components {
   .j-toolbar-container {
     background: var(--ui-bg);
     border-bottom: 1px solid var(--ui-border);
+
+    position: sticky;
+    top: 0;
+    width: 100%;
+    z-index: var(--z-toolbar);
+    overflow: hidden;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-color: transparent transparent;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    scroll-behavior: smooth;
   }
 
   .j-toolbar {
     gap: 0;
     padding: var(--s2);
     box-shadow: var(--shadow-sm);
+
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .j-toolbar button svg {
@@ -24,6 +41,11 @@
     align-self: center;
   }
 
+  .editor-drop-color .color-panel {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+  }
+
   .editor-drop-color .color-panel button.color-btn {
     cursor: pointer;
     padding: 0;
@@ -47,4 +69,10 @@
   .j-toolbar button.is-lg svg {
     --toolbar-icon-size: var(--font-size-2xl);
   }
+
+  @media screen and (max-width: 992px) {
+    .j-toolbar {
+      justify-content: flex-start;
+    }
+  }
 }

package/src/css/themes/default/tooltip.css

@@ -1,4 +1,4 @@
-@layer themes {
+@layer comopnents {
   .j-tooltip {
     --tooltip-fg: var(--ui-bg);
     --tooltip-bg: var(--ui-fg);
@@ -12,6 +12,10 @@
     border-radius: var(--radius-md);
     max-width: 260px;
     padding: 2px 4px;
+
+    position: relative;
+    width: fit-content;
+    user-select: none;
   }
 
   .j-tooltip.is-reverse {
@@ -48,11 +52,13 @@
     padding: 2px var(--s2);
     font-size: var(--font-size-md);
     line-height: var(--line-height);
+
+    word-wrap: break-word;
+    position: relative;
   }
 
   .drop-container:has(.j-tooltip) {
     border: unset;
-    /* border-radius: unset; */
     background: unset;
     box-shadow: unset;
   }

package/src/css/themes/default/tree.css

@@ -1,4 +1,4 @@
-@layer themes {
+@layer components {
   .j-tree {
     padding: 14px;
     border: 1px solid var(--ui-border-subtle);
@@ -11,6 +11,20 @@
 
   .j-tree-list {
     gap: 2px;
+
+    display: grid;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* .j-tree-list[hidden] {
+    display: none;
+  } */
+
+  .j-tree-list .j-tree-list {
+    padding-left: 20px;
+    position: relative;
   }
 
   .j-tree-list .j-tree-list::before {
@@ -19,6 +33,13 @@
     left: 7px;
     width: 1px;
     background: var(--ui-border);
+
+    position: absolute;
+    content: '';
+  }
+
+  .j-tree-item {
+    position: relative;
   }
 
   .j-tree-list .j-tree-list > .j-tree-item::before {
@@ -27,6 +48,9 @@
     width: 12px;
     height: 1px;
     background: var(--ui-border);
+
+    position: absolute;
+    content: '';
   }
 
   .j-tree-list li {
@@ -40,6 +64,13 @@
     padding: 0 4px;
     border-radius: var(--radius-sm);
     color: var(--tone-caption);
+
+    display: flex;
+    align-items: center;
+  }
+
+  .j-tree-node[role='button'] {
+    cursor: pointer;
   }
 
   .j-tree-node[role='button']:hover,
@@ -58,6 +89,11 @@
     width: 16px;
     height: 16px;
     color: var(--tone-caption);
+
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
   }
 
   .j-tree-item.is-directory > .j-tree-node .j-tree-icon {
@@ -69,7 +105,8 @@
     height: 16px;
   }
 
-  .j-tree-list .j-tree-list {
-    padding-left: 20px;
+  .j-tree-label {
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 }

package/src/css/accordion.css

@@ -1,47 +0,0 @@
-@layer components {
-  .j-accordion {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .j-accordion[data-direction='horizontal'] {
-    flex-direction: row;
-  }
-
-  .j-accordion .accordion-header {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    user-select: none;
-  }
-
-  .j-accordion .accordion-header .header-title {
-    flex: 1;
-    text-align: left;
-  }
-
-  .j-accordion .accordion-header .header-arrow {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: transform 0.3s ease-out;
-  }
-
-  .j-accordion .accordion-panel {
-    position: relative;
-  }
-
-  .j-accordion .accordion-panel .panel-content {
-    position: relative;
-    min-height: inherit;
-  }
-
-  .j-accordion[data-direction='horizontal']
-    .accordion-panel[aria-hidden='false']
-    .panel-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-  }
-}

package/src/css/avatar.css

@@ -1,27 +0,0 @@
-@layer components {
-  .j-avatar {
-    display: inline-block;
-    vertical-align: middle;
-    overflow: hidden;
-    user-select: none;
-    object-fit: cover;
-  }
-
-  .j-avatar img,
-  .j-avatar svg {
-    margin: 0;
-  }
-
-  .j-avatar.is-text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .j-avatar-group {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: nowrap;
-  }
-}

package/src/css/badge.css

@@ -1,8 +0,0 @@
-@layer components {
-  .j-badge {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    user-select: none;
-  }
-}