vanilla-jui 1.5.2 → 1.5.4

package/src/css/gradient.css

@@ -1,5 +1,4 @@
 @layer gradient {
-
   :root,
   .light,
   .dark {
@@ -21,131 +20,197 @@
 
   .bg-gradient-auto {
     background:
-      radial-gradient(circle at 16% 16%,
+      radial-gradient(
+        circle at 16% 16%,
         color-mix(in srgb, var(--tone-solid) 30%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 84% 0%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 84% 0%,
         color-mix(in srgb, var(--tone-tint) 24%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 78%, var(--ui-surface-raised)),
-        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle)));
+        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle))
+      );
   }
 
   .bg-gradient-sunrise {
     background:
-      radial-gradient(circle at 16% 16%,
+      radial-gradient(
+        circle at 16% 16%,
         color-mix(in srgb, var(--tone-solid) 30%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 84% 0%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 84% 0%,
         color-mix(in srgb, var(--state-warning) 24%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 78%, var(--ui-surface-raised)),
-        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle)));
+        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--tone-subtle))
+      );
   }
 
   .bg-gradient-aurora {
     background:
-      radial-gradient(circle at 12% 12%,
+      radial-gradient(
+        circle at 12% 12%,
         color-mix(in srgb, var(--state-info) 24%, transparent),
-        transparent 32%),
-      radial-gradient(circle at 84% 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at 84% 18%,
         color-mix(in srgb, var(--state-success) 20%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 82%, var(--state-info-subtle)),
-        color-mix(in srgb,
+        color-mix(
+          in srgb,
           var(--ui-surface-raised) 84%,
-          var(--state-success-subtle)));
+          var(--state-success-subtle)
+        )
+      );
   }
 
   .bg-gradient-ocean {
     background:
-      radial-gradient(circle at 22% 12%,
+      radial-gradient(
+        circle at 22% 12%,
         color-mix(in srgb, var(--state-info) 28%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 78% 0%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 78% 0%,
         color-mix(in srgb, var(--ui-blue) 22%, transparent),
-        transparent 28%),
-      linear-gradient(135deg,
+        transparent 28%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 76%, var(--ui-blue-tint)),
-        color-mix(in srgb,
+        color-mix(
+          in srgb,
           var(--ui-surface-raised) 84%,
-          var(--ui-teal-subtle, var(--state-info-subtle))));
+          var(--ui-teal-subtle, var(--state-info-subtle))
+        )
+      );
   }
 
   .bg-gradient-meadow {
     background:
-      radial-gradient(circle at 18% 16%,
+      radial-gradient(
+        circle at 18% 16%,
         color-mix(in srgb, var(--state-success) 28%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 82% 14%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 82% 14%,
         color-mix(in srgb, var(--ui-mint) 24%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 80%, var(--state-success-subtle)),
-        color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-mint-tint)));
+        color-mix(in srgb, var(--ui-surface-raised) 84%, var(--ui-mint-tint))
+      );
   }
 
   .bg-gradient-ember {
     background:
-      radial-gradient(circle at 18% 10%,
+      radial-gradient(
+        circle at 18% 10%,
         color-mix(in srgb, var(--state-warning) 30%, transparent),
-        transparent 32%),
-      radial-gradient(circle at 84% 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at 84% 18%,
         color-mix(in srgb, var(--state-danger) 22%, transparent),
-        transparent 28%),
-      linear-gradient(135deg,
+        transparent 28%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 80%, var(--state-warning-subtle)),
-        color-mix(in srgb,
+        color-mix(
+          in srgb,
           var(--ui-surface-raised) 84%,
-          var(--state-danger-subtle)));
+          var(--state-danger-subtle)
+        )
+      );
   }
 
   .bg-gradient-dusk {
     background:
-      radial-gradient(circle at 18% 16%,
+      radial-gradient(
+        circle at 18% 16%,
         color-mix(in srgb, var(--tone-solid) 28%, transparent),
-        transparent 33%),
-      radial-gradient(circle at 82% 14%,
+        transparent 33%
+      ),
+      radial-gradient(
+        circle at 82% 14%,
         color-mix(in srgb, var(--ui-violet) 22%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 78%, var(--tone-wash)),
-        color-mix(in srgb,
+        color-mix(
+          in srgb,
           var(--ui-surface-raised) 86%,
-          var(--ui-violet-subtle, var(--tone-subtle))));
+          var(--ui-violet-subtle, var(--tone-subtle))
+        )
+      );
   }
 
   .bg-gradient-gold {
     background:
-      radial-gradient(circle at 20% 16%,
+      radial-gradient(
+        circle at 20% 16%,
         color-mix(in srgb, var(--ui-gold) 24%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 80% 10%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 80% 10%,
         color-mix(in srgb, var(--state-warning) 18%, transparent),
-        transparent 28%),
-      linear-gradient(135deg,
-        color-mix(in srgb,
+        transparent 28%
+      ),
+      linear-gradient(
+        135deg,
+        color-mix(
+          in srgb,
           var(--ui-bg) 80%,
-          var(--ui-gold-surface, var(--state-warning-subtle))),
-        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-gold-tint)));
+          var(--ui-gold-surface, var(--state-warning-subtle))
+        ),
+        color-mix(in srgb, var(--ui-surface-raised) 86%, var(--ui-gold-tint))
+      );
   }
 
   .bg-gradient-forest {
     background:
-      radial-gradient(circle at 16% 16%,
+      radial-gradient(
+        circle at 16% 16%,
         color-mix(in srgb, var(--ui-olive) 24%, transparent),
-        transparent 34%),
-      radial-gradient(circle at 84% 14%,
+        transparent 34%
+      ),
+      radial-gradient(
+        circle at 84% 14%,
         color-mix(in srgb, var(--state-success) 18%, transparent),
-        transparent 30%),
-      linear-gradient(135deg,
+        transparent 30%
+      ),
+      linear-gradient(
+        135deg,
         color-mix(in srgb, var(--ui-bg) 80%, var(--ui-olive-tint)),
-        color-mix(in srgb,
+        color-mix(
+          in srgb,
           var(--ui-surface-raised) 86%,
-          var(--state-success-subtle)));
+          var(--state-success-subtle)
+        )
+      );
   }
 
   .gradient-grid {
@@ -231,4 +296,4 @@
     font-size: 0.76rem;
     font-weight: 700;
   }
