vanilla-jui 1.4.0 → 1.4.2

package/src/css/drop.css

@@ -10,19 +10,19 @@
     z-index: var(--z-drop);
   }
 
-  .j-drop.is-active {
+  .j-drop[aria-expanded='true'] {
     display: block;
     opacity: 1;
     pointer-events: auto;
   }
 
   .drop-container {
-    border-width: var(--drop-border-width, 1px);
-    border-style: var(--drop-border-style, solid);
-    border-color: var(--drop-border-color, var(--ui-border));
-    border-radius: var(--radius-md);
-    background-color: var(--drop-background, var(--ui-bg));
-    color: var(--drop-foreground, var(--ui-fg));
-    box-shadow: var(--drop-box-shadow, var(--shadow-sm));
+    border-width: var(--drop-border-width);
+    border-style: var(--drop-border-style);
+    border-color: var(--drop-border-color);
+    border-radius: var(--drop-border-radius);
+    background: var(--drop-bg);
+    color: var(--drop-fg);
+    box-shadow: var(--drop-box-shadow);
   }
 }

package/src/css/editor.css

@@ -0,0 +1,16 @@
+@layer components {
+    #j-editor {
+        max-width: var(--editor-max-width);
+        border-width: var(--editor-border-width);
+        border-style: var(--editor-border-style);
+        border-color: var(--editor-border-color);
+        border-top: none;
+        border-bottom: none;
+        min-height: var(--editor-min-height);
+        padding: var(--editor-padding);
+    }
+
+    .ProseMirror {
+        outline: 0;
+    }
+}

package/src/css/flow.css

@@ -72,7 +72,7 @@
     color: var(--tone-fg);
   }
 
-  .j-flow .flow-body {
+  s .j-flow .flow-body {
     min-width: 0;
   }
 

package/src/css/form.css

@@ -84,6 +84,7 @@
     box-shadow: var(--input-box-shadow, var(--shadow-sm));
     background-color: inherit;
     color: inherit;
+    letter-spacing: 0.5px;
   }
 
   .j-input:not([type='file']) {
@@ -102,6 +103,23 @@
     line-height: var(--input-line-height-lg, var(--line-height));
   }
 
+  .j-input[type='password'].is-sm {
+    letter-spacing: 1px;
+  }
+
+  .j-input[type='password'] {
+    letter-spacing: 2px;
+  }
+
+  .j-input[type='password'].is-lg {
+    letter-spacing: 3px;
+  }
+
+  .j-input[type='password']:placeholder-shown {
+    letter-spacing: 0.5px;
+  }
+
+
   /* type file */
   .j-input[type='file'] {
     appearance: none;
@@ -259,7 +277,7 @@
 
   .j-radio label:has(input[type='radio']:disabled) {
     cursor: not-allowed;
-    opacity: var(--opacity-disabled);
+    /* opacity: var(--opacity-disabled); */
     color: var(--ui-disabled-fg);
   }
 
@@ -404,11 +422,7 @@
     print-color-adjust: exact;
   }
 
