vanilla-jui 1.4.5 → 1.4.7

package/src/css/modal.css

@@ -62,4 +62,4 @@
     padding: var(--modal-footer-padding);
     border-top: var(--modal-footer-top-border);
   }
-}
+}

package/src/css/offcanvas.css

@@ -5,16 +5,11 @@
     left: 0;
     width: 100%;
     height: 100%;
-    opacity: 0;
     transition: opacity 0.3s ease;
     background: var(--offcanvas-overlay-bg);
     z-index: var(--z-overlay);
   }
 
-  .j-offcanvas-overlay.is-active {
-    opacity: 1;
-  }
-
   .j-offcanvas {
     position: fixed;
     z-index: var(--z-offcanvas);
@@ -22,15 +17,15 @@
     box-shadow: var(--offcanvas-box-shadow);
   }
 
-  .j-offcanvas.is-slide {
+  .j-offcanvas[data-animate='slide'] {
     transition: transform 0.3s ease;
   }
 
-  .j-offcanvas:not(.is-slide) {
+  .j-offcanvas:not([data-animate='slide']) {
     transition: none;
   }
 
-  .j-offcanvas.is-left {
+  .j-offcanvas[data-direction='left'] {
     top: 0;
     left: 0;
     width: var(--offcanvas-block-width);
@@ -39,7 +34,7 @@
     border-right: var(--offcanvas-border);
   }
 
-  .j-offcanvas.is-right {
+  .j-offcanvas[data-direction='right'] {
     top: 0;
     right: 0;
     width: var(--offcanvas-block-width);
@@ -48,7 +43,7 @@
     border-left: var(--offcanvas-border);
   }
 
-  .j-offcanvas.is-top {
+  .j-offcanvas[data-direction='top'] {
     top: 0;
     left: 0;
     width: 100%;
@@ -57,7 +52,7 @@
     border-bottom: var(--offcanvas-border);
   }
 
-  .j-offcanvas.is-bottom {
+  .j-offcanvas[data-direction='bottom'] {
     bottom: 0;
     left: 0;
     width: 100%;
@@ -66,13 +61,14 @@
     border-top: var(--offcanvas-border);
   }
 
-  .j-offcanvas.is-active {
+  .j-offcanvas[aria-expanded='true'] {
     transform: translate(0, 0);
   }
 
   .j-offcanvas .offcanvas-content {
+    position: relative;
     height: 100%;
     overflow-y: auto;
-    position: relative;
+    scrollbar-width: none;
   }
 }

package/src/css/pagination.css

@@ -22,4 +22,8 @@
   .j-pagination .is-active {
     cursor: default;
   }
-}
+
+  .j-pagination ul.pagination li {
+    margin: 0;
+  }
+}

package/src/css/popup.css

@@ -66,4 +66,4 @@
     justify-content: flex-end;
     align-items: flex-end;
   }
-}
+}

package/src/css/skeleton.css

@@ -12,7 +12,8 @@
     color: transparent;
     pointer-events: none;
     user-select: none;
-    animation: animate-pulse var(--skeleton-duration) cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    animation: animate-pulse var(--skeleton-duration)
+      cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
   .j-skeleton::selection {
@@ -73,4 +74,4 @@
       animation: none;
     }
   }
-}
+}

package/src/css/status.css

@@ -8,7 +8,6 @@
  * - drag status
  */
 @layer status {
-
   /* sad mode */
   .is-sad {
     filter: grayscale(100%);
@@ -48,8 +47,8 @@
   [disabled],
   :disabled,
   .is-disabled,
-  [aria-disabled="true"] {
+  [aria-disabled='true'] {
     cursor: not-allowed;
     user-select: none;
   }
-}
+}

package/src/css/swiper.css

@@ -142,4 +142,4 @@
     cursor: default;
     opacity: 0.36;
   }
-}
+}

package/src/css/table.css

@@ -49,4 +49,4 @@
   table.j-table.is-bordered th {
     border-width: var(--table-bordered-width);
   }
-}
+}

