vanilla-jui 1.4.5 → 1.4.7

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

@@ -1,49 +1,49 @@
 @layer themes {
-    .j-tip {
-        --tip-gap: var(--s2);
-        --tip-width: 100%;
-        --tip-padding: var(--s3) var(--s4);
-        --tip-border-width: 1px;
-        --tip-border-style: solid;
-        --tip-border-color: var(--ui-border);
-        --tip-border-radius: var(--radius-md);
-        --tip-font-size: var(--font-size-md);
-        --tip-fg: var(--ui-fg);
-        --tip-bg: var(--ui-bg);
-        --tip-box-shadow: var(--shadow-sm);
-        --tip-icon-fg: var(--tip-fg);
-    }
+  .j-tip {
+    --tip-gap: var(--s2);
+    --tip-width: 100%;
+    --tip-padding: var(--s3) var(--s4);
+    --tip-border-width: 1px;
+    --tip-border-style: solid;
+    --tip-border-color: var(--ui-border);
+    --tip-border-radius: var(--radius-md);
+    --tip-font-size: var(--font-size-md);
+    --tip-fg: var(--ui-fg);
+    --tip-bg: var(--ui-bg);
+    --tip-box-shadow: var(--shadow-sm);
+    --tip-icon-fg: var(--tip-fg);
+  }
 
-    .j-tip .tip-icon,
-    .j-tip .tip-icon svg {
-        --tip-icon-size: var(--font-size-xl);
-    }
+  .j-tip .tip-icon,
+  .j-tip .tip-icon svg {
+    --tip-icon-size: var(--font-size-xl);
+  }
 
-    .j-tip .tip-title {
-        --tip-title-line-height: var(--line-height-paragraph);
-        --tip-title-font-weight: var(--font-medium);
-    }
+  .j-tip .tip-title {
+    --tip-title-line-height: var(--line-height-paragraph);
+    --tip-title-font-weight: var(--font-medium);
+  }
 
-    .j-tip .tip-content {
-        --tip-content-gap: var(--s2);
-        --tip-content-line-height: var(--line-height-paragraph);
-    }
+  .j-tip .tip-content {
+    --tip-content-gap: var(--s2);
+    --tip-content-line-height: var(--line-height-paragraph);
+  }
 
-    .j-tip.is-success {
-        --tip-border-color: var(--state-success);
-        --tip-bg: var(--state-success-muted);
-        --tip-icon-fg: var(--state-success);
-    }
+  .j-tip.is-success {
+    --tip-border-color: var(--state-success);
+    --tip-bg: var(--state-success-muted);
+    --tip-icon-fg: var(--state-success);
+  }
 
-    .j-tip.is-warning {
-        --tip-border-color: var(--state-warning);
-        --tip-bg: var(--state-warning-muted);
-        --tip-icon-fg: var(--state-warning);
-    }
+  .j-tip.is-warning {
+    --tip-border-color: var(--state-warning);
+    --tip-bg: var(--state-warning-muted);
+    --tip-icon-fg: var(--state-warning);
+  }
 
-    .j-tip.is-danger {
-        --tip-border-color: var(--state-danger);
-        --tip-bg: var(--state-danger-muted);
-        --tip-icon-fg: var(--state-danger);
-    }
-}
+  .j-tip.is-danger {
+    --tip-border-color: var(--state-danger);
+    --tip-bg: var(--state-danger-muted);
+    --tip-icon-fg: var(--state-danger);
+  }
+}

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

