vanilla-jui 1.5.35 → 1.5.37

package/src/css/themes/default/button.css

@@ -1,26 +1,33 @@
 @layer themes {
-  .j-button-group {
-    --btn-group-box-shadow: var(--shadow-sm);
-  }
-
   .j-button {
-    --btn-gap: var(--space) calc(var(--space) * 1.5);
-    /* --btn-font-weight: var(--font-medium); */
     --btn-font-size: var(--font-size-md);
     --btn-height: var(--el-height-md);
-    --btn-line-height: var(--line-height-self);
     --btn-fg: inherit;
     --btn-bg: transparent;
     --btn-padding: 0 var(--s3);
-    --btn-border-width: 1px;
-    --btn-border-style: solid;
     --btn-border-color: transparent;
-    --btn-border-radius: var(--radius-md);
+    --btn-radius: var(--radius-md);
     --btn-box-shadow: var(--shadow-sm);
+
+    gap: var(--space);
+    font-size: var(--btn-font-size);
+    height: var(--btn-height);
+    line-height: 1;
+    color: var(--btn-fg);
+    background-color: var(--btn-bg);
+    padding: var(--btn-padding);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--btn-border-color);
+    border-radius: var(--btn-radius);
+    box-shadow: var(--btn-box-shadow);
+    outline: none;
   }
 
