vanilla-jui 1.7.26 → 1.7.28

package/package.json

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

package/src/components/form.ts

@@ -921,8 +921,7 @@ export function createForm(input: FormProps = {}): Form {
         'data-field-label': () => fieldAccessor().name || id,
         children: () => asRenderable(fieldAccessor().label),
       };
-      // if (isGroupedControl()) return jsx('legend', labelProps) as HTMLElement;
-      if (isGroupedControl()) return jsx('label', labelProps) as HTMLElement;
+      if (isGroupedControl()) return jsx('legend', labelProps) as HTMLElement;
       return jsx('label', { ...labelProps, for: id }) as HTMLElement;
     };
     const controlContainer = (): HTMLElement =>

package/src/css/gradient.css

@@ -1,4 +1,5 @@
 @layer gradient {
+
   .bg-gradient-sunrise,
   .bg-gradient-aurora,
   .bg-gradient-ocean,
@@ -13,196 +14,130 @@
 
   .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%,
-        color-mix(in srgb, var(--state-danger) 22%, transparent),
-        transparent 28%
-      ),
-      linear-gradient(
-        135deg,
+        transparent 32%),
+      radial-gradient(circle at 84% 18%,
+        color-mix(in srgb, var(--state-error) 22%, transparent),
+        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-error-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)));
   }
-}
+}

package/src/css/themes/default/badge.css

@@ -66,7 +66,7 @@
     --badge-border-color: var(--tone-wash);
   }
 
-  .j-badge.is-primary {
+  .j-badge.is-info {
     --badge-fg: var(--state-info-text);
     --badge-bg: var(--state-info-soft);
     --badge-border-color: var(--state-info-border);
@@ -84,15 +84,9 @@
     --badge-border-color: var(--state-warning-border);
   }
 
-  .j-badge.is-danger {
-    --badge-fg: var(--state-danger-text);
-    --badge-bg: var(--state-danger-subtle);
-    --badge-border-color: var(--state-danger-subtle);
-  }
-
   .j-badge.is-error {
-    --badge-fg: var(--state-danger-fg);
-    --badge-bg: var(--state-danger);
-    --badge-border-color: var(--state-danger);
+    --badge-fg: var(--state-error-text);
+    --badge-bg: var(--state-error-subtle);
+    --badge-border-color: var(--state-error-subtle);
   }
-}
+}

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

@@ -125,7 +125,7 @@
     --btn-padding: var(--icon-padding, 0);
   }
 
-  .j-button.is-primary {
+  .j-button.is-info {
     --btn-bg: var(--state-info-soft);
     --btn-fg: var(--state-info-text);
   }
@@ -135,9 +135,9 @@
     --btn-fg: var(--state-success-text);
   }
 
