vanilla-jui 1.5.35 → 1.5.37

package/src/css/pagination.css

@@ -1,19 +1,9 @@
 @layer components {
-  .j-pagination {
-    font-size: var(--pagination-font-size);
-  }
-
-  .j-pagination a {
-    text-decoration: var(--pagination-link-decoration);
-    color: var(--pagination-link-fg);
-  }
-
   .j-pagination .pagination {
     list-style: none;
     display: flex;
     justify-content: center;
     align-items: center;
-    gap: var(--pagination-gap);
     margin: 0;
     padding: 0;
   }

package/src/css/popup.css

@@ -6,9 +6,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: var(--popup-bg);
-    backdrop-filter: var(--popup-backdrop-filter);
-    padding: var(--popup-layout-padding);
     z-index: var(--z-popup);
   }
 

package/src/css/skeleton.css

@@ -1,19 +1,23 @@
 @layer components {
   .j-skeleton {
-    --skeleton-background: var(--ui-surface-muted);
-    --skeleton-radius: var(--radius-sm, 4px);
-    --skeleton-duration: 1.5s;
-
     display: block;
     width: 100%;
     min-height: var(--el-height-2xs);
-    border-radius: var(--skeleton-radius);
-    background: var(--skeleton-background);
+    border-radius: var(--radius-sm);
+    background: var(--ui-surface-muted);
     color: transparent;
     pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
-    animation: animate-pulse var(--skeleton-duration)
-      cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    -webkit-animation: animate-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    animation: animate-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .j-skeleton::-moz-selection {
+    color: transparent;
+    background: transparent;
   }
 
   .j-skeleton::selection {
@@ -66,11 +70,13 @@
 
   .j-skeleton.skeleton-static,
   .j-skeleton[aria-busy='false'] {
+    -webkit-animation: none;
     animation: none;
   }
 
   @media (prefers-reduced-motion: reduce) {
     .j-skeleton {
+      -webkit-animation: none;
       animation: none;
     }
   }

package/src/css/status.css

@@ -6,6 +6,7 @@
  * - data-action
  * - shape status
  * - drag status
+ * - hidden
  */
 @layer status {
   /* sad mode */
@@ -44,11 +45,15 @@
   }
 
   /* disabled */
-  [disabled],
   :disabled,
   .is-disabled,
   [aria-disabled='true'] {
     cursor: not-allowed;
     user-select: none;
   }
+
+  [hidden],
+  [aria-hidden='true'] {
+    display: none;
+  }
 }

package/src/css/swiper.css

@@ -4,6 +4,9 @@
     display: block;
     overflow: hidden;
     touch-action: pan-y;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     width: 100%;
     min-height: var(--swiper-min-height);
@@ -26,6 +29,9 @@
     overflow: hidden;
     color: inherit;
     text-decoration: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     width: 100%;
     min-width: 100%;
@@ -45,23 +51,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-
-    color: var(--ui-fg-soft);
-    font-size: var(--font-size-md);
     letter-spacing: 1px;
-
-    background-color: var(--tone-wash);
-    background-image: radial-gradient(
-      circle,
-      var(--ui-border) 1px,
-      transparent 1px
-    );
-    background-size: 20px 20px;
   }
 
   .j-swiper .swiper-image {
     position: relative;
     display: block;
+    -o-object-fit: cover;
     object-fit: cover;
     pointer-events: none;
     width: 100%;
@@ -74,16 +70,6 @@
   .j-swiper .swiper-slide-title {
     display: block;
     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;
     z-index: 1;
@@ -93,43 +79,16 @@
   .j-swiper .swiper-pagination {
     position: absolute;
     display: flex;
-    gap: var(--swiper-pagination-gap);
     align-items: center;
     justify-content: center;
     z-index: 2;
   }
 
-  .j-swiper .swiper-pagination.is-horizontal {
-    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);
-    height: var(--swiper-indicator-size);
-    padding: 0;
     cursor: pointer;
-    background: var(--swiper-indicator-bg);
-    border: 0;
     border-radius: 999px;
     outline: none;
-    transition:
-      width var(--duration-fast, 160ms) ease,
-      background-color var(--duration-fast, 160ms) ease,
-      opacity var(--duration-fast, 160ms) ease;
-  }
-
-  .j-swiper .swiper-pagination-indicator:hover,
-  .j-swiper .swiper-pagination-indicator:focus-visible {
-    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);
-    background: var(--swiper-indicator-active-bg);
   }
 
   .j-swiper .swiper-navigation {
@@ -139,37 +98,11 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--swiper-navigation-size);
-    height: var(--swiper-navigation-size);
-    padding: 0;
-    color: var(--swiper-navigation-fg);
     cursor: pointer;
-    background: var(--swiper-navigation-bg);
-    border: 0;
     border-radius: 999px;
-    transform: translateY(-50%);
-    transition:
-      background-color var(--duration-fast, 160ms) ease,
-      opacity var(--duration-fast, 160ms) ease;
-  }
-
-  .j-swiper .swiper-navigation:hover,
-  .j-swiper .swiper-navigation:focus-visible {
-    background: var(--swiper-navigation-hover-bg);
-    outline: none;
-  }
-
-  .j-swiper .swiper-navigation.is-prev {
-    left: var(--swiper-navigation-offset);
-  }
-
-  .j-swiper .swiper-navigation.is-next {
-    right: var(--swiper-navigation-offset);
   }
 
   .j-swiper .swiper-navigation svg {
-    width: var(--swiper-navigation-icon-size);
-    height: var(--swiper-navigation-icon-size);
     pointer-events: none;
   }
 

