vanilla-jui 1.5.35 → 1.5.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.5.35",
+  "version": "1.5.36",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [
@@ -66,10 +66,10 @@
     "vanilla-signal-i18n": "^1.1.2"
   },
   "devDependencies": {
-    "@tsdown/css": "latest",
+    "@tsdown/css": "^0.22.14",
     "jsdom": "^30.0.1",
-    "typescript": "latest",
-    "vite-plus": "latest"
+    "typescript": "^7.0.2",
+    "vite-plus": "^0.3.0"
   },
   "registry": {
     "type": "git",
@@ -81,5 +81,8 @@
       "version": "12.0.2",
       "onFail": "download"
     }
+  },
+  "allowScripts": {
+    "fsevents@2.3.3": true
   }
 }

package/src/css/accordion.css

@@ -12,34 +12,10 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
-
-    padding: var(--accordion-header-padding);
-    margin: var(--accordion-header-margin);
-    font-weight: var(--accordion-font-weight);
-    font-size: var(--accordion-header-font-size);
-    background: var(--accordion-bg);
-    border-bottom: var(--accordion-border);
-  }
-
-  .j-accordion[data-direction='horizontal'] .accordion-header {
-    gap: var(--space);
-    border-bottom: 0;
-    border-right: var(--accordion-border);
-  }
-
-  .j-accordion[data-direction='horizontal']
-    .accordion-header[aria-expanded='true'] {
-    border-right: 0;
-  }
-
-  .j-accordion .accordion-header[aria-expanded='false']:hover {
-    --accordion-bg: var(--ui-bg-subtle);
-  }
-
-  .j-accordion[data-direction='horizontal']
-    .accordion-header[aria-expanded='false']:nth-last-child(2) {
-    border-right: 0;
   }
 
   .j-accordion .accordion-header .header-title {
@@ -47,64 +23,18 @@
     text-align: left;
   }
 
-  .j-accordion .accordion-header[aria-expanded='true'] .header-title {
-    --accordion-font-weight: var(--font-bold);
-  }
-
   .j-accordion .accordion-header .header-arrow {
     display: flex;
     justify-content: center;
     align-items: center;
     transition: transform 0.3s ease-out;
-    transform: var(--accordion-icon-transform);
-  }
-
-  .j-accordion[data-direction='horizontal'] .accordion-header .header-arrow {
-    --accordion-icon-transform: rotate(-90deg);
-  }
-
-  .j-accordion .accordion-header[aria-expanded='true'] .header-arrow {
-    --accordion-icon-transform: rotate(180deg);
-  }
-
-  .j-accordion[data-direction='horizontal']
-    .accordion-header[aria-expanded='true']
-    .header-arrow {
-    --accordion-icon-transform: rotate(90deg);
   }
 
   .j-accordion .accordion-panel {
-    margin: var(--accordion-panel-margin);
-    font-size: var(--accordion-font-size);
-    border-bottom: var(--accordion-border);
     position: relative;
   }
 
-  .j-accordion .accordion-panel[aria-hidden='false'] {
-    min-height: 2rem;
-  }
-
-  .j-accordion[data-direction='horizontal']
-    .accordion-panel[aria-hidden='false'] {
-    border-right: var(--accordion-border);
-    border-bottom: 0;
-    flex: 1;
-  }
-
-  .j-accordion .accordion-header[aria-expanded='true'],
-  .j-accordion .accordion-header[aria-expanded='false']:nth-last-child(2),
-  .j-accordion .accordion-panel[aria-hidden='true'],
-  .j-accordion .accordion-panel:last-child {
-    border-bottom: 0;
-  }
-
-  .j-accordion[data-direction='horizontal'] .accordion-panel:last-child {
-    border-right: 0;
-  }
-
   .j-accordion .accordion-panel .panel-content {
-    margin: var(--accordion-panel-content-margin);
-    padding: var(--accordion-panel-content-padding);
     position: relative;
     min-height: inherit;
   }

package/src/css/animation.css

@@ -1,14 +1,22 @@
 @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);
@@ -17,9 +25,18 @@
 
   /* 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% {
@@ -30,9 +47,16 @@
 
   /* 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;
@@ -41,27 +65,58 @@
 
   /* bounce */
   .animate-bounce {
+    -webkit-animation: animate-bounce 1s infinite;
     animation: animate-bounce 1s infinite;
   }
 
+  @-webkit-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);
+    }
+  }
+
   @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);
     }
   }
 
   /* 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;
@@ -76,9 +131,22 @@
 
   /* 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;
@@ -93,9 +161,29 @@
 
   /* shake */
   .animate-shake {
+    -webkit-animation: animate-shake 0.3s ease-in-out;
     animation: animate-shake 0.3s ease-in-out;
   }
 
