vanilla-jui 1.4.5 → 1.4.6

package/src/css/themes/default/loading.css

@@ -1,23 +1,29 @@
 @layer themes {
-    .j-loader {
-        --loader-position: absolute;
-        --loader-size: var(--font-size-md);
-        --loader-width: 1.5px;
-        --loader-style: solid;
-        --loader-fg: currentcolor;
-        --loader-speed: var(--speed-xl);
-    }
+  .j-loader {
+    --loader-position: absolute;
+    --loader-size: var(--font-size-md);
+    --loader-width: 1.5px;
+    --loader-style: solid;
+    --loader-fg: currentcolor;
+    --loader-speed: var(--speed-xl);
+  }
 
-    .j-loader .tone-loader {
-        --loader-width: 2px;
-        --loader-fg: var(--tone-soft);
-        --loader-top-fg: var(--tone-solid);
-    }
+  .j-loader .tone-loader {
+    --loader-width: 2px;
+    --loader-fg: var(--tone-soft);
+    --loader-top-fg: var(--tone-solid);
+  }
 
-    .j-loader .flow-loader {
-        --loader-width: 2px;
-        --loader-bg: radial-gradient(farthest-side, var(--tone-solid) 94%, #0000) top/var(--loader-width) var(--loader-width) no-repeat,
-            conic-gradient(#0000 30%, var(--tone-solid));
-        --loader-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--loader-width)), #000 0);
-    }
-}
+  .j-loader .flow-loader {
+    --loader-width: 2px;
+    --loader-bg:
+      radial-gradient(farthest-side, var(--tone-solid) 94%, #0000)
+        top/var(--loader-width) var(--loader-width) no-repeat,
+      conic-gradient(#0000 30%, var(--tone-solid));
+    --loader-mask: radial-gradient(
+      farthest-side,
+      #0000 calc(100% - var(--loader-width)),
+      #000 0
+    );
+  }
+}

package/src/css/themes/default/menu.css

@@ -1,15 +1,79 @@
 @layer themes {
-    .j-menu {
-        --menu-font-size: var(--font-size-md);
-        --menu-font-weight: var(--font-normal);
+  .j-menu {
+    --menu-font-size: var(--font-size-md);
+    --menu-font-weight: var(--font-normal);
+    --menu-item-icon-size: var(--font-size-lg);
 
-        --menu-item-padding: 0.5rem 1rem;
-        --menu-item-height: var(--el-height-md);
-        --menu-item-line-height: var(--line-height);
+    --menu-item-padding: 0.5rem 1rem;
+    --menu-item-height: var(--el-height-md);
+    --menu-item-line-height: var(--line-height);
+    --menu-item-border-width: 1px;
+    --menu-item-border-style: solid;
+    --menu-item-border-color: transparent;
+    --menu-item-border-radius: var(--radius-md);
+    --menu-item-hover-bg: var(--tone-soft);
+    --menu-item-hover-fg: var(--tone-text);
+    --menu-item-error-bg: var(--state-danger-subtle);
+    --menu-item-error-tip-bg: var(--state-danger);
+    --menu-item-error-tip-fg: var(--state-danger-fg);
+    --menu-item-error-tip-font-size: var(--font-size-sm);
+    --menu-item-error-tip-padding: 0 var(--space);
 
-        --menu-link-font-weight: var(--font-medium);
-        --menu-link-gap: var(--space);
+    --menu-link-font-weight: var(--font-medium);
+    --menu-link-gap: var(--space);
+    --menu-link-current-fg: var(--tone-solid);
 
-        --menu-item-icon-size: var(--font-size-lg);
-    }
-}
+    --sub-menu-bg: var(--ui-surface-subtle);
+    --sub-menu-border-width: 1px;
+    --sub-menu-border-style: solid;
+    --sub-menu-border-color: var(--ui-border);
+    --sub-menu-border-radius: var(--radius-md);
+    --sub-menu-min-width: 120px;
+    --sub-menu-max-width: 240px;
+    --sub-menu-box-shadow: var(--shadow-sm);
+    --sub-menu-item-hover-bg: var(--tone-solid);
+    --sub-menu-item-hover-fg: var(--tone-fg);
+    --sub-menu-item-hover-outline-width: 1px;
+    --sub-menu-item-hover-outline-style: solid;
+    --sub-menu-item-hover-outline-color: var(--tone-solid);
+  }
+
+  .j-menu[data-menu-type='mobile'] {
+    --menu-font-weight: var(--font-medium);
+    --menu-item-line-height: var(--line-height-paragraph);
+    --menu-item-height: var(--el-height-xl);
+    --menu-item-border-radius: none;
+    --menu-item-hover-bg: inherit;
+    --menu-item-hover-fg: inherit;
+    --menu-item-active-bg: var(--ui-bg-subtle);
+    --sub-menu-border-width: 0;
+    --sub-menu-item-hover-outline-width: 0;
+    --menu-link-gap: var(--s2);
+  }
+
+  .j-menu[data-menu-type='bottom'] {
+    --menu-bg: linear-gradient(
+      to bottom,
+      var(--ui-bg-subtle) 20%,
+      var(--ui-border) 40%,
+      var(--ui-outline) 50%,
+      var(--ui-border) 60%,
+      var(--ui-bg-subtle) 80%
+    );
+    --menu-item-bg: var(--ui-bg-subtle);
+    --menu-item-height: var(--el-height-2xl);
+    --menu-item-border-radius: none;
+    --menu-item-hover-bg: inherit;
+    --menu-item-hover-fg: inherit;
+
+    --sub-menu-bg: linear-gradient(
+      to right,
+      var(--ui-surface-subtle) 20%,
+      var(--ui-border) 40%,
+      var(--ui-outline) 50%,
+      var(--ui-border) 60%,
+      var(--ui-surface-subtle) 80%
+    );
+    --sub-menu-border-radius: var(--radius-md);
+  }
+}

