vanilla-jui 1.7.3 → 1.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [

package/src/css/accordion.css

@@ -12,9 +12,6 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
   }
 

package/src/css/animation.css

@@ -1,22 +1,14 @@
 @layer animation {
   /* none */
   .animate-none {
-    -webkit-animation: none;
     animation: none;
   }
 
   /* spin */
   .animate-spin {
-    -webkit-animation: animate-spin 1s linear infinite;
     animation: animate-spin 1s linear infinite;
   }
 
-  @-webkit-keyframes animate-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
   @keyframes animate-spin {
     to {
       transform: rotate(360deg);
@@ -25,18 +17,9 @@
 
   /* ping */
   .animate-ping {
-    -webkit-animation: animate-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     animation: animate-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
   }
 
-  @-webkit-keyframes animate-ping {
-    75%,
-    100% {
-      transform: scale(2);
-      opacity: 0;
-    }
-  }
-
   @keyframes animate-ping {
     75%,
     100% {
@@ -47,16 +30,9 @@
 
   /* pulse */
   .animate-pulse {
-    -webkit-animation: animate-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     animation: animate-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
-  @-webkit-keyframes animate-pulse {
-    50% {
-      opacity: 0.5;
-    }
-  }
-
   @keyframes animate-pulse {
     50% {
       opacity: 0.5;
@@ -65,21 +41,19 @@
 
   /* bounce */
   .animate-bounce {
-    -webkit-animation: animate-bounce 1s infinite;
     animation: animate-bounce 1s infinite;
   }
 
-  @-webkit-keyframes animate-bounce {
+  @keyframes animate-bounce {
     0%,
     100% {
       transform: translateY(-25%);
-      -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
       animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
     }
 
     50% {
       transform: translateY(0);
-      -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+
       animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
     }
   }
@@ -88,35 +62,21 @@
     0%,
     100% {
       transform: translateY(-25%);
-      -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
       animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
     }
 
     50% {
       transform: translateY(0);
-      -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+
       animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
     }
   }
 
   /* fade in */
   .animate-fade-in {
-    -webkit-animation: animate-fade-in 0.3s ease-in-out;
     animation: animate-fade-in 0.3s ease-in-out;
   }
 
-  @-webkit-keyframes animate-fade-in {
-    0% {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-
-    100% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
   @keyframes animate-fade-in {
     0% {
       opacity: 0;
@@ -131,22 +91,9 @@
 
   /* fade out */
   .animate-fade-out {
-    -webkit-animation: animate-fade-out 0.3s ease-in-out;
     animation: animate-fade-out 0.3s ease-in-out;
   }
 
-  @-webkit-keyframes animate-fade-out {
-    0% {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    100% {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-  }
-
   @keyframes animate-fade-out {
     0% {
       opacity: 1;
@@ -161,11 +108,10 @@
 
   /* shake */
   .animate-shake {
-    -webkit-animation: animate-shake 0.3s ease-in-out;
     animation: animate-shake 0.3s ease-in-out;
   }
 
-  @-webkit-keyframes animate-shake {
+  @keyframes animate-shake {
     0%,
     100% {
       transform: translateX(0);
@@ -205,20 +151,9 @@
 
   /* slide-to-top */
   .animate-slide-to-top {
-    -webkit-animation: animate-slide-to-top 0.3s ease-in-out;
     animation: animate-slide-to-top 0.3s ease-in-out;
   }
 
-  @-webkit-keyframes animate-slide-to-top {
-    0% {
-      transform: translateY(0);
-    }
-
-    100% {
-      transform: translateY(-100%);
-    }
-  }
-
   @keyframes animate-slide-to-top {
     0% {
       transform: translateY(0);
@@ -231,20 +166,9 @@
 
   /* slide-to-right */
   .animate-slide-to-right {
-    -webkit-animation: animate-slide-to-right 0.3s ease-in-out;
     animation: animate-slide-to-right 0.3s ease-in-out;
   }
 
-  @-webkit-keyframes animate-slide-to-right {
-    0% {
-      transform: translateX(0);
-    }
-
-    100% {
-      transform: translateX(100%);
-    }
-  }
-
   @keyframes animate-slide-to-right {
     0% {
       transform: translateX(0);
@@ -257,20 +181,9 @@
 
   /* slide-to-bottom */
   .animate-slide-to-bottom {
-    -webkit-animation: animate-slide-to-bottom 0.3s ease-in-out;
     animation: animate-slide-to-bottom 0.3s ease-in-out;
   }
 
-  @-webkit-keyframes animate-slide-to-bottom {
-    0% {
-      transform: translateY(0);
-    }
-
-    100% {
-      transform: translateY(100%);
-    }
-  }
-
   @keyframes animate-slide-to-bottom {
     0% {
       transform: translateY(0);
@@ -283,20 +196,9 @@
 
   /* slide-to-left */
   .animate-slide-to-left {
-    -webkit-animation: animate-slide-to-left 0.3s ease-in-out;
     animation: animate-slide-to-left 0.3s ease-in-out;
   }
 
-  @-webkit-keyframes animate-slide-to-left {
-    0% {
-      transform: translateX(0);
-    }
-
-    100% {
-      transform: translateX(-100%);
-    }
-  }
-
   @keyframes animate-slide-to-left {
     0% {
       transform: translateX(0);
@@ -311,26 +213,23 @@
   [data-reveal] {
     opacity: 0;
     transform: translateY(12px);
-    -webkit-animation: reveal 0.62s ease forwards;
+
     animation: reveal 0.62s ease forwards;
   }
 
   [data-reveal='2'] {
-    -webkit-animation-delay: 0.08s;
     animation-delay: 0.08s;
   }
 
   [data-reveal='3'] {
-    -webkit-animation-delay: 0.14s;
     animation-delay: 0.14s;
   }
 
   [data-reveal='4'] {
-    -webkit-animation-delay: 0.2s;
     animation-delay: 0.2s;
   }
 
-  @-webkit-keyframes reveal {
+  @keyframes reveal {
     to {
       opacity: 1;
       transform: translateY(0);

package/src/css/avatar.css

@@ -3,9 +3,6 @@
     display: inline-block;
     vertical-align: middle;
     overflow: hidden;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     -o-object-fit: cover;
     object-fit: cover;

package/src/css/badge.css

@@ -3,9 +3,6 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
   }
 }

package/src/css/breadcrumb.css

@@ -1,9 +1,6 @@
 @layer components {
   .j-breadcrumb {
     white-space: nowrap;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
   }
 
@@ -25,7 +22,6 @@
   }
 
   .j-breadcrumb li:first-child a {
-    -webkit-padding-start: 0;
     padding-inline-start: 0;
   }
 

package/src/css/button.css

@@ -6,12 +6,7 @@
     flex-wrap: nowrap;
     position: relative;
     white-space: nowrap;
-    -webkit-appearance: button;
-    -moz-appearance: button;
     appearance: button;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     touch-action: manipulation;
   }

package/src/css/card.css

@@ -46,8 +46,6 @@
     margin: 0;
     padding: 0;
     padding: var(--space) var(--s2);
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     cursor: pointer;
   }
@@ -70,7 +68,6 @@
   .j-card figure img {
     width: 100%;
     height: 100%;
-    -o-object-fit: cover;
     object-fit: cover;
   }
 

package/src/css/editor.css

@@ -116,7 +116,7 @@
   .j-editor u {
     text-decoration: underline;
     text-decoration-thickness: 4px;
-    -webkit-text-decoration-color: var(--editor-ring);
+
     text-decoration-color: var(--editor-ring);
     text-underline-offset: 0.2em;
   }
@@ -150,9 +150,7 @@
   }
 
   .j-editor abbr[title] {
-    -webkit-text-decoration: underline dotted;
     text-decoration: underline dotted;
-    -webkit-text-decoration-color: var(--tone-muted);
     text-decoration-color: var(--tone-muted);
     text-underline-offset: 0.2em;
     cursor: help;
@@ -178,25 +176,17 @@
   .j-editor a {
     color: var(--editor-link);
     text-decoration: none;
-    -webkit-text-decoration-color: transparent;
+
     text-decoration-color: transparent;
     text-underline-offset: 0.15em;
-    transition:
-      color 0.15s,
-      -webkit-text-decoration-color 0.15s;
     transition:
       color 0.15s,
       text-decoration-color 0.15s;
-    transition:
-      color 0.15s,
-      text-decoration-color 0.15s,
-      -webkit-text-decoration-color 0.15s;
   }
 
   .j-editor a:hover {
     color: var(--editor-link-hover);
     text-decoration: underline;
-    -webkit-text-decoration-color: var(--editor-link-hover);
     text-decoration-color: var(--editor-link-hover);
   }
 
@@ -292,14 +282,11 @@
   ============================================ */
   .j-editor blockquote {
     margin: var(--editor-block-space) 0;
-    margin-left: 0;
-    margin-right: 0;
     padding: 0.75rem 1.25rem;
     border-left: 3px solid var(--editor-border-tone);
     border-radius: 0 var(--radius-md) var(--radius-md) 0;
     background-color: var(--editor-blockquote-bg);
     color: var(--editor-blockquote-fg);
-    font-style: italic;
   }
 
   /* .j-editor blockquote p {
@@ -331,7 +318,6 @@
     Code - 代码
   ============================================ */
   code {
-    -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
 
@@ -415,8 +401,6 @@
   }
 
   .code-block .code-header select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     background: transparent;
     border: none;
@@ -581,11 +565,11 @@
   }
 
   .j-editor figcaption {
-    margin-top: 0.75rem;
+    margin-top: 0.5rem;
     font-size: var(--font-size-md);
     color: var(--editor-caption-fg);
     text-align: center;
-    line-height: 1.5;
+    line-height: 1.2;
   }
 
   .j-editor iframe,
@@ -753,7 +737,7 @@
   .j-editor ul[data-type='taskList'] li {
     display: flex;
     align-items: center;
-    gap: 0.25rem;
+    gap: 0.5rem;
   }
 
   .j-editor ul[data-type='taskList'] li label,
@@ -763,9 +747,6 @@
 
   .j-editor ul[data-type='taskList'] li > label {
     flex: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
   }
 
@@ -787,8 +768,6 @@
     width: 1rem;
     height: 1rem;
     margin: 0;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     transition: all 0.05s ease-in-out;
   }
@@ -798,6 +777,11 @@
     border-color: var(--tone-solid);
   }
 
+  .dark .j-editor input[type='checkbox']:checked {
+    background: var(--tone-shade);
+    border-color: var(--tone-shade);
+  }
+
   .j-editor input[type='checkbox']:checked:before {
     content: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E');
     display: inline-block;
@@ -805,4 +789,10 @@
     width: 1.3125rem;
     height: 1.3125rem;
   }
+
+  .j-editor ul[data-type='taskList'] li:has(input[type='checkbox']:checked) p {
+    text-decoration: line-through;
+    text-decoration-color: var(--ui-fg);
+    text-decoration-thickness: 2px;
+  }
 }

package/src/css/form.css

@@ -109,8 +109,6 @@
 
   /* type file */
   .j-input[type='file'] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     background-clip: padding-box;
     overflow: hidden;
@@ -120,8 +118,6 @@
 
   .j-input[type='file']::file-selector-button {
     color: var(--ui-fg-muted);
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     border-width: 0;
     border-inline-end-width: 1px;
@@ -134,13 +130,11 @@
 
   .j-input[type='file']::file-selector-button,
   html.j-font-sm .j-input[type='file']::file-selector-button {
-    -webkit-margin-end: var(--s2);
     margin-inline-end: var(--s2);
     padding: var(--s2);
   }
 
   html.j-font-md .j-input[type='file']::file-selector-button {
-    -webkit-margin-end: calc(var(--space) * 2.75);
     margin-inline-end: calc(var(--space) * 2.75);
     padding: calc(var(--space) * 2.75);
   }
@@ -202,8 +196,6 @@
   }
 
   .j-radio label input[type='radio'] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     width: 1rem;
     height: 1rem;
@@ -263,7 +255,6 @@
   /* radio group */
   .j-radio.is-group input[type='radio'] {
     clip: rect(0 0 0 0);
-    -webkit-clip-path: inset(100%);
     clip-path: inset(100%);
     height: 1px;
     overflow: hidden;
@@ -285,9 +276,6 @@
     justify-content: center;
     align-items: center;
     text-align: center;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     letter-spacing: 0.5px;
   }
@@ -361,8 +349,6 @@
 
   .j-radio label,
   .j-checkbox label {
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
     width: fit-content;
   }
 
@@ -371,8 +357,6 @@
   }
 
   .j-checkbox input[type='checkbox'] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     width: 1rem;
     height: 1rem;
@@ -596,9 +580,6 @@
     display: flex;
     align-items: center;
     padding-inline: var(--s2);
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
   }
 

package/src/css/layout.css

@@ -54,8 +54,6 @@
   }
 
   .is-reset:where(button) {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     cursor: default;
     background-color: transparent;
@@ -104,20 +102,12 @@
       linear-gradient(to right, var(--ui-surface-subtle) 1px, transparent 1px),
       linear-gradient(to bottom, var(--ui-surface-subtle) 1px, transparent 1px);
     background-size: 40px 56px;
-    -webkit-mask-image: radial-gradient(
-      ellipse 25% 10% at 50% 0%,
-      #000 60%,
-      transparent 300%
-    );
     mask-image: radial-gradient(
       ellipse 25% 10% at 50% 0%,
       #000 60%,
       transparent 300%
     );
     pointer-events: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
   }
 
@@ -177,8 +167,6 @@
 
   .block-center {
     margin-inline: auto;
-    height: -webkit-fit-content;
-    height: -moz-fit-content;
     height: fit-content;
   }