+  @-webkit-keyframes animate-shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+
+    25% {
+      transform: translateX(-10px);
+    }
+
+    50% {
+      transform: translateX(10px);
+    }
+
+    75% {
+      transform: translateX(-10px);
+    }
+  }
+
   @keyframes animate-shake {
     0%,
     100% {
@@ -117,9 +205,20 @@
 
   /* 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);
@@ -132,9 +231,20 @@
 
   /* 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);
@@ -147,9 +257,20 @@
 
   /* 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);
@@ -162,9 +283,20 @@
 
   /* 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);
@@ -179,21 +311,32 @@
   [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 {
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
   @keyframes reveal {
     to {
       opacity: 1;

package/src/css/avatar.css

@@ -2,22 +2,13 @@
   .j-avatar {
     display: inline-block;
     vertical-align: middle;
-    width: var(--avatar-size);
-    height: var(--avatar-size);
     overflow: hidden;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
+    -o-object-fit: cover;
     object-fit: cover;
-    box-shadow: var(--avatar-box-shadow);
-    border: var(--avatar-border);
-    border-radius: var(--avatar-border-radius);
-    background: var(--avatar-bg);
-    color: var(--avatar-fg);
-    font-size: var(--avatar-font-size);
-    font-weight: var(--avatar-font-weight);
-  }
-
-  .j-avatar img {
-    border-radius: var(--avatar-border-radius);
   }
 
   .j-avatar img,

package/src/css/badge.css

@@ -3,16 +3,9 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    padding: var(--badge-padding);
-    min-width: var(--badge-min-width);
-    height: var(--badge-height);
-    line-height: var(--badge-line-height);
-    font-size: var(--badge-font-size);
-    font-weight: var(--badge-font-weight);
-    border-radius: var(--badge-radius);
-    border: 1px solid var(--badge-border-color);
-    color: var(--badge-fg);
-    background-color: var(--badge-bg);
-    box-shadow: var(--badge-box-shadow);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
   }
 }

package/src/css/breadcrumb.css

@@ -1,16 +1,12 @@
 @layer components {
   .j-breadcrumb {
-    font-size: var(--breadcrumb-font-size);
-    color: var(--breadcrumb-fg);
     white-space: nowrap;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
   }
 
-  .j-breadcrumb svg {
-    width: var(--breadcrumb-icon-size);
-    height: var(--breadcrumb-icon-size);
-  }
-
   .j-breadcrumb > ol,
   .j-breadcrumb > ul {
     display: flex;
@@ -29,11 +25,11 @@
   }
 
   .j-breadcrumb li:first-child a {
+    -webkit-padding-start: 0;
     padding-inline-start: 0;
   }
 
   .j-breadcrumb li + li::before {
-    color: var(--breadcrumb-divider-fg);
     content: '/';
   }
 
@@ -53,9 +49,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: var(--space);
-    color: var(--breadcrumb-link-fg);
-    padding: var(--breadcrumb-item-padding);
     text-decoration: none;
   }
 

package/src/css/button.css

@@ -4,22 +4,14 @@
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
-    gap: var(--btn-gap);
     position: relative;
     white-space: nowrap;
-    /* font-weight: var(--btn-font-weight); */
-    font-size: var(--btn-font-size);
-    height: var(--btn-height);
-    line-height: var(--btn-line-height);
-    color: var(--btn-fg);
-    background-color: var(--btn-bg);
-    padding: var(--btn-padding);
-    border-width: var(--btn-border-width);
-    border-style: var(--btn-border-style);
-    border-color: var(--btn-border-color);
-    border-radius: var(--btn-border-radius);
-    box-shadow: var(--btn-box-shadow);
+    -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;
   }
@@ -30,7 +22,7 @@
   }
 
   .j-button svg {
-    width: var(--btn-svg-size);
+    width: var(--btn-font-size);
     fill: currentColor;
   }
 
@@ -39,57 +31,7 @@
     color: inherit;
   }
 
-  /* group */
   .j-button-group {
     display: flex;
-    margin: 0;
-    box-shadow: var(--btn-group-box-shadow);
-  }
-
-  .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: var(--btn-border-width);
-    border-bottom-width: var(--btn-border-width);
-    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: var(--btn-border-width);
-    border-right-width: var(--btn-border-width);
-    border-top-width: 0;
-    border-bottom-width: 0;
-  }
-
-  .j-button-group.is-vertical .j-button:first-child {
-    border-top-right-radius: var(--radius-md);
-  }
-
-  .j-button-group.is-vertical .j-button:last-child {
-    border-bottom-left-radius: var(--radius-md);
   }
 }