vanilla-jui 1.4.0 → 1.4.2

package/src/css/offcanvas.css

@@ -5,11 +5,10 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--offcanvas-overlay-background,
-        var(--ui-overlay-muted));
-    z-index: var(--z-overlay);
     opacity: 0;
     transition: opacity 0.3s ease;
+    background: var(--offcanvas-overlay-bg);
+    z-index: var(--z-overlay);
   }
 
   .j-offcanvas-overlay.is-active {
@@ -19,25 +18,23 @@
   .j-offcanvas {
     position: fixed;
     z-index: var(--z-offcanvas);
-    background: var(--offcanvas-background, var(--ui-bg));
-    box-shadow: var(--offcanvas-box-shadow, var(--shadow-md));
-    --offcanvas-border: 1px solid var(--ui-border-subtle);
+    background: var(--offcanvas-bg);
+    box-shadow: var(--offcanvas-box-shadow);
   }
 
-  .j-offcanvas.is-slide,
-  .j-offcanvas.is-push {
+  .j-offcanvas.is-slide {
     transition: transform 0.3s ease;
   }
 
-  .j-offcanvas:not(.is-slide):not(.is-push) {
+  .j-offcanvas:not(.is-slide) {
     transition: none;
   }
 
   .j-offcanvas.is-left {
     top: 0;
     left: 0;
-    width: 300px;
-    height: 100%;
+    width: var(--offcanvas-block-width);
+    height: 100vh;
     transform: translateX(-100%);
     border-right: var(--offcanvas-border);
   }
@@ -45,8 +42,8 @@
   .j-offcanvas.is-right {
     top: 0;
     right: 0;
-    width: 300px;
-    height: 100%;
+    width: var(--offcanvas-block-width);
+    height: 100vh;
     transform: translateX(100%);
     border-left: var(--offcanvas-border);
   }
@@ -55,7 +52,7 @@
     top: 0;
     left: 0;
     width: 100%;
-    height: 200px;
+    height: var(--offcanvas-inline-height);
     transform: translateY(-100%);
     border-bottom: var(--offcanvas-border);
   }
@@ -64,41 +61,18 @@
     bottom: 0;
     left: 0;
     width: 100%;
-    height: 200px;
+    height: var(--offcanvas-inline-height);
     transform: translateY(100%);
     border-top: var(--offcanvas-border);
   }
 
-  .j-offcanvas.is-slide.is-active,
-  .j-offcanvas.is-active:not(.is-push) {
+  .j-offcanvas.is-active {
     transform: translate(0, 0);
   }
 
-  .offcanvas-push-body {
-    transition: transform 0.3s ease;
-    overflow: hidden;
-  }
-
-  .offcanvas-push-left {
-    transform: translateX(300px);
-  }
-
-  .offcanvas-push-right {
-    transform: translateX(-300px);
-  }
-
-  .offcanvas-push-top {
-    transform: translateY(200px);
-  }
-
-  .offcanvas-push-bottom {
-    transform: translateY(-200px);
-  }
-
   .j-offcanvas .offcanvas-content {
     height: 100%;
     overflow-y: auto;
-    box-sizing: border-box;
     position: relative;
   }
-}
+}

package/src/css/pagination.css

@@ -1,11 +1,11 @@
 @layer components {
   .j-pagination {
-    font-size: var(--pagination-font-size, var(--font-size-md));
+    font-size: var(--pagination-font-size);
   }
 
   .j-pagination a {
-    text-decoration: none;
-    color: var(--pagination-link-color, var(--ui-fg));
+    text-decoration: var(--pagination-link-decoration);
+    color: var(--pagination-link-fg);
   }
 
   .j-pagination .pagination {
@@ -13,7 +13,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: var(--pagination-gap, var(--space));
+    gap: var(--pagination-gap);
     margin: 0;
     padding: 0;
   }

package/src/css/popup.css

@@ -1,14 +1,14 @@
 @layer components {
   .j-popup-layout {
+    display: flex;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--popup-background, var(--ui-popup-background));
-    backdrop-filter: var(--popup-backdrop-filter, blur(4px));
-    display: flex;
-    padding: var(--popup-layout-padding, var(--s4));
+    background: var(--popup-bg);
+    backdrop-filter: var(--popup-backdrop-filter);
+    padding: var(--popup-layout-padding);
     z-index: var(--z-popup);
   }
 

package/src/css/status.css

@@ -14,8 +14,6 @@
     filter: grayscale(100%);
   }
 
