vanilla-jui 1.5.34 → 1.5.36

package/src/css/loading.css

@@ -3,7 +3,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    position: var(--loader-position);
+    position: absolute;
     width: 100%;
     height: 100%;
   }
@@ -17,6 +17,7 @@
     border-color: var(--loader-fg);
     border-right-color: transparent;
     border-radius: 50%;
+    -webkit-animation: var(--loader-speed) linear infinite animate-spin;
     animation: var(--loader-speed) linear infinite animate-spin;
   }
 
@@ -25,17 +26,179 @@
     aspect-ratio: 1;
     border-radius: 50%;
     border: 1.5px solid var(--loader-fg);
+    -webkit-animation:
+      polygon-loader-1 0.8s infinite linear alternate,
+      polygon-loader-2 1.6s infinite linear;
     animation:
       polygon-loader-1 0.8s infinite linear alternate,
       polygon-loader-2 1.6s infinite linear;
   }
 
+  @-webkit-keyframes polygon-loader-1 {
+    0% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        50% 0%,
+        50% 0%,
+        50% 0%,
+        50% 0%
+      );
+      clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+    }
+
+    12.5% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%
+      );
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%
+      );
+    }
+
+    25% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        100% 100%,
+        100% 100%
+      );
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        100% 100%,
+        100% 100%
+      );
+    }
+
+    50% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
+      clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
+    }
+
+    62.5% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        100% 0,
+        100% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
+      clip-path: polygon(
+        50% 50%,
+        100% 0,
+        100% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
+    }
+
+    75% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
+      clip-path: polygon(
+        50% 50%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
+    }
+
+    100% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        0% 100%
+      );
+      clip-path: polygon(
+        50% 50%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        0% 100%
+      );
+    }
+  }
+
   @keyframes polygon-loader-1 {
     0% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        50% 0%,
+        50% 0%,
+        50% 0%,
+        50% 0%
+      );
       clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
     }
 
     12.5% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%,
+        100% 0%
+      );
       clip-path: polygon(
         50% 50%,
         0 0,
@@ -48,6 +211,15 @@
     }
 
     25% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        100% 100%,
+        100% 100%
+      );
       clip-path: polygon(
         50% 50%,
         0 0,
@@ -60,6 +232,15 @@
     }
 
     50% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        0 0,
+        50% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
       clip-path: polygon(
         50% 50%,
         0 0,
@@ -72,6 +253,15 @@
     }
 
     62.5% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        100% 0,
+        100% 0%,
+        100% 0%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
       clip-path: polygon(
         50% 50%,
         100% 0,
@@ -84,6 +274,15 @@
     }
 
     75% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        100% 100%,
+        50% 100%,
+        0% 100%
+      );
       clip-path: polygon(
         50% 50%,
         100% 100%,
@@ -96,6 +295,15 @@
     }
 
     100% {
+      -webkit-clip-path: polygon(
+        50% 50%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        50% 100%,
+        0% 100%
+      );
       clip-path: polygon(
         50% 50%,
         50% 100%,
@@ -108,6 +316,24 @@
     }
   }
 
+  @-webkit-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);
+    }
+  }
+
   @keyframes polygon-loader-2 {
     0% {
       transform: scaleY(1) rotate(0deg);
@@ -134,6 +360,7 @@
     border-color: var(--loader-fg);
     border-top-color: var(--loader-top-fg);
     border-radius: 50%;
+    -webkit-animation: 1s linear infinite animate-spin;
     animation: 1s linear infinite animate-spin;
   }
 
@@ -144,7 +371,9 @@
     border-radius: 50%;
     aspect-ratio: 1;
     background: var(--loader-bg);
+    -webkit-mask: var(--loader-mask);
     mask: var(--loader-mask);
+    -webkit-animation: 1s linear infinite animate-spin;
     animation: 1s linear infinite animate-spin;
   }
 }

package/src/css/menu.css

@@ -8,6 +8,9 @@
     scroll-behavior: smooth;
     -ms-overflow-style: none;
     scrollbar-width: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
   }
 
@@ -39,7 +42,9 @@
     line-height: var(--menu-item-line-height);
     font-weight: var(--menu-font-weight);
     text-decoration: underline;
+    -webkit-text-decoration-style: wavy;
     text-decoration-style: wavy;
+    -webkit-text-decoration-color: var(--state-danger);
     text-decoration-color: var(--state-danger);
     text-underline-offset: 4px;
     padding: 4px 1rem;
@@ -52,22 +57,25 @@
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
-    gap: var(--menu-link-gap);
     white-space: nowrap;
     cursor: pointer;
+    -webkit-appearance: button;
+    -moz-appearance: button;
     appearance: button;
     touch-action: manipulation;