-  .j-theme-yellow .j-checkbox input[type='checkbox']:checked,
-  .j-theme-mint .j-checkbox input[type='checkbox']:checked,
-  .j-theme-lime .j-checkbox input[type='checkbox']:checked,
-  .dark.j-theme-gray .j-checkbox input[type='checkbox']:checked,
-  .dark.j-theme-olive .j-checkbox input[type='checkbox']:checked {
+  .dark .j-checkbox input[type='checkbox']:checked {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/%3e%3c/svg%3e");
   }
 
@@ -677,6 +691,8 @@
   .input-group>.el-addon>.j-button {
     position: relative;
     border-color: var(--input-border-color, var(--ui-input-border));
+    color: var(--ui-fg-muted);
+    background: var(--ui-surface-muted);
   }
 
   .input-group>.el-addon>.is-text {
@@ -687,7 +703,7 @@
     line-height: var(--line-height, 1.25rem);
     color: var(--ui-fg-muted);
     background-color: var(--input-group-text-addon-background, var(--ui-bg-muted));
-    padding: var(--input-group-text-addon-padding, 0.5rem 0.75rem);
+    padding: var(--input-group-text-addon-padding, var(--s2));
     height: var(--button-height, var(--el-height-md));
     border-width: var(--border-width, 1px);
     border-style: var(--border-style, solid);
@@ -855,7 +871,6 @@
 
   .j-input:disabled:not(.is-line):not(.is-ghost):not(.is-blank) {
     background-color: var(--ui-disabled-bg);
-    border-color: var(--ui-border);
   }
 
   .j-textarea[disabled] {
@@ -877,14 +892,14 @@
   .j-radio.is-group label input[type='radio']:disabled+.radio-text {
     cursor: not-allowed;
     background-color: var(--ui-disabled-bg);
-    opacity: var(--opacity-disabled);
+    /* opacity: var(--opacity-disabled); */
     color: var(--ui-disabled-fg);
   }
 
   /* checkbox disabled */
   .j-checkbox label:has(input[type='checkbox']:disabled) {
     cursor: not-allowed;
-    opacity: var(--opacity-disabled);
+    /* opacity: var(--opacity-disabled); */
     color: var(--ui-disabled-fg);
   }
 
@@ -911,9 +926,7 @@
   }
 
   /* status placeholder shown */
-  /* input.j-input[type='file']:valid, */
-  /* select.j-select:valid, */
-  input.j-input:not([type='file']):not(:placeholder-shown) {
+  /* input.j-input:not([type='file']):not(:placeholder-shown) {
     background-color: var(--tone-subtle);
-  }
+  } */
 }

package/src/css/icon.css

@@ -3,27 +3,6 @@
 		display: block;
 	}
 
-	.j-loader {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		background: var(--ui-bg-subtle);
-		width: 100%;
-		height: 100%;
-		position: absolute;
-	}
-
-	/* loader icon */
-	.icon-loader {
-		display: inline-block;
-		width: var(--font-size-xl);
-		height: var(--font-size-xl);
-		border: 1px solid currentcolor;
-		border-right-color: transparent;
-		border-radius: 50%;
-		animation: var(--speed-xl) linear infinite animate-spin;
-	}
-
 	/* close icon */
 	.icon-close {
 		box-sizing: border-box;
@@ -32,8 +11,8 @@
 		transform: scale(1);
 		width: var(--font-size-xl);
 		height: var(--font-size-xl);
-		border: 1px solid;
-		border-radius: 50%;
+		/* border: 1px solid; */
+		/* border-radius: 50%; */
 		color: inherit;
 		cursor: pointer;
 	}
@@ -46,7 +25,7 @@
 		top: 50%;
 		left: 50%;
 		width: 12px;
-		height: 2px;
+		height: 1.5px;
 		background: currentColor;
 		border-radius: 1px;
 		transform-origin: center center;

package/src/css/index.css

@@ -5,8 +5,11 @@
 @import url('./layout.css');
 @import url('./icon.css');
 @import url('./font.css');
-@import url('./components.css');
+
 @import url('./content.css');
+
+@import url('./components.css');
 @import url('./themes/index.css');
+
 @import url('./animation.css');
 @import url('./status.css');

package/src/css/layout.css

@@ -24,7 +24,7 @@
   body {
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
-    text-rendering: optimizeLegibility;
+    text-rendering: auto;
     -webkit-font-smoothing: antialiased;
     scroll-behavior: smooth;
     font-family:
@@ -42,9 +42,9 @@
 
     min-width: var(--screen-xs, 320px);
     min-height: 100vh;
+    min-height: 100dvh;
     font-size: var(--font-size-md);
     margin: 0;
-    /* text-rendering: optimizeSpeed; */
   }
 
   img,

package/src/css/loading.css

@@ -1,38 +1,102 @@
 @layer components {
-  .j-loading {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--loading-background, var(--ui-bg));
-    display: none;
+  .j-loader {
+    display: flex;
     justify-content: center;
     align-items: center;
-    backdrop-filter: var(--loading-backdrop-filter, blur(2px));
+    position: var(--loader-position);
+    width: 100%;
+    height: 100%;
   }
 
-  .j-loading.is-active {
-    display: flex;
-    z-index: var(--loading-index, inherit);
+  .j-loader .loader {
+    display: inline-block;
+    width: var(--loader-size);
+    height: var(--loader-size);
+    border-width: var(--loader-width);
+    border-style: var(--loader-style);
+    border-color: var(--loader-fg);
+    border-right-color: transparent;
+    border-radius: 50%;
+    animation: var(--loader-speed) linear infinite animate-spin;
   }
 
-  .loading-spinner {
-    width: var(--loading-spinner-size, 3rem);
-    height: var(--loading-spinner-size, 3rem);
-    /* border: var(--loading-spinner-width, 4px) solid var(--loading-spinner-background, var(--tone-fg)); */
-    border: var(--loading-spinner-width, 4px) solid var(--loading-spinner-background, var(--tone-soft));
-    border-top: var(--loading-spinner-width, 4px) solid var(--loading-spinner-color, var(--tone-solid));
+  .j-loader .polygon-loader {
+    width: var(--loader-size);
+    aspect-ratio: 1;
     border-radius: 50%;
-    animation: animate-spin 1s linear infinite;
+    border: 1.5px solid var(--loader-fg);
+    animation:
+      polygon-loader-1 0.8s infinite linear alternate,
+      polygon-loader-2 1.6s infinite linear;
   }
 
-  .j-loading.is-bold .loading-spinner {
+  @keyframes polygon-loader-1 {
+    0% {
+      clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)
+    }
+
+    12.5% {
+      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%)
+    }
+
+    50% {
+      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%)
+    }
+
+    75% {
+      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%)
+    }
+  }
+
+  @keyframes polygon-loader-2 {
+    0% {
+      transform: scaleY(1) rotate(0deg)
+    }
+
+    49.99% {
+      transform: scaleY(1) rotate(135deg)
+    }
+
+    50% {
+      transform: scaleY(-1) rotate(0deg)
+    }
+
+    100% {
+      transform: scaleY(-1) rotate(-135deg)
+    }
+  }
+
+  .j-loader .tone-loader {
+    width: var(--loader-size);
+    height: var(--loader-size);
+    border-width: var(--loader-width);
+    border-style: var(--loader-style);
+    border-color: var(--loader-fg);
+    border-top-color: var(--loader-top-fg);
+    border-radius: 50%;
+    animation: 1s linear infinite animate-spin;
+  }
+
+  .j-loader .flow-loader {
+    width: var(--loader-size);
+    height: var(--loader-size);
     border: none;
+    border-radius: 50%;
     aspect-ratio: 1;
-    background:
-      radial-gradient(farthest-side, var(--tone-solid) 94%, #0000) top/8px 8px no-repeat,
-      conic-gradient(#0000 30%, var(--tone-solid));
-    mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
+    background: var(--loader-bg);
+    mask: var(--loader-mask);
+    animation: 1s linear infinite animate-spin;
   }
 }

package/src/css/menu.css

@@ -31,43 +31,50 @@
 
   .j-menu .menu .menu-item {
     flex-shrink: 0;
+    font-size: var(--menu-font-size);
   }
 
   .j-menu .menu .menu-item:not(:has(a)) {
-    font-size: var(--font-size-md);
-    font-weight: var(--font-normal);
-    padding: var(--button-padding, 0.5rem 1rem);
-    height: var(--button-height, var(--el-height-md));
-    line-height: var(--line-height);
+    height: var(--menu-item-height);
+    line-height: var(--menu-item-line-height);
+    font-weight: var(--menu-font-weight);
     text-decoration: underline;
     text-decoration-style: wavy;
     text-decoration-color: var(--state-danger);
     text-underline-offset: 4px;
+    padding: 4px 1rem;
     position: relative;
     cursor: help;
   }
 
-  .j-menu .menu .menu-item:has(a) a {
+  .j-menu .menu .menu-item a {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
-    gap: var(--space);
+    gap: var(--menu-link-gap);
     white-space: nowrap;
     cursor: pointer;
     appearance: button;
     touch-action: manipulation;
     color: currentColor;
     background-color: inherit;
-    font-weight: var(--font-medium);
-    font-size: var(--font-size-md);
+    font-weight: var(--menu-link-font-weight);
     text-decoration: none;
+
+    padding: var(--menu-item-padding);
+    height: var(--menu-item-height);
+    line-height: var(--menu-item-line-height);
+    border-width: var(--border-width, 1px);
+    border-style: var(--border-style, solid);
+    border-color: var(--button-border-color, transparent);
+    border-radius: var(--button-border-radius, var(--radius-md));
   }
 
-  .j-menu .menu .menu-item:has(a) a .el-icon,
-  .j-menu .menu .menu-item:has(a) a svg {
-    width: var(--font-size-lg);
-    height: var(--font-size-lg);
+  .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);
   }
 
   .j-menu .menu .menu-item.menu-item-has-children>a {
@@ -90,17 +97,6 @@
     transform: rotate(180deg);
   }
 
-  /* menu type */
-  .j-menu .menu .menu-item:has(a) a {
-    padding: var(--button-padding, 0.5rem 1rem);
-    height: var(--button-height, var(--el-height-md));
-    line-height: var(--line-height);
-    border-width: var(--border-width, 1px);
-    border-style: var(--border-style, solid);
-    border-color: var(--button-border-color, transparent);
-    border-radius: var(--button-border-radius, var(--radius-md));
-  }
-
   /* submenu */
   .j-menu .menu .menu-item .sub-menu {
     display: none;
@@ -206,10 +202,11 @@
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     grid-template-rows: repeat(6, 1fr);
-    grid-column-gap: 0px;
-    grid-row-gap: 0px;
+    grid-column-gap: var(--space);
+    grid-row-gap: var(--space);
     min-width: 400px;
     max-width: 600px;
+    padding-right: var(--s2);
     transform: translateX(-33.33%) translateY(1px);
   }
 
@@ -324,7 +321,7 @@
     cursor: help;
   }
 
-  .j-mobile-menu .menu .menu-item:has(a) a {
+  .j-mobile-menu .menu .menu-item a {
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -341,12 +338,12 @@
     text-decoration: none;
   }
 
-  .j-mobile-menu .menu .menu-item:has(a) a .menu-text {
+  .j-mobile-menu .menu .menu-item a .menu-text {
     line-height: var(--line-height-paragraph);
   }
 
-  .j-mobile-menu .menu .menu-item:has(a) a .el-icon,
-  .j-mobile-menu .menu .menu-item:has(a) a svg {
+  .j-mobile-menu .menu .menu-item a .el-icon,
+  .j-mobile-menu .menu .menu-item a svg {
     width: var(--font-size-lg);
     height: var(--font-size-lg);
   }
@@ -453,8 +450,8 @@
     padding: calc(var(--space) * 1.5);
   }
 
-  .j-bottom-menu .menu .menu-item:has(a) a .el-icon,
-  .j-bottom-menu .menu .menu-item:has(a) a svg {
+  .j-bottom-menu .menu .menu-item a .el-icon,
+  .j-bottom-menu .menu .menu-item a svg {
     width: var(--font-size-lg);
     height: var(--font-size-lg);
   }

package/src/css/modal.css

@@ -1,27 +1,15 @@
 @layer components {
   .j-modal {
-    --modal-border: var(--modal-border-width, 1px) var(--modal-border-style, solid) var(--modal-border-color, transparent);
-
-    --modal-header-padding: var(--s4) var(--s4) 0;
-    --modal-header-gap: var(--space);
-    --modal-title-font-size: var(--font-size-md);
-    --modal-close-icon-size: var(--el-height-3xs);
-    --modal-close-font-size: var(--font-size-lg);
-    --modal-close-color: var(--ui-fg-muted);
-
-    --modal-body-padding: var(--s4);
-    --modal-body-line-height: var(--line-height-paragraph);
-
-    --modal-footer-padding: 0 var(--s4) var(--s4);
-    --modal-footer-gap: var(--s2);
-
-    background: var(--modal-background, var(--ui-bg));
-    border: var(--modal-border, 1px solid var(--ui-border));
-    border-radius: var(--modal-border-radius, var(--radius-md));
-    box-shadow: var(--modal-box-shadow, var(--shadow-md));
-    min-width: var(--modal-min-width, 300px);
-    max-width: var(--modal-max-width, 500px);
-    max-height: var(--modal-max-height, 90vh);
+    color: var(--modal-fg);
+    background: var(--modal-bg);
+    border-width: var(--modal-border-width);
+    border-style: var(--modal-border-style);
+    border-color: var(--modal-border-color);
+    border-radius: var(--modal-border-radius);
+    box-shadow: var(--modal-box-shadow);
+    min-width: var(--modal-min-width);
+    max-width: var(--modal-max-width);
+    max-height: var(--modal-max-height);
     overflow: hidden;
     animation: animate-fade-in 0.35s ease-in-out;
     display: flex;
@@ -38,22 +26,21 @@
     height: 100%;
     max-width: none;
     max-height: none;
-    /* --modal-border-color: var(--ui-border-subtle); */
   }
 
   .j-modal .modal-header {
-    padding: var(--modal-header-padding);
-    border-bottom: var(--modal-border);
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: var(--modal-header-gap);
+    padding: var(--modal-header-padding);
+    border-bottom: var(--modal-header-bottom-border);
   }
 
   .j-modal .modal-header .modal-title {
     margin: 0;
     font-size: var(--modal-title-font-size);
-    font-weight: 500;
+    font-weight: var(--modal-title-font-weight);
   }
 
   .j-modal .modal-body {
@@ -68,27 +55,11 @@
     line-height: var(--modal-body-line-height);
   }
 
-  .j-modal.is-fullscreen .modal-header {
-    --modal-header-padding: var(--s4);
-  }
-
-  .j-modal:not(.is-fullscreen) .modal-header:has(.modal-close) {
-    --modal-header-padding: var(--s3) var(--s4) 0;
-  }
-
-  .j-modal.is-fullscreen .modal-body {
-    --modal-body-padding: 0;
-  }
-
-  .j-modal.is-fullscreen .modal-footer {
-    --modal-footer-padding: var(--s4);
-  }
-
   .j-modal .modal-footer {
-    padding: var(--modal-footer-padding);
-    border-top: var(--modal-footer-border, var(--modal-border));
     display: flex;
     justify-content: flex-end;
     gap: var(--modal-footer-gap);
+    padding: var(--modal-footer-padding);
+    border-top: var(--modal-footer-top-border);
   }
 }