-  .j-button svg {
-    --btn-svg-size: var(--font-size-md);
+  .j-button.is-xs {
+    --btn-font-size: var(--font-size-sm);
+    --btn-height: var(--el-height-xs);
+    --btn-padding: var(--space) var(--s2);
   }
 
   .j-button.is-sm {
@@ -35,6 +42,12 @@
     --btn-padding: 0 var(--s3);
   }
 
+  .j-button.is-xl {
+    --btn-font-size: var(--font-size-xl);
+    --btn-height: var(--el-height-xl);
+    --btn-padding: 0 var(--s4);
+  }
+
   .j-button.is-default {
     --btn-fg: var(--ui-fg);
     --btn-bg: var(--ui-bg);
@@ -70,13 +83,11 @@
 
   .j-button.is-text {
     --btn-border-color: transparent;
-    --btn-text-height: auto;
-    --btn-text-padding: 0;
     --btn-box-shadow: none;
   }
 
   .j-button.is-icon {
-    aspect-ratio: var(--aspect-icon, 1);
+    aspect-ratio: 1/1;
     --btn-padding: var(--icon-padding, 0);
   }
 
@@ -119,14 +130,18 @@
 
   .j-button-group {
     --btn-padding: 0 var(--s2);
+    --btn-radius: var(--radius-md);
+
+    margin: 0;
+    box-shadow: var(--shadow-sm);
+    border-radius: var(--btn-radius);
   }
 
-  /* disabled */
+  /* status */
   .j-button:disabled {
     opacity: var(--opacity-disabled);
   }
 
-  /* status */
   .j-button:not(:disabled) {
     cursor: pointer;
   }
@@ -139,13 +154,48 @@
     opacity: var(--opacity-active);
   }
 
-  .j-button:not(:disabled).is-active {
-    --opacity: var(--opacity-active);
+  .j-button:not(:disabled).is-active,
+  .j-button:not(:disabled):focus,
+  .j-button:not(:disabled):focus-within,
+  .j-button:not(:disabled):focus-visible {
     --btn-border-color: var(--tone-solid);
+    --btn-box-shadow: 0 0 0 4px var(--tone-ring);
   }
 
-  .j-button:not(:disabled):focus-visible {
-    outline-color: var(--btn-ring, var(--tone-solid));
+  .j-button.is-reverse:not(:disabled).is-active,
+  .j-button.is-reverse:not(:disabled):focus,
+  .j-button.is-reverse:not(:disabled):focus-within,
+  .j-button.is-reverse:not(:disabled):focus-visible {
+    --btn-border-color: transparent;
+    --btn-box-shadow: 0 0 0 4px var(--tone-card-active);
+  }
+
+  .j-button.is-success:not(:disabled).is-active,
+  .j-button.is-success:not(:disabled):focus,
+  .j-button.is-success:not(:disabled):focus-within,
+  .j-button.is-success:not(:disabled):focus-visible {
+    --btn-border-color: transparent;
+    --btn-box-shadow: 0 0 0 4px var(--state-success-ring);
+  }
+
+  .j-button.is-warning:not(:disabled).is-active,
+  .j-button.is-warning:not(:disabled):focus,
+  .j-button.is-warning:not(:disabled):focus-within,
+  .j-button.is-warning:not(:disabled):focus-visible {
+    --btn-border-color: transparent;
+    --btn-box-shadow: 0 0 0 4px var(--state-warning-ring);
+  }
+
+  .j-button.is-danger:not(:disabled).is-active,
+  .j-button.is-danger:not(:disabled):focus,
+  .j-button.is-danger:not(:disabled):focus-within,
+  .j-button.is-danger:not(:disabled):focus-visible,
+  .j-button.is-error:not(:disabled).is-active,
+  .j-button.is-error:not(:disabled):focus,
+  .j-button.is-error:not(:disabled):focus-within,
+  .j-button.is-error:not(:disabled):focus-visible {
+    --btn-border-color: transparent;
+    --btn-box-shadow: 0 0 0 4px var(--state-danger-muted);
   }
 
   .j-button.is-default:hover:not(:disabled) {
@@ -157,10 +207,11 @@
     --btn-bg: var(--tone-subtle);
   }
 
+  .j-button.is-text:not(:disabled).is-active,
   .j-button.is-text:not(:disabled):active,
-  .j-button.is-text:not(:disabled):focus-visible,
-  .j-button.is-text:not(:disabled).is-active {
-    outline: none;
+  .j-button.is-text:not(:disabled):focus,
+  .j-button.is-text:not(:disabled):focus-within,
+  .j-button.is-text:not(:disabled):focus-visible {
     --btn-fg: var(--tone-solid);
     text-decoration: underline;
     text-underline-offset: var(--space);
@@ -191,13 +242,60 @@
   }
 
   .j-button-group .j-button:active,
+  .j-button-group .j-button:focus,
   .j-button-group .j-button:focus-visible,
   .j-button-group .j-button:focus-within {
-    outline: 0;
-    opacity: var(--opacity-active);
+    /* opacity: var(--opacity-active); */
     z-index: 1;
   }
 
+  .j-button-group .j-button:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .j-button-group .j-button:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .j-button-group .j-button:not(:first-child):not(:last-child) {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 0;
+    border-right-width: 0;
+  }
+
+  .j-button-group.is-vertical {
+    flex-direction: column;
+  }
+
+  .j-button-group.is-vertical .j-button:not(:last-child) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .j-button-group.is-vertical .j-button:not(:first-child) {
+    margin-left: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .j-button-group.is-vertical .j-button:not(:last-child):not(:first-child) {
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-top-width: 0;
+    border-bottom-width: 0;
+  }
+
+  .j-button-group.is-vertical .j-button:first-child {
+    border-top-right-radius: var(--btn-radius);
+  }
+
+  .j-button-group.is-vertical .j-button:last-child {
+    border-bottom-left-radius: var(--btn-radius);
+  }
+
   .j-button-group.is-vertical .j-button:focus-within {
     z-index: auto;
   }

package/src/css/themes/default/drop.css

@@ -1,11 +1,13 @@
 @layer themes {
-  .j-drop {
-    --drop-border-width: 1px;
-    --drop-border-style: solid;
-    --drop-border-color: var(--ui-border);
-    --drop-border-radius: var(--radius-sm);
-    --drop-fg: var(--ui-fg);
-    --drop-bg: var(--ui-bg);
-    --drop-box-shadow: var(--shadow-sm);
+  .drop-container {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--ui-border);
+    border-radius: var(--radius-sm);
+    background: var(--ui-bg);
+    color: var(--ui-fg);
+    box-shadow: var(--shadow-sm);
+    min-width: 64px;
+    min-height: 32px;
   }
 }

package/src/css/themes/default/editor.css

@@ -10,14 +10,12 @@
 
   .j-editor {
     --editor-font-size: var(--font-size-lg);
-    --editor-line-height: 1.85;
+    --editor-p-line-height: 1.75;
     --editor-word-space: 0.02em;
     --editor-letter-space: 0.01em;
-    --editor-heading-space: 2rem;
-    --editor-block-space: 1.5rem;
-    --editor-list-space: 1.25rem;
+    --editor-block-space: 1.25rem;
+    --editor-list-space: 1rem;
     --editor-space: 0.25rem;
-    --editor-dot-space: 0.125rem;
 
     --editor-heading-fg: var(--tone-heading);
     --editor-caption-fg: var(--tone-caption);
@@ -38,17 +36,19 @@
 
   .j-editor.is-sm {
     --editor-font-size: var(--font-size-md);
-    --editor-line-height: 1.65;
+    --editor-p-line-height: 1.75;
   }
 
   .j-editor.is-lg {
     --editor-font-size: var(--font-size-xl);
-    --editor-line-height: 1.8;
+    --editor-p-line-height: 1.8;
+    --editor-block-space: 1.5rem;
   }
 
   .j-editor.is-xl {
     --editor-font-size: var(--font-size-2xl);
-    --editor-line-height: 1.85;
+    --editor-p-line-height: 1.8;
+    --editor-block-space: 1.5rem;
   }
 
   .j-radius-round .j-editor {
@@ -56,4 +56,20 @@
     --radius-md: 1rem;
     --radius-lg: 1.5rem;
   }
+
+  .mobile .j-editor h1 {
+    margin-bottom: 2rem;
+  }
+
+  .mobile .j-editor h2,
+  .mobile .j-editor h3,
+  .mobile .j-editor h4,
+  .mobile .j-editor h5,
+  .mobile .j-editor p {
+    --editor-block-space: 1.75rem;
+  }
+
+  .mobile .j-editor li p {
+    margin-block: 0;
+  }
 }

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;