vanilla-jui 1.7.32 → 1.7.34

package/package.json

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

package/src/css/themes/default/button.css

@@ -162,8 +162,6 @@
   }
 
   .j-btn:not(:disabled):active {
-    /* opacity: var(--opacity-active); */
-    /* transform: scale(0.95); */
     transform: translateY(1px);
   }
 
@@ -171,29 +169,21 @@
     --btn-border-color: var(--tone-solid);
   }
 
-  /* .j-btn:not(:disabled):focus-within, */
   .j-btn:not(:disabled):focus-visible {
     --btn-border-color: var(--tone-solid);
     --btn-box-shadow: 0 0 0 3px var(--tone-ring);
   }
 
   .j-btn.is-reverse:not(:disabled).is-active,
-  /* .j-btn.is-reverse:not(:disabled):focus-within, */
   .j-btn.is-reverse:not(:disabled):focus-visible {
     --btn-border-color: transparent;
     --btn-box-shadow: 0 0 0 3px var(--tone-card-active);
   }
 
-  /* .j-btn.is-ghost:not(:disabled):focus-within {
-    --btn-border-color: transparent;
-    --btn-box-shadow: none;
-  } */
-
   .j-btn.is-info:not(:disabled).is-active {
     --btn-border-color: var(--state-info-muted);
   }
 
-  /* .j-btn.is-info:not(:disabled):focus-within, */
   .j-btn.is-info:not(:disabled):focus-visible {
     --btn-border-color: var(--state-info);
     --btn-box-shadow: 0 0 0 3px var(--state-info-ring);
@@ -203,7 +193,6 @@
     --btn-border-color: var(--state-success-muted);
   }
 
-  /* .j-btn.is-success:not(:disabled):focus-within, */
   .j-btn.is-success:not(:disabled):focus-visible {
     --btn-border-color: var(--state-success);
     --btn-box-shadow: 0 0 0 3px var(--state-success-ring);
@@ -213,7 +202,6 @@
     --btn-border-color: var(--state-warning-muted);
   }
 
-  /* .j-btn.is-warning:not(:disabled):focus-within, */
   .j-btn.is-warning:not(:disabled):focus-visible {
     --btn-border-color: var(--state-warning);
     --btn-box-shadow: 0 0 0 3px var(--state-warning-ring);
@@ -223,18 +211,11 @@
     --btn-border-color: var(--state-error-muted);
   }
 
-  /* .j-btn.is-error:not(:disabled):focus-within, */
   .j-btn.is-error:not(:disabled):focus-visible {
     --btn-border-color: var(--state-error);
     --btn-box-shadow: 0 0 0 3px var(--state-error-ring);
   }
 
-  .j-btn.is-default:hover:not(:disabled),
-  .j-btn.is-outline:hover:not(:disabled),
-  .j-btn.is-ghost:hover:not(:disabled) {
-    --btn-bg: var(--ui-bg-subtle);
-  }
-
   .j-btn.is-text:not(:disabled).is-active,
   .j-btn.is-text:not(:disabled):active,
   .j-btn.is-text:not(:disabled):focus-visible {

package/src/css/themes/default/tip.css

@@ -1,6 +1,7 @@
 @layer components {
   .j-tip {
     --tip-border-color: var(--ui-border-subtle);
+    --tip-bg: var(--ui-bg);
     --tip-icon-shadow: var(--ui-bg-soft);
     --tip-icon-bg: var(--ui-bg-soft);
 
@@ -61,7 +62,7 @@
 
   .j-tip .tip-content {
     grid-column-start: 2;
-    color: var(--ui-gray);
+    color: var(--tone-body);
   }
 
   .j-tip .tip-content p {

package/src/css/themes/default/toast.css

@@ -2,7 +2,7 @@
   .j-toast-container {
     top: 16px;
     right: 16px;
-    gap: var(--s2);
+    gap: 8px;
 
     position: fixed;
     z-index: var(--z-toast);
@@ -15,7 +15,7 @@
   }
 
   body:has(#wpadminbar) .j-toast-container {
-    top: 32px;
+    top: 40px;
   }
 
   .j-toast {
@@ -107,7 +107,7 @@
     color: var(--ui-bg);
     background: var(--ui-fg);
     border-radius: var(--radius-md);
-    padding: var(--s2) 12px;
+    padding: 8px 12px;
     max-width: 288px;
     z-index: var(--z-toast);
 
@@ -123,7 +123,7 @@
   }
 
   .j-toast.is-confirm {
-    gap: var(--s2);
+    gap: 8px;
     min-width: 280px;
     padding: 1rem;
 

package/src/primitives/toast.ts

@@ -523,7 +523,7 @@ function confirm(message = '', props: ConfirmToastOptions = {}): HTMLElement {
   const closeText = props.text?.close || translate('Close');
   const confirmText = props.text?.confirm || translate('Confirm');
   validateParam('once', once, 'boolean', 'Toast.confirm');
-  const duration = props.duration ?? 3000;
+  const duration = props.duration ?? 0;
   const theme = props.theme ?? '';
   validateParam('duration', duration, TOAST_DURATION_RULE, 'Toast.confirm');
   validateParam('theme', theme, TOAST_THEME_RULE, 'Toast.confirm');