package/src/css/themes/default/modal.css

@@ -1,40 +1,36 @@
 @layer themes {
-    .j-modal {
-        --modal-fg: var(--ui-fg);
-        --modal-bg: var(--ui-bg);
-        --modal-border-width: 1px;
-        --modal-border-style: solid;
-        --modal-border-color: var(--ui-border);
-        --modal-border-radius: var(--radius-md);
-        --modal-box-shadow: var(--shadow-md);
-        --modal-min-width: 300px;
-        --modal-max-width: 500px;
-        --modal-max-height: 90vh;
-        --modal-header-gap: var(--space);
-        --modal-header-padding: var(--s4) var(--s4) 0;
-        --modal-header-bottom-border: transparent;
-        --modal-title-font-size: var(--font-size-md);
-        --modal-title-font-weight: var(--font-medium);
-        --modal-body-padding: var(--s4);
-        --modal-body-line-height: var(--line-height-paragraph);
-        --modal-footer-gap: var(--s2);
-        --modal-footer-padding: 0 var(--s4) var(--s4);
-        --modal-footer-top-border: 1px solid transparent;
-    }
+  .j-modal {
+    --modal-fg: var(--ui-fg);
+    --modal-bg: var(--ui-bg);
+    --modal-border-width: 1px;
+    --modal-border-style: solid;
+    --modal-border-color: var(--ui-border);
+    --modal-border-radius: var(--radius-md);
+    --modal-box-shadow: var(--shadow-md);
+    --modal-min-width: 300px;
+    --modal-max-width: 500px;
+    --modal-max-height: 90vh;
+    --modal-header-gap: var(--space);
+    --modal-header-padding: var(--s3) var(--s4) 0;
+    --modal-header-bottom-border: transparent;
+    --modal-title-font-size: var(--font-size-md);
+    --modal-title-font-weight: var(--font-medium);
+    --modal-body-padding: var(--s4);
+    --modal-body-line-height: var(--line-height-paragraph);
+    --modal-footer-gap: var(--s2);
+    --modal-footer-padding: 0 var(--s4) var(--s4);
+    --modal-footer-top-border: 1px solid transparent;
+  }
 
-    .j-modal:not(.is-fullscreen) .modal-header:has(.modal-close) {
-        --modal-header-padding: var(--s3) var(--s4) 0;
-    }
+  .j-modal.is-fullscreen .modal-header {
+    --modal-header-padding: var(--s4);
+  }
 
-    .j-modal.is-fullscreen .modal-header {
-        --modal-header-padding: var(--s4);
-    }
+  .j-modal.is-fullscreen .modal-body {
+    --modal-body-padding: 0;
+  }
 
-    .j-modal.is-fullscreen .modal-body {
-        --modal-body-padding: 0;
-    }
-
-    .j-modal.is-fullscreen .modal-footer {
-        --modal-footer-padding: var(--s4);
-    }
-}
+  .j-modal.is-fullscreen .modal-footer {
+    --modal-footer-padding: var(--s4);
+  }
+}

