vanilla-jui 1.7.31 → 1.7.33

package/src/css/status.css

@@ -9,16 +9,17 @@
  * - hidden
  */
 @layer status {
+
   /* sad mode */
   .is-sad {
     filter: grayscale(100%);
   }
 
   /* readonly */
-  [readonly] {
+  /* [readonly] {
     opacity: var(--opacity-readonly);
     cursor: default;
-  }
+  } */
 
   /* data-action */
   [data-action] {
@@ -56,4 +57,39 @@
   [hidden] {
     display: none;
   }
-}
+
+  /* flex direction */
+  .is-horizontal {
+    --flex-direction: row;
+  }
+
+  .is-vertical {
+    --flex-direction: column;
+  }
+
+  /* element */
+  .el-text {
+    position: relative;
+  }
+
+  /* height size */
+  .is-xs {
+    --el-height: var(--el-height-xs);
+  }
+
+  .is-sm {
+    --el-height: var(--el-height-sm);
+  }
+
+  .is-md {
+    --el-height: var(--el-height-md);
+  }
+
+  .is-lg {
+    --el-height: var(--el-height-lg);
+  }
+
+  .is-xl {
+    --el-height: var(--el-height-xl);
+  }
+}

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

@@ -1,18 +1,14 @@
 @layer components {
   .j-accordion {
-    --accordion-border: 1px solid var(--ui-border-subtle);
+    --accordion-border: 1px solid var(--ui-border-soft);
     --accordion-icon-transform: rotate(0deg);
 
     display: flex;
-    flex-direction: column;
-  }
-
-  .j-accordion[data-direction='horizontal'] {
-    flex-direction: row;
+    flex-direction: var(--flex-direction, column);
   }
 
   .j-accordion .accordion-header {
-    padding: var(--s2) var(--s3);
+    padding: 8px 12px;
     margin: 0;
     font-weight: var(--font-medium);
     font-size: var(--font-size-md);
@@ -24,14 +20,13 @@
     user-select: none;
   }
 
-  .j-accordion[data-direction='horizontal'] .accordion-header {
-    gap: var(--space);
+  .j-accordion.is-horizontal .accordion-header {
+    gap: 4px;
     border-bottom: 0;
     border-right: var(--accordion-border);
   }
 
-  .j-accordion[data-direction='horizontal']
-    .accordion-header[aria-expanded='true'] {
+  .j-accordion.is-horizontal .accordion-header[aria-expanded='true'] {
     border-right: 0;
   }
 
@@ -39,8 +34,7 @@
     background: var(--ui-bg-subtle);
   }
 
-  .j-accordion[data-direction='horizontal']
-    .accordion-header[aria-expanded='false']:nth-last-child(2) {
+  .j-accordion.is-horizontal .accordion-header[aria-expanded='false']:nth-last-child(2) {
     border-right: 0;
   }
 
@@ -49,31 +43,8 @@
     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 {
-    width: var(--font-size-lg);
-  }
-
-  .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);
+    width: var(--accordion-icon-size, var(--font-size-md));
   }
 
   .j-accordion .accordion-panel {
@@ -88,8 +59,7 @@
     min-height: 2rem;
   }
 
-  .j-accordion[data-direction='horizontal']
-    .accordion-panel[aria-hidden='false'] {
+  .j-accordion.is-horizontal .accordion-panel[aria-hidden='false'] {
     border-right: var(--accordion-border);
     border-bottom: 0;
     flex: 1;
@@ -102,24 +72,22 @@
     border-bottom: 0;
   }
 
-  .j-accordion[data-direction='horizontal'] .accordion-panel:last-child {
+  .j-accordion.is-horizontal .accordion-panel:last-child {
     border-right: 0;
   }
 
   .j-accordion .accordion-panel .panel-content {
     margin: 0;
-    padding: 0 var(--s3) var(--s2);
+    padding: 0 12px 8px;
 
     position: relative;
     min-height: inherit;
   }
 
-  .j-accordion[data-direction='horizontal']
-    .accordion-panel[aria-hidden='false']
-    .panel-content {
+  .j-accordion.is-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

@@ -77,8 +77,7 @@
   }
 
   .j-avatar-group .j-avatar:not(:first-child) {
-    /* margin-inline-start: calc(var(--s3) * -1); */
-    margin-left: calc(var(--s3) * -1);
+    margin-left: -12px;
   }
 
   .j-avatar-group .j-avatar:last-child {
@@ -86,4 +85,4 @@
     --avatar-bg: var(--ui-bg);
     --avatar-box-shadow: var(--shadow-sm);
   }
-}
+}

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

@@ -1,24 +1,15 @@
 @layer components {
   .j-badge {
-    --badge-padding: 0 var(--s1d5);
-    --badge-min-width: 1.25rem;
-    --badge-height: 1.25rem;
-    --badge-font-size: var(--font-size-sm);
-    --badge-border-color: var(--ui-border);
-    --badge-fg: var(--ui-fg);
-    --badge-bg: var(--ui-bg);
-    --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);
+    gap: var(--badge-gap, 4px);
+    padding: var(--badge-padding, 0 6px);
+    min-width: var(--badge-min-width, 1.25rem);
+    height: var(--badge-height, 1.25rem);
+    font-size: var(--badge-font-size, var(--font-size-sm));
     font-weight: var(--font-medium);
     border-radius: 48px;
-    border: 1px solid var(--badge-border-color);
-    color: var(--badge-fg);
-    background-color: var(--badge-bg);
+    border: 1px solid var(--badge-border-color, var(--ui-border));
+    color: var(--badge-fg, var(--ui-fg));
+    background-color: var(--badge-bg, var(--ui-bg));
     box-shadow: none;
 
     display: inline-flex;
@@ -36,7 +27,7 @@
   }
 
   .j-badge.is-sm {
-    --badge-padding: 0 var(--space);
+    --badge-padding: 0 4px;
     --badge-min-width: 1rem;
     --badge-height: 1rem;
     --badge-font-size: var(--font-size-xs);
@@ -46,6 +37,7 @@
   .j-badge.is-reverse {
     --badge-fg: var(--ui-bg);
     --badge-bg: var(--ui-fg);
+    --badge-border-color: var(--ui-fg);
   }
 
   .j-badge.is-solid {
@@ -69,24 +61,24 @@
   .j-badge.is-info {
     --badge-fg: var(--state-info-text);
     --badge-bg: var(--state-info-soft);
-    --badge-border-color: var(--state-info-border);
+    --badge-border-color: var(--state-info-muted);
   }
 
   .j-badge.is-success {
     --badge-fg: var(--state-success-text);
     --badge-bg: var(--state-success-soft);
-    --badge-border-color: var(--state-success-border);
+    --badge-border-color: var(--state-success-muted);
   }
 
   .j-badge.is-warning {
     --badge-fg: var(--state-warning-text);
     --badge-bg: var(--state-warning-soft);
-    --badge-border-color: var(--state-warning-border);
+    --badge-border-color: var(--state-warning-muted);
   }
 
   .j-badge.is-error {
     --badge-fg: var(--state-error-text);
     --badge-bg: var(--state-error-subtle);
-    --badge-border-color: var(--state-error-subtle);
+    --badge-border-color: var(--state-error-muted);
   }
 }

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

@@ -11,8 +11,8 @@
     user-select: none;
   }
 
-  .j-breadcrumb > ol,
-  .j-breadcrumb > ul {
+  .j-breadcrumb>ol,
+  .j-breadcrumb>ul {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
@@ -21,26 +21,26 @@
     padding: 0;
   }
 
-  .j-breadcrumb > ol li,
-  .j-breadcrumb > ul li {
+  .j-breadcrumb>ol li,
+  .j-breadcrumb>ul li {
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
-  .j-breadcrumb li + li::before {
+  .j-breadcrumb li+li::before {
     content: '/';
   }
 
-  .j-breadcrumb.is-dot li + li::before {
+  .j-breadcrumb.is-dot li+li::before {
     content: '•';
   }
 
-  .j-breadcrumb.is-arrow li + li::before {
+  .j-breadcrumb.is-arrow li+li::before {
     content: '>';
   }
 
-  .j-breadcrumb.is-dash li + li::before {
+  .j-breadcrumb.is-dash li+li::before {
     content: '–';
   }
 
@@ -60,7 +60,7 @@
   }
 
   .j-breadcrumb a {
-    gap: var(--space);
+    gap: 4px;
     color: var(--breadcrumb-link-fg);
     padding: 0 var(--s2);
 
@@ -80,7 +80,7 @@
     justify-content: center;
   }
 
-  .j-breadcrumb li + li::before {
+  .j-breadcrumb li+li::before {
     color: var(--ui-fg-soft);
   }
 
@@ -92,7 +92,6 @@
   }
 
   .j-breadcrumb li:first-child a {
-    /* padding-inline-start: 0; */
     padding-left: 0;
   }
 
@@ -105,4 +104,4 @@
   .j-breadcrumb.is-right ol {
     justify-content: flex-end;
   }
-}
+}