vanilla-jui 1.4.1 → 1.4.3

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

@@ -11,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;
 	}
@@ -25,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

@@ -6,10 +6,10 @@
 @import url('./icon.css');
 @import url('./font.css');
 
+@import url('./content.css');
+
 @import url('./components.css');
 @import url('./themes/index.css');
 
-@import url('./content.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

@@ -3,52 +3,100 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    position: absolute;
+    position: var(--loader-position);
     width: 100%;
     height: 100%;
-    background: var(--loader-bg);
   }
 
   .j-loader .loader {
     display: inline-block;
-    width: var(--loader-icon-size);
-    height: var(--loader-icon-size);
-    border-width: var(--loader-icon-width);
-    border-style: var(--loader-icon-style);
-    border-color: var(--loader-icon-fg);
+    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-icon-speed) linear infinite animate-spin;
+    animation: var(--loader-speed) linear infinite animate-spin;
   }
 
-  .j-loading {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--loading-bg);
-    backdrop-filter: var(--loading-backdrop-filter);
+  .j-loader .polygon-loader {
+    width: var(--loader-size);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    border: 1.5px solid var(--loader-fg);
+    animation:
+      polygon-loader-1 0.8s infinite linear alternate,
+      polygon-loader-2 1.6s infinite linear;
+  }
+
+  @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-loading .loader {
-    width: var(--loading-loader-size);
-    height: var(--loading-loader-size);
-    border-width: var(--loading-loader-border-width);
-    border-style: var(--loading-loader-border-style);
-    border-color: var(--loading-loader-border-color);
-    border-top-color: var(--loading-loader-border-top-color);
+  .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-loading.is-bold .loader {
+  .j-loader .flow-loader {
+    width: var(--loader-size);
+    height: var(--loader-size);
     border: none;
+    border-radius: 50%;
     aspect-ratio: 1;
-    background: var(--loading-loader-bg);
-    mask: var(--loading-loader-mask);
+    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/pagination.css

@@ -1,11 +1,11 @@
 @layer components {
   .j-pagination {
-    font-size: var(--pagination-font-size, var(--font-size-md));
+    font-size: var(--pagination-font-size);
   }
 
   .j-pagination a {
-    text-decoration: none;
-    color: var(--pagination-link-color, var(--ui-fg));
+    text-decoration: var(--pagination-link-decoration);
+    color: var(--pagination-link-fg);
   }
 
   .j-pagination .pagination {
@@ -13,7 +13,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: var(--pagination-gap, var(--space));
+    gap: var(--pagination-gap);
     margin: 0;
     padding: 0;
   }

package/src/css/status.css

@@ -47,7 +47,8 @@
   /* disabled */
   [disabled],
   :disabled,
-  .is-disabled {
+  .is-disabled,
+  [aria-disabled="true"] {
     cursor: not-allowed;
     user-select: none;
   }

package/src/css/table.css

@@ -1,8 +1,10 @@
 @layer components {
   .j-table-container {
-    max-width: 100%;
-    overflow: auto;
+    max-width: var(--table-container-max-width);
     overflow-y: hidden;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--ui-border) transparent;
   }
 
   table.j-table {
@@ -11,42 +13,40 @@
     border-collapse: collapse;
     border-spacing: 0;
   }
+
   table.j-table tr.is-selected {
-    background-color: var(--table-selected-background, var(--tone-soft));
+    background: var(--table-selected-bg);
   }
 
   table.j-table td,
   table.j-table th {
-    border-width: var(--table-border-width, 0 0 1px);
-    border-style: var(--table-border-style, solid);
-    border-color: var(--table-border-color, var(--ui-border));
-    padding: var(--table-padding, 0.5em 0.75em);
-  }
-
-  table.j-table th:not([align]) {
-    text-align: var(--table-cell-text-align, left);
+    border-width: var(--table-border-width);
+    border-style: var(--table-border-style);
+    border-color: var(--table-border-color);
+    padding: var(--table-cell-padding);
   }
 
-  table.j-table td:not([align]),
-  table.j-table th:not([align]) {
-    text-align: inherit;
+  table.j-table th:not([align]),
+  table.j-table td:not([align]) {
+    text-align: var(--table-cell-text-align);
   }
 
   table.j-table a {
-    text-decoration: var(--table-link-decoration, inherit);
-    color: var(--table-link-color, var(--tone-solid));
+    text-decoration: inherit;
+    color: var(--table-link-fg);
   }
 
   table.j-table.is-striped thead tr,
   table.j-table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
-    background-color: var(--table-striped-background, var(--tone-soft));
+    background: var(--table-striped-bg);
   }
+
   table.j-table.is-hoverable tbody tr:hover {
-    background-color: var(--table-hover-background, var(--tone-soft));
+    background: var(--table-hover-bg);
   }
 
   table.j-table.is-bordered td,
   table.j-table.is-bordered th {
-    border-width: var(--table-border-width, var(--border-width, 1px));
+    border-width: var(--table-bordered-width);
   }
-}
+}

package/src/css/tabs.css

@@ -47,7 +47,7 @@
     cursor: pointer;
   }
 
-  .j-tabs .tab-list .tab-item.is-disabled {
+  .j-tabs .tab-list .tab-item[aria-disabled="true"] {
     cursor: not-allowed;
   }
 
@@ -63,7 +63,7 @@
     min-height: var(--tab-panel-item-min-height);
   }
 
-  .j-tabs .tab-panel .panel-item.is-active {
+  .j-tabs .tab-panel .panel-item[aria-hidden="false"] {
     display: block;
   }
 

package/src/css/theme-palette.css

@@ -1,40 +1,33 @@
 @layer components {
   .j-theme-palette {
-    padding: var(--palette-padding, var(--s4));
-  }
-
-  .j-theme-palette>h3 {
-    margin: var(--palette-title-margin, var(--s2) 0);
+    padding: var(--palette-padding);
   }
 
   .j-theme-palette .palette-container {
     display: flex;
     flex-direction: column;
-    gap: var(--palette-container-gap, var(--s4));
+    gap: var(--palette-container-gap);
   }
 
   .j-theme-palette .palette-container .palette-item {
     display: flex;
     flex-direction: column;
-    gap: var(--palette-item-gap, var(--s2));
+    gap: var(--palette-item-gap);
   }
 
   .j-theme-palette .palette-container .palette-item .item-title {
-    font-size: var(--palette-item-title-font-size, var(--font-size-md));
-    line-height: var(--line-height);
-    margin: 0;
-    font-weight: var(--font-bold);
+    font-size: var(--palette-item-title-font-size);
+    font-weight: var(--palette-item-title-font-weight);
   }
 
   .j-theme-palette .palette-container .palette-item .items {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: var(--space);
+    grid-template-columns: var(--palette-items-columns);
+    gap: var(--palette-items-gap);
   }
 
   .j-theme-palette .palette-container .palette-item .items>button {
-    padding-left: var(--s2);
-    padding-right: var(--s2);
+    padding-inline: var(--s2);
     min-width: 0;
     overflow: hidden;
   }
@@ -45,8 +38,8 @@
 
   .j-theme-palette .palette-container .palette-item .items>button span.item-hex {
     display: inline-block;
-    width: var(--font-size-sm);
-    height: var(--font-size-sm);
+    width: var(--palette-items-icon-size);
+    height: var(--palette-items-icon-size);
     border-radius: 50%;
     flex-shrink: 0;
     margin-right: var(--space);

package/src/css/themes/default/accordion.css

@@ -22,15 +22,15 @@
         border-bottom: var(--accordion-border);
     }
 
-    .j-accordion .accordion-header.is-active {
+    .j-accordion .accordion-header[aria-expanded="true"] {
         border-color: transparent;
     }
 
-    .j-accordion .accordion-header.is-active .header-title {
+    .j-accordion .accordion-header[aria-expanded="true"] .header-title {
         --accordion-font-weight: var(--font-bold);
     }
 
-    .j-accordion .accordion-header:hover:not(.is-active) {
+    .j-accordion .accordion-header[aria-expanded="false"]:hover {
         --accordion-bg: var(--ui-surface-hover)
     }
 
@@ -41,7 +41,7 @@
         transform: var(--accordion-icon-transform);
     }
 
-    .j-accordion .accordion-header.is-active .header-arrow {
+    .j-accordion .accordion-header[aria-expanded="true"] .header-arrow {
         --accordion-icon-transform: rotate(180deg);
     }
 

package/src/css/themes/default/avatar.css

@@ -5,14 +5,30 @@
         --avatar-box-shadow: var(--shadow-sm);
     }
 
-    .j-avatar.is-sm {
+    .j-avatar.is-2xs {
         --avatar-size: var(--el-height-2xs);
     }
 
+    .j-avatar.is-xs {
+        --avatar-size: var(--el-height-xs);
+    }
+
+    .j-avatar.is-sm {
+        --avatar-size: var(--el-height-sm);
+    }
+
     .j-avatar.is-lg {
         --avatar-size: var(--el-height-lg);
     }
 
+    .j-avatar.is-xl {
+        --avatar-size: var(--el-height-xl);
+    }
+
+    .j-avatar.is-2xl {
+        --avatar-size: var(--el-height-2xl);
+    }
+
     .j-avatar.is-round {
         --avatar-border-radius: 0.5rem;
     }