package/src/css/themes/default/pagination.css

@@ -1,8 +1,8 @@
 @layer themes {
-    .j-pagination {
-        --pagination-font-size: var(--font-size-md);
-        --pagination-link-fg: var(--ui-fg);
-        --pagination-link-decoration: none;
-        --pagination-gap: var(--space);
-    }
-}
+  .j-pagination {
+    --pagination-font-size: var(--font-size-md);
+    --pagination-link-fg: var(--ui-fg);
+    --pagination-link-decoration: none;
+    --pagination-gap: var(--space);
+  }
+}

package/src/css/themes/default/popup.css

@@ -1,7 +1,7 @@
 @layer themes {
-    .j-popup-layout {
-        --popup-layout-padding: var(--s4);
-        --popup-bg: var(--ui-popup-bg);
-        --popup-backdrop-filter: blur(4px);
-    }
-}
+  .j-popup-layout {
+    --popup-layout-padding: var(--s4);
+    --popup-bg: var(--ui-popup-bg);
+    --popup-backdrop-filter: blur(4px);
+  }
+}

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

@@ -1,35 +1,35 @@
 @layer themes {
-    .j-swiper {
-        --swiper-min-height: 180px;
-        --swiper-title-inset: var(--s3);
-        --swiper-title-padding: calc(var(--space) * 1.5) var(--s2);
-        --swiper-title-color: #fff;
-        --swiper-title-font-size: var(--font-size-lg);
-        --swiper-title-font-weight: var(--font-bold);
-        --swiper-title-bg: rgb(0 0 0 / 35%);
-        --swiper-title-border-radius: var(--radius-sm);
-        --swiper-title-line-height: var(--line-height-heading);
-        --swiper-pagination-gap: 6px;
-        --swiper-pagination-inline: var(--s3);
-        --swiper-pagination-block: var(--s2);
-        --swiper-indicator-size: 8px;
-        --swiper-indicator-bg: rgb(255 255 255 / 62%);
-        --swiper-indicator-hover-bg: rgb(255 255 255 / 86%);
-        --swiper-indicator-active-width: 22px;
-        --swiper-indicator-active-bg: #fff;
-        --swiper-navigation-size: 36px;
-        --swiper-navigation-fg: #fff;
-        --swiper-navigation-bg: rgb(0 0 0 / 35%);
-        --swiper-navigation-hover-bg: rgb(0 0 0 / 65%);
-        --swiper-navigation-offset: var(--s2);
-        --swiper-navigation-icon-size: 18px;
-    }
+  .j-swiper {
+    --swiper-min-height: 180px;
+    --swiper-title-inset: var(--s3);
+    --swiper-title-padding: calc(var(--space) * 1.5) var(--s2);
+    --swiper-title-color: #fff;
+    --swiper-title-font-size: var(--font-size-lg);
+    --swiper-title-font-weight: var(--font-bold);
+    --swiper-title-bg: rgb(0 0 0 / 35%);
+    --swiper-title-border-radius: var(--radius-sm);
+    --swiper-title-line-height: var(--line-height-heading);
+    --swiper-pagination-gap: 6px;
+    --swiper-pagination-inline: var(--s3);
+    --swiper-pagination-block: var(--s2);
+    --swiper-indicator-size: 8px;
+    --swiper-indicator-bg: rgb(255 255 255 / 62%);
+    --swiper-indicator-hover-bg: rgb(255 255 255 / 86%);
+    --swiper-indicator-active-width: 22px;
+    --swiper-indicator-active-bg: #fff;
+    --swiper-navigation-size: 36px;
+    --swiper-navigation-fg: #fff;
+    --swiper-navigation-bg: rgb(0 0 0 / 35%);
+    --swiper-navigation-hover-bg: rgb(0 0 0 / 65%);
+    --swiper-navigation-offset: var(--s2);
+    --swiper-navigation-icon-size: 18px;
+  }
 
-    @media (max-width: 640px) {
-        .j-swiper {
-            --swiper-title-font-size: var(--font-size-md);
-            --swiper-title-inset: var(--s2);
-            --swiper-navigation-size: 32px;
-        }
+  @media (max-width: 640px) {
+    .j-swiper {
+      --swiper-title-font-size: var(--font-size-md);
+      --swiper-title-inset: var(--s2);
+      --swiper-navigation-size: 32px;
     }
-}
+  }
+}