-
-
   /* readonly */
   [readonly] {
     opacity: var(--opacity-readonly);
@@ -49,7 +47,8 @@
   /* disabled */
   [disabled],
   :disabled,
-  .is-disabled {
+  .is-disabled,
+  [aria-disabled="true"] {
     cursor: not-allowed;
     user-select: none;
   }

package/src/css/swiper.css

@@ -18,7 +18,7 @@
   .j-swiper .swiper-slide {
     position: relative;
     display: block;
-    width: var(--swiper-slide-width, 100%);
+    width: 100%;
     min-width: 100%;
     overflow: hidden;
     color: inherit;
@@ -30,52 +30,52 @@
     display: block;
     width: 100%;
     height: 100%;
-    min-height: var(--swiper-min-height, 180px);
+    min-height: var(--swiper-min-height);
     object-fit: cover;
     pointer-events: none;
   }
 
   .j-swiper .swiper-slide-title {
-    position: absolute;
-    right: var(--swiper-title-inset, var(--s3));
-    bottom: var(--swiper-title-inset, var(--s3));
-    left: var(--swiper-title-inset, var(--s3));
-    z-index: 1;
     display: block;
-    padding: calc(var(--space) * 1.5) var(--s2);
-    overflow: hidden;
-    color: var(--swiper-title-color, #fff);
-    font-size: var(--swiper-title-font-size, var(--font-size-lg));
-    font-weight: var(--font-weight-bold, 700);
-    line-height: 1.35;
+    position: absolute;
+    right: var(--swiper-title-inset);
+    bottom: var(--swiper-title-inset);
+    left: var(--swiper-title-inset);
+    padding: var(--swiper-title-padding);
+    color: var(--swiper-title-color);
+    font-size: var(--swiper-title-font-size);
+    font-weight: var(--swiper-title-font-weight);
+    background: var(--swiper-title-bg);
+    border-radius: var(--swiper-title-border-radius);
+    line-height: var(--swiper-title-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
-    background: var(--swiper-title-background, rgb(0 0 0 / 35%));
-    border-radius: var(--radius-sm);
+    z-index: 1;
+    overflow: hidden;
   }
 
   .j-swiper .swiper-pagination {
     position: absolute;
-    z-index: 2;
     display: flex;
-    gap: var(--swiper-pagination-gap, 7px);
+    gap: var(--swiper-pagination-gap);
     align-items: center;
     justify-content: center;
+    z-index: 2;
   }
 
   .j-swiper .swiper-pagination.is-horizontal {
-    right: var(--s3);
-    bottom: var(--s2);
-    left: var(--s3);
+    right: var(--swiper-pagination-inline);
+    bottom: var(--swiper-pagination-block);
+    left: var(--swiper-pagination-inline);
   }
 
   .j-swiper .swiper-pagination-indicator {
     display: inline-block;
-    width: var(--swiper-indicator-size, 8px);
-    height: var(--swiper-indicator-size, 8px);
+    width: var(--swiper-indicator-size);
+    height: var(--swiper-indicator-size);
     padding: 0;
     cursor: pointer;
-    background: var(--swiper-indicator-background, rgb(255 255 255 / 62%));
+    background: var(--swiper-indicator-bg);
     border: 0;
     border-radius: 999px;
     outline: none;
@@ -87,14 +87,13 @@
 
   .j-swiper .swiper-pagination-indicator:hover,
   .j-swiper .swiper-pagination-indicator:focus-visible {
-    background: var(--swiper-indicator-hover-background,
-        rgb(255 255 255 / 86%));
+    background: var(--swiper-indicator-hover-bg);
   }
 
   .j-swiper .swiper-pagination-indicator.is-active,
   .j-swiper .swiper-pagination-indicator.active {
-    width: var(--swiper-indicator-active-width, 22px);
-    background: var(--swiper-indicator-active-background, #fff);
+    width: var(--swiper-indicator-active-width);
+    background: var(--swiper-indicator-active-bg);
   }
 
   .j-swiper .swiper-navigation {
@@ -104,12 +103,12 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--swiper-navigation-size, 36px);
-    height: var(--swiper-navigation-size, 36px);
+    width: var(--swiper-navigation-size);
+    height: var(--swiper-navigation-size);
     padding: 0;
-    color: var(--swiper-navigation-color, #fff);
+    color: var(--swiper-navigation-fg);
     cursor: pointer;
-    background: var(--swiper-navigation-background, rgb(0 0 0 / 35%));
+    background: var(--swiper-navigation-bg);
     border: 0;
     border-radius: 999px;
     transform: translateY(-50%);
@@ -120,21 +119,21 @@
 
   .j-swiper .swiper-navigation:hover,
   .j-swiper .swiper-navigation:focus-visible {
-    background: var(--swiper-navigation-hover-background, rgb(0 0 0 / 65%));
+    background: var(--swiper-navigation-hover-bg);
     outline: none;
   }
 
   .j-swiper .swiper-navigation.is-prev {
-    left: var(--s2);
+    left: var(--swiper-navigation-offset);
   }
 
   .j-swiper .swiper-navigation.is-next {
-    right: var(--s2);
+    right: var(--swiper-navigation-offset);
   }
 
   .j-swiper .swiper-navigation svg {
-    width: var(--swiper-navigation-icon-size, 18px);
-    height: var(--swiper-navigation-icon-size, 18px);
+    width: var(--swiper-navigation-icon-size);
+    height: var(--swiper-navigation-icon-size);
     pointer-events: none;
   }
 
@@ -143,18 +142,4 @@
     cursor: default;
     opacity: 0.36;
   }
-
-  @media (max-width: 640px) {
-    .j-swiper .swiper-slide-title {
-      right: var(--s2);
-      bottom: var(--s2);
-      left: var(--s2);
-      font-size: var(--font-size-md);
-    }
-
-    .j-swiper .swiper-navigation {
-      width: 32px;
-      height: 32px;
-    }
-  }
 }

package/src/css/table.css

@@ -1,8 +1,10 @@
 @layer components {
   .j-table-container {
-    max-width: 100%;
-    overflow: auto;
+    max-width: var(--table-container-max-width);
     overflow-y: hidden;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--ui-border) transparent;
   }
 
   table.j-table {
@@ -11,42 +13,40 @@
     border-collapse: collapse;
     border-spacing: 0;
   }
+
   table.j-table tr.is-selected {
-    background-color: var(--table-selected-background, var(--tone-soft));
+    background: var(--table-selected-bg);
   }
 
   table.j-table td,
   table.j-table th {
-    border-width: var(--table-border-width, 0 0 1px);
-    border-style: var(--table-border-style, solid);
-    border-color: var(--table-border-color, var(--ui-border));
-    padding: var(--table-padding, 0.5em 0.75em);
-  }
-
-  table.j-table th:not([align]) {
-    text-align: var(--table-cell-text-align, left);
+    border-width: var(--table-border-width);
+    border-style: var(--table-border-style);
+    border-color: var(--table-border-color);
+    padding: var(--table-cell-padding);
   }
 
-  table.j-table td:not([align]),
-  table.j-table th:not([align]) {
-    text-align: inherit;
+  table.j-table th:not([align]),
+  table.j-table td:not([align]) {
+    text-align: var(--table-cell-text-align);
   }
 
   table.j-table a {
-    text-decoration: var(--table-link-decoration, inherit);
-    color: var(--table-link-color, var(--tone-solid));
+    text-decoration: inherit;
+    color: var(--table-link-fg);
   }
 
   table.j-table.is-striped thead tr,
   table.j-table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
-    background-color: var(--table-striped-background, var(--tone-soft));
+    background: var(--table-striped-bg);
   }
+
   table.j-table.is-hoverable tbody tr:hover {
-    background-color: var(--table-hover-background, var(--tone-soft));
+    background: var(--table-hover-bg);
   }
 
   table.j-table.is-bordered td,
   table.j-table.is-bordered th {
-    border-width: var(--table-border-width, var(--border-width, 1px));
+    border-width: var(--table-bordered-width);
   }
-}
+}

package/src/css/tabs.css

@@ -39,58 +39,35 @@
   }
 
   .j-tabs .tab-list .tab-item {
+    padding: var(--tab-list-item-padding);
+    margin: var(--tab-list-item-margin);
+    color: var(--tab-fg);
+    font-weight: var(--tab-font-weight);
     flex-shrink: 0;
-    padding: var(--tab-list-item-padding, var(--s2) var(--s3));
-    margin: var(--tab-list-item-margin, 0);
     cursor: pointer;
   }
 
-  .j-tabs.is-top .tab-wrap {
-    border-bottom: var(--tab-wrap-bottom-border, 1px solid var(--ui-border-subtle));
-  }
-
-  .j-tabs.is-bottom .tab-wrap {
-    border-top: var(--tab-wrap-top-border, 1px solid var(--ui-border-subtle));
-  }
-
-  .j-tabs.is-left .tab-wrap {
-    border-right: var(--tab-wrap-right-border, 1px solid var(--ui-border-subtle));
-  }
-
-  .j-tabs.is-right .tab-wrap {
-    border-left: var(--tab-wrap-left-border, 1px solid var(--ui-border-subtle));
-  }
-
-  .j-tabs .tab-list .tab-item.is-active {
-    color: var(--tone-solid);
-    font-weight: var(--font-medium);
-    /* text-decoration: underline;
-    text-decoration-color: var(--tone-solid);
-    text-underline-offset: var(--space); */
-  }
-
-  .j-tabs .tab-list .tab-item.is-disabled {
-    color: var(--ui-border-strong);
+  .j-tabs .tab-list .tab-item[aria-disabled="true"] {
     cursor: not-allowed;
   }
 
   .j-tabs .tab-panel {
-    padding: var(--tab-panel-padding, var(--s2) var(--s3));
-    margin: var(--tab-panel-margin, 0);
+    padding: var(--tab-panel-padding);
+    margin: var(--tab-panel-margin);
   }
 
   .j-tabs .tab-panel .panel-item {
     display: none;
-    margin: var(--tab-panel-item-margin, 0);
+    margin: var(--tab-panel-item-margin);
     position: relative;
-    min-height: 1.25em;
+    min-height: var(--tab-panel-item-min-height);
   }
 
-  .j-tabs .tab-panel .panel-item.is-active {
+  .j-tabs .tab-panel .panel-item[aria-hidden="false"] {
     display: block;
   }
 
   .j-tabs .tab-panel .panel-item>* {
-    margin: 0;
+    margin: var(--tab-panel-item-content-margin);
   }
 }

package/src/css/tag.css

@@ -3,49 +3,19 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    gap: var(--tag-gap, var(--space));
-    padding: 0 var(--tag-padding, calc(var(--space) * 1.5));
-    height: var(--tag-height, var(--el-height-xs));
-    line-height: var(--tag-line-height, var(--line-height-self));
-    font-size: var(--tag-font-size, var(--font-size-sm));
-    font-weight: var(--font-normal);
-    border-radius: var(--tag-radius, var(--radius-md));
-    border: 1px solid var(--tag-border-color, var(--ui-border));
-    color: var(--tag-foreground, var(--ui-fg));
-    background: var(--tag-background, var(--ui-bg));
-    box-shadow: var(--tag-box-shadow, var(--shadow-sm));
-  }
-
-  .j-font-md .j-tag {
-    --tag-padding: var(--s2);
-  }
-
-  .j-tag.is-contrast {
-    --tag-background: var(--ui-fg);
-    --tag-foreground: var(--ui-bg);
-  }
-
-  .j-tag.is-primary {
-    --tag-background: var(--tone-solid);
-    --tag-foreground: var(--tone-fg);
-    --tag-border-color: var(--tone-solid);
-  }
-
-  .j-tag.is-secondary {
-    --tag-background: var(--tone-soft);
-    --tag-foreground: var(--tone-text);
-    --tag-border-color: transparent;
-  }
-
-  .j-tag.is-outline {
-    --tag-background: transparent;
-    --tag-foreground: var(--tone-solid);
-    --tag-border-color: var(--tone-solid);
-  }
-
-  .j-tag.is-ghost {
-    --tag-border-color: transparent;
-    --tag-shadow: none;
+    gap: var(--tag-gap);
+    padding: var(--tag-padding);
+    height: var(--tag-height);
+    line-height: var(--tag-line-height);
+    font-size: var(--tag-font-size);
+    font-weight: var(--tag-font-weight);
+    border-width: var(--tag-border-width);
+    border-style: var(--tag-border-style);
+    border-color: var(--tag-border-color);
+    border-radius: var(--tag-border-radius);
+    color: var(--tag-fg);
+    background: var(--tag-bg);
+    box-shadow: var(--tag-box-shadow);
   }
 
   .j-tag span {
@@ -56,42 +26,11 @@
 
   .j-tag img,
   .j-tag svg {
-    width: var(--tag-icon-size, var(--font-size-sm));
-    height: var(--tag-icon-size, var(--font-size-sm));
+    width: var(--tag-icon-size);
+    height: var(--tag-icon-size);
   }
 
   .j-tag:hover {
-    opacity: var(--opacity-hover, 0.9);
-  }
-
-  .j-tag.is-default:hover {
-    background-color: var(--ui-surface-hover);
-  }
-
-  .j-tag.is-outline:hover,
-  .j-tag.is-ghost:hover {
-    background-color: var(--tone-subtle);
-  }
-
-  .j-tag .el-icon[data-action='close']:hover {
-    color: var(--tone-fg);
-    background-color: 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-color: var(--ui-fg);
-    color: var(--ui-bg-subtle);
-  }
-
-  .j-tag.is-contrast .el-icon[data-action='close']:hover {
-    color: var(--ui-fg);
-    background-color: var(--ui-bg);
-  }
-
-  .j-tag.is-primary .el-icon[data-action='close']:hover {
-    color: var(--tone-solid);
-    background-color: var(--tone-fg);
+    opacity: var(--opacity-hover);
   }
 }

package/src/css/theme-palette.css

@@ -1,40 +1,33 @@
 @layer components {
   .j-theme-palette {
-    padding: var(--palette-padding, var(--s4));
-  }
-
-  .j-theme-palette>h3 {
-    margin: var(--palette-title-margin, var(--s2) 0);
+    padding: var(--palette-padding);
   }
 
   .j-theme-palette .palette-container {
     display: flex;
     flex-direction: column;
-    gap: var(--palette-container-gap, var(--s4));
+    gap: var(--palette-container-gap);
   }
 
   .j-theme-palette .palette-container .palette-item {
     display: flex;
     flex-direction: column;
-    gap: var(--palette-item-gap, var(--s2));
+    gap: var(--palette-item-gap);
   }
 
   .j-theme-palette .palette-container .palette-item .item-title {
-    font-size: var(--palette-item-title-font-size, var(--font-size-md));
-    line-height: var(--line-height);
-    margin: 0;
-    font-weight: var(--font-bold);
+    font-size: var(--palette-item-title-font-size);
+    font-weight: var(--palette-item-title-font-weight);
   }
 
   .j-theme-palette .palette-container .palette-item .items {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: var(--space);
+    grid-template-columns: var(--palette-items-columns);
+    gap: var(--palette-items-gap);
   }
 
   .j-theme-palette .palette-container .palette-item .items>button {
-    padding-left: var(--s2);
-    padding-right: var(--s2);
+    padding-inline: var(--s2);
     min-width: 0;
     overflow: hidden;
   }
@@ -45,8 +38,8 @@
 
   .j-theme-palette .palette-container .palette-item .items>button span.item-hex {
     display: inline-block;
-    width: var(--font-size-sm);
-    height: var(--font-size-sm);
+    width: var(--palette-items-icon-size);
+    height: var(--palette-items-icon-size);
     border-radius: 50%;
     flex-shrink: 0;
     margin-right: var(--space);