@@ -1,70 +1,70 @@
 @layer themes {
-    .j-toast-container {
-        --toast-container-offset: var(--s2);
-        --toast-container-gap: var(--s2);
-    }
+  .j-toast-container {
+    --toast-container-offset: var(--s2);
+    --toast-container-gap: var(--s2);
+  }
 
-    .j-toast {
-        --toast-padding: var(--s3) var(--s4);
-        --toast-font-size: var(--font-size-md);
-        --toast-font-weight: var(--font-medium);
-        --toast-min-width: 200px;
-        --toast-max-width: 310px;
-        --toast-box-shadow: var(--shadow-md);
-        --toast-border-width: 1px;
-        --toast-border-style: solid;
-        --toast-border-color: var(--ui-border);
-        --toast-border-radius: var(--radius-md);
-        --toast-fg: var(--ui-fg);
-        --toast-bg: var(--ui-bg);
-    }
+  .j-toast {
+    --toast-padding: var(--s3) var(--s4);
+    --toast-font-size: var(--font-size-md);
+    --toast-font-weight: var(--font-medium);
+    --toast-min-width: 200px;
+    --toast-max-width: 310px;
+    --toast-box-shadow: var(--shadow-md);
+    --toast-border-width: 1px;
+    --toast-border-style: solid;
+    --toast-border-color: var(--ui-border);
+    --toast-border-radius: var(--radius-md);
+    --toast-fg: var(--ui-fg);
+    --toast-bg: var(--ui-bg);
+  }
 
-    .j-toast .toast-icon {
-        --toast-icon-size: var(--font-size-lg);
-    }
+  .j-toast .el-icon {
+    --toast-icon-size: var(--font-size-lg);
+  }
 
-    .j-toast.is-success {
-        --toast-fg: var(--state-success);
-        --toast-bg: var(--state-success-weak);
-        --toast-border-color: var(--state-success-border);
-    }
+  .j-toast.is-success {
+    --toast-fg: var(--state-success);
+    --toast-bg: var(--state-success-weak);
+    --toast-border-color: var(--state-success-border);
+  }
 
-    .j-toast.is-error {
-        --toast-fg: var(--state-danger);
-        --toast-bg: var(--state-danger-weak);
-        --toast-border-color: var(--state-danger-border);
-    }
+  .j-toast.is-error {
+    --toast-fg: var(--state-danger);
+    --toast-bg: var(--state-danger-weak);
+    --toast-border-color: var(--state-danger-border);
+  }
 
-    .j-toast.is-warning {
-        --toast-fg: var(--state-warning);
-        --toast-bg: var(--state-warning-weak);
-        --toast-border-color: var(--state-warning-border);
-    }
+  .j-toast.is-warning {
+    --toast-fg: var(--state-warning);
+    --toast-bg: var(--state-warning-weak);
+    --toast-border-color: var(--state-warning-border);
+  }
 
-    .j-toast.is-primary {
-        --toast-fg: var(--tone-solid);
-        --toast-bg: var(--tone-weak);
-        --toast-border-color: var(--tone-border);
-    }
+  .j-toast.is-primary {
+    --toast-fg: var(--tone-solid);
+    --toast-bg: var(--tone-weak);
+    --toast-border-color: var(--tone-border);
+  }
 
-    .j-toast.is-action {
-        --toast-gap: calc(var(--space)*4);
-        --toast-min-width: 280px;
-    }
+  .j-toast.is-action {
+    --toast-gap: calc(var(--space)*4);
+    --toast-min-width: 280px;
+  }
 
-    .j-toast.is-action .toast-actions {
-        width: 100%;
-        display: flex;
-        justify-content: flex-end;
-        gap: var(--space);
-    }
+  .j-toast.is-action .toast-actions {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space);
+  }
 
-    .j-toast-lite {
-        font-size: var(--font-size-md);
-        color: var(--ui-bg);
-        background: var(--ui-fg);
-        border-radius: var(--radius-md);
-        padding: var(--s2) var(--s3);
-        max-width: calc(var(--screen-sm) / 2);
-    }
-}
+  .j-toast-lite {
+    font-size: var(--font-size-md);
+    color: var(--ui-bg);
+    background: var(--ui-fg);
+    border-radius: var(--radius-md);
+    padding: var(--s2) var(--s3);
+    max-width: calc(var(--screen-sm) / 2);
+  }
+}

package/src/css/themes/default/toolbar.css