package/src/css/themes/default/table.css

@@ -1,18 +1,18 @@
 @layer themes {
-    .j-table-container {
-        --table-container-max-width: 100%;
-    }
+  .j-table-container {
+    --table-container-max-width: 100%;
+  }
 
-    .j-table {
-        --table-selected-bg: var(--tone-soft);
-        --table-border-width: 0 0 1px;
-        --table-border-style: solid;
-        --table-border-color: var(--ui-border);
-        --table-cell-padding: 0.5em 0.75em;
-        --table-cell-text-align: left;
-        --table-link-fg: var(--tone-solid);
-        --table-striped-bg: var(--tone-soft);
-        --table-hover-bg: var(--tone-soft);
-        --table-bordered-width: 1px;
-    }
-}
+  .j-table {
+    --table-selected-bg: var(--tone-soft);
+    --table-border-width: 0 0 1px;
+    --table-border-style: solid;
+    --table-border-color: var(--ui-border);
+    --table-cell-padding: 0.5em 0.75em;
+    --table-cell-text-align: left;
+    --table-link-fg: var(--tone-solid);
+    --table-striped-bg: var(--tone-soft);
+    --table-hover-bg: var(--tone-soft);
+    --table-bordered-width: 1px;
+  }
+}

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

@@ -1,37 +1,37 @@
 @layer themes {
-    .j-tabs {
-        --tab-list-item-padding: var(--s2) var(--s3);
-        --tab-list-item-margin: 0;
-        --tab-wrap-border: 1px solid var(--ui-border-subtle);
-        --tab-panel-padding: var(--s2) var(--s3);
-        --tab-panel-margin: 0;
-        --tab-panel-item-margin: 0;
-        --tab-panel-item-min-height: 1.25em;
-        --tab-panel-item-content-margin: 0;
-    }
+  .j-tabs {
+    --tab-list-item-padding: var(--s2) var(--s3);
+    --tab-list-item-margin: 0;
+    --tab-list-font-weight: var(--font-medium);
+    --tab-wrap-border: 1px solid var(--ui-border-subtle);
+    --tab-panel-padding: var(--s2) var(--s3);
+    --tab-panel-margin: 0;
+    --tab-panel-item-margin: 0;
+    --tab-panel-item-min-height: 1.25em;
+    --tab-panel-item-content-margin: 0;
+  }
 
-    .j-tabs.is-top .tab-wrap {
-        border-bottom: var(--tab-wrap-border);
-    }
+  .j-tabs[data-tabs-direction='top'] .tab-wrap {
+    border-bottom: var(--tab-wrap-border);
+  }
 
-    .j-tabs.is-bottom .tab-wrap {
-        border-top: var(--tab-wrap-border);
-    }
+  .j-tabs[data-tabs-direction='bottom'] .tab-wrap {
+    border-top: var(--tab-wrap-border);
+  }
 
-    .j-tabs.is-left .tab-wrap {
-        border-right: var(--tab-wrap-border);
-    }
+  .j-tabs[data-tabs-direction='left'] .tab-wrap {
+    border-right: var(--tab-wrap-border);
+  }
 
-    .j-tabs.is-right .tab-wrap {
-        border-left: var(--tab-wrap-border);
-    }
+  .j-tabs[data-tabs-direction='right'] .tab-wrap {
+    border-left: var(--tab-wrap-border);
+  }
 
-    .j-tabs .tab-list .tab-item[aria-selected="true"] {
-        --tab-fg: var(--tone-solid);
-        --tab-font-weight: var(--font-medium);
-    }
+  .j-tabs .tab-list .tab-item[aria-selected='true'] {
+    --tab-fg: var(--tone-solid);
+  }
 
-    .j-tabs .tab-list .tab-item[aria-disabled="true"] {
-        --tab-fg: var(--ui-border-strong);
-    }
-}
+  .j-tabs .tab-list .tab-item[aria-disabled='true'] {
+    --tab-fg: var(--ui-border-strong);
+  }
+}