package/src/css/tabs.css

@@ -4,19 +4,19 @@
   }
 
   .j-tabs,
-  .j-tabs.is-top {
+  .j-tabs[data-tabs-direction='top'] {
     flex-direction: column;
   }
 
-  .j-tabs.is-bottom {
+  .j-tabs[data-tabs-direction='bottom'] {
     flex-direction: column-reverse;
   }
 
-  .j-tabs.is-left {
+  .j-tabs[data-tabs-direction='left'] {
     flex-direction: row;
   }
 
-  .j-tabs.is-right {
+  .j-tabs[data-tabs-direction='right'] {
     flex-direction: row-reverse;
   }
 
@@ -33,8 +33,8 @@
     scroll-behavior: smooth;
   }
 
-  .j-tabs.is-left .tab-list,
-  .j-tabs.is-right .tab-list {
+  .j-tabs[data-tabs-direction='left'] .tab-list,
+  .j-tabs[data-tabs-direction='right'] .tab-list {
     flex-direction: column;
   }
 
@@ -42,18 +42,19 @@
     padding: var(--tab-list-item-padding);
     margin: var(--tab-list-item-margin);
     color: var(--tab-fg);
-    font-weight: var(--tab-font-weight);
+    font-weight: var(--tab-list-font-weight);
     flex-shrink: 0;
     cursor: pointer;
   }
 
-  .j-tabs .tab-list .tab-item[aria-disabled="true"] {
+  .j-tabs .tab-list .tab-item[aria-disabled='true'] {
     cursor: not-allowed;
   }
 
   .j-tabs .tab-panel {
     padding: var(--tab-panel-padding);
     margin: var(--tab-panel-margin);
+    flex: 1;
   }
 
   .j-tabs .tab-panel .panel-item {
@@ -63,11 +64,11 @@
     min-height: var(--tab-panel-item-min-height);
   }
 
-  .j-tabs .tab-panel .panel-item[aria-hidden="false"] {
+  .j-tabs .tab-panel .panel-item[aria-hidden='false'] {
     display: block;
   }
 
-  .j-tabs .tab-panel .panel-item>* {
+  .j-tabs .tab-panel .panel-item > * {
     margin: var(--tab-panel-item-content-margin);
   }
-}
+}

package/src/css/tag.css

@@ -33,4 +33,4 @@
   .j-tag:hover {
     opacity: var(--opacity-hover);
   }
-}
+}

package/src/css/theme-palette.css

@@ -26,17 +26,26 @@
     gap: var(--palette-items-gap);
   }
 
-  .j-theme-palette .palette-container .palette-item .items>button {
+  .j-theme-palette .palette-container .palette-item .items > button {
     padding-inline: var(--s2);
     min-width: 0;
     overflow: hidden;
   }
 
-  .j-theme-palette .palette-container .palette-item[data-palette='theme'] .items>button {
+  .j-theme-palette
+    .palette-container
+    .palette-item[data-palette='theme']
+    .items
+    > button {
     justify-content: flex-start;
   }
 
-  .j-theme-palette .palette-container .palette-item .items>button span.item-hex {
+  .j-theme-palette
+    .palette-container
+    .palette-item
+    .items
+    > button
+    span.item-hex {
     display: inline-block;
     width: var(--palette-items-icon-size);
     height: var(--palette-items-icon-size);
@@ -45,8 +54,13 @@
     margin-right: var(--space);
   }
 
-  .j-theme-palette .palette-container .palette-item .items>button span.button-text {
+  .j-theme-palette
+    .palette-container
+    .palette-item
+    .items
+    > button
+    span.button-text {
     overflow: hidden;
     text-overflow: ellipsis;
   }
-}
+}

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

@@ -1,62 +1,62 @@
 @layer themes {
-    .j-accordion {
-        --accordion-font-size: var(--font-size-md);
-        --accordion-font-weight: var(--font-medium);
-        --accordion-header-font-size: var(--font-size-md);
-        --accordion-header-padding: var(--s2) var(--s3);
-        --accordion-header-margin: 0;
-        --accordion-border: 1px solid var(--ui-border-subtle);
-        --accordion-icon-size: var(--font-size-lg);
-        --accordion-icon-transform: rotate(0deg);
-        --accordion-panel-margin: 0;
-        --accordion-panel-content-margin: 0;
-        --accordion-panel-content-padding: 0 var(--s3) var(--s2);
-    }
-
-    .j-accordion .accordion-header {
-        padding: var(--accordion-header-padding);
-        margin: var(--accordion-header-margin);
-        font-weight: var(--accordion-font-weight);
-        font-size: var(--accordion-header-font-size);
-        background: var(--accordion-bg);
-        border-bottom: var(--accordion-border);
-    }
-
-    .j-accordion .accordion-header[aria-expanded="true"] {
-        border-color: transparent;
-    }
-
-    .j-accordion .accordion-header[aria-expanded="true"] .header-title {
-        --accordion-font-weight: var(--font-bold);
-    }
-
-    .j-accordion .accordion-header[aria-expanded="false"]:hover {
-        --accordion-bg: var(--ui-surface-hover)
-    }
-
-    .j-accordion .accordion-header .header-arrow {
-        width: var(--accordion-icon-size);
-        height: var(--accordion-icon-size);
-        transition: transform 0.3s ease-out;
-        transform: var(--accordion-icon-transform);
-    }
-
-    .j-accordion .accordion-header[aria-expanded="true"] .header-arrow {
-        --accordion-icon-transform: rotate(180deg);
-    }
-
-    .j-accordion .accordion-panel {
-        margin: var(--accordion-panel-margin);
-        font-size: var(--accordion-font-size);
-    }
-
-    .j-accordion .accordion-panel .panel-content {
-        margin: var(--accordion-panel-content-margin);
-        padding: var(--accordion-panel-content-padding);
-        border-bottom: var(--accordion-border);
-    }
-
-    .j-accordion .accordion-panel:last-child .panel-content {
-        border-bottom: none;
-    }
-}
+  .j-accordion {
+    --accordion-font-size: var(--font-size-md);
+    --accordion-font-weight: var(--font-medium);
+    --accordion-header-font-size: var(--font-size-md);
+    --accordion-header-padding: var(--s2) var(--s3);
+    --accordion-header-margin: 0;
+    --accordion-border: 1px solid var(--ui-border-subtle);
+    --accordion-icon-size: var(--font-size-lg);
+    --accordion-icon-transform: rotate(0deg);
+    --accordion-panel-margin: 0;
+    --accordion-panel-content-margin: 0;
+    --accordion-panel-content-padding: 0 var(--s3) var(--s2);
+  }
+
+  .j-accordion .accordion-header {
+    padding: var(--accordion-header-padding);
+    margin: var(--accordion-header-margin);
+    font-weight: var(--accordion-font-weight);
+    font-size: var(--accordion-header-font-size);
+    background: var(--accordion-bg);
+    border-bottom: var(--accordion-border);
+  }
+
+  .j-accordion .accordion-header[aria-expanded='true'] {
+    border-color: transparent;
+  }
+
+  .j-accordion .accordion-header[aria-expanded='true'] .header-title {
+    --accordion-font-weight: var(--font-bold);
+  }
+
+  .j-accordion .accordion-header[aria-expanded='false']:hover {
+    --accordion-bg: var(--ui-surface-hover);
+  }
+
+  .j-accordion .accordion-header .header-arrow {
+    width: var(--accordion-icon-size);
+    height: var(--accordion-icon-size);
+    transition: transform 0.3s ease-out;
+    transform: var(--accordion-icon-transform);
+  }
+
+  .j-accordion .accordion-header[aria-expanded='true'] .header-arrow {
+    --accordion-icon-transform: rotate(180deg);
+  }
+
+  .j-accordion .accordion-panel {
+    margin: var(--accordion-panel-margin);
+    font-size: var(--accordion-font-size);
+  }
+
+  .j-accordion .accordion-panel .panel-content {
+    margin: var(--accordion-panel-content-margin);
+    padding: var(--accordion-panel-content-padding);
+    border-bottom: var(--accordion-border);
+  }
+
+  .j-accordion .accordion-panel:last-child .panel-content {
+    border-bottom: none;
+  }
+}

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

@@ -1,55 +1,55 @@
 @layer themes {
-    .j-avatar {
-        --avatar-size: var(--el-height-md);
-        --avatar-border-radius: var(--radius-md);
-        --avatar-box-shadow: var(--shadow-sm);
-    }
-
-    .j-avatar.is-2xs {
-        --avatar-size: var(--el-height-2xs);
-    }
-
-    .j-avatar.is-xs {
-        --avatar-size: var(--el-height-xs);
-    }
-
-    .j-avatar.is-sm {
-        --avatar-size: var(--el-height-sm);
-    }
-
-    .j-avatar.is-lg {
-        --avatar-size: var(--el-height-lg);
-    }
-
-    .j-avatar.is-xl {
-        --avatar-size: var(--el-height-xl);
-    }
-
-    .j-avatar.is-2xl {
-        --avatar-size: var(--el-height-2xl);
-    }
-
-    .j-avatar.is-round {
-        --avatar-border-radius: 0.5rem;
-    }
-
-    .j-avatar.is-text {
-        --avatar-bg: var(--tone-subtle);
-        --avatar-fg: var(--tone-solid);
-        --avatar-font-weight: var(--font-medium);
-    }
-
-    .j-avatar-group .j-avatar {
-        --avatar-border: 1.5px solid var(--ui-bg)
-    }
-
-    .j-avatar-group .j-avatar:not(:first-child) {
-        margin-inline-start: calc(var(--space) * -3);
-    }
-
-    .j-avatar-group .j-avatar:last-child {
-        --avatar-font-size: var(--font-size-sm);
-        --avatar-bg: var(--ui-bg);
-        --avatar-box-shadow: var(--shadow-sm);
-    }
-}
+  .j-avatar {
+    --avatar-size: var(--el-height-md);
+    --avatar-border-radius: var(--radius-md);
+    --avatar-box-shadow: var(--shadow-sm);
+  }
+
+  .j-avatar.is-2xs {
+    --avatar-size: var(--el-height-2xs);
+  }
+
+  .j-avatar.is-xs {
+    --avatar-size: var(--el-height-xs);
+  }
+
+  .j-avatar.is-sm {
+    --avatar-size: var(--el-height-sm);
+  }
+
+  .j-avatar.is-lg {
+    --avatar-size: var(--el-height-lg);
+  }
+
+  .j-avatar.is-xl {
+    --avatar-size: var(--el-height-xl);
+  }
+
+  .j-avatar.is-2xl {
+    --avatar-size: var(--el-height-2xl);
+  }
+
+  .j-avatar.is-round {
+    --avatar-border-radius: 0.5rem;
+  }
+
+  .j-avatar.is-text {
+    --avatar-bg: var(--tone-subtle);
+    --avatar-fg: var(--tone-solid);
+    --avatar-font-weight: var(--font-medium);
+  }
+
+  .j-avatar-group .j-avatar {
+    --avatar-border: 1.5px solid var(--ui-bg);
+  }
+
+  .j-avatar-group .j-avatar:not(:first-child) {
+    margin-inline-start: calc(var(--space) * -3);
+  }
+
+  .j-avatar-group .j-avatar:last-child {
+    --avatar-font-size: var(--font-size-sm);
+    --avatar-bg: var(--ui-bg);
+    --avatar-box-shadow: var(--shadow-sm);
+  }
+}

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

@@ -1,63 +1,63 @@
 @layer themes {
-    .j-badge {
-        --badge-padding: 0 calc(var(--space) * 1.5);
-        --badge-min-width: 1.25rem;
-        --badge-height: 1.25rem;
-        --badge-font-size: var(--font-size-sm);
-        --badge-font-weight: var(--font-medium);
-        --badge-line-height: var(--line-height-self);
-        --badge-radius: 500px;
-        --badge-border-color: var(--ui-border);
-        --badge-fg: var(--ui-fg);
-        --badge-bg: var(--ui-bg);
-        --badge-box-shadow: none;
-    }
-
-    .j-badge.is-sm {
-        --badge-padding: 0 calc(var(--space) * 0.75);
-        --badge-min-width: 1rem;
-        --badge-height: 1rem;
-        --badge-font-size: 0.625rem;
-    }
-
-    .j-badge.is-contrast {
-        --badge-bg: var(--ui-fg);
-        --badge-fg: var(--ui-bg);
-    }
-
-    .j-badge.is-primary {
-        --badge-bg: var(--tone-solid);
-        --badge-fg: var(--tone-fg);
-        --badge-border-color: var(--tone-solid);
-    }
-
-    .j-badge.is-secondary {
-        --badge-bg: var(--tone-soft);
-        --badge-fg: var(--tone-text);
-        --badge-border-color: var(--tone-soft);
-    }
-
-    .j-badge.is-success {
-        --badge-bg: var(--state-success);
-        --badge-fg: var(--state-success-fg);
-        --badge-border-color: var(--state-success);
-    }
-
-    .j-badge.is-warning {
-        --badge-bg: var(--state-warning);
-        --badge-fg: var(--state-warning-fg);
-        --badge-border-color: var(--state-warning);
-    }
-
-    .j-badge.is-danger {
-        --badge-bg: var(--state-danger);
-        --badge-fg: var(--state-danger-fg);
-        --badge-border-color: var(--state-danger);
-    }
-
-    .j-badge.is-error {
-        --badge-border-color: var(--state-danger-subtle);
-        --badge-bg: var(--state-danger-subtle);
-        --badge-fg: var(--state-danger-text);
-    }
-}
+  .j-badge {
+    --badge-padding: 0 calc(var(--space) * 1.5);
+    --badge-min-width: 1.25rem;
+    --badge-height: 1.25rem;
+    --badge-font-size: var(--font-size-sm);
+    --badge-font-weight: var(--font-medium);
+    --badge-line-height: var(--line-height-self);
+    --badge-radius: 500px;
+    --badge-border-color: var(--ui-border);
+    --badge-fg: var(--ui-fg);
+    --badge-bg: var(--ui-bg);
+    --badge-box-shadow: none;
+  }
+
+  .j-badge.is-sm {
+    --badge-padding: 0 calc(var(--space) * 0.75);
+    --badge-min-width: 1rem;
+    --badge-height: 1rem;
+    --badge-font-size: 0.625rem;
+  }
+
+  .j-badge.is-contrast {
+    --badge-bg: var(--ui-fg);
+    --badge-fg: var(--ui-bg);
+  }
+
+  .j-badge.is-primary {
+    --badge-bg: var(--tone-solid);
+    --badge-fg: var(--tone-fg);
+    --badge-border-color: var(--tone-solid);
+  }
+
+  .j-badge.is-secondary {
+    --badge-bg: var(--tone-soft);
+    --badge-fg: var(--tone-text);
+    --badge-border-color: var(--tone-soft);
+  }
+
+  .j-badge.is-success {
+    --badge-bg: var(--state-success);
+    --badge-fg: var(--state-success-fg);
+    --badge-border-color: var(--state-success);
+  }
+
+  .j-badge.is-warning {
+    --badge-bg: var(--state-warning);
+    --badge-fg: var(--state-warning-fg);
+    --badge-border-color: var(--state-warning);
+  }
+
+  .j-badge.is-danger {
+    --badge-bg: var(--state-danger);
+    --badge-fg: var(--state-danger-fg);
+    --badge-border-color: var(--state-danger);
+  }
+
+  .j-badge.is-error {
+    --badge-border-color: var(--state-danger-subtle);
+    --badge-bg: var(--state-danger-subtle);
+    --badge-fg: var(--state-danger-text);
+  }
+}