@@ -1,34 +1,28 @@
 @layer themes {
-    .j-toolbar-container {
-        --toolbar-container-position: sticky;
-        --toolbar-container-bg: var(--ui-bg);
-        --toolbar-container-border: 1px solid var(--ui-border);
-    }
+  .j-toolbar-container {
+    --toolbar-container-position: sticky;
+    --toolbar-container-bg: var(--ui-bg);
+    --toolbar-container-border: 1px solid var(--ui-border);
+  }
 
-    .j-toolbar {
-        --toolbar-gap: 0;
-        --toolbar-padding: var(--s2);
-        --toolbar-box-shadow: var(--shadow-sm);
-        --toolbar-divider-width: 1px;
-        --toolbar-divider-height: 16px;
-        --toolbar-divider-bg: var(--ui-fg);
-        --toolbar-drop-font-size: var(--font-size-md);
-        --toolbar-drop-bg: var(--ui-bg-subtle);
-        --toolbar-drop-padding: var(--space);
-        --toolbar-drop-border: 1px solid var(--ui-border);
-        --toolbar-drop-radius: var(--radius-sm);
-        --toolbar-drop-box-shadow: var(--shadow-md);
-    }
+  .j-toolbar {
+    --toolbar-gap: 0;
+    --toolbar-padding: var(--s2);
+    --toolbar-box-shadow: var(--shadow-sm);
+    --toolbar-divider-width: 1px;
+    --toolbar-divider-height: 16px;
+    --toolbar-divider-bg: var(--ui-fg);
+  }
 
-    .j-toolbar button svg {
-        --toolbar-icon-size: var(--font-size-xl);
-    }
+  .j-toolbar button svg {
+    --toolbar-icon-size: var(--font-size-xl);
+  }
 
-    .j-toolbar button.is-sm svg {
-        --toolbar-icon-size: var(--font-size-lg);
-    }
+  .j-toolbar button.is-sm svg {
+    --toolbar-icon-size: var(--font-size-lg);
+  }
 
-    .j-toolbar button.is-lg svg {
-        --toolbar-icon-size: var(--font-size-2xl);
-    }
-}
+  .j-toolbar button.is-lg svg {
+    --toolbar-icon-size: var(--font-size-2xl);
+  }
+}

package/src/css/themes/default/tooltip.css

@@ -1,14 +1,44 @@
 @layer themes {
-    .j-tooltip {
-        --tooltip-fg: var(--ui-bg);
-        --tooltip-bg: var(--ui-fg);
-        --tooltip-border-width: 1px;
-        --tooltip-border-style: solid;
-        --tooltip-border-color: var(--ui-border-strong);
-        --tooltip-border-radius: var(--radius-md);
-        --tooltip-max-width: 260px;
-        --tooltip-padding: calc(var(--space) * 1.5) var(--s2);
-        --tooltip-font-size: var(--font-size-md);
-        --tooltip-line-height: var(--line-height);
-    }
-}
+  .j-tooltip {
+    --tooltip-fg: var(--ui-bg);
+    --tooltip-bg: var(--ui-fg);
+    --tooltip-border-width: 1px;
+    --tooltip-border-style: solid;
+    --tooltip-border-color: var(--ui-border-strong);
+    --tooltip-border-radius: var(--radius-md);
+    --tooltip-max-width: 260px;
+    --tooltip-padding: calc(var(--space) * 1.5) var(--s2);
+    --tooltip-font-size: var(--font-size-md);
+    --tooltip-line-height: var(--line-height);
+  }
+
+  .j-tooltip.is-reverse {
+    --tooltip-fg: var(--ui-fg);
+    --tooltip-bg: var(--ui-bg);
+    --tooltip-border-color: var(--ui-border);
+  }
+
+  .j-tooltip.is-primary {
+    --tooltip-fg: var(--state-info-fg);
+    --tooltip-bg: var(--state-info-text);
+    --tooltip-border-color: var(--state-info-border);
+  }
+
+  .j-tooltip.is-success {
+    --tooltip-fg: var(--state-success-fg);
+    --tooltip-bg: var(--state-success-text);
+    --tooltip-border-color: var(--state-success-border);
+  }
+
+  .j-tooltip.is-warning {
+    --tooltip-fg: var(--state-warning-fg);
+    --tooltip-bg: var(--state-warning-text);
+    --tooltip-border-color: var(--state-warning-border);
+  }
+
+  .j-tooltip.is-error {
+    --tooltip-fg: var(--state-danger-fg);
+    --tooltip-bg: var(--state-danger-text);
+    --tooltip-border-color: var(--state-danger-border);
+  }
+}

package/src/css/themes/index.css

@@ -1 +1 @@
-@import url('./default/index.css');
+@import url('./default/index.css');

package/src/css/tip.css

@@ -59,7 +59,7 @@
     margin: 0;
   }
 
-  .j-tip .tip-content>* {
+  .j-tip .tip-content > * {
     margin: 0;
   }
-}
+}

package/src/css/toast.css