package/src/css/table.css

@@ -1,41 +1,12 @@
 @layer components {
-  .j-table-container {
-    max-width: 100%;
-    overflow-y: hidden;
-    overflow-x: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--ui-border) transparent;
-  }
-
   table {
-    /* width: var(--table-width); */
     text-indent: 0;
     border-color: inherit;
     border-collapse: collapse;
-    /* border-spacing: 0; */
-  }
-
-  table td,
-  table th {
-    border-width: var(--table-border-width);
-    border-style: var(--table-border-style);
-    border-color: var(--table-border-color);
-    padding: var(--table-cell-padding);
-    text-align: var(--table-cell-text-align);
-    vertical-align: var(--table-cell-vertical-align);
-  }
 
-  table thead th {
-    background: var(--table-striped-bg);
-    font-weight: var(--table-header-font-weight);
-    white-space: nowrap;
-  }
-
-  table tbody td {
-    min-width: var(--table-cell-min-width);
-  }
-
-  table tbody tr:hover {
-    background: var(--table-hover-bg);
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--ui-border) transparent;
+    display: block;
   }
 }

package/src/css/tabs.css

@@ -38,23 +38,16 @@
   }
 
   .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-list-font-weight);
     flex-shrink: 0;
     cursor: pointer;
   }
 
   .j-tabs .panel-list {
-    padding: var(--panel-list-padding);
-    margin: var(--panel-list-margin);
     flex: 1;
   }
 
   .j-tabs .panel-list .panel-item {
     display: none;
-    margin: var(--panel-list-item-margin);
     position: relative;
     min-height: 22px;
   }

package/src/css/theme-palette.css