+    text-decoration: none;
+
+    gap: var(--menu-link-gap);
     color: currentColor;
     background-color: inherit;
-    font-weight: var(--menu-link-font-weight);
-    text-decoration: none;
+    font-weight: var(--font-medium);
 
     padding: var(--menu-item-padding);
     height: var(--menu-item-height);
     line-height: var(--menu-item-line-height);
     border-width: var(--menu-item-border-width);
-    border-style: var(--menu-item-border-style);
-    border-color: var(--menu-item-border-color);
+    border-style: solid;
+    border-color: var(--ui-border);
     border-radius: var(--menu-item-border-radius);
   }
 
@@ -614,6 +622,9 @@
     padding: var(--space) var(--s2);
     text-decoration: none;
     color: var(--ui-fg-muted);
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     border-radius: var(--radius-sm);
     transition: none;

package/src/css/modal.css

@@ -1,15 +1,5 @@
 @layer components {
   .j-modal {
-    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;
     display: flex;
     flex-direction: column;
@@ -31,36 +21,17 @@
     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: var(--modal-title-font-weight);
   }
 
   .j-modal .modal-body {
-    padding: var(--modal-body-padding);
     overflow-y: auto;
     overflow-wrap: break-word;
     flex: 1;
     position: relative;
-    min-height: 32px;
-  }
-
-  .j-modal .modal-body p {
-    margin: 0;
-    line-height: var(--modal-body-line-height);
   }
 
   .j-modal .modal-footer {
     display: flex;
     justify-content: flex-end;
-    gap: var(--modal-footer-gap);
-    padding: var(--modal-footer-padding);
-    border-top: var(--modal-footer-top-border);
   }
 }

package/src/css/offcanvas.css

@@ -6,47 +6,12 @@
     width: 100%;
     height: 100%;
     pointer-events: auto;
-    background: var(--offcanvas-overlay-bg);
     z-index: var(--z-overlay);
   }
 
   .j-offcanvas {
     position: fixed;
     z-index: var(--z-offcanvas);
-    background: var(--offcanvas-bg);
-    box-shadow: var(--offcanvas-box-shadow);
-  }
-
-  .j-offcanvas[data-direction='left'] {
-    top: 0;
-    left: 0;
-    width: var(--offcanvas-block-width);
-    height: 100vh;
-    border-right: var(--offcanvas-border);
-  }
-
-  .j-offcanvas[data-direction='right'] {
-    top: 0;
-    right: 0;
-    width: var(--offcanvas-block-width);
-    height: 100vh;
-    border-left: var(--offcanvas-border);
-  }
-
-  .j-offcanvas[data-direction='top'] {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: var(--offcanvas-inline-height);
-    border-bottom: var(--offcanvas-border);
-  }
-
-  .j-offcanvas[data-direction='bottom'] {
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: var(--offcanvas-inline-height);
-    border-top: var(--offcanvas-border);
   }
 
   .j-offcanvas .offcanvas-content {

package/src/css/pagination.css

@@ -1,19 +1,9 @@
 @layer components {
-  .j-pagination {
-    font-size: var(--pagination-font-size);
-  }
-
-  .j-pagination a {
-    text-decoration: var(--pagination-link-decoration);
-    color: var(--pagination-link-fg);
-  }
-
   .j-pagination .pagination {
     list-style: none;
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: var(--pagination-gap);
     margin: 0;
     padding: 0;
   }

package/src/css/popup.css

@@ -6,9 +6,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--popup-bg);
-    backdrop-filter: var(--popup-backdrop-filter);
-    padding: var(--popup-layout-padding);
     z-index: var(--z-popup);
   }
 

package/src/css/skeleton.css