-  .j-button.is-danger {
-    --btn-bg: var(--state-danger-soft);
-    --btn-fg: var(--state-danger-text);
+  .j-button.is-error {
+    --btn-bg: var(--state-error-soft);
+    --btn-fg: var(--state-error-text);
   }
 
   .j-button.is-warning {
@@ -145,11 +145,6 @@
     --btn-fg: var(--state-warning-text);
   }
 
-  .j-button.is-error {
-    --btn-bg: var(--state-danger);
-    --btn-fg: var(--state-danger-fg);
-  }
-
   .j-button[class*='ui-surface-'] {
     --btn-border-color: var(--ui-border);
     --btn-fg: var(--ui-fg);
@@ -203,7 +198,14 @@
   .j-button:not(:disabled):focus-within,
   .j-button:not(:disabled):focus-visible {
     --btn-border-color: var(--tone-solid);
-    --btn-box-shadow: 0 0 0 4px var(--tone-ring);
+    --btn-box-shadow: 0 0 0 3px var(--tone-ring);
+  }
+
+  .j-button.is-default:not(:disabled):focus,
+  .j-button.is-default:not(:disabled):focus-within,
+  .j-button.is-default:not(:disabled):focus-visible {
+    --btn-border-color: var(--ui-fg-muted);
+    --btn-box-shadow: 0 0 0 3px var(--tone-card-active);
   }
 
   .j-button.is-reverse:not(:disabled).is-active,
@@ -211,7 +213,7 @@
   .j-button.is-reverse:not(:disabled):focus-within,
   .j-button.is-reverse:not(:disabled):focus-visible {
     --btn-border-color: transparent;
-    --btn-box-shadow: 0 0 0 4px var(--tone-card-active);
+    --btn-box-shadow: 0 0 0 3px var(--tone-card-active);
   }
 
   .j-button.is-solid:not(:disabled).is-active,
@@ -221,12 +223,12 @@
     --btn-border-color: transparent;
   }
 
-  .j-button.is-primary:not(:disabled).is-active,
-  .j-button.is-primary:not(:disabled):focus,
-  .j-button.is-primary:not(:disabled):focus-within,
-  .j-button.is-primary:not(:disabled):focus-visible {
+  .j-button.is-info:not(:disabled).is-active,
+  .j-button.is-info:not(:disabled):focus,
+  .j-button.is-info:not(:disabled):focus-within,
+  .j-button.is-info:not(:disabled):focus-visible {
     --btn-border-color: var(--state-info);
-    --btn-box-shadow: 0 0 0 4px var(--state-info-ring);
+    --btn-box-shadow: 0 0 0 3px var(--state-info-ring);
   }
 
   .j-button.is-success:not(:disabled).is-active,
@@ -234,7 +236,7 @@
   .j-button.is-success:not(:disabled):focus-within,
   .j-button.is-success:not(:disabled):focus-visible {
     --btn-border-color: var(--state-success);
-    --btn-box-shadow: 0 0 0 4px var(--state-success-ring);
+    --btn-box-shadow: 0 0 0 3px var(--state-success-ring);
   }
 
   .j-button.is-warning:not(:disabled).is-active,
@@ -242,24 +244,15 @@
   .j-button.is-warning:not(:disabled):focus-within,
   .j-button.is-warning:not(:disabled):focus-visible {
     --btn-border-color: var(--state-warning);
-    --btn-box-shadow: 0 0 0 4px var(--state-warning-ring);
-  }
-
-  .j-button.is-danger:not(:disabled).is-active,
-  .j-button.is-danger:not(:disabled):focus,
-  .j-button.is-danger:not(:disabled):focus-within,
-  .j-button.is-danger:not(:disabled):focus-visible {
-    --btn-border-color: var(--state-danger);
-    --btn-box-shadow: 0 0 0 4px var(--state-danger-muted);
+    --btn-box-shadow: 0 0 0 3px var(--state-warning-ring);
   }
 
   .j-button.is-error:not(:disabled).is-active,
   .j-button.is-error:not(:disabled):focus,
   .j-button.is-error:not(:disabled):focus-within,
   .j-button.is-error:not(:disabled):focus-visible {
-    --btn-border-color: transparent;
-    --btn-box-shadow:
-      0 0 0 1px currentColor, 0 0 0 4px var(--state-danger-ring);
+    --btn-border-color: var(--state-error);
+    --btn-box-shadow: 0 0 0 3px var(--state-error-muted);
   }
 
   .j-button.is-default:hover:not(:disabled) {
@@ -291,14 +284,9 @@
     --btn-ring: var(--state-warning);
   }
 
-  .j-button.is-danger:not(:disabled):active,
-  .j-button.is-danger:not(:disabled):focus-visible {
-    --btn-ring: var(--state-danger);
-  }
-
   .j-button.is-error:not(:disabled):active,
   .j-button.is-error:not(:disabled):focus-visible {
-    --btn-ring: var(--state-danger-subtle);
+    --btn-ring: var(--state-error);
   }
 
   .j-button-group .j-button {
@@ -363,4 +351,4 @@
   .j-button-group.is-vertical .j-button:focus-within {
     z-index: auto;
   }
-}
+}

package/src/css/themes/default/captcha.css

@@ -52,8 +52,8 @@
 
 .j-cap-field .cap-control[data-state='error'],
 .j-cap-field .cap-control[data-state='rate-limited'] {
-    border-color: var(--state-danger-border);
-    color: var(--state-danger-text);
+    border-color: var(--state-error-border);
+    color: var(--state-error-text);
 }
 
 .j-cap-field .cap-control-icon,

package/src/css/themes/default/editor.css

@@ -126,7 +126,7 @@
     margin: var(--editor-block-space) 0;
   }
 
-  .j-editor > div {
+  .j-editor>div {
     margin: var(--editor-block-space) 0;
   }
 
@@ -327,7 +327,7 @@
     display: flex;
   }
 
-  .j-editor ul[data-type='taskList'] li > label {
+  .j-editor ul[data-type='taskList'] li>label {
     flex: none;
     user-select: none;
   }
@@ -390,12 +390,12 @@
     color: var(--tone-subtitle);
   }
 
-  .j-editor blockquote > * {
+  .j-editor blockquote>* {
     /* margin-block: 0; */
     margin: 0;
   }
 
-  .j-editor blockquote > * + * {
+  .j-editor blockquote>*+* {
     margin-top: 0.25rem;
   }
 
@@ -473,7 +473,7 @@
     background: var(--state-success);
     box-shadow:
       14px 0 0 var(--state-warning),
-      28px 0 0 var(--state-danger);
+      28px 0 0 var(--state-error);
   }
 
   pre .code-language,
@@ -505,7 +505,7 @@
     scrollbar-color: var(--ui-border) transparent;
   }
 
-  pre .code-header + code[class*='language-'] {
+  pre .code-header+code[class*='language-'] {
     padding: 0.5rem 1rem 0.75rem;
   }
 
@@ -721,22 +721,22 @@
     transition: transform 0.2s ease;
   }
 
-  .j-editor details[open] > summary::before {
+  .j-editor details[open]>summary::before {
     transform: rotate(90deg);
   }
 
   .j-editor details[open] p,
   .j-editor details[open] ul,
   .j-editor details[open] ol,
-  .j-editor details[open] > * {
+  .j-editor details[open]>* {
     margin-bottom: 1em;
   }
 
-  .j-editor details[open] > summary + * {
+  .j-editor details[open]>summary+* {
     margin-top: 0;
   }
 
-  .j-editor details[open] > *:last-child {
+  .j-editor details[open]>*:last-child {
     margin-bottom: 0;
   }
 
@@ -790,11 +790,11 @@
   /* ============================================
     Block Item - 通用块级元素
   ============================================ */
-  .j-editor > *:first-child {
+  .j-editor>*:first-child {
     margin-top: 0;
   }
 
-  .j-editor > *:last-child {
+  .j-editor>*:last-child {
     margin-bottom: 0;
   }
 
@@ -854,4 +854,4 @@
   .mobile .j-editor p {
     --editor-block-space: 1.5rem;
   }
-}
+}