@@ -43,13 +43,13 @@
     transform: translateY(0);
   }
 
-  .j-toast .toast-icon {
+  .j-toast .el-icon {
     margin-right: var(--s2);
     width: var(--toast-icon-size);
     color: inherit;
   }
 
-  .j-toast .toast-message {
+  .j-toast .el-text {
     flex: 1;
     word-break: normal;
   }
@@ -79,4 +79,4 @@
     align-items: flex-start;
     cursor: default;
   }
-}
+}

package/src/css/tokens.css

@@ -4,7 +4,6 @@
    ============================================ */
 
 @layer config {
-
   /* ============================================
      1. Layout Tokens
      ============================================ */
@@ -99,7 +98,6 @@
     --opacity-disabled: 0.5;
   }
 
-
   /* ============================================
      2. Color Tokens - Light Mode
      ============================================ */
@@ -241,7 +239,7 @@
     --state-danger-subtle: rgba(239, 68, 68, 0.08);
     --state-danger-soft: rgba(239, 68, 68, 0.12);
     --state-danger-muted: rgba(239, 68, 68, 0.16);
-    --state-danger-weak: #FCE1E1;
+    --state-danger-weak: #fce1e1;
     --state-danger-border: rgba(239, 68, 68, 0.25);
     --state-danger-ring: rgba(239, 68, 68, 0.3);
 
@@ -253,7 +251,7 @@
     --state-success-subtle: rgba(34, 197, 94, 0.08);
     --state-success-soft: rgba(34, 197, 94, 0.12);
     --state-success-muted: rgba(34, 197, 94, 0.16);
-    --state-success-weak: #DCF6E5;
+    --state-success-weak: #dcf6e5;
     --state-success-border: rgba(34, 197, 94, 0.25);
     --state-success-ring: rgba(34, 197, 94, 0.3);
 
@@ -265,7 +263,7 @@
     --state-warning-subtle: rgba(245, 158, 11, 0.08);
     --state-warning-soft: rgba(245, 158, 11, 0.12);
     --state-warning-muted: rgba(245, 158, 11, 0.16);
-    --state-warning-weak: #FDF0D8;
+    --state-warning-weak: #fdf0d8;
     --state-warning-border: rgba(245, 158, 11, 0.25);
     --state-warning-ring: rgba(245, 158, 11, 0.3);
 
@@ -291,7 +289,6 @@
     --state-info-surface: var(--state-info-subtle);
   }
 
-
   /* ============================================
      3. Color Tokens - Dark Mode
      ============================================ */
@@ -444,7 +441,7 @@
     --state-success-subtle: rgba(74, 222, 128, 0.1);
     --state-success-soft: rgba(74, 222, 128, 0.15);
     --state-success-muted: rgba(74, 222, 128, 0.2);
-    --state-success-weak: #08251E;
+    --state-success-weak: #08251e;
     --state-success-border: rgba(74, 222, 128, 0.25);
     --state-success-ring: rgba(74, 222, 128, 0.4);
 
@@ -456,7 +453,7 @@
     --state-warning-subtle: rgba(251, 191, 36, 0.1);
     --state-warning-soft: rgba(251, 191, 36, 0.15);
     --state-warning-muted: rgba(251, 191, 36, 0.2);
-    --state-warning-weak: #2A1F11;
+    --state-warning-weak: #2a1f11;
     --state-warning-border: rgba(251, 191, 36, 0.25);
     --state-warning-ring: rgba(251, 191, 36, 0.4);
 
@@ -474,12 +471,14 @@
     /* shadow */
     --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
     --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
-    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
+    --shadow-md:
+      0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
+    --shadow-lg:
+      0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+    --shadow-xl:
+      0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4);
   }
 
-
   /* ============================================
      5. Theme Variants (15 themes)
      ============================================ */
@@ -814,7 +813,6 @@
     --tone-link-visited: #653008;
   }
 
-
   /* ============================================
      6. Dark Theme Variants
      ============================================ */
@@ -1119,7 +1117,6 @@
     --tone-link-visited: #d97706;
   }
 
-
   /* ============================================
      7. Radius Themes
   ============================================ */
@@ -1191,7 +1188,6 @@
     --radius-2xl: 9999px;
   }
 
-
   /* ============================================
      8. Shadow Themes
      ============================================ */
