vanilla-jui 1.7.10 → 1.7.11

package/package.json

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

package/src/components/accordion.ts

@@ -124,7 +124,7 @@ const DEFAULT_CLASS_NAMES: AccordionClassNames = {
   root: 'j-accordion',
   header: 'accordion-header',
   title: 'header-title',
-  arrow: 'header-arrow j-button is-icon is-ghost is-sm',
+  arrow: 'header-arrow j-button is-ghost is-sm is-icon',
   panel: 'accordion-panel',
   content: 'panel-content',
 };

package/src/components/flow.ts

@@ -330,7 +330,7 @@ const DEFAULT_CLASS_NAMES: FlowClassNames = {
   button: 'j-button',
   reset: 'is-ghost flow-reset',
   back: 'is-ghost flow-back',
-  next: 'is-primary flow-next',
+  next: 'is-solid flow-next',
 };
 
 const FLOW_STEP_RULE = {

package/src/components/form.ts

@@ -199,7 +199,7 @@ const DEFAULT_CLASS_NAMES: FormClassNames = {
   helpInvalid: 'is-invalid',
   buttons: 'form-buttons',
   button: 'j-button',
-  submitBtn: 'is-primary',
+  submitBtn: 'is-solid',
   resetBtn: 'is-ghost',
   input: 'j-input',
   textarea: 'j-textarea',

package/src/components/modal.ts

@@ -139,7 +139,7 @@ const DEFAULT_CLASS_NAMES: ModalClassNames = {
   button: 'j-button',
   closeBtn: 'is-icon is-sm is-ghost',
   cancelBtn: 'is-ghost',
-  confirmBtn: 'is-primary',
+  confirmBtn: 'is-solid',
 };
 
 function createDefaultText(): ModalText {

package/src/css/index.css

@@ -1,4 +1,4 @@
-@layer tokens, gradient, layout, icon, font, components, themes, animation, status;
+@layer tokens, layout, animation, gradient, icon, font, components, status;
 
 @import url('./tokens.css');
 @import url('./layout.css');
@@ -7,7 +7,6 @@
 @import url('./icon.css');
 @import url('./font.css');
 
-@import url('./components.css');
 @import url('./themes/index.css');
 
 @import url('./status.css');

package/src/css/layout.css

@@ -19,6 +19,11 @@
     color-scheme: dark;
   }
 
+  html,
+  body {
+    height: 100%;
+  }
+
   body {
     tab-size: 4;
     scroll-behavior: smooth;
@@ -27,7 +32,7 @@
       Arial, sans-serif;
     color: var(--ui-fg);
     background-color: var(--ui-bg);
-    min-width: var(--screen-xs, 320px);
+    min-width: 320px;
     font-size: var(--font-size-md);
     margin: 0;
   }
@@ -142,10 +147,10 @@
   }
 
   /* ==============================
-    * 响应式 Flex 布局系统
-    * 列类名 flex-col-* 避免与 Tailwind 冲突
-    * 建议：Flex 更适合一维排列（如导航、表单）
-    * ============================ */
+   * 响应式 Flex 布局系统
+   * 列类名 flex-col-* 避免与 Tailwind 冲突
+   * 建议：Flex 更适合一维排列（如导航、表单）
+   * ============================ */
 
   /* 容器：居中 + 最大宽度 */
   .container {
@@ -272,8 +277,8 @@
   }
 
   /* ============================================
-     小屏幕 sm (≥576px)
-     ============================================ */
+    小屏幕 sm (≥576px)
+  ============================================ */
   @media (min-width: 576px) {
     .flex-col-sm-1 {
       --span: 1;
@@ -325,8 +330,8 @@
   }
 
   /* ============================================
-       中屏幕 md (≥768px)
-       ============================================ */
+    中屏幕 md (≥768px)
+  ============================================ */
   @media (min-width: 768px) {
     .flex-col-md-1 {
       --span: 1;
@@ -378,8 +383,8 @@
   }
 
   /* ============================================
-           大屏幕 lg (≥992px)
-           ============================================ */
+    大屏幕 lg (≥992px)
+  ============================================ */
   @media (min-width: 992px) {
     .flex-col-lg-1 {
       --span: 1;
@@ -431,8 +436,8 @@
   }
 
   /* ============================================
-           超大屏幕 xl (≥1200px)
-           ============================================ */
+    超大屏幕 xl (≥1200px)
+  ============================================ */
   @media (min-width: 1200px) {
     .flex-col-xl-1 {
       --span: 1;
@@ -484,8 +489,8 @@
   }
 
   /* ============================================
-           超大屏幕 xxl (≥1400px) - 可选
-           ============================================ */
+    超大屏幕 xxl (≥1400px) - 可选
+  ============================================ */
   @media (min-width: 1400px) {
     .flex-col-xxl-1 {
       --span: 1;
@@ -537,10 +542,10 @@
   }
 
   /* ==============================
-    * 响应式 Grid 布局系统
-    * 类名前缀 grid- 避免命名冲突
-    * 建议：Grid 更适合二维布局（如卡片网格、仪表盘）
-    * ============================== */
+   * 响应式 Grid 布局系统
+   * 类名前缀 grid- 避免命名冲突
+   * 建议：Grid 更适合二维布局（如卡片网格、仪表盘）
+   * ============================== */
 
   /* Grid 容器：自动 gap + 响应式列 */
   .grid-container {
@@ -601,9 +606,9 @@
   }
 
   /*
-     * 自动填充：最小宽度 + 自适应列数
-     * 建议：grid-cols-auto-* 用于自适应卡片布局（如商品列表），非常实用。
-     */
+   * 自动填充：最小宽度 + 自适应列数
+   * 建议：grid-cols-auto-* 用于自适应卡片布局（如商品列表），非常实用。
+   */
   .grid-col-auto-150 {
     grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   }
@@ -793,84 +798,172 @@
     aspect-ratio: auto;
   }
 
-  /* columns */
-  /* .columns-auto {
-    columns: auto;
+  .w-full {
+    width: 100%;
   }
 
-  .columns-6xs {
-    columns: var(--columns-6xs);
+  .w-half {
+    width: 50%;
   }
 
-  .columns-5xs {
-    columns: var(--columns-5xs);
+  .w-screen {
+    width: 100vw;
   }
 
-  .columns-4xs {
-    columns: var(--columns-4xs);
+  /* ============================================
+    Divider
+  ============================================ */
+  .divider {
+    align-self: stretch;
+    border-color: currentColor;
+    border-left-width: 1px;
+    border-top-width: 1px;
+    opacity: 0.1;
   }
 
-  .columns-3xs {
-    columns: var(--columns-3xs);
+  /* ============================================
+    Skeleton
+  ============================================ */
+  .j-skeleton {
+    display: block;
+    width: 100%;
+    min-height: var(--el-height-2xs);
+    border-radius: var(--radius-sm);
+    background: var(--ui-surface-muted);
+    color: transparent;
+    pointer-events: none;
+    user-select: none;
+    animation: animate-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
-  .columns-2xs {
-    columns: var(--columns-2xs);
+  .j-skeleton::selection {
+    color: transparent;
+    background: transparent;
   }
 
-  .columns-xs {
-    columns: var(--columns-xs);
+  .j-skeleton.skeleton-inline {
+    display: inline-block;
+    width: 8rem;
+    vertical-align: middle;
   }
 
-  .columns-sm {
-    columns: var(--columns-sm);
+  .j-skeleton.skeleton-text {
+    height: var(--el-height-sm);
+    min-height: var(--el-height-sm);
   }
 
-  .columns-md {
-    columns: var(--columns-md);
+  .j-skeleton.skeleton-title {
+    width: 60%;
+    height: var(--el-height-md);
+    min-height: var(--el-height-md);
   }
 
-  .columns-lg {
-    columns: var(--columns-lg);
+  .j-skeleton.skeleton-block {
+    height: calc(var(--el-height-md) * 4);
+    min-height: calc(var(--el-height-md) * 4);
   }
 
-  .columns-xl {
-    columns: var(--columns-xl);
+  .j-skeleton.skeleton-avatar,
+  .j-skeleton.skeleton-circle {
+    aspect-ratio: 1;
+    border-radius: 999px;
   }
 
-  .columns-2xl {
-    columns: var(--columns-2xl);
+  .j-skeleton.skeleton-avatar {
+    width: var(--el-height-md);
+    min-height: var(--el-height-md);
   }
 
-  .columns-3xl {
-    columns: var(--columns-3xl);
+  .j-skeleton.skeleton-button {
+    width: 5rem;
+    min-height: var(--el-height-md);
   }
 
-  .columns-4xl {
-    columns: var(--columns-4xl);
+  .j-skeleton.skeleton-image {
+    aspect-ratio: 16 / 9;
+    min-height: 0;
   }
 
-  .columns-5xl {
-    columns: var(--columns-5xl);
+  .j-skeleton.skeleton-static,
+  .j-skeleton[aria-busy='false'] {
+    animation: none;
   }
 
-  .columns-6xl {
-    columns: var(--columns-6xl);
+  @media (prefers-reduced-motion: reduce) {
+    .j-skeleton {
+      animation: none;
+    }
   }
 
-  .columns-7xl {
-    columns: var(--columns-7xl);
-  } */
+  /* ============================================
+    Popup
+  ============================================ */
+  .j-popup-layout {
+    background: var(--ui-popup-bg);
+    backdrop-filter: blur(4px);
+    padding: var(--s4);
 
-  .w-full {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
+    height: 100%;
+    z-index: var(--z-popup);
   }
 
-  .w-half {
-    width: 50%;
+  .j-popup-layout,
+  .j-popup-layout.is-center,
+  .j-popup-layout.is-center-center {
+    justify-content: center;
+    align-items: center;
   }
 
-  .w-screen {
-    width: 100vw;
+  .j-popup-layout.is-top,
+  .j-popup-layout.is-top-center {
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .j-popup-layout.is-bottom,
+  .j-popup-layout.is-bottom-center {
+    justify-content: center;
+    align-items: flex-end;
+  }
+
+  .j-popup-layout.is-left,
+  .j-popup-layout.is-left-center {
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .j-popup-layout.is-right,
+  .j-popup-layout.is-right-center {
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .j-popup-layout.is-top-left,
+  .j-popup-layout.is-left-top {
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .j-popup-layout.is-top-right,
+  .j-popup-layout.is-right-top {
+    justify-content: flex-end;
+    align-items: flex-start;
+  }
+
+  .j-popup-layout.is-bottom-left,
+  .j-popup-layout.is-left-bottom {
+    justify-content: flex-start;
+    align-items: flex-end;
+  }
+
+  .j-popup-layout.is-bottom-right,
+  .j-popup-layout.is-right-bottom {
+    justify-content: flex-end;
+    align-items: flex-end;
   }
 }

package/src/css/status.css

@@ -53,7 +53,6 @@
     user-select: none;
   }
 
-  /* [aria-hidden='true'], */
   [hidden] {
     display: none;
   }

package/src/css/themes/default/accordion.css

@@ -1,7 +1,14 @@
-@layer themes {
+@layer components {
   .j-accordion {
     --accordion-border: 1px solid var(--ui-border-subtle);
     --accordion-icon-transform: rotate(0deg);
+
+    display: flex;
+    flex-direction: column;
+  }
+
+  .j-accordion[data-direction='horizontal'] {
+    flex-direction: row;
   }
 
   .j-accordion .accordion-header {
@@ -10,6 +17,11 @@
     font-weight: var(--font-medium);
     font-size: var(--font-size-md);
     border-bottom: var(--accordion-border);
+
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
   }
 
   .j-accordion[data-direction='horizontal'] .accordion-header {
@@ -32,8 +44,18 @@
     border-right: 0;
   }
 
+  .j-accordion .accordion-header .header-title {
+    flex: 1;
+    text-align: left;
+  }
+
   .j-accordion .accordion-header .header-arrow {
     transform: var(--accordion-icon-transform);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: transform 0.3s ease-out;
   }
 
   .j-accordion .accordion-header .header-arrow svg {
@@ -58,6 +80,8 @@
     margin: 0;
     font-size: var(--font-size-md);
     border-bottom: var(--accordion-border);
+
+    position: relative;
   }
 
   .j-accordion .accordion-panel[aria-hidden='false'] {
@@ -85,5 +109,17 @@
   .j-accordion .accordion-panel .panel-content {
     margin: 0;
     padding: 0 var(--s3) var(--s2);
+
+    position: relative;
+    min-height: inherit;
+  }
+
+  .j-accordion[data-direction='horizontal']
+    .accordion-panel[aria-hidden='false']
+    .panel-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
   }
 }

package/src/css/themes/default/avatar.css

@@ -1,4 +1,4 @@
-@layer themes {
+@layer components {
   .j-avatar {
     --avatar-size: var(--el-height-md);
     --avatar-border-radius: var(--radius-sm);
@@ -13,12 +13,23 @@
     color: var(--avatar-fg);
     font-size: var(--avatar-font-size);
     font-weight: var(--avatar-font-weight);
+
+    display: inline-block;
+    vertical-align: middle;
+    overflow: hidden;
+    user-select: none;
+    object-fit: cover;
   }
 
   .j-avatar img {
     border-radius: var(--avatar-border-radius);
   }
 
+  .j-avatar img,
+  .j-avatar svg {
+    margin: 0;
+  }
+
   .j-avatar.is-2xs {
     --avatar-size: var(--el-height-2xs);
   }
@@ -51,6 +62,17 @@
     --avatar-bg: var(--tone-subtle);
     --avatar-fg: var(--tone-solid);
     --avatar-font-weight: var(--font-medium);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .j-avatar-group {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
   }
 
   .j-avatar-group .j-avatar {

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

@@ -1,4 +1,4 @@
-@layer themes {
+@layer components {
   .j-badge {
     --badge-padding: 0 calc(var(--space) * 1.5);
     --badge-min-width: 1.25rem;
@@ -23,6 +23,11 @@
     color: var(--badge-fg);
     background-color: var(--badge-bg);
     box-shadow: var(--badge-box-shadow);
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
   }
 
   .j-badge svg {
@@ -46,18 +51,30 @@
     --badge-fg: var(--ui-bg);
   }
 
-  .j-badge.is-primary {
+  .j-badge.is-solid {
     --badge-bg: var(--tone-solid);
     --badge-fg: var(--tone-fg);
     --badge-border-color: var(--tone-solid);
   }
 
-  .j-badge.is-secondary {
+  .j-badge.is-soft {
     --badge-bg: var(--tone-soft);
     --badge-fg: var(--tone-text);
     --badge-border-color: var(--tone-soft);
   }
 
+  .j-badge.is-wash {
+    --badge-bg: var(--tone-wash);
+    --badge-fg: var(--tone-text);
+    --badge-border-color: var(--tone-wash);
+  }
+
+  .j-badge.is-primary {
+    --badge-bg: var(--state-info);
+    --badge-fg: var(--state-info-fg);
+    --badge-border-color: var(--state-info);
+  }
+
   .j-badge.is-success {
     --badge-bg: var(--state-success);
     --badge-fg: var(--state-success-fg);

package/src/css/themes/default/breadcrumb.css

@@ -1,4 +1,4 @@
-@layer themes {
+@layer components {
   .j-breadcrumb {
     --breadcrumb-font-size: var(--font-size-md);
     --breadcrumb-fg: var(--ui-fg-muted);
@@ -9,6 +9,42 @@
 
     font-size: var(--breadcrumb-font-size);
     color: var(--breadcrumb-fg);
+
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .j-breadcrumb > ol,
+  .j-breadcrumb > ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin: 0;
+    padding: 0;
+  }
+
+  .j-breadcrumb > ol li,
+  .j-breadcrumb > ul li {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .j-breadcrumb li + li::before {
+    content: '/';
+  }
+
+  .j-breadcrumb.is-dot li + li::before {
+    content: '•';
+  }
+
+  .j-breadcrumb.is-arrow li + li::before {
+    content: '>';
+  }
+
+  .j-breadcrumb.is-dash li + li::before {
+    content: '–';
   }
 
   .j-breadcrumb svg {
@@ -30,17 +66,45 @@
     gap: var(--space);
     color: var(--breadcrumb-link-fg);
     padding: var(--breadcrumb-item-padding);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
   }
 
   .j-breadcrumb a:hover {
     --breadcrumb-link-fg: var(--tone-solid);
   }
 
+  .j-breadcrumb a span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   .j-breadcrumb li + li::before {
     color: var(--breadcrumb-divider-fg);
   }
 
   .j-breadcrumb li.is-active a {
     --breadcrumb-link-fg: var(--ui-fg-muted);
+
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .j-breadcrumb li:first-child a {
+    padding-inline-start: 0;
+  }
+
+  .j-breadcrumb.is-center ul,
+  .j-breadcrumb.is-center ol {
+    justify-content: center;
+  }
+
+  .j-breadcrumb.is-right ul,
+  .j-breadcrumb.is-right ol {
+    justify-content: flex-end;
   }
 }