@@ -1,19 +1,23 @@
 @layer components {
   .j-skeleton {
-    --skeleton-background: var(--ui-surface-muted);
-    --skeleton-radius: var(--radius-sm, 4px);
-    --skeleton-duration: 1.5s;
-
     display: block;
     width: 100%;
     min-height: var(--el-height-2xs);
-    border-radius: var(--skeleton-radius);
-    background: var(--skeleton-background);
+    border-radius: var(--radius-sm);
+    background: var(--ui-surface-muted);
     color: transparent;
     pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
-    animation: animate-pulse var(--skeleton-duration)
-      cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    -webkit-animation: animate-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    animation: animate-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .j-skeleton::-moz-selection {
+    color: transparent;
+    background: transparent;
   }
 
   .j-skeleton::selection {
@@ -66,11 +70,13 @@
 
   .j-skeleton.skeleton-static,
   .j-skeleton[aria-busy='false'] {
+    -webkit-animation: none;
     animation: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
     .j-skeleton {
+      -webkit-animation: none;
       animation: none;
     }
   }

package/src/css/status.css

@@ -6,6 +6,7 @@
  * - data-action
  * - shape status
  * - drag status
+ * - hidden
  */
 @layer status {
   /* sad mode */
@@ -44,11 +45,15 @@
   }
 
   /* disabled */
-  [disabled],
   :disabled,
   .is-disabled,
   [aria-disabled='true'] {
     cursor: not-allowed;
     user-select: none;
   }
+
+  [hidden],
+  [aria-hidden='true'] {
+    display: none;
+  }
 }

package/src/css/swiper.css

@@ -4,6 +4,9 @@
     display: block;
     overflow: hidden;
     touch-action: pan-y;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     width: 100%;
     min-height: var(--swiper-min-height);
@@ -26,6 +29,9 @@
     overflow: hidden;
     color: inherit;
     text-decoration: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     width: 100%;
     min-width: 100%;
@@ -45,23 +51,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-
-    color: var(--ui-fg-soft);
-    font-size: var(--font-size-md);
     letter-spacing: 1px;
-
-    background-color: var(--tone-wash);
-    background-image: radial-gradient(
-      circle,
-      var(--ui-border) 1px,
-      transparent 1px
-    );
-    background-size: 20px 20px;
   }
 
   .j-swiper .swiper-image {
     position: relative;
     display: block;
+    -o-object-fit: cover;
     object-fit: cover;
     pointer-events: none;
     width: 100%;
@@ -74,16 +70,6 @@
   .j-swiper .swiper-slide-title {
     display: block;
     position: absolute;
-    right: var(--swiper-title-inset);
-    bottom: var(--swiper-title-inset);
-    left: var(--swiper-title-inset);
-    padding: var(--swiper-title-padding);
-    color: var(--swiper-title-color);
-    font-size: var(--swiper-title-font-size);
-    font-weight: var(--swiper-title-font-weight);
-    background: var(--swiper-title-bg);
-    border-radius: var(--swiper-title-border-radius);
-    line-height: var(--swiper-title-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
     z-index: 1;
@@ -93,43 +79,16 @@
   .j-swiper .swiper-pagination {
     position: absolute;
     display: flex;
-    gap: var(--swiper-pagination-gap);
     align-items: center;
     justify-content: center;
     z-index: 2;
   }
 
-  .j-swiper .swiper-pagination.is-horizontal {
-    right: var(--swiper-pagination-inline);
-    bottom: var(--swiper-pagination-block);
-    left: var(--swiper-pagination-inline);
-  }
-
   .j-swiper .swiper-pagination-indicator {
     display: inline-block;
-    width: var(--swiper-indicator-size);
-    height: var(--swiper-indicator-size);
-    padding: 0;
     cursor: pointer;
-    background: var(--swiper-indicator-bg);
-    border: 0;
     border-radius: 999px;
     outline: none;
-    transition:
-      width var(--duration-fast, 160ms) ease,
-      background-color var(--duration-fast, 160ms) ease,
-      opacity var(--duration-fast, 160ms) ease;
-  }
-
-  .j-swiper .swiper-pagination-indicator:hover,
-  .j-swiper .swiper-pagination-indicator:focus-visible {
-    background: var(--swiper-indicator-hover-bg);
-  }
-
-  .j-swiper .swiper-pagination-indicator.is-active,
-  .j-swiper .swiper-pagination-indicator.active {
-    width: var(--swiper-indicator-active-width);
-    background: var(--swiper-indicator-active-bg);
   }
 
   .j-swiper .swiper-navigation {
@@ -139,37 +98,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--swiper-navigation-size);
-    height: var(--swiper-navigation-size);
-    padding: 0;
-    color: var(--swiper-navigation-fg);
     cursor: pointer;
-    background: var(--swiper-navigation-bg);
-    border: 0;
     border-radius: 999px;
-    transform: translateY(-50%);
-    transition:
-      background-color var(--duration-fast, 160ms) ease,
-      opacity var(--duration-fast, 160ms) ease;
-  }
-
-  .j-swiper .swiper-navigation:hover,
-  .j-swiper .swiper-navigation:focus-visible {
-    background: var(--swiper-navigation-hover-bg);
-    outline: none;
-  }
-
-  .j-swiper .swiper-navigation.is-prev {
-    left: var(--swiper-navigation-offset);
-  }
-
-  .j-swiper .swiper-navigation.is-next {
-    right: var(--swiper-navigation-offset);
   }
 
   .j-swiper .swiper-navigation svg {
-    width: var(--swiper-navigation-icon-size);
-    height: var(--swiper-navigation-icon-size);
     pointer-events: none;
   }