@@ -1253,7 +1249,6 @@
     --shadow-xl: 0 24px 38px -6px rgb(0 0 0 / 0.65);
   }
 
-
   /* ============================================
      9. Font Themes
   ============================================ */
@@ -1297,4 +1292,4 @@
     --el-height-2xl: 3rem;
     --el-height-3xl: 3.25rem;
   }
-}
+}

package/src/css/toolbar.css

@@ -46,26 +46,25 @@
   .heading-drop-menu,
   .editor-size-menu,
   .color-drop-menu,
-
   .editor-drop-heading,
   .editor-drop-size,
   .editor-drop-color {
-    background: var(--toolbar-drop-bg);
-    box-shadow: var(--toolbar-drop-box-shadow);
-    border: var(--toolbar-drop-border);
-    border-radius: var(--toolbar-drop-radius);
-    font-size: var(--toolbar-drop-font-size);
+    background: var(--toolbar-drop-bg, var(--ui-bg-subtle));
+    box-shadow: var(--toolbar-drop-box-shadow, var(--shadow-md));
+    border: var(--toolbar-drop-border, 1px solid var(--ui-border));
+    border-radius: var(--toolbar-drop-radius, var(--radius-sm));
+    font-size: var(--toolbar-drop-font-size, var(--font-size-md));
   }
 
   .editor-drop-color {
-    padding: var(--toolbar-drop-padding);
+    padding: var(--toolbar-drop-padding, var(--space));
   }
 
   .editor-drop-color .color-panel {
-    padding: .5rem;
+    padding: 0.5rem;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    gap: .5rem;
+    gap: 0.5rem;
   }
 
   .editor-drop-color .color-panel button.color-btn {
@@ -93,4 +92,4 @@
     grid-column: span 5;
     width: auto;
   }
-}
+}

package/src/css/tooltip.css

@@ -7,13 +7,14 @@
     border-style: var(--tooltip-border-style);
     border-color: var(--tooltip-border-color);
     border-radius: var(--tooltip-border-radius);
+    width: fit-content;
     max-width: var(--tooltip-max-width);
   }
 
-  .j-tooltip .tooltip-message {
+  .j-tooltip .el-text {
     word-wrap: break-word;
     padding: var(--tooltip-padding);
     font-size: var(--tooltip-font-size);
     line-height: var(--tooltip-line-height);
   }
-}
+}

package/src/index.ts

@@ -3,35 +3,38 @@ import './css/index.css';
 
 // Utilities
 export * from './utilities/browser.ts';
-export * from './utilities/cache.ts';
-export * from './utilities/core.ts';
+export * from './utilities/id.ts';
 export * from './utilities/dom.ts';
 export * from './utilities/events.ts';
 export * from './utilities/http.ts';
-export * from './utilities/storage.ts';
+export * from './utilities/object.ts';
+export * from './utilities/timer.ts';
+export * from './utilities/types.ts';
+export * from './utilities/function.ts';
 
-// Core
-export { default as Component } from './core/Component.ts';
+// UI primitives
+export * from './primitives/icons.ts';
+export * from './primitives/loading.ts';
+export * from './primitives/popup.ts';
+export * from './primitives/drop.ts';
+export * from './primitives/tooltip.ts';
+export * from './primitives/toast.ts';
+export * from './primitives/theme.ts';
+export * from './primitives/parabola.ts';
 
-// Common Components
-export * from './components/icons.ts';
-export * from './components/theme.ts';
-export * from './components/toast.ts';
+// Validation
+export * from './validation/validator.ts';
 
-// Components extending Component
-// components with factory functions
-export * from './components/form.ts';
-export * from './components/validator.ts';
+// Components
+export { default as Component } from './core/Component.ts';
 export * from './components/toc.ts';
 export * from './components/sticky.ts';
+export * from './components/accordion.ts';
+export * from './components/form.ts';
 export * from './components/flow.ts';
-export * from './components/parabola.ts';
+export * from './components/modal.ts';
+export * from './components/swiper.ts';
 export * from './components/tabs.ts';
-export * from './components/accordion.ts';
-export * from './components/drop.ts';
-export * from './components/tooltip.ts';
 export * from './components/offcanvas.ts';
-export * from './components/modal.ts';
 export * from './components/pagination.ts';
-export * from './components/swiper.ts';
 export * from './components/menu.ts';