-}
+}

package/src/css/layout.css

@@ -102,9 +102,11 @@
       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;
-    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;
     user-select: none;
   }
@@ -119,9 +121,11 @@
   .placeholder-image {
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg,
-        var(--ui-bg-muted) 0%,
-        var(--ui-surface-subtle) 100%);
+    background: linear-gradient(
+      135deg,
+      var(--ui-bg-muted) 0%,
+      var(--ui-surface-subtle) 100%
+    );
     display: flex;
     align-items: center;
     justify-content: center;
@@ -768,4 +772,4 @@
   .w-screen {
     width: 100vw;
   }
-}
+}

package/src/css/menu.css

@@ -587,7 +587,7 @@
   }
 
   /* drop menu  */
-  .drop-menu {
+  .drop-menu .drop-container {
     min-width: 100px;
     max-width: 200px;
     padding: var(--s2);
@@ -613,8 +613,9 @@
     padding: var(--space) var(--s2);
     text-decoration: none;
     color: var(--ui-fg-muted);
-    border-radius: var(--radius-md);
     user-select: none;
+    border-radius: var(--radius-sm);
+    transition: none;
   }
 
   .drop-menu .menu-item a .menu-text {
@@ -633,7 +634,7 @@
   }
 
   .drop-menu .menu-item.menu-heading {
-    padding: var(--space) var(--s2);
+    padding: 2px var(--s2);
     color: var(--ui-fg-soft);
     font-size: var(--font-size-sm);
   }

package/src/css/swiper.css

@@ -143,4 +143,4 @@
     cursor: default;
     opacity: 0.36;
   }
-}
+}

package/src/css/tabs.css

@@ -62,4 +62,4 @@
   .j-tabs .panel-list .panel-item[aria-hidden='false'] {
     display: block;
   }
-}
+}

package/src/css/themes/default/drop.css

@@ -3,7 +3,7 @@
     --drop-border-width: 1px;
     --drop-border-style: solid;
     --drop-border-color: var(--ui-border);
-    --drop-border-radius: var(--radius-md);
+    --drop-border-radius: var(--radius-sm);
     --drop-fg: var(--ui-fg);
     --drop-bg: var(--ui-bg);
     --drop-box-shadow: var(--shadow-sm);

package/src/css/themes/default/swiper.css

@@ -32,4 +32,4 @@
       --swiper-navigation-size: 32px;
     }
   }
-}
+}

package/src/css/themes/default/tabs.css

@@ -32,4 +32,4 @@
   .j-tabs .tab-list .tab-item[aria-disabled='true'] {
     --tab-fg: var(--ui-border-strong);
   }
-}
+}

package/src/css/tokens.css

@@ -1275,4 +1275,4 @@
     --el-height-2xl: 3rem;
     --el-height-3xl: 3.25rem;
   }
-}
+}

package/src/css/tooltip.css

@@ -18,4 +18,4 @@
     line-height: var(--tooltip-line-height);
     position: relative;
   }
-}
+}

package/src/index.ts

@@ -11,7 +11,6 @@ export * from './core/motion.ts';
 export * from './utilities/object.ts';
 export * from './utilities/timer.ts';
 export * from './utilities/types.ts';
-export * from './utilities/function.ts';
 export * from './core/scheduler.ts';
 export * from './utilities/state.ts';
 export * from './utilities/refs.ts';

package/src/utilities/object.ts

@@ -1,5 +1,18 @@
-import _isPlainObject from 'lodash-es/isPlainObject.js';
+const objectTag = '[object Object]';
+const objectCtorString = Function.prototype.toString.call(Object);
 
-export function isPlainObject(obj: unknown): boolean {
-  return _isPlainObject(obj);
+export function isPlainObject(value: unknown): boolean {
+  if (value === null || typeof value !== 'object') return false;
+  if (Object.prototype.toString.call(value) !== objectTag) return false;
+
+  const proto = Object.getPrototypeOf(value);
+  if (proto === null) return true;
+
+  const ctor =
+    Object.prototype.hasOwnProperty.call(proto, 'constructor') &&
+    proto.constructor;
+  return (
+    typeof ctor === 'function' &&
+    Function.prototype.toString.call(ctor) === objectCtorString
+  );
 }

package/src/utilities/function.ts

@@ -1,4 +0,0 @@
-export { default as debounce } from 'lodash-es/debounce.js';
-export { default as throttle } from 'lodash-es/throttle.js';
-export type { DebouncedFunc, DebounceSettings } from 'lodash-es/debounce.js';
-export type { ThrottleSettings } from 'lodash-es/throttle.js';