package/src/css/themes/default/tag.css

@@ -1,85 +1,85 @@
 @layer themes {
-    .j-tag {
-        --tag-gap: var(--space);
-        --tag-fg: var(--ui-fg);
-        --tag-bg: var(--ui-bg);
-        --tag-font-size: var(--font-size-sm);
-        --tag-font-weight: var(--font-normal);
-        --tag-line-height: var(--line-height-self);
-        --tag-height: var(--el-height-xs);
-        --tag-padding: 0 calc(var(--space) * 1.5);
-        --tag-border-width: 1px;
-        --tag-border-style: solid;
-        --tag-border-color: var(--ui-border);
-        --tag-border-radius: var(--radius-md);
-        --tag-box-shadow: var(--shadow-sm);
-    }
+  .j-tag {
+    --tag-gap: var(--space);
+    --tag-fg: var(--ui-fg);
+    --tag-bg: var(--ui-bg);
+    --tag-font-size: var(--font-size-sm);
+    --tag-font-weight: var(--font-normal);
+    --tag-line-height: var(--line-height-self);
+    --tag-height: var(--el-height-xs);
+    --tag-padding: 0 calc(var(--space) * 1.5);
+    --tag-border-width: 1px;
+    --tag-border-style: solid;
+    --tag-border-color: var(--ui-border);
+    --tag-border-radius: var(--radius-md);
+    --tag-box-shadow: var(--shadow-sm);
+  }
 
-    .j-font-md .j-tag {
-        --tag-padding: 0 var(--s2);
-    }
+  .j-font-md .j-tag {
+    --tag-padding: 0 var(--s2);
+  }
 
-    .j-tag.is-contrast {
-        --tag-fg: var(--ui-bg);
-        --tag-bg: var(--ui-fg);
-    }
+  .j-tag.is-contrast {
+    --tag-fg: var(--ui-bg);
+    --tag-bg: var(--ui-fg);
+  }
 
-    .j-tag.is-primary {
-        --tag-bg: var(--tone-solid);
-        --tag-fg: var(--tone-fg);
-        --tag-border-color: var(--tone-solid);
-    }
+  .j-tag.is-primary {
+    --tag-bg: var(--tone-solid);
+    --tag-fg: var(--tone-fg);
+    --tag-border-color: var(--tone-solid);
+  }
 
-    .j-tag.is-secondary {
-        --tag-bg: var(--tone-soft);
-        --tag-fg: var(--tone-text);
-        --tag-border-color: transparent;
-    }
+  .j-tag.is-secondary {
+    --tag-bg: var(--tone-soft);
+    --tag-fg: var(--tone-text);
+    --tag-border-color: transparent;
+  }
 
-    .j-tag.is-outline {
-        --tag-bg: transparent;
-        --tag-fg: var(--tone-solid);
-        --tag-border-color: var(--tone-solid);
-    }
+  .j-tag.is-outline {
+    --tag-bg: transparent;
+    --tag-fg: var(--tone-solid);
+    --tag-border-color: var(--tone-solid);
+  }
 
-    .j-tag.is-ghost {
-        --tag-border-color: transparent;
-        --tag-box-shadow: none;
-    }
+  .j-tag.is-ghost {
+    --tag-border-color: transparent;
+    --tag-box-shadow: none;
+  }
 
-    .j-tag img,
-    .j-tag svg {
-        --tag-icon-size: var(--font-size-sm);
-    }
+  .j-tag img,
+  .j-tag svg {
+    --tag-icon-size: var(--font-size-sm);
+  }
 
-    .j-tag.is-default:hover {
-        background: var(--ui-surface-hover);
-    }
+  .j-tag.is-default:hover {
+    background: var(--ui-surface-hover);
+  }
 
-    .j-tag.is-outline:hover,
-    .j-tag.is-ghost:hover {
-        background: var(--tone-subtle);
-    }
+  .j-tag.is-outline:hover,
+  .j-tag.is-ghost:hover {
+    background: var(--tone-subtle);
+  }
 
-    .j-tag .el-icon[data-action='close']:hover {
-        color: var(--tone-fg);
-        background: var(--tone-solid);
-        border-radius: 50%;
-    }
+  .j-tag .el-icon[data-action='close']:hover {
+    color: var(--tone-fg);
+    background: var(--tone-solid);
+    border-radius: 50%;
+  }
 
-    .j-tag.is-default .el-icon[data-action='close']:hover,
-    .j-tag.is-ghost .el-icon[data-action='close']:hover {
-        background: var(--ui-fg);
-        color: var(--ui-bg-subtle);
-    }
+  .j-tag.is-default .el-icon[data-action='close']:hover,
+  .j-tag.is-ghost .el-icon[data-action='close']:hover {
+    background: var(--ui-fg);
+    color: var(--ui-bg-subtle);
+  }
 
-    .j-tag.is-contrast .el-icon[data-action='close']:hover {
-        color: var(--ui-fg);
-        background: var(--ui-bg);
-    }
+  .j-tag.is-contrast .el-icon[data-action='close']:hover {
+    color: var(--ui-fg);
+    background: var(--ui-bg);
+  }
 
-    .j-tag.is-primary .el-icon[data-action='close']:hover {
-        color: var(--tone-solid);
-        background: var(--tone-fg);
-    }
-}
+  .j-tag.is-primary .el-icon[data-action='close']:hover {
+    color: var(--tone-solid);
+    background: var(--tone-fg);
+  }
+}

package/src/css/themes/default/theme-palette.css

@@ -1,12 +1,12 @@
 @layer themes {
-    .j-theme-palette {
-        --palette-padding: 1rem 1rem 2rem;
-        --palette-container-gap: var(--s4);
-        --palette-item-gap: var(--s2);
-        --palette-item-title-font-size: var(--font-size-md);
-        --palette-item-title-font-weight: var(--font-bold);
-        --palette-items-columns: repeat(3, 1fr);
-        --palette-items-gap: var(--space);
-        --palette-items-icon-size: var(--font-size-sm);
-    }
-}
+  .j-theme-palette {
+    --palette-padding: 1rem 1rem 2rem;
+    --palette-container-gap: var(--s4);
+    --palette-item-gap: var(--s2);
+    --palette-item-title-font-size: var(--font-size-md);
+    --palette-item-title-font-weight: var(--font-bold);
+    --palette-items-columns: repeat(3, 1fr);
+    --palette-items-gap: var(--space);
+    --palette-items-icon-size: var(--font-size-sm);
+  }
+}