vanilla-jui 1.7.4 → 1.7.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.7.4",
+  "version": "1.7.6",
   "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,11 +3,7 @@
     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

@@ -71,8 +71,6 @@
     font-size: 1.5em;
     letter-spacing: -0.02em;
     margin-top: 2.25rem;
-    /* padding-top: 1.5rem; */
-    /* border-top: 1px solid var(--editor-border-subtle); */
   }
 
   .j-editor h3 {
@@ -116,7 +114,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 +148,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 +174,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);
   }
 
@@ -328,7 +316,6 @@
     Code - 代码
   ============================================ */
   code {
-    -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
   }
 
@@ -359,8 +346,6 @@
     background: var(--editor-code-bg);
     font-size: 0.875em;
     line-height: 1.6;
-    -moz-tab-size: 2;
-    -o-tab-size: 2;
     tab-size: 2;
   }
 
@@ -412,8 +397,6 @@
   }
 
   .code-block .code-header select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     background: transparent;
     border: none;
@@ -760,9 +743,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;
   }
 
@@ -784,8 +764,6 @@
     width: 1rem;
     height: 1rem;
     margin: 0;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     transition: all 0.05s ease-in-out;
   }
@@ -810,7 +788,6 @@
 
   .j-editor ul[data-type='taskList'] li:has(input[type='checkbox']:checked) p {
     text-decoration: line-through;
-    -webkit-text-decoration-color: var(--ui-fg);
     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

@@ -20,8 +20,6 @@
   }
 
   body {
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
     tab-size: 4;
     scroll-behavior: smooth;
     font-family:
@@ -41,7 +39,6 @@
   }
 
   img {
-    -o-object-fit: cover;
     object-fit: cover;
   }
 
@@ -54,8 +51,6 @@
   }
 
   .is-reset:where(button) {
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     cursor: default;
     background-color: transparent;
@@ -104,20 +99,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 +164,6 @@
 
   .block-center {
     margin-inline: auto;
-    height: -webkit-fit-content;
-    height: -moz-fit-content;
     height: fit-content;
   }
 
@@ -809,90 +794,73 @@
   }
 
   /* columns */
-  .columns-auto {
-    -moz-columns: auto;
+  /* .columns-auto {
     columns: auto;
   }
 
   .columns-6xs {
-    -moz-columns: var(--columns-6xs);
     columns: var(--columns-6xs);
   }
 
   .columns-5xs {
-    -moz-columns: var(--columns-5xs);
     columns: var(--columns-5xs);
   }
 
   .columns-4xs {
-    -moz-columns: var(--columns-4xs);
     columns: var(--columns-4xs);
   }
 
   .columns-3xs {
-    -moz-columns: var(--columns-3xs);
     columns: var(--columns-3xs);
   }
 
   .columns-2xs {
-    -moz-columns: var(--columns-2xs);
     columns: var(--columns-2xs);
   }
 
   .columns-xs {
-    -moz-columns: var(--columns-xs);
     columns: var(--columns-xs);
   }
 
   .columns-sm {
-    -moz-columns: var(--columns-sm);
     columns: var(--columns-sm);
   }
 
   .columns-md {
-    -moz-columns: var(--columns-md);
     columns: var(--columns-md);
   }
 
   .columns-lg {
-    -moz-columns: var(--columns-lg);
     columns: var(--columns-lg);
   }
 
   .columns-xl {
-    -moz-columns: var(--columns-xl);
     columns: var(--columns-xl);
   }
 
   .columns-2xl {
-    -moz-columns: var(--columns-2xl);
     columns: var(--columns-2xl);
   }
 
   .columns-3xl {
-    -moz-columns: var(--columns-3xl);
     columns: var(--columns-3xl);
   }
 
   .columns-4xl {
-    -moz-columns: var(--columns-4xl);
     columns: var(--columns-4xl);
   }
 
   .columns-5xl {
-    -moz-columns: var(--columns-5xl);
     columns: var(--columns-5xl);
   }
 
   .columns-6xl {
-    -moz-columns: var(--columns-6xl);
     columns: var(--columns-6xl);
   }
 
   .columns-7xl {
-    -moz-columns: var(--columns-7xl);
     columns: var(--columns-7xl);
-  }
+  } */
 
   .w-full {
     width: 100%;