vanilla-jui 1.5.34 → 1.5.36

package/src/css/themes/default/form.css

@@ -0,0 +1,170 @@
+@layer themes {
+  .j-form.is-lg {
+    --form-gap-vertical: var(--s3);
+    --form-gap-horizontal: var(--s3);
+  }
+
+  .j-input {
+    --input-font-size: var(--font-size-md);
+    --input-bg: inherit;
+    --input-fg: inherit;
+  }
+
+  .j-input:not([type='checkbox']) {
+    --input-padding: calc(var(--space) * 1.5) var(--s2);
+    --input-height: var(--el-height-md);
+    --input-line-height: var(--line-height);
+  }
+
+  .j-input.is-sm {
+    --input-height: var(--el-height-sm);
+    --input-line-height: var(--line-height-self);
+    --input-font-size: var(--font-size-sm);
+  }
+
+  .j-input.is-lg {
+    --input-height: var(--el-height-lg);
+    --input-line-height: var(--line-height);
+    --input-font-size: var(--font-size-lg);
+  }
+
+  .j-input[type='password'] {
+    letter-spacing: 2px;
+  }
+
+  .j-input[type='password'].is-sm {
+    letter-spacing: 1px;
+  }
+
+  .j-input[type='password'].is-lg {
+    letter-spacing: 3px;
+  }
+
+  .j-input[type='password']:placeholder-shown {
+    letter-spacing: 0.5px;
+  }
+
+  .j-input[type='date'],
+  .j-input[type='datetime'],
+  .j-input[type='datetime-local'],
+  .j-input[type='time'],
+  .j-input[type='week'],
+  .j-input[type='month'],
+  .j-input[type='file'],
+  .j-input[type='color'] {
+    /* --input-font-size: var(--font-size-sm); */
+    --input-fg: var(--ui-fg-muted);
+  }
+
+  .j-input[type='color'] {
+    --input-padding: var(--space);
+    min-width: 5rem;
+  }
+
+  .j-input[type='color']::-webkit-color-swatch {
+    border: 0;
+  }
+
+  select.j-select {
+    --input-padding: calc(var(--space) * 1.5);
+    --input-height: var(--el-height-md);
+    --input-font-size: var(--font-size-md);
+  }
+
+  select.j-select.is-sm {
+    --input-padding: var(--space);
+    --input-height: var(--el-height-sm);
+    --input-font-size: var(--font-size-sm);
+  }
+
+  select.j-select.is-lg {
+    --input-padding: var(--s2);
+    --input-height: var(--el-height-lg);
+    --input-font-size: var(--font-size-lg);
+  }
+
+  .input-group .el-addon .j-button {
+    --btn-border-color: var(--ui-border);
+    --btn-fg: var(--ui-fg-muted);
+    --btn-bg: var(--ui-bg-muted);
+    --btn-padding: 0 var(--s2);
+    --btn-box-shadow: none;
+  }
+
+  .input-group .el-addon .is-text {
+    font-size: var(--font-size-md);
+    line-height: var(--line-height);
+    color: var(--ui-fg-muted);
+    background-color: var(--ui-bg-muted);
+    padding: var(--s2);
+    height: var(--el-height-md);
+    border-color: var(--ui-border);
+    border-radius: var(--radius-md);
+  }
+
+  .input-group .el-addon .icon-close,
+  .input-inner-group .el-addon .icon-close {
+    width: var(--input-height);
+  }
+
+  .input-group > *:not(:first-child) {
+    margin-left: -1px;
+  }
+
+  .input-group > input.j-input:not(:first-child),
+  .input-group > select.j-select:not(:first-child),
+  .input-group
+    > :not(select.j-select)
+    + .el-addon:not(:first-child)
+    > .is-text {
+    border-left-color: transparent;
+  }
+
+  .input-group > input.j-input:not(:first-child),
+  .input-group > select.j-select:not(:first-child),
+  .input-group > *:not(:first-child) > *,
+  .input-group > *:not(:first-child) > .is-text {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .input-group > input.j-input:not(:last-child),
+  .input-group > select.j-select:not(:last-child),
+  .input-group > *:not(:last-child) > *,
+  .input-group > *:not(:last-child) > .is-text {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .input-inner-group .j-button {
+    --btn-box-shadow: none;
+  }
+
+  .input-inner-group input.j-input:not(:last-child) {
+    padding-right: var(--el-height-md);
+  }
+
+  .input-inner-group input.j-input:not(:first-child) {
+    padding-left: var(--el-height-md);
+  }
+
+  .input-inner-group .el-addon {
+    color: var(--ui-fg-muted);
+  }
+
+  .mobile .j-input[type='file']::file-selector-button {
+    padding: var(--s3);
+    margin: calc(var(--space) * -1.7);
+    -webkit-margin-end: calc(var(--space) * 2.75);
+    margin-inline-end: calc(var(--space) * 2.75);
+  }
+
+  .mobile.j-font-md .j-input.is-lg[type='file']::file-selector-button {
+    margin: calc(var(--space) * -1.4);
+  }
+
+  /* .mobile .j-input, */
+  .mobile .j-textarea {
+    width: 100%;
+  }
+}

package/src/css/themes/default/index.css

@@ -3,7 +3,7 @@
 @import url('./button.css');
 @import url('./avatar.css');
 @import url('./badge.css');
-@import url('./tag.css');
+/* @import url('./tag.css'); */
 @import url('./tip.css');
 @import url('./tabs.css');
 @import url('./popup.css');
@@ -16,7 +16,10 @@
 @import url('./swiper.css');
 @import url('./breadcrumb.css');
 @import url('./loading.css');
-@import url('./theme-palette.css');
 @import url('./table.css');
 @import url('./pagination.css');
 @import url('./menu.css');
+@import url('./toc.css');
+@import url('./tree.css');
+@import url('./theme-palette.css');
+@import url('./form.css');

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

@@ -1,6 +1,5 @@
 @layer themes {
   .j-loader {
-    --loader-position: absolute;
     --loader-size: var(--font-size-md);
     --loader-width: 1.5px;
     --loader-style: solid;

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

@@ -19,14 +19,11 @@
     --menu-item-error-tip-font-size: var(--font-size-sm);
     --menu-item-error-tip-padding: 0 var(--space);
 
-    --menu-link-font-weight: var(--font-medium);
     --menu-link-gap: var(--space);
     --menu-link-current-fg: var(--tone-solid);
 
     --sub-menu-bg: var(--ui-surface-subtle);
     --sub-menu-border-width: 1px;
-    --sub-menu-border-style: solid;
-    --sub-menu-border-color: var(--ui-border);
     --sub-menu-border-radius: var(--radius-md);
     --sub-menu-min-width: 120px;
     --sub-menu-max-width: 240px;

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

@@ -1,25 +1,47 @@
 @layer themes {
   .j-modal {
-    --modal-fg: var(--ui-fg);
-    --modal-bg: var(--ui-bg);
-    --modal-border-width: 1px;
-    --modal-border-style: solid;
-    --modal-border-color: var(--ui-border);
-    --modal-border-radius: var(--radius-md);
-    --modal-box-shadow: var(--shadow-md);
-    --modal-min-width: 300px;
-    --modal-max-width: 500px;
-    --modal-max-height: 90vh;
-    --modal-header-gap: var(--space);
     --modal-header-padding: var(--s3) var(--s4) 0;
-    --modal-header-bottom-border: transparent;
-    --modal-title-font-size: var(--font-size-md);
-    --modal-title-font-weight: var(--font-medium);
     --modal-body-padding: var(--s4);
-    --modal-body-line-height: var(--line-height-paragraph);
-    --modal-footer-gap: var(--s2);
     --modal-footer-padding: 0 var(--s4) var(--s4);
-    --modal-footer-top-border: 1px solid transparent;
+
+    color: var(--ui-fg);
+    background: var(--ui-bg);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--ui-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
+    min-width: 300px;
+    max-width: 500px;
+    max-height: 90vh;
+  }
+
+  .j-modal .modal-header {
+    gap: var(--space);
+    padding: var(--modal-header-padding);
+    border-bottom: transparent;
+  }
+
+  .j-modal .modal-header .modal-title {
+    margin: 0;
+    font-size: var(--font-size-md);
+    font-weight: var(--font-medium);
+  }
+
+  .j-modal .modal-body {
+    padding: var(--modal-body-padding);
+    min-height: 32px;
+  }
+
+  .j-modal .modal-body p {
+    margin: 0;
+    line-height: var(--line-height-paragraph);
+  }
+
+  .j-modal .modal-footer {
+    gap: var(--s2);
+    padding: var(--modal-footer-padding);
+    border-top: 1px solid transparent;
   }
 
   .j-modal.is-fullscreen .modal-header {

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

@@ -1,13 +1,50 @@
 @layer themes {
   .j-offcanvas-overlay {
-    --offcanvas-overlay-bg: var(--ui-overlay-muted);
+    background: var(--ui-overlay-muted);
   }
 
   .j-offcanvas {
-    --offcanvas-bg: var(--ui-bg);
-    --offcanvas-box-shadow: var(--shadow-md);
     --offcanvas-border: 1px solid var(--ui-border-subtle);
     --offcanvas-block-width: 300px;
     --offcanvas-inline-height: 200px;
+
+    background: var(--ui-bg);
+    box-shadow: var(--shadow-md);
+  }
+
+  .j-offcanvas[data-direction='left'] {
+    top: 0;
+    left: 0;
+    width: var(--offcanvas-block-width);
+    height: 100vh;
+    border-right: var(--offcanvas-border);
+  }
+
+  .j-offcanvas[data-direction='right'] {
+    top: 0;
+    right: 0;
+    width: var(--offcanvas-block-width);
+    height: 100vh;
+    border-left: var(--offcanvas-border);
+  }
+
+  .j-offcanvas[data-direction='top'] {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: var(--offcanvas-inline-height);
+    border-bottom: var(--offcanvas-border);
+  }
+
+  .j-offcanvas[data-direction='bottom'] {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: var(--offcanvas-inline-height);
+    border-top: var(--offcanvas-border);
+  }
+
+  .j-font-md .j-offcanvas {
+    --offcanvas-block-width: 316px;
   }
 }

package/src/css/themes/default/pagination.css

@@ -1,8 +1,15 @@
 @layer themes {
   .j-pagination {
-    --pagination-font-size: var(--font-size-md);
-    --pagination-link-fg: var(--ui-fg);
-    --pagination-link-decoration: none;
-    --pagination-gap: var(--space);
+    font-size: var(--font-size-md);
+  }
+
+  .j-pagination a {
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    color: var(--ui-fg);
+  }
+
+  .j-pagination .pagination {
+    gap: var(--space);
   }
 }

package/src/css/themes/default/popup.css

@@ -1,7 +1,8 @@
 @layer themes {
   .j-popup-layout {
-    --popup-layout-padding: var(--s4);
-    --popup-bg: var(--ui-popup-bg);
-    --popup-backdrop-filter: blur(4px);
+    background: var(--ui-popup-bg);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+    padding: var(--s4);
   }
 }

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

@@ -2,27 +2,91 @@
   .j-swiper {
     --swiper-min-height: 120px;
     --swiper-title-inset: var(--s3);
-    --swiper-title-padding: calc(var(--space) * 1.5) var(--s2);
-    --swiper-title-color: #fff;
     --swiper-title-font-size: var(--font-size-lg);
-    --swiper-title-font-weight: var(--font-bold);
-    --swiper-title-bg: rgb(0 0 0 / 35%);
-    --swiper-title-border-radius: var(--radius-sm);
-    --swiper-title-line-height: var(--line-height-heading);
-    --swiper-pagination-gap: 6px;
-    --swiper-pagination-inline: var(--s3);
-    --swiper-pagination-block: var(--s2);
-    --swiper-indicator-size: 8px;
-    --swiper-indicator-bg: rgb(255 255 255 / 62%);
-    --swiper-indicator-hover-bg: rgb(255 255 255 / 86%);
-    --swiper-indicator-active-width: 22px;
-    --swiper-indicator-active-bg: #fff;
     --swiper-navigation-size: 36px;
-    --swiper-navigation-fg: #fff;
-    --swiper-navigation-bg: rgb(0 0 0 / 35%);
-    --swiper-navigation-hover-bg: rgb(0 0 0 / 65%);
-    --swiper-navigation-offset: var(--s2);
-    --swiper-navigation-icon-size: 18px;
+  }
+
+  .j-swiper .swiper-slide::before {
+    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-size: 20px 20px;
+  }
+
+  .j-swiper .swiper-slide-title {
+    right: var(--swiper-title-inset);
+    bottom: var(--swiper-title-inset);
+    left: var(--swiper-title-inset);
+    padding: calc(var(--space) * 1.5) var(--s2);
+    color: #fff;
+    font-size: var(--swiper-title-font-size);
+    font-weight: var(--font-bold);
+    background: rgb(0 0 0 / 35%);
+    border-radius: var(--radius-sm);
+    line-height: var(--line-height-heading);
+  }
+
+  .j-swiper .swiper-pagination {
+    gap: 6px;
+  }
+
+  .j-swiper .swiper-pagination.is-horizontal {
+    right: var(--s3);
+    bottom: var(--s2);
+    left: var(--s3);
+  }
+
+  .j-swiper .swiper-pagination-indicator {
+    width: 8px;
+    height: 8px;
+    padding: 0;
+    background: rgb(255 255 255 / 62%);
+    border: 0;
+  }
+
+  .j-swiper .swiper-pagination-indicator:hover,
+  .j-swiper .swiper-pagination-indicator:focus-visible {
+    background: rgb(255 255 255 / 86%);
+  }
+
+  .j-swiper .swiper-pagination-indicator.is-active,
+  .j-swiper .swiper-pagination-indicator.active {
+    width: 22px;
+    background: #fff;
+  }
+
+  .j-swiper .swiper-navigation {
+    width: var(--swiper-navigation-size);
+    height: var(--swiper-navigation-size);
+    padding: 0;
+    color: #fff;
+    background: rgb(0 0 0 / 35%);
+    border: 0;
+    transform: translateY(-50%);
+  }
+
+  .j-swiper .swiper-navigation:hover,
+  .j-swiper .swiper-navigation:focus-visible {
+    background: rgb(0 0 0 / 65%);
+    outline: none;
+  }
+
+  .j-swiper .swiper-navigation.is-prev {
+    left: var(--s2);
+  }
+
+  .j-swiper .swiper-navigation.is-next {
+    right: var(--s2);
+  }
+
+  .j-swiper .swiper-navigation svg {
+    width: 18px;
+    height: 18px;
   }
 
   @media (max-width: 640px) {

package/src/css/themes/default/table.css

@@ -1,17 +1,25 @@
 @layer themes {
-  table {
-    --table-width: 100%;
-    --table-header-font-weight: 600;
-    --table-selected-bg: var(--tone-soft);
-    --table-border-width: 0 0 1px;
-    --table-border-style: solid;
-    --table-border-color: var(--ui-border);
-    --table-cell-padding: 0.5rem;
-    --table-cell-text-align: left;
-    --table-cell-vertical-align: top;
-    --table-link-fg: var(--tone-solid);
-    --table-striped-bg: var(--ui-bg-subtle);
-    --table-hover-bg: var(--ui-bg-subtle);
-    --table-bordered-width: 1px;
+  table td,
+  table th {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--ui-border-subtle);
+    padding: 0.5rem 1rem;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  table thead th {
+    background: var(--ui-bg-subtle);
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  table tbody td {
+    min-width: 100px;
+  }
+
+  table tbody tr:hover {
+    background: var(--ui-bg-subtle);
   }
 }

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

@@ -1,12 +1,6 @@
 @layer themes {
   .j-tabs {
-    --tab-list-item-padding: var(--s2) var(--s3);
-    --tab-list-item-margin: 0;
-    --tab-list-font-weight: var(--font-medium);
     --tab-wrap-border: 1px solid var(--ui-border-subtle);
-    --panel-list-padding: var(--s3);
-    --panel-list-margin: 0;
-    --panel-list-item-margin: 0;
   }
 
   .j-tabs[data-tabs-direction='top'] .tab-wrap {
@@ -25,6 +19,13 @@
     border-left: var(--tab-wrap-border);
   }
 
+  .j-tabs .tab-list .tab-item {
+    padding: var(--s2) var(--s3);
+    margin: 0;
+    color: var(--tab-fg);
+    font-weight: var(--font-medium);
+  }
+
   .j-tabs .tab-list .tab-item[aria-selected='true'] {
     --tab-fg: var(--tone-solid);
   }
@@ -32,4 +33,13 @@
   .j-tabs .tab-list .tab-item[aria-disabled='true'] {
     --tab-fg: var(--ui-border-strong);
   }
+
+  .j-tabs .panel-list {
+    padding: var(--s3);
+    margin: 0;
+  }
+
+  .j-tabs .panel-list .panel-item {
+    margin: 0;
+  }
 }

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

@@ -1,12 +1,37 @@
 @layer themes {
   .j-theme-palette {
-    --palette-padding: 1rem 1rem 2rem;
-    --palette-container-gap: var(--s4);
-    --palette-item-gap: var(--s2);
-    --palette-item-title-font-size: var(--font-size-md);
-    --palette-item-title-font-weight: var(--font-bold);
-    --palette-items-columns: repeat(3, 1fr);
-    --palette-items-gap: var(--space);
-    --palette-items-icon-size: var(--font-size-sm);
+    padding-inline: var(--s4);
+    padding-block: var(--s4) var(--s8);
+  }
+
+  .j-theme-palette .palette-container {
+    gap: var(--s4);
+  }
+
+  .j-theme-palette .palette-item {
+    gap: var(--s2);
+  }
+
+  .j-theme-palette .item-title {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-bold);
+  }
+
+  .j-theme-palette .items {
+    gap: var(--space);
+  }
+
+  .j-theme-palette [data-theme-group='theme'] .j-button {
+    justify-content: flex-start;
+    padding-inline: var(--s2);
+  }
+
+  .j-theme-palette .j-button .item-hex {
+    width: var(--font-size-sm);
+    height: var(--font-size-sm);
+  }
+
+  .mobile .j-theme-palette {
+    padding-block: var(--s4) 4rem;
   }
 }

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

@@ -1,49 +1,59 @@
 @layer themes {
   .j-tip {
-    --tip-gap: var(--s2);
-    --tip-width: 100%;
-    --tip-padding: var(--s3) var(--s4);
-    --tip-border-width: 1px;
-    --tip-border-style: solid;
     --tip-border-color: var(--ui-border);
-    --tip-border-radius: var(--radius-md);
-    --tip-font-size: var(--font-size-md);
     --tip-fg: var(--ui-fg);
     --tip-bg: var(--ui-bg);
-    --tip-box-shadow: var(--shadow-sm);
-    --tip-icon-fg: var(--tip-fg);
+
+    row-gap: var(--s2);
+    width: 100%;
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--tip-border-color);
+    border-radius: var(--radius-md);
+    padding: var(--s3) var(--s4);
+    font-size: var(--font-size-md);
+    color: var(--tip-fg);
+    background: var(--tip-bg);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .j-tip .tip-icon {
+    color: var(--tip-fg);
+    transform: translateY(calc(var(--space, 0.25rem) * 0.5));
+    margin: 0;
   }
 
   .j-tip .tip-icon,
   .j-tip .tip-icon svg {
-    --tip-icon-size: var(--font-size-xl);
+    width: var(--font-size-xl);
+    height: var(--font-size-xl);
   }
 
   .j-tip .tip-title {
-    --tip-title-line-height: var(--line-height-paragraph);
-    --tip-title-font-weight: var(--font-medium);
+    line-height: var(--line-height-paragraph);
+    font-weight: var(--font-medium);
   }
 
   .j-tip .tip-content {
-    --tip-content-gap: var(--s2);
-    --tip-content-line-height: var(--line-height-paragraph);
+    gap: var(--s2);
+    line-height: var(--line-height-paragraph);
   }
 
   .j-tip.is-success {
     --tip-border-color: var(--state-success);
     --tip-bg: var(--state-success-muted);
-    --tip-icon-fg: var(--state-success);
+    --tip-fg: var(--state-success);
   }
 
   .j-tip.is-warning {
     --tip-border-color: var(--state-warning);
     --tip-bg: var(--state-warning-muted);
-    --tip-icon-fg: var(--state-warning);
+    --tip-fg: var(--state-warning);
   }
 
   .j-tip.is-danger {
     --tip-border-color: var(--state-danger);
     --tip-bg: var(--state-danger-muted);
-    --tip-icon-fg: var(--state-danger);
+    --tip-fg: var(--state-danger);
   }
 }