@@ -1,65 +1,31 @@
 @layer components {
-  .j-theme-palette {
-    padding: var(--palette-padding);
-  }
-
   .j-theme-palette .palette-container {
     display: flex;
     flex-direction: column;
-    gap: var(--palette-container-gap);
   }
 
-  .j-theme-palette .palette-container .palette-item {
+  .j-theme-palette .palette-item {
     display: flex;
     flex-direction: column;
-    gap: var(--palette-item-gap);
-  }
-
-  .j-theme-palette .palette-container .palette-item .item-title {
-    font-size: var(--palette-item-title-font-size);
-    font-weight: var(--palette-item-title-font-weight);
   }
 
-  .j-theme-palette .palette-container .palette-item .items {
+  .j-theme-palette .items {
     display: grid;
-    grid-template-columns: var(--palette-items-columns);
-    gap: var(--palette-items-gap);
+    grid-template-columns: repeat(3, 1fr);
   }
 
-  .j-theme-palette .palette-container .palette-item .items > button {
-    padding-inline: var(--s2);
+  .j-theme-palette .j-button {
     min-width: 0;
     overflow: hidden;
   }
 
-  .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 .j-button .item-hex {
     display: inline-block;
-    width: var(--palette-items-icon-size);
-    height: var(--palette-items-icon-size);
     border-radius: 50%;
     flex-shrink: 0;
-    margin-right: var(--space);
   }
 
-  .j-theme-palette
-    .palette-container
-    .palette-item
-    .items
-    > button
-    span.button-text {
+  .j-theme-palette .j-button .button-text {
     overflow: hidden;
     text-overflow: ellipsis;
   }

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

@@ -1,14 +1,91 @@
 @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-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(--s2) var(--s3);
+    margin: 0;
+    font-weight: var(--accordion-font-weight);
+    font-size: var(--font-size-md);
+
+    border-bottom: var(--accordion-border);
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-header {
+    gap: var(--space);
+    border-bottom: 0;
+    border-right: var(--accordion-border);
+  }
+
+  .j-accordion[data-direction='horizontal']
+    .accordion-header[aria-expanded='true'] {
+    border-right: 0;
+  }
+
+  .j-accordion .accordion-header[aria-expanded='false']:hover {
+    background: var(--ui-bg-subtle);
+  }
+
+  .j-accordion[data-direction='horizontal']
+    .accordion-header[aria-expanded='false']:nth-last-child(2) {
+    border-right: 0;
+  }
+
+  .j-accordion .accordion-header[aria-expanded='true'] .header-title {
+    --accordion-font-weight: var(--font-bold);
+  }
+
+  .j-accordion .accordion-header .header-arrow {
+    transform: var(--accordion-icon-transform);
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-header .header-arrow {
+    --accordion-icon-transform: rotate(-90deg);
+  }
+
+  .j-accordion .accordion-header[aria-expanded='true'] .header-arrow {
+    --accordion-icon-transform: rotate(180deg);
+  }
+
+  .j-accordion[data-direction='horizontal']
+    .accordion-header[aria-expanded='true']
+    .header-arrow {
+    --accordion-icon-transform: rotate(90deg);
+  }
+
+  .j-accordion .accordion-panel {
+    margin: 0;
+    font-size: var(--font-size-md);
+    border-bottom: var(--accordion-border);
+  }
+
+  .j-accordion .accordion-panel[aria-hidden='false'] {
+    min-height: 2rem;
+  }
+
+  .j-accordion[data-direction='horizontal']
+    .accordion-panel[aria-hidden='false'] {
+    border-right: var(--accordion-border);
+    border-bottom: 0;
+    flex: 1;
+  }
+
+  .j-accordion .accordion-header[aria-expanded='true'],
+  .j-accordion .accordion-header[aria-expanded='false']:nth-last-child(2),
+  .j-accordion .accordion-panel[aria-hidden='true'],
+  .j-accordion .accordion-panel:last-child {
+    border-bottom: 0;
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-panel:last-child {
+    border-right: 0;
+  }
+
+  .j-accordion .accordion-panel .panel-content {
+    margin: 0;
+    padding: 0 var(--s3) var(--s2);
   }
 }

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

@@ -3,6 +3,20 @@
     --avatar-size: var(--el-height-md);
     --avatar-border-radius: var(--radius-sm);
     --avatar-box-shadow: var(--shadow-sm);
+
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    box-shadow: var(--avatar-box-shadow);
+    border: var(--avatar-border);
+    border-radius: var(--avatar-border-radius);
+    background: var(--avatar-bg);
+    color: var(--avatar-fg);
+    font-size: var(--avatar-font-size);
+    font-weight: var(--avatar-font-weight);
+  }
+
+  .j-avatar img {
+    border-radius: var(--avatar-border-radius);
   }
 
   .j-avatar.is-2xs {
@@ -44,6 +58,7 @@
   }
 
   .j-avatar-group .j-avatar:not(:first-child) {
+    -webkit-margin-start: calc(var(--space) * -3);
     margin-inline-start: calc(var(--space) * -3);
   }
 

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

@@ -5,19 +5,40 @@
     --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;
+    --badge-gap: 4px;
+
+    gap: var(--badge-gap);
+    padding: var(--badge-padding);
+    min-width: var(--badge-min-width);
+    height: var(--badge-height);
+    font-size: var(--badge-font-size);
+    font-weight: var(--badge-font-weight);
+    border-radius: var(--badge-radius);
+    border: 1px solid var(--badge-border-color);
+    color: var(--badge-fg);
+    background-color: var(--badge-bg);
+    box-shadow: var(--badge-box-shadow);
+  }
+
+  .j-badge svg {
+    width: var(--font-size-sm);
+  }
+
+  .j-badge.is-sm svg {
+    width: var(--font-size-xs);
   }
 
   .j-badge.is-sm {
-    --badge-padding: 0 calc(var(--space) * 0.75);
+    --badge-padding: 0 var(--space);
     --badge-min-width: 1rem;
     --badge-height: 1rem;
-    --badge-font-size: 0.625rem;
+    --badge-font-size: var(--font-size-xs);
+    --badge-gap: 2px;
   }
 
   .j-badge.is-reverse {

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

@@ -6,6 +6,14 @@
     --breadcrumb-divider-fg: var(--ui-fg-soft);
     --breadcrumb-link-fg: var(--tone-text);
     --breadcrumb-item-padding: 0 var(--s2);
+
+    font-size: var(--breadcrumb-font-size);
+    color: var(--breadcrumb-fg);
+  }
+
+  .j-breadcrumb svg {
+    width: var(--breadcrumb-icon-size);
+    height: var(--breadcrumb-icon-size);
   }
 
   .j-breadcrumb.is-sm {
@@ -18,10 +26,20 @@
     --breadcrumb-icon-size: var(--font-size-lg);
   }
 
+  .j-breadcrumb a {
+    gap: var(--space);
+    color: var(--breadcrumb-link-fg);
+    padding: var(--breadcrumb-item-padding);
+  }
+
   .j-breadcrumb a:hover {
     --breadcrumb-link-fg: var(--tone-solid);
   }
 
+  .j-breadcrumb li + li::before {
+    color: var(--breadcrumb-divider-fg);
+  }
+
   .j-breadcrumb li.is-active a {
     --breadcrumb-link-fg: var(--ui-fg-muted);
   }